* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  a {
    text-decoration: none;
  }


  
h1 {
    font-size: 76px;
    font-style: normal;
  }
  
  h2 {
    font-size: 44px;
    font-style: normal;
  }
  
  h3 {
    font-size: 34px;
    font-style: normal;
  }
  
  h4 {
    font-size: 26px;
    font-style: normal;
  }
  
  h5 {
    font-size: 22px;
    font-style: normal;
  }
  
  h6 {
    font-size: 18px;
    font-style: normal;
  }

  :root{
    --skyblue:#6E9EFA;
    --navy-blue:#010B20;
    --blue:#032C7B;
    --black:#111111;
    --gray:#555555;
    --white:#FCFCFC;
    --light-shade:#E8E8E8;
    --light-sky-blue:#F5F8FE;
    --shade-blue: #D3DFF8;
    --another-shade-blue:#EAEFF9;
    --shade-green:#1E84B5;
  


    --Lato-extrabold:Lato-extrabold;
    --Lato-Black:Lato-Black;
    --Quicksand-Bold:Quicksand-Bold;
    --Quicksand-Medium:Quicksand-Medium;

    --Quicksand-SemiBold:Quicksand-SemiBold;
  }


  @font-face {
    font-family: "Lato-extrabold"; /* Name for the font */
    src: url("../font/Lato/Lato-Bold.ttf");
  }

  @font-face {
    font-family: "Lato-Black"; /* Name for the font */
    src: url("../font/Lato/Lato-Black.ttf");
  }

  @font-face {
    font-family: "Quicksand-Bold"; /* Name for the font */
    src: url("../font/Quicksand/static/Quicksand-Bold.ttf");
  }

  @font-face {
    font-family: "Quicksand-Medium"; /* Name for the font */
    src: url("../font/Quicksand/static/Quicksand-Medium.ttf");
  }

  @font-face {
    font-family: "Quicksand-SemiBold"; /* Name for the font */
    src: url("../font/Quicksand/static/Quicksand-SemiBold.ttf");
  }
  
/* Header Section Styling */
.header-section {
  
    position: absolute; /* Positioning the header absolutely */
    width: 100%; /* Full width of the container */
    z-index: 99; /* Ensures the header is above other elements */
  }
  
  /* Logo Styling */
  .hotel-navbar-logo-img {
    object-fit: cover; /* Ensures the logo image covers the container without distortion */
    object-position: center; /* Centers the image */
    width: 175px; /* Fixed width for the logo */
    height: 40px; /* Fixed height for the logo */
   
  }
  
  /* Home Title Styling */
  .home-title {
    color: var(--gray) !important; /* White text color */
    font-size: clamp(14px, 1.5vw, 16px);
    font-family: var(--Quicksand-Medium); /* Font family from CSS variable */
  }
  
  .for-padding-home-title {
    padding-left: 140px; /* Adds left padding to the home title */
  }
  
  /* Hover effect for the home title */
  .home-title:hover {
    font-weight: bold; /* Makes the title bold on hover */
  }
  
  /* About Title Styling */
  .about-title {
    color: var(--gray) !important; /* White text color */
    font-size: clamp(14px, 1.5vw, 16px);
    font-family: var(--Quicksand-Medium);
  }
  
  /* Hover effect for the about title */
  .about-title:hover {
    font-weight: bold; /* Makes the about title bold on hover */
  }
  
  /* Padding adjustment for the about title */
  .for-padding-about-title {
    padding-left: 20px; /* Adds left padding to the about title */
  }
  
  /* Book Now Link Styling in Header */
  .book-now-link-header-part {
    background: var(--skyblue); /* Background color from CSS variable */
    color: var(--white); /* White text color */
    font-size: clamp(14px, 1.5vw, 16px);
    font-family: var(--Quicksand-Medium); /* Font family from CSS variable */
    padding-top: 16px; /* Adds top padding */
    padding-bottom: 16px; /* Adds bottom padding */
    padding-left: 25px; /* Adds left padding */
    padding-right: 25px; /* Adds right padding */
    border-radius: 25px ;
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.2), 
    inset -3px -3px 5px rgba(255, 255, 255, 0.2); /* Inner shadow */
cursor: pointer;
transition: background 0.3s ease;
text-decoration: none; /* Remove underline */
  }
  

  .book-now-link-header-part:hover{
    background: var(--blue);
  }
  
 

  .header-section{
    border-bottom: 1px solid rgba(45, 44, 44,0.1);
padding-bottom: 15px;
padding-top: 15px;
  }
  
  
  
  
.banner-section {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 900px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 0; /* Fixed from -1 */
}

/* Centering the full section */
.health-wellness-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  width: 100%;
  margin-top: 100px;
}

/* Title */
.health-wellness__title {
  color: var(--blue);
  font-family: var(--Lato-Black);
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 15px;
}

/* Paragraph */
.health-wellness__description {
  color: var(--gray);
  font-family: var(--Quicksand-Medium);
 font-size: clamp(14px, 2vw, 18px);
  max-width: 600px;
  line-height: 1.5;
  margin: 0 auto;
}

/* Discover More Button */
.discover-box {
  background: var(--skyblue);
  width: max-content;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top:5px ;
  padding-bottom: 5px;
  padding-left: 30px;
  padding-right: 5px;
  border-radius: 50px;
  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.2), 
              inset -3px -3px 5px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
}

/* Change background color on hover */
.discover-box:hover {
  background: var(--blue);
}

/* Text inside Discover Box */
.discover-box h6 {
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 2vw, 18px);
  color: var(--white);
  margin: 0;
}

/* Arrow Icon */
.arrow-left {
  width: 44px;
  height: 44px;
  object-fit: cover; /* Fixed from cover */
  transition: transform 0.3s ease;
}

/* Move arrow on hover */
.discover-box:hover .arrow-left {
  transform: translateX(5px);
}
    

/* banner-section */

.call-service{
  border-radius: 10px;
  background: var(--skyblue);
  padding: 15px;
}


.call-serivice-col{
  display: flex;
  gap: 30px;
}




.call-service-img{
  object-fit: cover;
  object-position: center;
  width: 44px;
  height:44px ;
 
}

.backgr-container-booking{
  position: relative;
background: var(--white);
border-radius: 20px;
margin-top: -70px;
padding: 30px;
box-shadow:  3px 3px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: background 0.3s ease;
text-decoration: none; /* Remove underline */


}

.call-serivice-col h6{
  font-size: clamp(14px, 2vw, 18px);
 font-family: var(--Quicksand-Bold);
 color: var(--black);
 margin-top: 2px;

}


