:root{
        --primary:#4A2D24;
        --primary-dark:#2F1E17;

        --secondary:#B88746;

        --background:#F7F2EC;

        --surface:#FFFFFF;

        --plant:#6F8E5E;

        --text:#2E2E2E;

        --muted:#777777;

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

        --radius:22px;

        --transition:.35s ease;
        --container:1200px;
    }

@font-face{
    font-family:"Vazirmatn";
    src:url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight:400;
}

@font-face{
    font-family:"Vazirmatn";
    src:url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
    font-weight:700;
}

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

    html{
        scroll-behavior:smooth;
    }

    body{
        direction:rtl;
        font-family:"Vazirmatn",Tahoma,sans-serif;
    background: radial-gradient(circle at top, #fff 0%, #f3e6d6 60%, #e8d3b8 100%);
        color:var(--text);
        line-height:1.8;
    }

body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:url("noise.png");
    opacity:0.03;
}

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

    a{
        text-decoration:none;
        color:inherit;
    }

    .container{
        width:min(var(--container),92%);
        margin:auto;
    }

    .section{
        padding:110px 0;
        border-bottom: 1px solid rgba(75,46,36,0.06);
    }

    .section-title{
        font-size:2.4rem;
        margin-bottom:18px;
    }

    .section-subtitle{
        color:var(--secondary);
        font-weight:bold;
        display:inline-block;
        margin-bottom:12px;
    }

    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:14px 28px;
        border-radius:999px;
        transition:var(--transition);
        font-weight:bold;
    }

.btn.primary{

    background:#B88746;

    color:white;

    padding:16px 34px;

    border-radius:999px;

    box-shadow:

    0 12px 25px rgba(184,135,70,.35);

    transition:.35s;

}

.btn.primary:hover{

    transform:

    translateY(-5px);

    background:#C99954;

}

    .btn.secondary{
        border:2px solid #fff;
        color:#fff;
    }

.navbar{
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    width:min(1100px,92%);
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:14px 22px;

    background:rgba(255,255,255,.10);
    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);
    border-radius:18px;

    z-index:1000;

    transition:.35s ease;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    width:44px;
    height:44px;
}

.logo h2{
    font-size:1.2rem;
    color:white;
}

.nav-links{
    display:flex;
    gap:26px;
    list-style:none;
}

.nav-links a{
    color:rgba(255,255,255,.85);
    font-weight:500;
    position:relative;
    transition:.3s;
}

.nav-links a:hover{
    color:white;
}

.nav-links a::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-6px;
    width:0%;
    height:2px;
    background:var(--secondary);
    transition:.3s ease;
}

.nav-links a:hover::after{
    width:100%;
}

.btn.small{
    padding:10px 18px;
    font-size:.9rem;
    border-radius:999px;
    background:var(--secondary);
    color:white;
    transition:.3s;
}

.btn.small:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(0,0,0,.2);
}



    .hero{

        min-height:100vh;

        background:

        linear-gradient(
        rgba(20,15,10,.45),
        rgba(20,15,10,.55)
        ),

        url("../img/cozy-cafe.jpg");

        background-size:cover;

        background-position:center;

        display:flex;

        align-items:center;
    }

    .hero-overlay{
        position:absolute;
        inset:0;
        background:linear-gradient(rgba(0,0,0, 0),rgba(0,0,0,.40));
    }

    .hero-content{
        position:relative;
        z-index:2;
        width:min(650px,90%);
        margin-right:8%;
        color:#fff;
    }

.hero h1{
    font-family: 'Vazirmatn', sans-serif;

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

    font-weight:700;

    line-height:1.15;

    max-width:700px;

    margin-bottom:20px;

}

