:root {

    --clr-landing-1: #009FEF;
    --clr-landing-2: #060608;
    --clr-landing-3: #3E3E47;
    --clr-landing-4: #3E3E3E;
    font-size      : 16px;
}

header,
footer.observe-for-nav-update {
    display: none !important;
}

main {
    padding-top: 0 !important;
}

h1 {
    font-size  : 5rem;
    font-weight: bold;
    line-height: 5.85rem;
}

h2 {
    font-size  : 3rem;
    font-weight: bold;
    line-height: 3.625rem;
}

h3 {
    font-size  : 2.5rem;
    font-weight: bold;
    line-height: 3.625rem;
}

h4 {
    font-size  : 1.5rem;
    font-weight: bold;
    line-height: 1.875rem;
}

p {
    font-size  : 1.125rem;
    font-weight: normal;
    line-height: 1.5rem;
}

h1,
h2,
h3,
h4 {
    font-style: italic;
}

.white-button,
.blue-button {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100%;
    max-width      : 345px;
    height         : 70px;
    border-radius  : 44px;
    font-size      : 1.25rem;
    line-height    : 1.5rem;
    font-weight    : 600;
    text-transform : uppercase;
    text-decoration: none;
    border         : 0;
    cursor         : pointer;

    &:hover {
        opacity: 0.8;
    }
}

.white-button {
    background: #ffffff 0% 0% no-repeat padding-box;
    color     : #009fef;
}

.blue-button {
    background: #009fef 0% 0% no-repeat padding-box;
    color     : #ffffff;
}

.treatment-landing-input,
input.treatment-landing-input {
    width        : 100%;
    max-width    : 536px;
    height       : 56px;
    border-radius: 10px;
    padding      : 0 20px;
    font-size    : 1.25rem;
    line-height  : 1.375rem;
    font-weight  : normal;
    color        : #9cdeff;
    border       : 1px solid #707070;
    background   : #373737;
    outline      : none;

    &:is(textarea) {
        padding-top   : 26px;
        padding-bottom: 26px;
        height        : auto;
    }

    &::placeholder {
        color: #9cdeff;
    }
}

.section-container {
    max-width: 1640px;
    margin   : 0 auto;
}

