/* All rights reserved to Aiman Almureish this project is available for commercial and personal use and this project is under MIT license */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    scroll-behavior: smooth;
}

.wrapperFluid {
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    padding-right: 10px;
    padding-left: 10px;
}

.wrapper {
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    padding-right: 0px;
    padding-left: 0px;
}

.centerImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fontWeight_100 {
    font-weight: 100;
}

.fontWeight_200 {
    font-weight: 200;
}

.fontWeight_300 {
    font-weight: 300;
}

.fontWeight_400 {
    font-weight: 400;
}

.fontWeight_500 {
    font-weight: 500;
}

.fontWeight_600 {
    font-weight: 600;
}

.fontWeight_700 {
    font-weight: 700;
}

.fontWeight_800 {
    font-weight: 800;
}

.fontWeight_900 {
    font-weight: 900;
}


/* WIDTH  */

.w_100 {
    width: 100%;
}

.w_90 {
    width: 90%;
}

.w_80 {
    width: 80%;
}

.w_70 {
    width: 70%;
}

.w_60 {
    width: 60%;
}

.w_50 {
    width: 50%;
}

.w_40 {
    width: 40%;
}

.w_30 {
    width: 30%;
}

.w_20 {
    width: 20%;
}

.w_10 {
    width: 10%;
}


/* HEIGHT  */

.h_100 {
    height: 100%;
}

.h_90 {
    height: 90%;
}

.h_80 {
    height: 80%;
}

.h_70 {
    height: 70%;
}

.h_60 {
    height: 60%;
}

.h_50 {
    height: 50%;
}

.h_40 {
    height: 40%;
}

.h_30 {
    height: 30%;
}

.h_20 {
    height: 20%;
}

.h_10 {
    height: 10%;
}

.heightAuto {
    height: auto;
}

.heightFit {
    height: fit-content;
}


/* vh  */

.h_100vh {
    height: 100vh;
}

.h_90vh {
    height: 90vh;
}

.h_80vh {
    height: 80vh;
}

.h_70vh {
    height: 70vh;
}

.h_60vh {
    height: 60vh;
}

.h_50vh {
    height: 50vh;
}

.h_40vh {
    height: 40vh;
}

.h_30vh {
    height: 30vh;
}

.h_20vh {
    height: 20vh;
}

.h_10vh {
    height: 10vh;
}


/* Padding right */

.pr1em {
    padding-right: 1em;
}

.pr2em {
    padding-right: 2em;
}

.pr3em {
    padding-right: 3em;
}

.pr4em {
    padding-right: 4em;
}

.pr5em {
    padding-right: 5em;
}

.pr6em {
    padding-right: 6em;
}

.pr7em {
    padding-right: 7em;
}

.pr8em {
    padding-right: 8em;
}

.pr9em {
    padding-right: 9em;
}

.pr10em {
    padding-right: 10em;
}


/* Padding left */

.pl1em {
    padding-left: 1em;
}

.pl2em {
    padding-left: 2em;
}

.pl3em {
    padding-left: 3em;
}

.pl4em {
    padding-left: 4em;
}

.pl5em {
    padding-left: 5em;
}

.pl6em {
    padding-left: 6em;
}

.pl7em {
    padding-left: 7em;
}

.pl8em {
    padding-left: 8em;
}

.pl9em {
    padding-left: 9em;
}

.pl10em {
    padding-left: 10em;
}


/* Padding top */

.pt1em {
    padding-top: 1em;
}

.pt2em {
    padding-top: 2em;
}

.pt3em {
    padding-top: 3em;
}

.pt4em {
    padding-top: 4em;
}

.pt5em {
    padding-top: 5em;
}

.pt6em {
    padding-top: 6em;
}

.pt7em {
    padding-top: 7em;
}

.pt8em {
    padding-top: 8em;
}

.pt9em {
    padding-top: 9em;
}

.pt10em {
    padding-top: 10em;
}


/* Padding bottom */

