body {font-family:"Inter", sans-serif; font-optical-sizing:auto; font-size:14px;}
.navbar {width:100%;padding: 0 20px;}
.hero {background:#F9F9F9; padding-top:100px; display:flex; align-items:center; position:relative; overflow:hidden;}
.hero h1 {font-weight:800; font-size:48px;}
.btn-outline {border:2px solid #a83292; padding:10px 25px; border-radius:50px; font-weight:600; color:#a83292 !important;}
.btn-outline:hover, .btn-light:hover {background-color:#A33995; color:#fff !important;}
.hero-img {max-width:100%;}
.pattern-hero {width:100%; background:url(../images/pattern.svg) no-repeat; height:100%; position:absolute; top:0; background-size:65%; background-position:right;}
.pattern-2 {width:415px; background:url(../images/pattern-2.png) no-repeat; height:461px; position:absolute; bottom:-160px; background-position:right; background-size:100%; z-index:-1;}
.shadow-bg-orange {width:300px; position:absolute; height:300px; display:block; filter:blur(130px); z-index:0; border-radius:100%; background-color:#E0A94F; right:0; top:0; opacity:0.8;}
.shadow-bg-pink {width:400px; position:absolute; height:400px; display:block; filter:blur(170px); z-index:0; border-radius:100%; background-color:#A33995; left:-260px; bottom:0; opacity:0.6;}
.nav-item {margin:0 10px;}
.nav-link {font-weight:600; position:relative;}
.nav-link:hover {text-decoration:none;}
a.nav-link:before, a.nav-link:after {content:''; position:absolute; width:0%; height:2px; bottom:-2px; background:#A33995;}
a.nav-link:before {left:0;}
a.nav-link:after {right:0; background:#A33995; transition:width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);}
a.nav-link:hover:before {background:#A33995; width:100%; transition:width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);}
a.nav-link:hover:after {background:transparent; width:100%; transition:0s;}
.nav-contact-num {position:absolute; top:10px; font-weight:600;}
.btn-primary {background-image:linear-gradient(to right, #a83292 0%, #f39c12 51%, #a83292 100%); background-size:200% auto; background-position:left top; border-color:transparent;}
.btn-primary:hover {background-position:right bottom; border-color:transparent;}
.btn {display:inline-flex; justify-content:center; align-items:center; text-align:center; font-size:16px; padding:10px 25px; border-radius:50px; font-weight:600; color:#fff; text-decoration:none; transition:all 0.35s; box-sizing:border-box;}
.text-primary {color:#A33995 !important;}
.section-heading h2 {color:#281B26;}
h5 {color:#322C31; font-size:18px;}
.offer-icon img {max-width:40px;}
.offer-icon {margin-right:12px;}
.gallery .container-fluid {display:grid; grid-template-columns:repeat(5, 1fr); grid-gap:1rem; justify-content:center; align-items:center;}
.gallery .card {color:#252a32; border-radius:12px; background:#ffffff; overflow:hidden;}
.gallery .card-image {position:relative; display:block; width:100%; padding-top:70%; background:#ffffff;}
.gallery .card-image img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.custom-round {border-radius:0 120px 0 0;}
.working-hours {background-color:#f8d7a8; max-width:400px; font-size:16px; color:#000; line-height:1.6;}
.working-hours h6 {font-size:16px;}
.appointment-box {background:#f8d7a8; max-width:420px; position:absolute; bottom:-60px; right:20px; border-radius:10px 60px;}
.get-appointment {width:75%;}
.pattern-dots {background:url(../images/dots.svg) no-repeat; position:absolute; content:''; width:160px; height:180px; top:100px; right:50px; background-size:100%;}
.treatment-block ul {list-style:none; margin:0; padding:0;}
.treatment-block ul li span {background:#FAF4E9; padding:10px 20px; display:inline-block; border-radius:10px; font-weight:600;}
.treatment-block ul li {margin-bottom:10px;}
.cta-section {background:linear-gradient(90deg, #b83395, #e5a745); padding:60px 0 60px 0;}
.cta-section h2 {color:#fff;}
.cta-section p {color:#f0f0f0;}
.cta-section a {text-decoration:none; color:#fff;}
.nav-contact-num a{color:#322C31 !important;text-decoration: none;}
.branch-section {margin-top:-80px;}
.branch-section .container {width:880px;}
.branch-section ul {padding-left:16px;}
.contact-mobile {display:none;}
.fixed-header {
    background-color: #fff;
    transition: all 0.5s;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
    height: 95px;
}
.fixed-header  .navbar-brand img{height: 80px !important;transition: all 0.5s;}

html {
  scroll-padding-top: 110px;
}
  .other-branch {
    background: #E5F9F4;
     
    border-bottom: 1px solid #c6c6c6;
  }
.shadow-bg-yellow-left{width: 240px;
    position: absolute;
    height: 240px;
    display: block;
    filter: blur(80px);
    z-index: 0;
    border-radius: 100%;
    background-color: #EBFFD3;
    left: 0;
    top:50px;
    opacity: 1;}
    .shadow-bg-yellow-right{width: 240px;
    position: absolute;
    height: 240px;
    display: block;
    filter: blur(80px);
    z-index: 0;
    border-radius: 100%;
    background-color: #EBFFD3;
    right: 0;
    bottom:0px;
    opacity: 1;}
    .direction-map img{max-width: 100%;}
.fixed-header .navbar-collapse {margin-top: 30px;}
.drname {
    background: linear-gradient(90deg, #53E0AF, #E5F9F4);
    padding: 10px 90px 10px 20px;
    font-size: 23px;
    color: #40564E;
    display: inline-block;
}
.copyright{border-top:1px solid #cfcfcf;padding-top: 20px;}
 ul.list-tickstyled{list-style: none;padding: 0;}
.list-tickstyled li{    background: url(https://img.icons8.com/ios-glyphs/30/26e07f/checkmark.png) no-repeat left center;
    background-size: 18px;
    padding-left: 30px;
    margin-bottom:5px;
    color: #555;
    font-size: 16px;}
.drimage{    max-width: 370px; }
.other-branch .w-md-60{width: 60%;}
@media only screen and (max-width:1400px) {.other-branch .w-md-60 {
    width: 100%;
}}
@media only screen and (max-width:1024px) {
.get-appointment {width:85%;}
.pattern-hero {background-size:75%;}
.branch-section .container {width:100%;}
.appointment-box {bottom:-70px}
.container, .container-md, .container-sm {max-width:90%;}
.hero h1 {font-weight:800; font-size:38px;}
.other-branch .w-md-60{width: 100%;}
.navbar-brand img{height: 80px;}
.nav-item {
    margin: 0 6px;
}
nav .btn{font-size: 13px;
    padding:5px 20px;}
    .nav-contact-num span {
    font-size: 12px;
}
}

@media only screen and (max-width:900px) {
.hero h1 {font-weight:800; font-size:28px;}
.btn {font-size:13px; padding:10px 15px;}
}

@media only screen and (max-width:990px) {
.navbar-toggler{display: none;}
.hero {padding-top:90px;}
.hero h1 {font-size:28px;}
.navbar-collapse {background:rgba(255, 255, 255, 0.8); z-index:9; padding:20px; margin:-12px; backdrop-filter:blur(10px);}
.navbar-collapse .btn, .navbar-collapse .nav-contact-num {display:none !important;}
.navbar-toggler {background-color:#fff;}
.navbar-brand img {height:80px;}
.nav-contact-num {right:0px; top:24px;}
.contact-mobile .btn {margin-left:10px;}
.gallery .container-fluid {grid-template-columns:repeat(4, 1fr);}
.contact-mobile {display:block;}
.fixed-header .navbar-brand img {
    height: 60px !important;}
    .fixed-header{height: 75px;}
    .drimage {
    max-width: 300px;
}
}

@media only screen and (max-width:767px) {
.gallery .container-fluid {display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:1rem;}
.hero {padding-bottom:50px; padding-top:130px;}
.hero h1 {text-align:center; width:80%; margin:0 auto;}
.hero p {text-align:center; width:70%; margin:10px auto;}
.contact-mobile .btn{display: none;}
}

@media only screen and (max-width:767px) {
.gallery .container-fluid {grid-template-columns:repeat(2, 1fr);}
.appointment-box {bottom:0; position:relative; right:-10px; margin-top:-20px;}
.cta-section {margin-top:0 !important;}
.hero .hero-image {display:none;}
.hero h1 {width:100%;}
.hero {text-align:center;}
.section-heading {margin-bottom:20px !important;}
.pattern-dots {width:120px; height:150px; top:0; right:10px;}
.pattern-2 {bottom:-220px; width:90%;}
.navbar {padding: 0 10px;}
    .nav-contact-num {
        right: 10px;
        top: 20px;
    }
    .hero .btn-outline{display: none;}
   
      .direction-map{overflow: hidden;
    display: flex
;
    align-items: center;
    justify-content: center;}
    .direction-map img {
    width: 210%;
    margin: 0 auto;
    text-align: center;
}
}

@media only screen and (max-width:600px) {

.contact-mobile .btn {display: none;}
.navbar-toggler {margin-top:17px;}
.btn {padding:5px 15px;}
.order-sm-2 {
        order: 2 !important;
    }
  
}