/* =========================================
           1. CORE CSS & RESET
           ========================================= */
   :root {
       --primary-color: #00a8cc;
       /* Medical Cyan */
       --secondary-color: #1b4f72;
       /* Deep Blue */
       --accent-color: #e74c3c;
       /* Emergency Red */
       --text-color: #555;
       --bg-light: #f8f9fa;
       --white: #ffffff;
       --border-radius: 8px;
       --transition: all 0.3s ease;
   }



   body {
       font-family: 'Poppins', sans-serif;
       color: var(--text-color);
       line-height: 1.6;
       background-color: var(--white);
       overflow-x: hidden;
   }

   a {
       text-decoration: none;
       color: inherit;
       transition: var(--transition);
   }

   ul {
       list-style: none;
   }

  

   img {
       max-width: 100%;
       height: auto;
       display: block;
   }

   /* Typography */
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: 'Roboto', sans-serif;
       color: var(--secondary-color);
       margin-bottom: 1rem;
       font-weight: 700;
   }

   .section-title {
       text-align: center;
       margin-bottom: 3rem;
   }

   .section-title h2 {
       font-size: 2.5rem;
       position: relative;
       display: inline-block;
       padding-bottom: 15px;
   }

   .section-title h2::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 60px;
       height: 4px;
       background-color: var(--primary-color);
   }

   .section-title p {
       margin-top: 10px;
       font-size: 1.1rem;
       color: #777;
   }

   /* Buttons */
   .btn-1 {
       display: inline-block;
       padding: 12px 30px;
       border-radius: 50px;
       font-weight: 600;
       border: none;
       cursor: pointer;
       transition: var(--transition);
   }

   .btn:hover {
       background-color: var(--secondary-color);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   }

   .btn-outline {
       background-color: transparent;
       border: 2px solid var(--primary-color);
       color: var(--primary-color);
   }

   .btn-outline:hover {
       background-color: var(--primary-color);
       color: var(--white);
   }

   /* Container */
   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .section {
       padding: 48px 0;
   }

   .treatment-dropdown{
    position: relative;
}

.treatment-menu{
    position: absolute;
    top:100%;
    left:0;
    width:650px;
    background:#fff;
    display:none;

    padding:20px;

    border-radius:10px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);

    column-count:2;
    column-gap:25px;

    z-index:9999;
}

.treatment-dropdown:hover .treatment-menu{
    display:block;
}

.treatment-menu a{
    display:block;
    color:#222;
    text-decoration:none;
  padding: 5px 5px;
    margin-bottom:2px;
    border-radius:6px;
    font-size: 13px;
    transition:.3s;
    break-inside:avoid;
}

.treatment-menu a:hover{
    background:#0d6efd;
    color:#fff;
}

