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

body{

    margin:0;

    padding:0;

    background:#0A0A0A;
}

/* ========================= */
/* COMMON SECTION BACKGROUND */
/* ========================= */

.menu-section,
.workshop-section,
.gallery-section,
.testimonial-section{

    background-image:
    linear-gradient(
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.75)
    ),
    url("../assets/background/bg.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;
}

html{
    scroll-behavior:smooth;
}

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

.navbar{

    width:100%;
    height:90px;

    background:white;

    position:fixed;

    top:0;

    left:0;

    z-index:1000;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 70px;

    box-shadow:0 2px 10px rgba(0,0,0,0.08);
}


/* LOGO */

.logo img{
    height:65px;

    width:auto;
}


/* NAV LINKS */

.nav-links{

    display:flex;

    align-items:center;

    gap:50px;

    list-style:none;
}


/* LINKS */

.nav-links a{

    text-decoration:none;

    color:black;

    font-size:18px;

    font-weight:700;

    transition:0.3s ease;
}


/* HOVER */

.nav-links a:hover{
    color:#25D366;
}


/* BUTTON */

.order-btn{

    padding:14px 30px;

    border:none;

    background:#25D366;

    color:white;

    border-radius:6px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;
}

.order-btn:hover{

    transform:translateY(-3px);

    background:black;
}

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

.hamburger{

    display:none;

    flex-direction:column;

    gap:5px;

    cursor:pointer;

    z-index:2000;
}

.hamburger span{

    width:28px;
    height:3px;

    background:black;

    border-radius:5px;
}

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

@media(max-width:900px){

    /* NAVBAR */

    .navbar{

    height:75px;

    padding:0 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}


    /* LOGO */

    .logo img{

        height:45px;
    }


    /* HAMBURGER */

    .hamburger{

        display:flex;

        flex-direction:column;

        gap:5px;

        cursor:pointer;

        z-index:2000;
    }


    .hamburger span{

        width:28px;
        height:3px;

        background:black;

        border-radius:5px;
    }


    /* NAV LINKS */

    .nav-links{

        position:fixed;

        top:75px;
        right:-100%;

        width:250px;

        height:100vh;

        background:white;

        flex-direction:column;

        align-items:flex-start;

        padding:50px 30px;

        gap:35px;

        transition:0.4s ease;

        box-shadow:-5px 0 20px rgba(0,0,0,0.1);
    }


    /* ACTIVE MENU */

    .nav-links.active{

        right:0;
    }


    /* LINKS */

    .nav-links a{

        color:black;

        font-size:20px;

        font-weight:700;
    }


    /* HIDE ORDER BUTTON */

    .nav-button{

        display:none;
    }


    /* HERO */

    .hero{

        padding-top:60px;
    }


    .hero-content h1{

        font-size:42px;

        line-height:1.1;
    }


    .hero-content p{

        font-size:15px;

        line-height:1.6;

        padding:0 10px;
    }


    /* BUTTONS */

    .hero-buttons{

        flex-direction:column;

        align-items:center;
    }


    .menu-btn,
    .whatsapp-btn{

        width:220px;

        padding:14px 20px;

        font-size:15px;
    }


    /* SCROLL TEXT */

    .scroll-down{

        margin-top:40px;
    }


    /* MENU SECTION */

    .menu-container{

        flex-direction:column;
    }


    .menu-heading h2{

        font-size:42px;
    }

    

}


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

.hero{
    width:100%;
    height:100vh;

    position:relative;

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

    overflow:hidden;

    background-image:url('assets/hero/hero-bg.png');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


/* DARK OVERLAY */

.hero-overlay{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.65)
    );
}


/* HERO CONTENT */

.hero-content{
    position:relative;

    z-index:2;

    text-align:center;

    padding:0 20px;

    animation:heroFade 1.5s ease;
}


/* SMALL TOP TEXT */

.hero-content h4{
    color:#ffffff;

    letter-spacing:4px;

    font-size:15px;

    margin-bottom:25px;

    font-weight:600;
}


/* MAIN HEADING */

.hero-content h1{
    font-size:95px;

    line-height:1.05;

    font-family:'Playfair Display', serif;

    color:white;

    margin-bottom:30px;
}


/* GREEN ACCENT */

.hero-content h1 span{
    color:#25D366;
}


/* SUBTEXT */

.hero-content p{
    font-size:22px;

    color:#e2e2e2;

    letter-spacing:1px;

    margin-bottom:50px;

    font-weight:300;
}


/* BUTTON AREA */

