* {
    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{
    --another-shade-blue:#E8E8F5;
    --light-sky-blue:#F6F6FC;
   --shade-white:#E2E2E2;
    --blue:#5E5EEE;
    --black:#111111;
    --gray:#555555;
    --navy-blue:#010B20;
    --white:#FFFFFF;
    --Raleway-ExtraBold:Raleway-ExtraBold;
    --Raleway-Bold:Raleway-Bold;
    --Raleway-Black:Raleway-Black;
    --Raleway-SemiBold:Raleway-SemiBold;
    --Raleway-Medium:Raleway-Medium;
  }


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

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

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

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

  
  @font-face {
    font-family: "Raleway-Black"; /* Name for the font */
    src: url("../font/Raleway/static/Raleway-Black.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:100%; /* Fixed width for the logo */
    height: 40px; /* Fixed height for the logo */
   
  }
  
  /* Home Title Styling */
  .home-title {
    color: var(--white) !important; /* White text color */
    font-size: clamp(12px, 5vw, 16px);
    font-family: var(--Raleway-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(--white) !important; /* White text color */
    font-size: clamp(12px, 5vw, 16px);
    font-family: var(--Raleway-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(--blue); /* Background color from CSS variable */
    color: var(--white); /* White text color */
    font-size: clamp(12px, 5vw, 16px);
    font-family: var(--Raleway-Medium); /* Font family from CSS variable */
    padding-top: 20px; /* Adds top padding */
    padding-bottom: 20px; /* Adds bottom padding */
    padding-left: 25px; /* Adds left padding */
    padding-right: 25px; /* Adds right padding */
    border-radius: 10px ;
    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 */
width: max-content;
  }
  
  .book-now-link-header-part:hover{
    background: var(--navy-blue);
  }
  
 

  .header-section{
    border-bottom: 1px solid rgb(116, 113, 113);
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 */
}

.gray-box{
  background: rgba(0, 0, 0, 0.5); /* Adjust the opacity */
  width: 100%;
  height: 100%;
}

/* Centering the full section */
.health-wellness-box {
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 100px;
}

/* Title */
.health-wellness__title {
  color: var(--white);
  font-family: var(--Raleway-Black);
  font-size: clamp(30px, 6vw, 68px);
margin-top: 250px;
  margin-bottom: 20px;
}

/* Paragraph */
.health-wellness__description {
  color: var(--shade-white);
  font-family: var(--Raleway-Medium);
  font-size: clamp(16px, 2.5vw, 18px);
}

/* Discover More Button */
.discover-box {
  margin-top: 100px;
  background: var(--blue);
  width: max-content;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top:20px ;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 20px;
  border-radius: 10px;
  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(--navy-blue);
}

/* Text inside Discover Box */
.discover-box h6 {
  font-family: var(--Raleway-Medium);
  font-size: clamp(12px, 5vw, 16px);
  color: var(--white);
  margin: 0;
}

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

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

/* Ensure the Swiper container is full width and height */

/* Swiper default styling */

.read-more{
  color: var(--white);
margin-top: 20px;
  background: var(--blue);
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top:20px ;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 20px;
  border-radius: 10px;
  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;
}



.read-more h6{
  font-size: clamp(12px, 5vw, 16px);
  font-family: var(--Raleway-Medium);

}


.read-more:hover{
  background: var(--navy-blue);
}




.arrow-left-read-more{
margin-top: -12px;
  width: 25px;
  height: 25px;
  object-position: center;
  object-fit: cover; /* Fixed from cover */
  transition: transform 0.3s ease;
}

.read-more:hover .arrow-left-read-more {
  transform: translateX(5px);
}
 /* --- Custom Vertical Swiper Pagination --- */



 
 .backgroud-header-pagin .swiper-pagination-bullet {
   background-color: var(--white); /* Light white color for inactive bullets */
   width: 5px; /* Adjust size of the bullet */
   height: 80px; /* Adjust size of the bullet */
   display: block;
   border-radius: 20px;
   margin-top: 15px !important;
   margin-bottom: 15px !important;
   right: 0 !important;
   top: 0 !important;
 }
 


       .mySwiper-banner .swiper-pagination {

        width: auto;
   left: auto;
   top:28%;
   right: 30px;
   height: auto;

          padding-right: 100px;
     
            position: absolute;         
  
            /* transform: translateY(-60%); */
            display: flex;
            flex-direction: column;
            align-items: end;

     
            gap: 150px; 
        }

       .mySwiper-banner .swiper-pagination-bullet {
   
            width: 22px;
            height: 22px;
            background-color:transparent;
            border: 2px solid white;
            border-radius: 50%;
            position: relative;
            opacity: 1;
            transition: opacity 0.3s, transform 0.3s;
        }

       .mySwiper-banner .swiper-pagination-bullet-active {
            background-color: var(--white);

        
            border: 3px solid rgb(19, 19, 19,0.4);
            opacity: 1;
           
        }

        /* --- Vertical Lines Between Dots --- */
      .mySwiper-banner  .swiper-pagination-bullet::before {
          
            content: "";
            position: absolute;
            width: 2px;
            height: 148px; /* Line height */
            background-color: rgba(255, 255, 255, 0.5);
       
            top: -150px; /* Adjust for spacing */
            transform: translateX(-50%);
        }

        /* Remove line from the first bullet */
        .swiper-pagination-bullet:first-child::before {
            display: none;
        }



        /* Swiper Navigation Buttons - Positioned Below */

/* Position the navigation buttons at the right end */
.swiper-navigation {
  position: absolute;
 top: 78%;
  right: 7%; /* Moves buttons to the right */
  display: flex;
  gap: 10px; /* Space between buttons */
  z-index: 10;
}

/* Styling for navigation buttons */
.mySwiper-banner .swiper-button-prev,
.mySwiper-banner .swiper-button-next {
  width: 45px;
  height: 45px;
  background: none;
  border: 2px solid var(--white);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white) !important;
  font-size: 18px;
  position: static !important; /* Remove absolute positioning */
}

/* Add arrows */
.mySwiper-banner .swiper-button-prev::after {
 
  font-size: 25px;
  
}

.mySwiper-banner .swiper-button-next::after {

  font-size: 25px;

}




/* Ensure the Swiper container is full width and height */


/* banner-section */

.call-service{
  border-radius: 10px;
  background: var(--blue);
  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{
  z-index: 2;
  position: relative;
background: var(--white);
border-radius: 10px;
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, 1.2vw, 18px);
 font-family: var(--Raleway-Bold);
 color: var(--black);
 margin-top: 2px;

}


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

.book-now-link-booking{

  display:flex;
  width: max-content;
  align-items: center;
margin-top: 10px;
margin-left: 40px;
  gap: 15px;
  background: var(--blue); /* Background color from CSS variable */
  color: var(--white); /* White text color */
  font-size: 16px; /* Font size */
  font-family: var(--Raleway-Medium); /* Font family from CSS variable */
  padding-top: 15px; /* Adds top padding */
  padding-bottom: 15px; /* Adds bottom padding */
  padding-left: 25px; /* Adds left padding */
  padding-right: 25px; /* Adds right padding */
  border-radius: 10px ;
  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(12px, 5vw, 16px);
  color: var(--white);
  margin-top: 6px;

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

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

.Excellence-Dental-Trust-backgrd-img-col{
  width: 100%;
  height: 600px;
  background-position: center;
  background-size: cover;
  position: relative;
}

.operation-img{
  position: absolute; /* Position the content over the background */
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 800px;
  z-index: 2;

  bottom: -8px;
  z-index: 55;
}

.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(--blue);
  font-family:var(--Raleway-SemiBold) ;
  font-size: clamp(12px, 5vw, 16px);
}

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

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


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



.Experienced-Team-box{

  display: flex;
  gap: 10px;
  padding-bottom: 15px;

}

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

.Experienced-Team-box h6{
  padding-top: 4px;
  color: var(--gray);
  font-size:18px ;
  font-family: var(--Raleway-Medium);
  text-align: center;
}




/* 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(--blue);
  font-size: clamp(12px, 5vw, 16px);
  font-family: var(--Raleway-SemiBold);
}

.Explore-the-Solutions-Provide-topic{
  color: var(--black);
  font-family: var(--Raleway-ExtraBold);
  font-size: clamp(20px, 5vw, 44px);
  text-align: center;
  padding-top: 10px;
}

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





.blog-background-img {
  width: 100%;
  height: 290px;
  object-fit: cover;
  object-position: 100% 100%;
  position: absolute;
  z-index: 1;
left: 0;

top: 55px;
}

.blog-background-frame {
  width: 100%;
  height:400px;
  position: relative;
  overflow: hidden;
}

.blog-background-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  background: url("../images-dental/shape-img/Subtract.svg")
    no-repeat center center;
  background-size: 100%;
  z-index: 2;
}

.another-box-gray {
  padding: 20px;
  width: 100%;
  height: 100%;

  position: absolute;

  bottom: 50px;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column; /* Makes it a column layout */
  align-items: start; /* Centers items horizontally */
  justify-content: flex-end; /* Pushes content to the bottom */
}


.arrow-up-right-arrow{
  width: 20px;
  height: 20px;
  object-fit: cover;
  object-position: center;
}

.teeth-checkup-topic{
  color: var(--black);
  font-size: clamp(12px, 5vw, 18px);
  font-family: var(--Raleway-Bold);

}

.button-teeth-checkup{
 padding-top: 10px;
  display: flex;
  text-align: center;
  gap: 10px;
}

.button-teeth-checkup h6{
  font-size: clamp(12px, 5vw, 16px);
  color: var(--blue);
  font-family: var(--Raleway-Medium);
}

/* Explore-Solutions-Provide-section */


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


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

}

.Dental-Problems{
  color: var(--blue);
  padding-top: 1px;
  font-family: var(--Raleway-Bold);
  font-size: clamp(2rem, 4vw, 3rem);

}

.Choose-us-trusted-para{
  font-size: clamp(12px, 5vw, 19px);
  font-family: var(--Raleway-Medium);
  color: var(--gray);
  padding-top: 20px;
  padding-bottom: 30px;
}

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

.simley-doctor{
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: center;

}


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


.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(16px, 5vw, 22px);
  font-family: var(--Quicksand-Bold);
  color:var(--black);
  text-align: center;
  padding-top: 20px;
  margin-top: 600px;

}

