/* =====================================================
   MindMedia Responsive Design
   Version 1.0
===================================================== */

/* ===========================
   Large Tablets
=========================== */

@media (max-width:1200px){

.container{

    width:95%;

}

.hero-content h1{

    font-size:48px;

}

}


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

@media (max-width:992px){

header .container{

    flex-direction:column;

    gap:20px;

}

nav ul{

    gap:20px;

    flex-wrap:wrap;

    justify-content:center;

}

.hero-content{

    width:100%;

}

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:18px;

}

.about-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-grid{

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

}

}


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

@media (max-width:768px){

.logo img{

    height:50px;

}

nav ul{

    flex-direction:column;

    gap:12px;

}

.hero{

    height:auto;

    min-height:100vh;

}

.hero-content{

    padding-top:120px;

}

.hero-content h1{

    font-size:34px;

}

.hero-content p{

    font-size:17px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

}

.service-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.stats-grid{

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

}

.gallery-grid{

    grid-template-columns:1fr;

}

.page-banner{

    height:300px;

}

.page-banner h1{

    font-size:40px;

}

.footer-grid{

    grid-template-columns:1fr;

}

.footer-column{

    text-align:center;

}

.footer-column p{

    text-align:center;

}

.footer-logo{

    margin:auto auto 20px;

}

.contact-form button{

    width:100%;

}

}


/* ===========================
   Small Mobile
=========================== */

@media (max-width:480px){

.container{

    width:92%;

}

.hero-content h1{

    font-size:28px;

}

.hero-content p{

    font-size:16px;

}

section{

    padding:70px 0;

}

section h2{

    font-size:30px;

}

.stats-grid{

    grid-template-columns:1fr;

}

.stats-card h3{

    font-size:40px;

}

.page-banner h1{

    font-size:32px;

}

.page-banner p{

    font-size:16px;

}

.service-card{

    padding:25px;

}

.gallery-card img{

    height:220px;

}

}