/*=========================================================
MetaTechX LLP
Responsive CSS
=========================================================*/

/* ================================
Large Laptop
================================ */

@media (max-width:1400px){

.container{

width:95%;

}

.hero h1{

font-size:52px;

}

}

/* ================================
Laptop
================================ */

@media (max-width:1200px){

.hero .container{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

order:2;

}

.hero-right{

order:1;

}

.hero-buttons{

justify-content:center;

}

.services-grid{

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

}

.contact-grid{

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

}

.footer-grid{

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

}

.feature-card{

grid-template-columns:1fr;

}

.form-grid{

grid-template-columns:1fr;

}

}

/* ================================
Tablet
================================ */

@media (max-width:992px){

.nav-links{

position:fixed;

top:85px;

left:-100%;

width:100%;

height:calc(100vh - 85px);

background:#071B36;

flex-direction:column;

justify-content:flex-start;

align-items:center;

padding-top:40px;

transition:.4s;

}

.nav-links.active{

left:0;

}

.nav-links li{

margin:15px 0;

}

.hamburger{

display:block;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.stats .container{

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

}

.services-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.signature-section{

flex-direction:column;

gap:40px;

}

.cert-details{

flex-direction:column;

gap:15px;

text-align:center;

}

.certificate{

padding:20px;

}

.cert-border{

padding:30px;

}

}

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

@media (max-width:768px){

body{

font-size:15px;

}

.hero{

padding-top:100px;

padding-bottom:70px;

}

.hero h1{

font-size:34px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-outline{

width:100%;

text-align:center;

}

.stats{

padding:60px 0;

}

.stats .container{

grid-template-columns:1fr;

gap:20px;

}

.stat{

padding:25px;

}

.feature-card{

padding:25px;

}

.registration-card{

padding:25px;

}

#bookingForm{

padding:25px;

}

.question-card{

padding:25px;

}

.timer{

width:180px;

font-size:20px;

}

.cert-title{

font-size:30px;

}

.cert-name{

font-size:32px;

}

.cert-course{

font-size:22px;

}

.grade-box{

font-size:22px;

padding:12px 25px;

}

.modal-content{

width:95%;

padding:25px;

}

.whatsapp-float{

width:58px;

height:58px;

font-size:30px;

bottom:18px;

right:18px;

}

#scrollTop{

width:55px;

height:55px;

left:18px;

bottom:18px;

}

}

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

@media (max-width:576px){

.logo img{

width:160px;

height:auto;

}

.navbar{

height:75px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:16px;

}

h2{

font-size:30px;

}

h3{

font-size:20px;

}

.service-card{

padding:30px 20px;

}

.contact-card{

padding:25px;

}

.feature-card{

padding:20px;

}

.question-card{

padding:20px;

}

.registration-card{

padding:20px;

}

#bookingForm{

padding:20px;

}

.certificate{

padding:10px;

}

.cert-border{

padding:20px;

border-width:8px;

}

.cert-logo img{

max-width:180px;

}

.cert-title{

font-size:24px;

}

.cert-name{

font-size:26px;

}

.cert-course{

font-size:18px;

}

.cert-subtitle{

font-size:15px;

}

.grade-box{

font-size:18px;

}

.signature-section img{

height:55px;

}

.footer-grid{

gap:30px;

}

}

/* ================================
Landscape Phones
================================ */

@media (max-height:500px){

.hero{

padding-top:120px;

padding-bottom:50px;

}

.nav-links{

overflow-y:auto;

}

}