@media (max-width:1080px){
    #kendaraan{
        scroll-margin-block-start: 5vw;
    }
    
    .img-logo {
        height: 3.5vw;
    }
    
    .header-list .header-item {
        height: 3.5vw;
        line-height: 3.5vw;
    }
    
    .main-wrapper {
        padding: 10% 7vw 6%;
    }
    
    .main-wrapper .container h1 {
        font-size: 2.6em;
    }
    
    .main-wrapper .container h5 {
        font-size: 0.8em;
        margin-top: 3vw;
        line-height: 1.6em;
    }
    
    .btn-main {
        margin-top: 1vw;
    }
    
    .btn-main .btn-active {
        padding: 1.6vw;
        font-size: 0.8em;
    }
    
    .btn-main .btn-passive {
        padding: 1.6vw;
        font-size: 0.8em;
    }

    .main-mobil{
        width: 92%;
        height: 92%;
    }
    
    .service-wrapper {
        padding: 2vw 5vw;
    }
    
    .service-wrapper .container h3 {
        font-size: 1.8em;
        margin-bottom: 1.5vw;
    }
    
    .service-list {
        gap: 1vw;
    }
    
    .service-item {
        padding: 1.2vw 1.5vw;
    }
    
    .service-item h5 {
        font-size: 0.9em;
        margin-bottom: 0.5vw;
    }
    
    .service-item p {
        font-size: 0.7em;
    }
    
    .car-wrapper {
        padding: 4vw 5vw;
    }
    
    .car-wrapper .container h3 {
        font-size: 1.8em;
        margin-bottom: 1.3vw;
    }
    
    /* .type-list {
    display: flex;
    float:left;
    width:20%;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
}

.car-item{
    display: none;
}

.show {
    display: block;
}

.filter {
    font-size: 1em;
    font-weight: 500;
    color: #858ead;
    padding-left: 1.09vw;
    border: 0;
    border-left: 1.05vh solid white;
    margin-bottom: 2.1vh;
    cursor: pointer;
}

.filter:hover {
    border-left: 1.05vh solid #f9995d;
    color: #f9995d;
}

.filter.filter-active {
    border-left: 1.05vh solid #f9995d;
    color: #f9995d;
} */
    
    .car-img {
        height: 17vw;
    }
    
    .car-info {
        padding: 0 1vw 1vh 1vw;
        font-size: 0.8em;
    }
    
    .pagination{
        margin-top: 1.5vw;
    }
    
    .pagination li a{
        font-size: 0.7em;
    }
    
    .previous-page, .next-page{
        padding: 1.6vw 1.6vw;
        line-height: 1.2vh;
    }

    .current-page, .dots{
        width: 2.5vw;
        line-height: 2vw;
    }
    
    .area-wrapper{
        padding: 3vw 5vw 5vw 5vw;
    }
    
    .area-wrapper .container h3 {
        font-size: 1.8em;
        padding-bottom: 1.5vw;
    }

    .info-area{
        font-size: 0.8em;
    }
    
    .review-wrapper{
        padding: 4vh 5vw;
    }
    
    .review-container{
        gap: 2vw;
    }
    
    .review-img{
        height: 6vw;
        width: 8vw;
    }
    
    .review-container h3 {
        font-size: 1.8em;
        margin-left: 7vw;
        margin-top: 4vw;
    }
    
    .card-review-a{
        width: 30vw;
        padding: 3vw;
        margin-left: 11vw;
    }
    
    .card-review-b{
        width: 40vw;
        padding: 3vw;
    }
    
    .card-review-c{
        width: 37vw;
        padding: 3vw;
    }
    
    .card-review-img{
        height:4vw;
        margin-left:2vw;
        margin-bottom:1vw;
    }
    
    .review-info-img{
        width:1.2vw;
        height:1vw;
        margin-right: 0.8vw;
    }
    
    .review-info-parag{
        line-height:2em;
        font-size: 1em;
    }
    
    .review-info-name{
        font-size:1.3em;
        margin-top: 1.5vw;
    }
    
    .review-info-job{
        font-size: 1em;
    }
    
    .customer-wrapper{
        padding: 1vw 5vw 8vw 5vw;
    }
    
    .customer-text h3{
        font-size: 1.8em;
    }
    
    .customer-text h5{
        font-size: 0.8em;
        line-height: 1.6em;
    }
    
    .img1{
        height:12vw;
        width:12vw;
    }
    
    .img2{
        height:12vw;
        width:12vw;
    }
    
    .img3{
        height:12vw;
        width:12vw;
    }
    
    .img4{
        height:12vw;
        width:12vw;
    }
    
    .img5{
        height:12vw;
        width:12vw;
    }
    
    .img6{
        height:12vw;
        width:12vw;
    }
    
    footer{
        padding: 4vw 5vw 1vw 5vw;
    }
    
    .footer-logo{
        padding-bottom: 0.5em;
    }
    
    .footer-logo .img-logo{
        height: 3.5vw;
    }

    .footer-btn{
        font-size: 1em;
        line-height: 1.5em;
        padding:1vw;
        border-radius:0.5vh;
    }
    
    .footer-btn img{
        width:1.5em;height:1.5em;margin-right:0.6vw;
    }
    
    .col-2{
        padding-right:7%;padding-top:7%;
    }
    
    .footer-info{
        margin-top:1.5em;
    }
    
    .foo-question{
        font-size: 1em;
    }
    
    .foo-answer{
        font-size: 1em;
    }
    
    .btm{
        font-size:0.8em;margin-top:5vw
    }

    .error-title h1 {
        font-size: 2.3em;
    }

    .error-row {
        width: 90vw;
    }

    .error-quote {
        margin-top: 2vw;
    }

    .contact-col-1 h1{
        font-size: 1.8em;
    }

    .contact-col-2 iframe{
        width: 450px;
        height: 250px;
    }
}

