/*======================================================
SIWARGA16 v2.0
RESPONSIVE
======================================================*/


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

@media (max-width:1200px){

.container{

    width:95%;

}

.section-title h2{

    font-size:36px;

}

}


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

@media (max-width:992px){

section{

    padding:70px 0;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:32px;

}

.grid-2,
.grid-3,
.grid-4{

    grid-template-columns:1fr;

    gap:25px;

}

}

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

@media (max-width:992px){

.topbar{

    display:none;

}

.header-action{

    display:none;

}

.mobile-button{

    display:block;

    z-index:1002;

}

#navbar{

    position:fixed;

    top:0;

    right:-340px;

    width:300px;

    height:100vh;

    background:#fff;

    transition:.35s;

    box-shadow:-5px 0 30px rgba(0,0,0,.15);

    z-index:1001;

    overflow-y:auto;

}

#navbar.show{

    right:0;

}

.menu{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:90px 30px;

    gap:0;

}

.menu li{

    width:100%;

}

.menu a{

    display:block;

    width:100%;

    padding:16px 0;

    border-bottom:1px solid #eee;

}

}

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

@media (max-width:992px){

.footer-grid{

    grid-template-columns:1fr;

    gap:35px;

}

.footer-logo{

    justify-content:center;

    text-align:center;

}

.footer-col{

    text-align:center;

}

}

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

@media (max-width:768px){

.logo img{

    width:48px;

    height:48px;

}

.logo-text h2{

    font-size:20px;

}

.logo-text span{

    font-size:12px;

}

.section-title h2{

    font-size:28px;

}

.btn-primary,
.btn-secondary{

    width:100%;

    justify-content:center;

}

.floating-wa{

    width:55px;

    height:55px;

    font-size:26px;

    right:18px;

    bottom:18px;

}

}

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

@media (max-width:480px){

section{

    padding:55px 0;

}

.section-title h2{

    font-size:24px;

}

.section-title p{

    font-size:14px;

}

.logo-text span{

    display:none;

}

.footer-bottom p{

    font-size:13px;

}

}