.slide-container h6{
  font-size: clamp(12px, 5vw, 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(16px, 5vw, 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.4);

}

.mySwiper-doctor-img .swiper-button-next{

    background: var(--white);
    right: 0;
    box-shadow: inset 1px 1px 2px rgba(238, 236, 236,0.4);

}

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

}

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

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

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



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

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

.mySwiper-doctor-img .swiper-pagination-bullet-active {
  width: 24px; /* Elongated shape */
  height: 8px;
  border-radius: 10px;
  background:var(--blue); /* 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 */

.Customer-Feedback-section{
  background: var(--light-sky-blue);
  padding-top: 80px;
  padding-bottom: 80px;
}



  /* 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: 80px;
    height: 80px;
    object-fit: cover;
    object-position: center;
  }
  
  /* Ripple Effect */
  .ripple {
    top: 10px;
    left: 10px;
    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:0px;
    left: 0px;
    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;
    }
  
    
  } 


  .Customer-Feedback-topic{
    color: var(--black);
    font-family: var(--Raleway-ExtraBold);
    font-size: clamp(20px, 5vw, 44px);

    padding-top: 10px;
  }

  .Customer-Feedback-para{
    color: var(--gray);
    font-size: clamp(12px, 5vw, 18px);
    font-family: var(--Raleway-Medium);
  }
  

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

