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

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

html{
    scroll-behavior:smooth;
}

body{
    background:#FFF8E8;
    overflow-x:hidden;
    color:#3b2200;
}

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

:root{

--primary:#FFC107;
--secondary:#F4B400;
--light:#FFF8E8;
--dark:#4E2A00;
--white:#ffffff;
--shadow:0 10px 30px rgba(0,0,0,.12);

}

/* ==========================================
   PRELOADER
========================================== */

#preloader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#FFF8E8;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

}

.loader{

text-align:center;

}

.loader img{

width:120px;

animation:rotateLogo 3s linear infinite;

}

.loader h2{

margin-top:15px;

color:var(--dark);

}

.loading-bar{

margin-top:20px;

width:220px;

height:8px;

background:#f2d27c;

border-radius:30px;

overflow:hidden;

}

.loading-bar span{

display:block;

height:100%;

width:0%;

background:linear-gradient(to right,#F4B400,#FFC107);

animation:loading 3s infinite;

}

@keyframes loading{

0%{width:0%;}

100%{width:100%;}

}

@keyframes rotateLogo{

100%{

transform:rotate(360deg);

}

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 8%;

display:flex;

justify-content:space-between;

align-items:center;

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

backdrop-filter:blur(10px);

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

z-index:999;

transition:.4s;

}

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo img{

width:60px;

height:60px;

border-radius:50%;

}

.logo h2{

color:var(--dark);

font-size:28px;

font-weight:700;

}

nav{

display:flex;

gap:35px;

}

nav a{

text-decoration:none;

color:var(--dark);

font-weight:600;

transition:.3s;

}

nav a:hover{

color:var(--primary);

}

.header-btn{

padding:13px 30px;

background:var(--primary);

border-radius:40px;

color:#4E2A00;

font-weight:600;

text-decoration:none;

transition:.3s;

}

.header-btn:hover{

background:#4E2A00;

color:white;

}

.menu{

display:none;

font-size:30px;

cursor:pointer;

}

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

.hero{

position:relative;

display:flex;

justify-content:space-between;

align-items:center;

padding:170px 8% 120px;

background:linear-gradient(135deg,#FFF9E7,#FFE082);

overflow:hidden;

min-height:100vh;

}

.hero-left{

width:50%;

z-index:5;

}

.hero-left h5{

display:inline-block;

background:#fff3c8;

padding:10px 20px;

border-radius:40px;

color:#a36300;

margin-bottom:20px;

}

.hero-left h1{

font-size:68px;

line-height:85px;

color:#4E2A00;

}

.hero-left h1 span{

color:#F4B400;

}

.hero-left p{

margin:25px 0;

font-size:18px;

line-height:34px;

color:#555;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:20px;

}

.btn1{

background:#FFC107;

padding:16px 35px;

border-radius:40px;

text-decoration:none;

color:#4E2A00;

font-weight:700;

transition:.3s;

}

.btn2{

border:2px solid #FFC107;

padding:16px 35px;

border-radius:40px;

text-decoration:none;

color:#4E2A00;

font-weight:700;

transition:.3s;

}

.btn1:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}

.btn2:hover{

background:#FFC107;

}

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

.hero-features{

display:flex;

gap:25px;

margin-top:50px;

}

.hero-features div{

background:white;

padding:20px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

width:160px;

}

.hero-features i{

font-size:30px;

color:#F4B400;

margin-bottom:10px;

}


/* ==========================================
   HONEY STREAM
========================================== */

.honey-stream{

position:absolute;

top:160px;

left:52%;

transform:translateX(-50%);

width:18px;

height:260px;

background:linear-gradient(#FFD54F,#FFB300,#B66A00);

border-radius:50px;

overflow:hidden;

animation:flow 2s linear infinite;

}

.drop{

position:absolute;

bottom:-20px;

left:50%;

transform:translateX(-50%);

width:30px;

height:30px;

background:#FFB300;

border-radius:50%;

animation:drop 2s infinite;

}

@keyframes flow{

0%{

height:220px;

}

50%{

height:260px;

}

100%{

height:220px;

}

}

@keyframes drop{

0%{

bottom:20px;

opacity:1;

}

100%{

bottom:-40px;

opacity:0;

}

}

/* ==========================================
   BOWL
========================================== */

.hero-right{
    position:relative;
    width:550px;
    height:550px;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Orange background circle */
.hero-circle{
    position:absolute;
    width:420px;
    height:420px;
    background:#FFD95B;
    border-radius:50%;
    opacity:0.25;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:1;
}

/* Bowl image */
.bowl{
    position:absolute;
    width:420px;
    height:420px;
    object-fit:cover;
    object-position:center;
    border-radius:50%;
    transform:translate(-50%,-50%) scale(1.2);
    top:50%;
    left:50%;
    z-index:5;
}
/* ==========================================
   BEES
========================================== */

.bee{

position:absolute;

width:60px;

z-index:50;

}

.bee1{

top:90px;

right:100px;

animation:beeFly1 8s infinite linear;

}

.bee2{

top:320px;

right:420px;

animation:beeFly2 9s infinite linear;

}

.bee3{

bottom:100px;

right:250px;

animation:beeFly3 10s infinite linear;

}

@keyframes beeFly1{

0%{transform:translateX(0);}
50%{transform:translate(-120px,-40px);}
100%{transform:translateX(0);}

}

@keyframes beeFly2{

0%{transform:translateY(0);}
50%{transform:translate(80px,40px);}
100%{transform:translateY(0);}

}

@keyframes beeFly3{

0%{transform:translateX(0);}
50%{transform:translate(-60px,-60px);}
100%{transform:translateX(0);}

}

/* ==========================================
   FLOATING PARTICLES
========================================== */

.particles span{

position:absolute;

width:10px;

height:10px;

background:#FFC107;

border-radius:50%;

opacity:.5;

animation:floatParticle 12s linear infinite;

}

.particles span:nth-child(1){left:8%;top:90%;}
.particles span:nth-child(2){left:20%;top:75%;}
.particles span:nth-child(3){left:30%;top:88%;}
.particles span:nth-child(4){left:45%;top:82%;}
.particles span:nth-child(5){left:60%;top:90%;}
.particles span:nth-child(6){left:75%;top:84%;}
.particles span:nth-child(7){left:85%;top:78%;}
.particles span:nth-child(8){left:95%;top:90%;}

@keyframes floatParticle{

0%{

transform:translateY(0);

opacity:.3;

}

100%{

transform:translateY(-600px);

opacity:0;

}

}

/* ==========================================
   HONEY DIVIDER
========================================== */

.divider{

width:100%;

overflow:hidden;

background:#FFF8E8;

}

.divider img{

width:100%;

display:block;

}

/*==========================================
        SECTION TITLE
==========================================*/

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h5{

display:inline-block;

padding:10px 25px;

background:#FFF3C7;

color:#B56A00;

border-radius:50px;

font-size:15px;

letter-spacing:2px;

margin-bottom:15px;

}

.section-title h2{

font-size:48px;

font-weight:700;

color:#4E2A00;

margin-bottom:20px;

}

.section-title p{

max-width:750px;

margin:auto;

font-size:18px;

line-height:34px;

color:#666;

}


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

.about{

padding:120px 8%;

background:#FFFDF7;

}

.about-container{

display:flex;

justify-content:space-between;

align-items:center;

gap:80px;

flex-wrap:wrap;

}

.about-image{

flex:1;

position:relative;

}

.about-image img{

width:100%;

border-radius:30px;

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

transition:.5s;

}

.about-image img:hover{

transform:scale(1.03);

}

.experience-card{

position:absolute;

bottom:30px;

right:-30px;

background:#FFC107;

padding:25px;

border-radius:25px;

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

text-align:center;

animation:floatCard 3s ease-in-out infinite;

}

.experience-card h2{

font-size:42px;

color:#4E2A00;

}

.experience-card p{

font-weight:600;

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

.about-content{

flex:1;

}

.about-box{

display:flex;

gap:20px;

padding:25px;

background:white;

margin-bottom:25px;

border-radius:20px;

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

transition:.4s;

}

.about-box:hover{

transform:translateX(10px);

}

.about-box i{

font-size:40px;

color:#FFC107;

min-width:60px;

}

.about-box h3{

margin-bottom:10px;

color:#4E2A00;

}

.about-box p{

color:#666;

line-height:28px;

}

.about-btn{

display:inline-block;

margin-top:25px;

padding:16px 40px;

background:#FFC107;

border-radius:40px;

text-decoration:none;

font-weight:700;

color:#4E2A00;

transition:.4s;

}

.about-btn:hover{

background:#4E2A00;

color:white;

}


/*==========================================
        COUNTER
==========================================*/

.counter-section{

padding:80px 8%;

display:grid;

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

gap:30px;

background:linear-gradient(135deg,#FFE082,#FFD54F);

}

.counter-box{

background:white;

padding:40px;

text-align:center;

border-radius:25px;

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

transition:.4s;

}

.counter-box:hover{

transform:translateY(-12px);

}

.counter-box h2{

font-size:55px;

color:#4E2A00;

margin-bottom:10px;

}

.counter-box p{

font-size:18px;

font-weight:600;

color:#666;

}


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

.why-us{

padding:120px 8%;

background:#FFF8E8;

}

.why-grid{

display:grid;

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

gap:35px;

}

.why-card{

background:white;

padding:40px;

border-radius:30px;

text-align:center;

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

transition:.4s;

}

.why-card:hover{

transform:translateY(-12px);

}

.why-icon{

width:90px;

height:90px;

background:#FFF4C6;

margin:auto;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.why-icon i{

font-size:40px;

color:#F4B400;

}

.why-card h3{

margin-bottom:15px;

color:#4E2A00;

}

.why-card p{

line-height:30px;

color:#666;

}


/*==========================================
        BENEFITS
==========================================*/

.benefits{

padding:120px 8%;

background:white;

}

.benefit-container{

display:grid;

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

gap:30px;

}

.benefit{

background:#FFF8E8;

padding:40px 20px;

border-radius:25px;

text-align:center;

transition:.4s;

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

}

.benefit:hover{

transform:translateY(-10px);

background:#FFC107;

}

.benefit i{

font-size:50px;

margin-bottom:20px;

color:#F4B400;

transition:.4s;

}

.benefit:hover i{

color:#4E2A00;

}

.benefit h3{

font-size:22px;

color:#4E2A00;

}

/*==========================================
        PRODUCTS SECTION
==========================================*/

.products{
    padding:120px 8%;
    background:#FFFDF8;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px;
}

.product-card{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 35px rgba(0,0,0,.08);
    transition:.4s;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
}

.product-content{
    padding:30px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.price-list{
    margin-top:auto;
}

.order-btn{
    margin-top:20px;
}

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

.product-image{
    position:relative;
    background:linear-gradient(135deg,#FFE082,#FFD54F);
    padding:40px;
    text-align:center;
}

.product-image img{
    width:240px;
    transition:.5s;
}

.product-card:hover .product-image img{
    transform:scale(1.08) rotate(-3deg);
}

.badge{
    position:absolute;
    top:20px;
    left:20px;
    background:#4E2A00;
    color:#fff;
    padding:8px 16px;
    border-radius:30px;
    font-size:13px;
}

.product-content{
    padding:30px;
}

.product-content h3{
    font-size:28px;
    color:#4E2A00;
    margin-bottom:15px;
}

.product-content p{
    color:#666;
    line-height:30px;
    margin-bottom:20px;
}

.price-list{
    display:flex;
    justify-content:space-between;
    margin:25px 0;
    padding:18px;
    background:#FFF8E8;
    border-radius:15px;
}

.price-list strong{
    color:#E69500;
    font-size:20px;
}

.order-btn{
    display:block;
    width:100%;
    text-align:center;
    padding:15px;
    border-radius:40px;
    background:#25D366;
    color:white;
    text-decoration:none;
    font-weight:700;
    transition:.4s;
}

.order-btn:hover{
    background:#1FA851;
}


/*==========================================
        REVIEWS
==========================================*/

.reviews{
    padding:120px 8%;
    background:#FFF8E8;
}

.review-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.review-gallery img{
    width:100%;
    border-radius:25px;
    box-shadow:0 15px 30px rgba(0,0,0,.12);
    transition:.4s;
    cursor:pointer;
}

.review-gallery img:hover{
    transform:scale(1.05);
}


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

.contact{
    padding:120px 8%;
    background:white;
}

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

.contact-info{
    background:#FFF8E8;
    padding:45px;
    border-radius:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.contact-info h3{
    color:#4E2A00;
    font-size:32px;
    margin-bottom:25px;
}

.contact-info p{
    margin-bottom:20px;
    color:#555;
    font-size:18px;
}

.contact-info i{
    color:#F4B400;
    margin-right:10px;
}

.contact-btn{
    display:inline-block;
    margin-top:20px;
    padding:16px 35px;
    background:#25D366;
    color:white;
    text-decoration:none;
    border-radius:40px;
    font-weight:600;
}

.contact-form{
    background:white;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    padding:40px;
    border-radius:25px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:16px;
    margin-bottom:20px;
    border:1px solid #ddd;
    border-radius:15px;
    outline:none;
    font-size:16px;
}

.contact-form textarea{
    height:180px;
    resize:none;
}

.contact-form button{
    width:100%;
    padding:16px;
    background:#FFC107;
    color:#4E2A00;
    border:none;
    border-radius:40px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.4s;
}

.contact-form button:hover{
    background:#4E2A00;
    color:white;
}


/*==========================================
        MAP
==========================================*/

.map iframe{
    width:100%;
    height:450px;
    border:none;
}


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

footer{
    background:#4E2A00;
    color:white;
    text-align:center;
    padding:70px 20px;
}

.footer-content img{
    width:90px;
    margin-bottom:20px;
}

.footer-content h2{
    margin-bottom:15px;
}

.social-icons{
    margin:30px 0;
}

.social-icons a{
    display:inline-flex;
    width:50px;
    height:50px;
    justify-content:center;
    align-items:center;
    background:#FFC107;
    color:#4E2A00;
    border-radius:50%;
    margin:0 10px;
    text-decoration:none;
    transition:.4s;
}

.social-icons a:hover{
    transform:translateY(-8px) rotate(360deg);
}

.copyright{
    margin-top:25px;
    color:#ddd;
}


/*==========================================
    FLOATING WHATSAPP
==========================================*/

.floating-whatsapp{
    position:fixed;
    right:30px;
    bottom:30px;
    width:70px;
    height:70px;
    background:#25D366;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:35px;
    border-radius:50%;
    text-decoration:none;
    box-shadow:0 15px 25px rgba(0,0,0,.2);
    animation:bounce 2s infinite;
    z-index:999;
}

@keyframes bounce{

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

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

}


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

@media(max-width:992px){

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

.hero-left,
.hero-right{
width:100%;
}

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

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

.hero-features{
justify-content:center;
flex-wrap:wrap;
}

}

@media(max-width:768px){

nav{
display:none;
}

.menu{
display:block;
}

.hero-left h1{
font-size:42px;
line-height:55px;
}

.section-title h2{
font-size:34px;
}

.counter-section{
grid-template-columns:1fr;
}

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

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

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

.success-message{
    background:#d4edda;
    color:#155724;
    padding:15px;
    margin-bottom:20px;
    border-radius:8px;
    text-align:center;
    font-weight:600;
}
}

@media(max-width:768px){

    .hero{
    padding-top:120px;
}

.logo h2{
    font-size:18px;
}

.header-btn{
    display:none;
}

    nav.show{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:90px;
    left:0;
    width:100%;
    background:#fff;
    padding:20px;
    gap:20px;
    box-shadow:0 10px 20px rgba(0,0,0,.1);
    z-index:1000;
} 

    nav{
        display:none;
    }

    nav.show{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:90px;
        left:0;
        width:100%;
        background:white;
        padding:20px;
        gap:20px;
        box-shadow:0 10px 20px rgba(0,0,0,.1);
        z-index:1000;
    }

    .menu{
        display:block;
    }
}