/* main content */
.hero-section {
    background: var(--black_white950);
    padding: 120px 0 30px;
    /* padding: 210px 0 30px; */
    color: var(--black_white50);
    text-align: center;
}

/* Sections after reviews */
.section {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.section.show {
    opacity: 1;
    transform: translateY(0);
}

.header-animation-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* opacity: 0;
    transform: scale(0.94);
    animation: heroReveal 1s ease-out forwards;
    animation-delay: 0.6s; */
    opacity: 1;
}

/* @keyframes heroFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
} */
.hero-title,
.hero-content {
    opacity: 0;
    transform: scale(0.94);
    animation: heroReveal 1s ease-out forwards;
    /* animation: heroReveal 1s cubic-bezier(0.2, 0, 0, 1) forwards; */
    animation-delay: 0.6s;
}

@keyframes heroReveal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-title {
    max-width: 920px;
    margin: auto;
}

.hero-content {
    max-width: 800px;
    margin: auto;
}

.text-swap {
    position: relative;
    display: inline-block;
    opacity: 1;
    z-index: 2;
    transition: opacity 0.6s ease-in-out;
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
}

.text-swap.fade-out {
    opacity: 0;
}

.text-swap-wrapper {
    position: relative;
    display: inline-block;
    width: max-content;
    transition: width 0.2s ease;
}

.text-swap-wrapper::after {
    content: "";
    position: absolute;
    inset: -7px;
    background: rgba(61, 61, 241, 0.12);
    border: 1px solid #3D3DF1;
}

/* corner squares */
.text-swap-wrapper::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--black_white50);
    top: -12px;
    left: -12px;
    z-index: 1;
}

.top-right {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--black_white50);
    top: -12px;
    right: -12px;
    z-index: 1;
}

.bottom-right {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--black_white50);
    bottom: -12px;
    right: -12px;
    z-index: 1;
}

.bottom-left {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--black_white50);
    bottom: -12px;
    left: -12px;
    z-index: 1;
}

/* Responsive */
@media (max-width: 1135px) {
    .hero-text-first {
        display: inline-block;
        width: 100%;
    }
    .hero-text-last {
        display: inline-block;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 70px 0 0;
    }

    .header-animation-wrapper {
        gap: 32px;
    }
}