/*==============================================================================
    ATHENA UI FRAMEWORK
    File        : ui-layout.css
    Description : Layout, Sections & Spacing
    Version     : 1.0
==============================================================================*/


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

@media (min-width:1200px){

    .container{
        max-width:1320px;
    }

}


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

.ui-section{
    position:relative;
    padding:120px 0;
}

.ui-section-sm{
    position:relative;
    padding:80px 0;
}

.ui-section-lg{
    position:relative;
    padding:160px 0;
}

.ui-section:first-child{
    padding-top:120px;
}

.ui-section:last-child{
    margin-bottom:0;
}


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

.ui-section-header{
    max-width:760px;
    margin:0 auto 70px;
}

.ui-section-header.ui-left{
    margin:0 0 70px;
}

.ui-section-header.ui-wide{
    max-width:1000px;
}

.ui-section-label{

    display:inline-block;

    margin-bottom:20px;

    color:var(--ui-accent);

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;
    text-transform:uppercase;
}

.ui-section-title{
    margin-bottom:25px;
}

.ui-section-description{
    margin-bottom:0;
    font-size:18px;
    color:var(--ui-light-text);
}


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

.ui-row{
    margin-bottom:60px;
}

.ui-row:last-child{
    margin-bottom:0;
}


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

.ui-flex{
    display:flex;
}

.ui-flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.ui-flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.ui-align-center{
    align-items:center;
}

.ui-align-start{
    align-items:flex-start;
}

.ui-align-end{
    align-items:flex-end;
}


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

.ui-w-100{
    width:100%;
}

.ui-mx-auto{
    margin-left:auto;
    margin-right:auto;
}


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

/* Margin Top */
.ui-mt-10{margin-top:10px;}
.ui-mt-20{margin-top:20px;}
.ui-mt-30{margin-top:30px;}
.ui-mt-40{margin-top:40px;}
.ui-mt-50{margin-top:50px;}
.ui-mt-60{margin-top:60px;}
.ui-mt-80{margin-top:80px;}
.ui-mt-100{margin-top:100px;}

/* Margin Bottom */
.ui-mb-10{margin-bottom:10px;}
.ui-mb-20{margin-bottom:20px;}
.ui-mb-30{margin-bottom:30px;}
.ui-mb-40{margin-bottom:40px;}
.ui-mb-50{margin-bottom:50px;}
.ui-mb-60{margin-bottom:60px;}
.ui-mb-80{margin-bottom:80px;}
.ui-mb-100{margin-bottom:100px;}

/* Padding Top */
.ui-pt-40{padding-top:40px;}
.ui-pt-60{padding-top:60px;}
.ui-pt-80{padding-top:80px;}
.ui-pt-100{padding-top:100px;}

/* Padding Bottom */
.ui-pb-40{padding-bottom:40px;}
.ui-pb-60{padding-bottom:60px;}
.ui-pb-80{padding-bottom:80px;}
.ui-pb-100{padding-bottom:100px;}


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

.ui-gap-15{
    gap:15px;
}

.ui-gap-20{
    gap:20px;
}

.ui-gap-30{
    gap:30px;
}

.ui-gap-40{
    gap:40px;
}

.ui-gap-50{
    gap:50px;
}


/*==============================================================================
    OVERFLOW
==============================================================================*/

.ui-overflow-hidden{
    overflow:hidden;
}

.ui-position-relative{
    position:relative;
}

.ui-position-absolute{
    position:absolute;
}


/*==============================================================================
    DIVIDERS
==============================================================================*/

.ui-divider{

    width:100%;
    height:1px;

    background:var(--ui-border);

    margin:80px 0;
}


/*==============================================================================
    Z-INDEX
==============================================================================*/

.ui-z1{
    position:relative;
    z-index:1;
}

.ui-z2{
    position:relative;
    z-index:2;
}

.ui-z3{
    position:relative;
    z-index:3;
}


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

@media (max-width:991.98px){

    .ui-section{
        padding:70px 0;
    }

    .ui-section-sm{
        padding:50px 0;
    }

    .ui-section-lg{
        padding:90px 0;
    }

    .ui-section-header{
        margin-bottom:45px;
    }

    .ui-section-title{
        margin-bottom:18px;
    }

    .ui-section-description{
        font-size:16px;
    }

    .ui-row{
        margin-bottom:40px;
    }

    .ui-divider{
        margin:50px 0;
    }

    .ui-mt-80,
    .ui-mt-100{
        margin-top:60px;
    }

    .ui-mb-80,
    .ui-mb-100{
        margin-bottom:60px;
    }

}