/* Global responsive + media fitting layer */

img,
svg,
video,
canvas {
  max-width: 100%;
}

main .service-card .img-box,
main .blog-thumb,
main .doctor-image-wrap,
main .home-team-grid .doctor-image-wrap,
main .home-testi-img,
main .intro-image,
main .intro-media,
main .media,
main .feature-cover,
main .cta-img-wrap,
main .loc-map-img,
main .image-card {
  overflow: hidden;
}

main .service-card .img-box {
  aspect-ratio: 4 / 3;
}

main .blog-thumb {
  aspect-ratio: 16 / 10;
}

main .doctor-image-wrap,
main .home-team-grid .doctor-image-wrap {
  aspect-ratio: 4 / 3;
}

/* Portrait doctors look better with slightly taller crop and top focus */
main .home-team-grid .doctor-image-wrap,
main .team-grid .doctor-image-wrap {
  aspect-ratio: 4 / 3;
  max-height: 320px;
}

main .home-testi-img,
main .intro-image,
main .intro-media,
main .media,
main .feature-cover,
main .cta-img-wrap,
main .image-card {
  aspect-ratio: 16 / 10;
}

main .loc-map-img {
  aspect-ratio: 16 / 9;
}

main .service-card .img-box > img,
main .blog-thumb > img,
main .doctor-image-wrap > img,
main .home-team-grid .doctor-image-wrap > img,
main .home-testi-img > img,
main .intro-image > img,
main .intro-media > img,
main .media > img,
main .feature-cover > img,
main .cta-img-wrap > img,
main .loc-map-img > img,
main .image-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

main .home-team-grid .doctor-image-wrap > img,
main .team-grid .doctor-image-wrap > img {
  object-position: center 18%;
}

main .h-450 {
  height: auto;
  aspect-ratio: 4 / 5;
}

@media (max-width: 1024px) {
  main .container {
    width: min(100%, 1320px);
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  main .row,
  main .flex-row,
  main .intro-layout,
  main .profile-layout,
  main .cta-inner,
  main .contact-layout,
  main .booking-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px;
  }

  /* Keep doctor highlight photo above content on tablet/mobile */
  main .row.doctor-highlight-row {
    flex-direction: column-reverse !important;
  }

  main [class^="col-"],
  main [class*=" col-"],
  main .w-40,
  main .w-60 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main .home-team-grid,
  main .stats-grid,
  main .ivf-steps-grid,
  main .news-grid,
  main .blogs-grid,
  main .team-grid,
  main .cards,
  main .cards-grid,
  main .core-services-grid,
  main .steps-grid,
  main .male-treatment-grid,
  main .tech-points {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  main .section-pad,
  main .section-space,
  main .team-section,
  main .blogs-section,
  main .profile-main,
  main .profile-details-main,
  main .booking-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  main .hero-title,
  main .section-title,
  main h1,
  main h2 {
    line-height: 1.2 !important;
    word-break: break-word;
  }

  main .hero-title {
    font-size: clamp(1.9rem, 8.2vw, 2.5rem) !important;
  }

  main .home-team-grid,
  main .stats-grid,
  main .ivf-steps-grid,
  main .news-grid,
  main .blogs-grid,
  main .team-grid,
  main .cards,
  main .cards-grid,
  main .core-services-grid,
  main .steps-grid,
  main .male-treatment-grid,
  main .tech-points {
    grid-template-columns: 1fr !important;
  }

  main .service-card .img-box,
  main .doctor-image-wrap,
  main .home-team-grid .doctor-image-wrap,
  main .blog-thumb,
  main .home-testi-img,
  main .profile-photo-card,
  main .intro-image,
  main .intro-media,
  main .media,
  main .feature-cover,
  main .cta-img-wrap,
  main .loc-map-img,
  main .image-card,
  main .h-450 {
    width: 100%;
  }

  main .home-team-grid .doctor-image-wrap,
  main .team-grid .doctor-image-wrap {
    aspect-ratio: 4 / 3;
    max-height: 280px;
  }

  main iframe,
  main video {
    width: 100%;
    height: auto;
  }
}