/* ==================================================
   THE SCIENCE OF EMOTIONS
   PREMIUM VERSION
================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

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

html{
    scroll-behavior:smooth;
}

body{
    background:
    radial-gradient(circle at 20% 20%, rgba(139,92,246,.15), transparent 25%),
    radial-gradient(circle at 80% 40%, rgba(0,212,255,.10), transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(255,79,216,.08), transparent 25%),
    #050816;

    color:white;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

html,
body{
    width:100%;
}

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

.navbar{
    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:9999;

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    padding:18px 30px;

    background:transparent;

    border-bottom:none;
}

.logo-container{
    display:flex;
    align-items:center;
    gap:12px;

    margin-left:40px;
}

.logo-image{
    width:120px;
    height:120px;
    object-fit:contain;
}

.nav-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    list-style:none;

    margin:0;
    padding:0;
}


.nav-links a{

    display:inline-block;

    color:white;

    text-decoration:none;

    padding:8px 16px;

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

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

    border-radius:999px;

    backdrop-filter:blur(8px);

    transition:.3s ease;
}

.nav-links a:hover{

    color:white;

    background:rgba(0,212,255,.25);

    border-color:#00d4ff;
}


/* ==================================================
   HAMBURGER
================================================== */

.menu-toggle{
    display:none;
    font-size:2rem;
    cursor:pointer;
}

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

.hero{

    min-height:100vh;

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

    text-align:center;

    position:relative;

    overflow:hidden;

    padding:100px 30px;
}

.hero-video{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;
}

.hero::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.45);

    z-index:1;
}

.hero::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-2px;

    height:300px;

    background:linear-gradient(
        to bottom,
        transparent 0%,
        rgba(5,8,22,.35) 35%,
        rgba(5,8,22,.80) 70%,
        #050816 100%
    );

    z-index:2;
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:5;
    max-width:900px;
}

.hero h1{

    font-size:5rem;
    line-height:1.1;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #8b5cf6,
        #ff4fd8,
        #00ff9d
    );

    background-size:400%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:gradientShift 10s infinite linear;

    margin-bottom:20px;
}

.hero h2{
    font-size:2rem;
    margin-bottom:25px;
}

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

.course-card button, 
.program-card button, 
.tutoring-card button{

    border:none;

    text-decoration:none;

    padding:15px 30px;

    border-radius:999px;

    cursor:pointer;

    font-weight:700;

    color:white;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #8b5cf6,
        #ff4fd8
    );

    background-size:300%;

    transition:.4s;

    box-shadow:
    0 0 20px rgba(139,92,246,.4);
}

.course-card button:hover, 
.program-card button:hover, 
.tutoring-card button:hover{

    transform:translateY(-4px);

    background-position:right center;

    box-shadow:
    0 0 40px rgba(255,79,216,.8);
}

.program-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.learn-more-button{
    display:inline-block;

    padding:15px 30px;

    color:white;
    font-weight:700;
    text-decoration:none;

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

    border:1px solid #00d4ff;
    border-radius:999px;

    transition:.3s ease;
}

.learn-more-button:hover{
    transform:translateY(-4px);

    background:rgba(0,212,255,.25);

    box-shadow:
        0 0 30px rgba(0,212,255,.45);
}

/* ==================================================
   STARS
================================================== */

.star{

    position:fixed;

    width:5px;
    height:5px;

    background:white;

    border-radius:50%;

    box-shadow:
    0 0 12px white;

    animation:twinkle 3s infinite;

    z-index:0;

    pointer-events:none;
}

.star1{top:20%;left:15%;}
.star2{top:40%;left:80%;}
.star3{top:18%;left:70%;}
.star4{top:75%;left:12%;}
.star5{top:70%;left:88%;}
.star6{top:25%;left:45%;}

/* ==================================================
   SECTIONS
================================================== */

section{
    padding:100px 8%;
    scroll-margin-top:70px;
}

section h2{
    text-align:center;
    font-size:3rem;
    margin-bottom:50px;
}

/* ==================================================
   QUOTE
================================================== */

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

.quote-section h2{
    font-size:2.5rem;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #8b5cf6,
        #ff4fd8
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.quote-section p{
    max-width:800px;
    margin:auto;
}

/* ==================================================
   GRIDS
================================================== */

.course-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap:25px;
}
/* ==================================================
   CARDS
================================================== */

.course-card, 
.program-card, 
.tutoring-card{

    background:rgba(17,24,39,.55);

    backdrop-filter:blur(10px);

    border-radius:20px;

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

    padding:30px;

    transition:.4s;
}

.course-card:hover,
.program-card:hover,
.tutoring-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 0 40px rgba(0,212,255,.25);
}

.course-thumbnail{
    display:block;
    width:100%;
    height:180px;
    object-fit:cover;
    object-position:center;
    margin-bottom:24px;
    border-radius:14px;
}

