/* =========================================================
   assets/css/medical-information.css
   Page: Medical Information Call Centre
   ✅ Scoped ONLY to: body.dv-mi-page
   ✅ Fixes:
   - Clean hero (center title + subtitle + breadcrumb)
   - Left image + right content aligned (equal height feel)
   - Premium highlight box ("Every inquiry handled...")
   - Capability cards modern + consistent
   - No overflow / no empty right space
   - Responsive: stacks properly on mobile
========================================================= */

/* Some templates hide WOW content */
.dv-mi-page .wow { visibility: visible !important; opacity: 1 !important; }

/* -------------------------
   Page Variables
-------------------------- */
.dv-mi-page{
  --dv-mi-bg:#f6fbfa;
  --dv-mi-white:#ffffff;
  --dv-mi-ink:#132a2a;
  --dv-mi-muted:#5b6f6f;

  --dv-mi-brand:#29b88b;
  --dv-mi-brand-2:#16a57a;
  --dv-mi-accent:#0b3b2f;

  --dv-mi-line: rgba(16, 80, 68, .14);
  --dv-mi-shadow: 0 18px 50px rgba(16, 80, 68, .14);
  --dv-mi-shadow-soft: 0 10px 26px rgba(16, 80, 68, .12);

  --dv-mi-radius-lg: 22px;
  --dv-mi-radius-md: 16px;

  --dv-mi-container: 1180px;
}

/* Prevent horizontal overflow globally for this page */
.dv-mi-page,
.dv-mi-page *{
  box-sizing: border-box;
}
.dv-mi-page{
  background: var(--dv-mi-bg);
  overflow-x: hidden;
}

/* Improve base typography inside the page */
.dv-mi-page .medi-info-content-section,
.dv-mi-page .page-title-area{
  color: var(--dv-mi-ink);
}

/* -------------------------
   HERO (Page Title Area)
-------------------------- */
.dv-mi-page .page-title-area{
  position: relative;
  padding: 120px 0 46px;
  overflow: hidden;
  background: #0c1f1b; /* fallback */
}

/* Background image wrapper */
.dv-mi-page .page-title-area .hero-background-wrapper{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dv-mi-page .page-title-area .hero-background-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

/* Overlay */
.dv-mi-page .page-title-area .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(59, 59, 59, 0.82) 0%, rgba(87, 88, 88, 0.55) 55%, rgba(10,22,20,.45) 100%);
}

/* Centered content */
.dv-mi-page .page-title-area .container{
  position: relative;
  z-index: 2;
  max-width: var(--dv-mi-container);
}
.dv-mi-page .page-title-content.medi-info-header{
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

/* Title */
.dv-mi-page .page-title-content.medi-info-header h2{
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  margin: 0 0 10px;
}

/* Subtitle */
.dv-mi-page .page-title-content .hero-subtitle{
  color: rgba(255,255,255,.88);
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.6;
  margin: 0 auto 18px;
  max-width: 820px;
}

/* Breadcrumb */
.dv-mi-page .breadcrumb-wrapper{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}

.dv-mi-page .breadcrumb-wrapper ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  gap: 12px;
  align-items: center;
}
.dv-mi-page .breadcrumb-wrapper ul li{
  color: rgba(255,255,255,.82);
  font-size: 13px;
  position: relative;
  padding-right: 14px;
}
.dv-mi-page .breadcrumb-wrapper ul li:last-child{
  padding-right: 0;
}
.dv-mi-page .breadcrumb-wrapper ul li:not(:last-child)::after{
  content: "›";
  position: absolute;
  right: 3px;
  top: 0;
  color: rgba(255,255,255,.55);
}
.dv-mi-page .breadcrumb-wrapper a{
  color: rgba(255,255,255,.9);
  text-decoration: none;
}
.dv-mi-page .breadcrumb-wrapper a:hover{
  color: #fff;
  text-decoration: underline;
}
.dv-mi-page .breadcrumb-wrapper .active{
  color: rgba(255,255,255,.95);
  font-weight: 700;
}