.banner {
    background: linear-gradient(90deg, #3e3e47 0%, #060608 100%);
    padding   : 50px 0 100px 0;

    h1,
    h2,
    h3,
    h4,
    p {
        color: #ffffff;
    }

    p {
        margin-top   : 30px;
        margin-bottom: 50px;
        max-width    : 40ch;
    }

    .logo {
        margin       : 0 auto;
        height       : 48px;
        margin-bottom: 85px;
    }

    .section-container>div {
        flex: 1 0 50%;
    }

    .image-container {
        justify-content: flex-end;
    }

    .banner-img {
        max-width : 125%;
        object-fit: contain;
    }

    .banner-info {
        padding-top: 80px;
    }
}


.why-chose-arcad {
    padding   : 60px 0 120px 0;
    background: #009FEF;
    text-align: center;
    color     : #ffffff;

    p {
        color    : #ffffff;
        max-width: 26ch;
    }

    .why-details {
        padding              : 0 5%;
        grid-template-columns: repeat(3, 1fr);
        gap                  : 80px;
        margin-top           : 50px;
    }

    .why-details div {
        align-items   : center;
        flex-direction: column;
        gap           : 20px;
    }

    .icon-container {
        width        : 120px;
        aspect-ratio : 1/1;
        background   : #00263E;
        place-content: center;
        border-radius: 50%;
    }

}

.features-smile-studio {
    background    : #1c1c1c;
    padding-top   : 60px;
    padding-bottom: 125px;

    h2,
    h3,
    h4,
    p {
        color: #ffffff;
    }

    /* Info Section container */
    .section-container.info .content {
        flex-direction : column;
        justify-content: center;
        align-items    : flex-end;
        text-align     : right;
        flex-basis     : 45%;
    }

    p {
        margin-top: 15px;
        max-width : 52ch;
    }

    .blue-button {
        margin-top: 30px;
    }

    .image-container {
        flex-basis: 55%;
    }

    /* End  Info Section container */

    .section-container.key-features {
        background-color: #3e3e3e;
        border-radius   : 45px;
        box-shadow      : 0px 50px 25px #00000057;
        padding         : 50px 70px;

        h3 {
            margin-bottom: 60px;
            text-align   : center;
        }

        .features-container {
            grid-template-columns: repeat(4, 1fr);
            gap                  : 60px;

            h4 {
                color        : #009fef;
                margin-bottom: 25px;
                font-weight  : 600;
            }

            div {
                position: relative;
            }

            div:not(:last-of-type):after {
                content         : "";
                display         : block;
                position        : absolute;
                width           : 1px;
                height          : 100%;
                right           : -30px;
                top             : 0;
                background-color: #ffffff;
            }
        }
    }
}

.smile-studio {
    background: #009fef;
    padding   : 105px 0 300px 0;

    h2,
    h3,
    p {
        color: #fff;
    }

    h3 {
        margin-top   : 10px;
        margin-bottom: 5px;
    }

    p {
        max-width: 45ch;
    }

    .section-container {
        flex-direction: row-reverse;
    }

    .content,
    .image-container {
        flex: 1 0 50%;
    }

    .image-container img {
        margin-left: -70px;
    }

    /* .content {
            padding-left: 70px;
        } */

    .white-button {
        margin-top: 35px;
    }
}

.footer {
    background         : linear-gradient(90deg, #060608 0%, #3e3e47 100%);
    position           : relative;
    background-size    : contain !important;
    background-position: center bottom !important;
    isolation          : isolate;
    padding-top        : 400px;
    padding-bottom     : 500px;

    h2,
    h3,
    p {
        color: #fff;
    }

    .footer-bg {
        position : absolute;
        bottom   : 0;
        width    : 100%;
        max-width: 1640px;
        transform: translateX(-50%);
        z-index  : 1;
        left     : 50%;

        img {
            width: 100%;
        }
    }

    .section-container.section-content {
        z-index       : 2;
        gap           : 5%;
        border-radius : 45px;
        padding       : 70px 16% 75px 5%;
        background    : #3e3e3e;
        box-shadow    : 0px 50px 25px #00000057;
        position      : relative;
        flex-direction: row;
        margin-top    : -610px;
    }

    .content {
        flex-direction: column;
        gap           : 20px;

        img {
            max-width: 368px;
        }

        p {
            max-width: 50ch;
        }
    }

    form {
        padding-top   : 45px;
        flex-direction: column;
        gap           : 35px;
    }

    form,
    .content {
        flex: 1 0 50%;
    }

    input[type='submit'] {
        margin-top   : 30px;
        margin-bottom: 0;
    }
}

.copyright {
    width          : 100%;
    padding        : 0;
    height         : 110px;
    background     : #009FEF;
    justify-content: space-between;
    align-items    : center;

    .section-container {
        width          : 100%;
        justify-content: space-between;
        align-items    : center;
        padding        : 0 5%;
        height         : 100%;
    }

    a {
        color         : #ffffff;
        letter-spacing: 2px;
        font-weight   : 600;

        &.sales-link {
            line-height: 1.2rem;
            text-align : right;
        }

        &:hover {
            opacity: 0.8;
        }
    }
}

@media screen and (max-width: 1700px) {
    :root {
        --landing-padding-left : 10%;
        --landing-padding-right: 10%;
    }

    h1 {
        font-size  : 4rem;
        line-height: 4.85rem;
    }

    .horizontal-section {
        padding-left : var(--landing-padding-left);
        padding-right: var(--landing-padding-right);
    }

    .banner {
        .logo {
            margin-bottom: 60px;
        }
    }
}

@media screen and (max-width: 1366px) {
    :root {
        --landing-padding-left : 5%;
        --landing-padding-right: 5%;
    }

    h1 {
        font-size  : 3.5rem;
        line-height: 4.1rem;
    }

    h2 {
        font-size  : 2.5rem;
        line-height: 3.125rem;
    }

    h3 {
        font-size  : 2rem;
        line-height: 2.875rem;
    }

    h4 {
        font-size  : 1.25rem;
        line-height: 1.625rem;
    }

    .blue-button,
    .white-button {
        font-size: 1.125rem;
        height   : 56px;
    }

    .banner {
        .logo {
            margin-bottom: 35px;
        }
    }

    .features-smile-studio {
        .section-container.info {
            margin-bottom: 35px;
        }

        .section-container.key-features .features-container {
            grid-template-columns: repeat(2, 1fr);
        }

        .section-container.key-features .features-container div:nth-child(even):after {
            width: 0;
        }
    }

    .footer {
        padding-bottom: 380px;
    }
}

@media screen and (max-width: 992px) {
    .banner {
        p {
            margin    : 0 auto;
            text-align: center;
        }

        .blue-button {
            margin: 35px auto 0 auto;
        }

        .logo {
            height: 30px;
        }

        .banner-img {
            width : 65%;
            margin: auto;
        }

        .section-container {
            flex-direction: column;
        }

        .section-container>div {
            flex      : 1 0 100%;
            text-align: center;
        }

        .banner-info {
            padding-top: 36px;
        }
    }

    .why-chose-arcad {
        .why-details {
            gap                  : 25px;
            grid-template-columns: 1fr;
            gap                  : 40px;
        }

        p {
            text-align: center;
        }

        .icon-container {
            width: 92px;
        }
    }

    .features-smile-studio {
        .section-container.info {
            flex-direction: column;
        }

        .section-container.info .content,
        .section-container.info .image-container {
            align-items: center;
            text-align : center;
            flex-basis : 100%;
        }

        .section-container.info img {
            width : 75%;
            margin: 25px auto 0 auto;
        }
    }

    .smile-studio {

        h2,
        h3,
        p {
            text-align: center;
        }

        h2 {
            margin-top: 42px;
        }

        h3 {
            margin: 0;
        }

        p,
        .white-button,
        .image-container img {
            margin: 0 auto;
        }

        .white-button {
            margin-top: 32px;
        }

        .section-container {
            flex-direction: column-reverse;
        }

        .content,
        .image-container {
            flex: 1 0 100%;
        }

        .image-container img {
            max-width: 75%;
        }

        .content {
            padding-left: 0;
            text-align  : center;
        }

    }

    .footer {
        padding-bottom: 290px;

        p {
            text-align: center;
        }

        .section-container.section-content {
            flex-direction: column;
            padding       : 24px 24px 45px 24px;
        }

        .content,
        form {
            flex       : 1 0 100%;
            align-items: center;
        }

        form {
            gap: 20px;
        }
    }
}

@media screen and (max-width: 768px) {

    .treatment-landing-input {
        font-size  : 1rem;
        line-height: 1.25rem;
    }

    h1 {
        font-size  : 2.5rem;
        line-height: 3.125rem;
    }

    h2 {
        font-size  : 2rem;
        line-height: 2.5rem;
    }

    h3 {
        line-height: 2.5rem;
    }

    h4 {
        font-size  : 1.125rem;
        line-height: 1.5rem;
    }

    p {
        line-height: 1.375rem;
    }

    .banner {
        .banner-img {
            margin-left: -24px;
            width      : 100%;
        }

        p {
            margin-top: 22px;
        }
    }

    .smile-studio {
        .image-container img {
            max-width: 100%;
        }
    }

    .features-smile-studio {
        padding-left : 0;
        padding-right: 0;

        .section-container.info {
            margin-bottom: 55px;

            h3,
            h2,
            p {
                text-align   : right;
                padding-left : var(--landing-padding-left);
                padding-right: var(--landing-padding-right);
            }

            .blue-button {
                display: none;
            }

            img {
                margin: 0;
                width : 100%;
            }

            .content {
                align-items: flex-end;
            }
        }

        .section-container.key-features {
            padding     : 40px 24px 80px 24px;
            width       : calc(100% - var(--landing-padding-left) - var(--landing-padding-right));
            margin-left : auto;
            margin-right: auto;

            h3 {
                margin-bottom: 20px;
                text-align   : left;
            }
        }

        .section-container.key-features .features-container {
            grid-template-columns: 1fr;
            gap                  : 40px;

            h4 {
                margin-bottom: 0;
            }

            div:not(:last-of-type):after {
                width: 0;
            }
        }
    }

    .footer {
        padding-bottom: 240px;

        .content img {
            max-width: 207px;
        }

        .content p {
            display: none;
        }
    }

    .copyright {
        .section-container {
            flex-direction: column-reverse;
            align-items   : center;
            justify-content: center;
        }
    }
}


@media screen and (max-width: 520px) {

    .blue-button,
    .white-button {
        float: left;
    }

    .banner {

        h1,
        h2,
        h3,
        h4,
        p {
            text-align: left;
        }
    }

    .smile-studio {

        h2,
        h3,
        p {
            text-align: left;
        }
    }

    footer {
        form {

            p,
            input:not([type="submit"]),
            textarea {
                width    : 100%;
                min-width: 100%;
            }
        }
    }

    .copyright {
        height: 56px;
    }
}