*{
    font-family: 'Outfit', sans-serif;
}   
body{
 font-family:'Outfit',sans-serif;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background:#f5f5f3;
    color:#111;
}    

.hero-title,
.why-title,
.steps-title,
.benefits-title,
.scholars-title,
.cta-title,
.footer-title{
    font-family:'Outfit',sans-serif;
    font-weight:900;
    letter-spacing:-3px;
}

.hero-desc,
.why-desc,
.benefits-intro,
.scholar-content p,
.footer-desc{
    font-weight:400;
}
        .navbar {
            height: 70px;
            background: #fff;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 24px;
            color: #111;
        }

        .navbar-nav .nav-link {
            color: #333;
            font-size: 14px;
            font-weight: 500;
            margin: 0 12px;
        }

        .navbar-nav .nav-link:hover {
            color: #dc3545;
        }

        .start-btn {
            background: #e53935;
            color: #fff;
            border: none;
            padding: 10px 24px;
            font-size: 13px;
            font-weight: 600;
            border-radius: 2px;
            text-transform: uppercase;
        }

        .start-btn:hover {
            background: #c62828;
            color: #fff;
        }

        .logo-box {
            width: 28px;
            height: 28px;
            background: #111;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            margin-right: 10px;
        }
        .hero-section{
    background:#f3f3f1;
    padding:100px 0;
}

.hero-tag{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    letter-spacing:4px;
    font-weight:600;
    color:#777;
    margin-bottom:30px;
}

.hero-tag span{
    width:40px;
    height:1px;
    background:#999;
}

.hero-title{
    font-size:90px;
    line-height:0.95;
    font-weight:900;
    color:#000;
    margin-bottom:30px;
}

.hero-title span{
    color:#ef3d4d;
}

.hero-desc{
    max-width:520px;
    font-size:18px;
    line-height:1.7;
    color:#666;
    margin-bottom:40px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    margin-bottom:60px;
}

.btn-start{
    background:#ef3d4d;
    color:#fff;
    padding:15px 35px;
    font-weight:700;
    border-radius:0;
}

.btn-start:hover{
    background:#db2b3b;
    color:#fff;
}

.btn-how{
    padding:15px 35px;
    border-radius:0;
    font-weight:700;
}

.hero-stats{
    display:flex;
    gap:60px;
}

.stat-item{
    border-left:1px solid #d5d5d5;
    padding-left:18px;
}

.stat-item h3{
    font-size:48px;
    font-weight:800;
    margin-bottom:5px;
}

.stat-item span{
    font-size:12px;
    letter-spacing:2px;
    color:#777;
}

.brain-wrapper{
    position:relative;
    border:2px solid #222;
    padding:25px;
}

