/*=====================================
STRATIQLAB RESPONSIVE.CSS
======================================*/


/* Large Tablets */
@media (max-width:1200px){

.container{
    width:92%;
}

.hero-left h1{
    font-size:58px;
}

}


/* Tablets */

@media (max-width:992px){

.nav{
    height:75px;
}

.hero-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:50px;
}

.hero-right{
    grid-template-columns:repeat(3,1fr);
}

.hero-left h1{
    font-size:52px;
}

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

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

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

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

}


/* Mobile */

@media (max-width:768px){

header{

    padding:0;

}

.nav{

    flex-direction:column;

    height:auto;

    padding:20px 0;

}

nav{

    margin-top:20px;

}

nav ul{

    flex-direction:column;

    gap:18px;

    text-align:center;

}

.btn{

    margin-top:20px;

}

.hero{

    padding-top:150px;

}

.hero-left h1{

    font-size:42px;

}

.hero-left p{

    font-size:16px;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

    align-items:center;

}

.btn-outline{

    margin-left:0;

}

.hero-right{

    grid-template-columns:1fr;

}

.stats{

    grid-template-columns:1fr;

}

.service-grid{

    grid-template-columns:1fr;

}

.portfolio-grid{

    grid-template-columns:1fr;

}

section{

    padding:80px 0;

}

section h2{

    font-size:34px;

}

.contact button{

    width:100%;

}

}


/* Small Mobile */

@media (max-width:480px){

.logo{

    font-size:26px;

}

.hero-left h1{

    font-size:34px;

}

.hero-left p{

    font-size:15px;

}

.glass-card{

    padding:25px;

}

.service-card{

    padding:30px;

}

.project{

    height:220px;

}

footer h3{

    font-size:26px;

}

}