/* ОБЩИЕ ЭЛЕМЕНТЫ, КОТОРЫМ МЫ ПИШЕМ СТИЛИ */ html, body { font-size: 16px; font-family: Lato, sans-serif; color: #424551; line-height: 160%; } .wrapper { /* дает растягивание от контента, по умолчанию равен высоте body */ min-height: 100%; height: auto; width: 100%; /* если ширина контента превышает ширину вью-борта, то оверфлоу-хидден его обрезает, также убирает ползунок */ overflow: hidden; } .container { /* контент будет ограничен по ширине, в фигме 1230px и плюс заложили padding 30px */ max-width: 1260px; padding: 0 15px; /* делаем по середине страницы контент, 0 это сверху и снизу, auto это справа и слева */ margin: 0 auto; /* сделали контейнер на всю длину экрана */ height: 100%; } .main_about { padding: 180px 0 160px; } .main_directions { padding-bottom: 180px; } .main_cert { margin-bottom: -46px; } .button { display: inline-block; letter-spacing: 0.5px; line-height: 52px; font-weight: 700; padding: 0 40px; color: white; border-radius: 4px; background: var( --btn-gradient, linear-gradient(56deg, #ff3f3a 0%, #f75e05 100%) ); transition: all 0.3s; } .button:hover { transform: scale(1.05); } .button--empty { background-image: none; border-left: 2px solid #ff3f3a; border-right: 2px solid #f75e05; background-image: -webkit-linear-gradient(left, #ff3f3a, #f75e05), -webkit-linear-gradient(left, #ff3f3a, #f75e05); background-image: linear-gradient(left, #ff3f3a, #f75e05), linear-gradient(left, #ff3f3a, #f75e05); background-size: 100% 2px; background-position: 0 100%, 0 0; background-repeat: no-repeat; background-clip: border-box; } .button--empty span { background: linear-gradient(55.95deg, #ff3f3a 0%, #f75e05 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .logo { } .heading { color: #1e212c; } .heading_subtitle { line-height: 1.5; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 8px; } .heading_title { font-weight: 900; font-size: 46px; line-height: 1.3; } .overlay { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.349); z-index: 50; visibility: hidden; opacity: 0; transition: all .3s; } .overlay--show { opacity: 1; visibility: visible; } /* ------------------------------HEADER TOP----------------------------------------------------------- */ .header { font-weight: 700; background: url("./images/1/shapes.svg") 0 0 / cover no-repeat, linear-gradient( 56deg, rgba(255, 63, 58, 0.2) 0%, rgba(247, 94, 5, 0.2) 100% ); height: 100vh; display: flex; flex-direction: column; } .header_top { } .header_top_inner { display: flex; justify-content: space-between; padding: 20px 0; align-items: center; } .header_logo { margin-right: 60px; } .header_nav { margin-right: auto; } .header_nav-list { display: flex; } .header_nav_item { margin-right: 40px; } .header_nav_item:last-child { margin-right: 0; } .header_nav_link { line-height: 1.6; color: #424551; white-space: nowrap; transition: all 0.2s; } .header_nav_link:hover { color: #ff3f3a; } .header_btn_box { display: flex; align-items: center; } .haeder_top_btn { margin-right: 36px; } .header_user-nav { position: relative; padding-left: 28px; line-height: 1.6; } .header_user_btn:hover { color: #ff3f3a; } .header_user-nav:before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; background: url("./images/1/Profile.svg") no-repeat; width: 20px; height: 20px; } .header_user_btn { white-space: nowrap; line-height: 1.6; transition: all 0.2s; } /* ------------------------------HEADER BODY--------------------------------------- */ .header_body { flex-grow: 1; } .header_body_inner { display: flex; flex-direction: column; height: 100%; } .header_main { display: flex; justify-content: space-between; align-items: center; color: #1e212c; margin: auto 0; } .header_content { margin-right: 30px; } .header_play { } .header_play_btn { display: inline-flex; align-items: center; } .header_play_btn svg { margin-right: 16px; border-radius: 50%; transition: all 0.3s; } .header_play_btn svg:hover { box-shadow: 0 0 0px 16px rgba(255, 63, 58, 0.12); } .header_title { font-size: 64px; font-weight: 900; line-height: 1.3; letter-spacing: 1px; max-width: 496px; margin-bottom: 60px; } .header_content-buttons { display: flex; } .header_content_btn { margin-right: 24px; } .header_content_btn:last-child { margin-right: 0px; } .header_row { display: flex; justify-content: space-between; align-items: center; color: #1e212c; margin-bottom: 80px; } .header_row > span { background-color: #ff3f3a; height: 8px; width: 8px; border-radius: 50%; margin: 0 15px; } .header_row_item span { font-size: 46px; font-weight: 900; line-height: 1.3; margin-right: 12px; } .header_row_item { display: flex; align-items: center; } /* ------------------------MAIN-CREATEX------------------------- */ .about { } .container { } .about_inner { } .about_createx { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 180px; position: relative; } .about_createx::before { content: ""; position: absolute; top: -80px; right: -140px; background: url("./images/2/decor/shapes.svg"); width: 100px; height: 85px; } .about_createx_content { max-width: 600px; margin-right: 30px; } .about_heading { margin-bottom: 48px; } .about_text { margin-bottom: 60px; } .about_paragraph--accent { font-size: 20px; font-weight: 700; line-height: 1.5; color: #1e212c; } .about_paragraph { margin-bottom: 24px; } .about_paragraph:last-child { margin-bottom: 0; } .about_btn_box { display: flex; } .about_btn { margin-right: 24px; } .about_btn:last-child { margin-right: 0; } .about_img { } .about_values { } /* -----------------------MAIN-VALUES---------------------------------- */ .about_values { display: flex; justify-content: space-between; } .about_image_box { border-radius: 4px; overflow: hidden; } .about_image_box img { width: 100%; height: 100%; object-fit: cover; } .about_numbers { margin-left: 30px; align-self: center; white-space: nowrap; } .about_number span { font-size: 48px; font-weight: 900; line-height: 1.3; letter-spacing: 1px; color: #ff3f3a; margin-right: 16px; } .about_number { display: flex; align-items: center; margin-bottom: 20px; } .about_number:last-child { margin-bottom: 0; } /* -------------------------MAIN-DIRECTIONS---------------------------- */ .directions { } .directions_inner { } .directions_inner::after { } .directions_heading { margin-bottom: 90px; text-align: center; } .directions_body { } .directions_filter_box { display: flex; flex-wrap: wrap; margin-bottom: 40px; } .directions_filter_item { margin-right: 45px; margin-bottom: 15px; } .directions_filter_item:last-child { margin-right: 0; } .directions_filter_btn { display: block; font-size: 16px; font-weight: 700; line-height: 1; color: #9a9ca5; border: 1px solid #9a9ca5; border-radius: 4px; padding: 5px 8px; background: transparent; white-space: nowrap; } .directions_filter_btn--active { background: linear-gradient(56deg, #ff3f3a 0%, #f75e05 100%); border: none; color: white; padding: 6px 8px; } .directions_list { display: grid; grid-template: repeat(2, auto) / repeat(3, 1fr); gap: 30px; } .directions_list_item { display: block; border: 1px solid #e5e8ed; border-radius: 4px; overflow: hidden; transition: all 1s; } .directions_list_link { display: block; border-radius: 4px; overflow: hidden; } .directions_list_item:hover { box-shadow: 0px 80px 80px -20px rgba(154, 156, 165, 0.08), 0px 30px 24px -10px rgba(154, 156, 165, 0.05), 0px 12px 10px -6px rgba(154, 156, 165, 0.04), 0px 4px 4px -4px rgba(30, 33, 44, 0.03); transition: all 0.3s; } .directions_list_link:hover .directions_link_btn { color: #ff3f3a; transition: all 0.3s; } .directions_image_box { } .directions_image_box img{ height: 100%; width: 100%; } .directions_link_content { padding: 24px; display: flex; flex-direction: column; } .directions_link_tag { font-weight: 700; line-height: 1; color: white; background-color: #0d39eb; padding: 6px 8px; border-radius: 4px; align-self: flex-start; margin-bottom: 20px; } .directions_link_text { color: #787a80; font-weight: 400; line-height: 1.6; margin-bottom: 20px; } .directions_link_btn { color: #1e212c; display: flex; font-weight: 700; transition: all 1s; } .directions_link_btn img { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; padding: 6px; } .directions_link_btn:hover { color: #ff3f3a; transition: all 0.3s; } .directions_list_item--empty { background: #F4F5F6; color: #424551; font-size: 20px; font-weight: 700; line-height: 1.5; text-align: center; display: flex; align-items: center; justify-content: center; } .directions_list_item--empty span { max-width: 242px; } .directions_list_item--marketing .directions_link_tag { background-color: #03CEA4; } .directions_list_item--management .directions_link_tag { background-color: #5A87FC; } .directions_list_item--hr .directions_link_tag { background-color: #F89828; } .directions_list_item--design .directions_link_tag { background-color: #F52F6E; } .directions_list_item--development .directions_link_tag { background-color: #7772F1; } .directions_list_item--empty .directions_link_tag { background-color: #fff; } /* ------------------------------------MAIN CERTIFICATE------------------------------------------------- */ .cert { margin-top: 180px; } .cerf_inner { display: flex; justify-content: space-between; } .cert_content { margin-right: 30px; } .cert_contect_textlogo { } .cert_heading { margin-bottom: 50px; } .cert_text { margin-bottom: 30px; } .cert_logos { display: flex; } .cert_logos-item { margin-right: 40px; } .cert_logos-item:last-child { margin-right: 0; } .cert_image-box { box-shadow: 0 80px 80px -20px rgba(154, 156, 165, 0.16), 0 30px 24px -10px rgba(154, 156, 165, 0.10), 0 12px 10px -6px rgba(154, 156, 165, 0.08), 0 4px 4px -4px rgba(30, 33, 44, 0.05); object-fit: contain; } .cert_image-box img { width: 100%; height: 100%; } /* ------------------------------MAIN SLIDER----------------------------------- */ .main_team { padding: 160px 0 180px; background: #F4F5F6; } .team { } .team_inner { } .team_heading { margin-bottom: 60px; position: relative; } .team_slider .slick-list { margin: 0 -15px; } .team_slide { padding: 0 15px; } .team_slide:hover { } .team_slide_inner { } .team_image_box { border-radius: 4px; margin-bottom: 16px; overflow: hidden; position: relative; } .team_image { position: relative; height: 340px; } .team_image img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } .team_socials { position: absolute; top: 50%; bottom: 0; left: 0; right: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 20px; background: linear-gradient(180deg, rgba(30, 33, 44, 0.00) 43.9%, rgba(30, 33, 44, 0.03) 55.21%, rgba(30, 33, 44, 0.33) 68.73%, rgba(30, 33, 44, 0.56) 76.17%, rgba(30, 33, 44, 0.77) 83.75%, rgba(30, 33, 44, 0.92) 91.49%, #1E212C 100%); transform: translateY(50%); transition: all .3s; } .team_slide:hover .team_socials { transform: translateY(0%); } .team_socials_item { margin-right: 12px; } .team_socials_item:last-child { margin-right: 0; } .team_socials_link{ display: block; line-height: 0; } .team_socials_link path{ transition: all .3s; } .team_socials_link:hover path{ fill: #fff; } .team_info { text-align: center; } .team_info_name { font-size: 20px; font-weight: 700; line-height: 1.5; color: #424551; margin-bottom: 4px; } .team_info_position { font-size: 16px; font-weight: 400; line-height: 1.6; color: #787A80; } .team_slider_arrows { position: absolute; right: 0; bottom: 0; display: flex; } .team_slider_arrow { display: flex; border-radius: 50%; transition: all .3s; } .team_slider_arrow:hover { background-color: #FF3F3A; } .team_slider_arrow path { transition: all .3s; } .team_slider_arrow:hover path { fill: white; } .team_slider-prev { margin-right: 12px; height: 48px; width: 48px; justify-content: center; align-items: center; } .team_slider-next { height: 48px; width: 48px; justify-content: center; align-items: center; } .team_slider_arrows .slick-prev { } /* --------------------------------MAIN TESTIMONIALS--------------------------------------------- */ .main_testimonials { padding-bottom: 195px; } .testimonials { background: #F4F5F6; } .testimonials_inner { } .testimonials_heading { text-align: center; margin-bottom: 60px; color: #1E212C; } .testimonials_slider_wrapper { padding: 0 50px; position: relative; margin-bottom: 50px; } .testimonials_slider { max-width: 1020px; margin: 0 auto; } .testimonials_slide { padding: 64px; background: white; border-radius: 4px; } .testimonials_slide_inner { max-width: 810px; margin: 0 auto; padding-left: 58px; } .testimonials_quote { font-size: 20px; font-weight: 400; line-height: 1.5; color: #424551; margin-bottom: 24px; position: relative; } .testimonials_quote::before { content: ""; position: absolute; top: 0; left: -58px; background: url('./images/3/braces.svg') 0 0 / 100% no-repeat; height: 20px; width: 28px; } .testimonials_user { display: flex; align-items: center; } .testimonials_user_avatar { border-radius: 50%; overflow: hidden; margin-right: 20px; } .testimonials_info { } .testimonials_info_name { font-size: 16; font-weight: 700; line-height: 1.6; color: #1E212C; margin-bottom: 4px; } .testimonials_info_position { font-size: 14px; font-weight: 400; line-height: 1.5; } .testimonials_arrow path { transition: all .3s; } .testimonials_arrow { display: flex; border-radius: 50%; transition: all .3s; position: relative; transform: translateY(-50%); } .testimonials_arrow:hover { background-color: #FF3F3A; } .testimonials_prev { position: absolute; top: 50%; left: 0; height: 48px; width: 48px; justify-content: center; align-items: center; } .testimonials_next { position: absolute; top: 50%; right: 0; height: 48px; width: 48px; justify-content: center; align-items: center; } .testimonials_arrow:hover path{ fill: white; } .testimonials_dots .slick-dots { display: flex; justify-content: center; align-items: center; } .testimonials_dots li { margin-right: 12px; } .testimonials_dots button { font-size: 0px; background: transparent; height: 30px; width: 30px; display: flex; align-items: center; } .testimonials_dots button::before { content: ""; height: 3px; width: 100%; background-color: #B3B7BC; border-radius: 3px; } .testimonials_dots .slick-active button::before { background-color: #424551; transition: all .3s; } /* ----------------------------------MAIN COMPANIES-------------------------------------------- */ .main_companies { padding-bottom: 177px; } .companies { background: #F4F5F6; } .companies_inner { text-align: center; } .companies_heading { text-align: center; margin-bottom: 57px; color: #1E212C; } .companies_grid { display: grid; grid-template: repeat(2, auto) / repeat(6, 1fr); gap: 40px 8,1%; } .companies_grid_item { } .companies_item_link { display: block; } .companies_item_link img { height: 100%; width: 100%; filter: grayscale(1); opacity: .4; transition: all 1.3s; } .companies_item_link:hover img { opacity: 1; filter: grayscale(0); transition: all .3s; } /* ---------------------------MAIN PROGRAM-------------------------------- */ .main_program { margin-top: 116px; margin-bottom: 186px; } .program { } .container { } .program_inner { display: flex; justify-content: space-between; align-items: center; } .program_content { margin-right: 30px; max-width: 600px; } .program_heading { margin-bottom: 60px; color: #1E212C; } .program_acc { } .program_acc_item { margin-bottom: 24px; } .program_acc_item:last-child { margin-bottom: 0; } .program_acc_link { display: block; padding-left: 40px; } .program_acc_head { font-size: 20px; font-weight: 700; line-height: 1.5; color: #1e212c; position: relative; } .program_acc_head span { font-weight: 400; color: #FF3F3A; margin-right: 8px; } .program_acc_head::before, .program_acc_head::after { content: ""; position: absolute; top: 50%; left: -40px; width: 18px; height: 2px; background-color: #FF3F3A; border-radius: 2px; } .program_acc_head::before { } .program_acc_head::after { transform: rotate(90deg); transition: all .3s; } .program_acc_text { margin-top: 16px; } .program_acc_link--active .program_acc_head::after { transform: rotate(0deg); } .program_image { } .program_image img { width: 100%; height: 100%; } /* -----------------------------------MAIN BLOG------------------------------------------- */ .main_blog { margin-bottom: 213px; } .blog { } .blog_inner { } .blog_top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; } .blog_heading { } .heading { } .heading_subtitle { } .heading_title { } .blog_btn { } .button { white-space: nowrap; } .blog_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .blog_item { display: flex; } .blog_item:first-child { } .blog_item_link { display: flex; flex-direction: column; width: 100%; transition: all .3s; } .blog_item_link:hover { box-shadow: 0px 30px 30px 10px rgba(154, 156, 165, 0.08), 0px 30px 24px -10px rgba(154, 156, 165, 0.05), 0px 12px 10px -6px rgba(154, 156, 165, 0.04), 0px 4px 4px -4px rgba(30, 33, 44, 0.03); } .blog_item_inner { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .blog_image_box { display: block; border-radius: 4px; overflow: hidden; margin-bottom: 16px; position: relative; display: flex; justify-content: center; align-items: center; height: 300px; width: 100%; max-width: none; } .blog_image_box span { position: absolute; top: 12px; left: 12px; font-weight: 400; line-height: 1.5; color: #424551; font-size: 14px; background-color: white; border-radius: 4px; padding: 0px 12px; } .blog_image_box span img { width: 16px; height: 16px; margin-top: 2px; margin-right: 8px; } .blog_image_box img { width: 100%; height: 100%; object-fit: cover; } .blog_item_content { flex-grow: 1; display: flex; flex-direction: column; } .blog_item_info { display: flex; flex-grow: 1; margin: 0 -12px 8px; } .blog_info_el { padding: 0 12px; position: relative; color: #787A80; } .blog_info_el::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 12px; background-color: #787A80; transform: translateY(-50%); } .blog_info_el:last-child:after { content: none; } .blog_info_dir { } .blog_info_date { display: flex; align-items: center; } .blog_info_date::before { display: block; content: ""; width: 16px; height: 17px; background: url("./images/4/icons/Calendar.svg") 0 0 / 100% no-repeat; margin-right: 9px; } .blog_info_time { display: flex; align-items: center; } .blog_info_time::before { display: block; content: ""; width: 16px; height: 17px; background: url("./images/4/icons/Clock.svg") 0 0 / 100% no-repeat; margin-right: 9px; } .blog_item_title { font-size: 20px; font-weight: 700; line-height: 1.5; color: #1E212C; margin-bottom: 8px; min-height: 60px; display: -webkit-box; -webkit-line-clamp: 3; /* максимум 2 строки */ -webkit-box-orient: vertical; overflow: hidden; } .blog_item_text { margin-bottom: 16px; min-height: 70px; display: -webkit-box; -webkit-line-clamp: 4; /* максимум 2 строки */ -webkit-box-orient: vertical; overflow: hidden; } .blog_item_btn { display: flex; align-items: center; font-weight: 700; line-height: 1.6; color: #1E212C; transition: all .3s; margin-top: auto; } .blog_item_btn:hover { color: #FF3F3A; } .blog_item_btn img { padding: 6px 8px; } /* ---------------------------------MAIN INFO--------------------------------------------------- */ .main_info { margin-bottom: 180px; } .info { } .container { } .info_inner { display: flex; align-items: flex-end; justify-content: space-between; } .info_content { margin-right: 30px; } .info_heading { color: #1E212C; margin-bottom: 40px; } .heading_subtitle { } .heading_title { } .info_contacts { } .info_contacts_item { margin-bottom: 24px; display: flex; align-items: start; } .info_contacts_item svg { margin-right: 12px; height: 24px; width: 24px; } .info_contacts_item:last-child { margin-bottom: 0; } .info_contants_text { } .info_item_top { font-size: 14px; font-weight: 700; line-height: 1.5; color: #787A80; } .info_item_top img { margin-right: 12px; } .info_item_link { font-size: 18px; font-weight: 400; line-height: 1.5; color: #1E212C; transition: all .3s; } .info_item_link:hover { color: #FF3F3A; } .info_item_address { font-size: 18px; font-weight: 400; line-height: 1.5; color: #1E212C; margin-bottom: 48px; } .info_follow { } .info_follow_head { font-style: 16px; font-weight: 701; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px; } .info_socials { display: flex; } .info_socials_item { } .info_socials_link { margin-right: 32px; } .info_socials_link path { transition: all .3s; } .info_socials_link:hover path{ fill: #000; } .info_map { height: 412px; width: 100%; max-width: 705px; overflow: hidden; } .info_map iframe { border-radius: 4px; box-shadow: 0 80px 80px -20px rgba(154, 156, 165, 0.08), 0 30px 24px -10px rgba(154, 156, 165, 0.05), 0 12px 10px -6px rgba(154, 156, 165, 0.04), 0 4px 4px -4px rgba(30, 33, 44, 0.03); } /* ---------------------------MAIN QUESTIONS--------------------------------- */ .main_questions { margin-bottom: 180px; } .questions { } .container { } .questions_inner { display: flex; justify-content: space-between; align-items: center; } .questions_inner img { min-width: 350px; width: 100%; height: 100%; } .questions_content { margin-left: 30px; } .questions_heading { color: #1E212C; margin-bottom: 40px; } .heading_subtitle { } .heading_title { } .questions_form { } .questions_form_row { display: flex; margin-bottom: 24px; } .questions_text_label { display: block; margin-bottom: 48px; } .questions_form_label { margin-right: 25px; flex: 1 1 auto; } .questions_form_label:last-child { margin-right: 0; } .questions_form_input, .questions_form_text { display: block; border: 1px solid #D7DADD; border-radius: 4px; padding: 13px 16px; width: 100%; margin-top: 8px; } .questions_form_input::placeholder, .questions_form_text::placeholder { color: #9a9ca5; font-size: 16px; font-weight: 400; line-height: 1.6; } .questions_form_text { resize: none; height: 128px; } .questions_checkbox_label { margin-right: 50px; display: flex; width: 100%; } .questions_form_checkbox { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 0; margin-right: 12px; accent-color: red; } .questions_form-default { } .questions_form-custom { } .questions_form_btn { width: 100%; align-self: center; text-align: center; } .button { } /* ------------------------------------FOOTER------------------------------------------- */ .footer { color: white; } .footer_top { background-color: #1e212c; padding-top: 80px; } .container { } .footer_top_wrapper { display: flex; flex-direction: row; gap: 80px; } .footer_top_inner { display: flex; gap: 80px; } .footer_top_col_inner { display: flex; white-space: nowrap; gap: 80px; } .fotter_top_col { width: auto; } .fotter_top_col:first-child { } .footer_logo { display: block; margin-bottom: 24px; } .logo { } .footer_top_text { font-size: 12px; font-weight: 400; line-height: 1.5; opacity: 0.6; margin-bottom: 38px; } .footer_socials { display: flex; margin-bottom: 60px; } .footer_socials_item { margin-right: 20px; } .footer_socials_item:last-child { margin-right: 0; } .footer_socials_link path { transition: all .3s; } .footer_socials_link:hover path { fill: #fff; } .footer_top_title { font-size: 16px; font-weight: 701; line-height: 1.5; margin-bottom: 12px; pointer-events: none; } .footer_top_title--title1 { font-size: 16px; font-weight: 701; line-height: 1.5; margin-bottom: 24px; white-space: nowrap; } .footer_top_list { } .footer_top_item { } .footer_item_link { font-size: 16px; font-weight: 400; line-height: 1.6; opacity: 0.6; margin-bottom: 8px; transition: all .3s; display: flex; white-space: nowrap; } .footer_item_link:hover { opacity: 1; } .footer_item_link:last-child { margin-bottom: 0; } .footer_item_link svg { display: block; width: 16px; height: 16px; margin-right: 8px; margin-top: 4px; } .footer_top_form { display: block; overflow: hidden; position: relative; } .footer_form_input { width: 100%; padding: 9px 12px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.12); color: #fff; opacity: 0.6; font-size: 12px; font-weight: 400; line-height: 1.5; } .footer_form_btn { display: block; width: 16px; height: 16px; } .footer_form_img { position: absolute; top: 50%; right: 12px; top: 16px; } .footer_form_desc { font-size: 10px; font-weight: 400; line-height: 1.5; } .footer_bottom { background-color: rgb(41, 44, 55); } .footer_bottom_inner { display: flex; justify-content: space-between; padding: 20px 0px; } .footer_copy { font-size: 12px; font-weight: 400; line-height: 1.5; display: flex; } .footer_copy span { display: block; height: 16px; width: 16px; margin: 0px 4px; align-items: center; justify-content: center; } .footer_go_top { font-size: 14px; font-weight: 701; line-height: 1.5; opacity: 0.6; transition: all .3s; } .footer_go_top:hover { opacity: 1; } /* ----------------------------------------BURGER MENU------------------------------------------------------- */ .burger { display: none; } /* ---------------------------------------------------1000---------------------------------------------------------------- */ @media (max-width: 1000px) { .program_image { display: none; } .program_content { margin: 0; } .blog_row { grid-template-columns: repeat(1, auto); } .blog_row { place-content: center; } .blog_item { align-items: center; max-width: 650px; } } /* ----------------------------------------------------900--------------------------------------------------------- */ @media (max-width: 900px) { .header_img { display: none; } .header_row { display: none; } .about_img { display: none; } .directions_filter_box { justify-content: space-between; } .directions_filter_item { margin-right: 10px; } .directions_list { gap: 30px 10px; } .directions_link_content { padding: 24px 5px; } .companies_grid { grid-template: repeat(3, auto) / repeat(4, 1fr); } .blog_top { flex-direction: column; align-items: flex-start; margin-bottom: 30px; } .blog_heading { margin-bottom: 30px; } .info_inner { flex-direction: column; align-items: flex-start; } .info_content { margin-bottom: 30px; } .info_map { height: 200px; max-width: none; } .questions_inner img { display: none; } .questions_content { margin: 0; width: 100%; } } /* ----------------------------------------------------1200--------------------------------------------------------- */ @media (max-width: 1200px) { .header_title { font-weight: 900; font-size: 52px; min-width: 376px; } .header_img { max-width: 450px; } .blog_item_info { flex-direction: column; margin: 0 0 8px; } .blog_info_el { padding: 0; } .blog_info_el::after { content: none; } } /* --------------------------------------------------1100------------------------------------------------------- */ @media (max-width: 1100px) { .burger { display: block; position: fixed; top: 0; right: 0; z-index: 150; height: 60px; width: 60px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all .3s; } .burger--follow { background-color: #fff; box-shadow: 0px 4px 60px 0px #444; top: 10px; right: 15px; } .burger span { display: block; height: 4px; width: 30px; background-color: #424551; border-radius: 3px; margin: 4px 0px; } .burger::before, .burger::after { content: ""; display: block; height: 4px; width: 30px; background-color: #424551; border-radius: 3px; } .header_top { position: fixed; top: 0; bottom: 0; right: 0; background-color: #fff; z-index: 100; min-width: 320px; transform: translateX(100%); transition: all .3s; } .header_top--open { transform: translateX(0%); } .header_top_inner { flex-direction: column; height: 100%; justify-content: space-between; padding: 100px 0; } .header_logo { margin: 0; } .header_nav { text-align: center; margin: 0 auto; } .header_nav-list { flex-direction: column; } .header_nav_item { margin: 0; } .header_nav_link { display: block; padding: 30px; } .header_btn_box { flex-direction: column-reverse; } .haeder_top_btn { margin: 0; } .header_user-nav { margin-bottom: 30px; } .heading_title { font-size: 37px; } .about_img { max-width: 400px; } .cerf_inner { flex-direction: column; align-items: center; } .cert_content { margin: 0px 0px 30px 0px; align-self: center; } .cert_heading { text-align: center; } .cert_logos { justify-content: space-between; } .cert_text { text-align: center; } .companies_grid { gap: 40px 5%; } .program_image { max-width: 400px; flex-shrink: 0; } .footer_top_wrapper { max-width: 515px; } .footer_top_inner { flex-direction: column; gap: 0; } .footer_top_text { max-width: 100%; } .footer_top_text { margin-bottom: 18px; } .footer_socials { margin-bottom: 18px; } .footer_top_col_inner { margin-bottom: 18px; } .footer_top_form, .footer_form_desc { max-width: 315px; } .footer_form_desc { margin-bottom: 60px; } } /* --------------------------------------------------------700--------------------------------------------------------------------------- */ @media (max-width:700px) { .about_createx { margin-bottom: 60px; } .about_values { flex-direction: column; } .about_image_box { display: none; } .about_numbers { margin: 0; align-self: flex-start; } .directions_list { grid-template: repeat(3, auto) / repeat(2, 1fr); } .testimonials_slider_wrapper { padding: 0; } .testimonials_arrow { display: none; } .testimonials_slide { padding: 30px 15px; } .blog_item { max-width: 520px; } } /* -------------------------------------------------------550------------------------------------------------------------------------ */ @media (max-width: 550px) { .heading { margin-bottom: 30px; } .heading_title { font-size: 25px; } .about_text { margin-bottom: 30px; } .heading_subtitle { font-size: 14px; margin: 0; } .about_paragraph { font-size: inherit; margin-bottom: 10px; } .about_btn_box { flex-direction: column; align-items: flex-start; } .about_btn { margin-bottom: 30px; } .directions_list { grid-template: none; } .directions_list_item--empty { display: none; } .directions_filter_box { margin-bottom: 15px; justify-content: left; } .team_image_box { max-width: 300px; margin: 0 auto 16px; } .testimonials_slider_wrapper { margin-bottom: 15px; } .testimonials_slide_inner { padding-left: 30px; } .testimonials_quote { font-size: inherit; line-height: inherit; } .testimonials_quote::before { left: -30px; width: 20px; } .testimonials_dots button{ width: 20px; } .companies_grid { grid-template: repeat(4, auto) / repeat(3, 1fr); } .program_acc_head { font-size: inherit; line-height: inherit; } .blog_item { max-width: 420px; } .questions_form_row { flex-direction: column; } .questions_form_label { margin: 0 0 24px 0; } .questions_form_label:last-child { margin: 0; } .questions_checkbox_label { margin: 0 0 24px 0; } .questions_text_label { font-size: 14px; } .questions_form_label { font-size: 14px; } .questions_checkbox_label { font-size: 14px; } .questions_form_input, .questions_form_text { margin-top: 0; } .footer_top_col_inner { flex-direction: column; } .footer_top_col_inner { gap: 30px; } .footer_top_title--slide { margin: 0; pointer-events: auto; } .footer_top_list { margin-top: 12px; display: none; } .footer_bottom_inner { flex-direction: column-reverse; align-items: center; } .footer_go_top { margin-bottom: 15px; } .footer_copy { text-align: center; } .main_about { padding: 60px 0; } .about_createx { margin-bottom: 40px; } .main_cert { margin-top: 100px; } .main_team { padding-top: 120px; padding-bottom: 100px; } .main_testimonials { padding-bottom: 100px; } .main_companies { padding-bottom: 40px; } .main_program { margin-top: 60px; margin-bottom: 100px; } .main_blog { margin-bottom: 100px; } .main_info { margin-bottom: 100px; } .main_questions { margin-bottom: 40px; } .footer_top { margin-top: 60px; } } /* ------------------------------------------------------450------------------------------------------------------------- */ @media (max-width: 450px) { .header_top { min-width: none; width: 100%; } .header_title { max-width: 376px; font-size: 40px; } .header_content-buttons { flex-direction: column; align-items: flex-start; } .header_content_btn { margin-right: 0; margin-bottom: 30px; text-align: center; } .directions_filter_box { margin-bottom: 15px; } .cert_logos { flex-direction: column; align-items: center; } .cert_logos-item { margin: 0px 0px 30px 0px; } .cert_logos-item:last-child { margin: 0px 0px 0px 0px; } .companies_grid { grid-template: repeat(6, auto) / repeat(2, 1fr); } .blog_item { max-width: 380px; } .info_socials_item { margin-right: 15px; } }