@media(max-width:768px){

html,
body{
overflow-x:hidden !important;
width:100%;
}

img{
max-width:100%;
height:auto;
}

.navbar{
padding:12px 15px;
}

.hero h1{
font-size:32px !important;
line-height:1.3;
}

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

.hero-btns{
flex-direction:column;
}

.about-section,
.faq-section,
.credit-card-section,
.why-section{
grid-template-columns:1fr !important;
}

.courses-grid,
.gallery-grid,
.testimonial-grid,
.facilities-grid{
grid-template-columns:1fr !important;
}

.footer-container{
grid-template-columns:1fr !important;
text-align:center;
}

}
@media(max-width:991px){

.hero-content{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
}

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

.hero-left p{
    font-size:17px;
}

.hero-right img{
    height:auto;
    max-width:100%;
}

}
@media(max-width:768px){

.about-section{
    padding:20px 15px !important;
}

.about-section h2{
    font-size:28px !important;
    line-height:1.2 !important;
    margin-bottom:15px !important;
    text-align:center;
}

.about-section p{
    font-size:15px !important;
    line-height:1.8 !important;
    text-align:center;
}

.about-section h3{
    font-size:22px !important;
    margin-top:20px !important;
    margin-bottom:10px !important;
    text-align:center;
}

.motto-box{
    padding:20px !important;
    margin:20px 0 !important;
}

}
/* ADMISSION MOBILE */

@media(max-width:768px){

.admission-section{
    grid-template-columns:1fr;
    gap:30px;
    padding:0 20px;
}

.registration-form{
    padding:20px;
}

.registration-form h2{
    font-size:28px;
}

.form-row{
    grid-template-columns:1fr;
}

.registration-form input,
.registration-form select,
.registration-form textarea{
    padding:10px;
    font-size:14px;
}

.registration-form button{
    height:48px;
    font-size:15px;
}

}
/* Admission Section Mobile */

@media (max-width:768px){

.admission-section{
    padding:40px 15px;
}

.admission-container{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    padding:30px 20px;
    gap:30px;
    border-radius:20px;
    overflow:hidden;
}

.admission-content{
    width:100%;
    text-align:center;
}

.admission-content h2{
    font-size:46px;
    line-height:1.1;
}

.admission-content p{
    font-size:18px;
    line-height:1.7;
}

.admission-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.admission-btn-primary,
.admission-btn-secondary{
    width:100%;
    text-align:center;
}

.admission-image{
    width:100%;
    display:flex;
    justify-content:center;
}

.admission-image img{
    width:100%;
    max-width:280px;
    height:auto;
}

}
/* Footer Mobile */

.footer-about{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.footer-logo{
    display:block;
    margin:0 auto 20px;
}

.footer-logo img{
    display:block;
    margin:0 auto;
}

.footer-contact{
    text-align:center;
}

.footer-social{
    justify-content:center;
}
/* ===========================
   MOBILE RESPONSIVE FIX
=========================== */

@media only screen and (max-width:768px){

html,
body{
    width:100%;
    overflow-x:hidden;
}

/* Common Container */

.container,
.wrapper,
section,
.founder-section,
.about-section,
.callback-section,
.achievement-section,
.contact-section,
.course-section,
.credit-card-section,
.why-section{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:20px !important;
}

/* Founder */

.founder-section{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center;
    text-align:center;
    gap:25px;
}

.founder-image{
    width:100% !important;
    max-width:280px !important;
    margin:0 auto !important;
}

.founder-image img{
    width:100% !important;
    height:auto !important;
    display:block;
    object-fit:cover;
    border-radius:18px;
}

.founder-content{
    width:100% !important;
}

.founder-content h2{
    font-size:30px !important;
}

.founder-content h4{
    font-size:18px !important;
}

.founder-content p{
    font-size:16px !important;
    line-height:1.8;
}

/* Grid Sections */

.about-section,
.contact-section,
.credit-card-section,
.callback-section,
.course-two-col{
    display:flex !important;
    flex-direction:column !important;
}

/* Images */

img{
    max-width:100% !important;
    height:auto !important;
}

/* Remove Fixed Width */

[class*="container"],
[class*="section"],
[class*="grid"]{
    max-width:100% !important;
}

/* Prevent Overflow */

*{
    max-width:100%;
    box-sizing:border-box;
}

/* WhatsApp */

.whatsapp-btn{
    width:55px !important;
    height:55px !important;
    right:15px !important;
    bottom:15px !important;
}

}
/* ==========================
   WHY CHOOSE US - MOBILE
========================== */

@media (max-width:768px){

.why-choose-us{
    padding:40px 20px;
}

.why-container{
    display:flex !important;
    flex-direction:column !important;
    gap:30px;
    align-items:center;
}

.why-content{
    width:100%;
    order:2;
}

.why-image{
    width:100%;
    max-width:320px;
    order:1;
    margin:auto;
}

.why-image img{
    width:100%;
    height:auto;
    display:block;
}

.why-content h2{
    font-size:28px;
    line-height:1.4;
    text-align:center;
}

.intro-text{
    font-size:16px;
    line-height:1.8;
    text-align:center;
}

.why-list{
    padding:0;
}

.why-list li{
    font-size:17px;
    margin-bottom:15px;
}

.why-btn{
    display:block;
    width:100%;
    text-align:center;
    margin-top:25px;
}

}
/* =========================
   ABOUT PAGE MOBILE FIX
========================= */

@media (max-width:768px){

.about-section{
    padding:40px 20px !important;
}

.about-container{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:30px !important;
}

.about-content{
    width:100% !important;
    order:2;
    text-align:left;
}

.about-image{
    width:100% !important;
    max-width:320px !important;
    margin:auto !important;
    order:1;
}

.about-image img{
    width:100% !important;
    height:auto !important;
    display:block;
}

.about-content h1,
.about-content h2{
    font-size:32px !important;
    line-height:1.3 !important;
}

.about-content p{
    font-size:16px !important;
    line-height:1.8 !important;
}

.breadcrumb{
    flex-wrap:wrap;
    font-size:15px;
}

}
/* ===========================
   MOBILE RESPONSIVE
=========================== */
@media (max-width:768px){

html,
body{
    width:100%;
    overflow-x:hidden;
}

/* Common */
.container,
.about-container,
.about-hero-content,
.why-container,
.facilities-container,
.callback-container{
    width:100%;
    max-width:100%;
    padding:0 20px;
    margin:auto;
}

/* Hero */
.about-hero{
    padding:50px 20px;
    min-height:auto;
}

.about-hero-content{
    display:flex;
    flex-direction:column;
    gap:25px;
    text-align:center;
}

.about-hero-text{
    order:2;
}

.about-hero-image{
    order:1;
    text-align:center;
}

.about-hero-image img{
    width:90%;
    max-width:280px;
    height:auto;
}

/* Heading */
.about-hero h1{
    font-size:36px;
    line-height:1.2;
}

.about-hero p{
    font-size:16px;
    line-height:1.8;
}

/* Buttons */
.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.hero-buttons a{
    width:100%;
    text-align:center;
}

/* Why Choose */
.why-container{
    display:flex;
    flex-direction:column;
}

.why-image{
    order:1;
}

.why-content{
    order:2;
}

.why-image img{
    width:100%;
    max-width:300px;
}

.why-list li{
    font-size:16px;
}

/* Cards */
.cards,
.grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}

/* Footer */
.footer-container{
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
}

/* Images */
img{
    max-width:100%;
    height:auto;
}

}
/* ===================================
   MOBILE RESPONSIVE CSS
=================================== */

