@charset "utf-8";

.section_exp { padding:0px 80px 20px 80px; border:0px solid red; }
@media screen and (max-width:768px) { .section_exp { padding:0px 20px 0px 20px; } }

.exp_cont {
	overflow:hidden; width:100%; max-width:var(--max-width); height:400px;
	padding:0px 0px 0px 0px; margin:60px auto; border:0px solid red;
}

.exp_sub_img {
	display:block; position:relative; overflow:hidden; float:left; padding:0px 0px 0px 0px; margin:0px; width:77%; height:400px;
}

.exp_sub_img div { position:absolute; width:105px; height:105px; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border-radius:50%; padding:26px 0px; background-color:rgba(0,0,0,0.35); border:2px solid rgba(255,255,255,0.9); outline:5px solid rgba(0,0,0,0.35); }

.exp_sub_img div h3 { font-size:22px; line-height:30px; font-family:'Gilroy-SemiBold'; font-weight:normal; color:White; width:100%; text-align:center; position:relative; letter-spacing:0.06rem; }
/*.exp_sub_img div h3::after { content:''; position:absolute; bottom:0px; left:50%; transform:translateX(-50%); width:60px; height:2px; background-color:White; }*/
.exp_sub_img div h4 { font-size:14px; line-height:20px; font-family:'Gilroy-Regular'; font-weight:normal; color:White; width:100%; text-align:center; }

.exp_sub_img img { display:block; overflow:hidden; width:100%; height:100%; object-fit:cover; }

.exp_sub_text {
	display:flex; height:400px; float:left; padding:0px 0px 0px 0px; margin:0px; border:0px solid blue; width:23%;
}

.text_box { margin:auto; padding:40px; width:auto; min-width:370px; transform:translateX(-40%); overflow:visible; background-color:#f3f3f3; z-index:4; text-align:left; }
.text_box h3 { font-size:34px; line-height:40px; text-transform:uppercase; color:#005083; margin:0px; letter-spacing:0.05rem;
font-family:'Gilroy-Black'; 
/*font-family:'TildaSansWebVF'; font-variation-settings: "wght" 750;*/  }
 
.text_box h4 { margin:0px; font-size:18px; line-height:24px; color:var(--color-text); font-weight:normal; width:100%; }
.text_box p { font-size:15px; line-height:24px; margin:0px; padding:20px 0px 10px 0px; width:100%; color:Black; font-weight:400; font-family:'Gilroy-Regular'; }
.text_box a.btn_price { font-size:15px; line-height:20px; color:#005083; font-weight:normal; position:relative; margin:20px 0px 0px 0px; padding:0px 0px 0px 50px; height:20px; width:160px; font-family:'Gilroy-Medium'; display:inline-block; }
.text_box a.btn_price::before { content:''; position:absolute; width:40px; height:2px; background-color:var(--color-peach); left:0px; top:50%; transform:translateY(-50%); transition:0.33s; }
.text_box a.btn_price::after { content:'WhatsApp'; text-transform:uppercase; position:absolute; left:50px; top:0px;transition:0.33s; background-image:url(/images/pict/arrow_square_up_right.svg); padding-right:25px; background-position:right center; background-repeat:no-repeat; background-size:20px; }
.text_box a.btn_price:hover::after { transform:translateY(-15px); }
.text_box a.btn_price:hover::before { width:100%; }

.btn_price3 { position:absolute; bottom:-60px; right:20px; display:none; }

.reverse .exp_sub_img { float:right; }
.reverse .exp_sub_text { float:right; }
.reverse .exp_sub_text .text_box { transform:translateX(10%); z-index:4; }

@media screen and (max-width:1000px) {
	.section_exp { padding:0px 20px 0px 20px; border:0px solid red; }
	.exp_sub_text { overflow:visible; }
	.text_box { padding:3vw; height:auto; min-width:250px; border:0px solid blue; }
	.reverse .exp_sub_text .text_box { padding:3vw; height:auto; min-width:280px;}
	.text_box h3 { font-size:2.7vw; line-height:3.5vw; }
	.text_box h4 { font-size:1.8vw; line-height:2.6vw; }
}

@media screen and (max-width:768px) {
	.exp_cont { height:auto; margin:40px auto; }
	.exp_sub_img { width:100%; height:300px; }
	.exp_sub_text {	display:block; width:100%; height:auto; padding:0px 5vw; }
	.text_box { margin:0px; padding:20px; min-width:auto; transform:translateY(-5vw); height:auto; width:100%; }
	.reverse .exp_sub_text .text_box { margin:0px; transform:translateY(-5vw); height:auto; }
}

@media screen and (max-width:600px) {
.text_box h3 { font-size:8vw; line-height:9vw; }
.text_box a.btn_price { margin:10px 0px 0px 0px; }
.btn_price3 { display:block; top:-80px; right:-10px; }
.btn_price { display:none; }
}
/*
Чтобы сделать высоту такой же как ширину нужно в блок добавить атрибут data-proportion-h="1". 1 - это пропорция. Если вам нужно сделать, чтобы высота была как две ширины то пишите 2 т.е data-proportion-h="2". Например< div data-proportion-h="1" style="widht:200px; "></div><! - - Высота 200px-->
< div data-proportion-h="2" style="widht:200px; "></div><! - - Высота 400px-->< div data-proportion-h="0.5" style="widht:200px; "></div><! - - Высота 100px-->.
*/