.slider-img-of-patients{
  background: var(--white);
  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: clamp(12px, 5vw, 18px); 
}

.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(--Raleway-Medium);
  font-size: clamp(12px, 5vw, 18px);
  color: var(--gray);
  padding-bottom: 30px;
}



.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(12px, 5vw, 18px);
color: var(--black);
font-family: var(--Raleway-Bold);
}

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

.mySwiper-What-Our-Patients-section {
  position: relative;
}

/* Swiper Navigation Buttons - Positioned Below */
.mySwiper-What-Our-Patients-section  .swiper-navigation-width{
  display: flex !important ;
  justify-content: end;
  padding-top: 40px;
}

.mySwiper-What-Our-Patients-section .swiper-button-prev, .mySwiper-What-Our-Patients-section  .swiper-button-next {
  width: 50px;
  height: 50px;
  background: none;
  border: 1px solid var(--blue);
  border-radius: 10px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  color:var(--blue);
  font-size: clamp(12px, 5vw, 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: 25px;

}


.for-padding-from-top{
  margin-top: 40px ;
}

.Customer-Feedback-another-part{
  padding-left: 40px;
}

.author-introduction{
  display: flex;
}



.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: 10px;
height: 100%;
box-shadow: 0px 0px 0px 2px rgba(158, 157, 157,0.1);
}

