.services-banner {
    position: relative;
    max-width: 1300px;      
    margin: 60px auto;       /* Center */
    border-radius: 12px;     /* Rounded edges */
    overflow: hidden;
    background-color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.services-banner .banner-img {
    width: 100%;
    height: 350px;           /* Fixed height like screenshot */
    object-fit: cover;       /* Crops nicely */
    display: block;
}

.services-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* Dark overlay */
    z-index: 1;
}

.services-content {
    position: absolute;
    bottom: 30px;   /* push content near bottom */
    left: 3%;   
    transform: translateX(-50%); /* center horizontally */
    z-index: 2;
    color: white;
    text-align: left;
}


.services-content h2 {
    font-size: 4rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.services-content p {
    font-size: 1rem;
}

/* ===== Responsive: Services Banner ===== */
@media (max-width: 1290px) {
  .services-banner { margin: 40px 60px 0px 60px; }
  .services-banner .banner-img { height: 280px; }
  .services-content {
    left: 5%;
    transform: translateX(-50%);
    bottom: 22px;
    text-align: left;

  

  }
  .services-content h2 { font-size: 1.6rem; }
  .services-content p { font-size: 0.9rem; }
}
@media (max-width: 991px) {
  .services-banner { margin: 110px 60px 0px 60px; }
  .services-banner .banner-img { height: 280px; }
  .services-content {
    left: 5%;
    transform: translateX(-50%);
    bottom: 22px;
    text-align: left;

  

  }
  .services-content h2 { font-size: 1.6rem; }
  .services-content p { font-size: 0.9rem; }
}

@media (max-width: 600px) {
  .services-banner { margin: 140px 20px 0px 20px;; border-radius: 10px; }
  .services-banner .banner-img { height: 210px; }
  .services-content {
    left: 4%;
    transform: translateX(-50%);
    bottom: 16px;
    text-align: left;
    padding: 0 10px;
  }
  .services-content h2 { font-size: 1.3rem; font-weight: 600; }
  .services-content p { font-size: 0.7rem; }
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f8f9fa;
  }
  
  .plans-section {
    padding: 20px;
    max-width: 1500px;
    margin: 0 auto;
    /* Single background image for the whole two-column area */
    background-image: url('./assets/images/testi.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
  }
  .plans-sections {
    padding: 15px;
    max-width: 1800px;
    margin: 0 auto;
    /* Single background image for the whole two-column area */
    /* background-image: url('./assets/images/testi.png'); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
  }

  /* Duplicate of container for services-only usage */
  .container-new {
    width: 100%;
    padding-right: 2px;
    padding-left: 2px;
    margin-right: auto;
    max-width: 1500px;
    margin-left: auto;
  }
  /* @media (min-width: 576px) {
    .container-new { max-width: 540px; }
  }
  @media (min-width: 768px) {
    .container-new { max-width: 720px; }
  }
  @media (min-width: 992px) {
    .container-new { max-width: 960px; }
  } */
  @media (min-width: 1200px) {
    .container-new { max-width: 1140px; }
  }
  @media (min-width: 1400px) {
    .container-new { max-width: 1300px; }
  }
  
  /* Width/padding adjustments only for the requested ranges */
  @media (min-width: 300px) and (max-width: 600px) {
    .container-new { padding-left: 12px; padding-right: 12px; }
    .plans-content { padding-left: 8px; padding-right: 8px; }
  }

  @media (min-width: 991px) and (max-width: 1240px) {
    .container-new { max-width: 1180px; padding-left: 16px; padding-right: 16px; }
    .plans-container { gap: 16px; }
  }
  .plans-container {
    display: flex;              /* keep two columns */
    align-items: stretch;       /* equal height columns */
    gap: 20px;
    max-width: 1350px;
    margin: auto;
  }
  
  .plans-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* no individual background/color here */
    min-height: 560px;          /* equal height with right */
    align-self: stretch;        /* force equal height */
    height: 100%;
    justify-content: flex-start; /* allow pushing help-box to bottom */
  }
  
  .plan-btn {
    padding: 12px;
    background: #ddd;
    border: none;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    border-left: 4px solid transparent;
    position: relative;
  }
  
  .plan-btn.active {
    background: #0072ff;
    color: #fff;
    border-left: 6px solid #ffd600; /* Yellow border when active */
  }
  
  .help-box {
    background: #000;
    color: #fff;
    border-radius: 0px;
    overflow: hidden;
    margin-top: auto;           /* stick to bottom to balance height */
    min-height: 480px;          /* readable area without forcing column taller */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  /* Align content to bottom */
    flex-shrink: 0;             /* avoid shrinking causing jumps */
  }
  
  .help-box img {
    width: 100%;
    display: block;
  }
  
  .help-content {
    padding: 30px 20px; /* More padding for visual height */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to bottom */
    text-align: center;
  }
  
  .help-content h3 {
    margin: 0 0 16px;
    font-size:xx-large;
  }
  
  .phone {
    font-weight: bold;
    margin-top: 10px;
    font-size:larger;
  }
  
  .plans-content {
    flex: 2;
    /* no individual background/color here */
    text-align: center;
    min-height: 560px;   
    padding: 0px 0px 0px 22px;       /* equal height with left */
    display: flex;
    flex-direction: column;
    align-self: stretch;        /* force equal height */
    height: 100%;
  }

  .banner {
    margin-bottom: 24px; /* Add space below the plan image/banner */
  }
  
  .banner img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
  }

/* ===== Responsive: Plans Section (match banner style of hardcoded margins) ===== */
@media (max-width: 1290px) {
  .plans-section { margin: 15px 45px 0 45px; }
  .plans-container { gap: 16px; }
  .banner img { height: 260px; }
}

/* ===== Responsive: OUR PLANS section (scoped to .plans-sections) ===== */
@media (max-width: 1290px) {
  .plans-sections { margin: 15px 0px 0 0px; }
}

@media (max-width: 991px) {
  .plans-sections { margin: 15px 45px 0 45px; }
  .plans-sections .plans-scroll { gap: 16px; }
}

@media (max-width: 600px) {
  .plans-sections { margin: 9px 5px 0 5px; border-radius: 10px; }
  .plans-sections .plans-scroll { gap: 12px; }
}

@media (max-width: 991px) {
  .plans-section { margin: 15px 45px 0 45px; }
  .plans-container { flex-direction: column; }
  .plans-sidebar,
  .plans-content { min-height: auto; height: auto; }
  .plans-content { padding: 0 0px; }
  .banner img { height: 240px;  }
  #planTitle { font-size: 28px; text-align: left; }
  #planDesc { font-size: 15px; }
  .months-box { padding: 18px; }
  .cta-box { gap: 12px; justify-content: center; }
}

@media (max-width: 600px) {
  .plans-section { margin: 9px 5px 0 5px; border-radius: 10px; }
  .plans-container { gap: 12px; }
  .banner img { height: 200px; }
  #planTitle { font-size: 22px; text-align: left; }
  #planDesc { font-size: 14px; }
  .plan-btn { padding: 10px 14px; }
  .cta-box { gap: 10px; }
}

/* Fine-tuned mobile/tablet layout for 300px–640px width */
@media (max-width: 640px) {
  /* Keep section margins as pinned; only adjust inner layout */
  .plans-content { padding: 0 4px; }
  .months-box { padding: 16px 14px; border-radius: 8px; }

  /* Stack month toggles vertically and center */
  .month-btn { 
    display: inline-block;
    padding: 10px 18px;
    font-size: 16px;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .months-box .month-btn + .month-btn { margin-left: 0; }

  /* Description readability */
  #monthDesc, .month-desc { 
    font-size: 14px; 
    line-height: 1.6; 
    margin-top: 6px;
    text-align: left;
  }

  /* CTAs: full-width buttons stacked */
  .cta-box { 
    flex-direction: column; 
    align-items: stretch; 
    justify-content: center; 
    gap: 12px;
  }
  .cta-btn { 
    width: 90%; 
    justify-content: space-between; 
    padding: 12px 16px; 
    font-size: 16px; 
    border-radius: 8px; 
  }
  .cta-btn::after { width: 22px; height: 22px; }
}

  #planTitle {
    margin-top: 0;
    margin-bottom: 16px; /* Add space below the heading */
    display: block;
    font-size: 40px;
    font-weight: 400;
    text-align: left;
    text-transform: uppercase; /* All text should be capital letter */
  }


  #planDesc {
    margin-bottom: 24px; /* Add space below the description */
    display: block;
    text-align: justify;
  }
  
  .months-box {
    background: rgba(0,0,0,0.7) url('./assets/images/service/service-rightsection.webp') no-repeat center center;
    background-size: cover;
    color: #fff;
    padding: 25px;
    border-radius: 3px;
    /* margin-top: 20px; */
    text-align: center;
  }
  
  /* Top toggle buttons */
  .month-btn {
    padding: 2px 28px;
    margin-right: 22px;
    /* margin-bottom: 24px; */
    border-radius: 4px;
    font-size: 1.4rem;
    border: 1.5px solid rgb(255, 255, 255);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 200;
    letter-spacing: 0.25px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
    backdrop-filter: saturate(120%);
  }
  
  .month-btn.active {
    background: #1976f7;
    border-color: #1976f7;
    font-weight: 400;
    color: #ffffff;
  }

  .month-btn:not(.active):hover {
    background: rgba(255,255,255,0.12);
  }
  
  .month-desc{
    padding: 20px 0px 10px 0px;
  }

  .cta-box {
    margin-top: 20px;
    display: flex;
    gap: 16px;
    justify-content:space-between;
    
    /* align-items: center; */
    flex-wrap: wrap;
    text-align: center;
  }
  
  /* Bottom CTA buttons */
  .cta-btn {
    padding: 2px 12px;
    border: 1px solid rgba(255,255,255,0.92);
    border-radius: 2px;
    background: transparent;
    
    color: #ffffff;
    font-weight: 500;
    font-size: large;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.28);
    position: relative;
  }
  .cta-btns{
    background: #1976f7;
    border-color: #1976f7;
  }
  
  .cta-btn.primary {
    background: #1976f7;
    border-color: #1976f7;
  }
  
  .cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  }

  /* Right-side circular arrow icon for both CTAs */
  .cta-btn::after {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.95);
    background: url('/assets/images/Home/icons/right-arrow.png') no-repeat center/12px;
    filter: brightness(0) invert(1);
    display: inline-block;
  }
  
  /* Responsive */
  @media(max-width: 992px) {
    .plans-container {
      flex-direction: column;
      max-width: 100vw;
      width: 100%;
    }
    .plans-sidebar,
    .plans-content {
      min-height: 480px;
    }
  }
  .plan-btn {
    padding: 12px 16px;
    background: #ddd;
    border: none;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    position: relative; /* needed for arrow */
  }
  
  .plan-btn.active {
    background: #0072ff;
    color: #fff;
  }
  
  /* Arrow for active plan */
  .plan-btn.active::after {
    content: "➔"; /* Arrow symbol */
    position: absolute;
    right: 10px;   /* adjust spacing */
    font-size: 16px;
    color: #fff;   /* arrow color */
  }
  @media (max-width: 560px) {
    .plans-container {
      max-width: 100%;
      padding-left: 2px;
      padding-right: 2px;
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }
    .plans-sidebar,
    .plans-content {
      min-height: 380px;
    }
  }

  
