/* colors  */
:root {
  --primary-bg-color: #1E40AF;
  --primary-color: #ffffff;
  --secondary-color: #F59E0B;
  --green-color: #059669;
  --purple-color: #7E22CE;
}



/* about page  */
.sriabout {
  background: var(--primary-bg-color);
  color: var(--primary-color);
}

.colgreen {
     color: var(--green-color);
}

.col-purple {
    color: var(--purple-color);
}

.bg-purple {
  background: var(--purple-color); 
}

.yelcol {
  color: var(--secondary-color);
}

.miss .fa {
      background: #e7eef4;
      color: var(--primary-bg-color);
      padding: 4%;
      border-radius: 16px;
      font-size: 2rem;
}

.sjourney .fa {
      background: #1E40AF;
      color: white;
      border-radius: 20px;
      padding: 15px;
}

.abbox {
      box-shadow: 0px 0px 9px #c7bdbd;
    border-radius: 8px;
    padding: 6% 5%;
}

/* contact page  */

.saddr p, .spho p, .shelp p, .swrk p, .sema p {
  font-size: 1rem;
  font-weight: 400;
}
.saddr .fa {
  
      background: #E8ECF7;
      color: #1E40AF;
      border-radius: 5px;
      padding: 15px;
      font-size: 1.3rem;

}

.spho .fa {
  
      background: #E6F4F0;
      color: #059669;
      border-radius: 5px;
      padding: 15px;
      font-size: 1.3rem;

}

.shelp .fa {
  
      background: #F3E8FF;
      color: #9333EA;
      border-radius: 5px;
      padding: 15px;
      font-size: 1.3rem;

}

.sema .fa {
  
      background: #FDF4E5;
      color: #F59E0B;
      border-radius: 5px;
      padding: 15px;
      font-size: 1.3rem;

}

.swrk .fa {
  
      background: #FEE2E2;
      color: #DC2626;
      border-radius: 5px;
      padding: 15px;
      font-size: 1.3rem;

}

/* common styles  */
.bg-grey {
  background: #F9FAFB;
}

.bg-alice {
  background: aliceblue;
}

.bg-blue {
  background: #1E40AF;
}

.bg-white {
  background: white;
}

.abpar {
    font-size: 1.4rem;
    font-weight: 400;
}

.bbox {
    box-shadow: 0px 0px 9px #c7bdbd;
    border-radius: 8px;
    margin: 3% 1%;
    padding: 5% 2%;
}

.jbbox {
    box-shadow: 0px 0px 9px #c7bdbd;
    border-radius: 8px;
    margin: 2% 1%;
    padding: 1% 2%;
}

.svalue p {
  font-size: 1rem;
}

.svalue h4 {
  margin-top: 2%;
  font-size: 1.3rem;
}


/* top header styles start  */
.top-head {
    background: #1E40AF;
    color: white;
    padding: 6px 0;
}
.top-head p {
  color: #fff;
  font-size: 0.9rem;
}

/* navbar styles start  */

