*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins', sans-serif;

}


html{

scroll-behavior:smooth;

}


body{

background:#f8f5ff;
color:#333;

}





/* Navbar */


header{

background:#6c5ce7;
padding:20px;

position:sticky;
top:0;
z-index:100;


}


nav{

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

max-width:1100px;
margin:auto;

}


nav h2{

color:white;
font-size:28px;

}



nav ul{

display:flex;
gap:25px;
list-style:none;

}



nav ul li a{

color:white;
text-decoration:none;
font-weight:bold;

}



nav ul li a:hover{

opacity:0.7;

}







/* Hero */


.hero{

min-height:90vh;

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

gap:50px;

padding:50px;

}



.hero-text{

max-width:500px;

}



.hero-text h1{

font-size:45px;
color:#6c5ce7;

}


.hero-text h3{

margin:15px 0;

font-size:25px;

}


.hero-text p{

font-size:18px;

}



button{

margin-top:20px;

padding:12px 30px;

border:none;

background:#6c5ce7;

color:white;

border-radius:25px;

cursor:pointer;

font-size:16px;

}



button:hover{

background:#4834d4;

}





.hero-image img{

width:300px;

height:300px;

object-fit:cover;

border-radius:50%;

border:8px solid white;

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

}







/* Section */


section{

padding:70px 10%;

}



section h2{

text-align:center;

font-size:35px;

color:#6c5ce7;

margin-bottom:30px;

}



section p{

line-height:1.8;

font-size:17px;

}





/* Interest */


.interest-container{

display:grid;

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

gap:20px;

}



.card{

background:white;

padding:25px;

border-radius:20px;

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

text-align:center;

transition:0.3s;

}



.card:hover{

transform:translateY(-10px);

}






/* Skills */


.skill{

margin:20px auto;

max-width:600px;

}


progress{

width:100%;

height:25px;

}






/* Gallery */


.gallery-container{

display:grid;

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

gap:15px;

}



.gallery-container img{

width:100%;

height:200px;

object-fit:cover;

border-radius:15px;

}






/* Goals */


#goals ul{

max-width:600px;

margin:auto;

font-size:18px;

line-height:2;

}







/* Contact */


#contact{

text-align:center;

}





footer{

background:#6c5ce7;

color:white;

text-align:center;

padding:20px;

}







/* Tablet */


@media(max-width:900px){


nav{

flex-direction:column;

gap:20px;

}


.hero{

flex-direction:column-reverse;

text-align:center;

}



.interest-container{

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

}



.gallery-container{

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

}



}







/* Phone */


@media(max-width:600px){


nav ul{

flex-direction:column;

text-align:center;

gap:10px;

}



.hero-text h1{

font-size:35px;

}


.hero-image img{

width:220px;

height:220px;

}



.interest-container{

grid-template-columns:1fr;

}



.gallery-container{

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

}



section{

padding:50px 5%;

}


}