/* --- Working Model Section Styles --- */
.working-model {
  background: #eaf4ff;
  padding: 10px 0;
}

/* Add background color to the whole section */
.working-model {
  background: #f6faff; /* Soft blue-tinted background, edit as desired */
  /* width: 100%; */
  /* padding: 60px 0; */
}

/* ===== Responsive: Working Model (follow margin-based pattern) ===== */
@media (max-width: 1290px) {
  .working-model { margin:20px 90px 0 60px; border-radius: 12px;width: 90%; }
}

/* Ensure image comes first and steps next below 1200px */
@media (max-width: 1200px) {
  .working-model-left {
    order: 1;
    width: 100%;
    flex: 1 1 100%;
  }
  .working-model-right {
    order: 2;
    width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width: 991px) {
  .working-model { margin: -10px 10px 0 35px; }
}

@media (max-width: 600px) {
  .working-model { margin: 10px 20px 0 20px; border-radius: 10px; }
  
}

/* Desktop: two-column layout */
.working-model-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box;
}

.working-model-mains {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.working-model-left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px; /* Add padding top to help center the image vertically */
}

.working-model-left img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 550px;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

.working-model-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  padding: 0px 0 0 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  width: auto;
}

.section-title {
  font-size: 26px;
  font-weight: bold;
  color: #0072ff;
  /* margin-bottom: 10px; */
  text-align: center;
}

