@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto+Slab:wght@700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 10px;
    font-family: 'Poppins', sans-serif;
}
body {
    color: #7C7C7C;
    font-size: 1.6rem;
}
body.noscroll {
    overflow: hidden
}
header {
    overflow: auto;
    padding: 4rem;
    background-color: #000;
}
.home-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #0000;
}
.logo {
    float: left;
    text-decoration: none;
    color: #fff;
    font-size: 2rem;
}
.logo-square {
    display: inline-block;
    width: 3rem;
    text-align: center;
    line-height: 3rem;
    color: #000;
    background-color: #fbbf3a;
    font-weight: bold;
}
.desktop-menu {
    float: right;
    margin-top: 0.5rem;
}
.desktop-menu a {
    position: relative;
    color: #fff;
    padding: 2px 0;
    text-decoration: none;
    margin: 2rem;
}
.desktop-menu a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff5c;
    content: '';
    opacity: 0;
    transition: all .3s ease;
}
.desktop-menu a:hover::after {
    opacity: 1;
    transform: translateY(0px);
}
.desktop-menu .header-button {
    border: 1px solid;
    border-radius: 50px;
    padding: 0 2rem;
}
.desktop-menu .header-button:hover {
    background-color: #fbbf3a;
    border-color: #fbbf3a;
}
.header-button::after {
    display: none;
}
.mobile-menu {
    display: none;
}
.mobile-menu a {
    display: none;
    padding: 1rem 2rem;
}
h1,
h2,
h3,
.logo-text,
.quote {
    font-family: 'Roboto Slab', serif;
}
h1,
h2,
h3,
strong {
    color: #363540;
}
h1 {
    font-size: 4.2rem;
    line-height: 4.5rem;
}
h2 {
    position: relative;
    font-size: 3rem;
    padding-bottom: 1rem;
    text-align: center;
    margin-bottom: 4rem;
    text-transform: capitalize;
}
h2:after {
    position: absolute;
    top: 100%;
    left: calc(50% - 2.5rem);
    width: 5rem;
    height: 5px;
    background: #FBBF3B;
    content: '';
}
h3 {
    font-size: 2rem;
}
p,
li {
    margin: 1rem 0;
}
p a {
    font-weight: bold;
    color: #363540;
}
/* li {
    list-style: none;
} */
img {
    display: block;
    width: 100%;
}
a {
    color: #333;
    transition: all .3s ease-in-out
}
a:hover {
    text-decoration: none;
}
.button {
    display: inline-block;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    background-color: #000;
    font-size: 1.8rem;
    padding: 1.2rem 4rem;
    text-transform: capitalize;
    border: 1px solid;
    border-radius: 10px;
    box-shadow: 2px 1px 10px #00000026;
    border: none;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-appearance: none;
}
form .button {
    display: block;
    width: 100%;
}
.company .button {
    margin-top: 6rem;
}
.button:hover {
    opacity: 0.8;
}
section {
    clear: both;
    padding: 6rem 4rem;
}
.inner {
    max-width: 1300px;
    margin: 0 auto;
}
.centered {
    text-align: center;
}
.half-div {
    display: inline-block;
    vertical-align: middle;
    width: 49%;
}
.align-top .half-div {
    vertical-align: top;
}
.half-div:nth-child(odd) {
    padding-left: 2rem;
}
.hero {
    padding: 14rem 0 6rem 0;
    color: #fff;
    background-image: url(../img/hero-bg.jpg);
    background-size: cover;
    background-position: bottom center;
}
.hero h1 {
    color: #fff;
}
.intro {
    margin-top: -6rem;
}
.form-wrapper {
    max-width: 500px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: #ffffff5c;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.1);
}
.wideform {
    max-width: 800px;
    margin-top: 2rem;
}
.form-wrapper form {
    background-color: #fff;
    padding: 4rem;
    border-radius: 20px;
}
form {
    color: #7C7C7C;
}
form h3 {
    text-align: center;
    margin-bottom: 2rem;
}
form label {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
    display: block;
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #7C7C7C;
}
form input[type="text"],
form input[type="email"],
form input[type="tel"] {
    padding: 1.5rem;
    font-size: 1.6rem;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus {
    outline: none;
    border-color: #363540;
}
form input::placeholder,
form textarea {
    font-family: 'Poppins', sans-serif;
    color: #7C7C7C;
    font-size: 1.6rem;
}
.half-input label {
    width: 49%;
}
.half-input label:nth-child(odd) {
    float: left;
}
.half-input label:nth-child(even) {
    float: right;
}
.logos {
    margin-top: 6rem;
    display: flex;
    justify-content: space-between;
}
.logos img {
    width: auto;
    max-width: 140px;
    align-self: center;
}
.companies section:nth-child(odd) {
    background-color: #f6f6f7;
}
.companies h2 {
    margin-bottom: 2rem;
}
.company {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.company img {
    display: inline-block;
    width: 200px;
    margin: 2rem auto;
    box-shadow: 2px 1px 10px #00000026;
    border-radius: 50%;
}
.captcha-wrapper,
.g-recaptcha {
    max-width: 100%;
    overflow: hidden;
}
.services li {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    padding: 2rem;
}
.services img {
    display: block;
    width: 200px;
    margin: 0 auto 2rem auto;
}
.faq li {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: 33%;
    padding: 2rem;
}
.portrait {
    display: block;
    margin: 0 auto;
    width: 300px;
}
.follows li {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    padding: 2rem;
}
.follows img {
    display: block;
    margin: 0 auto 2rem auto;
    height: 50px;
    width: auto;
}
.follows a {
    display: block;
    font-weight: bold;
    margin-bottom: 1rem;
}
.desk-padding {
    padding-top: 5rem;
}
footer {
    background-color: #000;
    color: #a5a5a5;
    padding: 4rem;
}
footer .toprow {
    overflow: auto;
    border-bottom: 1px solid #7C7C7C;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
}
.footer-form {
    float: right;
    padding: 0;
}
.footer-form label {
    display: inline-block;
    width: 220px;
}
footer .footer-form input {
    padding: 1rem;
    font-size: 1.4rem;
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
}
footer .footer-form input:focus {
    border-color: #fcbe3a;
}
footer .footer-form input::placeholder {
    font-size: 1.4rem;
    color: #fff;
}
.footer-form {
    max-width: 500px;
}
.footer-form h3 {
    color: #fff;
}
.footer-form .button {
    display: inline-block;
    width: 100px;
    font-size: 1.4rem;
    padding: 1rem;
    color: #000;
    background-color: #fcbe3a;
    border: none;
}
footer .logo,
footer .toprow p {
    display: inline-block;
    vertical-align: middle;
}
footer .toprow p {
    margin-top: 0;
}
footer .logo {
    margin: 0.5rem 0 0 0;
}
footer .logo-text {
    color: #fff;
}
footer .logo-square {
    color: #363540;
}
footer nav {
    display: inline-block;
    vertical-align: top;
    text-align: left;
}
footer a {
    display: block;
    margin: 0 4rem 2rem 0;
    color: #a5a5a5;
    font-size: 1.4rem;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}
footer .bottomrow {
    overflow: auto;
    width: 100%;
}
footer .bottomrow .links {
    float: left;
}
footer .bottomrow .contacts {
    float: right;
}
footer strong {
    color: #fff;
}
footer .socials a {
    display: inline-block;
    font-size: 2rem;
    margin: 0 2rem 0 0;
}
footer .socials a:hover {
    color: #fbbf3a;
}
@media (max-width: 1300px) {
    .hero .inner {
        padding: 0 4rem;
    }
}
@media (max-width: 800px) {
    body {
        font-size: 1.8rem;
    }
    header {
        padding: 2rem;
    }
    .desktop-menu {
        display: none;
    }
    .burger {
        display: block;
        float: right;
        position: relative;
        width: 4rem;
        height: 2rem;
        margin-top: 0.6rem;
        color: #333;
        cursor: pointer;
        z-index: 200;
    }
    .burger div {
        position: absolute;
        width: 100%;
        height: 20%;
        background-color: #fff;
        border-radius: 5px;
        transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
    }
    .line-top {
        top: 0;
    }
    .line-middle-top {
        top: 40%;
    }
    .line-middle-bottom {
        top: 40%;
    }
    .line-bottom {
        bottom: 0;
    }
    .burger.on .line-top,
    .burger.on .line-bottom {
        opacity: 0;
    }
    .burger.on .line-middle-top {
        -webkit-transform: rotate(45deg);
    }
    .burger.on .line-middle-bottom {
        -webkit-transform: rotate(-45deg);
    }
    .mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-top: 6rem;
        background-color: #000;
        text-align: center;
        z-index: 100;
    }
    .mobile-menu a {
        display: block;
        margin: 2rem;
        font-size: 2rem;
        text-decoration: none;
        color: #fff;
    }
    .hero .inner {
        padding: 0;
    }
    section {
        padding: 4rem 2rem;
    }
    .half-div {
        display: block;
        width: 100%;
    }
    .half-div:nth-child(odd) {
        padding: 0;
    }
    .hero .half-div:nth-child(even) {
        margin-top: 2rem;
    }
    .hero {
        background-image: none;
        padding: 0;
    }
    .hero .mobile-hero {
        padding: 12rem 2rem 14rem 2rem;
        background-image: url(../img/hero-bg.jpg);
        background-size: cover;
        background-position: top center;
    }
    .intro {
        margin-top: 0;
    }
    h1 {
        font-size: 3.5rem;
        line-height: 4rem;
    }
    .form-wrapper {
        box-shadow: none;
    }
    .form-wrapper form {
        padding: 2rem 1rem;
    }
    .hero .form-wrapper {
        padding: 2rem 1rem;
    }
    .form-wrapper {
        padding: 0;
    }
    form {
        padding: 2rem;
        -webkit-box-shadow: 0px 0px 24px 0px rgb(0 0 0 / 10%);
        -moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.1);
        box-shadow: 0px 0px 24px 0px rgb(0 0 0 / 10%);
    }
    .half-input label {
        width: 100%;
        float: none;
    }
    .logos {
        display: block;
    }
    .logos img {
        display: inline-block;
        width: 49%;
        padding: 2rem;
    }
    .contact-section {
        padding: 2rem;
    }
    .contact-section .half-div:first-child {
        padding: 2rem;
    }
    .services li,
    .follows li,
    .faq li {
        display: block;
        width: 100%;
    }
    .faq li {
        padding: 0;
        margin-bottom: 2rem;
    }
    .desk-padding {
        padding-top: 0;
    }
    footer .toprow p {
        width: 100%;
        padding: 0;
    }
    footer .toprow {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
    footer .logo {
        margin-bottom: 3rem;
    }
    footer .bottomrow .links,
    footer .bottomrow .contacts {
        float: none;
    }
    footer .bottomrow .contacts {
        margin-bottom: 4rem;
    }
}
@media (min-width: 1500px) {
    html {
        font-size: 12px;
    }
}
@media (max-width: 375px) {
    html {
        font-size: 9px;
    }
}