/* =====================================================
COLOR SYSTEM
===================================================== */

:root {

    --navy: #082b59;
    --blue: #1264c5;
    --cyan: #00a8d8;

    --orange: #ff7900;
    --saffron: #ff9d22;

    --violet: #7657e8;
    --pink: #df4db8;

    --green: #159447;

    --text: #183456;
    --muted: #70819a;

    --light: #f7fbff;
    --white: #ffffff;

}


/* =====================================================
RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family: "Inter", sans-serif;

    color: var(--text);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f4f9ff 45%,
            #fff9f3 100%);

    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}


/* =====================================================
ANIMATED BACKGROUND BLOBS
===================================================== */

body::before {

    content: "";

    position: fixed;

    width: 500px;
    height: 500px;

    top: -220px;
    left: -150px;

    background:
        radial-gradient(circle,
            rgba(0, 168, 216, .12),
            transparent 65%);

    border-radius: 50%;

    z-index: -2;

    animation:
        floatingBlob 10s ease-in-out infinite;
}


body::after {

    content: "";

    position: fixed;

    width: 500px;
    height: 500px;

    right: -220px;
    bottom: -200px;

    background:
        radial-gradient(circle,
            rgba(118, 87, 232, .10),
            transparent 65%);

    border-radius: 50%;

    z-index: -2;

    animation:
        floatingBlob2 13s ease-in-out infinite;
}


@keyframes floatingBlob {

    0%,
    100% {
        transform:
            translate(0, 0) scale(1);
    }

    50% {
        transform:
            translate(100px, 80px) scale(1.2);
    }

}


@keyframes floatingBlob2 {

    0%,
    100% {
        transform:
            translate(0, 0) scale(1);
    }

    50% {
        transform:
            translate(-100px, -80px) scale(1.2);
    }

}


/* =====================================================
TOP BAR
===================================================== */

