@media only screen and (max-width: 1748px){

    /* Footer */
    
    .footer-router-side .bottom{
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 1500px){
    html {
        font-size: 16px;
    }

    .title, .title-description{
        width: 80%;
    }

    header.active{
        width: 85vw;
        margin: 0 calc((100% - 85vw) / 2);
    }
}

@media only screen and (max-width: 1440px){

    .section-wrapper .icon-container{
        top: 50%;
    }
    .container-section-wrapper.big, .container-section.big{
        padding: 120px;
    }



    /* Card Swiper */
    
    .swiper-card{
        width: min(300px, calc(100vw - 60px));
    }
    .swiper-card .item-img{
        max-width: 150px
    }
    .swiper-card .item-title{
        font-size: 1.5rem !important;
    }
    .swiper-card > :not(.button-container, .item-title){
        margin-right: 0 !important;
    }



    /* Guide */

    .section-content:has(> .steps-side){
        column-gap: 40px;
    }



    /* Newspaper */
    
    .newspaper-illustration{
        --monitor-width: 200px;
        --monitor-height: 107px;
    }
    .newspaper-illustration .text-bubble-big{
        transform: translate(-32%, -36%);
    }
    .newspaper-illustration .envelope{
        bottom: 140px;
    }
    .newspaper-illustration .envelope svg{
        width: 60px;
    }
    .newspaper-illustration .info{
        bottom: 130px;
    }
    .newspaper-illustration .info svg{
        width: 90px;
    }
}

@media only screen and (max-width: 1368px){
    .header-content{
        padding: 0 20px;
    }
    header ul{
        gap: 10px
    }
}

@media only screen and (max-width: 1248px){

    /* Header */

    .header-nav-menu .image-side,
    .header-nav-menu .contact-side{
        display: none;
    }
    .header-nav-menu .router-side{
        padding: 0;
    }
    header .button-container .button:first-child{
        display: none;
    }
    header .logo-container, header .button-container{
        width: 11.1rem;
    }


}

@media only screen and (max-width: 1240px){
    
    .container-section-wrapper.big, .container-section.big{
        padding: 80px;
    }
    


    /* Newspaper */

    .newspaper{
        padding: 40px;
    }
    .newspaper .disclaimer{
        margin-left: 0;
        width: 100%;
        margin-bottom: 20px;
    }
    .newspaper-illustration .envelope{
        bottom: 130px;
    }
    .newspaper-illustration .info{
        bottom: 110px;
    }



    /* Infrastructures */
    
    .infrastructures-container{
        padding: 40px;
    }



    /* Features */

    .solution-categories-wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .solution-categories{
        display: grid;
        width: fit-content;
        grid-template-columns: repeat(4, 1fr);
        border-radius: 20px;
        padding: 20px;
        gap: 10px;
        background-color: var(--light-teal);
        border: 1px solid var(--border-color);
        overflow: hidden;
    }
    .solution-category-item .icon{
        margin: 0 auto 10px;
        width: fit-content;
        height: fit-content;
    }
    .solution-category-item{
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 10px 10px !important;
        width: 100%;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        border: none !important;
        border-radius: 15px !important;
    }
    .solution-category-item.active{
        background-color: var(--teal) !important;
    }
    .solution-category-item:after{
        content: none !important;
    }
    .solution-category-item .icon{
        display: block;
        margin: 0;
    }
    .solution-category-item .icon svg{
        width: 32px;
        height: 32px;
    }
}

@media only screen and (max-width: 1124px){

    .title-description{
        font-size: 1.25rem;
    }
    header.active{
        width: calc(100vw - 80px);
        margin: 0 40px;
    }



    /* Newspaper */

    .newspaper .column:last-child{
        display: none !important;
    }
}

@media only screen and (max-width: 1024px){

    .section-wrapper{
        padding: 30px 20px;
    }

    .q-h-q, .m-direction-column{
        flex-direction: column;
    }
    .q-h-q > *{
        width: 100% !important;
    }
    .q-h-q > .image-side{
        min-height: fit-content !important;
    }
    .title-description{
        width: 100%;
        max-width: 648px;
    }
    .section-content:has(.text-switcher-side) .image-side{
        padding: 20px 0;
    }
    .section-wrapper:has(> .intro-section), .section-wrapper.intro-section{
        border-radius: 0 !important;
    }



    /* Guide */
    
    .section-content:has(> .steps-side){
        flex-direction: column;
    }
    .section-content:has(> .steps-side:last-child){
        flex-direction: column-reverse;
    }
    .steps-side{
        max-width: 800px;
    }
    .steps-side .steps{
        min-width: unset;
    }
    .step-item{
        max-width: 200px;
    }
    .step-item .step-image img{
        width: 100px;
    }
    


    /* Float */

    .float:not(.contact-section .float){
        animation: none !important;
    }



    /* FAQ */

    .faq-container, .article-router{
        width: 50%;
    }
    .faq-item {
        width: 100%;
    }
    .review-items{
        grid-template-columns: 1fr;
    }
    .reviews-container:has(.article-router) .review-items{
        width: 100%;
    }



    /* Features */
    
    .reviews-container .article-router{
        width: 100%;
    }



    /* Footer */
    
    footer{
        flex-direction: column;
    }
    .footer-router-side .bottom, .footer-contact-side{
        padding: 0 !important;
    }
    .footer-router-side a{
        padding: 6px 0;
    }
    .footer-contact-side .main a{
        width: fit-content;
    }
    footer .button-avatar{
        margin: 0 !important;
    }
    footer .vr{
        display: none;
        height: 1px;
        min-height: unset;
        width: 100%;
    }
    .footer-router-side .bottom{
        display: flex;
        justify-content: space-between;
    }
    .footer-contact-side .bottom{
        padding: 0 0 90px !important;
    }
    .footer-router-side .bottom span{
        width: fit-content;
    }


    
    /* Solution Items */

    .solution-item-container{
        grid-template-columns: repeat(3, 1fr);
    }



    /* Topup Calculator */

    .topup-price-calculator{
        position: relative;
    }
    .topup-price-calculator .calculator-body{
        width: 100%;
        flex-direction: column;
        padding-bottom: 30px;
    }
    .topup-price-calculator .calculator-body > *{
        width: 100%;
    }
    .topup-price-calculator .calculator-body .equal-icon .line{
        position: relative;
        z-index: 1;
    }
    .topup-price-calculator .calculator-body .equal-icon:after{
        left: 15px;
        width: 1px;
        height: 72px;
        top: -21px;
        background-color: var(--highlight-color);
    }
    .topup-price-calculator .calculation-result{
        width: 100%;
    }
    .topup-price-calculator .query-button{
        position: absolute;
        bottom: 15px;
        right: 15px;
    }



    /* Article Slider Popup */

    .article-slider-popup-wrapper{
        padding: 30px;
    }
    .article-slider-popup{
        right: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }
    .article-slider-popup-img{
        width: 100%;
        min-height: 200px;
        max-height: 400px;
        aspect-ratio: 10 / 5;
    }
    .article-slider-popup-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



    /* About Us - Acrions Section */

    .actions-section > .flex > .text-side{
        min-width: unset;
        max-width: 500px;
        width: 100%;
    }



    /* Detail Page */
    
    .reviews-section{
        flex-direction: column;
    }
    .reviews-section .half-width{
        width: 100%;
    }
    
}

@media only screen and (min-width: 967px){
    header .mobile-menu-button,
    .mobile-menu-wrapper{
        display: none;
    }
    .card-item:hover{
        scale: 1.1 !important;
    }
}

@media only screen and (max-width: 968px){
    .title{
        width: 100%;
        font-size: 2.5rem !important;
    }
    .divider-container > *{
        border: none !important;
    }
    .explore-cursor{
        display: none;
    }
    main > .section-wrapper:first-of-type{
        padding-top: 90px !important;
    }
    .content-router{
        width: 325px;
    }
    .content-router .side-container,
    .content-router .features-card-item{
        padding: 15px 10px !important;
    }
    .content-router .features-card-item .top,
    .content-router .features-card-item li{
        color: var(--teal);
    }
    .content-router .list.circle li{
        padding-right: 0;
        padding-top: 0;
    }
    .content-router .list.circle li::before{
        left: 6.5px;
    }
    .content-router .features-card-item p{
        margin: 20px 0;
    }


    /* Cookie Popup */

    .cookie-popup-wrapper {
        padding: 20px;
        justify-content: center;
    }
    .cookie-popup-button {
        position: absolute;
        bottom: 20px;
        left: 24px;
    }
    .cookie-popup-button svg{
        width: 32px;
        height: 32px;
    }
    .cookie-popup{
        margin-bottom: 70px;
        max-height: calc(100% - 70px);
    }



    /* Header */

    header{
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: 10px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 0 !important;
        height: 60px !important;
        border-color: transparent !important;
    }
    header .logo-img > :not(:first-child){
        filter: brightness(0) invert(1);
    }
    header .logo-container{
        width: fit-content;
        padding: 3px;
    }
    header .logo-icon {
        height: 0 !important;
        width: 0 !important;
        opacity: 0 !important;
        margin-right: 0 !important;
    }
    .header-wrapper{
        transition: 250ms padding-top;
    }
    .header-wrapper:has(.mobile-menu-button.active){
        padding-top: 0;
    }
    .header-content{
        justify-content: space-between;
        padding: 7px !important;
        background-color: var(--primary-color) !important;
    }
    header.active .button-container .border-button{
        color: var(--teal);
    }
    header.active .button-container .border-button i path{
        stroke: var(--teal) !important;
    }
    .logo-img svg{
        transform: translateY(0);
    }


    
    /* Header - Button Container */

    header .button-container{
        gap: 5px
    }
    header .button-container,
    header .button-container .button{
        max-height: 100%;
        height: 100%;
    }
    header .button-container .fill-button{
        background-color: var(--light-teal);
        border-color: var(--light-teal);
        color: var(--teal);  
        padding-left: 15px;
        padding-right: 15px;
    }
    header .button-container .border-button {
        background-color: var(--white);
        border-color: var(--white);
        padding-left: 15px;
        padding-right: 15px;
    }
    header .button-container .border-button:hover {
        background-color: var(--white-hover);
        border-color: var(--white-hover);
    }
    header .border-button svg path{
        stroke: var(--primary-color) !important;
    }

    .header-content > ul{
        display: none !important;
    }
    header .button-container{
        width: fit-content;
    }
    header .mobile-menu-button{
        display: flex;
    }
    header .button-container:has(.mobile-menu-button:not(.active)) .button:first-child{
        display: none;
    }
    .mobile-menu-wrapper{
        display: block;
        padding: 120px 20px 20px;
        position: fixed;
        width: 100vw;
        height: 100%;
        background-color: var(--primary-color);
        color: var(--white);
        z-index: 900;
        transition: 750ms all var(--ease-expo), 0ms opacity 750ms;
    }
    .mobile-menu{
        max-height: 100%;
        overflow: auto;
    }
    .mobile-menu a{
        color: var(--white);
    }
    .mobile-menu > li > *{
        font-size: 2rem;
        padding: 10px 0;
        display: block;
    }
    .mobile-menu > li > *.has-children{
        display: flex;
        align-items: center;
    }
    .mobile-menu > li > *.has-children:after{
        content: "";
        display: block;
        background-image: url(../img/icons/chevron-down.svg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        margin-left: 20px;
        filter: brightness(0%) invert(100%);
        transition: 150ms all ease-out;
        transform-origin: center center;
    }
    body:has(.mobile-menu-button:not(.active)) .mobile-menu-wrapper{
        top: -100vh;
        opacity: 0;
    }
    body:has(.mobile-menu-button.active) .mobile-menu-wrapper{
        top: 0 !important;
        opacity: 1;
        transition: 750ms all var(--ease-expo), 0ms opacity;
    }
    .mobile-menu-button.active svg:first-child,
    .mobile-menu-button:not(.active) svg:last-child{
        display: none;
    }
    .mobile-menu .sub-menu{
        display: block;
        overflow: hidden;
        padding: 0 20px 0;
        font-size: 1.25rem;
        transition: 250ms padding;
    }
    .mobile-menu > li:has(> *.active) .sub-menu{
        padding: 0 20px 20px;
    }
    .mobile-menu .sub-menu a{
        padding: 5px 0;
        display: block;
    }
    .mobile-menu > li > *.active:after{
        transform: rotate(180deg);
    }
    header:has(.mobile-menu-button.active) .logo-img img:first-child{
        width: 100%;
        height: 100%;
        opacity: 1;
    }



    /* Download Section */

    .download-container{
        padding: 20px 10px;
    }
    .download-section .section-wrapper{
        width: 100%;
        margin: 0 auto;
        padding: 0 !important;
        padding-top: 0 !important
    }
    .download-section .medium-title{
        margin-bottom: 0 !important;
        padding-top: 230px;
    }
    .download-section .medium-title,
    .download-section .text-side{
        margin-left: 0;
    }
    .download-section .text-side{
        width: 100%;
    }
    .download-section .gray-text{
        width: 100%;
        max-width: unset;
        margin-top: 190px !important;
    }
    .card-spacer{
        display: none;
    }
    .cari-app{
        display: none;
    }



    /* Detail */
    
    .intro-section  > .section-content > .title-description{
        font-size: 1.25rem;
    }
    .content span[style='font-size: 2rem']{
        font-size: 1.4rem !important;
    }
    .section-wrapper:has(.content-router){
        padding-top: 0;
    }
    .section-content:has(.content-router){
        gap: 20px;
    }
    .content-router-wrapper{
        z-index: 100;
        width: 50px;
        top: 70px;
        min-width: 50px;
        height: 50px;
        border-radius: 100%;
        background-color: var(--teal);
        margin-left: auto;
        background-image: url('../img/icons/menu.svg');
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        margin-right: 6px;
    }
    .content-router-wrapper:hover:not(:has(> .content-router:hover)){
        background-color: var(--teal-hover);
    }
    .content-router{
        position: absolute;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        padding: 0 5px;
        right: 60px;
        top: 0;
        min-width: unset;
        overflow-y: auto;
        overflow-x: clip;
        background-color: var(--teal);
        z-index: 100;
        border-radius: 20px;
        max-height: 0;
        transition-duration: 500ms;
        transition-property: max-height, opacity;
        transition-timing-function: var(--ease-expo);
        pointer-events: none;
        border-width: 15px 10px;
        opacity: 0;
    }
    .content-router-wrapper.active > .content-router{
        max-height: 70vh;
        opacity: 1;
        pointer-events: all;
        box-shadow: 0 5px 20px -10px rgba(0, 0, 0, 1);
    }
    .content-router .side-container{
        background-color: var(--light-teal);
    }
    .content-router .features-card-item{
        background-color: var(--light-teal);
        color: var(--teal);
        padding: 20px;
    }
    .content-router .features-card-item .item-title{
        color: var(--teal);
    }
    .content-router .features-card-item p{
        color: var(--teal)
    }
    .reviews-section .medium-title{
        font-size: 2rem;
    }


    
    /* FAQ */

    .faq-item{
        padding: 30px 20px;
    }


    
    /* Article Router */

    .article-router .article-item{
        margin: 0;
    }


    
    /* Positive Reviews */
    
    .tag-container{
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(calc((100% - 20px) / -2));
    }


    
    /* Features */

    .solution-categories{
        grid-template-columns: repeat(3, 1fr);
    }


    /* Article Slider */
    
    .article-slider-item .image-side{
        display: none;
    }
    .article-slider-item-content{
        width: 350px !important;
        min-width: unset !important;
    }
    .article-slider-section .flex:has(.nav-button-container){
        flex-direction: column-reverse;
        align-items: start;
    }
    .article-slider-section .nav-button-container{
        position: static;
    }



    /* Newspaper */

    .newspaper{
        padding: 20px;
    }

    

    /* Footer */
    
    .footer-router-side a:hover{
        padding-left: 0 !important;
    }
}

@media only screen and (max-width: 768px){

    .intro-section:has(.blog-card-item),
    .newspaper.section-content{
        flex-direction: column;
    }
    .section-wrapper{
        padding: 30px 10px;
    }
    .container-section-wrapper{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .footer-contact-side .main:after{
        width: calc(100% + 60px);
    }
    .container-section-wrapper.big, .container-section.big{
        padding: 80px 20px;
    }
    .container-section-wrapper, .container-section, .container-content{
        padding: 40px 20px;
    }



    /* Header */

    .logo-container img{
        height: 20px;
    }
    header{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }



    /* Guide */

    .section-wrapper:has(.steps-side){
        margin-top: 30px !important;
    }
    .steps{
        gap: 60px 20px;
        justify-content: start;
    }
    .step-list{
        grid-template-columns: 1fr;
    }
    .step-item{
        min-width: 140px;
        width: calc(33% - (40px / 3));
        margin: 0 !important;
    }
    .step-item .step-image{
        padding: 20px 10px;
    }
    .step-item:after{
        content: none !important;
    }



    /* Section Switcher */

    .section-switcher .switch{
        font-size: .77rem;
        padding: 5px 10px;
    }



    /* Newspaper */
    
    .newspaper{
        flex-direction: column-reverse;
        gap: 20px !important;
    }
    .newspaper ul{
        margin: 0 !important;
    }
    .newspaper .list li{
        min-height: 40px;
        padding-left: 30px !important;
    }
    .newspaper .list li:after{
        top: 12.5px;
        left: 0;
    }
    .newspaper .small-title{
        margin: 20px 0 0;
    }
    .newspaper .download-container{
        padding: 0;
        margin: 0;
    }



    /* Positive Reviews */
    
    .positive-reviews .vr{
        height: 1px;
        min-height: 0;
        width: 100%;
    }



    /* Wiggle Item */

    .wiggle-item{
        flex-direction: column-reverse;
    }
    .wiggle-item .text-side{
        padding: 0;
    }
    .wiggle-item .image-side{
        min-height: 300px;
    }
    


    /* FAQ */
    
    .reviews-container{
        flex-direction: column;
    }



    /* Integrations - Intro */
    
    .integrations-intro-section .section-content > .flex{
        flex-direction: column;
    }
    .integrations-intro-section .section-content > .flex > .image-side{
        max-width: 300px;
        margin: 0 auto;
        padding: 20px 0;
        min-height: unset !important;
    }
    .integrations-intro-section .section-content > .flex > .image-side svg{
        height: fit-content;
    }
    .integrations-intro-section .section-content .title ~ span{
        width: 100% !important;
    }

    
    
    /* FAQ */

    .faq .content{
        flex-direction: column;
    }
    .faq-container, .article-router{
        width: 100%;
    }


    
    /* Contributers */
    
    .contributer-item{
        height:60px;
    }


    
    /* Features */

    .solution-categories{
        padding: 10px;
        grid-template-columns: repeat(2, 1fr);
    }

    

    /* Footer */

    .footer-router-side .bottom{
        flex-direction: column;
        gap: 10px
    }
    .footer-contact-side .main:after{
        min-width: unset !important;
        width: calc(100vw - 15px) !important;
        left: -10px !important;
    }



    /* Pages */

    .page-section{
        flex-direction: column;
    }
    .page-router{
        max-width: unset;
        width: 100%;
    }
}

@media only screen and (max-width: 648px){
    html {
        font-size: 14px;
    }



    /* Guide */

    .api-integration-item{
        width: 100%;
        max-width: unset;
    }
    .steps{
        gap: 50px 20px;
    }
    .step-item{
        width: calc(50% - (20px / 2));
        max-width: unset;
        min-width: unset;
    }
    .step-item .step-image{
        height: 200px;
    }



    /* Infrastructures */
    
    .infrastructures-container{
        padding: 20px;
    }
    .infrastructures{
        gap: 20px 30px;
        justify-content: space-evenly;
    }
    .infrastructures .infrastructure-item{
        width: 100px;
        height: 60px;
    }



    /* Footer */

    .footer-router-side .main{
        flex-wrap: wrap;
        row-gap: 40px;
    }
    .footer-router-side .column{
        width: 50%;
    }

}

@media only screen and (max-width: 556px){
    
    /* Topbar */

    .top-bar{
        padding: 10px;
        gap: 30px;
        justify-content: space-between;
        font-size: .9rem;
    }
    .top-bar svg{
        height: 18px;
    }
    .header-wrapper{
        padding-top: 42px
    }
}

@media only screen and (max-width: 512px){
    
    .cut-width{
        width: 100%;
    }
    .content-router .youtube-button{
        height: 36px;
    }
    .button{
        padding: 7px 15px !important;
    }
    .section-switcher{
        height: 0;
        padding: 0;
        background-color: transparent;
        margin-top: 0;
    }
    .section-switcher *{
        display: none;
    }
        


    /* Solution Items */
    
    .solution-item-container{
        grid-template-columns: 1fr;
    }



    /* Slider */

    .logo-container{
        display: none;
    }


    
    /* Newspaper */

    .newspaper{
        border-radius: 20px;
    }



    /* Article Slider */

    .article-slider{
        padding: 10px 0;
    }
    .article-slider-item-content{
        box-sizing: border-box;
        width: calc(100vw - 85px) !important;
    }
    .article-slider-item .text-side{
        padding: 0;
        width: 100%;
    }



    /* Article Slider Popup */

    .article-slider-popup-wrapper{
        padding: 10px !important;
    }



    /* Detail */
    
    .intro-section-wrapper[class*="detail-intro"]{
        padding-bottom: 10px;
    }
    main:has(.intro-section[class*="detail-intro"]) .section-content:has(.content),
    .section-content:has(.content.page-content),
    .section-content:has(.content.blog-content){
        flex-direction: column-reverse;
        gap: 10px;
    }
}

@media only screen and (max-width: 425px){

    .title,
    .slider-content .text-side h3{
        font-size: 2rem !important;
    }


    /* Header */

    .header-content{
        column-gap: 5px;
    }



    /* Cookie Popup */

    .cookie-popup .popup-bottom{
        flex-direction: column;
        gap: 10px;
    }



    /* Detail */

    .content-router{
        right: 0;
        top: 60px;
        max-width: calc(100vw - 20px);
    }


    
    /* Solution Categories */

    .solution-categories{
        grid-template-columns: 1fr;
        width: 100%;
    }
    .solution-category-item{
        width: 100%;
        max-width: unset;
    }


    /* Guide */

    .step-item{
        width: calc(50% - (20px / 2));
        max-width: unset;
    }
    .step-item .step-image{
        padding: 10px;
    }
}

@media (pointer: coarse) {
    .article-slider{
        justify-content: start;
    }
}