*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html, body{
    height: 100%;
    width: 100%;
    color: var(--muted);
    font-family: var(--font-body);
    background-color: black;
    scroll-behavior: smooth;
    overflow-x: hidden;
}


/* =================================                THEME              =============================*/
:root {
    --bg: #000000;
    --card-bg: radial-gradient(circle,rgba(107, 107, 107, 0.21) 100%, rgba(189, 189, 189, 0.24) 50%, rgba(255, 255, 255, 0.21) 0%);
    --surface: rgba(255, 255, 255, 0.1);
    --hover-bg:rgba(86, 3, 249, 0.3);
    --tertiary: rgb(189,189,189,0.5);
    --muted: rgb(189, 189, 189);    
    --primary: #5603f9;
    --gradient: linear-gradient(
        45deg, 
        #6b6b6b 0%, 
        #9a9a9a 15%, 
        #bdbdbd 30%, 
        #ffffff 50%, 
        #bdbdbd 70%, 
        #9a9a9a 85%, 
        #6b6b6b 100%
    );
    --font-headings: "Oxanium", sans-serif;
    --font-body: "Sora", sans-serif;
    --shiny-cta-bg: #000000;
    --shiny-cta-bg-subtle: #1a1818;
    --shiny-cta-fg: rgb(189, 189, 189);
    --shiny-cta-highlight: #5603f9;
    --shiny-cta-highlight-subtle: #8484ff;
}
/* =================================        BUTTONS                  =============================*/

    @property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
    }

    @property --gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
    }

    @property --gradient-percent {
    syntax: "<percentage>";
    initial-value: 5%;
    inherits: false;
    }

    @property --gradient-shine {
    syntax: "<color>";
    initial-value: white;
    inherits: false;
    }

    .shiny-cta {
    --animation: gradient-angle linear infinite;
    --duration: 3s;
    --shadow-size: 2px;
    isolation: isolate;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline-offset: 4px;
    padding: 1.25rem 2.5rem;
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 360px;
    color: var(--shiny-cta-fg);
    background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
        padding-box,
        conic-gradient(
            from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
            transparent,
            var(--shiny-cta-highlight) var(--gradient-percent),
            var(--gradient-shine) calc(var(--gradient-percent) * 2),
            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
            transparent calc(var(--gradient-percent) * 4)
        )
        border-box;
    box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);

    &::before,
    &::after,
    span::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        translate: -50% -50%;
        z-index: -1;
    }

    &:active {
        translate: 0 1px;
    }
    }

/* Dots pattern */
.shiny-cta::before {
    --size: calc(100% - var(--shadow-size) * 3);
    --position: 2px;
    --space: calc(var(--position) * 2);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(
        circle at var(--position) var(--position),
        white calc(var(--position) / 4),
        transparent 0
        )
        padding-box;
    background-size: var(--space) var(--space);
    background-repeat: space;
    mask-image: conic-gradient(
        from calc(var(--gradient-angle) + 45deg),
        black,
        transparent 10% 90%,
        black
    );
    border-radius: inherit;
    opacity: 0.4;
    z-index: -1;
    }

    /* Inner shimmer */
    .shiny-cta::after {
    --animation: shimmer linear infinite;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
        -50deg,
        transparent,
        var(--shiny-cta-highlight),
        transparent
    );
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: 0.6;
    }

    .shiny-cta span {
    z-index: 1;

    &::before {
        --size: calc(100% + 1rem);
        width: var(--size);
        height: var(--size);
        box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
        opacity: 0;
    }
    }

    /* Animate */
    .shiny-cta {
    --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
    transition: var(--transition);
    transition-property: --gradient-angle-offset, --gradient-percent,
        --gradient-shine;

    &,
    &::before,
    &::after {
        animation: var(--animation) var(--duration),
        var(--animation) calc(var(--duration) / 0.4) reverse paused;
        animation-composition: add;
    }

    span::before {
        transition: opacity var(--transition);
        animation: calc(var(--duration) * 1.5) breathe linear infinite;
    }
    }

    .shiny-cta:is(:hover, :focus-visible) {
    --gradient-percent: 20%;
    --gradient-angle-offset: 95deg;
    --gradient-shine: var(--shiny-cta-highlight-subtle);

    &,
    &::before,
    &::after {
        animation-play-state: running;
    }

    span::before {
        opacity: 1;
    }
    }

    @keyframes gradient-angle {
    to {
        --gradient-angle: 360deg;
    }
    }

    @keyframes shimmer {
    to {
        rotate: 360deg;
    }
    }

    @keyframes breathe {
    from,
    to {
        scale: 1;
    }
    50% {
        scale: 1.2;
    }
}
/* =================================      Sphere                    =============================*/

