@media screen and (max-width: 1600px) {
    .top-head {
        max-height: 700px;
        min-height: auto;
    }
    .top-head .card-header .logo {
        margin-bottom: 45px;
        padding-bottom: 40px;
    }
    .top-head .card-header h1 {
        font-size: 2.5rem;
    }
    .top-head .card-header .banner-text {
        font-size: 1.3rem;
        line-height: 2.1rem;
        margin-top: 40px;
    }
    .content-service {
        width: 70%;
        margin: 0 0 0 50px;
    }
    .service-img {
        width: 33%;
    }
    .main-timeline .title {
        font-size: 20px;
    }
}

@media screen and (max-width: 1450px) {
    .top-head .card-header {
        left: 50px;
    }
    .top-head .card-header .logo img {
        width: 200px;
    }
    .top-head .card-header .logo::after {
        content: "";
        width: 70px;
    }
    .top-head .card-header .logo {
        margin-bottom: 50px;
        padding-bottom: 40px;
    }
    .top-head .card-header h1 {
        font-size: 2.1rem;
    }
    .top-head .card-header h1 span.sub-head {
        padding: 10px 0;
    }
    .top-head .card-header .banner-text {
        font-size: 1em;
        margin: 50px 0;
        width: 75%;
        line-height: 1.8rem;
    }
}

@media screen and (max-width: 1366px) {
    .img-area {
        width: 55%;
    }
    .img-area img {
        width: 100%;
    }
    .desc-tt img.icon-img {
        width: 200px;
        height: auto;
    }
    .text-wrap {
        width: calc(100% - 250px);
        margin-bottom: 3rem;
    }
    .text-wrap ul li {
        line-height: 1.4rem;
        margin-bottom: 14px;
    }
    .content-dt {
        padding: 32px 0 45px 50px;
    }
}

@media screen and (max-width: 1024px) {
    .top-head {
        max-height: 550px;
    }
    .top-head .card-header {
        left: 30px;
        top: 30px;
    }
    .top-head .card-header .logo {
        margin-bottom: 20px;
        padding-bottom: 30px;
    }
    .top-head .card-header .logo img {
        width: 180px;
    }
    .top-head .card-header h1 {
        font-size: 1.7rem;
    }
    .top-head .card-header .banner-text {
        font-size: 0.9em;
        margin: 15px 0;
        width: 80%;
        line-height: 1.4rem;
    }
    .btn-shape {
        font-size: 1rem;
        width: 80px;
    }
    ul.inline li:last-child {
        margin: 30px 0px;
    }
    .content-service {
        width: 100%;
        margin: 0 50px;
    }
    .img-area {
        display: none;
    }
    .content-dt {
        padding: 32px 40px 45px;
    }
    .feature-section:nth-child(2n+2) .content-dt {
        padding: 45px 40px 45px;
    }
    .service-img {
        width: 33%;
        display: none;
    }
    .mySlides {
        padding: 15px;
        line-height: 1.3rem;
    }
    .mySlides q {
        font-size: 1rem;
    }
    .contact-us {
        padding-top: 3rem;
    }
    .bg-svg {
        overflow: hidden;
    }
    .bg-svg svg#svg {
        width: 1150px;
    }
    .dark-title .sub-title {
        font-size: 1.4rem;
    }
    .dark-title .title {
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 840px) {
    .top-head {
        max-height: 470px;
    }
    .top-head {
        max-height: fit-content;
        height: 48vh;
    }
    .top-head .card-header h1 {
        font-size: 1.4rem;
    }
    .top-head .card-header .logo {
        margin-bottom: 25px;
        padding-bottom: 30px;
    }
    .top-head .card-header .banner-text {
        font-size: 0.9em;
        margin: 20px 0 18px;
        width: 100%;
        line-height: 1.5rem;
    }
    .top-head img.img-banner {
        width: auto;
        height: 190px;
        right: 0;
        left: auto;
        float: right;
    }
    .top-head .card-header {
        left: 40px;
        top: 25px;
        right: 40px;
        width: auto;
    }
    .main-timeline .timeline {
        width: 98%;
        float: left;
        padding: 20px 40px 20px 60px;
        border-top: 7px solid #084772;
        border-right: 7px solid #084772;
        border-radius: 0 30px 0 0;
        position: relative;
        right: 0;
    }
    .main-timeline .timeline:nth-child(2) {
        margin-top: 0px;
    }
    .main-timeline .timeline:first-child,
    .main-timeline .timeline:last-child:nth-child(even) {
        margin: 0 10px;
        padding-bottom: 30px;
    }
    .main-timeline:before {
        content: "";
        width: 0px;
        height: 0;
        background: transparent;
        margin: 0;
        top: 0px;
        left: 0;
        right: 0;
    }
    .main-timeline .timeline:nth-child(2n) {
        left: 10px;
    }
    .main-timeline .timeline:nth-child(even),
    .main-timeline .timeline:nth-child(odd) {
        margin: 0;
        padding-bottom: 40px;
    }
    .main-timeline .timeline:nth-child(odd) {
        margin-left: 10px;
    }
}

@media screen and (max-width: 767px) {
    .top-head img.img-banner {
        height: 32%;
    }
    .top-head .card-header .banner-text {
        margin: 5px 0;
    }
    .mySlides q {
        font-size: 0.9rem;
    }
    .top-head img.img-banner {
        height: 120px;
    }
}
@media screen and (max-width: 640px) {   
    .top-head {
        max-height: 100%;
        height: auto;
    } 
    .top-head img.img-banner {
        height: 120px;
        position: absolute;
    }
    .top-head .card-header {
        position: relative;
        left: 0;
        right: 0;
        padding: 0 25px;
    }
    .action-row, .slidetext {
        position: relative;
        margin-top: 20px;
    }


    .content-service {
        margin: 0 40px;
    }
    .main-timeline {
        overflow: visible;
    }
    .main-timeline .timeline:nth-child(odd) {
        margin-left: 5px;
    }
    .main-timeline .timeline:nth-child(2n) {
        left: 5px;
    }
    .main-timeline .icon {
        left: -10px;
    }
    .main-timeline .timeline:nth-child(2n) .icon {
        left: auto;
        right: -10px;
    }
}