/* /////////////////////////////////////////////////////////////////////////// */

/* BASE & RESETS */

:root {
    --color-primary: #1b405f;
    --color-secondary: #007991;
    --color-focus: #ffbc58;

    --color-white: #fff;
    --color-black: #000;

    --headings: #1b1b1b;
    --subheadings: #939393;

    --small-pm: 2rem;
    --medium-pm: 4rem;
    --large-pm: 6rem;
}

::placeholder {
    font-family: "Mulish", sans-serif;
    color: var(--subheadings);
}

::selection {
    background: var(--color-focus);
    color: var(--color-white);
}

* {
    padding: 0;
    margin: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-size: 62.5%; /* 1rem 10px */
}

body {
    font-family: "Mulish", sans-serif;
    overflow-x: hidden;

    background: url(img/pattern.svg) right 120rem no-repeat,
        url(img/bridge.jpg) right 310rem no-repeat;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* TYPOGRAPHY */

h1 {
    font-size: 4.5rem;
    font-weight: 300;
    color: var(--color-white);
}

h3 {
    font-size: 3.6rem;
    font-weight: 600;
    color: var(--headings);
    letter-spacing: -0.03em;
}

h4 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-primary);
}

h5 {
    font-size: 1.8rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--subheadings);
    margin-top: 2rem;
}

p {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--subheadings);
}

/* /////////////////////////////////////////////////////////////////////////// */

/* BUTTONS */

.btn {
    font-family: "Mulish", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5rem 2.5rem;
    border-radius: 0.8rem;
    color: var(--color-white);
}

.btn.send {
    background: var(--color-focus);
    border: none;
    cursor: pointer;
}

.btn.about {
    background: var(--color-primary);
}

/* /////////////////////////////////////////////////////////////////////////// */

/* MAIN CONTAINER */

main {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.container {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: 1fr repeat(3, minmax(min-content, 43rem)) 1fr;
    grid-template-rows: repeat(6, min-content);
    margin: 0 auto;
    overflow: visible;
    position: relative;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* HERO SECTION */

#hero-section {
    grid-column: 1 / 3;
    position: relative;
    background: var(--color-primary);
    padding: 19.7rem 0;
    display: grid;
    grid-template-columns: 1fr minmax(min-content, 43rem);
}

.hero-logo {
    width: 17rem;
    height: auto;
}

.hero-h1 {
    margin: 15.9rem 0 30rem 0;
}

.hero-logo,
.hero-h1 {
    grid-column: 2 / 3;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* BACKGROUND IMAGE SECTION */

#bg-section {
    grid-area: 1 / 3 / 2 / 6;
    overflow: hidden;
}

.bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* MOCKUP SECTION */

#mock-up-section {
    grid-area: 2 / 2 / 3 / 5;
    margin-top: -35rem;
    z-index: 1;
    margin-bottom: 16rem;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.mock {
    width: 60%;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* PROMO SECTION */

#promo-section {
    grid-area: 3 / 2 / 4 / 4;
    display: grid;
    grid-template-rows: repeat(4, min-content);
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 16rem;
}

.promot1 {
    grid-column: 1 / 2;
    width: 85%;
    margin-bottom: 12rem;
}

.promot2 {
    grid-area: 3 / 2 / 4 / 3;
    margin-top: -14rem;
    margin-bottom: 12rem;
}

.promot3 {
    grid-area: 4 / 1 / 5 / 2;
}

.promo-img {
    grid-area: 2 / 1 / 3 / 3;
    width: 80%;
    z-index: -99;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* FEATURES SECTION */

#features-section {
    grid-area: 4 / 2 / 5 / 4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 16rem;
    position: relative;
}

.feature {
    width: 65%;
}

.features-title {
    margin-bottom: 9rem;
}

.feature h4,
.feature img {
    margin-bottom: 2.5rem;
}

.box1 {
    grid-area: 2 / 1 / 3 / 2;
}
.box2 {
    grid-area: 3 / 1 / 4 / 2;
}
.box3 {
    grid-area: 4 / 1 / 5 / 2;
}
.box4 {
    grid-area: 2 / 2 / 3 / 3;
}
.box5 {
    grid-area: 3 / 2 / 4 / 3;
}
.box6 {
    grid-area: 4 / 2 / 5 / 3;
}

.box1,
.box2,
.box4,
.box5 {
    margin-bottom: 6rem;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* ADS SECTION */

#ads-section {
    grid-area: 5 / 1 / 6 / 4;
    margin: 0 10rem 16rem 0;
    background-color: var(--color-primary);
    padding: 9.9rem 0;
    border-radius: 0 0.8rem 0.8rem 0;
    display: grid;
    grid-template-columns: 1fr repeat(2, minmax(min-content, 43rem));
}

#ads-section h3 {
    color: var(--color-white);
    grid-column: 2 / -1;
    padding: 0 10rem;
    hyphens: auto;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* IDI SECTION */

#idi-section {
    grid-area: 6 / 2 / -1 / 3;
    margin-bottom: 16rem;
}