.image-doctor-examine-image-bigger{
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 500px;
  border-radius: 10px 10px 0 0;
}

.Ultimate-Guide-Brighter-Healthier-Teeth-small-box{

  display: flex;
gap: 10px;

padding-left: 25px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
}

.Ultimate-Guide-Brighter-Healthier-Teeth-small-box h6{
  color: var(--black);
  font-family: var(--Raleway-SemiBold);
  font-size: clamp(12px, 5vw, 16px);
}

.arrow-right-for-row-small-box{
  width: 40px;
  height: 40px;
  object-position: center;
  object-fit: cover;


}



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

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

.date-for-booking-dentist{
  display: flex;
padding-top: 20px;
padding-left: 25px;
  gap: 10px;
}
.date-for-booking-dentist p{
  color: var(--gray);
  font-size: clamp(10px, 5vw, 14px);
  font-family: var(--Raleway-Medium);
}

Ultimate-Guide-Brighter-Healthier-Teeth-box h6{
  color: var(--black);
  font-family: var(--Raleway-SemiBold);
  font-size: clamp(12px, 5vw, 18px);
}






.Ultimate-Guide-Brighter-Healthier-Teeth-box{
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
 

}

.arrow-right-for-row{
  width: 40px;
  height: 40px;
  object-position: center;
  object-fit: cover;

}




/* Make the slider boxes stretch equally */
.slider-Expert-Dental-Insights {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0px 0px 0px 2px rgba(158, 157, 157, 0.1);
}

/* Ensure images fit properly */
.image-doctor-examine-image,
.image-doctor-examine-image-bigger {
  object-fit: cover;
  object-position: center;
  width: 100%;
  border-radius: 10px 10px 0 0;
}

/* Text alignment and padding */
.Ultimate-Guide-Brighter-Healthier-Teeth-box
{
  display: flex;
  justify-content: space-between;
  align-items: center;


}






/* 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(--Raleway-Bold);
  font-size: clamp(12px, 5vw, 18px);
  color: var(--black);
}

.contact-detail-dentist p{
  font-family: var(--Raleway-Medium);
  font-size: clamp(12px, 5vw, 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(16px, 5vw, 22px);
  color: var(--black);
  font-family: var(--Raleway-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: 10px;


}

.YourQuestions-box{
  padding-top: 0;
  margin-top: 30px;
  font-family: var(--Raleway-ExtraBold);
  font-size: clamp(24px, 5vw, 44px);
}


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

.color2 {
  color: var(--blue);
}




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

.We-Here-Your-Questions-email-information p{
  color: var(--gray);
  font-size: 16px;
  font-family: var(--Raleway-Medium);

}

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

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

}

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


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

}

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

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


/* slider-Expert-Dental-Insights */

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

.for-padding-health-backseat-col{
padding-top: 60px;
padding-left: 40px;
padding-bottom: 60px;
}

.background-img-health-backseat{
  background: var(--another-shade-blue);
  height: 100%;
  border-radius: 20px;
  /* position: relative; */
overflow: hidden;

}


.Your-Health-Backseat{
  color: var(--black);
  font-size: clamp(28px, 5vw, 44px);
  font-family: var(--Raleway-ExtraBold);
  padding-bottom: 20px;
}

.Schedule-an-appointment{
  color: var(--gray);
  font-family: var(--Raleway-Medium);
  font-size: clamp(12px, 5vw, 18px);
 padding-bottom: 40px;
}



.health-backseat-img-dr {
/* object-position: right; */
z-index: 2;
  width: 100%; /* Ensures the image fills the width of the column */
  height: 100%;; /* Maintains the aspect ratio */
  object-fit: cover; /* Ensures the image fills the container without distortion */
  aspect-ratio: 3/2;
  position: absolute;

}
.doctor_bg{
  background: url('../images-dental/operation/Group\ 10.png');
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
  background-size: 100% 100%;
 
  background-repeat: no-repeat;
}


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


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


