/* ==========================================
   MICRONETS RESPONSIVE CSS
========================================== */

/* ==============================
   Large Screens
================================ */

@media (max-width:1200px){

.container{
    width:95%;
}

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

.section-title h2{
    font-size:36px;
}

}

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

@media (max-width:992px){

section{
    padding:80px 0;
}

/* Navbar */

.nav-menu{

    position:fixed;

    top:90px;

    right:-100%;

    width:280px;

    height:calc(100vh - 90px);

    background:#fff;

    flex-direction:column;

    justify-content:flex-start;

    padding-top:40px;

    gap:30px;

    transition:.4s;

    box-shadow:-10px 0 30px rgba(0,0,0,.1);

}

.nav-menu.active{

    right:0;

}

.mobile-menu{

    display:block;

}

.navbar .btn-primary{

    display:none;

}

/* Hero */

.hero{

    text-align:center;

    padding-top:150px;

}

.hero-grid{

    grid-template-columns:1fr;

}

.hero-image{

    order:-1;

}

.hero-image img{

    max-width:420px;

}

.hero h1{

    font-size:46px;

}

.hero-buttons{

    justify-content:center;

}

/* About */

.about-grid{

    grid-template-columns:1fr;

}

.about-grid img{

    max-width:550px;

    margin:auto;

}

/* Contact */

.contact-grid{

    grid-template-columns:1fr;

}

/* Stats */

.stats{

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

}

}

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

@media (max-width:768px){

section{

    padding:70px 0;

}

.hero{

    min-height:auto;

}

.hero h1{

    font-size:38px;

    line-height:1.3;

}

.hero p{

    font-size:18px;

}

.section-title h2{

    font-size:32px;

}

.section-title p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

    gap:20px;

}

.btn-secondary{

    margin-left:0;

}

.stats{

    grid-template-columns:1fr;

}

.services-grid{

    grid-template-columns:1fr;

}

.portfolio-grid{

    grid-template-columns:1fr;

}

.testimonial-grid{

    grid-template-columns:1fr;

}

.academy-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    gap:40px;

}

.contact-grid form{

    padding:30px;

}

.hero-image img{

    max-width:320px;

}

.logo img{

    height:50px;

}

.navbar .container{

    height:80px;

}

}

/* ==============================
   Small Phones
================================ */

@media (max-width:576px){

.container{

    width:92%;

}

.hero{

    padding-top:120px;

}

.hero-tag{

    font-size:11px;

    letter-spacing:1px;

}

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:16px;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:28px;

}

.about-grid h3{

    font-size:28px;

}

.service-card{

    padding:35px 25px;

}

.service-card i{

    width:75px;

    height:75px;

    line-height:75px;

    font-size:28px;

}

.portfolio-content{

    padding:25px;

}

.course-card{

    padding:30px 25px;

}

.testimonial{

    padding:30px;

}

.contact-grid form{

    padding:25px;

}

.contact-grid input,
.contact-grid textarea{

    padding:14px;

}

.contact-info h3{

    font-size:26px;

}

.footer-logo{

    width:110px;

}

.social-icons{

    gap:12px;

}

.social-icons a{

    width:45px;

    height:45px;

    line-height:45px;

}

#scrollTop{

    width:50px;

    height:50px;

    right:20px;

    bottom:20px;

}

}

/* ==============================
   Extra Small Devices
================================ */

@media (max-width:400px){

.hero h1{

    font-size:26px;

}

.hero p{

    font-size:15px;

}

.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

}

.stats h2{

    font-size:34px;

}

.section-title h2{

    font-size:24px;

}

.service-card h3{

    font-size:20px;

}

.portfolio-content h3{

    font-size:20px;

}

}

/* ==============================
   Large Desktop
================================ */

@media (min-width:1400px){

.container{

    max-width:1320px;

}

.hero h1{

    font-size:68px;

}

.hero p{

    font-size:22px;

}

.section-title h2{

    font-size:46px;

}

}

/* ==============================
   Print
================================ */

@media print{

header,
footer,
.mobile-menu,
.btn-primary,
.btn-secondary,
#scrollTop{

    display:none !important;

}

body{

    background:#fff;

    color:#000;

}

section{

    padding:20px 0;

}

}