.top-bar {

    height: 35px;

    display: flex;

    justify-content: center;
    align-items: center;

    color: white;

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: 1.2px;

    background:
        linear-gradient(90deg,
            #ff6a00,
            #ff9b20,
            #1464bd,
            #7657e8,
            #138b43);

    background-size: 300% 100%;

    animation:
        gradientMove 8s linear infinite;
}


@keyframes gradientMove {

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

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

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

}


/* =====================================================
HEADER
===================================================== */

.header {

    position: relative;

    z-index: 1000;

    background:
        rgba(255, 255, 255, .88);

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(20, 70, 120, .08);

    box-shadow:
        0 8px 35px rgba(20, 60, 100, .07);
}


.header-inner {

    max-width: 1600px;

    height: 65px;

    margin: auto;

    padding: 0 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


/* =====================================================
LOGO
===================================================== */

.brand {

    display: flex;

    align-items: center;

    gap: 0px;

    min-width: 280px;
}


.brand-logo {

    position: relative;

    width: 80px;
    height: 80px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    /* border:
        2px solid #1264c5; */

    font-size: 27px;
}


/* Orbit */
/* 
.brand-logo::before {

    content: "";

    position: absolute;

    width: 80px;
    height: 32px;

    border:
        2px solid var(--orange);

    border-radius: 50%;

    transform:
        rotate(-25deg);

    animation:
        orbitSpin 4s linear infinite;
} */


/* .brand-logo::after {

    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--orange);

    top: 4px;
    left: 18px;

    box-shadow:
        0 0 12px var(--orange);
} */


@keyframes orbitSpin {

    from {
        transform:
            rotate(-25deg);
    }

    to {
        transform:
            rotate(335deg);
    }

}


.brand-title {

    font-family:
        "Orbitron",
        sans-serif;

    color:
        var(--navy);

    font-size: 1.2rem;

    font-weight: 800;

    letter-spacing: .5px;
}


.brand-subtitle {

    margin-top: 4px;

    color:
        var(--muted);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2.5px;
}


/* =====================================================
NAVIGATION
===================================================== */

.main-nav {

    display: flex;

    align-items: center;

    gap: 3px;

    padding: 6px;

    border-radius: 50px;

    background:
    linear-gradient(135deg, #f4f9ff, #b15bec91);

    border:
        1px solid #e3ebf5;

    box-shadow:
        0 8px 25px rgba(20, 60, 100, .05);
}


.nav-item {

    position: relative;

    padding: 11px 17px;

    border-radius: 40px;

    color: #000000;

    font-size: 1rem;

    font-weight: 700;

    transition:
        .3s ease;
}


.nav-item:hover {

    color:
        var(--blue);

    background:
        white;

    box-shadow:
        0 5px 15px rgba(20, 80, 150, .08);

    transform:
        translateY(-2px);
}


/* Animated dot */

.nav-item::before {

    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            var(--orange),
            var(--pink));

    left: 8px;
    top: 8px;

    opacity: 0;

    transform:
        scale(0);

    transition:
        .3s;
}


.nav-item:hover::before {

    opacity: 1;

    transform:
        scale(1);
}


/* Active */

.nav-item.active {

    color: white;

    background:
        linear-gradient(135deg,
            #0c4e99,
            #126ed2);

    box-shadow:
        0 7px 20px rgba(18, 100, 197, .25);
}


/* =====================================================
DROPDOWN
===================================================== */

.nav-dropdown {

    position: relative;
}


.nav-arrow {

    display: inline-block;

    margin-left: 5px;

    font-size: 8px;

    transition:
        .3s;
}


.nav-dropdown:hover .nav-arrow {

    transform:
        rotate(180deg);
}


.dropdown-panel {

    position: absolute;

    top: 55px;

    left: 50%;

    width: 280px;

    padding: 10px;

    background:
        rgba(255, 255, 255, .96);

    backdrop-filter:
        blur(20px);

    border:
        1px solid #e2eaf4;

    border-radius: 20px;

    box-shadow:
        0 25px 70px rgba(20, 60, 110, .16);

    opacity: 0;

    visibility: hidden;

    transform:
        translate(-50%, 15px) scale(.94);

    transition:
        .35s ease;
}


.nav-dropdown:hover .dropdown-panel {

    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, 0) scale(1);
}


/* Dropdown top gradient */

.dropdown-panel::before {

    content: "";

    position: absolute;

    top: 0;
    left: 20px;
    right: 20px;

    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(90deg,
            var(--orange),
            var(--pink),
            var(--cyan));

    background-size: 200%;

    animation:
        gradientMove 4s linear infinite;
}


.dropdown-link {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    margin-top: 2px;

    border-radius: 13px;

    transition:
        .3s;
}


.dropdown-link:hover {

    background:
        linear-gradient(90deg,
            #f4f9ff,
            #fff6ef);

    transform:
        translateX(6px);
}


.dropdown-icon {

    width: 39px;
    height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(135deg,
            #fff0df,
            #ffe5f5);

    font-size: 18px;

    transition:
        .3s;
}


.dropdown-link:hover .dropdown-icon {

    transform:
        rotate(-8deg) scale(1.1);

    background:
        linear-gradient(135deg,
            #dff7ff,
            #eee7ff);
}


.dropdown-text strong {

    display: block;

    color:
        var(--navy);

    font-size: 12px;
}


.dropdown-text span {

    display: block;

    margin-top: 3px;

    color:
        #8795a8;

    font-size: 9px;
}


/* =====================================================
REGISTER BUTTON
===================================================== */

.register {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 14px 21px;

    border-radius: 40px;

    color: white;

    font-size: 1rem;

    font-weight: 800;

    background:
        linear-gradient(110deg,
            #ff6500,
            #ff9d21,
            #df4db8,
            #126ed2);

    background-size:
        300% 100%;

    animation:
        buttonGradient 6s ease infinite;

    box-shadow:
        0 10px 30px rgba(225, 100, 40, .2);

    transition:
        .3s;
}


@keyframes buttonGradient {

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

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

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

}


.register:hover {

    transform:
        translateY(-3px) scale(1.02);

    box-shadow:
        0 15px 35px rgba(225, 100, 40, .3);
}


.register::after {

    content: "";

    position: absolute;

    width: 80px;
    height: 150%;

    top: -20px;
    left: -100px;

    background:
        rgba(255, 255, 255, .35);

    transform:
        rotate(25deg);

    animation:
        buttonShine 4s infinite;
}


@keyframes buttonShine {

    0% {
        left: -100px;
    }

    35%,
    100% {
        left: 150%;
    }

}


.register-arrow {

    font-size: 16px;
}


/* =====================================================
HERO SLIDER
===================================================== */

.hero-slider {

    position: relative;

    width: 100%;

    /* height: 610px; */

    overflow: hidden;

    background:
        #dbeaf8;
        aspect-ratio: 20 / 7;
}


.slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .9s ease;
}


.slide.active {

    opacity: 1;

    visibility: visible;
}


.slide img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.08);

    transition:
        transform 7s ease;
}


.slide.active img {

    transform:
        scale(1);
}


/* Colorful image overlay */

.slide::after {

    content: "";

    position: absolute;

    inset: 0;

    /* background:
        linear-gradient(90deg,
            rgba(5, 40, 80, .86),
            rgba(5, 40, 80, .55) 38%,
            rgba(15, 70, 130, .15) 72%); */
}


/* =====================================================
SLIDER CONTENT
===================================================== */

.slide-content {

    position: absolute;

    z-index: 5;

    top: 50%;

    left:
        max(6%,
            calc((100% - 1350px) / 2));

    transform:
        translateY(-50%);

    max-width: 650px;

    color: white;
}


.slide-tag {

    display: inline-block;

    padding: 8px 15px;

    margin-bottom: 18px;

    border-radius: 30px;

    background:
        linear-gradient(90deg,
            rgba(255, 121, 0, .8),
            rgba(223, 77, 184, .65));

    border:
        1px solid rgba(255, 255, 255, .4);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    animation:
        tagPulse 3s ease infinite;
}


@keyframes tagPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 rgba(255, 121, 0, 0);
    }

    50% {
        box-shadow:
            0 0 25px rgba(255, 121, 0, .35);
    }

}


.slide-content h1 {

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(40px,
            5.2vw,
            74px);

    line-height:
        1.03;

    margin-bottom:
        20px;
}


.slide-content h1 span {

    background:
        linear-gradient(90deg,
            #ff9a1f,
            #ffd36a,
            #55d8ff);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    background-size:
        200%;

    animation:
        textGradient 4s ease infinite;
}


@keyframes textGradient {

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

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

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

}


.slide-content p {

    max-width: 570px;

    color:
        #eef6ff;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 28px;
}


/* =====================================================
SLIDER BUTTONS
===================================================== */

.slider-buttons {

    display: flex;

    gap: 12px;
}


.slider-primary {

    padding: 14px 24px;

    border-radius: 30px;

    color: white;

    font-size: 11px;

    font-weight: 800;

    background:
        linear-gradient(135deg,
            #ff6500,
            #ff9a1f);

    box-shadow:
        0 10px 25px rgba(255, 100, 0, .25);

    transition:
        .3s;
}


.slider-primary:hover {

    transform:
        translateY(-3px) scale(1.02);

    box-shadow:
        0 15px 35px rgba(255, 100, 0, .4);
}


.slider-secondary {

    padding: 14px 24px;

    border-radius: 30px;

    color: white;

    font-size: 11px;

    font-weight: 700;

    background:
        rgba(255, 255, 255, .12);

    border:
        1px solid rgba(255, 255, 255, .5);

    backdrop-filter:
        blur(8px);

    transition:
        .3s;
}


.slider-secondary:hover {

    background:
        rgba(255, 255, 255, .23);

    transform:
        translateY(-3px);
}


/* =====================================================
ARROWS
===================================================== */

.slider-arrow {

    position: absolute;

    z-index: 20;

    top: 50%;

    transform:
        translateY(-50%);

    width: 53px;
    height: 53px;

    border-radius: 50%;

    color: white;

    background:
        rgba(7, 48, 91, .35);

    border:
        1px solid rgba(255, 255, 255, .55);

    backdrop-filter:
        blur(10px);

    font-size: 27px;

    cursor: pointer;

    transition:
        .3s;
}


.slider-arrow:hover {

    background:
        linear-gradient(135deg,
            #ff7900,
            #df4db8);

    border-color:
        transparent;

    transform:
        translateY(-50%) scale(1.1) rotate(5deg);
}


.slider-prev {
    left: 25px;
}

.slider-next {
    right: 25px;
}


/* =====================================================
DOTS
===================================================== */

.slider-dots {

    position: absolute;

    z-index: 30;

    bottom: 28px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    gap: 8px;
}


.slider-dot {

    width: 9px;
    height: 9px;

    border: none;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .6);

    cursor: pointer;

    transition:
        .35s;
}


.slider-dot.active {

    width: 35px;

    background:
        linear-gradient(90deg,
            #ff7900,
            #df4db8);

    box-shadow:
        0 0 15px rgba(255, 121, 0, .5);
}


/* =====================================================
CONTENT
===================================================== */

.intro {

    position: relative;

    padding: 90px 25px;

    background:
        rgba(255, 255, 255, .75);
}


.intro-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;
}


.intro-label {

    color:
        var(--orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}


.intro h2 {

    margin-top: 10px;

    font-family:
        "Orbitron",
        sans-serif;

    color:
        var(--navy);

    font-size: 35px;

    line-height: 1.25;
}


.intro p {

    margin-top: 18px;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.9;
}


.intro-image {

    height: 350px;

    overflow: hidden;

    border-radius: 25px;

    position: relative;

    box-shadow:
        0 20px 50px rgba(20, 70, 120, .13);
}


.intro-image::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 25px;

    border:
        2px solid rgba(255, 255, 255, .5);

    pointer-events: none;
}


.intro-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s ease;
}


.intro-image:hover img {

    transform:
        scale(1.08);
}


/* =====================================================
FEATURE SECTION
===================================================== */

.features {

    padding:
        90px 25px;

    background:
        linear-gradient(135deg,
            #f3f8ff,
            #fff8f2);
}


.section-heading {

    text-align: center;

    max-width: 700px;

    margin:
        0 auto 45px;
}


.section-heading span {

    color:
        var(--orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}


.section-heading h2 {

    margin-top: 8px;

    color:
        var(--navy);

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 32px;
}


.section-heading p {

    margin-top: 12px;

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.7;
}


.feature-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;
}


.feature-card {

    position: relative;

    overflow: hidden;

    padding: 32px;

    background:
        rgba(255, 255, 255, .9);

    border:
        1px solid #e4ebf4;

    border-radius: 20px;

    box-shadow:
        0 12px 35px rgba(20, 60, 100, .06);

    transition:
        .4s;
}


/* Animated top line */

.feature-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(90deg,
            var(--orange),
            var(--pink),
            var(--cyan));

    transition:
        .5s;
}


.feature-card:hover::before {

    left: 0;
}


.feature-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 55px rgba(20, 60, 100, .12);

    border-color:
        #d9e4f1;
}


.feature-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(135deg,
            #fff0df,
            #eee9ff);

    font-size: 26px;

    margin-bottom: 20px;

    transition:
        .4s;
}


.feature-card:hover .feature-icon {

    transform:
        rotate(-7deg) scale(1.1);

    background:
        linear-gradient(135deg,
            #def7ff,
            #eee2ff);
}


.feature-card h3 {

    color:
        var(--navy);

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 17px;

    margin-bottom: 10px;
}


.feature-card p {

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
FOOTER
===================================================== */

footer {

    padding:
        40px 25px;

    color:
        #c7d9ec;

    text-align:
        center;

    font-size:
        12px;

    background:
        linear-gradient(120deg,
            #062653,
            #0c4b8e,
            #503a9d);

    background-size:
        250% 250%;

    animation:
        footerGradient 10s ease infinite;
}


@keyframes footerGradient {

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

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

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

}


footer strong {
    color: white;
}


/* =====================================================
MOBILE
===================================================== */

.menu-toggle {

    display: none;

    width: 44px;
    height: 44px;

    border:
        1px solid #dce6f1;

    border-radius: 12px;

    background: white;

    color:
        var(--navy);

    font-size: 21px;

    cursor: pointer;
}


.mobile-nav {

    position: absolute;

    top: 82px;

    left: 12px;
    right: 12px;

    padding: 12px;

    background:
        rgba(255, 255, 255, .97);

    backdrop-filter:
        blur(20px);

    border:
        1px solid #e0e8f2;

    border-radius: 18px;

    box-shadow:
        0 25px 60px rgba(20, 60, 100, .15);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-15px) scale(.97);

    transition:
        .35s;
}


.mobile-nav.open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0) scale(1);
}


.mobile-nav a {

    display: block;

    padding: 14px;

    border-radius: 10px;

    color:
        var(--navy);

    font-size: 13px;

    font-weight: 600;
}


.mobile-nav a:hover {

    background:
        linear-gradient(90deg,
            #f1f8ff,
            #fff3e9);

    color:
        var(--orange);
}


/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:1100px) {

    .main-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .register {
        display: none;
    }

    .header-inner {
        height: 65px;

        padding:
            0 20px;
    }

}


@media(max-width:900px) {

    .intro-container {

        grid-template-columns:
            1fr;

    }

    .feature-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media(max-width:650px) {

    .top-bar {

        font-size: 8px;

        padding:
            0 10px;

        text-align:
            center;
    }

    .brand-logo {

        width: 50px;
        height: 50px;

        font-size: 22px;
    }

    .brand-logo::before {

        width: 65px;
        height: 27px;
    }

    .brand-title {
        font-size: 12px;
    }

    .brand-subtitle {
        font-size: 7px;
    }

    .hero-slider {

        /* height:
            570px; */
    }

    .slide-content {

        left: 25px;
        right: 25px;
    }

    .slide-content h1 {

        font-size:
            39px;
    }

    .slide-content p {

        font-size:
            12px;
    }

    .slider-arrow {

        width: 40px;
        height: 40px;

        font-size: 20px;
    }

    .slider-prev {
        left: 12px;
    }

    .slider-next {
        right: 12px;
    }

    .feature-grid {

        grid-template-columns:
            1fr;
    }

}

/* =====================================================
SECTION
===================================================== */

.about-notice-section {

    position: relative;

    padding:
        20px 14px;

    background:
        linear-gradient(135deg,
            #f7fbff 0%,
            #ffffff 48%,
            #fff8f2 100%);

    overflow: hidden;
}


/* Decorative background */

.about-notice-section::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -250px;
    top: 50px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(0, 168, 216, .08),
            transparent 70%);

    pointer-events: none;
}


.about-notice-section::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -200px;
    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(223, 77, 184, .07),
            transparent 70%);

    pointer-events: none;
}


