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

@media (min-width:1400px){

.container{
    max-width:1320px;
}

.hero-section{
    padding:120px 0;
}

.hero-section h1{
    font-size:68px;
}

}


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

@media (max-width:1199px){

.hero-section h1{
    font-size:50px;
}

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

.about-content h2{
    font-size:36px;
}

}


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

@media (max-width:991px){

section{
    padding:70px 0;
}

.navbar{
    padding:12px 0;
}

.navbar-brand{
    font-size:28px;
}

.navbar-nav{
    background:#fff;
    padding:20px;
    margin-top:15px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.nav-item{
    margin:8px 0;
}

.hero-section{
    text-align:center;
    padding:80px 0;
}

.hero-section h1{
    font-size:42px;
}

.hero-board{
    justify-content:center;
}

.hero-image{
    margin-top:40px;
}

.about-image{
    margin-bottom:40px;
}

.experience-box{
    right:10px;
}

.counter-box{
    margin-bottom:30px;
}

.class-card{
    margin-bottom:30px;
}

.feature-box{
    margin-bottom:30px;
}

.process-card{
    margin-bottom:30px;
}

.footer{
    text-align:center;
}

.footer-social{
    margin-top:20px;
}

}


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

@media (max-width:767px){

.top-bar{
    text-align:center;
}

.top-bar .text-md-start,
.top-bar .text-md-end{
    text-align:center !important;
}

.top-bar a{
    display:inline-block;
    margin:5px;
}

.hero-section{
    padding:60px 0;
}

.hero-tag{
    font-size:13px;
}

.hero-section h1{
    font-size:34px;
}

.hero-section p{
    font-size:15px;
}

.hero-board span{
    padding:10px 18px;
    font-size:14px;
}

.btn{
    width:100%;
    margin-bottom:12px;
}

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

.about-content h2{
    font-size:30px;
}

.about-list li{
    font-size:15px;
}

.feature-icon{
    width:70px;
    height:70px;
    line-height:70px;
    font-size:28px;
}

.feature-box{
    padding:30px 20px;
}

.class-content{
    padding:20px;
}

.class-content h3{
    font-size:22px;
}

.demo-form,
.contact-form{
    padding:25px;
}

.contact-box{
    margin-bottom:25px;
}

.footer{
    padding-top:50px;
}

.footer-logo{
    font-size:28px;
}

.whatsapp-float,
.call-float{

    width:55px;
    height:55px;
    font-size:22px;

}

.scroll-top{

    width:50px;
    height:50px;
    font-size:20px;

}

}


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

@media (max-width:576px){

.hero-section h1{
    font-size:28px;
}

.hero-board{
    gap:10px;
}

.hero-board span{
    width:100%;
    text-align:center;
}

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

.about-content h2{
    font-size:26px;
}

.counter-box h2{
    font-size:34px;
}

.experience-box{

    position:relative;
    right:0;
    bottom:0;
    margin-top:20px;

}

.footer{
    text-align:center;
}

}


/*====================================
Sticky Mobile Bottom Bar
====================================*/

.mobile-bottom-bar{

    display:none;

}

@media(max-width:768px){

.mobile-bottom-bar{

display:flex;

position:fixed;

bottom:0;

left:0;

width:100%;

height:60px;

background:#fff;

box-shadow:0 -5px 20px rgba(0,0,0,.15);

z-index:99999;

}

.mobile-bottom-bar a{

flex:1;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

font-size:13px;

font-weight:600;

color:#222;

text-decoration:none;

}

.mobile-bottom-bar a i{

font-size:20px;

margin-bottom:2px;

}

.mobile-call{

background:#0D47A1;

color:#fff !important;

}

.mobile-whatsapp{

background:#25D366;

color:#fff !important;

}

.mobile-location{

background:#FF6B00;

color:#fff !important;

}

body{

padding-bottom:60px;

}

}


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

.fade-up{

animation:fadeup .8s ease;

}

@keyframes fadeup{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.zoom{

animation:zoom .7s ease;

}

@keyframes zoom{

0%{

transform:scale(.8);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}