/* ==========================================================
   Responsive CSS Framework v1.0
========================================================== */

:root{

    /* Breakpoints */
    --sm:576px;
    --md:768px;
    --lg:992px;
    --xl:1200px;
    --xxl:1400px;

    /* Grid */
    --container:1320px;
    --gutter:24px;

    /* Spacing Scale */
    --space-0:0;
    --space-1:.25rem;   /*4*/
    --space-2:.5rem;    /*8*/
    --space-3:.75rem;   /*12*/
    --space-4:1rem;     /*16*/
    --space-5:1.5rem;   /*24*/
    --space-6:2rem;     /*32*/
    --space-7:3rem;     /*48*/
    --space-8:4rem;     /*64*/

}

/*---Container--*/
.container{
    width:min(100% - 2rem,var(--container));
    margin-inline:auto;
}

.container-fluid{
    width:100%;
    padding-inline:1rem;
}

/*-------Grid System---------*/

.col-1{width:8.333%;}
.col-2{width:16.666%;}
.col-3{width:25%;}
.col-4{width:33.333%;}
.col-5{width:41.666%;}
.col-6{width:50%;}
.col-7{width:58.333%;}
.col-8{width:66.666%;}
.col-9{width:75%;}
.col-10{width:83.333%;}
.col-11{width:91.666%;}
.col-12{width:100%;}


/*---------Responsive Columns-----------------*/

@media(min-width:768px){

.md-1{width:8.333%;}
.md-2{width:16.666%;}
.md-3{width:25%;}
.md-4{width:33.333%;}
.md-5{width:41.666%;}
.md-6{width:50%;}
.md-7{width:58.333%;}
.md-8{width:66.666%;}
.md-9{width:75%;}
.md-10{width:83.333%;}
.md-11{width:91.666%;}
.md-12{width:100%;}

}

@media(min-width:992px){

.lg-1{width:8.333%;}
.lg-2{width:16.666%;}
.lg-3{width:25%;}
.lg-4{width:33.333%;}
.lg-5{width:41.666%;}
.lg-6{width:50%;}
.lg-7{width:58.333%;}
.lg-8{width:66.666%;}
.lg-9{width:75%;}
.lg-10{width:83.333%;}
.lg-11{width:91.666%;}
.lg-12{width:100%;}

}


/*------------Flex Utilities-----------------*/

.d-flex{display:flex;}
.d-inline-flex{display:inline-flex;}
.flex-column{flex-direction:column;}
.flex-row{flex-direction:row;}
.flex-wrap{flex-wrap:wrap;}

.items-start{align-items:flex-start;}
.items-center{align-items:center;}
.items-end{align-items:flex-end;}
.items-stretch{align-items:stretch;}

.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;}

.flex-1{flex:1;}

/*---------Width Utilities----------*/

.w-25{width:25%;}
.w-50{width:50%;}
.w-75{width:75%;}
.w-100{width:100%;}

/*---------Height Utilities----------*/

.h-25{height:25vh;}
.h-50{height:50vh;}
.h-75{height:75vh;}
.h-100{height:100vh;}

/*-------Display Utilities------------*/

.d-none{display:none;}
.d-block{display:block;}
.d-inline{display:inline;}
.d-inline-block{display:inline-block;}

/*----------Margin Utilities-----------*/
.m-0{margin:0;}
.m-1{margin:.25rem;}
.m-2{margin:.5rem;}
.m-3{margin:.75rem;}
.m-4{margin:1rem;}
.m-5{margin:1.5rem;}
.m-6{margin:2rem;}
.m-auto{margin:auto;}

.mt-1{margin-top:.25rem;}
.mt-2{margin-top:.5rem;}
.mt-3{margin-top:.75rem;}
.mt-4{margin-top:1rem;}
.mt-5{margin-top:1.5rem;}
.mt-6{margin-top:2rem;}

.mb-1{margin-bottom:.25rem;}
.mb-2{margin-bottom:.5rem;}
.mb-3{margin-bottom:.75rem;}
.mb-4{margin-bottom:1rem;}
.mb-5{margin-bottom:1.5rem;}
.mb-6{margin-bottom:2rem;}

.ms-auto{margin-left:auto;}
.me-auto{margin-right:auto;}

/*-----------Padding Utilities-----------*/
.p-0{padding:0;}
.p-1{padding:.25rem;}
.p-2{padding:.5rem;}
.p-3{padding:.75rem;}
.p-4{padding:1rem;}
.p-5{padding:1.5rem;}
.p-6{padding:2rem;}

.pt-1{padding-top:.25rem;}
.pt-2{padding-top:.5rem;}
.pt-3{padding-top:.75rem;}
.pt-4{padding-top:1rem;}
.pt-5{padding-top:1.5rem;}
.pt-6{padding-top:2rem;}

.pb-1{padding-bottom:.25rem;}
.pb-2{padding-bottom:.5rem;}
.pb-3{padding-bottom:.75rem;}
.pb-4{padding-bottom:1rem;}
.pb-5{padding-bottom:1.5rem;}
.pb-6{padding-bottom:2rem;}

.ps-4{padding-left:1rem;}
.pe-4{padding-right:1rem;}

/* ==========================================
   Text Alignment
========================================== */

.text-left {text-align: left;}

.text-center {text-align: center;} 

.text-right {text-align: right;}

.text-justify {text-align: justify;}

.text-start {text-align: start;}

.text-end {text-align: end;}