@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1140px;
    }
}
@media (min-width: 992px) and (max-width:1200px) {
    .description-order-1 {
        -webkit-line-clamp: 5;
    }
}
@media screen and (max-width: 992px) {
    .line {
        width: 100%;
        height: 2px;
        margin: .5rem 0;
        background-color: #32cccc;
        transform: rotate(0deg); /* หมุนเส้นให้เป็นแนวนอน */
    }
    .more-details{
        height: auto;
    }
    .content-order-1 {
        padding: 1rem 0 2rem 0rem;
    }
    .text-contactus {
        width: 70%;
    }
    .dropdown-submenu .dropdown-menu li .dropdown-item {
        padding: 0rem 2rem;
    }
    .dropdown-item:focus,
    .dropdown-item:hover {
        background-color: #fff204;
    }
    .dropdown-menu {
        background-color: unset;
        border: unset;
    }
    .carousel-indicators-banner {
        bottom: -45px;
    }
    .card-blog-content {
        height: 120px;
    }

    .text-content-banner {
        width: unset;
    }

    .hidden {
        display: none !important;
    }

    .mb-5 {
        margin-bottom: 3rem;
    }

    #serviceCarousel {
        padding-left: 6rem;
        padding-right: 6rem;
        padding-bottom: 3rem;
    }

    .navbar-top {
        display: none !important;
    }

    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2252%22%20height%3D%2252%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20filter%3D%22url%28%23filter0_d_311_429%29%22%3E%3Crect%20x%3D%224%22%20width%3D%2244%22%20height%3D%2244%22%20rx%3D%2222%22%20fill%3D%22white%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3Cpath%20d%3D%22M23.2929%2028.7071C22.9024%2028.3166%2022.9024%2027.6834%2023.2929%2027.2929L28.5858%2022L23.2929%2016.7071C22.9024%2016.3166%2022.9024%2015.6834%2023.2929%2015.2929C23.6834%2014.9024%2024.3166%2014.9024%2024.7071%2015.2929L30.7071%2021.2929C31.0976%2021.6834%2031.0976%2022.3166%2030.7071%2022.7071L24.7071%2028.7071C24.3166%2029.0976%2023.6834%2029.0976%2023.2929%2028.7071Z%22%20fill%3D%22%230D0D0D%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_d_311_429%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2252%22%20height%3D%2252%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%20dy%3D%224%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_311_429%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_311_429%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
        background-size: 100% 100%;
    }

    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2252%22%20height%3D%2252%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url%28%23filter0_d_526_865%29%22%3E%3Crect%20x%3D%224%22%20width%3D%2244%22%20height%3D%2244%22%20rx%3D%2222%22%20fill%3D%22white%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3Cpath%20d%3D%22M28.7071%2015.2929C29.0976%2015.6834%2029.0976%2016.3166%2028.7071%2016.7071L23.4142%2022L28.7071%2027.2929C29.0976%2027.6834%2029.0976%2028.3166%2028.7071%2028.7071C28.3166%2029.0976%2027.6834%2029.0976%2027.2929%2028.7071L21.2929%2022.7071C20.9024%2022.3166%2020.9024%2021.6834%2021.2929%2021.2929L27.2929%2015.2929C27.6834%2014.9024%2028.3166%2014.9024%2028.7071%2015.2929Z%22%20fill%3D%22%230D0D0D%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_d_526_865%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2252%22%20height%3D%2252%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%20dy%3D%224%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_526_865%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_526_865%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
        background-size: 100% 100%;
    }

    .carousel-control-next,
    .carousel-control-prev {
        top: -140px;
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        width: 3rem;
        height: 3rem;
    }

    .px-4-5 {
        padding: 0 2rem !important;
    }

    /* 
    .title-card {
        height: unset;
    } */

    .content-text-service {
        /* width: 50%; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: flex;
        justify-content: center;
    }

    .navbar {
        background: #c3002f;
        padding-left: 1rem;
    }

    .navbar-nav a {
        color: #fff !important;
    }

    .background-container {
        background: linear-gradient(
                180deg,
                #ffffff 70%,
                rgba(255, 255, 255, 0.1) 80%
            ),
            /* สีพื้นหลังโปร่งใส 50% */ url("./assets/images/image20.jpg");
        background-position: bottom;
        /* height: 692px; */
        background-size: contain;
    }

    .navbar-toggler:focus {
        text-decoration: none;
        /* outline: 0; */
        box-shadow: unset;
    }

    .content-banner {
        width: 100%;
    }

    .text-content-banner {
        text-align: center;
    }

    .container-navbar {
        max-width: unset !important;
    }

    .carousel-banner {
        margin-top: 3rem;
        align-items: flex-start;
        height: unset;
    }

    .video-element {
        margin-top: 3rem;
        margin-bottom: 1rem;
    }

    .text-content-banner {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .footer-banner {
        text-align: center;
        height: unset;
    }

    .service {
        height: unset;
    }

    .service-content {
        margin-top: 2rem;
    }

    .width-100 {
        width: 100%;
    }

    .blogs {
        height: unset;
    }

    .blog-content {
        margin-top: 2rem;
    }

    .card-blog {
        margin-bottom: 3rem;
        display: flex;
        justify-content: center;
    }

    .card-blog-img {
        width: 364px;
    }

    .video {
        padding: 2rem 1rem;
        height: unset;
    }

    .video-img {
        width: 100%;
        height: 220px;
    }

    .card-video-center {
        width: 65%;
    }

    .card-video {
        display: flex;
        justify-content: center;
    }

    .aboutus {
        height: unset;
    }

    .img-aboutus {
        width: 100%;
        /* height: 366px; */
    }

    .p-2rem {
        padding: 2rem;
    }

    .text-aboutus {
        width: 100%;
    }

    .marginbottom1rem {
        margin-bottom: 1rem;
    }

    .button-aboutus {
        text-align: center;
    }

    .ourteam {
        height: unset;
    }

    .card-ourteam {
        width: unset !important;
        padding-right: unset !important;
    }

    .card-ourteam {
        margin-bottom: 2rem;
    }

    .welcome {
        padding: 4rem 2rem;
        height: unset;
    }

    .content-welcome {
        width: 100%;
    }

    .margin2remfooter {
        margin-bottom: 2rem;
    }

    .class-img-aboutus {
        padding: 3rem 2rem;
    }
}

@media screen and (max-width: 768px) {
    .img-content-page-2 {
        height: unset;
    }   
    .gallery-image {
        width: calc(50% - 10px); /* ความกว้างของภาพ 1/3 ของ container ลบระยะห่าง */
    }
}
@media screen and (max-width: 576px) {
    .card-video-center {
        width: 100%;
        /* height: 220px; */
    }
    #muteButton{
        position: absolute;
        top: 80%;
        right: 40%;
    }
    .text-header-page{
        font-size: 40px;
    }
    .email-contactus {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .row {
        margin-right: unset !important;
        margin-left: unset !important;
    }
    .gallery-image {
        width: calc(100% - 10px); /* ความกว้างของภาพ 1/3 ของ container ลบระยะห่าง */
    }
}