/* Ensure the hero layout behaves properly with carousel items */
.custom-hero-section .carousel-item {
  min-height: 75vh;
  /* Sets a base height constraint */
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Vertical padding adjustments so the content floats cleanly */
.custom-hero-section .min-vh-75 {
  min-height: 100vh;
}

/* Style the bottom navigation dots to match a clean look */
.custom-hero-section .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  /* Converts standard bars into modern dots */
  background-color: #ffffff;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.custom-hero-section .carousel-indicators .active {
  opacity: 1;
  background-color: #3b82f6;
  /* Use your primary theme color here */
}







/* ==========================================
   HEADER SECTION STYLES
   ========================================== */
/* ==========================================================================
   BASE COMPRESSED STYLES (Default Inner Pages Variant - Ref: Image 2)
   ========================================================================== */
.custom-header {
  position: relative;
  background-color: #f1f5f9;
  padding: 8px 0;
  /* Compressed from 15px to reduce overall vertical height */
  z-index: 997;
  transition: all 0.3s ease-in-out;
}

/* Site Name Branding Text */
.sitename {
  font-size: 21px;
  /* Slightly scaled down to maximize center alignment space */
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.5px;
}

.brand-lamiya {
  color: #7f00ff;
}

.brand-hospital {
  color: #c41e8f;
}
.navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
/* Compressed Navigation Layout */
.navmenu ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  gap: 2px;
  /* Tightened gap to save major horizontal real estate */
}

.navmenu ul li a {
  display: block;
  font-size: 13.5px;
  /* Highly optimized scannable font size */
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 10px;
  /* Reduced from 14px to eliminate wide text gaps */
  position: relative;
  transition: color 0.2s ease;
}

/* Hover / Active Indicator Track Layout */
.navmenu ul li a:hover,
.navmenu ul li a.active {
  color: #7f00ff !important;
}

.navmenu ul li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 10px;
  background-color: #7f00ff;
  transition: width 0.2s ease;
}

.navmenu ul li a:hover::after,
.navmenu ul li a.active::after {
  width: calc(100% - 20px);
}

.mobile-nav-toggle {
  color: #334155;
  font-size: 24px;
  cursor: pointer;
}

/* Compressed Action Right-Hand Area Items */
.header-action-btns {
  gap: 10px;
  /* Snaps the buttons closer together */
}

.header-call-btn {
  /* color: #fff; */
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 7px 7px;
}

.header-call-btn i {
  font-size: 11px;
}

.header-call-btn:hover {
  color: #c41e8f;
}

.header-appointment-btn {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  color: #ffffff;
  padding: 6px 14px;
  /* Reduced padding for a tighter button look */
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.header-appointment-btn:hover {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  color: #ffffff;
}


/* ==========================================================================
   HOMEPAGE MODIFIER COMPRESSION OVERRIDES (.home-view - Ref: Image 1)
   ========================================================================== */


/* 1. TOP MODE: When you are at the very top of the page */
.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0);
  /* Completely transparent */
  backdrop-filter: blur(8px);
  box-shadow: none;
  transition: all 0.4s ease;
  /* This makes the color change smooth, not instant */
  z-index: 999;
}

/* Forces all your header text, site name, and links to be WHITE at the top */


.custom-header .navmenu a {
  /* color: #fff; */
  transition: color 0.4s ease;
}


/* 2. SCROLLED MODE: This triggers automatically when you scroll down */
.custom-header.scrolled {
  background: #ffffff !important;
  /* Changes header background to solid white */
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  /* Adds a small shadow under header */
}

/* Changes all your text and links to DARK GREY/BLACK when scrolling */
.custom-header.scrolled .sitename,
.custom-header.scrolled .sitename span,
.custom-header.scrolled .navmenu a,
.custom-header.scrolled .header-call-btn {
  color: #1e293b !important;
  /* Dark Slate Color */
}

.custom-header.home-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgb(15 23 42 / 0%);
  backdrop-filter: blur(8px);
  box-shadow: none;
}

.custom-header.home-view .brand-lamiya,
.custom-header.home-view .brand-hospital {
  color: #ffffff;
}

.custom-header.home-view .navmenu ul li a {
  color: rgba(255, 255, 255, 0.9);
}

.custom-header.home-view .navmenu ul li a::after {
  display: none !important;
  /* Hides inner page underline on hero track layout */
}

.custom-header.home-view .navmenu ul li a:hover,
.custom-header.home-view .navmenu ul li a.active {
  color: #c41e8f !important;
}

.custom-header.home-view .mobile-nav-toggle {
  color: #ffffff;
}

/* Home Action Button Styling Adjustments */
.custom-header.home-view .header-call-btn {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 12px;
  border-radius: 20px;
}

.custom-header.home-view .header-call-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.custom-header.home-view .header-appointment-btn {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  border-radius: 20px;
  padding: 6px 16px;
  box-shadow: 0 4px 12px rgba(255, 0, 127, 0.25);
}

/* ==========================================
   HERO SECTION STYLES
   ========================================== */



.custom-hero-section {
  position: relative;
  padding: 235px 0 120px 0;
  overflow: hidden;
}

/* Base setup for all slides to display images properly */
.custom-hero-section .carousel-item {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
}

/* Slide 1 Image Setup */
.custom-hero-section .slide-1 {
  background-image: url('../img/bg.jpg');
}

/* Slide 2 Image Setup */
.custom-hero-section .slide-2 {
  background-image: url('../img/bg-2\ \(1\).jpg');
  /* Make sure this image exists */
}

/* Slide 3 Image Setup */
.custom-hero-section .slide-3 {
  background-image: url('../img/bg-2\ \(2\).jpg');
  /* Make sure this image exists */
}


@media (max-width: 1199px) {

  /* 1. Force the navigation container block to display on mobile */
  #header .navmenu {
    display: block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    position: fixed;
    
  }

  /* 2. Bring the hamburger button back to life and position it safely */
  #header .mobile-nav-toggle {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 32px !important;
    /* color: #ffffff !important; */
    /* White icon over the dark hero section banner */
    cursor: pointer !important;
    z-index: 99999 !important;
    /* Force to topmost layer */
  }

  /* Turn hamburger dark if the header scrolls down and turns white */
  #header.scrolled .mobile-nav-toggle {
    color: #1e293b !important;
  }

  /* 3. Hide the desktop horizontal link row list items by default on mobile */
 
  /* ==========================================================================
     4. SHOW THE MENU DRILLDOWN (When the Hamburger is Clicked)
     ========================================================================== */

  /* When body gets the class, override the hidden state and style the listing panel */
  body.mobile-nav-active .navmenu ul {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 70px !important;
    /* Directly below your header height */
    right: 20px !important;
    left: 20px !important;
    padding: 20px !important;
    background-color: #ffffff !important;
    /* Clean white canvas card drawer dropdown */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
    z-index: 99998 !important;
    list-style: none !important;
    gap: 10px !important;
    height:75vh;
  }

  /* Style links inside the active mobile dropdown box container */
  body.mobile-nav-active .navmenu ul li a {
    color: #1e293b !important;
    /* Clear dark gray text text */
    font-size: 16px !important;
    font-weight: 500 !important;
    display: block !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    width: 100% !important;
  }

  body.mobile-nav-active .navmenu ul li a:hover {
    color: #3b82f6 !important;
    /* Accent color text hover focus state */
    background-color: #f8fafc !important;
    border-radius: 6px;
  }
}












