/*=========================================================
VYBE 2026
Cyber GIT Theme
Part 1
=========================================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap');

/*=========================================================
ROOT
=========================================================*/

:root{

    --primary:#004B8D;
    --secondary:#0077CC;
    --accent:#FFD54A;

    --bg:#050C17;
    --bg2:#091829;
    --bg3:#102845;

    --white:#ffffff;
    --gray:#C8D1DB;
    --muted:#8FA4B9;

    --glass:rgba(255,255,255,.06);

    --shadow:
    0 15px 50px rgba(0,0,0,.45);

    --blueGlow:
    0 0 10px #00A8FF,
    0 0 25px #00A8FF,
    0 0 45px rgba(0,168,255,.5);

    --goldGlow:
    0 0 10px #FFD54A,
    0 0 25px #FFD54A,
    0 0 45px rgba(255,213,74,.5);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Space Grotesk',sans-serif;

    color:var(--white);

    background:
    radial-gradient(circle at 15% 20%,rgba(0,168,255,.15),transparent 35%),
    radial-gradient(circle at 85% 80%,rgba(255,213,74,.08),transparent 35%),
    linear-gradient(135deg,var(--bg),var(--bg2),var(--bg3));

    overflow-x:hidden;

}

a{

    text-decoration:none;

}

img{

    max-width:100%;
    display:block;

}

section{

    padding:120px 0;
    position:relative;

}

.container{

    position:relative;
    z-index:5;

}

/*=========================================================
ANIMATED GRID
=========================================================*/

.bg-grid{

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(0,168,255,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(0,168,255,.05) 1px,transparent 1px);

    background-size:60px 60px;

    animation:gridMove 15s linear infinite;

    z-index:-3;

}

@keyframes gridMove{

from{

transform:translateY(0);

}

to{

transform:translateY(60px);

}

}

/*=========================================================
NEON BLOBS
=========================================================*/

.bg-blur{

    position:fixed;

    width:450px;
    height:450px;

    border-radius:50%;

    filter:blur(120px);

    z-index:-2;

}

.bg1{

    background:#0077CC;

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

    animation:blob1 9s ease-in-out infinite;

}

.bg2{

    background:#FFD54A;

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

    animation:blob2 12s ease-in-out infinite;

}

@keyframes blob1{

0%,100%{

transform:translate(0,0);

}

50%{

transform:translate(70px,60px);

}

}

@keyframes blob2{

0%,100%{

transform:translate(0,0);

}

50%{

transform:translate(-60px,-80px);

}

}

/*=========================================================
PRELOADER
=========================================================*/

#preloader{

    position:fixed;

    inset:0;

    background:#020813;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.loader{

    display:flex;

    gap:14px;

}

.loader span{

    font-size:72px;

    font-weight:800;

    color:#fff;

    text-shadow:var(--blueGlow);

    animation:bounce 1s infinite;

}

.loader span:nth-child(2){

animation-delay:.15s;

}

.loader span:nth-child(3){

animation-delay:.3s;

}

.loader span:nth-child(4){

animation-delay:.45s;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-28px);

}

}

/*=========================================================
NAVBAR
=========================================================*/

.navbar{

    padding:18px 0;

    backdrop-filter:blur(25px);

    background:rgba(5,12,23,.55);

    border-bottom:1px solid rgba(0,168,255,.15);

    transition:.4s;

}

.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:30px;

    font-weight:800;

    text-shadow:var(--blueGlow);

}

.navbar-brand span{

    color:var(--accent);

    text-shadow:var(--goldGlow);

}

.nav-link{

    color:#fff;

    margin-left:25px;

    font-weight:600;

    position:relative;

    transition:.3s;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:linear-gradient(90deg,var(--secondary),var(--accent));

    transition:.4s;

}

.nav-link:hover{

    color:var(--accent);

    text-shadow:var(--goldGlow);

}

.nav-link:hover::after{

    width:100%;

}

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

.btn-primary-custom,
.btn-register{

    padding:15px 36px;

    border:none;

    border-radius:60px;

    color:#fff;

    font-weight:700;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:var(--blueGlow);

    transition:.35s;

}

