/* ==========================================================
   KITTU BITTU FOODS
   HEADER.CSS
   VERSION 3.0
========================================================== */

/* ==========================================================
   ANNOUNCEMENT BAR
========================================================== */

.announcement-bar{
    background:linear-gradient(90deg,var(--primary-dark),var(--primary));
    color:#fff;
    padding:12px 0;
    position:relative;
    overflow:hidden;
    z-index:100;
}

.announcement-content{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:32px;
    flex-wrap:wrap;
}

.announcement-content span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.95rem;
    font-weight:500;
}

.announcement-content i{
    color:#FFD54F;
}

.announcement-content a{
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}

.announcement-content a:hover{
    color:#FFD54F;
}

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

.site-header{
    position:sticky;
    top:0;
    width:100%;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(0,0,0,.06);
    z-index:1000;
    transition:.35s;
}

.site-header.scrolled{
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.header-wrapper{

	min-height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:nowrap; 
}

/* ==========================================================
   LOGO
========================================================== */

.brand-logo{
    display:flex;
    align-items:center;
    gap:16px;
    text-decoration:none;
    flex-shrink:0;
}

.logo-image{
    width:72px;
    height:72px;
    display:block;
    object-fit:contain;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.10);
    transition:.35s;
}

.brand-logo:hover .logo-image{
    transform:rotate(-3deg) scale(1.04);
}

.logo-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.logo-text h1{
    margin:0;
    font-size:1.75rem;
    line-height:1;
    font-weight:700;
    color:var(--primary);
    white-space:nowrap;
}

.logo-text p{
    margin-top:6px;
    font-size:.90rem;
    font-weight:600;
    color:var(--secondary);
    white-space:nowrap;
}

/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

.desktop-nav{
    margin-left:auto;
}

.desktop-nav ul{
    display:flex;
    align-items:center;
    gap:34px;
    list-style:none;
    margin:0;
    padding:0;
}

.desktop-nav li{
    position:relative;
}

.desktop-nav a{
    position:relative;
    display:flex;
    align-items:center;
    color:var(--text);
    text-decoration:none;
    font-size:1rem;
    font-weight:600;
    transition:.3s;
}

.desktop-nav a:hover,
.desktop-nav a.active{
    color:var(--primary);
}

.desktop-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-10px;
    width:0;
    height:3px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
    border-radius:20px;
    transform:translateX(-50%);
    transition:.35s;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after{
    width:100%;
}


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

.header-actions{
    display:flex;
    align-items:center;
    gap:18px;
}

/* ==========================================================
   WHATSAPP BUTTON
========================================================== */

.whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 28px;
    border-radius:999px;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    font-size:.96rem;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 15px 35px rgba(37,211,102,.30);
    transition:all .35s ease;
}

.whatsapp-btn i{
    font-size:20px;
}

.whatsapp-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 45px rgba(37,211,102,.40);
}

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

.menu-toggle{
    display:none;
    width:54px;
    height:54px;
    border:none;
    border-radius:18px;
    background:#fff;
    cursor:pointer;
    position:relative;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s;
    z-index:1002;
}

.menu-toggle span{
    position:absolute;
    width:24px;
    height:2.5px;
    background:var(--primary);
    border-radius:50px;
    transition:all .35s ease;
}

.menu-toggle span:nth-child(1){
    transform:translateY(-8px);
}

.menu-toggle span:nth-child(2){
    transform:translateY(0);
}

.menu-toggle span:nth-child(3){
    transform:translateY(8px);
}

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg);
}

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

.site-header.scrolled .header-wrapper{
    min-height:78px;
}

.site-header.scrolled .logo-image{
    width:62px;
    height:62px;
}

.site-header.scrolled .logo-text h1{
    font-size:1.55rem;
}

/* ==========================================================
   SCROLL PROGRESS
========================================================== */

.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:4px;
    z-index:999999;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
    transition:width .15s linear;
}

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

.mobile-nav{
    position:fixed;
    top:0;
    right:-100%;
    width:360px;
    max-width:100%;
    height:100vh;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    box-shadow:-20px 0 60px rgba(0,0,0,.18);
    transition:right .45s cubic-bezier(.22,1,.36,1);
    z-index:9999;
}

