/* ======================================================
   GOOGLE FONTS
====================================================== */

:root{

    --white:#F8F5EF;
    --gold:#C8A46A;
    --text:#1A1A1A;
    --transition:.35s ease;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

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

    overflow-x:hidden;

    color:var(--text);

}

/* ======================================================
   HERO
====================================================== */

.hero{

    position:relative;

    width:100%;

    height:100vh;

    background-image:url("../assets/images/hero.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

}

/* Left gradient */

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.18) 38%,
        rgba(0,0,0,.05) 60%,
        transparent 100%
    );

}

/* ======================================================
   NAVBAR
====================================================== */

.header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:100;

}

.navbar{

    width:92%;

    max-width:1450px;

    height:95px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* Logo */

.logo{

    font-size:1.55rem;

    letter-spacing:4px;

    font-weight:500;

    color:white;

    text-transform:uppercase;

}

/* Links */

.nav-links{

    display:flex;

    gap:48px;

    list-style:none;

}

.nav-links a{

    text-decoration:none;

    color:white;

    text-transform:uppercase;

    font-size:.82rem;

    letter-spacing:2px;

    transition:.3s;

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:var(--gold);

    transition:.35s;

}

.nav-links a:hover{

    color:var(--gold);

}

.nav-links a:hover::after{

    width:100%;

}

/* Button */

.nav-btn{

    text-decoration:none;

    color:white;

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

    padding:17px 34px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.8rem;

    transition:.35s;

}

.nav-btn:hover{

    background:var(--gold);

    border-color:var(--gold);

}

/* ======================================================
   HERO CONTENT
====================================================== */

.hero-content{

    position:relative;

    z-index:5;

    width:620px;

    margin-left:100px;

    margin-top:80px;

    color:white;

}

.eyebrow{

    display:inline-block;

    font-size:.82rem;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:28px;

    color:#E2D3B5;

}

.hero-content h1{

    font-family:'Cormorant Garamond',serif;

    font-size:6rem;

    font-weight:500;

    line-height:.95;

    margin-bottom:36px;

}

.hero-content p{

    width:520px;

    max-width:100%;

    font-size:1.18rem;

    line-height:1.9;

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

    margin-bottom:45px;

}

/* ======================================================
   BUTTONS
====================================================== */

.hero-buttons{

    display:flex;

    gap:20px;

}

.primary-btn{

    background:#C39A5E;

    color:white;

    text-decoration:none;

    padding:18px 38px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.82rem;

    transition:.35s;

}

.primary-btn:hover{

    background:#AD844A;

}

.secondary-btn{

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

    color:white;

    text-decoration:none;

    padding:18px 38px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.82rem;

    transition:.35s;

}

.secondary-btn:hover{

    background:white;

    color:black;

}

/* ==========================================================
   SIGNATURE COLLECTION
========================================================== */

.signature-section{

    background:#F8F6F2;

    padding:130px 0 140px;

}

/* ---------- Heading ---------- */

.section-heading{

    width:760px;

    max-width:90%;

    margin:0 auto;

    text-align:center;

}

.section-tag{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.78rem;

    color:#B68A4C;

    position:relative;

    margin-bottom:28px;

}

.section-tag::after{

    content:"";

    display:block;

    width:42px;

    height:1px;

    background:#C9A36B;

    margin:14px auto 0;

}

.section-heading h2{

    font-family:'Cormorant Garamond',serif;

    font-size:4rem;

    font-weight:500;

    line-height:1.08;

    color:#1E1E1E;

    margin-bottom:28px;

}

.section-heading p{

    width:620px;

    max-width:100%;

    margin:auto;

    color:#666;

    line-height:1.9;

    font-size:1.05rem;

}

/* ==========================================================
   GRID
========================================================== */

.signature-grid{

    width:92%;

    max-width:1450px;

    margin:90px auto 70px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

/* ==========================================================
   CARD
========================================================== */

.dish-card{

    transition:.35s ease;

}

.dish-card:hover{

    transform:translateY(-8px);

}

.dish-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}

/* ==========================================================
   CONTENT
========================================================== */

.dish-content{

    text-align:center;

    padding-top:28px;

}

.dish-content h3{

    font-size:1.05rem;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

    color:#A57A43;

    margin-bottom:16px;

}

.dish-content p{

    color:#666;

    line-height:1.7;

    font-size:.95rem;

    width:85%;

    margin:auto;

}

.dish-content span{

    display:block;

    margin-top:24px;

    font-size:1rem;

    color:#1A1A1A;

    letter-spacing:1px;

}

/* ==========================================================
   BUTTON
========================================================== */

.menu-button{

    text-align:center;

}

.menu-button a{

    display:inline-block;

    padding:18px 46px;

    border:1px solid #C8A46A;

    text-decoration:none;

    color:#A77E49;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.82rem;

    transition:.35s;

}

.menu-button a:hover{

    background:#C8A46A;

    color:white;

}

/* ==========================================================
   STORY
========================================================== */

.story-section{

    display:grid;

    grid-template-columns:1fr 1fr;

    min-height:720px;

}

/* =======================
   LEFT
======================= */

.story-left{

    background:#F8F6F2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:110px;

}

.story-tag{

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.82rem;

    color:#B58A4C;

    margin-bottom:22px;

    position:relative;

}

.story-tag::after{

    content:"";

    display:block;

    width:48px;

    height:1px;

    background:#C8A46A;

    margin-top:15px;

}

.story-left h2{

    font-family:'Cormorant Garamond',serif;

    font-size:4.5rem;

    font-weight:500;

    line-height:1.08;

    color:#1D1D1D;

    margin-bottom:34px;

}

.story-left p{

    width:470px;

    max-width:100%;

    color:#666;

    font-size:1.08rem;

    line-height:2;

    margin-bottom:55px;

}

/* =======================
   LINK
======================= */

.story-link{

    display:inline-flex;

    align-items:center;

    gap:14px;

    width:max-content;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#B58A4C;

    font-size:.9rem;

    font-weight:600;

    transition:.35s;

}

.story-link span{

    font-size:1.2rem;

    transition:.35s;

}

.story-link:hover span{

    transform:translateX(8px);

}

/* =======================
   RIGHT
======================= */

.story-right{

    overflow:hidden;

}

.story-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .8s ease;

}