.hero-buttons{
    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}


/* BUTTONS */

.menu-btn,
.whatsapp-btn{

    padding:16px 36px;

    border:none;

    border-radius:6px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:0.4s ease;

    letter-spacing:0.5px;
}


/* WHITE BUTTON */

.menu-btn{
    background:white;
    color:black;
}

.menu-btn:hover{
    background:#25D366;
    color:white;

    transform:translateY(-5px);
}


/* GREEN BUTTON */

.whatsapp-btn{
    background:#25D366;
    color:white;
}

.whatsapp-btn:hover{
    background:white;
    color:black;

    transform:translateY(-5px);
}


/* SCROLL TEXT */

.scroll-down{
    margin-top:40px;

    color:white;

    font-size:14px;

    letter-spacing:3px;

    opacity:0.7;

    animation:bounce 2s infinite;
}


/* HERO FADE ANIMATION */

@keyframes heroFade{

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

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


/* BOUNCE */

@keyframes bounce{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(10px);
    }
}


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

@media(max-width:900px){

    .hero-content h1{
        font-size:60px;
    }

    .hero-content p{
        font-size:18px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .menu-btn,
    .whatsapp-btn{
        width:260px;
    }
}


@media(max-width:600px){

    .hero-content h1{
        font-size:42px;
    }

    .hero-content h4{
        font-size:12px;
    }

    .hero-content p{
        font-size:15px;
    }
}

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

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

.menu-section{

    width:100%;

    min-height:100vh;

    padding:120px 10%;
}


/* HEADING */

.menu-heading{
    text-align:center;

    margin-bottom:80px;
}

.menu-heading h5{
    color:#25D366;

    letter-spacing:3px;

    margin-bottom:20px;

    font-size:15px;
}

.menu-heading h2{
    font-size:60px;

    font-family:'Playfair Display', serif;

    color:white;
}


/* MENU LAYOUT */

.menu-container{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;
}


/* COLUMN */

.menu-column{

    flex:1;

    min-width:300px;

    display:flex;

    flex-direction:column;

    gap:18px;
}


/* MENU ITEMS */

.menu-item{

    padding:22px 30px;

    background:#111111;

    border:1px solid rgba(255,255,255,0.08);

    color:white;

    font-size:18px;

    font-weight:600;

    border-radius:8px;

    cursor:pointer;

    transition:0.4s ease;

    letter-spacing:1px;
}


/* HOVER EFFECT */

.menu-item:hover{

    background:#25D366;

    color:black;

    transform:translateX(10px);

    box-shadow:0 10px 30px rgba(37,211,102,0.25);
}

/* ========================= */
/* WORKSHOP SECTION */
/* ========================= */

.workshop-section{

    width:100%;

    min-height:100vh;

    padding:120px 10%;
}


/* HEADING */

.workshop-heading{

    text-align:center;

    margin-bottom:80px;
}

.workshop-heading h5{

    color:#25D366;

    letter-spacing:3px;

    font-size:15px;

    margin-bottom:20px;
}

.workshop-heading h2{

    font-size:65px;

    color:white;

    font-family:'Playfair Display', serif;

    margin-bottom:20px;
}

.workshop-heading p{

    color:#cfcfcf;

    font-size:18px;
}


/* LAYOUT */

.workshop-container{

    display:flex;

    justify-content:center;

    gap:50px;

    flex-wrap:wrap;
}


/* COLUMN */

.workshop-column{

    flex:1;

    min-width:320px;

    display:flex;

    flex-direction:column;

    gap:18px;
}


/* ITEMS */

.workshop-item{

    color:white;

    font-size:22px;

    padding:18px 25px;

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

    transition:0.4s ease;

    cursor:pointer;
}


/* HOVER */

.workshop-item:hover{

    color:#25D366;

    transform:translateX(10px);
}

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

@media(max-width:900px){

    .workshop-section{

        padding:100px 20px;
    }

    .workshop-heading h2{

        font-size:42px;
    }

    .workshop-heading p{

        font-size:15px;
    }

    .workshop-container{

        flex-direction:column;

        gap:0;
    }

    .workshop-item{

        font-size:18px;

        padding:16px 10px;
    }
}

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

@media(max-width:900px){

    .menu-heading h2{
        font-size:42px;
    }

    .menu-container{
        flex-direction:column;
    }

    .menu-item{
        font-size:16px;
    }
}

.nav-links a{
    text-decoration:none;

    color:black;
}

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

.menu-popup{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:rgba(0,0,0,0.96);

    display:none;

    justify-content:center;

    align-items:flex-start;

    overflow-y:auto;

    z-index:5000;

    padding:120px 20px 60px;
}


/* CONTENT */

.popup-content{

    width:100%;

    max-width:900px;

    margin:auto;
}


/* IMAGES */

.popup-images img{

    width:100%;

    height:auto;

    border-radius:12px;

    box-shadow:0 10px 40px rgba(0,0,0,0.5);
}


/* IMAGE STYLE */

.popup-images img{

    width:100%;

    border-radius:12px;

    box-shadow:0 10px 40px rgba(0,0,0,0.5);
}


/* CLOSE BUTTON */

.close-popup{

    position:fixed;

    top:25px;
    right:35px;

    width:60px;
    height:60px;

    display:flex;

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

    border-radius:50%;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(10px);

    color:white;

    font-size:40px;

    cursor:pointer;

    transition:0.4s ease;

    z-index:6000;
}

.close-popup:hover{

    transform:rotate(180deg) scale(1.1);

    background:#25D366;

    color:black;
}

.close-popup:active{
    transform:scale(0.9);
}

/* ========================= */
/* FULLSCREEN VIEWER */
/* ========================= */

.fullscreen-viewer{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:rgba(0,0,0,0.96);

    z-index:99999;

    display:none;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding:20px;
}


/* IMAGE */

.viewer-image{

    width:100%;

    max-width:1000px;

    max-height:90vh;

    object-fit:contain;

    border-radius:20px;

    touch-action:pan-y;
}


/* CLOSE */

.viewer-close{

    position:absolute;

    top:20px;
    right:25px;

    font-size:55px;

    color:white;

    cursor:pointer;

    z-index:10001;
}



/* LEFT */

.viewer-prev{

    left:20px;
}


/* RIGHT */

.viewer-next{

    right:20px;
}


/* MOBILE */

@media(max-width:900px){

    .viewer-prev,
    .viewer-next{

        font-size:40px;
    }

    .viewer-close{

        font-size:45px;
    }
}

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

.gallery-section{

    width:100%;

    min-height:100vh;

    padding:120px 10%;

    margin-top:-2px;
}


/* HEADING */

.gallery-heading{

    text-align:center;

    margin-top:0;

    margin-bottom:80px;
}

.gallery-heading h5{

    color:#25D366;

    letter-spacing:3px;

    margin-bottom:20px;
}

.gallery-heading h2{

    font-size:60px;

    color:rgb(255, 255, 255);

    font-family:'Playfair Display', serif;

    margin-bottom:20px;
}

.gallery-heading p{

    color:#666;

    font-size:18px;
}


/* CARDS */

.gallery-cards{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(320px,1fr));

    gap:30px;
}


