/* ==========================================
   TYPINGMASTER
   STYLE.CSS - PART 1
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0f172a;
    color:white;
    overflow-x:hidden;
}

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

nav{
    width:100%;
    height:80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 80px;
    background:#111827;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.logo{
    font-size:30px;
    font-weight:700;
    color:#38bdf8;
}

.nav-links{
    display:flex;
    list-style:none;
}

.nav-links li{
    margin:0 18px;
}

.nav-links a{
    color:white;
    text-decoration:none;
    font-size:17px;
    transition:.3s;
}

.nav-links a:hover{
    color:#38bdf8;
}

.login-btn{

    padding:12px 30px;

    border:none;

    border-radius:8px;

    background:#2563eb;

    color:white;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}

.login-btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

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

.hero{

    width:100%;

    min-height:85vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.hero h1{

    font-size:70px;

    margin-bottom:25px;

    font-weight:700;

}

.hero p{

    width:800px;

    max-width:90%;

    color:#cbd5e1;

    font-size:22px;

    line-height:40px;

}

.start-btn{

    display:inline-block;

    margin-top:45px;

    padding:18px 45px;

    border-radius:10px;

    background:#3b82f6;

    color:white;

    font-size:20px;

    text-decoration:none;

    cursor:pointer;

    transition:.3s;

}

.start-btn:hover{

    background:#2563eb;

    transform:translateY(-4px);

}

/* ==========================
        STATS
========================== */

.stats{

    display:flex;

    justify-content:center;

    gap:35px;

    margin-bottom:90px;

    flex-wrap:wrap;

}

.card{

    width:250px;

    background:#1e293b;

    border-radius:15px;

    text-align:center;

    padding:35px;

    transition:.3s;

    box-shadow:0 5px 20px rgba(0,0,0,.25);

}

.card:hover{

    transform:translateY(-10px);

    background:#2563eb;

}

.card h2{

    font-size:45px;

    margin-bottom:10px;

}

.card p{

    font-size:18px;

    color:#e2e8f0;

}

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

.typing-section{

    width:100%;

    padding:80px 20px;

}

.typing-section h2{

    text-align:center;

    font-size:42px;

    margin-bottom:40px;

}


/* Timer Options */