@media (max-width:992px){    
    .header-list .header-item {
        font-size: 0.7em;
    }

    .main-wrapper{
        padding:11% 7vw 7%;
    }

    .main-mobil{
        height: 100%;
        width: 100%;
    }
    
    .service-wrapper .container h3 {
        font-size: 1.3em;
    }

    .service-item img{
        width: 3vw;
        height: 3vw;
    }
    
    .service-item h5 {
        font-size: 0.75em;
    }
    
    .car-wrapper .container h3 {
        font-size: 1.3em;
    }
    
    .car-img {
        height: 14vw;
    }
    
    .car-info {
        padding: 0 1vw 1.2vw 1vw;
    }
    
    .pagination{
        margin-top: 1vw;
    }
    
    .pagination li{
        margin: 0.5vw;
    }
    
    .area-wrapper{
        padding: 4vw 5vw 6vw 5vw;
    }
    
    .area-wrapper .container h3 {
        font-size: 1.3em;
    }
    
    .review-wrapper{
        padding: 5vw;
    }
    
    .review-container h3 {
        font-size: 1.3em;
        margin-left: 6vw;
        margin-top: 3vw;
        line-height: 1.3em;
    }
    
    .card-review-img{
        height:3.5vw;
    }
    
    .review-info-parag{
        line-height:1.8em;
        font-size: 0.9em;
    }
    
    .review-info-name{
        font-size:1em;
    }
    
    .review-info-job{
        font-size: 0.9em;
    }
    
    .customer-text h3{
        font-size: 1.3em;
    }
    
    .img1{
        margin: 0 1vw;
    }
    
    .img2{
        margin: 0 1vw;
    }
    
    .img3{
        margin: 0 1vw;
    }
    
    .img4{
        margin: 0 1vw;
    }
    
    .img5{
        margin: 0 1vw;
    }
    
    .img6{
        margin: 0 1vw;
    }

    .footer-btn{
        font-size: 0.8em;
        line-height: 1.2em;
    }
    
    .footer-btn img{
        width:1.2em;height:1.2em;
    }
    
    .foo-question{
        font-size: 0.8em;
    }
    
    .foo-answer{
        font-size: 0.8em;
    }
    
    .btm{
        font-size:0.5em;
    }

    .error-title h1 {
        font-size: 1.6em;
    }

    .error-title p {
        font-size: 0.8em;
    }

    .btn-error {
        font-size: 0.75em;
    }

    #quote-display {
        font-size: 1em;
    }

    .contact-col-1 .h1{
        font-size: 1.3em;
    }
    .contact-col-1 .text-info{
        font-size: 0.8em;
    }
}

@media (max-width:820px){
    .contact-col-2 iframe{
        width: 300px;
        height:250px;
    }
}