.btn-primary-custom:hover,
.btn-register:hover{

    transform:translateY(-8px) scale(1.05);

    background:

    linear-gradient(
    135deg,
    var(--secondary),
    var(--accent));

    box-shadow:var(--goldGlow);

    color:#fff;

}

.btn-outline-custom{

    padding:15px 36px;

    border-radius:60px;

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

    color:#fff;

    transition:.35s;

}

.btn-outline-custom:hover{

    background:var(--secondary);

    box-shadow:var(--blueGlow);

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

}

.hero-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

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

    margin-bottom:25px;

}

.hero h1{

    font-size:90px;

    font-weight:800;

    line-height:1;

    text-transform:uppercase;

    margin-bottom:30px;

}

.hero h1 span{

    background:

    linear-gradient(
    90deg,
    var(--secondary),
    var(--accent));

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:var(--blueGlow);

}

.hero p{

    font-size:20px;

    color:var(--gray);

    line-height:1.9;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

/*=========================================================
COUNTDOWN
=========================================================*/

.countdown{

    display:flex;

    gap:22px;

    margin-top:55px;

    flex-wrap:wrap;

}

.countdown div{

    width:95px;
    height:95px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border-radius:24px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(0,168,255,.25);

    box-shadow:0 0 25px rgba(0,168,255,.12);

}

.countdown h2{

    font-size:34px;

    color:var(--accent);

}

.countdown span{

    color:var(--gray);

    font-size:13px;

}

/*=========================================================
FLOATING HERO CARDS
=========================================================*/

.hero-image{

    position:relative;

    height:650px;

}

.floating-card{

    position:absolute;

    width:260px;

    padding:28px;

    border-radius:28px;

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

    backdrop-filter:blur(25px);

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

    box-shadow:var(--shadow);

    animation:floatCard 5s ease-in-out infinite;

}

.card1{

    left:20px;
    top:100px;

}

.card2{

    right:20px;
    bottom:120px;

    animation-delay:2s;

}

.floating-card .icon{

    font-size:60px;

    margin-bottom:20px;

}

.floating-card h3{

    margin-bottom:10px;

}

.floating-card:hover{

    transform:scale(1.06);

    box-shadow:var(--blueGlow);

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

}

/*=========================================================
CUSTOM CURSOR
=========================================================*/

.cursor{

    position:fixed;

    width:18px;
    height:18px;

    border-radius:50%;

    background:var(--accent);

    pointer-events:none;

    z-index:999999;

    box-shadow:var(--goldGlow);

}
/*=========================================================
ABOUT
=========================================================*/

.about-section{
    position:relative;
}

.about-section h2{
    font-size:58px;
    font-weight:800;
    margin-bottom:25px;
}

.about-section p{
    color:var(--gray);
    font-size:18px;
    line-height:1.9;
}

.stats-card{

    padding:35px;

    border-radius:28px;

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

    backdrop-filter:blur(22px);

    border:1px solid rgba(0,168,255,.15);

    transition:.4s;

    text-align:center;

    overflow:hidden;

    position:relative;

}

.stats-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:linear-gradient(
        45deg,
        transparent,
        rgba(0,168,255,.35),
        transparent);

    transform:translateX(-100%);

}

.stats-card:hover::before{

    transform:translateX(100%);

    transition:1s;

}

.stats-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--blueGlow);

}

.stats-card h3{

    font-size:50px;

    color:var(--accent);

}

.stats-card p{

    color:var(--gray);

}

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

.section-title{

    text-align:center;

    margin-bottom:80px;

}

.section-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

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

    margin-bottom:20px;

}

.section-title h2{

    font-size:58px;

    font-weight:800;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--accent));

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.section-title p{

    color:var(--gray);

    margin-top:20px;

}

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

.event-section{

    position:relative;

}

.poster-box{

    position:relative;

    border-radius:30px;

    overflow:hidden;

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

    padding:18px;

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

    transition:.5s;

}

.poster-box:hover{

    transform:scale(1.02);

    box-shadow:var(--blueGlow);

}

.poster-box img{

    border-radius:22px;

    transition:.6s;

}

.poster-box:hover img{

    transform:scale(1.08);

}

.poster-glow{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(0,168,255,.15),

    rgba(255,213,74,.08));

    pointer-events:none;

}