.brain-image{
    background:#ececec;
    min-height:700px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.brain-image img{
    max-width:100%;
    object-fit: cover;
    aspect-ratio: 4 / 5;
}

.completion-card{
    position:absolute;
    bottom:35px;
    left:35px;
    right:35px;
    background:#fff;
    border:2px solid #000;
    padding:15px;
    box-shadow:8px 8px 0 #000;
}

.completion-card small{
    display:block;
    letter-spacing:2px;
    color:#777;
    margin-bottom:5px;
}

.completion-card h4{
    font-size:42px;
    font-weight:800;
    margin:0;
}
/* Ticker Sectioon */
.ticker-section{
    background:#000;
    overflow:hidden;
    padding:20px 0;
    white-space:nowrap;
}

.ticker-track{
    display:inline-flex;
    align-items:center;
    gap:50px;
    min-width:max-content;
    animation: marquee 20s linear infinite;
}

.ticker-track span{
    color:#fff;
    font-size:32px;
    font-weight:800;
    text-transform:uppercase;
}

.ticker-track span:nth-child(even){
    color:#ef3d4d;
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

.why-play-section{
    padding:120px 0;
    background:#f5f5f3;
}

.section-label{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:4px;
    color:#777;
    margin-bottom:30px;
}

.why-title{
    font-size:72px;
    line-height:0.95;
    font-weight:900;
    color:#111;
    margin-bottom:30px;
}

.why-title span{
    color:#ef3d4d;
    display:block;
}

.why-desc{
    font-size:20px;
    line-height:1.8;
    color:#444;
    max-width:400px;
}

.features-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid #e1e1e1;
    border-left:1px solid #e1e1e1;
}

.feature-card{
    padding:35px 28px;
    border-right:1px solid #e1e1e1;
    border-bottom:1px solid #e1e1e1;
    background:#fff;
}

.feature-icon{
    font-size:30px;
    margin-bottom:25px;
}

.feature-card h3{
    font-size:28px;
    font-weight:800;
    margin-bottom:20px;
    color:#111;
}

.feature-card p{
    font-size:16px;
    line-height:1.8;
    color:#555;
}
/*Step section */
.steps-section{
    padding:120px 0;
        background-color: #fff;
  
}

.steps-title{
    font-size:80px;
    font-weight:900;
    line-height:1;
    margin-bottom:70px;
}

.steps-title span{
    color:#ef3d4d;
}

.steps-row{
    border:2px solid #222;
}

.step-card{
    padding:45px 40px;
    min-height:260px;
    border-right:2px solid #222;
}

.steps-row .col-lg-3:last-child .step-card{
    border-right:none;
}

.step-number{
    font-size:64px;
    line-height:1;
    font-weight:900;
    color:#ef3d4d;
    margin-bottom:30px;
}

.step-card h3{
    font-size:24px;
    font-weight:800;
    margin-bottom:20px;
    color:#111;
}

.step-card p{
    font-size:18px;
    line-height:1.8;
    color:#444;
}
/* benefits-section */
.benefits-section{
    padding:120px 0;
    background:#f5f5f3;
}

.benefits-title{
    font-size:80px;
    line-height:0.95;
    font-weight:900;
    max-width:700px;
}

.benefits-title span{
    color:#ef3d4d;
}

.benefits-intro{
    font-size:20px;
    line-height:1.8;
    color:#444;
}

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

}

.benefit-card{
    padding:25px 35px;
    border-right:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}
.benefit-card:nth-child(3),
.benefit-card:nth-child(6){
    border-right:none;
}
.benefit-card{
    transition:all .3s ease;
}

.benefit-card:hover{
    background:#fff;
}
.benefit-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.benefit-top i{
    font-size:28px;
    color:#111;
}

.benefit-top span{
    font-size:14px;
    font-weight:700;
    color:#b3a69a;
}

.benefit-card h3{
    font-size:28px;
    font-weight:800;
    margin-bottom:20px;
    color:#111;
}

.benefit-card p{
    font-size:16px;
    line-height:1.6;
    color:#555;
}
/*Scholars-section */
.scholars-section{
    background:#000;
    padding:120px 0;
}

.scholars-title{
    font-size:80px;
    line-height:.95;
    font-weight:900;
    color:#fff;
}

.scholars-title span{
    color:#ef3d4d;
}

.scholars-intro{
    color:#bdbdbd;
    font-size:20px;
    line-height:1.8;
}

.scholar-card{
    background:#111;
    overflow:hidden;
    transition:.4s;
}
.scholar-card:hover{
    transform:translateY(-8px);
}

.scholar-card:hover .scholar-content{
    background:#161616;
}
.scholar-card:hover img{
    filter:grayscale(0%);
    transform:scale(1.05);
}

.row.g-4 > div{
    margin-bottom:20px;
}
.scholar-image{
    overflow:hidden;
}

.scholar-image img{
    width:100%;
    display:block;
    filter:grayscale(100%);
    transition:.5s;
}
.scholar-image{
    height:520px;
    overflow:hidden;
}

.scholar-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(100%);
    transition:.5s;
}

.scholar-content{
    padding:25px;
}

.scholar-meta{
    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
}

.scholar-meta span{
    color:#ef3d4d;
    font-size:12px;
    letter-spacing:2px;
    font-weight:700;
}

.scholar-meta small{
    color:#8b8b8b;
}

.scholar-content h3{
    color:#fff;
    font-size:28px;
    font-weight:800;
    margin-bottom:15px;
}

.scholar-content p{
    color:#bdbdbd;
    line-height:1.8;
}

.scholar-content blockquote{
    color:#fff;
    font-style:italic;
    border-left:3px solid #ef3d4d;
    padding-left:15px;
    margin-top:20px;
}
/*cta-section*/
.cta-section{
    background:#f5f5f3;
    padding:120px 0;
}

.cta-box{
    max-width:1050px;
    background:#f5f5f3;
    border:2px solid #111;
    padding:70px 65px;
    position:relative;

    box-shadow:10px 10px 0 #111;
}