.pb1em {
    padding-bottom: 1em;
}

.pb2em {
    padding-bottom: 2em;
}

.pb3em {
    padding-bottom: 3em;
}

.pb4em {
    padding-bottom: 4em;
}

.pb5em {
    padding-bottom: 5em;
}

.pb6em {
    padding-bottom: 6em;
}

.pb7em {
    padding-bottom: 7em;
}

.pb8em {
    padding-bottom: 8em;
}

.pb9em {
    padding-bottom: 9em;
}

.pb10em {
    padding-bottom: 10em;
}


/* Only padding */

.p1em {
    padding: 1em;
}

.p2em {
    padding: 2em;
}

.p3em {
    padding: 3em;
}

.p4em {
    padding: 4em;
}

.p5em {
    padding: 5em;
}

.p6em {
    padding: 6em;
}

.p7em {
    padding: 7em;
}

.p8em {
    padding: 8em;
}

.p9em {
    padding: 9em;
}

.p10em {
    padding: 10em;
}


/* Margin left */

.ml1em {
    margin-left: 1em;
}

.ml2em {
    margin-left: 2em;
}

.ml3em {
    margin-left: 3em;
}

.ml4em {
    margin-left: 4em;
}

.ml5em {
    margin-left: 5em;
}

.ml6em {
    margin-left: 6em;
}

.ml7em {
    margin-left: 7em;
}

.ml8em {
    margin-left: 8em;
}

.ml9em {
    margin-left: 9em;
}

.ml10em {
    margin-left: 10em;
}


/* Margin */

.m1em {
    margin: 1em;
}

.m2em {
    margin: 2em;
}

.m3em {
    margin: 3em;
}

.m4em {
    margin: 4em;
}

.m5em {
    margin: 5em;
}

.m6em {
    margin: 6em;
}

.m7em {
    margin: 7em;
}

.m8em {
    margin: 8em;
}

.m9em {
    margin: 9em;
}

.m10em {
    margin: 10em;
}


/* Margin right */

.mr1em {
    margin-right: 1em;
}

.mr2em {
    margin-right: 2em;
}

.mr3em {
    margin-right: 3em;
}

.mr4em {
    margin-right: 4em;
}

.mr5em {
    margin-right: 5em;
}

.mr6em {
    margin-right: 6em;
}

.mr7em {
    margin-right: 7em;
}

.mr8em {
    margin-right: 8em;
}

.mr9em {
    margin-right: 9em;
}

.mr10em {
    margin-right: 10em;
}


/* Margin top */

.mt1em {
    margin-top: 1em;
}

.mt2em {
    margin-top: 2em;
}

.mt3em {
    margin-top: 3em;
}

.mt4em {
    margin-top: 4em;
}

.mt5em {
    margin-top: 5em;
}

.mt6em {
    margin-top: 6em;
}

.mt7em {
    margin-top: 7em;
}

.mt8em {
    margin-top: 8em;
}

.mt9em {
    margin-top: 9em;
}

.mt10em {
    margin-top: 10em;
}


/* Margin bottom */

.mb1em {
    margin-bottom: 1em;
}

.mb2em {
    margin-bottom: 2em;
}

.mb3em {
    margin-bottom: 3em;
}

.mb4em {
    margin-bottom: 4em;
}

.mb5em {
    margin-bottom: 5em;
}

.mb6em {
    margin-bottom: 6em;
}

.mb7em {
    margin-bottom: 7em;
}

.mb8em {
    margin-bottom: 8em;
}

.mb9em {
    margin-bottom: 9em;
}

.mb10em {
    margin-bottom: 10em;
}


/* FLOAT  */

.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}

.floatNone {
    float: none;
}


/* TEXT COLOR  */

.textWhite {
    color: #fff;
}

.textBlack {
    color: #000;
}


/* TEXT ALIGN  */

.textRight {
    text-align: right;
}

.textCenter {
    text-align: center;
}

