@media (max-width:900px){

.hero-container{

flex-direction:column;

text-align:center;

}

.hero-image img{

width:220px;
height:260px;

}

.hero-text h1{

font-size:36px;

}

}





/* TABLET */

@media (max-width:900px){

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

.hero-image img{
width:220px;
height:260px;
}

.hero-text{
max-width:100%;
}

.hero-text h1{
font-size:32px;
}

.hero-text h2{
font-size:18px;
}

.hero-text p{
font-size:16px;
padding:0 10px;
}

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

}





@media (max-width:768px){

.nav-links{

gap:15px;
font-size:14px;

}

.navbar{

padding:15px 20px;

}

}





@media (max-width:900px){

.about-container{

grid-template-columns:1fr;
text-align:center;

}

.skills-circles{

grid-template-columns:repeat(4,70px);

gap:20px;

}

.skill-circle{

width:70px;
height:70px;

}

}





@media (max-width:900px){

.skills-container{

grid-template-columns:1fr;

text-align:center;

}

.skills-list ul{

display:inline-block;
text-align:left;

}

}








@media (max-width:900px){

.projects-container{

grid-template-columns:1fr;

gap:30px;

}

.project-card img{

height:180px;

}

}

















@media (max-width:600px){

.project-buttons{

flex-direction:column;

}

.project-buttons a{

width:100%;
text-align:center;

}

}











@media (max-width:900px){

.project-layout{

grid-template-columns:1fr;

}


.project-features{

grid-template-columns:1fr;

}


.project-gallery{

grid-template-columns:1fr;

}


.project-title{

font-size:32px;

}

}






@media (max-width:900px){

.contact-cards{

grid-template-columns:1fr;

gap:20px;

}

.contact-title{

font-size:30px;

}

}








@media (max-width:768px){

#scrollTop{

width:48px;
height:48px;

font-size:18px;

bottom:20px;
right:20px;

}

}