/* Before After Slide Css */
.before-after {
  position: relative;
  width: 100%;
  max-width: 30vw;
  min-height: 50vh;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.before-after .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after .img.front-img1,
.before-after .img.front-img2 {
  z-index: 1;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}
.before-after .img.front-img1,
.before-after .img.front-img2,
.before-after .img.front-img3,
.before-after .img.front-img4,
.before-after .img.front-img5,
.before-after .img.front-img6,
.before-after .img.front-img7,
.before-after .img.front-img8 {
  z-index: 1;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 5px;
  min-height: 50vh;
  cursor: pointer;
  background-color: white;
  border: 1px solid #c2c2c2;
  border-radius: 0;
}

.slider::-moz-range-thumb {
  -moz-appearance: none;
  width: 7px;
  min-height: 50vh;
  cursor: pointer;
  background-color: white;
  border: 1px solid #c2c2c2;
  border-radius: 0;
}

/* Add style for before and after text */
.wdt-before-after-slider-span-before,
.wdt-before-after-slider-span-after {
  position: absolute;
  top: 12.5rem;
  font-weight: bold;
  z-index: 3;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
  text-transform: uppercase;
  color: #ffffff;
}

.wdt-before-after-slider-span-before {
  right: -3%;
  top: 10rem;
  transform: rotate(-90deg);
}

.wdt-before-after-slider-span-after {
  left: -3%;
  top: 10rem;
  transform: rotate(270deg);
}

/* Footer CSS */
footer {
  background-color: #663130;
  color: #fff;
  padding: 100px 30px 30px 30px;
}

.footer-row {
  padding: 0px 0px 90px 0px;
  border-bottom: 1px solid #d8d5d5;
}

.footer-address a {
  color: #fff;
}

#footer-first-col {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-menus ul {
  padding-left: 0px !important;
}

.footer-address ul {
  padding-left: 0px !important;
}

.footer-menus ul li {
  padding-bottom: calc(25px / 1);
}

.footer-menus ul li a {
  color: #fff;
}

.footer-menus ul li:hover {
  animation: footer-hover-move 0.3s linear;
  -webkit-animation: footer-hover-move 0.3s linear;
  cursor: pointer;
}

.footer-address ul li:hover {
  animation: footer-hover-move 0.3s linear;
  -webkit-animation: footer-hover-move 0.3s linear;
  cursor: pointer;
}

@keyframes footer-hover-move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

.social-media a i {
  transition: 0.3s linear;
}

.social-media a i:hover {
  color: #d25239;
}

/* Newsletter Form style */

.subscribe {
  height: 54px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 54px;
  padding: 5px;
  overflow: hidden;
  border-bottom: 1px solid #eee;
  border-radius: 0;
}

.newsletter-input {
  font-family: inherit;
  border: 0;
  flex: 1;
  outline: none;
  background-color: transparent;
  color: #fefefe;
  &::placeholder {
    color: inherit;
  }
}

.newsletter-btn {
  border: 0;
  height: 44px;
  width: 44px;
  border-radius: 44px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  i {
    color: #fff;
    transition: 0.4s;
    transform: rotate(44deg);
  }

  i:hover {
    color: #d25239;
  }
}

/* Testimonial Section  CSS*/
.section-testmonials {
  font-family: Poppins, sans-serif;
  display: flex;
  gap: 20px;
  align-items: center;
}

.column-testmonials {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 20%;
}

.section-details {
  border-left: 10px solid #ffcb00;
  padding-left: 20px;
}

.name-section {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14px;
  color: #650061 !important;
  line-height: 1.2em;
  margin: 0;
}

.title-section b {
  color: #650061;
}

