/*========================================
        GOOGLE FONT & RESET
=========================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#F8F5F0;
    color:#2C1810;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

/*========================================
            COLORS
=========================================*/

:root{

    --coffee:#6F4E37;
    --espresso:#2C1810;
    --cream:#F8F5F0;
    --latte:#E9DDC8;
    --gold:#C8A96A;
    --white:#ffffff;

}


/*========================================
            NAVIGATION
=========================================*/

header{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    transition: .4s ease;
}

nav{

    width:90%;
    max-width:1400px;

    margin:auto;

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

    padding:25px 0;

    transition:.4s ease;

}

.logo{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    font-weight:700;

    color:var(--white);

}

.logo span{

    color:var(--gold);

}

.nav-links{

    display:flex;

    gap:45px;

}

.nav-links a{

    color:white;

    font-weight:500;

    position:relative;

    transition:.3s;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:var(--gold);

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}

.nav-btn{

    color:white;

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

    padding:12px 28px;

    border-radius:50px;

    transition:.3s;

}

.nav-btn:hover{

    background:white;

    color:var(--espresso);

}

/*========================================
            HAMBURGER
=========================================*/

.hamburger{

    display:none;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

    z-index:1100;

}

.hamburger span{

    width:28px;

    height:3px;

    background:white;

    border-radius:5px;

    transition:.35s;

}

/*==========================
        SCROLLED NAV
===========================*/

header.scrolled{

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

    backdrop-filter:blur(18px);

    box-shadow:0 5px 25px rgba(0,0,0,.08);

}

header.scrolled nav{

    padding:18px 0;

}
header.scrolled .nav-links a{
    color: #111;
}

header.scrolled .logo{
    color: #111;
}

header.scrolled .logo span{
    color: var(--gold);
}

header.scrolled .nav-btn{
    color: #111;
    border: 1px solid #111;
}

header.scrolled .nav-btn:hover{

    background:var(--coffee);

    color:white;

}

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

#hero{

    position:relative;

    width:100%;
    height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

}

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

.hero-image{
    position:absolute;
    inset:0;

    background:url("images/hero.webp") center center/cover no-repeat;

    transform:scale(1.08);

    animation:heroZoom 18s ease-in-out infinite alternate;

    z-index:1;
}

/* Dark Overlay */

.overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.70) 0%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.20) 100%
    );

    z-index:2;
}

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

.hero-content{
    position: relative;
    z-index: 3;

    width: 90%;
    max-width: 1400px;

    margin: 0 auto;
    padding-left: 5%;

    color: white;
}

.subtitle{

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.9rem;

    color:var(--gold);

    margin-bottom:20px;
}

.hero-content h1{

    font-family:'Playfair Display', serif;

    font-size:5.5rem;

    line-height:1.1;

    max-width:700px;

    margin-bottom:30px;
}

.description{

    max-width:600px;

    font-size:1.15rem;

    line-height:1.8;

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

    margin-bottom:45px;
}

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

.hero-buttons{

    display:flex;
    gap:20px;
}

.btn-primary{

    background:var(--gold);

    color:white;

    padding:18px 42px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;
}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(0,0,0,.25);
}

.btn-secondary{

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

    color:white;

    padding:18px 42px;

    border-radius:50px;

    transition:.35s;
}

.btn-secondary:hover{

    background:white;

    color:var(--espresso);
}


/*========================================
        SCROLL INDICATOR
=========================================*/

.scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    z-index:5;

    color:white;

    text-align:center;
}

.scroll span{

    display:block;

    width:2px;

    height:55px;

    background:white;

    margin:auto;

    animation:scrollDown 2s infinite;
}

.scroll p{

    margin-top:10px;

    font-size:.85rem;

    letter-spacing:3px;

    text-transform:uppercase;
}


/*========================================
            ANIMATIONS
=========================================*/

@keyframes heroZoom{

    from{
        transform:scale(1.08);
    }

    to{
        transform:scale(1.18);
    }

}

@keyframes scrollDown{

    0%{
        opacity:0;
        transform:translateY(-12px);
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translateY(12px);
    }

}

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

.hero-content>*{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .8s forwards;

}

.subtitle{

    animation-delay:.2s;

}

.hero-content h1{

    animation-delay:.4s;

}

.description{

    animation-delay:.6s;

}

.hero-buttons{

    animation-delay:.8s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*========================================
                ABOUT
=========================================*/

#about{

    padding:80px 10%;

    background:var(--cream);

}

.about-container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

   align-items:start;
   

}

.about-content{

    padding-top:40px;

}

.about-image{

    position:relative;

    border-radius:25px;

}
.about-accent{

    position:absolute;

    width:220px;

    height:220px;

    background:var(--gold);

    border-radius:25px;

    bottom:-25px;

    right:-25px;

    z-index:-1;

    opacity:.18;

}