.custom-hero-section .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* Welcome Badge */
.welcome-badge {
  display: inline-block;
}

.welcome-badge span {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Headings & Text */
.hero-title {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
}

.gradient-text {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  max-width: 600px;
}

/* Hero Action Buttons */
.btn-get-started {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  color: #fff;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-get-started:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 127, 0.4);
  color: #fff;
}

.btn-watch-video {
  color: #fff;
  border: 2px solid #fff;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
}

.btn-watch-video:hover {
  background: #ffffff;
  color: #000000 !important;
  transform: translateY(-2px);
}


/* ==========================================
   RESPONSIVE BREAKPOINTS (Mobile Fixes)
   ========================================== */
@media (max-width: 768px) {
  .custom-hero-section {
    padding: 160px 0 80px 0;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .btn-container {
    flex-direction: column;
    gap: 15px !important;
  }

  .btn-get-started,
  .btn-watch-video {
    text-align: center;
    justify-content: center;
    width: 100%;
  }
}

/* ==========================================
   SHARED UI ELEMENTS
   ========================================== */
.section-heading {
  font-weight: 700;
  font-size: 36px;
  color: #333;
}

.gradient-text {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.section-subtitle {
  color: #666;
  font-size: 16px;
  max-width: 600px;
  margin: 10px auto 0;
}


/* ==========================================
   DEPARTMENTS COMPONENT
   ========================================== */
.custom-dept-section {
  background-color: #f8f9fa;
  padding: 60px 0;
}

.dept-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.04);
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.dept-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
}

.dept-img {
  width: 85px;
  height: 110px;
  border-radius: 14px;
  object-fit: cover;
}

.dept-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.dept-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Individual Department Badges */
.dept-icon {
    width: 40px;
    height: 40px;
    background-color: #ffeef4;
    color: #c41e8f;
    border-radius: 6px;
    font-size: 21px;
    display: inline-flex;
  align-items: center;
  justify-content: center;
}


.icon-dermatology {
  background-color: #e0245e;
}



.icon-medicine {
  background-color: #6f42c1;
}

.icon-ortho {
  background-color: #0dcaf0;
}


/* ==========================================
   SERVICES COMPONENT
   ========================================== */
.custom-services-section {
  background-color: #ffffff;
  padding: 60px 0;
}

.service-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 15px;
  /* Added padding to isolate item bounds gracefully */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.07);
}

.service-img {
  overflow: hidden;
  border-radius: 4px;
}

.service-img img {
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-item:hover .service-img img {
  transform: scale(1.04);
}

.service-icon {
  width: 36px;
  height: 36px;
  background-color: #ffeef4;
  color: #c41e8f !important;
  border-radius: 6px;
  font-size: 18px;
}

.service-title {
  font-size: 18px;
  font-weight: 700;
  color: #222222;
  margin-bottom: 6px;
}

.service-desc {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 12px;
}

.service-link {
  color: #666666;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.service-link i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.service-item:hover .service-link {
  color: #c41e8f;
}

.service-item:hover .service-link i {
  transform: translateX(3px);
}

/* ==========================================================================
   GLOBAL UTILITIES & SHARED EMULATION
   ========================================================================== */
.section-heading {
  font-weight: 700;
  font-size: 36px;
  color: #333;
}

.section-heading.mt-0 {
  margin: 0;
}

.gradient-text {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ==========================================================================
   DOCTORS SECTION STYLES
   ========================================================================== */
.custom-doctors-section {
  background-color: #ffffff;
  padding: 60px 0;
}

.doctors-title-icon {
  width: 45px;
  height: 45px;
  background: #eedeff;
  color: #7f00ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.doctors-subtitle {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
  line-height: 1.4;
}

.trust-banner {
  background-color: #f1f5f9;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: start;
  gap: 12px;
}

.trust-icon {
  color: #7f00ff;
  font-size: 18px;
  margin-top: 2px;
}

.trust-title {
  font-weight: 700;
  font-size: 15px;
  color: #334155;
  margin-bottom: 4px;
}

.trust-desc {
  color: #64748b;
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
}

.featured-heading {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
}

.featured-sub {
  color: #777;
  font-size: 13px;
  margin: 0;
}

/* Doctor Cards Component */
.doctor-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.doctor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(30, 41, 59, 0.05);
}

.doctor-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
}

.badge-icon {
  position: absolute;
  top: 10px;
  right: -10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 2px solid #fff;
}

