/* ==========================================
   RESPONSIVE.CSS
   Mobile First
========================================== */

/* Reset */

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

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

*{
    box-sizing:border-box;
}

/* ==========================================
   TABLETS
========================================== */

@media (max-width:992px){

section{
    padding:80px 25px;
}

.container{
    width:100%;
    max-width:100%;
}

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

html{
    font-size:15px;
}

body{
    overflow-x:hidden;
}

/* Sections */

section{

padding:70px 20px;

}

/* Headings */

section h2{

font-size:38px;

margin-bottom:35px;

}

/* Paragraph */

section p{

font-size:16px;

line-height:28px;

}

/* Images */

img{

max-width:100%;

height:auto;

}

/* Buttons */

button,
.admission-btn,
.hero-buttons a{

width:100%;

max-width:100%;

}

/* Cards */

.course-card,
.facility-card,
.trainer-card,
.stat-box,
.info-box,
.testimonial-box{

width:100%;

}

}
/* ==========================================
   MOBILE NAVIGATION
========================================== */

.menu-toggle{

display:none;

background:none;

border:none;

color:#D4AF37;

font-size:34px;

cursor:pointer;

z-index:1002;

}

/* Tablet & Mobile */

@media (max-width:992px){

header{

width:100%;

}

nav{

padding:14px 20px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

    font-size:24px;
    white-space:nowrap;

}

/* Hide desktop button */

.admission-btn{

display:none;

}

/* Hamburger */

.menu-toggle{

display:flex;

align-items:center;

justify-content:center;

width:46px;

height:46px;

}

/* Mobile Menu */

nav ul{

position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:#111;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:28px;

transition:.35s;

z-index:1001;

box-shadow:-15px 0 40px rgba(0,0,0,.45);

}

nav ul.active{

right:0;

}

nav ul li{

margin:0;

}

nav ul li a{

font-size:20px;

}

}
/* Prevent background scrolling */

body.menu-open{

overflow:hidden;

}
/* ==========================================
   WHATSAPP MOBILE FIX
========================================== */

.whatsapp-btn{

display:flex !important;

position:fixed !important;

right:15px !important;

bottom:15px !important;

width:55px;

height:55px;

z-index:99999;

}
/* Mobile Form */
@media (max-width:768px){

#admissionForm input,
#admissionForm select,
#admissionForm button{

    width:100%;
    height:56px;
    padding:0 16px;
    font-size:16px;
    line-height:56px;
}

#admissionForm textarea{

    width:100%;
    min-height:120px;
    padding:16px;
    font-size:16px;
    line-height:1.6;
    resize:vertical;
}
}

/* ==========================================
   HERO MOBILE
========================================== */

@media (max-width:768px){

.hero{

    text-align:center;
    justify-content:center;
    align-items:center;

    padding:90px 20px 15px;
    gap:20px;

}

.hero-content h1{

    font-size:36px;
    line-height:1.2;
    margin-bottom:18px;

}

.hero-content ul{

    list-style:none;
    padding:0;
    margin:20px 0;

}

.hero-content ul li{

    font-size:15px;
    line-height:1.8;
    margin-bottom:10px;

}

.hero-buttons{

    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:20px;
    margin-bottom:10px;

}
.hero-buttons a{

    width:100%;
    justify-content:center;

}

.hero-image img{

    width:100%;
    max-width:300px;
    margin:auto;
    border-radius:22px;

}

.hero-glow{

    width:120px;
    height:120px;
    filter:blur(40px);
    opacity:.5;

}

}   
/* ==========================================
   ABOUT MOBILE
========================================== */

@media (max-width:768px){

.about{

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:35px;

}

.about-image{

    width:100%;

}

.about-image img{

    width:100%;
    max-width:320px;
    margin:0 auto;
    border-radius:20px;

}

.about-text{

    width:100%;

}

.about-text h2{

    font-size:34px;
    text-align:center;
    margin-bottom:20px;

}

.about-text p{

    font-size:16px;
    line-height:1.8;
    text-align:center;
    margin-bottom:20px;

}

.stats{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:25px;

}

.stat-box{

    padding:18px;

}

.stat-box h3{

    font-size:28px;

}

.stat-box p{

    font-size:14px;
    line-height:1.5;

}

}
/* ==========================================
   COURSES MOBILE
========================================== */