.title-section {
  color: #000;
  font-family: Poppins, sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

.navigation-testmonials {
  display: flex;
  gap: 10px;
}

.swiper-testmonials {
  width: 100%;
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
  .section-testmonials {
    flex-direction: column;
    align-items: flex-start;
  }

  .swiper-testmonials {
    width: 100%;
  }
}

.swiper-testmonials .swiper-slide {
  border-radius: 10px;
  background: linear-gradient(118deg, #b2807f 10.88%, #663130 83.88%);
  display: flex;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  transform: scale(0.9);
  filter: blur(1px) grayscale(0.5);
  transition: 0.2s;
}

.swiper-testmonials .swiper-slide-active {
  filter: blur(0);
  transform: scale(1);
}

.card-slide {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.head-slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-slide {
  display: flex;
  align-items: center;
  gap: 20px;
}

.title-slide h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.title-slide h6 {
  color: #ffcb00;
  font-size: 14px;
  font-weight: 500;
}

.text-slide {
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}


.swiper-button-testmonials-next,
.swiper-button-testmonials-prev {
  cursor: pointer;
}

@media (max-width: 768px) {
  .header-slide svg {
    width: 50px;
  }

  .title-slide h4 {
    font-size: 14px;
  }

  .swiper-testmonials .swiper-slide {
    padding: 20px;
  }
}

.textimonial-bg {
  background-color: #fff;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding-top: 10px;
}

.textimonial-bg h4 {
  font-weight: bold;
  color: #d25239;
}



/* Responsive Styles */
@media screen and (max-width: 768px) {
  /* Home Page */

  .swiper-container {
    height: 88vh !important;
  }

  #section-padding {
    padding: 0 !important;
  }

  .list-item {
    font-size: 13px !important;
  }

  .facilities-banner {
    height: 55vh !important;
  }

  .facilities-banner-content {
    padding: 10px !important;
  }

  .facilities-banner-content {
    top: 79%;
  }

  .facilities-banner-content-content h5 {
    font-size: 20px !important;
  }

  .facilities-banner-content-content p {
    font-size: 15px !important;
  }

  .appointment-card-bg-img img {
    height: auto !important;
  }

  .appointment-card {
    bottom: 10px !important;
  }

  /* .banner-from {
        z-index: 0;
        width: 100%;
        left: 0;
        display: none !important;
    } */

  .banner-from {
    width: 100% !important;
    transform: translate(0px, 0px) !important;
  }

  .doctor-details-content {
    max-width: 100% !important;
  }

  .roll-img {
    top: 5em;
    right: -1em;
  }

  .roll-img img {
    max-width: 70% !important;
  }

  .doctor-img img {
    max-width: 100% !important;
  }

  .doctor-details-content {
    bottom: -86px;
  }

  .card-content-title {
    bottom: 3% !important;
    padding: 4px !important;
  }

  .white-button {
    padding: 7px 11px !important;
  }

  .get-support-col h4 {
    font-size: 15px !important;
  }

  .get-support {
    display: block !important;
  }

  .get-support a {
    font-size: 15px !important;
  }

  #book-appointment {
    margin-bottom: 20px !important;
  }

  /* #book-appointment {
        display: none;
    } */

  .before-after {
    max-width: 100vw !important;
    min-height: 50vh !important;
    overflow: hidden !important;
  }

  .wdt-before-after-slider-span-before {
    top: 9rem !important;
  }

  .wdt-before-after-slider-span-after {
    top: 9rem !important;
  }

  .slider {
    height: auto !important;
  }

  /* #button {
        right: 2%;
    } */

  .appointment-card-bg-img img {
    width: 100% !important;
    height: auto;
  }

  .appointment-card {
    width: 100%;
  }

  .card-image a img {
    width: 100% !important;
    height: auto;
  }

  #acne-img a img {
    height: auto !important;
  }

  .get-support-col {
    display: block !important;
  }

  #get-support {
    padding: 15px 10px !important;
  }

  .divider {
    display: none !important;
  }

  .title h5 {
    font-size: 15px !important;
  }

  .get-support img {
    width: 25px !important;
  }

  .get-support p {
    font-size: 15px !important;
  }

  .get-support a {
    font-size: 15px !important;
  }

  .get-support-section {
    margin-top: 1rem;
  }

  .appointment-card {
    width: 90%;
    overflow: hidden;
    padding: 15px 15px 15px 15px;
  }

  .contact-form-container {
    padding: 30px 15px;
  }

  #footer-first-col {
    border-right: none;
  }

  .social-media {
    margin-bottom: 35px !important;
  }

  .footer-row {
    padding: 0px 0px 50px 0px;
  }

  .footer-copyright p {
    font-size: 12px;
  }

  .topbar {
    display: none !important;
  }

  .bi-list::before {
    font-size: 1.4em !important;
  }

  .navbar-toggler {
    border: none !important;
  }

  .mision-vision-col {
    margin-top: 2em;
  }

  .slider-content {
    margin-top: 7rem;
  }

  .slider-content h2 {
    font-size: 23px !important;
  }

  .view-services {
    letter-spacing: 0px !important;
  }

  .doctor-details {
    bottom: -3em !important;
  }

  .services-details-main-img img {
    width: 100% !important;
    height: auto !important;
  }

  .sidenav-alignright {
    width: 27em !important;
  }

  .adv-img {
    width: 100%;
  }

  .footer-padding {
    padding: 0 !important;
  }

  .doctor img {
    width: 100% !important;
  }

  .doctor-details {
    padding: 15px 5px !important;
  }

  .doctor-details h3 {
    letter-spacing: 0;
    font-size: 20px;
  }

  .footercopyright {
    display: block !important;
    text-align: center !important;
  }

  footer {
    padding: 30px 0 30px 10px;
    font-size: small;
  }

  .footer-headings {
    font-size: larger !important;
  }

  #button {
    right: 15px !important;
  }

  #whtasapp-animate {
    right: 15px !important;
  }

  .footer-row {
    border-bottom: none;
  }

  .counter img {
    width: 50px !important;
  }

  .count-text {
    font-size: 15px;
  }

  .count-title {
    font-size: 30px;
  }

  .testimonial_box-top {
    padding: 15px;
  }

  .testimonial_box-icon {
    padding-right: 0 !important;
  }

  /* Service Page */

  .card-img img {
    max-width: 100% !important;
    /* height: 50% !important; */
  }

  .card-subtitle {
    font-size: 4em !important;
  }

  .card-title h5 a {
    font-size: 15px !important;
  }

  .side-navigation {
    padding: 30px 10px;
  }

  .side-navigation.type4 ul.side-nav li a {
    font-size: 12px !important;
  }

  .section1 {
    padding: 0 !important;
  }

  .service-details-content h3 {
    font-size: 20px !important;
  }

  .service-details-content p {
    font-size: 13px !important;
  }

  .service-details-content ul li {
    font-size: 13px !important;
  }

  /* Appointment Page */

  .advertisemnet-section {
    font-size: 15px !important;
  }

  .appointment-bg {
    padding: 20px 20px 20px 20px !important;
    margin-bottom: 0 !important;
  }

  .appointment-bg .row {
    margin-top: 0 !important;
  }

  .appointment-form h3 {
    font-size: 21px;
  }

  .clinic-timing-bg h3 {
    font-size: 21px !important;
  }

  /* Contact Page */

  .book-slot {
    height: auto !important;
  }

  .book-slot-content {
    padding: 17% 10px 30px 10px;
  }

  .book-slot-content img {
    width: 50px;
  }

  .book-slot-content h3 {
    font-size: 18px !important;
  }

  .book-slot-content p {
    font-size: 13px !important;
  }

  #contact-page-icons ul li i {
    font-size: 15px !important;
    margin-right: 5px !important;
  }

  #contact-page-icons ul {
    font-size: 15px !important;
  }

  .contact-time {
    font-size: 13px !important;
  }

  .contact-week {
    font-size: 14px !important;
  }

  .contact-form-container-2 {
    padding: 80px 20px 20px 20px;
  }

  .ms-2-sm-only {
    margin-left: 1rem !important; /* ms-2 value */
  }

  /* About Page */

  .expert-title h4 {
    font-size: 15px !important;
  }

  .inner-column .author-desc {
    bottom: -50px;
    left: 39px;
    width: calc(100% - 47px);
  }

  /* Footer */

  .footer-menus {
    margin-left: 0px !important;
  }

  /* About Page */

  .about-section-1 p {
    max-width: 100% !important;
  }

  .about-section2 img {
    max-width: 100%;
  }

  .expertise-about {
    max-width: 100% !important;
  }

  .bgOne {
    height: auto !important;
  }

  /* Blog */
  .responsive-spacing {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Navbar */

  .offcanvas {
    width: 40% !important;
  }

  .col-md-3 {
    flex: 0 0 auto;
    width: 20% !important;
  }

  .doctor-details {
    bottom: 2em !important;
  }

  .doctor-details h3 {
    font-size: 20px;
  }

  .doctor-about h2 {
    font-size: 25px;
  }

  #button {
    right: 4%;
  }

  .subscribe {
    width: 230px;
  }

  .card-image a img {
    max-width: 100%;
  }

  .services-details-main-img img {
    width: 100% !important;
    height: auto !important;
  }

  .wdt-before-after-slider-span-after {
    top: 6rem !important;
  }

  .wdt-before-after-slider-span-before {
    top: 6rem !important;
  }

  .footer-row {
    justify-content: start !important;
  }

  .footer-row {
    border-bottom: 1px solid #ccc !important;
  }

  .footer-address ul {
    font-size: 11px !important;
  }

  .social-media {
    margin-left: 23px !important;
  }

  /* #whtasapp-animate {
        right: 36px !important;
    }

    #button {
        right: 36px !important;
    } */

  /* Appointment Page */

  .clinic-timing-bg h3 {
    font-size: 18px !important;
  }

  .appointment-form h3 {
    font-size: 18px !important;
  }

  .week {
    font-size: 13px !important;
  }

  .time {
    font-size: 13px !important;
  }

  .appointment-bg {
    margin-bottom: 0 !important;
  }

  /* About Page */

  .expert-title h4 {
    font-size: 18px !important;
  }

  /* Contact Page */

  .contact-form {
    margin-top: 30px !important;
  }

  #contact-page-icons ul li i {
    font-size: 13px !important;
    margin-right: 5px !important;
  }

  #contact-page-icons ul {
    font-size: 13px !important;
  }
}

@media screen and (max-width: 1024px) {
  /* .wdt-before-after-slider-span-before {
        top: 10rem !important;
    } */

  /* .wdt-before-after-slider-span-after {
        top: 10rem !important;
    } */

  /* .before-after {
        max-width: 100vw !important;
        min-height: 80vh !important;
    } */
}

.responsive-img {
  height: 75vh;
}

@media (max-width: 767.98px) {
  .responsive-img {
    height: auto;
  }
}