@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html.dark-mode {
    --light_grayish_purple: #171717;
    --light: #1e1e1e;
    --light_a: #ffffff;
    --grey_violet: #ffffffd9;
    --linear_gradient: linear-gradient(180deg, rgba(40,40,40,0.7) 44%, rgba(40,40,40,0.43) 73%, rgba(40,40,40,0));
    --gradient: 0 2px 6px rgba(0, 0, 0, .6), 0 0 transparent, 0 0 transparent;
    --black_alpha_10: rgb(255, 255, 255, 0.05);
    --solid_red_alpha: #ff6347;
    --menu_shadow: #101010d6;
    --blue_purple: #8a8aff;
    --blue_light_solid: #dddce2;
    --table_night: #ffffffd9;
    --very_light_gray: #252525;
    --grey_ultra_light: rgb(255, 255, 255, 0.05);
    --night: #ffffffd9;
    --grey_semi_dark: #fff;
    --blue_navy: #0d6efd;
    --light_pagination: #ffffffd9;
    --grey_purple_alpha: #2f2b3d87;
    --blue_light_alpha: #c0c0ff26;
    --blue_lavender_alpha: #ffffffd9;
    --custom_purple: #fff;
    --selection_bg: #000;
}

:root {
    --black_base: #000;
    --black_alpha: #000000bd;
    --blue_light_alpha: #0000ff26;
    --blue_light_solid: #0000fff5;
    --blue_solid: #0037f1;
    --blue_solid_alpha: #0037f18c;
    --green_dark: #02713c;
    --blue_secondary: #0d6efd;
    --blue_bright_alpha: #0d6efd1f;
    --black_dark: #111;
    --green_blue_alpha: #163ff20f;
    --blue_navy: #1f5db9;
    --grey_dark: #242424;
    --green_bright: #29c76f;
    --green_forest: #2b6f48;
    --grey_purple_alpha: #2f2b3d21;
    --dark_gray: #2F2B3DAD;
    --green_vibrant: #31b131;
    --grey_semi_dark: #333;
    --blue_purple: #3d3cf2;
    --grey_charcoal: #495057;
    --green_light_bright: #51cf86;
    --grey_violet: #5c5968;
    --purple_accent: #6A5ACD;
    --blue_lavender: #6C63FF;
    --blue_lavender_alpha: #6c63ff12;
    --blue_steel: #6d7fcc;
    --slate_gray: #716F7B;
    --blue_indigo_dup: #7367f0;
    --blue_indigo_alpha: #7367f02e;
    --blue_indigo_semi_transparent: #7367f063;
    --grey_mid: #999;
    --grey_light: #aaa;
    --red_deep: #b31c01;
    --grey_very_light: #ccc;
    --red_vivid: #d33333;
    --green_pale: #dff6e8;
    --red_coral: #ea5456;
    --grey_ultra_light: #f1f1f2;
    --orange_vivid: #f57600;
    --light_grayish_purple: #f8f7fa;
    --very_light_gray: #f9f9f9;
    --soft_pink: #fce3e4;
    --bright_orange_alpha: #fd7e141f;
    --bright_orange: #ff9e43;
    --solid_red_alpha: #ff0000c2;
    --solid_red_slightly_more_alpha: #ff0000c3;
    --semi_transparent_red: #ff0000d4;
    --light_beige: #ffefe1;
    --light: #fff;
    --light_a: #ffffff;
    --gradient: 0 2px 6px rgba(47, 43, 61, .14), 0 0 transparent, 0 0 transparent;
    --night: black;
    --gray: gray;
    --linear_gradient_mini: linear-gradient(135deg, #7544f3, #0037f1);
    --linear_gradient: linear-gradient(180deg,rgba(248,247,250,70%) 44%,rgba(248,247,250,43%) 73%,rgba(248,247,250,0%));
    --linear_gradient_right: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    --radial_gradient: radial-gradient(circle at 120.71% 50%, #7544f3 0, #3c3cf2 50%, #0037f1 100%);
    --red: red;
    --black_alpha_10: rgb(0, 0, 0, 0.1);
    --gray_alpha_light: rgba(100, 100, 111, 0.1);
    --blue_outline: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
    --custom_gray: #80808040;
    --custom_gray_light: #80808014;
    --custom_gray_solid: #808080;
    --custom_purple: #6C63FF;
    --white: #ffffffd9;
    --light_pagination: #ffffffd9;
    --selection_bg: #6c63ff1f;
}

*{
    font-family: 'Overpass', sans-serif;
    margin: 0;
    padding: 0;
    outline: none;
    /* border: 1px solid red; */
    /* transition: color 0.1s, background 0.1s, background-color 0.1s, border-color 0.1s, border 0.1s !important; */
}

*::selection{
    background: var(--selection_bg);
    color: var(--blue_lavender);
    text-decoration: underline;
}

*::-webkit-scrollbar{
    width: 7px;
    height: 5px;
    background-color: var(--purple_accent);
    cursor: pointer;
}

*::-webkit-scrollbar-track{
    background-color: var(--gray);
}

*::-webkit-scrollbar-thumb{
    /* border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px; */
    background: var(--blue_lavender);
}

*::-webkit-scrollbar-thumb:hover{
    background: var(--purple_accent);
}

.hero *::selection{
    background: #6C63FF;
    color: yellow;
}

html {
    scroll-behavior: smooth;
}

body{
    padding: 0;
    margin: 0;
    background: var(--light_grayish_purple) !important;
}

img{
    transition: all .5s;
    object-fit: cover;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
}

a{
    text-decoration: none !important;
}

details{
    width: 100%;
    overflow: auto;
}

.pointer-events-none{
    pointer-events: none !important;
}

iframe,
button{
    border: none;
    background: transparent;
}

hr{
    border-bottom: .1px solid var(--night) !important;
    border-top: none !important;
    margin-top: 15px !important;
    opacity: .1 !important;
}

legend{
    float: none !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
    font-weight: bolder;
    margin: 0 1px;
    color: var(--custom_purple);
}

.new-feature{
    font-size: 10px !important;
    padding: 2px 5px !important;
    top: -10px !important;
    border-radius: 3px !important;
    pointer-events: none !important;
    background: var(--soft_pink) !important;
    color: var(--red_coral) !important;
}

.success-mail{
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    display: block;
    margin: 10px 0;
    border: 1px solid green;
    background: var(--green_pale);
    color: var(--green_forest);
}

.error-mail{
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    display: block;
    margin: 10px 0;
    border: 1px solid red;
    background: var(--soft_pink);
    color: var(--red_coral);
}

.info-mail{
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    display: block;
    margin: 10px 0;
    border: 1px solid orange;
    background: var(--light_beige);
    color: var(--orange_vivid);
}

.form-btn {
    background: var(--linear_gradient_mini);
    color: var(--light_a);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    opacity: .8;
    transition: all .3s;
    cursor: pointer;
}

.form-btn:hover {
    opacity: 1;
}

.hidden {
    display: none;
}

#kinetic{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #6C63FF;
    width: 100%;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.kinetic {
    position: relative;
    height: 80px;
    width: 80px;
}

.kinetic::after, .kinetic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: #fff;
    animation: rotateA 1s linear infinite;
}

.kinetic::before {
    transform: rotate(90deg);
    animation: rotateB 1s linear infinite;
}

@keyframes rotateA {
    0%, 25% {
        transform: rotate(0);
    }
    50%, 75% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


@keyframes rotateB {
    0%, 25% {
        transform: rotate(90deg);
    }
    50%, 75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(450deg);
    }
}