.call-serivice-col p{
  color: var(--gray);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 2vw, 18px);
}

.book-now-link-booking{
  display:flex;
  width: max-content;
  align-items: center;
margin-top: 10px;
margin-left: 40px;
  gap: 15px;
  background: var(--skyblue); /* Background color from CSS variable */
  color: var(--white); /* White text color */
  font-size: clamp(14px, 1.5vw, 16px);
  font-family: var(--Quicksand-Medium); /* Font family from CSS variable */
  padding-top: 5px; /* Adds top padding */
  padding-bottom: 5px; /* Adds bottom padding */
  padding-left: 25px; /* Adds left padding */
  padding-right: 5px; /* Adds right padding */
  border-radius: 50px ;
  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.2), 
  inset -3px -3px 5px rgba(255, 255, 255, 0.2); /* Inner shadow */
cursor: pointer;
transition: background 0.3s ease;
text-decoration: none; /* Remove underline */
}

.book-now-link-booking:hover{
  background: var(--blue);
}

.book-now-link-booking:hover .arrow-left{
  transform: translateX(5px) !important;
}


.book-now-link-booking h6{
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--white);
  margin-top: 6px;

}
/* backgr-container-booking--section */

.Excellence-Dental-Trust-section{
  background: var(--white);
  padding-top: 150px;
  padding-bottom: 80px;
  margin-top: -70px;
}

.operation-img{
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.heart-medicure{
  width: 20px;
  height: 20px;
  object-fit: cover;
  object-position: center;
}


.heading-of-Excellence-Dental-Trust{
  display: flex;
  gap: 10px;

}

.heading-of-Excellence-Dental-Trust h6{
  color: var(--skyblue);
  font-family:var(--Quicksand-SemiBold) ;
  font-size: clamp(14px, 1.5vw, 16px);
}

.Excellence-Dental-Trust-another-col h2{
  color: var(--black);
  font-size: clamp(28px, 5vw, 44px);
  font-family: var(--Lato-extrabold);
  padding-top: 10px;
}


.Excellence-Dental-Trust-section h2{
  color: var(--black);
  font-size: clamp(28px, 5vw, 44px);
  font-family: var(--Lato-extrabold);
  padding-top: 10px;
}

.Excellence-Dental-Trust-section p{
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-Medium);
  color: var(--gray);
  padding-top: 20px;
  padding-bottom: 30px;
}


.Excellence-Dental-Trust-another-col{
  padding-left: 40px;
  padding-top: 20px;
}


.Experienced-Team-box{
  display: flex;
  gap: 10px;
  padding-bottom: 15px;

}

.Experienced-Team-box img{
  width: 32px;
  height: 28px;
  object-fit: cover;
  object-position: center;
}

.Experienced-Team-box h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-Medium);
}

.child-div{
  position: relative;
background: var(--skyblue);
padding-top:30px ;
padding-bottom: 30px;
padding-left:30px ;
padding-right: 0px;
 border-radius: 20px;
}

.dr-experience-box{
  background: var(--white);
  width: max-content;
  padding: 10px;
  border-radius: 10px;
}

.doctor-img-icon{
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: center;


}

.child-div h3{
  padding-top: 30px;
  font-size: clamp(28px, 6vw, 38px);
  font-family:var(--Lato-Black) ;
  color: var(--white);
}

.child-div h6{
  color: var(--white);
  font-family:var(--Quicksand-Bold) ;
  font-size: clamp(14px, 2vw, 18px);
}

.read-more-box{
  display:block;
  margin-top: 30px;

}



/* Excellence-Dental-Trust-section */

.Explore-Solutions-Provide-section{
  background:var(--light-sky-blue);
  padding-top:80px ;
  padding-bottom:80px ;
}

.service-heading{
  text-align: center;
  display: flex;
  gap: 10px;
  justify-content: center;

}


.service-heading img{
  width: 20px;
  height: 20px;
  object-fit: cover;
  object-position: center;
}

.service-heading h6{
  color: var(--skyblue);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-Medium);
}

.Explore-the-Solutions-Provide-topic{
  color: var(--black);
  font-family: var(--Lato-extrabold);
  font-size: clamp(16px, 2vw, 24px);
  text-align: center;
  padding-top: 10px;
}

.Explore-the-Solutions-Provide-para{
  color: var(--gray);
  text-align: center;
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-Medium);
  padding-top: 10px;
  padding-bottom: 20px;
}



.tooth-img-box{
  display: flex;
  justify-content: center;
  padding-top: 20px;
  }
  
  


  .tooth-img-box img{
    width: 64px;
    height: 64px;
    object-fit: cover;
    object-position: center;
  }


  .Dental-Implants-box{
    display: flex;
  justify-content: center;
  padding-top: 60px;

  }


  .Dental-Implants-box img{
    width: 94px;
    height: 94px;
    object-fit: cover;
    object-position: center;
  }


  
.border-col-4 h5{
  color: var(--skyblue);
  font-size: clamp(18px, 3vw, 22px);
  font-family: var(--Quicksand-Bold);
  text-align: center;
  padding-top: 30px;
}

  

.border-col-4 h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-SemiBold);
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
}


  .learn-more-button{
    display: flex;
    gap: 10px;
    justify-content: center;
   
  
  
  }



  .border-col-4 .learn-more-button{
    padding-bottom: 40px;
  }

  .border-col-4{
    position: relative;
  }

  

.border-col-4::before{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1); /* Bottom border */
}




.border-col-4::after{
  content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.1); /* Right border */
}




/* border-col-4 */

.border-teeth-checkup h5{
  color: var(--skyblue);
  font-size: clamp(18px, 3vw, 22px);
  font-family: var(--Quicksand-Bold);
  text-align: center;
  padding-top: 30px;
}



.border-teeth-checkup h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-SemiBold);
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
}



.border-teeth-checkup .learn-more-button{
  padding-bottom: 40px;
}



.border-teeth-checkup{
  position: relative;
}

.border-teeth-checkup::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1); /* Bottom border */
}


.border-teeth-checkup::after{
  content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.1); /* Right border */
}



.padding-col-zero{
  padding: 0;
}


.padding-for-learn-more-button{
  padding-top: 21px;
}

/* border-teeth-checkup */

.border-Cosmetic-Dentistry h5{
  color: var(--skyblue);
  font-size: clamp(18px, 3vw, 22px);
  font-family: var(--Quicksand-Bold);
  text-align: center;
  padding-top: 30px;
}