.footer-section-para{
  padding-top: 40px;
  color: var(--shade-white);
  font-size: clamp(12px, 5vw, 18px) !important;
  font-family: var(--Raleway-Medium);
  padding-bottom: 10px;
}


.footer-logo-col-border{
  border: 1px solid rgba(51, 51, 110);
  width: 78%;

}

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

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


.nav-menu {
  list-style: none;
  padding: 0;

}

.nav-menu li {
padding-top: 15px;
}

.nav-menu li a {
  text-decoration: none;
  font-size: clamp(12px, 5vw, 18px);
  color:var(--shade-white); /* Light gray text */
  font-family: var(--Raleway-Medium);
  display: flex;
  align-items: center;

}

.arrow-for-text{
  object-fit: cover;
  object-position: center;
  width: 24px;
  height: 24px;
}



.home-topic-footer-col{
  color: var(--white);
  font-family: var(--Raleway-Medium);
  font-size: clamp(12px, 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: 10px;
}

.loction-detail-footer h6{
color: var(--blue);
font-size: clamp(12px, 5vw, 16px);
font-family: var(--Raleway-Bold);
text-align: center;

}

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


.Opening-time-dr{
  display: flex;
padding: 10px;


}

.Opening-time-dr{
  color: var(--shade-white);
  font-size: clamp(12px, 5vw, 18px);
  font-family: var(--Raleway-Medium);
}



.location-footer-col iframe {
  width: 70%;
  height: 80%;
  border-radius: 20px;
}

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


.time-of-clicnic-opening{
  padding-bottom: 40px;
}


.copy-rit{
  color: var(--blue);
  text-align: center;
  font-size: clamp(12px, 5vw, 16px);
  font-family: var(--Raleway-Medium);
  padding-top: 40px;
}
/* footer-section */

/* homepagecomplete */



.banner-section-about{

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

}

.gray-box-one{
  background: rgba(0, 0, 0, 0.5); /* Adjust the opacity */
  width: 100%;
  height: 100%;
}

.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(--white);
font-family: var(--Raleway-ExtraBold);
font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
margin-bottom: 15px; /* Spacing below the title */
}

.About-Us-title-description{
color: var(--shade-white);
font-family: var(--Raleway-Medium);
font-size: clamp(12px, 5vw, 18px);
line-height: 1.5;

}



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


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

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

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


.tooth-filling-image-background{
background: var(--blue);
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(--Raleway-Bold);
font-size: clamp(16px, 5vw, 22px);
}

.Deliver-quality-dental-care-col-box h6{
 color:var(--gray);
font-family: var(--Raleway-Medium);
font-size: clamp(12px, 5vw, 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-section-testiomial{
  background: var(--another-shade-blue);
  padding-top: 80px;
  padding-bottom: 80px;
}


.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:rgb(51, 51, 110);
  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 */

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

 
}


/* contact-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: 10px;
}


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

}


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

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

.patient-type-for-form-for-appointment{
  font-size: clamp(16px, 5vw, 22px);
  font-family: var(--Raleway-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: 10px;
  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: 10px;
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(16px, 5vw, 22px);
  font-family: var(--Raleway-Bold);
  color: var(--black);
  padding-top: 20px;
}


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


#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(--Raleway-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(--Raleway-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: 10px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.slot:hover {
  background: var(--blue);
  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  {
  font-size: clamp(8px, 5vw, 12px);
  color: #007bff;
}


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

 
}



 input, optgroup, select{
  width: 20px;

}


/* appointment-page */

.image-doctor-examine-image-bigger-blog{
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 200px;
  border-radius: 10px 10px 0 0;
}


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

.margin-for-negative{
margin-top: -70px;
}

.margin-negative-in-small{
  margin-top: -20px;
}
/* blog-page */



.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: 10px 10px 0 0;
}

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

.peacefulqode-box  {
align-items: center;
  display: flex;
  gap: 10px;
}

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

