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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Poppins",sans-serif;
    overflow-x:hidden;
    background:#f8f8f8;
    color:#111;
    transition:0.3s ease;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

p{
    color:#555;
    line-height:1.8;
}

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

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.2rem 8%;
    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(0,0,0,0.05);

    transition:0.3s ease;
}

.logo{
    font-size:2rem;
    font-weight:700;
    letter-spacing:1px;
}

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

.nav-links a{
    font-size:1rem;
    font-weight:500;
    transition:0.3s;
}

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

/* ================= THEME BUTTON ================= */

#theme-toggle,
#theme-toggle-mobile{
    border:none;
    background:#111;
    color:white;

    width:50px;
    height:50px;

    border-radius:50%;
    cursor:pointer;

    font-size:1rem;
    transition:0.3s ease;
}

#theme-toggle:hover,
#theme-toggle-mobile:hover{
    transform:scale(1.08);
}

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

#hamburger-nav{
    display:none;
}

.hamburger-menu{
    position:relative;
}

.hamburger-icon{
    display:flex;
    flex-direction:column;
    justify-content:space-between;

    width:30px;
    height:24px;

    cursor:pointer;
}

.hamburger-icon span{
    height:3px;
    width:100%;

    background:black;
    border-radius:10px;

    transition:0.3s ease;
}

.menu-links{
    position:absolute;
    top:60px;
    right:0;

    width:220px;

    background:white;

    border-radius:1rem;

    max-height:0;
    opacity:0;
    overflow:hidden;

    transition:0.3s ease;

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

.menu-links.open{
    max-height:400px;
    opacity:1;
    padding:1rem 0;
}

.menu-links li{
    list-style:none;
}

.menu-links a{
    display:block;
    padding:1rem;
    text-align:center;
    font-size:1rem;
}

.hamburger-icon.open span:first-child{
    transform:rotate(45deg) translate(5px,5px);
}

.hamburger-icon.open span:nth-child(2){
    opacity:0;
}

.hamburger-icon.open span:last-child{
    transform:rotate(-45deg) translate(7px,-6px);
}

/* ================= GENERAL ================= */

section{
    padding:6rem 8%;
}

.title{
    font-size:4rem;
    text-align:center;
    margin-bottom:1rem;
    font-weight:700;
    line-height:1.1;
}

.section__text__p1{
    text-align:center;
    color:#666;
    margin-bottom:0.5rem;
    font-size:1.1rem;
}

/* ================= SECTION DIVIDER ================= */

.section-divider{
    width:100%;
    height:2px;
    background:#d9d9d9;
}

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

#profile{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6rem;
    min-height:90vh;
}

.section__pic-container{
    width:430px;
    height:430px;
    flex-shrink:0;
}

.section__pic-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.section__text{
    text-align:center;
}

.section__text__p2{
    font-size:1.8rem;
    margin:1rem 0;
}

.btn-container{
    display:flex;
    gap:1rem;
    justify-content:center;
    margin-top:2rem;
}

.btn{
    padding:1rem 2rem;
    border-radius:50px;
    cursor:pointer;
    font-weight:600;
    transition:0.3s ease;
}

.btn:hover{
    transform:translateY(-4px);
}

.btn-color-1{
    background:#111;
    color:white;
    border:none;
}

.btn-color-2{
    border:2px solid #111;
    background:transparent;
}

#socials-container{
    display:flex;
    justify-content:center;
    gap:1rem;
    margin-top:1.5rem;
}

.icon{
    width:38px;
    cursor:pointer;
    transition:0.3s ease;
}

.icon:hover{
    transform:scale(1.1);
}

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

.section-container{
    display:flex;
    gap:4rem;
    align-items:flex-start;
}

/* DESKTOP ABOUT IMAGE */

#about .section__pic-container{
    width:320px;
    height:auto;
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.about-pic{
    width:320px !important;
    height:auto !important;
    border-radius:2rem !important;
    object-fit:cover;
    aspect-ratio:auto;
}

.about-containers{
    display:flex;
    gap:2rem;
    margin:2rem 0;
}

.details-container{
    flex:1;
    padding:2rem;
    border-radius:2rem;
    background:white;
    border:1px solid #ddd;
    text-align:center;

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

    transition:0.3s ease;
}

.details-container:hover{
    transform:translateY(-8px);
}

.text-container{
    margin-top:1rem;
}

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

#skills{
    background:#050518;
    color:white;
}

#skills .title,
#skills .section__text__p1{
    color:white;
}

.tech-stack-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:2rem;
    margin-top:4rem;
}

.tech-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    padding:2rem;

    border-radius:2rem;

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

    transition:0.3s ease;
}

.tech-card:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,0.08);
}

.tech-icon{
    width:75px;
    height:75px;
    object-fit:contain;
}

/* HOVER LABEL RESTORED */

.tech-name{
    position:absolute;

    top:-55px;

    background:black;
    color:white;

    padding:0.7rem 1rem;

    border-radius:50px;

    opacity:0;

    transition:0.3s ease;

    font-size:0.9rem;
    font-weight:500;

    pointer-events:none;
}

.tech-card:hover .tech-name{
    opacity:1;
    top:-70px;
}

/* ================= PROJECTS ================= */

.projects-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:2rem;
    margin-top:4rem;
}

.project-card{
    background:white;
    border-radius:2rem;
    overflow:hidden;

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

    transition:0.3s ease;
}