.border-Cosmetic-Dentistry h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-SemiBold);
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
}

.border-Cosmetic-Dentistry {
  position: relative;
}

.border-Cosmetic-Dentistry::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.1); /* Right border */
} 


.border-Cosmetic-Dentistry .learn-more-button{
  padding-bottom: 40px;
}

/* border-Cosmetic-Dentistry */
.border-Dental-Implants h5{
  color: var(--skyblue);
  font-size: clamp(18px, 3vw, 22px);
  font-family: var(--Quicksand-Bold);
  text-align: center;
  padding-top: 30px;
}

.border-Dental-Implants h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-SemiBold);
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
}

.border-Dental-Implants{
  position: relative;
}

.border-Dental-Implants::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 80%;
  background-color: rgba(0, 0, 0, 0.1); /* Right border */
}


.border-Dental-Implants .learn-more-button{
  padding-bottom: 10px;
}

/* border-Dental-Implants */

.border-Dental-Braces h5{
  color: var(--skyblue);
  font-size: clamp(18px, 3vw, 22px);
  font-family: var(--Quicksand-Bold);
  text-align: center;
  padding-top: 30px;
}


.border-Dental-Braces h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-SemiBold);
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
}



.border-Dental-Braces .learn-more-button{
  padding-bottom: 10px;
}

.another-row-col-teeth-care{
  background: transparent;
}

.another-row-col-teeth-care h5{
  color: var(--skyblue);
  font-size: clamp(18px, 3vw, 22px);
  font-family: var(--Quicksand-Bold);
  text-align: center;
  padding-top: 30px;
}

.another-row-col-teeth-care h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-SemiBold);
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
}

.another-row-col-teeth-care{
  position: relative;
}

.another-row-col-teeth-care::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Right border */
}

.another-row-col-teeth-care::before{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1); /* Right border */
}

.another-row-col-teeth-care .learn-more-button{
  padding-bottom: 62px;
}

.another-row-col-Teeth-Whitening{
  position: relative;
}

.another-row-col-teeth-care::before{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1); /* Right border */
}

.another-row-col-Teeth-Whitening h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-SemiBold);
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
}


.another-row-col-Teeth-Whitening h5{
  color: var(--skyblue);
  font-size: clamp(18px, 3vw, 22px);
  font-family: var(--Quicksand-Bold);
  text-align: center;
  padding-top: 30px;
}


.another-row-col-Teeth-Whitening::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1); /* Right border */
}


.another-row-col-Teeth-Whitening::after{
  content: "";
  position: absolute;
  right: 0;
  top:  0;
  width: 1px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Right border */
}


.another-row-col-Teeth-Whitening .learn-more-button{
  padding-bottom: 40px;
}


.border-Dental-Braces-second-row{
  position: relative;
}

.border-Dental-Braces-second-row h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-SemiBold);
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
}


.border-Dental-Braces-second-row h5{
  color: var(--skyblue);
  font-size: clamp(18px, 3vw, 22px);
  font-family: var(--Quicksand-Bold);
  text-align: center;
  padding-top: 30px;
}

.border-Dental-Braces-second-row::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1); /* Right border */
}

.border-Dental-Braces-second-row .learn-more-button{
  padding-bottom: 40px;
}

/* border-Dental-Braces */

.learn-more-button h6{
  color: var(--skyblue);
  font-size: clamp(14px, 1.5vw, 16px);
  font-family: var(--Quicksand-SemiBold);
  padding-top:0 ;
  padding-bottom: 0;


}

.learn-more-button img{
  width: 20px;
  height: 20px;
  object-position: center;
  object-fit: cover;

}





.learn-more-button{
  display: flex;
  gap: 10px;
  justify-content: center;
 


}

.learn-more-button h6{
  color: var(--skyblue);
  font-size: clamp(14px, 1.5vw, 16px);
  font-family: var(--Quicksand-SemiBold);
  padding-top:0 ;
  padding-bottom: 0;


}

.learn-more-button img{
  width: 20px;
  height: 20px;
  object-position: center;
  object-fit: cover;
}


.border-Dental-Implants .learn-more-button img{
  width: 20px;
  height: 20px;
  object-position: center;
  object-fit: cover;
}

.border-Dental-Implants img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center;
}

.border-Dental-Braces img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center;
}


.border-Dental-Braces .learn-more-button img{
  width: 20px;
  height: 20px;
  object-position: center;
  object-fit: cover;
}




/* Explore-Solutions-Provide-section */


.Helping-Your-Dental-Problems-section{
  background: var(--white);
  padding-top:80px ;
  padding-bottom:80px ;
}


.Helping-Your{
  color: var(--black);
  font-family: var(--Lato-extrabold);
  font-size: clamp(2rem, 4vw, 3rem);
  padding-top: 10px;

}

.Dental-Problems{
  color: var(--skyblue);
  font-family: var(--Lato-extrabold);
  font-size: clamp(2rem, 4vw, 3rem);

}

.Choose-us-trusted-para{
  font-size: clamp(16px, 2vw, 19px);
  font-family: var(--Quicksand-Medium);
  color: var(--gray);
  padding-top: 20px;
}

.heading-of-Excellence-Dental-Trust-first-col{
  padding-left: 40px;
  padding-top: 20px;
}


/* <!-- Add Custom CSS for Hover Effects & Separator --> */

  .stats-box h2 {
    transition: transform 0.3s ease-in-out;
    font-family: var(--Lato-extrabold);
    font-size: clamp(28px, 6vw, 40px); 
  }

  .stats-box:hover h2 {
    transform: scale(1.1);
    color: var(--skyblue); /* Change color on hover */
  }
  /* Separator styling */
  .separator {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 1px;
    height: 60px;
    background-color: rgba(104, 100, 100,0.2);
    transform: translateY(-50%);
  }
  /* Hide separator for the last item */
  .separator :last-child {
    display: none;
  }

  .text-muted{
    color: var(--gray);
    font-family: var(--Quicksand-Medium);
    font-size: clamp(14px, 1.5vw, 16px);
  }

  /* Image Container */
.image-container {
  position: relative;
  width: 100%;
  height: 650px; /* Set the height of the container */
}


.dentist-dr {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 650px; /* Ensure the image fills the container */
  border-radius: 20px;
  position: absolute; /* Positioning the image inside its container */
  top: 0;
  left: 0;
}

/* Play Icon Box Styling */
.play-icon-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the play button */
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1; /* Ensuring the play button appears on top */
}

