/* ==========================================================
   RISING SONS AFRICA
   UTILITIES
========================================================== */


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

.container{

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

    margin-inline: auto;

}


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

.section{

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

}


.section-sm{

    padding: 60px 0;

}


.section-lg{

    padding: 140px 0;

}


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

.d-none{

    display: none !important;

}


.d-block{

    display: block !important;

}


.d-inline{

    display: inline !important;

}


.d-inline-block{

    display: inline-block !important;

}


.d-flex{

    display: flex !important;

}


.d-grid{

    display: grid !important;

}


/* ==========================================================
   FLEX DIRECTION
========================================================== */

.flex-row{

    flex-direction: row;

}


.flex-column{

    flex-direction: column;

}


/* ==========================================================
   FLEX WRAP
========================================================== */

.flex-wrap{

    flex-wrap: wrap;

}


.flex-nowrap{

    flex-wrap: nowrap;

}


/* ==========================================================
   ALIGN ITEMS
========================================================== */

.align-start{

    align-items: flex-start;

}


.align-center{

    align-items: center;

}


.align-end{

    align-items: flex-end;

}


.align-stretch{

    align-items: stretch;

}


/* ==========================================================
   JUSTIFY CONTENT
========================================================== */

.justify-start{

    justify-content: flex-start;

}


.justify-center{

    justify-content: center;

}


.justify-end{

    justify-content: flex-end;

}


.justify-between{

    justify-content: space-between;

}


.justify-around{

    justify-content: space-around;

}


.justify-evenly{

    justify-content: space-evenly;

}


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

.gap-1{

    gap: var(--space-1);

}


.gap-2{

    gap: var(--space-2);

}


.gap-3{

    gap: var(--space-3);

}


.gap-4{

    gap: var(--space-4);

}


.gap-5{

    gap: var(--space-5);

}


.gap-6{

    gap: var(--space-6);

}


.gap-7{

    gap: var(--space-7);

}


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

.w-100{

    width: 100%;

}


.w-auto{

    width: auto;

}


/* ==========================================================
   HEIGHT
========================================================== */

.h-100{

    height: 100%;

}


.min-vh-100{

    min-height: 100vh;

}


/* ==========================================================
   MARGIN
========================================================== */

.m-auto{

    margin: auto;

}


.mx-auto{

    margin-inline: auto;

}


.ms-auto{

    margin-left: auto;

}


.me-auto{

    margin-right: auto;

}


/* ==========================================================
   PADDING
========================================================== */

.p-0{

    padding: 0;

}


.p-1{

    padding: var(--space-1);

}


.p-2{

    padding: var(--space-2);

}


.p-3{

    padding: var(--space-3);

}


.p-4{

    padding: var(--space-4);

}


.p-5{

    padding: var(--space-5);

}


.p-6{

    padding: var(--space-6);

}


/* ==========================================================
   MARGIN BOTTOM
========================================================== */

.mb-1{

    margin-bottom: var(--space-1);

}


.mb-2{

    margin-bottom: var(--space-2);

}


.mb-3{

    margin-bottom: var(--space-3);

}


.mb-4{

    margin-bottom: var(--space-4);

}


.mb-5{

    margin-bottom: var(--space-5);

}


.mb-6{

    margin-bottom: var(--space-6);

}


.mb-7{

    margin-bottom: var(--space-7);

}


/* ==========================================================
   MARGIN TOP
========================================================== */

.mt-1{

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

}


.mt-2{

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

}


.mt-3{

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

}


.mt-4{

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

}


.mt-5{

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

}


.mt-6{

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

}


.mt-7{

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

}


/* ==========================================================
   BORDER RADIUS
========================================================== */

.rounded-sm{

    border-radius: var(--radius-sm);

}


.rounded{

    border-radius: var(--radius-md);

}


.rounded-lg{

    border-radius: var(--radius-lg);

}


.rounded-xl{

    border-radius: var(--radius-xl);

}


.rounded-pill{

    border-radius: var(--radius-pill);

}


.rounded-circle{

    border-radius: 50%;

}


/* ==========================================================
   SHADOWS
========================================================== */

.shadow-xs{

    box-shadow: var(--shadow-xs);

}


.shadow-sm{

    box-shadow: var(--shadow-sm);

}


.shadow{

    box-shadow: var(--shadow-md);

}


.shadow-lg{

    box-shadow: var(--shadow-lg);

}


.shadow-xl{

    box-shadow: var(--shadow-xl);

}


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

.position-relative{

    position: relative;

}


.position-absolute{

    position: absolute;

}


.position-fixed{

    position: fixed;

}


.position-sticky{

    position: sticky;

}


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

.overflow-hidden{

    overflow: hidden;

}


.overflow-auto{

    overflow: auto;

}


/* ==========================================================
   CURSOR
========================================================== */

.cursor-pointer{

    cursor: pointer;

}


/* ==========================================================
   VISIBILITY
========================================================== */

.visible{

    visibility: visible;

}


.invisible{

    visibility: hidden;

}


/* ==========================================================
   OBJECT FIT
========================================================== */

.object-cover{

    object-fit: cover;

}


.object-contain{

    object-fit: contain;

}


/* ==========================================================
   TRANSITIONS
========================================================== */

.transition{

    transition: var(--transition);

}


.transition-fast{

    transition: var(--transition-fast);

}


.transition-slow{

    transition: var(--transition-slow);

}