.timer-options{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.time-btn{

    padding:12px 24px;

    background:#334155;

    border:none;

    border-radius:8px;

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}

.time-btn:hover{

    background:#2563eb;

}

.active-time{

    background:#3b82f6;

}



.typing-box{

    width:950px;

    max-width:95%;

    margin:auto;

    background:linear-gradient(145deg,#1e293b,#26364d);

    border-radius:20px;

    padding:40px;

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

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

}

.paragraph{

    background:#0f172a;

    border-radius:12px;

    padding:25px;

    font-size:24px;

    line-height:45px;

    color:#d1d5db;

    min-height:170px;

    margin-bottom:25px;

}

textarea{

    width:100%;

    height:180px;

    border:none;

    outline:none;

    resize:none;

    border-radius:12px;

    padding:20px;

    font-size:22px;

    font-family:'Poppins',sans-serif;

    margin-bottom:30px;

}

/* ==========================
      RESULT BOXES
========================== */

.result-box{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}
.box{

    background:#334155;

    padding:20px;

    border-radius:12px;

    text-align:center;

    transition:.3s;

}

.box:hover{

    background:#2563eb;

    transform:translateY(-5px);

}

.box h3{

    font-size:18px;

    color:#cbd5e1;

    margin-bottom:12px;

}

.box span{

    font-size:34px;

    font-weight:700;

    color:#38bdf8;

}

/* ==========================
      RESTART BUTTON
========================== */

.restart-btn{

    width:100%;

    padding:18px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.3s;

}

.restart-btn:hover{

    background:#1d4ed8;

    transform:translateY(-3px);

}

/* ==========================
      PRICING
========================== */

.pricing{

    padding:100px 20px;

}

.pricing h2{

    text-align:center;

    font-size:45px;

    margin-bottom:60px;

}

.pricing-container{

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

}

.plan{

    width:330px;

    background:#1e293b;

    border-radius:18px;

    padding:35px;

    text-align:center;

    transition:.35s;

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

}

.plan:hover{

    transform:translateY(-10px);

}

.plan h3{

    color:#38bdf8;

    margin-bottom:15px;

    letter-spacing:1px;

}

.plan h1{

    margin-bottom:25px;

    font-size:38px;

}

.plan ul{

    list-style:none;

    text-align:left;

    margin-bottom:30px;

}

.plan ul li{

    padding:12px 0;

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

}

.plan button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.plan button:hover{

    background:#1d4ed8;

}

.free{

    border:2px solid #334155;

}

.premium{

    border:2px solid gold;

    transform:scale(1.04);

}

.pro{

    border:2px solid #38bdf8;

}

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

footer{

    background:#111827;

    padding:50px 20px;

    text-align:center;

    margin-top:80px;

}

footer h3{

    font-size:32px;

    margin-bottom:15px;

    color:#38bdf8;

}

footer p{

    color:#cbd5e1;

    margin:8px 0;

}

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

button{

    transition:all .3s ease;

}

button:hover{

    box-shadow:0 10px 25px rgba(59,130,246,.35);

}

.card,
.plan,
.box,
.typing-box{

    transition:all .3s ease;

}

/* ==========================================
   STYLE.CSS - PART 3
========================================== */

/* Correct & Wrong Characters */

.correct{
    color:#22c55e;
    background:rgba(34,197,94,.15);
    border-radius:4px;
}

.wrong{
    color:#ef4444;
    background:rgba(239,68,68,.15);
    border-radius:4px;
    text-decoration:underline;
}

.active{

    color:white;

    border-left:3px solid #38bdf8;

    animation:blink .8s infinite;

}

@keyframes blink{

    50%{

        border-color:transparent;

    }

}

/* Scrollbar */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111827;
}

::-webkit-scrollbar-thumb{
    background:#2563eb;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#3b82f6;
}

/* Selection */

::selection{
    background:#2563eb;
    color:white;
}

/* Input Focus */

textarea:focus{
    box-shadow:0 0 20px rgba(37,99,235,.35);
}

/* Fade Animation */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero,
.stats,
.typing-section,
.pricing{

    animation:fadeIn .8s ease;

}

/* Mobile */

@media(max-width:1000px){

nav{

    padding:20px;

    flex-direction:column;

    height:auto;

}

.logo{

    margin-bottom:15px;

}

.nav-links{

    flex-wrap:wrap;

    justify-content:center;

    margin-bottom:15px;

}

.hero h1{

    font-size:46px;

}

.hero p{

    width:95%;

    font-size:18px;

    line-height:32px;

}

.result-box{

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

}

.pricing-container{

    flex-direction:column;

    align-items:center;

}

.plan{

    width:95%;

}

}

/* Small Phones */

@media(max-width:650px){

.hero h1{

    font-size:36px;

}

.typing-box{

    padding:20px;

}

.paragraph{

    font-size:18px;

    line-height:34px;

}

textarea{

    font-size:18px;

    height:150px;

}

.result-box{

    grid-template-columns:1fr;

}

.card{

    width:90%;

}

.start-btn,
.restart-btn,
.plan button{

    width:100%;

}

.nav-links{

    display:none;

}

}

/* Glow */

.typing-box:hover{

    box-shadow:0 0 40px rgba(37,99,235,.25);

}

.plan:hover{

    box-shadow:0 0 35px rgba(56,189,248,.30);

}

.card:hover{

    box-shadow:0 0 30px rgba(59,130,246,.35);

}

/* Footer spacing */

body{

    padding-bottom:0;

}


/* ==========================
      RESULT MODAL
========================== */

.modal{

    position:fixed;

    top:0;

    left:0;

    width:100vw;

    height:100vh;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal-content{

    width:420px;

    max-width:90%;

    background:#1e293b;

    border-radius:20px;

    padding:40px;

    text-align:center;

    position:relative;

    animation:fadeIn .4s;

} 

.modal-content h2{

    margin-bottom:30px;

}

.score p{

    margin:18px 0;

    font-size:22px;

}

#playAgain{

    margin-top:35px;

    width:100%;

    padding:18px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-size:20px;

    cursor:pointer;

}

/* ==========================
      PROGRESS BAR
========================== */

.progress-container{

    width:100%;

    height:12px;

    background:#334155;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:25px;

}

.progress-bar{

    width:0%;

    height:100%;

    background:linear-gradient(90deg,#38bdf8,#22c55e);

    transition:.2s;

}

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

.difficulty-options{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:30px;

    flex-wrap:wrap;

}

.difficulty-btn{

    padding:12px 24px;

    background:#334155;

    color:white;

    border:none;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

}

.difficulty-btn:hover{

    background:#2563eb;

}

.active-difficulty{

    background:#22c55e;

}

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

.features{

    padding:100px 20px;

}

.features h2{

    text-align:center;

    font-size:46px;

    margin-bottom:60px;

}

.features-container{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.feature-card{

    background:#1e293b;

    padding:40px;

    border-radius:20px;

    text-align:center;

    transition:.3s;

    cursor:pointer;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 35px rgba(37,99,235,.3);

}

.feature-icon{

    font-size:60px;

    margin-bottom:20px;

}

.feature-card h3{

    margin-bottom:15px;

    font-size:28px;

}

.feature-card p{

    color:#cbd5e1;

    line-height:30px;

}

@media(max-width:900px){

.features-container{

    grid-template-columns:1fr;

}

}

.close-btn{

    width:100%;

    margin-top:12px;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#3b465a;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.close-btn:hover{

    background:#556178;

}



@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ================= Paragraph Animation ================= */

.paragraph{

    transition: opacity .3s ease;

}

.paragraph.fade{

    opacity:0;

}

/* ================= LEADERBOARD ================= */

.leaderboard{

    max-width:1100px;

    margin:80px auto;

    padding:20px;

}

.leaderboard h2{

    text-align:center;

    margin-bottom:40px;

    font-size:42px;

}

table{

    width:100%;

    border-collapse:collapse;

    background:#1e293b;

    border-radius:15px;

    overflow:hidden;

}

th{

    background:#2563eb;

    padding:18px;

    color:white;

}

td{

    padding:18px;

    text-align:center;

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

}

tr:hover{

    background:#334155;

}

/* ==========================
      TOP 3 WINNERS
========================== */

.top-three{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:30px;

    margin:50px 0;

    flex-wrap:wrap;

}

.winner{

    width:220px;

    background:#1e293b;

    border-radius:20px;

    padding:30px;

    text-align:center;

    transition:.3s;

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

    height:220px;

display:flex;

flex-direction:column;

justify-content:center;

}

.winner:hover{

    transform:translateY(-10px);

    box-shadow:0 0 30px rgba(59,130,246,.45);

} 

.first{

    border:3px solid gold;

    transform:scale(1.08);

    height:260px;

}

.second{

    border:3px solid silver;

    height:220px;

} 

.third{

    border:3px solid #cd7f32;

    height:200px;

} 

.winner h2{

    font-size:55px;

    margin-bottom:10px;

}

.winner h3{

    font-size:24px;

    margin-bottom:10px;

}

.winner p{

    color:#cbd5e1;

    font-size:18px;

}

/* ================= LOGIN PAGE ================= */

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:120px 20px 60px;

} 

.login-card{

    width:420px;

    background:#1f293d;

    padding:40px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.login-card h2{

    font-size:38px;

    margin-bottom:10px;

}

.login-card p{

    color:#c8d0dc;

    margin-bottom:30px;

}

.login-card form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.login-card input{

    padding:16px;

    border:none;

    border-radius:10px;

    background:#101827;

    color:white;

    font-size:16px;

}

.login-card input:focus{

    outline:2px solid #3b82f6;

}

.login-card button{

    padding:16px;

    border:none;

    border-radius:10px;

    background:#3b82f6;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.login-card button:hover{

    background:#2563eb;

}

.login-card a{

    color:#60a5fa;

    text-decoration:none;

}

.signup-text{

    margin-top:25px;

} 

/* ==========================
      REMEMBER ME
========================== */

.remember-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:20px 0;

    font-size:15px;

}

.remember-row label{

    display:flex;

    align-items:center;

    gap:8px;

    color:#cbd5e1;

    cursor:pointer;

}

.remember-row input{

    width:16px;

    height:16px;

    cursor:pointer;

}

.remember-row a{

    color:#60a5fa;

    text-decoration:none;

    transition:.3s;

}

.remember-row a:hover{

    color:#93c5fd;

} 

/* ==========================
      PASSWORD BOX
========================== */

.password-box{

    position:relative;

    width:100%;

}

.password-box input{

    width:100%;

    padding:16px;

    padding-right:50px;

}

#togglePassword,
#toggleConfirmPassword{ 

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    font-size:20px;

    user-select:none;

    color:#94a3b8;

    transition:.3s;

}

#togglePassword:hover,
#toggleConfirmPassword:hover{ 

    color:white;

} 

