/* =======================================================
   HOUSE OF VERONA
   PHASE 1 STYLE.CSS
   Premium Nature + European Cafe Theme
======================================================= */

/* ---------------- ROOT ---------------- */

:root{

--bg:#f7f4ed;
--surface:#ffffff;
--surface-light:#fcfaf7;

--primary:#2f4f3b;
--primary-light:#486b55;

--accent:#b89146;
--accent-light:#d9bb7a;

--text:#222222;
--text-light:#666666;

--border:rgba(0,0,0,.08);

--radius-sm:8px;
--radius:18px;
--radius-lg:28px;

--shadow:
0 10px 35px rgba(0,0,0,.08);

--transition:.3s ease;

--container:1280px;

}

/* ---------------- RESET ---------------- */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

font-family:"Manrope",sans-serif;

color:var(--text);

line-height:1.8;

overflow-x:hidden;

}

/* ---------------- TYPOGRAPHY ---------------- */

h1,h2,h3,h4{

font-family:"Cormorant Garamond",serif;

font-weight:600;

letter-spacing:.5px;

color:var(--primary);

}

h1{

font-size:clamp(3rem,8vw,6rem);

line-height:1;

margin-bottom:25px;

}

h2{

font-size:clamp(2.4rem,6vw,4rem);

margin-bottom:20px;

}

h3{

font-size:2rem;

margin-bottom:10px;

}

p{

font-size:1.05rem;

color:var(--text-light);

max-width:700px;

}

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}

img{

display:block;

width:100%;

}

/* ---------------- CONTAINER ---------------- */

.container{

width:min(92%,var(--container));

margin:auto;

}

/* ---------------- BUTTON ---------------- */

.button,

.hero-buttons a{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border-radius:999px;

font-weight:600;

transition:var(--transition);

background:var(--primary);

color:white;

border:none;

cursor:pointer;

box-shadow:var(--shadow);

}

.button:hover,

.hero-buttons a:hover{

transform:translateY(-4px);

background:var(--primary-light);

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:40px;

}

/* ---------------- HEADER ---------------- */

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

backdrop-filter:blur(18px);

background:rgba(247,244,237,.72);

border-bottom:1px solid rgba(255,255,255,.3);

transition:.35s;

}

/* ---------------- NAV ---------------- */

nav{

width:min(94%,1280px);

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:20px 0;

}

.logo{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

font-weight:700;

color:var(--primary);

letter-spacing:1px;

}

nav ul{

display:flex;

list-style:none;

gap:35px;

}

nav li{

font-weight:600;

font-size:.96rem;

}

nav a{

position:relative;

}

nav ul a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--accent);

transition:.3s;

}

nav ul a:hover::after{

width:100%;

}

/* ---------------- HERO ---------------- */

.hero{

min-height: auto;

display: flex;

flex-direction: column;
   
align-item: centre;
   
justify-content: centre;
   
position:relative;

padding: 60px 0;

background:

linear-gradient(

135deg,

rgba(247,244,237,.95),

rgba(237,232,221,.85)

);

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:

rgba(184,145,70,.08);

top:-220px;

right:-180px;

filter:blur(10px);

}

.hero::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:

rgba(47,79,59,.08);

bottom:-180px;

left:-100px;

}

.overlay{

display:none;

}

.hero-content{

width:min(92%,1280px);

margin:auto;

position:relative;

z-index:2;

}

.hero span{

display:inline-block;

padding:10px 20px;

border-radius:999px;

background:white;

box-shadow:var(--shadow);

font-size:.9rem;

font-weight:700;

letter-spacing:1px;

margin-bottom:25px;

color:var(--primary);

}

.hero p{

font-size:1.18rem;

max-width:650px;

}

/* ---------------- SECTION ---------------- */

section{

padding:120px 0;

}

/* ---------------- CARD BASE ---------------- */

.card,

