* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  /* html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  } */
  
 
  
      :root{
        --bg-1: #0f172a;           /* deep */
        --accent-1: #7b2eff;      /* purple */
        --accent-2: #03c4a1;      /* teal */
        --muted: #6b7280;
        --glass: rgba(255,255,255,0.08);
        --card-shadow: 0 10px 30px rgba(10,20,30,0.06);
      }
  
      /* Reset + body */
      /* html,body{height:100%;margin:0;background:linear-gradient(180deg,#f7fbff,#f3f7fa);}
      body{font-family:'Inter',system-ui,Arial,sans-serif;color:#072028; -webkit-font-smoothing:antialiased;} */
  
      /* Slim Topbar */
      .topbar{
        background: linear-gradient(90deg, rgba(123,46,255,0.06), rgba(3,196,161,0.04));
        border-bottom: 1px solid rgba(7,34,40,0.04);
        padding: .45rem 0;
        font-size: .95rem;
      }
      .brand-compact { display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--accent-1); }
      .brand-compact img{ height:34px; border-radius:7px; box-shadow: 0 6px 18px rgba(7,34,40,0.06); }
  
      /* Main navbar (glass) */
      .main-nav{
        background: rgba(255,255,255,0.78);
        backdrop-filter: blur(6px);
        border-radius: 12px;
        padding: .6rem;
        box-shadow: 0 6px 20px rgba(7,34,40,0.04);
        margin-top: 12px;
      }
      .search-input{
        border-radius: 999px;
        border: 1px solid rgba(7,34,40,0.06);
        padding: .35rem .6rem;
        background: white;
      }
  
      /* Hero: diagonal accent and split */
      .hero-wrap{ position: relative; overflow: hidden; }
      .hero-diag {
        position:absolute; right:-10%; top:-2%;
        width:55%; height:120%;
        background: linear-gradient(135deg,var(--accent-1),var(--accent-2));
        transform: skewX(-12deg);
        border-radius: 30px;
        opacity: .08;
        z-index:0;
        pointer-events:none;
      }
      .hero {
        padding: 70px 0;
        position: relative;
        z-index:1;
        /* background-image: url('/images/Banner\ 1-2.jpeg');
        background-position: center; */
      }
      .hero h1{ font-family:'Poppins',sans-serif; font-weight:700; color:#062c31; letter-spacing:-0.4px; font-size:2.1rem; }
      .hero p.lead{ color:var(--muted); font-size:1.02rem; }
  
      /* CTA buttons */
      .btn-primary-grad{
        background: linear-gradient(90deg,var(--accent-1), var(--accent-2));
        border: none; color: white; padding: .65rem 1.25rem; border-radius: 999px;
        box-shadow: 0 8px 24px rgba(3,196,161,0.12);
      }
      .btn-outline-soft{ border-radius: 999px; border:1px solid rgba(7,34,40,0.06); padding:.5rem 1rem; background:transparent; color: #06333a; }
  
      /* Hero visual card */
      .visual-card{
        background: linear-gradient(180deg, rgba(255,255,255,0.95), #ffffff);
        border-radius: 18px;
        padding: 18px;
        box-shadow: var(--card-shadow);
        display:flex; align-items:center; justify-content:center;
      }
      .visual-card img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
  
      /* Services grid (different pattern) */
      .services-grid{ margin-top:40px; }
      .service-pill{
        /* background: linear-gradient(180deg, #7eb8b1); jdbuwgduywgd */
        border-radius: 14px;
        padding: 18px;
        box-shadow: var(--card-shadow);
        transition: transform .28s ease, box-shadow .28s ease;
      }
      .service-pill:hover{ transform: translateY(-8px); box-shadow: 0 16px 30px rgba(7,34,40,0.09); }
      .icon-mark{ width:78px; height:78px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(3,196,161,0.08), rgba(123,46,255,0.06)); margin: 0 auto 12px; }
  
      /* Stats (circular) */
      .stats-wrap{ margin-top:36px; }
      .stat-circle{ width:110px; height:110px; border-radius:50%; background:linear-gradient(180deg,#fff, #f8feff); display:flex; align-items:center; justify-content:center; box-shadow: var(--card-shadow); margin:0 auto; }
      .stat-number{ font-weight:700; font-size:1.25rem; color: #042b2d; }
  
      /* News + about layout */
      .news-card{ border-radius:14px; overflow:hidden; box-shadow: var(--card-shadow); }
      .news-card img{ object-fit:cover; height: 220px; width:100%; display:block; }
  
      .about-grid .info-box{ border-radius:12px; padding:18px; background:#fff; box-shadow:var(--card-shadow); }
      .chip{ display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(3,196,161,0.08); color: #036b5d; margin:6px; font-size:.9rem; }
  
      /* Floating actions new style (bottom-left) */
      .floating-actions{ position:fixed; left:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:1200; }
      .floating-actions .btn{ border-radius:999px; padding:.6rem .9rem; box-shadow:0 8px 20px rgba(7,34,40,.08); }
  
      /* Footer */
      /* footer{ margin-top:40px; padding:32px 0; color:var(--muted); font-size:.95rem; } */
  
      /* Responsive tweaks */
      @media (max-width: 991px){
        .hero-diag{ display:none; }
        .hero{ padding:40px 0; }
        .visual-card{ padding:8px; }
        .stat-circle{ width:90px; height:90px; }
      }
  
  
      h2 {
        font-size: 2rem;
        margin-bottom: 15px;
        color: #023e8a;
        border-bottom: 3px solid #0096c7;
        display: inline-block;
        padding-bottom: 8px;
      }
      .service-list {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        margin-top: 30px;
        justify-content: space-between;
      }
      .service-item {
        background: white;
        flex: 1 1 300px;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
      }
      .service-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }
      .service-icon {
        font-size: 50px;
        color: #0077b6;
        margin-bottom: 20px;
      }
      .service-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 12px;
        color: #03045e;
      }
      .service-desc {
        font-size: 1rem;
        line-height: 1.5;
        color: #555;
      }
  
      @media(max-width: 720px) {
        .service-list {
          flex-direction: column;
        }
      }
      h1 {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 25px;
        color: #003f63;
      }
      .service-container {
        background: white;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.1);
        padding: 30px 40px;
        margin-bottom: 30px;
        transition: box-shadow 0.3s ease;
      }
      .service-container:hover {
        box-shadow: 0 10px 30px rgba(0,0,0,0.18);
      }
      .service-title {
        font-size: 1.8rem;
        color: #0073a6;
        margin-bottom: 15px;
        font-weight: 600;
      }
      .service-description {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #444;
      }
      
      @media(max-width: 700px) {
        main {
          padding: 0 15px;
        }
        .service-container {
          padding: 25px 20px;
        }
      }
  /* dekhoooooo */
  /* Style prev/next buttons */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-color: #007bff; /* blue background */
    border-radius: 50%;        /* circular */
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.2));
    transition: background-color 0.3s ease;
    width: 40px;
    height: 40px;
    background-size: 18px 18px; /* make arrow icon bigger */
  }
  
  .carousel-control-prev-icon:hover,
  .carousel-control-next-icon:hover {
    background-color: #0056b3; /* darker blue on hover */
  }
  
  /* Position controls a bit inside */
  .carousel-control-prev {
    left: 15px;
  }
  
  .carousel-control-next {
    right: 15px;
  }
  
  /* Responsive tweaks for mobile */
  @media (max-width: 576px) {
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      width: 30px;
      height: 30px;
      padding: 7px;
      background-size: 14px 14px;
    }
    .carousel-control-prev {
      left: 8px;
    }
    .carousel-control-next {
      right: 8px;
    }
  }
  
  footer {
  background-color: white;
  
  
  }
  
  footer a:hover {
    color: #007bff !important;
    text-decoration: underline;
  }
  
  .btn-primary-grad {
    background: linear-gradient(45deg, #007bff, #0056b3);
    border: none;
    color: white;
    transition: background 0.3s ease;
  }
  
  .btn-primary-grad:hover {
    background: linear-gradient(45deg, #0056b3, #003d80);
    color: white;
  }
  .speciality-card {
    background: white;
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
  }
  .speciality-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }
  .speciality-card img {
    transition: transform 0.3s ease;
  }
  .speciality-card:hover img {
    transform: scale(1.1);
  }
  .stats-section {
    background: linear-gradient(to right, #4facfe, #00f2fe);
  }
  .stat-item i {
    color: white;
  }
  .stat-item h2 {
    font-size: 2rem;
  }
  
  .doctor-card img {
    height: 250px;
    object-fit: cover;
  }
  .doctor-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .doctor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  
  .main-header {
    width: 100%; /* header full width tak limit */
    left: 0;
    right: 0;
  }
  
  .slider-img {
    display: block;
  
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain; /* poori image dikhayega, cut nahi karega */
  }
  
  @media (max-width: 768px) {
    .slider-img {
      max-height: 50vh; /* mobile ke liye chhoti height */
    }
  }
  
  * {
    box-sizing: border-box; /* padding+border include kare width calculation me */
  }
  
  .carousel,
  .carousel-inner,
  .carousel-item,
  .carousel-item img {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  img {
    display: block;
  }
  /* === Horizontal Scroll Fix === */
  
  /* Page-wide safeguard */
  html, body {
    overflow-x: hidden;
  }
  
  /* Hero section safe bounds */
  .hero-wrap {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Carousel safe bounds */
  .carousel,
  .carousel-inner,
  .carousel-item,
  .carousel-item img {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Mobile nav open hone par safe bounds */
  .mobile-nav {
    max-width: 100%;
    overflow-x: hidden;
    /* background-color: red;
    display: block; */

  }
  
  /* Images never exceed viewport width */
  img {
    max-width: 100%;
    height: auto;
  }
  .team-section {
    background-color: whitesmoke;
    color: #333;
  }
  
  .team-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
  
  .team-card:hover {
    transform: translateY(-5px);
  }
  
  .team-img {
    position: relative;
    overflow: hidden;
  }
  
  .team-img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-bottom: 3px solid #d4af37;
    border-top: 3px solid #d4af37;
    border-left: 3px solid #d4af37;
    border-right: 3px solid #d4af37;
    
  }
  
  .team-info {
    padding: 15px;
  }
  
  .team-info h5 {
    font-weight: 600;
    margin-top: 10px;
  }
  
  .team-info .role {
    color: #888;
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .team-info .desc {
    font-size: 13px;
    color: #555;
  }
  
  .social-links {
    margin-top: 15px;
  }
  
  .social-links a {
    color: #d4af37; /* gold */
    margin: 0 5px;
    font-size: 16px;
    transition: color 0.3s ease;
  }
  
  .social-links a:hover {
    color: #333;
  }
  .team-img {
    height: 280px; /* fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #444; /* backdrop */
  }
  
  .team-img img {
    max-height: 100%;
    width: auto;
    object-fit: contain; /* face cut nahi hoga */
  }
  
  .cta-section {
    background: linear-gradient(135deg, #56CCF2, #2F80ED);
    padding: 60px 20px;
  }
  
  .cta-card {
    max-width: 900px;
    margin: auto;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    color: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  }
  
  .cta-icon {
    font-size: 50px;
    margin-bottom: 20px;
  }
  
  .cta-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
  }
  
  .cta-content p {
    font-size: 1rem;
    margin-bottom: 25px;
  }
  
  .btn-cta {
    display: inline-block;
    padding: 12px 25px;
    background: #fff;
    color: #2F80ED;
    font-weight: 600;
    border-radius: 30px;
    transition: 0.3s;
    text-decoration: none;
  }
  
  .btn-cta:hover {
    background: #2F80ED;
    color: #fff;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .cta-content h2 {
      font-size: 1.5rem;
    }
    .cta-card {
      padding: 25px;
    }
  }
  
  /* Navigation hover effect */
  .main-header nav a.btn.btn-outline-soft:hover {
    background-color: #007bff; /* theme color */
    color: white !important;
    border-color: #007bff;
    transition: all 0.3s ease;
  }
  
  /* Mobile nav hover effect */
  .mobile-nav a.btn.btn-outline-soft:hover {
    background-color: #007bff; /* theme color */
    color: white !important;
    border-color: #007bff;
    transition: all 0.3s ease;
  }
  
  .btn-outline-soft {
    border: 1px solid var(--primary-color, #007bff);
    color: var(--primary-color, #007bff);
    background-color: transparent;
    transition: all 0.3s ease;
  }
  
  .btn-outline-soft:hover {
    background-color: var(--primary-color, #007bff);
    color: #fff;
    border-color: var(--primary-color, #007bff);
  }
  
  /* .testimonial-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease-in-out;
  }
  .testimonial-card:hover {
    transform: translateY(-8px);
  }
  .stars {
    color: #ff9800;
    font-size: 18px;
  }
  .review {
    font-style: italic;
    font-size: 15px;
  } */
  
  .stars {
    color: #ffb400;
    font-size: 16px;
  }
  .review {
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
  }
  
  .left-btn,
  .right-btn {
    position: fixed;
    bottom: 20px;
    padding: 10px 15px;
    border-radius: 30px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    z-index: 9999;
  }
  
  /* Call button (blue) - bottom left */
  .left-btn {
    left: 20px;
    background: linear-gradient(90deg, #007bff, #0056b3);
    color: white;
    border: none;
  }
  
  /* WhatsApp button (green) - bottom right */
  .right-btn {
    right: 20px;
    background: linear-gradient(90deg, #25D366, #128C7E);
    color: white;
    border: none;
  }
  
  .top-bar {
    background-color: #e9f2f5;
    color: black;
  }
  .top-bar .btn-primary {
    background-color: #074f68;
    border: none;
    font-size: 13px;
    padding: 4px 10px;
  }
  .search-icon {
    color: #074f68;
    font-size: 16px;
  }
  .nav-slash a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 14px;
  }
  .nav-slash a:hover {
    color: #074f68;
  }
  .nav-slash span {
    color: #999;
    padding: 0 10px;
    font-weight: 300;
  }
  .nav-slash a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    padding: 0 12px; /* Increased spacing */
  }
  .nav-slash a:hover {
    color: #074f68;
  }
  .nav-slash span {
    color: #999;
    padding: 0 12px; /* Matches link spacing */
    font-weight: 300;
  }
  /* kjbkjb */
  
  
  /* Betu Section Styling */
  .betu {
    padding: 60px 20px;
    background-color: #fff;
    text-align: center;
  }
  
  .betu .section-title {
    font-size: 28px;
    font-weight: bold;
    color: #003366;
    margin-bottom: 40px;
    position: relative;
  }
  
  .betu .section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: #007bff;
    margin: 8px auto 0;
    border-radius: 2px;
  }
  
  /* Grid layout */
  .betu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-items: center;
  }
  
  /* Each card */
  .betu-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 300px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .betu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  /* Image inside card */
  .betu-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
  }
  
  /* Title inside card */
  .betu-card h3 {
    font-size: 18px;
    font-weight: bold;
    color: #003366;
    margin-bottom: 10px;
  }
  
  /* Text inside card */
  .betu-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
  }
  
  @media (max-width: 768px) {
    .top-bar {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }
  
    .top-bar .d-flex.align-items-center {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
  
    .top-bar .btn {
      padding: 6px 10px;
      font-size: 12px;
    }
  
    .top-bar i,
    .top-bar span {
      font-size: 14px;
    }
  }
  
  
  .sh a:hover{
    background-color: #4facfe;
  
  }


  .ss a:hover{
color: #007bff;


  }
  
 
  .betu-testimonial {
    background: whitesmoke;
    border-radius: 15px;
    padding: 40px 20px 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    max-width: 600px;
    margin: auto;
  }
  .betu-testimonial-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #0d6efd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
  }
  .betu-star-rating {
    color: #ffc107;
    margin: 10px 0;
  }
  .betu-testimonial p {
    font-style: italic;
    margin-top: 10px;
  }
  .betu-carousel-inner {
    padding-top: 50px; /* Space for floating image */
  }


  body {
    font-family: 'Poppins', sans-serif;
    /* background-color: #f8f9fa; */
  }
  /* Hero Section */
  .about-hero {
    background: url('https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&w=1350&q=80') center/cover no-repeat;
    color: white;
    padding: 120px 20px;
    text-align: center;
    background-attachment: fixed;
    position: relative;
  }
  .about-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 68, 102, 0.6);
  }
  .about-hero h1, .about-hero p {
    position: relative;
    z-index: 1;
  }
  .about-hero h1 {
    font-size: 3rem;
    font-weight: 700;
  }
  /* About Section */
  .about-section img {
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }
  /* Icon Boxes */
  .icon-box {
    text-align: center;
    padding: 30px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
  }
  .icon-box i {
    font-size: 2.5rem;
    color: #0077b6; /* Matching Blue */
    margin-bottom: 15px;
  }
  .icon-box:hover {
    transform: translateY(-8px);
  }
  /* Team Section */
  .team-member img {
    border-radius: 50%;
    width: 160px;
    height: 160px;
    object-fit: cover;
    border: 4px solid #0077b6;
  }
  .section-title {
    font-weight: 700;
    color: #004466;
  } /* Background with light overlay */
  .services-hero {
    background: url('images/medical-bg.jpg') center/cover no-repeat;
    padding: 80px 20px;
    text-align: center;
    color: white;
    position: relative;
  }
  .services-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 91, 150, 0.6); /* Blue overlay */
  }
  .services-hero h1 {
    position: relative;
    z-index: 2;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  }

  /* Service Cards */
  .service-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
  }
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }
  .service-icon {
    font-size: 40px;
    color: #007bff;
    margin-bottom: 15px;
  }
  .service-card h4 {
    font-weight: bold;
    margin-bottom: 10px;
  }
  .service-card p {
    font-size: 0.95rem;
    color: #555;
  }

  /* Grid */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 50px;
  }





  .how-it-works {
    text-align: center;
    padding: 80px 20px;
    background-color: white;
  }
  .how-it-works h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #2c3b2c;
    /* font-family: 'Courier New', Courier, monospace; */

  }
  .how-it-works .icon-box {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
  }
  .how-it-works .icon-box:hover {
    transform: translateY(-10px);
  }
  .how-it-works i {
    font-size: 40px;
    color: #2c3b2c; /* Same green as footer */
    margin-bottom: 15px;
  }
  .how-it-works h4 {
    font-weight: bold;
    margin-bottom: 10px;
    color: #2c3b2c;
  }
  .how-it-works p {
    font-size: 14px;
    color: #555;
  }
  .how-it-works .icon-box {
background: none;
text-align: center;
padding: 20px;
transition: transform 0.3s ease;
}

