/* Hero CSS */




/* Hero */
.hero {
    min-height: 760px;
    padding-top: 114px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff
}


.hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--dark);
    opacity: .35
}


.hero__content {
    position: relative;
    z-index: 2;
    padding: 80px 0
}


.hero h1 {
    max-width: 850px;
    margin: 0 0 18px;
    font-size: clamp(44px, 6vw, 78px);
    line-height: 1;
    font-weight: 800;
    color: #fff
}


.hero p {
    max-width: 720px;
    margin: 0 0 28px;
    font-size: clamp(19px, 2vw, 27px);
    color: #fff
}


.hero__button,
.mopt-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    background: var(--yellow);
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    border-radius: 2px
}


.hero--left {
    text-align: left
}

.hero--center {
    text-align: center
}

.hero--right {
    text-align: right
}


.hero--left p {
    margin-right: auto
}

.hero--center p {
    margin-left: auto;
    margin-right: auto
}

.hero--right p {
    margin-left: auto
}


.hero {
    min-height: 650px;
    padding-top: 72px
}

.hero h1 {
    font-size: 43px
}

.hero--center h1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero--center p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero--center .hero__button {
    margin-left: auto;
    margin-right: auto;
}

.hero--right h1 {
    margin-left: auto;
}

.hero--right p {
    margin-left: auto;
}


.hero {
    background-image: var(--hero-image);
}

@media (max-width: 900px) {
  
    .hero {
            background-image: var(--hero-image-mobile, var(--hero-image)) !important;

        }
}