.doctor-name {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.doctor-specialty {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.doctor-experience {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 15px;
}

.btn-view-profile {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  padding: 6px 12px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  transition: all 0.2s ease;
}

.btn-view-profile:hover {
  background-color: #f8f9fa;
  color: #1e293b;
  border-color: #94a3b8;
}

.btn-view-profile i {
  font-size: 10px;
}

/* Specialty Color Matrix Modifiers */
.badge-dental {
  background: #ffeef4;
  color: #c41e8f;
}

.specialty-dental {
  color: #c41e8f;
}

.badge-ortho {
  background: #eef2ff;
  color: #007bff;
}

.specialty-ortho {
  color: #007bff;
}

.badge-endo {
  background: #e6fffa;
  color: #0d9488;
}

.specialty-endo {
  color: #0d9488;
}

.badge-prostho {
  background: #fff7ed;
  color: #ea580c;
}

.specialty-prostho {
  color: #ea580c;
}

.badge-perio {
  background: #fdf2f8;
  color: #db2777;
}

.specialty-perio {
  color: #db2777;
}

/* Explore Section Lower Banner */
.explore-banner {
  background-color: #eedeff;
  border-radius: 20px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.explore-icon-box {
  width: 45px;
  height: 45px;
  background: #fff;
  color: #7f00ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.explore-title {
  font-weight: 700;
  font-size: 16px;
  color: #1e293b;
  margin: 0;
}

.explore-desc {
  color: #64748b;
  font-size: 13px;
  margin: 4px 0 0 0;
}

.btn-explore-action {
  background: #3b82f6;
  color: #ffffff !important;
  border-radius: 50px;
  font-weight: 600;
  padding: 10px 24px;
  font-size: 14px;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  transition: background-color 0.2s ease;
}

.btn-explore-action:hover {
  background-color: #1d4ed8;
}

/* Analytics Counters */
.counter-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.counter-icon-box {
  width: 34px;
  height: 34px;
  background: #f1f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.counter-number {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.counter-label {
  color: #64748b;
  font-size: 11px;
  margin: 0;
}

.icon-purple {
  color: #7f00ff;
}

.icon-teal {
  color: #0d9488;
}

.icon-orange {
  color: #ea580c;
}

.icon-pink {
  color: #db2777;
}


/* ==========================================================================
   CONTACT SECTION STYLES
   ========================================================================== */
.custom-contact-section {
  background-color: #f8f9fa;
  padding: 60px 0;
}

.info-container {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.02);
}

.contact-heading {
  font-weight: 700;
  font-size: 36px;
  color: #1e293b;
  margin-bottom: 8px;
}

.contact-subtitle {
  color: #64748b;
  font-size: 15px;
  margin: 0;
}

/* Contact Info Items */
.info-icon {
  width: 36px;
  height: 36px;
  background: #ffeef4;
  color: #c41e8f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-icon.style-envelope {
  font-size: 14px;
}

.info-title {
  font-size: 15px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
}

.info-desc {
  color: #64748b;
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

.address-text {
  max-width: 320px;
}

/* Action Trigger Elements */
.btn-whatsapp-action {
  border: 1px solid #25d366;
  color: #25d366;
  background: transparent;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 50px;
  transition: all 0.3s ease;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.btn-whatsapp-action:hover {
  background: #25d366;
  color: #ffffff !important;
}

.btn-whatsapp-action i {
  font-size: 16px;
}

/* Map Components Layer Wrapper */
.map-wrapper {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  min-height: 380px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.02);
}

.google-maps-frame {
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
}

.btn-maps-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #3b82f6;
  color: #ffffff;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  transition: background-color 0.2s ease;
}

.btn-maps-overlay:hover {
  background-color: #2563eb;
  color: #ffffff;
}

.btn-maps-overlay i {
  font-size: 11px;
}

/* ==========================================================================
   RESPONSIVE DESIGN ADAPTATIONS
   ========================================================================== */
@media (max-width: 991.98px) {
  .explore-banner {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding: 20px;
  }

  .explore-content {
    flex-direction: column;
  }

  .btn-explore-action {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   SHARED DESIGN ELEMENTS
   ========================================================================== */
.gradient-text {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ==========================================================================
   CAREERS SECTION STYLES
   ========================================================================== */
.custom-careers-section {
  background-color: #ffffff;
  padding: 60px 0;
}

.careers-main-heading {
  font-weight: 700;
  font-size: 36px;
  color: #1e293b;
  margin-bottom: 8px;
}

.careers-lead-text {
  color: #64748b;
  font-size: 14px;
  max-width: 700px;
  margin: 10px auto 0;
  line-height: 1.6;
}

.careers-sub-heading {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 35px;
  margin-bottom: 0;
}

/* Department Grid Custom Cards */
.dept-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.dept-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(30, 41, 59, 0.05);
}

.dept-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.dept-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
  margin-top: 5px;
}

.dept-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 15px;
}

.btn-view-openings {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  padding: 6px 12px;
  width: 100%;
  background: transparent;
  transition: all 0.2s ease;
}

.btn-view-openings:hover {
  background-color: #f8fafc;
  border-color: #94a3b8;
  color: #1e293b;
}

/* Color Palette Matrix for Cards */
.icon-bg-purple {
  background-color: #eedeff;
}

.color-purple {
  color: #7f00ff;
}

.icon-bg-teal {
  background-color: #e6fffa;
}

.color-teal {
  color: #0d9488;
}

.icon-bg-blue {
  background-color: #e0f2fe;
}

.color-blue {
  color: #0284c7;
}

.icon-bg-orange {
  background-color: #fff7ed;
}

.color-orange {
  color: #ea580c;
}

.icon-bg-pink {
  background-color: #fdf2f8;
}

.color-pink {
  color: #db2777;
}

/* Lower Horizontal CTA Banner */
.careers-cta-banner {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.careers-cta-icon {
  width: 40px;
  height: 40px;
  background: #eedeff;
  color: #7f00ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.careers-cta-title {
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
  margin: 0;
}

.careers-cta-desc {
  color: #64748b;
  font-size: 12px;
  margin: 3px 0 0 0;
  line-height: 1.4;
}

.btn-careers-cta {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  color: #ffffff !important;
  border-radius: 50px;
  font-weight: 600;
  padding: 10px 24px;
  font-size: 13px;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.btn-careers-cta:hover {
  opacity: 0.9;
}


/* ==========================================================================
   FOOTER SECTION STYLES
   ========================================================================== */
.custom-footer {
  background-color: #0b1a30;
  color: #ffffff;
  padding: 60px 0 20px 0;
  font-family: 'Poppins', sans-serif;
}

.footer-top-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 40px;
}

/* Brand Widget Info Column */
.logo-box {
  width: 32px;
  height: 32px;
  background-color: #c41e8f;
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.logo-text {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.logo-sub {
  font-size: 11px;
  display: block;
  font-weight: 400;
  color: #94a3b8;
  margin-top: -1px;
}

.footer-brand-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 24px;
  margin-top: 15px;
}

/* Social Icon Blocks */
.footer-social-links a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.footer-social-links a:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.social-fb {
  background: #3b82f6;
}

.social-ig {
  background: #ec4899;
}

.social-in {
  background: #0077b5;
}

.social-yt {
  background: #ef4444;
}

.social-x {
  background: #111827;
}

/* Mid Columns Structure Navigation Lists */
.footer-widget-title {
  font-size: 12px;
  font-weight: 700;
  color: #c41e8f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.footer-link-list a {
  color: #94a3b8;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.footer-link-list a:hover {
  color: #ffffff;
  padding-left: 4px;
}

.footer-link-list a i {
  font-size: 10px;
  color: #c41e8f;
  margin-right: 6px;
}

/* Right Corner Contact Block */
.footer-contact-info .contact-icon {
  color: #c41e8f;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.footer-contact-info .contact-text {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.footer-contact-info .contact-email {
  word-break: break-all;
}

/* Bottom Socket Tier Items */
.footer-bottom-socket {
  font-size: 12px;
  color: #94a3b8;
  padding-top: 15px;
}

.motto-icon-box {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.05);
  color: #c41e8f;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.motto-text {
  font-size: 12px;
  color: #94a3b8;
}

.footer-copyright {
  font-size: 12px;
  color: #94a3b8;
}

.footer-legal-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-links a:hover {
  color: #fff;
}

.legal-separator {
  color: rgba(255, 255, 255, 0.15);
}


/* ==========================================================================
   RESPONSIVE LAYOUT & MOBILE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 991.98px) {

  /* Careers CTA Banner Alignment */
  .careers-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
  }

  .careers-cta-content {
    flex-direction: column;
  }

  .careers-cta-action-wrapper,
  .btn-careers-cta {
    width: 100%;
    justify-content: center;
  }

  /* Footer Layout Balancing */
  .footer-top-row {
    text-align: center;
  }

  .footer-logo,
  .footer-social-links,
  .footer-contact-info>div {
    justify-content: center !important;
  }

  .footer-contact-info .text-start {
    text-align: center !important;
  }

  .footer-widget-title {
    margin-top: 15px;
    margin-bottom: 12px;
  }

  .footer-bottom-socket {
    flex-direction: column;
    text-align: center;
    justify-content: center !important;
    gap: 15px !important;
  }

  .footer-motto {
    flex-direction: column;
    justify-content: center;
  }

  .footer-legal-links {
    justify-content: center;
  }
}

@media (max-width: 575.98px) {

  /* Ensure contact block breaks cleanly without text cropping */
  .footer-column-contact {
    padding-left: 15px;
    padding-right: 15px;
  }

  .footer-contact-info .contact-text {
    font-size: 13px;
  }
}

/* ==========================================================================
   CUSTOM HEADER & NAVIGATION BRANDING
   ========================================================================== */


/* Logo Typography & Branding Color Matrix */
.logo h1.sitename {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-lamiya {
  color: #d81b60;
  /* Deep gradient pink signature base from your presentation */
  font-size: 24px;
  font-weight: 800;
}

.brand-hospital {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  margin-top: 2px;
}



/* Responsive Overrides for Mobile Menu Integrity */
@media (max-width: 767.98px) {

  /* Hide specific action modules on ultra-small viewpoints to prevent overlap breakdown */
  .header-call-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ==========================================================================
   ABOUT LAMIYA VIEW COMPONENT STYLES
   ========================================================================== */
.custom-about-section {
  background-color: #ffffff;
  padding: 60px 0;
}

/* Header Text Blocks */
.about-main-title {
  font-size: 42px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 16px;
}

.about-lead-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #475569;
  max-width: 580px;
}

/* Building Showcase Image Container Frame */
.about-image-wrapper {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.building-showcase-img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Four Main Column Feature Cards Architecture */
.pillar-card {
  border: none;
  border-radius: 16px;
  padding: 28px 20px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-card:hover {
  transform: translateY(-4px);
}

.pillar-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px auto;
}

.pillar-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Colored Underlines for Section 2 Columns */
.pillar-underline {
  width: 50px;
  height: 3px;
  border-radius: 4px;
  margin: 0 auto 20px auto;
}

.pillar-body-text {
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

/* Checked List Sub-Items Modifiers (Column 2) */
.pillar-list-items {
  margin: 0;
  padding: 0;
}

.pillar-list-items li {
  font-size: 12.5px;
  line-height: 1.5;
  color: #475569;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pillar-list-items li i {
  color: #7f00ff;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Light Card Tint Background Variants */
.card-tint-maroon {
  background-color: #fff1f2;
}

.card-tint-purple {
  background-color: #faf5ff;
}

.card-tint-blue {
  background-color: #f0f9ff;
}

.card-tint-green {
  background-color: #f0fdf4;
}

/* Section 2 Color Mapping Setup */
.bg-maroon-light {
  background-color: #ffe4e6;
}

.color-maroon {
  color: #e11d48;
}

.title-maroon {
  color: #9f1239;
}

.line-maroon {
  background-color: #e11d48;
}

.bg-purple-light {
  background-color: #f3e8ff;
}

.color-purple {
  color: #9333ea;
}

.title-purple {
  color: #581c87;
}

.line-purple {
  background-color: #9333ea;
}

.bg-blue-light {
  background-color: #e0f2fe;
}

.color-blue {
  color: #0284c7;
}

.title-blue {
  color: #075985;
}

.line-blue {
  background-color: #0284c7;
}

.bg-green-light {
  background-color: #dcfce7;
}

.color-green {
  color: #16a34a;
}

.title-green {
  color: #166534;
}

.line-green {
  background-color: #16a34a;
}


/* ==========================================================================
   VALUES SECTION WITH UNDERLINE AND TRACK (SECTION 3)
   ========================================================================== */


/* ==========================================================================
   VALUES SECTION VERTICAL SEPARATORS (SECTION 3)
   ========================================================================== */
.values-ribbon-wrapper {
  background-color: #f8fafc;
  border-radius: 20px;
  padding: 30px 25px;
  border: 1px solid #f1f5f9;
}

/* Vertical line dividers rule for large screen formats */
@media (min-width: 992px) {
  .value-column-divider {
    position: relative;
  }

  /* Creates a clean vertical divider on the right edge of the column grid */
  .value-column-divider::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background-color: #cbd5e1;
    /* Subtle gray divider line border */
  }
}

/* Mobile responsive resets to clean up layout stacking rules */
@media (max-width: 991.98px) {
  .value-column-divider::after {
    display: none;
    /* Safely removes lines on tablet and mobile to prevent layout clash */
  }
}



.values-section-title {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

/* Section 3 Main Title Purple Underline styling */
.values-main-underline {
  width: 60px;
  height: 3.5px;
  background-color: #7f00ff;
  border-radius: 4px;
  margin: 0 auto;
}

/* Horizontal ribbon background tracking wrap */
.values-ribbon-wrapper {
  background-color: #f8fafc;
  border-radius: 20px;
  padding: 30px 25px;
  border: 1px solid #f1f5f9;
}

.value-mini-item {
  padding: 5px;
}

.value-mini-icon {
  font-size: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.value-mini-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
}

.value-mini-desc {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* Value Group Specific Colors Matrix */
.text-danger-custom {
  color: #e11d48;
}

.text-indigo-custom {
  color: #4f46e5;
}

.text-info-custom {
  color: #0284c7;
}

.text-success-custom {
  color: #16a34a;
}

.text-warning-custom {
  color: #ea580c;
}


/* ==========================================================================
   RESPONSIVE DESIGN CORRECTIONS
   ========================================================================== */
@media (max-width: 991.98px) {
  .header-showcase-row {
    text-align: center !important;
  }

  .about-lead-desc {
    margin: 0 auto;
  }

  .about-image-wrapper {
    margin-top: 15px;
  }

  .values-ribbon-wrapper {
    background-color: transparent;
    border: none;
    padding: 0;
  }

  .value-mini-item {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
  }
}

.about-title-underline {
  width: 70px;
  height: 4px;
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  border-radius: 4px;
  margin-bottom: 24px;
  /* Creates clean white space before description paragraphs */
}





/* ==========================================================================
   DOCTORS DIRECTORY COMPONENT (LAMIYA COLOR BLEND)
   ========================================================================== */
.custom-doctors-section {
  background-color: #f8fafc;
  padding: 50px 0;
}

/* Breadcrumbs Restyling */
.doctors-breadcrumb .breadcrumb {
  background: transparent;
  font-size: 13px;
  font-weight: 500;
}

.doctors-breadcrumb .breadcrumb-item a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.doctors-breadcrumb .breadcrumb-item a:hover {
  color: #d81b60;
  /* Brand Pink Accent */
}

.doctors-breadcrumb .breadcrumb-item.active {
  color: #1e293b;
}

/* Profiles Structural Card Architecture */
.dr-profile-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dr-profile-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.06);
}

/* Avatar Blocks */
.dr-avatar-wrapper {
  width: 105px;
  flex-shrink: 0;
}

.dr-avatar {
  width: 100%;
  height: 115px;
  object-fit: cover;
  border-radius: 8px;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
}

/* View Profile Context Link */
.dr-profile-link {
  font-size: 12px;
  font-weight: 600;
  color: #d81b60;
  /* Match signature brand pink */
  text-decoration: none;
  border-bottom: 1.5px dashed #d81b60;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.dr-profile-link:hover {
  color: #7f00ff;
  /* Secondary transition brand deep purple */
  border-color: #7f00ff;
}

/* Information Blocks Styling */
.dr-info-block {
  flex-grow: 1;
}

.dr-name {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.dr-designation {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
  margin-bottom: 8px;
}

.dr-specialties {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Structural Divider Inside Card */
.dr-profile-card .border-top {
  border-top-color: #f1f5f9 !important;
}

/* Appointment Button - Using Lamiya Signature Gradient */
.btn-dr-appointment {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 6px;
  border: none;
  text-align: center;
  transition: opacity 0.2s ease;
}

.btn-dr-appointment:hover {
  opacity: 0.93;
}

/* ==========================================================================
   RESPONSIVE LAYOUT RESPONSES
   ========================================================================== */
@media (max-width: 575.98px) {
  .dr-profile-card .d-flex {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
  }

  .dr-avatar-wrapper {
    margin-bottom: 12px;
  }

  .dr-profile-card .text-start {
    text-align: center !important;
  }
}

/* ==========================================================================
   DOCTOR DETAIL PAGE CORE CSS ARCHITECTURE 
   ========================================================================== */

/* --- SECTION 1 BRAND BACKGROUNDS --- */
.dr-detail-hero {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  /* Clean matching corporate medical backdrop */
  padding: 60px 0;
  border-bottom: 5px solid #c41e8f;
  /* Accent indicator transition strip */
}

.hero-avatar-frame {
  width: 170px;
  height: 190px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.hero-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-dr-name {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.hero-dr-title {
  font-size: 14px;
  font-weight: 600;
  color: #e0f2fe;
  line-height: 1.5;
}

.hero-dr-tags {
  font-size: 12px;
  color: #bae6fd;
  opacity: 0.9;
  line-height: 1.6;
}

.hero-meta-details .meta-item {
  font-size: 13.5px;
  font-weight: 500;
  color: #ffffff;
}

.btn-share-profile {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 30px;
  transition: all 0.2s ease;
}

.btn-share-profile:hover {
  background-color: #ffffff;
  color: #0369a1;
}

/* --- SECTION 1 INTERACTIVE CALENDAR WIDGET --- */
.scheduler-widget-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.widget-heading {
  font-size: 13px;
  font-weight: 700;
  text-uppercase: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
}

.custom-radio-selection .form-check-input:checked {
  background-color: #c41e8f;
  border-color: #c41e8f;
}

.btn-nav-cal {
  font-size: 13px;
  font-weight: 600;
  color: #0284c7;
  border: none;
  background: transparent;
}

.calendar-grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  text-align: center;
}

.cal-day-label {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background-color: #0284c7;
  padding: 6px 0;
  border-radius: 4px;
}

.cal-date {
  font-size: 13px;
  font-weight: 600;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.empty-date {
  color: #cbd5e1;
  pointer-events: none;
}

.active-slot {
  background-color: #1e293b;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.active-slot:hover {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  transform: scale(1.1);
}

.btn-widget-booking {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255, 0, 127, 0.25);
  transition: opacity 0.2s ease;
}

.btn-widget-booking:hover {
  opacity: 0.95;
}

/* --- SECTION 2 BIOGRAPHY & TIMELINES --- */
.text-secondary-dark {
  color: #475569;
}

.text-brand-pink {
  color: #c41e8f;
}

.text-brand-purple {
  color: #7f00ff;
}

.font-xs {
  font-size: 11px;
}

.font-sm {
  font-size: 13px;
}

.bio-section-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}

.bio-intro-text {
  font-size: 14.5px;
  line-height: 1.6;
}

.exp-title-header {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.current-position-box {
  background-color: #f0f9ff;
  border-left: 4px solid #0284c7;
  font-size: 13.5px;
}

/* Timeline Branch Rendering Engine */
.timeline-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #c41e8f;
}

.timeline-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  height: calc(100% - 10px);
  width: 2px;
  background-color: #f1f5f9;
}

.timeline-list li:last-child::after {
  display: none;
}

/* Specifications Card Styling */
.quick-spec-card {
  position: sticky;
  top: 20px;
}

.spec-bullet-list li {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  padding: 8px 0;
  position: relative;
  padding-left: 18px;
}

.spec-bullet-list li::before {
  content: "•";
  color: #7f00ff;
  font-weight: bold;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 2px;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 991.98px) {
  .dr-detail-hero {
    text-align: center;
    padding: 40px 0;
  }

  .quick-spec-card {
    position: static;
  }
}


/* ==========================================================================
   LAMIYA EXACT COLOR ARCHITECTURE (Ref: WhatsApp Image 2026-06-08 at 5.35.59 PM.jpeg)
   ========================================================================== */

:root {
  --lamiya-purple: #7f00ff;
  /* Deep Rich Violet/Purple */
  --lamiya-pink: #c41e8f;
  /* High-Contrast Hot Magenta Pink */
  --slate-dark-text: #0f172a;
  /* Primary Title Dark Slate color */
  --slate-muted-text: #475569;
  /* Description Paragraph color */
  --lamiya-light-hue: #f8fafc;
  /* Soft background grid tint */
  --icon-bg-pink: #fff0f6;
  /* Exact Soft Pink Tint for Icon Circle */
}

/* Base Styles Configuration */
.bg-light-softhue {
  background-color: var(--lamiya-light-hue);
}

.text-brand-pink {
  color: var(--lamiya-pink) !important;
}

.text-brand-purple {
  color: var(--lamiya-purple) !important;
}

.font-xs {
  font-size: 12px;
}

.font-sm {
  font-size: 13px;
}

/* --- HEADING DESIGN STYLE --- */
.section-inner-title {
  font-size: 22px;
  font-weight: 750;
  color: var(--slate-dark-text);
  margin: 0;
  letter-spacing: -0.3px;
}

.accent-underline-bar {
  width: 45px;
  height: 3px;
  background-color: var(--lamiya-pink);
  /* Matching pink underline indicator track */
  border-radius: 2px;
  margin-top: 5px;
}

/* --- THE EXACT ICON BACKGROUND AND ICON COLOR SYSTEM --- */
.service-matrix-card {
  transition: all 0.25s ease-in-out;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.01);
}

.service-matrix-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255, 0, 127, 0.06);
  border-color: rgba(255, 0, 127, 0.18) !important;
}

/* Icon Frame Core Setup */
.service-card-icon.pink-variant {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  /* Smooth circle frame matching reference mockup grid */
  background-color: var(--icon-bg-pink) !important;
  /* Exact 5% opacity pink tone */
  color: var(--lamiya-pink) !important;
  /* Exact Hot Magenta tone for icon symbol */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

/* Service Card Texts Layout */
.service-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--slate-dark-text);
}

.service-card-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--slate-muted-text) !important;
}

