/* 
Layout
Purpose: Manages the structural scaffolding and shell of your web pages.
Key contents: Standardized setups for page headers, sidebars, main content areas, and footers.
Tools: Heavily relies on CSS Grid and Flexbox rules for structural positioning.
*/ 
header {
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 1rem;
    padding: 1rem;

}
.header-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    
    gap: var(--space-4);
}
.nav-list {
    display: flex;
    flex-direction: row;
}
.container {
    display: flex;
    flex-direction: column;
    padding: 3rem 1rem;
}
.hero__container {
    display: flex;
    flex-direction: column;
    padding: 4rem 1rem;
}
.section__container {
    display: flex;
    flex-direction: column;
    padding: 6rem 1rem 2rem;
}
.container__trust {
    padding: 1rem;
}
.headline {
    font-size: var(--hero-text);
    line-height: var(--line-height1);
    text-transform: capitalize;
}
.subheadline {
    font-size: var(--text-4xl);
    line-height: var(--line-height2);
    text-transform: capitalize;

    margin-bottom: var(--space-4);
}
.subheadline--blue {
    color: var(--blue-a11);
}

.section__content {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-8);
}

@media screen and (width < 768px) {
    header nav {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        width: min(15em, 100%);
        z-index: 10;
        flex-direction: column;
        background-color: var(--gray-1);
        transition: left 300ms ease-in-out;
    }
    nav.show {
        left: 0;
    }
    nav.show ~ #overlay {
        display: block;
    }
    .navbar__header {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: 1rem;
    }
    header nav ul {
        flex-direction: column;
        width: 100%;
    }
    header nav a {
        width: 100%;
    }
    header nav a.active-link {
        border-bottom: none;
    }
}
@media screen and (width > 768px) {
    .toggle-menu {
        display: none;
    }
    .navbar__header {
        display: none;
    }
    #navigation {
        align-items: center;
        justify-content: center;
    }
    .navbar__list {
        flex-direction: row;
        align-items: baseline;
    }
    
}