/* =====================================================
CONTAINER
===================================================== 

.about-notice-container {

position: relative;

z-index: 2;

max-width: 1250px;

margin: auto;

display: grid;

grid-template-columns: 70% 30%;

gap: 28px;

align-items: stretch;
}*/
.about-notice-container {
    max-width: 1600px;
    width: calc(100% - 10px);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
}

/* =====================================================
LEFT ABOUT PANEL
===================================================== */

.about-panel {

    position: relative;

    min-height: auto;

    overflow: hidden;

    border-radius: 30px;

    color: white;

    background:
        linear-gradient(135deg,
            #062653 0%,
            #0a417d 48%,
            #164e8b 100%);

    box-shadow:
        0 25px 60px rgba(8, 45, 85, .20);
}


/* Animated color glow */

.about-panel::before {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -150px;
    top: -140px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(0, 205, 255, .35),
            transparent 68%);

    animation:
        aboutGlow 7s ease-in-out infinite;
}


.about-panel::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -160px;
    bottom: -160px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 121, 0, .35),
            transparent 68%);

    animation:
        aboutGlow2 9s ease-in-out infinite;
}


@keyframes aboutGlow {

    0%,
    100% {
        transform:
            translate(0, 0) scale(1);
    }

    50% {
        transform:
            translate(-50px, 60px) scale(1.2);
    }

}


@keyframes aboutGlow2 {

    0%,
    100% {
        transform:
            translate(0, 0) scale(1);
    }

    50% {
        transform:
            translate(50px, -40px) scale(1.15);
    }

}


/* Grid pattern */

.about-panel .about-glow {

    position: absolute;

    inset: 0;

    opacity: .08;

    background-image:
        linear-gradient(rgba(255, 255, 255, .4) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .4) 1px,
            transparent 1px);

    background-size:
        35px 35px;

    mask-image:
        linear-gradient(to bottom right,
            black,
            transparent 75%);
}


/* =====================================================
ABOUT CONTENT
===================================================== */

.about-content {

    position: relative;

    z-index: 5;

    padding: 12px 24px;
}


/* Small heading */