/* --- LINEAR APPOINTMENT PROMO STRIP --- */
.consultation-promo-banner {
  background: linear-gradient(90deg, #ffeef4 0%, #f5edff 100%);
  /* Elegant dual-brand tone gradient background */
  border: 1px solid rgba(255, 0, 127, 0.08);
}

.promo-heading {
  font-size: 18px;
  color: var(--slate-dark-text);
}

.promo-subtext {
  font-size: 13px;
  color: var(--slate-muted-text);
}

.btn-promo-booking {
  background: linear-gradient(45deg, var(--lamiya-pink), var(--lamiya-purple));
  /* Gradient fill layout button */
  color: #ffffff !important;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 0, 127, 0.25);
  transition: opacity 0.2s ease;
}

.btn-promo-booking:hover {
  opacity: 0.95;
}

/* --- SIDEBAR COMPONENTS WIDGET LAYOUTS --- */
.widget-block-title {
  font-size: 13.5px;
  color: var(--slate-dark-text);
  text-uppercase: uppercase;
  letter-spacing: 0.4px;
  border-color: #f1f5f9 !important;
}

.doc-widget-avatar-frame {
  aspect-ratio: 1/1;
  background-color: #f8fafc;
}

.doc-widget-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doc-widget-name {
  font-size: 16.5px;
  color: var(--slate-dark-text);
}

.doc-widget-desig {
  font-size: 13px;
  line-height: 1.3;
}

.doc-meta-bullets li {
  font-size: 12px;
  color: var(--slate-muted-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-meta-bullets li i {
  color: var(--lamiya-pink);
  font-size: 13px;
}

.btn-doc-widget-profile {
  border: 1px solid var(--lamiya-pink);
  color: var(--lamiya-pink);
  font-weight: 600;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 11.5px;
  background: transparent;
  transition: all 0.2s ease;
}

.btn-doc-widget-profile:hover {
  background-color: var(--lamiya-pink);
  color: #ffffff !important;
}

/* Micro Elements Layout Config */
.stat-counter-value {
  font-size: 16px;
  letter-spacing: -0.5px;
}

.stat-counter-label {
  line-height: 1.2;
  font-weight: 500;
  margin-top: 1px;
}

.condition-box-height {
  min-height: 152px;
}

.condition-checklist li {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}

.condition-widget-backdrop-graphic {
  position: absolute;
  right: -10px;
  bottom: -20px;
  width: 130px;
  height: 130px;
  background-image: url('https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?auto=format&fit=crop&q=80&w=300');
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
  filter: grayscale(100%);
}

/* ==========================================================================
   RESPONSIVE LAYOUT FINETUNING BREAKPOINTS
   ========================================================================== */
@media (max-width: 575.98px) {
  .consultation-promo-banner {
    text-align: center;
  }

  .btn-promo-booking {
    width: 100%;
    justify-content: center;
  }
}


/* Section Shell Properties */
.dept-hero-section {
  background-color: #ffffff;
  padding: 100px 0 90px 0;
  z-index: 1;
}

/* --- LEFT COLUMN STYLING --- */

/* Breadcrumb Layout Trimming */
.custom-breadcrumbs .breadcrumb-item,
.custom-breadcrumbs .breadcrumb-item a {
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: none;
}

.custom-breadcrumbs .breadcrumb-item.active {
  color: var(--lamiya-pink);
}

.custom-breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
  color: #cbd5e1;
}

/* Exact Main Header Setup */
.dept-main-heading {
  font-size: 52px;
  font-weight: 850;
  color: var(--slate-dark-title);
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.text-brand-pink {
  color: var(--lamiya-pink) !important;
}

/* Paragraph setup rules */
.dept-sub-desc {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--slate-para-text) !important;
  max-width: 460px;
}

/* Horizontal Feature Badges Architecture */
.hero-badge-pill {
  background-color: #ffffff;
  border: 1px solid rgba(255, 0, 127, 0.08);
  padding: 8px 14px;
  border-radius: 14px;
  min-width: 145px;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
  text-align: left;
}

.badge-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--badge-icon-bg);
  color: var(--lamiya-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.badge-text-meta {
  font-size: 11px;
  line-height: 1.25;
  color: #334155;
}

.badge-text-meta strong {
  color: var(--slate-dark-title);
  font-weight: 700;
}


/* --- RIGHT COLUMN STYLING (FLUID GRAPHIC MASK FRAME) --- */

.hero-image-container {
  max-width: 520px;
  position: relative;
  z-index: 3;
}

/* The Custom Asymmetrical Fluid Shape Masking Rules */
.hero-fluid-mask-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1.1 / 1;
  /* Complex organic border-radius mimicking image design silhouette track curve */
  border-radius: 40% 60% 60% 40% / 35% 35% 65% 65%;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(255, 0, 127, 0.08);
  background-color: #f1f5f9;
}

.hero-clinical-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}


