* { font-family: "Roboto", sans-serif; } header { position: relative; height: 50px; width: 100%; } nav { position: fixed; width: 100%; height: 50px; background-color: #212121; z-index: 5; } .menu { display: flex; justify-content: space-between; padding: 13px 70px; margin: 0; list-style-type: none; } .menu_link { color: #ffffff; font-size: 15px; font-weight: 300; } .menu_item { border-right: 2px dotted black; padding-right: 28px; } .subheader { position: absolute; width: 100%; top: 50px; height: 90px; background-color: rgba(0, 0, 0, 0.6); /* 116.667% */ } .subheader_logo { display: block; margin-top: 20px; width: 100%; } .subheader_oficial { margin-top: 3px; opacity: 0.5; color: #FFF; font-size: 13px; font-weight: 100; } .subheader_call { margin-top: 25px; color: #FFF; text-align: center; font-size: 12px; font-weight: 300; line-height: 14px; } .subheader_phone { display: block; margin-top: 5px; color: #FFF; text-align: center; font-size: 22px; font-weight: 400; line-height: 12px; text-transform: uppercase; } .subheader_btn { margin-top: 25px; height: 46px; border-radius: 4px; background: linear-gradient(0deg, #1EACC7 0%, #4CE2FF 100%); box-shadow: 0px -3px 0px 0px rgba(0, 0, 0, 0.12) inset; } .subheader_btn:hover { background-image: none; background-color: #1eacc7; } .subheader_btn_text { color: #FFF; text-align: center; text-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.21); font-size: 14px; font-weight: 400; text-transform: uppercase; } .promo { padding-top: 157px; padding-bottom: 185px; min-height: 800px; background: url(../img/first_section/uber_bg.jpg) center center/cover no-repeat; } .promo_header { color: #FFF; text-align: center; font-size: 60px; font-style: normal; font-weight: 900; line-height: 24px; text-transform: uppercase; } .promo_subheader { margin-top: 20px; color: #FFF; font-size: 36px; text-align: center; font-style: normal; font-weight: 700; line-height: 48px; text-transform: uppercase; } .promo_text { margin-top: 16px; color: #FFF; text-align: center; font-size: 18px; font-style: normal; font-weight: 400; } .promo_btn { width: 260px; display: block; margin: 0 auto; margin-top: 116px; border-radius: 4px; background: linear-gradient(0deg, #1EACC7 0%, #4CE2FF 100%); box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.12) inset; height: 65px; } .promo_btn:hover { background-image: none; background-color: #1eacc7; } .promo_btn_text { color: #FFF; text-align: center; text-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.21); font-size: 18px; font-style: normal; font-weight: 400; text-transform: uppercase; } .benefit { min-height: 850px; padding-top: 20px; } .container_flex { display: flex; flex-direction: column; align-items: center; } .label { display: flex; justify-content: center; align-items: center; width: 115px; height: 30px; background-color: #000; } .title { margin: 33px 0 16px 0; color: #222; text-align: center; font-size: 38px; font-style: normal; font-weight: 700; text-transform: uppercase; } .subtitle { color: #222; text-align: center; font-size: 17px; font-style: normal; font-weight: 400; line-height: 21px; } .label_text { color: #FFF; text-align: center; font-size: 11px; font-style: normal; font-weight: 400; text-transform: uppercase; } .benefit_info { min-height: 700px; } .benefit_block { height: 150px; display: flex; justify-content: center; align-items: center; } .benefit_round { margin-right: 25px; justify-content: center; align-items: center; display: flex; min-height: 116px; max-height: 116px; min-width: 116px; max-width: 116px; border-radius: 50%; background-color: #1EACC7; } .benefit .round { height: 50px; } .benefit_text_title { color: #1EACC7; font-size: 17px; font-style: normal; font-weight: 400; line-height: 21px; } .mobile { min-height: 864px; padding: 48px 0 79px 0; background: url(../img/third_section/mobile_bg.png) center center/cover no-repeat; } .mobile .row { margin-top: 32px; } .mobile_item { position: relative; height: 280px; max-width: 320px; margin: 0 auto; margin-bottom: 19px; margin-right: 68px; padding-top: 92px; } .mobile_item_1 { background: url(../img/third_section/Card_1.png) center center/cover no-repeat; } .mobile_item_2 { background: url(../img/third_section/Card_2.png) center center/cover no-repeat; } .mobile_item_3 { background: url(../img/third_section/Card_3.png) center center/cover no-repeat; } .mobile_item_4 { background: url(../img/third_section/Card_4.png) center center/cover no-repeat; } .mobile_item_5 { background: url(../img/third_section/Card_5.png) center center/cover no-repeat; } .mobile_item_6 { background: url(../img/third_section/Card_6.png) center center/cover no-repeat; } .mobile_item_subtitle { color: #FFF; text-align: center; font-family: Roboto; font-size: 24px; font-style: normal; font-weight: 400; line-height: 31px; text-transform: uppercase; } .mobile_item_plus { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; background-color: #000; margin: 0 auto; border-radius: 100%; cursor: pointer; } .mobile_item_plus:before { content: ""; display: block; width: 14px; height: 2px; background-color: #1eacc7; transition: 0.3s all; } .mobile_item_plus::after { content: ""; display: block; width: 2px; height: 14px; background-color: #1eacc7; position: absolute; left: 50%; transform: translateX(-50%); transition: 0.3s all; } .mobile_item_plus:hover::before, .mobile_item_plus:hover::after { background-color: #bf1d1d; } .auto { position: relative; min-height: 900px; } .auto_top_color { position: absolute; width: 100%; min-height: 562px; background-color: #070716; z-index: -1; } .auto_bottom_color { position: absolute; bottom: 1px; width: 100%; min-height: 361px; background-color: #ffffff; z-index: -1; } .auto .label { margin-top: 60px; background-color: #FFFFFF; } .auto .label_text { color: #070716; } .auto .title { color: #FFFFFF; } .auto .subtitle { color: #FFFFFF; } .auto_img { margin-top: 54px; } .auto_text { width: 320px; height: 50px; color: #222; text-align: center; font-size: 17px; font-weight: 300; line-height: 24px; } .require { min-height: 920px; } .require_top_text { margin-top: 33px; } .require_bottom_text { margin-top: 61px; } .require_bottom_text .require_title { color: #FF5656; } .require_bottom_text .require_list li::before { background: url(../img/fifth_section/Layer_31_copy_7.svg); } .require_title { color: #1CA8C3; font-size: 22px; font-weight: 400; line-height: 24px; } .require_list { list-style-type: none; } .require_list li { position: relative; color: #222; font-size: 17px; font-weight: 300; line-height: 24px; margin-bottom: 8px; } .require_list li::before { content: ""; display: block; position: absolute; left: -32px; top: 3px; height: 20px; width: 21px; background: url(../img/fifth_section/Rectangle.svg); } .require_block_text { margin-top: 21px; } .require_text { height: 40px; margin-top: 25px; color: #1CA8C3; font-size: 17px; font-weight: 300; line-height: 24px; } .cities { height: 716px; background: url(../img/sixth_section/world_bg.jpg) center center/cover no-repeat; position: relative; } .cities .label { margin-top: 48px; background-color: #fff; height: 25px; width: 75px; } .cities .label_text { color: #000; } .cities .title { color: #fff; margin: 23px 0 0 0; height: 48px; } .cities .subtitle { color: #fff; margin-top: 2px; } .cities_text { position: absolute; bottom: 21px; color: #1FBAD6; text-align: center; font-size: 15px; font-weight: 400; line-height: 68px; text-transform: uppercase; } .footer_container { height: 156px; display: flex; justify-content: space-between; } .footer_container .social_media { height: 35px; margin: 50px 135px 0 23px; display: flex; } .footer_container .social_media a { justify-content: center; align-items: center; display: flex; width: 35px; height: 35px; } .footer_container .round { display: flex; margin-right: 6px; height: 35px; width: 35px; border-radius: 50%; background-color: #000; } .footer_container .round .footer_img { width: 50%; height: 50%; } .footer_container .footer_line { margin-bottom: 30px; height: 7px; width: 300px; background-color: #1FBAD6; } .footer_container .footer_links { width: 400px; display: flex; justify-content: center; align-content: center; flex-direction: column; } .footer_container .footer_download_items { display: flex; justify-content: left; margin: 50px 21px 0 0; width: 300px; } .footer_container .footer_download_items .footer_download_item { width: 120px; height: 37px; } .footer_container .footer_download_img { width: 100%; height: 100%; } .footer_container .footer_links_title { display: flex; justify-content: space-around; flex-direction: row; } .footer_container .footer_links_title_item { color: #070716; font-size: 15px; font-weight: 300; text-transform: uppercase; line-height: 32px; } .footer_container .footer_links_content_block { display: flex; justify-content: space-around; flex-direction: row; } .footer_container .footer_flex_center { display: flex; justify-content: center; } .footer_container .footer_links_text { color: #999; font-size: 11px; font-weight: 300; text-transform: uppercase; line-height: 32px; } .footer_container .footer_language { display: flex; justify-content: center; } .footer_container .footer_language_text { color: #1FBAD6; text-align: center; font-size: 11px; font-style: normal; font-weight: 400; text-transform: uppercase; line-height: 32px; } @media (max-width: 1200px) { .menu_item { padding-right: 20px; } .menu_link { font-size: 13px; } .promo_header { font-size: 50px; } }