/* ==========================================================
   SeniorTech Networks Website V3
   File: layout.css
   Purpose: Global Layout
========================================================== */


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

.header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:24px 0;

}


/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}


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

.logo img{

    width:190px;

    display:block;

}


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

.nav-menu{

    display:flex;

    align-items:center;

    gap:36px;

}

.nav-menu a{

    font-weight:500;

    color:var(--color-white);

    transition:var(--transition);

}

.nav-menu a:hover{

    color:var(--color-accent);

}


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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:140px;

    position:relative;

    overflow:hidden;

}


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

.hero__container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}


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

.hero__content{

    display:flex;

    flex-direction:column;

    gap:28px;

}


/* ==========================================================
   HERO BUTTON GROUP
========================================================== */

.hero__buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}


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

.hero__image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero__image img{

    width:100%;

    max-width:620px;

}


/* ==========================================================
   FEATURE CARDS
========================================================== */

.hero__features{

    display:grid;

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

    gap:24px;

    margin-top:70px;

}


/* ==========================================================
   SUMMARY STRIP
========================================================== */

.hero__summary{

    margin-top:60px;

}

.hero__summary .summary-strip{

    display:grid;

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

    gap:24px;

}