.elementor-243 .elementor-element.elementor-element-fc79b4e{--display:flex;}/* Start custom CSS for html, class: .elementor-element-ba61089 *//* ===================================
   ROYAL MAKHANA PREMIUM CSS
=================================== */


/* Google Font */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{
    background:#fffaf0;
    color:#333;
    overflow-x:hidden;
}


/* ================================
   COLOR VARIABLES
================================ */

:root{

    --green:#1f6b3a;
    --dark-green:#104d29;
    --gold:#d4a017;
    --light-gold:#f5d77b;
    --cream:#fff8e7;
    --white:#ffffff;
    --shadow:0 15px 40px rgba(0,0,0,.12);

}



/* ================================
   LOADER
================================ */


.loader{

    position:fixed;
    width:100%;
    height:100vh;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;

}


.loader-circle{

    width:60px;
    height:60px;
    border-radius:50%;
    border:6px solid #eee;
    border-top-color:var(--green);
    animation:spin 1s linear infinite;

}


@keyframes spin{

    100%{
        transform:rotate(360deg);
    }

}



/* Scroll Progress */

.scroll-progress{

    position:fixed;
    top:0;
    left:0;
    height:4px;
    background:var(--gold);
    width:0%;
    z-index:999;

}





/* ================================
        HEADER
================================ */


.header{

    position:fixed;
    width:100%;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(15px);
    box-shadow:0 5px 20px rgba(0,0,0,.08);

}


.navbar{

    max-width:1200px;
    margin:auto;
    padding:18px 5%;
    display:flex;
    align-items:center;
    justify-content:space-between;

}



.logo{

    font-size:28px;
    font-weight:800;
    color:var(--green);

}



.nav-links{

    display:flex;
    list-style:none;
    gap:30px;

}


.nav-links a{

    text-decoration:none;
    color:#333;
    font-weight:500;
    transition:.3s;

}


.nav-links a:hover{

    color:var(--green);

}



.nav-btn{

    padding:12px 25px;
    background:linear-gradient(
        45deg,
        var(--green),
        #3d9b55
    );
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;

}



/* Mobile Menu */

.menu-btn{

    display:none;
    cursor:pointer;

}


.menu-btn span{

    width:28px;
    height:3px;
    background:var(--green);
    display:block;
    margin:5px;

}






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


.hero{

    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:120px 8% 50px;
    position:relative;
    background:

    linear-gradient(
        120deg,
        rgba(15,70,35,.9),
        rgba(255,248,231,.7)
    ),

    url("images/makhana-bg.jpg");

    background-size:cover;
    background-position:center;

}




.hero-content{

    max-width:600px;
    position:relative;
    z-index:2;

}


.hero-content h1{

    font-size:55px;
    line-height:1.2;
    color:#fff;
    font-weight:800;

}


.hero-content p{

    margin:25px 0;
    color:#f5f5f5;
    font-size:20px;

}



.hero-buttons{

    display:flex;
    gap:20px;

}



.btn{

    padding:15px 35px;
    border-radius:35px;
    text-decoration:none;
    font-weight:600;
    transition:.4s;

}



.primary-btn{

    background:var(--gold);
    color:#fff;

}


.whatsapp-btn{

    background:#25D366;
    color:#fff;

}


.btn:hover{

    transform:translateY(-5px);

}




.hero-product img{

    width:450px;
    animation:float 4s ease-in-out infinite;

}



@keyframes float{

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

    50%{
        transform:translateY(-20px);
    }

}







/* ================================
        SECTION HEADING
================================ */


.section-heading{

    text-align:center;
    max-width:800px;
    margin:auto;
    padding:80px 20px 50px;

}



.section-heading span{

    color:var(--gold);
    font-weight:600;

}



.section-heading h2{

    font-size:42px;
    color:var(--green);
    margin:15px 0;

}


.section-heading p{

    color:#666;
    line-height:1.7;

}





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


.about-container{

    display:flex;
    gap:50px;
    padding:0 8% 80px;
    align-items:center;

}



.about-image img{

    width:450px;
    border-radius:30px;
    box-shadow:var(--shadow);

}



.about-content{

    display:grid;
    gap:20px;

}



.about-card{

    background:#fff;
    padding:25px;
    border-radius:20px;
    box-shadow:var(--shadow);
    transition:.4s;

}



.about-card:hover{

    transform:translateY(-8px);

}


.about-card h3{

    color:var(--green);
    margin-bottom:10px;

}







/* ================================
        WHY CHOOSE US
================================ */


.why-us{

    background:#f7f1df;
    padding-bottom:80px;

}



.why-grid{

    padding:0 8%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}



.why-card{

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

    padding:35px 25px;
    border-radius:25px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:.4s;

}



.why-card:hover{

    transform:translateY(-12px);
    background:#fff;

}



.icon{

    font-size:45px;
    margin-bottom:15px;

}



.why-card h3{

    color:var(--green);
    margin-bottom:10px;

}



.why-card p{

    color:#666;

}







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


@media(max-width:992px){


.nav-links{

    display:none;

}


.menu-btn{

    display:block;

}


.hero{

    flex-direction:column;
    text-align:center;

}


.hero-content h1{

    font-size:40px;

}


.hero-product img{

    width:320px;

}


.about-container{

    flex-direction:column;

}


.why-grid{

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

}


}





@media(max-width:600px){


.logo{

    font-size:22px;

}


.hero{

    padding:120px 20px 50px;

}


.hero-content h1{

    font-size:32px;

}


.hero-content p{

    font-size:16px;

}


.hero-buttons{

    flex-direction:column;

}


.section-heading h2{

    font-size:30px;

}


.about-image img{

    width:100%;

}


.why-grid{

    grid-template-columns:1fr;

}


}/* End custom CSS */