.sphere-container {
            /* Customizable properties */
            --size: 200px; /* Change this to resize the sphere */
            --color: black;
            --glow-color1: rgba(255, 255, 255, 0.1);
            --glow-color2: rgba(255, 255, 255, 0.2);
            --perspective: 500px;
            --animation-duration: 16s; /* 32/2 = 16s */
            
            /* Fixed properties */
            --items: 32;
            --backface: visible;
            --border: none;
            --background: none;
            --glow: 0 0 calc(var(--size) / 4) 0 var(--glow-color1), 
                    inset 0 0 calc(var(--size) / 4) 0 var(--glow-color2);
            --direction: Y;
            
            width: var(--size);
            height: var(--size);
            display: inline-block;
            transform-style: preserve-3d;
            perspective: var(--perspective);
        }

        .sphere {
            animation: rot var(--animation-duration) linear infinite reverse;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transform-style: preserve-3d;
            transform-origin: center center;
            position: relative;
        }

        .sphere i {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transform-style: preserve-3d;
            backface-visibility: var(--backface);
            box-shadow: var(--glow);
            border: var(--border);
            background: var(--background);
        }

        /* Static positioning for 32 items */
        .sphere i:nth-child(1) { transform: rotateY(11.25deg); }
        .sphere i:nth-child(2) { transform: rotateY(22.5deg); }
        .sphere i:nth-child(3) { transform: rotateY(33.75deg); }
        .sphere i:nth-child(4) { transform: rotateY(45deg); }
        .sphere i:nth-child(5) { transform: rotateY(56.25deg); }
        .sphere i:nth-child(6) { transform: rotateY(67.5deg); }
        .sphere i:nth-child(7) { transform: rotateY(78.75deg); }
        .sphere i:nth-child(8) { transform: rotateY(90deg); }
        .sphere i:nth-child(9) { transform: rotateY(101.25deg); }
        .sphere i:nth-child(10) { transform: rotateY(112.5deg); }
        .sphere i:nth-child(11) { transform: rotateY(123.75deg); }
        .sphere i:nth-child(12) { transform: rotateY(135deg); }
        .sphere i:nth-child(13) { transform: rotateY(146.25deg); }
        .sphere i:nth-child(14) { transform: rotateY(157.5deg); }
        .sphere i:nth-child(15) { transform: rotateY(168.75deg); }
        .sphere i:nth-child(16) { transform: rotateY(180deg); }
        .sphere i:nth-child(17) { transform: rotateX(191.25deg); }
        .sphere i:nth-child(18) { transform: rotateX(202.5deg); }
        .sphere i:nth-child(19) { transform: rotateX(213.75deg); }
        .sphere i:nth-child(20) { transform: rotateX(225deg); }
        .sphere i:nth-child(21) { transform: rotateX(236.25deg); }
        .sphere i:nth-child(22) { transform: rotateX(247.5deg); }
        .sphere i:nth-child(23) { transform: rotateX(258.75deg); }
        .sphere i:nth-child(24) { transform: rotateX(270deg); }
        .sphere i:nth-child(25) { transform: rotateX(281.25deg); }
        .sphere i:nth-child(26) { transform: rotateX(292.5deg); }
        .sphere i:nth-child(27) { transform: rotateX(303.75deg); }
        .sphere i:nth-child(28) { transform: rotateX(315deg); }
        .sphere i:nth-child(29) { transform: rotateX(326.25deg); }
        .sphere i:nth-child(30) { transform: rotateX(337.5deg); }
        .sphere i:nth-child(31) { transform: rotateX(348.75deg); }
        .sphere i:nth-child(32) { transform: rotateX(360deg); }

        @keyframes rot {
            to { transform: rotateY(360deg) rotateZ(360deg); }
        }




/*================================        CUBE                =============================*/