/* New: exact copy of section-title styling for reuse without altering existing design */
.section-title-v2 {
  font-size: 26px;
  font-weight: bold;
  color: #0072ff;
  text-align: center;
}

/* Same design as section-title but guaranteed with no underline/decoration */
.section-title-clean {
  font-size: 26px;
  font-weight: bold;
  color: #0072ff;
  text-align: center;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove any decorative underline lines added via pseudo-elements or borders */
.working-model .section-title,
.working-model .section-title::before,
.working-model .section-title::after {
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  content: none !important;
}

.section-desc {
  font-size: 16px;
  margin-bottom: 40px;
  color: #333;
  text-align: center;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  position: relative;
}

.steps::before {
  content: "";
  position: absolute;
  top: 42px;
  left: 32px;
  width: 2.5px;
  height: calc(100% - 150px);
  background: #b6d8ff;
  z-index: 0;
  border-radius: 2px;
}

.step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  max-width: 700px;
  /* background: #fff; */
  box-shadow: 0 2px 10px rgba(18, 51, 102, 0.05);
  border-radius: 12px;
  padding: 16px 18px 16px 0;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  min-height: 92px;
}

.step-icon {
  background: #fff;
  color: #d5d5d5;
  font-size: 22px;
  font-weight: 500;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  border: 2.5px solid #1976d2;
  margin-left: 15px;
  margin-top: 4px;
  position: relative;
}
.step-icon:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.step-content {
  max-width: 90%;
  margin-left: 8px;
  text-align: center;
}

