body { font-family: Montserrat, Arial, sans-serif; }
.page_iner { width: 100%; max-width: 1140px; margin: 0 auto; }
.clear { display: table; clear: both; }

/*----- Блок Логістична компанія TEKS -----*/
.bl_b2b { background: url('../img/img_btb.jpg'); background-size: cover; color: #000; background-size: cover; background-position: bottom;  background-repeat: no-repeat; }
.bl_b2b_overlay { display: flex; background-color: rgba(0, 0, 0, 0.53) }
.bl_b2b .page_iner { display: flex; max-width: 1340px; justify-content: space-between; }
.bl_btb_text { margin: auto 0; color: #fff; transform: translateY(-30px); }
.bl_btb_text_title { padding-bottom: 40px; font-size: 40px; font-weight: 700; }
.bl_btb_text_content { font-size: 24px; line-height: 150%;  }
.bl_btb_form { width: 450px; margin-top: 119px; margin-bottom: 127px; padding: 12px 20px 20px 20px; font-size: 20px; border-top: 7px solid #FF6900; border-radius: 8px; background-color: #fff; }
.inp { height: 50px; margin-top: 20px; padding-left: 20px; font-size: 16px; color: #000; border-radius: 8px; border: 1px solid #D9D9D9; background-color: #fff; transition: all 0.2s linear;  }
.inp:focus, .inp:focus-visible { outline-color: #ff6900; box-shadow: inset 0 0 7px #0f1821; }
.bl_btb_form .inp, .bl_btb_form .btn { width: 100%; display: inline-block; }
.btn { height: 50px; border-radius: 8px; font-size: 20px; font-weight: 400; color: #F5F5F5; text-transform: none; cursor: pointer; }
.btn_btb { margin-top: 20px; background-color: #2C2C2C; vertical-align: top; }

/*----- Блок Про компанію -----*/
.bl_about { margin-top: 60px; font-size: 24px; line-height: 150%; color: #000; }
.bl_about .page_iner { display: flex; flex-direction: column; gap: 40px; }
.about_row { display: flex; gap: 40px; }
.about_row.one .block { flex: 1; }
.about_row.two .block { flex: 1;  min-width: 0; }
.block { height: 120px; background: #F7F7F7; padding: 20px; text-align: center; font-weight: 500; border-radius: 8px; }

/*----- Блок Таймер -----*/
.bl_timer { margin-top: 90px; color: #000; text-align: center; }
.bl_timer_title { font-size: 40px; line-height: 150%; font-weight: 600; }
.bl_timer_title span { color: #FF6900; }
.bl_timer_inner { width: 660px; margin: 50px auto 38px auto; display: flex; gap: 10px; justify-content: space-between; }
.bl_timer_div { width: 140px; height: 140px; background-color: #F7F7F7; border-radius: 8px; }
.bl_timer_value { padding-top: 17px; font-size: 64px; font-weight: 700; }
.bl_timer_label { margin-top: -18px; font-size: 16px; }
.btn_timer {  width: 270px; background-color: #FF6900; }

/*----- Блок Як швидко доставляємо -----*/
.bl_work { margin-top: 80px; }
.bl_work_title { margin-bottom: 40px; font-size: 40px; color: #000; line-height: 150%; font-weight: 600; text-align: center; }

/*----- Блок FAQ -----*/
.bl_faq { margin-top: 70px; }
.bl_faq_title  { margin-bottom: 20px; font-size: 40px; color: #000; line-height: 150%; font-weight: 600; text-align: center; }
.accordion_header { width: 100%; margin-top: 16px; padding: 10px; background: #1E1E1E; border: none; text-align: left; cursor: pointer; font-size: 20px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; color: #fff; border-radius: 8px; }
button.accordion_header:focus {outline: none; }
.accordion_header .accordion_arrow { display: inline-block; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform 0.3s ease; }
.accordion_header.active .accordion_arrow { transform: rotate(-135deg); }
.accordion_content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; background: #1E1E1E; padding: 0 10px; color: #fff; font-size: 16px; border-radius: 8px; }
.accordion_content.open { max-height: 500px; margin-top: -11px; padding: 10px; }

/*----- Блок клієнти -----*/
.bl_clients { margin-top: 120px; }
.bl_clients_title {  margin-bottom: 40px; font-size: 40px; color: #000; line-height: 150%; font-weight: 600; text-align: center; }
.client_swiper { margin: 30px 0 100px 0; --swiper-navigation-size: 10px; --swiper-pagination-color: #000; --swiper-pagination-bullet-size: 5px; --swiper-pagination-bottom: 0px; }
.client_swiper .swiper-button-next, .client_swiper .swiper-button-prev { color: #000; }
.swiper { margin-bottom: 40px; }
.swiper-slide { display: flex; justify-content: center; align-items: center; }

/*----- Консультація -----*/
.bl_consult { padding: 38px 0 58px 0; background: #FF6900; color: #fff; font-size: 24px; }
.bl_consult_title  { margin-bottom: 20px; font-size: 40px; color: #fff; line-height: 150%; font-weight: 600; }
.bl_consult .inp, .bl_consult .btn { width: 21%; }
.bl_consult .call_name { margin-left: 43px; }

/*----- Форми -----*/
.err { border: 1px solid red !important; }
.err.call_name { background-color: #ffa2a2; }
.err.call_phone { background-color: #ffa2a2; }
.err_message { margin-top: -50px; margin-bottom: 30px; padding-right: 10px; font-size: 12px; display: block; color: red; text-align: right; }
.btn:disabled { cursor: not-allowed; opacity: 1; }

/*----- повідомлення -----*/
.popup-message { position: fixed; bottom: 40px; right: 40px; background: #FF6900; color: #fff; padding: 16px 24px; border-radius: 8px; font-size: 16px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 9999; pointer-events: none; }
.popup-message.show { opacity: 1; transform: translateY(0); }

/*----- анімація -----*/
.bl_work_track { position: relative; height: 220px; margin-bottom: 100px; }
.line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #FF6900; transform: translateY(-50%); }
.point { position: absolute; top: 50%; width: 5px; height: 5px; background: #FF6900; border-radius: 50%; transform: translate(-50%, -50%); }
.point_1 { left: 10%; }
.point_2 { left: 30%; }
.point_3 { left: 50%; }
.point_4 { left: 70%; }
.point_5 { left: 90%; }
.car { position: absolute; top: 41%; left: 0%; transform: translate(-50%, -50%); width: 60px; transition: left 3s linear; }
.stages_top, .stages_bottom { display: flex; justify-content: space-between; position: absolute; width: 100%; left: 0; }
.stages_top { top: 0; }
.stages_bottom { top: 130px; }
.stage { width: 145px; margin: 0 auto;  padding: 8px; position: relative; opacity: 0; transition: opacity 0.5s; text-align: center; line-height: normal; font-size: 15px; font-weight: 600; color: #000; }
.stages_top .stage { border: 2px solid rgba(217, 217, 217, 1); border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);  }
.stages_bottom .stage { }
.stage.visible { opacity: 1; }
.stage img { margin-top: 20px; }
.stage_top::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 6px solid rgb(160 160 160 / 51%); }
.arrow { right: 33px; left: calc(100% - 8px); top: 97px; position: relative; display: inline-block; width: 7px; height: 7px; border-right: 2px solid #FF6900; border-bottom: 2px solid #FF6900; transform: rotate(-45deg); }


@media screen and (max-width: 1370px) {
	.bl_b2b .page_iner { max-width: 1230px; }
}

@media screen and (max-width: 1260px) {
	.bl_b2b_overlay { padding: 0 20px; }
}

@media screen and (max-width: 1200px) {
	.bl_btb_text_title { font-size: 30px; }
	.bl_btb_text_content { font-size: 20px; }
	.bl_btb_form { font-size: 18px; }
	.inp { font-size: 14px; }
	.btn { font-size: 18px; }
	.bl_about { margin-top: 40px; font-size: 18px; }
	.bl_timer_title { font-size: 30px; }
	.bl_timer_label { font-size: 16px; }
	.bl_timer_value { font-size: 54px; }
	.bl_timer {  margin-top: 50px; }
	.bl_work { margin-top: 50px; }
	.bl_work_title { font-size: 30px; }
	.bl_faq_title { font-size: 30px; }
	.accordion_header { font-size: 14px; }
	.accordion_content { font-size: 14px; }
	.bl_clients { margin-top: 40px; }
	.bl_clients_title { font-size: 30px; }
	.bl_consult { font-size: 19px; }
	.bl_consult_title { font-size: 30px; }
	.bl_about .page_iner {  padding-left: 10px; padding-right: 10px; gap: 20px }
	.bl_work { padding-left: 10px; padding-right: 10px; }
	.bl_faq { margin-left: 10px; margin-right: 10px; margin-top: 40px; width: calc(100% - 20px); }
	.about_row_last { text-align: center; }
	.bl_consult { padding-left: 10px; padding-right: 10px; }
	.inp { margin-top: 12px; }
	.btn_btb { margin-top: 12px; }
	.about_row { gap: 20px; }
	.block { height: auto; }
}

@media screen and (max-width: 880px) {
	.callback_span { display: block; }
	.bl_consult .call_name { margin-left: 0; }
	.bl_consult .inp, .bl_consult .btn {  width: 32.7%; }
	.stage { width: 123px; font-size: 13px; }
	.stage img {  width: 68%; }
}

@media screen and (max-width: 650px) {
	.bl_btb_text_title { font-size: 20px; }
	.bl_btb_text_content { font-size: 18px; }
	.bl_btb_form { font-size: 16px; }
	.inp { font-size: 13px; }
	.btn { font-size: 16px; }
	.bl_about { margin-top: 40px; font-size: 16px; }
	.bl_timer_title { font-size: 20px; }
	.bl_timer_label { font-size: 15px; }
	.bl_timer_value { font-size: 44px; }
	.bl_timer {  margin-top: 30px; }
	.bl_work { margin-top: 30px; text-align: center; }
	.bl_work_title { font-size: 20px; }
	.bl_faq_title { font-size: 20px; }
	.bl_clients { margin-top: 30px; }
	.bl_clients_title { font-size: 20px; }
	.bl_consult { font-size: 15px; }
	.bl_consult_title { font-size: 20px; }
	.bl_faq {  margin-top: 10px; }
	.inp { margin-top: 11px; }
	.btn_btb { margin-top: 11px; }
	.bl_timer_inner { width: calc(100% - 20px); margin: 25px auto 30px auto; }
	.bl_timer_div { height: auto; width: 25%; }
	.swiper-wrapper img { width: 80%; }
}

@media screen and (max-width: 700px) {
	.swiper-slide { text-align: center; }
}
@media screen and (max-width: 600px) {
	.bl_b2b .page_iner { display: block; }
	.bl_b2b {  background-size: contain; background-position: top; background-color: rgba(0, 0, 0, 0.53); }
	.bl_b2b_overlay { padding-bottom: 10px; }
	.bl_btb_text_title { padding-top: 25px; padding-bottom: 25px; font-size: 16px; }
	.bl_btb_text_content { font-size: 14px; }
	.bl_btb_text {  transform: none; }
	.bl_btb_form { width: calc(100% - 20px); margin: 28px 10px 0 10px; padding: 10px 10px 10px 10px; font-size: 13px; }
	.inp { height: 30px; margin-top: 10px; font-size: 12px; }
	.btn { height: 30px; font-size: 14px; }
	.btn_btb { margin-top: 10px; }

	.bl_about { margin-top: 30px; font-size: 14px; }
	.about_row { display: block; }
	.block { margin-top: 17px; padding: 10px; height: auto;  }
	.about_row_last { margin-top: 17px; }

	.bl_timer { margin-top: 30px; }
	.bl_timer_title { font-size: 16px; }
	.bl_timer_label { margin-top: -10px; padding-bottom: 2px;font-size: 12px; }
	.bl_timer_value { font-size: 24px; }

	.bl_work { margin-top: 60px; text-align: center; }
	.bl_work_title { margin-bottom: 40px; font-size: 16px; }

	.bl_faq {  margin: -50px 10px 0px 10px; }
	.bl_faq_title { font-size: 16px; }
	.accordion_header { font-size: 14px; }
	.accordion_content { font-size: 14px; }

	.bl_clients { margin-top: 60px; }
	.bl_clients_title { margin-bottom: 20px; font-size: 16px; }
	.swiper { margin-bottom: 20px }
	.swiper-wrapper img { width: 60%; margin-bottom: 15px; }

	.bl_consult { width: 100%; padding: 20px 10px 20px 10px; font-size: 14px; }
	.bl_consult_title { margin-bottom: 10px; font-size: 16px; }
	.bl_consult .inp, .bl_consult .btn { display: block; width: 100%; }

	.site-footer {  font-size: 12px; }
	.contacts_footer_container { margin-top: 0px;  }
	.site-info { font-size: 10px; }

	.err_message { margin-top: -29px; margin-bottom: 14px; font-size: 9px; }
	.popup-message { width: calc(100% - 20px); margin: 0 10px; bottom: 10px; right: 0; width: 100%; font-size: 14px; }

	.bl_work_track { height: 420px; }
	.line { top: 0; left: 50%; width: 2px; height: 100%; transform: none; }
	.stages_bottom, .stages_top { width: 49%; display: block; float: left; position: static; }
	.stages_top { float: right; }
	.car { display: none; }
	.stage img {  width: 42px; }
	.point { left: 50%; }
	.point_1 { top: 10%; }
	.point_2 { top: 30%; }
	.point_3 { top: 50%; }
	.point_4 { top: 70%; }
	.point_5 { top: 90%; }
	.stage_text { display: block; float: right; width: 76px; padding-top:26px; 	text-align: right;}
	.stages_top .stage { margin: 16px auto 0 30px; }
	.stage_top::after { content: ""; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 6px solid rgb(160 160 160 / 51%); }
	.stage::after { content: ""; display: table; clear: both; }
	.stages_bottom .stage { width: 80%; margin: 0; margin-left: auto; }
	.stage_text_2 {  }
	.arrow { transform: rotate(45deg); top: 407px; left: 1px; }
	.stages_bottom .stage_2 { margin-top: 5px; }
	.stages_bottom .stage_3 { margin-top: 6px; }
	.stages_bottom .stage_4 { margin-top: 7px; }
	.stages_bottom .stage_5 { margin-top: 7px; }
	.stages_top .stage_top_2 { margin-top: 32px; }
	.stages_top .stage_top_3 { margin-top: 32px; }
	.stages_top .stage_top_4 { margin-top: 32px; }
	.stages_top .stage_top_5 { margin-top: 32px; }
}

@media screen and (max-width: 400px) {
	.stages_bottom, .stages_top { width: 48%; }
	.stages_bottom .stage { width: 100%; }
}