.program-thumbnail{
    display:block;
    width:100%;
    height:180px;
    object-fit:cover;
    object-position:center;
    margin-bottom:24px;
    border-radius:14px;
}

.course-card h3,
.program-card h3,
.tutoring-card h3{
    margin-bottom:16px;

    font-size:1.7rem;
    font-weight:800;
    line-height:1.25;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #8b5cf6,
        #ff4fd8
    );

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

    -webkit-text-fill-color:transparent;

    filter:drop-shadow(
        0 0 10px rgba(0,212,255,.25)
    );
}

/* ==================================================
   EMOTION CARD COLORS
================================================== */

.red{
    border-top:4px solid #ff4b4b;
}

.yellow{
    border-top:4px solid #ffd84d;
}


/* ==================================================
   PROGRAM
================================================== */

.program-card,
.tutoring-card{

    max-width:800px;

    margin:auto;

    text-align:center;
}

.program-card h1,
.tutoring-card h1{

    margin:20px 0;

    font-size:4rem;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #8b5cf6,
        #ff4fd8
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

#about{
    text-align:center;
}

#about p{
    max-width:900px;
    margin:auto;
}
.about-video{

    display:block;

    width:100%;

    max-width:600px;

    margin:30px auto;

    border-radius:20px;

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

}

/* ==================================================
   SPACE GLOWS
================================================== */

#courses,
#program,
#tutoring,
#about{
    position: relative;
}

#courses::before{

    content: "";

    position: absolute;

    width: 800px;
    height: 800px;

    background: #8b5cf6;

    filter: blur(220px);

    opacity: .15;

    top: -200px;
    left: 50%;

    transform: translateX(-50%);

    z-index: -1;
}

#program::before{

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    background: #00d4ff;

    filter: blur(220px);

    opacity: .12;

    top: -100px;
    right: 0;

    z-index: -1;
}

#tutoring::before{

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    background: #ff4fd8;

    filter: blur(220px);

    opacity: .10;

    bottom: -150px;
    left: 0;

    z-index: -1;
}

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

footer{

    padding:60px 20px;

    text-align:center;

    background:#03050d;
}

/* ==================================================
   ANIMATIONS
================================================== */

@keyframes twinkle{

    0%,100%{
        opacity:.3;
    }

    50%{
        opacity:1;
    }
}

@keyframes gradientShift{

    0%{
        background-position:left;
    }

    100%{
        background-position:right;
    }
}

/* ==================================================
   SCROLL ANIMATION
================================================== */

.hidden{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.show{
    opacity:1;
    transform:translateY(0);
}


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

@media(max-width:900px){

    html,
    body{
        width:100%;
        overflow-x:hidden;
    }

    .navbar{
        display:flex;
        justify-content:space-between;
        align-items:center;

        padding:8px 18px;

        background:rgba(5,8,22,.90);

        border-bottom:1px solid rgba(255,255,255,.12);

        backdrop-filter:blur(12px);
    }

    .logo-container{
        margin-left:0;
    }

    .logo-image{
        display:block;

        width:60px;
        height:60px;

        object-fit:contain;
    }

    .menu-toggle{
        display:block;

        margin-left:auto;

        color:white;

        font-size:2rem;
        line-height:1;

        cursor:pointer;
    }

    .nav-links{
        position:absolute;

        top:100%;
        left:0;
        right:0;

        display:none;
        flex-direction:column;

        width:100%;

        gap:12px;

        padding:20px;

        background:rgba(5,8,22,.97);

        border-bottom:1px solid rgba(255,255,255,.12);

        backdrop-filter:blur(14px);
    }

    .nav-links.active{
        display:flex;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links a{
        display:block;

        width:100%;

        margin-left:0 !important;

        text-align:center;
    }

    .hero{
        padding-top:100px;
    }

    .hero h1{
        font-size:3rem;
    }

    .hero h2{
        font-size:1.4rem;
    }
}

/* TESTIMONIALS: GREEN */

.nav-links a[href="testimonials.html"]{
    margin-left:25px;
    background:rgba(0,255,157,.45);
    border:2px solid #00ff9d;
}

.nav-links a[href="testimonials.html"]:hover{
    background:#00b875;
    border-color:#70ffc5;
    box-shadow:0 0 20px rgba(0,255,157,.65);
}


/* TIKTOK: BLUE */

.nav-links a[href*="tiktok.com"]{
    background:rgba(0,212,255,.45);
    border:2px solid #00d4ff;
}

.nav-links a[href*="tiktok.com"]:hover{
    background:#008fb3;
    border-color:#72e8ff;
    box-shadow:0 0 20px rgba(0,212,255,.65);
}

#courses .course-price{
    color:#ffffff;

    font-size:1.7rem;
    font-weight:800;

    margin:10px 0 22px;

    text-shadow:
        0 0 8px rgba(0,212,255,.9),
        0 0 18px rgba(139,92,246,.7),
        0 0 28px rgba(255,79,216,.5);
}