body{
font-family: Arial;
background:#f5f9ff;
}

.care-section{
padding:80px 0;
}

.care-section h2{
font-size:36px;
font-weight:700;
color:#1f3b64;
}

.care-card{
background:white;
border-radius:18px;
padding:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
height:100%;
}

.care-card:hover{
transform:translateY(-8px);
}

.care-card img{
width:100%;
height:220px;
object-fit:cover;
border-radius:12px;
margin-bottom:15px;
}

.care-card h4{
font-size:20px;
font-weight:700;
color:#0d6efd;
}

.care-card p{
font-size:14px;
color:#555;
margin:10px 0;
line-height:1.6;
}

.care-card a{
text-decoration:none;
color:#0d6efd;
font-weight:600;
}


.maternity-section {
    background-color: #f8faff;
}

/* Heading Styling */
.section-title {
    color: #2b579a; /* Image ka main blue color */
    font-weight: 500;
    font-size: 2.2rem;
}

.section-subtitle {
    color: #555555;
    font-size: 0.95rem;
    font-weight: 400;
}

/* Product Card Wrapper */
.product-card {
    text-align: center;
    padding: 10px;
    height: 100%;
}

/* Image Container taake sab images equal background aur square format me dikhein */
.img-container {
    background-color: #ffffff;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1; /* Perfect square shape */
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image square box me crop hokar fit hojaye gi */
}

/* Product Title Styling */
.product-name {
    color: #2b579a;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 15px;
}


body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f7f9;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
}

/* Arrow Navigation Buttons */
.slider-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #000;
    padding: 5px;
    transition: transform 0.2s;
}
.slider-btn:hover {
    transform: scale(1.15);
}

/* Container Jo Horizontal Scroll Chupata Hai */
.slider-container {
    overflow: hidden;
    cursor: grab;
    user-select: none;
}
.slider-container:active {
    cursor: grabbing;
}

/* Items ko aik line me lane ka track */
.slider-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease-out;
    will-change: transform;
}

/* Responsive Card Width Logic (Jesa image_d9533b.png me hai) */
.product-slide {
    flex: 0 0 calc(27% - 18px); /* Desktop par takreeban 3.7 cards inline dikhenge */
    min-width: 280px; /* Mobile par card boht chota na ho */
}

@media (max-width: 992px) {
    .product-slide {
        flex: 0 0 calc(45% - 12px); /* Tablets par ~2.3 cards */
    }
}

@media (max-width: 576px) {
    .product-slide {
        flex: 0 0 80%; /* Mobile par 1 poora aur doosra thoda sa cut */
    }
}

/* Image Design Styling */
.img-box {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 4 / 3;
    padding: 15px;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none; 
}

.product-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #000000;
    margin-top: 15px;
    text-align: left;
}


    .brand-showcase-section {
      background-color: #ffffff;
      padding-top: 60px;
      padding-bottom: 60px;
    }

    .brand-row-top {
      margin-bottom: 24px; 
    }

    .brand-col {
      flex: 0 0 auto;
      width: 100%;
    }

    @media (min-width: 576px) {
      .brand-col {
        width: 33.33333333%;
      }
    }

    @media (min-width: 768px) {
      .brand-col {
        width: 25%;
      }
    }

    
    @media (min-width: 992px) {
      .brand-col {
        width: 16.66666667%; 
      }
    }
    
   
    .brand-logo-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px;
      height: 90px;
    }
    
    
    .brand-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: grayscale(15%);
      transition: transform 0.3s ease, filter 0.3s ease;
    }


    .brand-img:hover {
      filter: grayscale(0%);
      transform: scale(1.05);
    }


   .mobility-banner-section {
      position: relative;
      background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=1920&auto=format&fit=crop'); 
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 85vh; 
      display: flex;
      align-items: center;
      color: #ffffff;
      padding: 60px 0;
    }

    /* डार्क ओवरले */
    .mobility-banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(12, 35, 24, 0.65); 
      z-index: 1;
    }

    /* कंटेंट होल्डर */
    .mobility-content-wrapper {
      position: relative;
      z-index: 2;
    }

    /* मुख्य हेडिंग */
    .mobility-title {
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 20px;
      letter-spacing: 0.5px;
    }

    /* पैराग्राफ टेक्स्ट */
    .mobility-description {
      font-size: 1.05rem;
      line-height: 1.6;
      font-weight: 400;
      margin-bottom: 35px;
      opacity: 0.95;
    }

    /* ऑर्डर बटन */
    .mobility-btn-primary {
      background-color: #6ec1fe;
      color: #ffffff;
      font-weight: 600;
      padding: 14px 40px;
      border-radius: 50px;
      border: none;
      text-decoration: none;
      display: inline-block;
      transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 15px rgba(110, 193, 254, 0.3);
    }

    /* बटन होवर इफेक्ट */
    .mobility-btn-primary:hover {
      background-color: #4da6e7;
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(110, 193, 254, 0.5);
    }

    /* रिस्पॉन्सिव फॉन्ट्स */
    @media (max-width: 768px) {
      .mobility-title {
        font-size: 2.2rem;
      }
      .mobility-description {
        font-size: 0.95rem;
      }
    }

    /* मुख्य प्रोडक्ट सेक्शन - यहाँ अब पूरी बैकग्राउंड इमेज लगी है */
    .pump-showcase-container {
      position: relative;
      background-image: url('https://images.unsplash.com/photo-1531983412531-1f49a365f698?q=80&w=1920&auto=format&fit=crop'); 
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 75vh;
      display: flex;
      align-items: center;
      padding: 85px 0;
      overflow: hidden;
    }

   
    .pump-showcase-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 30%, rgba(220, 240, 255, 0.8) 60%, rgba(255, 255, 255, 0.1) 100%);
      z-index: 1;
    }

  
    .pump-content-wrapper {
      position: relative;
      z-index: 2;
    }

  
    .pump-main-heading {
      color: #2b59a2;
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 20px;
      line-height: 1.2;
    }


    .pump-sub-text {
      color: #333333;
      font-size: 1.05rem;
      line-height: 1.6;
      margin-bottom: 35px;
      max-width: 520px;
    }

  
    .pump-action-button {
      background-color: #4daeff;
      color: #ffffff;
      font-weight: 600;
      padding: 14px 40px;
      border-radius: 50px;
      border: none;
      text-decoration: none;
      display: inline-block;
      width: fit-content;
      transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 15px rgba(77, 174, 255, 0.4);
    }

    .pump-action-button:hover {
      background-color: #2b96ff;
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(77, 174, 255, 0.6);
    }

   
    @media (max-width: 768px) {
      .pump-showcase-overlay {
        background: rgba(255, 255, 255, 0.9);
      }
      .pump-main-heading {
        font-size: 2.3rem;
      }
      .pump-sub-text {
        font-size: 0.95rem;
      }
    }