/* Play Icon Image */
.play-icon-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center;
}

/* Ripple Effect */
.ripple {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%); /* Center the play button */
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(18, 17, 17,0.3);
 
  animation: ripple 2s infinite;
  pointer-events: none;
  transform: scale(0);
  opacity: 1;
  z-index: -1;
}


.ripple-a{
  top: -10px;
  left: -10px;
  transform: translate(-50%, -50%); /* Center the play button */
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(18, 17, 17,0.3);
  
  animation: ripple 2s infinite;
  pointer-events: none;
  transform: scale(0);
  opacity: 1;
  z-index: -1;
}


@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }

  
} 


@keyframes ripple-a {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }

  
} 

.Meet-Our-Expert-Dentists-section{
  background: var(--light-sky-blue);
  padding-top: 80px;
  padding-bottom: 80px;

}

.slide-container{

  position: relative;
  height:520px;
}

.doctor-img{
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}





.doctor-name{
  font-size: clamp(18px, 3vw, 22px);
  font-family: var(--Quicksand-Bold);
  color:var(--black);
  text-align: center;
  padding-top: 20px;
  margin-top: 600px;

}

.slide-container h6{
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-Medium);
  color: var(--gray);
  text-align: center;
  z-index: 1;
}



.collection-icon-social-media{
  background:rgba(100, 100, 100,0.1);
  position: absolute;
  width: 100%;
  height: 450px;
  border-radius: 20px;
  z-index: 2;
  top: 0;
  flex-direction: column;
    display: block; 
}


.icon-of-media {
padding-top: 20px;
padding-right: 20px;
  display: flex;
    flex-direction: column;  /* Stack the icons vertically */
    gap: 10px; /* Space between icons */
    align-items: end; /* Center align icons */
}



.icon-of-media img{
  width: 30px;
  height: 30px;
  object-fit: cover; 
  object-position: center;


}

.doctor-name {
  font-size: clamp(18px, 3vw, 22px);
    font-family: var(--Quicksand-Bold);
    color: var(--black);
    margin: 0;
}

.mySwiper-doctor-img{
display: block;
  height: 590px;
}

.mySwiper-doctor-img .swiper-button-prev{
  background: var(--white);
  left: 0px;
  box-shadow: inset 1px 1px 2px rgba(238, 236, 236,0.2);

}

.mySwiper-doctor-img .swiper-button-next{
    background: var(--white);
    right: 0;
    box-shadow: inset 1px 1px 2px rgba(238, 236, 236,0.2);
}

.mySwiper-doctor-img .swiper-button-prev,
.mySwiper-doctor-img .swiper-button-next{
  top: 40%;
  width: 50px;
  height: 50px;
  border-radius: 50%;

}

.mySwiper-doctor-img .swiper-button-prev:after{
  font-size: 20px;
}

.mySwiper-doctor-img .swiper-button-next:after{
  font-size: 20px;
}

.swiper-pagination:before{
  background: var(--skyblue);
  width: 20px;
  height: 10px;
  border-radius: 10px;
}

.mySwiper-doctor-img-mobile{
  display: none;
}


/* Swiper Pagination */
.swiper-pagination {
  position: absolute;
  bottom: 10px;
  text-align: center;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #d3d3d3; /* Light gray inactive dots */
  opacity: 0.6;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  width: 24px; /* Elongated shape */
  height: 8px;
  border-radius: 10px;
  background: #4285f4; /* Active dot color */
  opacity: 1;
}

/* Helping-Your-Dental-Problems-section */

.Real-Results-Stunning-Smiles-section{
  background: var(--white);
  padding-top: 80px;
  padding-bottom: 80px;
}

.teeth-img-box{
  display: flex;
  gap:0;
  padding: 0;
  height: 350px;

}

.teeth-before-one{
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 400px;
}

/* Real-Results-Stunning-Smiles-section */

.What-Our-Patients-section{
  background: var(--light-sky-blue);
  padding-top: 80px;
  padding-bottom: 80px;
}

.slider-img-of-patients{
  background: rgb(234, 239, 249);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(234, 239, 249,0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(234, 239, 249,0.5);
  padding: 30px;
  font-size: 18px;
width: 90%;
 
}

.rating-star-icon{
width: 20px;
height: 20px;
object-fit: cover;
object-position: center;
}

.rating-star-icon-box{
display: flex;
gap: 5px;
padding-bottom: 30px;

}

.advanced-technology-they-para{
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 2vw, 18px);
  color: var(--gray);
  padding-bottom: 30px;
}

/* .border-advanced-technology-swipper-slide{
  border: 1px solid rgba(123, 123, 123,0.2);
} */

.author {
  display: flex;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ccc;
  justify-content: space-between;
}

.author img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 10px;
}

.author-info {
  text-align: left;
}

.author-info strong {
  font-size: clamp(14px, 2vw, 18px);
color: var(--black);
font-family: var(--Quicksand-Bold);
}

.author-info span {
  display: block;
  font-size: clamp(14px, 2vw, 18px);
  color: var(--gray);
  font-family: var(--Quicksand-Medium);
}

/* Swiper Navigation Buttons - Positioned Below */
.mySwiper-What-Our-Patients-section .swiper-navigation {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.mySwiper-What-Our-Patients-section .swiper-button-prev, .mySwiper-What-Our-Patients-section  .swiper-button-next {
  width: 40px;
  height: 40px;
  background: none;
  border: 2px solid #555;
  border-radius: 50%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: #555;
  font-size: 18px;
  margin: 0 10px;
  position: static !important; /* Removes default absolute positioning */
}

.mySwiper-What-Our-Patients-section .swiper-button-prev::after, .mySwiper-What-Our-Patients-section  .swiper-button-next::after {
  font-size: 16px;
  font-weight: bold;
}

.author-introduction{
  display: flex;
}


.dental-checking-up-one-img{
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.google-img-icon{
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: center;
}

.google-review-box{
  background:var(--shade-blue);
  border-radius: 20px;
  padding: 30px;
  margin-top: 25px;
}

.google-review-box h3{
  color: var(--shade-green);
  font-family: var(--Lato-extrabold);
  font-size: clamp(28px, 6vw, 38px);
  padding-top: 25px;
}

.google-review-box h6{
  color: var(--gray);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-Bold);

}

.Happy-Patients-box{
  background: var(--skyblue);
  padding: 30px;
  border-radius: 20px;
}

.Happy-Patients-box h3{
  color: var(--black);
  font-family: var(--Lato-extrabold);
  font-size: clamp(28px, 6vw, 38px);
  padding-top: 25px;
}

.Happy-Patients-box h6{
  color: var(--black);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-Bold);
}