@media (max-width:768px){

.course-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:25px;

}

.course-card{

    width:100%;
    border-radius:22px;
    overflow:hidden;

}

.course-card img{

    width:100%;
    height:220px;
    object-fit:cover;

}

.course-content{

    padding:22px;

}

.course-content h3{

    font-size:24px;
    line-height:1.4;
    margin-bottom:15px;

}

.course-content p{

    font-size:15px;
    line-height:1.7;

}

.course-content ul li{

    font-size:15px;
    line-height:1.7;

}

.course-content a{

    width:100%;
    text-align:center;
    display:block;
    padding:14px;
    margin-top:18px;
    border-radius:12px;

}

.course-badges{

    justify-content:center;

}

}
/* ==========================================
   FACILITIES MOBILE
========================================== */

@media (max-width:768px){

.facilities{

    text-align:center;

}

.facility-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:20px;

}

.facility-card{

    padding:25px 20px;
    border-radius:20px;

}

.facility-icon{

    font-size:38px;
    margin-bottom:15px;

}

.facility-card h3{

    font-size:22px;
    margin-bottom:12px;

}

.facility-card p{

    font-size:15px;
    line-height:1.7;

}

}
/* ==========================================
   TRAINERS MOBILE
========================================== */

@media (max-width:768px){

.trainer-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:25px;
    margin-top:30px;

}

.trainer-card{

    padding:25px 20px;
    border-radius:20px;
    text-align:center;

}

.trainer-card img{

    width:180px;
    height:220px;
    object-fit:cover;
    margin:0 auto 20px;
    border-radius:18px;

}

.trainer-card h3{

    font-size:26px;
    margin-bottom:10px;

}

.trainer-card span{

    display:inline-block;
    font-size:15px;
    margin-bottom:15px;

}

.trainer-card p{

    font-size:15px;
    line-height:1.7;
    padding:0;

}

}
/* ==========================================
   GALLERY MOBILE
========================================== */

@media (max-width:768px){

.gallery-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;

}

.gallery-grid img,
.gallery-more{

    width:100%;
    height:160px;
    border-radius:16px;

}

.gallery-grid img{

    object-fit:cover;

}

.gallery-more{

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;

}

.gallery-more h3{

    font-size:42px;
    margin-bottom:5px;

}

.gallery-more p{

    font-size:15px;

}

}
/* ==========================================
   PLACEMENT MOBILE
========================================== */

@media (max-width:768px){

.placements{

    text-align:center;

}

.placement-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:15px;

}

.placement-grid div{

    padding:22px;
    font-size:20px;
    border-radius:16px;

}

}
/* ==========================================
   TESTIMONIAL MOBILE
========================================== */

@media (max-width:768px){

.testimonial-box{

    padding:30px 20px;
    border-radius:18px;

}

.testimonial-box p{

    font-size:17px;
    line-height:1.8;

}

.testimonial-box h3{

    font-size:22px;
    margin-top:20px;

}

}   
/* ==========================================
   CONTACT MOBILE
========================================== */

@media (max-width:768px){

.contact-container{

    display:grid;
    grid-template-columns:1fr;
    gap:30px;

}

.contact-info{

    gap:20px;

}

.info-box{

    padding:22px 18px;
    border-radius:18px;

}

.info-box h3{

    font-size:22px;

}

.info-box p{

    font-size:15px;
    line-height:1.7;

}

.contact-form{

    padding:22px;

}

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

    font-size:16px;

}

.contact-map iframe{

    height:260px;
    border-radius:16px;

}

}
/* ==========================================
   FOOTER MOBILE
========================================== */

@media (max-width:768px){

.footer-container{

    display:grid;
    grid-template-columns:1fr;
    gap:35px;
    text-align:center;

}

.footer h2,
.footer h3{

    text-align:center;

}

.footer-about,
.footer-links,
.footer-courses,
.footer-contact{

    width:100%;

}

.footer ul{

    padding:0;
    list-style:none;

}

.social-icons{

    align-items:center;

}

.footer-bottom{

    font-size:14px;
    line-height:1.6;

}

}