/* --- BACKDROP DECORATIVE ELEMENTS --- */

/* Flowing Fluid Pink Wave Backdrop Vector Element */
.bg-vector-curve-shape {
  position: absolute;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  background: linear-gradient(135deg, #fff2f6 0%, #f6eeff 100%);
  /* Asymmetric wave frame separation boundary line cut */
  border-radius: 60% 0% 0% 40% / 50% 0% 0% 50%;
  z-index: 1;
  pointer-events: none;
}

/* Soft ambient atmospheric light glow layer */
.bg-blur-ambient-glow {
  position: absolute;
  bottom: -10%;
  left: 5%;
  width: 350px;
  height: 350px;
  background: rgba(127, 0, 255, 0.04);
  border-radius: 50%;
  filter: blur(60px);
  z-index: 1;
  pointer-events: none;
}


/* ==========================================================================
   BREAKPOINTS RESPONSIVE OVERRIDES
   ========================================================================== */
@media (max-width: 991.98px) {
  .dept-hero-section {
    padding: 100px 0 60px 0;
  }

  .dept-main-heading {
    font-size: 38px;
    letter-spacing: -0.8px;
  }

  .dept-sub-desc {
    font-size: 14.5px;
  }

  .hero-image-container {
    max-width: 400px;
    margin: 30px auto 0 auto;
  }

  .bg-vector-curve-shape {
    width: 100%;
    height: 50%;
    top: auto;
    bottom: 0;
    border-radius: 50% 50% 0% 0% / 15% 15% 0% 0%;
  }
}

@media (max-width: 575.98px) {
  .dept-main-heading {
    font-size: 32px;
  }

  .hero-badge-pill {
    width: 100%;
    /* Spans full widths on mobile devices */
  }
}

.promo-heading {
  font-size: 19px;
  font-weight: 800;
  color: var(--lamiya-pink);
  /* 'Healthy Skin,' sits in brand pink */
  letter-spacing: -0.3px;
}

.text-brand-purple {
  color: var(--lamiya-purple) !important;
  /* 'Confident You' shifts directly into clean brand purple */
}

/* ==========================================================================
   4-COLUMN METRICS CUSTOM CSS (Ref: WhatsApp Image 2026-06-08 at 5.35.59 PM.jpeg)
   ========================================================================== */

:root {
  --lamiya-pink: #c41e8f;
  /* Exact brand hot magenta color */
  --slate-dark-text: #0f172a;
  /* Dark text color for labels */
  --slate-muted-text: #64748b;
  /* Muted text color for descriptions */
  --icon-bg-pink-light: #fff0f6;
  /* Exact 5% opacity tint for backdrop circles */
}

/* Base Wrapper Matrix Layout rules */
.features-metrics-row {
  border-color: #f1f5f9 !important;
  /* Clean minimal dividers matching mockup styling */
  background-color: #ffffff;
}

/* Row Item Box Properties */
.metric-item-box {
  height: 100%;
}

/* Exact Circle Backdrop and Color Mapping */
.metric-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--icon-bg-pink-light);
  /* Soft light-pink tint circle */
  color: var(--lamiya-pink);
  /* Bright brand pink color for icons */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 0, 127, 0.02);
}