.dental-checking-up-second-img{
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  margin-top: 20px;
}

/* Real-Results-Stunning-Smiles-section */

.slider-Expert-Dental-Insights{
border-radius: 20px;
padding: 30px;
box-shadow: inset 1px 1px 1px  2px rgba(158, 157, 157,0.1);
}

.image-doctor-examine-image{
  object-fit: cover;
  object-position: center;
  width: 100%;
  height:300px;
  border-radius: 20px;
}

.calender-icon-swipper-home{
  width: 16px;
  height: 16px;
  object-position: center;
  object-fit: cover;
}

.date-for-booking-dentist{
  display: flex;

padding-top: 20px;
  gap: 10px;
}
.date-for-booking-dentist p{
  color: var(--gray);
  font-size: clamp(12px, 1.5vw, 14px);
  font-family: var(--Quicksand-Medium);
}

.Ultimate-Guide-Brighter-Healthier-Teeth{
  color: var(--black);
  font-family: var(--Quicksand-Bold);
  font-size: clamp(14px, 2vw, 18px);
  padding-bottom: 30px;
}


.Read-More-button{
  display: flex;
  gap: 10px;
  justify-content: start;
}

.Read-More-button h6{
  color: var(--skyblue);
  font-size: clamp(14px, 1.5vw, 16px);
  font-family: var(--Quicksand-SemiBold);
  padding-top:0 ;
  padding-bottom: 0;
}


.Read-More-button img{
  width: 20px;
  height: 20px;
  object-position: center;
  object-fit: cover;
}

.mySwiper-Expert-Dental-Insights{
  height: 600px;
}


.mySwiper-Expert-Dental-Insights .swiper-button-prev{
  background: var(--white);
  left: 0px;
  box-shadow: inset 1px 1px 20px rgba(238, 236, 236,0.9);

}

.mySwiper-Expert-Dental-Insights .swiper-button-next{
    background: var(--white);
    right: 0;
    box-shadow: inset 1px 1px 20px rgba(238, 236, 236,0.9);

}

.mySwiper-Expert-Dental-Insights .swiper-button-prev,
.mySwiper-Expert-Dental-Insights .swiper-button-next{
  top: 40%;
  width: 50px;
  height: 50px;
  border-radius: 50%;

}

.mySwiper-Expert-Dental-Insights .swiper-button-prev:after{
  font-size: 20px;
}

.mySwiper-Expert-Dental-Insights .swiper-button-next:after{
  font-size: 20px;
}

/* mySwiper-Expert-Dental-Insights */
.detail-to-contact-dentist-for-checkup{
  background: var(--another-shade-blue);
  padding: 40px;
  position: sticky;
  border-radius: 20px;
  width: 95%;
  top: 0;
}

.contact-detail-dentist{
  display: flex;
  gap: 20px;
  padding-bottom: 30px;
}

.contact-icon{
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: center;
}

.contact-detail-dentist h6{
  font-family: var(--Quicksand-Bold);
  font-size: clamp(14px, 2vw, 18px);
  color: var(--black);
}

.contact-detail-dentist p{
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 2vw, 18px);
  color: var(--gray);
}

.detail-to-contact-dentist-for-checkup-border{
  border: 1px solid rgb(232, 232, 232) ;
}

.detail-to-contact-dentist-for-checkup h5{
  font-size: clamp(18px, 3vw, 22px);
  color: var(--black);
  font-family: var(--Quicksand-Bold);
  padding-top: 40px;

}


.social-media-icon-collecton-for-Follow-us{
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.social-media-icon-collecton-for-Follow-us img{
  width: 50px;
  height: 50px;
  object-fit: cover;
  object-position: center;
}



.We-Here-Your-Questions-email-information{
  border: 2px solid rgba(207, 207, 207,0.4);
  background: transparent;
  padding: 30px;
  border-radius: 20px;

}

.We-Here-Your-Questions-email-information h1{
  font-size: clamp(24px, 5vw, 44px);
  font-family: var(--Lato-extrabold);
}


.color1 {
  color: var(--black);
}

.color2 {
  color: var(--skyblue);
  margin-left: -10px;
}




.We-Here-Your-Questions-email-heading{
  display: flex;
  gap: 10px;
  padding-top: 10px;
}

.We-Here-Your-Questions-email-heading p{
  color: var(--gray);
  font-size: clamp(14px, 1.5vw, 16px);
  font-family: var(--Quicksand-Medium);
  padding-top: 10px;
}

.full-name-form-title{
  color: var(--gray);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 1.5vw, 16px);
}

.full-name-form-title-control{
  background: transparent;
  border: 2px solid rgba(207, 207, 207,0.4);
  border-radius: 25px;
  padding-top: 15px;
  padding-bottom: 15px;

}

.full-name-form-title-control::placeholder{
  color: #CFCFCF;
  font-size: clamp(14px, 1.5vw, 16px);
  font-family: var(--Quicksand-Medium);
}


.messeage-comment{
  background: transparent;
  border-radius: 25px;

}

.messeage-comment::placeholder{
   color: #CFCFCF;
   font-size: clamp(14px, 1.5vw, 16px);
  font-family: var(--Quicksand-Medium);
}

.margin-top-button{
  margin-top: -20px;
}


/* slider-Expert-Dental-Insights */

.Health-Backseat-section{
  padding-top: 160px;
  padding-bottom: 120px;
  background: var(--white);

 
}

.for-padding-health-backseat-col{
  padding: 60px;
}

.background-img-health-backseat{
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  width: 85%;
  height: 450px;
  border-radius: 20px;
  position: relative;



}


.Your-Health-Backseat{
  color: var(--blue);
  font-size: clamp(30px, 8vw, 50px);
  font-family: var(--Lato-extrabold);
  padding-bottom: 20px;
}

.Schedule-an-appointment{
  color: var(--gray);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 2vw, 18px);
}

.health-backseat-img-dr{
  object-fit: contain;
  object-position: center;
  width: 50%;
  height: 560px;
  bottom: 0;
  right: 0;
  position: absolute;
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.2));
}


.footer-section{
  background:var(--navy-blue) ;
  padding-top:40px ;
  padding-bottom:40px ;
}


.footer-logo{
width: auto;
  height: 50px;
  object-fit: cover;
  object-position: center;
}



.footer-logo-col-border{
  border: 1px solid rgba(110, 158, 250,0.3);
  width: 60%;
  margin-top: 20px;
}