.cube-3d {
            /* Customizable properties */
            --cube-size: 50px; /* Base size - adjust to scale the entire cube */
            --gap-size: 30px;  /* Gap between cube elements */
            --hover-color: #5603f9; /* Main hover color */
            --trail-opacity: 0.5; /* Opacity for trails (0-1) */
            --animation-duration: 5s; /* Animation speed */
            
            /* Fixed properties */
            position: relative;
            top: -80px;
            transform: skewY(-20deg);
            animation: animate var(--animation-duration) linear infinite;
        }

        .cube-3d * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .cube-3d .cube {
            position: relative;
            z-index: 2;
        }

        .cube-3d .cube:nth-child(2) {
            z-index: 1;
            translate: -60px -60px;
        }

        .cube-3d .cube:nth-child(3) {
            z-index: 3;
            translate: 60px 60px;
        }

        .cube-3d .cube > div {
            position: absolute;
            display: flex;
            flex-direction: column;
            gap: var(--gap-size);
            translate: calc(-70px * var(--x)) calc(-60px * var(--y));
        }

        .cube-3d .cube span {
            position: relative;
            display: inline-block;
            width: var(--cube-size);
            height: var(--cube-size);
            background: #dcdcdc;
            z-index: calc(1 * var(--i));
            transition: 1.5s;
        }

        .cube-3d .cube span:hover {
            transition: 0s;
            background: var(--hover-color);
            filter: drop-shadow(0 0 30px var(--hover-color));
        }

        .cube-3d .cube span:hover:before,
        .cube-3d .cube span:hover:after {
            transition: 0s;
            background: var(--hover-color);
            opacity: var(--trail-opacity);
        }

        .cube-3d .cube span:before {
            content: "";
            position: absolute;
            left: -40px;
            width: 40px;
            height: 100%;
            background: #fff;
            transform-origin: right;
            transform: skewY(45deg);
            transition: 1.5s;
        }

        .cube-3d .cube span:after {
            content: "";
            position: absolute;
            top: -40px;
            left: 0px;
            width: 100%;
            height: 40px;
            background: #f2f2f2;
            transform-origin: bottom;
            transform: skewX(45deg);
            transition: 1.5s;
        }

        @keyframes animate {
            0% {
                filter: hue-rotate(0deg);
            }
            100% {
                filter: hue-rotate(360deg);
                
            }
        }


/* =================================      COMMON                  =============================*/
body::-webkit-scrollbar,
.scrollable::-webkit-scrollbar {
    background-color: transparent;
}


.autoshow{
    animation: autoshowAnimation both;
    animation-timeline: view(70% 5%);
}

@keyframes autoshowAnimation{
    from {
        opacity: 0;
        transform: translateY(200px) scale(0.75);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
} 

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-headings);
    font-family: var(--font-headings);
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
a{
    text-decoration: none;
    color: inherit;
}


.stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Create a grid of stars with random positions */
            background-image: 
                radial-gradient(1px 1px at 5% 15%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 12% 88%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 42% 65%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 55% 20%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 68% 75%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 80% 45%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 15% 60%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 45% 10%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 75% 25%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 95% 40%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 10% 30%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 22% 70%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 35% 15%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 50% 90%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 78% 30%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 98% 10%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 8% 45%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 18% 85%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 28% 25%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 38% 65%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 48% 5%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 58% 45%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 68% 85%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 78% 25%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 88% 65%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 98% 5%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 3% 75%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 13% 15%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 23% 55%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 33% 95%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 43% 35%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 53% 75%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 63% 15%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 73% 55%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 83% 95%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 93% 35%, rgba(255,255,255,0.7) 1px, transparent 0);
            background-size: 100% 100%;
            animation: twinkle 1s infinite alternate;
        }

        .stars::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Create a second layer of stars with different positions */
            background-image: 
                radial-gradient(1px 1px at 2% 95%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 17% 22%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 32% 67%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 47% 12%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 62% 77%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 77% 42%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 92% 87%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 7% 52%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 27% 7%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 37% 62%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 57% 27%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 67% 82%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 87% 47%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 97% 2%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 12% 37%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 22% 92%, rgba(255,255,255,0.8) 1px, transparent 0),
                radial-gradient(1px 1px at 42% 57%, rgba(255,255,255,0.7) 1px, transparent 0),
                radial-gradient(1px 1px at 52% 12%, rgba(255,255,255,0.9) 1px, transparent 0),
                radial-gradient(1px 1px at 72% 67%, rgba(255,255,255,0.6) 1px, transparent 0),
                radial-gradient(1px 1px at 82% 22%, rgba(255,255,255,0.8) 1px, transparent 0);
            background-size: 200% 200%;
            animation: drift 2s infinite linear, twinkle 12s infinite alternate-reverse;
        }

        @keyframes twinkle {
            0%, 100% {
                opacity: 0.7;
            }
            50% {
                opacity: 1;
            }
        }

        @keyframes drift {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-5%, -5%);
            }
        }
/* =================================        HEADER                    =============================*/



header{
    width: 100%;
    height: 10vh;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0 5vw;
    backdrop-filter: blur(10px);
}
header img{
    height: 10vh;
    width: auto;
}
nav{
    display: flex;
    align-items: center;
    gap: 2rem;
}

#headerBtn{
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--shiny-cta-fg);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
    position: relative;
    overflow: hidden;
}

#headerBtn:hover{
    background: var(--hover-bg);
    box-shadow: 0 12px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
    color: var(--shiny-cta-highlight);
    color: var(--bg);
    transition: all 0.5s ease;
    animation: fill 0.3s forwards;
}

@keyframes fill {
    0% {
        background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    }
    50% {
        background: var(--hover-bg);
    }
    100%{
        background: linear-gradient(180deg, var(--primary));
    }
}


/* =================================        HERO                  =============================*/
#hero{
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2rem;
    margin-top: 10vh;
    padding: 0 5vw;
    position: relative;
    background-color: transparent;
}





