/* =========================================================
   CERFBOX - HERO
   ========================================================= */

.hero-stage {
    position: relative;

    width: calc(100% - 5vw);
    margin: 2.2vw auto 0;

    height: 52.083333vw;
    min-height: 525px;
    background: var(--color-white);

    overflow: hidden;
}
.pages-annexes{
    height: auto;
    min-height: 10vw;
}
.hero-content {
    position: absolute;

    z-index: 10;

    top: 13.468vw;
    left: 12.400794vw;
}

.hero-content h1 {
    margin: 0;

    color: var(--color-black);

    font-family: var(--font-title);

    font-weight: var(--weight-semibold);

    line-height: 1.19;

    letter-spacing: -0.119048vw;
}

.hero-content p {
    margin:
            2.480159vw
            0
            0;

    color: var(--color-text);

    font-family: var(--font-text);

    font-weight: var(--weight-regular);

    line-height: 1.15;
}

.hero-content p strong {
    color: var(--color-black);

    font-weight: var(--weight-bold);
}

.solutions-button {
    width: 17.956349vw;
    height: 3.571429vw;

    margin-top: 4.365079vw;

    padding:
            0
            1.091270vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--color-grey-light);

    color: var(--color-black);

    font-size: 1.190476vw;
    font-weight: var(--weight-bold);

    transition:
            background 0.2s ease,
            transform 0.2s ease;
}

.solutions-button:hover {
    background: var(--color-grey-hover);

    transform: translateY(-1px);
}

.solutions-arrow {
    width: 1.488095vw;
    height: 1.984127vw;

    display: flex;
    align-items: center;
    justify-content: center;
}

.solutions-arrow svg {
    width: 1.289683vw;
    height: auto;
}

.hero-image {
    position: absolute;

    z-index: 5;

    top: 3.769841vw;
    right: 0;

    width: 25.159vw;
    height: 37.933vw;

    overflow: hidden;
}

.hero-image-photo {
    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.hero-triangles-right {
    position: absolute;

    z-index: 5;

    left: 0.5px;
    bottom: -1.3px;

    width: 100%;
    height: auto;

    pointer-events: none;
}

.hero-triangles-left {
    position: absolute;

    z-index: 2;

    left: 0;
    bottom: 9.083vw;

    width: 11.309524vw;
    height: auto;

    pointer-events: none;
}