.textLeft {
    text-align: left;
}


/* CLEAR FIX  */

.clearfix {
    clear: both;
    content: "";
}

.title {
    padding-top: 3em;
    padding-bottom: 3em;
}

.listNone {
    list-style: none;
}

.saver {
    position: relative;
    z-index: -1;
    display: table;
    margin: 0;
    max-width: none;
}


/* BUTTONS  */

.buttonDanger {
    background-color: rgb(250, 70, 70);
    padding: 0.7em 1em;
    border-radius: 5px;
    border-style: none;
    color: #fff;
    font-weight: bold;
    transition: all 0.3s ease;
}

.buttonWarn {
    background-color: rgb(182, 169, 50);
    padding: 0.7em 1em;
    border-radius: 5px;
    border-style: none;
    color: #fff;
    font-weight: bold;
    transition: all 0.3s ease;
}

.buttonSubmit {
    background-color: rgb(98, 100, 241);
    padding: 0.7em 1em;
    border-radius: 5px;
    border-style: none;
    color: #fff;
    font-weight: bold;
    transition: all 0.3s ease;
}

.buttonDisable {
    background-color: rgb(134, 134, 134);
    padding: 0.7em 1em;
    border-radius: 5px;
    border-style: none;
    color: #fff;
    font-weight: bold;
    transition: all 0.3s ease;
}


/* POSITIONING */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
}

.fixed {
    position: fixed;
}


/* FLEX  */

.flex {
    display: flex;
}

.flexCenter {
    justify-content: center;
}

.flexBetween {
    justify-content: space-between;
}

.flexAround {
    justify-content: space-around;
}

.flexStart {
    justify-content: flex-start;
}

.flexEnd {
    justify-content: flex-end;
}

.flexStretch {
    justify-content: stretch;
}

.flexEvenly {
    justify-content: space-evenly;
}

.flexAlignCenter {
    align-items: center;
}

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

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

.flexAlignStretch {
    align-items: stretch;
}

.flexRow {
    flex-direction: row;
}

.flexColumn {
    flex-direction: column;
}

.flexColumnReverse {
    flex-direction: column-reverse;
}

.flexRowReverse {
    flex-direction: row-reverse;
}

.flexWrap {
    flex-wrap: wrap;
}

.flexWrapReverse {
    flex-wrap: wrap-reverse;
}

.flexNoWrap {
    flex-wrap: nowrap;
}


/* Overflow */

.overflowScroll {
    overflow: scroll;
}

.overflowHidden {
    overflow: hidden;
}

.overflowVisible {
    overflow: visible;
}


/* Overflow X */

.overflowScroll_X {
    overflow-x: scroll;
}

.overflowHidden_X {
    overflow-x: hidden;
}

.overflowVisible_X {
    overflow-x: visible;
}


/* Overflow Y */

.overflowScroll_Y {
    overflow-y: scroll;
}

.overflowHidden_Y {
    overflow-y: hidden;
}

.overflowVisible_Y {
    overflow-y: visible;
}


/* Media */

@media(max-width: 2560px) {
    .flex_max2560 {
        display: flex;
    }
    .flexCenter_max2560 {
        justify-content: center;
    }
    .flexBetween_max2560 {
        justify-content: space-between;
    }
    .flexAround_max2560 {
        justify-content: space-around;
    }
    .flexStart_max2560 {
        justify-content: flex-start;
    }
    .flexEnd_max2560 {
        justify-content: flex-end;
    }
    .flexStretch_max2560 {
        justify-content: stretch;
    }
    .flexEvenly_max2560 {
        justify-content: space-evenly;
    }
    .flexAlignCenter_max2560 {
        align-items: center;
    }
    .flexAlignStart_max2560 {
        align-items: flex-start;
    }
    .flexAlignEnd_max2560 {
        align-items: flex-end;
    }
    .flexAlignStretch_max2560 {
        align-items: stretch;
    }
    .flexRow_max2560 {
        flex-direction: row;
    }
    .flexColumn_max2560 {
        flex-direction: column;
    }
    .flexColumnReverse_max2560 {
        flex-direction: column-reverse;
    }
    .flexRowReverse_max2560 {
        flex-direction: row-reverse;
    }
    .flexWrap_max2560 {
        flex-wrap: wrap;
    }
    .flexWrapReverse_max2560 {
        flex-wrap: wrap-reverse;
    }
    .flexNoWrap_max2560 {
        flex-wrap: nowrap;
    }
}