.menu-item{background:var(--surface);

border-radius:var(--radius);

padding:35px;

box-shadow:var(--shadow);

transition:var(--transition);

border:1px solid var(--border);

}

.card:hover,

.menu-item:hover{

transform:translateY(-10px);

}

/* ---------------- GRID ---------------- */

.cards,

.menu-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:50px;

}

/* ---------------- GLASS EFFECT ---------------- */

.glass{

background:rgba(255,255,255,.6);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.4);

border-radius:var(--radius);

}

/* ---------------- SCROLLBAR ---------------- */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#efeae2;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-light);

}

/* ---------------- SELECTION ---------------- */

::selection{

background:var(--primary);

color:white;

}

/* ---------------- ANIMATION ---------------- */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.hero-content{

animation:float 8s ease-in-out infinite;

}
/*---------------- STORY ----------------*/

#story{

background:linear-gradient(
180deg,
#fcfaf7,
#f6f1e8
);

text-align:center;

position:relative;

overflow:hidden;

}

#story::before{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(184,145,70,.08);

left:-100px;

top:50px;

}

#story .container{

position:relative;

z-index:2;

}

#story p{

margin:auto;

margin-top:25px;

font-size:1.15rem;

line-height:2;

}



/*---------------- JOURNEY ----------------*/

#journey{

background:white;

}

.cards{

align-items:stretch;

}

.card{

position:relative;

overflow:hidden;

}

.card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:

linear-gradient(
90deg,
var(--primary),
var(--accent)
);

}

.card:hover{

box-shadow:

0 20px 60px rgba(0,0,0,.12);

}

.card p{

margin-top:15px;

}



/*---------------- MENU ----------------*/

#menu{

background:

linear-gradient(
180deg,
#f8f5ef,
#ffffff
);

text-align:center;

}

.menu-grid{

margin-top:60px;

}

.menu-item{

cursor:pointer;

position:relative;

overflow:hidden;

}

.menu-item::after{

content:"→";

position:absolute;

right:30px;

bottom:25px;

font-size:1.5rem;

opacity:.2;

transition:.3s;

}

.menu-item:hover::after{

opacity:1;

transform:translateX(8px);

}

.menu-item h3{

margin-bottom:15px;

}

.menu-item p{

color:var(--primary);

font-weight:700;

}



/*---------------- GALLERY ----------------*/

#gallery{

background:var(--bg);

text-align:center;

}

.gallery-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:20px;

margin-top:60px;

}

.gallery-grid div{

height:280px;

border-radius:24px;

background:

linear-gradient(
135deg,
#d9d1c2,
#efe7d9
);

transition:.4s;

box-shadow:var(--shadow);

}

.gallery-grid div:nth-child(2),

.gallery-grid div:nth-child(5){

height:360px;

}

.gallery-grid div:hover{

transform:scale(1.03);

}



/*---------------- EXPERIENCE ----------------*/

.experience{

background:

linear-gradient(
135deg,
var(--primary),
#22382a
);

text-align:center;

color:white;

}

.experience h2{

color:white;

}

.experience p{

margin:auto;

color:rgba(255,255,255,.85);

font-size:1.2rem;

line-height:2.2;

}



/*---------------- REVIEWS ----------------*/

.reviews{

background:white;

text-align:center;

}

.review-slider{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:60px;

}

.review-slider article{

background:var(--surface);

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

font-size:1.1rem;

font-style:italic;

transition:.3s;

}

.review-slider article:hover{

transform:translateY(-8px);

}



/*---------------- VISIT ----------------*/

#visit{

background:

linear-gradient(
180deg,
#f9f7f2,
#f2ede5
);

text-align:center;

}

#visit p{

margin:auto;

margin-top:20px;

margin-bottom:40px;

}

#visit a{

display:inline-block;

padding:18px 38px;

border-radius:999px;

background:var(--primary);

color:white;

font-weight:700;

transition:.3s;

}

