/* ==========================================
   RESPONSIVE DESIGN
========================================== */

/* Large Tablets */

@media (max-width:1024px){

.hero-container,
.container-about,
.contact-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

max-width:100%;

}

.services-grid{

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

}

.why-grid{

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

}

.stats{

display:grid;

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

gap:40px;

}

}
.menu-toggle {
    display: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
}
/* Tablets */

@media (max-width:768px){

.container{

width:95%;

}

header{

height:80px;

}

.logo img{

height:75px;

}

nav ul{

gap:20px;

}

.hero h1{

font-size:42px;

}

.hero h2{

font-size:24px;

}

.hero p{

font-size:18px;

}

.services-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:1fr;

}

.about-text h2{

font-size:34px;

}

.section-title h2{

font-size:34px;

}

}
.menu-toggle {
    display: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
}
/* Mobile Phones */

@media (max-width:576px){

header{
    height:75px;
}

.logo img{
    height:60px;
}

.menu-toggle{
    display:block;
    font-size:28px;
    color:#fff;
    cursor:pointer;
}

nav{
    display:none;
    position:absolute;
    top:75px;
    left:0;
    width:100%;
    background:#0A3B8E;
    padding:20px 0;
}

nav.active{
    display:block;
}

nav ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

}
nav ul li{

margin:0;

}

.hero{

padding:120px 20px 80px;

}

.hero h1{

font-size:34px;

}

.hero h2{

font-size:22px;

}

.hero p{

font-size:17px;

line-height:1.8;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.btn-primary,
.btn-secondary,
.btn{

width:100%;

text-align:center;

}

.container-about{

gap:40px;

}

.about{

padding:70px 20px;

}

.services{

padding:70px 20px;

}

.why-us{

padding:70px 20px;

}

.contact-section{

padding:70px 20px;

}

.contact-form{

padding:25px;

}

footer{

padding:50px 20px;

}

}
menu-toggle {
    display: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
}
/* Featured Projects */

@media (max-width:768px){

    .projects-grid{

        display:grid;
        grid-template-columns:1fr;
        gap:25px;

    }

    .project-card{

        width:100%;
        margin:0 auto;

    }

    .project-card img{

        width:100%;
        height:auto;
        display:block;

    }

}
/* Featured Projects */

@media (max-width:768px){

    .projects{

        padding:70px 20px;

    }

    .projects-grid{

        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:25px;

    }

    .project-card{

        width:100%;

    }

    .project-card img{

        width:100%;
        height:220px;
        object-fit:cover;

    }

}