/* SINGLE CARD */

.gallery-card{

    position:relative;

    height:450px;

    border-radius:18px;

    overflow:hidden;

    cursor:pointer;
}


/* IMAGE */

.gallery-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:0.5s ease;
}


/* OVERLAY */

.gallery-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,0.8),
    rgba(0,0,0,0.2));

    display:flex;

    justify-content:center;

    align-items:flex-end;

    padding-bottom:40px;
}


/* TEXT */

.gallery-overlay h3{

    color:white;

    font-size:36px;

    font-family:'Playfair Display', serif;
}


/* HOVER */

.gallery-card:hover img{

    transform:scale(1.08);
}

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

@media(max-width:900px){

    .gallery-section{

        padding:100px 20px;
    }

    .gallery-heading h2{

        font-size:42px;
    }

    .gallery-card{

        height:350px;
    }

    .gallery-overlay h3{

        font-size:28px;
    }
}

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

.gallery-popup{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:rgba(0,0,0,0.96);

    display:none;

    overflow-y:auto;

    z-index:9000;

    padding:120px 20px 60px;
}


/* IMAGES */

.gallery-popup-images{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:20px;
}


.gallery-popup-images img{

    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:12px;

    cursor:pointer;

    transition:0.4s ease;
}


.gallery-popup-images img:hover{

    transform:scale(1.05);
}

/* MOBILE GALLERY GRID */

@media(max-width:900px){

    .gallery-popup-images{

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

        gap:12px;
    }

    .gallery-popup-images img{

        height:180px;
    }
}

/* CLOSE BUTTON */

.gallery-close{

    position:fixed;

    top:25px;
    right:30px;

    width:60px;
    height:60px;

    display:flex;

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

    border-radius:50%;

    background:rgba(255,255,255,0.1);

    backdrop-filter:blur(10px);

    color:white;

    font-size:40px;

    cursor:pointer;

    transition:0.4s ease;

    z-index:10000;
}


