@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

/* ---------- TYPOGRAPHY ----------- */
html{scroll-behavior: smooth;}
.arial {font-family: Arial, sans-serif;font-weight: 600;}
.helvetica {font-family: Helvetica, sans-serif;line-height: 1.625rem;}
.uppercase-text {font-family: Arial, sans-serif;font-size: clamp(12px, 0.7rem + 0.2vw, 14px);font-weight: 600;text-transform: uppercase;letter-spacing: 0.04em;line-height: 1.3;}
.display-heading {font-family: Arial, sans-serif;font-size: clamp(2.5rem, 4vw, 5rem);font-weight: 800;line-height: 1.1;text-transform: uppercase;letter-spacing: 2px;}
.heading {font-family: Arial, sans-serif;font-size: clamp(34px, 1.5rem + 3vw, 60px);font-weight: 700;line-height: 1.1;}
.subheading {font-family: Arial, sans-serif;font-size: clamp(24px, 1.1rem + 1vw, 36px);font-weight: 700;line-height: 1.3;}
.smallheading {font-family: Arial, sans-serif;font-size: clamp(20px, 1rem + 0.5vw, 28px);font-weight: 700;line-height: 1.4;}
.card-title {font-family: Arial, sans-serif;font-size: 1.2rem;font-weight: 700;line-height: 1.35;}
.paragraph {font-family: Helvetica, sans-serif;font-size: clamp(15px, 0.9rem + 0.15vw, 16px);font-weight: 400;line-height: 1.7;}
.lead-text {font-family: Helvetica, sans-serif;font-size: clamp(17px, 1rem + 0.2vw, 20px);font-weight: 400;line-height: 1.7;}
.small-text {font-family: Helvetica, sans-serif;font-size: clamp(13px, 0.8rem + 0.1vw, 14px);font-weight: 500;line-height: 1.5;}
.testimonial-text {font-family: Helvetica, sans-serif;font-size: clamp(15px, 0.9rem + 0.15vw, 16px);font-weight: 400;font-style: italic;line-height: 1.8;}
.btn,
button {font-family: Helvetica, sans-serif;font-size: clamp(14px, 0.85rem + 0.15vw, 16px);font-weight: 600;}
a {text-decoration: none !important;}
li {list-style-type: none !important;}
.bg-svg-dots {background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23e2e8f0'/%3E%3C/svg%3E");}
.bg-svg-grid {background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23e2e8f0' stroke-width='1' d='M0 40V0h40' fill='none'/%3E%3C/svg%3E");}
.bg-svg-crosses {background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 15v10M15 20h10' stroke='%23e2e8f0' stroke-width='1' fill='none'/%3E%3C/svg%3E");}
.bg-svg-hexagon {background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e2e8f0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E");}
.bg-svg-diamond {background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1' fill='rgba(0,0,0,0.05)'/%3E%3C/svg%3E");}

.rounded-50 {border-radius: 50px;}
.z-index-2{z-index: 2;}
.z-index-1{z-index: 1;}
.text-black{color: #000000;}
/* =======================
CODE STYLING
===========================*/

/* ============= HEADER STYLING ============*/
.marquee-layer { background: linear-gradient(
135deg,
var(--blue1)
);padding: 8px 0;overflow: hidden;border-bottom: 1px solid rgba(255, 255, 255, 0.06);}
.marquee {width: 100%;overflow: hidden !important;font-size: 16px;line-height: 25px;}
.marquee-item {display: inline-flex;align-items: center;gap: 10px;color: white;font-weight: 600;font-size: 0.82rem;letter-spacing: 0.4px;white-space: nowrap;transition: color 0.3s ease;}

/* ============ FIXED FOOTER ICONS ============ */
.fixed-floating {position: fixed;z-index: 1050;}
.floating-icn1 {width: 60px;height: 60px;object-fit: contain;border-radius: 50%;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);cursor: pointer;}
.floating-icn2 {width: 120px;height: 120px;object-fit: contain;border-radius: 50%;padding: 10px;cursor: pointer;}
.point-whatsapp {bottom: 25px;left: 25px;}
.point-call {bottom: 95px;left: 25px;}
.point-cart {bottom: 25px;right: 25px;}
.call-wrapper {display: inline-block;}
.custom-tooltip {position: absolute;left: 70px;top: 50%;transform: translateY(-50%);background: #ffc107;color: #000;padding: 10px 20px;border-radius: 8px;font-size: 1rem;white-space: nowrap;opacity: 0;visibility: hidden;transition: all 0.3s ease;box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
.custom-tooltip::before {content: "";position: absolute;top: 50%;left: -6px;transform: translateY(-50%);border-width: 6px 6px 6px 0;border-style: solid;border-color: transparent #ffc107 transparent transparent;}
.call-wrapper:hover .custom-tooltip {opacity: 1;visibility: visible;}
.anim-pulse {animation: pulseGlow 2s infinite;}   /* whatsapp animation */
.anim-bounce {animation: gentleBounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1);} /* quick purchase animation */
.anim-ring {animation: phoneRing 2.5s infinite ease-in-out;}  /* call us ringing animation */

@keyframes pulseGlow {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }}
@keyframes phoneRing {
0%, 15%, 100% { transform: rotate(0deg); }
2%, 6%, 10% { transform: rotate(-15deg); }
4%, 8%, 12% { transform: rotate(15deg); }}
@keyframes gentleBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }}

/* ========== STYLING CODES  ============ */
:root {
    --blue1: #041f10;
    --blue2: #025918;
    --blue3: #038c3a;
    --blue4: #08a62d;
    --orange1: #F28705;
    --orange2: #F27405;
    --yellow1: #FFB703;
}
/* COMMON CODES */
.bg-blue1 {background-color: var(--blue1);}
.bg-blue2 {background-color: var(--blue2);}
.bg-blue3 {background-color: var(--blue3);}
.bg-orange1{background-color: var(--orange1);}
.bg-orange2{background-color: var(--orange2);}
.bg-yellow1 {background-color: var(--yellow1);}
.text-blue1 {color: var(--blue1);}
.text-blue2 {color: var(--blue2);}


.style-text {position: relative;display: inline-flex;align-items: center;gap: 8px;padding: 12px 24px;border-radius: 0;color: var(--blue1);font-weight: 700;background: var(--yellow1);margin-bottom: 20px;z-index: 1;font-family: Arial, sans-serif;}
.style-text::before {content: '';position: absolute;top: 4px;bottom: 4px;left: 4px;right: 4px;border: 2px dashed var(--blue1);pointer-events: none;z-index: -1;}.style-text i.border-anim {display: none;}

@keyframes st-spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

/* btn style 1 */
.btn1 {line-height: 1;text-decoration: none;display: inline-flex;border: none;cursor: pointer;align-items: center;gap: 0.75rem;background-color: var(--yellow1);color: var(--blue1);border-radius: 10rem;font-weight: 600;padding: 0.75rem 1.5rem;padding-left: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: background-color 0.3s;}
.btn1__icon-wrapper {flex-shrink: 0;width: 25px;height: 25px;position: relative;color: var(--yellow1);background-color: var(--blue1);border-radius: 50%;display: grid;place-items: center;overflow: hidden;}
.btn1:hover {background-color: #000;color: #fff;}
.btn1:hover .btn1__icon-wrapper {color: #000;background-color: #fff;}
.btn1__icon-svg--copy {position: absolute;transform: translate(-150%, 150%);}
.btn1:hover .btn1__icon-svg:first-child {transition: transform 0.3s ease-in-out;transform: translate(150%, -150%);}
.btn1:hover .btn1__icon-svg--copy {transition: transform 0.3s ease-in-out 0.1s;transform: translate(0);}

/* btn style 2 */
.btn-translate {position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 12px 32px; color: var(--blue1); border: 2px solid var(--yellow1); border-radius: 5px; font-weight: 700; overflow: hidden; z-index: 1; text-decoration: none; transition: color 0.4s;}
.btn-translate span {position: relative; z-index: 2;}
.btn-translate::before, .btn-translate::after {content: ''; position: absolute; top: 0; width: 50%; height: 100%; background: var(--yellow1); z-index: 1; transition: 0.4s;}
.btn-translate::before {left: -51%;}
.btn-translate::after {right: -51%;}
.btn-translate:hover::before {left: 0;}
.btn-translate:hover::after {right: 0;}
.btn-translate:hover {color: var(--blue1);}

/* btn style 3 */
.thm-btn3 {position: relative;display: inline-flex;justify-content: center;align-items: center;padding: 10px 24px;background-color: var(--blue1);color: var(--yellow1);font-weight: 700;overflow: hidden;z-index: 1;transition: color 0.4s ease;border-radius: 5px;text-decoration: none !important;}
.thm-btn3::before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 0%;background-color: var(--yellow1);transition: height 0.4s ease;z-index: -1;}
.thm-btn3:hover {color: var(--blue1);}
.thm-btn3:hover::before {height: 100%;}

/* HEADER SECTION */
.header-brand {background-color: var(--blue2);}
.header-topbar {background-color: var(--blue2);border-bottom: 1px solid rgba(255, 255, 255, 0.15);}
.nav-link-glass {padding: 8px 16px;font-size: 15px;font-weight: 700;color: #000;text-transform: capitalize;text-decoration: none;font-family: Arial, Helvetica, sans-serif;border-radius: 5px;transition: all 0.3s ease;position: relative;display: inline-flex;justify-content: center;align-items: center;}
.nav-link-glass:hover,
.nav-link-glass.active {background: rgba(255, 187, 0, 0.6);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);color: var(--blue1) !important;box-shadow: 0 4px 6px rgba(0,0,0,0.05);}

/* FOOTER SECTION */
.footer-divider-right {border-right: 1px solid rgba(255, 255, 255, 0.15);}
.footer-link {transition: color 0.3s ease;}
.footer-link:hover {color: var(--yellow1) !important;}
.footer-map-container {height: 200px;}
.border-white-10 {border-top: 1px solid rgba(255, 255, 255, 0.15);}
.reach-us-label {padding: 10px 20px 10px 10px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50px; transition: all 0.3s ease;}
.reach-us-label:hover {background-color: rgba(255, 255, 255, 0.1);}
.footer-heading-underline {position: relative; padding-bottom: 12px; margin-bottom: 25px; display: inline-block;}
.footer-heading-underline::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--yellow1);}
.footer-heading-underline::before {content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -4px; width: 16px; height: 10px; border: 2px solid var(--yellow1); background: var(--blue1); z-index: 1;}

/* FOOTER FLOAT CARD */
.footer-float-card {position: relative;margin-top: -130px;margin-bottom: 40px;z-index: 10;box-shadow: 0 10px 40px rgba(0,0,0,0.1);} 
.float-images-container {position: relative;width: 100%;}
.float-img-wrapper {position: relative;display: inline-block;border-radius: 50%;transition: transform 0.4s ease;transform-origin: bottom center;}
.float-img-wrapper::before {content: '';position: absolute;top: 4px;bottom: 4px;left: 4px;right: 4px;border: 3px dashed white;border-radius: 50%;pointer-events: none;z-index: 2;}
.float-img-wrapper img {width: 150px;height: 150px;object-fit: cover;border-radius: 50%;box-shadow: 0 5px 15px rgba(0,0,0,0.15);transition: all 0.4s ease;background: #fff;display: block;}
.img-left {margin-right: -30px;z-index: 1;}
.img-right {margin-left: -30px;z-index: 2;}
.float-images-container:hover .img-left {transform: rotate(-12deg);}
.float-images-container:hover .img-right {transform: rotate(12deg);}

/* WELCOME SECTION */
.welcome-yellow-box {background: linear-gradient(135deg, var(--yellow1) 0%, #ffc107 100%);}
.welcome-green-box {background: linear-gradient(135deg, var(--blue1) 0%, var(--blue2) 100%);}
.welcome-decorative-bars {right: 30px;bottom: 0;gap: 10px;opacity: 0.2;}
.welcome-bar-1 { width: 25px; height: 60px; }
.welcome-bar-2 { width: 25px; height: 100px; }
.welcome-bar-3 { width: 25px; height: 140px; }


/* =========================================
   BRANDS PARALLAX SECTION
   =========================================*/
.brands-parallax { background-image: url('../images/banner/bg1.webp'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }
.brands-parallax::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1; }
.brands-parallax .container { position: relative; z-index: 2; }

/* =========================================
   ABOUT SECTION (MODERN PREMIER)
   =========================================*/
.about-image-wrapper { position: relative; width: 100%; height: 550px; }
.img-main { width: 75%; height: 85%; object-fit: cover; border-radius: 20px; position: absolute; top: 0; left: 0; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.img-sub { width: 60%; height: 50%; object-fit: cover; border-radius: 15px; position: absolute; bottom: 0; right: 0; border: 10px solid #fff; box-shadow: 0 15px 35px rgba(0,0,0,0.15); transition: transform 0.4s ease; }

.about-badge { position: absolute; top: 12%; right: 5%; background: var(--blue1); color: #fff; border-radius: 50%; width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 10px 25px rgba(4, 31, 16, 0.4); z-index: 3;}
.about-badge::before { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border: 2px dashed var(--yellow1); border-radius: 50%; animation: st-spin 12s linear infinite; pointer-events: none;}

.about-feature-box { background: #ffffff; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; padding: 25px 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.02); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.about-feature-box:hover { box-shadow: 0 15px 35px rgba(0,0,0,0.08); border-color: var(--yellow1); }
.about-feature-icon { width: 50px; height: 50px; background: rgba(255,183,3,0.15); color: var(--yellow1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; transition: all 0.3s ease; }
.about-feature-box:hover .about-feature-icon { background: var(--yellow1); color: var(--blue1); transform: rotate(10deg); }

/* Brands Marquee Modern */
.brands-carousel-container { width: 100%; height: 120px; }
.brands-fade { position: absolute; top: 0; width: 100px; height: 100%; z-index: 2; pointer-events: none; }
.brands-fade-left { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.9), transparent); }
.brands-fade-right { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.9), transparent); }
.brands-track-modern { display: flex; width: max-content; gap: 40px; animation: brandScrollModern 20s linear infinite; height: 100%; }
@keyframes brandScrollModern { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.brand-box-modern { width: 180px; height: 100%; display: flex; align-items: center; justify-content: center; }
.brand-box-modern img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- PRODUCTS SECTION ------------- */
.products-section {background-color: #f8f9fa;overflow: hidden;}
.products-bg-image {position: absolute;top: 0;left: 0;width: 50%;height: 100%;background: url('../images/banner/bg2.webp') center/cover no-repeat;z-index: 0;}
.product-content-box p {height: 50px;}
.products-card {border-radius: 10px;}
.product-item {transition: transform 0.3s ease, box-shadow 0.3s ease;background: #fff;}
.shop-btn {bottom: 0;right: 20px;transform: translateY(50%);padding: 5px 20px;font-size: 0.85rem;z-index: 5;}
.products-carousel-nav .btn {width: 40px;height: 40px;padding: 0;line-height: 40px;color: var(--blue1);border-color: #ddd;transition: all 0.3s ease;}
.products-carousel-nav .btn:hover {background-color: var(--yellow1) !important;color: #fff !important;border-color: var(--yellow1) !important;}

/* =========================================
   SAFETY TIPS SECTION
   =========================================*/
.safety-section { background-color: #f0f4f8; }
.safety-card-wrapper {position: relative;height: 100%;z-index: 1;filter: drop-shadow(0 10px 20px rgba(0,0,0,0.06));transition: filter 0.4s ease;}
.safety-card-wrapper:hover {filter: drop-shadow(0 15px 30px rgba(0,0,0,0.12));}
.safety-bg {position: absolute;top: 0; left: 0; width: 100%; height: 100%;background-color: #ffffff;clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);transition: clip-path 0.4s ease, background-color 0.4s ease;z-index: 0;border-radius: 12px 12px 0 12px;}
.safety-card-wrapper:hover .safety-bg {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);border-radius: 12px;}.safety-content {position: relative;z-index: 2;}
.safety-vector {position: absolute;top: -45px;right: 25px;width: 110px;z-index: 3;}
.dos-card .safety-vector {animation: safetyWobble1 3.5s ease-in-out infinite;}
.donts-card .safety-vector {animation: safetyWobble2 4.2s ease-in-out infinite;}
@keyframes safetyWobble1 {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.2) rotate(8deg); }
    50% { transform: scale(1) rotate(0deg); }
    75% { transform: scale(0.8) rotate(-8deg); }
}
@keyframes safetyWobble2 {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(0.8) rotate(-8deg); }
    50% { transform: scale(1) rotate(0deg); }
    75% { transform: scale(1.2) rotate(8deg); }
}
.safety-bg::before {content: "";position: absolute;top: 5px; left: 5px; right: 5px; bottom: 5px;z-index: 1;clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0 100%);transition: clip-path 0.4s ease;border-radius: 8px 8px 0 8px;pointer-events: none;}
.safety-card-wrapper:hover .safety-bg::before {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);border-radius: 8px;}
.dos-card .safety-bg::before { border: 2px dashed #05c34a; }
.donts-card .safety-bg::before { border: 2px dashed #e60808; }
.dos-card:hover .safety-bg { background-color: #f2fdf5; }
.donts-card:hover .safety-bg { background-color: #fef2f2; }
.safety-list { margin-top: 2rem; }
.safety-list li {display: flex;align-items: flex-start;margin-bottom: 1.5rem;gap: 15px;}
.safety-list-icon {flex-shrink: 0;width: 35px; height: 35px;display: flex; align-items: center; justify-content: center;border-radius: 50%;font-size: 1.2rem;}
.dos-icon { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.donts-icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* =========================================
   CONTACT DETAILS SECTION
   =========================================*/
.contact-section { background-color: #ffffff; }
.contact-card {border: 1px dashed #ffa01b; transition: all 0.3s ease;}
.contact-card:hover {border-color: var(--blue1); box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.contact-card-bottom {border-top: 1px dashed #d1d5db; background-color: #f9fafb; transition: all 0.3s ease;}
.contact-card:hover .contact-card-bottom {border-top-color: var(--blue1);}

/* ========= RESPONSIVE MEDIA QUERIES ========== */
 
@media (max-width: 767px) { 
    /* html { scroll-padding-top: 80px; } */
    .float-img-wrapper img {width: 120px;height: 120px;}
    .img-left { margin-right: -15px; }
    .img-right { margin-left: -15px; }
    #mainNavMobile {position: absolute; width: 100%; left: 0; top: 100%; z-index: 1050; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);}
    .menu-icon-mobile {font-size: 2.2rem;}
    .nav-link-glass:hover, .nav-link-glass.active {background-color: var(--blue1) !important; color: #ffffff !important;}
    
    /* About mobile */
    .about-image-wrapper { height: 400px; }
    .brands-track-modern { gap: 20px; }
    
    /* Safety Mobile */
    .safety-vector { width: 75px; top: -30px; right: 15px; }
}
@media (max-width: 991px) {
    /* html { scroll-padding-top: 90px; } */
    .safety-vector { width: 90px; top: -35px; }
    .footer-float-card {margin-top: 0px;}
    .footer-divider-right {border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 1.5rem; margin-bottom: 1rem;}
    .ct-map-iframe {height: 380px;}
    
    /* About tablet */
    .about-image-wrapper { max-width: 450px; margin: 0 auto; }
}