@media(max-width:991px){

    .treatment-menu{
        position:static;
        width:100%;
        column-count:1;
        display:none;
        box-shadow:none;
        padding:0;
    }

    .treatment-dropdown:hover .treatment-menu{
        display:block;
    }

}

   /* =========================================
           2. HEADER & NAVIGATION
           ========================================= */
   header {
       position: fixed;
       top: 0;
       width: 100%;
       z-index: 1000;
       background-color: rgba(255, 255, 255, 0.95);
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       transition: var(--transition);
   }

   .top-bar {
       background-color: var(--secondary-color);
       color: var(--white);
       padding: 10px 0;
       font-size: 0.9rem;
   }

   .top-bar .container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .top-info span {
       margin-right: 20px;
   }

   .navbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 15px 20px;
       max-width: 1200px;
       margin: 0 auto;
   }

   .logo {
       font-size: 1.8rem;
       font-weight: 800;
       color: var(--secondary-color);
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .logo i {
       color: var(--primary-color);
       font-size: 2rem;
   }

   .nav-links {
       display: flex;
       gap: 30px;
   }

   .nav-links a {
       font-weight: 500;
       color: var(--secondary-color);
       position: relative;
   }

   .nav-links a::after {
       content: '';
       position: absolute;
       bottom: -5px;
       left: 0;
       width: 0;
       height: 2px;
       background: var(--primary-color);
       transition: var(--transition);
   }

   .nav-links a:hover::after,
   .nav-links a.active::after {
       width: 100%;
   }

   .mobile-toggle {
       display: none;
       font-size: 1.5rem;
       cursor: pointer;
       color: var(--secondary-color);
   }

   

   /* =========================================
           3. HERO SLIDER (FIXED ISSUE)
           ========================================= */
   .hero-section {
       position: relative;
       height: 100vh;
       overflow: hidden;
       margin-top: 0;
   }

   .slider-wrapper {
       height: 100%;
       position: relative;
   }

   .slide {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       opacity: 0;
       transition: opacity 1s ease-in-out;
       background-size: cover;
       background-position: center;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .slide.active {
       opacity: 1;
   }

   .slide::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }

   /* Dark Overlay */

   .slide-content {
       position: relative;
       z-index: 2;
       text-align: center;
       color: var(--white);
       max-width: 800px;
       padding: 20px;
       transform: translateY(30px);
       opacity: 0;
       transition: all 0.8s ease 0.3s;
       margin-top: 128px
   }

   .slide.active .slide-content {
       transform: translateY(0);
       opacity: 1;
   }

   .slide-content h1 {
       font-size: 3.5rem;
       color: var(--white);
       margin-bottom: 20px;
       text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   }

   .slide-content p {
       font-size: 1.2rem;
       margin-bottom: 30px;
   }

   .slider-controls {
       position: absolute;
       bottom: 30px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 10;
       display: flex;
       gap: 15px;
   }

   .control-btn {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       border: 2px solid var(--white);
       color: var(--white);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--transition);
   }

   .control-btn:hover {
       background: var(--primary-color);
       border-color: var(--primary-color);
   }

   /* =========================================
           4. AUTO TEXT ROTATOR SECTION
           ========================================= */
   .text-rotator-section {
       background-color: var(--secondary-color);
       color: var(--white);
       padding: 60px 0;
       text-align: center;
   }

   .rotator-text {
       font-size: 2rem;
       font-weight: 700;
       font-family: 'Roboto', sans-serif;
   }

   .dynamic-word {
       color: var(--primary-color);
       position: relative;
       display: inline-block;
       min-width: 200px;
   }

   /* =========================================
           5. TOP DOCTORS (CARD WISE)
           ========================================= */
   .doctors-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 30px;
   }

   .doctor-card {
       background: var(--white);
       border-radius: var(--border-radius);
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
       overflow: hidden;
       transition: var(--transition);
       border: 1px solid #eee;
   }

   .doctor-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
   }

   .doctor-img {
       height: 300px;
       overflow: hidden;
       position: relative;
   }

   .doctor-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }

   .doctor-card:hover .doctor-img img {
       transform: scale(1.1);
   }

   .doctor-info {
       padding: 25px;
       text-align: center;
   }

   .doctor-info h3 {
       font-size: 1.4rem;
       margin-bottom: 5px;
   }

   .doctor-specialty {
       color: var(--primary-color);
       font-weight: 600;
       margin-bottom: 15px;
       display: block;
   }

   .social-links a {
       color: #ccc;
       margin: 0 5px;
       font-size: 1.1rem;
   }

   .social-links a:hover {
       color: var(--primary-color);
   }

   /* =========================================
           6. DISEASE TREATMENT (ZIG ZAG LAYOUT)
           ========================================= */
   .treatment-block {
       display: flex;
       align-items: center;
       gap: 50px;
       margin-bottom: 80px;
   }

   .treatment-block:last-child {
       margin-bottom: 0;
   }

   .treatment-img {
       flex: 1;
       border-radius: var(--border-radius);
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   }

   .treatment-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .treatment-content {
       flex: 1;
   }

   .treatment-content h3 {
       font-size: 2rem;
       color: var(--secondary-color);
   }

   .feature-list {
       margin: 20px 0;
   }

   .feature-list li {
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .feature-list li i {
       color: var(--primary-color);
   }

   /* Direction modifiers */
   .flex-row-reverse {
       flex-direction: row-reverse;
   }

   /* =========================================
           7. PARALLAX EFFECT SECTION
           ========================================= */
   .parallax-section {
       background-image: url('https://picsum.photos/seed/hospitaltech/1920/1080.jpg');
       background-attachment: fixed;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       height: 400px;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
   }

   .parallax-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 86, 134, 0.8);
   }

   .parallax-content {
       position: relative;
       z-index: 2;
       text-align: center;
       color: var(--white);
       max-width: 700px;
       padding: 20px;
   }

   .parallax-content h2 {
       color: var(--white);
       font-size: 2.5rem;
       margin-bottom: 20px;
   }

   .counters {
       display: flex;
       justify-content: space-around;
       margin-top: 40px;
   }

   .counter-item h3 {
       font-size: 3rem;
       color: var(--primary-color);
       margin: 0;
   }

   /* =========================================
           8. FOOTER
           ========================================= */
   footer {
       background-color: #1a1a1a;
       color: #ccc;
       padding: 60px 0 20px;
   }

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

   .footer-col h4 {
       color: var(--white);
       margin-bottom: 20px;
       font-size: 1.2rem;
   }

   .footer-col ul li {
       margin-bottom: 10px;
   }

   .footer-col ul li a:hover {
       color: var(--primary-color);
       padding-left: 5px;
   }

   .copyright {
       border-top: 1px solid #333;
       padding-top: 20px;
       text-align: center;
       font-size: 0.9rem;
   }

   /* =========================================
           9. TOAST NOTIFICATION (No Alerts)
           ========================================= */
   .toast-container {
       position: fixed;
       bottom: 30px;
       right: 30px;
       z-index: 2000;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .toast {
       background: var(--white);
       color: var(--text-color);
       padding: 15px 25px;
       border-radius: var(--border-radius);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
       border-left: 5px solid var(--primary-color);
       transform: translateX(120%);
       transition: transform 0.4s ease;
       display: flex;
       align-items: center;
       gap: 15px;
       min-width: 300px;
   }

   .toast.show {
       transform: translateX(0);
   }

   .toast i {
       color: var(--primary-color);
       font-size: 1.2rem;
   }

   .x {
       display: none;
   }

   /* =========================================
           10. RESPONSIVE MEDIA QUERIES
           ========================================= */
   @media (max-width: 992px) {
       .slide-content h1 {
           font-size: 2.5rem;
       }

       .treatment-block,
       .flex-row-reverse {
           flex-direction: column !important;
           text-align: left;
       }

       .treatment-img {
           width: 100%;
           height: 300px;
       }

       .counters {
           flex-direction: column;
           gap: 20px;
       }
   }

   @media (max-width: 768px) {
       .y {
           display: none;
       }

       .x {
           display: flex;
       }

       .top-bar {
           display: none;
       }

       /* Hide top info on mobile */
       .mobile-toggle {
           display: block;
       }

       .nav-links {
           position: fixed;
           top: 70px;
           left: 0;
           width: 100%;
           background: var(--white);
           flex-direction: column;
           padding: 20px;
           box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
           transform: translateY(-150%);
           transition: transform 0.3s ease;
           z-index: 999;
       }

       .nav-links.active {
           transform: translateY(0);
       }

       .slide-content h1 {
           font-size: 2rem;
       }

       .parallax-section {
           background-attachment: scroll;
       }

       /* Disable fixed bg on mobile for performance */


   }


   #mainSliderWrapper {
       position: relative;
   }

   .main-slider {
       visibility: visible !important;
       opacity: 1 !important;
   }

   .main-slider .slide {
       position: relative;
       height: 600px;
   }

   .main-slider .img--holder {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-size: cover;
       background-position: center;
   }

   .main-slider .slide-content {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 2;
   }

   .main-slider .slide-content::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.4);
       z-index: -1;
   }

   .slide-txt1 {
       font-size: 42px;
       line-height: 1.2;
       color: #fff;
       margin-bottom: 15px;
   }

   .slide-txt1 b {
       font-weight: 700;
   }

   .slide-txt2 {
       font-size: 18px;
       color: rgba(255, 255, 255, 0.9);
       margin-bottom: 30px;
   }

   .slide-btn .btn {
       padding: 14px 35px;
       font-size: 16px;
   }

   .hotel-card {
       background: #fff;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       transition: all 0.3s ease;
       margin-bottom: 30px;
       height: 100%;
   }

   .hotel-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
   }

   .hotel-card-img {
       position: relative;
       overflow: hidden;
       height: 220px;
   }

   .hotel-card-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }

   .hotel-card:hover .hotel-card-img img {
       transform: scale(1.1);
   }

   .hotel-card-badge {
       position: absolute;
       top: 15px;
       left: 15px;
       background: #4ca4df;
       color: #fff;
       padding: 5px 15px;
       border-radius: 20px;
       font-size: 12px;
       font-weight: 600;
       text-transform: uppercase;
   }

   .hotel-card-body {
       padding: 25px;
   }

   .hotel-card-title {
       font-size: 20px;
       font-weight: 600;
       margin-bottom: 8px;
       color: #2c3e50;
   }

   .hotel-card-location {
       color: #7f8c8d;
       font-size: 14px;
       margin-bottom: 12px;
   }

   .hotel-card-location i {
       color: #3498db;
       margin-right: 5px;
   }

   .hotel-card-rating {
       margin-bottom: 15px;
   }

   .hotel-card-rating i {
       color: #f1c40f;
       font-size: 14px;
   }

   .hotel-card-price {
       font-size: 22px;
       font-weight: 700;
       color: #27ae60;
   }

   .hotel-card-price span {
       font-size: 14px;
       color: #95a5a6;
       font-weight: 400;
   }

   .doctor-card {
       background: #fff;
       border-radius: 16px;
       overflow: hidden;
       box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
       transition: all 0.35s ease;
       margin-bottom: 30px;
       text-align: center;
       position: relative;
   }

   .doctor-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
   }

   .doctor-card-img-wrap {
       position: relative;
       padding-top: 30px;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }

   .doctor-card-img {
       width: 140px;
       height: 140px;
       border-radius: 50%;
       border: 5px solid #fff;
       margin: 0 auto;
       overflow: hidden;
       position: relative;
       top: 30px;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
   }

   .doctor-card-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .doctor-card-body {
       padding: 50px 25px 30px;
   }

   .doctor-card-name {
       font-size: 22px;
       font-weight: 700;
       color: #2c3e50;
       margin-bottom: 5px;
   }

   .doctor-card-dept {
       color: #3498db;
       font-size: 14px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-bottom: 12px;
   }

   .doctor-card-exp {
       color: #7f8c8d;
       font-size: 14px;
       margin-bottom: 15px;
   }

   .doctor-card-social a {
       display: inline-block;
       width: 36px;
       height: 36px;
       line-height: 36px;
       border-radius: 50%;
       background: #ecf0f1;
       color: #7f8c8d;
       margin: 0 4px;
       transition: all 0.3s;
   }

   .doctor-card-social a:hover {
       background: #3498db;
       color: #fff;
   }

   .doctor-card-btn {
       display: inline-block;
       margin-top: 18px;
       padding: 10px 30px;
       background: #3498db;
       color: #fff;
       border-radius: 25px;
       font-size: 14px;
       font-weight: 600;
       transition: all 0.3s;
   }

   .doctor-card-btn:hover {
       background: #2980b9;
       color: #fff;
       text-decoration: none;
   }

   .disease-section {
       padding: 80px 0;
   }

   .disease-section:nth-child(even) {
       background: #f8f9fa;
   }

   .disease-img-wrap {
       position: relative;
       border-radius: 16px;
       overflow: hidden;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
   }

   .disease-img-wrap img {
       width: 100%;
       border-radius: 16px;
   }

   .disease-content {
       padding: 20px 0;
   }

   .disease-tag {
       display: inline-block;
       padding: 6px 18px;
       background: #e8f4fd;
       color: #3498db;
       border-radius: 20px;
       font-size: 13px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-bottom: 20px;
   }

   .disease-title {
       font-size: 36px;
       font-weight: 700;
       color: #2c3e50;
       margin-bottom: 20px;
       line-height: 1.3;
   }

   .disease-desc {
       font-size: 16px;
       color: #5a6c7d;
       line-height: 1.8;
       margin-bottom: 25px;
   }

   .disease-features {
       list-style: none;
       padding: 0;
       margin: 0 0 25px;
   }

   .disease-features li {
       padding: 8px 0;
       padding-left: 30px;
       position: relative;
       color: #4a5568;
       font-size: 15px;
   }

   .disease-features li::before {
       content: '\2713';
       position: absolute;
       left: 0;
       top: 8px;
       width: 22px;
       height: 22px;
       background: #27ae60;
       color: #fff;
       border-radius: 50%;
       font-size: 12px;
       text-align: center;
       line-height: 22px;
   }

   .parallax-section {
       position: relative;
       background-attachment: fixed;
       background-size: cover;
       background-position: center;
       padding: 120px 0;
       text-align: center;
   }

   .parallax-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(44, 62, 80, 0.75);
   }

   .parallax-content {
       position: relative;
       z-index: 2;
   }

   .parallax-title {
       font-size: 48px;
       color: #fff;
       font-weight: 700;
       margin-bottom: 20px;
   }

   .parallax-text {
       font-size: 20px;
       color: rgba(255, 255, 255, 0.85);
       max-width: 700px;
       margin: 0 auto 35px;
   }

   .parallax-btn {
       display: inline-block;
       padding: 14px 40px;
       background: #fff;
       color: #2c3e50;
       border-radius: 30px;
       font-weight: 600;
       font-size: 16px;
       transition: all 0.3s;
   }

   .parallax-btn:hover {
       background: #3498db;
       color: #fff;
       text-decoration: none;
   }

   .text-rotate-section {
       background: linear-gradient(135deg, #49b0c1 0%, #3d6877 100%);
       padding: 80px 0;
       text-align: center;
   }

   .text-rotate-title {
       font-size: 18px;
       color: rgba(255, 255, 255, 0.7);
       text-transform: uppercase;
       letter-spacing: 3px;
       margin-bottom: 15px;
   }

   .text-rotate-display {
       font-size: 42px;
       color: #fff;
       font-weight: 700;
       min-height: 60px;
   }

   .text-rotate-cursor {
       display: inline-block;
       width: 3px;
       height: 42px;
       background: #fff;
       margin-left: 5px;
       animation: blink 0.8s infinite;
       vertical-align: middle;
   }

   @keyframes blink {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0;
       }
   }

   @media (max-width: 991px) {
       .slide-txt1 {
           font-size: 32px;
       }

       .slide-txt2 {
           font-size: 16px;
       }

       .main-slider .slide {
           height: 450px;
       }

       .disease-title {
           font-size: 28px;
       }

       .parallax-title {
           font-size: 36px;
       }

       .text-rotate-display {
           font-size: 32px;
       }

       .disease-section {
           padding: 50px 0;
       }

       .parallax-section {
           padding: 80px 0;
       }
   }

   @media (max-width: 767px) {
       .slide-txt1 {
           font-size: 24px;
       }

       .slide-txt2 {
           font-size: 14px;
       }

       .main-slider .slide {
           height: 350px;
       }

       .slide-btn .btn {
           padding: 10px 25px;
           font-size: 14px;
       }

       .disease-title {
           font-size: 24px;
       }

       .parallax-title {
           font-size: 28px;
       }

       .parallax-text {
           font-size: 16px;
       }

       .text-rotate-display {
           font-size: 24px;
           min-height: 40px;
       }

       .text-rotate-cursor {
           height: 28px;
       }

       .hotel-card-img {
           height: 180px;
       }

       .doctor-card-img {
           width: 120px;
           height: 120px;
       }

       .disease-img-wrap {
           margin-bottom: 30px;
       }
   }

   @media (max-width: 575px) {
       .slide-txt1 {
           font-size: 20px;
       }

       .main-slider .slide {
           height: 300px;
       }

       .hotel-card-body {
           padding: 18px;
       }

       .doctor-card-body {
           padding: 45px 18px 25px;
       }

       .parallax-section {
           padding: 60px 0;
       }

       .text-rotate-section {
           padding: 50px 0;
       }
   }

   .slick-prev,
   .slick-next {
       z-index: 10;
   }

   .slick-prev {
       left: 20px;
   }

   .slick-next {
       right: 20px;
   }


