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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Segoe UI',sans-serif;
    line-height:1.6;
    background:#0f172a;
    color:#ffffff;
    overflow-x:hidden;
}

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

.main-header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:1000;

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

    padding:18px 8%;

    background:rgba(0,0,0,0.75);

    backdrop-filter:blur(10px);

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

.logo-container{
    display:flex;
    align-items:center;
}

.logo{
    width:45px;
    height:45px;
    object-fit:cover;
    border-radius:8px;
    margin-right:12px;
}

.site-name{
    color:white;
    font-size:1.7rem;
    font-weight:700;
}

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

.nav-links a{

    color:white;

    text-decoration:none;

    font-size:1rem;

    transition:0.3s;
}

.nav-links a:hover{
    color:#00bfff;
}

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

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

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

.hero-section{

    position:relative;

    min-height:100vh;

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

    overflow:hidden;

    background:
    linear-gradient(rgba(0,0,0,0.88),
    rgba(0,0,0,0.92)),
    url('images/bg.jpg');

    background-size:cover;
    background-position:center;

    padding:120px 8%;
}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(0,191,255,0.12),
    transparent 40%);
}

.hero-container{

    position:relative;
    z-index:2;

    width:100%;
    max-width:1400px;

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

    gap:60px;

    margin:auto;
}

/* LEFT SIDE */

.hero-left{

    flex:1;

    max-width:650px;
}

.intro-text{

    color:#00bfff;

    font-size:1.2rem;

    margin-bottom:10px;

    letter-spacing:2px;
}

.hero-title{

    font-size:5rem;

    font-weight:800;

    line-height:1.1;

    color:white;
}

.hero-title span{

    color:#00bfff;

    text-shadow:
    0 0 10px rgba(0,191,255,0.8),
    0 0 20px rgba(0,191,255,0.5);
}

.hero-role{

    font-size:2rem;

    margin-top:20px;

    color:#e2e8f0;
}

.hero-description{

    margin-top:25px;

    line-height:1.9;

    color:#cbd5e1;

    font-size:1.1rem;
}

/* HERO BUTTONS */

.hero-buttons{

    margin-top:40px;

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{

    padding:15px 35px;

    border-radius:10px;

    border:none;

    cursor:pointer;

    font-size:1rem;

    transition:0.3s;
}

.btn-primary{

    background:linear-gradient(
    135deg,
    #00bfff,
    #007bff);

    color:white;
}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 25px rgba(0,191,255,0.3);
}

.btn-secondary{

    background:transparent;

    border:2px solid white;

    color:white;
}

.btn-secondary:hover{

    background:white;

    color:black;
}

/* SOCIAL LINKS */

.hero-socials{

    margin-top:40px;

    display:flex;

    gap:25px;

    flex-wrap:wrap;
}

.hero-socials a{

    color:#94a3b8;

    text-decoration:none;

    transition:0.3s;
}

.hero-socials a:hover{
    color:#00bfff;
}

/* RIGHT SIDE */

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;
    align-items:center;
}

/* CODE CARD */

.developer-card{

    width:100%;

    max-width:520px;

    background:rgba(15,23,42,0.95);

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

    border-radius:20px;

    padding:40px;

    overflow-x:auto;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.5);

    animation:floatCard 4s ease-in-out infinite;
}

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }
}

.developer-card pre{

    margin:0;

    white-space:pre-wrap;

    word-break:break-word;

    color:white;

    font-size:0.95rem;

    line-height:2;

    font-family:Consolas, monospace;
}

.code-blue{
    color:#38bdf8;
}

.code-green{
    color:#22c55e;
}

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

.about-section{

    padding:100px 8%;

    background:#ffffff;

    color:#111;
}

.about-container{

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

    gap:60px;

    flex-wrap:wrap;
}

.passport-photo img{

    width:260px;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.2);
}

.about-text{
    max-width:700px;
}

.about-text h2{

    font-size:2.5rem;

    margin-bottom:20px;
}

.about-text p{

    font-size:1rem;

    line-height:1.9;

    color:#333;
}

/* ========================================= */
/* SKILLS SECTION */
/* ========================================= */

.skills-section{

    padding:100px 8%;

    background:#111827;
}

.skills-section h2{

    text-align:center;

    font-size:2.5rem;

    margin-bottom:60px;
}

.icon-grid{

    display:grid;

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

    gap:30px;
}

.icon-item{

    background:#1e293b;

    padding:35px 25px;

    border-radius:16px;

    text-align:center;

    transition:0.3s;

    border:1px solid rgba(255,255,255,0.05);
}

.icon-item:hover{

    transform:translateY(-8px);

    background:#0f172a;
}

.icon-item img{

    width:70px;

    margin-bottom:20px;
}

.icon-item p{

    color:white;

    font-size:1rem;
}

/* ========================================= */
/* PROJECT SECTION */
/* ========================================= */

.project-section{

    padding:100px 8%;

    background:#000000;
}

.project-section h2{

    text-align:center;

    font-size:2.5rem;

    margin-bottom:60px;
}

.project-grid{

    display:grid;

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

    gap:35px;
}

