* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



.top-bar {

  width: 100%;

  background-color: #ed1b24;

  position: fixed;

  z-index: 1000;

}

.top-bar-btn {

  background-color: #9c0004;

  font-size: small;

  border: none;

  padding: 4px 0px;

}

.contact-btn {

  border-radius: 0px 0px 8px 8px;

}



.navbar-container {

    height: 650px;

    width: 100%;

    display: flex;

    justify-content: start;

    flex-direction: column;

    align-items: center;



}

.navbar-main{

  top: 20px;

}

.style-nav {

  background-color: #E2E2E2;

  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

  position: relative;

  z-index: 1000;

  border-radius: 50px;

  transition: margin-top 0.3s ease;

  margin-top: 2rem;

}







@media (max-width: 992px) {

  .navbar-collapse {

      max-height: 50vh;

      overflow-y: auto;

      margin-bottom: 1rem;

  }



  .nav-menu {

      flex-direction: column;

      align-items: center;

      width: auto;

  }



  .nav-menu a {

      padding: 10px;

      width: 100%;

      text-align: center;

  }

}



  .nav-menu {

      display: flex;

      flex-wrap: nowrap;

      gap: 10px;

      width: 45rem;

      justify-content: center;

  }



  .nav-menu a {

      color: #333;

      text-decoration: none;

      transition: color 0.3s ease;

      font-size: 14px;

      padding: 10px 5px;

      font-weight: 500;

  }
  
  .poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}



  .nav-menu a:hover {

      color: #007BFF;

  }



  .navbar-toggler {

      border: none;

      font-size: 24px;

      color: #007BFF;

  }



  .navbar-toggler-icon {

      font-size: 24px;

      color: #007BFF;

  }



  @media (max-width: 992px) {

      .nav-menu {

          flex-direction: column;

          align-items: center;

          width: auto;

      }



      .nav-menu a {

          padding: 10px;

          width: 100%;

          text-align: center;

      }

  }





.jmh-logo, .excellence-logo {

  max-width: 16rem !important;

  height: auto;

  object-fit: contain;

}





@media (max-width: 1025px) {

  .jmh-logo, .excellence-logo {

    max-width: 7rem;

  }

}



@media (max-width: 992px) {

  .jmh-logo, .excellence-logo {

    max-width: 10rem;

  }

}



@media (max-width: 768px) {

  .jmh-logo, .excellence-logo {

    max-width: 8rem;

  }

}



@media (max-width: 576px) {

  .jmh-logo, .excellence-logo {

    max-width: 6rem;

  }

}



@media (max-width: 375px) {

  .jmh-logo, .excellence-logo {

    max-width: 4rem;

  }

}



.second-container{

    background-color: #E2E2E2;

    border-radius: 100px;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    position: relative;

    margin-top: -7rem;

}

.emergency {

  top: 10rem;

  float: left;

  position: fixed;

  font-size: 12px;

  font-weight: 500;

  padding: 10px;

  background-color: #B52324;

  color: white;

  border-radius: 0 8px 8px 0;

  opacity: 1;

  z-index: 1000;

}





#appointment{

 /*background-color: #CFE1E3;*/
 background-color: #A5CCD0;

 width: 280px;

 border-radius: 16px;

}

#findDoctor{

    /*background-color: #E2DED5;*/
	background-color: #DBCCAC;

    width: 280px;

    border-radius: 16px;

}

#labs{

    /*background-color: #D6D9E2;*/
	background-color: #ABB7DD;

    width: 280px;

    border-radius: 16px;

}

#opinion{

/*background-color: #DDD5E2;*/
background-color: #C0AACE;

width: 280px;

border-radius: 16px;

}

#checkups{

    /*background-color: #DDDDDD;*/
	background-color: #D6B8B8;

    border-radius: 16px;

    margin: 160px;

}



.excellence-section{

    margin-top: 270px;

}

@media (max-width : 1024px) {

  .excellence-section{

    margin-top: 25rem;

}

}

.excellence-head{

    font-size: large;

}

.excellence-btn{

    background-color: #B52324;

    color: white;

    border-radius: 30px;

    border: none;

}

.hr{

    background-color: #B52324;

    width: 100px;

    height: 2px;

}

.card-img-custom {

    height: 150px;

    object-fit: cover;

}

.d-flex.gap-3 {

    gap: 1rem;

}



.card-title{

    color: #B52324;

}

.card-btn{

    background-color: #B52324;

    width: 100%;

    color: white;

    border: none;

    border-radius: 8px;

}

.appointment-section{

    background-color: #B52324;

}

.appointment-section p{

    font-weight: 500;

}

.appointment-section input{

    width: 20rem;

    outline: none;

    padding: 3px;

    border-radius: 5px;

    border: none;

    margin-right: 8px;

    background-color: #FFFFFF;

}

.appointment-section button{

    border: none;

    height: 30px;

    outline: none;

    border-radius: 5px;

    background-color: #FFFFFF;

}



@media (max-width: 768px) {

  .appointment-section p{

    margin-left: 8px;

  }

  .appointment-section button{

    margin-left: 9px;

  }

}



.vertical-line {

    width: 2px;

    height: 40px;

    background-color: white;

  }

  .expert-card-img {

    width: 100%; 

    height: auto;

    max-width: 6.5rem;

    object-fit: cover;

    border-radius: 50px;

}



  

  .expert-card-container {

    position: relative;

    overflow: hidden;

  }

  .expert-card-container a{

    text-decoration: none;

  }

  .view-profile-btn {

    background-color: #B52324;

    color: white;

    font-size: small;

    padding: 6px 10px;

    border: none;

    border-radius: 10px;

  }

