@media screen and (min-width: 1200px) and (max-width: 1400px) {
    header .container {
        max-width: 98%;
    }

    .header-navigation > ul > li > a {
        padding: 8px 12px;
    }
}

@media (max-width: 1199px) {
    .header-logo {
        width: 100px;
        height: 67px;
    }

    .header-right.bg-after::after {
        left: 25%;
    }

    .header-navigation {
        position: fixed;
        top: 0;
        right: 0;
        max-width: 350px;
        width: 100%;
        z-index: 10;
        height: 100vh;
        background-color: var(--bs-white);
        border-radius: 0;
        padding: 0;
        transform: translateX(110%);
        transition: all .4s ease-in;
        box-shadow: 0 30px 30px rgb(196 214 229 / 20%);
        overflow: hidden;
        opacity: 0;
    }

    .is-navigation .header-navigation {
        transform: translateX(0);
        width: 100%;
        opacity: 1;
        overflow: visible;
        transition: transform .4s ease-in;
    }


    .header-navigation > ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
        overflow-y: auto;
    }

    .header-navigation > ul > li,
    .header-navigation > ul > li > ul > li {
        width: 100%;
    }

    .header-navigation > ul > li + li {
        border-top: 1px dashed rgb(230 235 240);
    }

    .header-navigation > ul > li > a {
        padding: 10px 15px;
    }

    .header-navigation > ul > li > ul,
    .header-navigation > ul > li > ul > li > ul {
        position: unset;
        top: unset;
        left: unset;
        width: 100%;
        background-color: var(--bs-white);
        border-radius: 0;
        border: unset;;
        padding: 5px;
        box-shadow: unset;;
        opacity: unset;
        visibility: unset;
        pointer-events: unset;
        transform: unset;
    }

    .header-navigation > ul > li > ul > li > ul {
        top: unset;
        left: unset;
    }

    .header-navigation > ul > li:hover > ul,
    .header-navigation > ul > li > ul > li:hover > ul {
        opacity: unset;
        visibility: unset;
        pointer-events: unset;
        transform: unset;
    }
}

@media (max-width: 1023px) {
    .footer-line-end {
        border-right: none;
    }

    .section-heading .heading-title {
        font-size: 1.8em;
    }

    .section-heading .heading-description {
        font-size: 1em;
    }
}

@media (max-width: 991px) {
    .header-right.bg-after::after {
        left: 69%;
    }

    .tour-hot__wrap .decor-right {
        width: 220px;
        opacity: 0.3;
    }
    .detailContent h1 {
        font-size: 1.5em;
    }

    .detailContent h2 {
        font-size: 1.4em;
    }

    .detailContent h3 {
        font-size: 1.3em;
    }

    .detailContent h4 {
        font-size: 1.25em;
    }

    .detailContent h5 {
        font-size: 1.2em;
    }

    .detailContent h6 {
        font-size: 1.15em;
    }
}

@media (max-width: 576px) {
    .section-heading .heading-title {
        font-size: 1.6em;
    }

    .button-theme {
        padding: 6px 25px;
    }

    .introduce-experience {
        padding: 15px 18px;
    }

    .introduce-experience .icon {
        width: 40px;
        height: 33px;
    }

    .introduce-experience .text {
        font-size: 13px;
    }
    .detail-contact .contact-item{
        min-height: unset;
    }

    .article-card-2 .title {
        font-size: 1.1em;
    }

    .article-card-2 .card-text {
        display: none !important;
    }

    .article-card-2 .image {
        width: 120px;
    }

    .tour-card .card-title {
        font-size: 1.1em;
        height: 40px;
    }
}