.about-image img{

    width:100%;

    display:block;

    border-radius:25px;

    transition:.6s;

    height:650px;

    object-fit:cover;

}

.about-image:hover img{

    transform:scale(1.05);

}

.section-subtitle{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.9rem;

    margin-bottom:20px;

}

.about-content h2{

    font-family:'Playfair Display', serif;

    font-size:3.2rem;

    line-height:1.2;

    margin-bottom:25px;

    color:var(--espresso);

}

.about-content p{

    font-size:1.05rem;

    line-height:1.9;

    color:#555;

    margin-bottom:40px;

}

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:var(--coffee);

    color:white;

    padding:16px 36px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.about-btn:hover{

    background:var(--gold);

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.coffee-quote{

    border-left:4px solid var(--gold);

    padding-left:20px;

    margin:35px 0;

    font-style:italic;

    font-size:1.05rem;

    color:#666;

}

/*========================================
                STATS
=========================================*/

#stats{

    background:#F8F4EF;

    padding:0;

    margin:0;

}

.stats-container{
    width: 100%;
    background: #3B2218;

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

    align-items: center;
    text-align: center;

    padding: 50px 8%;
}

.stat-box h2{
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: #C8A96A;
    margin-bottom: 10px;
}

.stat-box p{
    color: rgba(255,255,255,.85);
    font-size: .9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/*========================================
          FEATURED DRINKS
=========================================*/

#menu{

    padding:120px 10%;
    background:#F8F4EF;

}

.menu-heading{

    text-align:center;
    margin-bottom:70px;

}

.menu-heading p{

    color:#C8A96A;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:15px;

}

.menu-heading h2{

    font-family:'Playfair Display', serif;
    font-size:3rem;
    color:#3B2218;
    margin-bottom:15px;

}

.menu-heading span{

    color:#666;

}

.menu-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

}

.menu-card{

    background:white;
    border-radius:20px;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.menu-card:hover{

    transform:translateY(-10px);

}

.menu-card img{

    width:100%;
    height:320px;
    object-fit:cover;

}

.menu-content{

    padding:30px;

}

.menu-content h3{

    font-family:'Playfair Display', serif;
    margin-bottom:15px;
    color:#3B2218;

}

.menu-content p{

    color:#666;
    line-height:1.7;
    margin-bottom:25px;

}

.price-row{

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

}

.price{

    font-size:1.4rem;
    font-weight:700;
    color:#3B2218;

}

.price-row a{

    background:#C8A96A;
    color:white;
    padding:10px 22px;
    border-radius:50px;
    transition:.3s;

}

.price-row a:hover{

    background:#3B2218;

}

/*========================================
                BAKERY
=========================================*/

#bakery{

    padding:120px 10%;
    background:white;

}

.bakery-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;

}

.bakery-image img{

    width:100%;
    border-radius:25px;
    display:block;
    transition:.5s;

}

.bakery-image:hover img{

    transform:scale(1.05);

}

.bakery-content h2{

    font-family:'Playfair Display', serif;
    font-size:3rem;
    color:#3B2218;
    margin:20px 0;

}

.bakery-content p{

    color:#666;
    line-height:1.9;
    margin-bottom:35px;

}

.bakery-btn{

    display:inline-block;

    padding:15px 35px;

    background:#3B2218;

    color:white;

    border-radius:50px;

    transition:.3s;

}

.bakery-btn:hover{

    background:#C8A96A;

}

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

#gallery{

    padding:120px 10%;
    background:#F8F4EF;

}

.gallery-heading{

    text-align:center;
    margin-bottom:70px;

}

.gallery-heading p{

    color:#C8A96A;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:15px;

}

.gallery-heading h2{

    font-family:'Playfair Display', serif;
    font-size:3rem;
    color:#3B2218;
    margin-bottom:15px;

}

.gallery-heading span{

    color:#666;

}

.gallery-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

}

.gallery-grid img{

    width:100%;
    height:320px;
    object-fit:cover;

    border-radius:20px;

    transition:.4s;

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:scale(1.04);

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

/*========================================
                CONTACT
=========================================*/

#contact{

    padding:120px 10%;

    background:white;

}

.contact-container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.contact-info h2{

    font-family:'Playfair Display', serif;

    font-size:3rem;

    color:#3B2218;

    margin:20px 0;

}

.contact-text{

    color:#666;

    line-height:1.9;

    margin-bottom:40px;

}

.contact-item{

    margin-bottom:28px;

}

.contact-item h3{

    color:#3B2218;

    margin-bottom:8px;

}

.contact-item p{

    color:#666;

    line-height:1.8;

}

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

.location-card{

    position:relative;

    height:650px;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.location-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.location-card:hover img{

    transform:scale(1.08);

}

.location-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:45px;

    color:white;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.8),
        rgba(0,0,0,.15)
    );

}