.long-established-fact {
  font-family: var(--Raleway-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(--Raleway-Bold);
  font-size: clamp(16px, 5vw, 22px);
  padding-top: 20px;
}

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

.Michal-Smart-infor {
  border-left:4px solid var(--blue);
  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(--Raleway-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(--Raleway-Bold);
  font-size: clamp(16px, 5vw, 22px);
  padding-top: 40px;
}

.long-established-fact-third-line{
  font-family: var(--Raleway-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(--Raleway-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 */


.Real-Results-Stunning-Smiles-section-new-blog{
  background: var(--light-sky-blue);
  padding-top: 80px;
  padding-bottom: 80px;
}
/* new-and-blog */

/* 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(--Raleway-Medium);
  cursor: pointer;
  color: var(--gray);
  border-radius: 10px;
  transition: 0.3s;
  background: var(--light-sky-blue);
}
/* Active Button */
.sidebar button.active {
  background: var(--blue);
  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(--Raleway-Medium);
  color: var(--gray);
  padding-top: 20px;
  padding-bottom: 20px;
}

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

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

.check-img-dental-care{
  width: 24px;
  height: 24px;
  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(--Raleway-Medium);
  font-size: clamp(14px, 2vw, 18px);
color: var(--gray);
margin-top: 5px;
}



/* dental-care-page */
/* Responsive Styles for 1280px */
@media (max-width: 1280px) {
  .for-padding-home-title {
    padding-left: 0;
  }


  .operation-img{
    object-fit: contain;
  }

  .blog-background-img {
  width: 98%;
  left: 2px;
    height: 250px; /* Reduce height for better fit */
    top: 50px; /* Adjust positioning */
  }

  .blog-background-frame {
    height: 350px; /* Reduce frame height */
  }

  .blog-background-frame::before {
    background-size: contain; /* Adjust to avoid stretching */
  }
  

  .another-box-gray {
    bottom: 40px;  
  } 

  .simley-doctor{
    object-fit: contain;
  }
}
  
/* Additional Tweaks for Tablets (1024px) */
@media (max-width: 1024px) {
  .blog-background-img {
    height: 220px;
    top: 40px;
  }

  .blog-background-frame {
    height: 320px;
  }
}

/* Mobile-Friendly Adjustments (768px and below) */
@media (max-width: 480px) {

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


 .home-title{
  color: var(--white) !important;
  font-weight: bold;
 }

 .about-title{
  color: var(--white) !important;
  font-weight: bold;
 }

 .swiper-navigation{
 right: 35%;
 }


 .Excellence-Dental-Trust-section{
margin-top: -280px;
 }
   

  .blog-background-img {
    height: 270px;
    top: 2px;
    left: 5px;
  }

  .blog-background-frame {
    height: 280px;
  }

  .blog-background-frame::before {
    background-size: cover;
  }

  .another-box-gray {
  
  
    bottom: -10px;
   
  }

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


 .swiper-navigation-width{
position: absolute;
right: 0%!important;
top: 80%;
  }
  

  .margin-large-mobile-top{
margin-top: 100px;
  }

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

  .Excellence-Dental-Trust-backgrd-img-col{
    width: 100%;
  }

  .operation-img{
    width: 100%;
  }
  

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

  .call-serivice-col{
    width: max-content;
  }

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

  .Excellence-Dental-Trust-backgrd-img-col{
    object-fit: contain;
    height: 400px;
  }

  .negative-margin-top{
    margin-top: -200px;
  }


  .operation-img{
object-fit: contain;
height: auto;
  }

  .simley-doctor{
    object-fit: contain;
  }

  .mySwiper-banner .swiper-pagination{
    display: none;
  }

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

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

  .slide-container{

    position: relative;
    height:560px;
  }

  
.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%;
  color: var(--blue);

}

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

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

.Customer-Feedback-another-part{
  padding-left: 0;
}

.banner-section-about{
  height: 800px;
}



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

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

.mySwiper-doctor-img-mobile .swiper-pagination-bullet-active {
  width: 24px; /* Elongated shape */
  height: 8px;
  border-radius: 10px;
  background:var(--blue); /* Active dot color */
  opacity: 1;
}

.navbar-toggler-icon{
  filter: brightness(0) invert(1);
}


.navbar-toggler{
  filter: brightness(0) invert(1);

}

.content{
  padding: 0;
}

.appointment-form-to-fill-box{
  padding: 10px;
  width: 100%;
}

.About-Us-title{
  margin-top: 180px !important;
}

.loction-detail-footer{
  margin-top: 20px;
}

.copy-rit{
text-align: start;
}
 
}