.mobile-nav.active{
    right:0;
}

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

.mobile-nav-header{
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    min-height:86px;
    background:#ffffff;
    border-bottom:1px solid rgba(0,0,0,.08);
    z-index:2;
}

.mobile-brand{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}

.mobile-brand-logo{
    width:52px;
    height:52px;
    object-fit:contain;
    border-radius:50%;
    background:#fff;
    padding:4px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.mobile-brand-text{
    display:flex;
    flex-direction:column;
}

.mobile-brand-text h2{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:var(--primary);
    line-height:1.2;
}

.mobile-brand-text span{
    margin-top:4px;
    font-size:12px;
    font-weight:600;
    color:var(--secondary);
}

/* ==========================================================
   CLOSE BUTTON
========================================================== */

.mobile-close{
    width:50px;
    height:50px;
    border:none;
    border-radius:16px;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s;
}

.mobile-close i{
    font-size:24px;
    color:var(--primary);
}

.mobile-close:hover{
    transform:rotate(90deg);
    background:#f7f7f7;
}

/* ==========================================================
   OVERLAY
========================================================== */

.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:9998;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
}

/* ==========================================================
   BODY LOCK
========================================================== */

body.menu-open{
    overflow:hidden;
}

body.menu-open .menu-toggle{
    position:fixed;
    top:18px;
    right:18px;
    z-index:10001;
}

/* ==========================================================
   MOBILE MENU ITEMS
========================================================== */

.mobile-menu{
    list-style:none;
    margin:0;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}

.mobile-menu li{
    margin:0;
    padding:0;
}

.mobile-menu a{
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px 20px;
    border-radius:18px;
    text-decoration:none;
    color:var(--text);
    font-size:17px;
    font-weight:600;
    transition:all .30s ease;
    position:relative;
}

.mobile-menu a i{
    width:24px;
    text-align:center;
    font-size:20px;
    color:var(--primary);
    transition:.30s;
}

.mobile-menu a span{
    flex:1;
}

.mobile-menu a:hover{
    background:#f5f8f5;
    transform:translateX(8px);
}

.mobile-menu a:hover i{
    transform:scale(1.12);
}

.mobile-menu a.active{
    background:linear-gradient(
        135deg,
        var(--primary),
        #47714b
    );
    color:#fff;
    box-shadow:0 15px 35px rgba(44,95,45,.18);
}

.mobile-menu a.active i{
    color:#fff;
}

.mobile-menu a.active::before{
    content:"";
    position:absolute;
    left:0;
    top:12px;
    bottom:12px;
    width:4px;
    background:var(--secondary);
    border-radius:0 10px 10px 0;
}

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

.mobile-menu-cta{
    padding:20px;
    margin-top:auto;
    border-top:1px solid rgba(0,0,0,.08);
}

.mobile-whatsapp-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    padding:16px;
    border-radius:18px;
    text-decoration:none;
    background:#25D366;
    color:#fff;
    font-size:17px;
    font-weight:700;
    box-shadow:0 15px 35px rgba(37,211,102,.28);
    transition:.30s;
}

.mobile-whatsapp-btn:hover{
    transform:translateY(-3px);
}

.mobile-whatsapp-btn i{
    font-size:24px;
}

/* ==========================================================
   SOCIAL ICONS
========================================================== */

.mobile-social{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    padding:22px 20px 28px;
    border-top:1px solid rgba(0,0,0,.08);
}

.mobile-social a{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fafafa;
    border:1px solid #ececec;
    text-decoration:none;
    transition:.30s;
}

.mobile-social a i{
    font-size:20px;
    color:var(--primary);
}

.mobile-social a:hover{
    background:var(--primary);
    transform:translateY(-4px);
}

.mobile-social a:hover i{
    color:#fff;
}

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

.mobile-nav::-webkit-scrollbar{
    width:6px;
}

.mobile-nav::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

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

@media (max-width:992px){

.desktop-nav,
.whatsapp-btn{

display:none;

}

.menu-toggle{

display:flex;

}

.header-wrapper{

min-height:82px;

}

.logo-image{

width:60px;

height:60px;

}

.logo-text h1{

font-size:1.55rem;

}

.logo-text p{

font-size:.82rem;

}

.mobile-nav{

width:360px;

max-width:92%;

}

}

