/* ==========================================
   RESPONSIVE DESIGN
   Tablets (1200px and below)
========================================== */

@media (max-width:1200px){

.container{

    width:95%;

}

.hero-content{

    grid-template-columns:1fr;

    text-align:center;

    gap:50px;

}

.hero-left p{

    margin-left:auto;
    margin-right:auto;

}

.hero-buttons{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;

}

.hero-card{

    max-width:700px;

    margin:auto;

}

.footer-grid{

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

    gap:40px;

}

}

/* ==========================================
   Small Tablets
========================================== */

@media (max-width:992px){

header .container{

    flex-direction:column;

    padding:20px 0;

}

.logo{

    margin-bottom:20px;

}

nav ul{

    flex-wrap:wrap;

    justify-content:center;

}

nav ul li{

    margin:10px 15px;

}

.hero{

    padding-top:180px;

}

.hero-left h1{

    font-size:56px;

}

.hero-left p{

    font-size:18px;

}

.section-title h2{

    font-size:38px;

}

.about-grid,
.service-grid,
.why-grid,
.contact-grid{

    grid-template-columns:1fr;

}

.stats .container{

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

}

.tech-grid{

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

}

}

/* ==========================================
   Mobile Landscape
========================================== */

@media (max-width:768px){

section{

    padding:70px 0;

}

.hero{

    min-height:auto;

}

.hero-watermark{

    width:350px;

    opacity:.05;

}

.hero-left h1{

    font-size:42px;

    line-height:1.2;

}

.subtitle{

    font-size:15px;

}

.hero-left p{

    font-size:17px;

}

.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

    margin:10px 0;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.section-title h2{

    font-size:32px;

}

.section-title p{

    font-size:16px;

}

.about-card,
.service-card,
.why-box,
.contact-card,
.stat-card{

    padding:30px;

}

.career-box{

    padding:35px;

}

.cta h2{

    font-size:34px;

}

.cta p{

    font-size:18px;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo{

    margin:auto auto 20px;

}

}