.hero-banner {
    width: 100%;
    height: auto;
    padding-bottom: var(--gap3);
    position: relative
}

.error404 .hero-banner {
    background: var(--primary-400);
}

.hero-banner>.ctnr>.ctnr {
    flex-wrap: wrap;
    padding-top: 110px;
    padding-bottom: 110px;
    align-items: center;
    justify-content: flex-start
}

@media (max-width: 950px) {
    .hero-banner>.ctnr>.ctnr {
        flex-direction:column;
        padding-top: 30px;
        padding-bottom: 30px
    }
}

.hero-banner .bck {
    position: absolute;
    z-index: 0;
    background: var(--primary-400);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-banner>img.vector {
    width: 244px;
    height: auto;
    z-index: 1
}

.home .hero-banner>img.vector {
    position: absolute;
    bottom: 0px;
    right: 0px
}

.hero-banner>.ctnr {
    position: relative
}

.hero-banner .ctnr>img.background {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    z-index: 0
}

.hero-banner .about {
    max-width: 520px;
    z-index: 1;
    padding: 60px 0;
    position: relative
}

@media (max-width: 950px) {
    .hero-banner .about {
        padding:0px
    }
}

.hero-banner .about>.ctnr {
    position: relative;
    z-index: 1
}

.hero-banner .about .subtitle {
    color: var(--white);
    font-size: clamp(22px, calc(1.375rem + ((1vw - 3.75px) * 0.6573)), 29px);
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase
}

.hero-banner .about .title {
    color: var(--secondary-400);
    font-size: 45px;
    font-weight: 700;
    line-height: 120%;
    margin-bottom: 30px
}

.hero-banner .about .desc {
    color: var(--white);
    line-height: 150%;
    margin-bottom: 30px
}

.hero-banner .about .icon {
    width: clamp(85px, calc(5.3125rem + ((1vw - 3.75px) * 6.1033)), 150px);
    height: auto
}

.hero-banner.hero-color {
    background: var(--primary-400)
}

.hero-banner.hero-color>img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: auto;
    max-width: 500px;
    height: auto;
    width: 100%
}

@media (max-width: 950px) {
    .hero-banner.hero-color>img {
        display:none
    }
}

.hero-banner p.intro {
    line-height: 150%;
    margin-top: var(--gap1);
    width: 50%
}

@media (max-width: 375px) {
    .hero-banner p.intro {
        width:280px;
        max-width: 100%
    }
}

.hero-banner.hero-color p.intro,.hero-banner.hero-image p.intro {
    width: 50%
}

@media (max-width: 950px) {
    .hero-banner.hero-color p.intro,.hero-banner.hero-image p.intro {
        width:75%
    }
}

.hero-banner h1 {
    color: var(--white);
    font: bold clamp(35px, calc(2.1875rem + ((1vw - 3.75px) * 3.7559)), 75px) var(--f1);
    line-height: 100%;
    margin: 0px;
    margin-top: 40px
}

.hero-banner h1 span {
    color: var(--secondary-400);
    text-transform: uppercase;
    font-size: clamp(25px, calc(1.5625rem + ((1vw - 3.75px) * 0.939)), 35px);
    display: block;
    line-height: 120%;
    margin-top: 15px
}

.hero-banner p,
.hero-banner .breadcrumb,
.hero-banner .breadcrumb a {
    color: var(--white)
}

.hero-banner .breadcrumb {
    padding-top: var(--gap2);
    margin-bottom: var(--gap2)
}

.hero-banner .breadcrumb img {
    padding: 0px 4px
}

.hero-banner.hero-image>img {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-banner .subtitle {
    color: var(--secondary-400);
    font-size: clamp(22px, calc(1.375rem + ((1vw - 3.75px) * 1.2207)), 35px);
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    margin-top: 5px;
    max-width: 70%;
    padding-left: 0px
}

@media (max-width: 767px) {
    .hero-banner .subtitle {
        max-width:100%
    }
}

/* OTHER */

.single-post .hero-banner >.ctnr >.ctnr {
    padding-top: 0px;
    padding-bottom: 0px;
}

.page-template-template-page-nous-rejoindre .hero-banner {
    background:var(--primary-400);
}

.page-template-template-page-nous-rejoindre .hero-banner h1 {
    margin-bottom:var(--gap1);
}

.page-template-template-page-nous-rejoindre .hero-banner p {
    margin-bottom:var(--gap2);
}