/*=========================================
        LARGE DESKTOP
=========================================*/

@media (min-width:1600px){

.container{

max-width:1450px;

}

.hero h1{

font-size:72px;

}

.hero h2{

font-size:36px;

}

.section-title h2{

font-size:52px;

}

}



/*=========================================
            LAPTOP
=========================================*/

@media(max-width:1200px){

.container{

width:94%;

}

.hero-grid{

gap:40px;

}

.hero h1{

font-size:46px;

}

.hero h2{

font-size:26px;

}

nav ul{

gap:20px;

}

.section-title h2{

font-size:38px;

}

.about-grid{

gap:40px;

}

}



/*=========================================
            TABLET
=========================================*/

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-image{

order:-1;

}

.hero-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.hero-stat{

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

margin-top:40px;

}

.about-grid{

grid-template-columns:1fr;

}

.course-grid{

grid-template-columns:1fr;

}

.project-grid{

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

}

.footer-grid{

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

}

nav{

display:none;

}

.mobile-menu{

display:block;

}

.btn{

padding:13px 28px;

}

}
/*=========================================
                MOBILE
=========================================*/

@media(max-width:768px){

section{

padding:70px 0;

}

.hero{

padding-top:140px;

}

.hero h1{

font-size:36px;

}

.hero h2{

font-size:22px;

}

.hero p{

font-size:17px;

}

.hero-stat{

grid-template-columns:1fr 1fr;

gap:15px;

}

.hero-stat div{

padding:18px;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:16px;

}

.service-card{

padding:30px 22px;

}

.course-body{

padding:22px;

}

.overlay h3{

font-size:20px;

}

.about-grid h2{

font-size:32px;

}

.contact-form input,

.contact-form textarea{

padding:15px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.logo h2{

font-size:18px;

}

.logo span{

display:none;

}

}



/*=========================================
            SMALL MOBILE
=========================================*/

@media(max-width:480px){

.container{

width:92%;

}

.hero h1{

font-size:30px;

}

.hero h2{

font-size:20px;

}

.hero-stat{

grid-template-columns:1fr;

}

.project-grid{

grid-template-columns:1fr;

}

.btn{

width:100%;

text-align:center;

margin-bottom:12px;

}

.btn-outline{

width:100%;

margin-right:0;

}

.section-title h2{

font-size:28px;

}

.service-grid{

grid-template-columns:1fr;

}

.course-grid{

grid-template-columns:1fr;

}

.testimonial-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

}