@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --bg-black-subtle: #0a0a0a;
    --bg-white-subtle: #f8f9fa;
    --bg-linear-gradient: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(0, 0, 0, 1) 100%);
    --bg-radial-gradient: radial-gradient(ellipse at 125% 125%, #101010, #080808, rgba(0, 0, 0, 1));
    --bg-color: #0a0a0a;
    --bg-color-light: #111111;
    --text-color: #f8f9fa;
    --text-color-light: #ffffff;
}

html {
    scroll-behavior: smooth;
}

body {
    transition: all 0.3s ease-in-out !important;
}

* {
    font-family: 'Poppins', sans-serif;
}

.light-theme {
    --bg-linear-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    --bg-radial-gradient: radial-gradient(ellipse at 0% 125%, #c1c1c1, #e0e0e0, rgba(255, 255, 255, 1));
    --bg-color: #ffffff;
    --bg-color-light: #f8f9fa;
    --text-color: #000000;
    --text-color-light: #0a0a0a;
}

.dark-theme {
    --bg-linear-gradient: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(0, 0, 0, 1) 100%);
    --bg-radial-gradient: radial-gradient(ellipse at 125% 125%, #101010, #080808, rgba(0, 0, 0, 1));
    --bg-color: #0a0a0a;
    --bg-color-light: #111111;
    --text-color: #f8f9fa;
    --text-color-light: #ffffff;
}

.bg-ibexwaves {
    /* background-image: radial-gradient( circle 815px at 23.4% -21.8%,  rgba(9,29,85,1) 0.2%, rgba(0,0,0,1) 100.2% ); */
    background-image: var(--bg-radial-gradient) !important;
    transition: all 0.3s ease-in-out;
    color: var(--text-color) !important;
}

.vh-80 {
    height: 80vh !important;
}

.svh-100 {
    height: 100svh !important;
}

/* Effects */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.nav-ibexwaves {
    background-color: var(--text-color);
}

.nav-link-color {
    color: var(--bg-color) !important;
}

.nav-link:hover {
    transform: translate(0, -1px);
    transition: all 0.3s ease-in-out;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;

    }
}

/* Font Family */
.ff-sansita {
    font-family: 'Sansita Swashed', cursive, sans-serif !important;
}

.bg-color {
    background-color: var(--bg-color);
}

svg path {
    fill: var(--text-color);
}

/* Background Colors */
.bg-black-subtle {
    background-color: var(--bg-black-subtle);
    color: var(--bg-white-subtle);
}

/* Smooth Glowing Border */
.glowing-border {
    box-shadow: 0 0 5px var(--text-color);
    animation: glowing 2s ease-in-out infinite;
}

@keyframes glowing {

    0%,
    100% {
        box-shadow: 0 0 5px var(--text-color), 0 0 10px var(--text-color);
    }

    50% {
        box-shadow: 0 0 10px var(--text-color), 0 0 15px var(--text-color);
    }
}

/* Buttons  */
.btn-outline-light {
    color: var(--text-color) !important;
    border-color: var(--text-color) !important;
}

.btn-outline-light:hover {
    color: var(--bg-color) !important;
    background-color: var(--text-color) !important;
    border-color: var(--text-color) !important;
}

.btn-dark {
    color: var(--bg-color) !important;
    background-color: var(--text-color) !important;
    border-color: var(--text-color) !important;
}

.btn-dark:hover {
    background-color: var(--text-color) !important;
    border-color: var(--text-color-light) !important;
}

/* Messsges */
.alert-error {
    background-color: #fccfcf !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem !important;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /* height: 95vh; */
}

::-webkit-scrollbar-thumb {
    background-color: var(--text-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-color);
}

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


.path-0 {
    animation: pathAnim-0 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pathAnim-0 {
    0% {
        d: path("M 0,400 L 0,150 C 109.67857142857142,169.42857142857144 219.35714285714283,188.85714285714286 343,170 C 466.64285714285717,151.14285714285714 604.25,94 739,77 C 873.75,60.00000000000001 1005.6428571428571,83.14285714285715 1122,102 C 1238.357142857143,120.85714285714285 1339.1785714285716,135.42857142857142 1440,150 L 1440,400 L 0,400 Z");
    }

    25% {
        d: path("M 0,400 L 0,150 C 123.82142857142858,187.39285714285714 247.64285714285717,224.78571428571428 371,212 C 494.35714285714283,199.21428571428572 617.25,136.25 740,106 C 862.75,75.75 985.3571428571429,78.21428571428571 1102,91 C 1218.642857142857,103.78571428571429 1329.3214285714284,126.89285714285714 1440,150 L 1440,400 L 0,400 Z");
    }

    50% {
        d: path("M 0,400 L 0,150 C 127.25,178.25 254.5,206.5 369,213 C 483.5,219.5 585.25,204.25 696,180 C 806.75,155.75 926.5,122.5 1052,116 C 1177.5,109.5 1308.75,129.75 1440,150 L 1440,400 L 0,400 Z");
    }

    75% {
        d: path("M 0,400 L 0,150 C 147.53571428571428,157.53571428571428 295.07142857142856,165.07142857142858 408,167 C 520.9285714285714,168.92857142857142 599.2500000000001,165.25 693,145 C 786.7499999999999,124.75 895.9285714285713,87.92857142857142 1023,86 C 1150.0714285714287,84.07142857142858 1295.0357142857142,117.03571428571429 1440,150 L 1440,400 L 0,400 Z");
    }

    100% {
        d: path("M 0,400 L 0,150 C 109.67857142857142,169.42857142857144 219.35714285714283,188.85714285714286 343,170 C 466.64285714285717,151.14285714285714 604.25,94 739,77 C 873.75,60.00000000000001 1005.6428571428571,83.14285714285715 1122,102 C 1238.357142857143,120.85714285714285 1339.1785714285716,135.42857142857142 1440,150 L 1440,400 L 0,400 Z");
    }
}