@media(max-width: 1440px) {
    .flex_max1440 {
        display: flex;
    }
    .flexCenter_max1440 {
        justify-content: center;
    }
    .flexBetween_max1440 {
        justify-content: space-between;
    }
    .flexAround_max1440 {
        justify-content: space-around;
    }
    .flexStart_max1440 {
        justify-content: flex-start;
    }
    .flexEnd_max1440 {
        justify-content: flex-end;
    }
    .flexStretch_max1440 {
        justify-content: stretch;
    }
    .flexEvenly_max1440 {
        justify-content: space-evenly;
    }
    .flexAlignCenter_max1440 {
        align-items: center;
    }
    .flexAlignStart_max1440 {
        align-items: flex-start;
    }
    .flexAlignEnd_max1440 {
        align-items: flex-end;
    }
    .flexAlignStretch_max1440 {
        align-items: stretch;
    }
    .flexRow_max1440 {
        flex-direction: row;
    }
    .flexColumn_max1440 {
        flex-direction: column;
    }
    .flexColumnReverse_max1440 {
        flex-direction: column-reverse;
    }
    .flexRowReverse_max1440 {
        flex-direction: row-reverse;
    }
    .flexWrap_max1440 {
        flex-wrap: wrap;
    }
    .flexWrapReverse_max1440 {
        flex-wrap: wrap-reverse;
    }
    .flexNoWrap_max1440 {
        flex-wrap: nowrap;
    }
}

@media(max-width: 1024px) {
    .flex_max1024 {
        display: flex;
    }
    .flexCenter_max1024 {
        justify-content: center;
    }
    .flexBetween_max1024 {
        justify-content: space-between;
    }
    .flexAround_max1024 {
        justify-content: space-around;
    }
    .flexStart_max1024 {
        justify-content: flex-start;
    }
    .flexEnd_max1024 {
        justify-content: flex-end;
    }
    .flexStretch_max1024 {
        justify-content: stretch;
    }
    .flexEvenly_max1024 {
        justify-content: space-evenly;
    }
    .flexAlignCenter_max1024 {
        align-items: center;
    }
    .flexAlignStart_max1024 {
        align-items: flex-start;
    }
    .flexAlignEnd_max1024 {
        align-items: flex-end;
    }
    .flexAlignStretch_max1024 {
        align-items: stretch;
    }
    .flexRow_max1024 {
        flex-direction: row;
    }
    .flexColumn_max1024 {
        flex-direction: column;
    }
    .flexColumnReverse_max1024 {
        flex-direction: column-reverse;
    }
    .flexRowReverse_max1024 {
        flex-direction: row-reverse;
    }
    .flexWrap_max1024 {
        flex-wrap: wrap;
    }
    .flexWrapReverse_max1024 {
        flex-wrap: wrap-reverse;
    }
    .flexNoWrap_max1024 {
        flex-wrap: nowrap;
    }
}