#hero h1{
    font-size: 14vh;
    font-weight: bold;
    
}
#hero h3{
    font-size: 4vh;    
}

/* =================================       COROUSEL                  =============================*/

#corousel{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 5vh 0;
    
}
.slider{
    width: 100%;
    overflow-x : auto;
    gap: 1rem;
    display: flex;
    -webkit-scrollbar: none; 
    scrollbar-width: none;
}

.list{
    display: flex;
    gap: 1rem;
    width: fit-content;
    padding-right: 1rem;
    animation: scroll 100s linear infinite;
}
.item{
    background: var(--card-bg);
    border: 1px solid var(--surface);
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-weight: 500;
    flex: 0 0 1rem;
}

.item:hover{
    border: 1px solid var(--primary);
    color: var(--primary);
    background: var(--hover-bg);
}

#companies-slider .list{
    animation-direction: reverse;
    animation-duration: 50s;
}

#companies-slider .item:hover{
    border: 1px solid var(--primary);
    color: var(--primary);
    background: var(--hover-bg);
    
    .companyIcon{
        filter: invert(1) grayscale(1) brightness(4);
    }
}

.companyIcon{
    width: 1.5rem;
    height: 1.5rem;
    filter: invert(1) grayscale(1) brightness(2);
    margin-right: 0.5rem;
    vertical-align: middle;
}


@keyframes scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}



/* =================================        ABOUT                  =============================*/
#about{
    width: 100%;
    height: 80vh;
    position: relative;
    
}

.aboutContainer{    
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    gap: 5vw; 
    margin-top: 5vh;
    padding: 5vh 5vw;
}
#about-asset{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    align-items: start;
}
#about-asset h1{
    font-size: 14vh;
    font-weight: bold;
    text-align: left;
}

#about-info{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#about-info p{
    font-size: 3vh;
    line-height: 2;
    color: var(--muted);
    text-align: left;   
}

#about-numbers{
    display: flex;
    justify-content: space-evenly;
    align-items: start;
    gap: 2rem;
}
.about-number{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}
.about-number h2{
    font-size: 6vh;
    font-weight: bold;
}


/* =================================        FEATURES                 =============================*/
#features{
    width: 100%;
    height: 100%;
    padding: 5vh 5vw;
    position: relative;
}
#features h2{
    font-size: 7vh;
    margin-bottom: 2vh;
}

#bentoContainer{
    width: 100%;
    height: 60%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    
}

.bentoBox{
    background: var(--hover-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.bentoBox:hover{
    background: var(--card-bg);
    border: 1px solid var(--primary);
    box-shadow: 0 0 10px var(--primary);
    z-index: 5;


    #box1:hover, #box2:hover, #box3:hover, #box4:hover, #box5:hover{
        img{
            filter: grayscale(0) brightness(1);
        }
    }
}

.textContent{
    position: absolute;
    top: 65%;
    gap: 1rem;
    text-align: left;
    padding: 1rem;
    h3{
        font-size: 4vh;
        font-weight: bold;
    }
    p{
        margin-top: 2vh;
    }
}

#box1{
    grid-column-start: 1;
    grid-column-end: 5;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) brightness(0.8);
    }

    img:hover{
        filter: grayscale(0) brightness(1);
    }
}
#box2{
    grid-column-start: 5;
    grid-column-end: 10;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) brightness(0.8);
    }

    img:hover{
        filter: grayscale(0) brightness(1);
    }
}

#box3{
    grid-column-start: 1;
    grid-column-end: 4;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) brightness(0.8);
    }

    img:hover{
        filter: grayscale(0) brightness(1);
    }

}
#box4{
    grid-column-start: 4;
    grid-column-end: 7;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) brightness(0.8);
    }

    img:hover{
        filter: grayscale(0) brightness(1);
    }

}
#box5{
    grid-column-start: 7;
    grid-column-end: 10;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) brightness(0.8);
    }

    img:hover{
        filter: grayscale(0) brightness(1);
    }

}


/* =================================        CHOOSE                  =============================*/
#choose{
    width: 100%;
    height: 100%;
    padding: 5vh 5vw;
    position: relative;
}
#choose h1{
    font-size: 15vh;
    text-align: center;
    margin-bottom: 2rem;
}

#chooseContainer{
    width: 100%;
    display: flex;
    gap: 2rem;
    justify-content: start;
    align-items: start;
    position: relative;
}

.object-container{
    width: 50%;
    height: 70vh;
    position: sticky;
    top: 25vh;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#answers-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
}

.answer-box{
    background: var(--card-bg);
    border: 1px solid var(--surface);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.answer-box h2{
    font-size: 6vh;
    font-weight: bold;
    margin-bottom: 1rem;
}
.count{
    font-size: 4vh;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--primary);
}
.description{
    font-size: 2.5vh;
    line-height: 2;
    color: var(--tertiary);
    text-align: left;
}


