.hero {
    width: 100%;
    height: 974px;
    /* max-height: 931px; */
    position: relative;
    background-image: url("../../assets/images/hero/desktop-large.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.hero .container {
    width: 100%;
    /* max-width: 1200px; */
    /* height: 100%; */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.hero .container .hero-logo {
    position: relative;
    bottom: 64px;
    width: 25vw;
    height: auto;
}

.hero .container .hero-content {
    position: relative;
    bottom: 157px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: fit-content;
    /* max-width: 30vw; */
}

.hero .container .hero-content h1 {
    font-family: CircularXX TT,sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 33.28px;
    color: white;
    text-align: center;
    margin-bottom: 300px;
}

.hero .container .hero-content h2 {
    font-family: CircularXX TT,sans-serif;
    font-weight: 700;
    font-size: 65.94px;
    line-height: 68.58px;
    letter-spacing: -2%;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.hero .container .hero-content h1 span { 
    color: rgba(50, 186, 246, 1);
}

.hero .container .hero-content p {
    font-family: CircularXX TT,sans-serif;
    font-weight: 450;
    font-size: 32px;
    line-height: 33.28px;
    color: white;
    text-align: center;
    max-width: 880px;
}


.hero .container .hero-content .hero-date {
    font-family: CircularXX TT,sans-serif;
    font-weight: 450;
    font-size: 32px;
    line-height: 33.28px;
    color: rgba(50, 186, 246, 1);
    text-align: center;
    max-width: unset;
}



@media (max-width: 1440px) {
    .hero {
        height: 966px;
        background-image: url("../../assets/images/hero/desktop-medium.png");
    }

    .hero .container .hero-content {
        bottom: 120px;
    }

    .hero .container .hero-content h1 {
        margin-bottom: 300px;
    }

    .hero .container .hero-content h2 {
        margin-bottom: 24px;
    }

    .hero .container .hero-content p {
        margin-bottom: 24px;
    }

    .hero .container .hero-content .hero-date {
        margin-bottom: 24px;
    }
}

@media (max-width: 1280px) {
    .hero {
        height: 800px;
    }

    .hero .container .hero-content {
        bottom: 60px;
    }

    .hero .container .hero-content h1 {
        margin-bottom: 220px;
    }

    .hero .container .hero-content h2 {
        font-size: 50px;
    }
}

@media (max-width: 1024px) {
    .hero {
        height: 700px;
    }
    
    .hero .container .hero-content h1 {
        font-size: 28px;
        line-height: 30px;
        margin-bottom: 180px;
    }

    .hero .container .hero-content h2 {
        font-size: 45px;
        line-height: 48px;
        margin-bottom: 20px;
    }

    .hero .container .hero-content p,
    .hero .container .hero-content .hero-date {
        font-size: 26px;
        line-height: 28px;
    }
}

@media (max-width: 992px) {
    .hero {
        height: 600px;
        padding: 0 20px;
    }

    .hero .container .hero-content {
        bottom: 40px;
        width: 100%;
        gap: 16px;
    }

    .hero .container .hero-content h1 {
        margin-bottom: 180px;
    }

    .hero .container .hero-content h2 {
        font-size: 40px;
        line-height: 43px;
        margin-bottom: 16px;
    }
    
    
}

@media (max-width: 768px) {
    .hero {
        height: 581px;
        background-image: url("../../assets/images/hero/mobile.png");
    }

    .hero .container {
        flex-direction: column;
        gap: 16px;
    }

    .hero .container .hero-content {
        bottom: 32px;
    }

    .hero .container .hero-content h1 {
        font-size: 3.125vw;
        line-height: 3.385vw;
        margin-bottom: 170px;
    }

    .hero .container .hero-content h2 {
        font-size: 4.688vw;
        line-height: 5.208vw;
    }

    .hero .container .hero-content p,
    .hero .container .hero-content .hero-date {
        font-size: 2.865vw;
        line-height: 3.125vw;
    }

    .hero .container .hero-content .hero-date{
        font-weight: 500;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 120vw;
    }

    .hero .container .hero-logo {
        width: 45vw;
        bottom: 32px;
    }

    .hero .container .hero-content h1 {
        font-size: 4.167vw;
        line-height: 4.583vw;
        margin-bottom: 120px;
    }

    .hero .container .hero-content h2 {
        font-size: 6.667vw;
        line-height: 7.5vw;
    }

    .hero .container .hero-content p,
    .hero .container .hero-content .hero-date {
        font-size: 3.75vw;
        line-height: 4.167vw;
    }
}

@media (max-width: 400px) {
    .hero {
        background-image: url("../../assets/images/hero/mobile-small.png");
    }

    .hero .container .hero-content h1 {
        margin-bottom: 100px;
    }

    .hero .container .hero-content h2 {
        margin-bottom: 10px;
    }

    .hero .container .hero-logo {
    }   

    .hero .container .hero-content p {
    }

    .hero .container .hero-content .hero-date {
    margin-bottom: 14px;
    }

}