/* ==========================
      LOGIN MESSAGE
========================== */

#loginMessage{

    margin:20px 0;

    min-height:22px;

    text-align:center;

    font-weight:500;

    color:#ef4444;

} 

/* ===========================
   PROFILE PAGE
=========================== */

.profile{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:70px 20px;
}

.profile-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:20px;
}

.profile-card{

    width:720px;

    max-width:95%; 

    background:#1d2638;

    border-radius:20px;

    padding:40px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    border:2px solid #2f65f6;

}

.profile-avatar{

    width:120px;
    height:120px;

    border-radius:50%;

    background:#2f65f6;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:60px;

    margin:0 auto 25px;

}

.profile-card h2{

    margin-bottom:25px;

    color:white;

}

.profile-info{

    display:flex;

    justify-content:space-between;

    padding:15px 0;

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

    color:white;

}

.profile-info span:last-child{

    color:#46b2ff;

    font-weight:600;

} 

.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:30px;
} 

.stat-card{
    background:#162032;
    border-radius:15px;
    padding:20px;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
    transition:.3s;
    animation:fadeUp .6s ease; 
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

} 

.stat-card:hover{
    transform:translateY(-5px);
    border-color:#2f65f6;
} 

/* ===========================
   BADGES
=========================== */

.badges{

    margin-top:40px;

    text-align:left;

}

