/* ==========================================================================
   Fluxoweby
   Layout
   Version: 1.0
   ========================================================================== */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.container{

    width:min(
        100% - (var(--container-padding) * 2),
        var(--container-width)
    );

    margin-inline:auto;

}

/* ==========================================================================
   MAIN
   ========================================================================== */

main{

    overflow:hidden;

}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

section{

    position:relative;

    padding-block:var(--space-24);

}

section:first-of-type{

    padding-top:calc(var(--header-height) + var(--space-20));

}

/* ==========================================================================
   SECTION CONTENT
   ========================================================================== */

.section-header{

    display:flex;

    flex-direction:column;

    align-items:center;

}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{

    position:fixed;

    inset:0 0 auto 0;

    width:100%;

    height:var(--header-height);

    z-index:var(--z-fixed);

}

.header-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:100%;

}

/* ==========================================================================
   LOGO
   ========================================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:var(--space-3);

}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.navbar{

    display:flex;

    align-items:center;

    gap:var(--space-8);

}

.navbar ul{

    display:flex;

    align-items:center;

    gap:var(--space-6);

}

/* ==========================================================================
   HEADER ACTIONS
   ========================================================================== */

.header-actions{

    display:flex;

    align-items:center;

    gap:var(--space-4);

}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero-wrapper{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    align-items:center;

    gap:var(--space-20);

}

/* ==========================================================================
   GRID
   ========================================================================== */

.grid{

    display:grid;

}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about-wrapper{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    align-items:center;

    gap:var(--space-16);

}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-wrapper{

    display:grid;

    grid-template-columns:

        minmax(320px,420px)

        minmax(0,1fr);

    gap:var(--space-16);

}

/* ==========================================================================
   CLIENTS
   ========================================================================== */

.clients-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:var(--space-8);

    align-items:center;

}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services-grid{

    display:grid;

    grid-template-columns:

        repeat(3,minmax(0,1fr));

    gap:var(--space-8);

}

/* ==========================================================================
   FEATURES
   ========================================================================== */

.features-grid{

    display:grid;

    grid-template-columns:

        repeat(2,minmax(0,1fr));

    gap:var(--space-8);

}

/* ==========================================================================
   STATISTICS
   ========================================================================== */

.statistics-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:var(--space-6);

}

/* ==========================================================================
   PRICING
   ========================================================================== */

.pricing-grid{

    display:grid;

    grid-template-columns:

        repeat(2,minmax(320px,420px));

    justify-content:center;

    gap:var(--space-8);

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer-grid{

    display:grid;

    grid-template-columns:

        2fr
        1fr
        1fr;

    gap:var(--space-16);

}

.footer-bottom{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:var(--space-16);

    padding-top:var(--space-8);

}

/* ==========================================================================
   FLEX UTILITIES
   ========================================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/* ==========================================================================
   GAP UTILITIES
   ========================================================================== */

.gap-2{

    gap:var(--space-2);

}

.gap-4{

    gap:var(--space-4);

}

.gap-6{

    gap:var(--space-6);

}

.gap-8{

    gap:var(--space-8);

}

.gap-10{

    gap:var(--space-10);

}

.gap-12{

    gap:var(--space-12);

}

.gap-16{

    gap:var(--space-16);

}

/* ==========================================================================
   RESPONSIVE BASE
   ========================================================================== */

@media (max-width:1024px){

    .hero-wrapper,

    .about-wrapper,

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .statistics-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .clients-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    section{

        padding-block:var(--space-16);

    }

    .services-grid,

    .features-grid,

    .pricing-grid,

    .statistics-grid,

    .clients-grid{

        grid-template-columns:1fr;

    }

    .navbar{

        display:none;

    }

}