.hero p{
    font-family: 'Vazirmatn', sans-serif;

    font-size:1.2rem;

    max-width:600px;

    line-height:2;

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

    margin-bottom:40px;

}

    .hero-buttons{
        display:flex;
        gap:18px;
        flex-wrap:wrap;
    }
    
    .about{background: #FFFFFF;}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

    .about .container{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:70px;
        align-items:center;
    }

.about-image img{
    border-radius:24px;
    box-shadow:var(--shadow);
    transition:.4s ease;
}

.about-image img:hover{
    transform:scale(1.02);
}

.about-text p{
    color:var(--muted);
    margin-bottom:16px;
    line-height:2;
    font-size:1.05rem;
}

.about-stats{
    display:flex;
    gap:18px;
    margin-top:28px;
    flex-wrap:wrap;
}

.stat{
    background:white;
    padding:18px 22px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    min-width:120px;
    text-align:center;
    transition:.3s;
}

.stat:hover{
    transform:translateY(-5px);
}

.stats{
    background: linear-gradient(135deg, var(--primary), #2f1c1a);
    color:#fff;
}

.stats .container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:20px;
    text-align:center;
}

.stat h2{
    font-size:2.5rem;
    color: var(--secondary);
}

.stat h3{
    color:var(--primary);
    font-size:1.4rem;
}

.stat p{
    font-size:.9rem;
    color:var(--muted);
    margin:0;
}

.section-subtitle{
    color:var(--plant);
    font-weight:600;
    letter-spacing:.5px;
}

@media (max-width: 768px){

    .about-grid{
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .about-text{
        order: 2;
    }

    .about-image{
        order: 1;
    }

    .about-stats{
        justify-content: center;
    }

}



.features{
    background: linear-gradient(
        to bottom,
        rgba(111,142,94,.06),
        transparent
    );
}

.features .container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.feature-card{
    background: linear-gradient(145deg, #fff, #fff8f2);
    border-radius:24px;
    padding:34px 24px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s ease;
    position:relative;
    overflow:hidden;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.15);
}

.feature-card i{
    font-size:2rem;
    color:var(--secondary);
    margin-bottom:14px;
    display:inline-block;
    background:rgba(184,135,70,.12);
    padding:14px;
    border-radius:16px;
}

.feature-card h3{
    margin-top:10px;
    font-size:1.2rem;
    color:var(--primary);
}

.feature-card p{
    color:var(--muted);
    font-size:.95rem;
    line-height:1.8;
}

@media (max-width: 768px){

    .features .container{
        grid-template-columns:1fr;
    }

}

    /* ===========================
       MENU
    ============================ */

.menu{
    background: linear-gradient(180deg, #fff8f2, #f3e6d6);
}

.menu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:28px;
    margin-top:40px;
}

.menu-card{
    background:var(--surface);
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.menu-card:hover{
    transform: translateY(-10px) scale(1.01);
}

.menu-card img{
    height:220px;
    object-fit:cover;
    filter: contrast(1.05) saturate(1.1);
}

.menu-info{
    padding:18px;
}

.menu-info h3{
    margin-bottom:8px;
}

.menu-info p{
    color:var(--muted);
    font-size:0.95rem;
    margin-bottom:14px;
}

.menu-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu-bottom span{
    font-weight:bold;
    color:var(--primary);
}

/* small button variant */
.btn.small{
    padding:8px 16px;
    font-size:0.85rem;
}


.banner{
    height: 30vh;
    background: url("../img/banner.jpg") center/cover fixed;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
}

.banner::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
        rgba(0,0,0,.6),
        rgba(75,46,43,.65)
    );
}

.banner-content{
    position:relative;
    z-index:2;
    width:min(700px,90%);
}

.banner h2{
    font-size:clamp(2rem,6vw,2.8rem);
    line-height:1.4;
    margin-bottom:25px;
}


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

    .gallery{
        background: #FFFFFF;
    }

    .gallery-header{
        text-align:center;
        margin-bottom:60px;
    }

    .gallery-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:18px;
    }

    .gallery-grid img{
        height:280px;
        object-fit:cover;
        border-radius:18px;
        transition:.35s;
        cursor:pointer;
    }

    .gallery-grid img:hover{
        transform:scale(1.05);
        box-shadow:var(--shadow);
    }

    /* ===========================
       TESTIMONIALS
    ============================ */

