/*=================================
        ArenaOS
        LAYOUT.CSS
=================================*/


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

.container{

    width:min(var(--container),92%);

    margin-inline:auto;

}


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

section{

    position:relative;

    padding:var(--section-padding) 0;

}

.section-sm{

    padding:80px 0;

}

.section-lg{

    padding:160px 0;

}


/*=================================
        DISPLAY
=================================*/

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.inline-flex{

    display:inline-flex;

}

.block{

    display:block;

}

.none{

    display:none;

}


/*=================================
        FLEX HELPERS
=================================*/

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.items-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}


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

.grid-2{

    display:grid;

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

    gap:var(--grid-gap);

}

.grid-3{

    display:grid;

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

    gap:var(--grid-gap);

}

.grid-4{

    display:grid;

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

    gap:var(--grid-gap);

}


/*=================================
        SECTION HEADERS
=================================*/

.section-header{

    width:min(760px,100%);

    margin:0 auto 80px;

    text-align:center;

}

.section-title{

    margin-bottom:22px;

}

.section-text{

    color:var(--text-muted);

}


/*=================================
        WIDTH HELPERS
=================================*/

.w-100{

    width:100%;

}

.w-auto{

    width:auto;

}

.max-600{

    max-width:600px;

}

.max-700{

    max-width:700px;

}

.max-800{

    max-width:800px;

}


/*=================================
        SPACING
=================================*/

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mt-60{

    margin-top:60px;

}

.mt-80{

    margin-top:80px;

}

.mt-120{

    margin-top:120px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}

.mb-80{

    margin-bottom:80px;

}

.mb-120{

    margin-bottom:120px;

}


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

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

}

.gap-30{

    gap:30px;

}

.gap-40{

    gap:40px;

}

.gap-60{

    gap:60px;

}


/*=================================
        POSITION
=================================*/

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.overflow-hidden{

    overflow:hidden;

}


/*=================================
        TEXT
=================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}