/* -------------------------
   MAIN CONTENT SECTION
-------------------------- */
.dv-mi-page .medi-info-content-section{
  padding: 56px 0 10px;
}
.dv-mi-page .medi-info-content-section .container{
  max-width: var(--dv-mi-container);
}

/* Two-column grid */
.dv-mi-page .medi-info-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: stretch;
}

/* Left image */
.dv-mi-page .feature-image-wrapper{
  position: relative;
  border-radius: var(--dv-mi-radius-lg);
  overflow: hidden;
  background: #0d201c;
  box-shadow: var(--dv-mi-shadow);
  min-height: 520px; /* keeps left big like screenshot */
}
.dv-mi-page .feature-image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.01);
}

/* Badge top-left */
.dv-mi-page .feature-overlay{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}
.dv-mi-page .feature-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--dv-mi-brand), var(--dv-mi-brand-2));
  box-shadow: 0 14px 30px rgba(22,165,122,.28);
}

/* Right details card */
.dv-mi-page .details-card{
  height: 100%;
  background: var(--dv-mi-white);
  border-radius: var(--dv-mi-radius-lg);
  border: 1px solid var(--dv-mi-line);
  box-shadow: var(--dv-mi-shadow-soft);
  padding: 26px 26px 24px;
}

/* Headings line style like screenshot */
.dv-mi-page .details-card > h2{
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 12px;
  letter-spacing: .2px;
  position: relative;
  padding-bottom: 12px;
}
.dv-mi-page .details-card > h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 78%;
  height: 3px;
  background: var(--dv-mi-brand);
  border-radius: 99px;
}

/* Highlight intro box */
.dv-mi-page .intro-highlight{
  margin: 16px 0 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(41,184,139,.10);
  border-left: 5px solid var(--dv-mi-brand);
}
.dv-mi-page .intro-highlight p{
  margin: 0;
  font-size: 16px;
  color: var(--dv-mi-ink);
}
.dv-mi-page .intro-highlight strong{
  font-weight: 900;
}

/* Lead paragraph */
.dv-mi-page .lead-paragraph{
  color: var(--dv-mi-muted);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 0 18px;
}

/* Section titles */
.dv-mi-page .capabilities-title,
.dv-mi-page .integration-title{
  margin: 18px 0 14px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
  position: relative;
  padding-bottom: 10px;
}
.dv-mi-page .capabilities-title::after,
.dv-mi-page .integration-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 60%;
  height: 3px;
  background: var(--dv-mi-brand);
  border-radius: 99px;
}

/* Capability grid */
.dv-mi-page .capabilities-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Capability item card */
.dv-mi-page .capability-item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(16,80,68,.14);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dv-mi-page .capability-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(16,80,68,.12);
  border-color: rgba(41,184,139,.35);
}

/* Icon bubble (emoji in your HTML) */
.dv-mi-page .capability-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(41,184,139,.12);
  border: 1px solid rgba(41,184,139,.22);
  font-size: 18px;
  flex: 0 0 44px;
}

/* Capability text */
.dv-mi-page .capability-content h4{
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 900;
  color: var(--dv-mi-ink);
}
.dv-mi-page .capability-content p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dv-mi-muted);
}

/* Integration badges */
.dv-mi-page .integration-section{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(16,80,68,.10);
}
.dv-mi-page .integration-badge{
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  margin: 0 8px 10px 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--dv-mi-accent);
  background: rgba(41,184,139,.10);
  border: 1px solid rgba(41,184,139,.18);
}
.dv-mi-page .integration-section p{
  margin: 8px 0 0;
  color: var(--dv-mi-muted);
  line-height: 1.7;
  font-size: 14.5px;
}