.expert-card-btn1{

    background-color: #F4F2F3;

    border: none;

    border-radius: 8px;

    color: black;

    padding: 5px;

    font-size: small;

}

.expert-card-btn2{

    background-color: #B52324;

    border: none;

    border-radius: 8px;

    color: white;

    padding: 5px;

    font-size: small;

}  

.expert-card-top-head{

    color: #B52324;

    font-size: smaller;

    font-weight: 500;

}



.overflow-auto {

    scrollbar-color:#B52324  transparent;

    scrollbar-width: thin; 

  

    overflow-y: scroll;

    scrollbar-color:#B52324  transparent;

  }

  

  .overflow-auto::-webkit-scrollbar {

    width: 8px;

    height: 8px;

  }

  

  .overflow-auto::-webkit-scrollbar-thumb {

    background-color:#B52324 ;

    border-radius: 10px; 

  }

  

  .overflow-auto::-webkit-scrollbar-track {

    background-color: transparent; 

  }



  .milestones-section{

    margin: 8rem 0rem;

  }

  .milestones i{

    font-size: 3rem;

  }

  .milestones-p1{

    font-weight: bold;

    font-size: x-large;

  }

  .vertical-line2{

    border-left: 2px solid black; /* Set the thickness and color of the line */

    height: 50px; /* Adjust the height of the line */

    margin: 0 15px;

  }

  .milestones-1{

    background-color: #CCEDDC;

    border-radius: 8px;

  }

  .milestones-2{

    background-color: #E8EDCD;

    border-radius: 8px;

  }

  .milestones-3{

    background-color: #CDE0EE;

    border-radius: 8px;

  }

  .milestones-4{

    background-color: #EDCBD7;

    border-radius: 8px;

  }



  .about-section{

    background-color: #F7F7F7;

    margin: 8rem 0rem;

  }

  .about-img{

    width: 20rem;

    height: 15rem;

    border-radius: 8px;

    opacity: 0.8;

  }

.about-btn{

    background-color: #B52324;

    border-radius: 16px;

    color: white; 

    font-size: small;

    border: none;

}

.centers-section{

    margin-bottom: 6rem;

}

.centers-box{

    background-color: #F7F7F7;

}

.review-section {

  background-color: #FEF6F1;

  margin-bottom: 5rem;

  padding: 2rem;

}

.review-card {

  background-color: #FFFFFF;

  border-radius: 10px;

  transition: transform 0.3s, box-shadow 0.3s;

  overflow: hidden;

}

.review-card:hover {

  transform: translateY(-5px);

  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);

}

.review-img {

  width: 5rem;

  height: 5rem;

  object-fit: cover;

  border-radius: 50%;

  border: 1px solid #B52324;

}



.review-text {

  font-size: 0.95rem;

  color: #666;

  padding: 0 1rem;

}





.news-section{

  background-color: #F7F7F7;

  border-radius: 8px;

}

.news-section a{

  text-decoration: none;

}

.news-btn{

  width: 100%;

  display: flex;

  justify-content: space-between;

  padding: 5px;

  background: transparent;

  border: 1px solid rgb(116, 112, 112);

}

.feedback-section{

  background-color: #B52324;

  color: white;

}



.feedback-section i{

  font-size: xx-large;

  background-color: #9C0004;

  border-radius: 50%;

}

.feedback-head{

  font-size: large;

  font-weight: 500;

}

.feedback-sub-head{

  font-size: small;

  color: rgb(220, 220, 220);

}

.feedback-btn{

  border: none;

  font-weight: 500;

  border-radius: 8px;

}

.feedback {

  position: fixed;

  bottom: 0px;

  right: 20px; 

  background-color: #9C0004; 

  color: white;

  border: none;

  padding: 8px 25px;

  border-radius: 10px 10px 0px 0px;

  cursor: pointer;

  z-index: 1000;

  letter-spacing: 1px;

}



.feedback:hover {

  background-color: #9C0004;

}

.footer-head{

  font-size: large;

  font-weight: 500;

}

.footer-section{

  background-color: #FFF7E8;

}

.footer-btn{

  background-color: #B52324;

  border: none;

  border-radius: 8px;

  color: white;

}

.footer-logo{

  font-size: xx-large;

  color: #808285;

  font-weight: bold;

  font-style: italic;

}

.sub-footer i{

 font-size: 1.5rem;

}



.scroll-to-top-btn {

  position: fixed; 

  bottom: 3.1rem; 

  right: 20px; 

  background-color: #808285;

  color: white;

  border: none;

  padding: 8px 15px;

  font-size: 20px;

  border-radius: 50%;

  cursor: pointer;

  display: none;

  transition: opacity 0.3s;

  border: none;

}



.scroll-to-top-btn:hover {

  background-color:#B52324;

}

.whatsApp{

  position: fixed;

  bottom: 3rem;

  right: 5rem;

  border: none;

  font-size: 2rem;

  cursor: pointer;

  z-index: 1000;

  border: none;

  background-color: #30D14E;

  color: white;

  padding: 0;

  border-radius: 8px;
  
  display: none;

}

.whatsApp:hover{

  background-color: #29a03f;

}



@media (max-width : 967) {

  .emergency{

    font-size: small;

    position: fixed;

  }

}