:root
{
    /* font-size */
    --font-8: 12px;
    --font-10: 14px;
    --font-12: 16px;
    --font-14: 18px;
    --font-16: 20px;
    --font-18: 22px;
    --h5: 24px;
    --h4: 29px;
    --h3: 35px;
    --h2: 44px;
    --h1: 53px;

    /* gradients */
    --gradient-main-g: linear-gradient(215deg, #FC6 0%, #2E3192 100%);
    --gradient-g1: linear-gradient(221deg, #2E3192 0%, #4300B1 100%);
    --gradient-g2: linear-gradient(221deg, #8A88FB 0%, #D079EE 100%);
    --gradient-g3: linear-gradient(221deg, #DEB5FF 0%, #6F00B3 100%);
    --gradient-g4: linear-gradient(221deg, #DD7BFF 0%, #FF6C6C 100%);
    --gradient-g5: linear-gradient(221deg, #FFBB89 0%, #7B6AE0 100%);
    --gradient-g6: linear-gradient(136deg, #725182 0%, #4300B1 100%);
    /* gradients invers*/
    --gradient-g1-invers: linear-gradient(-221deg, #2E3192 0%, #4300B1 100%);
    --gradient-g2-invers: linear-gradient(-221deg, #8A88FB 0%, #D079EE 100%);
    --gradient-g3-invers: linear-gradient(-221deg, #DEB5FF 0%, #6F00B3 100%);
    --gradient-g4-invers: linear-gradient(-221deg, #DD7BFF 0%, #FF6C6C 100%);
    --gradient-g5-invers: linear-gradient(-221deg, #FFBB89 0%, #7B6AE0 100%);
    --gradient-g6-invers: linear-gradient(-136deg, #725182 0%, #4300B1 100%);

    
    /* colors */
    --white: #FFFFFF;
    --accent-500: #591C4F;
    --black-50: #E9E9E9;
    --black-75: #A5A3A4;
    --black-100: #7F7D7E;
    --black-200: #484546;
    --black-300: #231F20;
    --black-400: #191616;
    --primary-50: #EAEAF4;
    --primary-75: #A9ABD2;
    --primary-100: #8688C0;
    --primary-200: #5254A5;
    --primary-500: #1C1E59;
    --secondary-500: #9C7C3E;
    --secondary-400: #FFC041;
    --blue: #0B7CC0;
    --danger-100: #E07F95;
    --success-400: #20662C; 
    --success-500: #1C5926; 
    --gray-60: #828282
    
}

/* responsive font-size */
@media screen and (max-width: 1440px) {
    :root{
        --font-8: 12px;
        --font-10: 14px;
        --font-12: 16px;
        --font-14: 18px;
        --font-16: 20px;
        --font-18: 22px;
        --h5: 23px;
        --h4: 27px;
        --h3: 32px;
        --h2: 39px;
        --h1: 49px;
    }
}

@media screen and (max-width: 768px) {
    :root{
        --font-8: 12px;
        --font-10: 14px;
        --font-12: 16px;
        --font-14: 18px;
        --font-16: 20px;
        --font-18: 22px;
        --h5: 22px;
        --h4: 25px;
        --h3: 30px;
        --h2: 34px;
        --h1: 39px;
    }
}


/* for all */
* {
    font-weight: 500 !important;
    font-family: 'NeoSans', sans-serif;
}

/* font weihts */
.weight-800{
    font-weight: 800 !important;
}
.weight-700{
    font-weight: 700 !important;
}
.weight-600{
    font-weight: 600 !important;
}
.weight-500{
    font-weight: 500 !important;
}
.weight-300{
    font-weight: 300 !important;
}

body, html{
    overflow-x: hidden;
}

/* font size */
.font-8{
    font-size: var(--font-8);
}
.font-10{
    font-size: var(--font-10);
}
.font-12{
    font-size: var(--font-12);
}
.font-14{
    font-size: var(--font-14);
}
.font-16{
    font-size: var(--font-16);
}
.font-18{
    font-size: var(--font-18);
}
h1, .h1{
    font-size: var(--h1) !important;
}
h2, .h2{
    font-size: var(--h2) !important;
}
h3, .h3{
    font-size: var(--h3) !important;
}
h4, .h4{
    font-size: var(--h4) !important;
}
h5, .h5{
    font-size: var(--h5) !important;
}
/*\ font size */



/* text colors */
.white-txt{
    color: var(--white)
}
.accent-500-txt{
    color: var(--accent-500)
}
.secondary-400-txt{
    color: var(--secondary-400)
}
.secondary-500-txt{
    color: var(--secondary-500)
}
.primary-50-txt{
    color: var(--primary-50)
}
.primary-75-txt{
    color: var(--primary-75)
}
.primary-100-txt{
    color: var(--primary-100)
}
.primary-200-txt{
    color: var(--primary-200)
}
.primary-500-txt{
    color: var(--primary-500)
}
.black-50-txt{
    color: var(--black-50)
}
.black-75-txt{
    color: var(--black-75)
}
.black-100-txt{
    color: var(--black-100)
}
.black-200-txt{
    color: var(--black-200)
}
.black-300-txt{
    color: var(--black-300)
}
.black-500-txt{
    color: var(--black-500)
}
.blue-txt{
    color: var(--blue)
}
.danger-100-txt{
    color: var(--danger-100)
}
.success-400-txt{
    color: var(--success-400)
}
.success-500-txt{
    color: var(--success-500)
}
.gray-60-txt{
    color: var(--gray-60)
}



/* background colors */
.gradient-main-g{
    background: var(--gradient-main-g);
}
.gradient-g1{
    background: var(--gradient-g1);
}
.gradient-g2{
    background: var(--gradient-g2);
}
.gradient-g3{
    background: var(--gradient-g3);
}
.gradient-g4{
    background: var(--gradient-g4);
}
.gradient-g5{
    background: var(--gradient-g5);
}
.gradient-g6{
    background: var(--gradient-g6);
}

/* text gradient */
.text-gradient-g1{
    background: var(--gradient-g1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-g2{
    background: var(--gradient-g2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-g3{
    background: var(--gradient-g3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-g4{
    background: var(--gradient-g4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-g5{
    background: var(--gradient-g5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-g6{
    background: var(--gradient-g6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* radius */
.radius-8{
    border-radius: 8px;
}
.radius-9{
    border-radius: 9px;
}
.radius-10{
    border-radius: 10px;
}
.radius-11{
    border-radius: 11px;
}
.radius-12{
    border-radius: 12px;
}
.radius-13{
    border-radius: 13px;
}
.radius-14{
    border-radius: 14px;
}
.radius-15{
    border-radius: 15px;
}
.radius-16{
    border-radius: 16px;
}
.radius-17{
    border-radius: 17px;
}
.radius-18{
    border-radius: 18px;
}
.radius-22{
    border-radius: 22px;
}
.radius-26{
    border-radius: 18px;
}


/* max-min lines */
.max-min-lines-2{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    min-height: 3em;
}
.max-min-lines-3{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    min-height: 4.5em;
}

a:hover{
    color: var(--primary-200)
}
a.hover-white{
    color: var(--white);
}

strong{
    font-weight: bold !important
}