/* =========================
   HERO LAYOUT FIX
   Keep the blue diamonds image inside the rounded bg on all screens
   ========================= */

/* 1. Base: mobile / small screens
   - We keep normal stacking: text first, image after.
   - No absolute positioning.
*/
.cs_hero.cs_style_3 .cs_hero_thumbnail {
  position: relative;
  width: 100%;
  max-width: 480px; /* don't let it get huge on phones */
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
}

.cs_hero.cs_style_3 .cs_hero_thumbnail .home_banner {
  width: 100%;
  height: auto;
  display: block;
}

/* Make sure the hero section itself can grow with content */
.cs_hero.cs_style_3 .cs_hero_content {
  position: relative;
  overflow: hidden;
  border-radius: 2rem; /* matches cs_radius_50 visual */
}

/* optional: keep some breathing room so nothing touches the rounded edges */
.cs_hero.cs_style_3 .cs_hero_content .container {
  position: relative;
  z-index: 1;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* 2. Desktop+ (lg breakpoint)
   - We go to side-by-side layout (your row already does col-lg-7 / col-lg-5).
   - We'll "dock" the hero image to the right INSIDE the rounded bg.
   - We stop using giant vw math; instead we clamp with max-width.
*/
@media (min-width: 992px) {
  .cs_hero.cs_style_3 .row.cs_gap_y_40 {
    align-items: center; /* vertically align text + image */
  }

  .cs_hero.cs_style_3 .cs_hero_thumbnail {
    position: relative; /* not absolute anymore */
    width: 100%;
    max-width: 560px; /* reasonable size on desktop */
    margin: 0 0 0 auto; /* push it to the right edge of its col */
    right: auto;
    top: auto;
  }

  .cs_hero.cs_style_3 .cs_hero_thumbnail .home_banner {
    width: 100%;
    height: auto;
  }

  /* Give the right column permission to overflow slightly but still clip within bg */
  .cs_hero.cs_style_3 .col-lg-5.order-lg-2 {
    display: flex;
    justify-content: flex-end;
  }

  /* Also make sure the hero wrapper itself can handle large screens
     without the background ending too early */
  .cs_hero.cs_style_3 .cs_hero_content {
    min-height: 480px; /* so the bg feels "tall enough" */
    border-radius: 2rem;
  }
}

/* 3. XL screens (really wide desktops / TVs)
   - Instead of letting the image keep growing or drifting out,
     we cap it and center it vertically.
   - We also keep it visually inside the rounded box by adding inner padding.
*/
@media (min-width: 1400px) {
  .cs_hero.cs_style_3 .cs_hero_content .container {
    max-width: 1280px; /* lock content width */
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .cs_hero.cs_style_3 .cs_hero_content {
    min-height: 500px;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-radius: 2rem;
  }

  .cs_hero.cs_style_3 .cs_hero_thumbnail {
    max-width: 600px; /* HARD CAP so it never explodes */
  }

  .cs_hero.cs_style_3 .cs_hero_thumbnail .home_banner {
    max-height: 420px; /* extra safety so it won’t overflow bg vertically */
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }
}

/* 4. Super-wide displays (like 1800px+)
   - Just reinforce that we DO NOT push the image outside
     by using overflow hidden on the rounded bg.
*/
@media (min-width: 1700px) {
  .cs_hero.cs_style_3 .cs_hero_content {
    overflow: hidden;
    border-radius: 2rem;
  }

  .cs_hero.cs_style_3 .cs_hero_thumbnail {
    max-width: 620px;
  }

  .cs_hero.cs_style_3 .cs_hero_thumbnail .home_banner {
    max-height: 420px;
    object-fit: contain;
  }
}

/* =============================
   ABOUT HERO SECTION
============================= */
.about-hero-wrapper {
  background: radial-gradient(circle at center, #f3f9ff 0%, #ffffff 70%);
  /* padding: 6rem 0 4rem; */
  position: relative;
  overflow: hidden;
  text-align: center;
}

.about-hero-wrapper::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: rgba(0, 114, 255, 0.25);
  border-radius: 999px;
  filter: blur(120px);
  top: -60px;
  left: 40%;
  transform: translateX(-50%);
  opacity: 0.6;
}

.about-hero-surface {
  display: inline-block;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* image animation only */
.about-hero-image {
  display: inline-block;
  overflow: visible;
  position: relative;
}

.about-hero-image img {
  width: 320px;
  max-width: 80%;
  transition: transform 0.45s ease, filter 0.3s ease;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
}

/* only image moves on hover */
.about-hero-surface:hover img {
  transform: translateY(-10px);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.15));
}

/* ======================================
   Category cards: image left / text right
   ====================================== */

.cs_iconbox.cs_style_4 {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
  padding: 22px 26px;
  height: 100%;
}

/* Main two-column split */
.cs_iconbox.cs_style_4 .cs_iconbox_inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Left side = about 1/3 width */
.cs_iconbox_media {
  flex: 0 0 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 18px;
  border-right: 1px solid #e5e7eb;
}

/* Circular image holder */
.cs_icon_circle {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: #eef4ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .cs_icon_circle img {
  max-width: 64px;
  max-height: 64px;
} */

/* Right side = text */
.cs_iconbox_body {
  flex: 1;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs_iconbox_title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
}

.cs_iconbox_title a {
  color: #111827;
  text-decoration: none;
}

.cs_iconbox_title a:hover {
  color: #0f4fd8;
}

/* Description */
.cs_iconbox_text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}