.cta-tag{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:4px;
    color:#6f6f6f;
    margin-bottom:25px;
}

.cta-title{
    font-size:78px;
    line-height:0.95;
    font-weight:900;
    color:#111;
    max-width:700px;
    margin-bottom:35px;
}

.cta-title span{
    color:#ef3d4d;
}

.cta-desc{
    font-size:20px;
    line-height:1.8;
    color:#444;
    max-width:600px;
    margin-bottom:40px;
}

.cta-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#ef3d4d;
    color:#fff;
    padding:18px 34px;
    font-weight:800;
    letter-spacing:2px;
    text-decoration:none;
    transition:.3s;
}

.cta-btn:hover{
    background:#d92d3d;
    color:#fff;
}

.cta-btn span{
    font-size:22px;
}

/*quiz section */
.quiz-container{
    max-width:900px;
    margin:80px auto;
    padding:40px;
    border:2px solid #111;
    background:#fff;
}

.quiz-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

#question-count{
    font-weight:700;
}

.progress{
    height:8px;
    background:#eee;
    margin-bottom:30px;
}

#progress-bar{
    height:100%;
    width:10%;
    background:#ef3d4d;
    transition:.3s;
}

#question{
    margin-bottom:30px;
    font-size:32px;
    font-weight:700;
}

.answer-btn{
    width:100%;
    text-align:left;
    padding:18px;
    margin-bottom:12px;
    border:2px solid #ddd;
    background:#fff;
    cursor:pointer;
    transition:.3s;
}

.answer-btn:hover{
    border-color:#ef3d4d;
}

.answer-btn.active{
    border-color:#ef3d4d;
    background:#fff3f4;
}

#nextBtn{
    background:#ef3d4d;
    color:#fff;
    border:none;
    padding:12px 24px;
    font-weight:700;
}

#nextBtn:disabled{
    opacity:.5;
}

.review-card{
    padding:20px;
    margin-bottom:15px;
    border-radius:8px;
}

.review-card.correct{
    background:#f1fff5;
    border-left:5px solid #28a745;
}

.review-card.wrong{
    background:#fff2f2;
    border-left:5px solid #dc3545;
}

.restart-btn{
    background:#111;
    color:#fff;
    border:none;
    padding:14px 30px;
    margin-top:20px;
}
.quiz-footer{
    margin-top:30px;
    text-align:right;
}

#nextBtnTop,
#nextBtnBottom{
    background:#ef3d4d;
    color:#fff;
    border:none;
    padding:12px 24px;
    font-weight:700;
}

#nextBtnTop:disabled,
#nextBtnBottom:disabled{
    opacity:.5;
    cursor:not-allowed;
}

/* Footer */
.footer-section{
    background:#000;
    padding:100px 0 40px;
}

.footer-label{
    display:block;
    color:#7f7f7f;
    font-size:13px;
    font-weight:700;
    letter-spacing:4px;
    margin-bottom:25px;
}

.footer-title{
    font-size:80px;
    line-height:.92;
    font-weight:900;
    color:#fff;
    margin:0;
}

.footer-title span{
    color:#ef3d4d;
}

.footer-desc{
    color:#c9c9c9;
    font-size:22px;
    line-height:1.8;
    max-width:500px;
    margin-bottom:120px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.footer-logo span{
    color:#fff;
    font-size:42px;
    font-weight:900;
}

.logo-box{
    width:42px;
    height:42px;
    background:#fff;
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.footer-bottom{
    margin-top:60px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.1);

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.footer-bottom p{
    margin:0;
    color:#7f7f7f;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
}
/*Responsive css */
@media(max-width:991px){

    .why-title{
        font-size:50px;
    }

    .features-grid{
        grid-template-columns:1fr;
        margin-top:50px;
    }

        .steps-title{
        font-size:50px;
    }

    .step-card{
        border-right:none;
        border-bottom:2px solid #222;
    }

    .steps-row .col-md-6:last-child .step-card{
        border-bottom:none;
    }

        .benefits-title{
        font-size:50px;
        margin-bottom:30px;
    }

    .benefits-grid{
        grid-template-columns:1fr;
    }


    .footer-title{
        font-size:55px;
    }

    .footer-desc{
        font-size:18px;
        margin-bottom:50px;
    }

    .footer-logo span{
        font-size:28px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }
}