/* Precise Typography Layout Alignment */
.metric-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate-dark-text);
  letter-spacing: -0.1px;
}

.metric-desc {
  font-size: 12px;
  color: var(--slate-muted-text) !important;
  line-height: 1.35;
  margin-top: 2px !important;
}

/* ==========================================================================
   RESPONSIVE RENDERING OPTIMIZATION
   ========================================================================== */
@media (max-width: 575.98px) {

  /* Center aligns everything cleanly on micro phone displays */
  .metric-item-box {
    text-align: center;
  }
}

/* ==========================================================================
   STABLE SHAKE-PROOF RESETS (Ref: WhatsApp Image 2026-06-09 at 12.09.52 PM.jpeg)
   ========================================================================== */

/* 1. Prevent parent layout overflow conflicts */
html,
body {
  overflow-x: hidden !important;
}



/* modal */


/* ==========================================================================
   ULTIMATE VIEWPORT LAYER ISOLATION OVERRIDE
   ========================================================================== */

/* 1. Prevent the underlying main page grid from glitching/breaking out */
body.modal-open {
  overflow: hidden !important;
  padding-right: 0px !important;
}

/* 2. Break the modal completely out of the webpage DOM flow layout */
#departmentDetailsModal.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  /* Force it on top of the underlying page content grid */
  background-color: rgba(15, 23, 42, 0.75) !important;
  /* Semi-transparent dark overlay background overlay */
  display: none;
  /* Controlled explicitly by the visibility states below */
}