@media (max-width:768px){

.header-wrapper{

min-height:76px;

}

.logo-image{

width:54px;

height:54px;

}

.logo-text h1{

font-size:1.30rem;

}

.logo-text p{

font-size:.75rem;

}

.mobile-nav{

width:100%;

max-width:100%;

}

.mobile-menu{

padding:18px;

}

.mobile-menu a{

padding:16px 18px;

font-size:16px;

}

.mobile-brand-logo{

width:60px;

height:60px;

}

.mobile-brand-text h2{

font-size:17px;

}

.mobile-brand-text span{

font-size:11px;

}

.mobile-close{

width:46px;

height:46px;

}

.mobile-close i{

font-size:22px;

}

}

@media (max-width:480px){

.logo-text p{

display:none;

}

.logo-image{

width:50px;

height:50px;

}

.logo-text h1{

font-size:1.15rem;

}

.mobile-nav-header{

padding:14px 16px;

}

.mobile-menu{

padding:14px;

}

.mobile-menu a{

padding:15px 16px;

font-size:15px;

gap:14px;

}

.mobile-whatsapp-btn{

padding:15px;

font-size:16px;

}

.mobile-social{

gap:14px;

padding:18px;

}

.mobile-social a{

width:46px;

height:46px;

}

}

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

.mobile-menu li{

opacity:0;

transform:translateX(20px);

animation:mobileMenuFade .45s forwards;

}

.mobile-menu li:nth-child(1){animation-delay:.05s;}
.mobile-menu li:nth-child(2){animation-delay:.10s;}
.mobile-menu li:nth-child(3){animation-delay:.15s;}
.mobile-menu li:nth-child(4){animation-delay:.20s;}
.mobile-menu li:nth-child(5){animation-delay:.25s;}
.mobile-menu li:nth-child(6){animation-delay:.30s;}

@keyframes mobileMenuFade{

to{

opacity:1;

transform:translateX(0);

}

}


/* Floating WhatsApp Button */

.floating-whatsapp{

    position:fixed;

    right:20px;

    bottom:120px; /* moved above back-to-top */

    width:64px;

    height:64px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    text-decoration:none;

    box-shadow:0 10px 25px rgba(37,211,102,.35);

    z-index:9999;

	animation: whatsappFloat 3s ease-in-out infinite,
               whatsappPulse 2.5s infinite;
    transition: transform .25s ease, box-shadow .25s ease;

}

.floating-whatsapp:hover{
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 18px 40px rgba(37,211,102,.45);
}

.floating-whatsapp i{
    animation: whatsappShake 4s ease-in-out infinite;
}

/* Smooth floating movement */
@keyframes whatsappFloat{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-6px);
    }
}

/* Soft glow pulse */
@keyframes whatsappPulse{
    0%{
        box-shadow: 0 0 0 0 rgba(37,211,102,.45);
    }
    70%{
        box-shadow: 0 0 0 16px rgba(37,211,102,0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(37,211,102,0);
    }
}

/* Very subtle icon shake every few seconds */
@keyframes whatsappShake{
    0%,90%,100%{
        transform: rotate(0deg);
    }
    92%{
        transform: rotate(-8deg);
    }
    94%{
        transform: rotate(8deg);
    }
    96%{
        transform: rotate(-6deg);
    }
    98%{
        transform: rotate(6deg);
    }
}

@media (max-width:767px){

    .floating-whatsapp{

        width:58px;

        height:58px;

        right:16px;

        bottom:110px; /* moved above back-to-top on mobile */

        font-size:30px;

    }

}



/* ==========================================================
DESKTOP DROPDOWN MENU
========================================================== */

.has-dropdown{
position:relative;
}

.dropdown-toggle{
gap:8px;
}

.dropdown-toggle i{
font-size:12px;
transition:transform .3s ease;
}

.has-dropdown:hover .dropdown-toggle i{
transform:rotate(180deg);
}


.dropdown-menu{

    position:absolute;

    top: 100%;

    left:50%;

    transform:translateX(-50%) translateY(8px);

    width:920px;

    max-width:calc(100vw - 60px);

    background:#fff;

    border-radius:18px;

    padding:22px;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

    border:1px solid rgba(0,0,0,.06);

    display:grid;

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

    gap:14px 18px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:all .22s ease;

    z-index:1200;

}

.has-dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);

}