.badges h3{

    color:white;

    margin-bottom:20px;

}

.badge-list{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.badge{

    width:130px;

    background:#162032;

    border-radius:15px;

    padding:20px;

    text-align:center;

    transition:.3s;

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

    cursor:pointer;

}

.badge:hover{

    transform:translateY(-5px);

    border-color:#2f65f6;

}

.badge{

    font-size:40px;

}

.badge p{

    margin-top:10px;

    color:white;

    font-size:15px;

} 

.no-history{
    text-align:center;
    padding:40px;
    font-size:22px;
    color:#bfc7d5;
    line-height:1.8;
} 

.difficulty{
    padding:6px 12px;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
    display:inline-block;
    transition:.3s; 
}

.difficulty:hover{

    transform:scale(1.1);

} 

.easy{
    background:#2ecc71;
    color:white;
    font-weight:600;
}

.medium{
    background:#f39c12;
    color:white;
    font-weight:600;
}

.hard{
    background:#e74c3c;
    color:white;
    font-weight:600;
} 

.history-stats{

    display:grid;

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

    gap:20px;

    margin:30px 0;

}

.stat-card{

    background:#1e293b;

    border-radius:15px;

    padding:20px;

    text-align:center;

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-5px);

    background:#2563eb;

} 

.stat-card:hover h3{

    color:white;

}

.stat-card:hover p{

    color:white;

} 

.stat-card h3{

    color:#3b82f6;

    font-size:34px;

    margin-bottom:10px;

}

.stat-card p{

    color:#cbd5e1;

} 

tbody tr{

    transition:.3s;

}

tbody tr:hover{

    background:#1e40af;

} 

.progress-chart{

    margin-top:50px;

    padding:30px;

    background:#1e293b;

    border-radius:20px;

}

.progress-chart h2{

    color:white;

    margin-bottom:25px;

}

#wpmChart{

    width:100%;

    max-height:400px;

} 

.dashboard{
    width:90%;
    max-width:1200px;
    margin:80px auto;
}