/* Dropdown on hover (desktop only) */
    @media (min-width: 992px) {
      .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
      }
    }

    /* Custom card-like items inside dropdown */
    .dropdown-item-card {
      display: flex;
      gap: 12px;
      text-decoration: none;
      padding: 12px;
      border-radius: 8px;
      transition: background 0.2s ease;
      color: inherit;
    }
    .dropdown-item-card:hover {
      background: #f8f9fa;
    }
    .dropdown-item-card img {
      width: 25px;
      height: 25px;
      object-fit: cover;
      border-radius: 8px;
      flex-shrink: 0;
    }
    .dropdown-item-card .text {
      display: flex;
      flex-direction: column;
    }
    .dropdown-item-card .title {
      font-weight: 600;
      font-size: 0.95rem;
      margin-bottom: 2px;
    }
    .dropdown-item-card .desc {
      font-size: 0.8rem;
      color: #6c757d;
    }

    /* typography styles start  */
    p {
        color: #565563;
        font-size: 1.1rem;
    }
    .title-head {
            font-size: 4rem;
            font-weight: bold;
            line-height: 3.8rem;
    }

    .spltext {
        color: #1E40AF;
    }

    .textblue {
        color: #1E40AF;
    }

    .about-style {
        border: 1px solid #e2effb;
        background: #f0f8ff75;
        border-radius: 30px;
        width: fit-content;
        padding: 3px 10px;
        font-weight: 500;
        font-size: 1rem !important;
    }

    .about-style1 {
        border: 1px solid #e2effb;
        background: #f0f8ff75;
        border-radius: 30px;
        width: fit-content;
        padding: 3px 10px;
        font-weight: 500;
        font-size: 0.8rem !important;
    }

    .astat p {
       font-size: 1rem;
       font-weight: 400;
    }
    .astat span .fa {
      color: #1E40AF;
    font-size: 1.5rem;
    padding: 20px 20px;
    background: aliceblue;
    border-radius: 10px;
    }

    .astat span .fa:hover {
      background: #1E40AF;  
      color: aliceblue;
   
    }

    .abo-img {
      width: 100%;
  top: 19%;
  position: relative;
    }

    /* animation style  */
     .my-aelement {    
        animation-duration: 2s; /* don't forget to set a duration! */
        }

    /* features styles start  */
    .features {
      background: aliceblue;
      padding: 1% 0;
    }

    .features p {
      margin-bottom: 0px;
      font-size: 1rem;
    }

    .features .fa {
      color: #1E40AF;
    }

    /* services styles start  */

    .srititle {
      position: relative;
      display: inline-block;
      text-align: center;
    }

    .srititle::after {
      content: "";
      display: block;
      width: 80px;   
      height: 4px;   
      background-image: linear-gradient(45deg, #0760be, #12b2e5); 
      margin: 6px auto 0;  /* spacing & center align */
      border-radius: 2px;   
    }

    .servi {
      width: 80%;
      display: inline-block;
    }

    .serbtn {
      color: #1E40AF;
      font-weight: 500;
      text-decoration: none;
    }

    .serbox {
      box-shadow: 0px 0px 9px #c7bdbd;
      border-radius: 8px;
      padding: 10% 5%;
    }

    .serbox h4 {
      font-weight: 600;
      font-size: 1.3rem;
      margin-top: 3%;
    }

    .serbox p {
      font-size: 1rem;
    }

    .ser-list {
      list-style-image: url('../images/check-blue.png');
      padding: 0;
      margin-left: 8%;
      line-height: 1.7rem;
      /* list-style-type: none; */
    }

    .ser-listwhite {
      list-style-type: none;
    }

    .ser-listwhite li {
      color: #665e5e;
      font-size: 1rem;
    }

    .ser-listwhite li::before {
      content: url('../images/check-blue-white.png');
      background-color: #1E40AF;
      margin-right: 8px;
      padding: 1px 4px;
      border-radius: 15px;
      line-height: 3rem;
      
    }

    .ser-list li {
      font-size: 0.9rem;
    }   

    .orthocover {
        background-image: linear-gradient(45deg, #31299fd4, #50a1e1c7), url(../images/orthocover.png);
        height: 200px;
        width: 100%;
        background-position: center;
        background-size: cover;
        border-radius: 12px;
        margin-bottom: 5%;
    }  

    .gyneccover {
        background-image: linear-gradient(45deg, #2c9602e0, #2bcb7dd1), url(../images/ogcover.png);
        height: 200px;
        width: 100%;
        background-position: center;
        background-size: cover;
        border-radius: 12px;
        margin-bottom: 5%;
    }  

    .fertilitycover {
        background-image: linear-gradient(45deg, #7b299fd9, #e91e63c9), url(../images/fertility-center.png);
        height: 200px;
        width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 12px;
        margin-bottom: 5%;
    }  

    .care1 .fa {
      background: #1E40AF;
      color: white;
      padding: 5%;
      border-radius: 16px;
      font-size: 2rem;
      }

      .care2 .fa {
        background: #059569;
        color: white;
        padding: 5%;
        border-radius: 16px;
        font-size: 2rem;
      }

      .care3 .fa {
        background: #F59E0B;
        color: white;
        padding: 5%;
        border-radius: 16px;
        font-size: 2rem;
      }
      
      .caregyn .fa {
      background: aliceblue;
      /*color: white;*/
      padding: 5%;
      border-radius: 16px;
      font-size: 2rem;
      }

      /* team starts  */

      .teamimg {
        width: 100%;
        height: 280px;
        border-radius: 20px;
      }

      .team-srini {
            background-image: url('../images/drsrini.png');
            height: 280px;
            background-size: cover;
            background-position: bottom;
            border-radius: 10px;
      }

      .dteam-srini {
            background-image: url('../images/drsrini.png');
            height: 240px;
            background-size: cover;
            /* background-position: bottom; */
            border-radius: 10px;
      }

      .team-sutha {
            background-image: url('../images/drsutha.jpg');
            height: 280px;
            background-size: cover;
            background-position: bottom;
            border-radius: 10px;
      }

      .dteam-sutha {
            background-image: url('../images/drsutha.jpg');
            height: 240px;
            background-size: cover;
            /* background-position: bottom; */
            border-radius: 10px;
            width: 100%;
      }

      .serbox1 {
        box-shadow: 0px 0px 9px #c7bdbd;
        border-radius: 8px;
        padding: 5% 5%;
      }

      .teamcon h5 {
        font-size: 1.1rem;
        color: #1e40af;
      }

      /* doctors page  */

      .docteam span {
        margin: 2% 2%;
    background: #e5f7f8;
    padding: 1%;
    border-radius: 4px;
      }

      /* awards start  */
      .blogp {
        font-size: 0.9rem !important;
      }

      .serbox hr {
        color: #e2e4e6;
      }

      .h55 {
        height: 55px;
      }

      .h75 {
        height: 75px;
      }

      .h90 {
        height: 90px;
      }

      .awa-img {
        background: aliceblue;
        text-align: center;
        margin-bottom: 6%;
      }

      .awa-img img {
        background: white;
        width: 50%;
        height: 200px;
      }

      /* newspaper  */
      .artic .fa {
        color: #1e40af;
        background: aliceblue;
        padding: 12px;
        height: 42px;
        border-radius: 12px;
        margin-right: 4px;
      }

      .darb {
        color: aliceblue;
  background: #1e40af;
  position: absolute;
  float: left;
  border-radius: 20px;
  padding: 0px 5px;
  margin-top: 2%;
      }

      .artic p {
        line-height: 15px;
      }

      .artic span {
        font-size: 0.6rem;
        color: grey;
      }

      .newsyear {
        font-size: 1rem !important;
        font-weight: 600;
        margin-top: 5px;
      }

    /* footer style start  */

    footer {
        background: #111827;
        
    }


    footer p {
        color: #c9d2da;
        font-size:1rem;
    }

    footer h4 {
        color: #fff;
        font-weight: bold;
        font-size: 1.2rem;
    }

    .foot-social a {
        padding: 2%;
    }

    .foot-social a i {
        color: #6c757d;
        font-size: 1.4rem;
    }

    .footlogo {
      border-radius: 10px;
      width: 18%;
    }

    .foottext {
      margin-left: 5%;
    }

    .qlinks li {
        color: #c9d2da;
        list-style-type: none;
        font-size: 1rem;
        font-weight: 400;
        text-align: left;
        
    }

    .qlinks li:hover {
        color: white;
    }

    .dimtext {
        font-size: 0.9rem;
        color: #c9d2da;
    }

    .footadd {
      padding: 0px;
    }

    .footadd li {
      
    }

    .footadd li .fa {
      color: #1E40AF;
      padding-top: 2%;
      font-size: 1.2rem;
    }
    .footadd li p {
      margin-left: 5%;
      color: #c9d2da;
    }
    .foomenu a{
       text-decoration: none;
       padding: 2px 8px;
    }

    /* scrollbar  */

    /* facilities start  */

   .faci-white {      
      /* list-style-type: none; */
      margin-left: 5%;
    }

   .faci-white li {      
      font-size: 1rem;
      line-height: 2rem;
      color: #7b7171;
    } 

    .faci-white li span {
      color: black;
      /* font-size: 1.1rem;      */
      font-weight: 600; 
    }

    .sfaci .fa {
      background: #E8ECF7;
      color: #1E40AF;
      border-radius: 6px;
      padding: 15px;
      font-size: 2rem;
    }

    .faci-ivf {
            background-image: url('../images/ivf-facility-lab.jpg');
            height: 380px;
            background-size: cover;
            /* background-position: bottom; */
            border-radius: 10px;
      }

      .faci-icu {
            background-image: url('../images/facility-icu.jpg');
            height: 380px;
            background-size: cover;
            /* background-position: bottom; */
            border-radius: 10px;
      }

       .faci-opt {
            background-image: url('../images/faci-opt.jpg');
            height: 380px;
            background-size: cover;
            /* background-position: bottom; */
            border-radius: 10px;
      }

      .faci-mopt {
            background-image: url('../images/faci-mopt.jpg');
            height: 380px;
            background-size: cover;
            /* background-position: bottom; */
            border-radius: 10px;
      }

      .fcare-blue {
            background: #1E40AF;
            color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-green {
        background: #059669;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-yellow {
        background: #F59E0B;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-vio {
        background: #4F46E5;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-purple {
        background: #9333EA;
         color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-pink {
        background: #DB2777;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-red {
        background: #E11D48;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-pgreen {
        background: #0D9488;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-sky {
        background: #2563EB;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-brick {
        background: #DC2626;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-orange {
        background: #EA580C;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fcare-fenu {
        background: #CA8A04;
        color: white;
            padding: 0px 12px;
            border-radius: 4px;
            font-size: 2rem;
      }

      .fac-serbox {
      box-shadow: 0px 0px 9px #c7bdbd;
      border-radius: 8px;
      padding: 2% 2%;
      margin: 2%;
      background-color: white;
      width: 45% !important;
    }      

    .fac-serbox p {
      font-size: 1rem;
    }

    .fac-box {
       box-shadow: 0px 0px 9px #c7bdbd;
        border-radius: 8px;
        padding: 2%;
    }

    /* ortho styles  */

    .orth-icon i {
      background: #E8ECF75C;
      color: #1E40AF;
      border-radius: 6px;
      padding: 9px 16px;
      font-size: 2rem;
    }

    .orthbtn:hover {
      background: #071f6e;

    }

    .orth-listwhite, .orth-listwhite1 {
      list-style-type: none;
    }

    .orth-listwhite li, .orth-listwhite1 li {
      color: #665e5e;
      font-size: 1rem;
    }

    .orth-listwhite li::before {
      content: url('../images/check-blue-white.png');
      background-color: #1E40AF;
      margin-right: 8px;
      padding: 1px 4px;
      border-radius: 15px;
      line-height: 1.8rem;
      
    }

    .orth-listwhite1 li::before {
      content: url('../images/check-blue-white.png');
      background-color: var(--green-color);
      margin-right: 8px;
      padding: 1px 4px;
      border-radius: 15px;
      line-height: 1.8rem;
      
    }

    .bg-green {
      background: #059669;
    }

    .orthosty {
      display: inline;
  line-height: 2rem;
    }

    .orthosty span {
      background: var(--primary-bg-color);
      border-radius: 16px;
      padding: 1%;
      margin-right: 2%;
      color: white;
      width: 100%;
      font-size: 0.8rem;
    }

    .orth-icon1 .fa {
      background: #E8ECF75C;
      color: var(--secondary-color);
      border-radius: 6px;
      padding: 9px 16px;
      font-size: 2rem;
    }
    
    /*gynecology start */
    
    .gyn-box li {
          box-shadow: 0px 0px 9px #c7bdbd;
          border-radius: 8px;
          padding: 2% 4%;
          margin-bottom: 4%;
          list-style-type: none;
          background: white;
    }
    
     .gyn-box li::before {
      content: '.';
      background-color: var(--green-color);
      color: var(--green-color);
      margin-right: 8px;
      padding: 0px 8px;
      border-radius: 15px;
      line-height: 3rem;
      
    }
    
    .gybtn {
      color: #1E40AF;
      font-weight: 500;
      text-decoration: none;
      transition: transform .2s;
    }
    
    .gybtn:hover {
         -ms-transform: scale(1.5); /* IE 9 */
         -webkit-transform: scale(1.5); /* Safari 3-8 */
         transform: scale(1.5); 
    }
    
    .shaij {
        box-shadow: 0px 0px 9px #c7bdbd;  
        border-radius: 20px;
    }
    
    .shaij-bg {
  background: url('../images/fertility-center.png') no-repeat center center/cover;
  min-height: 400px; /* adjust height as needed */
  position: relative;
}

.bottom-boxes {
  bottom: 20px; /* distance from bottom */
}

@media (max-width: 767px) {
  .bottom-boxes {
    flex-direction: column; /* stack on mobile */
    align-items: center;
  }
  .gyn-box {
    width: 80%; /* make them wider on mobile */
  }
}

    
    /*.shaij-bg {*/
    /*    background-image: linear-gradient(45deg, #a949d917, #c76ee43d), url(../images/fertility-center.png);*/
       
    /*    background-size: cover;*/
    /*    background-position: center;*/
    /*}*/
    
     .shai-listwhite {
      list-style-type: none;
      padding-left: 0px !important;
    }

    .shai-listwhite li {
      color: #665e5e;
      font-size: 1rem;
      
    }

    .shai-listwhite li::before {
      content: url('../images/check-blue-white.png');
      background-image: linear-gradient(45deg, #a949d9, #D42882);
      margin-right: 8px;
      padding: 1px 4px;
      border-radius: 15px;
      line-height: 3rem;
      
    }
    
    .btn-shai {
        background-image: linear-gradient(45deg, #a949d9, #D42882);
    }
    
    .shaibot {
        bottom: 5%;
    }
    
    .bg-grad {
        background-image: linear-gradient(45deg, #a949d9, #D42882);
    }
    
    .shaihov:hover {
        background: #7209cd;
    }
    
    .shaihovw:hover {
        color: var(--purple-color);
    }
    
     .astat-shai span .fa {
      color: var(--green-color);
        font-size: 1.5rem;
        padding: 20px 20px;
        background: aliceblue;
        border-radius: 10px;
    }

   .shai-ybtn {
       background: var(--secondary-color);
   }
   
   .shai-ybtn:hover {
       background: #D77606 !important;
   }
   
   .shai-icon {
      
      background: #E8ECF75C;
      color: var(--secondary-color);
      border-radius: 6px;
      padding: 9px 16px;
      font-size: 2rem;
    
   }
    
   
  