.how-it-works .icon-circle {
background: white;
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.how-it-works .icon-circle i {
font-size: 35px;
color: #2c3b2c;
}

.how-it-works h5 {
font-weight: 600;
margin-bottom: 8px;
font-size: 18px;
}

.how-it-works p {
font-size: 14px;
color: #555;
}

.how-it-works .icon-box {
  background: none; /* Removed box background */
  text-align: center;
  padding: 20px 0;
  box-shadow: none; /* Removed box shadow */
}

.how-it-works .icon-circle {
  background: white;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.how-it-works h5 {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 18px;
  color: #2c3b2c;
}

.how-it-works p {
  font-size: 14px;
  color: #555;
  margin: 0;
}

 /* Navbar */
 .navbar {
  padding: 15px 0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.navbar-brand {
  font-weight: 700;
  font-size: 22px;
  color: #007bff;
}
.navbar-nav .nav-link {
  margin: 0 10px;
  font-weight: 500;
  color: #333 !important;
}
.btn-appointment {
  background: #0d6efd;
  color: #fff !important;
  padding: 8px 20px;
  border-radius: 30px;
  font-weight: 600;
}

/* Hero Section */
.hero-section {
  padding: 80px 0;
  background-color: white;
}
.hero-text h6 {
  color: #0d6efd;
  font-weight: 600;
  margin-bottom: 10px;
}
.hero-text h2 {
  font-weight: 700;
  font-size: 36px;
  color: #0d2b52;
  margin-bottom: 20px;
}
.hero-text p {
  color: #555;
  margin-bottom: 20px;
}
.feature-list li {
  margin-bottom: 12px;
  font-weight: 500;
  color: #333;
}
.feature-list li i {
  color: #0d6efd;
  margin-right: 10px;
}
.btn-custom {
  background: #0d6efd;
  color: #fff;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 600;
  transition: 0.3s;
  display: inline-block;
}
.btn-custom:hover {
  background: #0b5ed7;
}
.image-box img {
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.image-box-small {
  position: absolute;
  bottom: -40px;
  left: 40px;
  width: 60%;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.service-item {
  padding: 25px 20px;
  text-align: center;  /* text + icon center */
  border: 1px solid #eee;  /* halka border (optional) */
  border-radius: 12px;
  transition: 0.3s ease;
}

.service-item:hover {
  border-color: #0d6efd; /* hover effect */
  background-color: #e9ecef;
}

.service-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.service-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
  color: #0d2b52;
}

.service-desc {
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}
.service-item {
  padding: 25px 20px;
  text-align: center;   /* sab content center me */
  border: 1px solid #eee; /* halka border rakhna ho to */
  border-radius: 12px;
  background: #fff;
  box-shadow: none !important;  /* shadow ko forcefully remove */
  transition: 0.3s ease;
}

.service-item:hover {
  border-color: #0d6efd;  /* sirf border color change hoga hover pe */
  /* box-shadow: none !important; hover pe bhi shadow off */
}

.service-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.service-item {
  padding: 15px;
  text-align: center;
  background: transparent;  /* no background */
  border: none;             /* no border */
  box-shadow: none !important; /* no shadow */
}

.service-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.service-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
  color: #0d2b52;
}

.service-desc {
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}
section .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
section .card:hover {

  background-color: whitesmoke !important;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 column layout */
  gap: 12px 20px; /* row aur column ka gap */
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
}

.feature-list li i {
  color: #0d6efd;
  margin-right: 10px;
  font-size: 18px;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
}
.team-img {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.team-img img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

.overlay-name {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5); /* Transparent background */
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 1.2rem;
  font-weight: bold;
}
.consult{
  font-family: 'Courier New', Courier, monospace ;
}
.doctors{
font-family: 'Courier New', Courier, monospace;

}
.consult {
  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important;   /* Agar shadow underline hai */
}
.doctors{

  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important; 
}

.why-heading{
  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important;
}

.services-heading{

  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important;
}

.testimonial-heading{
  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important;

}

.how-heading{
  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important;

}

.journey-heading{
  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important;

}

.specialist-heading{
  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important;


}

.doctor-heading{

  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important;
}

.testii-title {
  font-family: 'Courier New', Courier, monospace;
  font-size: 2rem;
  font-weight: bold;
  color: green;
  border: none !important;           /* border remove */
  border-bottom: none !important;    /* bottom border remove */
  text-decoration: none !important;  /* underline remove */
  box-shadow: none !important;       /* shadow underline remove */
}

.contact-title{
  border: none !important;       /* Agar border apply hai */
  border-bottom: none !important;
  text-decoration: none !important; /* Agar underline aa rahi hai */
  box-shadow: none !important;

}

/* Desktop hover dropdown */
/* @media (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
  }
} */
/* Base button style */
.nav-toggle {
  background: linear-gradient(135deg, #4288b3, #2374a7);
  border: none;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 32px;
  width: 40px;
  transition: all 0.3s ease-in-out;
}

/* Hamburger lines */
.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* Hover effect */
.nav-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}

/* Toggle active (for animation into "X") */
.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Initially hidden */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: linear-gradient(135deg, #e9f2f5, #ffffff); /* light theme match */
  padding: 15px;
  border-top: 3px solid #2374a7;
  animation: slideDown 0.4s ease forwards;
}

/* Open state with animation */
.mobile-nav.open {
  display: flex;
  animation: slideDown 0.4s ease forwards;
}

/* Slide down + fade effect */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/* Mobile nav button custom style */
#mobile-nav .btn-outline-primary {
  color: #2a2d2e;                /* Light blue text */
  border-color: #4e9ac8;          /* Light blue border */
  background-color: transparent;
  font-weight: 500;
}

/* Hover / Active state */
#mobile-nav .btn-outline-primary:hover,
#mobile-nav .btn-outline-primary:focus {
  background-color: #4e9ac8;      /* Fill light blue */
  color: #fff;                    /* White text */
  border-color: #4e9ac8;
}


/* Dropdown box styling */
.dropdown-menu {
  padding: 20px 0;                /* overall spacing inside box */
  border-radius: 8px;
  background: #fdfdfd;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  min-width: 150px;
  font-weight: lighter;

}

/* Dropdown items */
.dropdown-item {
  font-weight: 250 !important;                /* light font */
  font-size: 12px !important;
  color: #101213;
  padding: 1400px 22px;              /* top-bottom gap ↑↓ increased */
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  display: inline;

}

/* Hover effect */
.dropdown-item:hover {
  background: #eef6ff;
  color: #0077cc;
  padding-left: 28px;              /* little slide on hover */
}

.custom-dropdown .dropdown-menu {
  left: 0 !important;
  right: auto !important;
  transform: translateX(0) !important;
  margin-top: 22px !important; /* yahan value badha ke dropdown niche kar sakte ho */
}



.custom-dropdown .dropdown-menu {
  left: 0 !important;
  right: auto !important;
  transform: translateX(0) !important;
  margin-top: 12px;

  /* Styling */
  min-width: 250px;   
  /* text-align: center;           dropdown ka size bada */
  padding: 15px 20px;            /* andar gap */
  border-radius: 12px;           /* gol corners */
  background: #ffffff;           /* white background */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* shadow */
}

.custom-dropdown .dropdown-menu li {
  margin-bottom: 10px;           /* links ke beech gap */
}

.custom-dropdown .dropdown-menu li:last-child {
  margin-bottom: 0;
}

.custom-dropdown .dropdown-menu a {
  font-size: 16px;               /* bada font */
  font-weight: 500;
  color: #333;
  text-decoration: none;
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.custom-dropdown .dropdown-menu a:hover {
  background: #6bb1ee;           /* orange hover */
  color: #fff;
}

@media (max-width: 768px) {
  .custom-dropdown .dropdown-menu {
    position: static !important;   /* cut hone se bachega */
    width: 100% !important;        /* full width */
    min-width: unset;              /* desktop ka min-width hatao */
    margin-top: 8px;
    box-shadow: none;              /* mobile me shadow simple rakho */
    border-radius: 0;   
    /* overflow: hidden;           mobile me flat look */
  }

  .custom-dropdown .dropdown-menu a {
    font-size: 18px;               /* mobile pe thoda bada font */
    padding: 12px 15px;
  }
}



.main-header,
.mil-navigation {
  overflow: visible !important;
  z-index: 1000;
}


.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99999 !important;
  min-width: 220px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.dropdown-menu {
  max-height: 400px;   /* jitna height chahiye */
  overflow-y: auto;    /* scroll aa jayega */
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99999 !important;
  min-width: 220px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);

  /* Scroll allow karo bina chhota lagne ke */
  max-height: calc(100vh - 150px); /* screen ke hisaab se */
  overflow-y: auto;
}


#mobile-nav .dropdown-menu {
  display: none;          /* hidden hote waqt space consume na kare */
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: #f9f9f9;
}

#mobile-nav .dropdown-menu.show {
  display: block;         /* sirf open hone par dikhe */
}