/* =====================================================
   MOBILE VIEW ONLY
===================================================== */

@media (max-width:768px){

/* =====================================================
   GLOBAL
===================================================== */

body{
    font-size:13px;
    line-height:1.5;
    overflow-x:hidden;
}

.container,
.container-fluid{
    padding-left:10px !important;
    padding-right:10px !important;
}

/* =====================================================
   HEADER
===================================================== */

.top-header{
    padding:8px 10px !important;
}

.top-header .d-flex{
    flex-direction:column;
    text-align:center;
    gap:8px !important;
}

.top-header img{
    height:58px !important;
}

.main-heading{
    font-size:18px !important;
    line-height:1.3;
    margin-bottom:3px;
}

.top-header small{
    font-size:10px !important;
    line-height:1.5;
    display:block;
}

/* =====================================================
   NAVBAR
===================================================== */

.navbar{
    padding:4px 8px !important;
    min-height:auto;
}

.navbar-brand{
    font-size:16px !important;
}

.navbar-toggler{
    padding:3px 7px !important;
    font-size:12px !important;
}

.navbar-collapse{
    margin-top:10px;
    background:#0b1f4d;
    padding:10px;
    border-radius:12px;
}

.navbar-nav{
    gap:0 !important;
    align-items:flex-start !important;
}

.navbar .nav-link{
    width:100%;
    font-size:13px !important;
    padding:9px 10px !important;
    border-bottom:1px solid rgba(255,255,255,0.08);
    border-radius:0 !important;
}

.dropdown-menu{
    border-radius:8px !important;
    padding:5px 0 !important;
}

.dropdown-item{
    font-size:12px !important;
    padding:8px 12px !important;
}

.fancy-login-btn{
    width:100%;
    justify-content:center;
    margin-top:10px;
}

/* =====================================================
   SLIDER
===================================================== */

.smooth-slider-section{ height:220px !important; background:#000; overflow:hidden; } .smooth-slider-track{ height:220px !important; } .smooth-slider-track img{ width:100%; height:220px !important; object-fit:fill !important; display:block; } /* OVERLAY */ .slider-overlay{ top:78% !important; } .slider-overlay h1{ font-size:18px !important; margin-bottom:5px; } .slider-overlay p{ font-size:11px !important; margin-bottom:10px; } .slider-btn{ padding:7px 14px !important; font-size:11px !important; } .slider-arrow{ width:34px !important; height:34px !important; font-size:11px !important; }

/* =====================================================
   MARQUEE
===================================================== */

.marquee marquee{
    font-size:11px !important;
}

/* =====================================================
   SPLIT SECTION
===================================================== */

.split-container{
    flex-direction:column !important;
    gap:15px !important;
    padding:10px !important;
}

.notice-board,
.iframe-section{
    width:100% !important;
    height:auto !important;
}

.notice-board{
    height:55vh !important;
}

.full-iframe{
    height:55vh !important;
}

/* =====================================================
   SECTION SPACING
===================================================== */

.management-section,
.course-section,
.testimonial-section,
.info-section,
.facility-section{
    padding:40px 10px !important;
}

/* =====================================================
   TITLES
===================================================== */

.management-main-title,
.facility-main-title,
.main-course-title,
.testimonial-main-title{
    font-size:24px !important;
    line-height:1.3;
}

.management-subtitle,
.facility-subtitle{
    font-size:12px !important;
    line-height:1.7;
}

.management-mini-title,
.facility-mini-title,
.course-mini-title,
.testimonial-mini-title{
    font-size:11px !important;
    padding:6px 14px !important;
}

/* =====================================================
   MANAGEMENT CARD
===================================================== */

.management-wrapper{
    gap:18px !important;
}

.management-card{
    width:100% !important;
    border-radius:18px !important;
}

.frame-design{
    padding:12px !important;
}

.frame-design img{
    height:220px !important;
}

.management-content{
    padding:18px !important;
}

.management-content h3{
    font-size:11px !important;
}

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

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

.management-btn{
    padding:8px 14px !important;
    font-size:11px !important;
}

/* =====================================================
   COURSE SECTION
===================================================== */

.course-slider{
    gap:15px !important;
}

.course-card{
    min-width:100% !important;
    max-width:100% !important;
    border-radius:18px !important;
}

.course-card img{
    height:180px !important;
}

.course-content{
    padding:16px !important;
}

.course-content h3{
    font-size:18px !important;
}

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

.course-btn{
    padding:8px 14px !important;
    font-size:11px !important;
}

.course-nav{
    width:34px !important;
    height:34px !important;
    font-size:11px !important;
}

/* =====================================================
   FACILITY SECTION
===================================================== */

.facility-slider{
    gap:15px !important;
}

.facility-card{
    min-width:100% !important;
    max-width:100% !important;
    padding:15px !important;
    border-radius:16px !important;
}

.facility-card img{
    height:180px !important;
}

.facility-card h4{
    font-size:15px !important;
}

.facility-nav{
    width:34px !important;
    height:34px !important;
    font-size:11px !important;
}

/* =====================================================
   INFO SECTION
===================================================== */

.info-section{
    gap:18px !important;
}

.info-card{
    width:100% !important;
    min-height:auto !important;
    padding:22px !important;
    border-radius:20px !important;
}

.main-title{
    font-size:22px !important;
}

.description{
    font-size:12px !important;
    line-height:1.8;
}

.event-box{
    padding:18px !important;
    border-radius:18px !important;
}

.notice-item h4{
    font-size:12px !important;
}

.value{
    font-size:12px !important;
}

.view-btn{
    padding:8px 16px !important;
    font-size:11px !important;
}

/* =====================================================
   TESTIMONIAL
===================================================== */

.testimonial-card{
    padding:20px !important;
    border-radius:20px !important;
}

.testimonial-header{
    gap:12px !important;
}

.testimonial-header img{
    width:60px !important;
    height:60px !important;
}

.testimonial-header h4{
    font-size:17px !important;
}

.testimonial-header span{
    font-size:12px !important;
}

.testimonial-card p{
    font-size:13px !important;
    line-height:1.8;
}

.quote-icon{
    font-size:28px !important;
}

.testimonial-nav{
    width:34px !important;
    height:34px !important;
    font-size:11px !important;
}

/* =====================================================
   FOOTER
===================================================== */

.footer{
    padding:25px 15px !important;
    text-align:center;
}

.footer h5{
    font-size:16px !important;
}

.footer p,
.footer li,
.footer a{
    font-size:12px !important;
}

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

/* =====================================================
   SECTION DIVIDER
===================================================== */

.section-divider{
    height:70px !important;
}

.section-divider::after{
    font-size:20px !important;
    padding:0 10px !important;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn,
.btn-warning{
    font-size:12px !important;
    padding:8px 14px !important;
}

/* =====================================================
   HIDE EXTRA ELEMENTS
===================================================== */

.header-tools{
    display:none !important;
}

.top-bar{
    display:none !important;
}

}

/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media (max-width:480px){

.main-heading{
    font-size:16px !important;
}

.management-main-title,
.facility-main-title,
.main-course-title,
.testimonial-main-title{
    font-size:21px !important;
}

.slider-overlay h1{
    font-size:16px !important;
}

.slider-overlay p{
    font-size:10px !important;
}

.course-content h3,
.management-content h4{
    font-size:16px !important;
}

.facility-card img,
.course-card img{
    height:160px !important;
}

}