/* Know more link */
.cs_category_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
}

.cs_category_btn i {
  font-size: 13px;
}

/* Optional: hide the old decorative shape if you don't want it */
.cs_iconbox.cs_style_4 .cs_service_shape {
  display: none;
}

/* Hover effect on the whole card */
.cs_iconbox.cs_style_4:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Mobile: stack vertically */
@media (max-width: 575.98px) {
  .cs_iconbox.cs_style_4 .cs_iconbox_inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cs_iconbox_media {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding-right: 0;
    padding-bottom: 16px;
    margin-bottom: 10px;
    flex: 0 0 auto;
  }

  .cs_iconbox_body {
    padding-left: 0;
  }
}

/* Fix: keep text visible on hover for category cards */
.cs_iconbox.cs_style_4:hover .cs_iconbox_text,
.cs_iconbox.cs_style_4:hover .cs_iconbox_text p,
.cs_iconbox.cs_style_4:hover p {
  color: #4b5563; /* same as normal text */
}

/* Optional: keep title dark/blue instead of white */
.cs_iconbox.cs_style_4:hover .cs_iconbox_title {
  color: #111827;
}

/* ======================================
   Category cards: FULL LEFT IMAGE PANEL
   ====================================== */

.cs_iconbox.cs_style_4 {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
  padding: 0; /* let inner layout control spacing */
  height: 100%;
}

/* Two-column split inside card */
.cs_iconbox.cs_style_4 .cs_iconbox_inner {
  display: flex;
  align-items: stretch; /* both sides same height */
  gap: 0;
  height: 100%;
}

/* LEFT = full image rectangle */
.cs_iconbox_media {
  flex: 0 0 40%; /* width of left panel */
  border-right: 1px solid #e5e7eb;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* Turn the old circle wrapper into a full panel */
.cs_icon_circle {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: none;
  display: block;
}

/* Image fills that whole panel */
.cs_icon_circle img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills, crops nicely */
  display: block;
}

/* RIGHT = text area */
.cs_iconbox_body {
  flex: 1;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs_iconbox_title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
}

.cs_iconbox_title a {
  color: #111827;
  text-decoration: none;
}

.cs_iconbox_title a:hover {
  color: #0f4fd8;
}

.cs_iconbox_text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}

.cs_category_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
}

.cs_category_btn i {
  font-size: 13px;
}

/* Hover: lift card, keep text readable */
.cs_iconbox.cs_style_4:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs_iconbox.cs_style_4:hover .cs_iconbox_text,
.cs_iconbox.cs_style_4:hover p {
  color: #4b5563;
}

.cs_iconbox.cs_style_4:hover .cs_iconbox_title {
  color: #111827;
}

/* MOBILE: image on top, text below */
@media (max-width: 575.98px) {
  .cs_iconbox.cs_style_4 .cs_iconbox_inner {
    flex-direction: column;
  }

  .cs_iconbox_media {
    flex: 0 0 auto;
    width: 100%;
    height: 180px; /* fixed banner height */
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .cs_iconbox_body {
    padding: 18px 20px 20px;
  }
}


/* FORCE hero image to behave normally on mobile */
@media (max-width: 991.98px) {
  .cs_hero.cs_style_3 .cs_hero_thumbnail {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 480px;
    margin: 1.5rem auto 0 !important;
  }

  .cs_hero.cs_style_3 .cs_hero_thumbnail .home_banner {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* optional: center the row content on mobile */
  .cs_hero.cs_style_3 .row.cs_gap_y_40 {
    justify-content: center;
    text-align: center;
  }
}


/* Mobile tweaks for category cards */
@media (max-width: 575.98px) {
  .cs_iconbox.cs_style_4 .cs_iconbox_inner {
    flex-direction: column;
  }

  .cs_iconbox.cs_style_4 .cs_iconbox_media {
    width: 100%;
    height: auto;              /* let image decide height */
    overflow: visible;         /* don't crop the svg */
    border-bottom: 1px solid #e5e7eb;
    border-right: none;
  }

  .cs_iconbox.cs_style_4 .cs_icon_circle {
    width: 100%;
    height: auto;
    background: #eef4ff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
  }

  .cs_iconbox.cs_style_4 .cs_icon_circle img {
    max-width: 70%;            /* smaller icon */
    height: auto;
    object-fit: contain;       /* show whole shrimp, no crop */
    display: block;
  }

  .cs_iconbox.cs_style_4 .cs_iconbox_body {
    padding: 18px 20px 20px;
    text-align: left;          /* or center if you prefer */
  }
}