@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero-description{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.nav-links{

display:none;

}

.image-card{

width:350px;

margin:auto;

}

.skills-grid{

grid-template-columns:1fr;

}

footer{

flex-direction:column;

gap:30px;

text-align:center;

}

}

@media(max-width:768px){

.hero h1{

font-size:48px;

}

.hero h2{

font-size:24px;

}

.section-title h2{

font-size:36px;

}

.cta h2{

font-size:36px;

}

section{

padding:80px 7%;

}

}
/*==============================
METRICS RESPONSIVE
==============================*/

@media(max-width:1100px){

.metrics{

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

}

}

@media(max-width:700px){

.metrics{

grid-template-columns:1fr;

}

.metric-card h2{

font-size:42px;

}

}
@media(max-width:768px){

.timeline-item{

padding-left:50px;

}

.timeline::before{

left:15px;

}

.timeline-dot{

left:5px;

}

.timeline-content{

padding:25px;

}

}