#visit a:hover{

background:var(--accent);

transform:translateY(-4px);

}



/*---------------- FOOTER ----------------*/

footer{

background:#1d2e23;

padding:90px 0;

text-align:center;

}

footer h3{

color:white;

font-size:2.4rem;

margin-bottom:15px;

}

footer p{

color:rgba(255,255,255,.7);

margin:auto;

margin-top:10px;

}



/*---------------- FADE ANIMATION ----------------*/

section{

animation:

fadeup .9s ease both;

}

@keyframes fadeup{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*---------------- HOVER ----------------*/

h2{

transition:.3s;

}

h2:hover{

letter-spacing:1px;

}

.card,

.menu-item,

.gallery-grid div,

.review-slider article{

transition:

transform .35s ease,

box-shadow .35s ease;

}
/*---------------- RESPONSIVE ----------------*/

@media(max-width:1024px){

nav{

flex-wrap:wrap;

gap:20px;

}

nav ul{

gap:20px;

}

.hero{

text-align:center;

}

.hero p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

}



@media(max-width:768px){

section{

padding:80px 0;

}

h1{

font-size:3.5rem;

}

h2{

font-size:2.6rem;

}

nav{

padding:15px 0;

}

nav ul{

display:none;

}

.logo{

font-size:1.8rem;

}

.button{

padding:14px 24px;

}

.cards,

.menu-grid,

.gallery-grid,

.review-slider{

grid-template-columns:1fr;

}

.gallery-grid div,

.gallery-grid div:nth-child(2),

.gallery-grid div:nth-child(5){

height:240px;

}

.hero{

padding-top:100px;

min-height:90vh;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

}



@media(max-width:480px){

body{

font-size:15px;

}

.container{

width:92%;

}

.hero span{

font-size:.8rem;

}

.hero p{

font-size:1rem;

}

.card,

.menu-item,

.review-slider article{

padding:28px;

}

footer{

padding:60px 0;

}

}



/*---------------- PREMIUM DETAILS ----------------*/

.button,

#visit a{

background:

linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);

}

.button:hover,

#visit a:hover{

box-shadow:

0 15px 40px rgba(47,79,59,.25);

}

.card:hover,

.menu-item:hover,

.review-slider article:hover{

border-color:rgba(184,145,70,.35);

}

.gallery-grid div{

cursor:pointer;

}

body{

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

/* ==========================
PREMIUM SOCIAL CARDS
========================== */

.social-buttons{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
margin-top:50px;

}

.social-card{

display:flex;
align-items:center;
gap:18px;

padding:18px 28px;

min-width:280px;

background:#ffffff;

border:1px solid rgba(0,0,0,.08);

border-radius:18px;

text-decoration:none;

color:#1b1b1b;

transition:.35s;

box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.social-card:hover{

transform:translateY(-6px);

box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.social-card .icon{

font-size:32px;

}

.social-card strong{

display:block;

font-size:18px;

font-weight:700;

}

.social-card small{

color:#666;

font-size:14px;

}

.instagram:hover{

border-color:#E1306C;

}

.facebook:hover{

border-color:#1877F2;

}

.youtube:hover{

border-color:#FF0000;

}

@media(max-width:768px){

.social-card{

width:100%;

min-width:100%;

}

}
.social-buttons{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
margin-top:40px;

}

.social-buttons .button{

display:inline-flex;
align-items:center;
justify-content:center;

padding:18px 34px;

border-radius:999px;

font-weight:600;

font-size:17px;

text-decoration:none;

min-width:260px;

transition:.3s;

}

.social-buttons .button:hover{

transform:translateY(-3px);

}

html {
    scroll-behavior: smooth;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #111;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.1);
    z-index: 9999;
}

.bottom-nav a {
    color: #f5f5f5;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
}

.bottom-nav a:hover {
    color: #c8a96a;
}

body {
    padding-bottom: 90px;
}