/*==================================================
    GONDO EXPORT THEME
    Responsive Stylesheet
    Version : 1.0.0
==================================================*/


/*==================================================
    Large Desktop
    Max Width : 1400px
==================================================*/

@media (max-width:1400px){

    :root{
        --container:1140px;
    }

}


/*==================================================
    Desktop
    Max Width : 1200px
==================================================*/

@media (max-width:1200px){

    :root{
        --container:960px;
    }

}


/*==================================================
    Laptop
    Max Width : 992px
==================================================*/

@media (max-width:991.98px){

    :root{
        --container:720px;
        --section-padding:80px;
        --navbar-height:70px;
    }

    h1{
        font-size:2.8rem;
    }

    h2{
        font-size:2.2rem;
    }

    h3{
        font-size:1.8rem;
    }

}


/*==================================================
    Tablet
    Max Width : 768px
==================================================*/

@media (max-width:767.98px){

    :root{
        --container:540px;
        --section-padding:70px;
    }

    body{
        font-size:15px;
    }

    h1{
        font-size:2.3rem;
    }

    h2{
        font-size:1.9rem;
    }

    h3{
        font-size:1.5rem;
    }

    .btn-gondo,
    .btn-outline-gondo{
        width:100%;
    }

    .section-title{
        margin-bottom:40px;
        text-align:center;
    }

    #g-map{
        height: 400px;
    }

}


/*==================================================
    Mobile
    Max Width : 576px
==================================================*/

@media (max-width:576px){

    :root{

        --section-padding:60px;

    }

    body{

        font-size:14px;

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.7rem;

    }

    h3{

        font-size:1.4rem;

    }

    h4{

        font-size:1.2rem;

    }

    .container-custom{

        padding-inline:20px;

    }

}


/*==================================================
    Small Mobile
    Max Width : 375px
==================================================*/

@media (max-width:375px){

    h1{

        font-size:1.8rem;

    }

    h2{

        font-size:1.5rem;

    }

    .btn-gondo,
    .btn-outline-gondo{

        min-width:100%;

        height:48px;

    }

}

/*==================================================
    Small Mobile
    Max Width : 375px
==================================================*/
/*==================================================
    Mobile Navigation
    Max Width : 991px
==================================================*/

@media (max-width:991px){

    .g-navbar-menu{
        display:none;
    }

    .g-navbar-menu.active{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#fff;
        padding:20px;
        box-shadow:0 10px 25px rgba(0,0,0,.1);
        z-index:1000;
    }

    .g-navbar-menu li{
        margin-bottom:15px;
    }

    /* INI YANG PENTING */
    .g-navbar-menu.active .g-mobile-language{
        display:list-item !important;
    }

    .g-mobile-language .g-language-switcher{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:12px;
    }

    .g-navbar-right{
        display:none;
    }

    .g-btn-gondo{
        display:none;
    }

    .g-mobile-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        background:none;
        border:none;
        cursor:pointer;
        font-size:30px;
    }

}

@media (max-width:767px){

    .g-product-cta{
        padding:30px 25px;
    }

    .g-product-cta-title{
        font-size:23px;
    }

    .g-product-cta .g-btn-gondo{
        margin-top:25px;
    }

}

@media (max-width:767px){

    .g-product-spec-wrapper{
        border-radius:14px;
    }

    .g-product-spec-table{
        min-width:650px;
    }

    .g-product-spec-table thead th,
    .g-product-spec-table tbody td{
        padding:14px 16px;
    }

}