html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; font-family: 'oswald', sans-serif; font-weight: 400; } img { display: block; width: 100%; } h1, h2, h3, h4, h5, h6, p { padding: 0; margin: 0; } @font-face { font-family: oswald-bolt; src: url(../шрифты/Oswald-Bold.ttf); } @font-face { font-family: oswald-medium; src: url(../шрифты/Oswald-Medium.ttf); } @font-face { font-family: oswald-regular; src: url(../шрифты/Oswald-Regular.ttf); } @font-face { font-family: opensans-bold; src: url(../OpenSans-Bold.ttf); } .container { max-width: 1110px; margin: 0 auto; } :root { --accent-color: #F7654A; --dark-color: #404149; --gray-color: #999999 ; --white-color: #FFFFFF; --background-color: #E5E5E5; } .text_h2 { font-family: 'oswald-medium', sans-serif; font-weight: 500; font-size: 36px; text-transform: uppercase; } .text_h3 { font-family: 'oswald-medium', sans-serif; font-weight: 500; font-size: 24px; } .text_h4 { font-family: 'oswald-medium', sans-serif; font-weight: 500; font-size: 21px; } .text_p { font-family: 'opensans-bold', sans-serif; font-size: 16px; } .text_p_reviews { font-family: 'opensans-bold', sans-serif; font-size: 14px; line-height: 21px; } .header { min-height: 740px; background-image: url(../img/Rectangle.jpg); background-repeat: no-repeat; /* Чтобы картинка не повторялась, если не влазит в размеры своего контейнера */ background-size: cover; /* Чтобы картинка вписывалась конкретно в свои размеры */ } .header__title { padding-top: 20px; margin-bottom: 112px; display: flex; justify-content: space-between; align-items: flex-end; } .header__title img { width: 60px; height: 60px; } .header__title a { width: 50px; height: 50px; cursor: pointer; /* Рука при наведении курсора */ padding: 0; background-color: var(--accent-color); border: none; display: flex; flex-direction: column; /* Сверху вниз блоки */ justify-content: center; align-items: center; } .line { display: block; width: 21px; height: 3px; background-color: #fff; margin-bottom: 4px; } .line:last-child { /* последний класс с таким названием, отдельно */ margin-bottom: 0; } .text { } .text h1 { font-family: oswald-medium; font-weight: 500; font-size: 64px; letter-spacing: 0.02em; text-align: center; text-transform: uppercase; line-height: 95px; max-width: 734px; margin: 0 auto 17px; color: var(--white-color); } .text h4 { font-family: oswald-regular; font-weight: 400; font-size: 18px; text-transform: uppercase; text-align: center; max-width: 734px; margin: 0 auto; color: var(--white-color); } .abaut { padding-top: 250px; position: relative; } .info { position: absolute; top: -150px; max-width: 1110px; width: 100%; background-color: #f7f7f7; } .abaut__grit { padding: 57px 130px; display: flex; justify-content: space-around; } .abaut__gtit_item { } .abaut__gtit_item h4 { font-size: 72px; font-family: 'oswald-medium', sans-serif; font-weight: 500; text-transform: uppercase; color: var(--accent-color); } .abaut__gtit_item h5 { color: #000; font-size: 36px; font-family: 'oswald-medium', sans-serif; font-weight: 500; text-align: center; } .abaut__gtit_item p { color: var(--gray-color); font-size: 18px; font-family: 'oswald-medium', sans-serif; font-weight: 500; text-align: center; } .project_h2 { text-align: center; margin-bottom: 60px; color: var(--dark-color); } .project { display: flex; justify-content: space-between; margin-bottom: 240px; } .project_arena { max-width: 350px; margin-right: 30px; } .project_arena:last-child { margin-right: 0; } .project_arena img { margin-bottom: 38px; } .tere { width: 55px; height: 6px; background-color: var(--accent-color); margin-bottom: 16px; } .project_arena h3 { margin-bottom: 20px; } .project_arena p { color: #999999; } .request { max-width: 1920px; width: 100%; min-height: 181px; height: 100%; background-color: var(--accent-color); margin-bottom: 150px; } .request_seting { display: flex; justify-content: space-between; } .request_text { } .request_text h2 { padding-top: 40px; font-family: 'oswald-bolt', sans-serif; font-weight: 500; font-size: 48px; text-transform: uppercase; color: #FFFFFF; margin-bottom: 10px; } .request_text h4 { font-family: 'oswald-bolt', sans-serif; font-weight: 500; font-size: 24px; text-transform: uppercase; color: #FFFFFF; margin-bottom: 45px; } .request_button { display: flex; align-items: center; } .request_button img { width: 21px; margin-right: 15px; } .request_button b { font-family: 'oswald-medium', sans-serif; font-weight: 500; font-size: 14px; text-transform: uppercase; color: #000; } .request_btn { display: flex; align-items: center; padding: 0px 30px; width: 175px; height: 45px; } .services { margin: 0px 50px 120px 50px; } .txt { margin-bottom: 45px; text-align: center; } .services_seting { display: flex; justify-content: center; flex-wrap: wrap; } .services_item { width: 350px; height: 250px; background-color: #f7f7f7; margin-right: 20px; margin-bottom: 30px; } .services_item img { width: 60px; margin: 59px 145px 30px 145px; } .services_item h4 { text-align: center; margin: 0 auto; width: 172px; text-transform: uppercase; } .portfolio { background-color: #c4c4c4; max-width: 1920px; width: 100%; margin-bottom: 160px; } .restangle { display: flex; justify-content: center; flex-wrap: wrap; } .restangle_item { } .restangle_item img { max-width: 480px; } .question { margin-bottom: 60px; } .question h2 { text-align: center; text-transform: uppercase; margin-bottom: 50px; } .question_items { } .question_item { margin-bottom: 40px; } .summary_h3 { text-transform: uppercase; color: var(--accent-color); padding-bottom: 30px; } .question_item p { max-width: 730px; width: 100%; margin-left: 45px; color: var(--dark-color); } .partners { max-width: 1920px; width: 100%; min-height: 364px; height: 100%; background-color: var(--dark-color); margin-bottom: 150px; } .partners_h2 { color: white; text-align: center; padding: 100px 20px 60px 20px; } .partners_seting { display: flex; justify-content: space-between; } .partners_image { } .partners_image img { width: 170px; } .reviews { margin-bottom: 150px; } .reviews_h2 { text-align: center; margin-bottom: 60px; } .reviews_seting { display: flex; justify-content: space-between; } .reviews_item { } .reviews_item_child { width: 350px; height: 259px; background-color: #f7f7f7; margin-bottom: 30px; } .reviews_item_child h2 { font-family: 'oswald-bolt', sans-serif; font-size: 96px; color: var(--accent-color); padding: 10px 0px 0px 20px; } .reviews_item_child p { position: relative; margin-top: -50px; padding: 0px 30px 0px 30px; } .reviews_item h4 { text-align: center; } .request2 { max-width: 1920px; width: 100%; min-height: 181px; height: 100%; background-color: var(--accent-color); margin-bottom: 100px; } .request_seting2 { display: flex; justify-content: space-between; } .request_text2 { } .request_text2 h2 { padding-top: 40px; font-family: 'oswald-bolt', sans-serif; font-weight: 500; font-size: 48px; text-transform: uppercase; color: #FFFFFF; margin-bottom: 10px; } .request_text2 h4 { font-family: 'oswald-bolt', sans-serif; font-weight: 500; font-size: 24px; text-transform: uppercase; color: #FFFFFF; margin-bottom: 45px; } .request_button2 { display: flex; align-items: center; } .request_button2 img { width: 21px; margin-right: 15px; } .request_button2 b { font-family: 'oswald-medium', sans-serif; font-weight: 500; font-size: 14px; text-transform: uppercase; color: #000; } .request_btn2 { display: flex; align-items: center; padding: 0px 30px; width: 175px; height: 45px; } .contacts { margin-bottom: 232px; } .contacts_h2 { text-align: center; margin-bottom: 60px; } .contacts_seting { display: flex; justify-content: space-between; } .contacts_item { text-align: center; width: 255px; height: 191px; } .contacts_item img { margin: 0 auto; width: 71px; height: 45px; margin-bottom: 20px; } .contacts_item h3 { text-transform: uppercase; color: #000; } .text_h3.h3_con { color: var(--gray-color) } .text_h3.h3_ac { color: var(--accent-color); } .text_h3.h3_ac a { text-decoration: none; color: inherit; } .tel_h3 { color: #000; text-decoration: none; } .footer { max-width: 1920px; width: 100%; min-height: 82px; height: 100%; background-color: var(--dark-color); } .footer_seting { display: flex; justify-content: space-between; } .footer_item { } .footer_item p { color: white; } @media screen and (max-width: 1280px) { .header__title { padding-left: 15px; padding-right: 15px; } .abaut__grit { flex-wrap: wrap-reverse; } .abaut__gtit_item { padding: 57px 130px; } .project_h2 { padding-top: 350px; } .project { flex-wrap: wrap; padding: 0px 100px; } .project_arena { text-align: center; margin-right: 0px; margin-bottom: 100px; } .project_arena:last-child { margin-right: 30px; } .request_seting { padding: 0px 100px; } .partners_seting { justify-content: center; flex-wrap: wrap; } .partners_image { margin: 0px 64px 30px 64px; } .reviews_seting { justify-content: center; flex-wrap: wrap; } .reviews_item { padding: 30px 30px; } .request_seting2 { padding: 0px 100px; } .contacts_seting { justify-content: center; flex-wrap: wrap; } .contacts_item { margin: 30px 50px; } } @media screen and (max-width: 960px) { .request_seting { flex-wrap: nowrap; } .request_text { margin-right: 50px; } .request_seting2 { flex-wrap: nowrap; } .request_text2 { margin-right: 50px; } } @media screen and (max-width: 925px) { .project_h2 { padding-top: 900px; } .project { flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 50px; } .project_arena { text-align: center; margin-right: 50px; margin-bottom: 100px; } } @media screen and (max-width: 768px) { .info { top: 0px; } .project_h2 { padding-top: 1050px; } .project { flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 50px; } .project_arena { text-align: center; margin-bottom: 100px; } .partners_image img { width: 130px; } .partners_image { margin: 0px 32x 15px 32px; } } @media screen and (max-width: 600px) { .request_seting { flex-wrap: wrap; } .request_btn { margin-bottom: 50px; } .request_seting2 { flex-wrap: wrap; } .request_btn2 { margin-bottom: 50px; } }