@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
html{scroll-behavior: smooth; scroll-padding-top: 60px;}
.logo-size{width: 180px;}
/* ---------- TYPOGRAPHY ----------- */
.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;}
.rounded-12{border-radius: 12px;}
.z-index-3{z-index: 3;}
.z-index-2{z-index: 2;}
.z-index-1{z-index: 1;}
.text-black{color: #000000;}
/* =======================
CODE STYLING
===========================*/
.style-text {display: inline-block;background-color: var(--green1);color: #fff;padding: 6px 30px 6px 15px;font-weight: bold;font-size: 0.85rem;clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0% 100%);border-radius: 3px 0 0 3px;margin-left: 2px;letter-spacing: 0.5px;}
.style-text1 {display: inline-block;background-color: var(--yellow);color: var(--green1);padding: 6px 30px 6px 15px;font-weight: bold;font-size: 0.85rem;clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0% 100%);border-radius: 3px 0 0 3px;margin-left: 2px;letter-spacing: 0.5px;}

/* ============= MARQUEE STYLING ============*/
.marquee-layer { background: linear-gradient(
135deg, var(--green1)
);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: #ffffff;font-weight: 600;font-size: 0.82rem;letter-spacing: 0.4px;white-space: nowrap;transition: color 0.3s ease;}
.marquee-item i {font-size:1.1rem;color: #ffffff;}

/* ============ 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); }}

/* ========== ORIGINAL STYLING =============== */
:root{
    --green1:#4b0707;
    --green2:#891010;
    --yellow:#F8B324;
    --orange:#EB442C;
    --red:#BC2023 ;    
}
.text-green1{color:var(--green1)}  
.text-green2{color:var(--green2)}  
.text-yellow{color:var(--yellow)}  
.text-orange{color:var(--orange)}  
.text-red{color:var(--red)}  
.bg-green1{background-color:var(--green1)}  
.bg-green2{background-color:var(--green2)}  
.bg-yellow{background-color:var(--yellow)}  
.bg-orange{background-color:var(--orange)}  
.bg-red{background-color:var(--red)}  


/* ===== BUTTON STYLING ====== */
/* From Uiverse.io by KINGFRESS */ 
.btn1 {font-weight: bold;color: var(--green1) !important;border-radius: 2rem;cursor: pointer;width: 160px;height: 42.66px;border: none;background-color: var(--yellow);display: flex;justify-content: center;align-items: center;position: relative;}
.btn1 .span-mother {display: flex;overflow: hidden;}
.btn1:hover .span-mother {position: absolute;}
.btn1:hover .span-mother span {transform: translateY(2em);}
.btn1 .span-mother span:nth-child(1) { transition: 0.2s; }
.btn1 .span-mother span:nth-child(2) { transition: 0.25s; }
.btn1 .span-mother span:nth-child(3) { transition: 0.3s; }
.btn1 .span-mother span:nth-child(4) { transition: 0.35s; }
.btn1 .span-mother span:nth-child(5) { transition: 0.4s; }
.btn1 .span-mother span:nth-child(6) { transition: 0.45s; }
.btn1 .span-mother span:nth-child(7) { transition: 0.5s; }
.btn1 .span-mother span:nth-child(8) { transition: 0.55s; }
.btn1 .span-mother span:nth-child(9) { transition: 0.6s; }
.btn1 .span-mother span:nth-child(10) { transition: 0.65s; }
.btn1 .span-mother span:nth-child(11) { transition: 0.7s; }
.btn1 .span-mother span:nth-child(12) { transition: 0.75s; }
.btn1 .span-mother span:nth-child(13) { transition: 0.8s; }
.btn1 .span-mother span:nth-child(14) { transition: 0.85s; }
.btn1 .span-mother span:nth-child(15) { transition: 0.9s; }
.btn1 .span-mother span:nth-child(16) { transition: 0.95s; }
.btn1 .span-mother2 {display: flex;position: absolute;overflow: hidden;}
.btn1 .span-mother2 span {transform: translateY(-2em);}
.btn1:hover .span-mother2 span {transform: translateY(0);}
.btn1 .span-mother2 span:nth-child(1) { transition: 0.2s; }
.btn1 .span-mother2 span:nth-child(2) { transition: 0.25s; }
.btn1 .span-mother2 span:nth-child(3) { transition: 0.3s; }
.btn1 .span-mother2 span:nth-child(4) { transition: 0.35s; }
.btn1 .span-mother2 span:nth-child(5) { transition: 0.4s; }
.btn1 .span-mother2 span:nth-child(6) { transition: 0.45s; }
.btn1 .span-mother2 span:nth-child(7) { transition: 0.5s; }
.btn1 .span-mother2 span:nth-child(8) { transition: 0.55s; }
.btn1 .span-mother2 span:nth-child(9) { transition: 0.6s; }
.btn1 .span-mother2 span:nth-child(10) { transition: 0.65s; }
.btn1 .span-mother2 span:nth-child(11) { transition: 0.7s; }
.btn1 .span-mother2 span:nth-child(12) { transition: 0.75s; }
.btn1 .span-mother2 span:nth-child(13) { transition: 0.8s; }
.btn1 .span-mother2 span:nth-child(14) { transition: 0.85s; }
.btn1 .span-mother2 span:nth-child(15) { transition: 0.9s; }
.btn1 .span-mother2 span:nth-child(16) { transition: 0.95s; }

/* ======== HEADERS SECTION ========= */
.contact-badge {background-color: var(--green1);outline: 2px solid var(--yellow);outline-offset: -8px;transition: all 0.4s ease;cursor: pointer;}
.phone-badge {clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);padding-left: 50px !important;} 
.email-badge {clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0% 100%);padding-right: 50px !important;}
.contact-icon {font-size: 1.8rem;color: var(--yellow);transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.contact-badge:hover .contact-icon {transform: scale(1.2) rotate(15deg);color: #fff;}
.contact-badge a:hover {color: var(--yellow) !important;}

.bottom-nav {background-color: var(--green1);border-bottom: 2px solid var(--yellow);transition: all 0.3s ease;}
.custom-toggler {border: 1px solid rgba(255,255,255,0.4);background-color: transparent;transition: all 0.3s ease;}
.custom-toggler:hover {background-color: rgba(255,255,255,0.15);border-color: #fff;}
.toggler-icon-custom {font-size: 1.8rem;}
.bottom-nav .nav-link {color: #ffffff !important;transition: color 0.3s ease;}
.bottom-nav .nav-link:hover,
.bottom-nav .nav-item.active .nav-link {color: var(--yellow) !important;}
/* ======== FOOTER SECTION ========= */
.footer-wrapper {background-color: var(--green1);overflow: hidden;}
.footer-shape-yellow {position: absolute;top: 0;left: 0;width: 60%;height: 110%;background-color: var(--yellow);z-index: 1;clip-path: polygon(0 0, 100% 0, 100% 85%, 45% 85%, 20% 85%, 25% 65%, 25% 90%, 0 90%);} 
.footer-link {transition: all 0.3s ease;}
.footer-link:hover {color: var(--yellow) !important;}
/* ----- HOME PAGE ----- */

/* Welcome Section */
.welcome-swirl {right: 0px;bottom: -120px;z-index: 5;width: 280px;animation: rotate360Linear 15s linear infinite;}
@keyframes rotate360Linear {0% { transform: rotate(0deg); opacity: 0.7; }50% { opacity: 1; }100% { transform: rotate(360deg); opacity: 0.7; }}

/* Statistics Section */
.stat-box {cursor: pointer;}
.stat-icon {transition: transform 0.3s linear;}
.stat-box:hover .stat-icon {transform: rotateY(180deg);}

/* ----- ABOUT PAGE ----- */
.bg-pink{background-color: #891010;}
@keyframes moveDash {
    to { stroke-dashoffset: -14; }
}
.overlapping-bottom-row { margin-top: -40px; }
.support-icon-box { width: 50px; height: 50px; font-size: 20px; }
@keyframes ringWobble {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
.anim-ring i { animation: ringWobble 2s ease infinite; display: inline-block; }


/* ----- PRODUCTS PAGE ----- */
.cat-card {position: relative;overflow: hidden;display: flex;align-items: flex-end;justify-content: center;padding: 30px;text-decoration: none;background-size: cover;background-position: center;background-color: #333;z-index: 1;border-radius: 100px;margin-bottom: 30px;}
.cat-card.tall { height: 400px; }
.cat-card.short { height: 250px; }
.cat-card-img {position: absolute;top: 0; left: 0;width: 100%; height: 100%;object-fit: cover;z-index: 0;}
.cat-card-border {position: absolute;top: 10px; left: 10px;width: calc(100% - 20px);height: calc(100% - 20px);z-index: 2;pointer-events: none;}
.cat-card-border rect {fill: none;stroke: #fff;stroke-width: 2px;stroke-dasharray: 4;}
.cat-card:hover .cat-card-border rect {animation: moveDash 0.5s linear infinite;}
.cat-card::after {content: "";position: absolute;top: 0; left: 0; right: 0; bottom: 0;background: linear-gradient(to top, rgba(0,0,0,0.8) 20%, transparent 40%);z-index: 1;}

/* ----- SAFETY TIPS PAGE ----- */
.bg-red { background-color: #d32f2f !important; }
.text-red { color: #d32f2f !important; }
.bg-green { background-color: rgb(5, 119, 28) !important; }
.text-green { color: rgb(5, 119, 28) !important; }
.safety-card {border-radius: 20px;padding: 35px;border: 2px solid rgba(0,0,0,0.05);background-color: #fff;transition: all 0.3s ease;box-shadow: 0 5px 15px rgba(0,0,0,0.05);}
.safety-card:hover {box-shadow: 0 15px 40px rgba(0,0,0,0.1);}
.safety-list {list-style: none;margin: 0;padding: 0;}
.safety-item {display: flex;align-items: flex-start;gap: 15px;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px dashed rgba(0,0,0,0.3);}
.safety-item:last-child {margin-bottom: 0;padding-bottom: 0;border-bottom: none;}
.safety-icon {width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.2rem;flex-shrink: 0;}

/* ----- CONTACT PAGE ----- */
.contact-card {background: linear-gradient(135deg, #a91616, #380000);border-radius: 20px;position: relative;overflow: hidden;transition: box-shadow 0.3s ease;color: white;}.contact-card:hover {box-shadow: 0 10px 30px rgba(0,0,0,0.15);}
.contact-card::before {content: "";position: absolute;top: 0; left: -100%;width: 50%;height: 100%;background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);transform: skewX(-25deg);z-index: 1;}
.contact-card:hover::before {animation: shineEffect 0.7s;}
@keyframes shineEffect {100% {left: 200%;}}
.contact-icon {transition: transform 0.4s linear;}
.contact-card:hover .contact-icon {transform: rotateY(180deg);}

/* ======== MEDIA QUERIES ======== */
@media (max-width: 992px) {
html{scroll-behavior: smooth; scroll-padding-top: 310px;}
    .phone-badge {padding-left: 25px !important; clip-path: polygon(100% 0, 100% 100%, 0% 100%, 8% 50%, 0% 0%);}
    .email-badge {padding-right: 25px !important; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0% 100%);}
    .bottom-nav .nav-item {border-bottom: 1px solid rgba(255,255,255,0.1);}
    .bottom-nav .nav-item:last-child {border-bottom: none;}
    
    .footer-shape-yellow { display: none; }
    .footer-left-content { background-color: var(--yellow);border-bottom: 5px solid var(--green1); }
    .footer-wrapper { background-color: var(--green1); }
    
    .cat-col {display: flex;flex-direction: row;gap: 15px;}
    .safety-card {padding: 25px;}
    .safety-item {gap: 12px;margin-bottom: 15px;padding-bottom: 15px;}
}

@media (max-width: 768px) {
html{scroll-behavior: smooth; scroll-padding-top: 310px;}
    
    .phone-badge, .email-badge {clip-path: none;}
    .cat-col {flex-direction: column;}
    .safety-card {padding: 20px;}
    .safety-icon {width: 35px;height: 35px;font-size: 1rem;}
}

@media (min-width: 768px) and (max-width: 992px) {
     .cat-card.tall, 
     .cat-card.short {flex: 1;width: auto;height: 250px;margin-left: 0;margin-right: 0;}
}