/* 3. Strip structural rendering conflicts when the modal is active */
#departmentDetailsModal.modal.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 4. Complete containment shield: Reset structural positioning rules */
#departmentDetailsModal .modal-dialog {
  position: relative !important;
  z-index: 1000000 !important;
  width: 92% !important;
  max-width: 1140px !important;
  margin: auto !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* 5. Force background layout containment opacity settings */
#departmentDetailsModal .modal-content {
  background: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  display: block !important;
}

/* 6. Strip away conflicting template animations (AOS / ScrollReveal) */
#departmentDetailsModal,
#departmentDetailsModal *,
[data-aos] #departmentDetailsModal {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
}



/* ==========================================================================
   LAMIYA HOSPITAL CUSTOM DEPT MODAL VISUAL ENGINE - HIGH PRIORITY SPECIFICITY
   ========================================================================== */

.custom-dept-modal {
  --lm-maroon: #800c46 !important;
  --lm-magenta: #c11c6b !important;
  --lm-slate: #22252a !important;
  --lm-muted: #64748b !important;
  --lm-tint: #fdf8fa !important;
  --lm-box-shadow: 0 10px 30px rgba(34, 37, 42, 0.04) !important;
}

#departmentDetailsModal .image-shake-fix-shell {
  background: #ffffff !important;
  border-radius: 24px !important;
  border: none !important;
}

/* --- SUBMODULE 1: HIGHLIGHT COLUMNS & DIVIDER SEPARATORS --- */
.lm-highlight-col {
  position: relative !important;
}

/* Renders a sleek vertical layout separating grid lines between adjacent highlight nodes */
.lm-highlight-col:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 15% !important;
  height: 70% !important;
  width: 1.5px !important;
  background-color: #e2e8f0 !important;
  /* Soft interior separator line accent color */
}

.badge-icon-wrapper {
  font-size: 26px !important;
  color: var(--lm-magenta) !important;
  margin-bottom: 4px !important;
}

.mini-badge-box span {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--lm-slate) !important;
}

/* --- SUBMODULE 2: SERVICES SYSTEM INDIVIDUAL BOX CARDS --- */
.lm-services-section {
  background-color: var(--lm-tint) !important;
}

.section-badge-title span {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--lm-maroon) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.section-badge-title span::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 35% !important;
  width: 30% !important;
  height: 3px !important;
  background-color: var(--lm-magenta) !important;
  border-radius: 2px !important;
}

/* Explicit Box Presentation Structure Override */
.lm-service-box-card {
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 16px !important;
  box-shadow: var(--lm-box-shadow) !important;
  padding: 24px 16px !important;
}

/* Inner Icon Container Box with Distinct Colored Background Wash */
.lm-icon-bg-wrapper {
  width: 52px !important;
  height: 52px !important;
  background-color: #fff0f5 !important;
  /* Soft tint layer background wash */
  border-radius: 12px !important;
  color: var(--lm-magenta) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  font-size: 24px !important;
}

.matrix-card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--lm-slate) !important;
  margin-bottom: 8px !important;
}

.matrix-card-desc {
  font-size: 12px !important;
  color: var(--lm-muted) !important;
  line-height: 1.5 !important;
}

/* --- SUBMODULE 3: BIO INFORMATION AND LAYOUT ELEMENTS --- */
.meta-section-heading {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--lm-maroon) !important;
  letter-spacing: 0.5px !important;
}

.meta-doc-avatar {
  width: 110px !important;
  height: 130px !important;
  border-radius: 12px !important;
}

.meta-doc-details .doc-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--lm-slate) !important;
}

.meta-doc-details .doc-degree {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--lm-magenta) !important;
}

.meta-doc-details .doc-desig,
.meta-doc-details .doc-bio {
  font-size: 12.5px !important;
  color: var(--lm-muted) !important;
}

.meta-checklist li {
  font-size: 14px !important;
  color: #334155 !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.meta-checklist li i {
  color: var(--lm-magenta) !important;
}

/* --- SUBMODULE 4: PROMO COMPONENT BOOKING BOX & SOLID ACCENT BACKGROUND --- */
/* Master Container Layout Background Box Wrap */
.lm-promo-booking-card {
  background-color: #fff0f5 !important;
  /* Soft pastel pink background base */
  border: 1px solid rgba(193, 28, 107, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 25px rgba(193, 28, 107, 0.03) !important;
}

.promo-footer-icon-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  color: var(--lm-magenta) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.promo-footer-texts .sub {
  font-size: 12px !important;
  color: var(--lm-muted) !important;
}

.promo-footer-texts .main {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--lm-slate) !important;
}

/* Outlined Call Element Button Configuration */
.btn-footer-call-outline {
  border: 1.5px solid var(--lm-magenta) !important;
  color: var(--lm-magenta) !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  padding: 8px 20px !important;
  font-size: 13.5px !important;
  background: transparent !important;
}

/* "Book Appointment" Primary Button with Full Solid Accent Color Background Layer */
.btn-footer-booking-action {
  background-color: var(--lm-maroon) !important;
  /* Solid Maroon/Deep Purple Background Layer */
  color: #ffffff !important;
  /* Clear white contrast text formatting */
  font-weight: 700 !important;
  border-radius: 30px !important;
  padding: 9px 24px !important;
  font-size: 13.5px !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(128, 12, 70, 0.2) !important;
}