.reservation-box{
    background: linear-gradient(135deg, #fff, #f6ede4);
    padding:30px;
    border-radius:25px;
    text-align:center;
    box-shadow: var(--shadow);
}

.reservation-box h2{
    font-size:2.2rem;
    margin-bottom:15px;
}

.reservation-box p{
    color: var(--muted);
    margin-bottom:25px;
}



    /* ===========================
       CTA
    ============================ */

    .cta{
        background:
        linear-gradient(rgba(75,46,43,.9),rgba(75,46,43,.9)),
        url("../img/coffee-bg.jpg") center/cover;
        color:#fff;
        text-align:center;
    }

    .cta h2{
        font-size:2.8rem;
        margin-bottom:18px;
    }

    .cta p{
        max-width:700px;
        margin:auto auto 35px;
        color:#eee;
    }

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

    .contact{
        background: #FFFFFF;
    }

    .contact-wrapper{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:60px;
    }

    .contact-info h3{
        color:var(--primary);
        margin-bottom:18px;
    }

    .contact-info p{
        color:var(--muted);
        margin-bottom:15px;
    }

    .contact-form{
        display:flex;
        flex-direction:column;
        gap:18px;
    }

    .contact-form input,
    .contact-form textarea{
        padding:16px;
        border:none;
        background:#f5f5f5;
        border-radius:14px;
        outline:none;
        font-family:inherit;
        resize:none;
    }

    .contact-form textarea{
        height:170px;
    }

    .contact-form button{
        border:none;
        cursor:pointer;
    }




.menu-card,
.feature-card,
.testimonial-card{
    background:#FFFDFB;
}


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

footer{
    background: var(--primary);
    color:#fff;
    text-align:center;
    padding:25px;
    font-size:.9rem;
}

footer p{
    width:100%;
    justify-content: center;
    color:#ddd;
    line-height:1.9;
}

.social-icons{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.social-icons a{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    transition:var(--transition);
}

.social-icons a:hover{
    background:var(--secondary);
    transform:translateY(-5px);
}

.footer-bottom{
    text-align:center;
    border-top:1px solid rgba(255,255,255,.15);
    padding-top:25px;
    color:#bbb;
    font-size:.95rem;
}


/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#ececec;
}

::-webkit-scrollbar-thumb{
    background:var(--secondary);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary);
}


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

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.fade-up{
    animation:fadeUp .8s ease forwards;
}

.delay-1{
    animation-delay:.2s;
}

.delay-2{
    animation-delay:.4s;
}

.delay-3{
    animation-delay:.6s;
}


/* ===========================
   IMAGE HOVER EFFECT
=========================== */

.menu-card img,
.gallery-grid img,
.about-image img{
    transition:transform .45s ease;
}

.menu-card:hover img,
.gallery-grid img:hover,
.about-image:hover img{
    transform:scale(1.05);
}


/* ===========================
   SELECTION
=========================== */

::selection{
    background:var(--secondary);
    color:#fff;
}


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

@media(max-width:1100px){

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

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

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

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

}

@media(max-width:900px){

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

    .contact-wrapper{
        grid-template-columns:1fr;
    }

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

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

}

@media(max-width:768px){

    .navbar{
        flex-direction:column;
        gap:20px;
        padding:20px;
    }

    .nav-links{
        flex-wrap:wrap;
        justify-content:center;
        gap:18px;
    }

    .hero{
        text-align:center;
        min-height:120vh;
    }

    .hero-overlay{
        min-height:120vh;
    }

    .hero-content{
        margin:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .features .container,
    .menu-grid,
    .gallery-grid,
    .testimonial-grid{
        grid-template-columns:1fr;
    }

    .section{
        padding:80px 0;
    }

    .hero h1{
        font-size:2.5rem;
    }

}

@media(max-width:500px){

    .section-title{
        font-size:2rem;
    }

    .hero h1{
        font-size:2.1rem;
    }

    .hero p{
        font-size:1rem;
    }

    .btn{
        width:100%;
    }

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

    .gallery-grid img{
        height:220px;
    }

}