@media only screen and (max-width:768px){

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;
}

/* Container */

.container{
    width:100%;
    max-width:100%;
    padding:0 15px;
    margin:auto;
}

/* Sections */

section{
    padding:40px 15px !important;
}

/* Hero */

.about-hero-content,
.hero-content,
.about-container,
.why-container,
.admission-section,
.contact-section,
.callback-section,
.credit-card-section,
.founder-section{
    display:flex !important;
    flex-direction:column !important;
    gap:25px;
}

.hero-left,
.hero-right,
.about-content,
.about-image,
.why-content,
.why-image{
    width:100% !important;
}

.hero-left h1,
.about-content h1{
    font-size:32px !important;
    line-height:1.2;
}

.hero-left p,
.about-content p{
    font-size:16px !important;
    line-height:1.8;
}

.hero-right img,
.about-image img,
.why-image img{
    width:100%;
    max-width:300px;
    margin:auto;
    display:block;
    height:auto;
}

/* Grid */

.courses-grid,
.gallery-grid,
.testimonial-grid,
.facilities-grid,
.info-grid,
.stats,
.footer-container,
.vm-container,
.vision-mission,
.vision-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px;
}

/* Cards */

.course-card,
.gallery-item,
.testimonial-card,
.info-card,
.vision-card,
.mission-card,
.facility-card{
    width:100% !important;
    max-width:100%;
}

/* Form */

.form-row{
    grid-template-columns:1fr !important;
}

/* Footer */

.footer-container{
    text-align:center;
}

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

/* Images */

img{
    max-width:100%;
    height:auto;
}

/* Buttons */

.hero-btns,
.admission-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.hero-btns a,
.admission-buttons a{
    width:100%;
    text-align:center;
}

}/* ==========================
   VISION & MISSION MOBILE
========================== */

@media (max-width:768px){

.vision-mission-section{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:20px !important;
    padding:20px !important;
}

.vision-card,
.mission-card{
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
    padding:30px 20px !important;
    height:auto !important;
}

.vision-card h2,
.mission-card h2{
    font-size:34px !important;
    text-align:center !important;
}

.vision-card p,
.mission-card p,
.mission-card li{
    font-size:16px !important;
    line-height:1.8 !important;
}

.card-icon{
    margin:0 auto 20px !important;
}

}
/* =========================
   BBA PAGE MOBILE FIX
========================= */

@media (max-width:768px){

.course-banner{
    padding:40px 15px !important;
    height:auto !important;
}

.course-banner-content{
    display:flex !important;
    flex-direction:column !important;
    gap:25px !important;
    align-items:center !important;
}

.course-content{
    width:100% !important;
    max-width:100% !important;
    text-align:center;
}

.course-content h1{
    font-size:34px !important;
    line-height:1.2 !important;
}

.course-content p{
    font-size:16px !important;
    line-height:1.8 !important;
}

.course-form{
    width:100% !important;
    max-width:100% !important;
}

.course-grid4{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
}

.course-two-col{
    display:flex !important;
    flex-direction:column !important;
    gap:25px !important;
}

.course-image{
    width:100% !important;
}

.course-cta{
    padding:30px 20px !important;
    text-align:center;
}

.course-cta h2{
    font-size:30px !important;
}

}