:root {
    --mainColor:#522546 ;
    --mainColor-alt: #88304E;
    --box-color:#2C2C2C;
    --bars-color:#F7374F;
    --blue-color: #0075ff;
    --blue-alt-color: #0d69d5;
    --orange-color: #f59e0b;
    --green-color: #22c55e;
    --red-color: #f44336;
    --grey-color: #888;
    --main-transation:0.3s;
    --color-icons:wheat;
    --font-family-Awesome:"Font Awesome 6 Free";
    --rad-6:6px;
    --main-border:1px solid #eee;
}
/* Start Displays */
.d-block{
    display: block;
}
.d-flex{
display: flex;
}
.space-between{
    justify-content: space-between;
}
.align-center{
align-items: center;
}
.f-column{
    flex-direction: column;
}
.wrap{
    flex-wrap: wrap;
}
.d-grid{
    display: grid;
}
.gap-20{
    gap: 20px;
}

/* End Displays */
/* Start Padding + Margin */
.p-10{
padding: 10px;
}
.p-15{
    padding: 15px;
}
.p-20{
padding: 20px;
}
.pt-10{
    padding-top: 10px;
}
.p-tb-0{
    padding-top: 0;
    padding-bottom: 0;
}
.p-tb-5{
    padding-top: 5px;
    padding-bottom: 5px;
}
.p-tb-10{
    padding-top: 10px;
    padding-bottom: 10px;
}
.p-tb-15{
    padding-top: 15px;
    padding-bottom: 15px;
}
.p-rl-0{
    padding-right: 0;
    padding-left: 0;
}
.p-rl-5{
    padding-right: 5px;
    padding-left: 5px;
}
.p-rl-10{
    padding-right: 10px;
    padding-left: 10px;
}
.p-rl-15{
    padding-right: 15px;
    padding-left: 15px;
}
.p-rl-20{
    padding-right: 20px;
    padding-left: 20px;
}
/* .p-bm-0{
    padding-bottom: 0;
}
.p-bm-5{
    padding-bottom: 5px;
}
.p-bm-10{
    padding-bottom: 10px;
}
.p-bm-20{
    padding-bottom: 20px;
} */
.m-0{
    margin: 0;
}
.m-15{
    margin: 15px;
}
.m-20{
margin: 20px;
}
.mt-0{
margin-top: 0;
}
.mt-5{
margin-top: 5px;
}
.mt-10{
    margin-top: 10px;
}
.mt-20{
    margin-top: 20px;
}
.mr-5{
    margin-right: 5px;
}
.mr-10{
    margin-right: 10px;
}
.mb-0{
    margin-bottom: 0;
}
.mb-5{
    margin-bottom: 5px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-15{
    margin-bottom: 15px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-30{
    margin-bottom: 30px;
}
.ml-0{
    margin-left: 0;
}
.ml-5{
    margin-left: 5px;
}
.ml-10{
    margin-left: 10px;
}
.ml-15{
    margin-left: 15px;
}
.ml-20{
margin-left: 20px;
}
.ml-30{
    margin-left: 30px;
}
/* End Padding + Margin */
/* Start BackgroundColor + Color */
.bg-main{
    background-color: var(--mainColor);
}
.bg-alt{
    background-color: var(--mainColor-alt);
}
.bg-third{
    background-color: var(--bars-color);
}
.bg-fourth{
    background-color: var(--box-color);
}
.bg-white{
background-color: white;
}
.bg-eee{
    background-color: #eee;
}
.bg-bbb{
    background-color: #bbb;
}
.bg-blue{
    background-color: var(--blue-color);
}
.bg-light-green{
background-color: #22c55e4f;
}
.bg-green-blue{
    background-color: #009688;
}
.bg-light-gold{
    background-color: rgba(255, 217, 0, 0.15);
}
.bg-gold{
    background-color: gold;
}
.bg-light-red{
background-color: #ff0c0c18;
}
.bg-dark-red{
background-color: #ff0c0c ;
}
.bg-X{
    background-color: rgba(0, 0, 0, 0.2);
}
.bg-tube{
    background-color: rgba(255, 0, 0, 0.2);
}
.bg-fb{
    background-color: rgb(24, 119, 242 , 0.2);
}
.bg-fb-icon{
    background-color: #1877f2;
}
.bg-snap{
background-color: rgb(255, 252, 0 , 0.1);
}
.bg-snap-icon{
background-color: #fffc00;
}
.bg-tube-icon{
    background-color: #ff0000;
}
.bg-black{
    background-color: black;
}
.bg-red{
    background-color: var(--red-color);
}
.bg-orange{
    background-color: var(--orange-color);
}
.bg-green{
    background-color: var(--green-color);
}
.bg-ccc{
    background-color: #ccc;
}
.c-black{
color: black;
}
.c-white{
color: white;
}
.c-whiteS{
color: whitesmoke;
}
.c-green-blue{
color: #009688;
}
.c-gold{
    color: gold;
}
.c-gray{
    color: var(--grey-color);
}
.c-main{
    color: var(--mainColor);
}
.c-alt{
    color: var(--mainColor-alt);
}
.c-dark-red{
color: #ff0c0c;
}
.c-yellow{
    color: yellow;
}
.c-orange{
    color: var(--orange-color);
}
.c-green{
    color: var(--green-color);
}
.c-red{
    color: var(--red-color);
}
.c-blue{
    color: var(--blue-color);
}
.c-wheat{
    color: wheat;
}
/* End BackgroundColor + Color */
/* Start Positions */
.rel{
position: relative;
}
.abs{
position: absolute;
}
/* End Positions */
/* Start fonts */
.txt-c{
text-align: center;
}
.fw-bold{
    font-weight: bold;
}
.fw-normal{
    font-weight: normal;
}
.fs-12{
    font-size: 12px;
}
.fs-13{
    font-size: 13px;
}
.fs-14{
font-size: 14px;
}
.fs-15{
    font-size: 15px;
}
.fs-16{
    font-size: 16px;
}
.fs-18{
    font-size: 18px;
}
.fs-20{
font-size: 20px;
}
.fs-25{
    font-size: 25px;
}
.fs-30{
    font-size: 30px;
}
/* End fonts */
/* Start Borders + Outlines*/
.b-none{
    border-style: none;
}
.border-eee{
    border: var(--main-border);
}
.rad-half{
    border-radius: 50%;
}
.rad-4{
    border-radius: 4px;
}
.rad-6{
border-radius: 6px;
}
.rad-10{
border-radius: 10px;
}
/* End Borders + Outlines*/
/* Start Dimensional */
.w-full{
    width: 100%;
}
.w-fit{
    width: fit-content;
}
.w-100{
width: 100px;
}
.w-100{
    width: 100px;
}
.h-50{
    height: 50px;
}
.h-100{
    height: 100px;
}
/* End Dimensional */
/* Start Collections */
.center-flex{
    display:flex;
    align-items: center;
    justify-content: center;
}
.between-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bttn-shape{
    color: white;
    background-color: var(--mainColor-alt);
    width: fit-content;
    font-size: 14px;
    display: block;
    padding: 5px 10px;
    border-radius: var(--rad-6);
}
.btn-shape{
    padding: 4px 10px;
    border-radius: 6px;
}
.box-shadow{
    box-shadow: 0 4px 10px rgba(0, 0, 0 , 0.5);
}
/* End Collections */
/* Start Media Query */
@media (max-width:767px){
    .txt-c-mobile{
        text-align: center;
    }
    .block-mobile{
        display: block;
    }
    .hide-mobile{
        display: none;
    }
}
/* End Media Query */