:root
{
    /* font-size */
    --extra-small-text: 10px;
    --small-text: 14px;
    --large-text: 16px;
    --x-large-text: 18px;
    --h5: 20px;
    --h4: 25px;
    --h3: 31px;
    --h2: 39px;
    --h1: 49px;

    /* color styles */
    --color-style-g1: linear-gradient(135deg, #0B7CC0 0%, #203363 100%);
    --color-style-g2: linear-gradient(135deg, #0B7CC0 0%, #730BC0 100%);
    --color-style-g3: linear-gradient(135deg, #0B7CC0 0%, #D939CD 100%);
    --color-style-g4: linear-gradient(135deg, #CE9FFC 0%, #7367F0 100%);
    --color-style-g5: linear-gradient(135deg, #0B7CC0 0%, #13143A 100%);

    --color-style-g1-invers: linear-gradient(-135deg, #0B7CC0 0%, #203363 100%);
    --color-style-g2-invers: linear-gradient(-135deg, #0B7CC0 0%, #730BC0 100%);
    --color-style-g3-invers: linear-gradient(-135deg, #0B7CC0 0%, #D939CD 100%);
    --color-style-g4-invers: linear-gradient(-135deg, #CE9FFC 0%, #7367F0 100%);
    --color-style-g5-invers: linear-gradient(-135deg, #0B7CC0 0%, #13143A 100%);

    /* --color-style-g1: linear-gradient(135deg, #FF7AF5 0%, #513162 100%);
    --color-style-g2: linear-gradient(135deg, #FD6585 0%, #0D25B9 100%);
    --color-style-g3: linear-gradient(135deg, #F6CEEC 0%, #D939CD 100%);
    --color-style-g4: linear-gradient(135deg, #CE9FFC 0%, #7367F0 100%);
    --color-style-g5: linear-gradient(135deg, #FF6FD8 0%, #3813C2 100%);

    --color-style-g1-invers: linear-gradient(-135deg, #FF7AF5 0%, #513162 100%);
    --color-style-g2-invers: linear-gradient(-135deg, #FD6585 0%, #0D25B9 100%);
    --color-style-g3-invers: linear-gradient(-135deg, #F6CEEC 0%, #D939CD 100%);
    --color-style-g4-invers: linear-gradient(-135deg, #CE9FFC 0%, #7367F0 100%);
    --color-style-g5-invers: linear-gradient(-135deg, #FF6FD8 0%, #3813C2 100%); */

    /* colors */
    --color-primary-p50: #E7F2F9;
    --color-primary-p75: #9BC9E5;
    --color-primary-p100: #71B3DA;
    --color-primary-p200: #3492CB;
    --color-primary-p300: #0B7CC0;
    --color-primary-p400:  #085786;
    --color-primary-p500: #074C75;
    --color-secondary-s50: #E7F2F9;;
    --color-secondary-s75: #9BC9E5;
    --color-secondary-s200: #3492CB;
    --color-secondary-s300: #0B7CC0;
    --color-secondary-s500: #074C75;
    --color-success-s50: #EDF4EA;
    --color-success-s200: #69A552;
    --color-success-s300: #4A922E;
    --color-success-s500: #2D591C;
    --color-warning-w50: #F4F0EA;
    --color-warning-w200: #A58352;;
    --color-warning-w300: #92692E;
    --color-warning-w500: #59401C;
    --color-danger-d50: #F4ECEA;
    --color-danger-d75: #D2B2A9;
    --color-danger-d300: #92442E;
    --color-danger-d500: #59291C;
    --color-black-b200: #3B3C5B;
    --color-black-b300: #13143A;
    --color-black-b400: #0D0E29;
    --color-black-b500: #0C0C23;
    --color-blue-b0: #FFFFFF;
    --color-blue-b30: #EBEDF0;;
    --color-blue-b50: #C2C7D0;
    --color-blue-b80: #98A1B0;
    --color-blue-b200: #6B788E;
    --color-blue-b300: #5D6B82;
    --color-blue-b500: #42526D;
    --color-accent-a50: #F1E7F9;
    --color-accent-a75: #C69BE5;
    --color-accent-a200: #8B34CB;
    --color-accent-a300: #730BC0;
    --color-accent-a500: #460775;
    /* --color-danger-d500: #F4ECEA; */


    --color-primary2-p50: #EAEAF4;
    --color-primary2-p200: #5254A5;
    --color-primary2-p300: #2E3192;
    --color-primary2-p400: #202266;
    --color-primary2-p500: #1C1E59;
    --color-red-r75: #D2A9BF;
    --color-red-r200: #A5527E;
    --color-red-r300: #922E63;
    --color-red-r500: #591C3C;
    --color-yellow-y75: #FFEAC0;
    --color-yellow-y300: #FFCC66;
    --color-yellow-y500: #9C7C3E;

    /* shadow */
    --shadow-all: 0px 2px 28px rgba(0, 0, 0, 0.25);
    --shadow-bottom: 0px 91px 36px rgba(0, 0, 0, 0.01), 0px 51px 31px rgba(0, 0, 0, 0.05), 0px 23px 23px rgba(0, 0, 0, 0.09), 0px 6px 12px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    --shadow-right: 99px 0px 40px rgba(0, 0, 0, 0.01), 56px 0px 33px rgba(0, 0, 0, 0.05), 25px 0px 25px rgba(0, 0, 0, 0.09), 6px 0px 14px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    --shadow-left: -103px 0px 41px rgba(0, 0, 0, 0.01), -58px 0px 35px rgba(0, 0, 0, 0.05), -26px 0px 26px rgba(0, 0, 0, 0.09), -6px 0px 14px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    --shadow-bottom-right: 12px 18px 9px rgba(0, 0, 0, 0.01), 7px 10px 7px rgba(0, 0, 0, 0.05), 3px 5px 6px rgba(0, 0, 0, 0.09), 1px 1px 3px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
}

/* responsive font-size */
@media screen and (max-width: 991px) {
    :root{
        --extra-small-text: 10px;
        --small-text: 12px;
        --large-text: 14px;
        --x-large-text: 16px;
        --h5: 18px;
        --h4: 22px;
        --h3: 28px;
        --h2: 35px;
        --h1: 45px;
    }
}

@media screen and (max-width: 576px) {
    :root{
        --extra-small-text: 10px;
        --small-text: 11px;
        --large-text: 12px;
        --x-large-text: 14px;
        --h5: 16px;
        --h4: 20px;
        --h3: 25px;
        --h2: 28px;
        --h1: 35px;
    }
}


/* for all */
* {
    font-family: NotoKufi;
}

/* links */
a{
    color: var(--color-primary-p300);
    text-decoration: none;
}
a:hover{
    color: var(--color-primary-p300);
}


/* inputs */
input[type=checkbox]{
    accent-color: var(--color-yellow-y300);
}
input,
input::placeholder {
    font-size: 0.75rem !important;
}

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

body, html{
    overflow-x: hidden;
}

/* font size */
.extra-small-text{
    font-size: var(--extra-small-text);
}
.small-text{
    font-size: var(--small-text);
}
.large-text{
    font-size: var(--large-text);
}
.x-large-text{
    font-size: var(--x-large-text);
}
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;
}


/* color styles */
.color-style-g1{
    background: var(--color-style-g1);
}
.color-style-g2{
    background: var(--color-style-g2);
}
.color-style-g3{
    background: var(--color-style-g3);
}
.color-style-g4{
    background: var(--color-style-g4);
}
.color-style-g5{
    background: var(--color-style-g5);
}
.color-style-g1-invers{
    background: var(--color-style-g1-invers);
}
.color-style-g2-invers{
    background: var(--color-style-g2-invers);
}
.color-style-g3-invers{
    background: var(--color-style-g3-invers);
}
.color-style-g4-invers{
    background: var(--color-style-g4-invers);
}
.color-style-g5-invers{
    background: var(--color-style-g5-invers);
}

/* text color style */
.txt-color-style-g1{
    background: var(--color-style-g1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* text colors */
.primary-50-t{
    color: var(--color-primary-p50)
}
.primary-75-t{
    color: var(--color-primary-p75)
}
.primary-200-t{
    color: var(--color-primary-p200)
}
.primary-100-t{
    color: var(--color-primary-p100)
}
.primary-300-t{
    color: var(--color-primary-p300)
}
.primary-400-t{
    color: var(--color-primary-p400)
}
.primary-500-t{
    color: var(--color-primary-p500)
}
.primary2-50-t{
    color: var(--color-primary2-p50)
}
.primary2-200-t{
    color: var(--color-primary2-p200)
}
.primary2-300-t{
    color: var(--color-primary2-p300)
}
.primary2-400-t{
    color: var(--color-primary2-p400)
}
.primary2-500-t{
    color: var(--color-primary2-p500)
}
.secondary-50-t{
    color: var(--color-secondary-s50)
}
.secondary-75-t{
    color: var(--color-secondary-s75)
}
.secondary-200-t{
    color: var(--color-secondary-s200)
}
.secondary-300-t{
    color: var(--color-secondary-s300)
}
.secondary-500-t{
    color: var(--color-secondary-s500)
}
.success-50-t{
    color: var(--color-success-s50)
}
.success-200-t{
    color: var(--color-success-s200)
}
.success-300-t{
    color: var(--color-success-s300)
}
.success-500-t{
    color: var(--color-success-s500)
}
.warning-300-t{
    color: var(--color-warning-w300)
}
.warning-50-t{
    color: var(--color-warning-w50)
}
.warning-200-t{
    color: var(--color-warning-w200)
}
.warning-500-t{
    color: var(--color-warning-w500)
}
.danger-50-t{
    color: var(--color-danger-d50)
}
.danger-75-t{
    color: var(--color-danger-d75)
}
.danger-300-t{
    color: var(--color-danger-d300)
}
.danger-500-t{
    color: var(--color-danger-d500)
}
.black-200-t{
    color: var(--color-black-b200)
}
.black-300-t{
    color: var(--color-black-b300)
}
.black-400-t{
    color: var(--color-black-b400)
}
.black-500-t{
    color: var(--color-black-b500)
}
.blue-0-t{
    color: var(--color-blue-b0)
}
.blue-30-t{
    color: var(--color-blue-b30)
}
.blue-50-t{
    color: var(--color-blue-b50)
}
.blue-80-t{
    color: var(--color-blue-b80)
}
.blue-200-t{
    color: var(--color-blue-b200)
}
.blue-300-t{
    color: var(--color-blue-b300)
}
.blue-500-t{
    color: var(--color-blue-b500)
}
.accent-75-t{
    color: var(--color-accent-a75)
}
.accent-50-t{
    color: var(--color-accent-a50)
}
.accent-200-t{
    color: var(--color-accent-a200)
}
.accent-300-t{
    color: var(--color-accent-a300)
}
.accent-500-t{
    color: var(--color-accent-a500)
}
.red-75-t{
    color: var(--color-red-r75)
}
.red-200-t{
    color: var(--color-red-r200)
}
.red-300-t{
    color: var(--color-red-r300)
}
.red-500-t{
    color: var(--color-red-r500)
}
.yellow-75-t{
    color: var(--color-yellow-y75)
}
.yellow-300-t{
    color: var(--color-yellow-y300)
}
.yellow-500-t{
    color: var(--color-yellow-y500)
}



/* background colors */
.primary-50-b{
    background-color: var(--color-primary-p50)
}
.primary-75-b{
    background-color: var(--color-primary-p75)
}
.primary-200-b{
    background-color: var(--color-primary-p200)
}
.primary-100-b{
    background-color: var(--color-primary-p100)
}
.primary-300-b{
    background-color: var(--color-primary-p300)
}
.primary-400-b{
    background-color: var(--color-primary-p400)
}
.primary-500-b{
    background-color: var(--color-primary-p500)
}
.primary2-50-b{
    background-color: var(--color-primary2-p50)
}
.primary2-200-b{
    background-color: var(--color-primary2-p200)
}
.primary2-300-b{
    background-color: var(--color-primary2-p300)
}
.primary2-400-b{
    background-color: var(--color-primary2-p400)
}
.primary2-500-b{
    background-color: var(--color-primary2-p500)
}
.secondary-50-b{
    background-color: var(--color-secondary-s50)
}
.secondary-75-b{
    background-color: var(--color-secondary-s75)
}
.secondary-200-b{
    background-color: var(--color-secondary-s200)
}
.secondary-300-b{
    background-color: var(--color-secondary-s300)
}
.secondary-500-b{
    background-color: var(--color-secondary-s500)
}
.success-50-b{
    background-color: var(--color-success-s50)
}
.success-200-b{
    background-color: var(--color-success-s200)
}
.success-300-b{
    background-color: var(--color-success-s300)
}
.success-500-b{
    background-color: var(--color-success-s500)
}
.warning-50-b{
    background-color: var(--color-warning-w50)
}
.warning-200-b{
    background-color: var(--color-warning-w200)
}
.warning-300-b{
    background-color: var(--color-warning-w300)
}
.warning-500-b{
    background-color: var(--color-warning-w500)
}
.danger-50-b{
    background: var(--color-danger-d50)
}
.danger-75-b{
    background: var(--color-danger-d75)
}
.danger-300-b{
    background-color: var(--color-danger-d300)
}
.danger-500-b{
    background-color: var(--color-danger-d500)
}
.black-200-b{
    background-color: var(--color-black-b200)
}
.black-300-b{
    background-color: var(--color-black-b300)
}
.black-400-b{
    background-color: var(--color-black-b400)
}
.black-500-b{
    background-color: var(--color-black-b500)
}
.blue-0-b{
    background-color: var(--color-blue-b0)
}
.blue-30-b{
    background-color: var(--color-blue-b30)
}
.blue-50-b{
    background-color: var(--color-blue-b50)
}
.blue-80-b{
    background-color: var(--color-blue-b80)
}
.blue-200-b{
    background-color: var(--color-blue-b200)
}
.blue-300-b{
    background-color: var(--color-blue-b300)
}
.blue-500-b{
    background-color: var(--color-blue-b500)
}
.accent-75-b{
    background-color: var(--color-accent-a75)
}
.accent-50-b{
    background-color: var(--color-accent-a50)
}
.accent-200-b{
    background-color: var(--color-accent-a200)
}
.accent-300-b{
    background-color: var(--color-accent-a300)
}
.accent-500-b{
    background-color: var(--color-accent-a500)
}
.red-75-b{
    background-color: var(--color-red-r75)
}
.red-200-b{
    background-color: var(--color-red-r200)
}
.red-300-b{
    background-color: var(--color-red-r300)
}
.red-500-b{
    background-color: var(--color-red-r500)
}
.yellow-75-b{
    background-color: var(--color-yellow-y75)
}
.yellow-300-b{
    background-color: var(--color-yellow-y300)
}
.yellow-500-b{
    background-color: var(--color-yellow-y500)
}



/* shadow */
.shadow-all{
    box-shadow: var(--shadow-all);
}
.shadow-bottom{
    box-shadow: var(--shadow-bottom);
}
.shadow-right{
    box-shadow: var(--shadow-right);
}
.shadow-left{
    box-shadow: var(--shadow-left);
}
.shadow-bottom-right{
    box-shadow: var(--shadow-bottom-right);
}


/* 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;
}


/* 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;
}
.max-min-lines-4{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    min-height: 6em;
}

/* custom gap */
.g-6, .gy-6 {
    --bs-gutter-y: 4rem;
}



.hover-white:hover{
    color: #fff !important;
}