/* about */

   /*==========================
        SECTION
==========================*/

.section-1{
    max-width:1320px;
    width:92%;
    margin:70px auto;
}


/*==========================
      INFO CARD
==========================*/

.info-card-1{
    margin-bottom:40px;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.4s ease;
}

.info-card-1:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.info-card-1 .row{
    min-height:100%;
}


/*==========================
       IMAGE
==========================*/

.img-box{
    min-height:520px;
    overflow:hidden;
}

.img-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.info-card-1:hover img{
    transform:scale(1.06);
}


/*==========================
      CONTENT
==========================*/

.content-box-1{
    position:relative;
    padding:23px 38px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.content-box-1 h2{
    font-size:42px;
    font-weight:700;
    color:#163b3a;
    margin-bottom:25px;
}

.content-box-1 p{
    color:#555;
    line-height:1.9;
    font-size:16px;
    margin-bottom:18px;
}

.content-box-1 ul{
    padding-left:22px;
    margin:0;
}

.content-box-1 li{
    margin-bottom:15px;
    line-height:1.8;
    color:#555;
}


/*==========================
    DECORATIVE PLUS
==========================*/

.plus-shape{
    position:absolute;
    top:20px;
    right:20px;
    width:100px;
    height:100px;
    opacity:.08;
}

.plus-shape::before,
.plus-shape::after{
    content:"";
    position:absolute;
    background:#2fa49c;
    border-radius:20px;
}

.plus-shape::before{
    width:100px;
    height:28px;
    top:36px;
}

.plus-shape::after{
    width:28px;
    height:100px;
    left:36px;
}


/*==========================
     WHY INDIA
==========================*/

.why-india-section{
    margin-top:70px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.why-left{
    background:#2fa49c;
    color:#fff;
    padding:60px 45px;
    height:100%;
}

.why-left h3{
    font-size:40px;
    font-weight:700;
    margin-bottom:45px;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:18px;
}

.feature-item:last-child{
    margin-bottom:0;
}

.feature-item .icon{
    width:50px;
    height:50px;
    background:#fff;
    color:#2fa49c;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.feature-item .icon i{
    font-size:20px;
}

.feature-item p{
    margin:0;
    font-size:16px;
    line-height:1.8;
}


/*==========================
      RIGHT SIDE
==========================*/

.why-right{
    background:#eef5f2;
    padding:60px 45px;
    position:relative;
    height:100%;
}

.why-right h2{
    font-size:60px;
    font-weight:800;
    line-height:1.1;
    color:#163b3a;
    margin-bottom:35px;
}

.why-right img{
    width:100%;
    height:430px;
    object-fit:cover;
    border-radius:15px;
}


/*==========================
   TESTIMONIAL
==========================*/

.testimonials-section{
    padding:90px 0;
}


/*==========================
     LARGE SCREEN
==========================*/

@media(max-width:1200px){

    .section-1{
        width:94%;
    }

    .content-box-1{
        padding:45px;
    }

    .img-box{
        min-height:450px;
    }

    .why-right h2{
        font-size:50px;
    }

}


/*==========================
        TABLET
==========================*/

@media(max-width:991px){

    .section-1{
        width:95%;
        margin:50px auto;
    }

    .img-box{
        min-height:360px;
    }

    .content-box-1{
        padding:35px;
    }

    .content-box-1 h2{
        font-size:34px;
    }

    .why-left,
    .why-right{
        padding:40px 30px;
    }

    .why-left h3{
        font-size:32px;
    }

    .why-right h2{
        font-size:42px;
    }

    .why-right img{
        height:320px;
    }

}


/*==========================
        MOBILE
==========================*/

@media(max-width:767px){

    .section-1{
        width:94%;
        margin:40px auto;
    }

    .info-card-1{
        border-radius:15px;
        margin-bottom:40px;
    }

    .img-box{
        min-height:250px;
    }

    .content-box-1{
        padding:25px 20px;
    }

    .content-box-1 h2{
        font-size:28px;
    }

    .content-box-1 p,
    .content-box-1 li{
        font-size:15px;
    }

    .why-left,
    .why-right{
        padding:25px 20px;
    }

    .why-left h3{
        font-size:28px;
        margin-bottom:30px;
    }

    .why-right h2{
        font-size:34px;
        margin-bottom:25px;
    }

    .feature-item{
        gap:14px;
        margin-bottom:20px;
    }

    .feature-item .icon{
        width:42px;
        height:42px;
    }

    .feature-item .icon i{
        font-size:18px;
    }

    .feature-item p{
        font-size:15px;
    }

    .why-right img{
        height:240px;
    }

    .plus-shape{
        width:70px;
        height:70px;
    }

    .plus-shape::before{
        width:70px;
        height:18px;
        top:26px;
    }

    .plus-shape::after{
        width:18px;
        height:70px;
        left:26px;
    }

}
/*==========================
      SMALL MOBILE
==========================*/
@media(max-width:480px){

    .section-1{
        width:95%;
    }
    .content-box-1{
        padding:20px 18px;
    }
    .content-box-1 h2{
        font-size:26px;
    }
    .img-box{
        min-height:220px;
    }
    .why-right img{
        height:220px;
    }
}
   .section-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       gap: 12px;
       margin-bottom: 32px;
   }

   .section-header h2 {
       font-size: 1.5rem;
       font-weight: 700;
       color: #0b2b4a;
   }

   .section-header .count-badge {
       background: #e8f4fd;
       color: #0f5a96;
       padding: 6px 18px;
       border-radius: 40px;
       font-size: 0.85rem;
       font-weight: 600;
   }

   /* ── Testimonial Card ── */
   .testimonial-card {
       background: #fff;
       border: 1px solid #eef2f6;
       border-radius: 16px;
       padding: 28px;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.04);
       transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
       height: 100%;
       display: flex;
       flex-direction: column;
   }

   .testimonial-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.06);
   }

   /* Rating stars */
   .stars {
       display: flex;
       gap: 3px;
       margin-bottom: 14px;
   }

   .stars svg {
       width: 18px;
       height: 18px;
       fill: #f59e0b;
   }

   .stars svg.empty {
       fill: #e2e8f0;
   }

   /* Quote */
   .quote-icon {
       color: #0f5a96;
       opacity: 0.15;
       font-size: 2.8rem;
       line-height: 1;
       margin-bottom: -8px;
       font-family: Georgia, serif;
   }

   .testimonial-text {
       font-size: 0.95rem;
       line-height: 1.7;
       color: #334155;
       flex: 1;
   }

   .testimonial-text .short-text {
       display: inline;
   }

   .testimonial-text .full-text {
       display: none;
   }

   .testimonial-text.expanded .short-text {
       display: none;
   }

   .testimonial-text.expanded .full-text {
       display: inline;
   }

   /* Read More btn */
   .read-more-btn {
       background: none;
       border: none;
       color: #0f5a96;
       font-weight: 600;
       font-size: 0.85rem;
       padding: 0;
       cursor: pointer;
       font-family: inherit;
       transition: color 0.2s;
   }

   .read-more-btn:hover {
       color: #083a63;
   }

   .read-more-btn .less-text {
       display: none;
   }

   .read-more-btn.expanded .more-text {
       display: none;
   }

   .read-more-btn.expanded .less-text {
       display: inline;
   }

   /* Patient info */
   .patient-info {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-top: 16px;
       padding-top: 16px;
       border-top: 1px solid #f1f5f9;
   }

   .patient-avatar {
       width: 44px;
       height: 44px;
       border-radius: 50%;
       object-fit: cover;
       background: #e2e8f0;
       flex-shrink: 0;
   }

   .patient-avatar.initials {
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       font-size: 1rem;
       color: #fff;
   }

   .patient-details .name {
       font-weight: 600;
       font-size: 0.9rem;
       color: #0f172a;
   }

   .patient-details .meta {
       font-size: 0.8rem;
       color: #64748b;
   }

   .patient-details .treatment-tag {
       display: inline-block;
       background: #e8f4fd;
       color: #0f5a96;
       font-size: 0.7rem;
       font-weight: 600;
       padding: 2px 10px;
       border-radius: 20px;
       margin-top: 2px;
   }

   /* ── Load More ── */
   .load-more-wrap {
       text-align: center;
       margin-top: 40px;
   }

   .load-more-btn {
       padding: 14px 56px;
       background: #fff;
       color: #0f5a96;
       border: 2px solid #e2e8f0;
       border-radius: 12px;
       font-size: 0.95rem;
       font-weight: 600;
       font-family: inherit;
       cursor: pointer;
       transition: all 0.25s;
   }

   .load-more-btn:hover {
       border-color: #0f5a96;
       background: rgba(15, 90, 150, 0.04);
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(15, 90, 150, 0.08);
   }

   .load-more-btn:active {
       transform: translateY(0);
   }

   .load-more-btn:disabled {
       opacity: 0.4;
       cursor: not-allowed;
       transform: none;
       box-shadow: none;
   }

   /* ── Skeleton ── */
   .skeleton-pulse {
       background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
       background-size: 200% 100%;
       animation: shimmer 1.4s infinite;
       border-radius: 8px;
   }

   @keyframes shimmer {
       0% {
           background-position: 200% 0;
       }

       100% {
           background-position: -200% 0;
       }
   }

   .skeleton-card {
       background: #fff;
       border-radius: 16px;
       padding: 28px;
       border: 1px solid #eef2f6;
   }

   .skeleton-card .sk-stars {
       display: flex;
       gap: 4px;
       margin-bottom: 14px;
   }

   .skeleton-card .sk-stars span {
       width: 18px;
       height: 18px;
       border-radius: 2px;
   }

   .skeleton-card .sk-line {
       height: 12px;
       margin-bottom: 10px;
       width: 95%;
   }

   .skeleton-card .sk-line.short {
       width: 55%;
   }

   .skeleton-card .sk-line.medium {
       width: 75%;
   }

   .skeleton-card .sk-avatar {
       width: 44px;
       height: 44px;
       border-radius: 50%;
       margin-top: 16px;
   }

   /* ── Footer ── */
   .site-footer {
       background: #0b2b4a;
       color: #94a3b8;
       text-align: center;
       padding: 32px 20px;
       font-size: 0.85rem;
   }

   .site-footer a {
       color: #7dd3fc;
       text-decoration: none;
   }

   .site-footer a:hover {
       text-decoration: underline;
   }

   /* ── Animations ── */
   .testimonial-card {
       opacity: 0;
       transform: translateY(20px);
   }

   .testimonial-card.fade-in {
       animation: fadeUp 0.5s ease forwards;
   }

   @keyframes fadeUp {
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

         .health-package-section {
            padding: 80px 0;
            background: linear-gradient(180deg, #f4f8ff, #ffffff);
        }

        .content-card {
            max-width: 1000px;
            margin: auto;
            overflow: hidden;
        }

        /* Header */

        .heading-area {
            padding: 6px 4px;
            text-align: center;
            color: #767676;
        }

        .badge-title {
            display: inline-block;
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            padding: 10px 22px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            backdrop-filter: blur(10px);
            margin-bottom: 20px;
        }

        .heading-area h1 {
            font-size: 42px;
            font-weight: 700;
            line-height: 1.3;
            color: #222222;
        }

        .title-line {
            width: 90px;
            height: 4px;
            background: #000000;
            margin: 20px auto 0;
            border-radius: 10px;
        }

        /* Content */

        .content-card p {
            padding: 40px 45px 0;
            color: #555;
            font-size: 16px;
            line-height: 1.9;
            text-align: justify;
        }

        /* Instruction Box */

        .instruction-box {
            margin: 45px;
            background: #f8fbff;
            border: 1px solid #e8efff;
            border-radius: 25px;
            padding: 35px;
        }

        .instruction-box h2 {
            font-size: 30px;
            color: #222222;
            margin-bottom: 30px;
            text-align: center;
        }

        .instruction-box ul {
            list-style: none;
            padding: 0;
        }

        .instruction-box li {
            position: relative;
            padding-left: 40px;
            margin-bottom: 18px;
            color: #555;
            line-height: 1.8;
            font-size: 15px;
        }

        .instruction-box li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 2px;
            width: 25px;
            height: 25px;
            background: #49B0C1;
            color: #fff;
            border-radius: 50%;
            font-size: 13px;
            text-align: center;
            line-height: 25px;
        }

        /* Responsive */

        @media (max-width:768px) {
            .heading-area {
                padding: 45px 25px;
            }

            .heading-area h1 {
                font-size: 30px;
            }

            .content-card p {
                padding: 30px 25px 0;
            }

            .instruction-box {
                margin: 25px;
                padding: 25px;
            }

            .instruction-box h2 {
                font-size: 24px;
            }

            .instruction-box li {
                padding-left: 35px;
                font-size: 14px;
            }
        }

        .grid {
            max-width: 1200px;
            margin: 70px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
        }

        .card {
            background: #fff;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
            position: relative;
            border: 1px solid #eef2f7;
        }

        .card:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 60px rgba(13, 110, 253, 0.18);
        }

        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #0d6efd, #00c6ff);
            transition: 0.5s;
        }

        .card:hover::before {
            left: 0;
        }

        .card-body img {
            width: 100%;
            height: 230px;
            object-fit: cover;
            display: block;
            transition: 0.5s;
        }

        .card:hover img {
            transform: scale(1.08);
        }

        .card-body {
            padding: 25px;
        }

        .card-title {
            font-size: 23px;
            color: #1f2937;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 15px;
        }

        .card-hospital {
            display: inline-flex;
            align-items: center;
            background: #eef5ff;
            color: #49B0C1;
            padding: 8px 16px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 18px;
        }

        .card-desc {
            color: #666;
            font-size: 15px;
            line-height: 1.8;
            margin-bottom: 25px;
        }

        .card-meta {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            padding-top: 18px;
            border-top: 1px solid #edf2f7;
            margin-bottom: 25px;
        }

        .meta-item {
            font-size: 14px;
            color: #777;
        }

        .card-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            background: linear-gradient(135deg, #49B0C1);
            color: #fff;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 600;
            transition: 0.4s;
        }

        .card-btn span {
            transition: 0.3s;
        }

        .card-btn:hover {
            background: linear-gradient(135deg, #0056d2, #0078ff);
            transform: translateY(-3px);
        }

        .card-btn:hover span {
            transform: translateX(5px);
        }

        /* Floating Animation */

        .card {
            animation: fadeUp 0.8s ease forwards;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ===========================
   RESPONSIVE
=========================== */

        @media (max-width: 768px) {
            .grid {
                gap: 20px;
                margin: 50px auto;
            }

            .card-title {
                font-size: 20px;
            }

            .card-body {
                padding: 20px;
            }

            .card-body img {
                height: 220px;
            }

            .card-meta {
                flex-direction: column;
                align-items: flex-start;
            }

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

        @media (max-width: 480px) {
            .grid {
                grid-template-columns: 1fr;
            }

            .card-title {
                font-size: 18px;
            }

            .card-body img {
                height: 200px;
            }
        }

         .HM N { padding: 70px 0 90px; }

    .mc-title {
      font-weight: 700;
      margin: 0;
      position: relative;
      padding-left: 16px;
    }
    .mc-title::before {
      content: "";
      position: absolute; left: 0; top: 50%;
      transform: translateY(-50%);
      width: 5px; height: 70%;
      border-radius: 6px;
      background: linear-gradient(var(--mc-primary), var(--mc-primary-dark));
    }

    .mc-badge {
      background: #eaf2fb;
      color: var(--mc-primary-dark);
      font-size: .85rem;
      font-weight: 500;
      padding: 7px 16px;
      border-radius: 999px;
    }

    /* ---- Card ---- */
    .mc-card {
      background: #fff;
      border: 1px solid var(--mc-line);
      border-radius: 16px;
      padding: 1.75rem 1.6rem 1.5rem;
      box-shadow: 0 10px 30px rgba(16, 60, 110, .08);
      height: 100%;
      opacity: 0;
      transform: translateY(16px);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .mc-card.mc-show {
      opacity: 1;
      transform: translateY(0);
      transition: opacity .5s ease, transform .5s ease;
    }
    .mc-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(16, 60, 110, .18);
      border-color: #cfe0f3;
    }

    .mc-stars { display: flex; gap: 3px; }
    .mc-stars svg { width: 18px; height: 18px; fill: var(--mc-gold); }
    .mc-stars svg.mc-off { fill: #d7e0ea; }

    .mc-quote {
      position: absolute;
      top: 1rem; right: 1.4rem;
      font-family: Georgia, serif;
      font-size: 3.2rem;
      line-height: 1;
      color: #e7eef7;
      pointer-events: none;
      user-select: none;
    }

    /* Clamp card preview to 4 lines so every card stays equal height */
    .mc-clamp {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .mc-readmore {
      font-weight: 600;
      font-size: .88rem;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .mc-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
    .mc-avatar.mc-initials {
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: .5px;
    }

    .mc-tag {
      font-size: .72rem;
      font-weight: 500;
      padding: 3px 10px;
      border-radius: 999px;
    }

    /* ---- Load more ---- */
    .mc-loadmore {
      border: none;
      cursor: pointer;
      background: linear-gradient(var(--mc-primary), var(--mc-primary-dark));
      color: #030303;
      font-weight: 600;
      font-size: .95rem;
      padding: 13px 34px;
      border-radius: 999px;
      box-shadow: 0 8px 20px rgba(30, 136, 229, .35);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .mc-loadmore:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 136, 229, .45); }

    /* ---- Skeleton ---- */
    .mc-skel-card {
      background: #fff;
      border: 1px solid var(--mc-line);
      border-radius: 16px;
      padding: 1.75rem 1.6rem;
      box-shadow: 0 10px 30px rgba(16, 60, 110, .08);
    }
    .mc-pulse {
      background: linear-gradient(90deg, #eef3f8 25%, #e2eaf2 37%, #eef3f8 63%);
      background-size: 400% 100%;
      animation: mc-shimmer 1.4s ease infinite;
      border-radius: 6px;
    }
    @keyframes mc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

    /* ---- Modal (Bootstrap modal, only minor custom tweaks) ---- */
    .mc-modal-text { white-space: pre-wrap; line-height: 1.8; }
    .mc-modal-avatar { width: 52px; height: 52px; }
    .modal-body { color: #38465a; }