/* ==========================================
   NEXTGEN PHYSICS - HOME PAGE
========================================== */


/* ---------- HERO ---------- */

.hero-section{

    padding:90px 0;

}

.hero-content h1{

    font-size:4.2rem;

    font-weight:800;

    line-height:1.1;

    margin-bottom:25px;

}

.hero-content h1 span{

    background:linear-gradient(
        90deg,
        #2563EB,
        #7C4DFF
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-content p{

    font-size:1.2rem;

    color:#666;

    margin-bottom:35px;

    line-height:1.8;

}


/* ---------- HERO IMAGE ---------- */

.hero-image{

    width:700px;

    max-width:100%;

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

    filter:drop-shadow(
        0 30px 40px rgba(124,77,255,.25)
    );

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}


/* ---------- HERO BUTTONS ---------- */

.hero-buttons .btn{

    margin-right:15px;

    margin-bottom:10px;

    border-radius:14px;

    padding:15px 34px;

    font-weight:600;

    transition:.35s;

}

.hero-buttons .btn:hover{

    transform:translateY(-5px);

}


/* ---------- STATS ---------- */

.stats-section{

    padding:80px 0;

}

.stats-card{

    background:white;

    border-radius:22px;

    text-align:center;

    padding:40px 20px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.stats-card:hover{

    transform:translateY(-10px);

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

}

.stats-card h2{

    font-size:2.5rem;

    color:#7C4DFF;

    font-weight:700;

}

.stats-card p{

    color:#666;

    margin-top:10px;

}


/* ---------- FEATURES ---------- */

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

.features-section{

    padding:100px 0;

}

.feature-link{

    text-decoration:none;

    display:block;

    color:inherit;

}

.feature-link:hover{

    color:inherit;

}

.feature-card{

    background:#fff;

    border:none;

    border-radius:24px;

    padding:40px 25px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

    cursor:pointer;

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(124,77,255,.20);

    border:2px solid #7C4DFF;

}

.feature-icon{

    font-size:3.5rem;

    color:#7C4DFF;

    margin-bottom:25px;

}

.feature-card h3{

    font-weight:700;

    margin-bottom:18px;

}

.feature-card p{

    color:#666;

    line-height:1.8;

    min-height:70px;

}

.feature-arrow{

    display:inline-block;

    margin-top:20px;

    font-weight:700;

    color:#7C4DFF;

    transition:.3s;

}

.feature-card:hover .feature-arrow{

    transform:translateX(8px);

}


/* ===============================
   DARK MODE
================================ */

body.dark-mode .feature-card{

    background:#1f1f1f;

}

body.dark-mode .feature-card h3{

    color:#fff;

}

body.dark-mode .feature-card p{

    color:#d1d5db;

}

body.dark-mode .feature-arrow{

    color:#8b5cf6;

}


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

@media(max-width:768px){

.feature-card{

margin-bottom:25px;

}

}

/* ---------- CTA ---------- */

.cta-section{

    padding:100px 0;

    text-align:center;

}

.cta-box{

    background:linear-gradient(
        135deg,
        #2563EB,
        #7C4DFF
    );

    color:white;

    border-radius:28px;

    padding:70px 40px;

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

}

.cta-box h2{

    font-size:2.8rem;

    font-weight:700;

    margin-bottom:20px;

}

.cta-box p{

    font-size:1.15rem;

    margin-bottom:30px;

}

.cta-box .btn{

    border-radius:14px;

    padding:15px 35px;

    font-weight:600;

}
.feature-card,
.stats-card{

    cursor:pointer;

    transition:.35s;

}



/* ---------- RESPONSIVE ---------- */

@media(max-width:992px){

.hero-content{

text-align:center;

}

.hero-content h1{

font-size:3rem;

}

.hero-image{

margin-top:50px;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:2.3rem;

}

.hero-content p{

font-size:1rem;

}

.stats-card{

margin-bottom:25px;

}

.feature-card{

margin-bottom:25px;

}

.cta-box{

padding:50px 25px;

}

.cta-box h2{

font-size:2rem;

}

}