*{margin: 0; padding: 0; box-sizing: border-box;}
img{max-width: 100%;}
a, a:hover, a:focus, a:visited, a:active{text-decoration: none;}
p, ul, li{padding: 0; margin: 0;}


.book-appointment-btn {
    position: fixed;
    right: -59px;
    top: 40%;
    transform: rotate(-90deg);
    background: #033c4b;
    padding: 11px;
    border-radius: 10px 10px 0px 0px;
    z-index: 9;
}
.book-appointment-btn a {
    color:#fff;
}
.instagram-media {width: 100%; height: 210px;}
.sociallink li {display: inline-block;list-style: none;}
.sociallink li a:hover {padding-left: 0px !important;}

@font-face {
  font-family: myFirstFont;
  src: url(../font/HighlandGothicFLF.ttf);
}

@font-face {
  font-family: tommySoft;
  src: url(../font/MADETommySoftLight.otf);
}

@font-face {
  font-family: tommySoftBold;
  src: url(../font/MADETommySoftBold.otf);
}

h2{font-family: myFirstFont; letter-spacing: 3px;}
body{font-family: tommySoft;}


/* header */
header{position: absolute; top: 0; left: 0; right: 0; z-index: 999; background-color: transparent;}
header .header-top{background-color: #033c4b; padding: 8px 0px;}
header .header-top ul li{color: #fff; font-size: 16px;}
header .header-top ul li a{color: #fff; font-size: 16px;}
header .navbar{padding: 0;}
header .navbar .navbar-brand img{width: 200px;}
header .navbar .nav-link{font-size: 22px; color: #000; font-weight: 500; position: relative;  font-family: auto;}
header .navbar .nav-link:after{content: ''; width: 0; height: 2px; background-color: #D2B48C; position: absolute; bottom: 0px; left: 0; transition: .5s;}
header .navbar .nav-link:hover:after{width: 100%;}
header .navbar-toggler{padding: 8px 10px; color: #000; border: 0px; }
header .navbar-toggler:focus{box-shadow: none;}
header .navbar-nav .nav-link:hover, header .navbar-nav .nav-link:focus{color: #D2B48C;}

header .offcanvas-title{font-family: tommySoftBold;}

.sticky {background-color: #ffffff; left: 0; right: 0; z-index: 999; position: fixed !important; top: -100%; animation: slideDown .5s ease-out;}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(10);
  }
}


/* slider */
#slider{padding: 150px 0 70px; background-image: url(../images/slider-bg.jpg); background-position: center left; background-size: cover; background-repeat: no-repeat; margin-top: 40px;}
#slider .row{align-items: center;}
#slider .text{text-align: center;}
#slider .text a img{width: 60%;}
#slider .text h2{margin: 15px 0; font-weight: bold; color: #033c4b; font-size: 39px; font-family: auto; letter-spacing: 0;}
#slider .text p{font-family: tommySoft; font-weight: bold; font-size: 21px; color: #000;}

#slider form{row-gap: 40px;}
#slider form .form-control{background-color: transparent; border: 0px; border-bottom: 1px solid #5e5e5e; font-size: 14px; border-radius: 0;}
#slider form button{border: 0; background-color: #033c4b; color: #fff; padding: 8px 15px; border-radius: 10px; font-weight: bold;}


/* box */
#box{padding: 40px 0;}
#box .row{row-gap: 20px; justify-content: center;}
#box .inner{background-color: #fff; padding: 10px; border-radius: 15px; text-align: center; height: 100%;}
#box .inner img{width: 200px;}
#box .inner h4{color: #000; font-size: 16px; font-family: tommySoft; font-weight: bold; margin: 15px 0 0;}


/* testimonial */
#testimonial{padding: 20px 0 40px; }
#testimonial h2{color: #033c4b;}
#testimonial .row{row-gap: 20px; background-color: #fff;}
#testimonial .testimonialslider .owl-item{border: 1px solid gray; padding: 20px; height: 210px; overflow-y: scroll;}
#testimonial .owl-item h5{color: #033c4b; margin: 0px; font-size: 17px; font-weight: bold;}
#testimonial .owl-item p{font-size: 14px;}
#testimonial .iner .google{ width: 40%;}
#testimonial .iner ul li{font-size: 35px; color: #f6bb06;}
#testimonial .iner h4{margin-top: 10px; font-weight: bold;  }
#testimonial .testimonialslider .star li{color: #f6bb06; font-size: 16px;}
#testimonial .testimonialslider .profile{margin-bottom: 8px;}
#testimonial .testimonialslider .profile li:first-child p{height: 40px; width: 40px; line-height: 40px; font-size: 20px; border-radius: 50%;text-align: center; background-color: #a7a7a7; color: #fff;}
#testimonial .testimonialslider .profile li span{font-size: 14px;}
#testimonial .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background-color: #033c4b;}
  

/* choose */
#choose{overflow: hidden; padding-bottom: 40px; background: #cdd4dc;} 
#choose .img img{margin-left: -40px;}
#choose h4{font-family: auto; font-size: 28px; color: #033c4b; text-align: center; font-weight: bold; display: none;}
#choose .content h3{font-family: auto; font-size: 44px; color: #033c4b; font-weight: bold;}
#choose .content ul li{font-family: tommySoft; font-size: 22px; color: #000; margin-top: 20px;}
#choose .content ul li b{color: #033c4b; font-family: tommySoftBold;}


/* treatment */
#treatment{padding: 0 0px 50px;}
#treatment h2{background-color: #033c4b; padding: 10px; font-size: 33px; font-weight: bold; text-align: center; color: #fff; margin-bottom: 30px;}
#treatment .row{row-gap: 60px;}
#treatment .inner{list-style: none; display: flex; position: relative; align-items: center;}
#treatment .inner li:first-child{width: 25%; margin-right: -30px;}
#treatment .inner li:last-child{width: 80%; padding: 18px 8px 18px 45px; background-color: #F5F4F7; border-radius: 20px;}
#treatment .inner li h5{font-size: 25px; margin-bottom: 8px; color: #033c4b; font-family: tommySoftBold; font-weight: bold;}
#treatment .inner li p{font-size: 13px; color: #7c6296; font-weight: 600;}
#treatment .inner li a{display: inline-block; font-size: 14px; padding: 6px 15px; background-color: #033c4b; border-radius: 6px; margin-top: 10px; color: #fff; font-weight: bold;}
#treatment .inner li a:hover{background-color: #000;}
#treatment .inner li img{position: relative; z-index: 9; border: 1px solid #d6d6d6;} 


/* after */
#after{background-color: #F6F0E8; padding: 60px 0;}
#after h2{text-align: center; font-size: 40px; color: #033c4b; margin-bottom: 20px;}
#after .row{row-gap: 25px; justify-content: center; align-items: center;}
#after .img{margin-top: 15px;}

#after form.row{row-gap: 50px; background-color: #DAD2D3; padding: 30px; border-radius: 20px;}
#after form .form-control{background-color: transparent; border: 0px; border-bottom: 1px solid #5e5e5e; font-size: 14px; border-radius: 0;}
#after form button{border: 0; background-color: #033c4b; color: #fff; padding: 8px 15px; border-radius: 10px;}


/* contact */
#contact{padding: 50px 0;}
#contact .row{row-gap: 20px;}
#contact h2{background-color: #033c4b; padding: 10px; text-align: center; color: #fff; margin-bottom: 25px;}
#contact .map iframe{border-radius: 15px;}

#contact .content{padding: 20px; background-color: #ffffff42; border-radius: 15px; border: 2px solid #033c4b;}
#contact .content h5{font-weight: bold;}
#contact .content h3 .accordion-button{font-weight: bold;}
#contact .content .accordion-button:not(.collapsed){color: #000;}


/* footer */
footer{background-color: #033c4b; padding: 60px 0px 0px;}
footer .footerinr .logo img{border-radius: 10px;}
footer .footerinr .logo p{font-size: 15px; font-weight: 400; color: #fff; margin-left: 30px;}
footer .footerinr .logo:hover{padding: 0;}
footer .footerinr ul {list-style: none;}
footer .footerinr ul li{color: #fff; margin-bottom: 15px;}
footer .footerinr ul h4{color: #fff; font-size: 21px; font-weight: bold; display: inline-block; border-bottom: 2px solid #b59acf; padding-bottom: 6px;}
footer .footerinr ul li p{font-size: 15px; color: #fff;}
footer .footerinr ul li i{font-size: 21px; color: #fff;}
footer .footerinr ul li a{display: inline-block; color: #fff; font-size: 15px;  transition: .5s;}
footer .footerinr ul li a:hover{padding-left: 5px;}
footer .footerinr .category li{margin-bottom: 8px;}
/* footer .footerinr .link li:first-child, footer .footerinr .category li:first-child{color: #333333;} */
footer .footerinr ul li p b{color: #fff;}
footer .img{text-align: center; border-top: #fff 1px solid; padding: 15px 0px; margin-top: 30px;}
footer .img a img{width: 220px;}



/*  */
/* .quickcontact-wa {
  width: 50px;
  position: fixed;
  top: 60%;
  right: 20px;
  z-index: 102;
} */


.quickcontact a{
  display: block;
  position: fixed;
  right: 15px;
  z-index: 102;
  animation: rotation 5s infinite linear;
    animation-duration: 4s;
}

.quickcontact a:first-child{top: 60%;}
.quickcontact a:last-child{top: 80%;}
                                            
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.quickcontact i {
  color: #002c33
}
.quickcontact a img{z-index: 999;}

.quickcontact a {
  height: 60px;
  width: 60px;
  background-color:#fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed; 
}

.quickcontact a::before {
  content: "";
  position: absolute;
  border: 1px solid #033c4b;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  border-radius: 50%;
  animation: pulse 1s linear infinite
}

.quickcontact a::after {
  content: "";
  position: absolute;
  border: 1px solid #033c4b;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  border-radius: 50%;
  animation: pulse 1s linear infinite;
  animation-delay: 0.3s
}

@keyframes pulse {
  0% {
      transform: scale(0.5);
      opacity: 0
  }

  50% {
      transform: scale(1);
      opacity: 1
  }

  100% {
      transform: scale(1.3);
      opacity: 0
  }
}

/*  */




  /* modal */
  .modal .btn-theme {border-radius: 0px; background: #033c4b; color: #fff;}
  .modal .btn-theme:hover{background-color: #000; color: white;} 
  .modal .form-control{border-radius: 0px; box-shadow: none;}
  .modal .form-control:focus{border-color: #000;}


  /* tnanks */
#thank{background-image: url(../images/thanks.jpg); padding: 250px 0; background-repeat: no-repeat; background-size: cover; background-position: center center;}
#thank .content{text-align: center; background-color: #033c4bd7; margin: auto; width: 335px; padding: 20px; border-radius: 15px;}
#thank .content h2{color: #fff; font-size: 26px;}
#thank .content p{color: #fff; margin: 10px 0; font-weight: bold;}
#thank .content .call a{padding: 7px; width: 166px; background-color: #fff; color: #033c4b; font-weight: bold; border-radius: 40px; display: inline-block; }
  
  
/* gallery */
#gallery{
  padding: 70px 0px;
}

.gallery-page{background-color: #f5faff; margin-bottom: 30px;} 
#gallery .row{row-gap: 20px;}
#gallery h2{
  font-size: 40px; color: #000000; margin-bottom: 30px; font-weight: bold;
}

@media screen and (min-width: 991px) {
  #gallery { 
    padding: 50px 0px;
  }
}

.img-wrapper {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.189); 
  overflow: hidden;
  border-radius: 15px;
  position: relative;
  margin-top: 3px;
}
.img-wrapper img {
  width: 100%;
}
.owl-carousel .owl-stage-outer{padding: 14px 0;}

.img-overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.img-overlay i {
  color: #fff;
  font-size: 3em;
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#overlay img {
  margin: 0;
  width: 80%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 5%;
}
@media screen and (min-width: 768px) {
  #overlay img {
    width: 60%;
  }
}
@media screen and (min-width: 1200px) {
  #overlay img {
    width: 50%;
  }
}

#nextButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}
#nextButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #nextButton {
    font-size: 3em;
  }
}

#prevButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}
#prevButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #prevButton {
    font-size: 3em;
  }
}

#exitButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
  position: absolute;
  top: 15px;
  right: 15px;
}
#exitButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #exitButton {
    font-size: 3em;
  }
}