@import "../modules/variables";
@import "../modules/mixins";
@import "../modules/fonts";

#bannerWhoWeAre {
    padding-bottom: 187px;
    h1 {
        margin-bottom: 0;
        font-size: 28px;
        max-width: 45ch;
    }
    @media (min-width: 768px) {
        padding-bottom: 253px;
    }
}

#screen {
    padding-bottom: 27px;
    z-index: 5;
    position: relative;
    .img {
        margin-top: -104px;
    }
    h2 {
        font-size: 18px;
        font-weight: lighter;
        b {
            font-weight: bold;
        }
    }
    @media (min-width: 768px) {
        padding-bottom: 72px;
        .img {
            margin-top: -293px;
            margin-bottom: 17px;
            display: flex;
            justify-content: center;
        }
        h2 {
            font-size: 32px;
            text-align: center;
        }
    }
}

#dsop {
    background-color: $orange-light;
    padding-top: 74px; 
    padding-bottom: 58px;
    .logo {
        margin-bottom: 28px;
        padding-left: 20px;
    }
    .content {
        padding-left: 20px;
        h2 {
            font-size: 28px;
            font-family: $gotham-bold;
            line-height: 40px;
            margin-bottom: 6px;
            max-width: 15ch;
        }
        p {
            font-size: 18px;
            max-width: 29ch;
            margin-bottom: 38px;
        }
    }
    @media (min-width: 768px) {
        padding-top: 144px;
        padding-bottom: 100px;
        position: relative;
        &::after {
            content: "";
            position: absolute;
            display: block;
            width: 100%;
            height: 140px;
            background: linear-gradient(to top, $black, transparent);
            opacity: .5;
        }
        .logo {
            margin-bottom: 23px;
            padding-left: calc(var(--bs-gutter-x) * .5);
        }
        .content {
            padding-left: calc(var(--bs-gutter-x) * .5);
            h2 {
                font-size: 46px;
                line-height: 56px;
                margin-bottom: 30px;
                max-width: unset;
            }
            p {
                font-size: 22px;
                line-height: 175%;
                max-width: 90%;
                margin-bottom: 0;
                b {
                    font-weight: bold;
                }
            }
        }
        .img {
            display: flex;
            justify-content: end;
            align-items: start;
            img {
                width: 110%;
                max-width: unset;
            }
        }
    }
}

#use {
    h2 {
        margin-bottom: 20px;
    }
}

#faq {
    padding-bottom: 83px;
    @media (min-width: 768px) {
        padding-bottom: 124px;
    }
}

#signFooter {
    &::before {
        top: 0;
        opacity: .5;
    }
    @media (min-width: 768px) {
        .img {
            margin-top: -149px;
        }
    }
}