z  *{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;}
body{font-family: 'Alata', sans-serif;}

::selection {color: #fff; background-color: #354ead;}
 
.owl-theme .owl-dots .owl-dot span{background-color: #354ead;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background-color: #3e4290;}



/* header */
header{position: relative; z-index: 9; background-color: #fff; box-shadow: 0 0 10px #00000021; padding: 0;}
header .header-top{background-color: #354ead; padding: 5px 0;}
header .header-top ul{display: flex; list-style: none; justify-content: end; gap: 20px;}
header .header-top ul li a{color: #fff; font-size: 16px; font-weight: 500;}
header .headermn .navbar .navbar-brand{width: 23%; padding: 10px 0;}
/*header .headermn .navbar .navbar-brand img{margin-top: -33px; box-shadow: 0 0 10px #0000003d;}*/
 
header .nav-link{color: #000; font-size: 16px; transition: .5s; position: relative; display:inline-block; padding: 0px 0px !important;}
header .nav-link::before{content: ''; background-color: #354ead; width: 0%; height: 2px; position: absolute; bottom: -5px; left: 0; transition: .5s;}
header .nav-link:hover::before{width: 100%;}
header .nav-link:hover, header .nav-link:focus{ color: #3e4290;}
header .navbar-nav{gap: 20px;}

header .navbar-nav .dropdown-menu{border: 0; box-shadow: #0000004b 0 0 10px;}
header .dropdown-item.active, header .dropdown-item:active, header .dropdown-item:hover{background-color: #354ead; color: #fff;}

header .whatsapp{justify-content: end;}
header .whatsapp li a{font-size: 16px; color: #fff; font-weight: 500; display: inline-block; padding: 10px 30px; background: linear-gradient(#354ead, #3e4290); transition: .5s;}
header .whatsapp li a:hover{background: linear-gradient(#3e4290, #354ead); color: #fff;}

header .navbar-toggler{border: none; color: #354ead; font-size: 28px; border-radius: 0;}
header .navbar-toggler:focus{box-shadow: none ;}
header .offcanvas-title{font-size: 30px; color: #354ead; font-weight: bold;}
header .navbar-nav{position: relative;}

.sticky .headermn .navbar .navbar-brand{width: 23%;}
.sticky .headermn .navbar .navbar-brand img{margin-top: 0;}

.sticky{top: -35px; left: 0; right: 0; z-index: 999; position: fixed !important; animation: slideDown .5s ease-out;}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(10);
  }
}

/* slider */
#slider{position: relative;}
#slider .owl-item{background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 155px 0;}
#slider .owl-dots{position: absolute; bottom: 20px; left: 0; right: 0;}
#slider .content h2{font-size: 40px; color: #000;}
#slider .content p{font-size: 18px; color: #6b6b6b;}
#slider .content a{font-size: 16px; color: #fff; font-weight: 500; display: inline-block; padding: 10px 30px; background: linear-gradient(#354ead, #3e4290); margin-top: 30px; transition: .5s;}
#slider .content a:hover{background: linear-gradient(#3e4290, #354ead);}
 
 
/* about */
#about{padding: 60px 0; background-color: #fff;}
#about .row{row-gap: 30px; align-items: center;} 
#about .content h5{font-size: 30px; font-weight: bold; color: #354ead; margin: 15px 0;}
#about .content p{font-size: 16px; color: #000; font-weight: 300; text-align: justify; line-height: 30px; margin-top: 20px;}
#about .content ul{padding-left: 25px;}
#about .content ul li{color: #3e4290;}
#about .content ul li span{color: #000; font-weight: 500; font-size: 16px;}
#about .content h4{color: #3e4290; font-weight: 700; font-size: 22px; margin-top: 15px;}
#about .img{text-align: center;}
#about .img img{border-radius: 20px; box-shadow: 15px 15px 0px #354ead;}
 
 
/* about2 */
#about2{padding: 60px 0; background-color: #f5f5f5;}
#about2 .row{row-gap: 30px; align-items: center;}
#about2 .content{padding-left: 20px;} 
#about2 .content h5{font-size: 30px; font-weight: bold; color: #354ead; margin: 15px 0;}
#about2 .content p{font-size: 16px; color: #000; font-weight: 300; text-align: justify; line-height: 30px; margin-top: 20px;} 
#about2 .content ul{padding-left: 25px;}
#about2 .content ul li{color: #3e4290;}
#about2 .content ul li span{color: #000; font-weight: 500; font-size: 16px;}
#about2 .content h4{color: #3e4290; font-weight: 700; font-size: 22px; margin-top: 15px;}
#about2 .img{text-align: center;}
#about2 .img img{border-radius: 20px; box-shadow: 15px 15px 0px #354ead;}


/* treatments */
#treatments{padding: 60px 0px; background-color:#fff;}
#treatments .row{row-gap: 30px;}
#treatments h2{text-align: center; margin-bottom: 30px; color: #3e4290; font-weight: bold; font-size: 40px;}
#treatments h3{text-align: left; font-size: 33px; color: #354ead; font-weight: 600;}
#treatments .treatmentsinr{margin: 2px; border: 1px solid #354ead; text-align: center; overflow: hidden; padding: 5px; background-color: #fff;}
#treatments .treatmentsinr img{border: 1px solid #bebebe; height: 300px;}
#treatments .treatmentsinr .content{background-color: #fff; padding: 10px; border-radius: 20% 20% 0 0;}
#treatments .treatmentsinr .content h4{font-size: 20px; font-weight: 500; text-align: center; color: #000000; padding: 10px 0;}
#treatments .treatmentsinr .content .callbak {font-size: 16px; text-align: center; display: inline-block; color: #fff; padding: 10px 30px; background: linear-gradient(#354ead, #3e4290); margin-top: 20px;}
#treatments .treatmentsinr .content .callbak:hover{background: linear-gradient(#3e4290, #354ead);}
 

/* treatments-2 */
#treatments-2{padding: 60px 0px; background-color:#f5f5f5;}
#treatments-2 .row{row-gap: 30px;}
#treatments-2 h2{text-align: center; margin-bottom: 30px; color: #3e4290; font-weight: bold; font-size: 40px;}
#treatments-2 h3{text-align: left; font-size: 33px; color: #354ead; font-weight: 600;}
#treatments-2 .treatmentsinr{margin: 2px; border: 1px solid #354ead; text-align: center; overflow: hidden; padding: 5px; background-color: #fff;}
#treatments-2 .treatmentsinr img{border: 1px solid #bebebe; height: 300px; width: 100%;}
#treatments-2 .treatmentsinr .content{background-color: #fff; padding: 10px; border-radius: 20% 20% 0 0;}
#treatments-2 .treatmentsinr .content h4{font-size: 20px; font-weight: 500; text-align: center; color: #000000; padding: 10px 0;}
#treatments-2 .treatmentsinr .content .callbak {font-size: 16px; text-align: center; display: inline-block; color: #fff; padding: 10px 30px; background: linear-gradient(#354ead, #3e4290); margin-top: 20px;}
#treatments-2 .treatmentsinr .content .callbak:hover{background: linear-gradient(#3e4290, #354ead);}

 

/* counter  */

#counter{background-image: url(../images/bg.jpg); background-position: center right; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}
#counter .counter-bg{background-color: #3e4290cb; padding: 80px 0;}
#counter .row{row-gap: 30px;}
#counter .item{text-align: center;} 
#counter .item h1{ color: #fff; margin-bottom: 5px; font-size: 40px;}
#counter .item h3{ font-size: 22px; color: #fff;}
#counter .item i{ font-size: 38px; color: #fff;}


 

/* testimonial */
#testimonial { padding: 70px 0;}
#testimonial h2 {color: #354ead;}
#testimonial .row {row-gap: 20px;}
#testimonial .testimonialslider .owl-item { border: 1px solid gray; padding: 20px; height: 270px; overflow-y: scroll;}
#testimonial .testimonialslider .owl-item::-webkit-scrollbar {width: 1px; height: 100%;}  
#testimonial .owl-item h5 { color: #354ead; margin: 0px; font-size: 17px;}
#testimonial .owl-item p {font-size: 14px; text-align: justify;}
#testimonial .iner .google { width: 40%;}
#testimonial .iner ul li {font-size: 30px; color: #f6bb06;}
#testimonial .iner h4 {margin-top: 10px;}
#testimonial .testimonialslider .star li {color: #f6bb06; font-size: 16px;}
#testimonial .testimonialslider .profile {margin-bottom: 8px; gap: 20px;}
#testimonial .testimonialslider .profile li p {margin-bottom: 0px;}
#testimonial .testimonialslider .profile li:first-child p {height: 40px; width: 40px; line-height: 36px; font-size: 20px; border-radius: 50%; text-align: center; background-color: #a7a7a7; color: #fff;}
#testimonial .testimonialslider .profile li span {font-size: 14px;}
#testimonial .reviewbtn { text-align: center; }
#testimonial .reviewbtn a {font-size: 16px; color: #fff; display: inline-block; padding: 10px 15px; margin-top: 15px; background: linear-gradient(#354ead, #3e4290); border-radius: 5px; transition: .5s;}
#testimonial .reviewbtn a:hover{background: linear-gradient(#3e4290, #354ead);}

 
/* blog */
#blog{padding: 70px 0;}
#blog .row{row-gap: 30px;}
#blog .p1{font-family: 'Kaushan Script', cursive; font-size: 21px; text-align: center; color: #354ead;}
#blog h2{color: #000; font-size: 36px; text-align: center; margin-bottom: 30px;}
#blog .inner{box-shadow: 0 0 10px #00000033;}
#blog .text{padding: 20px;}
#blog .text h5 a{color: #000; }
#blog .text span{color: #6d6d6d; display: inline-block; margin: 7px 0; font-size: 15px;}
#blog .text span i{color: #354ead;}
#blog .text p{color: #6d6d6d; font-size: 16px;}
#blog .text .read{color: #354ead; font-weight: 500; font-size: 16px; display: inline-block; margin-top: 20px; transition: .5s;}
#blog .text .read:hover{color: #000;}



/* footer */
footer .footertop{background-color: #f5f5f5; padding: 70px 0px 20px;}
footer .row{row-gap: 25px;}
footer .footertop .about a img{width:30%; border-radius: 10px;}
footer .footertop .about p{color: #000; font-size: 15px; margin-top: 20px; }
footer .footertop ul{list-style: none;}
footer .footertop ul li{color: #000; margin-top: 10px;}
footer .footertop ul li a{color: #000; font-size: 16px; transition: .5s; display: inline-block; border-bottom: 1px solid transparent;}
footer ul li h4{color: #354ead;}
footer .footertop ul li a:hover{color: #354ead;}
footer .footertop .addres li{margin-bottom: 20px;}
footer .footertop .addres li i{color: #354ead; font-size: 22px;}
footer .footerboo ul{display: flex; justify-content: space-between; margin: 0; border-top: 1px solid #354ead36;padding-top: 20px;}
footer .footerboo{background-color:#f5f5f5; padding: 20px;}
footer .footerboo .soical li:first-child{color: #354ead; text-align: center;}
footer .footerboo .soical li:first-child a{color: #fff; font-size: 16px; display: inline-block; width: 35px;height: 35px; line-height: 35px; background-color: #354ead; border-radius: 50%; transition: .5s;}
footer .footerboo .soical li:first-child a:hover{background-color: #000;}
footer .footerboo ul li img{width: 200px; background-color: #354ead; padding: 0px 10px 8px; border-radius: 100px;}


  /* quickcontact */
.quickcontact {
  width: 45px;
  position: fixed;
  top: 77%;
  right: 15px;
  z-index: 102;
}


/* modal */
.modal form.row{row-gap: 20px;}
.modal .btn-theme {border-radius: 0px; background: #354ead; color: #fff;}
.modal .btn-theme:hover{background-color: #000; color: white;} 
.modal .form-control{border-radius: 0px; border: none; box-shadow: none; background-color: #f3f3f3;}
.modal .form-control:focus{border-color: #000;}
.modal .submit{background-color: #354ead; color: #fff; font-weight: 500px; padding: 10px; border: 0; transition: .5;}
.modal .submit:hover{background-color: #354ead;}


/* ======================================
            inner page
======================================= */

/* heading */
#heading{background-image: url(../images/banner3.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; text-align: center;}
#heading .heading-bg{padding: 100px 0;}
#heading .content{display: inline-block; padding: 30px 70px; background-color: #ffffff85; border-radius: 100px; box-shadow: 0 0 10px #0000003b; text-align: center;}
#heading h2{font-size: 40px; font-weight: bold; color: #000;}
#heading p, #heading a{font-size: 18px; color: #303030; transition: .5s;}
#heading a:hover{color: #354ead;}
 
 

/* service-page */
#service-page{padding: 70px 0; background-color: #fff;}
#service-page .p1{font-family: 'Kaushan Script', cursive; font-size: 21px; text-align: center; color: #354ead;}
#service-page h2{color: #000; font-size: 36px; text-align: center; margin-bottom: 30px;}
#service-page .row{row-gap: 25px;}
#service-page ul{display: flex; list-style: none; align-items: center; background-color: #fff5f9; box-shadow: 0 0 10px #00000033;}
#service-page ul li:first-child{width: 45%;}
#service-page ul li:last-child{width: 55%; padding: 20px;}
#service-page ul li h4{color: #444444; font-size: 20px;}
#service-page ul li p{font-size: 15px; font-weight: 400; color: #919191;}
#service-page ul li a{font-size: 16px; color: #354ead; font-weight: 500; display: inline-block; margin-top: 20px;}
#service-page ul li a:hover{color: #000;}


/* gallery */
#gallery{background-color: #fff; padding: 70px 0;}
#gallery .p1{font-family: 'Kaushan Script', cursive; font-size: 28px; font-weight: 500; text-align: center; color: #354ead;}
#gallery h2{color: #000; font-size: 38px; text-align: center; text-shadow: 1px 2px 1px #00000062;} 
#gallery .img-wrapper { position: relative; margin-top: 15px; overflow: hidden; border-radius: 10px; box-shadow: 0 0 8px #00000033;}
#gallery .img-wrapper img {width: 100%;}

#gallery .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;}
#gallery .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: 62%;
  }
}

#nextButton i{
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}
#nextButton:hover {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #nextButton {
    font-size: 2em;
  }
}

#prevButton i{
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}
#prevButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #prevButton {
    font-size: 2em;
  }
}

#exitButton i{
  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: 2em;
  }
}


/* blog-page */
#blog-page{padding: 70px 0;}
#blog-page .row{row-gap: 30px;}
#blog-page .p1{font-family: 'Kaushan Script', cursive; font-size: 21px; text-align: center; color: #354ead;}
#blog-page h2{color: #000; font-size: 36px; text-align: center; margin-bottom: 30px;}
#blog-page .inner{box-shadow: 0 0 10px #00000033;}
#blog-page .text{padding: 20px;}
#blog-page .text h5 a{color: #000; }
#blog-page .text span{color: #6d6d6d; display: inline-block; margin: 7px 0; font-size: 15px;}
#blog-page .text span i{color: #354ead;}
#blog-page .text p{color: #6d6d6d; font-size: 16px;}
#blog-page .text .read{color: #354ead; font-weight: 500; font-size: 16px; display: inline-block; margin-top: 20px; transition: .5s;}
#blog-page .text .read:hover{color: #000;}


/* blog-detail */
#blog-detail{padding: 70px 0;}
#blog-detail .row{row-gap: 30px; justify-content: center;}
#blog-detail .p1{font-family: 'Kaushan Script', cursive; font-size: 21px; text-align: center; color: #354ead;}
#blog-detail h2{color: #000; font-size: 33px; text-align: center; margin-bottom: 40px;}
#blog-detail .img img{width: 100%; border-radius: 15px;}
#blog-detail .content h5 a{color: #000; font-size: 26px;}
#blog-detail .content span{color: #6d6d6d; display: inline-block; margin: 7px 0; font-size: 15px;}
#blog-detail .content span i{color: #354ead;}
#blog-detail .content p{color: #6d6d6d; font-size: 16px; text-align: justify;}
#blog-detail .blog{background-color: #f5f5f5; box-shadow: 0 0 10px #0000001c; border-radius: 10px; padding: 15px 30px 30px; position: sticky; top: 100px;}
#blog-detail .blog h4{color: #354ead; margin-bottom: 15px; text-align: center; font-size: 28px; font-weight: bold;}
#blog-detail .blog ul{list-style: none; background-color: #fff; border: 1px solid #e4e4e4; padding: 10px;}
#blog-detail .blog ul li{margin-bottom: 15px; align-items: center;}
#blog-detail .blog ul li:last-child{margin-bottom: 0;}
#blog-detail .blog a{color: #000; font-size: 17px; display: inline-block;}
#blog-detail .blog p{color: #6d6d6d; display: inline-block; font-size: 14px;}
#blog-detail .blog p i{color: #354ead;}


/* contact */
#contact{padding: 70px 0px;}
#contact .row{row-gap: 30px;}
#contact .location h2{font-size: 40px; font-weight: 500; color: #000;}
#contact .location h2 span{font-weight: 800; color: #354ead;}
#contact .location p{font-size: 16px; color: grey; margin-bottom: 30px;}
#contact .location ul li a{color: #000; font-size: 16px; font-weight: 500; transition: .5s;}
#contact .location ul li{transition: .5s; padding: 15px; height: 100px; margin-bottom: 20px; background-color: #f5f5f5; font-size: 20px; color: #354ead; transition: .5s;}
#contact .location ul li:hover a, #contact .location ul li:hover{color: #354ead;}
#contact .location .map iframe{border-radius: 20px;}
#contact form{background-image: url(../images/contact-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 30px 15px; }
#contact form .form-control{border: none; border-bottom: 1px solid #354ead; background-color: #ffffff00; border-radius: 0px; color: #000;}
#contact form .label{color: #000; font-size: 16px; font-weight: 600; margin-bottom: 10px;}
#contact form .form-control:focus{box-shadow: none; border-color: #354ead;}
#contact form .form-control::placeholder{color: darkgray;}
#contact form .btn{background-color: #354ead; color: #fff; width: 100%;}


/* details */
#details{padding: 70px 0; background-color: #fff;}
#details .row{row-gap: 25px;}
#details .p1{font-family: 'Kaushan Script', cursive; font-size: 28px; font-weight: 500; text-align: center; color: #354ead;}
#details h2{color: #000; font-size: 38px; text-align: center; margin-bottom: 50px;}
#details .content h3{color: #000; font-size: 26px; margin: 30px 0 10px;}
#details .content p{color: grey; font-size: 16px; text-align: justify;} 
#details .img img{border-radius: 10px; width: 100%;} 
#details .service{background-color: #f5f5f5; padding: 15px 30px 30px; box-shadow: 0 0 10px #00000021; position: sticky; top: 100px; border-radius: 10px; border: 1px solid #e4e4e4;}
#details .service h4{color: #354ead; margin-bottom: 15px; text-align: center; font-size: 28px; font-weight: bold;}
#details .service ul{list-style: none; background-color: #fff; border-radius: 10px; border: 1px solid #e4e4e4;}
#details .service ul li a{color: #000; font-size: 18px; padding: 10px 15px; display: block; transition: .3s;}
#details .service ul li a:hover, #details .service ul li a:active, #details .service ul li a:focus{background-color: #354ead; color: #fff;}
#details .service ul li a i{color: #354ead; transition: .3s;}
#details .service ul li a:hover i, #details .service ul li a:active i, #details .service ul li a:focus i{color: #fff;}