.about-small-title {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        #62d9ff;

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.about-small-title::before {

    content: "";

    width: 25px;
    height: 2px;

    background:
        linear-gradient(90deg,
            #ff7900,
            #ffb23e);

    border-radius: 5px;
}


/* Main title */

.about-content h2 {

    margin-top: 17px;

    /* max-width: 470px; */

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(21px, 3vw, 22px);

    line-height: 1.18;

    letter-spacing: -.5px;
}


.about-content h2 span {

    display: block;

    margin-top: 4px;

    background:
        linear-gradient(90deg,
            #ff9a1f,
            #ffd06a,
            #5bdcff);

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    animation:
        aboutTextGradient 5s ease infinite;
}


@keyframes aboutTextGradient {

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

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

}


/* Paragraph */

.about-description {

    margin-top: 15px;

    color:
        #ffffff;

    font-size: 1rem;

    line-height: 1.85;
    text-align: justify;
}


/* =====================================================
HIGHLIGHTS
===================================================== */

.about-highlights {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: 32px;
}


.about-highlight {

    padding:
        15px 10px;

    border-radius: 15px;

    background:
        rgba(255, 255, 255, .075);

    border:
        1px solid rgba(255, 255, 255, .11);

    backdrop-filter:
        blur(8px);

    transition:
        .35s ease;
}


.about-highlight:hover {

    background:
        rgba(255, 255, 255, .14);

    transform:
        translateY(-6px);

    border-color:
        rgba(255, 255, 255, .25);
}


.highlight-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(135deg,
            rgba(255, 121, 0, .25),
            rgba(223, 77, 184, .2));

    font-size: 19px;

    margin-bottom: 10px;
}


.about-highlight strong {

    display: block;

    font-size: 12px;

    color: white;
}


.about-highlight span {

    display: block;

    margin-top: 4px;

    color:
        rgba(220, 235, 250, .65);

    font-size: 9px;

    line-height: 1.4;
}


/* =====================================================
ABOUT BUTTON
===================================================== */

.about-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 35px;

    padding:
        5px 12px;

    border-radius: 30px;

    color: white;

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: .7px;

    background:
        linear-gradient(100deg,
            #ff6900,
            #ff9d22,
            #df4db8);

    background-size:
        200% auto;

    box-shadow:
        0 10px 30px rgba(255, 100, 0, .2);

    transition:
        .35s;
}


.about-button:hover {

    transform:
        translateY(-4px);

    background-position:
        100% center;

    box-shadow:
        0 15px 35px rgba(255, 100, 0, .3);
}


.about-button span {

    font-size: 17px;

    transition:
        .3s;
}


.about-button:hover span {

    transform:
        translateX(5px);
}


/* =====================================================
RIGHT NOTICE PANEL
===================================================== */

.notice-panel {

    position: relative;

    padding:
        14px;

    border-radius: 30px;

    background:
        rgba(255, 255, 255, .88);

    border:
        1px solid rgba(20, 70, 120, .09);

    box-shadow:
        0 25px 60px rgba(20, 60, 100, .10);

    backdrop-filter:
        blur(18px);

    overflow: hidden;
}


/* Top colorful line */

.notice-panel::before {

    content: "";

    position: absolute;

    top: 0;
    left: 35px;
    right: 35px;

    height: 4px;

    border-radius:
        0 0 10px 10px;

    background:
        linear-gradient(90deg,
            #ff6900,
            #ff9d22,
            #df4db8,
            #126ed2,
            #00a8d8);

    background-size:
        250% 100%;

    animation:
        noticeGradient 6s linear infinite;
}


@keyframes noticeGradient {

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

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

}


/* =====================================================
NOTICE HEADER
===================================================== */

.notice-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
    0px 3px 0px;

    border-bottom:
        1px solid #edf1f6;
}


.notice-heading {

    display: flex;

    align-items: center;

    gap: 13px;
}


.notice-icon {

    width: 39px;
    height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    font-size: 22px;

    background:
        linear-gradient(135deg,
            #fff0df,
            #ffe5f5);

    box-shadow:
        inset 0 0 0 1px rgba(255, 121, 0, .08);

    animation:
        noticeIconFloat 4s ease-in-out infinite;
}


@keyframes noticeIconFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-4px);
    }

}


.notice-label {

    color:
        #ff7900;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;
}


.notice-heading h2 {

    margin-top: 4px;

    color:
        #082b59;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 1.2rem;
}


/* Live indicator */

.notice-live {

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        7px 10px;

    border-radius: 20px;

    color:
        #138b43;

    background:
        #effbf4;

    border:
        1px solid #d8f2e2;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


.notice-live span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #16a34a;

    box-shadow:
        0 0 0 4px rgba(22, 163, 74, .1);

    animation:
        livePulse 1.7s infinite;
}


@keyframes livePulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(22, 163, 74, .35);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(22, 163, 74, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(22, 163, 74, 0);
    }

}


/* =====================================================
NOTICE LIST
===================================================== */

.notice-list {

    padding-top: 9px;
}


/* Notice */

.notice-item {

    position: relative;

    display: grid;

    grid-template-columns:
        30px 1fr 20px;

    gap: 0px;

    align-items: center;

    padding:
    9px 8px;

    border-bottom:
        1px solid #edf1f5;

    transition:
        .35s ease;
}


.notice-item:last-child {

    border-bottom:
        none;
}


.notice-item:hover {

    padding-left:
        15px;

    padding-right:
        3px;

    background:
        linear-gradient(90deg,
            rgba(241, 248, 255, .8),
            rgba(255, 248, 241, .55));

    border-radius: 15px;
}


/* =====================================================
DATE BOX
===================================================== */