@media(max-width: 992px) {
    .flex_max992 {
        display: flex;
    }
    .flexCenter_max992 {
        justify-content: center;
    }
    .flexBetween_max992 {
        justify-content: space-between;
    }
    .flexAround_max992 {
        justify-content: space-around;
    }
    .flexStart_max992 {
        justify-content: flex-start;
    }
    .flexEnd_max992 {
        justify-content: flex-end;
    }
    .flexStretch_max992 {
        justify-content: stretch;
    }
    .flexEvenly_max992 {
        justify-content: space-evenly;
    }
    .flexAlignCenter_max992 {
        align-items: center;
    }
    .flexAlignStart_max992 {
        align-items: flex-start;
    }
    .flexAlignEnd_max992 {
        align-items: flex-end;
    }
    .flexAlignStretch_max992 {
        align-items: stretch;
    }
    .flexRow_max992 {
        flex-direction: row;
    }
    .flexColumn_max992 {
        flex-direction: column;
    }
    .flexColumnReverse_max992 {
        flex-direction: column-reverse;
    }
    .flexRowReverse_max992 {
        flex-direction: row-reverse;
    }
    .flexWrap_max992 {
        flex-wrap: wrap;
    }
    .flexWrapReverse_max992 {
        flex-wrap: wrap-reverse;
    }
    .flexNoWrap_max992 {
        flex-wrap: nowrap;
    }
}

@media(max-width: 768px) {
    .flex_max768 {
        display: flex;
    }
    .flexCenter_max768 {
        justify-content: center;
    }
    .flexBetween_max768 {
        justify-content: space-between;
    }
    .flexAround_max768 {
        justify-content: space-around;
    }
    .flexStart_max768 {
        justify-content: flex-start;
    }
    .flexEnd_max768 {
        justify-content: flex-end;
    }
    .flexStretch_max768 {
        justify-content: stretch;
    }
    .flexEvenly_max768 {
        justify-content: space-evenly;
    }
    .flexAlignCenter_max768 {
        align-items: center;
    }
    .flexAlignStart_max768 {
        align-items: flex-start;
    }
    .flexAlignEnd_max768 {
        align-items: flex-end;
    }
    .flexAlignStretch_max768 {
        align-items: stretch;
    }
    .flexRow_max768 {
        flex-direction: row;
    }
    .flexColumn_max768 {
        flex-direction: column;
    }
    .flexColumnReverse_max768 {
        flex-direction: column-reverse;
    }
    .flexRowReverse_max768 {
        flex-direction: row-reverse;
    }
    .flexWrap_max768 {
        flex-wrap: wrap;
    }
    .flexWrapReverse_max768 {
        flex-wrap: wrap-reverse;
    }
    .flexNoWrap_max768 {
        flex-wrap: nowrap;
    }
}

@media(max-width: 500px) {
    .flex_max500 {
        display: flex;
    }
    .flexCenter_max500 {
        justify-content: center;
    }
    .flexBetween_max500 {
        justify-content: space-between;
    }
    .flexAround_max500 {
        justify-content: space-around;
    }
    .flexStart_max500 {
        justify-content: flex-start;
    }
    .flexEnd_max500 {
        justify-content: flex-end;
    }
    .flexStretch_max500 {
        justify-content: stretch;
    }
    .flexEvenly_max500 {
        justify-content: space-evenly;
    }
    .flexAlignCenter_max500 {
        align-items: center;
    }
    .flexAlignStart_max500 {
        align-items: flex-start;
    }
    .flexAlignEnd_max500 {
        align-items: flex-end;
    }
    .flexAlignStretch_max500 {
        align-items: stretch;
    }
    .flexRow_max500 {
        flex-direction: row;
    }
    .flexColumn_max500 {
        flex-direction: column;
    }
    .flexColumnReverse_max500 {
        flex-direction: column-reverse;
    }
    .flexRowReverse_max500 {
        flex-direction: row-reverse;
    }
    .flexWrap_max500 {
        flex-wrap: wrap;
    }
    .flexWrapReverse_max500 {
        flex-wrap: wrap-reverse;
    }
    .flexNoWrap_max500 {
        flex-wrap: nowrap;
    }
}