.dropdown-menu li{
margin:0;
}

.dropdown-menu a{
display:flex;
align-items:center;
padding:12px 14px;
border-radius:12px;
color:var(--text);
font-size:.95rem;
font-weight:600;
text-decoration:none;
transition:all .25s ease;
}

.dropdown-menu a::after{
display:none !important;
}

.dropdown-menu a:hover{
background:#f5f8f5;
color:var(--primary);
transform:translateX(4px);
}

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

.mobile-dropdown-btn{
    width:100%;
    border:none;
    background:#fff;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-radius:18px;
    font-size:16px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    transition:all .3s ease;
    text-align:left;
}

.mobile-dropdown-btn > i:first-child{
    width:24px;
    min-width:24px;
    text-align:center;
    font-size:20px;
    color:var(--primary);
}

.mobile-dropdown-btn span{
    flex:1;
    text-align:left;
}

.mobile-dropdown-btn .fa-chevron-down{
    margin-left:auto;
    font-size:14px;
    transition:transform .3s ease;
}

.mobile-submenu{
    display:none;
    padding:10px 0 0 18px;
}

.mobile-dropdown.active .mobile-submenu{
    display:block;
}

/* Hover effect */
.mobile-dropdown-btn:hover{

    background:#f5f8f5;

}

/* Left icon */
.mobile-dropdown-btn > i:first-child{

    width:22px;

    min-width:22px;

    text-align:center;

    font-size:18px;

    color:var(--primary);

}

/* Text */
.mobile-dropdown-btn span{

    flex:1;

    text-align:left;

}



/* Right arrow */
.mobile-dropdown-btn .fa-chevron-down{

    margin-left:auto;

    font-size:14px;

    transition:transform .3s ease;

}

/* Rotate arrow when open */
.mobile-dropdown.active .fa-chevron-down{

    transform:rotate(180deg);

}

/* Active state */
.mobile-dropdown.active > .mobile-dropdown-btn{

    background:#f3f7f2;

    color:var(--primary);

    font-weight:700;

}


/* Mobile submenu icons */
.mobile-submenu a{
    display:flex;
    align-items:center;
    gap:12px;
}

.submenu-icon{
    width:22px;
    min-width:22px;
    text-align:center;
    font-size:18px;
    color:var(--secondary);
    transition:transform .3s ease, color .3s ease;
    animation:submenuFloat 3s ease-in-out infinite;
}

/* Hover / tap animation */
.mobile-submenu a:hover .submenu-icon{
    transform:scale(1.18) rotate(-6deg);
    color:var(--primary);
}

/* Staggered floating animation */
.mobile-submenu li:nth-child(1) .submenu-icon{ animation-delay:0s; }
.mobile-submenu li:nth-child(2) .submenu-icon{ animation-delay:.2s; }
.mobile-submenu li:nth-child(3) .submenu-icon{ animation-delay:.4s; }
.mobile-submenu li:nth-child(4) .submenu-icon{ animation-delay:.6s; }
.mobile-submenu li:nth-child(5) .submenu-icon{ animation-delay:.8s; }
.mobile-submenu li:nth-child(6) .submenu-icon{ animation-delay:1s; }
.mobile-submenu li:nth-child(7) .submenu-icon{ animation-delay:1.2s; }
.mobile-submenu li:nth-child(8) .submenu-icon{ animation-delay:1.4s; }

@keyframes submenuFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-2px); }
}



