:root {
    --yellow: #fff001;
    --yellow-deep: #FDE514;
    --black: #050505;
    --red: #ed1c24;
    --purple: #70418f;
    --soft-gray: #eeeeee;
    --text: #111111;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #ffffff;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    padding: 0px 0;
    background: #fff001;
    padding: 0px 0;
    /* border-bottom: 1px solid #ddd; */
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(950px, calc(100% - 42px));
    height: 70px;
    margin: 0 auto;
}

.brand-logo img {
    width: 110px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 38px;
    margin-left: auto;
    margin-right: 30px;
}

.main-nav a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.call-button {
    display: grid;
    place-items: center;
    min-width: 185px;
    min-height: 52px;
    padding: 8px 12px;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    background-image: url(../images/header-button.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.call-button span{
   font-size: 14px;
}

.call-button strong {
    margin-top: 2px;
    font-size: 15px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.menu-toggle,
.drawer-close {
    border: 0;
    background: none;
    cursor: pointer;
}

.menu-toggle {
    display: none;
    width: 38px;
    padding: 8px;
}

.menu-toggle span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: #111111;
}

.mobile-drawer,
.drawer-overlay {
    display: none;
}

.hero-section {
    background: var(--yellow);
}

.hero-section img {
    width: 100%;
    padding-top: 70px;
}

.leading-strip {
    padding: 35px 20px 35px;
    background: #fffffc;
    text-align: center;
}

.leading-strip h1 {
    margin: 0;
    color: var(--red);
    font-size: clamp(24px, 4vw, 42px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 4px;
    text-transform: uppercase;
} 

.proud-section {
    padding: 54px 0 52px;
    background: var(--yellow-deep);
}

.proud-wrap {
    position: relative;
    width: min(1030px, calc(100% - 48px));
    min-height: 320px;
    margin: 0 auto;
}

.proud-copy {
    width: 65%;
    min-height: 320px;
    padding: 34px 43px 32px;
    background: #090909;
    color: #ffffff;
}

.proud-copy h2 {
    margin: 0px 0px 0px -109px;
    color: var(--yellow-deep);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
}

.yellow-line {
    display: block;
    width: 580px;
    height: 2px;
    margin: 13px auto 22px;
    background: var(--yellow-deep);
}

.proud-copy p {
    width: 74%;
    margin: 0 0 15px;
    color: #f8f8f8;
    font-size: 13px;
    text-align: justify;
    line-height: 1.6;
    letter-spacing: 0.2px;
}

.mini-button {
    display: inline-block;
    margin-top: 4px;
    padding: 8px 20px;
    background: var(--yellow-deep);
    color: #111111;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.proud-media {
    position: absolute;
    top: 60px;
    right: 0;
    width: 52%;
    margin: 0;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 81px;
    height: 81px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    color: #ffffff;
    font-size: 24px;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.hero-products {
    padding: 0px 0 16px;
    background: #ffffff;
    text-align: center;
}

.hero-products-title {
    position: relative;
    z-index: 2;
    margin: 0 auto -30px;
    color: #111111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 4vw, 35px);
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 4px;
    top: 85px;
    padding-right: 85px;
}
.hero-products-title span {
        display: inline-block;
    margin-left: 125px;
}
.hero-slider {
    position: relative;
    width: min(1100px, calc(100% - 48px));
    margin: 0 auto;
    overflow: hidden;
}

.hero-slide {
    display: none;
}

.hero-slide.is-active {
    display: block;
}

.hero-slide img {
    width: 100%;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 16px;
}

.slider-dots button {
    width: 20px;
    height: 3px;
    padding: 0;
    border: 0;
    background: #111111;
    opacity: 0.35;
    cursor: pointer;
}

.slider-dots button.is-active {
    opacity: 1;
}

.stats-section {
    padding: 210px 0 14px 40px;
    margin-top: -160px;
    background: var(--soft-gray);
    margin-left: 0px;
}

.stats-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(36px, 7vw, 45px);
    width: min(700px, calc(100% - 62px));
    min-height: 122px;
    margin: 0 auto;
}

.stats-wrap article {
   text-align: center;
    text-transform: uppercase;
    border-right: 2px solid black;
    max-height: 65px;
    padding-right: 30px;
}

.stats-wrap strong {
    display: block;
    font-size: clamp(26px, 4vw, 42px);
    /*font-weight: 900;*/
    line-height: 0.96;
    letter-spacing: 1px;
}

.stats-wrap span {
    display: block;
    margin-top: 5px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.46;
    letter-spacing: 3px;
}

.corner {
    position: absolute;
    top: -6px;
    width: 85px;
    height: 140px;
    border-color: var(--yellow-deep) #ffe500;
    border-style: solid;
}

.corner-left {
    left: -50px;
    border-width: 7px 0 7px 7px;
}

.corner-right {
    right: -20px;
    border-width: 7px 7px 7px 0;
}
.custom-article{
    border:none!important;
}

.values-section {
    padding: 12px 0 0px;
    background: var(--soft-gray);
}

.values-section h2 {
    width: 230px;
    margin: 0 auto 40px;
    padding: 12px 20px;
    background: #090909;
    color: var(--yellow-deep);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: min(1000px, calc(100% - 48px));
    margin: 0 auto;
    padding-bottom: 22px;
    border-bottom: 2px solid #000000;
} 

.values-grid article {
    min-height: 170px;
    padding: 18px 14px;
    background: var(--yellow-deep);
    text-align: center;
}

.values-grid img {
    width: 50px;
    height: 50px;
    margin: 0 auto 8px;
    object-fit: contain;
}

.values-grid h3 {
    margin: 10px 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.02;
    text-transform: uppercase;
    height:35px;
}

.values-grid p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

.products-section {
    padding: 42px 0 74px;
    background: #ffffff;
}

.products-intro {
    position: relative;
    display: grid;
    grid-template-columns: 44% 56%;
    align-items: end;
    width: min(1000px, calc(100% - 48px));
    min-height: 250px;
    margin: 0 auto 36px;
    background: #FDE514;
}

.products-intro img {
    align-self: end;
    width: 100%;
}

.products-intro div {
    align-self: center !important;
    padding: 90px 42px 34px 24px;
}

.products-intro h2 {
    width: 350px;
    margin: 0px 50px 22px;
    padding: 12px 18px;
    background: var(--purple);
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

.products-intro p {
    /*max-width: 440px;*/
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: min(1000px, calc(100% - 48px));
    margin: 0 auto;
}
 
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 190px;
    padding: 0px 12px 30px;
    background:#e5e5e5;
    text-align: center;
}

.product-image {
    display: grid;
    place-items: center;
    width: 100%;
    height: 142px;
}

.product-image img {
    max-height: 136px;
    object-fit: contain;
}

.product-card h3 {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.product-card a {
    position: absolute;
    bottom: -12px;
    left: 50%;
    min-width: 168px;
    padding: 10px 14px;
    background: var(--yellow-deep);
    color: #111111;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    transform: translateX(-50%);
}

.cta-banner {
    background: var(--yellow-deep);
}

.cta-banner img {
    width: 100%;
}

.site-footer {
    background: #ffffff;
}

.footer-brand-strip {
    padding: 30px 0 26px;
    background: var(--yellow-deep);
}

.footer-brand-inner {
    display: grid;
    grid-template-columns: 300px 1fr;
    align-items: center;
    column-gap: 100px;
    width: min(800px, calc(100% - 48px));
    margin: 0 auto;
}

.footer-brand-inner img {
    width: 300px;
    margin:auto;
}

.footer-brand-inner strong {
    color: #244a88;
    font-family: "Noto Sans Devanagari", Arial, sans-serif;
    font-size: clamp(28px, 5vw, 60px);
    /*line-height: 1;*/
}

.footer-social {
    display: flex;
    gap: 8px;
    grid-column: 2;
    justify-content:center;
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #111111;
    color: var(--yellow-deep);
    font-size: 14px;
}

.footer-main{
    gap: 60px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 2.45fr 1.3fr;
    width: min(100rem, calc(100% - 48px));
    margin: 0 auto;
    padding: 34px 10%;
    margin-top: 40px;
}

.footer-column + .footer-column {
    border-left: 1.5px solid #111111;
    padding-left: 80px;
}

.footer-company img {
    width: 225px;
    margin-left: 8px;
    margin-top: -25px;
}

.footer-contact p {
    margin: 0 0 9px;
    font-size: 14px;
    line-height: 1.4;
}

.footer-contact i {
    width: 18px;
}

.footer-links h3 {
    display: inline-block;
    margin: 0 0 12px;
    padding: 8px 20px;
    background: #9a9a9a;
    color: #ffe500;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    left: -21px;
}

.footer-links a {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(920px, calc(100% - 48px));
    margin: 0 160px;
    padding: 20px 0 28px;
}

.footer-bottom p {
    margin: 0;
    font-size: 13px;
}

.back-top {
    min-width: 150px;
    padding: 12px 18px;
    background: #090909;
    color: white;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    margin-right: 20rem;
}

[data-atoot-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-atoot-animate].is-visible {
    opacity: 1;
    transform: none;
}

.custom-values-grid{
    broder-bottom:2px solid #111 !important;
}


/*=========================================
   GLOBAL MASTER RESPONSIVE CSS
   (Header, Drawer, Hero, Products, Footer)
=========================================*/

/* ---------- 1024px (Tablets / Laptops) ---------- */
@media screen and (max-width: 1024px) {
    .proud-copy { width: 70%; padding: 30px; }
    .proud-media { width: 45%; }
    
    .values-grid, 
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    
    .footer-brand-inner { column-gap: 40px; }
    .footer-main { gap: 30px; padding: 30px 20px; }
    .footer-bottom { margin: 0 auto; }
    .back-top { margin-right: 0; }
}

/* ---------- 768px (Tablets / IPads) ---------- */
@media screen and (max-width: 768px) {
    /* ----- HEADER & DRAWER (New Fixes) ----- */
    .header-inner { width: calc(100% - 28px); }
    .main-nav, .call-button { display: none; }
    
    .menu-toggle { 
        display: block !important; 
        position: relative; 
        z-index: 1000 !important; 
    }
    
    .mobile-drawer {
        position: fixed;
        top: 0;
        right: -350px; 
        z-index: 9999 !important; 
        display: block !important;
        width: 290px;
        height: 100vh;
        padding: 30px;
        background: #FDE514;
        transition: right 0.3s ease;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    }
    .drawer-open .mobile-drawer { right: 0 !important; }
    
    .drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 9998 !important; 
        display: block !important;
        background: rgba(0, 0, 0, 0);
        visibility: hidden;
        pointer-events: none;
        transition: background 0.3s ease, visibility 0.3s;
    }
    .drawer-open .drawer-overlay {
        visibility: visible;
        background: rgba(0, 0, 0, 0.6) !important;
        pointer-events: auto;
    }
    
    .drawer-close {
        position: absolute;
        top: 12px;
        right: 18px;
        font-size: 34px;
        z-index: 10000;
    }
    .drawer-logo { width: 120px; margin-bottom: 28px; }
    .drawer-nav a, .drawer-phone {
        display: block;
        padding: 13px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        font-size: 15px;
        font-weight: 900;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    
    .product-card a {
        min-width: 150px;
        padding: 9px 12px;
    }

    /* ----- PROUD SECTION ----- */
    .proud-wrap {
        display: flex; 
        flex-direction: column; 
        gap: 30px; 
        height: auto; 
    }
    .proud-copy, .proud-media {
        position: relative;
        top: auto; 
        right: auto; 
        width: 100%; 
        min-height: auto; 
    }
    
    .proud-copy p { 
        width: 100%; 
    }
    
    .yellow-line {
        width: 100%; 
        max-width: 300px; 
    }


    /* ----- PRODUCTS INTRO ----- */
    .products-intro { 
        grid-template-columns: 1fr; 
    }
    
    .products-intro div {
        padding: 30px 20px; 
    }
    
    .products-intro h2 {
        width: 100%; 
        margin: 0 auto 20px; 
    }
    
    
    .hero-products-title {
        top: -5px;
        padding: 20px 20px;
        text-align: center;
        font-size: 30px;
    }
    
    .hero-products-title span {
        margin-left: 0; 
        display: block; 
    }


    /* ----- STATS SECTION ----- */
    .stats-section {
        padding: 180px 0 30px; 
        margin-top: -120px;
    }
    
    
    /* ----- FOOTER ----- */
    .footer-brand-inner, .footer-main {
        grid-template-columns: 1fr; 
        text-align: center; 
    }
    
    .footer-brand-inner img, 
    .footer-company img {
        margin: 0 auto 20px; 
    }
    
    .footer-social {
        justify-content: center; 
    }
    
    .footer-column .footer-column {
        border-left: 0; 
        padding-left: 0; 
        border-top: 1px solid #ddd;
        padding-top: 30px; 
    }
    
    .footer-links h3 { left: 0; }
    
        .footer-column + .footer-column {
    border-bottom: 1.5px solid #111111;
     border-left: none;
    padding-left: 0px;
}
}







/* ---------- 640px (Large Phones) ---------- */
@media screen and (max-width: 640px) {
    .leading-strip h1 {
    letter-spacing: 2px; 
    }
    
    .stats-wrap { 
    gap: 30px; 
    }
    
}

/* ---------- 576px ---------- */
@media screen and (max-width: 576px) {
      .proud-copy h2 {
        font-size: 16px; 
        margin: 0px 0px 0px 0px;
    }
    
    .brand-logo img {
        width: 85px; 
    }
    
    .values-grid {
        grid-template-columns: 1fr; 
    }
    
    .stats-wrap { 
        flex-direction: column; gap: 35px; 
    }
    
    .stats-wrap article { 
        border-right: none; 
        border-bottom: 2px solid #000; 
        padding-right: 0; padding-bottom: 20px; 
        width: 100%; 
    }
    
    .stats-wrap article:last-child { 
        border-bottom: none; 
    }
    
    .corner-left {
        left: -20px; 
    }
    
    .corner-right {
        right: -20px; 
    }
    
    .corner { 
        height: calc(100% - 8px);
        }
    
    .footer-bottom { 
        flex-direction: column;
        gap: 20px; 
        text-align: center; 
        
    }
    
    .back-top { 
        margin: 0 auto; 
    }
    

.stats-wrap span {
    font-size: 11px;
}

.stats-wrap strong {
    font-size: clamp(15px, 4vw, 42px);
}

.stats-section {
    margin-left: 0;
    }
    
    .footer-column + .footer-column {
    border-bottom: 1.5px solid #111111;
     border-left: none;
    padding-left: 0px;
}
}


/* ---------- 768px (Medium Phones) ---------- */
@media screen and (max-width: 768px) {
        .proud-copy h2 {
        font-size: 16px; 
        margin: 0px 0px 0px 0px;
    }
    
        .play-button {
    width: 108px;
    height: 108px;
}

.stats-section {
    margin-left: 0;
    }
}

/* ---------- 480px (Medium Phones) ---------- */
@media screen and (max-width: 480px) {
    .proud-copy h2 {
        font-size: 16px; 
        margin: 0px 0px 0px 0px;
    }
    .product-grid { 
        grid-template-columns: 1fr; width: 90%;
        }
    .product-card {
        padding: 15px 15px 40px; 
    }
    
    .play-button {
    width: 58px;
    height: 58px;
}

    .footer-column + .footer-column {
    border-left: none;
    padding-left: 0px;
}
 
}

/* ---------- 425px ---------- */
@media screen and (max-width: 425px) {
    .leading-strip h1 { 
    font-size: 18px; 
    line-height: 25px;
    padding: 20px 20px 20px;
    background: #fffffc;
    text-align: center;
    }
    
    .footer-brand-inner strong { 
        font-size: 26px; 
    }
    
     .hero-products-title {
        top: -3px;
        padding: 21px 30px;
        text-align: center;
        font-size: 30px;
     }
     
       .product-card a {
        min-width: 140px;
        font-size: 11px;
        padding: 8px 10px;
        bottom: -10px; 
    }
.play-button {
    width: 50px;
    height: 50px;
}

    .footer-column + .footer-column {
    border-left: none;
    padding-left: 0px;
}
}

/* ---------- 375px (Small Phones) ---------- */
@media screen and (max-width: 375px) {
    .proud-copy { 
    padding: 20px 15px; 
    }
    .products-intro h2 {
    font-size: 16px;
    }
      
    .hero-products-title {
        top: -2px;
        padding: 10px 20px;
        text-align: center;
        font-size: 22px;
    }
    
   .leading-strip {
    padding: 2px 20px 2px;
    background: #fffffc;
    text-align: center;
}

.hero-section img {
    width: 100%;
    padding-top: 70px;
}
.site-header {
    background-color: #fde514;
    padding: 0px 0;
}

  .product-card a {
        min-width: 220px;
        padding: 7px 8px;
        font-size: 11px;
    }
    .play-button {
    width: 50px;
    height: 50px;
}

    .footer-column + .footer-column {
    border-left: none;
    padding-left: 0px;
}
    
 
}

/* ---------- 320px (Ultra Small Phones) ---------- */
@media screen and (max-width: 320px) {
    .brand-logo img { 
    width: 80px; 
    }
    .leading-strip h1 {
    font-size: 18px; 
    letter-spacing: 1px;
    }
    .footer-company img {
    width: 180px; 
    }
       .hero-products-title {
        top: -12px;
        padding: 18px 0px;
        text-align: center;
        font-size: 17px;
    }
    
    .leading-strip {
    padding: 20px 20px 20px;
    background: #fffffc;
    text-align: center;
}

.hero-section img {
    width: 100%;
    padding-top: 70px;
}
.site-header {
    background-color: #fde514;
    padding: 0px 0;
}

 .product-card a {
        min-width: 100px;
        width: 90%; 
        padding: 6px 5px;
        font-size: 10px;
        white-space: nowrap; 
    }
    
.play-button {
    width: 40px;
    height: 40px;
}

    .footer-column + .footer-column {
    border-left: none;
    padding-left: 0px;
}
}




/*===========================About us css=============================*/

        /* HERO */
.about-hero img{
    width: 100%;
    display: block;
}
.about-hero{
    margin: 86px 0px 0px;
}

/* MAIN WRAPPER */
.about-wrapper{
    background: #FEE614;
    padding: 60px;
}

/* CONTAINER */
.about-container{
   width: min(1040px, calc(100% - 40px));
    margin: auto;
    background: #efefef;
    padding: 70px 30px 60px;
    position: relative;
}

/* ABOUT LABEL */
.about-label{
    position: absolute;
    top: 0;
    left: 50px;
    width: 140px;
    height: 40px;
    background: #8f8f8f;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
    /*min-height: 190px;*/
    padding: 0px 10px;
}

/* ROW - col-12 */
.about-row{
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    /*padding: 10px 0;*/
    /*align-items: start;*/
}

/* col-8 (left side - 2 rows inside) */
.about-left-wrap{
    display: grid;
    grid-template-rows: auto auto;
    gap: 0;
}

/* col-8 ke andar row */
.about-left-wrap .row-item{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    padding: 10px 0;
    /*border-bottom: 1px solid #cfcfcf;*/
    align-items: stretch;
}

.about-left-wrap .row-item:last-child{
    border-bottom: none;
}

/* MISSION row - full width, no border */
.mission-row{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    padding: 10px 0;
    align-items: stretch;
}

.mission-row .about-left{
    border-right: 1.5px solid #010101;
}

.mission-row .about-content{
    justify-content: center;
}

/* LEFT SIDE - Heading */
.about-left{
    border-right: 1.5px solid #010101;
    padding: 10px 25px 10px 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: auto;
}

.about-left h2{
    font-size: 22px;
    font-weight: 600;
    color: #000000;
    line-height: 35px;
    text-align: center;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.about-left span {
    font-size: 12px;
    /*color: #d72828;*/
    font-weight: 600;
    line-height: 1.5;
    display: inline-block;
    position: relative;
    padding-bottom: 8px;
    border-bottom: none;
}

.about-left span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: black;
}

/* CONTENT */
.about-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-content p{
    font-size: 12px;
    line-height: 18px;
    color: #111;
    margin-bottom: 5px;
}

.about-content p:last-child{
    margin-bottom: 0;
}

/* RIGHT COLUMN - col-4 (Image full) */
.about-image-box{
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}

.about-image-box img{
    width: 100%;
    display: block;
    flex: 1;
    object-fit: cover;
}

.about-caption{
    background: #111;
    color: #fff;
    padding: 35px 30px;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    line-height: 1.6;
}

.caption-line{
    width: 50px;
    height: 3px;
    background: #ffffff;
    margin-top: 12px;
}

/* VALUES SECTION */
/* VALUES SECTION */
.values-section {
    margin-top: 0px;
}

/* TITLE */
.section-title {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 60px;
}

.section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
    z-index: 0;
}

.section-title span {
    position: relative;
    background: #111;
    color: #f3c500;
    padding: 14px 180px;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: 1;
    display: inline-block;
}

/* GRID */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 920px;
    margin: 0 auto;
}

/* CARD */
.value-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* TOP BOX */
.value-top {
    background: #FEE614;
    height: 110px;
    padding: 20px 15px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.value-top h3 {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: #000;
    margin: 0;
}

/* IMAGE */
.value-image {
    position: relative;
    z-index: 2;
    margin: -80px 0 -80px;
}

.value-image img {
    width: 180px !important;
    height: 180px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* BOTTOM BOX */
.value-bottom {
    background: #FEE614;
    height: 200px;
    padding: 70px 15px 20px;
    display: flex;
    align-items: flex-start;
}

.value-bottom p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #000;
    text-align: left;
}



/* =========================================
   TEAM SECTION (DESKTOP)
========================================= */
.team-section {
    position: relative;
    background: #ffffff;
    /*padding-bottom: 80px;*/
    margin-top: -40px;
}

/* The Gray Title Box */
.team-title {
   position: absolute;
    z-index: 7;
    background: #8f8f8f;
    color: #ffffff;
    left: 34%;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    width: min(380px, 90%);
    margin: 0 auto;
    padding: 18px 20px;
    margin-top: -60px;
}

/* The Yellow Band */
.team-content {
    position: relative;
    z-index: 1;
    background: #FEE614; 
    padding: 70px 20px 60px;
    margin-top: -30px; 
    text-align: center;
}

.team-content p {
    max-width: 750px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.9;
    font-weight: 500;
    color: #111;
    text-align: justify;
}

/* The Image and Yellow Frame Container */
.team-illustration {
    position: relative;
    /*z-index: 2;*/
    max-width: 850px;
    margin: -40px auto 0;  
    padding: 40px 50px 20px; 
}

/* The Yellow Frame */
.team-illustration::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    bottom: 0;
    border: 3px solid #FEE614;
    z-index: -1;
}

.team-illustration img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}


/* =========================================
   TEAM SECTION (RESPONSIVE)
========================================= */
@media screen and (max-width: 1024px) {
    .team-illustration {
        max-width: 90%;
        padding: 40px 40px 20px;
    }
}

@media screen and (max-width: 768px) {
    .team-section {
        margin-top: -25px;
        padding-bottom: 10px;
    }
    
    .team-title {
        font-size: 16px;
        padding: 15px;
        width: min(320px, 90%);
    }
    
    .team-content {
        padding: 60px 15px 40px;
        margin-top: -25px;
    }
    
    .team-content p {
        font-size: 12px;
        line-height: 1.7;
        text-align: center; 
        text-align-last: center;
    }
    
    .team-illustration {
        margin: -25px auto 0;
        padding: 25px 25px 15px;
        max-width: 100%;
    }
    
    .team-illustration::before {
        left: 10px;
        right: 10px;
    }
}

@media screen and (max-width: 480px) {
    .team-title {
           font-size: 14px;
        letter-spacing: 1px;
        position: absolute;
        z-index: 7;
        background: #8f8f8f;
        color: #ffffff;
        left: 5%;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 2px;
        text-transform: uppercase;
        width: min(380px, 90%);
        margin: 0 auto;
        padding: 5px;
        margin-top: -35px;
    }
    
    .team-content {
        padding: 50px 15px 30px;
    }
    
    .team-illustration {
        padding: 20px 15px 10px;
    }
    
    .team-illustration::before {
        left: 5px;
        right: 5px;
        border-width: 2px;
    }
}

/*=========================================
   ABOUT US SECTION (RESPONSIVE)
=========================================*/

/* ---------- 1024px (Tablets / Laptops) ---------- */
@media screen and (max-width: 1024px) {
    .about-row {
        grid-template-columns: 1fr 300px;
    }
    .about-left-wrap .row-item,
    .mission-row {
        grid-template-columns: 200px 1fr;
    }
    .section-title span {
        padding: 14px 100px;
    }
}

/* ---------- 768px (Tablets / IPads) ---------- */
@media screen and (max-width: 768px) {
    .about-container {
        padding: 60px 20px 55px;
    }
 
    .about-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-left-wrap .row-item,
    .mission-row {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center; ा */
    }
  
    .about-left,
    .mission-row .about-left {
        border-right: none;
        border-bottom: 1.5px solid #010101;
        padding: 0 0 15px 0;
    }
    
    .about-image-box {
        grid-row: auto;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .section-title span {
        padding: 12px 60px;
        font-size: 16px;
    }
}

/* ---------- 640px (Large Phones) ---------- */
@media screen and (max-width: 640px) {
    .about-caption {
        padding: 25px 20px;
        font-size: 16px;
    }
    .about-left h2 {
        font-size: 20px;
        line-height: 30px;
    }
}

/* ---------- 576px ---------- */
@media screen and (max-width: 576px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
    .value-top {
        height: 120px;
    }
    .value-bottom {
        height: auto;
        padding: 100px 15px 25px;
    }
    .section-title span {
        padding: 12px 40px;
    }
    
     .about-left, .mission-row .about-left {
        padding: 8px 0 15px 0px;
    }
}

/* ---------- 480px (Medium Phones) ---------- */
@media screen and (max-width: 480px) {
    .about-label {
        left: 20px;
        width: 120px;
        height: 35px;
        font-size: 12px;
    }
    .about-container {
        padding: 55px 15px 52px;
    }
    .about-content p {
        font-size: 13px; 
    }
}

/* ---------- 425px ---------- */
@media screen and (max-width: 425px) {
    .section-title span {
        padding: 10px 25px;
        font-size: 14px;
        letter-spacing: 2px;
    }
    .about-caption {
        padding: 20px 15px;
        font-size: 14px;
    }
    
    .about-left, .mission-row .about-left {
        padding: 8px 0 15px 0px;
    }
    
    team-section {
        margin-top: 18px;
        padding-bottom: 50px;
    }
}

/* ---------- 375px (Small Phones) ---------- */
@media screen and (max-width: 375px) {
    .about-left h2 {
        font-size: 18px;
        line-height: 26px;
    }
    .about-content p {
        font-size: 12px;
    }
    .section-title span {
        font-size: 13px;
        padding: 10px 15px;
    }
    
     .about-left, .mission-row .about-left {
        padding: 8px 0 15px 0px;
    }
}

/* ---------- 320px (Ultra Small Phones) ---------- */
@media screen and (max-width: 320px) {
    .about-left h2 {
        font-size: 16px;
        line-height: 24px;
    }
    .about-caption {
        font-size: 13px;
        line-height: 1.4;
    }
    .value-image img {
        width: 150px !important;
        height: 150px !important;
    }
    
    .about-left, .mission-row .about-left {
        padding: 15px 0 14px 0px;
    }
}
 
 
 
 /*============Products css start here==================== */

/*=========================================
   DESKTOP STYLES
=========================================*/
.scrubber-section {
    background: #ffffff;
    padding: 20px 0 40px;
}

.scrubber-box {
    max-width: 1100px;
    margin: 0 auto;
    background: #F1F1F1;
    position: relative;
    overflow: hidden;
    padding: 170px 45px 40px;
}

.scrubber-logo {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.scrubber-logo img {
    width: 350px;
    display: block;
}

.scrubber-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding:0 25px;
}

.scrubber-left {
    width: 44%;
    padding-top: 70px;
    position: relative;
    z-index: 5;
}

.scrubber-left h2 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 5px;
    color: #111;
}

.line {
    width: 35px;
    height: 3px;
    background: #000000;
    margin-bottom: 15px;
}

.scrubber-left p {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 10px;
}

.scrubber-left h4 {
    font-size: 17px;
    font-style: italic;
    margin-bottom: 20px;
    font-weight: 600;
}

.product-table {
    width: 100%;
    border-collapse: collapse;
}

.product-table td {
    border: 1px solid #bcbcbc;
    padding: 10px 12px;
    font-size: 16px;
    color: #000000;
}

.product-table .head td {
    background: #ed1c24;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-color: #ed1c24;
}

.scrubber-left h2 span{
    color: #ed1c24;
}

.export-logo {
    position: relative;
}

.export-logo img {
    width: 200px;
    position: absolute;
    right: -103px;
    top: -135px;
}

.scrubber-right {
    width: 56%;
    position: relative;
    height: 560px;
    top: 50px;
}

.scrubber-right img {
    position: absolute;
    top: 30px;
    right: -70px;
    width: 550px;
    max-width: none;
    display: block;
}

.scrubber-bottom {
    display: flex;
    gap: 20px;
    margin-top: 35px;
}

.scrubber-card {
    flex: 1;
    background: #ffffff;
    height: 250px;
    position: relative;
    overflow: hidden;
}

.card-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.measure-line {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.measure-line::before {
    content: "";
    display: block;
    width: 3px;
    height: 120px;
    background: #d8c600;
}

.measure-line span {
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #000000;
}

.center-box {
    background: #ffffff;
    padding: 15px;
}

.center-box img {
    width: 140px;
    display: block;
}

.card-3 {
    padding-top: 75px;
}

.rust-tag {
    position: absolute;
    top: 0;
    left: 40px;
    background: #f1e600;
    padding: 12px 28px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
}

.compare-box {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.compare-item {
    text-align: center;
}

.img-box {
    width: 95px;
    height: 95px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-box img {
    width: 100px;
}

.compare-item h5 {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.custom-export-logo{
    right:-120px;
}

.product-btn{
    width:230px;
    margin:0px auto 30px;
    background:#ff1f1f;
    color:#fff;
    text-align:center;
    padding:12px 0;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    display:block;
}

/*=========================================
   991px (Tablets)
=========================================*/
@media(max-width:991px){
    .scrubber-content {
        flex-direction: column; 
        padding: 0 15px;
    }

    .scrubber-left {
        width: 100%;
        padding-top: 20px;
    }

    .scrubber-right {
        width: 100%;
        height: auto;
        top: 0;
        margin-top: 40px;
        display: flex;
        justify-content: center;
    }

    .scrubber-right img {
        position: static;  
        width: 80%;
        max-width: 400px;
    }

    .export-logo img {
        right: 0;
        top: -60px;
        width: 120px;
    }

    .custom-export-logo {
        right: 0;
    }

    .scrubber-bottom {
        flex-direction: column; 
        gap: 30px;
    }
}

/*=========================================
   768px (Large Mobile / Small Tablet)
=========================================*/
@media(max-width:768px){
    .scrubber-box {
        padding: 120px 20px 40px;
    }

    .scrubber-logo img {
        width: 200px;
    }

    .scrubber-left h2 {
        font-size: 28px;
    }

    .product-table td, 
    .product-table .head td {
        font-size: 14px;
        padding: 8px 10px;
    }
    
    .card-3 {
        padding-top: 50px;
    }
    
}

/*=========================================
   576px (Landscape Mobile)
=========================================*/
@media(max-width:576px){
    .scrubber-box {
        padding: 100px 15px 30px;
    }

    .scrubber-logo img {
        width: 150px;
    }

    .scrubber-left h2 {
        font-size: 24px;
    }

    .scrubber-left p {
        font-size: 15px;
    }

    .compare-item h5 {
        font-size: 13px;
    }

    .img-box {
        width: 80px;
        height: 80px;
    }
    
    .img-box img {
        width: 80px;
    }
    
    .rust-tag {
        left: 20px;
    }
    
}

/*=========================================
   425px (Large Mobile)
=========================================*/
@media(max-width:425px){
    .scrubber-logo img {
        width: 120px;
    }

    .scrubber-box {
        padding: 90px 15px 30px;
    }

    .export-logo img {
        width: 100px;
        top: -50px;
    }
    
    .product-btn {
        width: 100%;
        max-width: 230px;
        font-size: 16px;
        margin-top:10px;
    }
    
    .scrubber-right img {
        width: 100%;
    }
}

/*=========================================
   400px (Medium Mobile)
=========================================*/
@media(max-width:400px){
    .scrubber-left h2 {
        font-size: 22px;
    }

    .product-table td, 
    .product-table .head td {
        font-size: 13px;
        padding: 6px 8px;
    }
}

/*=========================================
   375px (Standard Mobile)
=========================================*/
@media(max-width:375px){
    .scrubber-logo img {
        width: 160px;
    }
    
    .scrubber-left p {
        font-size: 14px;
    }
    
    .measure-line::before {
        height: 100px;
    }
}

/*=========================================
   320px (Small Mobile)
=========================================*/
@media(max-width:320px){
    .scrubber-logo img {
        width: 115px;
    }

    .scrubber-left h2 {
        font-size: 20px;
    }

    .product-table td, 
    .product-table .head td {
        font-size: 12px;
        padding: 5px;
    }
    
    .export-logo img {
        width: 80px;
        top: -40px;
    }

    .compare-item h5 {
        font-size: 11px;
    }

    .img-box {
        width: 60px;
        height: 60px;
    }

    .img-box img {
        width: 60px;
    }
  
}


/*=========================================
   SCRUBBER BOTTOM & BUTTON RESPONSIVE CSS
=========================================*/

/* ---------- 1024px (Tablets / Laptops) ---------- */
@media screen and (max-width: 1024px) {
    .scrubber-bottom {
        gap: 15px;
    }
    .scrubber-card {
        height: 220px; 
    }
    .rust-tag {
        left: 20px;
        padding: 10px 20px;
    }
    .compare-box {
        gap: 15px;
    }
    
    .site-header {
    background-color: #fde514;
    padding: 0px 0;
    /* border-bottom: 1px solid #ddd; */
}
}

/* ---------- 768px (Tablets / IPads) ---------- */
@media screen and (max-width: 768px) {
    .scrubber-bottom {
        flex-direction: column;
        align-items: center; /
        gap: 30px;
    }
    
    .scrubber-card {
        width: 100%;
        max-width: 450px;
        height: auto;
        min-height: 250px;
    }

    .card-3 {
        padding-bottom: 30px; 
    }


    .product-btn {
        width: 210px;
        font-size: 14px;
        padding: 10px 0;
    }
    .site-header {
    background-color: #fde514;
    padding: 0px 0;
    /* border-bottom: 1px solid #ddd; */
}
}

/* ---------- 640px ---------- */
@media screen and (max-width: 640px) {
    .scrubber-bottom {
        gap: 25px;
    }
}

/* ---------- 576px ---------- */
@media screen and (max-width: 576px) {
    .rust-tag {
        left: 15px;
        padding: 8px 15px;
        font-size: 11px;
    }
    
    .product-btn {
        width: 180px;
        font-size: 13px;
        letter-spacing: 1px;
    }
    
    .site-header {
    background-color: #fde514;
    padding: 0px 0;
    /* border-bottom: 1px solid #ddd; */
}
}

/* ---------- 480px (Medium Phones) ---------- */
@media screen and (max-width: 480px) {
    .compare-box {
        gap: 15px;
    }
    .img-box {
        width: 80px;
        height: 80px;
    }
    .img-box img {
        width: 85px;
    }
    .compare-item h5 {
        font-size: 13px;
    }
    
    .site-header {
    background-color: #fde514;
    padding: 0px 0;
    /* border-bottom: 1px solid #ddd; */
}
}

/* ---------- 425px ---------- */
@media screen and (max-width: 425px) {
    .measure-line {
        left: 30px; 
    }
    .center-box img {
        width: 120px;
    }

    .product-btn {
        width: 160px;
        font-size: 11px;
        padding: 9px 0;
    }
    
    .site-header {
    background-color: #fde514;
    padding: 0px 0;
    /* border-bottom: 1px solid #ddd; */
}
}

/* ---------- 375px (Small Phones) ---------- */
@media screen and (max-width: 375px) {
    .compare-box {
        gap: 10px;
    }
    .img-box {
        width: 70px;
        height: 70px;
    }
    .img-box img {
        width: 75px;
    }
    .compare-item h5 {
        font-size: 12px;
    }
    

    .product-btn {
        width: 150px;
        font-size: 13px;
    }
    
    .site-header {
    background-color: #fde514;
    padding: 0px 0 !important; 
    /* border-bottom: 1px solid #ddd; */
}
}

/* ---------- 320px (Ultra Small Phones) ---------- */
@media screen and (max-width: 320px) {
    .scrubber-card {
        min-height: 220px;
    }
    
    .rust-tag {
        left: 10px;
        font-size: 10px;
    }

    .product-btn {
        width: 150px;
        font-size: 11px;
        padding: 8px 0;
        letter-spacing: 1px;
    }
    
    .site-header {
    background-color: #fde514;
    padding: 0px 0;
    /* border-bottom: 1px solid #ddd; */
}
}

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

.broom-section {
    padding: 0;
}

.broom-box {
    max-width: 1000px;
    margin: 0 auto;
    background: #ddd;
}

.broom-logo {
    text-align: center;
}

.broom-logo img {
    width: 100%;
    display: block;
}

.broom-content {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.broom-left {
    flex: 1;
    padding: 30px;
    background: #ddd;
}

.broom-right {
    flex: 1;
    display: flex;
    align-items: stretch;
}

.broom-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.broom-bottom {
    display: flex;
    gap: 0;
    background: #ddd;
}

.broom-card {
    flex: 1;
    padding: 20px;
}

.broom-table {
    border-collapse: collapse;
    width: 100%;
}

.broom-table td {
    padding: 4px 10px 4px 0;
    font-size: 13px;
}

.broom-table .head td {
    font-weight: bold;
}

.line {
    width: 50px;
    height: 2px;
    background: #c00;
    margin: 10px 0;
}

.export-logo img {
    max-width: 220px;
}



/*-------------------------------------*/

.broom-section{
    max-width:1000px;
    margin: 0 auto;
    padding: 10px 0;

}

/* TOP CONTENT */

.broom-top{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:20px;
    padding:20px 30px 30px;
    background:#fff;
}

.steel-logo img{
    width:300px;
}

.broom-text{
    max-width:500px;
    font-size:16px;
    line-height:1.7;
    color:#222;
    font-weight:500;
}

/* BANNER */

.broom-banner{
    width:100%;
}

.broom-banner img{
    width:100%;
    display:block;
    padding: 0px 7px;
}

/* FEATURES */

.feature-title{
    display:flex;
    align-items:center;
    gap:20px;
    padding:20px 40px;
    background:#ffffff;
}

.feature-title span{
    font-size:22px;
    font-weight:700;
    letter-spacing:1px;
}

.feature-title:after{
    content:"";
    flex:1;
    height:3px;
    background:#999;
}
/* Product cards container */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Each card */
.product-card {
  text-align: center;
  margin-bottom: 20px;
}

/* Images inside cards */
.product-card img {
  width: 100%;
  max-width: 200px;   /* prevents overflow */
  height: auto;
  margin: 0 auto;
  display: block;
}


/*=========================================
   BROOM TOP & PRODUCT GRID RESPONSIVE
=========================================*/

/* ---------- 1024px (Tablets / Laptops) ---------- */
@media screen and (max-width: 1024px) {
    .steel-logo img {
        width: 250px;
    }
    .broom-text {
        font-size: 15px;
    }
    .feature-title {
        padding: 20px 30px;
    }
}

/* ---------- 768px (Tablets / IPads) ---------- */
@media screen and (max-width: 768px) {
    .broom-top {
        flex-direction: column;  
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    .steel-logo img {
        width: 200px;
    }
    .broom-text {
        max-width: 100%; 
        font-size: 14px;
    }
    .feature-title span {
        font-size: 20px; 
    }
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* ---------- 640px (Large Phones) ---------- */
@media screen and (max-width: 640px) {
    .broom-top {
        padding: 15px;
    }
    .feature-title span {
        font-size: 18px;
    }
    .product-grid {
        gap: 15px;
        padding: 15px;
    }
}

/* ---------- 576px ---------- */
@media screen and (max-width: 576px) {

    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    }
}

/* ---------- 480px (Medium Phones) ---------- */
@media screen and (max-width: 480px) {
    .feature-title {
        padding: 15px 20px;
    }
    .feature-title span {
        font-size: 16px;
    }
}

/* ---------- 425px ---------- */
@media screen and (max-width: 425px) {
    .steel-logo img {
        width: 160px;
    }
    .broom-text {
        font-size: 13px;
    }
    .product-card img {
        max-width: 150px; /* फोटो ओवरफ्लो ना हो */
    }
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* ---------- 375px (Small Phones) ---------- */
@media screen and (max-width: 375px) {
    .steel-logo img {
        width: 140px;
    }
    .broom-text {
        font-size: 12px;
    }
    .feature-title span {
        font-size: 14px;
    }
    .product-card img {
        max-width: 130px;
    }
    .product-grid {
        gap: 10px;
        padding: 10px;
    }
}

/* ---------- 320px (Ultra Small Phones) ---------- */
@media screen and (max-width: 320px) {
    .steel-logo img {
        width: 120px;
    }
    .broom-text {
        font-size: 11px;
    }
    .product-card img {
        max-width: 120px;
    }
    
    /* 320px स्क्रीन बहुत छोटी होती है, इसलिए एक लाइन में 1 ही कार्ड दिखाएँगे */
    .product-grid {
        grid-template-columns: 1fr; 
    }
}


/*=========================================
   FEATURE SECTION (ROW & COLUMN LAYOUT)
=========================================*/

/* Row */
.feature-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* स्क्रीन छोटी होने पर कार्ड्स को अपने आप नीचे कर देगा */
    justify-content: center;
    gap: 30px; /* कॉलम्स के बीच का गैप */
    margin-bottom: 30px; /* Row 1 और Row 2 के बीच की दूरी */
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.feature-row-bottom {
    margin-bottom: 0; /* आखिरी Row के नीचे कोई गैप नहीं */
}

/* Column (1 लाइन में 3 कार्ड्स) */
.feature-card {
    /* 33.33% का मतलब है 3 कॉलम (गैप को माइनस करके) */
    width: calc(33.333% - 20px); 
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-card img {
    width: 100%;
    max-width: 320px;
    display: block;
}

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

/* ---------- Tablets (1024px & 768px) ---------- */
@media screen and (max-width: 1024px) {
    .feature-card {
        /* टैबलेट पर 1 लाइन में 2 कार्ड्स कर देंगे */
        width: calc(50% - 20px); 
    }
}

/* ---------- Mobile Phones (640px & below) ---------- */
@media screen and (max-width: 640px) {
    .feature-row {
        gap: 20px;
        margin-bottom: 20px;
    }
    .feature-card {
        /* मोबाइल पर 1 लाइन में 1 ही कार्ड दिखेगा (Full Width Column) */
        width: 100%; 
        max-width: 380px; 
    }
}

/*=====================floor-wiper-steel-kingImage1,2,3======================*/

.rod-image {
    max-width: 1100px;
    margin: auto;
    padding: 0 7px; 
}

.rod-image img {
    width: 100%;
    height: auto;   
    display: block;
    margin-bottom: 30px;
    object-fit: cover; 
}

.custom-broom {
    padding: 20px 0 50px;
}



/*=====================Floor-WIPER CARDS======================*/
/*=========================================
   DESKTOP STYLES
=========================================*/
.broom-section {
    padding: 40px 0px 10px;
    background: #fff;
}

/* Cards Row */
.wiper-wrapper {
    display: flex; 
    justify-content: center; 
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap; 
}

/* Card */
.wiper-card {
    width: 30%;
    min-width: 280px; 
    background: #E5E5E5;
    text-align: center;
    position: relative;
    margin-bottom: 30px; 
}

/* Image */
.wiper-img img {
    width: 100%;
    height: 270px;   
    max-height: 350px; 
    object-fit: cover;
    display: block;
}

/* Title */
.wiper-card h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 10px; 
    margin-bottom: 35px;
    text-transform: uppercase;
}

/* Button */
.wiper-btn {
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 230px;
    height: 40px;
    background: #ffea00;
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    z-index: 2;
}

.category-product-content {
    width: 50%;
}


/*=========================================
   991px (Tablets)
=========================================*/
@media screen and (max-width: 991px) {
    .wiper-card {
        width: 45%; 
    }
    .category-product-content {
        width: 100%;
    }
    .broom-section {
        padding: 18px 0px 0px;
    }
    
    .wiper-img img {
    width: 100%;
    height: auto;   
}

}

/*=========================================
   768px (Large Mobile / Small Tablet)
=========================================*/
@media screen and (max-width: 768px) {
    .wiper-card {
        width: 47%; 
    }
    .wiper-card h3 {
        font-size: 16px;
    }
    .wiper-btn {
        width: 90%; 
        max-width: 230px; 
        font-size: 15px;
    }
    .wiper-img img {
    width: 100%;
    height: auto;   
}

.about-wrapper {
    background: #FEE614;
    padding: 0px;
}

}

/*=========================================
   576px (Landscape Mobile)
=========================================*/
@media screen and (max-width: 576px) {
    .wiper-wrapper {
        flex-direction: column; 
        align-items: center;  
    }
    .wiper-card {
        width: 100%; 
        max-width: 400px; 
    }
    
    .wiper-img img {
    width: 100%;
    height: auto;   
}

.about-hero {
    margin: 70px 0px 0px;
}

.about-wrapper {
    background: #FEE614;
    padding: 0px;
}
}

/*=========================================
   425px (Large Mobile)
=========================================*/
@media screen and (max-width: 425px) {
    .wiper-card {
        max-width: 350px;
    }
    .wiper-card h3 {
        font-size: 15px;
        margin-bottom: 30px;
    }
    .wiper-btn {
        height: 38px;
        font-size: 14px;
    }
    
    .wiper-img img {
    width: 100%;
    height: auto;   
}

.about-hero {
    margin: 70px 0px 0px;
}

.about-wrapper {
    background: #FEE614;
    padding: 0px;
}
}

/*=========================================
   400px (Medium Mobile)
=========================================*/
@media screen and (max-width: 400px) {
    .wiper-card {
        max-width: 320px;
    }
    
    .wiper-img img {
    width: 100%;
    height: auto;   
}

.about-hero {
    margin: 70px 0px 0px;
}

.about-wrapper {
    background: #FEE614;
    padding: 0px;
}
}

/*=========================================
   375px (Standard Mobile)
=========================================*/
@media screen and (max-width: 375px) {
    .wiper-card {
        max-width: 300px;
    }
    .wiper-card h3 {
        font-size: 14px;
    }
    .wiper-btn {
        height: 35px;
        font-size: 13px;
        bottom: -15px; 
    }
    
    .wiper-img img {
    width: 100%;
    height: auto;   
}

.about-wrapper {
    background: #FEE614;
    padding: 0px;
}

}

/*=========================================
   320px (Ultra Small Phones)
=========================================*/
@media screen and (max-width: 320px) {
    .wiper-card {
        max-width: 280px;
    }
    .wiper-card h3 {
        font-size: 13px;
    }
    .wiper-btn {
        width: 95%;
        font-size: 12px;
    }
    .about-hero img {
    margin-top: -15px;
}

    .wiper-img img {
    width: 100%;
    height: auto;   
}

.about-hero {
    margin: 70px 0px 0px;
}

.about-wrapper {
    background: #FEE614;
    padding: 0px;
}
}



/*========================Floor-Wiper-Steel-King===========================*/
.broom-color-section {
    padding: 20px 20px;
    width: 100%;
}

.broom-color-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
/* LEFT IMAGE */
.broom-color-left {
    width: 25% !important;
    display: flex !important;
    justify-content: flex-start !important;
}
.broom-color-left img {
    width: 100%;
    max-width: 200px;
    display: block;
}
/* CENTER TEXT */
.steelking-broom-color-content {
    width: 50% !important;
    padding: 0 40px !important;
    

    border-left: 1px solid #111 !important; 
    border-right: 1px solid #111 !important; 
    border-top: none !important;
    border-bottom: none !important;
}
.steelking-broom-color-content p {
    font-size: 17px;
    line-height: 1.6;
    color: #000;
    margin: 0;
    text-align: center; 
    font-weight: 500;
}
/* RIGHT IMAGE */
.broom-color-right {
    width: 25% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
.broom-color-right h4 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
    font-weight: 700;
}
.color-img {
    max-width: 120px;
    width: 100%;
}


.steelking-broom-color-content{
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
    margin: 0;
    text-align:center;
    font-weight: 500;
    letter-spacing: .3px;
    margin-right: 20px; 
    padding:12px;
    border-left: 1px solid black;
    border-right: 1px solid black; 

}
/* RIGHT */

.broom-color-right{
    width: 30%;
}

.broom-color-right h4{
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
    margin-left: 7px;
}


.floorwiper-champion-broom-color-right{
     width: 40%;
}

/* BOX */

.color-box{
    border: 3px solid #777;
    border-radius: 25px;
    padding: 12px 15px;
}

.color-item{
    display: flex;
    align-items: center;
    gap: 15px;
}

.color-item:first-child{
    margin-bottom: 15px;
}

.color-item img{
    width: 55px;
}

.color-line{
    width: 1px;
    height: 45px;
    background: #d5d5d5;
}

.color-item span{
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #333;
}

    .color-img {
        max-width: 270px;
        width: 100%;
    }
    
    
/*=========================================
   GOLD WIPER SECTION (DESKTOP)
=========================================*/
.gold-wiper-section {
    padding: 50px 20px;
    width: 100%;
}

.gold-wiper-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;  
    gap: 50px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* TEXT */
.gold-wiper-text {
    width: 55%;
}
.gold-wiper-text p {
    font-size: 17px;
    line-height: 1.6;
    color: #111;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* IMAGE */
.gold-wiper-image {
    width: 30%;
    /*display: flex;*/
    justify-content: center;
}
.gold-wiper-image img {
    width: 100%;
    max-width: 300px;
    display: block;
}


/*=========================================
   GOLD WIPER SECTION (RESPONSIVE)
=========================================*/

/* ---------- 1024px ---------- */
@media screen and (max-width: 1024px) {
    .gold-wiper-container {
        gap: 30px;
        max-width: 900px;
    }
}

/* ---------- 768px (Tablets / Mobile) ---------- */
@media screen and (max-width: 768px) {
    .gold-wiper-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .gold-wiper-text,
    .gold-wiper-image {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .gold-wiper-text p {
        text-align: center; 
    }
    
    .gold-wiper-image img {
        margin: 0 auto; 
    }
}

/* ---------- 640px ---------- */
@media screen and (max-width: 640px) {
    .gold-wiper-section {
        padding: 40px 15px;
    }
}

/* ---------- 576px ---------- */
@media screen and (max-width: 576px) {
    .gold-wiper-text p {
        font-size: 16px;
    }
}

/* ---------- 480px ---------- */
@media screen and (max-width: 480px) {
    .gold-wiper-section {
        padding: 30px 15px;
    }
    .gold-wiper-image img {
        max-width: 250px; 
    }
}

/* ---------- 425px ---------- */
@media screen and (max-width: 425px) {
    .gold-wiper-text p {
        font-size: 15px;
        line-height: 1.5;
    }
    .gold-wiper-image img {
        max-width: 220px;
    }
}

/* ---------- 375px ---------- */
@media screen and (max-width: 375px) {
    .gold-wiper-text p {
        font-size: 14px;
    }
    .gold-wiper-image img {
        max-width: 180px;
    }
}

/* ---------- 320px ---------- */
@media screen and (max-width: 320px) {
    .gold-wiper-text p {
        font-size: 13px;
    }
    .gold-wiper-image img {
        max-width: 150px;
    }
}

/*=========================================
   BROOM COLOR SECTION (RESPONSIVE)
=========================================*/
/* ---------- 1024px ---------- */
@media screen and (max-width:1024px) {
    .broom-color-top {
        gap: 15px !important;
    }
    .steelking-broom-color-content {
        padding: 10px 20px !important;
    }
}
/* ---------- 768px (Tablets / Mobile) ---------- */
@media screen and (max-width:768px) {
    .broom-color-top {
        flex-direction: column !important; 
        gap: 35px !important;
    }
    .broom-color-left,
    .steelking-broom-color-content,
    .broom-color-right {
        width: 100% !important;
        max-width: 450px !important;
        margin: 0 auto !important; 
    }
    .broom-color-left {
        justify-content: center !important;
    }

    .steelking-broom-color-content {
        padding: 20px 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #ddd !important;
        border-bottom: 1px solid #ddd !important;
    }
    .floorwiper-champion-broom-color-right {
        width: 100%;
        max-width: 450px;
    }
    
    .color-img {
        max-width: 330px;
        width: 100%;
    }
    
    .broom-color-right h4 {
    font-size: 21px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
    margin-left: 7px;
}
    
    .broom-color-left img {
    width: 100%;
    max-width: 265px;
    display: block;
}

.steelking-broom-color-content p {
    font-size: 20px;
    line-height: 1.6;
    color: #000;
    /* margin: 0; */
    text-align: center;
    font-weight: 500;
}

}


/* ---------- 640px ---------- */
@media screen and (max-width:640px) {
    .broom-color-section {
        padding: 0px 15px;
    }
}
/* ---------- 576px ---------- */
@media screen and (max-width:576px) {
    .steelking-broom-color-content p {
        font-size: 15px;
    }
    .color-item span {
        font-size: 16px;
    }
}
/* ---------- 480px ---------- */
@media screen and (max-width:480px) {
    .color-box {
        padding: 10px;
    }
    .color-item img {
        width: 45px;
    }
    
        
.color-img {
    max-width: 270px;
    width: 100%;
}


}
/* ---------- 425px ---------- */
@media screen and (max-width:425px) {
    .broom-color-left img {
        max-width: 180px;
    }
    .steelking-broom-color-content p {
        font-size: 14px;
    }
    
.color-img {
    max-width: 240px;
    width: 100%;
}


}

/* ---------- 375px ---------- */
@media screen and (max-width:375px) {
    .broom-color-left img {
        max-width: 160px;
    }
    .broom-color-right h4 {
        font-size: 12px;
    }
    .color-item span {
        font-size: 15px;
    }
    
    .color-img {
    max-width: 240px;
    width: 100%;
}


}
/* ---------- 320px ---------- */
@media screen and (max-width:320px) {
    .broom-color-left img {
        max-width: 140px;
    }
    .steelking-broom-color-content p {
        font-size: 13px;
    }
    .color-item span {
        font-size: 14px;
    }
    .color-item img {
        width: 40px;
    }
    
    .color-img {
    max-width: 220px;
    width: 100%;
}


}



/*==================Wet Mop Section Image and Content====================*/
.wet-mop-info-section {
    padding: 40px 20px;
    background: #fff;
}

.wet-mop-info-container {
    display: flex;
    align-items: center; 
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
    gap: 40px; 
}

/* Left Image Box */
.wet-mop-icon {
    flex: 1; /* Takes 1 equal part */
    display: flex;
    justify-content: center;
}

.wet-mop-icon img {
    max-width: 200px; 
    width: 100%;
    height: auto;
    display: block;
}

/* Center Text Box */
.wet-mop-text {
    flex: 1.5; 
}

.wet-mop-text p {
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    margin: 0;
    text-align: center;
}

/* Right Colors Box */
.wet-mop-colors {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wet-mop-colors h4 {
    font-size: 14px;
    color: #333;
    margin: 0 0 12px 0;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
}

.wet-mop-colors img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
}

/*=========================================
   991px (Tablets)
=========================================*/
@media (max-width: 991px) {
    .wet-mop-info-container {
        flex-direction: column; 
        gap: 40px;
    }
    
    .wet-mop-icon, .wet-mop-text, .wet-mop-colors {
        width: 100%;
        max-width: 650px;
    }
    
    .wet-mop-icon img, .wet-mop-colors img {
        max-width: 250px; 
    }
}

/*=========================================
   768px (Large Mobile / Small Tablet)
=========================================*/
@media (max-width: 768px) {
    .wet-mop-text p {
        font-size: 15px;
    }
}

/*=========================================
   576px (Landscape Mobile)
=========================================*/
@media (max-width: 576px) {
    .wet-mop-icon img, .wet-mop-colors img {
        max-width: 220px;
    }
}

/*=========================================
   425px (Large Mobile)
=========================================*/
@media (max-width: 425px) {
    .wet-mop-info-container {
        gap: 30px;
    }
    
    .wet-mop-text p {
        font-size: 14px;
    }
    
    .wet-mop-colors h4 {
        font-size: 13px;
    }
    
    .wet-mop-icon img, .wet-mop-colors img {
        max-width: 200px;
    }
}

/*=========================================
   400px (Medium Mobile)
=========================================*/
@media (max-width: 400px) {
    .wet-mop-info-container {
        padding: 0 10px;
    }
}

/*=========================================
   375px (Standard Mobile)
=========================================*/
@media (max-width: 375px) {
    .wet-mop-icon img, .wet-mop-colors img {
        max-width: 180px;
    }
}

/*=========================================
   320px (Small Mobile)
=========================================*/
@media (max-width: 320px) {
    .wet-mop-text p {
        font-size: 13px;
    }
    
    .wet-mop-icon img, .wet-mop-colors img {
        max-width: 150px;
    }
}






/*======================Broom-Jala-Steelking========================*/

.feature-highlight-section {
    padding: 40px 20px;
    background: #fff;
}
.feature-highlight-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px; 
}
/* LEFT ICON */
.feature-icon-box {
    flex: 0 0 auto;
}

.feature-icon-box img {
    max-width: 250px;
    height: auto;
    display: block;
    margin-left: 60px;
}

/* CENTER TEXT */
.feature-text-box {
    flex: 1;
    max-width: 650px;
}
.feature-text-box p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
}
/* RIGHT OPTIONS */
.feature-options-box {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right:100px;
}
.options-title {
    font-size: 12px;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: 600;
    text-align: center;
}
.options-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 20px;
    border: 2px solid #888;
    border-radius: 20px;
    background: #fff;
}
.option-card {
    display: flex;
    align-items: center;
    gap: 15px;
}
.option-card img {
    width: 35px;
    height: auto;
    object-fit: contain;
}
.option-divider {
    width: 1px;
    height: 35px;
    background-color: #ccc;
}
.option-label {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    text-align: center;
    min-width: 70px;
}

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

/*=========================================
   TABLET RESPONSIVE (Max Width: 768px)
=========================================*/
@media screen and (max-width: 768px) {
    .feature-highlight-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    

    .feature-icon-box img {
        margin-left: 0; 
        margin: 0 auto; 
    }
    
    .feature-options-box {
        margin-right: 0; 
    }
    .feature-text-box {
        max-width: 100%;
        padding: 0 15px;
    }
    
    .options-grid {
        flex-direction: row; 
        justify-content: center;
        gap: 30px;
    }
}
/*=========================================
   LARGE MOBILE (Max Width: 425px)
=========================================*/
@media screen and (max-width: 425px) {
    .feature-highlight-section {
        padding: 30px 10px;
    }
    .options-grid {
        flex-direction: column; 
        gap: 15px;
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
    
    .option-card {
        justify-content: center; 
    }
}
/*=========================================
   MEDIUM MOBILE (Max Width: 400px)
=========================================*/
@media screen and (max-width: 400px) {
    .feature-text-box p {
        font-size: 15px;
    }
    
    .feature-icon-box img {
        max-width: 180px;
    }
}
/*=========================================
   STANDARD MOBILE (Max Width: 375px)
=========================================*/
@media screen and (max-width: 375px) {
    .feature-text-box p {
        font-size: 14px;
        line-height: 1.5;
    }
    .options-grid {
        padding: 12px 20px;
    }
    .option-label {
        font-size: 13px;
    }
}
/*=========================================
   SMALL MOBILE (Max Width: 320px)
=========================================*/
@media screen and (max-width: 320px) {
    .feature-highlight-container {
        gap: 20px;
    }
    
    .feature-icon-box img {
        max-width: 140px;
    }
    .feature-text-box p {
        font-size: 13px; 
    }
    .option-card img {
        width: 30px;
    }
    .option-divider {
        height: 30px;
    }
    .option-label {
        font-size: 12px;
    }
}



/*==========================================*/
.color-info-wrap{
    max-width: 680px;
    margin: 20px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* LEFT */

.color-info-text{
    width: 430px;
}

.color-info-text p{
    margin-top: 60px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    color: #333;
}

/* RIGHT */

.color-info-box{
    width: 320px;
}

.color-info-box h4{
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.colors-card{
    border: 3px solid #666;
    border-radius: 22px;
    padding: 12px 25px;
    background: transparent;
}

.single-color{
    display: flex;
    align-items: center;
    gap: 18px;
}

.single-color + .single-color{
    margin-top: 18px;
}

.single-color img{
    width: 70px;
}

.single-color span{
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.single-color span::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 42px;
    background: #d2d2d2;
}

.custom-section-1{
    padding:10px 0 0;
}

/*-----------------Dry-Mop-Card-------------------------------------*/
/*=========================================
   DESKTOP STYLES
=========================================*/
.product-grid-top{
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
}

.product-grid-top .product-box{
    width: 25%;
}

.product-grid-bottom{
    display: flex;
    justify-content: center;
    gap: 25px;
}

.product-grid-bottom .product-box{
    width: 25%;
}

.product-box{
    background: #f1f1f1;
    border-radius: 10px;
    overflow: hidden;
}

.product-box img{
    width: 100%;
    display: block;
}

/*=========================================
   991px (Tablets) -> 3 Items per row
=========================================*/
@media(max-width:991px){
    .product-grid-top, .product-grid-bottom {
        flex-wrap: wrap; /* Allows items to wrap to next line safely */
        gap: 20px;
    }
    
    .product-grid-top .product-box, 
    .product-grid-bottom .product-box {
        width: calc(33.333% - 15px); /* Switch to 3 items per row on tablets */
    }
}

/*=========================================
   768px (Small Tablets) -> 2 Items per row
=========================================*/
@media(max-width:768px){
    .product-grid-top, .product-grid-bottom {
        gap: 15px;
        padding: 10px;
        justify-content: center;
    }

    .product-grid-top .product-box, 
    .product-grid-bottom .product-box {
        width: calc(50% - 10px); /* Switch to exactly 2 items per row */
    }
}

/*=========================================
   576px (Landscape Mobile)
=========================================*/
@media(max-width:576px){
    /* Keeps 2 columns, but reduces gap slightly for smaller screens */
    .product-grid-top, .product-grid-bottom {
        gap: 10px;
        padding: 10px;
    }
    
    .product-grid-top .product-box, 
    .product-grid-bottom .product-box {
        width: calc(50% - 5px); 
    }
}

/*=========================================
   425px (Large Mobile) -> 1 Item per row
=========================================*/
@media(max-width:425px){
    .product-grid-top, .product-grid-bottom {
        flex-direction: column; 
        align-items: center;
        gap: 20px;
    }

    .product-grid-top .product-box, 
    .product-grid-bottom .product-box {
        width: 100%; 
        max-width: 320px;  
    }
}

/*=========================================
   400px & 375px (Medium & Standard Mobile)
=========================================*/
@media(max-width:400px){
    .product-grid-top .product-box, 
    .product-grid-bottom .product-box {
        max-width: 95%; 
    }
}

/*=========================================
   320px (Small Mobile)
=========================================*/
@media(max-width:320px){
    .product-grid-top, .product-grid-bottom {
        gap: 15px;
        padding: 10px;
    }
}

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

.custom-broom-text{
    max-width:440px !important;
}
.custom-broom-top{
    padding: 20px 30px 10px;
}
.custom-wiper-wrapper{
    justify-content:center;
}
.custom-wiper-card{
    width:50%;
}


/*=====================Knife-Lighter==============================*/
.lighter-banner img{
    width:100%;
    display:block;
}

.lighter-card{
    width:85%;
    margin:-260px auto 40px;
    background:#ffffff;
    border-radius:35px;
    padding:45px 65px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    position:relative;
    z-index:2;
}

.lighter-card-reverse{
    margin-top:0 !important; 
}

.lighter-left{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.lighter-left img{
    max-width:420px;
    height:auto;
    display:block;
    width: 100%;
}

.lighter-right{
    width:33%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.lighter-number{
    width: 120px;
    height: 55px;
    background: #000;
    color: #ffa500;
    font-size: 33px;
    font-weight: 900;
    display: inline-block; 
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    line-height: 1;
    font-family: 'Anton', Impact, sans-serif;
    padding: 13px 32px;
    letter-spacing: 5px;
    transform: scaleX(1.25);
    transform-origin: left center;
    box-sizing: border-box;
}

.lighter-table{
    width:245px;
    border-collapse:collapse;
    background:#fff;
}

.lighter-table th{
    background:#ef233c;
    color:#fff;
    padding:8px;
    font-size:16px;
    font-weight:700;
    border:none;
}

.lighter-table th:first-child{
    border-top-left-radius:10px;
}

.lighter-table th:last-child{
    border-top-right-radius:10px;
}

.lighter-table td{
    border:1px solid #bdbdbd;
    padding:8px 12px;
    font-size:14px;
    color:#444;
}

.custom-broom-section-1{
    background:#f1f1f1 !important;
    padding:0px 0 40px !important;
}

/*=========================================
   991px (Tablets)
=========================================*/
@media (max-width: 991px) {
    .lighter-card {
        width: 90%;
        margin-top: -150px; 
        padding: 35px 40px;
        gap: 20px;
    }
    .lighter-left {
        width: 45%;
    }
    .lighter-right {
        width: 50%;
    }
}

/*=========================================
   768px (Large Mobile / Small Tablet)
=========================================*/
@media (max-width: 768px) {
    .lighter-card {
        flex-direction: column; 
        margin-top: -80px; 
        padding: 30px;
    }
    
    .lighter-left {
        width: 100%;
    }

    .lighter-right {
        width: 100%;
        align-items: center; 
    }

    .lighter-table {
        width: 100%;
        max-width: 400px;
    }
    
    .lighter-number {
        transform-origin: center center;  
        text-align: center;
    }
}

/*=========================================
   576px (Landscape Mobile)
=========================================*/
@media (max-width: 576px) {
    .lighter-card {
        width: 95%;
        margin-top: -50px;
        padding: 25px 20px;
    }
}

/*=========================================
   425px (Large Mobile)
=========================================*/
@media (max-width: 425px) {
    .lighter-card {
        margin-top: -35px;
    }
    
    .lighter-table th {
        font-size: 14px;
        padding: 6px;
    }

    .lighter-table td {
        font-size: 13px;
        padding: 6px;
    }
}

/*=========================================
   400px (Medium Mobile)
=========================================*/
@media (max-width: 400px) {
    .lighter-card {
        margin-top: -25px;
    }
}

/*=========================================
   375px (Standard Mobile)
=========================================*/
@media (max-width: 375px) {
    .lighter-number {
        transform: scaleX(1); 
        letter-spacing: 2px;
        width: 100px;
        padding: 10px 10px;
        font-size: 26px;
    }
}

/*=========================================
   320px (Small Mobile)
=========================================*/
@media (max-width: 320px) {
    .lighter-card {
        padding: 20px 15px;
    }
}



/*----------------------------------------------*/

/******** KNIFE SECTION ONLY ********/


.knife-first-card{
    margin:-200px auto 40px !important;
}

.knife-normal-card{
    margin:40px auto !important;
}

.knife-section .lighter-card-reverse{
    margin:40px auto !important;
}
/*===========================================*/
.custom-broom-001{
    padding:0 0 40px;
    background:#f1f1f1;
}

.custom-broom-banner-01{
    padding:20px;
}


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

.premium-broom-section{
    background:#efefef;
    padding:0 0 30px;
}

.premium-wrapper{
    width:90%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.premium-content{
    width:42%;
}

.premium-line{
    width:6px;
    height:35px;
    background:#8E3B94;
    margin-bottom:20px;
}

.premium-text{
    font-size:16px;
    line-height:1.5;
    color:#000000;
    margin-bottom:20px;
}

.premium-text strong{
    font-size:16px;
}

.premium-table-box{
    width:390px;
}

.premium-heading{
    background:#8E3B94;
    color:#fff;
    font-size:20px;
    font-weight:700;
    padding:10px 20px;
    border-radius:0 30px 0 0;
    width:280px;
}

.premium-table{
    width:100%;
    border-collapse:collapse;
    background:#fffde2;
    border:5px solid #9135a9;
}

.premium-table td{
    border:2px solid #9135a9;
    padding:12px 30px;
    font-size:16px;
    color:#000000;
    font-weight:600;
}

.premium-table tr:nth-child(2),
.premium-table tr:nth-child(4){
    background:#fff89c;
}

.premium-image{
    width:55%;
    position:relative;
    display:flex;
    justify-content:center;
}

.premium-image img{
    max-height:650px;
    width:auto;
}

.premium-badge{
    position:absolute;
    right:30px;
    top:80px;
    width:140px !important;
    height:auto;
}


/*=========================================
   991px (Tablets)
=========================================*/
@media(max-width:991px){
    .premium-wrapper{
        flex-direction:column;
        gap:40px;
    }
    .premium-content,
    .premium-image{
        width:100%;
    }
    .premium-table-box{
        width:100%;
    }
    .premium-heading{
        width:100%;
        border-radius:20px 20px 0 0;
    }
    .premium-table td{
        font-size:16px;
    }
    .premium-image img{
        max-height:450px;
    }
    .premium-badge{
        width:100px !important;
        right:0;
        top:40px;
    }
}
/*=========================================
   768px (Large Mobile / Small Tablet)
=========================================*/
@media(max-width:768px){
    .premium-wrapper{
        gap:35px;
    }
    .premium-heading{
        font-size: 18px;
    }
    .premium-image img{
        max-height:400px;
    }
    .premium-table td{
        padding: 12px 20px;
    }
}
/*=========================================
   576px (Landscape Mobile)
=========================================*/
@media(max-width:576px){
    .premium-text{
        font-size: 15px;
    }
    .premium-table td{
        padding: 10px 15px;
        font-size: 15px;
    }
    .premium-image img{
        max-height:350px;
    }
    .premium-badge{
        width:80px !important;
        top: 20px;
    }
}
/*=========================================
   425px (Large Mobile)
=========================================*/
@media(max-width:425px){
    .premium-heading{
        font-size: 16px;
        padding: 8px 15px;
    }
    .premium-table td{
        padding: 10px 12px;
        font-size: 14px;
    }
    .premium-image img{
        max-height:300px;
    }
}
/*=========================================
   400px (Medium Mobile)
=========================================*/
@media(max-width:400px){
    .premium-text{
        font-size: 14px;
    }
    .premium-table td{
        padding: 8px 10px;
        font-size: 13px;
    }
    .premium-badge{
        width:70px !important;
    }
}
/*=========================================
   375px (Standard Mobile)
=========================================*/
@media(max-width:375px){
    .premium-wrapper{
        width: 95%;
    }
    .premium-heading{
        font-size: 15px;
    }
    .premium-table td{
        padding: 8px 8px;
        font-size: 12px; 
    }
    .premium-image img{
        max-height:280px;
    }
}
/*=========================================
   320px (Small Mobile)
=========================================*/
@media(max-width:320px){
    .premium-wrapper{
        gap:25px;
    }
    .premium-text{
        font-size: 13px;
    }
    .premium-heading{
        font-size: 14px;
    }
    .premium-table td{
        padding: 6px 5px;
        font-size: 11px;
    }
    .premium-image img{
        max-height:240px; 
    }
    .premium-badge{
        width:60px !important;
        top: 10px;
    }
}

/*=========================================
            Phool-Jhadu
=========================================*/
.premium-feature-box{
    width:100%;
    margin:60px auto 0;
    display:flex;
    justify-content:center;
    gap:20px; 
    flex-wrap:wrap; 
}

.premium-feature-card{
    width:22%;
    background:#ffffff;
    border-radius:20px;
    padding:25px 20px;
    text-align:center;
    box-sizing: border-box; 
}


.premium-feature-card img{
    width: 140px;
    height: 140px;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
}

.premium-feature-card h4{
    margin:0;
    font-size:16px;
    line-height:1.4;
    color:#000000;
    font-weight:500;
}

/*=========================================
        991px & 768px (Tablets) 
=========================================*/
@media(max-width:991px){
    .premium-feature-box {
        flex-direction: row; 
        margin: 40px auto 0;
    }
    .premium-feature-card {
        width: calc(50% - 10px); 
    }
}

/*=========================================
         576px (Landscape Mobile)
=========================================*/
@media(max-width:576px){
    .premium-feature-card {
        width: calc(50% - 10px); 
        padding: 15px 10px;
    }
    
    .premium-feature-card h4 {
        font-size: 14px; 
    }
    

    .premium-feature-card img {
        width: 120px;
        height: 120px; 
    }
}

/*=========================================
             425px (Mobile)
=========================================*/
@media(max-width:425px){
    .premium-feature-box {
        flex-direction: column; 
        align-items: center;
        gap: 20px;
    }
    
    .premium-feature-card {
        width: 100%; 
        max-width: 320px;
        padding: 20px;
    }
    
    .premium-feature-card h4 {
        font-size: 16px; 
    }

    .premium-feature-card img {
        width: 140px;
        height: 140px;
    }
}

/*=========================================
            400px (Medium Mobile)
=========================================*/
@media(max-width:400px){
    .premium-feature-card {
        width: 95%; 
    }
}

/*=========================================
            375px (Standard Mobile)
=========================================*/
@media(max-width:375px){
    .premium-feature-card h4 {
        font-size: 15px; 
    }
}

/*=========================================
            320px (Small Mobile)
=========================================*/
@media(max-width:320px){
    .premium-feature-card {
        width: 100%;
        padding: 15px;
    }
    
    .premium-feature-card h4 {
        font-size: 14px; 
    }
    
  
    .premium-feature-card img {
        width: 110px;
        height: 110px; 
    }
}




/*=========================================
        Kharata-Jhadu
=========================================*/
.star-broom-section{
    background:#efefef;
    padding:20px 0 50px;
}

.star-banner img{
    width:100%;
    display:block;
}

.star-top{
    width:90%;
    margin:40px auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.star-left{
    width:40%;
}

.star-line{
    width:6px;
    height:35px;
    background:#6753a7;
    margin-bottom:20px;
}

.star-list{
    padding-left:18px;
    margin:0 0 30px;
}

.star-list li{
    font-size:16px;
    margin-bottom:8px;
    color:#000000;
}

.star-feature-box{
    display:flex;
    gap:30px;
    flex-wrap: wrap;
}

.star-feature{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.star-feature img{
    width:90px;
    height:90px;
    object-fit:contain;
}

.star-feature h4{
    font-size:14px;
    line-height:1.4;
    margin-top:10px;
}

.star-right{
    width:50%;
    text-align:center;
}

.star-right img{
    max-width:100%;
    max-height:350px;
}

.star-bottom-image{
    width:100%;
    margin:25px auto 0px;
    text-align:center;
}

.star-bottom-image img{
    max-width:100%;
}

.star-card-row{
    width:90%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap: wrap; 
}

.star-card{
    width:32%;
}

.star-head{
    color:#fff;
    font-size:24px;
    font-weight:700;
    text-align:center;
    padding:10px;
}

.purple{
    background:#6c5aa8;
}

.orange{
    background:#f36a21;
}

.pink{
    background:#e6008d;
}

.star-card table{
    width:100%;
    border-collapse:collapse;
    background:#f7f1b3;
}

.star-card td{
    border:1px solid #d2c96f;
    padding:8px 12px;
    font-size:16px;
}

/*=========================================
   991px (Tablets)
=========================================*/
@media(max-width:991px){
    .star-top{
        flex-direction: column; 
        gap: 40px;
    }
    
    .star-left, .star-right{
        width: 100%;
    }
    
    .star-right img{
        max-height: 450px;
    }
    
    .star-card-row{
        flex-direction: column;  
        gap: 30px;
        align-items: center;
    }
    
    .star-card{
        width: 80%; 
        max-width: 500px;
    }
}

/*=========================================
   768px (Large Mobile / Small Tablet)
=========================================*/
@media(max-width:768px){
    .star-card{
        width: 90%; 
    }
    
    .star-right img{
        max-height: 400px;
    }
}

/*=========================================
   576px (Landscape Mobile)
=========================================*/
@media(max-width:576px){
    .star-list li{
        font-size: 15px; 
    }
    
    .star-feature img{
        width: 75px; 
        height: 75px;
    }
    
    .star-head{
        font-size: 20px;
    }
    
    .star-card td{
        font-size: 15px;
    }
}

/*=========================================
   425px (Large Mobile)
=========================================*/
@media(max-width:425px){
    .star-card{
        width: 100%; 
    }
    
    .star-feature-box{
        gap: 15px;
        justify-content: center; 
    }
    
    .star-right img{
        max-height: 350px;
    }
}

/*=========================================
   400px (Medium Mobile)
=========================================*/
@media(max-width:400px){
    .star-list li{
        font-size: 14px;
    }
    
    .star-card td{
        padding: 6px 10px;
        font-size: 14px;
    }
}

/*=========================================
   375px (Standard Mobile)
=========================================*/
@media(max-width:375px){
    .star-top, .star-card-row{
        width: 95%; 
    }
    
    .star-feature img{
        width: 65px;
        height: 65px;
    }
    
    .star-feature h4{
        font-size: 13px;
    }
}

/*=========================================
   320px (Small Mobile)
=========================================*/
@media(max-width:320px){
    .star-head{
        font-size: 18px;
        padding: 8px;
    }
    
    .star-card td{
        padding: 5px 8px; 
        font-size: 13px;
    }
    
    .star-right img{
        max-height: 300px;
    }
    .stats-section {
        padding: 50px 0 30px;
        margin-top: 10px;
    }
}




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

.color-line-1{
    background:#4CB65B;
}
.heading-1{
    background:#4CB65B;
}
.table-1 td{
    border: 2px solid #4CB65B !important;
}
.table-1{
    border: 5px solid #4CB65B;
}

.color-line-2{
    background:#BB237C;
}
.heading-2{
    background:#BB237C;
}
.table-2 td{
    border: 2px solid #BB237C !important;
}
.table-2{
    border: 5px solid #BB237C;
}

.color-line-3{
    background:#EA1F27;
}
.heading-3{
    background:#EA1F27;
}
.table-3 td{
    border: 2px solid #EA1F27 !important;
}
.table-3{
    border: 5px solid #EA1F27;
}

.color-line-4{
    background:#3F9545;
}
.heading-4{
    background:#3F9545;
}
.table-4 td{
    border: 2px solid #3F9545 !important;
}
.table-4{
    border: 5px solid #3F9545;
}





/*--------------------CATEGORY PRODUCT SECTION-------------------------------*/

.category-product-section{
    width:100%;
    background:#E5E5E5;
    padding:0px 60px;
    display:flex;
    align-items:center;
}

.category-product-content{
    width:30%;
}

.category-product-content h2{
    font-size:18px;
    font-weight:700;
    color:#000;
    margin-bottom:20px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.category-btn{
    display:inline-block;
    background:#ffe600;
    color:#000;
    text-decoration:none;
    padding:8px 30px;
    font-size:14px;
    font-weight:500;
    transition:0.3s;
}

.category-btn:hover{
    background:#ffd400;
    color:#000;
}

.category-product-image{
    width:70%;
    text-align:center;
}

.category-product-image img{
    width:100%;
    max-width:850px;
    display:block;
    margin:0 auto;
}
.custom-color-top{
    justify-content:center;
}


/*=========================================
   CATEGORY PRODUCT SECTION RESPONSIVE 
=========================================*/

/* ---------- 1024px (Tablets / Laptops) ---------- */
@media screen and (max-width: 1024px) {
    .category-product-section {
        padding: 20px 40px; 
    }
    .category-product-content {
        width: 40%; 
    }
    .category-product-image {
        width: 60%;
    }
}

/* ---------- 768px (Tablets / IPads) ---------- */
@media screen and (max-width: 768px) {
    .category-product-section {
        flex-direction: column; 
        text-align: center; 
        padding: 40px 30px;
    }
    
    .category-product-content {
        width: 100%; 
        margin-bottom: 30px;  
    }
    
    .category-product-content h2 {
        font-size: 17px;
    }

    .category-product-image {
        width: 100%;
    }
}

/* ---------- 640px (Large Phones) ---------- */
@media screen and (max-width: 640px) {
    .category-product-section {
        padding: 30px 20px;
    }
}

/* ---------- 576px ---------- */
@media screen and (max-width: 576px) {
    .category-product-content h2 {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .category-btn {
        padding: 8px 25px;
    }
}

/* ---------- 480px (Medium Phones) ---------- */
@media screen and (max-width: 480px) {
    .category-product-section {
        padding: 25px 15px;
    }
    .category-btn {
        font-size: 13px;  
    }
}

/* ---------- 425px ---------- */
@media screen and (max-width: 425px) {
    .category-product-content h2 {
        font-size: 15px;
    }
    .category-product-image img {
        max-width: 95%; /
    }
}

/* ---------- 375px (Small Phones) ---------- */
@media screen and (max-width: 375px) {
    .category-product-content h2 {
        font-size: 14px;
    }
    .category-btn {
        padding: 7px 20px;
        font-size: 12px;
    }
}

/* ---------- 320px (Ultra Small Phones) ---------- */
@media screen and (max-width: 320px) {
    .category-product-section {
        padding: 20px 10px;
    }
    .category-product-content h2 {
        font-size: 13px;
        letter-spacing: 0.5px;  
    }
}


/*===================Gobhi-morni-SteelThumbnail Card=======================*/
.broom-thumbnail-section {
    padding: 20px 0 0px;
    background: #fff;
}

/* Cards Row */

.thumbnail-wiper-wrapper {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 50px;
}

/* Card */

.thumbnail-wiper-card {
    width: 32%;
    background: #E5E5E5;
    text-align: center;
    position: relative;
}

/* Image */

.thumbnail-wiper-img img {
    width: 100%;
    display: block;
    height:230px;
}

/* Title */

.thumbnail-wiper-card h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
     margin-top: 10px; 
    margin-bottom: 35px;
    text-transform: uppercase;
}

/* Button */
.thumbnail-wiper-btn {
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 230px;
    height: 40px;
    background: #ffea00;
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    z-index: 2;
}



/*=========================================
   768px (Tablets)
=========================================*/
@media screen and (max-width: 768px) {
    .thumbnail-wiper-wrapper {
        flex-direction: column; 
        align-items: center;
        gap: 30px;
    }
    .thumbnail-wiper-card {
        width: 80%; 
        max-width: 500px; 
    }
}
/*=========================================
   576px (Small Tablets / Landscape Phones)
=========================================*/
@media screen and (max-width: 576px) {
    .thumbnail-wiper-card {
        width: 85%; 
    }
}
/*=========================================
   425px (Large Mobile)
=========================================*/
@media screen and (max-width: 425px) {
    .thumbnail-wiper-card {
        width: 90%; 
    }
    
    .thumbnail-wiper-img img {
        height: 220px; 
    }
}
/*=========================================
   400px (Medium Mobile)
=========================================*/
@media screen and (max-width: 400px) {
    .thumbnail-wiper-card {
        width: 95%; 
    }
    
    .thumbnail-wiper-btn {
        width: 210px; 
    }
}
/*=========================================
   375px (Standard Mobile)
=========================================*/
@media screen and (max-width: 375px) {
    .thumbnail-wiper-card h3 {
        font-size: 16px; 
        margin-bottom: 30px;
    }
    .thumbnail-wiper-img img {
        height: 200px; 
    }
    .thumbnail-wiper-btn {
        width: 200px; 
        font-size: 15px;
    }
}
/*=========================================
   320px (Small Mobile)
=========================================*/
@media screen and (max-width: 320px) {
    .thumbnail-wiper-card {
        width: 100%; 
    }
    
    .thumbnail-wiper-img img {
        height: 180px; 
    }
    .thumbnail-wiper-btn {
        width: 180px; 
        font-size: 14px;
        height: 35px;
        bottom: -15px; 
    }
}

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

.contact-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 24px;
    margin-top: 25px;
}

.contact-card {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    padding: 28px;
    box-shadow: none;
}

.contact-card h2,
.contact-card h3 {
    margin: 0 0 12px;
    color: #111111;
    font-size: 24px;
    text-transform: uppercase;
}

.contact-card p {
    margin: 0 0 18px;
    color: #555555;
    line-height: 1.8;
    font-size: 14px;
}

.contact-list {
    display: grid;
    gap: 16px;
}

.contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-top: 10px;
}

.contact-item .contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff001;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.contact-item .contact-icon img {
    width: 20px;
    height: 20px;
}

.contact-item h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.contact-item a,
.contact-item p {
    display: block;
    margin: 0;
    color: #555555;
    line-height: 1.7;
    font-size: 14px;
}

.contact-form-card {
    background: #111111;
    color: #ffffff;
}

.contact-form-card h3,
.contact-form-card p {
    color: #ffffff;
}

.contact-form {
    display: grid;
    gap: 14px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contact-form label {
    display: grid;
    gap: 8px;
    font-size: 13px;
    color: #f2f2f2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid #333333;
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    outline: none;
    background: #ffffff;
    color: #111111;
}

.contact-form textarea {
    min-height: 115px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #fff001;
    box-shadow: none;
}

.contact-form button {
    border: 0;
    border-radius: 999px;
    padding: 12px 20px;
    max-width: 170px;
    background: #fff001;
    color: #111111;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}

.contact-map-card {
    margin-top: 24px;
}

.contact-map-frame {
    overflow: hidden;
    border: 1px solid #e2e2e2;
    box-shadow: none;
}

.contact-map-frame iframe {
    width: 100%;
    height: 360px;
    border: 0;
    display: block;
}



/*============ Contact page - matched with about page design=============*/

.contact-page-wrapper {
    padding-bottom: 0;
}

.contact-page-container {
    padding-top: 78px;
}

.contact-label {
    width: 165px;
}

.contact-intro-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    align-items: stretch;
    margin-bottom: 30px;
}

.contact-heading h1 {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    line-height: 36px;
    text-align: center;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.contact-intro-content {
    background: #ffffff;
    border-left: 1.5px solid #010101;
    padding: 24px 28px;
    box-shadow: none;
}

.contact-intro-content p {
    font-size: 14px;
    line-height: 1.8;
}

.contact-grid {
    align-items: stretch;
    margin-top: 0;
}

.contact-card {
    border: 1px solid #d8d8d8;
    min-height: 100%;
}

.contact-card h2 {
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

.contact-item {
    border-top: 1px solid #eeeeee;
}

.contact-item a {
    text-decoration: none;
}

.contact-item a:hover {
    color: #842f8b;
}

.contact-form-card {
    background: #111111;
    border: 0;
}

.contact-form input,
.contact-form textarea {
    border-radius: 0;
}

.contact-form button {
    border-radius: 0;
    transition: .3s ease;
}

.contact-form button:hover {
    background: #ffffff;
    color: #111111;
}

.contact-map-card {
    background: #ffffff;
    border: 1px solid #d8d8d8;
    box-shadow: none;
}

.contact-map-content {
    background: #111111;
    color: #ffffff;
    padding: 24px 28px;
    border-bottom: 6px solid #fff001;
}

.contact-map-content h2 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.35;
    text-transform: uppercase;
}

.contact-map-content p {
    margin: 0;
    color: #f2f2f2;
    font-size: 14px;
    line-height: 1.7;
}

.contact-map-frame {
    border: 0;
    box-shadow: none;
}



/*=========================================
   Responsive Fixes for Contact Page
=========================================*/
@media(max-width:991px){
    .contact-page-container {
        padding-top: 60px !important;
    }
    
        
    .contact-intro-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .contact-label {
        /*width: 100% !important;*/
        text-align: center !important;
    }
    
    .contact-intro-content {
        border-left: none !important;
        border-top: 2px solid #010101 !important;
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

   
    .contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .contact-card,
    .contact-form-card,
    .contact-map-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/*=========================================
   768px & Below (Tablets & Mobiles)
=========================================*/
@media(max-width:768px){
    .contact-form .row,
    .contact-form .d-flex {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
    }
    

    .contact-form [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin-bottom: 15px !important;
    }
    
    .contact-form input,
    .contact-form textarea,
    .contact-form button {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/*=========================================
   576px (Landscape Mobile)
=========================================*/
@media(max-width:576px){
    .contact-page-container {
         padding-top: 42px !important;
    }
    .contact-heading h1 {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .contact-card h2,
    .contact-map-content h2 {
        font-size: 18px !important;
    }
}

/*=========================================
   425px & 400px (Mobile)
=========================================*/
@media(max-width:425px){
    .contact-heading h1 {
        font-size: 18px !important;
    }
    .contact-intro-content p,
    .contact-map-content p {
        font-size: 14px !important;
    }
    .contact-form-card, 
    .contact-card {
        padding: 20px !important; 
    }
}

/*=========================================
   375px (Standard Mobile)
=========================================*/
@media(max-width:375px){
    .contact-card,
    .contact-form-card,
    .contact-intro-content {
        padding: 15px !important;
    }
}

/*=========================================
   320px (Small Mobile)
=========================================*/
@media(max-width:320px){
    .contact-heading h1 {
        font-size: 16px !important;
    }
    .contact-card h2,
    .contact-map-content h2 {
        font-size: 16px !important;
    }
    .contact-intro-content p,
    .contact-map-content p {
        font-size: 13px !important;
    }
}