/* ===========================
        RESPONSIVE.CSS
===========================*/

@media(max-width:1200px){

.container{

width:95%;

}

.hero-content h1{

font-size:58px;

}

.services-grid,
.course-grid,
.blog-grid,
.video-grid,
.testimonial-grid{

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

}

.portfolio-grid{

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

}

.about-grid,
.contact-grid{

grid-template-columns:1fr;

gap:60px;

}

.about-image{

order:-1;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}


/* ========================= */

@media(max-width:992px){

header{

padding:18px 0;

}

.logo{

font-size:28px;

letter-spacing:4px;

}

.hamburger{

display:flex;

z-index:9999;

}

.menu{

position:fixed;

top:0;

right:-100%;

width:300px;

height:100vh;

background:#181C14;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:35px;

transition:.4s;

z-index:9998;

}

.menu.active{

right:0;

}

.mobile-book{

display:block;

}

.hero-content{

text-align:center;

margin:auto;

}

.hero-content h1{

font-size:48px;

}

.hero-buttons{

justify-content:center;

}

.stats-grid{

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

}

.services-grid,
.portfolio-grid,
.course-grid,
.blog-grid,
.video-grid,
.testimonial-grid,
.certificate-grid{

grid-template-columns:1fr 1fr;

}

.about-info{

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

}

.contact-grid{

gap:40px;

}

}


/* ========================= */

@media(max-width:768px){

section{

padding:90px 0;

}

.section-title{

margin-bottom:50px;

}

.section-title h2{

font-size:36px;

}

.hero{

text-align:center;

}

.hero-content h1{

font-size:38px;

line-height:1.6;

}

.hero-content p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.btn,
.btn-outline{

width:100%;

justify-content:center;

}

.stats-grid{

grid-template-columns:1fr 1fr;

gap:25px;

}

.stat h2{

font-size:42px;

}

.services-grid,
.course-grid,
.blog-grid,
.video-grid,
.portfolio-grid,
.certificate-grid,
.testimonial-grid{

grid-template-columns:1fr;

}

.about-info{

grid-template-columns:1fr;

}

.about-content h2{

font-size:40px;

}

.about-image img{

height:450px;

}

.contact-form{

padding:25px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social-links{

justify-content:center;

}

}


/* ========================= */

@media(max-width:576px){

.container{

width:92%;

}

.logo{

font-size:24px;

}

.hero-content h1{

font-size:32px;

}

.hero-content p{

font-size:15px;

}

.hero-subtitle{

font-size:12px;

}

.stats-grid{

grid-template-columns:1fr;

}

.stat{

padding:15px 0;

}

.service-card{

padding:30px 20px;

}

.service-card h3{

font-size:22px;

}

.blog-content h3{

font-size:20px;

}

.course-card h3{

font-size:20px;

}

.contact-info h2{

font-size:34px;

}

.contact-form input,
.contact-form textarea,
.contact-form select{

font-size:14px;

padding:15px;

}

.mobile-book{

left:15px;

right:15px;

bottom:15px;

padding:16px;

font-size:15px;

}

}


/* ========================= */

@media(max-width:400px){

.hero-content h1{

font-size:28px;

}

.logo{

font-size:22px;

letter-spacing:2px;

}

.section-title h2{

font-size:30px;

}

}