*{ box-sizing:border-box;  font-family: 'Roboto', sans-serif; padding:0px; margin:0px; list-style-type:none; color:#444; text-decoration: none; }
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
body{background:#FFF; }
p{color: #666;}
a{ color:#000; }
header{  width: 100%; position: fixed; z-index: 555; padding: 5px 0px;  }

.bg{ background: #FFF;  position: fixed;   box-shadow: 0px 0px 8px 1px #dbdbdb; }
.bg .logo{ max-width:122px; }
.bg nav ul {padding-top: 30px;}
.bg nav ul li a{color: #444;}

.bg .bookapp{margin-top: 20px;}
.container{ margin: 0px auto; padding: 0px; display: table; max-width: 1280px; width: 100%; }
.logo{  float: left;  max-width: 170px; width: 100%; }
.logo img{ width: 100%; float:left; }
nav{  float:right;}
nav ul{ margin: 0px; float: left; padding:50px 0px 0px 0px; width:auto; }
nav ul li{list-style-type:none; float:left; padding:0px 20px; text-transform: uppercase; position: relative;}
nav ul li a{text-decoration:none; color:#582a08; font-size:16px; float: left;}
nav ul li a:hover{ color:#582a08;  }
.bg nav ul li a:hover{color: #592907;}

.bg nav ul li:hover > ul{ padding: 0px; }
.bg nav ul li ul li a:hover{ color: #FFF; }

.bookapp{background-color: #cb8a58; border-radius: 5px; padding: 10px 20px; color: #FFF; font-weight: 800; font-size: 18px; float: right; margin:35px 20px 0px 20px;  }
.bookapp a{ color: #FFF; }
.bookapp a:before{ content: ''; background: url(images/booking.svg) center left no-repeat; position: relative; left: -10px; float: left; width: 22px; height: 22px; }



.swiper{ position: relative; }
.swiper-slide img{ width: 100%; display: block;  }
.swiper-slide .swiperarea {position: absolute;top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center; width: 100%;  }
.swiper-slide .container{max-width: 1280px; width: 100%;  margin: 0px auto; display: table; }
.swiper-slide .container strong{ font-size: 70px; text-transform: uppercase; line-height: 70px;  font-weight: 900; width: 100%; float: left; color: #582a08; width: 65%; }
.swiper-slide .container p{ font-size: 20px; width: 50%; float: left; line-height: 28px; color: #582a08; }
.swiper-slide .container p a{display: table; background: #FFF; color: #000; border-radius: 5px; transition: all 0.3s ease-in-out; font-size: 14px; padding: 5px 15px; margin: 10px 0px;}
.swiper-slide .container p a:hover{ color: #FFF; background: #592907; transition: all 0.3s ease-in; }

.area{ width: 100%; max-width: 1280px; margin: 0px auto; display: table; padding: 20px;  }
.about{ margin: 0px; width: 100%; margin: 0px auto; float: left;  border-radius: 5px; padding:10px 10px; text-align: center;}
.about h1, .about h2{ font-size: 43px; }

.about p{ line-height: 28px; padding: 20px 0px; }
.about h1 span, .about h2 span{ color: #592907; font-size:25px; display: table; width: 100%; text-align: center; }
.about strong{ width: 33.33%;  float: left; padding: 10px 0px; }

#treatment{ width: 100%; max-width: 1280px; margin: 0px auto; display: table; }
#treatment ul{width: 100%; float: left; margin-top: -80px; margin-bottom: 60px; position: relative; z-index: 222;}
#treatment ul li{ width: 23%; margin:0% 1%; float: left; border-radius:10px; padding:10px 10px 20px 10px; overflow: hidden; background: #FFF; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; font-size:23px; text-align: center; font-weight: 400;  }
#treatment ul li img{ width: 100%; margin-bottom:10px;transition: all 0.3s ease-in-out; }
#treatment ul li:hover img{ opacity: .80; transition: all 0.3s ease-in;  }
#treatment ul li a:hover {color: #592907;}


.specialist{ width:100%; float: right; padding: 80px 0px; background: linear-gradient(90deg, 
    rgb(208, 164, 109) 0%, 
    rgb(227, 197, 167) 50%, 
    rgb(217, 184, 149) 100%);
  }
.specialist h2{ font-size: 43px; text-align: center; padding: 30px 0px 30px 0px; color: #582d0b; max-width: 1200px; margin: 0px auto; display: table; }
.mySwipers{ background:url(images/skincare-logo-white.png) center left no-repeat; padding: 20px 0px; }
.mySwipers strong{ font-size: 20px; text-align: center; width: 100%; float: left; padding: 20px 0px 0px 0px; }
.mySwipers p{ font-size: 16px; line-height: 22px; padding: 10px 0px; float: left; min-height:90px; text-align: center; }
.mySwipers .swiper-slide{ padding: 15px; background: #FFF; border-radius: 10px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.mySwipers .swiper-slide img{  margin: 0px auto; display: table ; float: none; transition: all 0.3s ease-in-out;}
.mySwipers .swiper-slide:hover img{ opacity: 0.80; transition: all 0.3s ease-in; }
.mySwipers .swiper-slide:hover strong{ color: #592907; }
.mySwipers .swiper-slide-active{background: #f8f8f8; }
.specialist ul li img{ width: 100%; float: left; }

#choose{ width: 100%; float: left; padding: 80px 0px; background: #FFF;  }
#choose .container{ background: url(images/img-bg.png) top center no-repeat; }
.choose-left{ width: 30%; float: left; padding: 20px; background: #FFF; border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; min-height: 570px;}
.choose-left img{ float: left; width:100%; margin-bottom: 20px; transition: all 0.3s ease-in-out; } 
.choose-left:hover img{ opacity: 0.80; transition: all 0.3s ease-in; }

.choose-left h3{font-size: 28px; float: left; color: #333; font-weight: 400;}
.choose-left p{ color:#333; padding: 20px 0px; float: left; line-height: 28px;}
.choose-left span{ width: 100%; float: left; padding:10px 0px; font-size: 24px; font-weight: 600; color: #592907; }
.choose-right{ width: 70%; float:right; padding:0px; }
.choose-right ul{width: 100%; float: left;}
.choose-right ul li{ width: 47%; float: left; margin:0% 0% 3% 3%; background:#FFF; padding: 25px; border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; min-height: 270px;}
.choose-right ul li strong{ font-size:20px; font-weight: 500; padding: 10px 0px 10px 0px; float: left; width: 100%; }
.choose-right ul li:hover strong{ color: #592907; }
.choose-right ul li p{ line-height: 24px; }
.choose-right img{height:100px; width:100px;}
#skindoctor{ width: 100%; float: left; padding: 80px 0px;  background:#f8f8f8;}
#skindoctor .container{ max-width:1000px; }
.doctor-left{ width: 30%; float:left; border:5px solid #592907; border-radius: 10px; padding: 25px; }
.doctor-left:hover {border: 5px solid #513e3e}
.doctor-left img{  display: table; margin: 0px auto;border: 5px solid #f8f8f8; width:300px;
border-radius: 10px; }
.doctor-left strong{ text-align: center; font-size: 22px; width: 100%; padding: 10px 0px 0px 0px; float: left; }
.doctor-right{ width: 55%; float: right; background: url(images/img-bg.png) top center no-repeat; padding: 80px 25px;}
.doctor-right h4 {font-size: 34px; float: left; width: 100%;}
.doctor-right h4 span{ color:#592907; }
.doctor-right p{ width: 100%; float: left; padding: 20px 0px; line-height: 28px; }
.doctor-right a{ background:#cb8a58; display: table; border-radius: 5px; padding: 15px 20px; color: #FFF; transition: all 0.3s ease-in-out;  }
.doctor-right a:hover{background:#513e3e; transition: all 0.3s ease-in;  }

#result{ width: 100%; float: left; padding: 80px 0px; background: #FFF; display: none; }
#result strong small{ width: 100%;   display: block; margin-bottom: 10px; font-size:16px; font-weight:400; color: #333; }
#result strong { font-size:34px; text-align:center ; float:left; width: 100%; margin-bottom: 20px; color:#592907; }
#result img{ width: 100%; max-width: 800px; margin: 0px auto; display: table;}

.recommend{ width: 100%; float: left; padding: 80px 0px 0px 0px; background: url(images/img-bg.png) top center no-repeat; }
.recommend .container{ max-width: 1200px; }

.recommend-left{width: 45%; float: left; padding: 25px 0px; }
.recommend-left small{ font-size: 12px; text-transform: uppercase; text-decoration: underline; display: block;  }
.recommend-left strong{ font-size: 24px; float: left; width: 100%; color:#592907 ; width: 100%;padding:25px 0px;}
.recommend-left p{ float: left; width: 100%; margin-bottom: 10px; line-height: 28px; }
.recommend-left p span{ color:#592907 ;  }


.recommend-right{width: 55%; float: right; position: relative; overflow: hidden;}
.recommend-right img{ max-width: 340px; width: 100%; margin: 0px auto; display: table; }
.recommend-right span{ position: absolute;
bottom: -61px;
width: 380px; right: 25%;
height: 380px; z-index: -1;
border-radius: 50%;
background-color: #a1cdce; }

#offer{ width: 100%; float: left; padding: 80px 0px; }
#offer h5, #offer span{width: 100%; float: left; text-align: center; font-size: 34px;}
#offer span{font-size: 16px;  padding: 10px 0px;} 
.offer1{width: 23%; float: left; margin: 2% -0.5% 1% 1.5%; border-radius: 10px; border: 1px solid #999; padding: 20px 25px; min-height: 410px; position: relative; }
.offer1 h6{ float: left; font-size: 22px; font-weight: 800; color:#592907 ; padding-bottom: 10px; }
.offer1 strong, .offer1 p{ float: left; width: 100%; }
.offer1 p{ font-size: 14px; }
.offer1 ul{ float:left; width: 100%; padding: 20px 0px;  }
.offer1 ul li{padding: 10px 0px; color: #666;}

.offer1 ul li:before{ content: ''; background: url(images/arrow.svg) center left no-repeat; width: 18px; height: 18px; float: left; margin-bottom: 10px; }
.offer1 a{transition: all 0.3s ease-in-out; width: 90%; float: left; background:#cb8a58; padding:15px 20px; text-align: center; border-radius: 5px; color: #FFF; font-weight: 800; font-size: 16px; position: absolute; 
    bottom: 20px;
    left:13px;
 }
.offer1:hover a{ background: #592907; transition: all 0.3s ease-in; }
footer{ background:url(images/bg.svg) bottom center no-repeat; background-size: 100%; width: 100%; padding: 10px 0px; float: left;}
.box{width: 25%; float: left; margin: 1% 0%; padding: 25px 30px; color:#C6C6C6; font-size: 14px; line-height: 24px;}
.box strong{ font-size:25px; float: left; color: #FFF; width: 100%; padding: 20px 0px;  }
.box ul {float: left;}
.box ul li{ width: 100%; float: left; }
.box ul li a{color: #C6C6C6; transition: all 0.3s ease-in;}
.box ul li a:hover{color: #FFF; transition: all 0.3s ease-in;}
.box span{color: #FFF; font-weight: 700; width: 25px; float: left;}
.box a{ color:  #C6C6C6;; }
.box address{ color: #C6C6C6; font-style: inherit; }
.box address:hover{ color: #FFF; }
.box address a{ color: #C6C6C6;  }
.social{float: left; width: 100%;}
.social ul{ width: 100%; float: left; padding: 10px 0px; }
.social ul li{float: left; margin-right: 5px; max-width: 30px; width: 100%;}
.social ul li img{ width: 100%; float: left;  }
.copyright{ width: 100%; float: left; text-align: center; padding: 10px; color: #FFF; font-weight: 400; font-size: 12px; }
.toggle, [id^="drop"] {
  display: none;}

.copyright a{color: #FFF; opacity: 0.8;}

.innerheading h1{ font-size: 43px; color: #000; text-transform: uppercase; margin: 0px auto; max-width: 380px; text-align: center; color: #572b0a; padding: 180px 0px 0px 0px;  width: 100%; }


.about-left{ float: left; width: 40%; margin: 0px; border: 5px solid #592907; padding: 20px; border-radius: 10px;}
#aboutus .aboutlist{ width: 100%; float: left; padding: 10px 0px; }
#aboutus .aboutlist li{ width: 100%; float: left; text-align: left; padding: 5px 0px; }
#aboutus .aboutlist li::before{  content: '';
  background: url(images/arrow.svg) center left no-repeat;
  width: 18px;
  height: 18px;
  float: left;}

.breadcrum, .breadcrum ul { width: 100%; float: left; text-align: center; }
.breadcrum ul li{  display: inline; padding-right:0px; text-transform: uppercase; color: #FFF; font-size: 13px; }
.breadcrum ul li a{ color: #572b0a; }
.breadcrum ul li span{ color: #FFF; padding:0px 10px; }

.about-right h2{ font-size: 30px; padding-bottom: 10px;}

.about-right{ margin: 0px; padding: 0px 0px 0px 0px; float: right; width: 56%; }
.about-left img{ width: 100%;}
.about-right p{ float: left;  margin: 0px; padding: 10px 0px 15px 0px;  font-size: 16px; line-height: 24px;}
.about-right strong{float: left; padding: 25px 0px 15px 0px; font-size: 20px;}
.about-right li{ margin: 0px; padding: 10px 0px 0px 0px; } 
#aboutus{ width: 100% ; float: left; padding: 80px 0px; background: url(images/img-bg.png) top center no-repeat;}
#aboutus ul{ width: 100%; float: left;  padding-top: 40px;}
#aboutus ul li{ width: 48%; text-align: center; float: left; padding: 0px 30px; }
#aboutus ul li:nth-child(2){ float: right; }
#aboutus ul li strong{ font-size: 25px; width: 100%; float: left; padding-bottom: 10px; text-transform: uppercase; }
#aboutus ul li p{ line-height: 24px; }


#proof{ width: 100%; float: left; padding: 80px 0px;}
.result-left{ float: left; width: 100%;  }
.result-left ul{ width: 100%; }
.result-left ul li{ padding:5px; float: left; width: 30.33%; margin-right:3%; margin-bottom: 3%;  border-radius: 10px;
padding: 10px 10px 10px 10px;
overflow: hidden;
background: #FFF;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
.result-left ul li img{ width: 100%;  max-height:242px;}
.result-right{ margin: 0px; float: right; width:25%; margin: 0px; background-color: #FFF;  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	display: table; border-radius: 10px; padding: 25px;}
.result-right strong{ font-size: 18px; font-weight: 800; text-align: center;  padding:5px 0px; text-align: left; background: #513e3e;  text-transform: uppercase; color: #FFF; border-radius: 5px;
	font-weight: bold;  width: 100%; float: left; margin-bottom: 20px;}
.result-right ul { float: left;  width: 100%; padding-bottom: 30px;}
.result-right ul li{ margin: 0px; padding:15px 0px; border-bottom: 1px solid #dddddd; font-size: 15px; float: left; width: 100%;  }
.result-right ul li::before{  content: '';
  background: url(images/arrow.svg) center left no-repeat;
  width: 18px;
  height: 18px;
  float: left;}
.result-right ul li:nth-last-child(1){ border: none; }
.result-right ul li a{color:#727272; }
.result-right ul li a:hover{ color: #592907; }
.result-right form { width: 100%; float: left; background: #513e3e; border-radius: 5px;}
.result-right form{ margin-bottom: 0px; padding: 15px; }
.result-right form strong{ margin-bottom: 0px; }
.result-right form input, .result-right form select { width: 100%;  margin: 5px 0px; padding: 12px; border: none; border-radius: 5px; }
.result-right form input[type=submit]{ background: #592907; color: #FFF; font-size: 18px; font-weight: 800; }

.skin-care{ margin: 0px; padding: 0px; width: 100%;  max-width: 1280px;  }
.skin-care ul{}
.skin-care ul li{ float: left; }

 #contactus{ width: 100% ; float: left; padding: 80px 0px;}
.contact-left{width: 50%; float: left; margin-top: 45px;   background: url(images/img-bg.png) top center no-repeat;}
.contact-left h2{ font-size:35px; stroke-dasharray: }
.contact-left p{ margin: 0px; padding: 10px 130px 15px 0px;  }
.contact-left strong{ margin: 0px; float: left; width: 100%; font-size: 25px; 
		 padding: 15px 0px 10px 0px;}
.contact-left a{ margin: 0px; padding: 10px 10px 10px 0px;  width: auto; display: table; opacity: 0.7; 
	line-height: 20px; transition: all 0.3s ease-in-out; }
  .contact-left a:hover{ opacity: 1; transition: all 0.3s ease-in; }
.contact-left a span{ width:30px; float: left; padding-right: 10px; }
.contact-left ul li {  float: left; border-radius: 50%; height: 35px; width: 35px;  margin-right:5px ; background:#cb8a58; opacity: 1; transition: all 0.3s ease-in-out;}
.contact-left ul li:hover{ opacity: 0.8; transition: all 0.3s ease-in; }
.contact-left ul li a{padding: 0px;  width:100%; float: left; padding: 10px;  }
.contact-left ul li a img{ width: 100%; }

.contact-right{ width: 50%; float: right; margin-top: 45px;}
.contact-right form{ width:100%; float:left; padding:25px; box-sizing:border-box; background: #FFF; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius: 20px; }
.contact-right form input, .contact-right form select, .contact-right form textarea{ float:left; margin:5px 0px; text-transform:capitalize; font-size:15px; padding:20px 15px; width:100%;  border-radius: 10px;
 border-radius: 3px; color:#666;  box-sizing:border-box; border: 1px solid #DDD;}
 .contact-right form input[type=submit]{ background:#cb8a58; font-size: 25px; color: #FFF; font-weight: 800;  border-radius: 5px; border:none; cursor: pointer; }
 
#contact-treatment{}
.name{ float: left; margin: 0px; }


.service-area{ padding-bottom: 70px; }
.services-left{width: 50%; float:left;  text-align: left;}
.services-left p{ line-height: 24px; padding-bottom: 40px;  text-align: justify;  }
.services-left h3{ font-size: 34px; margin-bottom: 20px; width: 100%; text-align: left; }
.services-left strong{ float: left; width: 100%; font-size: 20px; }
.services-left ul{ width: 100%; padding: 10px 0px 30px 0px; float: left; }
.services-left ul li{ width: 100%; float: left ; text-align: left; padding: 10px 0px 10px 0px; }
.services-left ul li::before {
  content: '';
  background: url(images/arrow.svg) center left no-repeat;
  width: 18px;
  height: 18px;
  float: left;
}

.text-contain{ width:100%; float: left; padding: 80px 0px 0px 0px; }
.text-contain h3{ font-size: 34px; font-weight: 800;  text-align: center; width: 100%; float: left;}
.text-contain p{ text-align: center; width: 100%; padding-top: 20px; line-height: 24px; float: left; }
.text-contain b{display: table; margin: 0px auto; padding: 20px;}
.text-contain .bookapp{margin: 0px auto; float: none; display: table;}

.whatsapp_btn{position:fixed;bottom:20px;right:10px;width:50px;height:50px;z-index:100}
.whatsapp_btn .icon_logo{position:relative;z-index:150;padding:5px}
.whatsapp_btn .icon_logo>a>img{width:100%}
.whatsapp_btn .circle_waves{border-radius:50%;background-color:#3cc04e;width:50px;height:50px;position:absolute;opacity:0;bottom:1px;left:0;z-index:120;animation:waves 4s infinite cubic-bezier(.36,.11,.89,.32)}
@keyframes waves{from{transform:scale(.55,.55);opacity:.6}to{transform:scale(1.8,1.8);opacity:0}}


.services-left .bookapp{ float: left; margin: 0px; }
.service-right{ width: 45%; float: right; border: 5px solid #592907; padding: 20px; border-radius: 10px;}
.service-right img{width: 100%;}
iframe{ display: block; width: 100%; }

nav ul li ul {
  display: none;
  position: absolute;
  top: 20px; padding: 0px;
  background-color: #f6f6f6;
}

nav ul li:hover > ul { display: inherit; }

nav ul li ul li {
  width: 100%;
  float: left; padding: 10px;
  display: list-item;
  position: relative;
}
nav ul li ul li:hover{ background: #592907; }
nav ul li ul li:hover a{ color: #FFF; }

nav ul li ul li a{ color: #444;  font-size: 12px;}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}



li > a:only-child:after { content: ''; }


a[href*="elfsight.com/google-reviews-widget"] {
    display: none !important;
}
a[href*="elfsight.com"] {
    display: none !important;
}
/*@media only screen and (max-width: 1280px)*/
/*{*/
/*.swiper-slide .container, .container{max-width: 1200px;}*/

/*}*/

@media only screen and (max-width: 1180px){



.container, .specialist h2{ padding-left: 15px;  padding-right: 15px;}
header{ position: static; background: #FFF;}	

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

.menuico span {
  width: 34px;
  height: 3px;
  cursor: pointer;
  background-color: #592907;
  margin: 5px 0;
  padding: 0px;
  display: block;}

	nav {
		margin: 0;
		float: none;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		float: right; display: table; margin-top: 28px;

		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
		text-decoration:none;
		border:none;
	}



	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block; 
	}

	nav ul{ padding: 0px;
		position: absolute; left: 0px;
		top: 95px; z-index: 999999;
		width: 100%; background: #513e3e; }

nav ul li a:hover{color: #FFF;  }

nav ul li ul{ float: none;
position: static;
color: #ffffff; }

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		padding: 0px;
		}

nav ul li a:before{ content:''; width: 18px; height: 18px; float: left; background: url( images/menu-arrow.svg) top left no-repeat; }

	nav ul li a{padding: 15px 20px;}
	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:5px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  .menu .sub{ background:#118b95; float: left; }
  .sub li a{ color: #FFF; }

.menu .toggle{ margin-top: 0px; width: 100%; float: left; padding: 15px 20px; cursor: pointer; }
.menu .toggle:before{content:''; width: 18px; height: 18px; float: left; background: url( images/menu-arrow.svg) top left no-repeat;}
  nav ul li ul li a{ font-size: 14px; }

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}



	.bookapp{background-color: #513e3e;}
.bg nav ul li {margin: 0px;}
.logo{ max-width: 95px; }
nav >.toggle{ margin-top: 15px; }
}


@media only screen and (max-width: 1400px){ 
.swiper-slide .inner-img{ width: auto; min-height: 320px;  }

}


@media only screen and (max-width: 1190px){

#treatment{ margin-top: 40px; }
#treatment ul{ margin-top: 0px; }
#treatment ul li{ width: 48%; margin: 1%; }
.bookapp, .bg .bookapp{ margin-top: 23px; }
.bg nav ul{ padding-top:0px ; }
.bg nav ul{ top:95px }
.bg nav ul li a{ color: #FFF; }

}

@media only screen and (max-width: 990px){

.choose-left, .choose-right{width: 100%; }
.choose-right ul li{ margin-bottom: 20px; width: 49%; margin-left: 0px; }
.choose-right ul{ margin-top: 20px; }
.choose-right ul li:nth-child(even){ float: right;  }
.recommend-right{ width: 40%; }
.recommend-left{ width: 60%; }
.recommend-right span{ height: 320px; width: 340px; right: 5%; }
#choose, .specialist, #offer, #skindoctor, .recommend{ padding: 40px 0px; }
.specialist h2{ font-size: 34px; }
.mySwipers .swiper-slide{ padding: 10px; }
.innerheading h1{ padding: 0px 0px 10px 0px; }
.about-left{ width: 100%; margin-bottom: 40px; }
.about-right{ width: 100%; text-align: center;  }
#aboutus .aboutlist li{ text-align: center; }
#aboutus .aboutlist li::before { display: inline-block; float: none; }
#aboutus ul li{ width: 100%; padding: 40px 0px; }

}


@media only screen and (max-width:800px){
.swiper-slide .swiperarea{ background: rgba(0, 0, 0, 0.35); }
.swiper-slide .container strong { text-align: center; max-width: 380px; float: none; display: table; margin: 0px auto; width: 100%; font-size: 34px; line-height: 34px; }
.swiper-slide .container p{ margin: 0px auto; padding: 5px 0px; display: table; text-align: center; max-width: 420px; width: 100%; float: none; font-weight: 400; font-size: 16px;}
.swiper-slide .container p a{ float:none; float: none; margin: 0px auto; display: table; margin-top:10px; }
.offer1{ width: 97%; }
.doctor-left {width: 45%;}
.doctor-left img{ width: 100%; }
.recommend-left{ width: 100%; text-align: center; }
.recommend-right{ display: none; }
.box{ width: 100%;  text-align: center; }
.box:nth-child(1){display: none;}
.box span{ display:inline-block; float: none; }
.social ul{ display: table; margin: 0px auto; float: none; float: none; max-width: 106px; }
footer{ background-size: cover; }
.doctor-right{ padding: 40px 25px; }
.choose-left h3, .choose-left p{ text-align: center; }
#treatment ul li{ width: 48%; margin: 2% 0%; }
#treatment ul li:nth-child(even){ float: right; }
.logo{ max-width: 95px; }
.services-left , .services-left  h3{width: 100%; text-align: center;}
.services-left ul li{ text-align: center; }
.services-left ul li::before {float: none; display: inline-block;}
.services-left p{ text-align: center; }
.services-left .bookapp{ float: none; margin: 0px auto; }
.service-right {width: 100%; max-width: 480px; margin: 0px auto;  margin-bottom: 40px; float: none; display: table;}
.contact-left, .contact-right{ width: 100%; }
.contact-right{ margin-top: 0px; }
.contact-left{ display: none; }
}


@media only screen and (max-width:680px){
	#treatment{ margin-top: 20px; }
.choose-right ul li{width: 100%; text-align: center;}
.box{ margin: 0px; padding: 10px 0px;	}


}


@media only screen and (max-width:580px){
	.mySwipers{ padding: 0px; }
.mySwipers .swiper-slide img{ border-radius: 0px; }
.swiper-slide img{ max-height: inherit; width: auto; float: right; }	
.bookapp{display: none;}
#treatment ul li{ width: 100%; }
.mySwipers .swiper-slide img{width: 100%;}
#treatment ul{ margin: 0px auto; display: table; max-width: 480px; float: none;}
.mySwipers .swiper-slide{ padding: 10px;}
.doctor-left{ width: 100%; max-width: 280px; margin: 0px auto; display: table; float: none;}
.doctor-right{ width: 100%; text-align: center; }
.doctor-right a{ float: none; margin: 0px auto; }
.doctor-right{ padding-bottom: 0px; }
}

@media only screen and (max-width:520px){
#specialist{padding-left:15px; padding-right: 15px;}
  
}




.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}
  :root{
    --bg: #f5f7f8;
    --accent: #592907;
    --muted: #6b7280;
    --card-radius: 18px;
    --panel-collapsed: 78px;
    --panel-expanded: 172px;
    --shadow: 0 14px 30px rgba(11,27,50,0.07);
    --gap: 28px;
    --max-width:1200px;
  }
  .wrap{
    max-width:var(--max-width);
    margin:40px auto;
    padding:0 20px 60px;
  }

  .heading{ color:var(--accent); font-size:32px; font-weight:800; margin-bottom:6px; }
  .sub{ color:var(--muted); margin-bottom:22px; }

  .grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--gap);
  }
  @media (max-width:1000px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

  /* card + image container */
  .card{
    position:relative;
    cursor:pointer;
    outline:none;
  }
  .image-wrap{
    border-radius:var(--card-radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    position:relative;
    transition: transform .35s ease;
    background:#ddd;
  }
  .image-wrap img{
    display:block;
    width:100%;
    height:360px;
    object-fit:cover;
    transition: transform .5s ease;
  }

  /* Info panel lives INSIDE the image-wrap so visually it's attached */
  .panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:#fff;
    /* make corners same as image bottom corners */
    border-radius: 0 0 calc(var(--card-radius) - 4px) calc(var(--card-radius) - 4px);
    box-shadow: 0 -6px 18px rgba(11,27,50,0.06);
    padding:18px 22px;
    height:var(--panel-collapsed);   /* collapsed height (only title visible) */
    transform: translateY(0);
    transition: height .38s cubic-bezier(.2,.9,.25,1), box-shadow .25s ease, transform .38s cubic-bezier(.2,.9,.25,1);
    overflow: hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  .panel .title{
    font-size:22px; font-weight:800; color:var(--accent); margin:0 0 10px 0;
  }
  .panel .divider{
    height:1px; background:rgba(0,0,0,0.08); margin-bottom:10px; opacity:0.95;
  }
  .panel .desc{
    color:var(--muted); font-size:14px; line-height:1.6; opacity:0; transform: translateY(6px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.25,1);
  }

  /* Hover / focus / active: expand panel and reveal description, zoom image a bit */
  .card:hover .image-wrap,
  .card.is-active .image-wrap,
  .card:focus-within .image-wrap {
    transform: translateY(-6px);
  }
  .card:hover img,
  .card.is-active img,
  .card:focus-within img {
    transform: scale(1.04);
  }

  .card:hover .panel,
  .card.is-active .panel,
  .card:focus-within .panel {
    height:var(--panel-expanded);
    box-shadow: 0 -12px 30px rgba(11,27,50,0.09);
    transform: translateY(0);
  }
  .card:hover .panel .desc,
  .card.is-active .panel .desc,
  .card:focus-within .panel .desc {
    opacity:1;
    transform: translateY(0);
  }

  /* make sure panel title stays visible and anchored at bottom when collapsed */
  .panel .title-row{
    display:flex;
    align-items:center;
    gap:12px;
  }

  /* small index bubble */
  .index{
    position:absolute;
    left:14px;
    top:14px;
    z-index:4;
    background:rgba(255,255,255,0.95);
    padding:8px 12px;
    border-radius:999px;
    font-weight:800;
    color:var(--accent);
    box-shadow:0 8px 18px rgba(16,24,40,0.06);
    font-size:14px;
  }

  /* Responsive tweaks */
  @media (max-width:1000px){ .image-wrap img{ height:300px; } }
  @media (max-width:640px){
    .image-wrap img{ height:220px; }
    .panel{ padding:14px; --panel-collapsed:72px; --panel-expanded:150px; }
    .panel .title{ font-size:18px; }
  }
  


#faq{
  padding-bottom: 80px;
}

.faq-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #572b0a;
    padding-top: 80px;
}

.faq-title span {
    font-size: 30px;
}

.faq-subtitle {
    color: #666;
    margin-bottom: 25px;
}

.faq-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.07);
    padding: 0 15px ;
}

.faq-item {
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    padding: 18px 10px;
    background: none;
    border: none;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #572b0a;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    padding: 0 10px;
}

.faq-answer p {
    padding: 10px 0 20px;
    color: #444;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.icon {
    font-size: 22px;
    transition: 0.3s ease;
}

.faq-item.active .icon {
    transform: rotate(180deg);
    content: "−";
}

/* Responsive Design */
@media (max-width: 600px) {
    .faq-title {
        font-size: 26px;
    }
    .faq-question {
        font-size: 15px;
    }
}
.WidgetBackground__ContentContainer-sc a{
  display: none !important;
}
.ButtonBase__ButtonContainer-sc-597a44ae-3{
    background-color: #cb8a58 !important;
    
}
.ButtonBase__Ellipsis-sc-597a44ae-5{
    color: #fff !important;
}

@media (min-width: 1280px) {
  #treatment ul {
    margin-top: -49px !important;
  }
}
@media (max-width: 1280px) {
  .swiper-slide {
    height: 400px !important;
  }
  .swiper-slide img {
    height: 500px;
  }
  .innerheading h1 {
    padding: 100px 0px 0px 0px !important;
  }
    .swiper-slide .container{
        padding-top: 30px;
    }
   .bookapp {
     margin: 32px 20px 0px 20px !important;
   }
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
      }
}
@media (max-width: 767px) {

  .specialist {
    padding: 50px 0px;
  }

  .specialist h2 {
    font-size: 24px;
    line-height: 32px;
    padding: 15px 15px 20px;
  }

  .specialist .mySwipers {
    background: none;
    padding: 10px 0px;
  }

  .specialist .mySwipers .swiper-slide {
    padding: 12px;
  }

  .specialist .mySwipers .swiper-slide img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
  }

  .specialist .mySwipers strong {
    font-size: 18px;
    padding-top: 15px;
  }

  .specialist .mySwipers p {
    font-size: 14px;
    line-height: 20px;
    min-height: auto;
    padding: 8px 5px;
  }

  .specialist .swiper-button-next,
  .specialist .swiper-button-prev {
    display: none;
  }
}
@media (min-width: 1280px) {

  .specialist .mySwipers {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 10px;
  }

  .specialist .mySwipers .swiper-wrapper {
    align-items: stretch;
  }

  .specialist .mySwipers .swiper-slide {
    max-width: 240px;   /* IMPORTANT */
    padding: 15px;
  }

  .specialist .mySwipers .swiper-slide img {
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
  }

  .specialist .mySwipers strong {
    font-size: 18px;
  }

  .specialist .mySwipers p {
    font-size: 15px;
    line-height: 22px;
    min-height: 88px;
  }
}