.hero {
    padding: 8rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 6rem);
    text-align: center;
}
.hero-background {
    position: absolute;
    inset: 0;
}
.hero-title {
    margin: 0;
    font-size: 7rem;
    color: var(--bc-clr-primary-400);
    animation: hero_load-title 2s ease-out;
}
.hero-content {
    max-width: 60%;
    text-align: center;
    font-size: var(--bc-fs-600);
    color: var(--bc-clr-text-600);
    animation: hero_load-content 1s ease;
}
.hero-buttons {
    margin-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.hero-buttons .btn {
    margin: 0;
    flex: 1;
}
.hero-buttons .btn:last-of-type {
    flex-basis: 100%;
}
.hero-scroll-down {
    margin-block: 1rem;
    font-size: var(--bc-fs-900);
    color: var(--bc-clr-primary-400);
    animation: hero-scroll-down 2.5s ease infinite;
}
@keyframes hero_load-title {
    from {translate: -100vw; opacity: 0}
    to {translate: 0 0; opacity: 1}
}
@keyframes hero_load-content {
    from {translate: 100vw}
    to {translate: 0 0}
}
@keyframes hero-scroll-down {
    from {
        translate: 0;
        scale: 1.2;
        opacity: 1;
    }
    to {
        translate: 0 4rem;
        scale: 1;
        opacity: 0;
    }
}
@media (max-width: 1000px) {
    .hero-title {
        font-size: 6rem;
    }
}

.section {
    margin: 8rem;
    display: grid;
    grid-template-areas: "title image" "content image";
    column-gap: 8rem;
}
.section:nth-child(2n+1) {
    position: relative;
}
.section:nth-child(2n+1)::before {
    content: "";
    background: var(--bc-clr-bg-drop);
    position: absolute;
    inset: -8rem;
    z-index: -1;
}
.section-icon {
    border-radius: .5rem;
    margin: 10px auto;
    grid-area: image;
    align-self: center;
    width: clamp(20rem, 30vw, 40rem);
}
.section-title {
    margin-block: 1rem;
    grid-area: title;
    align-self: end;
    height: fit-content;
    color: var(--bc-clr-primary-400);
}
.section-content {
    grid-area: content;
}

.section-list {
    grid-area: content;
    text-align: initial;
}
.section-list-item {
    padding: 1rem;
    display: flex;
    list-style-type: none;
}
.section-list-item:not(:last-child) {
    border-bottom: 1px solid var(--bc-clr-secondary-400);
}
.section-list-icon {
    font-size: 4rem;
    color: var(--bc-clr-secondary-400);
    margin-inline: 1rem;
    height: fit-content;
}
.section-list-title {
    margin-block: .5rem 0;
}
.section-list-content {
    margin: 0;
    color: var(--bc-clr-text-600);
}

@media (min-width: 950px) {
    .section:nth-child(2n+1) {
        grid-template-areas: "image title" "image content";
    }
}
@media (max-width: 950px) {
    .section {
        grid-template-areas: "title" "image" "content";
        text-align: center;
    }
}

.stats-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    grid-area: image;
    align-self: center;
    min-width: 6rem;
    max-height: 10rem;
}
.stat {
    background: var(-bc-clr-bg-drop);
    border: 1px solid var(--bc-clr-primary-600);
    border-radius: 5px;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.stat-icon {
    font-size: var(--bc-fs-800);
    color: var(--bc-clr-secondary-400);
}
@media (max-width: 950px) {
    .stats-wrapper {
        margin-bottom: 2rem;
    }
}