/* ==========================================================
   DESKTOP MEGA MENU - FINAL FIX
========================================================== */
@media (min-width: 992px){

  /* Keep top menu always in one line */
  .desktop-nav ul{
    flex-wrap: nowrap;
    gap: 26px;
  }

  .desktop-nav li{
    white-space: nowrap;
  }

  /* Mega dropdown */
  .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);

    width: 920px;
    max-width: calc(100vw - 60px);

    background: #fff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    border: 1px solid rgba(0,0,0,.06);

    display: grid;
    grid-template-columns: repeat(4, minmax(160px,1fr));
    gap: 14px 18px;

    opacity: 0;
    visibility: hidden;
    transition: all .28s ease;
    z-index: 1200;
  }

  .has-dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }

  .dropdown-menu li{
    margin: 0;
    white-space: normal;
  }

  .dropdown-menu a{
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--text);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    white-space: normal;
    transition: all .25s ease;
  }

  .dropdown-menu a::after{
    display: none !important;
  }

  .dropdown-menu a:hover{
    background: #f5f8f5;
    color: var(--primary);
    transform: translateX(4px);
  }
}

/* Tablet desktop */
@media (min-width: 992px) and (max-width: 1199px){
  .dropdown-menu{
    width: 760px;
    grid-template-columns: repeat(3, minmax(180px,1fr));
  }
}

/* Large desktop */
@media (min-width: 1400px){
  .dropdown-menu{
    width: 980px;
  }
}


/* Active submenu item */
.mobile-submenu a.active {

	background: linear-gradient( 135deg, var(--primary), #47714b );
    color: #fff;
    box-shadow: 0 15px 35px rgb(44 95 45 / 18%);
}

.mobile-submenu a.active .submenu-icon {
    color: #fff;
}

/* Active main products item */
.mobile-dropdown.active > .mobile-dropdown-btn {
    color: #2f5b38;
    font-weight: 700;
}


.dropdown-menu a.active {
    color: #2f5b38;
    font-weight: 700;
}



/* ==========================================================

   HOME OFFER BAR

========================================================== */

.home-offer-bar{

    background:linear-gradient(90deg,#0f5132,#14532d,#1f7a4c);

    color:#fff;

    position:relative;

    overflow:hidden;

    z-index:101;

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

}

.home-offer-bar::before{

    content:'';

    position:absolute;

    inset:-30%;

    background:radial-gradient(circle at center,

        rgba(255,255,255,.12) 0%,

        rgba(255,255,255,0) 70%);

    animation:offerRotate 10s linear infinite;

}

@keyframes offerRotate{

    from{transform:rotate(0deg);}

    to{transform:rotate(360deg);}

}

.home-offer-inner{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:10px 0;

    flex-wrap:wrap;

}

.home-offer-left{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    font-size:1rem;

}

.home-offer-left i{

    color:#FFD54F;

}

.home-offer-sub{

    display:block;

    font-size:.82rem;

    font-weight:500;

    opacity:.92;

    margin-top:2px;

}

.home-offer-countdown{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    justify-content:center;

}

.home-timer{

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

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

    border-radius:16px;

    padding:10px 14px;

    min-width:74px;

    text-align:center;

    backdrop-filter:blur(6px);

}

.home-timer strong{

    display:block;

    font-size:1.1rem;

    line-height:1;

    color:#fff;

}

.home-timer span{

    display:block;

    margin-top:4px;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.5px;

    opacity:.9;

}

.home-offer-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    padding:12px 18px;

    border-radius:999px;

    font-weight:700;

    box-shadow:0 10px 24px rgba(37,211,102,.28);

    transition:.25s ease;

    white-space:nowrap;

}

.home-offer-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 14px 28px rgba(37,211,102,.36);

}

@media (max-width:767px){

    .home-offer-inner{

        justify-content:center;

        text-align:center;

        gap:12px;

        padding:14px 0;

    }

    .home-offer-left{

        justify-content:center;

        width:100%;

    }

    .home-offer-countdown{

        width:100%;

        gap:8px;

    }

    .home-timer{

        min-width:68px;

        padding:10px 10px;

    }

    .home-offer-btn{

        width:100%;

        justify-content:center;

    }

}

@media (min-width:992px){
    .home-offer-btn{

         display:inline-flex;

        align-items:center;

        justify-content:center;

        gap:8px;

        padding:10px 16px;

        font-size:.92rem;

        font-weight:700;

        color:#fff;

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

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

        border-radius:999px;

        text-decoration:none;

        box-shadow:none;

        white-space:nowrap;

        min-width:170px;
    }

    .home-offer-btn:hover{

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

        transform:none;
    }
}