.event-content h2{

    font-size:62px;

    margin-bottom:25px;

}

.event-content h2 span{

    color:var(--accent);

    text-shadow:var(--goldGlow);

}

.event-content p{

    color:var(--gray);

    line-height:1.9;

}

/*=========================================================
FEATURES
=========================================================*/

.event-features{

    display:grid;

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

    gap:20px;

    margin-top:40px;

}

.feature{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:22px;

    border-radius:24px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(0,168,255,.12);

    transition:.35s;

}

.feature:hover{

    transform:translateY(-8px);

    border-color:var(--accent);

    box-shadow:var(--goldGlow);

}

.feature i{

    font-size:26px;

    color:var(--accent);

    text-shadow:var(--goldGlow);

}

.feature h5{

    margin-bottom:5px;

}

.feature p{

    margin:0;

    color:var(--gray);

}

/*=========================================================
PRIZES
=========================================================*/

.prize-wrapper{

    display:flex;

    gap:25px;

    margin-top:40px;

}

.prize-card{

    flex:1;

    text-align:center;

    padding:30px;

    border-radius:26px;

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

    backdrop-filter:blur(18px);

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

    transition:.4s;

}

.prize-card:hover{

    transform:translateY(-10px) scale(1.03);

    box-shadow:var(--goldGlow);

}

.prize-card span{

    color:var(--gray);

}

.prize-card h3{

    margin-top:15px;

    color:var(--accent);

    font-size:36px;

}

/*=========================================================
WHY PARTICIPATE
=========================================================*/

.why-card{

    padding:35px;

    text-align:center;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

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

    transition:.4s;

}

.why-card i{

    font-size:48px;

    color:var(--accent);

    margin-bottom:20px;

    text-shadow:var(--goldGlow);

}

.why-card:hover{

    transform:translateY(-15px);

    box-shadow:var(--blueGlow);

}

/*=========================================================
TIMELINE
=========================================================*/

.timeline-wrapper{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline-wrapper::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:3px;

    height:100%;

    background:linear-gradient(
        var(--secondary),
        var(--accent));

}

.timeline-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:60px;

}

.timeline-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        var(--primary),
        var(--secondary));

    box-shadow:var(--blueGlow);

    color:#fff;

    font-size:26px;

}

.timeline-content{

    width:42%;

    padding:25px;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

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

    transition:.35s;

}

.timeline-content:hover{

    transform:scale(1.04);

    box-shadow:var(--goldGlow);

}

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

.register-box{

    padding:70px;

    border-radius:35px;

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

    backdrop-filter:blur(25px);

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

    overflow:hidden;

    position:relative;

}

.register-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(0,168,255,.12),

    rgba(255,213,74,.05));

    pointer-events:none;

}

.register-box h2{

    font-size:52px;

    margin-bottom:20px;

}

.register-box p{

    color:var(--gray);

}

.register-features{

    display:grid;

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

    gap:18px;

    margin-top:30px;

}

.register-features div{

    padding:18px;

    border-radius:18px;

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

}

.register-features i{

    color:var(--accent);

    margin-right:10px;

}

.btn-register-big{

    display:inline-block;

    margin-top:35px;

    padding:18px 45px;

    border-radius:60px;

    background:linear-gradient(
        var(--primary),
        var(--secondary));

    color:#fff;

    font-weight:700;

    box-shadow:var(--blueGlow);

    transition:.35s;

}

.btn-register-big:hover{

    transform:translateY(-8px);

    background:linear-gradient(
        var(--secondary),
        var(--accent));

    box-shadow:var(--goldGlow);

}

.qr-image{

    max-width:250px;

    margin:auto;

    border-radius:20px;

    padding:12px;

    background:#fff;

    transition:.4s;

}

.qr-image:hover{

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

    box-shadow:var(--goldGlow);

}
/*=========================================================
FAQ
=========================================================*/

.accordion{

    --bs-accordion-bg:transparent;
    --bs-accordion-border-color:rgba(255,255,255,.08);
    --bs-accordion-btn-bg:rgba(255,255,255,.05);
    --bs-accordion-active-bg:rgba(0,168,255,.08);
    --bs-accordion-btn-color:#fff;
    --bs-accordion-active-color:#FFD54A;
    --bs-accordion-color:#C8D1DB;

}

