@font-face {
	font-family: 'circe'; 
	src: url(../fonts/circe.ttf); 
}


* { margin:0; padding:0; box-sizing:border-box; outline:none; }
body { overflow-x:hidden; }
a {text-decoration:none; transition: .5s; }
input, button {border:none; box-shadow:none; transition:0.4s; font-family: 'circe';}
p, span, li, a, input {color: #3c3c3c;font-family: 'circe'; }
h1, h2, h3, h4 {font-family: 'circe'; color: #3c3c3c; font-weight:bold;}
li {list-style:none;}
button {cursor:pointer;}

h3 {font-size:35px; line-height:45px; padding:20px 0;}

.h2 {text-align:center; padding:30px 0px; font-size:40px; line-height:50px; }

.main_p {font-size:20px; line-height:30px; margin-bottom:25px;}
.center {text-align:center;}


.flex {display:flex; justify-content:space-between; flex-wrap:wrap;}
.wrapper {width:90%; margin:0 auto;}
.main_wrapper {max-width:80%; margin:0 auto; }


header { position:fixed; width:80%; top:0; left:10%; z-index:10; background:#fff; border-bottom:1px solid #eee;}
header .flex {align-items:center;padding:15px 5% 15px 3.5%; }
.logo {width:200px;}
.logo img {max-width:100%;}
.order {background:#60246a; padding:8px 20px; text-align:center;  border-radius:20px; font-size:18px; border: 2px solid #60246a;
box-shadow: 0.2em 0.2em 8px rgba(122,122,122,0.5); color:#fff; font-weight:normal; }
.order:hover { box-shadow:none; background:#fff; color:#60246a;}



.banner {background:url(../images/banner.webp);background-size:cover;margin-top: 113px;position:relative;padding:80px 0;}
.banner_text {background: rgba(243,239,238,0.8); border: 5px solid #e2cfbe; border-radius: 15px; margin-left:5%;
width: 90%; padding: 50px; text-align: center;}
.banner .problems {font-size:30px; line-height:40px;padding-bottom:25px;}
.banner  h1 {font-size:40px; line-height:50px;}
.banner  h2 {font-size:20px; line-height:30px;}

.price {display:flex; align-items:center;margin:30px 0; justify-content: center;}
.price:last-child {margin-bottom:35px;}
.process_name {font-size:30px; line-height:34px;}
.new_price {color:#60246a; font-size:40px; line-height:35px; font-weight: bold; padding: 0 35px; }
.old_price {font-size:30px; line-height:40px; text-decoration:line-through; }


.or span {padding:8px 8px; color#fff; font-size:16px; line-height:26px; background:#e2cfbe; border-radius:8px;}

.hire {font-size:20px;font-weight: bold; display:block;}

.banner .order {display:block; width:272px; margin:0 auto;}
.banner .extra {font-size:16px; line-height:26px; padding-top:25px; padding-bottom: 25px;}
.banner .sum {font-size:18px; line-height:26px; padding-bottom:25px; font-weight:bold;}



.types {padding:50px 0; text-align:center;}

.types_name {padding:0px 0 25px 0;  display:flex; align-items:center; justify-content:center;margin-top:40px;}
.types_number {width:50px; height:50px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-right:25px;
background:#60246a;}
.types_number span {font-size:40px; color:#fff;}
.types_title {font-size:25px; line-height:35px;}

.types_list {align-items:center; width: 900px; margin: 0 auto;}
.types_left, .types_right {width:50%;}

.types_left img {border: 5px solid #e2cfbe;border-radius: 15px;width:320px;}
.types_right_inner {margin:30px 0;}
.types_ul_inner {display:flex; justify-content:center;}
.types_right .types_cat {font-size:22px; line-height:30px; }
.types_right li {font-size:18px; line-height:30px; position:relative; text-align:left; padding-left:45px; margin-bottom:15px; }
.types_right li:before {content:''; width:30px; height:30px; background:url(../fonts/mark.svg); background-size:cover; position:absolute; top:0; left:0;}
.types_right .hire, .types_right .sum {padding:10px 0;}



#slider{
    margin-top: 50px;
    text-align: center;
  
  }
  #slider div{
  width: 100%;
  }
  #slider div img{
    margin: 0 auto;
  }

.middle_form {padding:50px 0; text-align:center; background: #c8d9e3;}
.middle_form input {width:300px; border: 1px rgba(255,255,255,0.2) solid;
 padding: 8px 20px; font-size: 16px; line-height:32px; background: #fff; outline: none; color: #333;
 box-shadow: 0 0 10px rgba(249,238,0,.14); border-radius:20px;}
.middle_form form {width:800px; margin:0 auto;}
.middle_form h4 {font-size:24px; line-height:34px; margin: 0 auto; padding-bottom:25px;}

.rate {margin:0px 30px 20px 30px;  text-align:left;}
.rate_parent {justify-content:center;}
/* .rate label {  }
.modal .rate.active {opacity:1;} */

.rate input {position: absolute; z-index: -1; opacity: 0;margin: 0;}
.rate input + label {position: relative;padding-left: 35px;cursor: pointer; font-size:18px; line-height:28px; font-family: 'circe';display: flex;}
.rate input + label:before {content: ''; position: absolute;top: -1px;left: 0;
width:24px; height:24px;border: 1px solid #60246a;border-radius: 50%;background: #FFF;}
.rate input + label:after {content: '';position: absolute;top: 7px;left: 8px;  width: 10px;height: 10px;border-radius: 50%;background: #60246a;opacity: 0;transition: .2s;}
.rate input:checked + label:after {opacity: 1;}

.rate b {color:#60246a; font-size:20px;}




.include {padding:50px 0; text-align:center;}
.include_list {display:flex; justify-content:center; flex-wrap:wrap; padding-top:35px;}
.include_item {width:30%; margin: 0 8px; margin-bottom:25px; }
.include_item span {font-size:20px; line-height:30px; font-weight:bold;}
.include_item img {width:80px; display:block; margin: 0 auto; margin-bottom:25px;}



.reviews {padding:50px 0; background:#c8d9e3; }
.reviews_inner {justify-content:center;}
.review {width:300px; text-align:center;  border: 5px solid #fff; border-radius: 15px; padding:15px 15px 0 15px; margin: 0 12px 25px 12px;}
.review .face {width:150px; border-radius:50%;}
.review .quote {width:20px;}



footer {padding:50px 0; text-align:center;}
footer p, footer a {font-size: 16px; line-height:32px; padding:5px 0;}






/* ----------- Modalbox ------------ */


.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(251,251,251,0.9);  z-index: 999!important;
opacity: 0;  -webkit-transition: opacity 200ms ease-in;  -moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in; pointer-events: none; margin: 0; padding: 0; }
.modal:target { opacity: 1; pointer-events: auto; overflow-y: auto; }
.modal-dialog {max-width: 650px; margin:0 auto; margin-top: 50px; }
.modal-content { position: relative; background: #eee; 
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);border-radius: 8px; padding:30px 50px;}
.modal-body {position: relative;}
.close {position:relative; float:right; top:30px; right:40px;font-size: 40px!important;font-weight: 700;
line-height: 1;color:#60246a!important;opacity: 1!important;text-decoration: none; z-index:9999;}
.close:focus, .close:hover {color: #b842cc!important;text-decoration: none;cursor: pointer;opacity: 1;}

.modal h3 {font-size: 40px; line-height: 50px; padding: 35px 0;}
.modal h4 {font-size: 30px; line-height: 40px; padding: 15px 0;}

.modal input {width:100%; margin-bottom:25px; border: 1px rgba(255,255,255,0.2) solid; 
 padding: 8px 20px; font-size: 16px; line-height:32px; background: #fff; outline: none; color: #333;
 box-shadow: 0 0 10px rgba(249,238,0,.14); border-radius:20px;}
.modal button {cursor: pointer; border: 2px solid #60246a; }
.modal button:hover { background: none; color: #fff; color: #60246a;}


.modal .rate {text-align:left; width:380px; margin:0 auto; margin-bottom:20px;}





@media (max-width: 1500px) {
.banner {background-position: 70% 0;}
.process_name {display:block; width: 100%;padding-bottom:0px;}
.price {flex-wrap:wrap; margin: 8px 0; }
.last_price {margin:20px 0 0px 0;}
.new_price {padding: 0 15px 0 0; font-size: 25px;}
.old_price {font-size: 20px;}
.hire {font-size:16px;}
}






@media (max-width: 1200px) {
header {width:100%; left:0;}
header .flex { padding: 5px 5% 5px 3.5%;}
.logo {width: 120px; margin-right:8px;}
header .order {margin-left:8px;}

.main_wrapper {max-width:100%;}

.order {font-size: 13px; padding: 8px 10px;}


.modal-dialog {max-width: 90%; margin-top: 25px;}
.modal-content {padding: 15px 20px;}
.modal-body form {width:60%; margin:0 auto;}
.close {top: 15px; right: 18px;}
.modal h3 {font-size:24px; line-height:30px; padding: 35px 0 0 0; text-align:center;}
.modal h4 {font-size:20px; line-height:30px; text-align:center;}
.modal input {padding: 8px 20px;}
.modal button {font-size:15px; margin: 0 auto; display: block; width: 140px; padding: 15px 0;}


.banner {margin-top: 100px;padding: 30px 0;}
.banner_text { padding: 10px;}
.banner h1 {font-size:24px; line-height:30px;}
.banner .problems {display:none;}
.banner h2 {display:none;}
.banner .order {width:220px; }
.banner .sum {font-size:14px; line-height:24px; padding-bottom:10px;}

.price div, .surgery_price { margin:0 auto; }
.price div {display:flex; align-items:center;}

.banner .extra {line-height:20px;}

.process_name {font-size:18px; line-height:20px; }


.h2 {padding: 12px 0px; font-size: 25px; line-height: 35px;}
.main_p { font-size: 16px; line-height: 26px; margin-bottom:15px;}

.types, .include {padding: 30px 0 0 0;}

.types_list {width:100%;}

.middle_form form {width:340px; }
.middle_form form  .order {font-size: 20px;display:block;margin:0 auto;width: 100%;}
.middle_form form  input {margin-bottom:25px;width: 100%;}
.middle_form h4 {font-size: 20px;line-height: 30px;padding-bottom: 15px;}

.rate input + label {font-size:15px; line-height:26px;}
.rate {margin: 0px 0px 12px 0px; width:100%;}
.rate b {font-size:16px;}



.include_item span {font-size: 18px;line-height: 28px;}
.include_item img {width: 50px; margin-bottom: 15px;}

.review .face {width:100px;}
}




@media (max-width: 800px) {
.types_list, .types_name {flex-wrap:wrap;}
.types_left, .types_right {width: 100%;}
.types_right_inner {margin: 10px 0;}
.types_left img {width:250px;}
.types_number {width: 35px; height: 35px; margin-right:0;}
.types_number span {font-size: 25px;}
.types_title {display:block; width:100%; font-size: 22px; line-height: 32px;}
.modal-body form {width:100%;}


.include_item {width: 100%; max-width:300px;}
.reviews {padding:30px 0;}
}


@media (max-width: 500px)
{ 
header .order {
    margin-left: 8px;
    width: 100%;
}
header p.address{
    display: none;
}

#slider{
    margin-top: 30px;
    text-align: center;
  
  }
  #slider div{
  width: 100%;
  margin: 0 5px;
  }
  #slider div img{
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 400px) {
.middle_form form {width:100%;}
.middle_form form input {width:100%;}	
}