/* ==========================================================
   INDIAN FLAG GIF
========================================================== */

.offer-flag-gif{
    width:28px;
    height:28px;
    object-fit:contain;
    vertical-align:middle;
    margin-right:8px;
    display:inline-block;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Desktop */
@media (min-width:992px){
    .offer-flag-gif{
        width:30px;
        height:30px;
        margin-right:10px;
    }
}

/* Mobile */
@media (max-width:767px){
    .offer-flag-gif{
        width:26px;
        height:26px;
        margin-right:8px;
    }
}

@media (min-width:992px){
    .home-offer-btn{
        background:rgba(255,255,255,.10);
        border:1px solid rgba(255,255,255,.18);
        box-shadow:none;
    }

    .home-offer-btn:hover{
        background:rgba(255,255,255,.18);
        transform:none;
    }
}

.offer-ends-label{


    text-align:center;

    font-size:.89rem;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#FFD54F;

    font-weight:800;

    margin-bottom:4px;

}


.home-offer-discount{

    display:block;

    margin-top:4px;

    font-size:.85rem;

    font-weight:700;

    color:#FFD54F;

    letter-spacing:.2px;

}



@media (max-width:767px){

    .home-offer-discount{

        font-size:.8rem;

    }

}


/* ==========================================================
   FINAL PREMIUM POLISH
========================================================== */

/* Discount line */
.home-offer-discount{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin-top:6px;
    font-size:.90rem;
    font-weight:700;
    color:#FFD54F;
    line-height:1.35;
}

/* Animated gift icon */
.discount-gift-icon{
    color:#FFD54F;
    animation:giftPulse 1.8s ease-in-out infinite;
    transform-origin:center;
}

@keyframes giftPulse{
    0%,100%{
        transform:scale(1) rotate(0deg);
        filter:drop-shadow(0 0 0 rgba(255,213,79,0));
    }
    25%{
        transform:scale(1.08) rotate(-5deg);
    }
    50%{
        transform:scale(1.18) rotate(5deg);
        filter:drop-shadow(0 0 10px rgba(255,213,79,.75));
    }
    75%{
        transform:scale(1.08) rotate(-3deg);
    }
}

/* Offer Ends label */
.offer-ends-label{
    color:#FFD54F;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
    animation:offerGlow 2.4s ease-in-out infinite;
}

@keyframes offerGlow{
    0%,100%{
        opacity:1;
        transform:scale(1);
        text-shadow:0 0 0 rgba(255,213,79,0);
    }
    50%{
        opacity:.95;
        transform:scale(1.06);
        text-shadow:0 0 14px rgba(255,213,79,.85);
    }
}

/* Timer cards floating effect */
.home-timer{
    animation:timerFloat 5s ease-in-out infinite;
}

.home-timer:nth-child(2){ animation-delay:.2s; }
.home-timer:nth-child(3){ animation-delay:.4s; }
.home-timer:nth-child(4){ animation-delay:.6s; }

@keyframes timerFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-4px);
    }
}

/* Subtle shimmer sweep */
.home-offer-countdown{
    position:relative;
    overflow:hidden;
}

.home-offer-countdown::after{
    content:'';
    position:absolute;
    top:-120%;
    left:-30%;
    width:26%;
    height:320%;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.16) 50%,
        rgba(255,255,255,0) 100%
    );
    transform:rotate(18deg);
    animation:countdownShine 7s linear infinite;
}

@keyframes countdownShine{
    0%{ left:-40%; }
    100%{ left:140%; }
}

/* Claim button premium interaction */
.home-offer-btn{
    transition:transform .25s ease, box-shadow .25s ease;
}

.home-offer-btn:hover{
    transform:translateY(-2px);
}

/* Mobile fine tuning */
@media (max-width:767px){
    .home-offer-discount{
        justify-content:center;
        text-align:center;
        font-size:.82rem;
    }

    .offer-ends-label{
        font-size:.74rem;
    }

    .home-timer{
        animation:none;
    }
}


/* ==========================================================
   END OF FILE
========================================================== */