/* MOBILE/TABLET CARD HIGHLIGHT AND BOLDNESS */
.step-number {
  font-size: 10px;
  font-weight: 600;
  color: #6b7a90;
  margin: 0 0 2px 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: block;
}

.step-title {
  font-size: 23px;
  font-weight: 600;
  margin: 2.5px 0 6px 0;
  color: #000000;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.step-desc {
  font-size: 14px;
  color: #808080;
  margin: 0;
  font-weight: 400;
  line-height: 1.55;
}

/* Tablet & Mobile */
@media (max-width: 991px) {
  .working-model {
    background: #f6faff;
    padding: 38px 0;
  }
  .working-model-container {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 28px;
    padding: 0 5vw;
    max-width: 100%;
  }

  .working-model-left {
    width: 100%;
    order: 1;
    text-align: center;
    margin-bottom: 14px;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .working-model-left img {
    width: 115%;
    max-width: 335px;
    min-width: 225px;
    margin: 0 0 10px -6px;
    border-radius: 16px;
    box-shadow: 0 2.5px 9px rgba(0, 0, 0, 0.08);
    aspect-ratio: 1.1/1;
    object-fit: cover;
    object-position: center;
  }

  .working-model-right {
    order: 2;
    width: 100%;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    align-items: flex-start;
    margin-top: 0;
  }

  .section-title {
    font-size: 22px;
    color: #0072ff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }

  .section-desc {
    font-size: 14px;
    margin-bottom: 18px;
    color: #416087;
  }

  .steps {
    gap:  px;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
  }

  .steps::before {
    left: 21px;
    top: 49px;
    height: calc(100% - 150px);
    width: 2px;
    background: #b6d8ff;
  }

  .step {
    gap: 14px;
    max-width: 99vw;
    /* background: #fff; */
    box-shadow: 0 2px 10px rgba(18, 51, 102, 0.06);
    border-radius: 13px;
    padding: 15px 14px 14px 0;
    margin-bottom: 3px;
    min-height: 85px;
    align-items: flex-start;
    width: 100%;
  }

  .step-icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    font-size: 17px;
    border-radius: 7px;
    border: 2.5px solid #1976d2;
    color: #dcdcdc;
    background: #fff;
    margin-left: 6px;
    margin-top: 3px;
    box-shadow: 0 2px 8px rgba(25,118,210,0.12);
  }

  .step-content {
    margin-left: 5px;
    max-width: 92%;
  }
  .step-number {
    font-size: 13.8px;
    font-weight: 700;
    margin-bottom: 1px;
  }
  .step-title {
    font-size: 17px;
    font-weight: 800;
    margin: 3px 0 4px 0;
  }
  .step-desc {
    font-size: 14px;
    margin: 0;
    color: #405679;
  }
}

/* Mobile (≤600px) */
@media (max-width: 600px) {
  .working-model {
    padding: 28px 0;
  }

  .working-model-left img {
    width: 100vw;
    min-width: 180px;
    max-width: 98vw;
    margin-left: -5px;
    margin-bottom: 8px;
    border-radius: 13px;
    box-shadow: 0 2.5px 9px rgba(0, 0, 0, 0.09);
  }

  .working-model-right {
    width: 100%;
    padding: 0;
  }

  .section-title {
    font-size: 18.8px;
    margin-bottom: 7px;
    font-weight: 700;
  }

  .section-desc {
    font-size: 12.4px;
    margin-bottom: 13px;
  }

  .steps {
    gap: 11px;
    padding: 0;
  }

  .steps::before {
    left: 12px;
    top: 37px;
    width: 1.8px;
    height: calc(100% - 150px);
    background: #b6d8ff;
  }

  .step {
    gap: 10px;
    /* background: #fff; */
    border-radius: 10px;
    /* box-shadow: 0 2px 8px rgba(24, 55, 92, 0.10); */
    padding: 12px 9px 10px 0;
    min-height: 59px;
  }

  .step-icon {
    width: 25px;
    min-width: 25px;
    height: 25px;
    font-size: 13px;
    border-radius: 6px;
    border-width: 2px;
    color: #ffffff;
    background: #fff;
    margin-left: 0;
    margin-top: 1.5px;
  }

  .step-content {
    margin-left: 2.5px;
    max-width: 95%;
  }
  .step-number {
    font-size: 13px;
    margin-bottom: 0.5px;
  }
  .step-title {
    font-size: 15px;
    font-weight: 800;
    margin: 1.5px 0 3px 0;
  }
  .step-desc {
    font-size: 12.1px;
    color: #3d5470;
    margin: 0;
  }
}

/* Landscape Fix for Tablet & Mobile */
@media (orientation: landscape) and (max-width: 991px) {
  .working-model-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 2vw;
  }

  .working-model-left,
  .working-model-right {
    width: 98%;
    min-width: 0;
  }

  .working-model-left img {
    width: 70vw;
    max-width: 490px;
    min-width: 180px;
  }

  .working-model-right {
    margin-top: 6px;
    padding: 0;
  }
}





  :root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#6b7280;
    --star:#fbbf24;
    --shadow:0 18px 40px rgba(2,6,23,.12);
    --radius:14px;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
  }
  
  .wrap{
    max-width:1180px;
    margin-inline:auto;
    padding:56px 20px 80px;
  }
  .section-head{ margin-bottom:26px; }
  .eyebrow{
    letter-spacing:.08em;
    font-weight:800;
    font-size:26px;
    color:#1e3a8a;
    margin:0 0 10px;
  }
  .sub{
    margin:0;
    font-size:18px;
    color:#667085;
    max-width:900px;
  }
  
  .grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:22px;
    margin-top:26px;
  }
  
  .card{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px;
    display:flex;
    flex-direction:column;
    min-height:240px;
  }
  .stars{
    font-size:18px;
    color:var(--star);
    margin-bottom:12px;
  }
  .quote{
    font-size:14px;
    color:#1f2937;
    margin:0 0 18px;
  }
  
  /* === updated footer (no bg, no line) === */
  .card-footer{
    margin-top:auto;
    display:flex;
    align-items:center;
    gap:12px;
    background:none;   /* remove bg */
    border-top:none;   /* remove line */
    padding:0;
  }
  .avatar{
    width:36px;height:36px;border-radius:50%;
    object-fit:cover;
    display:block;
  }
  .person{
    display:flex;flex-direction:column;gap:2px;
  }
  .name{
    font-weight:700;
    font-size:14px;
  }
  .meta{
    font-size:12px;color:var(--muted);
  }
  
  @media (max-width: 1100px){
    .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
  @media (max-width: 820px){
    .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (max-width: 560px){
    .wrap{ padding:36px 16px 60px; }
    .eyebrow{ font-size:22px; }
    .sub{ font-size:13px; }
    .grid{ grid-template-columns: 1fr; }
  }
  
/* ===== Popup Styling ===== */
.bmz-popup-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bmz-popup-overlay.bmz-active {
  display: flex;
  opacity: 1;
}

.bmz-popup-box {
  background: #fff;
  border-radius: 14px;
  width: min(750px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 25px 24px 40px; /* reduced padding for tighter layout */
  position: relative;
  animation: bmz-pop-in 0.3s ease both;
}

@keyframes bmz-pop-in {
  from { transform: translateY(40px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.bmz-popup-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: #f3f3f3;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #111;
}

.bmz-popup-title {
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
  color: #0d6efd;
}

/* --- Form Styling --- */
.popup-form .form-control,
.popup-form .form-select {
  border-radius: 10px;
  padding: 10px 12px;
}

.popup-form label.form-label {
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: 500;
  color: #333;
}

/* 🔹 Reduce vertical spacing between fields */
.popup-form .row.g-3 {
  row-gap: 0.8rem;
}

.popup-form .col-md-6,
.popup-form .col-12 {
  margin-bottom: 6px;
}

/* 🔹 Align Branch field neatly to the right */
.popup-form .col-md-6.ms-auto {
  margin-left: auto !important;
}

/* 🔹 Refine message box spacing */
.popup-form textarea.form-control {
  min-height: 100px;
  resize: none;
}

/* 🔹 Submit button - sticky and visible */
.popup-form button {
  border-radius: 8px;
  position: sticky;
  bottom: 10px;
  z-index: 5;
  background: #0d6efd;
  color: white;
  font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .bmz-popup-box {
    width: 92vw;
    padding: 22px 16px 45px;
  }

  .bmz-popup-title {
    font-size: 20px;
  }

  .popup-form .row {
    gap: 0.5rem;
  }

  .popup-form .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Landscape Tablet Fix */
@media (orientation: landscape) and (max-width: 991px) {
  .bmz-popup-box {
    width: 80vw;
    max-height: 85vh;
  }
}



/* Jost Font Family for All Services Page Sections */
body,
.services-banner,
.plans-section,
.working-model,
footer {
  font-family: 'Jost', Arial, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif !important;
}