@media (max-width:768px){    
    .header-list .header-item {
        font-size: 0.6em;
    }
    
    .main-wrapper {
        padding: 11% 6vw 7%;
    }
    
    .main-wrapper .container h1 {
        font-size: 2em;
    }
    
    .main-wrapper .container h5 {
        font-size: 0.6em;
    }
    
    .btn-main .btn-active {
        font-size: 0.6em;
    }
    
    .btn-main .btn-passive {
        font-size: 0.6em;
    }
    
    .service-wrapper .container h3 {
        font-size: 1.25em;
    }

    .service-item img{
        width:2.5vw;
        height: 2.5vw;
    }
    
    .service-item h5 {
        font-size: 0.68em;
    }
    
    .service-item p {
        font-size: 0.52em;
    }
    
    .car-wrapper .container h3 {
        font-size: 1.25em;
    }
    
    .car-info {
        font-size: 0.65em;
    }
    
    .pagination li a{
        font-size: 0.65em;
    }
    
    .area-wrapper .container h3 {
        font-size: 1.25em;
    }
    
    .info-area{
        font-size: 0.6em;
    }
    
    .review-container h3 {
        font-size: 1.25em;
        line-height: 1.25em;
    }
    
    .review-info-parag{
        font-size: 0.7em;
    }
    
    .review-info-name{
        font-size:0.85em;
    }
    
    .review-info-job{
        font-size: 0.7em;
    }
    
    .customer-text h3{
        font-size: 1.1em;
    }
    
    .customer-text h5{
        font-size: 0.7em;
    }

    .footer-btn{
        font-size: 0.8em;
        line-height: 1.4em;
    }

    .footer-btn img{
        width: 1.4em;
        height: 1.4em;
    }
    
    .foo-question{
        font-size: 0.8em;
    }
    
    .foo-answer{
        font-size: 0.8em;
    }
    
    .btm{
        font-size:0.6em;
    }

    .error-img {
        height: 25vw
    }

    .error-title h1 {
        font-size: 1.38em;
    }

    .error-title p {
        font-size: 0.75em;
        margin-bottom: 2vw;
    }

    .btn-error {
        font-size: 0.7em;
        padding: 1.5vw;
    }

    .error-quote {
        margin-top: 1vw;
    }

    #quote-display {
        font-size: 0.75em
    }

    .contact-col-1 h1{
        font-size: 1.25em;
    }
}

@media (max-width:670px){
    .contact-col-1 h1{
        margin-top:1em;
    }
    .contact-col-1 .text-info{
        padding: 0% 10vw;
    }
    .contact-col-2{
        display: none;
    }
}

@media (max-width:600px){    
    .header-list .header-item {
        font-size: 0.6em;
    }
    
    .main-wrapper {
        padding: 12% 5vw 7%;
    }

    .btn-main .btn-active{
        margin-right: 4%;
    }

    .main-mobil{
        height: 76%;
    }
    
    .service-wrapper .container h3 {
        font-size: 1.2em;
    }
    
    .service-list {
        display: grid;
        gap: 1.5vw;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .service-item {
        padding: 2vw 1.5vw;
    }

    .service-item img{
        width: 3.5vw;
        height: 3.5vw;
    }
    
    .service-item h5 {
        font-size: 0.75em;
    }
    
    .service-item p {
        font-size: 0.65em;
    }
    
    .car-wrapper {
        padding: 6vw 5vw 6vw 5vw;
    }
    
    .car-wrapper .container h3 {
        font-size: 1.2em;
    }
    
    .car-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 3%;
    }
    
    .car-img {
        height: 21vw;
    }
    
    .car-info {
        font-size: 0.75em;
    }
    
    .pagination{
        margin-top: 2vw;
    }

    .pagination li{
        margin: 1vw;
    }

    .current-page, .dots{
        width: 1.1em;
        line-height: 1em;
    }
    
    .area-wrapper .container h3 {
        font-size: 1.2em;
    }
    
    .review-container{
        gap: 1.5vw;
    }
    
    .review-container h3 {
        font-size: 1.2em;
        line-height: 1.2em;
    }
    
    .card-review-a{
        margin-left: 9vw;
    }
    
    .review-info-parag{
        line-height:1.4em;
        font-size: 0.6em;
    }
    
    .review-info-name{
        font-size:0.8em;
    }
    
    .review-info-job{
        font-size: 0.6em;
    }
    
    .customer-text h3{
        font-size: 1em;
    }
    
    .customer-text h5{
        font-size: 0.6em;
    }

    .footer-btn{
        font-size: 0.6em;
    }
    
    .foo-question{
        font-size: 0.6em;
    }
    
    .foo-answer{
        font-size: 0.6em;
    }
    
    .btm{
        font-size:0.45em;
    }

    .error-img {
        height: 20vw;
    }

    .error-title h1 {
        font-size: 1.1em;
    }

    .error-title p {
        font-size: 0.6em;
        margin-bottom: 1.6vw;
    }

    .btn-error {
        font-size: 0.6em;
        padding: 1.4vw;
    }

    .quote-mark {
        width: 2.6vw;
        height: 2vw;
    }

    #quote-display {
        font-size: 0.6em;
    }

    .contact-col-1 .h1{
        font-size: 1.2em;
    }

    .contact-col-1 .text-info{
        font-size: 0.8em;
    }
}