.project-card{

    background:#1e293b;

    border-radius:18px;

    overflow:hidden;

    transition:0.3s;

    border:1px solid rgba(255,255,255,0.06);
}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.3);
}

.project-card img{

    width:100%;

    height:230px;

    object-fit:cover;
}

.project-card h3{

    text-align:center;

    margin:25px 0 10px;
}

.project-card h3 a{

    color:white;

    text-decoration:none;
}

.project-card h3 a:hover{
    color:#00bfff;
}

.project-card p{

    text-align:center;

    padding:0 25px 30px;

    color:#cbd5e1;
}

/* ========================================= */
/* CONTACT SECTION */
/* ========================================= */

.contact-section{

    padding:100px 8%;

    background:#ffffff;

    color:#111;
}

.contact-section h2{

    text-align:center;

    font-size:2.5rem;

    margin-bottom:60px;
}

.contact-container{

    display:flex;

    gap:40px;

    flex-wrap:wrap;
}

.image-container{

    flex:1;

    min-height:450px;

    background:url('images/contact.jpg');

    background-size:cover;
    background-position:center;

    border-radius:20px;
}

.form-container{

    flex:1;

    display:flex;
    align-items:center;
}

form{
    width:100%;
}

form input,
form textarea{

    width:100%;

    padding:16px;

    margin-bottom:20px;

    border:1px solid #d1d5db;

    border-radius:10px;

    font-size:1rem;
}

form textarea{

    height:150px;

    resize:none;
}

form button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:10px;

    background:linear-gradient(
    135deg,
    #00bfff,
    #007bff);

    color:white;

    font-size:1rem;

    cursor:pointer;

    transition:0.3s;
}

form button:hover{

    transform:translateY(-3px);
}

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

.stats-section{

    position: relative;

    z-index: 2;

    padding: 80px 8%;

    background:
    linear-gradient(
    rgba(2,6,23,0.96),
    rgba(2,6,23,0.98)),
    url('images/grid-bg.png');

    background-size: cover;

    overflow: hidden;
}

.stats-container{

    max-width: 1000px;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 120px;

    flex-wrap: wrap;
}

.stat-box{

    text-align: center;

    position: relative;
}

.stat-box h2{

    font-size: 5rem;

    font-weight: 800;

    color: white;

    line-height: 1;
}

.stat-box h2 span{

    color: #00bfff;
}

.stat-box p{

    margin-top: 15px;

    font-size: 1rem;

    letter-spacing: 6px;

    color: #64748b;
}

/* RESPONSIVE */

@media(max-width:768px){

    .stats-container{

        gap: 60px;
    }

    .stat-box h2{

        font-size: 3.5rem;
    }

    .stat-box p{

        font-size: 0.8rem;

        letter-spacing: 4px;
    }
}

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

footer{

    background:#020617;

    color:white;

    text-align:center;

    padding:60px 20px;
}

.social-links{

    margin-bottom:25px;
}

.social-links a{

    color:#94a3b8;

    margin:0 15px;

    text-decoration:none;

    transition:0.3s;
}

.social-links a:hover{
    color:#00bfff;
}

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

@media(max-width:992px){

    .hero-container{
        flex-direction:column;
        text-align:center;
    }

    .hero-left,
    .hero-right{
        width:100%;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-socials{
        justify-content:center;
    }

    .hero-title{
        font-size:3.5rem;
    }

    .hero-role{
        font-size:1.5rem;
    }

    .about-container{
        flex-direction:column;
        text-align:center;
    }

    .contact-container{
        flex-direction:column;
    }
}

@media(max-width:768px){

    .menu-toggle{
        display:block;
    }

    .navbar{

        position:absolute;

        top:80px;
        right:20px;

        width:220px;
    }

    .nav-links{

        display:none;

        flex-direction:column;

        background:#111827;

        padding:20px;

        border-radius:12px;

        gap:20px;
    }

    .main-header:hover .nav-links{
        display:flex;
    }

    .hero-title{
        font-size:2.8rem;
    }

    .hero-role{
        font-size:1.2rem;
    }

    .developer-card pre{
        font-size:0.8rem;
    }

    .skills-section,
    .about-section,
    .project-section,
    .contact-section{
        padding:80px 20px;
    }
}



/* MOBILE TECH GRID FIX */

@media(max-width:768px){

    .icon-grid{

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

        gap: 20px;
    }

    .icon-item{

        padding: 25px 15px ;
    }

    .icon-item img{

        width: 55px;
    }

    .icon-item p{

        font-size: 0.9rem;
    }
}

/* ========================================= */
/* TECH TAG BUTTONS */
/* ========================================= */



/* COLORS */
.project-tags{
    display:flex;
    gap:12px;
    flex-wrap:wrap;

    padding: 0 20px;   /* align with content */
    margin: 15px 15px;  /* space from description */
}

/* TAG BUTTON */
.tag{
    padding:8px 16px;
    border-radius:10px;
    font-size:0.9rem;
    font-weight:600;
    color:white;
}

.blue{
    background:#2563eb;
}

.green{
    background:#16a34a;
}

.purple{
    background:#7c3aed;
}

.orange{
    background:#ea580c;
}

.red{
    background:#dc2626;
}

.sky{
    background:#0284c7;
}