/* ==========================================================
   KITTU BITTU FOODS
   HERO.CSS
   Premium Hero Section
==========================================================*/


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

.hero-section{

    position:relative;

    overflow:hidden;

    padding:80px 0 120px;

    background:

    radial-gradient(circle at top left,#fbfaf6 0%,#f6f3ea 45%,#eef4ed 100%);

}

/* Decorative Background */

.hero-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-220px;

    top:-250px;

    border-radius:50%;

    background:

    rgba(54,91,60,.05);

    filter:blur(20px);

}

.hero-section::after{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    left:-180px;

    bottom:-180px;

    border-radius:50%;

    background:

    rgba(183,139,48,.08);

    filter:blur(25px);

}

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

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:

    1.05fr

    .95fr;

    align-items:center;

    gap:90px;

}

/* ==========================================================
   LEFT
==========================================================*/

.hero-content{

    position:relative;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:#fff;

    box-shadow:var(--shadow);

    color:var(--primary);

    font-weight:700;

    margin-bottom:28px;

}

.hero-badge i{

    color:var(--secondary);

}

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

.hero-title{

    font-size:4.5rem;

    line-height:1.05;

    color:var(--primary-dark);

    margin-bottom:28px;

}

.hero-title span{

    color:var(--secondary);

}

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

.hero-description{

    max-width:620px;

    font-size:1.12rem;

    margin-bottom:36px;

}

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

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:42px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:10px;

    background:#fff;

    border-radius:999px;

    padding:12px 18px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.hero-feature:hover{

    transform:translateY(-4px);

}

.hero-feature i{

    color:var(--primary);

}

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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:42px;

}

.hero-buttons .btn{

    min-width:220px;

}

/* ==========================================================
   TRUST BADGES
==========================================================*/

.hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

}

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.trust-item i{

    color:var(--success);

}

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

.hero-media{

    position:relative;

}

.hero-image-wrapper{

    position:relative;

}

.hero-image{

    width:100%;

    border-radius:34px;

    box-shadow:

    0 35px 70px rgba(0,0,0,.15);

    transition:.5s;

}

.hero-image:hover{

    transform:

    scale(1.02);

}

/* ==========================================================
   IMAGE GLOW
==========================================================*/

.hero-image-wrapper::before{

    content:"";

    position:absolute;

    inset:-18px;

    border-radius:40px;

    background:

    linear-gradient(

    135deg,

    rgba(183,139,48,.18),

    rgba(54,91,60,.12)

    );

    filter:blur(40px);

    z-index:-1;

}
/* ==========================================================
   FLOATING CARDS
==========================================================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    min-width:250px;

    padding:18px 22px;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

    z-index:5;

}

.floating-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 30px 65px rgba(0,0,0,.16);

}

/* Floating Icon */

.floating-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--secondary)

        );

    color:#fff;

    font-size:24px;

    flex-shrink:0;

}

/* Floating Text */

.floating-content{

    display:flex;

    flex-direction:column;

}

.floating-content strong{

    color:var(--primary-dark);

    font-size:1rem;

    margin-bottom:4px;

}

.floating-content span{

    color:var(--text-light);

    font-size:.92rem;

}

/* ==========================================================
   CARD POSITIONS
==========================================================*/

.floating-card-top{

    top:-35px;

    left:-45px;

}

.floating-card-left{

    left:-70px;

    bottom:140px;

}

.floating-card-right{

    right:-60px;

    bottom:30px;

}

/* ==========================================================
   GOOGLE RATING CARD
==========================================================*/

.hero-rating-card{

    position:absolute;

    top:45px;

    right:-45px;

    width:235px;

    padding:20px;

    background:#fff;

    border-radius:24px;

    box-shadow:

        0 24px 55px rgba(0,0,0,.14);

    z-index:6;

}

.rating-stars{

    color:#F4B400;

    font-size:20px;

    margin-bottom:10px;

}

.rating-content strong{

    display:block;

    color:var(--primary-dark);

    margin-bottom:6px;

}

.rating-content span{

    color:var(--text-light);

    font-size:.92rem;

}

/* ==========================================================
   EXPERIENCE CARD
==========================================================*/

.experience-card{

    position:absolute;

    left:40px;

    bottom:-35px;

    display:flex;

    align-items:center;

    gap:16px;

    width:215px;

    padding:22px;

    border-radius:24px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            #4f7b54

        );

    color:#fff;

    box-shadow:

        0 26px 55px rgba(54,91,60,.30);

    z-index:6;

}

.experience-number{

    font-size:38px;

    font-weight:700;

    line-height:1;

}

.experience-text{

    font-size:.92rem;

    line-height:1.5;

    font-weight:600;

}

/* ==========================================================
   PREMIUM HOVER
==========================================================*/

.hero-image-wrapper:hover .floating-card,

.hero-image-wrapper:hover .hero-rating-card,

.hero-image-wrapper:hover .experience-card{

    transform:translateY(-8px);

}

/* ==========================================================
   GLASS BORDER
==========================================================*/

.floating-card::before,

.hero-rating-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

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

    pointer-events:none;

}
/* ==========================================================
   HERO STATISTICS
==========================================================*/

.hero-bottom{

    margin-top:80px;

}

/* Statistics Grid */

.hero-stats{

    display:grid;

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

    gap:24px;

}

/* Individual Card */

.stat-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px;

    background:#ffffff;

    border-radius:26px;

    box-shadow:var(--shadow);

    transition:all .35s ease;

}

.stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(54,91,60,.04),

        rgba(183,139,48,.06)

    );

    opacity:0;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 35px 65px rgba(0,0,0,.15);

}

.stat-card:hover::before{

    opacity:1;

}

/* Icon */

.stat-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--secondary)

        );

    color:#fff;

    font-size:28px;

    flex-shrink:0;

}