.dashboard h2{
    text-align:center;
    color:white;
    margin-bottom:40px;
    font-size:36px;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.dashboard .card{
    background:#1d2738;
    border-radius:16px;
    padding:35px;
    text-align:center;
    transition:.3s;
}

.dashboard .card:hover{
    transform:translateY(-6px);
}

.dashboard .card h3{
    font-size:42px;
    color:#3b82f6;
    margin-bottom:15px;
}

.dashboard .card p{
    color:#d6d6d6;
    font-size:18px;
} 

.recent-activity{

    max-width:1100px;

    margin:60px auto;

}

.recent-activity h2{

    color:white;

    margin-bottom:25px;

}

.activity-item{

    background:#222b3d;

    padding:18px;

    margin-bottom:15px;

    border-radius:12px;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    transition:.3s;
    cursor:pointer; 

}

.activity-item:hover{

    transform:translateY(-3px);

    background:#2d3952;

}  

.guest-message{
    margin-top:15px;
    padding:12px;
    background:#fff3cd;
    color:#856404;
    border-radius:8px;
    text-align:center;
    font-weight:600;
} 

/* =========================
   Loading Spinner
========================= */

.loader-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader{
    width: 60px;
    height: 60px;
    border: 6px solid #e5e5e5;
    border-top: 6px solid #4CAF50;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin{

    100%{

        transform: rotate(360deg);

    }

} 

/* Hero */

.about-hero{

    min-height:75vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px 20px 80px;

}

.about-hero h1{

    font-size:68px;

    max-width:900px;
    line-height:1.15;

    margin-bottom:25px;

    font-weight:700;

}

.about-hero p{

    width:850px;

    max-width:95%;

    color:#cbd5e1;

    font-size:22px;

    line-height:40px;

    margin-bottom:45px;

}

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







.hero-btn{

    display:inline-block;

    padding:18px 45px;

    background:#2563eb;

    color:white;

    text-decoration:none;

    border-radius:10px;

    font-size:20px;

    transition:.3s;

}

.hero-btn:hover{

    background:#1d4ed8;

    transform:translateY(-5px);

}

/* ==========================
      Mission
========================== */

.about-section{

    max-width:1100px;

    margin:100px auto;

    padding:0 20px;

    text-align:center;

}

.about-section h2{

    font-size:46px;

    margin-bottom:30px;

}

.about-section p{

    color:#cbd5e1;

    font-size:20px;

    line-height:38px;

}

/* ==========================
      Technologies
========================== */

.tech-grid{

    max-width:1000px;

    margin:60px auto;

    display:grid;

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

    gap:25px;

}

.tech-card{

    background:#1e293b;

    padding:30px;

    border-radius:18px;

    text-align:center;

    transition:.3s;

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

}

.tech-card:hover{

    transform:translateY(-8px);

    background:#2563eb;

}

.tech-card h3{

    font-size:24px;

    margin-bottom:12px;

}

.tech-card p{

    color:#cbd5e1;

}

/* ==========================
      Developer
========================== */

.developer{

    max-width:1000px;

    margin:100px auto;

    padding:50px;

    background:#1e293b;

    border-radius:20px;

    text-align:center;

}

.developer-avatar{

    width:120px;

    height:120px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#2563eb;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:60px;

}

.developer h2{

    margin-bottom:20px;

}

.developer p{

    color:#cbd5e1;

    font-size:20px;

    line-height:36px;

}

/* ==========================
      CTA
========================== */

.cta-section{

    padding:100px 20px;

    text-align:center;

}

.cta-section h2{

    font-size:52px;

    margin-bottom:25px;

}

.cta-section p{

    color:#cbd5e1;

    font-size:22px;

    margin-bottom:40px;

}

/* ==========================
      Mobile
========================== */

@media(max-width:900px){

.about-hero h1{

    font-size:48px;

}

.about-hero p{

    font-size:18px;

    line-height:32px;

}

.about-section h2{

    font-size:36px;

}

.cta-section h2{

    font-size:38px;

}

.developer{

    padding:30px;

}

}

.nav-active{

    color:#38bdf8 !important;

    font-weight:600;

} 

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

.about-hero{

    min-height:85vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px 20px;

    animation:fadeIn .8s ease;

}

.about-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:30px;

    background:#1e293b;

    color:#38bdf8;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:30px;

    border:1px solid rgba(56,189,248,.3);

}

.about-hero h1{

    font-size:72px;

    line-height:1.2;

    margin-bottom:30px;

}

.about-hero p{

    width:820px;

    max-width:95%;

    font-size:22px;

    line-height:40px;

    color:#cbd5e1;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    justify-content:center;

}

.learn-btn{

    display:inline-block;

    padding:18px 45px;

    background:#1e293b;

    border:2px solid #3b82f6;

    color:white;

    text-decoration:none;

    border-radius:10px;

    font-size:21px;

    font-weight:600;

    transition:.3s;

}

.learn-btn:hover{

    background:#2563eb;

    transform:translateY(-4px);

}

@media(max-width:900px){

.about-hero h1{

    font-size:48px;

}

.about-hero p{

    font-size:18px;

    line-height:32px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.learn-btn,
.start-btn{

    width:260px;

    text-align:center;

}

}