.notice-date {

    width: 15px;
    height: 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: white;

    background:
        linear-gradient(145deg,
            #ff6500,
            #ff9d22);

    box-shadow:
        0 8px 20px rgba(255, 110, 0, .18);

    transition:
        .35s;
}


.notice-item:hover .notice-date {

    transform:
        rotate(-3deg) scale(1.05);
}


.notice-date strong {

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 12px;

    line-height: 1;
}


.notice-date span {

    /* margin-top: 5px; */

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    opacity: .85;
}


/* Date colors */

.notice-date.blue {

    background:
        linear-gradient(145deg,
            #1264c5,
            #00a8d8);

    box-shadow:
        0 8px 20px rgba(18, 100, 197, .18);
}


.notice-date.violet {

    background:
        linear-gradient(145deg,
            #7657e8,
            #b34fd2);

    box-shadow:
        0 8px 20px rgba(118, 87, 232, .18);
}


.notice-date.green {

    background:
        linear-gradient(145deg,
            #138b43,
            #42b96d);

    box-shadow:
        0 8px 20px rgba(19, 139, 67, .18);
}


/* =====================================================
NOTICE CONTENT
===================================================== */

.notice-info {

    min-width:
        0;
}


.notice-tag {

    display: inline-block;

    padding:
        4px 7px;

    border-radius: 5px;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .8px;

    color:
        #d65c00;

    background:
        #fff1e7;
}


.notice-tag.event {

    color:
        #1264c5;

    background:
        #eaf4ff;
}


.notice-tag.workshop {

    color:
        #7657e8;

    background:
        #f0edff;
}


.notice-tag.update {

    color:
        #138b43;

    background:
        #eaf9f0;
}


.notice-info h3 {

    margin-top: 7px;

    color:
        #12365e;

    font-size: 1rem;

    /* font-weight: 800; */

    line-height: 1.3;

    transition:
        .3s;
}


.notice-item:hover .notice-info h3 {

    color:
        #1264c5;
}


.notice-info p {

    margin-top: 5px;

    color:
        #8290a2;

    font-size: 9px;

    line-height: 1.5;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =====================================================
NOTICE ARROW
===================================================== */

.notice-arrow {

    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        #7d8da0;

    background:
        #f5f8fb;

    font-size: 15px;

    transition:
        .35s;
}


.notice-item:hover .notice-arrow {

    color: white;

    background:
        linear-gradient(135deg,
            #ff7900,
            #df4db8);

    transform:
        translateX(4px);
}


/* =====================================================
NOTICE FOOTER
===================================================== */

.notice-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 4px;

    padding:
        18px 7px 2px;

    border-top:
        1px solid #edf1f5;

    color:
        #9aa7b7;

    font-size: 9px;
}


.notice-footer a {

    color:
        #1264c5;

    font-weight: 800;

    transition:
        .3s;
}


.notice-footer a:hover {

    color:
        #ff7900;

    transform:
        translateX(3px);
}


/* =====================================================
TABLET
===================================================== */

@media(max-width:1000px) {

    .about-notice-container {

        grid-template-columns:
            1fr;

    }

    .about-panel {

        min-height:
            auto;
    }

    .about-content {

        padding:
            45px 40px;
    }

}


/* =====================================================
MOBILE
===================================================== */

@media(max-width:600px) {

    .about-notice-section {

        padding: 10px 4px;
    }


    .about-notice-container {

        gap:
            18px;
    }


    /* ABOUT */

    .about-panel {

        border-radius:
            22px;
    }


    .about-content {

        padding:
            35px 25px;
    }


    .about-content h2 {

        font-size:
            30px;

        margin-top:
            14px;
    }


    .about-description {

        font-size:
            12px;

        line-height:
            1.75;
    }


    /* Highlights become 1 column */

    .about-highlights {

        grid-template-columns:
            1fr;

        gap:
            8px;

        margin-top:
            25px;
    }


    .about-highlight {

        display:
            flex;

        align-items:
            center;

        gap:
            12px;

        padding:
            12px;
    }


    .highlight-icon {

        flex-shrink:
            0;

        margin-bottom:
            0;
    }


    .about-button {

        margin-top:
            25px;
    }


    /* NOTICE */

    .notice-panel {

        padding:
            20px 15px;

        border-radius:
            22px;
    }


    .notice-panel::before {

        left:
            20px;

        right:
            20px;
    }


    .notice-header {

        padding:
        0px 3px 2px;
    }


    .notice-icon {

        width:
            36px;

        height:
            36px;

        font-size:
            19px;
    }


    .notice-label {

        font-size:
            7px;

        letter-spacing:
            1.3px;
    }


    .notice-heading h2 {

        font-size:
            15px;
    }


    .notice-live {

        padding:
            6px 8px;

        font-size:
            7px;
    }


    .notice-item {

        grid-template-columns:
            48px 1fr 22px;

        gap:
            10px;

        padding: 6px 3px;
    }


    .notice-item:hover {

        padding-left:
            7px;

        padding-right:
            0;
    }


    .notice-date {

        width:
            46px;

        height:
            53px;

        border-radius:
            11px;
    }


    .notice-date strong {

        font-size:
            16px;
    }


    .notice-date span {

        font-size:
            7px;
    }


    .notice-info h3 {

        font-size:
            10px;
    }


    .notice-info p {

        font-size:
            8px;
    }


    .notice-arrow {

        width:
            24px;

        height:
            24px;

        font-size:
            12px;
    }


    .notice-footer {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;

        padding-top:
            15px;
    }

}

/* =====================================================
VIDEO PORTION
===================================================== */
.vsl-page-wrapper {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f8f9fa;
    padding: 40px 20px;
    margin: 0;
}

.vsl-main-container {
    max-width: 1100px;
    margin: 0 auto;
}

.vsl-section-title {
    text-align: center;
    color: #000;
    margin-bottom: 40px;
    font-size: 1.4rem;
}

/* Grid layout for 2 columns */
.vsl-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 25px;
}

.vsl-video-item {
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: #333;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    transition: all 0.2s ease-in-out;
    border-left: 5px solid #531d59;
    box-sizing: border-box;
    cursor: pointer;
}

.vsl-video-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    background-color: #fdfbff;
    border-left-color: #8e44ad;
}

.vsl-content-group {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    min-width: 0; 
}

.vsl-badge {
    background: #531d59;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 5px;
    min-width: 65px;
    text-align: center;
    white-space: nowrap;
}

.vsl-text-label {
    font-size: 1rem;
    font-weight: 500;
    /* white-space: nowrap; */
    word-wrap: break-word; 
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; 
}

.vsl-play-btn {
    color: #531d59;
    font-size: 1.1rem;
    margin-left: 10px;
}

/* Responsive: Stack to 1 column on small screens */
@media (max-width: 850px) {
    .vsl-grid-layout {
        grid-template-columns: 1fr;
    }
    .vsl-video-item {
        padding: 12px 15px; /* Slightly reduce padding for more room */
    }
    .vsl-page-wrapper{
        padding: 30px 0px;
    }
}

/* =====================================================
VERY SMALL PHONES
===================================================== */

@media(max-width:380px) {

    .about-content {

        padding:
            30px 20px;
    }


    .about-content h2 {

        font-size:
            16px;
    }


    .notice-panel {

        padding:
            12px 11px;
    }


    .notice-item {

        grid-template-columns:
            25px 1fr 20px;

        gap:
            0px;
    }


    .notice-date {

        width: 15px;
    height: 15px;
    }


    .notice-info p {

        display:
            none;
    }

}

/* =====================================================
MAIN SECTION
===================================================== */

.student-events {

    position: relative;

    padding:
        18px 14px 14px;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f5faff 50%,
            #fff9f4 100%);

    overflow: hidden;
}


/* Decorative circles */

.student-events::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -260px;
    top: 150px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 117, 0, .09),
            transparent 68%);

    pointer-events: none;
}


.student-events::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -280px;
    bottom: -150px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(0, 143, 220, .10),
            transparent 68%);

    pointer-events: none;
}


/* =====================================================
CONTAINER
===================================================== */

.events-container {

    position: relative;

    z-index: 2;

    width:
        calc(100% - 20px);

    max-width:
        1600px;

    margin:
        auto;
}


/* =====================================================
HEADING
===================================================== */

.events-heading {

    text-align:
        center;

    max-width:
        700px;

    margin:
        0 auto 15px;
}


.events-kicker {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    color:
        #ff7900;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2.5px;
}


