/* =========================================
   PORTAL LAYANAN GTK KABUPATEN KONAWE
   RESPONSIVE
   Version 4.0
   Author : Haldi Ali Syukur
========================================= */


/* =========================================
   DESKTOP BESAR
========================================= */

@media (min-width:1600px){

.hero,
.topbar,
.layanan,
.pengumuman,
footer{

    max-width:1200px;

}

.hero-logo-image{

    max-width:620px;

}

.hero-description{

    font-size:32px;

}

}


/* =========================================
   LAPTOP
========================================= */

@media (max-width:1200px){

.hero,
.topbar,
.layanan,
.pengumuman,
footer{

    width:95%;

}

.hero{

    padding:35px 30px;

}

.hero-logo-image{

    max-width:500px;

}

.hero-description{

    font-size:26px;

}

}


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

@media (max-width:992px){

/* HERO */

.hero{

    padding:30px 25px;

}

.hero-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.hero-logo-image{

    max-width:420px;

}

.hero-description{

    font-size:22px;

}

.hero-highlight{

    font-size:16px;

}


/* TOPBAR */

.topbar{

    flex-direction:column;

    gap:18px;

    padding:20px;

}

.topbar-left,
.topbar-center,
.topbar-right{

    width:100%;

    justify-content:center;

}

.topbar-center{

    text-align:center;

}

.topbar-right{

    width:100%;

}

.topbar-right form{

    width:100%;

    justify-content:center;

}


/* LAYANAN */

.layanan-grid{

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

}


/* FOOTER */

footer{

    padding:40px 30px;

}

}


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

@media (max-width:768px){

/* DASHBOARD */

.dashboard{

    flex-direction:column;

    gap:12px;

    padding:18px;

}


/* HERO */

.hero{

    padding:25px 18px;

}

.hero-logo-image{

    max-width:320px;

}

.hero-description{

    font-size:18px;

    line-height:1.7;

}

.hero-highlight{

    font-size:15px;

    padding:12px 18px;

}


/* TOPBAR */

.topbar{

    padding:18px;

}

.topbar-left,
.topbar-center,
.topbar-right{

    width:100%;

}

.portal-btn{

    width:100%;

}

.topbar-center{

    text-align:center;

}

.topbar-right form{

    width:100%;

    flex-direction:column;

    gap:10px;

}

.topbar-right input{

    width:100%;

}

.topbar-right button{

    width:100%;

}


/* LAYANAN */

.layanan{

    padding:25px 18px;

}

.layanan h2{

    font-size:28px;

}

.layanan-grid{

    grid-template-columns:1fr;

}


/* PENGUMUMAN */

.pengumuman{

    padding:25px 20px;

}

.pengumuman h2{

    font-size:26px;

}


/* FOOTER */

footer{

    padding:35px 20px;

}


/* FLOATING NAV */

.floating-nav{

    width:96%;

    height:66px;

}

.floating-nav a{

    font-size:11px;

}

.floating-nav a i{

    font-size:18px;

}

.floating-nav .portal{

    width:60px;

    height:60px;

    margin-top:-25px;

}

}


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

@media (max-width:480px){

.hero{

    padding:22px 15px;

}

.hero-logo-image{

    max-width:250px;

}

.hero-description{

    font-size:16px;

}

.hero-highlight{

    width:100%;

    font-size:14px;

}

.dashboard-item{

    font-size:14px;

}

.layanan h2{

    font-size:24px;

}

.footer-social a{

    width:42px;

    height:42px;

}

}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}