.facebook-icon-navy-color-footer{
  width: 50px;
  height: 50px;
  object-fit: cover;
  object-position: center;
}

.social-media-icon-footer-section{
  display: flex;
  gap: 15px;
  margin-top: 40px;
  padding-bottom: 40px;
}

.home-topic-footer-col{
  color: var(--white);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 1.5vw, 16px);
  text-decoration: none;
  list-style: none;
  padding-bottom: 20px;
  margin-left: -30px;
}

.gallery-footer-ul-part{
  margin-top: 40px;
}



.loction-detail-footer{
  display: flex;
  gap: 10px;
  padding-bottom: 20px;
}

.loction-detail-footer h6{
color: var(--skyblue);
font-size: clamp(14px, 1.5vw, 16px);
font-family: var(--Quicksand-SemiBold);
text-align: center;
margin-top: -2px;
}

.location-footer-col {
  width: 100%;
  max-width: 600px; /* Optional: Limit max width */
  aspect-ratio: 16 / 9; /* Maintain a responsive ratio */


}



.location-footer-col iframe {
  width: 90%;
  height: 100%;

  border-radius: 20px;
}

.heart-img-footer{
  width: 20px;
  height: 20px;
  object-position: center;
  object-fit: cover;
}


.copy-rit{
  color: var(--skyblue);
  text-align: center;
  font-size: clamp(14px, 1.5vw, 16px);
  font-family: var(--Quicksand-Medium);
  padding-top: 40px;
}
/* footer-section */

/* homepagecomplete */

.banner-section-about{

    background-position: center;
    background-size: cover;
    width: 100%;
    height: 700px;
    position: relative;
    top: 0;
    left: 0;
    z-index: -1;

}

.About-Us-box{
   display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  height:80vh; /* Full viewport height */

  width: 100%; /* Full width */
  margin-top: 100px;

}


.About-Us-title{
color: var(--blue);
  font-family: var(--Lato-Black);
  font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
  margin-bottom: 15px; /* Spacing below the title */
}

.About-Us-title-description{
 color: var(--gray);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.5;

}



.Excellence-Dental-Trust-about-section{
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--white);
}


.tooth-filling-image{
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: center;
}


.tooth-filling-image-background{
  background: #6E9EFA;
  width: max-content;
   padding: 15px;
  border-radius: 10px;
}

.Deliver-quality-dental-care-col-box {

  background: var(--white);
  border-radius: 20px;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
  text-align: center;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically (if needed) */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
}


.Deliver-quality-dental-care-col-box h5{
  padding-top: 20px;
  color: var(--black);
  font-family: var(--Quicksand-SemiBold);
  font-size: clamp(18px, 3vw, 22px);
}

.Deliver-quality-dental-care-col-box h6{
   color:var(--gray);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 2vw, 18px);
  padding-top: 10px;
}


.Meet-Our-Expert-Dentist-about-section{
  background: var(--white);
  padding-top: 80px;
  padding-bottom: 80px;
}





/* about-page */

.Real-Results-Stunning-Smiles-testiomial-page-section{
  background:var(--light-sky-blue);
  padding-top: 80px;
  padding-bottom: 80px;
}


.review-of-patient-for-doctors{
  background: var(--white);
  box-shadow: 0 4px 8px rgba(142, 143, 144, 0.2); /* Box shadow */
  padding: 30px;
  border-radius: 20px;
  height: 100%;

}

.rating-with-review{
  display: flex;
  gap: 10px;
}


.rating-with-review img{
  width: 20px;
  height: 20px;
  object-fit: cover;
  object-position: center;
}

.rating-with-review-para{
  color: var(--gray);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 2vw, 18px);
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(134, 134, 134,0.2);
}

.patient-intoduction-box-testi{
  display: flex;
  justify-content: space-between;
}


.image-google-testi{
  width: 30px;
  height: 30px;
  object-fit: cover;
  object-position: center;

}

.patient-img-with-intro{
  display: flex;
  gap: 20px;
}

.patient-img-with-intro h6{
  color: var(--black);
  font-size: clamp(14px, 2vw, 18px);
  font-family: var(--Quicksand-Bold);
}

.patient-img-with-intro p{
  color: var(--gray);
  font-size: clamp(14px, 1.5vw, 16px);
  font-family: var(--Quicksand-Medium);
}

.patient-img-with-intro img{
  width: 50px;
  height: 50px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.rating-with-review-paragh{
  color: var(--gray);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(14px, 2vw, 18px);
  padding-top: 30px;
  padding-bottom: 110px;
  border-bottom: 1px solid rgba(134, 134, 134,0.2);
}

/* review-of-patient-for-doctors */

.check-up-img-in-clinic {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 500px; /* Adjust as needed */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}

.check-up-img-in-clinic-overlay-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-button-black-ripple-box {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Play button */
.play-button-black {
  width: 76px;
  height: 76px;
  z-index: 2;
}

/* Ripple animation */
.play-button-black-ripple-box::before,
.play-button-black-ripple-box::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 153, 255, 0.4);
  animation: ripple-animation 1.5s infinite ease-out;
}

/* Delay the second ripple */
.play-button-black-ripple-box::after {
  animation-delay: 0.75s;
}

@keyframes ripple-animation {
  0% {
      transform: scale(1);
      opacity: 0.6;
  }
  100% {
      transform: scale(2);
      opacity: 0;
  }
}


/* testimonial-page */


.form-for-appointment {
  background:var(--white);
  padding-top: 80px;
  padding-bottom: 80px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}


.appointment-form-to-fill-box{
  border: 2px solid rgba(105, 105, 105,0.4);
  padding: 30px;
  border-radius: 20px;
}


.Patient-Details-for-appoint-topic{
  color: var(--black);
  font-size: clamp(14px, 5vw, 22px);
  font-family: var(--Quicksand-Bold);
  padding-bottom: 20px;

}


.form-group {
  margin-bottom: 15px;
}

.first-name-form{
  color: var(--gray);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(12px, 5vw, 16px);
  padding-bottom: 5px;
}

.patient-type-for-form-for-appointment{
  font-size: clamp(14px, 5vw, 22px);
  font-family: var(--Quicksand-Bold);
  color: var(--black);
  padding-bottom: 20px;
  padding-top: 20px;
}

label {
  display: block;
 
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"] {
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(141, 141, 141,0.8);
  border-radius: 20px;
  box-sizing: border-box;
  color:rgba(141, 141, 141,0.8) ;
}

