/* ==========================================
   GOOGLE FONT
========================================== */

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

/* ==========================================
   RESET
========================================== */

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

html{
    overflow-x:hidden;
}

body{

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

    background:#030712;

    color:#fff;

    overflow-x:hidden;

    line-height:1.7;

}

/* ==========================================
   VARIABLES
========================================== */

:root{

    --primary:#2563eb;

    --secondary:#3b82f6;

    --dark:#030712;

    --card:#0b1120;

    --card2:#111827;

    --text:#ffffff;

    --gray:#9ca3af;

    --glow:#4fc3f7;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050816;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}

/* ==========================================
   GLOBAL
========================================== */

.container{

    width:90%;

    max-width:1250px;

    margin:auto;

}

section{

    padding:20px 0;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:white;

}

ul{

    list-style:none;

}

/* ==========================================
   LOADER
========================================== */

#loader{

    position:fixed;

    inset:0;

    background:#030712;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-circle{

    width:70px;

    height:70px;

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

    border-top:6px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================
   HEADER
========================================== */

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(3,7,18,.82);

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

}

header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

.logo{

    font-size:30px;

    font-weight:800;

}

.logo span{

    color:var(--primary);

}

nav ul{

    display:flex;

    gap:35px;

}

nav a{

    color:#ddd;

    transition:.3s;

    font-weight:500;

}

nav a:hover,

nav a.active{

    color:var(--secondary);

}

.menu-btn{

    display:none;

    font-size:26px;

    cursor:pointer;

}

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

.hero{

    display:flex;

    align-items:center;

    padding:80px 0 10px;

}

.hero + section{

    padding-top:0;

}

.home-hero{

    min-height:100vh;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:50px;

    background:rgba(37,99,235,.15);

    color:var(--secondary);

    margin-bottom:20px;

}

.hero h1{

    font-size:62px;

    line-height:1.1;

    margin-bottom:20px;

}

.hero h2{

    color:var(--secondary);

    min-height:45px;

    margin-bottom:20px;

}

.hero p{

    color:var(--gray);

    max-width:600px;

}

.hero-buttons{

    margin-top:35px;

    display:flex;

    gap:20px;

}

.hero-image{

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:400px;

    height:400px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid rgba(59,130,246,.4);

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

}

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

.btn{

    display:inline-block;

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

    color:white;

    padding:15px 34px;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

}

.btn:hover{

    transform:translateY(-4px);

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

}

.btn-outline{

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

    color:white;

    padding:15px 34px;

    border-radius:50px;

    transition:.35s;

}

.btn-outline:hover{

    background:var(--primary);

}

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

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:42px;

}

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

.stats .container{

    display:grid;

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

    gap:30px;

}

.stat-card{

    background:var(--card);

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

    border-radius:20px;

    text-align:center;

    padding:40px;

    transition:.4s;

}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:var(--secondary);

}

.stat-card h3{

    font-size:45px;

    color:var(--secondary);

}

.stat-card p{

    color:var(--gray);

}

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

.about-preview{

    text-align:center;

}

.about-preview p{

    max-width:850px;

    margin:auto;

    color:var(--gray);

    font-size:18px;

}

/* ==========================================
   CARDS
========================================== */

.cards{

    display:grid;

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

    gap:30px;

}

.card{

    background:var(--card);

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

    border-radius:22px;

    padding:40px;

    transition:.35s;

}

.card:hover{

    transform:translateY(-12px);

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

    border-color:var(--secondary);

}

.card i{

    font-size:45px;

    color:var(--secondary);

    margin-bottom:25px;

}

.card h3{

    margin-bottom:15px;

}

.card p{

    color:var(--gray);

}

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

.cta{

    text-align:center;

}

.cta h2{

    font-size:48px;

    margin-bottom:35px;

}

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

footer{

    background:#02050d;

    padding-top:70px;

}

.footer-grid{

    display:grid;

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

    gap:40px;

}

footer h3,

footer h4{

    margin-bottom:18px;

}

footer p{

    color:var(--gray);

    margin-bottom:12px;

}

footer ul li{

    margin-bottom:12px;

}

