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

html{
    scroll-behavior:smooth;
}


body{
    background-color:#0F172A;
    color:#F8FAFC;
    font-family:'Inter', sans-serif;
    line-height:1.6;
}

a{
    color:#38BDF8;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

.mainheading{
    background:rgba(255,255,255,0.05);
    text-align:center;
    padding:1.5rem 0;
}

.mainheading h1{
    font-size:3rem;
    font-weight:700;
    font-family:'Poppins', sans-serif;
}

.hero,.aboutme,.skills,.projects,.experience,.contact{
    padding:5rem 8vw;
}

.hero{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:3rem;
}

.myimg2{
    width:18rem;
    border-radius:2rem;
}

.herosection{
    width:30rem;
    font-size:1.3rem;
    font-weight:400;
}

h2{
    font-size:2.2rem;
    font-weight:700;
    font-family:'Poppins', sans-serif;
    margin-bottom:2rem;
    text-align:center;
}

.aboutme{
    display:flex;
    justify-content:center;
}

.abtme{
    width:32rem;
    text-align:center;
}

.abtme p{
    font-size:1rem;
    color:#94A3B8;
}

.skills{
    text-align:center;
}

.skillset{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:2rem;
}

.skillset p{
    background-color:#38BDF8;
    color:#082F49;
    padding:0.8rem 2rem;
    border-radius:1rem;
    font-size:1rem;
    font-weight:600;
    transition:0.3s ease;
}

.skillset p:hover{
    transform:translateY(-0.3rem);
}

.projects{
    text-align:center;
}

.project{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:2rem;
}

.pr{
    background:#1E293B;
    width:20rem;
    padding:2rem;
    border-radius:1rem;
    transition:0.3s ease;
}

.pr:hover{
    transform:translateY(-0.5rem);
    box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.3);
}

.pr h4{
    font-size:1.3rem;
    font-weight:600;
    font-family:'Poppins', sans-serif;
    margin-bottom:1rem;
}

.pr p{
    font-size:1rem;
    color:#94A3B8;
}

.experience{
    text-align:center;
}

.experience-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;
}


.experience-card{
    background:#1E293B;
    width:min(90%, 40rem);
    padding:2rem;
    border-radius:1rem;
    transition:0.3s ease;
}

.experience-card:hover{
    transform:translateY(-0.5rem);
    box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.3);
}

.experience-card h3{
    font-size:1.5rem;
    font-weight:600;
    font-family:'Poppins', sans-serif;
    margin-bottom:1rem;
}

.company{
    color:#38BDF8;
    font-size:1rem;
    font-weight:500;
    margin-bottom:1rem;
}

.experience-card p{
    font-size:1rem;
    color:#94A3B8;
}

.contact{
    text-align:center;
}

.contact-container{
    display:flex;
    justify-content:center;
}

.contactme{
    display:flex;
    flex-direction:column;
    gap:1rem;
    background:#1E293B;
    width:min(90%, 40rem);
    padding:2rem;
    border-radius:1rem;
}

.contactme p{
    font-size:1rem;
    color:#F8FAFC;
}

footer{
    background:#020617;
    text-align:center;
    padding:2rem;
    margin-top:5rem;
}

footer p{
    color:#94A3B8;
    font-size:0.9rem;
}

@media(max-width:768px){
    .hero{
        flex-direction:column;
        text-align:center;
    }

    .herosection{
        width:100%;
    }

    .abtme{
        width:100%;
    }

    .mainheading h1{
        font-size:2.2rem;
    }

    h2{
        font-size:1.8rem;
    }

    .myimg2{
        width:14rem;
    }

}

.resume-button{
    display:inline-block;
    margin-top:1rem;
    background-color:#38BDF8;
    color:#082F49;
    padding:0.8rem 1.5rem;
    border-radius:0.8rem;
    font-weight:600;
    transition:0.3s ease;
    margin-left:0.1rem;
}

.resume-button:hover{
    transform:translateY(-0.2rem);
}