.hero {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    height: max-content;
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.905), rgba(255, 255, 255, 0.648)),
        url('/assets/component-img/hero-background.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

@media(min-width:1000px){
    .hero{
        background-attachment: fixed;
    }
}

.menu-responsive {
    position: absolute;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--info-xl);
    background-color: white;
    font-size: var(--font-m);
    font-weight: 700;
    gap: var(--spacing-unit);
    transform: translateX(100%);
    width: 100vw;
    padding-top: calc(4*var(--spacing-unit));
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.slide-in-animate {
    animation: slideInFromRight 750ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform;
}

.slide-out-animate {
    animation: slideOutToRight 750ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform;
}



.hero-content {
    height: max-content;
    width: 96%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--max-width-unit);
    min-height: 100vh;
    flex-direction: column;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.main-logo img {
    height: var(--info-s);
    width: auto;
    object-fit: cover;
}

.subtitle {
    font-size: var(--font-m);
}

.claim {
    font-size: var(--font-l);
    color: var( --color-primary-blue);
    font-weight: 700;
}

@media(max-width:500px) {
    .claim {
        font-size: calc(0.8*var(--font-l));
    }
}

@media(max-width:400px) {
    .claim {
        font-size: calc(0.6*var(--font-l));
    }
}

.btn-to-service {
    display: flex;
    height: max-content;
    gap: var(--spacing-unit);
    margin-top: calc(2 * var(--spacing-unit));
    padding: calc(0.25 * var(--spacing-unit));
    border-radius: var(--radius-std);
    transition: all 300ms ease-in-out;
    font-weight: 700;
    color: var(--color-primary-blue);
}

.btn-to-service:hover {
    cursor: pointer;
    background-color: #6aaa454d;
}

.moving-ticker {
    border: 1px solid #80808082;
    height: 80px;
    overflow: hidden;
    background-color: #004a80;
}

.moving-ticker-content {
    font-size: var(--font-l);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: 700;
    color: var(--color-primary-green);
    width: max-content;
    animation: scroll-ticker 32s linear infinite;
    will-change: transform;
}

.ticker-content {
    white-space: nowrap;
    padding-right: 50px;
    padding-left: 50px;
    font-weight: bold;
    text-transform: uppercase;
}

@keyframes scroll-ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}