.story-right:hover img{

    transform:scale(1.05);

}

/* ==========================================================
   RESERVATIONS
========================================================== */

.reservation-section{

    margin-top: 20px;

    background-color: #F8F5EF;;

    position:relative;

    width:100%;

    min-height:700px;

    background:url("../assets/images/reservation.jpg") center center/cover no-repeat;

    overflow:hidden;

}

/* ========================================= */

.reservation-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(10,10,10,.82) 0%,

        rgba(10,10,10,.76) 34%,

        rgba(10,10,10,.45) 58%,

        rgba(10,10,10,.12) 100%

    );

}

/* ========================================= */

.reservation-container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1400px;

    height:700px;

    margin:auto;

    display:grid;

    grid-template-columns:58% 42%;

    align-items:center;

}

/* ========================================= */

.reservation-content{

    width:100%;

    max-width:760px;

    color:white;

}

/* ========================================= */

.reservation-tag{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.8rem;

    color:#C9A46A;

    margin-bottom:22px;

    position:relative;

}

.reservation-tag::after{

    content:"";

    display:block;

    width:46px;

    height:1px;

    background:#C9A46A;

    margin-top:14px;

}

/* ========================================= */

.reservation-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:5rem;

    font-weight:500;

    line-height:1;

    margin-bottom:28px;

}

/* ========================================= */

.reservation-content p{

    font-size:1.1rem;

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

    width:520px;

    line-height:1.8;

    margin-bottom:52px;

}

