/* ==========================================================
   MOBILE.CSS
   YAYASAN HUJJATUL ISLAM
   VERSION 1.01
==========================================================*/

@media (max-width:991px){

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

body{

    overflow-x:hidden;

}

.container{

    padding-left:20px;

    padding-right:20px;

}

/* ==========================================
   TOPBAR
==========================================*/

.topbar{

    min-height:38px;

    padding:6px 0;

}

.topbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.topbar i{

    font-size:12px;

}

.topbar span,
.topbar a{

    font-size:12px;

}

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

.site-header{

    display:none !important;

}

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

.navbar-custom{

    min-height:72px;

    padding:10px 0;

    position:sticky;

    top:0;

    z-index:999;

}

.navbar-brand{

    display:flex !important;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.navbar-brand img{

    width:44px;

    height:44px;

    object-fit:contain;

    flex-shrink:0;

}

.mobile-brand{

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:1.15;

}

.mobile-brand-title{

    font-size:18px;

    font-weight:700;

    color:#ffffff;

}

.mobile-brand-subtitle{

    font-size:18px;

    font-weight:700;

    color:#ffffff;

}

.navbar-toggler{

    border:none;

    box-shadow:none;

    padding:0;

}

.navbar-toggler:focus{

    box-shadow:none;

}

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

.hero-section{

    position:relative;

    height:680px;

    min-height:680px;

}

.hero-content{

    display:flex;

    align-items:center;

    height:100%;

    padding-top:90px;

    padding-bottom:60px;

}

.hero-content .container{

    position:relative;

    z-index:10;

}

.hero-content .col-lg-7{

    max-width:100%;

}

/* Badge */

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:40px;

    font-size:11px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:26px;

}

/* Title */

.hero-content h1{

    font-size:52px;

    font-weight:800;

    line-height:1.05;

    margin-bottom:22px;

}

/* Paragraph */

.hero-content p{

    max-width:320px;

    font-size:18px;

    line-height:1.8;

    margin-bottom:34px;

}

/* Button */

.hero-button{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.hero-button .btn{

    width:260px;

    height:58px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

}

/* Swiper */

.swiper-button-prev,

.swiper-button-next{

    transform:scale(.72);

}

.swiper-pagination{

    bottom:30px!important;

}
/* ==========================================
NAVBAR MOBILE
========================================== */

.navbar-custom{

    height:74px;

}

.navbar-brand{

    display:flex;

    align-items:center;

    gap:14px;

}

.navbar-brand img{

    width:42px;

}

.mobile-brand{

    display:flex;

    justify-content:center;

}

.mobile-brand-title{

    font-size:20px;

    font-weight:700;

    color:#fff;

}

.mobile-brand-subtitle{

    display:none;

}
/* ==========================================================
   MOBILE V1.02
   QUICK MENU
==========================================================*/

@media (max-width:991px){

.quick-menu{

    padding:60px 0;

}

.quick-menu .row{

    row-gap:20px;

}

.quick-card{

    padding:28px 22px;

    border-radius:22px;

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    text-align:center;

}

.quick-icon{

    width:72px;

    height:72px;

    margin:0 auto 18px;

    font-size:30px;

}

.quick-card h4{

    font-size:20px;

    margin-bottom:12px;

}

.quick-card p{

    font-size:15px;

    line-height:1.7;

    margin-bottom:18px;

}

.quick-card span{

    justify-content:center;

}

}

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

@media (max-width:991px){

.welcome-section{

    padding:70px 0;

}

.welcome-section .row{

    row-gap:40px;

}

.welcome-photo{

    max-width:320px;

    margin:auto;

}

.welcome-photo img{

    width:100%;

}

.section-title{

    font-size:34px;

    text-align:center;

}

.section-subtitle{

    display:table;

    margin:0 auto 18px;

}

.title-line{

    margin:18px auto;

}

.welcome-quote{

    text-align:center;

}

.welcome-section p{

    text-align:justify;

    font-size:16px;

    line-height:1.9;

}

.welcome-values{

    justify-content:center;

    gap:14px;

    flex-wrap:wrap;

}

.value-item{

    width:150px;

}

.welcome-sign{

    text-align:center;

}

}

/* ==========================================================
   MOBILE
   UNIT PENDIDIKAN
==========================================================*/

@media (max-width:991px){

.education-section{

    padding:70px 0;

}

.education-section .section-title{

    text-align:center;

}

.education-card{

    margin-bottom:25px;

}

.education-image{

    height:230px;

}

.education-content{

    padding:28px;

    text-align:center;

}

.education-content h3{

    font-size:28px;

}

.education-content p{

    font-size:16px;

    line-height:1.8;

}

.education-content .btn{

    width:100%;

    border-radius:40px;

    padding:14px;

}

}

/* ==========================================================
   SMALL PHONE
==========================================================*/

@media (max-width:576px){

.quick-card{

padding:24px 18px;

min-height:200px;

}

.quick-card h4{

font-size:18px;

}

.quick-card p{

font-size:14px;

}

.section-title{

font-size:28px;

}

.education-image{

height:210px;

}

.education-content{

padding:22px;

}

.education-content h3{

font-size:24px;

}

}
}