footer a{

    color:var(--gray);

    transition:.3s;

}

footer a:hover{

    color:white;

}

.copyright{

    text-align:center;

    margin-top:50px;

    padding:25px;

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

    color:var(--gray);

}

/* ==========================================
   BACK TO TOP
========================================== */

#topBtn{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    cursor:pointer;

    display:none;

    z-index:999;

    transition:.3s;

}

#topBtn:hover{

    transform:translateY(-5px);

}

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

#progressBar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

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

    z-index:9999;

}

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

@media(max-width:991px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-image{

order:-1;

}

.hero h1{

font-size:48px;

}

.stats .container{

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

}

/* Mobile Navigation */

nav{
    display:none;
    position:absolute;
    top:75px;
    left:0;
    width:100%;
    background:#0f172a;
    padding:20px 0;
    z-index:9999;
}

nav.show{
    display:block;
}

nav ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

.menu-btn{
    display:block;
    font-size:28px;
    cursor:pointer;
}

}

@media(max-width:768px){

.hero h1{

font-size:40px;

}

.hero-image img{

width:280px;

height:280px;

}

.hero-buttons{

flex-direction:column;

}

.stats .container{

grid-template-columns:1fr;

}

.section-title h2{

font-size:34px;

}

.cta h2{

font-size:34px;

}

}

/* =========================
   PORTFOLIO
========================= */

.portfolio-filter{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:60px;

}

.filter-btn{

background:#0b1120;

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

color:#fff;

padding:12px 25px;

border-radius:40px;

cursor:pointer;

transition:.35s;

font-family:Poppins,sans-serif;

}

.filter-btn:hover,

.filter-btn.active{

background:#2563eb;

border-color:#2563eb;

}

.project-tag{

display:inline-block;

margin-top:20px;

padding:8px 18px;

background:rgba(37,99,235,.15);

color:#4fc3f7;

border-radius:30px;

font-size:14px;

font-weight:600;

}

.card h4{

margin:10px 0 15px;

color:#3b82f6;

font-weight:500;

}

/* ==========================
   FEEDBACK PAGE
========================== */

.stars{

margin-bottom:20px;

}

.stars i{

color:#FFD43B;

font-size:18px;

margin-right:4px;

}

.card hr{

border:none;

height:1px;

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

margin:25px 0;

}

.card span{

color:#9ca3af;

font-size:14px;

}

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

.timeline{

position:relative;

max-width:1000px;

margin:auto;

padding-left:40px;

border-left:3px solid rgba(59,130,246,.35);

}

.timeline-item{

position:relative;

margin-bottom:60px;

}

.timeline-icon{

position:absolute;

left:-58px;

top:0;

width:36px;

height:36px;

background:#2563eb;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 0 20px rgba(37,99,235,.45);

}

.timeline-content{

background:#0b1120;

padding:30px;

border-radius:20px;

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

transition:.35s;

}

.timeline-content:hover{

transform:translateY(-8px);

border-color:#3b82f6;

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

}

.timeline-content h3{

margin-bottom:8px;

font-size:26px;

}

.timeline-content h4{

color:#3b82f6;

margin-bottom:8px;

font-weight:500;

}

.timeline-content span{

display:inline-block;

margin-bottom:18px;

color:#9ca3af;

font-size:14px;

}

.timeline-content p{

color:#cbd5e1;

}

.skills{

margin-top:25px;

display:flex;

flex-wrap:wrap;

gap:12px;

}

.skills span{

background:rgba(37,99,235,.12);

color:#4fc3f7;

padding:8px 16px;

border-radius:30px;

margin:0;

font-size:13px;

font-weight:500;

}

@media(max-width:768px){

.timeline{

padding-left:20px;

}

.timeline-icon{

left:-38px;

width:28px;

height:28px;

font-size:12px;

}

.timeline-content{

padding:22px;

}

.timeline-content h3{

font-size:22px;

}

}

/*=========================
CERTIFICATIONS
=========================*/

.certificate-badge{

display:inline-block;

margin-top:20px;

padding:8px 18px;

background:rgba(37,99,235,.12);

color:#4fc3f7;

border-radius:30px;

font-size:14px;

font-weight:600;

}