.radio-group {
  display: flex;
  gap: 20px;

}
.border-new-patient{
  border: 1px solid rgba(141, 141, 141,0.8);
  display: flex;
  border-radius: 50px;
padding-left:15px ;
padding-right:15px ;
padding-top: 10px;
padding-bottom: 10px;
  gap: 20px;
 
}



.radio-group label {
  cursor: pointer;
  transition: background 0.3s;
  font-weight: normal;
}



.patient-type-for-form-for-appointment-Select{
  font-size: clamp(14px, 5vw, 22px);
  font-family: var(--Quicksand-Bold);
  color: var(--black);
  padding-top: 20px;
}


.border-new-patient.active{
  background:var(--light-sky-blue);
  border: 1px solid var(--skyblue);
}


#appointment-section {
  display: none;
  margin-top: 20px;
}

.appointment-date {
  margin-top: 15px;
  cursor: pointer;
  padding: 15px;

  border-radius: 5px;
  border-bottom: 1px solid #ccc;
  display: flex;
  gap: 80px;
}

.Thursday-appointment-section{
  font-family: var(--Quicksand-Medium);
  font-size: clamp(12px, 5vw, 16px);
  color: var(--gray);
  padding-top: 5px;
  text-align: center;
}

.appointment-date h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  color: var(--gray);
  font-family: var(--Quicksand-SemiBold);
  font-size: clamp(12px, 5vw, 16px);
}




.appointment-slots {
text-align: center;
padding-bottom: 10px;
}

.slot {
  color: var(--gray);
  display: inline-block;
  padding: 8px 12px;
  margin: 5px;
  border: 1px solid rgba(120, 118, 118,0.5);
  background: #fff;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.slot:hover {
  background: var(--skyblue);
  color: white;
}

.slot.selected {
  background: var(--blue);
  color: white;
}

.book-btn {
  width: 100%;
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
  transition: background 0.3s;
}

.book-btn:hover {
  background: #0056b3;
}

.book-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.date-title span {
  font-size: 12px;
  color: #007bff;
}


.location-contact-location 
 iframe{
  width: 100%;
 height: 500px;
 
 border-radius: 20px;

 
}





/* appointment-page */
.More-Expert-Dental-Insights-section{
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--light-sky-blue);
}


/* news and blog */


.Content-without-backward-compatible-data-section {
  background: var(--white);
  padding-top: 80px;
  padding-bottom: 80px;
}

.Content-without-backward-compatible-data-img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px 20px 0 0;
}

.Content-without-backward-compatible-data-written-data {
  background: var(--light-sky-blue);
  padding: 20px;
  border-radius: 0px 0px 20px 20px;
}

.peacefulqode-box  {
align-items: center;
  display: flex;

  gap: 10px;
}

.peacefulqode-box h6{
  font-family: var(--Quicksand-Medium);
  font-size: clamp(10px, 5vw, 14px);
  color: var(--gray);
margin-top: 5px;
}

.long-established-fact {
  font-family: var(--Quicksand-Medium);
  font-size: clamp(12px, 5vw, 18px);
  color: var(--gray);
  padding-top: 20px;
  padding-bottom: 30px;
}

.Content-without-backward-compatible-data {
  color: var(--black);
  font-family:var(--Quicksand-Bold);
  font-size: clamp(14px, 5vw, 22px);
  padding-top: 20px;
}

.Michal-Smart {
  color: var(--skyblue);
  font-family: var(--Quicksand-Bold);
  font-size: clamp(12px, 5vw, 18px);
  padding-top: 10px;
}

.Michal-Smart-infor {
  border-left:4px solid var(--skyblue);
  padding-left: 20px;
  background: var(--another-shade-blue);
padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 20px;
}

.long-established-fact-another-line{
  font-family: var(--Quicksand-Medium);
  font-size: clamp(12px, 5vw, 18px);
  color: var(--gray);
  padding-top: 40px;
  padding-bottom: 30px;
}

.Economy-img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  height: 305px;
  border-radius: 20px;
}


.Content-without-backward-compatible-data-another-line{
  color: var(--black);
  font-family:var(--Quicksand-Bold);
  font-size: clamp(16px, 5vw, 22px); 
  padding-top: 40px;
}

.long-established-fact-third-line{
  font-family: var(--Quicksand-Medium);
  font-size: clamp(12px, 5vw, 18px);
  color: var(--gray);
  padding-top: 10px;
  padding-bottom: 30px;
}

.Lorem-ipsum-dolor-para {
  color: var(--gray);
  font-family: var(--Quicksand-Medium);
  font-size: clamp(12px, 5vw, 18px);
}

.tick-mark {
 object-fit: cover;
 object-position: center;
width: 24px;
height: 24px;

}

.Lorem-ipsum-dolor-box {
  display: flex;
  gap: 20px;
  padding-top: 30px;
}

.Vivamus-eu-ligula {
  display: flex;
  gap: 20px;
  padding-top: 10px;
}

.All-Insights-section-other{
  background: var(--darkest-green-shade);
  padding-top: 80px;
  padding-bottom: 80px;
}

.All-Insights-topics{
  color: var(--white);
  text-align: center;
  font-size: clamp(28px, 5vw, 44px);
  font-family: var(--lora-regular);
  padding-bottom: 40px;

}

/* Content-without-backward-compatible-data-section */

 /* Sidebar Styles */

 .dental-care-page-checkup-detail-section{
  background: var(--white);
  padding-top: 80px;
  padding-bottom: 80px;
;
 }

 .sidebar {
  position: sticky;
  top: 20px; /* Sidebar sticks 20px from the top */
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: auto;
}

.sidebar button {
  margin-top: 20px;
  display: block;
  width: 100%;
  padding: 18px;
  border: none;
  background: none;
  text-align: left;
  font-size: clamp(12px, 5vw, 18px);
font-family: var(--Quicksand-Medium);
  cursor: pointer;
  color: var(--gray);
  border-radius: 50px;
  transition: 0.3s;
  background: var(--light-sky-blue);
}
/* Active Button */
.sidebar button.active {
  background: var(--skyblue);
  color: var(--white);
}
/* Content Section */
.content {


  background: var(--white);
  border-radius: 10px;
  padding: 20px;
 
}
.examine-imag-dental-care {
  object-fit: cover;
  object-position:top center;
  width: 100%;
  height: 500px;
  border-radius: 20px;
}

.paragrap-dental-care{
  font-size: clamp(12px, 5vw, 18px);
  font-family: var(--Quicksand-Medium);
  color: var(--gray);
  padding-top: 20px;
  padding-bottom: 20px;
}

