html, body, * { font-family: "Roboto", sans-serif; font-weight: 400; font-size: 14px; color: #393939; margin: 0 auto; } .wrapper { max-width: 1320px; } /* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */ .header_top { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-right: 60px; margin-left: 60px; margin-bottom: 30px; } .header_top_inner { margin: 20px 0; margin: 0 auto; width: 100%; } .header_top_wrapper { display: flex; } .header_top_list { display: flex; } .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_top_list { margin: 20px 0; } .header_nav { display: flex; justify-content: space-between; background-color: #F4F4F4; border-radius: 16px; width: 100%; } .header_nav_item { display: block; justify-content: space-between; align-items: center; white-space: nowrap; padding: 10px 16px; } .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 { 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_row_info { display: flex; align-items: center; margin: 0; margin-bottom: 60px; } .row_info_heading { margin: 0; width: 30%; } .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: 70%; justify-content: space-between; gap: 30px; align-items: center; } .row_info_item { display: flex; align-items: center; border-radius: 30px; background-color: #F4F4F4; padding: 35px 30px; margin: 0; width: 100%; } .row_info_area { padding: 10px; border-radius: 50%; border: 1px solid #fff; margin: 0; margin-right: 15px; } .row_info_item svg { 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; } .slider_row { } .slider_row_1 { margin: 0; width: 80%; } .slider_row_container { width: 73%; 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; } .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; margin: 0 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_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: 100%; 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; margin-bottom: 15px; } .wrapper_row_botton { margin: 0; height: 20%; } .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; } /* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */ .advantage_slider { margin: 0; padding-top: 60px; padding-bottom: 60px; display:flex; justify-content:center; } .advantage_slider_items { margin: 0; display:flex; gap: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: 10px; border-radius: 16px; height: 29px; } .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; gap: 5px; height: 29px; margin-bottom: 15px; } .our-services_item_bottom svg { margin: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #393939; border-radius: 50%; padding: 5px; height: 29px; width: 29px; } /* -------------------------------------------FOOTER---------------------------------------------------- */ .footer { margin: 0; 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; width: 55%; } .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-bottom: 30px; } .cont_time_items { display: flex; justify-content: space-between; } .cont_time_item { margin: 0; display: flex; flex-direction: column; align-items: center; } .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; }