/* Text */

.stat-content{

    position:relative;

    z-index:2;

}

.stat-content h3{

    color:var(--primary);

    font-size:2rem;

    margin-bottom:4px;

}

.stat-content p{

    color:var(--text-light);

    font-size:.92rem;

    margin:0;

}

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

.scroll-indicator{

    display:flex;

    justify-content:center;

    margin-top:35px;

}

.scroll-indicator a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.scroll-indicator a:hover{

    color:var(--secondary);

}

.scroll-indicator i{

    font-size:22px;

    animation:heroBounce 2s infinite;

}

@keyframes heroBounce{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.hero-content{

    animation:heroFadeLeft .9s ease;

}

.hero-media{

    animation:heroFadeRight 1s ease;

}

.hero-bottom{

    animation:heroFadeUp 1.3s ease;

}

@keyframes heroFadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes heroFadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   IMAGE FLOAT
==========================================================*/

.hero-image{

    animation:

        heroImageFloat

        7s

        ease-in-out

        infinite;

}

@keyframes heroImageFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================================
   BUTTON SHINE
==========================================================*/

.hero-buttons .btn{

    position:relative;

    overflow:hidden;

}

.hero-buttons .btn::after{

    content:"";

    position:absolute;

    width:45px;

    height:220%;

    background:

        rgba(255,255,255,.22);

    top:-60%;

    left:-120px;

    transform:rotate(25deg);

}

.hero-buttons .btn:hover::after{

    animation:

        heroButtonShine

        .8s;

}

@keyframes heroButtonShine{

    from{

        left:-120px;

    }

    to{

        left:130%;

    }

}

/* ==========================================================
   HERO IMAGE HOVER
==========================================================*/

.hero-image-wrapper:hover .hero-image{

    transform:

        scale(1.03)

        rotate(.4deg);

}
/* ==========================================================
   HERO RESPONSIVE
==========================================================*/

/* ==========================================================
   LARGE TABLETS
==========================================================*/

@media (max-width:1200px){

.hero-grid{

    gap:60px;

}

.hero-title{

    font-size:3.8rem;

}

.hero-image-wrapper{

    max-width:540px;

}

.hero-stats{

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

}

.floating-card-top{

    left:0;

}

.floating-card-left{

    left:-20px;

}

.floating-card-right{

    right:-20px;

}

.hero-rating-card{

    right:-10px;

}

}


/* ==========================================================
   TABLETS
==========================================================*/

@media (max-width:992px){

.hero-section{

    padding:70px 0 90px;

}

.hero-grid{

    grid-template-columns:1fr;

    gap:60px;

    text-align:center;

}

.hero-content{

    order:2;

    align-items:center;

}

.hero-media{

    order:1;

}

.hero-description{

    max-width:720px;

    margin:auto auto 35px;

}

.hero-features{

    justify-content:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-trust{

    justify-content:center;

}

.hero-image-wrapper{

    max-width:600px;

    margin:auto;

}

.hero-stats{

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

}

.floating-card-top{

    top:-20px;

    left:10px;

}

.floating-card-left{

    left:-10px;

    bottom:120px;

}

.floating-card-right{

    right:-10px;

    bottom:20px;

}

.hero-rating-card{

    right:-10px;

}

.experience-card{

    left:20px;

}

}


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

@media (max-width:768px){

.hero-section{

    padding:60px 0 70px;

}

.hero-title{

    font-size:2.6rem;

}

.hero-description{

    font-size:1rem;

}

.hero-badge{

    justify-content:center;

}

.hero-features{

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.hero-feature{

    width:100%;

    max-width:360px;

    justify-content:center;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.hero-buttons .btn{

    width:100%;

}

.hero-trust{

    flex-direction:column;

    gap:12px;

}

.hero-image{

    border-radius:24px;

}

/* Floating Cards become stacked */

.floating-card,

.hero-rating-card,

.experience-card{

    position:relative;

    inset:auto;

    width:100%;

    max-width:380px;

    margin:18px auto 0;

    animation:none;

}

.hero-image-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero-stats{

    grid-template-columns:1fr;

    gap:18px;

}

.stat-card{

    padding:22px;

}

.scroll-indicator{

    margin-top:40px;

}

}


/* ==========================================================
   SMALL MOBILE
==========================================================*/

@media (max-width:480px){

.hero-title{

    font-size:2.1rem;

}

.hero-description{

    font-size:.95rem;

}

.hero-badge{

    width:100%;

    padding:12px 16px;

}

.hero-feature{

    font-size:.9rem;

}

.hero-buttons .btn{

    padding:15px 22px;

}

.stat-card{

    flex-direction:column;

    text-align:center;

}

.stat-icon{

    margin-bottom:10px;

}

.scroll-indicator span{

    font-size:.9rem;

}

}


/* ==========================================================
   LANDSCAPE PHONES
==========================================================*/

@media (max-height:500px) and (orientation:landscape){

.hero-section{

    padding:20px 0;

}

.hero-grid{

    gap:35px;

}

.hero-title{

    font-size:2.4rem;

}

.hero-bottom{

    margin-top:40px;

}

}

/*======================================
HERO V2 FIXES
======================================*/

.hero-media{

overflow:visible;

}

.hero-image-wrapper{

overflow:visible;

max-width:620px;

margin:auto;

}

.floating-card-top{

left:10px;

top:-20px;

}

.floating-card-left{

left:-15px;

bottom:110px;

}

.floating-card-right{

right:-15px;

bottom:20px;

}

.hero-rating-card{

right:-15px;

top:30px;

}

.experience-card{

left:20px;

bottom:-20px;

}

.hero-grid{

gap:70px;

}

.hero-buttons .btn{

min-width:210px;

}

.hero-image{

display:block;

}