/* ==========================================
   TABLETS
========================================== */

@media(max-width:992px){

.container{
    width:95%;
}

.hero h1{
    font-size:48px;
}

.hero p{
    font-size:18px;
}

.about-content{
    grid-template-columns:1fr;
}

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

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

header .container{
    flex-direction:column;
    height:auto;
    padding:20px 0;
}

nav ul{
    margin:20px 0;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
}

}

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

@media(max-width:768px){

.hero{
    height:90vh;
    padding:40px 20px;
}

.hero h1{
    font-size:36px;
    line-height:1.3;
}

.hero p{
    font-size:17px;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.section-title h2{
    font-size:32px;
}

.about-text h2{
    font-size:32px;
}

.services-grid{
    grid-template-columns:1fr;
}

.stats-grid{
    grid-template-columns:1fr;
}

.logo h2{
    font-size:26px;
}

.btn,
.btn-outline{

    width:220px;

    text-align:center;

}

footer{

    text-align:center;

}

.footer-grid{

    grid-template-columns:1fr;

}

}

/* ==========================================
   SMALL PHONES
========================================== */

@media(max-width:480px){

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:16px;

}

section{

    padding:70px 0;

}

.section-title h2{

    font-size:28px;

}

.stat h2{

    font-size:38px;

}

header .container{

    padding:15px;

}

nav ul{

    gap:12px;

}

}