/* =================================        TEACHERS                  =============================*/
#teachers{
    width: 100%;
    min-height: 100%;
    padding: 5vh 5vw;
    position: relative;
    h1{
        font-size: 7vh;
        margin-bottom: 2rem;
    }
}

#teachers-container{
    width: 100%;
    height: 100%;
    display: flex;
    gap: 2rem;
    justify-content: start;
    align-items: start;
    
}

.teacher{
    width: 100%;
    position: relative;
    
}
.teacher img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.5);
    transition: all 0.3s ease;
}
.teacher-details{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    color: white;
    text-align: left;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: all 0.5s ease-in-out;
    h3{
        font-size: 10vh;
        font-weight: bold;
    }
    p{
        font-size: 4vh;
        font-weight: 900;
        color: var(--muted);
        margin-bottom: 1rem;
    }
}
.teacher-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    p{
        font-size: 2vh;
        font-weight: 400;
        line-height: 2;
        padding: 0.5rem;
        border-radius: 0.5rem;
        color: var(--muted);
        border: 1px solid var(--muted);
        backdrop-filter: blur(10px);
        background-image: var(--hover-bg);
    }
}

.teacher:hover{
    img{
        filter: grayscale(0) brightness(1);
    }
    .teacher-details{
        opacity: 1;
        
    }
}



/* =================================        CONTACT US                 =============================*/
#contact{
    width: 100%;
    text-align: center;
    padding: 5vh 5vw;
    position: relative;
}
#contact h1{
    font-size: 10vh;
    font-weight: bold;
    margin-bottom: 2rem;
}

#contactContainer{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

#contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    justify-content: space-between;
    width: 50%;
    height: 80%; 
    backdrop-filter: blur(10px);
    background: var(--card-bg);
    padding: 2rem;
    border: 1px solid var(--surface);
}

.form-group {
    display: flex;
    flex-direction: column;
    width:auto;
}

.form-group label {
    font-size: 0.85rem; 
    font-weight: 500;
    margin-bottom: 0.4rem; 
    color: var(--muted);
    text-align: left;
}

#contact-form input, 
#contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--muted);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--muted);
    font-size: 1rem;
    font-family: var(--font-body);
    resize: none;
    outline: none;
    margin-bottom: 1rem ;
}

#subBtn{
    color: var(--primary);
    background-color: --var(--bg);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    border: 0.5px solid var(--primary);
    width: 100%;
    margin-top: 2vh;
}
#subBtn:hover{
    background: var(--hover-bg);
    box-shadow: 0 12px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
    color: var(--shiny-cta-highlight);
    color: var(--bg);
    transition: all 0.5s ease;
    animation: fill 0.3s forwards;
}


#object-container-contact{
    width: 50%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* =================================        FOOTER                =============================*/
footer{
    width: 100%;
    height: 30vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1rem;
    position: relative;
    background-image: linear-gradient(180deg, var(--bg) 0%, var(--surface) 20%, var(--tertiary) 100%);
    backdrop-filter: blur(10vw);
}

.footer-box{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    gap: 2rem;
    transition: all 0.3s ease;
}
#branding{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
    img{
        height: 10vh;
    }
    
}
#platform{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
}
#socials{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
}
#legal{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
}