.location-badge{

    position:absolute;

    top:30px;

    right:30px;

    background:#C8A96A;

    color:white;

    padding:10px 18px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

}

.location-overlay h3{

    font-family:'Playfair Display', serif;

    font-size:2.3rem;

    margin-bottom:15px;

}

.location-overlay p{

    line-height:1.8;

    margin-bottom:35px;

}

.directions-btn{

    display:inline-block;

    width:fit-content;

    padding:15px 35px;

    background:#C8A96A;

    color:white;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}

.directions-btn:hover{

    background:#3B2218;

    transform:translateY(-3px);

}

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

footer{

    background:#2B1A14;

    color:white;

}

.footer-container{

    max-width:1400px;

    margin:auto;

    padding:80px 10%;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

.footer-brand h2{

    font-family:'Playfair Display', serif;

    color:#C8A96A;

    font-size:2.2rem;

    margin-bottom:20px;

}

.footer-brand p{

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

    line-height:1.9;

}

.footer-links,
.footer-hours,
.footer-social{

    display:flex;

    flex-direction:column;

}

.footer-links h3,
.footer-hours h3,
.footer-social h3{

    margin-bottom:20px;

    color:#C8A96A;

}

.footer-links a{

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

    margin-bottom:12px;

    transition:.3s;

}

.footer-links a:hover{

    color:#C8A96A;

    padding-left:8px;

}

.footer-hours p{

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

    margin-bottom:10px;

}

.social-icons{

    display:flex;

    gap:18px;

}

.social-icons a{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:white;

    font-size:1.3rem;

    transition:.3s;

}

.social-icons a:hover{

    background:#C8A96A;

    transform:translateY(-6px);

}

.footer-bottom{

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

    text-align:center;

    padding:25px;

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

}
.portfolio-note{
    margin-top:15px;
    color:rgba(255,255,255,.5);
    font-size:.85rem;
    font-style:italic;
}

/* ==========================
   SCROLLED NAV
========================== */

header.scrolled{
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
    box-shadow: 0 5px 25px rgba(0,0,0,.08);
}

header.scrolled nav{
    padding:18px 0;
}

header.scrolled .logo{
    color: var(--espresso);
}

header.scrolled .logo span{
    color: var(--gold);
}

header.scrolled .nav-links a{
    color: var(--espresso);
}

header.scrolled .nav-btn{
    color: var(--espresso);
    border:1px solid var(--espresso);
}

header.scrolled .nav-btn:hover{
    background: var(--espresso);
    color: white;
}

/*========================================
        TABLET (1024px)
=========================================*/

@media (max-width:1024px){

    .hero-content h1{
        font-size:4.5rem;
    }

    .about-container,
    .bakery-container,
    .contact-container{
        grid-template-columns:1fr;
        gap:60px;
    }

    .menu-grid,
    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .stats-container{
        grid-template-columns:repeat(2,1fr);
        row-gap:40px;
    }

}


/*========================================
        MOBILE (768px)
=========================================*/

@media(max-width:768px){

    .hamburger{
        display:flex;
    }

    .nav-btn{
        display:none;
    }

    .nav-links{

        position:fixed;

        top:0;
        right:-100%;

        width:280px;
        height:100vh;

        background:white;

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

        gap:40px;

        transition:.4s;

        box-shadow:-10px 0 30px rgba(0,0,0,.15);

    }

    .nav-links.active{
        right:0;
    }

    .nav-links a{
        color:var(--espresso);
        font-size:1.2rem;
    }

    /* HERO */

.hero-content h1{
    font-size:3rem;
}

.hero-buttons{
    flex-direction:column;
}

.hero-buttons a{
    text-align:center;
}

/* ABOUT */

.about-container{
    grid-template-columns:1fr;
    gap:40px;
}

.about-image img{
    height:400px;
}

/* STATS */

.stats-container{
    grid-template-columns:1fr 1fr;
    gap:30px;
}

/* FEATURED DRINKS */

#menu{
    padding:80px 5%;
}

.menu-grid{
    grid-template-columns:1fr;
    gap:30px;
}

.menu-card img{
    height:250px;
}

.menu-content{
    padding:25px;
}

.price-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* BAKERY */

.bakery-container{
    grid-template-columns:1fr;
    gap:40px;
}

/* GALLERY */

.gallery-grid{
    grid-template-columns:1fr;
}

/* CONTACT */

.contact-container{
    grid-template-columns:1fr;
    gap:40px;
}

.location-card{
    height:400px;
}

/* FOOTER */

.footer-container{
    grid-template-columns:1fr;
    text-align:center;
}

.social-icons{
    justify-content:center;
}

}

.hamburger.active span:nth-child(1){

    transform:rotate(45deg) translateY(12px);

}

.hamburger.active span:nth-child(2){

    opacity:0;

}

.hamburger.active span:nth-child(3){

    transform:rotate(-45deg) translateY(-12px);

}