/*=============================
PART 3 RESPONSIVE
=============================*/

@media(max-width:1100px){

.stats-grid,
.process-grid{

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

}

}

@media(max-width:768px){

.stats-grid,
.process-grid{

grid-template-columns:1fr;

}

.cta-section h2{

font-size:34px;

}

}

@media(max-width:992px){

nav{

display:none;

}

.menu{

display:block;

}

.hero-content{

flex-direction:column-reverse;

text-align:center;

}

.left,

.right{

width:100%;

}

.left h1{

font-size:45px;

line-height:55px;

}

.buttons{

justify-content:center;

flex-wrap:wrap;

}

.right img{

width:300px;

}

}

    /* WHY SECTION */

@media(max-width:992px){

.why-grid{

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

}

}

@media(max-width:768px){

.section-title h2{

font-size:34px;

}

.why-grid{

grid-template-columns:1fr;

}

.why-card{

padding:35px 25px;

}

}
    /* SERVICES */

@media(max-width:1100px){

.services-grid{

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

}

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

.service-card{

padding:30px;

}

}

    /* STATS */

@media(max-width:992px){

.stats-grid{

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

}

.process-grid{

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

}

}

@media(max-width:768px){

.stats-grid,

.process-grid{

grid-template-columns:1fr;

}

.cta-section h2{

font-size:34px;

}

}

    @media(max-width:992px){

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-form{

margin-top:30px;

}

}

    /*=========================================
CONTACT RESPONSIVE
=========================================*/

@media(max-width:992px){

.contact-wrapper{

grid-template-columns:1fr;

gap:40px;

}

}

@media(max-width:768px){

.contact-info h3{

font-size:32px;

}

.contact-form{

padding:30px 20px;

}

}

    /*==============================
PREMIUM SERVICES RESPONSIVE
==============================*/

@media(max-width:992px){

.service-showcase,
.service-showcase.reverse{

flex-direction:column;

gap:40px;

margin:70px 0;

}

.service-content{

text-align:center;

}

.service-content ul{

text-align:left;

}

.service-content h3{

font-size:32px;

}

}

    @media(max-width:992px){

header{
    position:fixed;
}

.menu{
    display:block;
    cursor:pointer;
    font-size:28px;
}

nav{
    position:absolute;
    top:85px;
    left:0;
    width:100%;
    background:#fff;
    display:none;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
}

nav.active{
    display:block;
}

nav ul{
    flex-direction:column;
    gap:0;
}

nav ul li{
    border-bottom:1px solid #ececec;
}

nav ul li a{
    display:block;
    padding:18px 25px;
    color:#222;
}

}