/*==================================================
    RESPONSIVE.CSS
    PART 1
    Desktop
    Laptop
    Tablet
===================================================*/

/*======================================
Large Desktop
1400px+
======================================*/

@media (min-width:1400px){

.container{

max-width:1320px;

}

.hero h1{

font-size:4.5rem;

}

.section-title{

font-size:3rem;

}

}


/*======================================
Desktop
1200px
======================================*/

@media (max-width:1199px){

.hero h1{

font-size:3.5rem;

}

.section-title{

font-size:2.5rem;

}

.hero-image{

max-width:500px;

margin:auto;

}

.timeline-item{

width:30%;

margin-bottom:50px;

}

.timeline-wrapper::before{

display:none;

}

}


/*======================================
Laptop
992px
======================================*/

@media (max-width:991px){

section{

padding:80px 0;

}

.navbar{

background:#ffffff;

padding:15px 0;

}

.navbar-brand span{

font-size:1rem;

}

.navbar-collapse{

background:#fff;

padding:20px;

margin-top:15px;

border-radius:15px;

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

}

.nav-link{

margin:12px 0;

}

.hero{

text-align:center;

padding-top:120px;

}

.hero h1{

font-size:3rem;

}

.hero p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:50px;

max-width:420px;

}

.hero-stats{

text-align:center;

}

.about{

text-align:center;

}

.partner-box{

margin-top:40px;

}

.timeline-wrapper{

justify-content:center;

gap:40px;

}

.timeline-item{

width:45%;

}

.teacher-kit{

text-align:center;

}

.teacher-kit img{

margin-bottom:40px;

}

.contact{

text-align:center;

}

.contact form{

margin-top:40px;

}

.footer{

text-align:center;

}

.social-links{

justify-content:center;

}

}


/*======================================
Tablet
768px
======================================*/

@media (max-width:768px){

.hero{

padding-top:110px;

}

.hero h1{

font-size:2.5rem;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:260px;

margin:8px 0;

}

.hero-stats{

margin-top:50px;

}

.hero-stats h2{

font-size:2rem;

}

.section-title{

font-size:2rem;

}

.section-description{

font-size:.95rem;

}

.timeline-item{

width:100%;

}

.timeline-icon{

margin-bottom:20px;

}

.level-card{

margin-bottom:25px;

}

.feature-card{

margin-bottom:25px;

}

.activity-card{

margin-bottom:25px;

}

.skill-card{

margin-bottom:20px;

}

.award-card{

margin-bottom:30px;

}

.gallery img{

margin-bottom:20px;

}

.contact form{

padding:25px;

}

.cta-section h2{

font-size:2rem;

}

.footer{

padding:60px 0 20px;

}

.footer .col-lg-4{

margin-bottom:40px;

}

.whatsapp-btn{

width:55px;

height:55px;

font-size:24px;

right:20px;

bottom:85px;

}

.back-to-top{

width:50px;

height:50px;

right:20px;

bottom:20px;

}

}

/*======================================
END OF PART 1

PART 2

Mobile

Small Mobile

Landscape

Utility Fixes
======================================*/


/*==================================================
    RESPONSIVE.CSS
    PART 2
    Mobile
    Small Mobile
    Landscape
    Final Utility Fixes
===================================================*/


/*======================================
Mobile Devices
576px
======================================*/

@media (max-width:576px){

body{
overflow-x:hidden;
}

section{
padding:70px 0;
}

.container{
padding-left:20px;
padding-right:20px;
}

.navbar-brand img{
height:45px;
}

.navbar-brand span{
font-size:.9rem;
font-weight:700;
}

.hero{
min-height:auto;
padding:120px 0 80px;
text-align:center;
}

.hero h1{
font-size:2.1rem;
line-height:1.3;
}

.hero p{
font-size:.95rem;
margin-top:20px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.hero-buttons .btn{
width:100%;
max-width:280px;
margin:8px 0;
}

.hero-image{
max-width:300px;
margin:40px auto 0;
}

.hero-stats .col-4{
margin-bottom:20px;
}

.hero-stats h2{
font-size:1.6rem;
}

.hero-stats p{
font-size:.8rem;
}

.section-title{
font-size:1.8rem;
}

.section-description{
font-size:.9rem;
}

.about img,
.teacher-kit img{
margin-bottom:30px;
}

.glass-card,
.feature-card,
.level-card,
.activity-card,
.skill-card,
.award-card{
padding:25px;
margin-bottom:25px;
}

.partner-box img{
height:45px;
}

.partner-box span{
font-size:24px;
}

.timeline-wrapper{
display:block;
}

.timeline-item{
width:100%;
margin-bottom:40px;
}

.timeline-wrapper::before{
display:none;
}

.timeline-icon{
width:75px;
height:75px;
font-size:28px;
}

.kit-card{
margin-bottom:20px;
}

.gallery .col-lg-4{
margin-bottom:20px;
}

.testimonial-card{
padding:30px 20px;
}

.contact form{
padding:20px;
}

.contact .form-control{
padding:12px;
}

.cta-section{
padding:70px 20px;
}

.cta-section h2{
font-size:1.8rem;
}

.footer{
text-align:center;
padding:60px 0 20px;
}

.footer .col-lg-4{
margin-bottom:40px;
}

.social-links{
justify-content:center;
}

.whatsapp-btn{

width:55px;
height:55px;
right:15px;
bottom:80px;
font-size:24px;

}

.back-to-top{

width:50px;
height:50px;
right:15px;
bottom:15px;

}

}


/*======================================
Small Mobile
480px
======================================*/

@media (max-width:480px){

.hero h1{
font-size:1.9rem;
}

.hero p{
font-size:.9rem;
}

.section-title{
font-size:1.6rem;
}

.section-tag{
font-size:.75rem;
padding:7px 18px;
}

.btn{
padding:12px 24px;
font-size:.9rem;
}

.hero-badge{
font-size:.8rem;
padding:10px 18px;
}

.feature-icon,
.activity-icon,
.level-icon{

width:70px;
height:70px;
font-size:28px;

}

.glass-card,
.feature-card,
.level-card,
.activity-card,
.skill-card,
.award-card{

padding:22px;

}

.gallery-img{
border-radius:16px;
}

}


/*======================================
Extra Small
360px
======================================*/

@media (max-width:360px){

.hero h1{
font-size:1.7rem;
}

.hero-buttons .btn{
max-width:100%;
}

.navbar-brand span{
display:none;
}

.section-title{
font-size:1.4rem;
}

.hero-image{
max-width:240px;
}

.contact form{
padding:15px;
}

.footer{
font-size:.9rem;
}

}


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

@media (max-height:500px) and (orientation:landscape){

.hero{

padding:120px 0 60px;

}

.hero h1{

font-size:2.2rem;

}

.hero-image{

max-width:250px;

}

}


/*======================================
Animation Optimization
======================================*/

@media (max-width:768px){

.shape{

display:none;

}

.hero-video{

object-position:center;

}

[data-aos]{

transform:none !important;

opacity:1 !important;

}

}


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

@media print{

.navbar,
.footer,
.whatsapp-btn,
.back-to-top,
.hero-video{

display:none !important;

}

body{

background:#fff;

color:#000;

}

section{

padding:20px 0;

}

}


/*======================================
END OF RESPONSIVE.CSS
======================================*/