@media(max-width: 425px) {
    .flex_max425 {
        display: flex;
    }
    .flexCenter_max425 {
        justify-content: center;
    }
    .flexBetween_max425 {
        justify-content: space-between;
    }
    .flexAround_max425 {
        justify-content: space-around;
    }
    .flexStart_max425 {
        justify-content: flex-start;
    }
    .flexEnd_max425 {
        justify-content: flex-end;
    }
    .flexStretch_max425 {
        justify-content: stretch;
    }
    .flexEvenly_max425 {
        justify-content: space-evenly;
    }
    .flexAlignCenter_max425 {
        align-items: center;
    }
    .flexAlignStart_max425 {
        align-items: flex-start;
    }
    .flexAlignEnd_max425 {
        align-items: flex-end;
    }
    .flexAlignStretch_max425 {
        align-items: stretch;
    }
    .flexRow_max425 {
        flex-direction: row;
    }
    .flexColumn_max425 {
        flex-direction: column;
    }
    .flexColumnReverse_max425 {
        flex-direction: column-reverse;
    }
    .flexRowReverse_max425 {
        flex-direction: row-reverse;
    }
    .flexWrap_max425 {
        flex-wrap: wrap;
    }
    .flexWrapReverse_max425 {
        flex-wrap: wrap-reverse;
    }
    .flexNoWrap_max425 {
        flex-wrap: nowrap;
    }
}

@media(max-width: 375px) {
    .flex_max375 {
        display: flex;
    }
    .flexCenter_max375 {
        justify-content: center;
    }
    .flexBetween_max375 {
        justify-content: space-between;
    }
    .flexAround_max375 {
        justify-content: space-around;
    }
    .flexStart_max375 {
        justify-content: flex-start;
    }
    .flexEnd_max375 {
        justify-content: flex-end;
    }
    .flexStretch_max375 {
        justify-content: stretch;
    }
    .flexEvenly_max375 {
        justify-content: space-evenly;
    }
    .flexAlignCenter_max375 {
        align-items: center;
    }
    .flexAlignStart_max375 {
        align-items: flex-start;
    }
    .flexAlignEnd_max375 {
        align-items: flex-end;
    }
    .flexAlignStretch_max375 {
        align-items: stretch;
    }
    .flexRow_max375 {
        flex-direction: row;
    }
    .flexColumn_max375 {
        flex-direction: column;
    }
    .flexColumnReverse_max375 {
        flex-direction: column-reverse;
    }
    .flexRowReverse_max375 {
        flex-direction: row-reverse;
    }
    .flexWrap_max375 {
        flex-wrap: wrap;
    }
    .flexWrapReverse_max375 {
        flex-wrap: wrap-reverse;
    }
    .flexNoWrap_max375 {
        flex-wrap: nowrap;
    }
}

@media(max-width: 320px) {
    .flex_max320 {
        display: flex;
    }
    .flexCenter_max320 {
        justify-content: center;
    }
    .flexBetween_max320 {
        justify-content: space-between;
    }
    .flexAround_max320 {
        justify-content: space-around;
    }
    .flexStart_max320 {
        justify-content: flex-start;
    }
    .flexEnd_max320 {
        justify-content: flex-end;
    }
    .flexStretch_max320 {
        justify-content: stretch;
    }
    .flexEvenly_max320 {
        justify-content: space-evenly;
    }
    .flexAlignCenter_max320 {
        align-items: center;
    }
    .flexAlignStart_max320 {
        align-items: flex-start;
    }
    .flexAlignEnd_max320 {
        align-items: flex-end;
    }
    .flexAlignStretch_max320 {
        align-items: stretch;
    }
    .flexRow_max320 {
        flex-direction: row;
    }
    .flexColumn_max320 {
        flex-direction: column;
    }
    .flexColumnReverse_max320 {
        flex-direction: column-reverse;
    }
    .flexRowReverse_max320 {
        flex-direction: row-reverse;
    }
    .flexWrap_max320 {
        flex-wrap: wrap;
    }
    .flexWrapReverse_max320 {
        flex-wrap: wrap-reverse;
    }
    .flexNoWrap_max320 {
        flex-wrap: nowrap;
    }
}