/* <style> */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Open Sans', sans-serif;
 }

 body {
     background: #f4f2ec;
     color: #333;
 }

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

 .social-icons {
     position: fixed;
     top: 20px;
     left: 20px;
     right: 20px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     z-index: 1000;
 }

 .social-left,
 .social-right {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .social-icons a {
     width: 48px;
     height: 48px;
     background: #fff;
     color: #333;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     font-size: 20px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
     transition: .3s;
 }

 .social-icons a:hover {
     background: darkred;
     color: #fff;
     transform: scale(1.08);
 }

 @media (max-width:768px) {

     .social-icons {
         top: 15px;
         left: 15px;
         right: 15px;
     }

     .social-left,
     .social-right {
         gap: 8px;
     }

     .social-icons a {
         width: 42px;
         height: 42px;
         font-size: 18px;
     }
 }

 /* ================= BRAND ================= */
 .brand {
     background: #f7eaea;
     text-align: center;
     padding: 20px 15px;
 }

 .brand img {
     width: 14%;
 }

 .brand p {
     margin-top: 8px;
     font-weight: bold;
     color: darkred;
     font-size: 26px;
 }

 @media (max-width: 768px) {
     .brand img {
         width: 58%;
     }

     .brand p {
         font-size: 20px;
     }
 }

 /* ================= PRODUCT WRAPPER ================= */

 .product-wrapper {
     max-width: 1400px;
     margin: auto;
     padding: 40px 20px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     gap: 30px;
     align-items: start;
 }

 /* ================= PRODUCT CARD ================= */

 .product-card {
     display: flex;
     flex-direction: column;
     background: #fff7f7e0;
     border-radius: 18px;
     overflow: hidden;
     border: 1px solid rgba(212, 175, 55, .25);
     box-shadow:
         0 12px 30px rgba(0, 0, 0, .08),
         0 3px 8px rgba(0, 0, 0, .05);
     transition: .35s;
     opacity: 0;
     transform: translateY(40px);
 }

 /* .product-card:hover .bg-wave {
            transform: scale(1.08);
            transition: 0.6s ease;
        } */
 .product-card:hover .bg-wave {
     transform: translateX(-25px) scale(1.08);
 }

 .product-image {
     position: relative;
     z-index: 2;
     filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .25));
     transition: none;
 }

 .bg-wave {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 1;
     transition: 0.6s ease;
 }

 .product-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* IMAGE */

 /* .product-img {
            background: linear-gradient(to bottom,
                    #dff4ff 0%,
                    #f8fff4 55%,
                    #fffdf8 100%);
            height: 50vh;
            display: flex;
            justify-content: center;
            padding: 25px;
            overflow: hidden;
        } */

 .product-img {
     height: 40vh;
     display: flex;
     position: relative;
     background: #a4dbef;
     overflow: hidden;
     justify-content: center;
 }

 /* .product-img .grass {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        } */

 .product-img img:last-child {
     position: relative;
     z-index: 2;
     filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .25));
 }

 /* .product-img img {
            transition: .4s;
        } */

 /* .product-card:hover .product-img img {
            transform: scale(1.08) rotate(-2deg);
        } */

 /* CONTENT  */

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

 .product-content h2 {
     font-size: 24px;
     font-weight: 800;
     letter-spacing: .5px;
     color: #7d0000;
     /* margin-bottom: 18px; */
 }

 .product-desc {
     color: #000000;
     line-height: 1.6;
     font-size: 16px;
     margin-bottom: 15px;
     font-weight: bold;
 }

 .tagline {
     font-style: italic;
     color: #666;
     margin-bottom: 15px;
 }

 .divider {
     width: 70px;
     height: 4px;
     border-radius: 10px;
     background: linear-gradient(to right, #e0a600, #ffd85e);
 }

 /* BUTTON */

 .toggle-btn {
     background: linear-gradient(90deg, #d89d08, #f5c242);
     color: #222;
     font-weight: 700;
     border-radius: 50px;
     padding: 14px;
     transition: .35s;
     margin-top: 2%;
 }

 .toggle-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(218, 165, 32, .35);
 }

 /* NUTRITION */
 .nutrition-box {
     display: none;
     background: #fffdf7;
     margin-top: 10px;
     border: 2px solid #f2d06d;
     padding: 15px;
     border-radius: 12px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
 }

 .nutrition-box table {
     width: 100%;
     border-collapse: collapse;
     font-size: 14px;
 }

 .nutrition-box th,
 .nutrition-box td {
     border: 1px solid #000;
     padding: 8px;
     text-align: center;
 }

 .nutrition-box th {
     background: #eee;
 }

 .note {
     font-size: 11px;
     margin-top: 8px;
 }

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

 @media (max-width: 480px) {
     .product-wrapper {
         grid-template-columns: 1fr;
     }
 }

 @media (min-width: 481px) and (max-width: 900px) {
     .product-wrapper {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {
     .hero {
         /*min-height: 35vh;*/
         background-size: 100% auto;
         background-position: center;
     }
 }

 .v_m {
     width: 100%;
     /* height: 80vh; */
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 }

 .v_m img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 @media (max-width: 768px) {
     /* .v_m {
        height: 250px;
    } */

     .v_m img {
         width: 100%;
         height: 100%;
         object-fit: contain;
     }
 }


 /* @media (max-width: 768px) {
            .v_m {
                height: 250px;
            }
        } */

 /* Go To Top Button */
 #myBtn {
     display: none;
     /* Hidden initially */
     position: fixed;
     bottom: 20px;
     right: 30px;
     z-index: 99;
     border: none;
     outline: none;
     background-color: transparent;
     cursor: pointer;
     padding: 0;
     border-radius: 50%;
 }

 #myBtn:hover {
     transform: scale(1.1);
     background-color: #555;
 }

 #myBtn img {
     width: 50px;
     height: 50px;
 }

 @media (max-width: 768px) {
     #myBtn {
         width: 48px;
         height: 48px;
         right: 15px;
         bottom: 20px;
     }

     #myBtn img {
         width: 24px;
         height: 24px;
     }
 }

 .price-text {
     display: inline-block;
     /* margin-top: 10px; */
     background: #fff4dc;
     color: #8b0000;
     padding: 8px 14px;
     border-radius: 30px;
     font-weight: 700;
     border: 1px solid #f2c75a;
 }

 .product-tag {
     display: inline-block;
     padding: 6px 14px;
     border-radius: 20px;
     background: #f3cd6b;
     color: #7d0000;
     font-size: 12px;
     font-weight: 700;
     margin-bottom: 12px;
     text-transform: uppercase;
 }

 .filter-wrapper {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 14px;
     padding: 30px 20px;
     margin: 0 auto 20px;
     max-width: 1300px;
     position: relative;
     z-index: 100;
 }

 .filter-btn {
     position: relative;
     padding: 12px 24px;
     border: 2px solid #d9b14d;
     border-radius: 50px;
     background: linear-gradient(145deg, #ffffff, #fff7e8);
     color: #7d0000;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     transition: all .35s ease;
     box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
     overflow: hidden;
 }

 .filter-btn::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, #d89d08, #f5d36c);
     transform: scaleX(0);
     transform-origin: left;
     transition: .35s;
     z-index: -1;
 }

 .filter-btn:hover {
     color: #fff;
     border-color: #d89d08;
     transform: translateY(-4px);
     box-shadow: 0 12px 24px rgba(216, 157, 8, .35);
 }

 .filter-btn:hover::before {
     transform: scaleX(1);
 }

 .filter-btn.active {
     background: linear-gradient(90deg, #7d0000, #b11212);
     color: #fff;
     border-color: #7d0000;
     box-shadow: 0 10px 22px rgba(125, 0, 0, .35);
 }

 .filter-btn.active::before {
     display: none;
 }

 @media (max-width:768px) {

     .filter-wrapper {
         gap: 10px;
         padding: 20px 10px;
     }

     .filter-btn {
         padding: 9px 16px;
         font-size: 13px;
     }

 }

 /* =================================================================== PROMOTION MARQUEE ================================================================ */

 .promo-marquee {
     width: 100%;
     overflow: hidden;

     background: linear-gradient(90deg,
             #680000,
             #8d0808,
             #680000);

     border-top: 1px solid rgba(242, 199, 90, .6);
     border-bottom: 1px solid rgba(242, 199, 90, .6);

     box-shadow:
         0 5px 18px rgba(80, 0, 0, .15);

     position: relative;
     z-index: 10;
 }

 /* subtle shine */

 .promo-marquee::after {
     content: "";

     position: absolute;
     inset: 0;

     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, .08),
             transparent);

     pointer-events: none;
 }

 .promo-track {
     display: flex;
     align-items: center;

     width: max-content;

     animation: promoScroll 28s linear infinite;
 }

 .promo-item {
     white-space: nowrap;

     padding: 13px 22px;

     color: #fff8df;

     font-size: 14px;
     font-weight: 600;

     letter-spacing: .6px;
 }

 .promo-item strong {
     color: #ffd85e;

     font-weight: 900;
 }

 .promo-separator {
     color: #f4c542;

     font-size: 15px;

     opacity: .9;
 }

 .promo-shop {
     color: #ffd85e;

     font-weight: 900;

     cursor: pointer;
 }

 .promo-shop i {
     margin-left: 6px;

     transition: .3s;
 }

 /* continuous movement */

 @keyframes promoScroll {

     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }

 }

 /* Pause when user hovers */

 .promo-marquee:hover .promo-track {
     animation-play-state: paused;
 }

 .promo-icon {
     font-size: 24px;
 }

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

 @media (max-width: 768px) {

     .promo-track {
         animation-duration: 22s;
     }

     .promo-item {
         padding: 11px 16px;

         font-size: 12px;

         letter-spacing: .4px;
     }

     .promo-separator {
         font-size: 12px;
     }

 }



 /* ====================================================================== PREMIUM SALE SHOWCASE ================================================================= */

 .sale-showcase {
     position: relative;
     width: 100%;
     min-height: 650px;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 55px 30px;
     overflow: hidden;
     isolation: isolate;

     background:
         radial-gradient(circle at 50% 48%, rgba(218, 169, 35, .15), transparent 25%),
         radial-gradient(circle at 15% 30%, rgba(218, 169, 35, .08), transparent 22%),
         radial-gradient(circle at 85% 30%, rgba(218, 169, 35, .08), transparent 22%),
         radial-gradient(circle at 15% 80%, rgba(125, 0, 0, .035), transparent 22%),
         radial-gradient(circle at 85% 80%, rgba(125, 0, 0, .035), transparent 22%);
 }

 /* Center ornament */
 .sale-showcase::before {
     content: "";
     position: absolute;
     width: 520px;
     height: 520px;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     border: 1px solid rgba(202, 157, 35, .12);
     box-shadow:
         0 0 0 45px rgba(202, 157, 35, .07),
         0 0 0 90px rgba(202, 157, 35, .05),
         0 0 0 140px rgba(202, 157, 35, .03);
     pointer-events: none;
 }

 /* Bottom decoration */
 .sale-showcase::after {
     content: "✦   ♡   ✧   ✦   ♡   ✧   ✦";
     position: absolute;
     left: 50%;
     bottom: 7%;
     transform: translateX(-50%);
     color: rgba(180, 130, 20, .25);
     font-size: 13px;
     letter-spacing: 14px;
     white-space: nowrap;
     pointer-events: none;
     animation: bottomDecorFloat 5s ease-in-out infinite;
 }

 /* ============BACKGROUND GLOW============ */

 .sale-glow {
     position: absolute;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: rgba(218, 169, 35, .07);
     filter: blur(35px);
     pointer-events: none;
     z-index: -1;
 }

 .glow-left {
     left: 4%;
     top: 20%;
 }

 .glow-right {
     right: 4%;
     bottom: 15%;
 }

 /* ==========CENTER CONTENT================== */

 .sale-center {
     position: relative;
     z-index: 10;
     width: 100%;
     max-width: 720px;
     padding: 30px 20px;
     text-align: center;
     animation: saleFloat 4s ease-in-out infinite;
 }

 .sale-center::before {
     content: "";
     position: absolute;
     left: 50%;
     top: 45%;
     width: 300px;
     height: 180px;
     transform: translate(-50%, -50%);
     background: radial-gradient(ellipse, rgba(222, 175, 45, .13), transparent 70%);
     filter: blur(15px);
     pointer-events: none;
     z-index: -1;
 }

 /* =========TEXT=============== */

 .sale-top-text {
     display: inline-block;
     margin-bottom: 8px;
     color: #a87b00;
     font-size: 13px;
     font-weight: 900;
     letter-spacing: 4px;
 }

 .sale-center h1 {
     margin: 0;
     font-family: Georgia, serif;
     font-size: clamp(95px, 12vw, 155px);
     line-height: .85;
     font-weight: 900;
     letter-spacing: 10px;

     background: linear-gradient(180deg, #f9da72, #c28a00, #f1c43d);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

     filter: drop-shadow(0 8px 12px rgba(100, 0, 0, .16));
     text-shadow:
         0 4px 0 rgba(255, 255, 255, .2),
         0 10px 25px rgba(120, 70, 0, .18);
 }

 .sale-line {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     width: 240px;
     margin: 16px auto;
 }

 .sale-line span {
     flex: 1;
     height: 1px;
     background: linear-gradient(90deg, transparent, #d4a326);
 }

 .sale-line span:last-child {
     background: linear-gradient(90deg, #d4a326, transparent);
 }

 .sale-line i {
     color: #970000;
     font-size: 14px;
 }

 .sale-center h2 {
     margin: 0 0 8px;
     color: #720000;
     font-family: Georgia, serif;
     font-size: clamp(25px, 3vw, 34px);
     line-height: 1.2;
 }

 .sale-center p {
     margin: 0 auto 20px;
     color: #666;
     font-size: 15px;
     line-height: 1.6;
 }

 .sale-center p strong {
     color: #850000;
 }

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

 .sale-button {
     border: 0;
     padding: 13px 28px;
     border-radius: 50px;
     cursor: pointer;
     background: linear-gradient(100deg, #720000, #b31313, #720000);
     background-size: 200% auto;
     color: #fff;
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 1px;
     box-shadow: 0 10px 25px rgba(120, 0, 0, .25);
     animation: buttonShine 3s linear infinite;
     transition: .3s ease;
 }

 .sale-button i {
     margin-left: 8px;
     transition: .3s ease;
 }

 .sale-button:hover {
     transform: translateY(-3px) scale(1.04);
     box-shadow: 0 15px 30px rgba(120, 0, 0, .32);
 }

 .sale-button:hover i {
     transform: translateX(5px);
 }

 /* =======BUBBLES======= */

 .brand-bubble {
     position: absolute;
     z-index: 8;
     box-sizing: border-box;
     width: 145px;
     height: 145px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     border-radius: 50%;
     box-shadow: 0 15px 35px rgba(70, 0, 0, .14);
 }

 .bubble-discount {
     left: 7%;
     top: 38px;
     width: 150px;
     height: 150px;
     color: #fff;
     background: linear-gradient(145deg, #800000, #c01616);
     border: 3px solid #dfb536;
     transform: rotate(-10deg);
     animation: bubbleLeft 4s ease-in-out infinite;
 }

 .bubble-discount span {
     font-size: 10px;
     font-weight: 800;
     letter-spacing: 2px;
 }

 .bubble-discount strong {
     font-size: 42px;
     line-height: 1;
     color: #ffdb65;
 }

 .bubble-discount small {
     font-size: 11px;
     font-weight: 900;
     letter-spacing: 2px;
 }

 .bubble-natural {
     right: 7%;
     top: 38px;
     width: 150px;
     height: 150px;
     color: #720000;
     background: radial-gradient(circle at 35% 30%, #fffdf0, #f1d98f);
     border: 2px dashed #b8860b;
     transform: rotate(9deg);
     animation: bubbleRight 4.5s ease-in-out infinite;
 }

 .bubble-natural .bubble-icon {
     font-size: 27px;
     margin-bottom: 2px;
 }

 .bubble-natural strong {
     font-family: Georgia, serif;
     font-size: 25px;
 }

 .bubble-natural span {
     color: #987000;
     font-size: 9px;
     font-weight: 900;
     letter-spacing: 2px;
 }

 .bubble-fresh {
     left: 9%;
     bottom: 35px;
     width: 135px;
     height: 135px;
     color: #760000;
     background: linear-gradient(145deg, #fffdf2, #f5e4ad);
     border: 2px solid #d3aa3b;
     transform: rotate(7deg);
     animation: bubbleLeft 4.5s ease-in-out infinite;
 }

 .bubble-fresh .bubble-icon {
     font-size: 24px;
     margin-bottom: 3px;
 }

 .bubble-fresh strong {
     font-family: Georgia, serif;
     font-size: 20px;
 }

 .bubble-fresh span {
     color: #a17800;
     font-size: 8px;
     font-weight: 900;
     letter-spacing: 1.5px;
 }

 .bubble-offer {
     right: 9%;
     bottom: 35px;
     width: 135px;
     height: 135px;
     color: #fff;
     background: linear-gradient(145deg, #8a0000, #b71515);
     border: 2px solid #e2b638;
     transform: rotate(-7deg);
     animation: bubbleRight 5s ease-in-out infinite;
 }

 .bubble-offer span {
     font-size: 8px;
     font-weight: 800;
     letter-spacing: 2px;
 }

 .bubble-offer strong {
     font-family: Georgia, serif;
     font-size: 24px;
     color: #ffdb65;
 }

 .bubble-offer small {
     margin-top: 4px;
     font-size: 7px;
     font-weight: 800;
     letter-spacing: 1px;
 }

 /* ==========MINI BRAND TEXT========================== */

 .brand-mini-text {
     position: absolute;
     z-index: 4;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     color: #8b0000;
     opacity: .72;
     animation: miniFloat 4s ease-in-out infinite;
 }

 .brand-mini-text i {
     color: #c69a20;
     font-size: 17px;
 }

 .brand-mini-text span {
     font-size: 8px;
     font-weight: 900;
     letter-spacing: 2px;
 }

 .mini-left {
     left: 24%;
     top: 30%;
 }

 .mini-right {
     right: 24%;
     bottom: 30%;
     animation-delay: 1.5s;
 }

 /* ================SPARKLES / HEARTS / STARS============== */

 .sale-sparkle,
 .deco-heart,
 .deco-star,
 .gold-dot,
 .gold-diamond,
 .deco-curve,
 .mini-leaf,
 .sale-leaf {
     position: absolute;
     pointer-events: none;
 }

 .sale-sparkle {
     z-index: 2;
     color: #d1a020;
 }

 .sparkle-1 {
     left: 22%;
     top: 22%;
 }

 .sparkle-2 {
     right: 22%;
     top: 22%;
     animation-delay: .4s;
 }

 .sparkle-3 {
     left: 29%;
     bottom: 18%;
     animation-delay: .7s;
 }

 .sparkle-4 {
     right: 29%;
     bottom: 18%;
     animation-delay: 1s;
 }

 .sparkle-5 {
     left: 5%;
     top: 50%;
     animation-delay: .3s;
 }

 .sparkle-6 {
     right: 5%;
     top: 50%;
     animation-delay: .8s;
 }

 .sale-sparkle {
     font-size: 30px;
     animation: sparkle 2.4s infinite;
 }

 .deco-heart {
     z-index: 3;
     color: #a40000;
     font-size: 23px;
     opacity: .5;
     text-shadow: 0 2px 8px rgba(164, 0, 0, .12);
     animation: heartFloat 4s ease-in-out infinite;
 }

 .heart-1 {
     left: 14%;
     top: 28%;
     animation-delay: .2s;
 }

 .heart-2 {
     left: 26%;
     top: 8%;
     font-size: 20px;
     animation-delay: 1s;
 }

 .heart-3 {
     left: 7%;
     bottom: 30%;
     font-size: 20px;
     animation-delay: 1.8s;
 }

 .heart-4 {
     right: 14%;
     top: 29%;
     font-size: 20px;
     animation-delay: .6s;
 }

 .heart-5 {
     right: 26%;
     top: 9%;
     font-size: 20px;
     animation-delay: 1.4s;
 }

 .heart-6 {
     right: 7%;
     bottom: 30%;
     font-size: 20px;
     animation-delay: 2s;
 }

 .deco-star {
     z-index: 3;
     color: #d1a020;
     opacity: .7;
     text-shadow: 0 0 8px rgba(209, 160, 32, .25);
     animation: starTwinkle 2.8s ease-in-out infinite;
 }

 .star-1 {
     left: 17%;
     top: 18%;
     font-size: 18px;
 }

 .star-2 {
     left: 31%;
     top: 12%;
     font-size: 10px;
     animation-delay: .5s;
 }

 .star-3 {
     left: 11%;
     top: 48%;
     font-size: 13px;
     animation-delay: 1s;
 }

 .star-4 {
     left: 27%;
     bottom: 18%;
     font-size: 16px;
     animation-delay: 1.5s;
 }

 .star-5 {
     right: 17%;
     top: 18%;
     font-size: 18px;
     animation-delay: .3s;
 }

 .star-6 {
     right: 31%;
     top: 12%;
     font-size: 10px;
     animation-delay: .8s;
 }

 .star-7 {
     right: 11%;
     top: 48%;
     font-size: 13px;
     animation-delay: 1.2s;
 }

 .star-8 {
     right: 27%;
     bottom: 18%;
     font-size: 16px;
     animation-delay: 1.7s;
 }

 .star-9 {
     left: 20%;
     bottom: 38%;
     font-size: 9px;
     animation-delay: 2s;
 }

 .star-10 {
     right: 20%;
     bottom: 38%;
     font-size: 9px;
     animation-delay: 2.3s;
 }

 /* =========GOLD DETAILS======================= */

 .gold-dot {
     z-index: 2;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: #d6a62a;
     opacity: .6;
     box-shadow: 0 0 10px rgba(214, 166, 42, .6);
     animation: dotFloat 5s ease-in-out infinite;
 }

 .dot-1 {
     left: 10%;
     top: 38%;
 }

 .dot-2 {
     left: 20%;
     top: 55%;
     width: 3px;
     height: 3px;
 }

 .dot-3 {
     left: 32%;
     top: 27%;
     width: 4px;
     height: 4px;
 }

 .dot-4 {
     left: 37%;
     bottom: 18%;
     width: 3px;
     height: 3px;
 }

 .dot-5 {
     left: 5%;
     bottom: 20%;
     width: 4px;
     height: 4px;
 }

 .dot-6 {
     right: 10%;
     top: 38%;
 }

 .dot-7 {
     right: 20%;
     top: 55%;
     width: 3px;
     height: 3px;
 }

 .dot-8 {
     right: 32%;
     top: 27%;
     width: 4px;
     height: 4px;
 }

 .dot-9 {
     right: 37%;
     bottom: 18%;
     width: 3px;
     height: 3px;
 }

 .dot-10 {
     right: 5%;
     bottom: 20%;
     width: 4px;
     height: 4px;
 }

 .gold-diamond {
     z-index: 2;
     color: #c69a20;
     opacity: .55;
     font-size: 12px;
     animation: diamondFloat 4s ease-in-out infinite;
 }

 .diamond-1 {
     left: 18%;
     bottom: 23%;
 }

 .diamond-2 {
     left: 33%;
     top: 37%;
     font-size: 9px;
     animation-delay: .7s;
 }

 .diamond-3 {
     right: 18%;
     bottom: 23%;
     animation-delay: 1.2s;
 }

 .diamond-4 {
     right: 33%;
     top: 37%;
     font-size: 9px;
     animation-delay: 1.8s;
 }

 /*====LEAVES / CURVES=========== */

 .sale-leaf {
     z-index: 1;
     opacity: .68;
     font-size: 60px;
     animation: leafFloat 5s ease-in-out infinite;
 }

 .leaf-left {
     left: -5px;
     bottom: -8px;
     transform: rotate(-25deg);
 }

 .leaf-right {
     right: -5px;
     top: -8px;
     transform: rotate(25deg);
     animation-direction: reverse;
 }

 .deco-curve {
     z-index: 1;
     width: 150px;
     height: 80px;
     border: 1px solid rgba(190, 145, 30, .22);
     border-radius: 50%;
 }

 .curve-left {
     left: -45px;
     top: 45%;
     transform: rotate(-25deg);
 }

 .curve-right {
     right: -45px;
     top: 42%;
     transform: rotate(25deg);
 }

 .mini-leaf {
     z-index: 2;
     font-size: 28px;
     opacity: .18;
     animation: miniLeafFloat 5s ease-in-out infinite;
 }

 .mini-leaf-1 {
     left: 24%;
     bottom: 8%;
     transform: rotate(-30deg);
 }

 .mini-leaf-2 {
     left: 6%;
     top: 15%;
     font-size: 22px;
     transform: rotate(20deg);
     animation-delay: 1s;
 }

 .mini-leaf-3 {
     right: 24%;
     bottom: 8%;
     transform: rotate(30deg);
     animation-delay: 1.5s;
 }

 .mini-leaf-4 {
     right: 6%;
     top: 15%;
     font-size: 22px;
     transform: rotate(-20deg);
     animation-delay: 2s;
 }

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

 @keyframes saleFloat {

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

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

 @keyframes bubbleLeft {

     0%,
     100% {
         transform: rotate(-10deg) translateY(0);
     }

     50% {
         transform: rotate(-6deg) translateY(-9px);
     }
 }

 @keyframes bubbleRight {

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

     50% {
         transform: rotate(5deg) translateY(-9px);
     }
 }

 @keyframes miniFloat {

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

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

 @keyframes sparkle {

     0%,
     100% {
         opacity: .25;
         transform: scale(.7) rotate(0);
     }

     50% {
         opacity: 1;
         transform: scale(1.25) rotate(90deg);
     }
 }

 @keyframes heartFloat {

     0%,
     100% {
         transform: translateY(0) scale(1);
         opacity: .3;
     }

     50% {
         transform: translateY(-8px) scale(1.15);
         opacity: .7;
     }
 }

 @keyframes dotFloat {

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

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

 @keyframes diamondFloat {

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

     50% {
         transform: translateY(-7px) rotate(45deg);
     }
 }

 @keyframes leafFloat {

     0%,
     100% {
         transform: translateY(0) rotate(-25deg);
     }

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

 @keyframes miniLeafFloat {

     0%,
     100% {
         transform: translateY(0) rotate(-25deg);
     }

     50% {
         transform: translateY(-8px) rotate(-15deg);
     }
 }

 @keyframes buttonShine {
     to {
         background-position: 200% center;
     }
 }

 @keyframes bottomDecorFloat {

     0%,
     100% {
         transform: translateX(-50%) translateY(0);
         opacity: .35;
     }

     50% {
         transform: translateX(-50%) translateY(-5px);
         opacity: .7;
     }
 }

 /* =========TABLET================= */

 @media (max-width:1000px) {
     .sale-showcase {
         min-height: 600px;
         padding: 50px 20px;
     }

     .sale-center {
         max-width: 600px;
     }

     .sale-center h1 {
         font-size: 105px;
     }

     .brand-bubble {
         width: 120px;
         height: 120px;
     }

     .bubble-discount {
         left: 4%;
         top: 35px;
     }

     .bubble-natural {
         right: 4%;
         top: 35px;
     }

     .bubble-fresh {
         left: 7%;
         bottom: 30px;
     }

     .bubble-offer {
         right: 7%;
         bottom: 30px;
     }

     .mini-left {
         left: 18%;
         top: 31%;
     }

     .mini-right {
         right: 18%;
         bottom: 30%;
     }

     .sale-showcase::before {
         width: 430px;
         height: 430px;
     }
 }

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

 @media (max-width:768px) {
     .sale-showcase {
         min-height: 560px;
         padding: 35px 10px 40px;
     }

     .sale-center {
         max-width: 340px;
         padding: 20px 8px;
     }

     .sale-center h1 {
         font-size: 65px;
         letter-spacing: 5px;
     }

     .sale-top-text {
         font-size: 9px;
         letter-spacing: 2px;
     }

     .sale-center h2 {
         font-size: 20px;
     }

     .sale-center p {
         font-size: 12px;
     }

     .brand-bubble {
         width: 88px;
         height: 88px;
     }

     .bubble-discount {
         left: 7px;
         top: 15px;
     }

     .bubble-natural {
         right: 7px;
         top: 15px;
     }

     .bubble-fresh {
         left: 10px;
         bottom: 15px;
     }

     .bubble-offer {
         right: 10px;
         bottom: 15px;
     }

     .bubble-discount span {
         font-size: 6px;
     }

     .bubble-discount strong {
         font-size: 25px;
     }

     .bubble-discount small {
         font-size: 7px;
     }

     .bubble-natural .bubble-icon {
         font-size: 18px;
     }

     .bubble-natural strong {
         font-size: 17px;
     }

     .bubble-natural span {
         font-size: 6px;
         letter-spacing: 1px;
     }

     .bubble-fresh .bubble-icon {
         font-size: 17px;
     }

     .bubble-fresh strong {
         font-size: 14px;
     }

     .bubble-fresh span {
         font-size: 5px;
     }

     .bubble-offer span {
         font-size: 5px;
     }

     .bubble-offer strong {
         font-size: 16px;
     }

     .bubble-offer small {
         font-size: 5px;
     }

     .mini-left {
         left: 13%;
         top: 42%;
         transform: scale(.8);
     }

     .mini-right {
         right: 13%;
         bottom: 42%;
         transform: scale(.8);
     }

     .sale-sparkle {
         font-size: 13px;
     }

     .sparkle-5,
     .sparkle-6,
     .star-9,
     .star-10 {
         display: none;
     }

     .sparkle-1 {
         left: 25%;
         top: 18%;
     }

     .sparkle-2 {
         right: 25%;
         top: 18%;
     }

     .sparkle-3 {
         left: 22%;
         bottom: 19%;
     }

     .sparkle-4 {
         right: 22%;
         bottom: 19%;
     }

     .deco-heart {
         font-size: 13px;
     }

     .deco-star {
         font-size: 12px;
     }

     .heart-1 {
         left: 18%;
         top: 27%;
     }

     .heart-2 {
         left: 30%;
         top: 16%;
     }

     .heart-3 {
         left: 5%;
         bottom: 30%;
     }

     .heart-4 {
         right: 18%;
         top: 27%;
     }

     .heart-5 {
         right: 30%;
         top: 16%;
     }

     .heart-6 {
         right: 5%;
         bottom: 30%;
     }

     .star-1 {
         left: 20%;
         top: 20%;
     }

     .star-2 {
         left: 33%;
         top: 17%;
     }

     .star-3 {
         left: 12%;
         top: 43%;
     }

     .star-4 {
         left: 24%;
         bottom: 23%;
     }

     .star-5 {
         right: 20%;
         top: 20%;
     }

     .star-6 {
         right: 33%;
         top: 17%;
     }

     .star-7 {
         right: 12%;
         top: 43%;
     }

     .star-8 {
         right: 24%;
         bottom: 23%;
     }

     .gold-dot {
         width: 3px;
         height: 3px;
         opacity: .3;
     }

     .deco-curve {
         width: 100px;
         height: 55px;
         opacity: .5;
     }

     .mini-leaf {
         font-size: 20px;
         opacity: .12;
     }

     .sale-showcase::before {
         width: 310px;
         height: 310px;
         box-shadow:
             0 0 0 30px rgba(202, 157, 35, .025),
             0 0 0 65px rgba(202, 157, 35, .018),
             0 0 0 100px rgba(202, 157, 35, .012);
     }

     .sale-showcase::after {
         font-size: 10px;
         letter-spacing: 8px;
         bottom: 5%;
     }
 }

 /* ========SMALL PHONE==================== */

 @media (max-width:480px) {
     .sale-showcase {
         min-height: 520px;
         padding: 28px 8px 32px;
     }

     .sale-center {
         max-width: 300px;
     }

     .sale-center h1 {
         font-size: 57px;
         letter-spacing: 4px;
     }

     .sale-center h2 {
         font-size: 18px;
     }

     .sale-center p {
         font-size: 11px;
     }

     .sale-button {
         padding: 11px 18px;
         font-size: 9px;
     }

     .brand-bubble {
         width: 78px;
         height: 78px;
     }

     .bubble-discount {
         left: 8px;
         top: 15px;
     }

     .bubble-natural {
         right: 8px;
         top: 15px;
     }

     .bubble-fresh {
         left: 8px;
         bottom: 13px;
     }

     .bubble-offer {
         right: 8px;
         bottom: 13px;
     }

     .bubble-discount strong {
         font-size: 21px;
     }

     .bubble-natural strong {
         font-size: 15px;
     }

     .bubble-fresh strong,
     .bubble-offer strong {
         font-size: 13px;
     }

     .mini-left,
     .mini-right {
         display: none;
     }

     .deco-heart {
         font-size: 12px;
     }

     .deco-star {
         font-size: 10px;
     }

     .sale-showcase::before {
         width: 270px;
         height: 270px;
     }
 }

 /* ==========VERY SMALL PHONE================= */

 @media (max-width:380px) {
     .sale-showcase {
         min-height: 500px;
     }

     .sale-center h1 {
         font-size: 52px;
     }

     .sale-center h2 {
         font-size: 16px;
     }

     .sale-center p {
         font-size: 10px;
     }

     .brand-bubble {
         width: 68px;
         height: 68px;
     }

     .bubble-discount strong {
         font-size: 18px;
     }

     .bubble-natural strong {
         font-size: 13px;
     }

     .bubble-fresh strong,
     .bubble-offer strong {
         font-size: 10px;
     }
 }

 /* ==================================================================PopUp====================================================================================*/

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

 .launch-overlay {
     position: fixed;
     inset: 0;

     z-index: 9999;

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

     padding:
         max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));

     box-sizing: border-box;

     background: rgba(40, 0, 0, .55);

     backdrop-filter: blur(7px);
     -webkit-backdrop-filter: blur(7px);

     opacity: 0;
     visibility: hidden;

     transition: opacity .4s ease,
         visibility .4s ease;
 }

 .launch-overlay.show {
     opacity: 1;
     visibility: visible;
 }


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

 .launch-popup {
     position: relative;

     width: min(520px, 100%);

     max-height:
         calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);

     overflow: hidden;

     box-sizing: border-box;

     border-radius: 28px;

     background:
         radial-gradient(circle at 50% 0%,
             rgba(255, 220, 110, .25),
             transparent 35%),
         linear-gradient(145deg,
             #fffdf6,
             #fff7e7);

     border: 1px solid rgba(195, 145, 30, .45);

     box-shadow:
         0 30px 80px rgba(0, 0, 0, .35),
         0 0 0 1px rgba(255, 255, 255, .3) inset;

     transform:
         scale(.75) translateY(30px);

     transition:
         transform .55s cubic-bezier(.2, .8, .2, 1);
 }

 .launch-overlay.show .launch-popup {
     transform:
         scale(1) translateY(0);
 }


 /* =========================================================
   CONTENT
========================================================= */

 .launch-content {
     position: relative;

     z-index: 5;

     text-align: center;

     padding:
         38px 38px max(32px, env(safe-area-inset-bottom));

     box-sizing: border-box;
 }


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

 .launch-close {
     position: absolute;

     top: 15px;
     right: 15px;

     width: 38px;
     height: 38px;

     border: none;

     border-radius: 50%;

     background: rgba(125, 0, 0, .08);

     color: #750000;

     cursor: pointer;

     font-size: 14px;

     z-index: 20;

     transition:
         background .3s ease,
         color .3s ease,
         transform .3s ease;
 }

 .launch-close:hover {
     background: #750000;

     color: white;

     transform: rotate(90deg);
 }


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

 .launch-badge {
     display: inline-block;

     padding: 8px 18px;

     border-radius: 50px;

     background:
         linear-gradient(90deg,
             #7d0000,
             #a91111);

     color: #ffd85e;

     font-size: 11px;
     font-weight: 900;

     letter-spacing: 2px;

     box-shadow:
         0 7px 18px rgba(125, 0, 0, .2);

     animation:
         launchBadgePulse 2s infinite;
 }

 @keyframes launchBadgePulse {

     0%,
     100% {
         box-shadow:
             0 7px 18px rgba(125, 0, 0, .2);
     }

     50% {
         box-shadow:
             0 7px 25px rgba(125, 0, 0, .4);
     }
 }


 /* =========================================================
   ICON
========================================================= */

 .launch-icon {
     width: 65px;
     height: 65px;

     margin: 18px auto 8px;

     display: flex;

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

     border-radius: 50%;

     background:
         linear-gradient(145deg,
             #f5d36c,
             #fff0b0);

     font-size: 32px;

     box-shadow:
         0 10px 25px rgba(180, 130, 20, .2);

     animation:
         launchIconFloat 3s ease-in-out infinite;
 }

 @keyframes launchIconFloat {

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

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


 /* =========================================================
   SMALL TEXT
========================================================= */

 .launch-small {
     margin-top: 8px;

     color: #a27a18;

     font-size: 10px;
     font-weight: 800;

     letter-spacing: 2.5px;
 }


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

 .launch-content h2 {
     margin-top: 8px;

     margin-bottom: 0;

     color: #700000;

     font-family: Georgia, serif;

     font-size: 35px;

     line-height: 1.15;
 }

 .launch-content h2 span {
     display: block;

     color: #c19219;
 }


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

 .launch-divider {
     display: flex;

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

     gap: 10px;

     margin: 14px auto;

     width: 210px;
 }

 .launch-divider span {
     height: 1px;

     flex: 1;

     background:
         linear-gradient(90deg,
             transparent,
             #d1a32e);
 }

 .launch-divider span:last-child {
     background:
         linear-gradient(90deg,
             #d1a32e,
             transparent);
 }

 .launch-divider i {
     color: #8b0000;

     font-size: 12px;
 }


 /* =========================================================
   PRODUCT CAROUSEL CONTAINER
========================================================= */

 .launch-products {
     position: relative;

     width: 100%;

     /*
       Important:
       One product fills the complete carousel.
    */
     max-width: 430px;

     margin:
         18px auto 8px;

     overflow: hidden;

     border-radius: 22px;

     box-sizing: border-box;
 }


 /* =========================================================
   TRACK
========================================================= */

 .launch-product-track {
     display: flex;

     width: 100%;

     margin: 0;
     padding: 0;

     transition:
         transform .5s cubic-bezier(.22,
             .61,
             .36,
             1);

     will-change: transform;
 }


 /* =========================================================
   PRODUCT SLIDE
========================================================= */

 .launch-product {

     /*
       CRITICAL:
       Every product = exactly one full slide.
    */

     position: relative;

     flex: 0 0 100% !important;

     width: 100% !important;

     min-width: 100% !important;

     max-width: 100% !important;

     height: 330px;

     box-sizing: border-box;

     display: flex;

     flex-direction: column;

     justify-content: flex-start;

     align-items: center;

     margin: 0;

     padding:
         10px 20px 14px;

     border-radius: 22px;

     background:
         linear-gradient(145deg,
             #ffffff,
             #fff4d9);

     border: 1px solid #ead08a;

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

     overflow: hidden;
 }


 /* =========================================================
   PRODUCT IMAGE AREA
========================================================= */

 .launch-product-icon {

     position: relative;

     width: 100%;

     height: 265px;

     flex: 0 0 265px;

     display: flex;

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

     overflow: hidden;

     border-radius: 18px;
 }


 /* WAVY BACKGROUND */

 .launch-product-icon::before {

     content: "";

     position: absolute;

     inset: 0;

     background:
         url("../displaypro/wavy.jpg") center / cover no-repeat;

     z-index: 1;

     opacity: .82;

     transform: scale(1.03);

     transition:
         transform .6s ease;
 }


 /* =========================================================
   PRODUCT IMAGE
========================================================= */

 .launch-product-icon img {

     position: relative;

     z-index: 2;

     display: block;

     width: 96%;

     height: 96%;

     object-fit: contain;

     filter:
         drop-shadow(0 12px 12px rgba(0, 0, 0, .18));

     transition:
         transform .5s ease,
         filter .5s ease;
 }

 .launch-product.active .launch-product-icon img {

     transform: scale(1.04);

     filter:
         drop-shadow(0 15px 15px rgba(0, 0, 0, .22));
 }


 /* =========================================================
   NEW BADGE
========================================================= */

 .launch-product>span {

     position: absolute;

     top: 12px;
     right: 12px;

     z-index: 10;

     padding: 5px 10px;

     border-radius: 12px;

     background:
         linear-gradient(135deg,
             #7d0000,
             #a91111);

     color: #ffd85e;

     font-size: 18px;

     font-weight: 900;

     letter-spacing: .8px;

     box-shadow:
         0 5px 12px rgba(125, 0, 0, .25);
 }


 /* =========================================================
   PRODUCT NAME
   COMPLETELY BELOW IMAGE
========================================================= */

 /* =========================================================
   PRODUCT NAME
========================================================= */

.launch-product-name {

    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    flex: 0 0 auto;

    width: auto;

    max-width: 100%;

    margin: 10px auto 0;

    padding: 8px 20px;

    box-sizing: border-box;

    /*
       DO NOT PUT transform:none !important HERE
       because animation needs transform
    */

    opacity: 1 !important;

    z-index: 20;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .98),
            rgba(255, 247, 220, .96)
        );

    color: #750000;

    font-family: Georgia, serif;

    font-size: 17px;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .5px;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .14),
        0 0 0 1px rgba(193, 146, 25, .25);

    pointer-events: none;

    animation:
        productNamePop 2.4s ease-in-out infinite;
}


/* =========================================================
   ACTIVE PRODUCT NAME
========================================================= */

.launch-product.active .launch-product-name {

    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    opacity: 1 !important;

    margin-top: 10px !important;

    /*
       IMPORTANT:
       NO transform here
       NO animation:none
    */

    animation:
        productNamePop 2.4s ease-in-out infinite !important;
}


/* =========================================================
   POP UP → SETTLE → POP DOWN
========================================================= */

@keyframes productNamePop {

    0% {
        transform: translateY(0) scale(1);
    }

    15% {
        transform: translateY(-12px) scale(1.08);
    }

    30% {
        transform: translateY(-5px) scale(1.03);
    }

    45% {
        transform: translateY(0) scale(1);
    }

    60% {
        transform: translateY(4px) scale(.97);
    }

    72% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

 /* =========================================================
   NAME ENTER ANIMATION
========================================================= */

 @keyframes launchProductNameBelow {

     from {
         opacity: 0;

         transform:
             translateY(8px);
     }

     to {
         opacity: 1;

         transform:
             translateY(0);
     }
 }


 /* =========================================================
   CAROUSEL BUTTONS
========================================================= */

 .launch-carousel-btn {

     position: absolute;

     top: 50%;

     transform:
         translateY(-50%);

     z-index: 30;

     width: 38px;
     height: 38px;

     padding: 0;

     border: none;

     border-radius: 50%;

     display: flex;

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

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

     color: #750000;

     box-shadow:
         0 6px 18px rgba(0, 0, 0, .16);

     cursor: pointer;

     transition:
         background .3s ease,
         color .3s ease,
         transform .3s ease;

     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
 }

 .launch-carousel-btn:hover {

     background: #750000;

     color: white;

     transform:
         translateY(-50%) scale(1.08);
 }

 .launch-carousel-prev {
     left: 10px;
 }

 .launch-carousel-next {
     right: 10px;
 }


 /* =========================================================
   DOTS
========================================================= */

 .launch-carousel-dots {

     display: flex;

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

     gap: 7px;

     margin:
         10px auto 0;
 }

 .launch-carousel-dot {

     width: 7px;
     height: 7px;

     padding: 0;

     border: none;

     border-radius: 50%;

     background: #d8c9a2;

     cursor: pointer;

     transition:
         width .3s ease,
         background .3s ease,
         transform .3s ease;
 }

 .launch-carousel-dot.active {

     width: 22px;

     border-radius: 10px;

     background:
         linear-gradient(90deg,
             #750000,
             #c19219);

     transform:
         scale(1.05);
 }


 /* =========================================================
   EXPLORE BUTTON
========================================================= */

 .launch-button {

     width: 100%;

     max-width: 320px;

     border: none;

     padding:
         14px 22px;

     border-radius: 50px;

     background:
         linear-gradient(90deg,
             #750000,
             #ad1111,
             #750000);

     background-size: 200% auto;

     color: white;

     font-size: 12px;

     font-weight: 900;

     letter-spacing: .8px;

     cursor: pointer;

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

     transition: .3s;

     animation:
         launchButtonShine 3s linear infinite;
 }

 @keyframes launchButtonShine {

     to {
         background-position:
             200% center;
     }
 }

 .launch-button i {

     margin-left: 8px;

     transition: .3s;
 }

 .launch-button:hover {

     transform:
         translateY(-3px);

     box-shadow:
         0 14px 30px rgba(125, 0, 0, .35);
 }

 .launch-button:hover i {

     transform:
         translateX(5px);
 }


 /* =========================================================
   MAYBE LATER
========================================================= */

 .launch-later {

     display: none;

     margin:
         12px auto 0;

     border: none;

     background: none;

     color: #999;

     font-size: 11px;

     cursor: pointer;
 }

 .launch-later:hover {
     color: #750000;
 }


 /* =========================================================
   DECORATIONS
========================================================= */

 .launch-decoration {

     position: absolute;

     color: #d4a72c;

     opacity: .5;

     pointer-events: none;
 }

 .launch-star-1 {

     left: 25px;
     top: 80px;

     font-size: 35px;

     animation:
         launchSparkle 2s infinite;
 }

 .launch-star-11 {

     right: 25px;
     top: 80px;

     font-size: 35px;

     animation:
         launchSparkle 2.5s infinite .5s;
 }

 .launch-star-2 {

     right: 10px;
     bottom: 80px;

     font-size: 30px;

     animation:
         launchSparkle 2.5s infinite .5s;
 }

 .launch-star-22 {

     left: 10px;
     bottom: 80px;

     font-size: 30px;

     animation:
         launchSparkle 2s infinite;
 }

 @keyframes launchSparkle {

     0%,
     100% {

         opacity: .2;

         transform:
             scale(.7) rotate(0deg);
     }

     50% {

         opacity: .8;

         transform:
             scale(1.2) rotate(90deg);
     }
 }


 /* =========================================================
   TABLET
========================================================= */

 @media (min-width: 501px) and (max-width: 900px) {

     .launch-popup {

         width:
             min(500px,
                 calc(100vw - 30px));
     }

     .launch-content {

         padding:
             32px 28px max(28px,
                 env(safe-area-inset-bottom));
     }

     .launch-products {

         max-width: 390px;
     }

     .launch-product {

         height: 310px;

         padding:
             9px 18px 12px;
     }

     .launch-product-icon {

         height: 245px;

         flex: 0 0 245px;
     }

     .launch-product-icon img {

         width: 94%;
         height: 94%;
     }

     .launch-product-name {

         font-size: 15px;

         padding:
             7px 15px;

         margin-top: 8px;
     }

     .launch-carousel-btn {

         width: 36px;
         height: 36px;
     }
 }


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

 @media (max-width: 500px) {

     .launch-overlay {

         padding:
             max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
     }

     .launch-popup {

         width:
             calc(100vw - 20px);

         max-height:
             calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);

         border-radius: 24px;
     }

     .launch-content {

         padding:
             24px 15px max(20px,
                 env(safe-area-inset-bottom));
     }


     /* ---------- HEADING ---------- */

     .launch-content h2 {

         font-size: 29px;

         margin-top: 6px;

         margin-bottom: 8px;
     }


     /* ---------- PRODUCT CAROUSEL ---------- */

     .launch-products {

         width: 100%;

         max-width: 340px;

         margin:
             12px auto 8px;

         border-radius: 20px;
     }


     /* ONE FULL PRODUCT */

     .launch-product {

         flex:
             0 0 100% !important;

         width:
             100% !important;

         min-width:
             100% !important;

         height: 275px;

         border-radius: 20px;

         padding:
             8px 14px 10px;
     }


     /* IMAGE */

     .launch-product-icon {

         width: 100%;

         height: 215px;

         flex:
             0 0 215px;

         border-radius: 18px;
     }

     .launch-product-icon img {

         width: 96%;

         height: 96%;
     }


     /* ARROWS */

     .launch-carousel-btn {

         width: 32px;

         height: 32px;

         font-size: 11px;
     }

     .launch-carousel-prev {
         left: 7px;
     }

     .launch-carousel-next {
         right: 7px;
     }


     /* NEW BADGE */

     .launch-product>span {

         top: 9px;

         right: 9px;

         padding:
             4px 8px;

         font-size: 15px;
     }


     /* PRODUCT NAME */

     .launch-product-name {

         position: relative !important;

         left: auto !important;
         right: auto !important;
         top: auto !important;
         bottom: auto !important;

         margin:
             7px auto 0 !important;

         max-width: 92%;

         padding:
             6px 13px;

         font-size: 12px;

         letter-spacing: .3px;

         /* transform:
             none !important; */
     }


     /* DOTS */

     .launch-carousel-dots {

         margin:
             8px auto 12px;

         gap: 6px;
     }

     .launch-carousel-dot {

         width: 6px;

         height: 6px;
     }

     .launch-carousel-dot.active {

         width: 19px;
     }


     /* BUTTON */

     .launch-button {

         max-width: 100%;

         padding:
             13px 15px;

         font-size: 11px;
     }

     .launch-later {

         margin-top: 8px;
     }
 }


 /* =========================================================
   MOBILE — SHORT SCREEN
========================================================= */

 @media (max-width: 500px) and (max-height: 750px) {

     .launch-content {

         padding-top: 18px;

         padding-bottom:
             max(16px,
                 env(safe-area-inset-bottom));
     }


     .launch-badge {

         padding:
             6px 14px;

         font-size: 9px;
     }


     .launch-icon {

         width: 52px;

         height: 52px;

         margin:
             10px auto 5px;

         font-size: 25px;
     }


     .launch-small {

         font-size: 8px;

         margin-top: 5px;
     }


     .launch-content h2 {

         font-size: 24px;

         margin-top: 5px;
     }


     .launch-divider {

         margin:
             8px auto;

         width: 180px;
     }


     /* ---------- CAROUSEL ---------- */

     .launch-products {

         margin:
             8px auto 5px;
     }

     .launch-product {

         height: 235px;

         padding:
             6px 12px 8px;
     }

     .launch-product-icon {

         height: 180px;

         flex:
             0 0 180px;
     }

     .launch-product-icon img {

         width: 94%;

         height: 94%;
     }


     .launch-carousel-btn {

         width: 29px;

         height: 29px;
     }


     .launch-product>span {

         top: 6px;

         right: 6px;

         padding:
             3px 6px;

         font-size: 14px;
     }


     .launch-product-name {

         margin:
             6px auto 0 !important;

         font-size: 10px;

         padding:
             5px 11px;

         /* transform:
             none !important; */
     }


     .launch-carousel-dots {

         margin:
             5px auto 8px;
     }


     .launch-button {

         padding:
             11px 14px;
     }


     .launch-later {

         font-size: 10px;

         margin-top: 6px;
     }


     /* SMALL DECORATIONS */

     .launch-star-2 {

         left: 346px;

         bottom: 80px;

         font-size: 18px;

         animation:
             launchSparkle 2.5s infinite .5s;
     }

     .launch-star-22 {

         right: 346px;

         bottom: 80px;

         font-size: 18px;

         animation:
             launchSparkle 2s infinite;
     }
 }


 /* =========================================================
   VERY SHORT MOBILE
========================================================= */

 @media (max-width: 500px) and (max-height: 650px) {

     .launch-content {

         padding-top: 14px;
     }

     .launch-icon {

         width: 45px;

         height: 45px;

         font-size: 22px;

         margin:
             7px auto 4px;
     }

     .launch-content h2 {

         font-size: 21px;
     }

     .launch-divider {

         margin:
             6px auto;
     }


     /* ---------- CAROUSEL ---------- */

     .launch-products {

         margin:
             5px auto 3px;
     }

     .launch-product {

         height: 205px;

         padding:
             5px 10px 7px;
     }

     .launch-product-icon {

         height: 155px;

         flex:
             0 0 155px;
     }

     .launch-product-icon img {

         width: 92%;

         height: 92%;
     }


     .launch-carousel-btn {

         width: 26px;

         height: 26px;

         font-size: 9px;
     }


     .launch-product>span {

         top: 6px;

         right: 6px;

         padding:
             3px 6px;

         font-size: 14px;
     }


     .launch-product-name {

         margin:
             5px auto 0 !important;

         font-size: 9px;

         padding:
             4px 9px;

         /* transform:
             none !important; */
     }


     .launch-carousel-dots {

         margin:
             4px auto 5px;
     }


     .launch-button {

         padding:
             9px 12px;

         font-size: 10px;
     }

     .launch-later {

         margin-top: 4px;
     }
 }

 /* =========================================================PREMIUM DAIRY SALE SECTION==================================================================== */

 /* =========================================================
   URJA NATURALS
   PREMIUM DAIRY SALE SHOWCASE
   WHITE + SKY BLUE + NAVY + LIMITED GOLD ACCENT
========================================================= */


 /* =========================================================
   MAIN SECTION
========================================================= */

 .dairy-sale-section {

     position: relative;

     width: 100%;
     min-height: 680px;

     overflow: hidden;

     display: flex;
     align-items: center;

     background:
         radial-gradient(circle at 75% 40%,
             rgba(255, 255, 255, .30),
             transparent 27%),
         radial-gradient(circle at 15% 15%,
             rgba(255, 255, 255, .20),
             transparent 30%),
         radial-gradient(circle at 50% 100%,
             rgba(180, 230, 250, .30),
             transparent 40%),
         linear-gradient(135deg,
             #62c3e7 0%,
             #70c8ea 35%,
             #8bcdec 68%,
             #a7d5f0 100%);

     isolation: isolate;

 }


 /* =========================================================
   BACKGROUND GLOWS
========================================================= */

 .dairy-glow {

     position: absolute;

     border-radius: 50%;

     pointer-events: none;

     z-index: -1;

     filter: blur(65px);

 }


 .glow-1 {

     width: 430px;
     height: 430px;

     top: -200px;
     left: -120px;

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

 }


 .glow-2 {

     width: 520px;
     height: 520px;

     right: -180px;
     bottom: -250px;

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

 }


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

 .dairy-particles {

     position: absolute;

     inset: 0;

     pointer-events: none;

     z-index: 1;

 }


 .dairy-particles span {

     position: absolute;

     width: 5px;
     height: 5px;

     border-radius: 50%;

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

     box-shadow:
         0 0 8px rgba(255, 255, 255, .55);

     animation:
         particleFloat 8s linear infinite;

 }


 .dairy-particles span:nth-child(1) {

     left: 7%;
     top: 18%;

 }


 .dairy-particles span:nth-child(2) {

     left: 18%;
     top: 75%;

     animation-delay: 1s;

 }


 .dairy-particles span:nth-child(3) {

     left: 40%;
     top: 12%;

     animation-delay: 2s;

 }


 .dairy-particles span:nth-child(4) {

     left: 55%;
     top: 80%;

     animation-delay: 3s;

 }


 .dairy-particles span:nth-child(5) {

     left: 70%;
     top: 18%;

     animation-delay: 4s;

 }


 .dairy-particles span:nth-child(6) {

     left: 82%;
     top: 70%;

     animation-delay: 5s;

 }


 .dairy-particles span:nth-child(7) {

     left: 91%;
     top: 35%;

     animation-delay: 1.5s;

 }


 .dairy-particles span:nth-child(8) {

     left: 30%;
     top: 90%;

     animation-delay: 2.5s;

 }


 @keyframes particleFloat {

     0% {

         opacity: 0;

         transform:
             translateY(30px) scale(.5);

     }

     30% {

         opacity: 1;

     }

     70% {

         opacity: .8;

     }

     100% {

         opacity: 0;

         transform:
             translateY(-100px) scale(1.4);

     }

 }


 /* =========================================================
   DECORATIVE MILK DROPS
========================================================= */

 .milk-drop {

     position: absolute;

     z-index: 2;

     opacity: .35;

     pointer-events: none;

     filter:
         drop-shadow(0 0 10px rgba(255, 255, 255, .35));

 }


 .drop-1 {

     left: 4%;
     top: 30%;

     font-size: 28px;

     animation:
         dropFloat 5s ease-in-out infinite;

 }


 .drop-2 {

     right: 7%;
     top: 12%;

     font-size: 22px;

     animation:
         dropFloat 4s ease-in-out infinite 1s;

 }


 .drop-3 {

     right: 35%;
     bottom: 10%;

     font-size: 25px;

     animation:
         dropFloat 6s ease-in-out infinite 2s;

 }


 @keyframes dropFloat {

     0%,
     100% {

         transform:
             translateY(0) rotate(0);

     }

     50% {

         transform:
             translateY(-20px) rotate(10deg);

     }

 }


 /* =========================================================
   MAIN CONTAINER
========================================================= */

 .dairy-sale-container {

     width: min(1250px, 92%);

     margin: auto;

     display: grid;

     grid-template-columns:
         .95fr 1.05fr;

     align-items: center;

     gap: 35px;

     position: relative;

     z-index: 5;

 }


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

 .dairy-sale-content {

     position: relative;

     animation:
         dairyContentIn 1s cubic-bezier(.22, 1, .36, 1) both;

 }


 @keyframes dairyContentIn {

     from {

         opacity: 0;

         transform:
             translateX(-70px);

     }

     to {

         opacity: 1;

         transform:
             translateX(0);

     }

 }


 /* =========================================================
   LIMITED TIME LABEL
========================================================= */

 .sale-mini-label {

     display: inline-flex;

     align-items: center;

     gap: 9px;

     padding: 9px 17px;

     border-radius: 50px;

     background:
         rgb(206 166 48);

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

     box-shadow:
         0 8px 25px rgba(20, 100, 150, .10);

     backdrop-filter:
         blur(12px);

     -webkit-backdrop-filter:
         blur(12px);

     font-size: 12px;

     font-weight: 800;

     letter-spacing: 2px;

     color: #ffffff;

 }


 .sale-pulse {

     width: 8px;
     height: 8px;

     flex-shrink: 0;

     border-radius: 50%;

     background: #ffffff;

     box-shadow:
         0 0 0 0 rgba(255, 255, 255, .65);

     animation:
         salePulse 1.8s infinite;

 }

 .sale-call-note {
     display: block;

     margin-top: 5px;

     font-size: 12px;

     font-weight: 700;

     letter-spacing: .6px;

     color: #ffffff;

     opacity: .9;

     white-space: nowrap;
 }

 .sale-call-note i {
     margin-right: 4px;

     font-size: 9px;
 }

 @keyframes salePulse {

     70% {

         box-shadow:
             0 0 0 10px rgba(255, 255, 255, 0);

     }

     100% {

         box-shadow:
             0 0 0 0 rgba(255, 255, 255, 0);

     }

 }


 /* =========================================================
   MAIN HEADING
========================================================= */

 .dairy-sale-content h2 {

     margin: 22px 0 15px;

     font-size:
         clamp(42px, 5vw, 70px);

     line-height: .98;

     letter-spacing: -3px;

     color: #ffffff;

     font-weight: 900;

     text-shadow:
         0 5px 18px rgba(25, 100, 140, .16);

 }


 .dairy-sale-content h2 span {

     display: block;

     background:
         linear-gradient(90deg,
             #075d98 0%,
             #087dbb 50%,
             #126ca5 100%);

     -webkit-background-clip: text;

     background-clip: text;

     color: transparent;

     text-shadow: none;

 }


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

 .sale-description {

     max-width: 510px;

     margin-bottom: 28px;

     font-size: 16px;

     line-height: 1.7;

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

     font-weight: 700;

 }


 /* =========================================================
   DISCOUNT WRAPPER
========================================================= */

 .discount-wrapper {

     display: flex;

     align-items: center;

     gap: 18px;

     margin-bottom: 28px;

 }


 /* =========================================================
   SMALL DISCOUNT BADGE
   GOLD = SALE ACCENT ONLY
========================================================= */

 .discount-badge {

     width: 92px;
     height: 92px;

     flex-shrink: 0;

     border-radius: 50%;

     display: flex;

     flex-direction: column;

     align-items: center;

     justify-content: center;

     background:
         radial-gradient(circle at 30% 25%,
             #ffeaa2 0%,
             #e0b72e 48%,
             #b68613 100%);

     color: #ffffff;

     box-shadow:
         0 15px 35px rgba(60, 80, 80, .22),
         inset 0 0 14px rgba(255, 255, 255, .30);

     transform:
         rotate(-8deg);

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

 }


 @keyframes discountFloat {

     0%,
     100% {

         transform:
             rotate(-8deg) translateY(0);

     }

     50% {

         transform:
             rotate(-5deg) translateY(-8px);

     }

 }


 .discount-number {

     font-size: 30px;

     font-weight: 900;

     line-height: .9;

 }


 .discount-number span {

     font-size: 18px;

 }


 .discount-text {

     font-size: 12px;

     font-weight: 900;

     letter-spacing: 3px;

 }


 /* =========================================================
   DISCOUNT INFO
========================================================= */

 .discount-info {

     display: flex;

     flex-direction: column;

     gap: 5px;

 }


 .discount-info strong {

     font-size: 18px;

     color: #ffffff;

 }


 .discount-info small {

     color:
         rgba(255, 255, 255, .76);

     font-size: 15px;
     font-weight: 700;

 }


 /* =========================================================
   TIMER
========================================================= */

 .offer-timer {

     margin-bottom: 28px;

 }


 .timer-title {

     margin-bottom: 10px;

     font-size: 10px;

     font-weight: 900;

     letter-spacing: 2px;

     color: #ffffff;

 }


 .timer-boxes {

     display: flex;

     align-items: center;

     gap: 8px;

 }


 .timer-item {

     width: 54px;
     height: 58px;

     border-radius: 10px;

     display: flex;

     flex-direction: column;

     align-items: center;

     justify-content: center;

     background:
         linear-gradient(145deg,
             rgba(20, 58, 82, .96),
             rgba(25, 75, 105, .94));

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

     box-shadow:
         0 10px 22px rgba(20, 70, 100, .20);

     backdrop-filter:
         blur(8px);

 }


 .timer-item strong {

     display: inline-block;

     font-size: 21px;

     line-height: 1;

     color: #ffffff;

 }


 .timer-item span {

     margin-top: 4px;

     font-size: 8px;

     letter-spacing: 1px;

     color:
         rgba(255, 255, 255, .62);

 }


 .timer-separator {

     font-weight: 900;

     color: #ffffff;

     font-size: 16px;

 }


 /* =========================================================
   TIMER TICK ANIMATION
========================================================= */

 .timer-item.tick strong {

     animation:
         timerTick .3s ease;

 }


 @keyframes timerTick {

     50% {

         transform:
             scale(1.18);

     }

 }


 /* =========================================================
   OFFER START DATE
========================================================= */

 /* =========================================================
   OFFER START DATE — PREMIUM HERO
========================================================= */

 .offer-start-date {

     position: relative;

     width: 450px;

     margin-top: 25px;

     padding: 15px 25px 14px;


     text-align: center;

     overflow: hidden;

     z-index: 10;

     /* soft floating glass */
     background:
         linear-gradient(135deg,
             rgba(255, 255, 255, .18),
             rgba(255, 255, 255, .05));

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

     border-radius: 22px;

     box-shadow:
         0 15px 35px rgba(0, 78, 120, .12),
         inset 0 1px 0 rgba(255, 255, 255, .45);

     animation:
         startDateFloat 4s ease-in-out infinite;

 }


 /* =========================================================
   GOLD GLOW AROUND THE DATE
========================================================= */

 .offer-start-date::before {

     content: "";

     position: absolute;

     width: 190px;
     height: 190px;

     left: 50%;
     top: 50%;

     transform:
         translate(-50%, -50%);

     border-radius: 50%;

     background:
         radial-gradient(circle,
             rgba(235, 184, 42, .20) 0%,
             rgba(235, 184, 42, .08) 35%,
             transparent 70%);

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

     pointer-events: none;

 }


 /* =========================================================
   MOVING SHINE
========================================================= */

 .offer-start-date::after {

     content: "";

     position: absolute;

     top: -100%;
     left: -80%;

     width: 45%;
     height: 300%;

     background:
         linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, .30),
             transparent);

     transform: rotate(25deg);

     animation:
         startDateShine 5s ease-in-out infinite;

     pointer-events: none;

 }


 /* =========================================================
   OFFER STARTS
========================================================= */

 .offer-start-label {

     position: relative;

     z-index: 2;

     display: inline-flex;

     align-items: center;

     gap: 8px;

     margin-bottom: 4px;

     color: #145b83;

     font-size: 10px;

     font-weight: 900;

     letter-spacing: 4px;

     text-transform: uppercase;

 }


 /* little gold dots */

 .offer-start-label::before,
 .offer-start-label::after {

     content: "✦";

     color: #e2ad20;

     font-size: 10px;

     animation:
         starPulse 2s ease-in-out infinite;

 }


 /* =========================================================
   DATE CONTENT
========================================================= */

 .offer-date-content {

     position: relative;

     z-index: 2;

     display: flex;

     align-items: center;

     justify-content: center;

     gap: 10px;
     margin-top: 3%;

 }


 /* =========================================================
   BIG 25
========================================================= */

 .offer-date-day {

     position: relative;

     color: #ffffff;

     font-size: 68px;

     font-weight: 950;

     line-height: .82;

     letter-spacing: -4px;

     text-shadow:
         0 3px 0 rgba(12, 89, 132, .30),
         0 6px 18px rgba(0, 82, 125, .20);

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

 }

 .offer-date-day sup {

     position: relative;

     top: -1.1em;

     margin-left: 2px;

     color: #ffffff;

     font-size: 22px;

     font-weight: 900;

     letter-spacing: 0;

     text-shadow:
         0 2px 6px rgba(0, 82, 125, .20);

 }

 /* glowing circle behind 25 */

 .offer-date-day::before {

     content: "";

     position: absolute;

     z-index: -1;

     width: 95px;
     height: 95px;

     top: 50%;
     left: 50%;

     transform:
         translate(-50%, -50%);

     border-radius: 50%;

     background:
         radial-gradient(circle,
             rgba(239, 188, 40, .55) 0%,
             rgba(239, 188, 40, .22) 38%,
             rgba(239, 188, 40, .05) 62%,
             transparent 72%);

     animation:
         dateCirclePulse 2.4s ease-in-out infinite;

 }


 /* =========================================================
   AUG / 2026
========================================================= */

 .offer-date-info {

     position: relative;

     display: flex;

     flex-direction: column;

     align-items: center;

     justify-content: center;

     padding-top: 6px;

 }


 .offer-date-month {

     color: #07619c;

     font-size: 25px;

     font-weight: 950;

     line-height: 1;

     letter-spacing: 3px;

     text-shadow:
         0 2px 8px rgba(216, 163, 22, .20);

 }


 .offer-date-year {

     margin-top: 5px;

     color: #145b83;

     font-size: 12px;

     font-weight: 900;

     letter-spacing: 3px;

 }


 /* =========================================================
   DECORATIVE DATE LINES
========================================================= */

 .offer-date-content::before,
 .offer-date-content::after {

     content: "";

     position: absolute;

     top: 50%;

     width: 45px;

     height: 2px;

     border-radius: 10px;

     background:
         linear-gradient(90deg,
             transparent,
             rgba(224, 174, 32, .75));

     opacity: .7;

 }


 .offer-date-content::before {

     right: calc(100% + 15px);

 }


 .offer-date-content::after {

     left: calc(100% + 15px);

     transform: rotate(180deg);

 }


 /* =========================================================
   BOTTOM MESSAGE
========================================================= */

 .offer-start-bottom {

     position: relative;

     z-index: 2;

     display: flex;

     align-items: center;

     justify-content: center;

     gap: 8px;

     margin-top: 12px;

     color: #005882;

     font-size: 11px;

     font-weight: 900;

     letter-spacing: 1.8px;

     white-space: nowrap;

     animation:
         comingSoonPulse 2.5s ease-in-out infinite;

 }


 .offer-start-bottom span {

     width: 25px;

     height: 2px;

     border-radius: 10px;

     background:
         linear-gradient(90deg,
             transparent,
             #e3b12a);

 }


 .offer-start-bottom span:last-child {

     transform: rotate(180deg);

 }


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

 @keyframes startDateFloat {

     0%,
     100% {

         transform:
             translateY(0);

     }

     50% {

         transform:
             translateY(-6px);

     }

 }


 @keyframes startDateGlow {

     0%,
     100% {

         opacity: .55;

         transform:
             translate(-50%, -50%) scale(.85);

     }

     50% {

         opacity: 1;

         transform:
             translate(-50%, -50%) scale(1.15);

     }

 }


 @keyframes dateHeroPulse {

     0%,
     100% {

         transform:
             scale(1);

     }

     45% {

         transform:
             scale(1.04);

     }

     55% {

         transform:
             scale(1.08);

     }

 }


 @keyframes dateCirclePulse {

     0%,
     100% {

         opacity: .45;

         transform:
             translate(-50%, -50%) scale(.85);

     }

     50% {

         opacity: .9;

         transform:
             translate(-50%, -50%) scale(1.12);

     }

 }


 @keyframes comingSoonPulse {

     0%,
     100% {

         opacity: .45;

         letter-spacing: 1.5px;

     }

     50% {

         opacity: .9;

         letter-spacing: 2px;

     }

 }


 @keyframes starPulse {

     0%,
     100% {

         opacity: .35;

         transform: scale(.7);

     }

     50% {

         opacity: 1;

         transform: scale(1.25);

     }

 }


 @keyframes startDateShine {

     0% {

         left: -80%;

     }

     45%,
     100% {

         left: 150%;

     }

 }


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

 @media (max-width: 600px) {

     .offer-start-date {

         width: min(350px, 92vw);

         margin-top: 18px;

         padding: 14px 18px 12px;

     }


     .offer-start-label {

         font-size: 8px;

         letter-spacing: 3px;

     }


     .offer-date-day {

         font-size: 58px;

     }


     .offer-date-month {

         font-size: 21px;

     }


     .offer-date-year {

         font-size: 10px;

     }


     .offer-start-bottom {

         font-size: 7px;

         letter-spacing: 1px;

     }


     .offer-date-content::before,
     .offer-date-content::after {

         width: 25px;

     }

 }


 /* =========================================================
   SHOP BUTTON
========================================================= */

 .dairy-shop-btn {

     position: relative;

     display: inline-flex;

     align-items: center;

     gap: 15px;

     padding: 15px 22px;

     border-radius: 50px;

     text-decoration: none;

     color: #ffffff;

     font-size: 14px;

     font-weight: 800;

     background:
         linear-gradient(135deg,
             #087dbb,
             #075d98);

     box-shadow:
         0 12px 28px rgba(8, 100, 150, .25);

     overflow: hidden;

     transition:
         transform .3s ease,
         box-shadow .3s ease;

 }


 .dairy-shop-btn:hover {

     transform:
         translateY(-4px);

     box-shadow:
         0 18px 35px rgba(8, 100, 150, .35);

 }


 .btn-arrow {

     width: 28px;
     height: 28px;

     border-radius: 50%;

     display: flex;

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

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

     transition:
         transform .3s ease;

 }


 .dairy-shop-btn:hover .btn-arrow {

     transform:
         translateX(5px);

 }


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

 .dairy-shop-btn::before {

     content: "";

     position: absolute;

     top: 0;
     left: -100%;

     width: 55%;
     height: 100%;

     background:
         linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, .30),
             transparent);

     transform:
         skewX(-20deg);

     animation:
         buttonShine 4s ease-in-out infinite;

 }


 @keyframes buttonShine {

     0%,
     55% {

         left: -100%;

     }

     75%,
     100% {

         left: 150%;

     }

 }


 /* =========================================================
   RIGHT VISUAL
========================================================= */

 .dairy-sale-visual {

     position: relative;

     min-height: 520px;

     display: flex;

     align-items: center;

     justify-content: center;

     perspective: 1000px;

     animation:
         dairyVisualIn 1.1s cubic-bezier(.22, 1, .36, 1) .15s both;

 }


 @keyframes dairyVisualIn {

     from {

         opacity: 0;

         transform:
             scale(.75) rotate(5deg);

     }

     to {

         opacity: 1;

         transform:
             scale(1) rotate(0);

     }

 }


 /* =========================================================
   VISUAL GLOW
========================================================= */

 .visual-glow {

     position: absolute;

     width: 420px;
     height: 420px;

     border-radius: 50%;

     background:
         radial-gradient(circle,
             rgba(255, 255, 255, .75) 0%,
             rgba(225, 248, 255, .50) 35%,
             rgba(155, 225, 248, .20) 58%,
             transparent 72%);

     filter: blur(10px);

     animation:
         visualGlow 4s ease-in-out infinite;

 }


 @keyframes visualGlow {

     0%,
     100% {

         transform:
             scale(.95);

         opacity: .70;

     }

     50% {

         transform:
             scale(1.12);

         opacity: 1;

     }

 }


 /* =========================================================
   ROTATING RINGS
========================================================= */

 .sale-ring {

     position: absolute;

     border-radius: 50%;

     border:
         1px dashed rgba(255, 255, 255, .32);

     pointer-events: none;

 }


 .ring-outer {

     width: 480px;
     height: 480px;

     box-shadow:
         0 0 35px rgba(255, 255, 255, .10);

     animation:
         ringRotate 22s linear infinite;

 }


 .ring-inner {

     width: 375px;
     height: 375px;

     border-style: dotted;

     border-color:
         rgba(255, 255, 255, .28);

     animation:
         ringRotateReverse 15s linear infinite;

 }


 @keyframes ringRotate {

     to {

         transform:
             rotate(360deg);

     }

 }


 @keyframes ringRotateReverse {

     to {

         transform:
             rotate(-360deg);

     }

 }


 /* =========================================================
   SALE BURST
========================================================= */

 .sale-burst {

     position: absolute;

     top: 48px;
     right: 42px;

     width: 105px;
     height: 105px;

     z-index: 12;

     display: flex;

     flex-direction: column;

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

     text-align: center;

     background:
         linear-gradient(145deg,
             #e6c44c,
             #b78914);

     color: #ffffff;

     clip-path:
         polygon(50% 0%,
             61% 12%,
             75% 6%,
             82% 20%,
             96% 20%,
             91% 35%,
             100% 47%,
             88% 57%,
             95% 72%,
             80% 77%,
             78% 93%,
             63% 87%,
             50% 100%,
             38% 87%,
             22% 93%,
             20% 77%,
             5% 72%,
             12% 57%,
             0% 47%,
             9% 35%,
             4% 20%,
             18% 20%,
             25% 6%,
             39% 12%);

     filter:
         drop-shadow(0 12px 18px rgba(80, 70, 20, .25));

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

 }


 .sale-burst span {

     font-size: 8px;

     font-weight: 900;

     letter-spacing: 1.5px;

 }


 .sale-burst strong {

     font-size: 19px;

     letter-spacing: 1px;

 }


 @keyframes saleBurstFloat {

     0%,
     100% {

         transform:
             translateY(0) rotate(5deg);

     }

     50% {

         transform:
             translateY(-9px) rotate(-3deg);

     }

 }


 /* =========================================================
   HERO DISCOUNT CIRCLE
========================================================= */

 .hero-discount {

     position: relative;

     z-index: 5;

     width: 235px;
     height: 235px;

     border-radius: 50%;

     display: flex;

     flex-direction: column;

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

     background:
         radial-gradient(circle at 30% 25%,
             #ffffff 0%,
             #eefbff 25%,
             #d8f3ff 42%,
             #8dd4ed 68%,
             #45a8cf 100%);

     border:
         8px solid rgba(255, 255, 255, .82);

     box-shadow:
         0 30px 70px rgba(40, 110, 140, .25),
         0 0 50px rgba(255, 255, 255, .25),
         inset 0 0 30px rgba(255, 255, 255, .65);

     overflow: hidden;

     transform-style:
         preserve-3d;

     animation:
         heroDiscountFloat 4s ease-in-out infinite;

 }


 @keyframes heroDiscountFloat {

     0%,
     100% {

         transform:
             translateY(0) rotate(-2deg);

     }

     50% {

         transform:
             translateY(-15px) rotate(2deg);

     }

 }


 /* =========================================================
   HERO CIRCLE INNER BORDER
========================================================= */

 .hero-discount::before {

     content: "";

     position: absolute;

     inset: 7px;

     border-radius: 50%;

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

     pointer-events: none;

 }


 .hero-discount::after {

     content: "";

     position: absolute;

     inset: -15px;

     border-radius: 50%;

     border:
         2px solid rgba(255, 255, 255, .30);

     animation:
         offerPulse 2.5s ease-in-out infinite;

 }


 @keyframes offerPulse {

     0%,
     100% {

         transform:
             scale(.95);

         opacity: .4;

     }

     50% {

         transform:
             scale(1.05);

         opacity: 1;

     }

 }


 /* =========================================================
   MOVING SHINE
========================================================= */

 .discount-shine {

     position: absolute;

     width: 70px;
     height: 330px;

     top: -45px;
     left: -110px;

     background:
         linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, .60),
             transparent);

     transform:
         rotate(25deg);

     animation:
         discountShine 4s ease-in-out infinite;

 }


 @keyframes discountShine {

     0%,
     45% {

         left: -110px;

     }

     65%,
     100% {

         left: 280px;

     }

 }


 /* =========================================================
   HERO TEXT
========================================================= */

 .hero-discount-small {

     position: relative;

     z-index: 2;

     font-size: 10px;

     font-weight: 900;

     letter-spacing: 4px;

     color: #245d73;

 }


 .hero-discount-number {

     position: relative;

     z-index: 2;

     margin-top: 3px;

     font-size: 76px;

     line-height: .9;

     font-weight: 1000;

     letter-spacing: -5px;

     color: #0875a9;

     text-shadow:
         0 4px 0 rgba(255, 255, 255, .50),
         0 8px 18px rgba(20, 90, 120, .18);

 }


 .hero-discount-number span {

     font-size: 35px;

 }


 .hero-discount-off {

     position: relative;

     z-index: 2;

     font-size: 18px;

     font-weight: 1000;

     letter-spacing: 5px;

     color: #28677e;

 }


 .save-label {

     position: relative;

     z-index: 2;

     margin-top: 8px;

     padding: 4px 12px;

     border-radius: 20px;

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

     font-size: 9px;

     font-weight: 900;

     letter-spacing: 2px;

     color: #24647d;

 }


 /* =========================================================
   FLOATING PRODUCT CARDS
========================================================= */

 .floating-product {

     position: absolute;

     z-index: 8;

     min-width: 190px;

     padding: 11px 13px;

     display: flex;

     align-items: center;

     gap: 12px;

     border-radius: 17px;

     background:
         linear-gradient(145deg,
             rgba(255, 255, 255, .88),
             rgba(245, 251, 255, .76));

     backdrop-filter:
         blur(18px);

     -webkit-backdrop-filter:
         blur(18px);

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

     box-shadow:
         0 18px 45px rgba(20, 90, 125, .15),
         0 4px 10px rgba(20, 90, 125, .06);

     transition:
         transform .3s ease,
         box-shadow .3s ease;

 }


 .floating-product:hover {

     transform:
         translateY(-8px) scale(1.03) !important;

     box-shadow:
         0 25px 55px rgba(20, 90, 125, .20);

 }


 /* =========================================================
   PRODUCT IMAGE
========================================================= */

 .product-image-wrap {

     width: 58px;
     height: 58px;

     flex-shrink: 0;

     display: flex;

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

     overflow: hidden;

     border-radius: 15px;

     background:
         linear-gradient(145deg,
             #ffffff,
             #e6f7ff);

     box-shadow:
         inset 0 0 12px rgba(50, 160, 210, .08);

 }


 .product-image-wrap img {

     width: 100%;
     height: 100%;

     object-fit: contain;

     padding: 5px;

 }


 .fallback-product-icon {

     display: flex;

     width: 100%;
     height: 100%;

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

     font-size: 27px;

 }


 /* =========================================================
   PRODUCT DETAILS
========================================================= */

 .product-details {

     display: flex;

     flex-direction: column;

     min-width: 0;

 }


 .product-details strong {

     display: block;

     font-size: 16px;

     color: #1b506c;

 }


 .product-details small {

     display: block;

     margin-top: 2px;

     font-size: 14px;

     color: #7394a5;

 }


 /* =========================================================
   PRODUCT PRICE
========================================================= */

 /* =========================================================
   PRODUCT PRICE
   ========================================================= */

 .product-price {
     display: flex;
     align-items: center;
     justify-content: center;

     gap: 12px;

     margin-top: 10px;
     margin-bottom: 12px;

     min-height: 38px;
 }


 /* =========================================================
   ORIGINAL PRICE
   ========================================================= */

 .original-price {
     position: relative;

     color: #777;

     font-size: 18px;
     font-weight: 600;

     line-height: 1;
 }


 /* Stronger strike-through */

 .original-price::after {
     content: "";

     position: absolute;

     left: -3px;
     right: -3px;

     top: 50%;

     height: 2px;

     background: #7d0000;

     transform: rotate(-7deg);
 }


 /* =========================================================
   OFFER PRICE
   ========================================================= */

 .offer-price {

     color: #1569b5;

     font-size: 28px;

     font-weight: 900;

     line-height: 1;

     letter-spacing: -0.5px;

     position: relative;

     animation: offerPricePop 2s ease-in-out infinite;
 }


 /* Small shine */

 .offer-price::after {

     content: "";

     position: absolute;

     width: 7px;
     height: 7px;

     background: #1569b5;

     border-radius: 50%;

     top: -5px;
     right: -9px;

     animation: priceSparkle 1.5s ease-in-out infinite;
 }


 /* =========================================================
   NORMAL PRICE
   ========================================================= */

 .regular-price {

     color: #7d0000;

     font-size: 25px;

     font-weight: 900;

     line-height: 1;
 }


 /* =========================================================
   OFFER PRICE ANIMATION
   ========================================================= */

 @keyframes offerPricePop {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.06);
     }

 }


 /* =========================================================
   PRICE SPARKLE
   ========================================================= */

 @keyframes priceSparkle {

     0%,
     100% {
         opacity: 0;
         transform: scale(0.5);
     }

     50% {
         opacity: 1;
         transform: scale(1);
     }

 }


 .product-price del {

     font-size: 10px;

     color: #91a5af;

 }


 .product-price b {

     font-size: 14px;

     color: #087dbb;

 }


 .product-details em {

     margin-top: 1px;

     font-size: 8px;

     font-style: normal;

     font-weight: 800;

     color: #087dbb;

 }


 /* =========================================================
   PRODUCT POSITIONS
========================================================= */

 .product-milk {

     top: 45px;
     left: 5px;

     animation:
         floatingMilk 4s ease-in-out infinite;

 }


 .product-curd {

     top: 165px;
     right: -20px;

     animation:
         floatingCurd 4.5s ease-in-out infinite;

 }


 .product-paneer {

     bottom: 55px;
     left: 25px;

     animation:
         floatingPaneer 5s ease-in-out infinite;

 }


 /* =========================================================
   PRODUCT FLOAT ANIMATIONS
========================================================= */

 @keyframes floatingMilk {

     0%,
     100% {

         transform:
             translateY(0) rotate(-3deg);

     }

     50% {

         transform:
             translateY(-15px) rotate(2deg);

     }

 }


 @keyframes floatingCurd {

     0%,
     100% {

         transform:
             translateY(0) rotate(3deg);

     }

     50% {

         transform:
             translateY(14px) rotate(-2deg);

     }

 }


 @keyframes floatingPaneer {

     0%,
     100% {

         transform:
             translateY(0) rotate(2deg);

     }

     50% {

         transform:
             translateY(-12px) rotate(-3deg);

     }

 }


 /* =========================================================
   MINI BUTTER PRODUCT
========================================================= */

 .mini-floating-product {

     position: absolute;

     right: 12px;
     bottom: 42px;

     z-index: 10;

     display: flex;

     align-items: center;

     gap: 8px;

     padding: 9px 13px;

     border-radius: 14px;

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

     backdrop-filter:
         blur(12px);

     -webkit-backdrop-filter:
         blur(12px);

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

     box-shadow:
         0 12px 28px rgba(20, 90, 120, .12);

     animation:
         miniProductFloat 4s ease-in-out infinite;
     transition:
         transform .3s ease,
         box-shadow .3s ease;

 }

 .mini-floating-product:hover {

     transform:
         translateY(-8px) scale(1.03) !important;

     box-shadow:
         0 25px 55px rgba(20, 90, 125, .20);

 }


 .mini-floating-product>span {

     font-size: 22px;

 }


 .mini-floating-product strong {

     display: block;

     font-size: 14px;

     color: #28566d;

 }

 /* .mini-floating-product small {

            display: block;

            font-size: 12px;
            margin-top: 2px;
            color: #7394a5;

        } */


 .mini-floating-product small {

     display: block;

     margin-top: 2px;

     font-size: 12px;
     color: #7394a5;

 }


 @keyframes miniProductFloat {

     0%,
     100% {

         transform:
             translateY(0);

     }

     50% {

         transform:
             translateY(-9px);

     }

 }


 /* =========================================================
   SPARKLES
========================================================= */

 .sale-sparkles {

     position: absolute;

     inset: 0;

     pointer-events: none;

     z-index: 15;

 }


 .sparkle {

     position: absolute;

     font-style: normal;

     color:
         rgba(255, 255, 255, .90);

     text-shadow:
         0 0 12px rgba(255, 255, 255, .80);

     animation:
         sparkleAnimation 2.8s ease-in-out infinite;

 }


 .sparkle-1 {

     top: 12%;
     left: 35%;

     font-size: 20px;

 }


 .sparkle-2 {

     top: 28%;
     left: 20%;

     font-size: 12px;

     animation-delay: .5s;

 }


 .sparkle-3 {

     top: 43%;
     right: 19%;

     font-size: 18px;

     animation-delay: 1s;

 }


 .sparkle-4 {

     bottom: 25%;
     right: 28%;

     font-size: 12px;

     animation-delay: 1.5s;

 }


 .sparkle-5 {

     bottom: 15%;
     left: 40%;

     font-size: 19px;

     animation-delay: 2s;

 }


 .sparkle-6 {

     top: 58%;
     left: 8%;

     font-size: 10px;

     animation-delay: .8s;

 }


 @keyframes sparkleAnimation {

     0%,
     100% {

         opacity: .15;

         transform:
             scale(.5) rotate(0deg);

     }

     50% {

         opacity: 1;

         transform:
             scale(1.3) rotate(90deg);

     }

 }


 /* =========================================================
   MILK WAVE INSIDE VISUAL
========================================================= */

 .milk-wave {

     position: absolute;

     bottom: 28px;

     left: 50%;

     width: 470px;
     height: 85px;

     transform:
         translateX(-50%);

     overflow: hidden;

     border-radius:
         50% 50% 45% 45%;

     opacity: .55;

     z-index: 3;

 }


 .wave {

     position: absolute;

     width: 700px;
     height: 80px;

     left: -100px;

     border-radius: 45%;

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

 }


 .wave-1 {

     top: 35px;

     animation:
         milkWaveMove 6s linear infinite;

 }


 .wave-2 {

     top: 48px;

     opacity: .55;

     animation:
         milkWaveMoveReverse 8s linear infinite;

 }


 @keyframes milkWaveMove {

     from {

         transform:
             translateX(-120px) rotate(0deg);

     }

     to {

         transform:
             translateX(80px) rotate(3deg);

     }

 }


 @keyframes milkWaveMoveReverse {

     from {

         transform:
             translateX(80px);

     }

     to {

         transform:
             translateX(-120px);

     }

 }


 /* =========================================================
   BOTTOM WAVE
========================================================= */

 .dairy-wave {

     position: absolute;

     bottom: -2px;
     left: 0;

     width: 100%;

     height: 90px;

     z-index: 20;

     pointer-events: none;

 }


 .dairy-wave svg {

     width: 100%;
     height: 100%;

     display: block;

 }


 .dairy-wave path {

     fill: #dff5ff;

 }


 /* =========================================================
   TABLET
========================================================= */

 @media (max-width: 1100px) {

     .dairy-sale-container {

         width: min(950px, 94%);

         gap: 20px;

     }

     .dairy-sale-content h2 {

         font-size:
             clamp(40px, 5.5vw, 62px);

     }

     .dairy-sale-visual {

         min-height: 500px;

     }

     .ring-outer {

         width: 440px;
         height: 440px;

     }

     .ring-inner {

         width: 350px;
         height: 350px;

     }

     .product-curd {

         right: -5px;

     }

 }


 /* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

 @media (max-width: 900px) {

     .dairy-sale-section {

         min-height: auto;

         padding:
             75px 0 105px;

     }

     .dairy-sale-container {

         grid-template-columns: 1fr;

         gap: 15px;

         text-align: center;

     }

     .dairy-sale-content {

         display: flex;

         flex-direction: column;

         align-items: center;

     }

     .sale-description {

         max-width: 650px;

         margin-left: auto;
         margin-right: auto;

     }

     .discount-wrapper {

         justify-content: center;

         text-align: left;

     }

     .offer-timer {

         width: 100%;

         display: flex;

         flex-direction: column;

         align-items: center;

     }

     .dairy-sale-visual {

         min-height: 520px;

         margin-top: 10px;

     }

 }


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

 @media (max-width: 600px) {

     .dairy-sale-section {

         padding:
             60px 0 90px;

     }


     .dairy-sale-container {

         width:
             calc(100% - 24px);

     }


     /* -------------------------
       LABEL
    ------------------------- */

     .sale-mini-label {

         font-size: 9px;

         padding:
             8px 13px;

         letter-spacing: 1.5px;

     }


     /* -------------------------
       HEADING
    ------------------------- */

     .dairy-sale-content h2 {

         margin-top: 18px;

         font-size: 43px;

         letter-spacing: -2px;

     }


     /* -------------------------
       DESCRIPTION
    ------------------------- */

     .sale-description {

         font-size: 14px;

         line-height: 1.6;

         max-width: 360px;

     }


     /* -------------------------
       DISCOUNT
    ------------------------- */

     .discount-wrapper {

         width: 100%;

         max-width: 340px;

         gap: 12px;

     }


     .discount-badge {

         width: 82px;
         height: 82px;

     }


     .discount-number {

         font-size: 27px;

     }


     .discount-number span {

         font-size: 16px;

     }


     .discount-text {

         font-size: 11px;

     }


     .discount-info strong {

         font-size: 13px;

     }


     .discount-info small {

         font-size: 9px;

     }


     /* -------------------------
       TIMER
    ------------------------- */

     .timer-boxes {

         gap: 5px;

     }


     .timer-item {

         width: 47px;
         height: 53px;

     }


     .timer-item strong {

         font-size: 18px;

     }


     .timer-item span {

         font-size: 7px;

     }


     .timer-separator {

         font-size: 12px;

     }


     /* -------------------------
       VISUAL
    ------------------------- */

     .dairy-sale-visual {

         min-height: 430px;

         transform:
             scale(.82);

         margin-top: -10px;

     }


     .visual-glow {

         width: 350px;
         height: 350px;

     }


     .ring-outer {

         width: 380px;
         height: 380px;

     }


     .ring-inner {

         width: 300px;
         height: 300px;

     }


     /* -------------------------
       HERO CIRCLE
    ------------------------- */

     .hero-discount {

         width: 215px;
         height: 215px;

     }


     .hero-discount-number {

         font-size: 62px;

     }


     .hero-discount-number span {

         font-size: 30px;

     }


     .hero-discount-small {

         font-size: 9px;

         letter-spacing: 3px;

     }


     .hero-discount-off {

         font-size: 16px;

         letter-spacing: 5px;

     }


     /* -------------------------
       SALE BURST
    ------------------------- */

     .sale-burst {

         top: 30px;

         right: 5px;

         width: 88px;
         height: 88px;

     }


     .sale-burst span {

         font-size: 7px;

     }


     .sale-burst strong {

         font-size: 16px;

     }


     /* -------------------------
       PRODUCTS
    ------------------------- */

     .floating-product {

         min-width: 160px;

         padding: 9px;

         border-radius: 14px;

     }


     .product-image-wrap {

         width: 48px;
         height: 48px;

         border-radius: 13px;

     }


     .product-details strong {

         font-size: 11px;

     }


     .product-details small {

         font-size: 8px;

     }


     .product-milk {

         top: 30px;

         left: -8px;

     }


     .product-curd {

         top: 145px;

         right: -15px;

     }


     .product-paneer {

         bottom: 35px;

         left: -10px;

     }


     /* -------------------------
       BUTTER
    ------------------------- */

     .mini-floating-product {

         right: -5px;

         bottom: 15px;

     }


     /* -------------------------
       WAVE
    ------------------------- */

     .milk-wave {

         width: 350px;

     }


     .dairy-wave {

         height: 65px;

     }

 }


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

 @media (max-width: 380px) {

     .dairy-sale-section {

         padding:
             55px 0 80px;

     }


     .dairy-sale-container {

         width:
             calc(100% - 18px);

     }


     .dairy-sale-content h2 {

         font-size: 36px;

         letter-spacing: -1.8px;

     }


     .sale-description {

         font-size: 13px;

         max-width: 320px;

     }


     .discount-wrapper {

         max-width: 310px;

     }


     .discount-badge {

         width: 76px;
         height: 76px;

     }


     .discount-number {

         font-size: 25px;

     }


     .discount-info strong {

         font-size: 12px;

     }


     .timer-item {

         width: 43px;
         height: 50px;

     }


     .timer-item strong {

         font-size: 16px;

     }


     .dairy-sale-visual {

         min-height: 400px;

         transform:
             scale(.70);

         margin-top: -35px;

     }


     .ring-outer {

         width: 350px;
         height: 350px;

     }


     .ring-inner {

         width: 275px;
         height: 275px;

     }


     .hero-discount {

         width: 200px;
         height: 200px;

     }


     .hero-discount-number {

         font-size: 57px;

     }


     .sale-burst {

         width: 82px;
         height: 82px;

         right: 0;

     }


     .floating-product {

         min-width: 150px;

     }


     .product-milk {

         left: -15px;

     }


     .product-curd {

         right: -20px;

     }


     .product-paneer {

         left: -15px;

     }


 }


 /* =========================================================
   EXTRA SMALL PHONES
========================================================= */

 @media (max-width: 340px) {

     .dairy-sale-content h2 {

         font-size: 33px;

     }


     .discount-wrapper {

         gap: 9px;

     }


     .discount-badge {

         width: 70px;
         height: 70px;

     }


     .discount-number {

         font-size: 23px;

     }


     .discount-info strong {

         font-size: 11px;

     }


     .discount-info small {

         font-size: 8px;

     }


     .timer-item {

         width: 40px;

         height: 48px;

     }


     .timer-boxes {

         gap: 3px;

     }


     .timer-separator {

         font-size: 10px;

     }


     .dairy-sale-visual {

         transform:
             scale(.64);

         margin-top: -50px;

     }

 }


 /* =========================================================
   REDUCED MOTION
========================================================= */

 @media (prefers-reduced-motion: reduce) {

     .dairy-sale-section *,
     .dairy-sale-section *::before,
     .dairy-sale-section *::after {

         animation-duration: .01ms !important;

         animation-iteration-count: 1 !important;

         scroll-behavior: auto !important;

     }

 }

 /* =========================================================
   CORPORATE CURATED HAMPERS
   - Positioned BETWEEN products
   - Not extreme left/right
   - Responsive
========================================================= */

 .corporate-hamper-badge {

     position: absolute !important;

     left: 1% !important;
     right: auto !important;
     top: 37% !important;

     width: 150px;
     min-height: 92px;

     z-index: 15;

     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;

     padding: 11px 12px;

     box-sizing: border-box;

     background:
         linear-gradient(145deg,
             #fffaf0 0%,
             #ffe6a8 55%,
             #f4c45f 100%);

     border: 2px solid rgba(190, 125, 25, .75);

     border-radius: 18px;

     box-shadow:
         0 10px 25px rgba(70, 25, 0, .22),
         inset 0 1px 0 rgba(255, 255, 255, .9);

     transform: rotate(-3deg);

     animation:
         corporateHamperFloat 3.2s ease-in-out infinite;

 }


 /* =========================================================
   DECORATIVE INNER BORDER
========================================================= */

 .corporate-hamper-badge::before {

     content: "";

     position: absolute;

     inset: 5px;

     border: 1px dashed rgba(150, 85, 10, .35);

     border-radius: 13px;

     pointer-events: none;

 }


 /* =========================================================
   GIFT ICON
========================================================= */

 .hamper-icon {

     position: relative;

     z-index: 2;

     flex-shrink: 0;

     font-size: 25px;

     line-height: 1;

     filter:
         drop-shadow(0 3px 3px rgba(70, 25, 0, .2));

 }


 /* =========================================================
   TEXT
========================================================= */

 .hamper-text {

     position: relative;

     z-index: 2;

     display: flex;

     flex-direction: column;

     align-items: flex-start;

     text-align: left;

     line-height: 1;

     color: #6d2905;

 }


 /* CORPORATE */

 .hamper-text span {

     font-size: 10px;

     font-weight: 800;

     letter-spacing: 1.3px;

     opacity: .8;

 }


 /* CURATED */

 .hamper-text strong {

     margin-top: 4px;

     font-size: 17px;

     font-weight: 900;

     letter-spacing: .4px;

 }


 /* HAMPERS */

 .hamper-text small {

     display: inline-block;

     margin-top: 5px;

     padding: 4px 9px;

     font-size: 10px;

     font-weight: 900;

     letter-spacing: 1.3px;

     color: #fff;

     background: #963b08;

     border-radius: 20px;

 }


 /* =========================================================
   FLOATING ANIMATION
========================================================= */

 @keyframes corporateHamperFloat {

     0%,
     100% {

         transform:
             translateY(0) rotate(-3deg);

     }

     50% {

         transform:
             translateY(-6px) rotate(0deg);

     }

 }


 /* =========================================================
   TABLET
========================================================= */

 @media (max-width: 900px) {

     .corporate-hamper-badge {

         left: 6% !important;

         top: 42% !important;

         width: 130px;

         min-height: 82px;

         padding: 9px;

     }

     .hamper-icon {

         font-size: 21px;

     }

     .hamper-text span {

         font-size: 7px;

         letter-spacing: 1px;

     }

     .hamper-text strong {

         font-size: 13px;

     }

     .hamper-text small {

         font-size: 6px;

         padding: 3px 7px;

     }

 }


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

 @media (max-width: 600px) {

     .corporate-hamper-badge {

         /*
           Keeps it between the products
        */

         left: 2% !important;

         top: 39% !important;

         width: 125px;

         min-height: 76px;

         padding: 8px;

         gap: 5px;

         transform:
             translateX(-50%) rotate(-2deg);

     }


     .hamper-icon {

         font-size: 19px;

     }


     .hamper-text span {

         font-size: 6.5px;

         letter-spacing: .8px;

     }


     .hamper-text strong {

         font-size: 12px;

         margin-top: 3px;

     }


     .hamper-text small {

         font-size: 6px;

         margin-top: 4px;

         padding: 3px 7px;

     }

 }


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

 @media (max-width: 400px) {

     .corporate-hamper-badge {

         width: 112px;

         min-height: 68px;

         left: 2% !important;

         top: 40% !important;

     }

     .hamper-icon {

         font-size: 17px;

     }

     .hamper-text strong {

         font-size: 11px;

     }

 }



 /* =========================================================
   NEW PRODUCT STAR
   ========================================================= */

 .product-card {
     position: relative;
 }

 .new-product-badge {
     position: absolute;
     top: 18px;
     right: 18px;

     width: 78px;
     height: 78px;

     background: #7d0000;

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

     z-index: 20;

     clip-path: polygon(50% 0%,
             61% 14%,
             76% 7%,
             79% 23%,
             95% 25%,
             86% 39%,
             100% 50%,
             86% 61%,
             95% 75%,
             79% 77%,
             76% 93%,
             61% 86%,
             50% 100%,
             39% 86%,
             24% 93%,
             21% 77%,
             5% 75%,
             14% 61%,
             0% 50%,
             14% 39%,
             5% 25%,
             21% 23%,
             24% 7%,
             39% 14%);

     animation: newBadgePop 2.2s ease-in-out infinite;
 }

 .new-product-badge span {
     color: #fff;
     font-size: 13px;
     font-weight: 900;
     letter-spacing: 1px;

     transform: rotate(-8deg);
 }

 /* Soft glow */
 .new-product-badge::after {
     content: "";
     position: absolute;
     inset: 5px;

     border: 2px solid rgba(255, 255, 255, 0.35);

     clip-path: inherit;

     pointer-events: none;
 }

 /* POP animation */
 @keyframes newBadgePop {

     0%,
     100% {
         transform: scale(1) rotate(-5deg);
     }

     50% {
         transform: scale(1.08) rotate(5deg);
     }
 }

 /* =========================================================
   NEW PRODUCT BADGE
   ========================================================= */

 .new-product-badge {

     position: absolute;

     top: 18px;
     right: 18px;

     width: 78px;
     height: 78px;

     z-index: 20;

     display: flex;

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

     background: #7d0000;

     clip-path: polygon(50% 0%,
             61% 14%,
             76% 7%,
             79% 23%,
             95% 25%,
             86% 39%,
             100% 50%,
             86% 61%,
             95% 75%,
             79% 77%,
             76% 93%,
             61% 86%,
             50% 100%,
             39% 86%,
             24% 93%,
             21% 77%,
             5% 75%,
             14% 61%,
             0% 50%,
             14% 39%,
             5% 25%,
             21% 23%,
             24% 7%,
             39% 14%);

     animation: newBadgePop 2.2s ease-in-out infinite;
 }


 .new-product-badge span {

     color: #fff;

     font-size: 13px;

     font-weight: 900;

     letter-spacing: 1px;

     transform: rotate(-8deg);
 }


 .new-product-badge::after {

     content: "";

     position: absolute;

     inset: 6px;

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

     clip-path: inherit;

     pointer-events: none;
 }


 @keyframes newBadgePop {

     0%,
     100% {
         transform:
             scale(1) rotate(-5deg);
     }

     50% {
         transform:
             scale(1.08) rotate(5deg);
     }

 }


 /* =========================================================
   OFFER BADGE
   ========================================================= */

 .offer-product-badge {

     position: absolute;

     top: 18px;
     left: 18px;

     width: 95px;
     height: 95px;

     z-index: 20;

     display: flex;

     flex-direction: column;

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

     text-align: center;

     background: #d79a00;
     /* background: #00695C; */

     clip-path: polygon(50% 0%,
             58% 12%,
             70% 4%,
             74% 18%,
             88% 14%,
             87% 29%,
             100% 34%,
             90% 45%,
             100% 55%,
             88% 62%,
             92% 77%,
             76% 76%,
             70% 92%,
             58% 84%,
             50% 100%,
             40% 86%,
             27% 95%,
             24% 80%,
             8% 84%,
             13% 68%,
             0% 60%,
             11% 49%,
             2% 38%,
             16% 31%,
             10% 17%,
             26% 20%,
             31% 5%,
             43% 14%);

     animation: offerBadgePop 2.4s ease-in-out infinite;
 }


 /* OFFER TEXT */

 .offer-product-badge .offer-main {

     color: #fff;

     font-size: 13px;

     font-weight: 800;

     line-height: 1;

     letter-spacing: 1px;

     transform: rotate(-5deg);
 }


 .offer-product-badge .offer-small {

     margin-top: 4px;

     color: #fff8dc;

     font-size: 11px;

     font-weight: 800;

     letter-spacing: 1px;

     transform: rotate(-5deg);
 }


 /* INNER BORDER */

 .offer-product-badge::after {

     content: "";

     position: absolute;

     inset: 7px;

     border: 2px dashed rgba(255, 255, 255, .65);

     clip-path: inherit;

     pointer-events: none;
 }


 /* OFFER BADGE ANIMATION */

 @keyframes offerBadgePop {

     0%,
     100% {
         transform:
             scale(1) rotate(-4deg);
     }

     50% {
         transform:
             scale(1.08) rotate(4deg);
     }

 }


 .product-price-row {
     display: flex;
     align-items: center;
     /* justify-content: center; */
     gap: 12px;
     width: 100%;
     margin-bottom: 8px;
 }

 .product-quantity {
     display: inline-flex;
     align-items: center;
     justify-content: center;

     font-size: 16px;
     font-weight: 700;
     color: #7d0000;

     white-space: nowrap;
 }

 .product-price-row .product-price {
     display: flex;
     align-items: center;
     gap: 8px;
     margin: 0;
 }



 /* ===========================Sale Celebrstion  Main celebration layer=========================================== */

 .sale-celebration {
     position: absolute;
     inset: 0;
     z-index: 50;

     pointer-events: none;

     opacity: 0;
     visibility: hidden;

     transition: opacity 0.4s ease, visibility 0.4s ease;
 }

 /* Activated */

 .sale-celebration.active {
     opacity: 1;
     visibility: visible;
 }


 /* =========================================================
   FIREWORKS
========================================================= */

 .firework {
     position: absolute;

     width: 8px;
     height: 8px;

     border-radius: 50%;

     opacity: 0;
 }

 .firework-1 {
     top: 20%;
     left: 18%;
 }

 .firework-2 {
     top: 28%;
     right: 20%;
 }

 .firework-3 {
     top: 58%;
     left: 50%;
 }


 /* Firework particles */

 .firework span {
     position: absolute;

     left: 50%;
     top: 50%;

     width: 5px;
     height: 42px;

     border-radius: 50%;

     transform-origin: 50% 100%;

     background: currentColor;

     opacity: 0;
 }


 /* Different particle directions */

 .firework span:nth-child(1) {
     transform: translate(-50%, -100%) rotate(0deg);
 }

 .firework span:nth-child(2) {
     transform: translate(-50%, -100%) rotate(30deg);
 }

 .firework span:nth-child(3) {
     transform: translate(-50%, -100%) rotate(60deg);
 }

 .firework span:nth-child(4) {
     transform: translate(-50%, -100%) rotate(90deg);
 }

 .firework span:nth-child(5) {
     transform: translate(-50%, -100%) rotate(120deg);
 }

 .firework span:nth-child(6) {
     transform: translate(-50%, -100%) rotate(150deg);
 }

 .firework span:nth-child(7) {
     transform: translate(-50%, -100%) rotate(180deg);
 }

 .firework span:nth-child(8) {
     transform: translate(-50%, -100%) rotate(210deg);
 }

 .firework span:nth-child(9) {
     transform: translate(-50%, -100%) rotate(240deg);
 }

 .firework span:nth-child(10) {
     transform: translate(-50%, -100%) rotate(270deg);
 }

 .firework span:nth-child(11) {
     transform: translate(-50%, -100%) rotate(300deg);
 }

 .firework span:nth-child(12) {
     transform: translate(-50%, -100%) rotate(330deg);
 }


 /* Firework colors */

 .firework-1 {
     color: #ff4d8d;
 }

 .firework-2 {
     color: #00e5ff;
 }

 .firework-3 {
     color: #9cff57;
 }


 /* Firework animation */

 .sale-celebration.active .firework {
     animation: fireworkBurst 1.3s ease-out infinite;
 }

 .sale-celebration.active .firework-2 {
     animation-delay: 0.45s;
 }

 .sale-celebration.active .firework-3 {
     animation-delay: 0.9s;
 }


 @keyframes fireworkBurst {

     0% {
         transform: scale(0.1);
         opacity: 0;
     }

     15% {
         opacity: 1;
     }

     55% {
         transform: scale(1);
         opacity: 1;
     }

     100% {
         transform: scale(1.35);
         opacity: 0;
     }
 }


 /* Animate individual rays */

 .sale-celebration.active .firework span {
     animation: fireworkRay 1.3s ease-out infinite;
 }

 .firework-2 span {
     animation-delay: 0.45s !important;
 }

 .firework-3 span {
     animation-delay: 0.9s !important;
 }

 @keyframes fireworkRay {

     0% {
         height: 5px;
         opacity: 0;
     }

     15% {
         opacity: 1;
     }

     55% {
         height: 48px;
         opacity: 1;
     }

     100% {
         height: 65px;
         opacity: 0;
     }
 }


 /* =========================================================
   CRACKER / CELEBRATION EMOJIS
========================================================= */

 .sale-cracker {
     position: absolute;

     font-size: 38px;

     opacity: 0;
 }

 .cracker-1 {
     left: 7%;
     bottom: 25%;
 }

 .cracker-2 {
     right: 8%;
     bottom: 22%;
 }

 .cracker-3 {
     left: 35%;
     top: 12%;
 }

 .cracker-4 {
     right: 35%;
     top: 15%;
 }


 .sale-celebration.active .sale-cracker {
     animation: crackerPop 2.2s ease-in-out infinite;
 }

 .cracker-2 {
     animation-delay: 0.4s !important;
 }

 .cracker-3 {
     animation-delay: 0.8s !important;
 }

 .cracker-4 {
     animation-delay: 1.2s !important;
 }


 @keyframes crackerPop {

     0% {
         opacity: 0;
         transform: scale(0) rotate(-25deg);
     }

     20% {
         opacity: 1;
         transform: scale(1.2) rotate(10deg);
     }

     45% {
         transform: scale(1) rotate(-10deg);
     }

     70% {
         opacity: 1;
         transform: translateY(-20px) rotate(15deg);
     }

     100% {
         opacity: 0;
         transform: translateY(-55px) scale(0.7) rotate(30deg);
     }
 }


 /* =========================================================
   CONFETTI
========================================================= */

 .sale-confetti {
     position: absolute;
     inset: 0;

     overflow: hidden;
 }

 .sale-confetti i {
     position: absolute;

     top: -20px;

     width: 8px;
     height: 15px;

     border-radius: 2px;

     background: #ff4d8d;

     opacity: 0;
 }


 /* Different colors */

 .sale-confetti i:nth-child(2n) {
     background: #00e5ff;
 }

 .sale-confetti i:nth-child(3n) {
     background: #9cff57;
 }

 .sale-confetti i:nth-child(4n) {
     background: #b57cff;
 }


 /* Random positions */

 .sale-confetti i:nth-child(1) {
     left: 5%;
 }

 .sale-confetti i:nth-child(2) {
     left: 11%;
 }

 .sale-confetti i:nth-child(3) {
     left: 17%;
 }

 .sale-confetti i:nth-child(4) {
     left: 24%;
 }

 .sale-confetti i:nth-child(5) {
     left: 31%;
 }

 .sale-confetti i:nth-child(6) {
     left: 38%;
 }

 .sale-confetti i:nth-child(7) {
     left: 44%;
 }

 .sale-confetti i:nth-child(8) {
     left: 51%;
 }

 .sale-confetti i:nth-child(9) {
     left: 58%;
 }

 .sale-confetti i:nth-child(10) {
     left: 64%;
 }

 .sale-confetti i:nth-child(11) {
     left: 70%;
 }

 .sale-confetti i:nth-child(12) {
     left: 76%;
 }

 .sale-confetti i:nth-child(13) {
     left: 82%;
 }

 .sale-confetti i:nth-child(14) {
     left: 88%;
 }

 .sale-confetti i:nth-child(15) {
     left: 94%;
 }

 .sale-confetti i:nth-child(16) {
     left: 14%;
 }

 .sale-confetti i:nth-child(17) {
     left: 36%;
 }

 .sale-confetti i:nth-child(18) {
     left: 62%;
 }

 .sale-confetti i:nth-child(19) {
     left: 79%;
 }

 .sale-confetti i:nth-child(20) {
     left: 91%;
 }


 .sale-celebration.active .sale-confetti i {
     animation: confettiFall 2.8s linear infinite;
 }

 .sale-confetti i:nth-child(2) {
     animation-delay: 0.2s !important;
 }

 .sale-confetti i:nth-child(3) {
     animation-delay: 0.5s !important;
 }

 .sale-confetti i:nth-child(4) {
     animation-delay: 0.8s !important;
 }

 .sale-confetti i:nth-child(5) {
     animation-delay: 1.1s !important;
 }

 .sale-confetti i:nth-child(6) {
     animation-delay: 1.4s !important;
 }

 .sale-confetti i:nth-child(7) {
     animation-delay: 0.3s !important;
 }

 .sale-confetti i:nth-child(8) {
     animation-delay: 0.7s !important;
 }

 .sale-confetti i:nth-child(9) {
     animation-delay: 1.3s !important;
 }

 .sale-confetti i:nth-child(10) {
     animation-delay: 1.8s !important;
 }


 @keyframes confettiFall {

     0% {
         top: -20px;
         opacity: 0;
         transform: rotate(0deg) translateX(0);
     }

     10% {
         opacity: 1;
     }

     50% {
         opacity: 1;
         transform: rotate(180deg) translateX(25px);
     }

     100% {
         top: 110%;
         opacity: 0;
         transform: rotate(420deg) translateX(-25px);
     }
 }


 /* =========================================================
   CELEBRATION MESSAGE
========================================================= */

 .sale-celebration-message {
     position: absolute;

     left: 50%;
     top: 50%;

     transform: translate(-50%, -50%) scale(0);

     display: flex;
     flex-direction: column;
     align-items: center;

     text-align: center;

     padding: 18px 30px;

     border-radius: 20px;

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

     box-shadow:
         0 15px 50px rgba(0, 0, 0, 0.18),
         0 0 35px rgba(255, 255, 255, 0.6);

     backdrop-filter: blur(8px);

     opacity: 0;
 }


 .sale-celebration-message span {
     font-size: 42px;
     margin-bottom: 3px;
 }

 .sale-celebration-message strong {
     font-size: 25px;
     font-weight: 900;

     letter-spacing: 1px;

     background: linear-gradient(90deg,
             #ff4d8d,
             #9b59ff,
             #00bcd4,
             #ff4d8d);

     background-size: 300% auto;

     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

     animation: celebrationText 2s linear infinite;
 }

 .sale-celebration-message small {
     margin-top: 5px;

     font-size: 13px;
     font-weight: 600;

     color: #555;
 }


 .sale-celebration.active .sale-celebration-message {
     animation: celebrationMessage 2.5s ease-in-out forwards;
 }


 @keyframes celebrationMessage {

     0% {
         opacity: 0;
         transform: translate(-50%, -50%) scale(0.3);
     }

     20% {
         opacity: 1;
         transform: translate(-50%, -50%) scale(1.08);
     }

     35% {
         transform: translate(-50%, -50%) scale(1);
     }

     75% {
         opacity: 1;
         transform: translate(-50%, -50%) scale(1);
     }

     100% {
         opacity: 0;
         transform: translate(-50%, -50%) scale(0.9);
     }
 }


 @keyframes celebrationText {
     to {
         background-position: 300% center;
     }
 }


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

 @media (max-width: 768px) {

     .firework-1 {
         left: 10%;
         top: 18%;
     }

     .firework-2 {
         right: 10%;
         top: 25%;
     }

     .firework-3 {
         left: 50%;
         top: 65%;
     }

     .sale-celebration-message {
         width: max-content;
         max-width: 85%;
         padding: 14px 20px;
     }

     .sale-celebration-message strong {
         font-size: 19px;
     }

     .sale-celebration-message small {
         font-size: 11px;
     }

     .sale-cracker {
         font-size: 28px;
     }
 }

 /* </style> */