.Key-Benefits-of-Regular-Dentistr{
  color: var(--black);
  font-family: var(--Lato-extrabold);
  font-size: clamp(30px, 5vw, 46px);
}

.dr-img-dental-care{
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.check-img-dental-care{
  width: 30px;
  height: 30px;
  object-fit: cover;
  object-position: center;
}

.Experienced-Team-dental-box{
  display: flex;
  gap: 20px;
 text-align: center;
 align-items: center;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 5px;
}

.Experienced-Team-dental-box h6{
  font-family: var(--Quicksand-Medium);
  font-size: clamp(12px, 5vw, 18px);
color: var(--gray);
margin-top: 5px;
}



/* dental-care-page */

/* Responsive Fix for Small Screens */
@media (max-width: 480px) {

.margin-mobile{
  margin-top: 30px;
}

.book-now-link-booking{
  margin-left: 0;
}

.for-padding-home-title {
  margin-left: -120px;
}

.call-serivice-col p{
  font-size: 14px;
}

.child-div{
  padding-left: 0;
 
}

.dr-experience-box{
  position: absolute;
  left: 40%;
  top: 30px;

}





.child-div h3{
  text-align: center;
  padding-top: 80px;
}

.child-div h6{
  text-align: center;
}

.border-col-4::before{
  display: none;
}

.border-col-4::after{
  display: none;
}

.border-teeth-checkup::before{
  display: none;
}

.border-Cosmetic-Dentistry::after{
  display: none;
}

.border-Dental-Implants::after{
  display: none;
}

.another-row-col-teeth-care::before{
  display: none;
}

.another-row-col-teeth-care::before{
  display: none;
}

.another-row-col-Teeth-Whitening::before{
  display: none;
}

.another-row-col-Teeth-Whitening::after{
  display: none;
}

.border-Dental-Braces-second-row::before{
  display: none;
}

.separator{
  display: none;
}

.teeth-before-one{
  height: 250px;
}

  
  .health-wellness__title {
      font-size: 2rem;
  }
  
  .health-wellness__description {
      font-size: 16px;
      max-width: 90%;
  }
  
  .discover-box {
  
      padding: 8px 8px;
  }

  
  .arrow-left {
      width: 35px;
      height: 35px;
  }

  .Excellence-Dental-Trust-another-col{
    padding-left: 0;
  }

.heading-of-Excellence-Dental-Trust-first-col{
  padding-left: 0;

}

.for-padding-health-backseat-col{
  padding-left: 0;
}

.mySwiper-doctor-img{
  display: none;

}

.mySwiper-doctor-img-mobile{
  display: block;
  height: 580px;
}


.mySwiper-doctor-img-mobile .swiper-button-prev{
  background: var(--white);
  left: 0px;
  box-shadow: inset 1px 1px 2px rgba(238, 236, 236,0.2);

}

.mySwiper-doctor-img-mobile .swiper-button-next{
    background: var(--white);
    right: 0;
    box-shadow: inset 1px 1px 2px rgba(238, 236, 236,0.2);

}

.mySwiper-doctor-img-mobile .swiper-button-prev,
.mySwiper-doctor-img-mobile .swiper-button-next{
  top: 40%;
  width: 50px;
  height: 50px;
  border-radius: 50%;

}

.mySwiper-doctor-img-mobile .swiper-button-prev:after{
  font-size: 20px;
}

.mySwiper-doctor-img-mobile .swiper-button-next:after{
  font-size: 20px;
}

.google-review-box{
  position: relative;
  padding-left: 0;
}

.google-review-box h3{
  text-align: center;
  padding-top: 60px;
}

.google-review-box h6{
  text-align: center;
}

.Happy-Patients-box h3{
  text-align: center;
  padding-top: 60px;

}

.Happy-Patients-box h6{
  text-align: center;
}

.google-img-icon{
  position: absolute;
  left: 40%;

}

.color2 {
  margin-left: 0;
}


.mySwiper-doctor-img{
  display: none;
}

.teeth-before-one{
  width: 100%;
}

.slider-img-of-patients{
  width: 100%;
}

.mySwiper-Expert-Dental-Insights{
  display: none;
}

.background-img-health-backseat{
  height: auto;
  width: 100%;
 

}

.health-backseat-img-dr{
  height: auto;
  padding-top: 40px;
}

.Health-Backseat-section{
  padding-top: 0;
 
}

.We-Here-Your-Questions-email-heading{
  display: flex;
}


.health-backseat-img-dr{
position: static;
width: 100%;
margin-top: -100px;
}

.Health-Backseat-section{
  padding-bottom: 0;
}

.Deliver-quality-dental-care-col-box{
  width: 100%;
}



.form-for-appointment {
  padding-top: 40px;
  padding-bottom: 40px;
}

.radio-group {
  flex-direction: column;
}

.appointment-date h4 {
  font-size: 14px;
}

/* for-booking-appointment */

.dental-care-page-checkup-detail-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.content {
  padding: 15px;
}

.examine-imag-dental-care {
  height: 300px; /* Adjust the image height for smaller screens */
}

.paragrap-dental-care {
  font-size: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.Key-Benefits-of-Regular-Dentistry {
  font-size: 32px;
}

.sidebar {
  position: relative;
  top: 0; /* Make sidebar behave like a normal block element on small screens */
  box-shadow: none; /* Optional: remove box shadow for better mobile experience */
  padding: 10px;
}

.sidebar button {
  font-size: 16px; /* Reduce button font size for small screens */
  padding: 12px; /* Reduce padding for smaller devices */
  border-radius: 30px; /* Change border-radius for a more mobile-friendly look */
}

.dr-img-dental-care {
  height: 200px; /* Reduce image size for mobile */
}

.Experienced-Team-dental-box {
 display: flex;
  padding-left: 0;
  padding-right: 0;
  
}

.Experienced-Team-dental-box h6 {
  font-size: 16px; /* Smaller font size for mobile */
}

.background-img-health-backseat{
  border-radius: 20px 20px 0 0;
}

.padding-from-bottom{
  padding-bottom: 40px;
}

}



@media (max-width: 992px) { 
  .for-padding-home-title{
    margin-left: -140px;
  }
  .for-padding-about-title{
    margin-left: -20px;
  }

  .call-serivice-col p{
    font-size: 14px;
  }

  .book-now-link-booking{
    margin-left: -10px;
    
  }

  .book-now-link-booking h6{
    font-size: 12px;
  }

}