/* =========================================
   SCPM Nursing - Mobile Responsive
   ========================================= */

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

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

/* Header */

.top-announcement-bar{
    flex-direction:column;
    text-align:center;
    padding:8px;
    gap:8px;
}

.main-header{
    flex-direction:column;
    text-align:center;
    gap:15px;
}

.scpm-logo-block{
    flex-direction:column;
}

.scpm-main-logo{
    height:70px;
}

.scpm-brand-name{
    font-size:22px;
}

.scpm-brand-sub{
    font-size:12px;
}

/* Navbar */

.navbar{
    flex-direction:column;
    padding:10px;
}

.nav-links{
    width:100%;
    display:none;
    flex-direction:column;
}

.nav-links.active{
    display:flex;
}

.nav-links li{
    width:100%;
}

.nav-links li a{
    padding:14px;
}

.nav-right-buttons{
    width:100%;
    justify-content:center;
    margin-top:10px;
}

/* Hero */

.hero-section,
#hero-slider{

    height:60vh !important;
    min-height:60vh !important;

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;

}

.hero-content{

    width:100%;
    padding:20px;

}

.hero-logo{

    width:120px;
    margin-bottom:15px;

}

.hero-main-title{

    font-size:28px !important;
    line-height:1.3;

}

.hero-sub-description{

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

}

.hero-buttons{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.hero-buttons a{

    width:100%;

}

/* Grids */

.grid-container,
.footer-top-grid,
.programs-grid,
.facilities-grid,
.highlights-grid,
.testimonials-grid,
.leadership-grid{

    grid-template-columns:1fr !important;

}

/* Stats */

.stats-card-grid{

    grid-template-columns:repeat(2,1fr);

}

/* Footer */

.social-icons{

    justify-content:center;

}

.footer-block{

    text-align:center;

}

iframe{

    width:100%;
    height:250px;

}

table{

    display:block;
    overflow-x:auto;

}

}

/* Small Mobile */

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

.hero-section,
#hero-slider{

    height:50vh !important;
    min-height:50vh !important;

}

.hero-main-title{

    font-size:22px !important;

}

.hero-sub-description{

    font-size:14px;

}

.btn-main,
.btn-secondary{

    width:100%;

}

.stats-card-grid{

    grid-template-columns:1fr;

}

}