/* -------------------------
   CTA SECTION (Block a Meeting)
-------------------------- */
.dv-mi-page .medi-info-cta-section{
  padding: 42px 0 80px;
}
.dv-mi-page .medi-info-cta-section .container{
  max-width: var(--dv-mi-container);
}
.dv-mi-page .medi-info-cta-section .cta-card{
  border-radius: var(--dv-mi-radius-lg);
  overflow: hidden;
  box-shadow: var(--dv-mi-shadow);
  border: 1px solid rgba(255,255,255,.18);
}

/* Button refinement */
.dv-mi-page .medi-info-btn{
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
}

/* -------------------------
   RESPONSIVE
-------------------------- */
@media (max-width: 991px){
  .dv-mi-page .page-title-area{
    padding: 110px 0 40px;
  }
  .dv-mi-page .medi-info-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dv-mi-page .feature-image-wrapper{
    min-height: 360px;
  }
  .dv-mi-page .capabilities-grid{
    grid-template-columns: 1fr;
  }
  .dv-mi-page .details-card > h2{
    font-size: 26px;
  }
}

@media (max-width: 576px){
  .dv-mi-page .details-card{
    padding: 18px 16px;
  }
  .dv-mi-page .breadcrumb-wrapper{
    padding: 9px 12px;
  }
  .dv-mi-page .breadcrumb-wrapper ul li{
    font-size: 12px;
  }
}
/* =========================================================
   HERO FIX: Increase Height + Strong Overlay
   (Paste at END of medical-information.css)
========================================================= */

/* Increase hero height */
.dv-mi-page .page-title-area{
  position: relative;
  padding: 160px 0 80px;          /* ✅ taller */
  min-height: 520px;              /* ✅ fixed hero height */
  display: flex;                  /* ✅ keeps content vertically centered */
  align-items: center;
  overflow: hidden;
  background: #0c1f1b;            /* fallback */
}

/* Background image stays full */
.dv-mi-page .page-title-area .hero-background-wrapper{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dv-mi-page .page-title-area .hero-background-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);         /* slightly zoom for premium look */
}

/* ✅ Strong overlay for better readability */
.dv-mi-page .page-title-area .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .78) 0%,
      rgba(0, 0, 0, .55) 50%,
      rgba(0, 0, 0, .40) 100%
    );
}

/* Optional: add soft vignette for premium look */
.dv-mi-page .page-title-area::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(circle at center,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.35) 70%,
    rgba(0,0,0,.55) 100%
  );
}

/* Keep content above overlay */
.dv-mi-page .page-title-area .container{
  position: relative;
  z-index: 2;
  max-width: var(--dv-mi-container);
}

/* Make title/subtitle more readable */
.dv-mi-page .page-title-content.medi-info-header h2{
  color:#fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.dv-mi-page .page-title-content .hero-subtitle{
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 30px rgba(0,0,0,.40);
}

/* Responsive hero height */
@media (max-width: 991px){
  .dv-mi-page .page-title-area{
    padding: 130px 0 70px;
    min-height: 440px;
  }
}
@media (max-width: 576px){
  .dv-mi-page .page-title-area{
    padding: 110px 0 60px;
    min-height: 380px;
  }
}
/* =========================================================
   CTA BUTTON – Block a Meeting (Premium Right-Aligned)
========================================================= */

/* CTA container layout */
.dv-mi-page .medi-info-cta-section .cta-content{
  display: flex;
  align-items: center;
  justify-content: space-between;   /* text left, button right */
  gap: 24px;
  flex-wrap: wrap;
}

/* Button wrapper */
.dv-mi-page .medi-info-cta-section .cta-action{
  flex-shrink: 0;
}

