.main-hero-block {
    position: relative;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 1023px) {
    .main-hero-block {
        min-height: 480px;
        padding: 0 64px;
    }
}
@media (max-width: 767px) {
    .main-hero-block {
        min-height: 390px;
        padding: 0 24px;
    }
}
.main-hero-block .content-box {
    position: relative;
    width: 59%;
    text-align: center;
}
@media (max-width: 1023px) {
    .main-hero-block .content-box {
        width: 100%;
    }
}
.main-hero-block .content-box .hero-subtitle {
    font-family: var(--main-font) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
    color: var(--text-text-secondary, #f7f2e6) !important;
}
.main-hero-block .content-box .hero-title {
    font-family: var(--offelia-text) !important;
    font-size: 40px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 48px !important;
    /* 120% */
    color: var(--white) !important;
    margin-bottom: 40px;
}
.main-hero-block .background-box {
    position: absolute;
    left: 0;
    overflow: hidden;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.main-hero-block .background-box:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(0deg, rgba(26, 25, 25, 0.40) 0%, rgba(26, 25, 25, 0.40) 100%);
}
.main-hero-block .background-box img {
    z-index: -2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes fadeGroups {
    0%, 100% {
        opacity: 1;
    }
    33% {
        opacity: 0.3;
    }
    66% {
        opacity: 0.3;
    }
}
.main-hero-block #group-1 {
    animation: fadeGroups 2s infinite;
}
.main-hero-block #group-2 {
    animation: fadeGroups 2s infinite;
    animation-delay: 0.66s;
}
.main-hero-block #group-3 {
    animation: fadeGroups 2s infinite;
    animation-delay: 1.33s;
}