/* ========================================= */

.reservation-form{

    display:grid;

    grid-template-columns:

    210px
    210px
    210px
    220px;

    gap:18px;

    align-items:center;

}

/* ========================================= */

.reservation-field{

    height:64px;

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

    background:rgba(0,0,0,.18);

    display:flex;

    align-items:center;

    padding:0 22px;

    transition:.35s;

}

.reservation-field:hover{

    border-color:#C9A46A;

}

/* ========================================= */

.reservation-field i{

    color:#C9A46A;

    margin-right:14px;

    font-size:.95rem;

}

/* ========================================= */

.reservation-field select{

    flex:1;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:.92rem;

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

    appearance:none;

    cursor:pointer;

}

.reservation-field option{

    color:#111;

}

/* ========================================= */

.reservation-form button{

    height:64px;

    border:none;

    cursor:pointer;

    background:#C9A46A;

    color:white;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.82rem;

    font-weight:600;

    transition:.35s;

}

.reservation-form button:hover{

    background:#B88E53;

}

.reservation-form button:hover{

    background:#B18C55;

    transform:translateY(-2px);

}

/* ==========================================================
   GALLERY
========================================================== */

.gallery-section{

    background:#F8F6F2;

    padding:130px 0;

}

/* ===================== */

.gallery-heading{

    text-align:center;

    margin-bottom:70px;

}

.gallery-tag{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.8rem;

    color:#C39A5E;

    position:relative;

    margin-bottom:22px;

}

.gallery-tag::after{

    content:"";

    display:block;

    width:46px;

    height:1px;

    background:#C39A5E;

    margin:14px auto 0;

}

.gallery-heading h2{

    font-family:'Cormorant Garamond',serif;

    font-size:4rem;

    font-weight:500;

    color:#1C1C1C;

}

/* ===================== */

.gallery-grid{

    width:92%;

    max-width:1600px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:18px;

}

/* ===================== */

.gallery-item{

    overflow:hidden;

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

    transition:transform .7s ease;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/* ===================== */

.gallery-button{

    width:max-content;

    margin:65px auto 0;

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#C39A5E;

    font-size:.88rem;

    font-weight:600;

    transition:.35s;

}

.gallery-button span{

    transition:.35s;

}

.gallery-button:hover span{

    transform:translateX(8px);

}

/* ==========================================================
   TESTIMONIAL
========================================================== */

.testimonial-section{

    position:relative;

    width:100%;

    min-height:560px;

    background:url("../assets/images/testimonial-bg.jpg") center center/cover no-repeat;

    overflow:hidden;

}

/* ===================================== */

.testimonial-overlay{

    position:absolute;

    inset:0;

    background:rgba(8,8,8,.62);

    backdrop-filter:blur(1px);

}

/* ===================================== */

.testimonial-container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1200px;

    min-height:560px;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

/* ===================================== */

.testimonial-tag{

    color:#C9A46A;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    position:relative;

    margin-bottom:42px;

}

.testimonial-tag::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-18px;

    width:52px;

    height:1px;

    background:#C9A46A;

}

/* ===================================== */

.testimonial-quote{

    max-width:900px;

    font-family:'Cormorant Garamond',serif;

    font-size:4.4rem;

    line-height:1.15;

    font-weight:400;

    color:#F5F2EE;

    margin-bottom:28px;

}

/* ===================================== */

.testimonial-description{

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

    font-size:1.18rem;

    margin-bottom:38px;

}

/* ===================================== */

.testimonial-author{

    color:#C9A46A;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.95rem;

    margin-bottom:42px;

}

/* ===================================== */

.testimonial-controls{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:45px;

}

/* ===================================== */

.testimonial-arrow{

    width:62px;

    height:62px;

    border-radius:50%;

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

    background:transparent;

    color:white;

    font-size:1.4rem;

    cursor:pointer;

    transition:.35s;

}