.project-card:hover{
    transform:translateY(-10px);
}

.project-img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.project-content{
    padding:2rem;
}

.project-title{
    margin-bottom:1rem;
}

.project-description{
    margin-bottom:1.5rem;
}

.project-tech{
    display:flex;
    gap:0.7rem;
    flex-wrap:wrap;
    margin-bottom:1.5rem;
}

.project-tech span{
    background:#eee;
    padding:0.6rem 1rem;
    border-radius:50px;
    font-size:0.85rem;
}

.project-btn{
    padding:0.9rem 1.5rem;
    border:none;
    border-radius:50px;
    background:black;
    color:white;
    cursor:pointer;
    transition:0.3s ease;
}

.project-btn:hover{
    transform:translateY(-3px);
}

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

.contact-container{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:3rem;
    margin-top:4rem;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.contact-card{
    display:flex;
    gap:1rem;
    align-items:center;

    padding:1.5rem;
    background:white;

    border-radius:1.5rem;
    border:1px solid #ddd;

    transition:0.3s ease;
}

.contact-card:hover{
    transform:translateY(-5px);
}

.contact-icon{
    width:35px;
}

.contact-form{
    background:white;
    padding:2rem;
    border-radius:2rem;
    border:1px solid #ddd;

    display:flex;
    flex-direction:column;
    gap:1rem;
}

.contact-form input,
.contact-form textarea{
    padding:1rem;
    border:none;
    border-radius:1rem;
    background:#1c1c35;
    color:white;
    font-family:"Poppins",sans-serif;
}

.contact-btn{
    width:fit-content;
    padding:1rem 2rem;
    border:none;
    border-radius:50px;
    background:black;
    color:white;
    cursor:pointer;
    transition:0.3s ease;
}

.contact-btn:hover{
    transform:translateY(-3px);
}

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

footer{
    background:#050518;
    color:white;
    text-align:center;
    padding:4rem 2rem;
}

.footer-content p{
    color:#d0d0d0;
    margin-top:1rem;
}

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

body.dark-mode{
    background:#050518;
    color:white;
}

/* TEXT */

body.dark-mode p{
    color:#d0d0d0;
}

body.dark-mode .title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode a,
body.dark-mode .logo{
    color:white;
}

/* NAVBAR */

body.dark-mode nav{
    background:#050518;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

/* SOCIAL ICON FIX */

body.dark-mode #socials-container .icon{
    filter:brightness(0) invert(1);
}

/* BUTTON FIX */

body.dark-mode .btn-color-1{
    background:white;
    color:black;
}

body.dark-mode .btn-color-2{
    border:2px solid white;
    color:white;
}

/* MOBILE NAV */

body.dark-mode .menu-links{
    background:#111126;
}

body.dark-mode .hamburger-icon span{
    background:white;
}

/* CARDS */

body.dark-mode .details-container,
body.dark-mode .project-card,
body.dark-mode .contact-card,
body.dark-mode .contact-form{
    background:#111126;
    border:1px solid rgba(255,255,255,0.08);
}

/* TECH TAGS */

body.dark-mode .project-tech span{
    background:#1f1f38;
    color:white;
}

/* BUTTONS */

body.dark-mode .project-btn,
body.dark-mode .contact-btn{
    background:white;
    color:black;
}

/* INPUTS */

body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea{
    background:#1c1c35;
    color:white;
}

/* FOOTER */

body.dark-mode footer{
    background:#040411;
}

/* DIVIDER */

body.dark-mode .section-divider{
    background:rgba(255,255,255,0.08);
}

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

@media screen and (max-width:768px){

    section{
        padding:4rem 6%;
    }

    .title{
        font-size:3rem;
    }

    /* NAVBAR */

    #desktop-nav{
        display:none;
    }

    #hamburger-nav{
        display:flex;
    }

    /* PROFILE */

    #profile{
        flex-direction:column;
        gap:2rem;
        text-align:center;
    }

    .section__pic-container{
        width:280px;
        height:280px;
    }

    .section__text__p2{
        font-size:1.3rem;
    }

    .btn-container{
        flex-direction:column;
        align-items:center;
    }

    .btn{
        width:220px;
    }

    /* ABOUT */

    .section-container{
        flex-direction:column;
        align-items:center;
    }

    #about .section__pic-container{
        width:100%;
        height:auto;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    /* MOBILE ROUND IMAGE ONLY */

    #about .about-pic{
        width:230px !important;
        height:230px !important;

        border-radius:50% !important;

        object-fit:cover;

        aspect-ratio:1/1;
    }

    .about-containers{
        flex-direction:column;
    }

    /* SKILLS */

    .tech-stack-container{
        grid-template-columns:repeat(2,1fr);
    }

    /* CONTACT */

    .contact-container{
        grid-template-columns:1fr;
    }

    .contact-card{
        padding:1rem;
        gap:0.8rem;
        align-items:flex-start;
    }

    .contact-card h3{
        font-size:1rem;
    }

    .contact-card p{
        font-size:0.82rem;
        line-height:1.5;
        word-break:break-word;
        overflow-wrap:break-word;
    }

    .contact-icon{
        width:28px;
        flex-shrink:0;
    }

    .contact-card div{
        width:100%;
        overflow:hidden;
    }

    .contact-form{
        padding:1.5rem;
    }

}