.idi-logo,
#idi-section h4 {
    margin-bottom: 2.5rem;
}

#idi-section p {
    margin-bottom: 6rem;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* FORM SECTION */

#form-section {
    grid-area: 1 / 4 / -1 / 5;
    overflow: visible;
}

.the-actual-form {
    position: sticky;
    top: 50%;
    transform: translatey(-50%);
    /* top: 15rem; */
    padding: 6rem;
    background: var(--color-primary);
    border-radius: 0.8rem;
}

.the-actual-form h3,
.the-actual-form p {
    margin-bottom: 2.5rem;
    color: var(--color-white);
}

.your-name,
.your-email {
    height: 4rem;
    width: 100%;
    position: relative;
    margin-bottom: 2rem;
}

.person-icon,
.mail-icon {
    position: absolute;
    top: 50%;
    left: 1.3rem;
    transform: translateY(-50%);
}

input {
    font-family: "Mulish", sans-serif;
}

.form-contact .your-name input,
.form-contact .your-email input {
    height: 4rem;
    width: 100%;
    border: 0;
    border-radius: 0.8rem;
    padding-left: 4rem;
}

.form-contact .your-name input:focus,
.form-contact .your-email input:focus {
    outline: none !important;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}

.data-collection p {
    font-size: 1rem;
}
.data-collection p:not(:last-child) {
    margin-bottom: 1rem;
}

.data-collection a {
    color: var(--color-white);
    text-decoration: none;
}
.data-collection a:hover {
    color: var(--color-focus);
}

#form-section button:focus {
    outline: none;
}

.grecaptcha-badge {
    visibility: hidden;
}

.register-button,
.close-button {
    display: none;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* FOOTER */

#section-footer {
    flex-shrink: 0;
}

.prefooter {
    background: #333;
    border-bottom: 1px solid #555;
}

.prefooter-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 0;
    max-width: 144rem;
    margin: 0 auto;
}

.prefooter img {
    width: 12%;
}
.prefooter h4 {
    color: var(--color-white);
    font-size: 1.5rem;
}
.prefooter a {
    color: var(--color-white);
}
.prefooter a:hover {
    text-decoration: underline;
}

.footer {
    padding: 6rem 0;
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.footer p {
    text-align: center;
    color: var(--color-white);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.footer a {
    font-size: 1rem;
    color: var(--color-white);
}

/* /////////////////////////////////////////////////////////////////////////// */

/* 404 & THANK YOU PAGE */

.error-page {
    flex: 1 0 auto;
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.error-page img {
    margin-bottom: 8rem;
}
.error-page h1 {
    font-size: 10rem;
    font-weight: 200;
    margin-bottom: var(--small-pm);
}
.error-page p {
    color: var(--color-white);
    width: 75%;
    margin: 0 auto 8rem auto;
}

/* /////////////////////////////////////////////////////////////////////////// */

/* MEDIA QUERIES */

@media only screen and (max-width: 1440px) {
    h3 {
        font-size: 3.3rem;
        letter-spacing: -0.02em;
    }
    #hero-section {
        padding-top: 15rem;
    }
    #hero-section,
    #promo-section,
    #features-section,
    #idi-section {
        padding-left: var(--medium-pm);
    }
    .prefooter {
        padding: 0 var(--medium-pm);
    }
    #form-section {
        padding-right: var(--medium-pm);
    }
    .the-actual-form {
        padding: var(--medium-pm);
    }
    .mock {
        width: 70%;
    }
    .promot2 {
        padding-right: var(--small-pm);
    }
}