.events-kicker span {

    width:
        30px;

    height:
        2px;

    border-radius:
        10px;

    background:
        linear-gradient(90deg,
            #ff7900,
            #ffb12b);
}


.events-heading h2 {

    margin-top:
        1px;

    color:
        #092d59;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:25px;

    line-height:
        1.2;
}


.events-heading h2 span {

    background:
        linear-gradient(90deg,
            #ff6b00,
            #df4db8,
            #0879d1);

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    animation:
        eventHeadingGradient 5s ease infinite;
}


@keyframes eventHeadingGradient {

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

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

}


.events-heading p {

    margin-top:
        13px;

    color:
        #7d8c9f;

    font-size:
        12px;

    line-height:
        1.8;
}


/* =====================================================
EVENTS GRID
===================================================== */

.events-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        25px;
}
.events-grid-pub {
   display: grid;
   place-items: center;

}


/* =====================================================
EVENT CARD
===================================================== */

.event-card {

    position:
        relative;

    min-height:
        auto;

    padding:
        20px;

    border-radius:
        27px;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
    1px solid rgba(131, 188, 246, 0.75);
    box-shadow:
        0 20px 50px rgba(20, 65, 105, .09);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.event-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        0 30px 70px rgba(20, 65, 105, .15);
}


/* =====================================================
CARD COLOR TOP LINE
===================================================== */

.event-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        30px;

    right:
        30px;

    height:
        4px;

    border-radius:
        0 0 10px 10px;

    background:
        linear-gradient(90deg,
            #ff6700,
            #ffb42e,
            #df4db8);

    background-size:
        200% auto;

    animation:
        eventLine 4s linear infinite;
}


.blue-card::before {

    background:
        linear-gradient(90deg,
            #0878d1,
            #00b5dd,
            #7657e8);

    background-size:
        200% auto;
}


@keyframes eventLine {

    0% {
        background-position:
            0% center;
    }

    100% {
        background-position:
            200% center;
    }

}


/* =====================================================
CARD GLOW
===================================================== */

.event-card-glow {

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    right:
        -130px;

    top:
        -140px;

    border-radius:
        50%;

    background:
        radial-gradient(circle,
            rgba(255, 121, 0, .13),
            transparent 68%);

    transition:
        .5s;
}


.blue-card .event-card-glow {

    background:
        radial-gradient(circle,
            rgba(0, 130, 220, .14),
            transparent 68%);
}


.event-card:hover .event-card-glow {

    transform:
        scale(1.4);

}


/* =====================================================
EVENT TOP
===================================================== */

.event-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.event-icon {

    width:
        62px;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        17px;

    font-size:
        28px;

    background:
        linear-gradient(135deg,
            #fff0e5,
            #fff8ef);

    border:
        1px solid #ffe3cd;

    box-shadow:
        0 8px 20px rgba(255, 100, 0, .10);

    transition:
        .4s;
}


.event-card:hover .event-icon {

    transform:
        rotate(-7deg) scale(1.08);
}


.blue-card .event-icon {

    background:
        linear-gradient(135deg,
            #e9f6ff,
            #f3fbff);

    border-color:
        #d4edff;

    box-shadow:
        0 8px 20px rgba(0, 120, 210, .10);
}


/* =====================================================
DATE
===================================================== */

.event-date {

    display:
        flex;

    align-items:
        center;

    gap:
        3px;

    color:
        #ff7000;
}


.blue-card .event-date {

    color:
        #0878d1;
}


.event-date strong {

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        22px;

    line-height:
        1;
}


.event-date div {

    display:
        flex;

    flex-direction:
        column;

    border-left:
        1px solid #e5eaf0;


}


.event-date span {

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.event-date small {

    margin-top:
        3px;

    color:
        #000000;

    font-size:
        10px;
}


/* =====================================================
EVENT CONTENT
===================================================== */

.event-content {

    position:
        relative;

    z-index:
        2;

    margin-top:
        12px;
}


.event-type {

    display:
        inline-block;

    padding:
        5px 9px;

    border-radius:
        5px;

    color:
        #d85e00;

    background:
        #fff1e7;

    font-size:
        1rem;

    font-weight:
        900;

    letter-spacing:
        1px;
}


.blue-card .event-type {

    color:
        #0870bf;

    background:
        #eaf6ff;
}


.event-content h3 {

    margin-top:
        10px;

    color:
        #092f5c;

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1.3;
}


.event-content>p {

/*    max-width:
        570px; */

    margin-top:
        10px;

    color:
        #000000;

    font-size:
        1rem;

    line-height:
        1.75;
    text-align: justify;
}


/* =====================================================
EVENT DETAILS
===================================================== */

.event-details {

    display:
        grid;

    /* grid-template-columns:
        repeat(3, 1fr); */

    gap:
        8px;

    /* margin-top:
        22px; */
}


.event-details div {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    min-width:
        0;

    padding:
        9px 7px;

    border-radius:
        9px;

    background:
        #f7f9fc;

    color:
        #000;

    font-size:
        1rem;

    line-height:
        1.4;
}


.event-details span {

    flex-shrink:
        0;

    font-size:
        11px;
}


/* =====================================================
CARD BOTTOM
===================================================== */

.event-bottom {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

   /* margin-top: 8px; */
    padding-top: 2px

    border-top:
        1px solid #edf1f5;
}


.spots {

    color:
        #d76a0d;

    font-size:
        9px;

    font-weight:
        800;
}


.blue-spots {

    color:
        #0875c7;
}


/* =====================================================
REGISTER BUTTON
===================================================== */

.event-register {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding: 6px 12px;

    border-radius:
        25px;

    color:
        #ffffff;

    background:
        linear-gradient(100deg,
            #ff6900,
            #ff9720);

    box-shadow:
        0 8px 20px rgba(255, 105, 0, .18);

    font-size:
        1rem;

    font-weight:
        800;

    transition:
        .35s;
}


.event-register:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px rgba(255, 105, 0, .28);
}


.event-register span {

    font-size:
        15px;

    transition:
        .3s;
}


.event-register:hover span {

    transform:
        translateX(4px);
}


/* Blue register button */

.blue-register {

    background:
        linear-gradient(100deg,
            #0872c8,
            #00a8d8);

    box-shadow:
        0 8px 20px rgba(0, 120, 210, .18);
}


.blue-register:hover {

    box-shadow:
        0 12px 25px rgba(0, 120, 210, .28);
}


/* =====================================================
TABLET
===================================================== */

@media(max-width:850px) {

    .events-grid {

        grid-template-columns:
            1fr;

    }


    .event-card {

        min-height:
            auto;

    }

}


/* =====================================================
MOBILE
===================================================== */

@media(max-width:600px) {

    .student-events {

        padding:
            0px 4px 15px;

    }


    .events-container {

        width:
            calc(100% - 10px);

    }


    .events-heading {

        margin-bottom:
            30px;

    }


    .events-heading h2 {

        font-size:
            28px;

    }


    .events-heading p {

        font-size:
            11px;

    }


    .events-grid {

        gap:
            17px;

    }


    .event-card {

        padding:
            23px;

        border-radius:
            22px;

    }


    .event-card::before {

        left:
            22px;

        right:
            22px;

    }


    .event-icon {

        width:
            53px;

        height:
            53px;

        font-size:
            23px;

    }


    .event-date strong {

        font-size:
            30px;

    }


    .event-content {

        margin-top:
            6px;

    }


    .event-content h3 {

        font-size:
            20px;

    }


    .event-content>p {

        font-size:
            11px;

    }


    .event-details {

        grid-template-columns:
            1fr;

        gap:
            6px;

    }


    .event-details div {

        font-size:
            10px;

    }


    .event-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            13px;

    }


    .event-register {

        width:
            100%;

        justify-content:
            center;

    }

}


/* =====================================================
SMALL PHONES
===================================================== */

@media(max-width:380px) {

    .event-card {

        padding:
            19px;

    }


    .event-top {

        align-items:
            flex-start;

    }


    .event-date strong {

        font-size:
            15px;

    }


    .event-content h3 {

        font-size:
            18px;

    }

}

/* =====================================================
   MAIN ABOUT SECTION
===================================================== */

.about-section {
    padding: 10px 10px;

    background:
        linear-gradient(135deg,
            #f7fbff,
            #ffffff 50%,
            #fff8f2);
}

.about-container {
    max-width: 1600px;

    margin: auto;
}

/* =====================================================
   COMMON BOX
===================================================== */

.info-box {
    position: relative;

    padding: 38px;

    background:
        rgba(255, 255, 255, .95);

    border:
        1px solid #e4ebf4;

    border-radius: 25px;

    box-shadow:
        0 18px 50px rgba(20, 60, 100, .09);

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.info-box::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(90deg,
            var(--orange),
            var(--pink),
            var(--cyan));

    background-size: 200% 100%;

    animation:
        boxGradient 5s linear infinite;
}

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

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

.info-box:hover {
    transform: translateY(-7px);

    box-shadow:
        0 28px 65px rgba(20, 60, 100, .14);
}

/* =====================================================
   STORY BOX
===================================================== */

.story-box {
    display: grid;

    grid-template-columns: 1.2fr .8fr;

    gap: 45px;

    align-items: center;
}

.small-heading {
    color: var(--orange);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.story-box h2 {
    margin-top: 12px;

    color: var(--navy);

    font-family: "Orbitron", sans-serif;

    font-size: 34px;

    line-height: 1.25;
}

.story-box h2 span {
    display: block;

    background:
        linear-gradient(90deg,
            var(--orange),
            var(--pink),
            var(--blue));

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.story-box p {
    margin-top: 17px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.9;

    text-align: justify;
}

/* =====================================================
   STORY VISUAL
===================================================== */

.story-visual {
    min-height: 290px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(135deg,
            #eaf7ff,
            #f4edff,
            #fff0e2);

    border:
        1px solid #e0e8f2;

    position: relative;

    overflow: hidden;
}

.story-visual::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    border:
        2px solid rgba(18, 100, 197, .18);

    box-shadow:
        0 0 0 35px rgba(18, 100, 197, .05),
        0 0 0 70px rgba(255, 121, 0, .04);
}

.rocket {
    position: relative;
    z-index: 2;

    font-size: 85px;

    animation:
        rocketFloat 3s ease-in-out infinite;
}

@keyframes rocketFloat {

    0%,
    100% {
        transform: translateY(8px) rotate(-5deg);
    }

    50% {
        transform: translateY(-12px) rotate(5deg);
    }
}

/* =====================================================
   OBJECTIVES
===================================================== */

.objectives {
    margin-top: 25px;
}

.section-title {
    text-align: center;

    margin-bottom: 12px;
}

.section-title span {
    color: var(--orange);

    font-size: 26px;
    font-weight: 800;

    letter-spacing: 3px;
}

.section-title h2 {
    margin-top: 8px;

    color: var(--navy);

    font-family: "Orbitron", sans-serif;

    font-size: 31px;
}

.section-title p {
    max-width: 650px;

    margin: 12px auto 0;

    color: #000;

    font-size: 1rem;

    line-height: 1.7;
}

.objective-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}

.objective-card {
    position: relative;

    padding: 27px 22px;

    background: white;

    border:
        1px solid #e5ecf4;

    border-radius: 20px;

    box-shadow:
        0 12px 35px rgba(20, 60, 100, .07);

    transition: .4s;

    overflow: hidden;
}

.objective-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px rgba(20, 60, 100, .13);
}

.objective-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -45px;
    top: -45px;

    border-radius: 50%;

    background:
        rgba(0, 168, 216, .08);
}

.objective-number {
    color: var(--orange);

    font-family: "Orbitron", sans-serif;

    font-size: 12px;
    font-weight: 800;
}

.objective-card h4 {
    margin-top: 14px;

    color: var(--navy);

    font-size: 14px;
}

.objective-card p {
    margin-top: 9px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.7;
}

/* =====================================================
   JOURNEY BOX
===================================================== */

.journey-box {
    margin-top: 25px;

    /* padding: 40px; */
    padding: 14px;
}

.timeline {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    margin-top: 30px;
}

.timeline-item {
    position: relative;

    padding: 22px;

    border-radius: 17px;

    background:
        linear-gradient(135deg,
            #f7fbff,
            #fff8f2);

    border:
        1px solid #e5ebf3;
}

.timeline-item strong {
    color: var(--orange);

    font-family: "Orbitron", sans-serif;

    font-size: 18px;
}

.timeline-item h4 {
    margin-top: 8px;

    color: var(--navy);

    font-size: 13px;
}

.timeline-item p {
    margin-top: 7px;

    color: var(--muted);

    font-size: 9px;

    line-height: 1.6;
}

/* Contest Grid */
.contest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 30px 0 70px;
}

/* Card */
.contest-card {
    position: relative;
    padding: 30px 25px;
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(12px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35);

    transition: 0.3s ease;
}

.contest-card:hover {
    transform: translateY(-8px);
    border-color: #62d9ff;

    box-shadow:
        0 20px 50px rgba(98, 217, 255, 0.18);
}

.number {
    position: absolute;
    top: 18px;
    right: 20px;

    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #62d9ff,
            #8c5cff);

    color: white;
    font-weight: bold;
}

.contest-icon {
    font-size: 42px;
    margin-bottom: 20px;
}

.contest-card h2 {
    font-size: 23px;
    line-height: 1.4;
    margin-bottom: 25px;
}

.date {
    padding: 15px;
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.25);

    border-left: 3px solid #62d9ff;
}

.date-label {
    display: block;
    color: #8f9ac4;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.date-value {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

/* Footer */
footer {
    text-align: center;
    padding: 25px;
    color: #7e87ad;
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-logo-container {
    display: flex;
    align-items: center; /* Vertically centers logo with text */
    gap: 10px;           /* Adds space between the logo and the text */
    margin-bottom: 5px;  /* Adds space between logo line and address */
}

.footer-logo {
    width: 55px;         /* Adjust size as needed */
    height: auto;        /* Maintains aspect ratio */
}

.footer-logo-text {
    font-weight: bold;   /* Optional styling */
    font-size: 1.2rem;   /* Optional styling */
}
.footer-left {
    display: flex;
    flex-direction: column; /* Keeps the address below the logo */
    align-items: center;    /* Centers items horizontally */
    text-align: center;     /* Centers the text inside the <p> tag */
}
/* Mobile */
@media (max-width: 850px) {
    .contest-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: auto;
    }

    header h1 {
        font-size: 38px;
    }
}



/* =====================================================
   UPDATED CONTENT STYLES
===================================================== */

.text-gradient {
    background: linear-gradient(90deg, var(--orange), var(--pink), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-intro-text {
    text-align: center;
/*    max-width: 900px; */
    margin: 0 auto 40px;
    color: black;
    font-size: 1rem;
    line-height: 1.8;
    padding: 10px;
}

.about-intro-text strong {
    color: var(--navy);
    font-weight: 700;
}

/* Guidelines Grid */
.guidelines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.guide-card {
    padding: 10px;
    background: #f8fbff;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-color: var(--cyan);
}

.guide-card:hover {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 15px 30px rgba(20, 60, 100, 0.08);
    border-color: var(--cyan);
}

.guide-icon {
    font-size: 30px;
    margin-bottom: 15px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.guide-card h4 {
    color: var(--navy);

    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.guide-card p {
    color: #000;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
}

/* Special Reward Card */
.reward-card {
    background: linear-gradient(135deg, #fff9f0, #fff0e6);
    border: 2px dashed var(--orange);
}

.reward-card:hover {
    border-style: solid;
    background: linear-gradient(135deg, #fff4e0, #ffe8d5);
}

.reward-card h4 {
    color: var(--orange);
}

.reward-card p {
    color: #8a6d4a;
    font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .guidelines-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .guidelines-grid {
        grid-template-columns: 1fr;
    }

    .about-intro-text {
        text-align: justify;
    }
}

.footer-left{
  text-align: center;
  color: #aee8ff;
}
.footer-right{
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
  }


/* =====================================================
   UNIQUE BUTTON
===================================================== */

  /* Unique Button Styling */
  .unique-btn {
    padding: 7px 13px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 50px;
    background: linear-gradient(45deg, #ff00cc, #3333ff);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.unique-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 0, 204, 0.6);
    filter: brightness(1.2);
}

.unique-btn:active {
    transform: scale(0.95);
}

/* Popup Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

/* Popup Image */
.popup-content {
    position: relative;
    /* This ensures the container doesn't exceed the screen size */
    max-width: 90vw; 
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-content img {
    max-width: 100%;
    max-height: 90vh; 
    width: auto;
    height: auto;
    
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: zoomIn 0.3s ease-out;
    
    /* Ensures the image isn't stretched or distorted */
    object-fit: contain; 
}

/* Close Button */
.close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    cursor: pointer;
    font-weight: bold;
}

@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.unique-btn {
    display: block;
    margin: 0 auto; /* Centers the block element horizontally */
    
    /* ... keep your other existing styles (padding, colors, etc.) ... */
}






/* =====================================================
   ENHANCED FOOTER STYLES
===================================================== */
footer {
    /* Using your existing footer gradient animation */
    padding: 10px 20px 0px; 
    position: relative;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 5px;
}

.footer-section {
    text-align: center;
}

.footer-logo-text {
    font-family: "Orbitron", sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(173, 232, 255, 0.5);
}

.footer-left p {
    color: #d0d0d0;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 500;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.contact-item {
    display: flex;
    gap: 10px;
    font-size: 1rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    transition: 0.3s;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    border-color: var(--cyan);
}

.contact-label {
    color: #fff4ca;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.contact-value {
    color: #ffffff;
    font-weight: 500;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-bottom p {
    font-size: 1rem;
    color: #c7d9ec;
    margin: 0;
}

.highlight-vssc {
    color: #aee8ff;
    font-weight: 800;
    font-family: "Orbitron", sans-serif;
}

.developer-text {
    font-size: 14px !important;
    opacity: 0.8;
}

.highlight-dev {
    color: #ccc;
    font-weight: 700;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-section {
        text-align: center;
    }
    .contact-item {
        justify-content: center;
    }
    
    .contact-item2 {
    gap: 5px;
    }
    .contact-label2 {
	font-size: .7rem;
    }
    .contact-value2 {
    
    font-size: 0.8rem;}



}



#wsw26-page-scope .wsw26-main-wrapper {
    padding: 50px 15px;
    display: flex;
    justify-content: center;
    background-color: #f8fafc !important; /* Light grey-blue background */
}

#wsw26-page-scope .wsw26-content-container {
    width: 100%;
     max-width: 1600px; 
}

#wsw26-page-scope .wsw26-glass-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

#wsw26-page-scope .wsw26-header-area {
    text-align: center;
    margin-bottom: 5px;
}

#wsw26-page-scope .wsw26-main-title {
    color: #1e293b !important;
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: -0.5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#wsw26-page-scope .wsw26-theme-banner {
    background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
    border-left: 6px solid #3b82f6;
    padding: 20px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 10px;
}

#wsw26-page-scope .wsw26-theme-text {
    color: #2563eb !important;
    margin: 0 !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#wsw26-page-scope .wsw26-sub-title {
    color: #005db5 !important;
    font-size: 1.4rem !important;
    /* margin-top: 30px !important;
    margin-bottom: 15px !important; */
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#wsw26-page-scope .wsw26-paragraph {
    color: #000 !important;
    line-height: 1.8 !important;
    margin-bottom: 6px !important;
    font-size: 1rem !important;
    text-align: justify !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#wsw26-page-scope .wsw26-bold {
    color: #1e293b !important;
    font-weight: 600 !important;
}

#wsw26-page-scope .wsw26-focus-section {
    background-color: #fdfdfd !important;
    border: 1px solid #f1f5f9;
    padding-left: 25px;
    border-radius: 16px;
    /* margin: 30px 0; */
}

#wsw26-page-scope .wsw26-focus-label {
    display: block;
    color: #1e293b !important;
    font-size: 1.0rem !important;
    margin-bottom: 7px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#wsw26-page-scope .wsw26-focus-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#wsw26-page-scope .wsw26-focus-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    color: #000 !important;
    line-height: 1.6;
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; */
    font-size: 1rem;
}

#wsw26-page-scope .wsw26-focus-item::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: #3b82f6;
    font-weight: bold;
}

#wsw26-page-scope .wsw26-separator {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    margin: 40px 0;
}

@media (max-width: 768px) {
    #wsw26-page-scope .wsw26-glass-card {
        padding: 20px;
    }
    #wsw26-page-scope .wsw26-main-title {
        font-size: 1.8rem !important;
    }
    .info-box{
        padding:10px;
    }
    #wsw26-page-scope .wsw26-main-wrapper{
        padding: 10px 5px;
    }
}