.gallery-close:hover{

    transform:rotate(180deg) scale(1.1);

    background:#25D366;

    color:black;
}

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

.gallery-fullscreen{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:rgba(0,0,0,0.97);

    display:none;

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

    z-index:20000;

    overflow:hidden;
}


/* IMAGE */

.gallery-full-image{

    max-width:95%;

    max-height:90vh;

    object-fit:contain;

    border-radius:12px;

    transition:0.4s ease;
}


/* CLOSE */

.gallery-full-close{

    position:absolute;

    top:25px;
    right:30px;

    width:60px;
    height:60px;

    display:flex;

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

    border-radius:50%;

    background:rgba(255,255,255,0.1);

    backdrop-filter:blur(10px);

    color:white;

    font-size:40px;

    cursor:pointer;

    z-index:21000;

    transition:0.4s ease;
}


.gallery-full-close:hover{

    transform:rotate(180deg) scale(1.1);

    background:#25D366;

    color:black;
}

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

.testimonial-section{

    width:100%;

    min-height:100vh;

    padding:120px 7%;
}


/* WRAPPER */

.testimonial-wrapper{

    background:black;

    border-radius:30px;

    padding:60px 40px;

    position:relative;

    overflow:hidden;
}


/* HEADING */

.testimonial-heading{

    text-align:center;

    margin-bottom:50px;
}


/* TITLE */

.testimonial-heading h2{

    color:white;

    font-size:55px;

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

    font-weight:800;

    margin-bottom:15px;

    letter-spacing:2px;
}


/* SUBTEXT */

.testimonial-heading p{

    color:#d0d0d0;

    font-size:18px;

    letter-spacing:1px;
}


/* ELFSIGHT FIX */

.elfsight-app-b516dd94-e97b-4406-a29b-1a6000d28a42{

    width:100%;
}


/* MOBILE */

@media(max-width:900px){

    .testimonial-section{

        padding:100px 20px;
    }

    .testimonial-wrapper{

        padding:40px 20px;
    }

    .testimonial-heading h2{

        font-size:34px;
    }

    .testimonial-heading p{

        font-size:14px;

        line-height:1.6;
    }
}

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

.contact-section{

    width:100%;

    background:#050505;

    padding:100px 8% 40px;

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


/* CONTAINER */

.contact-container{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:50px;

    flex-wrap:wrap;

    margin-bottom:80px;
}


/* LEFT + RIGHT */

.contact-box{

    flex:1;

    min-width:250px;
}


/* HEADINGS */

.contact-box h5{

    color:#ff7b00;

    letter-spacing:3px;

    font-size:15px;

    margin-bottom:25px;
}


/* TEXT */

.contact-box p{

    color:#d8d8d8;

    font-size:20px;

    line-height:1.8;
}


/* CENTER */

.contact-center{

    flex:1;

    min-width:250px;

    text-align:center;
}


/* LOGO TEXT */

.contact-center h2{

    color:white;

    font-size:68px;

    line-height:1.1;

    font-family:'Playfair Display', serif;

    margin-bottom:30px;
}


/* INSTAGRAM */

.contact-center a{

    color:white;

    font-size:22px;

    text-decoration:none;

    border-bottom:2px solid #25D366;

    padding-bottom:6px;

    transition:0.3s ease;
}


.contact-center a:hover{

    color:#25D366;
}


/* BOTTOM */

.footer-bottom{

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

    padding-top:30px;

    text-align:center;

    color:#888;

    font-size:14px;

    letter-spacing:1px;
}

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

@media(max-width:900px){

    .contact-section{

        padding:80px 20px 30px;
    }

    .contact-container{

        flex-direction:column;

        text-align:center;

        gap:60px;
    }

    .contact-center h2{

        font-size:42px;
    }

    .contact-box p{

        font-size:16px;
    }

    .contact-center a{

        font-size:18px;
    }
}

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

@media(max-width:900px){

    .contact-section{

        padding:80px 20px 30px;
    }

    .contact-container{

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:60px;
}

    .contact-center h2{

        font-size:42px;
    }

    .contact-box{

    width:100%;

    text-align:center;
}

    .contact-center{

    width:100%;

    text-align:center;
}


@media(max-width:900px){

    .menu-section,
    .workshop-section,
    .gallery-section,
    .testimonial-section{

        background-attachment:scroll;
    }

}

}