@media only screen and (max-width: 1089px) {
    #ads-section h3 {
        font-size: 3rem;
    }
}

@media only screen and (max-width: 1029px) {
    body {
        font-family: "Mulish", sans-serif;
        overflow-x: hidden;

        background: url(img/pattern.svg) right 60rem no-repeat,
            url(img/bridge.jpg) right 358rem no-repeat;
        background-size: 200%, 120%;
    }
    .container {
        display: flex;
        flex-direction: column;
    }
    .the-actual-form {
        transform: none;
        top: 0;
    }
    .the-actual-form h3,
    .the-actual-form p {
        margin-bottom: 1.8rem;
    }
    .the-actual-form p {
        font-size: 1.3rem;
    }
    .data-collection p {
        font-size: 1rem;
    }
    #form-section {
        display: none;
        padding-right: 0;
        overflow: hidden;
    }
    .register-button {
        display: inline-block;
        cursor: pointer;
        margin: 0 4rem 4rem 4rem;
        position: sticky;
        bottom: 2rem;
        z-index: 99;
        text-align: center;
        outline: none;
    }
    .close-button {
        display: inline-block;
        cursor: pointer;
        position: fixed;
        bottom: 2rem;
        z-index: 99;
        outline: none;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 8rem);
    }
    #myCloseBtn {
        display: none;
    }
    .mobile-form {
        background-color: var(--color-primary);
        display: flex;
        justify-content: center;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 98;
        height: 100%;
        overflow: hidden;
    }
    #hero-section {
        display: flex;
        flex-direction: column;
        padding: 0;
        text-align: center;
        align-items: center;
    }
    .hero-logo {
        width: 13rem;
        padding: 4rem 0;
    }
    .hero-h1 {
        margin: 0;
        font-size: 3.5rem;
        padding-bottom: 4rem;
    }
    #bg-section {
        transform: scaleX(-1);
        margin-top: -5rem;
        z-index: -1;
    }
    .bg-img {
        width: 100%;
        height: auto;
    }
    #mock-up-section {
        margin-top: -13rem;
        margin-bottom: 8rem;
    }
    .mock {
        width: 95%;
        padding-left: 2rem;
    }
    #promo-section {
        display: flex;
        flex-direction: column;
        margin-bottom: 8rem;
        padding-right: var(--medium-pm);
    }
    .promot1,
    .promot2,
    .promot3 {
        width: 100%;
        padding-right: var(--medium-pm);
    }
    .promot1,
    .promot2 {
        margin-bottom: 5rem;
        margin-top: 0;
    }
    .promo-img {
        width: 100%;
    }
    #features-section {
        margin-bottom: 8rem;
        display: flex;
        flex-direction: column;
    }
    .feature {
        width: 100%;
        padding-right: var(--medium-pm);
    }
    .features-title {
        margin-bottom: 4rem;
        padding-right: 2rem;
    }
    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6 {
        margin-bottom: 3rem;
    }
    #ads-section {
        display: flex;
        width: 100%;
        padding: 4rem;
        margin-bottom: 8rem;
        border-radius: 0;
    }
    #ads-section h3 {
        padding: 0;
        width: 100%;
        font-size: 2rem;
    }
    #idi-section {
        margin-bottom: 8rem;
        padding-right: 4rem;
    }
    .prefooter-content {
        flex-direction: column;
        align-items: center;
    }
    .prefooter img {
        width: 40%;
        order: 1;
        margin-bottom: 20px;
    }
    .prefooter h4 {
        order: 2;
        line-height: 1.4;
        text-align: center;
    }
    .footer {
        padding: 40px 50px;
    }
    .footer p {
        line-height: 1.4;
    }
    .error-page img {
        margin-bottom: 3rem;
    }
    .error-page h1 {
        font-size: 5rem;
    }
    .error-page .btn.send {
        margin-bottom: 8rem;
    }
}