:root {
    --hero-bg: url('/images/HomeImages/IndexImages/HeroSectionImages/hero_background.png');
    --hero-section-bg-gradient: linear-gradient(270deg, rgba(2, 11, 31, 0) 0%, #020B1F 48%);
    --demo-account-btn: #DBDCE1;
}

#hero-section {
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 878px;
    padding-top: 5rem;
    position: relative;
}

@media (min-width: 768px){
    #hero-section::before,
    #hero-section::after {
        content: "";
        position: absolute;
        top: 0;
        background: var(--hero-section-bg-gradient);
        z-index: 1;
        pointer-events: none;
        width: 15.625rem;
        height: 100%;
    }

    #hero-section::after {
        right: 0;
        transform: scaleX(-1);
    }

    
}




#hero-section #hero-div{
    margin-left: 8.75rem;
    margin-left: 16.875rem;
}

/*.hero-text-block{
    max-height:231px;
    min-height:231px;
}*/

    .hero-text-block h1 {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 64px;
        line-height: 100%;
        color: var(--main-page-text-color);
    }

.hero-info {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    /*margin-left: 16.875rem;*/
}

.hero-info div{
    max-width: 98px;
    height:88px;
}

.hero-info div:nth-child(2){
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

    .hero-info div span {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 2rem;
        color: var(--main-page-text-color);
    }

    .hero-info div p {
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 1rem;
        color: var(--main-page-text-color);
    }

.demo-account-btn {
    width: 10.5625rem;
    height: 3.375rem;
    top: 553px;
    left: 270px;
    border-radius: 8px;
    gap: 8px;
    padding: 16px;
    background-color: var(--btn-bg-color);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--demo-account-btn);
}

    .demo-account-btn:hover {
        color: var(--main-page-text-color);
        background-color: var(--btn-hover-bg-color);
    }

.btn:focus{
    box-shadow:none;
}

.best-deals-text-container{
    margin-top:3rem;
}

.best-deals-text-container div{
    margin-bottom: 0.75rem;
}

.best-deals-text-container h3{
    font-family: 'Inter', sans-serif;
    font-weight:600;
    font-size: 2rem;
    color: var(--main-page-text-color);
    margin-bottom:0;
}

.best-deals-text-container span{
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    color: var(--main-page-text-color);
}


@media (max-width: 576px) {
    .login-btn {
        font-size: 3.3vw
    }

    .register-btn {
        font-size: 3.3vw
    } 
}