/* =================================        MEDIA QUERIES UPTO  480 px           =============================*/
@media (min-width: 100px) and (max-width: 480px)  {
    header{
        padding: 0 3vw;
        nav{
            display: none;
        }
        
    }
    

    #hero{
        margin-bottom: 15vh;
        button{
            padding: 0.5rem 1rem;
            font-size: 4vh;
        }
        h1{
            font-size: 10vh;
        }
        h3{
            font-size: 3vh;
        }
    }

    #about{
        
        .aboutContainer{
            flex-direction: column;
            padding: 0 2vh;
            
            #about-asset{
                width: 100%;
                h1{
                    font-size: 5.5vh;
                }
            }
            #about-info{
                width: 100%;
                p{
                    font-size: 2vh;
                    text-wrap: pretty;
                    text-align: center;
                }
                #about-numbers{
                    gap: 1rem;
                    margin-top: 5vh;
                    .about-number{
                        margin-top: 2.5vh;
                        align-items: center;
                        img{
                            width: 1.5vh;
                            height: 1.5vh;
                        }
                        h2{
                            font-size: 3vh;
                        }
                        p{
                            font-size: 1.5vh;
                        }
                    }
                }
            }
        }
    }


    #features{
        padding: 2vh 4vw;
        h2{
            font-size: 5vh;
            margin-bottom: 1vh;
            text-align: center;
        }
        #bentoContainer{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            
            .bentoBox{
                width: 100%;
                height: 35vh;
                img{
                    filter: grayscale(0) brightness(1);
                }
            }
            .textContent{
                height: 100%;
                top: 50%;
                background: rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(5px);
                h3{
                    font-size: 3vh;
                }
                p{
                    font-size: 2vh;
                }
            }
        }
    }


    #choose{
        h1{
            font-size: 5.5vh;
            margin-bottom: 1rem;
        }

        #chooseContainer{
            flex-direction: column;
            #answers-container{
                width: 100%;
                padding: 0;
                .answer-box{
                    h2{
                        font-size: 4vh;
                    }
                    .count{
                        font-size: 3vh;
                    }
                    .description{
                        font-size: 2vh;
                    }
                }
            }
            .object-container{
                display: none;
            }
        }
    }


    #teachers{
        padding: 2vh 4vw;
        h1{
            font-size: 4vh;
            margin-bottom: 1rem;
        }
        #teachers-container{
            flex-direction: column;
            height: auto;
            .teacher{
                width: 100%;
                height: 50%;
                img{
                    filter: brightness(1);
                }
                .teacher-details{
                    opacity: 1;
                    h3{
                        font-size: 4vh;
                    }
                    p{
                        font-size: 2vh;
                        margin-bottom: 0.5rem;
                    }
                    .teacher-info p{
                        font-size: 1vh;
                    }
                }
            }
        }

    }


    #contact{
        padding: 2vh 4vw;
        h1{
            font-size: 5.5vh;
            margin-bottom: 1rem;
        }
        #contactContainer{
            flex-direction: column;
            #contact-form{
                width: 100%;
                height: auto;
            }
            #object-container-contact{
                display: none;
            }
        }
    }


    footer{
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

}


/* =================================        MEDIA QUERIES  481px to 580 px           =============================*/

@media only screen  and (min-width: 481px) and (max-width: 580px)  {
    header{
        padding: 0 3vw;
        nav{
            display: none;
        }
        
    }
    

    #hero{
        margin-bottom: 15vh;
        h1{
            font-size: 12vh;
        }
        h3{
            font-size: 2.5vh;
        }
    }

    #about{
        margin-bottom: 3vh;
        .aboutContainer{
            flex-direction: column;
            padding: 0 2vh;
            
            #about-asset{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                h1{
                    font-size: 7vh;
                    
                }
            }
            #about-info{
                width: 100%;
                p{
                    font-size: 3vh;
                    text-wrap: pretty;
                    text-align: center;
                }
                #about-numbers{
                    gap: 1rem;
                    margin-top: 5vh;
                    .about-number{
                        margin-top: 2.5vh;
                        align-items: center;
                        img{
                            width: 2vh;
                            height: 2vh;
                        }
                        h2{
                            font-size: 3.5vh;
                        }
                        p{
                            font-size: 2vh;
                        }
                    }
                }
            }
        }
    }


    #features{
        padding: 2vh 4vw;
        h2{
            font-size: 7vh;
            margin-bottom: 3vh;
            text-align: center;
        }
        #bentoContainer{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            
            .bentoBox{
                width: 100%;
                height: 40vh;
                img{
                    filter: grayscale(0) brightness(1);
                }
            }
            .textContent{
                height: 100%;
                top: 50%;
                background: rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(5px);
                h3{
                    font-size: 3vh;
                }
                p{
                    font-size: 2vh;
                }
            }
        }
    }


    #choose{
        h1{
            font-size: 7vh;
            margin-bottom: 1rem;
        }

        #chooseContainer{
            flex-direction: column;
            #answers-container{
                width: 100%;
                padding: 0;
                .answer-box{
                    h2{
                        font-size: 4vh;
                    }
                    .count{
                        font-size: 3vh;
                    }
                    .description{
                        font-size: 2vh;
                    }
                }
            }
            .object-container{
                display: none;
            }
        }
    }


    #teachers{
        padding: 2vh 4vw;
        h1{
            font-size: 4vh;
            margin-bottom: 1rem;
        }
        #teachers-container{
            flex-direction: column;
            height: auto;
            .teacher{
                width: 100%;
                height: 50%;
                img{
                    filter: brightness(1);
                }
                .teacher-details{
                    opacity: 1;
                    h3{
                        font-size: 4vh;
                    }
                    p{
                        font-size: 2.5vh;
                        margin-bottom: 0.5rem;
                    }
                    .teacher-info p{
                        
                        font-size: 1.5vh;
                    }
                }
            }
        }
    }


    #contact{
        padding: 4vh 4vw;
        h1{
            font-size: 7vh;
            margin-bottom: 1rem;
        }
        #contactContainer{
            flex-direction: column;
            #contact-form{
                width: 100%;
                height: auto;

                #subBtn{
                    width: 100%;
                    height: 5vh;
                }
            }
            #object-container-contact{
                display: none;
            }
        }
    }


    footer{
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}