@media (max-width: 460px){        
    header{
        padding: 2% 4%;
    }

    header.responsive{
        box-shadow: 0 5px 10px rgb(1 1 1 / 10%);
    }
    
    .img-logo {
        height: 6.5vw;
    }
    
    .header-list .header-item{
        display: none;
    }

    .header-icon{
        display: block;
        height: 6vw;
    }

    .header-list.responsive{
        width: 100%;
    }

    .header-list.responsive a{
        display: block;
        position: relative;
    }

    .header-list.responsive .header-icon{
        position: absolute;
        right: 17px;
        top: 8.5px;
    }

    .header-list.responsive .header-item{
        font-size: 0.7em;
        padding: 4vw 0;
        height: 12vw;
        text-align: center;
    }

    .header-item:hover{
        background-color: #57BAE5;
        color: white;
    }
    
    .main-wrapper {
        padding: 20% 5.5vw 10%;
    }
    
    .main-wrapper .container h5 {
        font-size: 0.7em;
        line-height: 1.4em;
        margin-top: 7vw;
    }
    
    .btn-main {
        margin-top: 5vw;
    }
    
    .main-mobil {
        display:none;
    }
    
    .service-wrapper .container h3 {
        font-size: 1.1em;
    }

    .service-item img{
        width:5vw;
        height: 5vw;
    }
    
    .service-item p {
        font-size: 0.6em;
    }
    
    .car-wrapper .container h3 {
        font-size: 1.1em;
    }
    
    .car-img {
        height: 25vw;
    }
    
    .pagination{
        margin-top: 4vw;
    }
    
    .pagination li a{
        font-size: 0.65em;
    }

    .previous-page, .next-page{
        padding: 2.6vw;
    }

    .area-wrapper{
        padding: 5vw 5vw 6vw 5vw;
    }
    
    .area-wrapper .container h3 {
        font-size: 1.1em;
    }
    
    .info-area{
        grid-column: 1;
        grid-row: 2;
        margin: 0 5vw;
        font-size: 0.7em;
    }

    .kota-area{
        columns: 3;
        text-align: left;
    }
    
    .review-wrapper{
        padding: 7vw 5vw;
    }
    
    .review-img{
        height:7vw;
    }
    
    .review-container h3 {
        font-size: 1.1em;
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    
    .card-review-a{
        width: 36vw;
        margin-left: 2vw;
        grid-column: 1;
        grid-row: 2 / span 3;
    }
    
    .card-review-b{
        width: 49vw;
        grid-column: 2;
        grid-row: 2 / span 2;
    }
    
    .card-review-c{
        width: 46vw;
        grid-column: 2;
        grid-row: 4;
    }
    
    .card-review-img{
        height:6vw;
    }
    
    .review-info-parag{
        line-height:1.5em;
        font-size: 0.6em;
    }
    
    .review-info-name{
        font-size:0.7em;
    }
    
    .review-info-job{
        font-size: 0.6em;
    }
    
    .customer-text h3{
        font-size: 0.74em;
    }
    
    .customer-text h5{
        font-size: 0.6em;
        line-height: 1.5em;
    }
    
    .img1{
        height:11vw;
        width:11vw;
    }
    
    .img2{
        height:11vw;
        width:11vw;
    }
    
    .img3{
        height:11vw;
        width:11vw;
    }
    
    .img4{
        height:11vw;
        width:11vw;
    }
    
    .img5{
        height:11vw;
        width:11vw;
    }
    
    .img6{
        height:11vw;
        width:11vw;
    }

    footer .container{
        display: block;
    }

    .footer-logo{
        justify-content: center;
    }
    
    .footer-logo .img-logo{
        height: 6vw;
    }

    .footer-btn{
        font-size: 0.5em;
        line-height: 1.5em;
        padding:2vw;
        margin: 0 auto 2.4vw;
    }
    
    .footer-btn img{
        width:1.5em;height:1.5em;
    }
    
    .col-2{
        padding-right:0%;
        padding-top: 4vw;
    }
    
    .footer-info{
        display: block;
        text-align: center;
        margin-top:1.6vh;
    }
    
    .foo-question{
        font-size: 0.6em;
    }
    
    .foo-answer{
        font-size: 0.6em;
    }
    
    .btm{
        display: none;
    }

    .btm2{
        display: block;
        font-size:0.3em;
        margin-top:5vw;
        text-align: center;
    }

    .error-wrapper .container {
        width: 80vw;
        text-align: center;
    }

    .error-img {
        display: none;
    }

    .error-img-2 {
        display: block;
        height: 25vw;
        margin-bottom: 3vw;
    }

    .error-title {
        width: 100%
    }

    .error-title h1 {
        font-size: 0.95em;
    }

    .error-title p {
        margin-bottom: 2vw
    }

    .btn-error {
        margin: 0 auto;
        font-size: 0.55em;
    }

    .error-quote {
        margin-top: 8vw;
        flex-direction: column;
        align-items: center;
    }
    .contact-col-1 .h1{
        font-size: 1.1em;
    }
}

@media (max-width: 320px){        
    .info-area{
        font-size: 0.55em;
    }
    .previous-page, .next-page{
        padding:2.6vw 1.8vw;
    }
    .error-img-2 {
        height: 30vw;
    }
}