@font-face {
    font-family: 'Open Sans';
    src: url(../fonts/OpenSans-SemiBold.ttf);
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Bold';
    src: url(../fonts/OpenSans-ExtraBold.ttf);
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

.soon-page {
    margin: 0;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    font-family: 'Open Sans', sans-serif;
    background-image: url(../img/soon-bg-desktop.jpg);
}

.main {
    width: 100%;
    /* padding: 213px 0 0; */
}

.top-content {
    text-align: center;
    padding: 240px 0 0;
}

.logo {
    margin-bottom: 25px;
    width: 240px;
}

.heading-1 {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 35px;
    color: white;
}

.paragraph {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 35px;
    color: white;
}

.brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 35px;
}

.brand {
    display: inline-block;
    width: auto;
    height: 50px;
    color: white;
}

.brand-ad {
    content: url(../img/brands/brand-ad.svg);
}

.brand-co {
    content: url(../img/brands/brand-co.svg);
}

.brand-el {
    content: url(../img/brands/brand-el.svg);
}

.brand-fi {
    content: url(../img/brands/brand-fi.svg);
}

.brand-nb {
    content: url(../img/brands/brand-nb.svg);
}

.brand-ni {
    content: url(../img/brands/brand-ni.svg);
}

.brand-pu {
    content: url(../img/brands/brand-pu2.svg);
    width: 44px;
    margin: 3px 0 0;
}

.brand-re {
    content: url(../img/brands/brand-re.svg);
}

.brand-ti {
    content: url(../img/brands/brand-ti.svg);
    height: auto;
    width: 146px;
    margin: 10px 0 0;
}

.brand-va {
    content: url(../img/brands/brand-va.svg);
}

.shop-list {
    color: #000;
    margin: 70px 0 0;
    padding: 0 0 50px;
}

.shop-list .paragraph {
    color: #000;
    margin: 0 auto 25px;
    text-align: center;
}

.shop-list ul {
    list-style-type: none;
    padding: 0;
}

.shop-list li {
    font: 700 18px/26px 'Open Sans Bold', sans-serif;
    margin: 0 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pin {
    content: url(../img/pin.svg);
    display: inline-flex;
    align-items: center;
    width: 18px;
    height: auto;
    margin: 0 8px 0 0;
}

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

    .soon-page {
        background-image: none;
    }

    .top-content {
        background-image: url(../img/soon-bg-mobile.jpg);
        background-size: cover;
        margin: 0;
        background-repeat: no-repeat;
        background-position: top center;
        position: relative;
        font-family: 'Open Sans', sans-serif;
        padding: 50px 0 10px;
    }

    .main {
        padding: 0;
    }

    .logo {
        margin-bottom: 23px;
        padding: 0 0 76px;
        max-height: 44px;
        width: auto;
    }

    .heading-1, .paragraph {
        margin-bottom: 30px;
    }

    .heading-1 {
        font-size: 32px;
    }

    .paragraph {
        font-size: 17px;
        max-width: 350px;
        margin: 0 auto 30px;
    }

    .brand-list {
        margin: 0 auto 30px;
        max-width: 450px;
    }

    .shop-list {
        margin: 20px 0 0;
    }
}

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

    /* .main {
        position: absolute;
        top: 25px;
        bottom: 0;
    } */

    .content {
        max-height: 100vh;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    .heading-1 {
        font-size: 32px;
    }

    .paragraph {
        font-size: 17px;
    }

    .brand-list {
        gap: 15px;
    }



}

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

    .top-content {
        padding: 0 0 20px;
    }

    .logo {
        padding: 10% 0 0;
    }

    .heading-1 {
        font-size: 16px;
    }

    .paragraph {
        font-size: 12px;
        margin: 0 auto 4%;
        max-width: 300px;
    }

    .brand-list {
        margin: 0 auto 4%;
        max-width: 300px;
    }

    .brand {
        width: auto;
        height: 29px;
    }

    .brand-ti {
        height: 15px;
    }

    .brand-list + .paragraph {
        padding: 0 0 4%;
    }

    .shop-list {
        margin: 30px auto;
        padding: 0 0 50px;
    }

    .shop-list .paragraph {
        margin: 0 auto 4%;
    }

    .shop-list li {
        font: 700 14px/20px 'Open Sans Bold', sans-serif;
    }
}