@import"https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic";.container_bg_clock {
    margin: 40px 20px 0 20px
}

.container {
    max-width: 33.75em;
    margin: auto
}

header,#hero {
    font-size: 80%
}

header {
    background: linear-gradient(90deg, #1E478A 0%, #2656A6 100%);
    padding: 1.375em 1em;
    text-align: center
}

header .header-logo {
    margin-bottom: .9375em
}

header .header-logo img {
    width: 5em
}

header .header-buttons {
    display: flex;
    gap: .9375em;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0
}

header .header-buttons .section-buttons {
    display: flex;
    gap: .5em
}

header .header-buttons a {
    font-family: "Inter",sans-serif;
    font-size: .875em;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    line-height: 1;
    background: #fff;
    padding: .625em 1em;
    border-radius: 6.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content
}

header .header-buttons a.order-now {
    background: radial-gradient(100% 1603.14% at 0% 50.65%, #FDCC00 0%, #FFFA45 50%, #FDCC00 100%);
    padding: .3125em 1.25em;
    font-weight: 700;
    font-size: 1em
}

header .header-buttons a.order-now span {
    background: linear-gradient(90deg, #0C264A 0%, #3D81FA 100%);
    color: rgba(0,0,0,0);
    -webkit-background-clip: text;
    background-clip: text
}

header .header-buttons a.order-now img {
    width: 1.5625em;
    margin-left: .5em
}

#hero {
    background: linear-gradient(90deg, #1E478A 0%, #2656A6 100%),url(../img/hero-bg-mobile.png);
    background-size: 100% 10em,cover;
    background-position: top 23% center,center;
    background-repeat: no-repeat,no-repeat;
    padding: .625em 1.25em 2.5em;
    text-align: center
}

#hero .product-img {
    max-width: 12.5em;
    filter: drop-shadow(0 0 0.625em rgba(255, 255, 255, 0.5))
}

#hero .hero-content {
    margin-top: .625em;
    font-family: "Inter",sans-serif
}

#hero .hero-content h1 {
    font-size: 1.5em;
    font-weight: 700;
    color: #000;
    font-family: inherit;
    margin-bottom: .625em
}

#hero .hero-content p {
    font-size: 1em;
    line-height: 1.3;
    font-weight: 400;
    color: #000;
    font-family: inherit;
    max-width: 90%;
    margin: 0 auto 1.875em
}

#hero .hero-content .logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .9375em
}

#hero .hero-content .logos-container img {
    height: 3em;
    -o-object-fit: contain;
    object-fit: contain
}

@media(min-width: 375px) {
    header,#hero {
        font-size:92%
    }
}

@media(min-width: 420px) {
    header,#hero {
        font-size:100%
    }
}

@media(min-width: 992px) {
    .container {
        max-width:59.375em
    }

    header {
        padding: 1.875em 1.25em
    }

    header .container {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    header .header-logo {
        margin-bottom: 0
    }

    header .header-logo img {
        width: 6.25em
    }

    header .header-buttons {
        display: contents
    }

    header .header-buttons a {
        padding: .75em 1.25em;
        font-size: 1.125em
    }

    header .header-buttons a.order-now {
        padding: .375em 1.5625em;
        font-size: 1.25em
    }

    header .header-buttons a.order-now img {
        width: 1.875em;
        margin-left: .5em
    }

    #hero {
        background: linear-gradient(90deg, #193F7A 0%, #2976F1 100%),url(../img/hero-bg-desktop.png);
        background-size: 10em 100%,cover;
        background-position: center left calc(50% - 22.5em),center;
        background-repeat: no-repeat,no-repeat;
        padding: .625em 1.25em 0;
        text-align: center
    }

    #hero .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5em
    }

    #hero .container .product-img {
        max-width: 15.625em;
        margin-left: 3.75em
    }

    #hero .container .hero-content {
        text-align: left
    }

    #hero .container .hero-content h1 {
        font-size: 2.125em;
        margin-bottom: 1.25em
    }

    #hero .container .hero-content p {
        font-size: 1.25em;
        max-width: 100%;
        margin-bottom: 3.75em
    }

    #hero .container .hero-content .logos-container {
        justify-content: flex-start;
        gap: 1.25em
    }

    #hero .container .hero-content .logos-container img {
        height: 4em
    }
}

@media(min-width: 1366px) {
    .container {
        max-width:80em
    }

    header {
        padding: 2.125em 0
    }

    header .header-logo img {
        width: 6.875em
    }

    header .header-buttons {
        display: contents
    }

    header .header-buttons a {
        padding: .75em 1.5625em
    }

    header .header-buttons a.order-now {
        padding: .375em 1.875em
    }

    header .header-buttons a.order-now img {
        margin-left: .75em
    }

    #hero {
        background-size: 21.875em 100%,cover;
        background-position: center left calc(50% - 29em),center;
        padding: .625em 1.25em 0
    }

    #hero .container {
        gap: 6.875em
    }

    #hero .container .product-img {
        max-width: 24.375em;
        margin-left: 8.75em
    }

    #hero .container .hero-content {
        text-align: left
    }

    #hero .container .hero-content h1 {
        font-size: 2.625em;
        margin-bottom: 1.25em
    }

    #hero .container .hero-content p {
        font-size: 1.25em;
        margin-bottom: 3.75em
    }

    #hero .container .hero-content .logos-container img {
        height: 4.5em
    }
}