.accordion-item{

    margin-bottom:20px;

    border-radius:22px!important;

    overflow:hidden;

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

    backdrop-filter:blur(18px);

}

.accordion-button{

    font-weight:700;

    padding:22px;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    color:var(--gray);

    line-height:1.9;

}

/*=========================================================
CONTACT
=========================================================*/

.contact-card{

    padding:40px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--blueGlow);

}

.contact-section h2{

    font-size:52px;

    margin-bottom:25px;

}

.contact-section p{

    color:var(--gray);

    font-size:18px;

}

.social-links{

    display:flex;

    gap:20px;

    margin-top:30px;

}

.social-links a{

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    color:#fff;

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

    transition:.35s;

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

}

.social-links a:hover{

    transform:translateY(-8px) rotate(10deg);

    background:linear-gradient(
    135deg,
    var(--secondary),
    var(--accent));

    box-shadow:var(--goldGlow);

}

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

footer{

    padding:90px 0;

    text-align:center;

    background:#040A14;

    border-top:2px solid var(--accent);

    position:relative;

}

footer::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:2px;

    background:linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent);

}

footer h3{

    font-size:42px;

    color:#fff;

    text-shadow:var(--blueGlow);

}

footer p{

    color:var(--gray);

    margin-top:10px;

}

/*=========================================================
BUTTON SHINE
=========================================================*/

.btn-primary-custom,
.btn-register,
.btn-register-big{

    position:relative;

    overflow:hidden;

}

.btn-primary-custom::before,
.btn-register::before,
.btn-register-big::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60px;

    height:100%;

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

    transform:skewX(-25deg);

}

.btn-primary-custom:hover::before,
.btn-register:hover::before,
.btn-register-big:hover::before{

    left:130%;

    transition:.8s;

}

/*=========================================================
NEON BORDER
=========================================================*/

.neon-border{

    position:relative;

    overflow:hidden;

}

.neon-border::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:linear-gradient(
    45deg,
    #0077CC,
    #FFD54A,
    #00A8FF,
    #0077CC);

    background-size:300%;

    animation:borderMove 5s linear infinite;

    z-index:-1;

}

@keyframes borderMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

/*=========================================================
CURSOR
=========================================================*/

.cursor-ring{

    position:fixed;

    width:40px;

    height:40px;

    border:2px solid #FFD54A;

    border-radius:50%;

    pointer-events:none;

    z-index:999998;

    transition:.08s;

    box-shadow:var(--goldGlow);

}

/*=========================================================
FLOAT
=========================================================*/

.float{

    animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

/*=========================================================
PULSE
=========================================================*/

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

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

@media(max-width:992px){

.hero{

padding-top:120px;

text-align:center;

}

.hero h1{

font-size:60px;

}

.hero-image{

height:auto;

margin-top:60px;

}

.event-content{

margin-top:50px;

}

.event-features{

grid-template-columns:1fr;

}

.prize-wrapper{

flex-direction:column;

}

.timeline-wrapper::before{

display:none;

}

.timeline-item{

flex-direction:column;

gap:25px;

}

.timeline-content{

width:100%;

}

.register-box{

padding:45px;

}

.register-features{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.hero h1{

font-size:46px;

}

.section-title h2{

font-size:38px;

}

.about-section h2{

font-size:38px;

}

.event-content h2{

font-size:40px;

}

.hero-buttons{

flex-direction:column;

}

.countdown{

justify-content:center;

}

.countdown div{

width:80px;

height:80px;

}

.social-links{

justify-content:center;

flex-wrap:wrap;

}

}

@media(max-width:576px){

section{

padding:80px 0;

}

.hero h1{

font-size:34px;

}

.section-title h2{

font-size:30px;

}

.navbar-brand{

font-size:24px;

}

.contact-section h2{

font-size:34px;

}

.register-box{

padding:30px;

}

.floating-card{

position:relative;

width:100%;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin-bottom:25px;

}

}

/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#050C17;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
var(--secondary),
var(--accent));

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#FFD54A;

}

/*=========================================================
TEXT SELECTION
=========================================================*/

::selection{

background:var(--accent);

color:#000;

}

/*=========================================================
END
=========================================================*/