/* =================================        MEDIA QUERIES  581px to  768 px           =============================*/



@media  only screen and (min-width: 581px) and (max-width: 732px) {
header{
        padding: 0 3vw;
        nav{
            display: none;
        }
        
    }
    

    #hero{
        margin-bottom: 15vh;
        h1{
            font-size: 14vh;
        }
        h3{
            font-size: 2.5vh;
        }
    }

    #about{
        margin-bottom: 3vh;
        .aboutContainer{
            flex-direction: column;
            padding: 0 2vh;
            
            #about-asset{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                h1{
                    font-size: 7vh;
                    
                }
            }
            #about-info{
                width: 100%;
                p{
                    font-size: 3vh;
                    text-wrap: pretty;
                    text-align: center;
                }
                #about-numbers{
                    gap: 1rem;
                    margin-top: 5vh;
                    .about-number{
                        margin-top: 2.5vh;
                        align-items: center;
                        img{
                            width: 2vh;
                            height: 2vh;
                        }
                        h2{
                            font-size: 3.5vh;
                        }
                        p{
                            font-size: 2vh;
                        }
                    }
                }
            }
        }
    }


    #features{
        padding: 2vh 4vw;
        h2{
            font-size: 7vh;
            margin-bottom: 3vh;
            text-align: center;
        }
        #bentoContainer{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            
            .bentoBox{
                width: 100%;
                height: 40vh;
                img{
                    filter: grayscale(0) brightness(1);
                }
            }
            .textContent{
                height: 100%;
                top: 50%;
                background: rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(5px);
                h3{
                    font-size: 3vh;
                }
                p{
                    font-size: 2vh;
                }
            }
        }
    }


    #choose{
        h1{
            font-size: 7vh;
            margin-bottom: 1rem;
        }

        #chooseContainer{
            flex-direction: column;
            #answers-container{
                width: 100%;
                padding: 0;
                .answer-box{
                    h2{
                        font-size: 4vh;
                    }
                    .count{
                        font-size: 3vh;
                    }
                    .description{
                        font-size: 2vh;
                    }
                }
            }
            .object-container{
                display: none;
            }
        }
    }


    #teachers{
        padding: 2vh 4vw;
        h1{
            font-size: 4vh;
            margin-bottom: 1rem;
        }
        #teachers-container{
            flex-direction: column;
            height: auto;
            .teacher{
                width: 100%;
                height: 50%;
                img{
                    filter: brightness(1);
                }
                .teacher-details{
                    opacity: 1;
                    h3{
                        font-size: 5.5vh;
                    }
                    p{
                        font-size: 3.5vh;
                        margin-bottom: 0.5rem;
                    }
                    .teacher-info p{
                        
                        font-size: 2vh;
                    }
                }
            }
        }
    }


    #contact{
        padding: 4vh 4vw;
        h1{
            font-size: 7vh;
            margin-bottom: 1rem;
        }
        #contactContainer{
            flex-direction: column;
            #contact-form{
                width: 100%;
                height: auto;

                #subBtn{
                    width: 100%;
                    height: 5vh;
                }
            }
            #object-container-contact{
                display: none;
            }
        }
    }


    footer{
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
}


/* =================================        MEDIA QUERIES    769 to 968 px           =============================*/
@media  only screen and (min-width: 733px) and (max-width: 920px) {
header{
        padding: 0 3vw;
        nav{
            display: none;
        }
        
    }
    

    #hero{
        margin-bottom: 15vh;
        h1{
            font-size: 15vh;
        }
        h3{
            font-size: 2.5vh;
        }
    }

    #about{
        margin-bottom: 3vh;
        .aboutContainer{
            flex-direction: column;
            padding: 0 2vh;
            
            #about-asset{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                h1{
                    font-size: 7vh;
                    
                }
            }
            #about-info{
                width: 100%;
                p{
                    font-size: 3vh;
                    text-wrap: pretty;
                    text-align: center;
                }
                #about-numbers{
                    gap: 1rem;
                    margin-top: 5vh;
                    .about-number{
                        margin-top: 2.5vh;
                        align-items: center;
                        img{
                            width: 2vh;
                            height: 2vh;
                        }
                        h2{
                            font-size: 3.5vh;
                        }
                        p{
                            font-size: 2vh;
                        }
                    }
                }
            }
        }
    }


    #features{
        padding: 2vh 4vw;
        h2{
            font-size: 7vh;
            margin-bottom: 3vh;
            text-align: center;
        }
        #bentoContainer{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            
            .bentoBox{
                width: 100%;
                height: 40vh;
                img{
                    filter: grayscale(0) brightness(1);
                }
            }
            .textContent{
                height: 100%;
                top: 50%;
                background: rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(5px);
                h3{
                    font-size: 3vh;
                }
                p{
                    font-size: 2vh;
                }
            }
        }
    }


    #choose{
        h1{
            font-size: 7vh;
            margin-bottom: 1rem;
        }

        #chooseContainer{
            flex-direction: column;
            #answers-container{
                width: 100%;
                padding: 0;
                .answer-box{
                    h2{
                        font-size: 4vh;
                    }
                    .count{
                        font-size: 3vh;
                    }
                    .description{
                        font-size: 2vh;
                    }
                }
            }
            .object-container{
                display: none;
            }
        }
    }


    #teachers{
        padding: 2vh 4vw;
        h1{
            font-size: 4vh;
            margin-bottom: 1rem;
        }
        #teachers-container{
            flex-direction: column;
            height: auto;
            .teacher{
                width: 100%;
                height: 50%;
                img{
                    filter: brightness(1);
                }
                .teacher-details{
                    opacity: 1;
                    h3{
                        font-size: 4vh;
                    }
                    p{
                        font-size: 2.5vh;
                        margin-bottom: 0.5rem;
                    }
                    .teacher-info p{
                        
                        font-size: 1.5vh;
                    }
                }
            }
        }
    }


    #contact{
        padding: 4vh 4vw;
        h1{
            font-size: 7vh;
            margin-bottom: 1rem;
        }
        #contactContainer{
            flex-direction: column;
            #contact-form{
                width: 100%;
                height: auto;

                #subBtn{
                    width: 100%;
                    height: 5vh;
                }
            }
            #object-container-contact{
                display: none;
            }
        }
    }


    footer{
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
}

