* {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: "Lato", sans-serif;}



/* header */
header {position: unset; left: 0; right: 0; top: 0; z-index: 99;}
header .header-top {background-color: #feed00; padding: 3px 0px;}
.sticky .headermn{padding: 10px 0px;}
header .header-top .top-info li, header .header-top .top-info li a {color: #000; font-size: 14px;}
header .header-top .top-info li:last-child a {display: inline-block; height: 35px; width: 35px; border-radius: 50px; line-height: 35px;
text-align: center; background-color: #000; color: #fff; border: 1px solid #000; transition: .5s;}
header .headermn{background-color: #251963;}
header .headermn .navbar .navbar-brand {width: 20%;}
header .nav-link {color: #fff; font-size: 13px; font-weight: 500; transition: .5s; position: relative; padding: 0px 0px !important;
text-transform: uppercase;}
header .nav-link::after{content: ''; background-color: #feed00; width: 0%; height: 2px; position: absolute; bottom: -5px; left: 0; transition: .5s;}
header .nav-link:hover::after {width: 100%;}
header .nav-link:hover, header .nav-link:focus {color: #feed00;}
header .navbar-nav {gap: 20px;}
header .navbar-toggler {border: none; color: #feed00; font-size: 28px; border-radius: 0;}
header .navbar-toggler:focus {box-shadow: none;}
header .offcanvas-title img {width: 34%;}
header .navbar-nav {position: relative; align-items: center;}
.sticky {
left: 0;
right: 0;
z-index: 999;
position: fixed !important;
top: 0px;
animation: slideDown .5s ease-out;
background-color: #fff;
box-shadow: 0 0 10px #00000021;
}
.sticky .headermn .navbar .navbar-brand {width: 14%;}

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

to {
transform: translateY(10);
}
}
header .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{color: #fff;}
header .dropdown-menu{border-radius: 0; border: 0; padding: 15px 0; box-shadow: 0 0 5px #0000002f;}
header .dropdown-menu li .dropdown-item{padding: 6px 20px; font-size: 18px; font-weight: 500; font-family: initial;}
header .dropdown-menu li .dropdown-item:hover{background-color: #251963; color: #fff;}


header .navbar .whatsapp li a {display: inline-block; padding: 8px 20px; background-color: transparent; color: #feed00; border-radius: 3px;
transition: .5s; border: 1px solid #feed00; position: relative; transition: .5s; z-index: 1;}
header .navbar .whatsapp li a::before {position: absolute; content: ''; top: 0px; left: 0px; width: 0px; height: 100%; transition: .5s; background-color: #feed00; z-index: -1;}
header .navbar .whatsapp li a:hover:before {width: 100%;}
header .navbar .whatsapp li a:hover {color: #000;}

/* slider */

#slider{background-position: center center; background-size: cover; padding: 30px 0px; overflow: hidden;}
#slider .form-bg{background-color: #fff; padding: 25px 20px; border-radius: 20px; width: 100%; box-shadow: 0px 0px 10px #00000042;}
#slider form.row{row-gap: 15px;}
#slider form h3{color: #000; font-size: 24px; font-family: 'Sansita One';}
#slider form .form-control{background-color: transparent; font-size: 14px; border: 1px solid #000; padding: 8px 20px; border-radius: 0px; color: #000;}
#slider form .form-control:focus{box-shadow: none; border-color: #127bbd;}
#slider form .form-control::placeholder{color: #3b3b3b;}
#slider form .btn{background-color: #251963; color: #fff; width: 100%; padding: 12px 0px; border-radius: 0px;}
#slider form .btn:hover{background-color: #feed00; color: #000;}
#slider .owl-carousel button.owl-dot{display: none;}

/* about */
.about-top{padding: 10px 20px; background-color: #251963; text-align: center; overflow: hidden;}
.about-top .zoom-in{color: #fff; animation: about-top 7s ease-out infinite; margin-bottom: 0; font-size: 16px;}
.about-top .zoom-in a{font-weight: bold; color: #fff;}

@keyframes about-top {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}

#about{padding: 60px 0px; background-color: #feed00; overflow: hidden;}
#about .content{box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); padding: 30px; background-color: #fff; border-radius: 13px;}
#about .content h2{color: #251963; font-family: "Montserrat", Sans-serif; font-size: 40px; font-weight: 600; margin-bottom: 10px;}
#about .content h4{margin-bottom: 3px; text-align: center; font-size: 16px; font-weight: 600;} 
#about .content .about-blut{margin-top: 20px;}
#about .content .about-blut li{margin-bottom: 10px;}
#about .imgs img{height: 438px; object-fit: cover; border-radius: 13px; border: 2px solid #fff;}

/* our-treatments */

#our-treatments{padding: 60px 30px; overflow: hidden; background-image: url(../images/service-bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover;}
#our-treatments .row{row-gap: 30px; justify-content: center;}
#our-treatments .inr{width: 20%;}
#our-treatments h2{text-align: center; color: #000; margin-bottom: 50px;}
#our-treatments .iner{box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); text-align: center; background-color: #fff; padding: 20px 10px; border-radius: 10px;}
#our-treatments .iner .imgs{border-radius: 10px 10px 0px 0px; overflow: hidden;}
#our-treatments .iner .imgs img{transition: .5s;}
#our-treatments .iner:hover .imgs img{transform: scale(1.1);}
#our-treatments .iner h3{font-size: 13px; margin: 25px 0px 10px; color: #000; font-weight: 600;} 



/* why-choose */

#why-choose{padding: 50px 0px; overflow: hidden;}
#why-choose .row{row-gap: 25px;}
#why-choose .imgs img{width: 100%; height: 400px; object-fit: cover;}
#why-choose h6{font-size: 13px; margin-bottom: 15px; color: #251963; font-weight: 600;}
#why-choose h2{font-size: 22px; margin-bottom: 10px;}
#why-choose .text{font-size: 15px; margin-bottom: 30px;}
#why-choose ul{margin-bottom: 20px; gap: 25px;}
#why-choose ul li h4{font-size: 15px;}

/* testimonial */

#testimonial{padding: 20px 0 40px; overflow: hidden;}
#testimonial h2{color: #000;   font-family: arefRuqaa;}
#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: #000; margin: 0px; font-size: 17px; font-weight: bold; font-family: arefRuqaa;}
#testimonial .owl-item p{font-size: 14px; font-family: arefRuqaa;}
#testimonial .iner .google{ width: 40%;}
#testimonial .iner ul li{font-size: 35px; color: #feed00;}
#testimonial .iner h4{margin-top: 10px; font-weight: bold; font-family: arefRuqaa;}
#testimonial .testimonialslider .star li{color: #feed00; font-size: 16px; font-family: arefRuqaa;}
#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; font-family: arefRuqaa;}
#testimonial .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background-color: #000;}

/* gallery */

#gallery{background-color: #feed00; padding: 70px 0; overflow: hidden;}
#gallery .p1{font-family: 'Kaushan Script', cursive; font-size: 28px; font-weight: 500; text-align: center; color: #242424;}
#gallery h2{color: #111111; font-size: 38px; text-align: center; text-shadow: 1px 2px 1px #00000062;}
#gallery .border-lr{text-align: center; color: #251963; font-size: 28px; position: relative; margin-bottom: 10px;}
#gallery .border-lr::before{content: ''; background-color: #251963; width: 60px; height: 2px; position: absolute; top: 50%; left: 42%;}
#gallery .border-lr::after{content: ''; background-color: #251963; width: 60px; height: 2px; position: absolute; top: 50%; right: 42%;}
#gallery .img-wrapper { position: relative; margin-top: 15px; overflow: hidden; 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;
}
}

/* frem */

#frem{padding: 50px 0px; background-color: #feed00; overflow: hidden;}
#frem h2{font-size: 40px;}
#frem{overflow: hidden ;}
#frem .row{row-gap: 20px;}

/* video */

#video{padding: 50px 0px; overflow: hidden;}
#video h2{text-align: center; margin-bottom: 40px; font-size: 30px;}
#video .iner{border: 8px solid #000; border-radius: 5px;}

/* contact */

#contact{padding: 50px 0px; background-color: #feed00; overflow: hidden;}
#contact h2{text-align: center; margin-bottom: 40px;}
#contact .iner{text-align: center; border: 1px solid #000; padding: 15px;}
#contact h3{font-size: 30px; margin-bottom: 25px; font-weight: 600;}
#contact ul{margin-bottom: 40px;}
#contact h5{position: relative; margin-bottom: 30px;}
#contact h5::before{position: absolute; content: ''; height: 1px; width: 30px; top: 35px; background-color: #000; left: 0px;
right: 0px; text-align: center; margin: auto;}
#contact .text, #contact .text a{color: #000;}

/* footer */

footer .footertop {background-color: #222222 !important; padding: 70px 0px 20px;}
footer .row {row-gap: 25px;}
footer .footertop h3{font-size: 20px; margin-bottom: 30px; color: #fff;position: relative;}
footer .footertop h3::before{position: absolute; content: ''; background-color: #feed00; width: 30px; height: 2px; top: 30px;}
footer .footertop .about img {width: 111px;}
footer .footertop .about p {color: #fff; text-align: justify; font-size: 14px; width:77%; margin-top: 20px;}
footer .footertop ul {list-style: none;}
footer .footertop ul li {color: #fff; font-size: 14px; margin-top: 10px; border-bottom: 1px dotted #fff; padding-bottom: 11px;}
footer .footertop ul li a {color: #fff; font-size: 14px; transition: .5s; display: inline-block; border-bottom: 1px solid transparent;}
footer .footertop ul li a:hover {color: #feed00;}
footer .footertop .addres li {margin-bottom: 15px;}
footer .footertop .addres li i {color: #feed00; font-size: 22px;}
footer .footerboo ul {display: flex; justify-content: space-between; margin: 0; border-top: 1px solid #feed00; padding-top: 20px;}
footer .footerboo {background-color: #222222 !important; padding: 20px;}
footer .footerboo .soical li:first-child {color: #251963; 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: #251963; border-radius: 50%; transition: .5s;}
footer .footerboo .soical li:first-child a:hover {background-color: #fff; color: #251963;}
footer .footerboo ul li img {width: 195px; background-color: #251963; 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: #251963; color: #fff;}
.modal .btn-theme:hover {background-color: #000; color: white;}
.modal .form-control {border-radius: 0px; border: none; box-shadow: none; background-color: #f1f1f1;}
.modal .form-control:focus {border-color: #000;}
.modal .submit {background-color: #251963; color: #fff; font-weight: 500px; padding: 10px; border: 0; transition: .5;}
.modal .submit:hover {background-color: #000;}

/* about-bg */

#about-bg{background-image: url(../images/about-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 50px 0px; position: relative; z-index: 1;}
#about-bg::before{position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; background-color: #251963b0; z-index: -1;}
#about-bg h2{text-align: center; font-size: 30px; color: #fff;}
#about-bg .text, #about-bg .text a{text-align: center; font-size: 16px; color: #fff;}

/* contact */

#contact-sc{background-color: #000; overflow: hidden;}
#contact-sc h6{color: #fff; font-family: arefRuqaa;}
#contact-sc .content{padding: 31px 10px;}
#contact-sc h2{color: #fff; font-size: 34px; font-weight: 600; margin: 10px 0px 22px; font-family: arefRuqaa;}
#contact-sc .iner{row-gap: 30px;}
#contact-sc .iner .form-control{background-color: transparent; border: transparent; border-radius: 0px; border-bottom: 1px solid #fff; padding: 24px 4px 50px; box-shadow: none; color: #fff; font-family: arefRuqaa;}
#contact-sc .iner .form-control::placeholder{color: #fff; font-family: arefRuqaa;}
#contact-sc .iner .btn{padding: 13px 55px; background-color: #feed00; color: #000; border-radius: 4px; border: 1px solid #feed00;   font-family: arefRuqaa;}
#contact-sc .iner .btn:hover{background-color: transparent; color: #feed00;}

/* blog */

#blog{padding: 32px 70px; overflow: hidden; background-color: #efefed;}
#blog h5{text-align: center; color: #424242; font-size: 14px; font-family: arefRuqaa;}
#blog h2{text-align: center; font-size: 38px; width: 50%; margin: auto; margin-bottom: 45px; color: #303030; font-family: arefRuqaa;}
#blog .iner{border: 1px solid #2a282640; transition: .5s; background-color: #000;}
#blog .iner:hover{box-shadow: 0 0 0 2px rgba(42, 40, 38, .2509803922); transform: translate3d(0, -5px, 0);}
#blog .content{padding: 20px 20px;}
#blog .content h4 {color: #feed00; font-size: 20px; font-family: arefRuqaa;}
#blog .content .text{margin-bottom: 25px; color: #fff; font-family: arefRuqaa;}
#blog .content h6 i{color: #feed00;}

/* blog-detail */

#blog-detail{padding: 70px 0;}
#blog-detail .row{row-gap: 15px; justify-content: center;}
#blog-detail h2 {color: #000; font-size: 33px; text-align: center; margin-bottom: 40px;}
#blog-detail .img img {width: 100%;}
#blog-detail .content h5{color: #251963; font-size: 26px;}
#blog-detail .content span i{color: #251963;}
#blog-detail .blog{background-color: #fff; padding: 15px 30px 30px; border: 1px solid #251963; position: sticky; top: 100px;}
#blog-detail .blog h4{color: #251963; 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: 0px; align-items: center;}
#blog-detail .blog ul li:last-child{margin-bottom: 0;}
#blog-detail .blog a{color: #000; font-size: 15px; display: inline-block;}
#blog-detail .blog p{color: #6d6d6d; display: inline-block; font-size: 14px;}
#blog-detail .blog p i{color: #251963;}

/* facilities */

#facilities{padding: 60px 0px;}
#facilities .row{row-gap: 25px;}
#facilities .imgs{overflow: hidden; border-radius: 20px;}
#facilities .imgs img{transition: .5s;}
#facilities .imgs:hover img{transform: scale(1.1);}
#facilities .content{margin-left: 25px;}
#facilities .content ul li{margin-bottom: 15px;}

/* ortho-treatment */

#our-treatments.treatments{padding: 120px 30px;}
#our-treatments.treatments h4{font-size: 15px;}
#our-treatments.treatments .text {font-size: 14px;}

/* services-det */

#services-det{padding: 60px 0px; background-color: #f7f7f7;}
#services-det .content h4{margin-bottom: 25px;}
#services-det .content {margin: 0 0 30px; box-shadow: 0px 0px 20px #0000004d; background-color: #f9f9f9; z-index: 1; padding: 25px; border-radius: 8px;}
#services-det .content .category-box li{margin-bottom: 15px;}
#services-det .content .category-box li a:hover{color: #251963; padding-left: 25px; border-color: #251963; transition: .5s;}
#services-det .content .category-box li i{top: 3px; margin-left: 2px; font-size: 15px; visibility: hidden; opacity: 0;
  color: #251963; transition: 0.4s;}
#services-det .content .category-box li a:hover i{visibility: visible; opacity: 1; margin-left: 7px;}
#services-det .content .category-box li a{color: #002856; font-weight: 600; padding: 15px 20px 15px 20px; display: block;
  font-size: 18px; background-color: #fff; border-left: 6px solid transparent; border-radius: 15px; z-index: 1;  transition: 0.4s;}
#services-det .content-a {margin: 0 0 30px; box-shadow: 0px 0px 20px #0000004d; background-color: #f9f9f9; z-index: 1; padding: 25px; border-radius: 8px;}
#services-det .content-a h4{margin-bottom: 25px;}
#services-det .content-a .category-box li{font-size: 15px; margin-bottom: 15px;}
#services-det .iner .imgs img{border-radius: 10px; width: 100%;}
#services-det .iner h4{margin: 20px 0px;}
#services-det .iner .text{text-align: justify;}