.testimonial-arrow:hover{

    background:#C9A46A;

    border-color:#C9A46A;

    transform:translateY(-2px);

}

/* ===================================== */

.testimonial-dots{

    display:flex;

    gap:14px;

}

.dot{

    width:8px;

    height:8px;

    border-radius:50%;

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

    transition:.35s;

}

.dot.active{

    background:#C9A46A;

    transform:scale(1.3);

}

/*==========================================
FOOTER
==========================================*/

.footer{
    background:#faf8f4;
    padding:75px 5% 0;
}

.footer-container{
    display:grid;
    grid-template-columns:
1.45fr
0.95fr
1fr
1.35fr;

gap:90px;
align-items:flex-start;
    padding-bottom:48px;
}

.footer-column h4,
.footer-brand h2{
    font-family:'Cormorant Garamond',serif;
    font-size:26px;
    font-weight:500;
    letter-spacing:2px;
    line-height:1;
    margin-bottom:38px;
    white-space:nowrap;
}

.footer-brand h2{
    font-size:42px;
    letter-spacing:1px;
    text-transform:none;
}

.footer-column p{

    font-size:15px;
line-height:2;
max-width:270px;
color:#6c6c6c;
    margin-bottom:34px;
}

.footer-column ul{
    list-style:none;
}

.footer-column ul li{
    margin-bottom:18px;
}

.footer-column ul li a{

    color:#5d5d5d;
    text-decoration:none;
    font-size:15px;
font-weight:500;
margin-bottom:20px;
    transition:.35s;
    position:relative;
}

.footer-column ul li a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-5px;

    width:0;
    height:1px;

    background:#b58a47;
    transition:.35s;
}

.footer-column ul li a:hover{

    color:#111;
}

.footer-column ul li a:hover::after{

    width:100%;
}

/*========================
SOCIAL
========================*/

.footer-social{

    display:flex;
    gap:26px;
}

.footer-social a{

    width:48px;
    height:48px;

    border:1px solid #ddd;

    border-radius:50%;

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

    color:#555;

    font-size:15px;
font-weight:600;
letter-spacing:3px;
margin-bottom:32px;

    transition:.35s;
}

.footer-social a:hover{

    background:#b58a47;
    border-color:#b58a47;
    color:#fff;

    transform:translateY(-4px);
}

/*========================
NEWSLETTER
========================*/

.newsletter-form{

    display:flex;
    border:1px solid #d6c7ae;
    overflow:hidden;
    margin-top:30px;

height:60px;

border:1px solid #dbcdb4;

max-width:355px;
    transition:.35s;
}

.newsletter-form:hover{

    border-color:#b58a47;
}

.newsletter-form input{

    flex:1;
    border:none;
    outline:none;

    background:transparent;

    padding:0 24px;
font-size:15px;

    color:#222;
}

.newsletter-form input::placeholder{

    color:#9c9c9c;
}

.newsletter-form button{

    width:70px;
font-size:22px;

    border:none;

    background:transparent;

    color:#b58a47;

    font-size:20px;

    cursor:pointer;

    transition:.35s;
}

.newsletter-form button:hover{

    background:#b58a47;
    color:#fff;
}

/*========================
BOTTOM BAR
========================*/

.footer-bottom{

    text-align:center;

    background:#111;

    color:#ddd;

    padding:18px;

font-size:14px;

letter-spacing:.5px;
}

/*========================
RESPONSIVE
========================*/

@media(max-width:1100px){

.footer-container{

grid-template-columns:1fr 1fr;

gap:60px;

}

}

@media(max-width:700px){

.footer{

padding:70px 30px 0;

}

.footer-container{

grid-template-columns:1fr;

gap:45px;

}

.footer-brand h2{

font-size:36px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form button{

width:100%;
height:60px;

}

.footer-bottom{

font-size:13px;

}

}