@media (max-width:1300px) {
    :root {
        --autopad: 20px;
    }
}

@media (max-width:1200px) {
    :root {
        --autopad: 20px;
    }

    /* Top Menu Mobile */
    .top-logo {
        margin-right: auto!important;
    }
    .toggle-menu {
        display: flex;
    }
    .top-menu {
        background: var(--color1);
        position: absolute;
        top: 100%;
        padding: 10px 15px;
        width: 300px;
        max-height: 500px;
        overflow-y: auto;
        overflow-x: hidden;
        display: none;
        border-bottom-left-radius: var(--bradius);
        border-bottom-right-radius: var(--bradius);
        border-top: 2px solid var(--color2);
        z-index: 99;
    }
    .top-menu::-webkit-scrollbar {
        display: none;
    }
    .top-menu:hover::-webkit-scrollbar {
        display: block;
    }
    .top-menu ul {
        flex-direction: column;
    }
    .top-menu > ul > li {
        border-bottom: 1px solid #ffffff20;
    }
    .top-menu ul li:last-child {
        border-bottom: none;
    }
    .top-menu > ul > li:has(.children),
    .top-menu > ul > li:has(.sub-menu) {
        padding-right: 0;
    }
    .top-menu > ul > li > .children,
    .top-menu > ul > li > .sub-menu {
        position: relative;
        border: none;
        padding: 5px 0 0 10px;
        width: 100%;
    }
    .top-menu > ul > li > span {
        top: 6px;
        transform: none; 
    }
}

@media (max-width:1000px) {
    :root {
        --maxwidth: 728px;
        --autopad: calc((100% - var(--maxwidth)) / 2);
    }

    /* Header */
    .top-header .socmed {
        display: none;
    }

    /* Slider */
    .konten-slider {
        max-width: var(--maxwidth);
        width: auto;
    }

    /* Benefit */
    .benefit {
        grid-template-columns: repeat(2, 1fr)!important;
    }

    /* Cara Kerja */
    .hiw {
        grid-template-columns: 100%!important;
    }
    .hiw ._item {
        flex-direction: row;
    }
    .hiw ._border {
        margin: 0 20px 0 20px!important;
    }
    .hiw ._pigura {
        width: 200px;
        height: 200px;
    }
    .hiw ._content {
        text-align: left;
    }

    #pricing ._paket {
        grid-template-columns: repeat(2, 1fr)!important;
    }
    #pricing ._paket ._item {
        align-self: normal;
    }
    #pricing ._paket ._item._more {
        display: flex;
    }

    #footer {
        grid-template-columns: repeat(2, 1fr)!important;
    }

    /* Grid */

    .grid._res {
        grid-template-columns: repeat(2, 1fr)!important;
    }

    /* Sidebar */
    .container.two-column {
        flex-direction: column;
    }
    .container.two-column ._col1 {
        width: 100%;
        position: unset;
        top: unset;
        height: auto;
    }
    #sidebar {
        position: fixed;
        top: 0 !important;
        z-index: 999;
        width: 379px;
        padding: 20px; 
        background: var(--colorlight);
        border-right: 1px solid var(--colorborder);
        height: 100vh;
        transition: .3s;
        overflow: auto;
    }
    #sidebar._right {
        right: -380px;
    }
    #sidebar._left {
        left: -380px;
    }
    #sidebar._right.active {
        right: 0;
    }
    #sidebar._left.active {
        left: 0;
    }
    #sidebar .side-close {
        display: inline-flex;
    }

    /* Single Post */
    .galeri-featured .ofc,
    .single-content ._featured {
        height: 400px;
    }
}

@media (max-width:780px) {
    :root {
        --autopad: 20px;
    }
}

@media (max-width:700px) {
    :root {
        --maxwidth: 380px;
        --autopad: calc((100% - var(--maxwidth)) / 2);
    }

    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.5em;
    }

    .container {
        padding: 50px var(--autopad);
    }

    .container > ._title h2 {
        font-size: 2em;
    }

    /* Header */
    .top-header, #header._sticky .top-header, .search-bttn, .contact-bttn span {
        display: none!important;
    }
    #header .bttn {
        width: 46px;
        height: 40px;
        padding: 0;
    }
    .header {
        height: 80px;
        gap: 20px!important;
    }
    .top-logo {
        margin-right: 0!important;
    }
    .top-logo .logo-web {
        max-height: 60px;
    }
    .contact-bttn i {
        display: block!important;
    }
    .top-logo p {
        display: none;
    }

    /* Slider */
    .konten-slider {
        top: 80px;
    }
    .konten-slider h2 {
        font-size: 2em;
    }
    .slider-item {
        height: 600px!important;
    }
    #topslider .owl-nav {
        top: calc(50% + 40px);
    }

    /* About */
    #about {
        flex-direction: column;
    }
    #about ._img {
        flex-basis: 100%;
    }

    /* Benefit */
    .benefit {
        grid-template-columns: 100%!important;
    }

    /* Grid */
    .grid._res {
        grid-template-columns: 100%!important;
    }


    /* List */
    .list._res .loop {
        flex-direction: column;
    }
    .list._res .loop ._pigura {
        width: 100%;
        height: 250px;
    }
    .list._res .loop ._content {
        width: 100%;
    }

    /* Cara Kerja */
    .hiw ._item {
        flex-direction: column;
    }
    .hiw ._content {
        margin-top: 10px!important;
        text-align: center;
    }

    /* Testimonial */
    #testimonial ._title {
        text-align: center;
    }
    #testimonial ._title h2 span {
        align-self: center!important;
    }
    #testimonial ._title h2:after {
        margin: 10px auto;
    }
    .testimonial .owl-nav {
        display: none;
    }

    /* Pricing */
    #pricing ._paket {
        grid-template-columns: 100%!important;
    }
    #pricing ._paket ._item._more {
        display: none;
    }

    /* Footer */
    #footer {
        grid-template-columns: 100%!important;
    }

    #contact {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;    
    }

    /* Single Post */
    .galeri-featured .ofc,
    .single-content ._featured {
        height: 300px;
    }

    /* Paket */
    .single-content .pricing {
        flex-direction: column;
        align-items: flex-start!important;
        gap: 15px!important;
    }

    /* Comment */
    .comment-form {
        grid-template-columns: 100%;
    }
    .comment-notes, .comment-form-comment, .comment-form-cookies-consent, .form-submit {
        grid-column: unset;
    }
}

@media (max-width:420px) {

    :root {
        --autopad: 20px;
    }
    
    /* Top Menu */
    .top-menu {
        width: 100%;
        left: 0;
        right: 0;
        border-radius: 0;
        max-height: 400px;
    }
}