/* Layout structural split grid lines */
@media (min-width: 992px) {
  .lm-split-line {
    border-right: 1px solid #e2e8f0 !important;
    padding-right: 2rem !important;
  }
}

/* Responsive Structural Breakdown Rules for Mobile Displays */
@media (max-width: 767.98px) {
  .lm-highlight-col:not(:last-child)::after {
    display: none !important;
    /* Drops internal column vertical border dividers on small screen devices to prevent stacking breaks */
  }

  .mini-highlights-row [class*="col-"] {
    width: 50% !important;
    padding: 10px 4px !important;
  }

  .lm-promo-booking-card {
    text-align: center !important;
  }

  .promo-footer-actions-row,
  .btn-footer-call-outline,
  .btn-footer-booking-action {
    width: 100% !important;
  }
}











/* --- PAGE HEADER & HERO SECTION --- */
.lh-page-header {
  background: #ffffff;
  border-bottom: 1px solid #edf2f7;
}

.lh-title-icon-frame {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background-color: #fff0f5;
  color: var(--lh-maroon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.lh-main-title {
  font-weight: 800;
  color: var(--lh-dark);
}

.lh-subtitle {
  color: var(--lh-slate);
  font-size: 15px;
}

/* Mission Side Banner Card */
.lh-mission-card {
  background: #eedeff;
  border: 1px solid var(--lh-card-border);
  border-radius: 16px;
  padding: 20px;
}

.lh-mission-icon {
  font-size: 24px;
  color: #7f00ff;
}

/* --- DEPARTMENTS GRID PATTERN --- */
.lh-grid-section-heading {
  font-weight: 700;
  color: #343434;
  position: relative;
  padding-bottom: 8px;
}

.lh-grid-section-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: #9f1239;
  border-radius: 2px;
}

/* Custom Department Card Layout */
.lh-dept-card {
  background: #ffffff;
  border: 1px solid #eeee;
  border-radius: 16px;
  transition: all 0.25s ease;
}

.lh-dept-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(128, 12, 70, 0.05);
}

.lh-dept-icon-box {
   width: 40px;
    height: 40px;
    background-color: #ffeef4;
    color: #c41e8f;
    border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* Dynamic Department Badge Accent Tones mapped directly from image 1 */
.lh-icon-dental {
  background-color: #f0f4ff;
  color: #3b82f6;
}

.lh-icon-derma {
  background-color: #ecfdf5;
  color: #10b981;
}

.lh-icon-gen {
  background-color: #eff6ff;
  color: #2563eb;
}

.lh-icon-ortho {
  background-color: #fff7ed;
  color: #f97316;
}

.lh-icon-gyna {
  background-color: #fdf2f8;
  color: #ec4899;
}

.lh-icon-pedia {
  background-color: #fff1f2;
  color: #f43f5e;
}

.lh-icon-pulmo {
  background-color: #f0fdfa;
  color: #14b8a6;
}

.lh-icon-cardio {
  background-color: #fff5f5;
  color: #ef4444;
}

.lh-icon-ent {
  background-color: #f8fafc;
  color: #64748b;
}

.lh-icon-gastro {
  background-color: #f0fdf4;
  color: #22c55e;
}

.lh-icon-ophthal {
  background-color: #eef2ff;
  color: #6366f1;
}

.lh-icon-endo {
  background-color: #fefce8;
  color: #eab308;
}

.lh-icon-anes {
  background-color: #faf5ff;
  color: #a855f7;
}

.lh-dept-name {
  font-weight: 700;
  color: var(--lh-dark);
  font-size: 15px;
}

.lh-dept-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--lh-slate);
}

.lh-dept-count i {
  font-size: 13px;
}

/* Outlined Button Grid Action Row */
.btn-lh-view-openings {
  border: 1px solid #7f00ff;
  color: #7f00ff;
  font-weight: 600;
  font-size: 13px;
  border-radius: 10px;
  padding: 7px 16px;
  transition: all 0.2s;
  background: #ffffff;
}

.btn-lh-view-openings:hover {
  border-color: var(lh-dark);
  color: var(lh-dark);
  background-color: #fff5f8;
}

/* --- BOTTOM GENERAL RESUME STRIP --- */
.lh-general-resume-card {
  background: #eedeff;
  border: 1px solid var(--lh-card-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.lh-resume-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #faf5ff;
  color: #9333ea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.btn-lh-submit-general {
  background: #7f00ff;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 30px;
  padding: 10px 28px;
  border: none;
  box-shadow: 0 4px 15px rgba(224, 18, 106, 0.15);
}

/* --- APPLICATION POPUP MODAL ARCHITECTURE --- */
.lh-app-modal .modal-content {
  border-radius: 24px;
  border: none;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.2);
}

.lh-modal-split-line {
  border-right: 1px solid #f1f5f9;
}

.lh-modal-vacancy-badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #fff0f5;
  color: #d81b60;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.lh-vacancy-title {
  font-weight: 800;
  color: var(--lh-dark);
}

.lh-vacancy-subtitle {
  font-size: 13px;
  color: var(--lh-slate);
  font-weight: 500;
}

.lh-req-heading {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #343434;
}


.lh-req-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: #d81b60;
  border-radius: 2px;
}

.lh-requirements-list li {
  font-size: 13px;
  line-height: 1.55;
  color: #343434;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.lh-requirements-list li i {
  color: #d81b60;
  font-size: 15px;
  margin-top: 1px;
}

.lh-modal-info-footer {
  background-color: #fff5f8;
  border-radius: 14px;
  border: 1px solid rgba(224, 18, 106, 0.05);
}

.lh-modal-info-footer span {
  font-size: 12.5px;
  color: #475569;
  font-weight: 600;
}

/* Form Fields Styling */
.lh-form-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--lh-dark);
}

.lh-form-group label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 5px;
}

.lh-form-control {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--lh-dark);
  background-color: #f8fafc;
  transition: all 0.2s;
}

.lh-form-control:focus {
  border-color: var(lh-dark);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(224, 18, 106, 0.08);
  outline: none;
}

/* Drag & Drop File Component Box */
.lh-upload-dragzone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background-color: #f8fafc;
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.lh-upload-dragzone:hover {
  border-color: var(lh-dark);
  background-color: #fff5f8;
}

.lh-upload-dragzone i {
  font-size: 24px;
  color: var(--lh-maroon);
}

.lh-upload-dragzone p {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.lh-upload-dragzone .hint {
  font-size: 10.5px;
  color: var(--lh-slate);
}

.btn-lh-submit-app {
  background: linear-gradient(45deg, #c41e8f, #7f00ff);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  padding: 11px;
  border: none;
  width: 100%;
  box-shadow: 0 4px 15px rgba(128, 12, 70, 0.15);
}

.lh-modal-disclaimer {
  font-size: 11px;
  color: var(--lh-slate);
}

/* --- RESPONSIVE CALIBRATIONS --- */
@media (max-width: 991.98px) {
  .lh-modal-split-line {
    border-right: none;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
}