.card .fa-google{

font-size:55px;

color:#4285F4;

margin-bottom:25px;

}

.card .fa-chart-bar{

font-size:55px;

color:#3b82f6;

margin-bottom:25px;

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

.progress{

height:12px;

background:#1f2937;

border-radius:30px;

margin-top:18px;

overflow:hidden;

}

.progress-fill{

height:100%;

background:linear-gradient(90deg,#2563eb,#4fc3f7);

border-radius:30px;

animation:growBar 2s ease;

}

@keyframes growBar{

from{

width:0;

}

}
/*=========================
CONTACT PAGE
=========================*/

.contact-form{

max-width:750px;

margin:auto;

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,
.contact-form textarea{

background:#0b1120;

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

padding:18px;

color:#fff;

border-radius:12px;

font-size:16px;

font-family:Poppins,sans-serif;

outline:none;

transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

border-color:#2563eb;

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

}

.social-links{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.social-links a{

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

background:#0b1120;

border-radius:50%;

font-size:24px;

color:#fff;

transition:.35s;

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

}

.social-links a:hover{

background:#2563eb;

transform:translateY(-8px);

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

}
/*=========================
HEADER SOCIAL
=========================*/

.logo-area{

    display:flex;

    align-items:center;

    gap:25px;

}

.header-social{

    display:flex;

    align-items:center;

    gap:14px;

}

.header-social a{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#111827;

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

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.header-social a i{

    font-size:16px;

}

.header-social a:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-3px) scale(1.1);

    box-shadow:0 0 18px rgba(37,99,235,.65);

    animation:blinkGlow .8s infinite alternate;

}

@keyframes blinkGlow{

    from{

        box-shadow:0 0 8px #2563eb;

    }

    to{

        box-shadow:0 0 22px #4fc3f7;

    }

}

/* ==========================================
   CUSTOM LINKTREE ICON
========================================== */

.fa-linktree,
.fab.fa-linktree,
.fa-brands.fa-linktree {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m13.736%205.853%204.005-4.17%202.099%202.016-3.991%204.155%205.933%206.183-2.099%202.016-4.683-4.875v8.822h-3.001v-8.822l-4.683%204.875-2.099-2.016%205.933-6.183-3.991-4.155%202.099-2.016%204.005%204.17V0h3.001v5.853zM10.499%2018.397h3.001V24h-3.001v-5.603z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m13.736%205.853%204.005-4.17%202.099%202.016-3.991%204.155%205.933%206.183-2.099%202.016-4.683-4.875v8.822h-3.001v-8.822l-4.683%204.875-2.099-2.016%205.933-6.183-3.991-4.155%202.099-2.016%204.005%204.17V0h3.001v5.853zM10.499%2018.397h3.001V24h-3.001v-5.603z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    vertical-align: -0.125em;
}

.fa-linktree::before,
.fab.fa-linktree::before,
.fa-brands.fa-linktree::before {
    content: "" !important;
}

/* Existing CSS */

@media(max-width:480px){

    /* your existing code */

}

/* ==========================
   MOBILE HEADER FIX
========================== */

@media (max-width: 768px){

header .container{
    padding:10px 15px;
    gap:10px;
}

.logo-area{
    flex:1;
    gap:10px;
    min-width:0;
}

.logo{
    font-size:24px;
}

.header-social{
    gap:6px;
}

.header-social a{
    width:32px;
    height:32px;
    flex-shrink:0;
}

.header-social a i{
    font-size:14px;
}

.menu-btn{
    display:block;
    font-size:26px;
    margin-left:10px;
    flex-shrink:0;
}

}

@media(max-width:768px){

.hero-buttons{
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.hero-buttons .btn,
.hero-buttons .btn-outline{
    width:100%;
    max-width:300px;
    text-align:center;
}

}

/* Resume Buttons */

.resume-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-top:30px;
}

@media(max-width:768px){

.resume-buttons{
    flex-direction:column;
}

.resume-buttons .btn,
.resume-buttons .btn-outline{
    width:100%;
    max-width:320px;
    text-align:center;
}

}