/* =================================        MEDIA QUERIES    921px to 1024 px           =============================*/
@media  only screen and (min-width: 921px) and (max-width: 1024px) {
    header{
        padding: 0 3vw;
        nav{
            display: none;
        }
        
    }
    

    #hero{
        margin-bottom: 15vh;
        h1{
            font-size: 9vh;
        }
        h3{
            font-size: 2.5vh;
        }
    }

    #about{
        margin-bottom: 3vh;
        .aboutContainer{
            flex-direction: row;
            padding: 2vh 2vw;
            
            #about-asset{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                h1{
                    font-size: 9vh;
                    text-align: center;
                }
            }
            #about-info{
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                p{
                    font-size: 2.5vh;
                    text-wrap: pretty;
                    text-align: center;
                    margin-top: 2vh;
                }
                #about-numbers{
                    gap: 1rem;
                    margin-top: 5vh;
                    .about-number{
                        margin-top: 2.5vh;
                        align-items: center;
                        img{
                            width: 2vh;
                            height: 2vh;
                        }
                        h2{
                            font-size: 3.5vh;
                        }
                        p{
                            font-size: 2vh;
                        }
                    }
                }
            }
        }
    }


    #features{
        padding: 2vh 4vw;
        h2{
            font-size: 7vh;
            margin-bottom: 3vh;
            text-align: center;
        }
        #bentoContainer{
            width: 100%;
            height: 100%;
            
            .bentoBox{
                width: 100%;
                height: 40vh;
                img{
                    filter: grayscale(0) brightness(1);
                }
            }
            .textContent{
                height: 100%;
                top: 50%;
                background: rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(5px);
                h3{
                    font-size: 3vh;
                }
                p{
                    font-size: 2vh;
                }
            }
        }
    }


    #choose{
        h1{
            font-size: 7vh;
            margin-bottom: 1rem;
        }

        #chooseContainer{

            #answers-container{
                width: 100%;
                padding: 0;
                .answer-box{
                    h2{
                        font-size: 4vh;
                    }
                    .count{
                        font-size: 3vh;
                    }
                    .description{
                        font-size: 2vh;
                    }
                }
            }
            .object-container{
                width: 50%;
                height: 70%;
                margin-bottom: 15vh;
                .sphere-container{
                    --size:30vh;
                }
            }
        }
    }


    #teachers{
        padding: 2vh 4vw;
        h1{
            font-size: 4vh;
            margin-bottom: 1rem;
        }
        #teachers-container{
            height: auto;
            .teacher{
                width: 100%;
                height: 50%;
                img{
                    filter: brightness(1);
                }
                .teacher-details{
                    opacity: 1;
                    h3{
                        font-size: 4vh;
                    }
                    p{
                        font-size: 2.5vh;
                        margin-bottom: 0.5rem;
                    }
                    .teacher-info p{
                        
                        font-size: 1vh;
                    }
                }
            }
        }
    }


    #contact{
        padding: 4vh 4vw;
        h1{
            font-size: 7vh;
            margin-bottom: 1rem;
        }
        #contactContainer{
            #contact-form{
                width: 100%;
                height: auto;

                #subBtn{
                    width: 100%;
                    height: 5vh;
                }
            }
            #object-container-contact{
                display: none;
            }
        }
    }


    footer{
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}