html, body, * { font-family: "Roboto", sans-serif; font-weight: 400; font-size: 14px; color: #393939; margin: 0 auto; } .wrapper { max-width: 1320px; } .container { margin: 0 20px; } /* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */ .header_top { display: flex; align-items: center; margin-top: 20px; margin-right: 60px; margin-left: 60px; margin-bottom: 30px; } .header_top_inner { margin: 0; width: 100%; } .header_top_wrapper { display: flex; } .header_top_wrapper-open { display: none; } .header_top_list { display: flex; width: 100%; margin: 20px 0; } .header_nav_item-empty { display: block; } .logo_link { margin: 0; margin-left: 10px; transition: all .3s; } .logo_link:hover { transform: scale(1.05); } .logo_img { } .header_nav_top { display: flex; white-space: nowrap; background-color: #F4F4F4; border-radius: 16px; } .header_top_item { padding: 10px 16px; position: relative; border-radius: 16px; } .header_top_item:hover { background-color: #0C47A0; color: #fff; cursor: pointer; } .header_top_item.active { background-color: #0C47A0; color: #fff; padding-left: 28px; } .header_top_item.active::before { position: absolute; content: ""; display: block; background-color: #fff; width: 9px; height: 9px; border-radius: 50%; top: 12px; left: 14px; } .header_top_link { } .header_call { display: flex; margin: 0; white-space: nowrap; gap: 20px; } .header_call_tel { display: flex; align-items: center; justify-content: center; gap: 5px; transition: all .3s; } .header_call_tel:hover { transform: scale(1.07); color: #0C47A0; } .header_call_tel svg{ display: block; width: 18px; height: 18px; } .header_tel_link { } .header_call_btn { display: flex; align-items: center; padding: 10px 16px; border-radius: 16px; background-color: #0C47A0; gap: 5px; transition: all .3s; } .header_call_btn:hover { transform: scale(1.07); } .header_call_btn svg { display: block; width: 16px; height: 16px; } .header_call_text { color: #fff; } .header_nav { margin: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: #F4F4F4; border-radius: 16px; padding: 0 5px; } .header_nav_item { display: block; justify-content: space-between; align-items: center; white-space: nowrap; padding: 10px 0; } .header_nav_item-reverse { display: none; } .header_nav_link { transition: all .1s; } .header_nav_link:hover { color: #0C47A0; transform: scale(1.01); } /* ------------------------------------------------HEADER-BODY------------------------------------------------------ */ .header_body { } .header_body_inner { } .header_body_top { display: flex; justify-content: space-between; margin-bottom: 30px; } .header_body_heading { font-size: 55px; font-weight: 500; margin-right: 150px; } .header_body_heading svg { text-align: center; vertical-align: middle; } .header_header_img { text-align: center; vertical-align: middle; height: 32px; width: 90px; background: linear-gradient(to right, #0C47A0, #8FECFC); border-radius: 30px; } .header_body_about { max-width: 20%; display: flex; flex-direction: column; justify-content: center; margin-bottom: 40px; } .header_about_text { font-weight: 500; margin-top: 5px; } .header_body_about span { color: #939393; } .header_about_img { display: block; width: 19px; height: 19px; margin: 0; } .header_accordion { background-color: #8FECFC; height: 348px; border-radius: 30px; margin-bottom: 20px; } .accordion_about_info-open { display: none; } .accordion_about_info { width: 50%; margin: 0; margin-bottom: 40px; } .about_info_list { display: flex; justify-content: space-between; } .info_list_item { margin: 0; font-weight: 500; } .header_top_list_active { display: none; } /* --------------------------------------------------------------------------------------------- */ .header_row_info { display: flex; align-items: center; margin: 0; margin-bottom: 60px; width: 100%; } .row_info_heading { margin: 0; width: 40%; } .info_heading_title { font-size: 36px; font-weight: 600; margin-bottom: 20px; } .info_heading_btn { display: flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 16px; background-color: #0C47A0; color: #fff; margin: 0; transition: all .3s; gap: 5px; } .info_heading_btn:hover { transform: scale(1.07); } .row_info_list { display: flex; width: 100%; height: 100%; justify-content: space-between; align-items: center; } .row_info_item { display: flex; align-items: center; justify-content: center; border-radius: 30px; background-color: #F4F4F4; width: 100%; margin-right: 40px; height: 119px; } .row_info_item:last-child { margin-right: 0; } .row_info_area { padding: 10px; border-radius: 50%; border: 1px solid #fff; margin: 0; margin-right: 15px; } .row_info_item svg { margin: 0; display: block; width: 25px; height: 25px; } .row_info_content { white-space: nowrap; margin: 0; } .info_content_first { margin-bottom: 5px; } .info_content_second { font-size: 24px; } /* ------------------------------------------------------------------------------------ */ .advantage { margin: 0; display: flex; align-items: center; } .advantage_heading { width: 100%; margin: 0; } .adv_heading_title { margin: 0; } .heading_title_sub { font-size: 18px; font-weight: 600; margin-bottom: 25px; } .heading_title_main { font-size: 74px; font-weight: 600; } .heading_title_main span { font-size: 74px; font-weight: 600; color: #0C47A0; } .advantage_content { width: 40%; margin: 0; } .adv_cont_01 { margin-bottom: 10px; font-size: 18px; } .adv_cont_02 { font-size: 18px; } /* --------------------------------------------------------------------------------------------- */ .advantage_slide { } .cards { display: flex; } .card { height: 637px; width: 418px; border-radius: 30px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; color: white; display: flex; flex-direction: column; justify-content: space-between; background-size: cover; } .card.open { background-color: white; background-image: none !important; color: #000; height: auto; padding: 20px; } .card-number { display: flex; font-size: 14px; color: #fff; border-radius: 50%; align-items: center; border: 1px solid white; margin: 0; } .card.open .card-number { position: static; margin-bottom: 10px; } .card-title { font-size: 18px; font-weight: bold; padding: 20px; } .card.open .card-title { padding: 0; margin-bottom: 10px; } .card-text { display: none; font-size: 14px; line-height: 1.5; } .card.open .card-text { display: block; margin-bottom: 20px; } /* -------------------------------------------------------------------------------------------------- */ .slider { display: flex; margin-top: 50px; width: 100%; height: 348px; border-radius: 30px; margin-bottom: 20px; } .slider_main { width: 55%; height: 100%; background: url("/images/main/01.png") 100% / cover; border-radius: 30px; padding: 20px 15px 10px 20px; color: white; display: flex; justify-content: space-between; flex-direction: column; margin-right: 10px; } .slider_row { } .slider_row_1 { margin: 0; width: 80%; } .slider_row_container { width: 80%; display: flex; align-items: center; flex-wrap: wrap; margin: 0; } .row_container_item { margin: 0; background-color: #025DC873; padding: 8px 8px; border-radius: 15px; border: 1px solid white; margin-bottom: 8px; align-items: center; color: #fff; } .row_container_area { margin: 0; width: 10px; height: 10px; background-color: white; border-radius: 50%; margin-bottom: 8px; } .row_container_area-reverse { display: none; } .slider_row_2 { margin: 0; width: 100%; } .slider_row_inner { width: 100%; display: flex; justify-content: space-between; } .slider_row_title { margin: 0; display: flex; align-items: center; color: #fff; gap: 10px; } .slider_row_index { margin: 0; color: #393939; font-size: 18px; background-color: white; border-radius: 50%; padding: 10px; font-weight: 600; } /* -------------------------------------------------------------------------------------- */ .accordion { display: flex; width: 45%; /* 40% страницы */ height: 348px; gap: 10px; } .accordion-item { flex: 1.15; border-radius: 30px; /* закругление краёв */ overflow: hidden; cursor: pointer; display: flex; justify-content: space-between; flex-direction: column-reverse; align-items: center; } .accordion-item.active{ display: flex; flex: 5; /* раскрытая колонка */ width: 100%; height: 100%; transition: all .3s; } .accordion-item:hover { box-shadow: 2px 2px 4px 0px #444; } .accordion-item.active:hover { box-shadow: none; } .accordion-item.active .accordion_index{ display: none; } .accordion-item.active .accordion_title{ display: none; } .accordion-item.active .img-open { display: none; width: 0; height: 0; } .accordion_index_area { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .accordion-item.active .accordion_index_area { margin-bottom: 0; } .accordion_index { display: block; padding: 10px; border-radius: 50%; background-color: #fff; font-weight: 600; font-size: 18px; } .accordion_title { margin: 0; color: white; display: flex; align-items: center; justify-content: center; writing-mode: vertical-lr; transform: rotate(-180deg); margin-bottom: 40px; } /* not-actine */ #item1 { background-color: #0C47A0; } #item2 { background-color: #A5C6F6; } #item3 { background-color: #0C47A0; } #item4 { background-color: #A5C6F6; } #item5 { background-color: #0C47A0; } /* active */ #item1.active { background: url("/images/main/001.png") 100% 100% / cover; } #item2.active { background: url("/images/main/002.png") 100% 100% / cover; } #item3.active { background: url("/images/main/003.png") 100% 100% / cover; } #item4.active { background: url("/images/main/004.png") 100% 100% / cover; } #item5.active { background: url("/images/main/005.png") 100% 100% / cover; } .img-open { display: block; object-fit: cover; width: 100%; height: 100%; } .img-open { display: none; } .accordion-item.active .blue-square { display: block; height: 348px; margin: 20px; background-color: rgba(2, 76, 187, 0.259); border-radius: 33px; } /* not-active */ .item_wrapper_index { display: none; } .item_wrapper { display: none; } /* active */ .accordion-item.active .item_wrapper { display: flex; flex-direction: column; padding: 15px; height: 100%; } .wrapper_row_first { display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px; } .item_wrapper_area { display: flex; align-items: start; justify-content: center; margin: 0; } .item_wrapper_index { display: block; font-weight: 600; font-size: 18px; border-radius: 50%; background-color: #fff; padding: 10px; } .item_wrapper_icon { margin: 0; background-color: #fff; border-radius: 50%; padding: 18px; } .item_wrapper_icon svg { display: block; width: 42px; height: 42px; } .wrapper_row_middle { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .row_middle_title { margin: 0; color: #fff; font-weight: 500; font-size: 24px; text-transform: uppercase; } .row_middle_text { font-size: 16px; color: #fff; } .wrapper_row_botton { margin: 0; margin-top: 10px; } .wrapper_row_botton { display: flex; justify-content: end; } .wrapper_row_btn { margin: 0; display: flex; align-items: center; gap: 5px; padding: 8px; border-radius: 16px; border: none; font-size: 14px; cursor: pointer; } .wrapper_row_btn svg { display: block; width: 14px; height: 16px; } .slider-dots { display: none; justify-content: center; align-items: center; margin-top: 15px; gap: 8px; } .dot { width: 20px; height: 20px; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.3s; } .dot.active { background: #0C47A0; } /* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */ .advantage_slider { margin: 0; padding-top: 60px; padding-bottom: 60px; display:flex; justify-content:center; overflow: hidden; } .advantage_slider_items { margin: 0; display:flex; width: 100%; } .advantage_slider_item:not(:last-child) { margin-right: 28px; } .advantage_slider_item { position:relative; width:418px; height:637px; border-radius:30px; overflow: hidden; cursor:pointer; } /* Слой CLOSE */ .advantage_slider_close { position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; padding:40px; color:#fff; transition: opacity .35s ease; } .advantage_slider_item:hover { transform: scale(1.01); } .advantage_slider_close img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; } .slider_close_img { object-position: 72%; } .slider_item_wrapper { display: flex; height: 100%; flex-direction: column; justify-content: space-between; } .slider_item_wrapper-reverse { flex-direction: column-reverse; } .advantage_slider_close-shadow { display: block; height: 100%; width: 100%; position: relative; } .advantage_slider_close-shadow::before { display: block; position: absolute; content: ""; width: 100%; height: 100%; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.8) 15%, transparent 100%); z-index: 2; } /* Слой OPEN (по умолчанию спрятан и не перехватывает клики) */ .advantage_slider_open { position:absolute; inset:0; z-index:2; background-color: #fff; border-radius:30px; opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .35s ease, transform .35s ease; padding:40px; display:flex; } .slider_item_inner { display:flex; flex-direction:column; justify-content:space-between; width:100%; } .advantage_slider_item.active .slider_item_inner-reverse { flex-direction: column-reverse; } .advantage_slider_item.active .slider_item_title-reverse { padding-bottom: 30px; border-bottom: 1px solid #939393; } /* Активная карточка */ .advantage_slider_item.active .advantage_slider_open { opacity:1; transform:translateY(0); pointer-events:auto; } .advantage_slider_item.active .advantage_slider_close { opacity:0; } /* простые стили текста */ .slider_item_index { margin: 0; width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:500; color: #fff; border:1px solid #fff; font-size: 20px; } .slider_item_index-reverse { color: #393939; border: 1px solid #939393; } .slider_item_title { margin: 0; color: #fff; font-size: 36px; font-weight: 600; } .slider_item_title-reverse { color: #fff; z-index: 20; } .item_inner_text { } .advantage_slider_item.active .slider_item_index { border:1px solid #939393; color: #393939; } .advantage_slider_item.active .item_inner_text { color: #939393; font-size: 18px; } .advantage_slider_item.active .slider_item_title-reverse { color: #393939; padding-top: 0; border-top: none; margin: 0; font-size: 36px; font-weight: 600; } .advantage_slider_item.active .slider_item_title { color: #393939; padding-top: 30px; border-top: 1px solid #939393; } .advantage_slider_item.active { border: 1px solid rgba(57, 57, 57, 0.5); } /* -----------------------------------------------OUR-SERVICES-------------------------------------------------------------------------------------- */ .our-services { } .our-services_heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } .our-services_heading_title { margin: 0; font-size: 74px; font-weight: 600; } .our-services_heading_text { margin: 0; font-size: 18px; font-weight: 500; margin-top: 15px; } .our-services_row { } .our-services_row_items { margin: 0; display: flex; justify-content: space-between; gap: 30px; height: 444px; } .our-services_row_item { display: flex; flex-direction: column; justify-content: space-between; width: 100%; margin: 0; background-color: #F4F4F4; border-radius: 33px; padding: 40px; } .our-services_item_01 { margin: 0; display: flex; justify-content: space-between; align-items: center; } .item_link { display: flex; align-items: center; justify-content: center; margin: 0; border: 1px solid #393939; padding: 8px; border-radius: 16px; } .our-services_item_01 svg { margin: 0; } .our-services_item_title { margin: 0; font-size: 36px; font-weight: 600; width: 80%; } .our-services_item_bottom { margin: 0; display: flex; align-items: end; justify-content: space-between; } .our-services_bottom_index { margin: 0; font-size: 158px; } .our-services_bottom_right { margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 15px; } .item_link_svg { margin: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #393939; border-radius: 50%; padding: 5px; } .item_link_svg svg { display: block; width: 23px; height: 23px; } /* -------------------------------------------FOOTER---------------------------------------------------- */ .footer { display: flex; justify-content: space-between; align-items: center; background: url("/images/footer_banner/seo_down.png") 100% 100% /cover; height: 546px; border-radius: 30px; padding: 40px 30px; width: 100%; margin-top: 40px; } .footer_content { margin: 0; } .footer_cont_heading { margin: 0; color: #fff; font-size: 52px; font-weight: 600; margin-bottom: 30px; } .footer_cont_text { color: #939393; font-size: 16px; font-weight: 500; margin-bottom: 15px; } .footer_cont_time { margin: 0; margin-bottom: 30px; width: 55%; } .cont_time_items { display: flex; justify-content: space-between; } .cont_time_item { margin: 0; display: flex; flex-direction: column; align-items: center; } .const_time_area { margin: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 25px 10px 50px 10px; } .time_area_first { margin: 0; width: 20px; height: 20px; background: linear-gradient(270deg, rgb(10, 61, 143) 15%, rgb(0, 174, 255) 100%); border-radius: 50%; } .time_area_second { margin: 0; width: 20px; height: 20px; background: linear-gradient(90deg, #0A3D8F 10%, #4FC3F7 100%); border-radius: 50%; } .time_item_index { margin: 0; padding: 10px; border-radius: 33px; background-color: #252B38; margin-bottom: 10px; } .item_index_color { display: block; font-size: 120px; background: linear-gradient(90deg, #0A3D8F 10%, #4FC3F7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .time_item_interval { color: #939393; font-size: 18px; font-weight: 500; } .footer_cont_info { margin: 0; color: #fff; font-size: 20px; font-weight: 500; margin-bottom: 25px; line-height: 1; width: 60%; } .footer_cont_button { display: flex; align-items: end; margin: 0; height: 100%; } .footer_cont_btn { margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px; border-radius: 16px; } .footer_chart { margin: 0; width: 404px; backdrop-filter: blur(15px); background-color: rgba(255, 255, 255, 0.349); height: 251px; border-radius: 33px; padding: 20px; position: relative; } .footer_chart_content { margin: 0; width: 60%; } .chart_cont_text { font-size: 12px; color: #fff; margin-bottom: 10px; } .chart_cont_title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 10px; } .chart_cont_text02 { display: flex; flex-direction: column; font-size: 12px; font-weight: 500; color: #fff; } .chart_cont_text02 span { display: block; margin: 0; font-size: 12px; font-weight: 500; color: #fff; margin-top: 1.5px; } .footer_chart_img { position: absolute; right: 40px; top: 60px; display: flex; justify-content: end; } .chart_img { margin: 0; display: block; width: 249px; height: 170px; } .dropdown-list { display: none; } .fotter_wrapper { height: 636px; } /* -------------------------------------------ADAPTIVE--------------------------------------------------------- */ /* ---------------------------------------------1200----------------------------------------------------------- */ @media (max-width: 1200px) { .wrapper { max-width: 1200px; } .header_nav_item-reverse { display: block; } .header_nav_link-reverse { display: flex; align-items: center; justify-content: center; gap: 5px; color: #0C47A0; } .header_nav_link-reverse span { display: block; color: #0C47A0; } .header_top { margin-right: 80px; margin-left: 80px; } .container { margin: 0 40px; } .header_body_heading { margin-right: 100px; } .row_info_heading { width: 50%; } .row_info_item { margin-right: 15px; height: 87px; } .advantage_slider_item { height: 527px; width: 352px; } .advantage_slider_items { gap: 26px; } .our-services_heading_text { width: 30%; } .our-services_row { width: 100%; } .our-services_row_item { padding: 25px; } .our-services_bottom_index { font-size: 140px; } .item_index_color { font-size: 100px; } .footer_chart { width: 340px; } .time_area_first { width: 15px; height: 15px; } .time_area_second { width: 15px; height: 15px; } .const_time_area { padding: 25px 5px 50px 5px; } .footer_cont_info { width: 70%; } .footer_cont_time { margin-bottom: 40px; } .footer_cont_info { margin-bottom: 40px; } .footer_chart { padding: 25px; } .blue-square { height: 100%; } .wrapper_row_first { margin-bottom: 0px; } .slider_row_container { width: 93%; } .accordion_title { margin-bottom: 80px; } .accordion_title { white-space: nowrap; } .dropdown-list { display: flex; justify-content: end; margin: 0; padding: 0; max-height: 0; opacity: 0; transition: all 0.4s ease; } .dropdown-list.show { max-height: 200px; opacity: 1; width: 100%; } .header_nav_item-show { margin: 0; display: flex; justify-content: center; align-items: center; } .dropdown-list_wrapper { display: flex; flex-direction: column; align-items: center; margin: 0; width: 160px; background-color: #F4F4F4; border-radius: 16px; } .header_top_list { margin-bottom: 10px; } .header_top { margin-bottom: 10px; } .accordion-item.active .item_wrapper { padding: 10px; } .header_body_about { max-width: 21%; } .wrapper_row_botton { margin-top: 0; } .wrapper_row_middle { padding: 10px 0; } .advantage_content { width: 50%; } .advantage_slider_close { padding: 30px; } .advantage_slider_open { padding: 30px; } .container { margin: 0 20px; } .accordion-item.active .blue-square { margin: 15px; } .header_nav_item-empty { display: none; } .header_nav_item-show { display: block; } .row_info_area { margin-right: 5px; } .slider_item_title { font-size: 32px; } .advantage_slider_item.active .slider_item_title-reverse { font-size: 32px; } .slider_item_index { font-size: 24px; } .heading_title_main { font-size: 62px; } .heading_title_main span { font-size: 62px; } .adv_cont_01, .adv_cont_02 { font-size: 16px; } .our-services_heading_title { font-size: 62px; } .our-services_heading_text { font-size: 16px; } .accordion-item.active .item_wrapper { padding: 15px; } } /* -------------------------------------------------------1100------------------------------------------------------------------------------------------ */ @media (max-width: 1100px) { .wrapper { max-width: 1100px; } .wrapper_row_botton { height: none; margin-top: 0; } .our-services_bottom_index { font-size: 130px; } .our-services_row_item { padding: 20px; } .item_link { white-space: nowrap; } .slider_row_container { width: 105%; } .header_nav_item { padding: 10px 0px; } .header_top { margin-right: 50px; margin-left: 50px; } .row_info_area { margin-right: 2px; } .advantage_slider_close { padding: 25px; } .advantage_slider_open { padding: 25px; } .advantage_content { width: 50%; } .item_index_color { font-size: 90px; } .footer_chart_content { width: 70%; } .wrapper_row_middle { padding: 8px 0; } .header_body_about { max-width: 23%; } .footer_chart_img { right: 20px; } .accordion-item.active .item_wrapper { padding: 8px; } .accordion-item { flex: 1.5; } .accordion-item.active { flex: 6.5; } .wrapper_row_middle { padding: 15px 0; } .slider_main { width: 50%; margin-right: 10px; } .accordion { width: 50%; } .accordion-item.active .item_wrapper { padding: 15px; } } /* ---------------------------------------------1000----------------------------------------------------- */ @media (max-width: 1000px) { .wrapper { max-width: 1000px; } .accordion-item.active .blue-square { margin: 15px; } .row_middle_title { font-size: 20px; } .row_middle_text { font-size: 14px; } .wrapper_row_middle { padding: 15px 0; } .header_body_heading { margin-right: 80px; } .header_body_about { max-width: 25%; } .header_top_item { padding: 10px; } .header_call { gap: 10px; } .row_info_item { margin-right: 10px; } .advantage_content { width: 40%; } .advantage_slider_close { padding: 25px; } .our-services_row_item { padding: 15px; } .our-services_row_items { height: 340px; } .our-services_item_title { font-size: 30px; } .our-services_bottom_index { font-size: 100px; } .footer_chart { padding: 20px; } .footer_chart_img { right: 10px; top: 55px; } .item_index_color { font-size: 80px; } .header_body_heading { font-size: 50px; } .row_container_area-empty { display: none; } .row_info_item svg { width: 20px; height: 20px; } .info_content_second { font-size: 22px; } .adv_cont_01, .adv_cont_02 { font-size: 14px; } .advantage_content { width: 45%; } .slider_item_title { font-size: 28px; } .slider_item_index { font-size: 22px; } .advantage_slider_item.active .slider_item_title-reverse { font-size: 28px; } .our-services_heading_title { font-size: 57px; } .our-services_row_item { padding: 20px; } .our-services_item_title { font-size: 26px; } } /* --------------------------------------------------MOBILE----------------------------------------------------------- */ /* ---------------------------------------------------970---------------------------------------------------------- */ @media (max-width: 970px) { .wrapper { max-width: 970px; } .slider { flex-direction: column; height: auto; gap: 20px; } .slider_main { height: 348px; width: 100%; margin-right: 0; padding: 25px; } .row_container_area-reverse { display: block; } .accordion { margin: 0; width: 100%; } .accordion-item.active { flex: 15; } .accordion-item.active .item_wrapper { padding: 20px; } .accordion-item.active .blue-square { margin: 20px; } .slider_row_index { font-size: 30px; } .slider_row_1 { width: 100%; } .row_container_item { font-size: 16px; } .slider_row_title { font-size: 16px; } .slider_row_title svg { width: 29px; height: 30px; } .item_wrapper_index { font-size: 30px; } .item_wrapper_icon { padding: 25px; } .row_middle_title { font-size: 30px; } .row_middle_text { font-size: 24px; } .wrapper_row_middle { padding: 15px 0; } .wrapper_row_btn { padding: 10px; font-size: 16px; } .wrapper_row_btn svg { width: 20px; height: 18px; } .header_body_heading { margin-right: 30px; } .accordion_about_info { width: 100%; margin-bottom: 60px; } .info_list_item { padding: 0px 60px; } .header_row_info { flex-direction: column; } .row_info_heading { width: 100%; } .row_info_heading { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } .row_info_item { margin-right: 30px; height: 129px; } .row_info_list { padding: 30px; } .advantage_slider_item { height: 450px; width: 300px; } .advantage_slider_close { padding: 20px; } .advantage_slider_open { padding: 20px; } .slider_item_title { font-size: 26px; } .advantage_slider_item.active .slider_item_title-reverse { font-size: 26px; } .slider_item_index { width: 55px; height: 55px; } .advantage_slider_item.active .slider_item_title-reverse { padding-bottom: 15px; } .advantage_slider_item.active .slider_item_title { padding-top: 15px; } .advantage_slider_item.active .item_inner_text { font-size: 16px; } /* Прячем меню по умолчанию */ .header_top_wrapper-open .header_nav_top { display: none; flex-direction: column; gap: 20px; background: #fff; position: absolute; top: 60px; right: 0; width: 100%; padding: 20px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .header_top_wrapper-open { display: flex; align-items: center; justify-content: space-between; } .logo_link { margin: 0; } /* Показываем при активном состоянии */ .header_top_wrapper-open .header_nav_top.active { display: flex; justify-content: space-between; } /* Анимация кнопки (три полоски) */ .burger_menu_btn.active { transition: all .3s; } .burger_menu_btn svg:hover { transform:scale(1.1); } .burger_menu_btn svg{ height: 30px; width: 30px; } /* Блокировка прокрутки */ body.lock { overflow: hidden; } .header_top_wrapper { display: none; } .logo_link { } .burger_menu_btn { background: none; margin: 0; } .header_call_btn { display: none; } .header_tel_link { display: none; } .header_call_tel { cursor: pointer; width: 36px; height: 36px; } .call_btn svg{ width: 26px; height: 26px; margin: 0; } .logo_link { margin-left: 10px; } .header_top_item { padding: 15px; border-radius: 33px; } .top_list_btn svg { margin: 0; } .header_top { margin-right: 80px; margin-left: 80px; } .container { margin: 0 40px; } .header_top_list-active { display: block; max-height: 0; overflow: hidden; transition: all 0.4s; } .header_top_list-active.open { max-height: 500px; /* подстрой под высоту меню */ } .header_nav_burger { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .header_nav_burger.open { margin: 0; max-height: 500px; padding: 10px 0; /* подстрой под контент */ } .header_nav { display: none; } .header_top_list { display: flex; flex-direction: column; align-items: center; } .top_list_btn_burger { width: 100%; } .top_list_btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 100%; padding: 15px 0; background: #F4F4F4; border: none; border-radius: 33px; font-weight: 500; cursor: pointer; } .top_list_btn svg { pointer-events: none; /* чтобы клик шел по кнопке, а не по svg */ } .header_nav_item { display: flex; border-radius: 33px; } .dropdown-list { display: none; } .header_top_list_active { width: 100%; margin: 0; display: flex; flex-direction: column; justify-content: center; } .header_nav_burger.open { display: flex; width: 100%; flex-direction: column; } .header_top { margin-bottom: 30px; } .footer_chart_content { width: 100%; } .header_nav_item { margin: 0; padding: 10px 0; } .header_nav_link { display: flex; align-items: center; justify-content: center; padding: 13px 0px; width: 500px; background-color: #F4F4F4; border-radius: 33px; } .footer_chart_img { right: 19px; top: 75px; } .chart_img { width: 215px; height: 150px; } .our-services_row_item { padding: 20px; } .our-services_row_items { gap: 15px; } .our-services_item_01 svg { padding: 5px; } .item_index_color { font-size: 65px; } .footer_cont_heading { font-size: 44px; } .footer_cont_info { font-size: 18px; } .chart_cont_title { font-size: 18px; } .accordion_index { font-size: 30px; padding: 10px; } .accordion-item { flex: 1.8; } .accordion_title { font-size: 18px; margin-bottom: 70px; } .info_list_item { white-space: nowrap; } .header_body_heading { font-size: 44px; } .header_body_heading { margin-right: 0; font-size: 38px; } .header_body_about { max-width: 30%; } .row_container_area-empty { display: block; } .info_heading_title { font-size: 32px; } .heading_title_main { font-size: 52px; } .heading_title_main span { font-size: 52px; } .advantage_slider_close { padding: 25px; } .slider_item_title { font-size: 24px; } .advantage_slider_item.active .slider_item_title-reverse { font-size: 24px; } .advantage_slider_open { padding: 25px; } .our-services_row_item { padding: 20px; } } /* ----------------------------------------------------900---------------------------------------------------------- */ @media (max-width: 900px) { .wrapper { max-width: 900px; } .row_container_item { font-size: 14px; } .slider_row_title { font-size: 15px; } .header_body_top { flex-direction: column; gap: 30px; } .header_body_about { margin: 0; max-width: 50%; margin-left: 350px; } .header_about_text { font-size: 20px; } .header_body_about span { font-size: 20px; } .header_about_img { margin: 8px 0; width: 25px; height: 25px; } /* ---------------------------------------------------------------------------------------------------------- */ .advantage_slider { width: 100%; position: relative; } .advantage_slider_items { width: 100%; display: flex; } .advantage_slider_item { width: 342px; height: 518px; flex: 0 0 100%; max-width: 100%; border-radius: 30px; } .advantage_slider_item:hover { transform: none; } .slider_item_wrapper { width: 100%; margin: 0; } .advantage_slider_close { padding: 60px; } .slider_dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } .slider_dot { width: 20px; height: 20px; border-radius: 50%; background: #ccc; transition: background 0.3s ease, transform 0.3s ease; cursor: pointer; } .slider_dot.active { background: #0C47A0; } .slider_item_title { font-size: 50px; } .advantage_slider_item.active .slider_item_title-reverse { font-size: 50px; } .slider_item_index { width: 85px; height: 85px; font-size: 30px; border: 2px solid #fff; } .advantage_slider_open { padding: 60px; } .advantage_slider_item.active .slider_item_index { border: 2px solid #939393; } .advantage_slider_item.active .item_inner_text { font-size: 24px; } .slider_item_index-reverse { border: 2px solid #939393; } /* -------------------------------------------------------------------------- */ .advantage { flex-direction: column; gap: 40px; } .advantage_content { width: 100%; } .row_info_list { flex-direction: row; gap: 30px; flex-wrap: wrap; } .row_info_item { width: 40%; margin-right: 0px; height: 200px; } .row_info_area { margin-right: 20px; padding: 15px; } .row_info_area svg { width: 28px; height: 28px; } .info_content_first { font-size: 20px; } .info_content_second { font-size: 30px; } .header_row_info { margin-bottom: 40px; } .info_list_item { padding: 0; } .advantage_slider { margin-bottom: 40px; } .info_heading_title { font-size: 42px; } .heading_title_sub { font-size: 24px; } .adv_cont_01, .adv_cont_02 { font-size: 20px; } /* ---------------------------------------------------------------------------------- */ .our-services_row { position: relative; overflow: hidden; padding-bottom: 60px; } .our-services_row_items { display: flex; transition: transform 0.5s ease; gap: 0; width: 125%; } .our-services_row_item { flex: 0 0 100%; max-width: 100%; border-radius: 24px; } /* точки */ .our-services_dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; } .our-services_dot { width: 20px; height: 20px; border-radius: 50%; background: #ccc; transition: background 0.3s ease, transform 0.3s ease; cursor: pointer; } .our-services_dot.active { background: #0C47A0; } .our-services_item_01 svg { padding: 0; width: 80px; height: 80px; } .our-services_row_item { padding: 40px; max-width: 80%; } .item_link { font-size: 20px; } .our-services_item_title { font-size: 36px; } .our-services_bottom_index { font-size: 120px; } .item_link_svg svg { width: 26px; height: 26px; } .footer_cont_heading { font-size: 40px; } .item_index_color { font-size: 50px; } .time_item_interval { font-size: 14px; } .footer { height: 480px; } .footer_chart { width: 400px; } .header_body_heading { font-size: 50px; } .accordion-item.active { flex: 13; } .row_middle_text { font-size: 20px; } .row_middle_title { font-size: 24px; } .advantage_slider { justify-content: flex-start; overflow: hidden; } .advantage_slider_items { justify-content: flex-start; transition: transform .4s ease; will-change: transform; } .advantage_slider_item { flex: 0 0 100%; max-width: 100%; } } /* -----------------------------------------------800--------------------------------------------------------------------- */ @media (max-width: 800px) { .wrapper { max-width: 800px; } .header_body_about { margin-left: 250px; min-width: 59%; } .row_container_area-empty { display: none; } .slider_row_container { width: 100%; } .row_middle_text { font-size: 20px; } .row_middle_title { font-size: 28px; } .wrapper_row_btn { padding: 8px; font-size: 14px; } .accordion-item { flex: 2; } .row_info_item { height: 180px; } .advantage_slider_item.active .item_inner_text { font-size: 22px; } .slider_item_title { font-size: 40px; } .advantage_slider_item.active .slider_item_title-reverse { font-size: 40px; } .header_nav_link { width: 380px; } .footer { flex-direction: column; height: max-content; gap: 30px; } .item_index_color { font-size: 100px; } .footer_cont_heading { font-size: 48px; } .time_item_interval { font-size: 16px; } .footer_cont_info { font-size: 22px; } .footer_cont_info { margin-bottom: 30px; } .footer_cont_time { margin-bottom: 30px; } .footer_chart_img { right: 62px; top: 55px; } .chart_img { width: 260px; height: 170px; } .footer_chart_content { width: 65%; } .footer_chart { padding: 30px; } .accordion-item { flex: 2.7; } .accordion-item.active { flex: 16; } .row_middle_title { font-size: 26px; } .row_middle_text { font-size: 18px; } } /* ---------------------------------------------------700----------------------------------------------------------------------- */ @media (max-width: 700px) { .wrapper { max-width: 700px; } .header_nav_link { width: 320px; } .header_body_about { margin-left: 190px; min-width: 70%; } .header_body_heading { margin-right: 0; } .slider_row_container { width: 85%; } .row_container_area-empty { display: block; } .row_container_area-reverse { display: none; } .slider_row_title { font-size: 14px; } .slider_row_index { font-size: 25px; } .item_wrapper_index { font-size: 25px; } .accordion_index { font-size: 25px; } .accordion-item { flex: 3; } .row_middle_title { font-size: 22px; } .row_middle_text { font-size: 16px; } .item_wrapper_icon { padding: 20px; } .accordion_title { font-size: 18px; } .accordion_title { margin-bottom: 70px; } .row_info_heading { align-items: start; } .info_heading_title { margin: 0; width: 100%; margin-bottom: 25px; } .row_info_item { height: 120px; } .row_info_item { margin: 0; margin-right: 0; width: 46%; } .row_info_list { padding: 0; } .our-services_heading { flex-direction: column; align-items: start; } .our-services_heading_text { width: 100%; } .item_index_color { font-size: 80px; } .footer_cont_heading { font-size: 42px; } .adv_cont_01, .adv_cont_02 { font-size: 18px; } .our-services_item_title { font-size: 32px; } } /* ----------------------------------------------------600---------------------------------------------------------------- */ @media (max-width: 600px) { .wrapper { max-width: 600px; } .header_nav_link { width: 280px; } .accordion_index { font-size: 15px; } .slider_row_index { font-size: 15px; } .item_wrapper_index { font-size: 15px; } .accordion_title { font-size: 14px; } .accordion_title { margin-bottom: 80px; } .item_wrapper_icon { padding: 15px; } .slider_item_index { width: 65px; height: 65px; font-size: 25px; } .advantage_slider_item.active .item_inner_text { font-size: 18px; } .slider_item_title { font-size: 32px; } .advantage_slider_item.active .slider_item_title-reverse { font-size: 32px; } .our-services_row_items { height: 380px; } .footer_cont_heading { font-size: 35px; } .item_index_color { font-size: 60px; } .footer_cont_info { font-size: 20px; width: 100%; } .header_body_about { min-width: 65%; } .header_nav_link { width: 230px; } .slider_row_index { font-size: 30px; } .slider_row_title { font-size: 16px; } .item_wrapper_index { font-size: 30px; } .item_wrapper_icon { padding: 25px; } .row_middle_title { font-size: 30px; } .row_middle_text { font-size: 20px; } .wrapper_row_btn { font-size: 16px; } .accordion_about_info-empty { display: none; } .accordion_about_info-open { display: block; } .accordion_about_info { margin: 0; } .info_list_item { font-size: 12px; } .our-services_heading_text { display: flex; justify-content: end; } .info_heading_title { margin-top: 20px; } .header_body_heading { font-size: 45px; } .info_heading_title { font-size: 36px; } .info_list_item { font-size: 11px; } /* ------------------------------------------------------------ */ .accordion { flex-direction: column; width: 100%; height: 348px; } .accordion-item { width: 100%; height: auto; } .row_info_area { margin-right: 10px; padding: 10px; } } /* ---------------------------------------------------500----------------------------------------------------- */ @media (max-width: 500px) { .wrapper { max-width: 500px; } .header_nav_link { width: 200px; } .header_body_heading { font-size: 44px; } .header_about_text { font-size: 18px; } .header_body_about span { font-size: 18px; } .header_about_img { width: 20px; height: 20px; } .header_body_about { margin-left: 125px; } .header_body_about { min-width: 70%; } .slider_row_container { width: 100%; } .row_container_area-empty { display: none; } .slider_row_title { font-size: 14px; } .slider_row_index { font-size: 25px; } .item_wrapper_index { font-size: 25px; } .row_middle_title { font-size: 28px; } .item_wrapper_icon { padding: 20px; } .info_content_first { font-size: 16px; } .info_content_second { font-size: 24px; } .heading_title_main { font-size: 50px; } .heading_title_main span { font-size: 50px; } .heading_title_sub { font-size: 22px; } .adv_cont_01, .adv_cont_02 { font-size: 18px; } .our-services_heading_title { font-size: 50px; } .our-services_heading_text { font-size: 16px; } .item_link { font-size: 18px; } .our-services_item_01 svg { width: 60px; height: 60px; } .our-services_item_title { font-size: 32px; } .our-services_bottom_index { font-size: 110px; } .footer_cont_heading { font-size: 30px; } .item_index_color { font-size: 45px; } .time_area_first { margin-top: -10px; } .time_area_second { margin-top: 10px; } .time_item_interval { font-size: 14px; } .footer_cont_info { font-size: 16px; } .footer_chart_img { right: 40px; } .footer_chart { width: 100%; } .info_list_item { font-size: 11px; } .header_body_heading { font-size: 42px; } .adv_cont_01, .adv_cont_02 { font-size: 16px; } .advantage_slider_close { padding: 40px; } .advantage_slider_open { padding: 40px; } .our-services_heading_title { font-size: 46px; } .our-services_item_title { font-size: 28px; } .footer_cont_heading { margin-bottom: 20px; } .footer_cont_time { margin-bottom: 5px; } .footer_cont_info { margin-bottom: 20px; } .footer { gap: 25px; padding: 30px; } .info_list_item { font-size: 10px; } } /* ----------------------------------------------------450--------------------------------------------------------------- */ @media (max-width: 450px) { .wrapper { max-width: 450px; } .header_nav_link { width: 190px; } .header_body_heading { font-size: 33px; } .header_body_about span { font-size: 16px; } .header_about_text { font-size: 16px; } .slider_row_title { font-size: 16px; } .info_list_item { font-size: 9px; } .row_middle_title { font-size: 24px; } .row_middle_text { font-size: 18px; } .row_info_list { gap: 29px; } .heading_title_main { font-size: 36px; } .heading_title_main span { font-size: 36px; } .heading_title_sub { font-size: 18px; } .adv_cont_01, .adv_cont_02 { font-size: 16px; } .advantage_slider_close { padding: 40px; } .slider_item_title { font-size: 28px; } .advantage_slider_item.active .item_inner_text { font-size: 16px; } .advantage_slider_item.active .slider_item_title-reverse { font-size: 28px; } .advantage_slider_open { padding: 40px; } .our-services_heading_title { font-size: 36px; } .our-services_heading_text { font-size: 14px; } .our-services_row_item { padding: 25px; } .item_link { font-size: 16px; } .item_link_svg { padding: 4px; } .item_index_color { font-size: 32px; } .footer_cont_heading { font-size: 26px; } .chart_img { width: 230px; height: 150px; } .footer_chart_img { right: 35px; top: 75px; } .footer_chart_content { width: 80%; } .footer_chart { padding: 25px; } .info_heading_title { font-size: 34px; } .row_info_area { margin-right: 5px; } .info_content_first { font-size: 14px; } .info_content_second { font-size: 22px; } .container { margin: 0px 20px; } .header_top { margin-right: 40px; margin-left: 40px; } .time_area_first { width: 10px; height: 10px; } .time_area_second { width: 10px; height: 10px; } .const_time_area { padding: 22px 5px 50px 5px; } } /* ----------------------------------------------400------------------------------------------------------------- */ @media (max-width: 400px) { .wrapper { max-width: 400px; } .row_container_area-mobile { display: none; } .header_body_heading { font-size: 30px; } .row_info_list { gap: 20px; } .slider_row_container { width: 60%; } .row_container_area { display: none; } .row_container_item { white-space: nowrap; } .slider_row_index { font-size: 20px; } .item_wrapper_index { font-size: 20px; } .row_middle_title { font-size: 22px; } .row_info_area { margin-right: 0px; } .footer_chart_img { right: 20px; } .advantage_slider_close { padding: 35px; } .advantage_slider_open { padding: 35px; } .info_list_item { font-size: 8px; } .footer_cont_heading { font-size: 24px; } .item_index_color { font-size: 24px; } .footer_cont_info { font-size: 14px; } .footer_cont_text { font-size: 14px; } .time_item_interval { font-size: 12px; } .footer_cont_btn { padding: 8px; font-size: 12px; } .chart_cont_title { font-size: 16px; } .chart_cont_text02, .chart_cont_text02 span { font-size: 10px; } .footer_chart { padding: 20px; } .footer_chart_img { right: 10px; } } /* -----------------------------------------350------------------------------------------------ */ @media (max-width: 350px) { .wrapper { max-width: 350px; } .footer_cont_heading { font-size: 22px; } .item_index_color { font-size: 25px; } .footer_cont_info { font-size: 14px; } .chart_cont_title { font-size: 16px; } .footer_cont_btn { padding: 8px; } .chart_img { width: 200px; height: 130px; } .footer_chart_img { right: 23px; top: 90px; } }