/* ============================
       SECTION STRUCTURE & SPACING
    ============================= */
    section {
      padding: 5% 7%;
    }

    .container {
      max-width: 1600px;
      margin: 0 auto;
    }

    /*.wave-divider {*/
    /*  background: linear-gradient(to bottom, #e8f4f8 0%, var(--white) 100%);*/
    /*  height: 30px;*/
    /*  width: 100%;*/
    /*}*/

    /*.wave-divider.flip {*/
    /*  transform: rotate(180deg);*/
    /*}*/

    /* ============================
       HERO SECTION
    ============================= */
    .hero-section {
      background-color: var(--white);
      /*box-shadow: inset 0 0 20px rgba(0,0,0,0.05);*/
      padding: 2% 7%;
    }

    .hero-content {
      display: flex;
      /*display: grid;*/
      /*grid-template-columns: 30% 70%;*/
      align-items: center;
      gap: 40px;
      margin-top: 15px;
    }
    
     .under_img{
            display: none;
        }
        

    .hero-img {
      width: 280px;
      height: 280px;
      border: 4px solid var(--primary-blue-colour);
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;
    }

    .hero-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        margin-top: 10px;
    }

    .hero-title {
      font-size: 40px;
      line-height: 1.2;
      /*color: var(--primary-blue-colour);*/
      color: black;
      font-weight: 700;
      /*margin-bottom: 10px;*/
    }

    .hero-subtitle {
      color: var(--red);
      font-size: 17px;
      /*font-size: 22px;*/
      font-weight: 500;
      /*margin-bottom: 20px;*/
      margin-bottom: 10px;
    }
    .hero-section .txt{
        font-size:15px;
    }
    .txt strong{
        font-size:20px;
    }

    /* ============================
       IMPACT COUNTER
    ============================= */
    .impact-section {
      background-color: var(--primary-blue-colour);
      color: var(--white);
      text-align: center;
      padding: 1% 7%;
    }

    .impact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    .impact-item p:first-child {
      font-size: 48px;
      font-weight: 700;
      color: var(--primary-yellow-color);
       line-height: 1.3;
    }

    .impact-item p:last-child {
      font-size: 18px;
      color: white;
    }

    /* ============================
       TEAM SECTION
    ============================= */
    .team-section {
      /*background-color: #e8f4f8;*/
      /*background-color: #e8f4f8;*/
      background-image: url(https://saaol.com/psd/assets/images/home/EECP-section-BG.webp);
      position: relative;
    }
    
    .locator-stats {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        margin-top: 15px;
        text-align: center;
    }
    
    div:where(.swal2-container){
        z-index: 10000 !important;
    }
    
    .find_button{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
    }
    
    .find_button i{
      font-size: 15px;
      color: red;
    }
    
    .swiper-wrapper{
        padding: 15px 0px;
    }

    .doctor-grid {
      /*display: grid;*/
      /*grid-template-columns: repeat(4, 1fr);*/
      /*gap: 25px;*/
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;     /* spacing between boxes */
      margin-top: 40px;
    }
    
    .priceOr_emergency_box{
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    .doctor-card {
      background-color: var(--white);
      border-radius: 15px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      padding: 15px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 297px;
      margin-right: 40px;
    }

    .doctor-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(30,149,195,0.15);
    }

    .doctor-card img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 4px solid var(--normal-blue);
      object-fit: cover;
      margin-bottom: 15px;
      padding-top: 5px;
    }
    
   .doctor-card .sub-heading{
       font-size: 22px;
       color: #2c3e50;
   }
   .doctor-card .qlf{
       /*font-size: 18px;*/
       font-size: 15px;
       color: #7f8c8d;
       font-style: italic;
    /*line-height: 1.3;*/
   }
   .doctor-card .type{
       font-size: 14px;
       color: var(--primary-blue-colour);
       /*line-height:1.3;*/
   }
   
   .big_name{
       font-size: 19px !important;
   }
   
     .doctor-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 90px;   /* approx height for 4 lines */
    transition: max-height 0.4s ease;
    }
    
    .doctor-description.expanded {
        -webkit-line-clamp: unset;
        max-height: 500px;  /* smooth expand */
    }
    
    .read-more-btn {
        color: #0b5d7e;
        cursor: pointer;
        font-weight: 600;
        display: inline-block;
        margin-top: 6px;
    }
    
    .read-more-btn:hover {
        text-decoration: underline;
    }



    /* ============================
       PROMISE SECTION
    ============================= */
    .promise-section {
      background-color: var(--white);
    }

    .promise-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 25px;
      margin-top: 40px;
    }
    
    .promise-grid .sub-heading{
        font-size: 21px;
    }

    .promise-card {
      background-color: #e8f4f8;
      padding: 25px;
      border-radius: 10px;
      border-bottom: 4px solid var(--primary-blue-colour);
      text-align: center;
      transition: all 0.3s ease;
    }

    .promise-card.red { border-color: var(--red); }
     .promise-card.red i{
         color: var(--red);
     }
    .promise-card.blue { border-color: var(--normal-blue); }
    .promise-card.blue i { color: var(--normal-blue); }

    .promise-card i {
      font-size: 40px;
      margin-bottom: 10px;
    }

    /* ============================
       CTA SECTION
    ============================= */
    .consulent-section {
      position: relative;
      background: var(--red);
      color: var(--white);
      text-align: center;
    }
    
    .nearest_doctor{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .consulent-section::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #00000075;
      color: var(--white);
      text-align: center;
    }
    
    .consulent-section div{
        position: relative;
        z-index: 1;
    }

    /* ============================
       TESTIMONIALS
    ============================= */
    
    .video_testinomial_section {
        padding:0px;
    }
    .video_testinomial_section .section-padding {
        padding:5% 7%;
    }
    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
      margin-top: 40px;
    }

    .testimonial-card {
      background-color: #e8f4f8;
      padding: 25px;
      border-radius: 15px;
      text-align: center;
      box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    }

    .testimonial-img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid var(--red);
      margin: 0 auto 15px;
    }

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

    /* ============================
       FAQ SECTION
    ============================= */
    .faq-card {
      background-color: var(--white);
      border-radius: 10px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.05);
      padding: 20px;
    }
    
    .faqs-section{
        background: white;
    }
    
    .faqs-section .section-padding{
        padding:0px;
    }

    details summary {
      cursor: pointer;
      font-weight: 600;
      font-size: 16px;
      color: var(--black);
    }

    details p {
      margin-top: 10px;
      color: var(--paragraph-font-color);
    }
    
    .first-banner-cities{
        padding: 0;
    }
    
    /*parralex effect*/
    .parallax {
      /* The image used */
      background-image: url("https://saaol.com/psd/assets/images/psd/Dont%20delay%20Care%20for%20You-BG-img.png");
    
      /* Set a specific height */
      /*min-height: 500px;*/
    
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .flex-total-center.f-column{
        flex-direction: column;
    }
    
     /*our doctor section start*/
      .doctors-section {
          padding:0;
        /*background: url("https://saaol.com/psd/assets/images/home/all-doctor-2.jpg");*/
        width: 100%;
        /*padding: 120px 20px;*/
        text-align: center;
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        /*flex-direction: column;*/
        /*background-position: center;*/
        /*background-size: cover;*/
        /*background-repeat: no-repeat;*/
        position: relative;
        /*z-index:1;*/
      }
      
      .doctors-section img{
        width: 100%;
        object-fit: cover;
        height: 520px;
      }
      
      .all_doctors_heading{
        position: absolute;
        top: 5%;
        left: 0;
        right: 0;
        text-align: center;
      }
      
      /*.doctors-section::after{*/
      /*    content: "";*/
      /*    position: absolute;*/
      /*    width: 100%;*/
      /*    height: 100%;*/
      /*    top:0;*/
      /*    bottom: 0;*/
      /*    left:0;*/
      /*    right:0;*/
      /*    background:#00000063;*/
      /*    z-index:-1;*/
      /*}*/
    
      /*REAL MATCH SHADOW LIKE YOUR IMAGE */
      .doctors-title {
        font-size: 40px;
        font-weight: 700;
        /*color: #fff;*/
        color: #1e95c3;
        margin: 0;
        line-height: 1.2;
        /*text-shadow:*/
        /*  0 4px 8px rgba(0,0,0,0.35),*/
        /*  0 6px 20px rgba(0,0,0,0.25),*/
        /*  0 0 25px rgba(0,0,0,0.15);*/
      }
    
      .doctors-subtitle {
        font-size: 17px;
        font-weight: 400;
        /*color: #fff;*/
        color: #1e95c3;
        /*margin-top: 20px;*/
        /*max-width: 1100px;*/
    
        /* Same shadow as title for consistency */
        /*text-shadow:*/
        /*  0 4px 8px rgba(0,0,0,0.35),*/
        /*  0 6px 20px rgba(0,0,0,0.25),*/
        /*  0 0 25px rgba(0,0,0,0.15);*/
      }
    
     
     /*our doctor section end*/
     
    

   
    
    /* .popup form style ...................................................*/
    #popup-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(10px);
    }
    
    #popup-container.popup-visible {
        opacity: 1;
        visibility: visible;
    }
    
    .popup {
        background: white;
        border-radius: 15px;
        width: 500px;
        /* max-width: 1000px; */
        display: flex;
        flex-wrap: wrap;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    .popup-header {
        width: 100%;
        background-color: var(--primary-blue-colour);
        color: white;
        padding: 1rem;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    .popup-header h3 {
        font-size: 22px;
        color: white;
        margin-bottom: 0;
    }
    
    .popup-body {
        display: flex;
        flex: 1;
        padding: 2rem;
        flex-wrap: wrap;
    }
    
    .popup-right {
        flex: 1;
        min-width: 300px;
        padding: 1rem;
    }
    
    
    .popup-right input,
     .popup-right textarea,
    .popup-right select
    {
        width: 100%;
        padding: 10px;
        margin-bottom: 1rem;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 1rem;
    }
    
    .popup .submit-btn {
        width: 100%;
        background: var(--primary-blue-colour);
        color: white;
        padding: 0.8rem;
        border: none;
        border-radius: 5px;
        font-size: 1rem;
        position: relative;
        cursor: pointer;
        margin-top: 17px;
    }
    
    .popup .submit-btn::before {
        content: "Consultation Now";
        position: absolute;
        top: -15px;
        right: 0;
        background: #ec1d26;
        color: white;
        padding: 0.2rem 2rem;
        font-size: 0.8rem;
        font-weight: 600;
        clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
    }
    
    .close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 45px;
        cursor: pointer;
        position: absolute;
        right: 10px;
    }
    
    
    .popup_step_container {
        position: relative;
    }
    
    .popup_step_container .line {
        position: absolute;
        height: 90%;
        width: 3px;
        background-color: var(--primary-blue-colour);
        left: 12px;
        top: 2px;
    }
    
    .round_icon {
        display: inline-block;
        min-width: 27px;
        min-height: 27px;
        background-color: var(--primary-blue-colour);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2px;
    }
    
    .round_icon i {
        font-size: 14px;
    }
    
    .stats_div {
        display: flex;
        flex-direction: column;
    
    }
    
    
    .contact-popup-btn {
        flex: 1;
        padding: 5px;
        border: 2px solid #3b82f6;
        background: white;
        color: #3b82f6;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
    }
    
    .contact-popup-btn:hover {
        background: #3b82f6;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    }
    
    .contact-popup-btn.call {
        border-color: var(--primary-blue-colour);
        color: var(--primary-blue-colour);
    }
    
    .contact-popup-btn.call:hover {
        background: var(--primary-blue-colour);
        color: white;
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
    }
    
    .contact-popup-btn.text {
        border-color: #e80000;
        color: #e80000;
    }
    
    .contact-popup-btn.text:hover {
        background: #e80000;
        color: white;
        box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
    }
    
    .contact-options {
        display: flex;
        gap: 15px;
        margin: 10px 0px;
    }
    
     .selected-doctor-display {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 10px;
        margin: 15px 0;
        border: 1px solid #e9ecef;
    }
    
    .doctor-preview {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    .doctor-image {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        background: #e3f2fd;
        border: 2px solid #2196f3;
    }
    
    .doctor-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .doctor-info {
        flex: 1;
    }
    
    .doctor-info h4 {
        /*margin: 0 0 5px 0;*/
        color: #2c3e50;
        font-size: 16px;
        line-height: 1.4;
    }
    
    .doctor-info p {
        /*margin: 0 0 5px 0;*/
        color: #7f8c8d;
        font-size: 14px;
        line-height: 1.4;
        display: flex;
        align-items: center;
    }
    
    .change-note {
        color: #95a5a6;
        font-style: italic;
        font-size: 12px;
        line-height: 1.4;
        /*margin-top: 5px;*/
    }
    
    .submit-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 45px;
    }
    
    .btn-spinner {
        width: 18px;
        height: 18px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        display: none;
    }
    
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
    
    .submit-btn.loading .btn-spinner {
        display: inline-block;
    }
    
    .submit-btn.loading .btn-text {
        opacity: 0.8;
    }

    /* //.popup style end */
    
    
    /*media query for responsive start.....*/
      @media (max-width: 1275px) {
      
      .promise-grid { grid-template-columns: 1fr 1fr; }
    }
    
     @media (max-width: 1250px) {
       .doctors-section img{
           height:600px;
       }
      }
      
       @media (max-width: 1075px) {
           .doctors-section img{
           height:400px;
       }
        .doctors-title { 
            font-size: 40px;
            line-height: 1;
            }
        .doctors-subtitle { 
            font-size: 12px; 
            line-height: 1.3;
            padding: 10px;
            
        }
      }
      
      @media (max-width: 1050px) {
        .hero-title{
            font-size: 30px;
        }
        .hero-subtitle{
             font-size: 13px;
        }
        .hero-section .txt{
             font-size: 12px;
        }
      }
      
        @media (max-width: 900px) {
          .hero-img {
            width: 200px;
            height: 200px;
          
          }
          .doctor-grid { grid-template-columns: repeat(2, 1fr); }
          .promise-grid, .impact-grid, .testimonial-grid { grid-template-columns: 1fr 1fr; }
        }
     
      @media (max-width: 768px) {
        .doctors-section img{
            height:350px;
        }
        
        .popup-body {
            flex-direction: column;
        }
    
        .popup-left,
        .popup-right {
            padding: 0.5rem;
        }
    
        .stats {
            flex-direction: column;
            gap: 1rem;
        }
        
        .hero-content { grid-template-columns: 1fr; text-align: center; display: grid; }
        .opmt_btn{
          justify-content: center;
        }
        .hero-content{
            gap:10px;
        }
          
      }
      
      /*@media (max-width: 992px) {*/
      /*  .doctors-title { font-size: 50px; }*/
      /*  .doctors-subtitle { font-size: 22px; }*/
      /*}*/
    
      @media (max-width: 600px) {
          .doctors-section img{
           height:300px;
        }
        /*.doctors-section { padding: 80px 15px; }*/
        .doctors-title { font-size: 36px; }
        /*.doctors-subtitle { font-size: 18px; }*/
        
        .doctor-grid, .promise-grid, .impact-grid, .testimonial-grid { grid-template-columns: 1fr; }
       .hero-title { font-size: 19px; }
        .hero-img {
            width: 150px;
            height: 150px;
        }
      }
      
      
    @media (max-width: 425px) {
        .popup{
            width: 315px;
        }  
        .popup-header h3{
            font-size: 16px;
        }
        .close-btn{
            font-size: 30px;
        }
        .popup-body{
            padding: 5px;
        }
        .popup-right input, .popup-right textarea, .popup-right select {
            font-size: 11px;
            margin-bottom: 0.5rem;
        }
        .doctor-info p, .priceOr_emergency_box span {
            font-size: 11px;
        }
        .doctor-info h4{
            font-size: 13px;
        }
        .change-note small{
            font-size: 9px;
        }
        .popup .submit-btn{
            margin-top: 10px;
        }
        .outer_image{
            display: none;
        }
        .under_img{
            display: block;
            width: 110px;
            height: 110px;
            /*margin: 0;*/
        }
        .hero-title{
            font-size: 15px;
        }
        .hero-subtitle{
            font-size: 10px;
        }
        .hero_img_heading_box{
          display: grid;
          grid-template-columns: 42% 58%;
        }
        .hero-content{
            text-align: left;
        }
        .hero-section .txt{
            text-align: justify;
        }
    }