/* Button base */
.dv-mi-page .medi-info-btn{
  background: linear-gradient(135deg, #29b88b, #16a57a);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 14px;
  border: none;
  box-shadow:
    0 12px 30px rgba(41,184,139,.45),
    inset 0 0 0 1px rgba(255,255,255,.15);
  transition: all .25s ease;
  white-space: nowrap;
  position: relative;
}

/* Hover effect */
.dv-mi-page .medi-info-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(41,184,139,.55),
    inset 0 0 0 1px rgba(255,255,255,.25);
  background: linear-gradient(135deg, #2ed39a, #18c08c);
}

/* Active click */
.dv-mi-page .medi-info-btn:active{
  transform: translateY(0);
  box-shadow:
    0 10px 24px rgba(41,184,139,.35);
}

/* Optional subtle arrow glow (visual cue like screenshot) */
.dv-mi-page .medi-info-btn::after{
  content: "→";
  margin-left: 10px;
  font-weight: 700;
  opacity: .9;
}

/* Responsive: center button on mobile */
@media (max-width: 768px){
  .dv-mi-page .medi-info-cta-section .cta-content{
    flex-direction: column;
    align-items: flex-start;
  }

  .dv-mi-page .medi-info-btn{
    margin-top: 12px;
  }
}
/* =========================================================
   CTA FIX: Keep text LEFT + button RIGHT (Premium)
========================================================= */

/* Make CTA content a 2-column layout */
.dv-mi-page .medi-info-cta-section .cta-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap; /* ✅ stop splitting left/right text */
}

/* Left text area (title + subtitle stacked) */
.dv-mi-page .medi-info-cta-section .cta-content h2,
.dv-mi-page .medi-info-cta-section .cta-content p{
  width: 100%;
  text-align: left !important; /* ✅ force left align */
}

/* Force subtitle under title */
.dv-mi-page .medi-info-cta-section .cta-content{
  flex-direction: row;
}
.dv-mi-page .medi-info-cta-section .cta-content .cta-description{
  margin-top: 10px;
  opacity: .85;
}

/* Create a text group (no HTML change needed) */
.dv-mi-page .medi-info-cta-section .cta-content{
  position: relative;
}

/* Keep button on right */
.dv-mi-page .medi-info-cta-section .cta-action{
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Button stays same (your current button design) */
.dv-mi-page .medi-info-btn{
  background: linear-gradient(135deg, #29b88b, #16a57a);
  color: #fff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 26px !important;
  border-radius: 14px !important;
  border: none;
  box-shadow: 0 12px 30px rgba(41,184,139,.45),
              inset 0 0 0 1px rgba(255,255,255,.15);
  transition: all .25s ease;
  white-space: nowrap;
}

/* Hover */
.dv-mi-page .medi-info-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(41,184,139,.55),
              inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Arrow */
.dv-mi-page .medi-info-btn::after{
  content: "→";
  margin-left: 10px;
  font-weight: 700;
  opacity: .9;
}

/* ✅ Mobile: stack button below text */
@media (max-width: 768px){
  .dv-mi-page .medi-info-cta-section .cta-content{
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
  }

  .dv-mi-page .medi-info-cta-section .cta-action{
    margin-left: 0;
    margin-top: 14px;
  }
}
/* =========================================================
   FINAL CTA FIX: Title + Subtitle LEFT (stacked) + Button RIGHT
   (No HTML change needed)
========================================================= */

.dv-mi-page .medi-info-cta-section .cta-content{
  display: grid !important;
  grid-template-columns: 1fr auto;   /* left text | right button */
  grid-template-rows: auto auto;     /* title row | subtitle row */
  column-gap: 26px;
  row-gap: 10px;
  align-items: center;
}

/* Title stays top-left */
.dv-mi-page .medi-info-cta-section .cta-content h2{
  grid-column: 1;
  grid-row: 1;
  margin: 0 !important;
  text-align: left !important;
}

/* Subtitle stays under title (left) */
.dv-mi-page .medi-info-cta-section .cta-content p{
  grid-column: 1;
  grid-row: 2;
  margin: 0 !important;
  text-align: left !important;
  opacity: .85;
}

/* Button stays on right, vertically centered */
.dv-mi-page .medi-info-cta-section .cta-action{
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  margin: 0 !important;
}

/* Mobile: stack everything */
@media (max-width: 768px){
  .dv-mi-page .medi-info-cta-section .cta-content{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .dv-mi-page .medi-info-cta-section .cta-action{
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    margin-top: 12px !important;
  }
}