/*=========================================
TABLET
=========================================*/

@media (max-width:992px){

.container{

    width:92%;

}

.hero{

    min-height:auto;

    padding:120px 0 80px;

}

.hero-content{

    grid-template-columns:1fr;

    gap:50px;

    text-align:center;

}

.hero-text{

    order:2;

}

.hero-image{

    order:1;

}

.hero-text h1{

    font-size:42px;

    line-height:1.3;

}

.hero-text p{

    font-size:17px;

}

.hero-button{

    justify-content:center;

}

.hero-image img{

    width:75%;

    max-width:400px;

}

}

/*=========================================
TABLET
=========================================*/

@media (max-width:992px){

/* Tentang */

.tentang-card{

    padding:35px;

}

.tentang-text h2{

    font-size:34px;

}

.mini-statistik{

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

    gap:18px;

}

.mini-card{

    padding:25px 15px;

}

.mini-card h3{

    font-size:34px;

}

.mini-card span{

    font-size:15px;

}

/* Berita */

.berita-grid{

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

}

.berita-card{

    height:100%;

}

/* Cabang */

.cabang-grid{

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

}

.cabang-card{

    padding:28px 24px;

}

}


/*=========================================
HP
=========================================*/

@media (max-width:768px){

/* Tentang */

.tentang-card{

    padding:25px;

}

.tentang-text{

    text-align:center;

}

.tentang-text h2{

    font-size:28px;

}

.tentang-text p{

    font-size:15px;

    text-align:left;

}

.mini-statistik{

    grid-template-columns:1fr;

    gap:18px;

    margin:30px 0;

}

.mini-card{

    padding:22px;

}

.mini-card h3{

    font-size:36px;

}

.tentang-card .btn-hijau{

    width:100%;

    justify-content:center;

}

/* Berita */

.berita-header h2{

    font-size:30px;

}

.berita-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.berita-image img{

    height:220px;

}

/* Cabang */

.section-home h2{

    font-size:30px;

}

.cabang-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.cabang-card{

    padding:28px 22px;

}

.cabang-card h3{

    font-size:22px;

    min-height:auto;

}

.jumlah{

    width:100%;

    justify-content:center;

}

.btn-cabang{

    width:100%;

}

.lihat-semua{

    margin-top:35px;

}

.btn-semua{

    width:100%;

    display:block;

    text-align:center;

}

}

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

@media (max-width:768px){

.footer{

    padding:60px 0 25px;

}

.footer-content{

    grid-template-columns:1fr;

    gap:35px;

    text-align:center;

}

.footer-logo{

    justify-content:center;

}

.footer-sosial{

    justify-content:center;

}

.footer-menu{

    margin-top:10px;

}

.footer-menu ul{

    padding:0;

}

.footer-menu li{

    margin-bottom:12px;

}

.footer-bottom{

    text-align:center;

    line-height:1.8;

}

}


/*=========================================
HALAMAN TENTANG
=========================================*/

@media (max-width:768px){

.about-hero{

    padding:110px 0 70px;

}

.about-hero h1{

    font-size:34px;

}

.about-content{

    grid-template-columns:1fr;

    gap:35px;

}

.about-image{

    order:1;

    text-align:center;

}

.about-image img{

    width:220px;

}

.about-text{

    order:2;

}

.about-text h2{

    font-size:28px;

}

.about-text p{

    text-align:justify;

}

}


/*=========================================
DETAIL CABANG
=========================================*/

@media (max-width:768px){

.detail-header{

    padding:110px 0 70px;

}

.detail-header h1{

    font-size:32px;

}

.detail-content{

    grid-template-columns:1fr;

    gap:30px;

}

.info-cabang{

    padding:25px;

}

.info-cabang h2{

    font-size:26px;

}

.info-item{

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}

}


/*=========================================
DETAIL KEGIATAN
=========================================*/

@media (max-width:768px){

.detail-kegiatan{

    padding:40px 0;

}

.detail-kegiatan img{

    width:100%;

    height:auto;

}

.detail-kegiatan h1{

    font-size:30px;

}

.detail-kegiatan p{

    text-align:justify;

    line-height:1.9;

}

}

/*=========================================
LOGIN
=========================================*/

@media (max-width:768px){

.login-page{

    padding:30px 20px;

}

.login-box{

    width:100%;

    max-width:400px;

    padding:30px;

}

.login-box h2{

    font-size:28px;

}

.login-box input{

    font-size:15px;

}

.login-box button{

    width:100%;

}

}


/*=========================================
SIDEBAR ADMIN
=========================================*/

@media (max-width:992px){

.sidebar{

    width:240px;

}

.main-content{

    margin-left:240px;

}

}

@media (max-width:768px){

.sidebar{

    position:fixed;

    left:-260px;

    top:0;

    width:250px;

    height:100vh;

    z-index:999;

    transition:.3s;

}

.sidebar.active{

    left:0;

}

.main-content{

    margin-left:0;

    padding:20px;

}

.menu-toggle{

    display:flex;

}

}


/*=========================================
DASHBOARD
=========================================*/

@media (max-width:768px){

.dashboard-card{

    grid-template-columns:1fr;

}

.stat-card{

    margin-bottom:20px;

}

.page-title{

    font-size:28px;

}

}


/*=========================================
TABLE
=========================================*/

@media (max-width:768px){

.table-responsive{

    overflow-x:auto;

}

table{

    min-width:900px;

}

}


/*=========================================
FORM
=========================================*/

@media (max-width:768px){

.form-row{

    display:block;

}

.form-group{

    width:100%;

    margin-bottom:20px;

}

input,

select,

textarea{

    width:100%;

}

.btn{

    width:100%;

}

}


/*=========================================
BUTTON
=========================================*/

@media (max-width:768px){

.btn-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.btn-group .btn{

    width:100%;

}

}