@media screen and (max-width: 1200px) {
    .container {
        max-width: 1100px;
    }

    #app #header .container {
        max-width: 100%;
    }

    #app #header .header-navbar {
        position: relative;
        flex-direction: column !important;
        justify-content: flex-start;
        width: 100%;
        align-items: flex-start;
        padding-bottom: 0;
    }

    #app #header .header-navbar .btn.navbar-toggle-btn {
        display: block;
        position: absolute;
        right: 3px;
        top: 8px;
    }

    #app #header .header-navbar .navbar-menu {
        position: absolute;
        width: 100%;
        background-color: transparent;
        flex-grow: 1;
        z-index: 11;
        overflow: hidden;

        max-height: 0;
        opacity: 0;
        visibility: hidden;
    }

    #app #header .header-navbar .navbar-menu.active {
        position: static;
        /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
        margin-bottom: 10px;

        max-height: max-content;
        /* Adjust to expected content height */
        opacity: 1;
        visibility: visible;
        animation: animate_navbar 0.6s ease-in-out;
        --webkit-animation: animate_navbar 0.6s ease-in-out;
    }

    #app #header .header-navbar .navbar-menu .item {
        display: block;
        width: 100%;
        padding: 5px 3px;
        transition: all 0.8s ease;
    }


    #app #header .header-navbar .navbar-menu .item .link.active,
    #app #header .header-navbar .navbar-menu .item:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }

    #app #header .header-navbar .navbar-menu .item .link {
        font-size: var(--font-size-sm);
        display: block;
        width: 100%;
        padding: 6px 0;
    }

    #app #header .header-navbar .navbar-menu .item .link.btn {
        min-width: 180px;
        max-width: 250px;
    }

    #main .app-slider .slider-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    #app #main .slider.app-slider .banner-text-wrapper .title {
        text-align: center;
    }

    #main .app-slider .slider-content-wrapper .menu-wrapper.plain {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #app #main .slider.app-slider .tlf-wrapper {
        width: 70%;
    }


    #app #main .slider.app-slider .banner-text-wrapper .action-wrapper .menu-wrapper .item .link,
    #app #main .slider.app-slider .banner-text-wrapper .title {
        font-size: var(--font-size-md);
    }

    #main .connect .text {
        font-size: var(--font-size-base);
    }
}


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

    #app #main .slider.app-slider .slide,
    #app #main .slider.app-slider,
    #app #main .slider.app-slider .carousel .carousel-inner .carousel-item {
        height: 400px;
    }

    #app #main .slider.app-slider .carousel .carousel-inner .carousel-item .banner-text-wrapper .title {
        padding: 2px;
        margin: 1px 0;
    }


    #main .svc-section .svc-wrapper.grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #main .hero-section .row {
        flex-direction: column;
    }

    #main .hero-section .row div {
        width: 100%;
    }

    #main .service-section .card .card-header {
        height: 220px;
    }
}


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

    #app #main .slider.app-slider .title {
        line-height: 0.4;
    }

    #app #main .slider.app-slider .carousel .carousel-inner .carousel-item .banner-text-wrapper .action-wrapper .menu-wrapper .item {
        display: block;
        padding: 1rem 0;
        ;
    }

    #main .service-section .svc-card-wrapper .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #main .service-section .svc-card-wrapper .card-grid .card {
        height: 100%;
        margin: 1rem 0;
    }

    #main .service-section .svc-card-wrapper .card-grid .card .card-header {
        height: 100%;
    }

    #main .hero-section .article-content {
        margin-left: 0;
        padding: 10px;
    }

    #main .bg-slider.fixed {
        min-height: 400px;
    }

    #main .bg-slider.fixed .content {
        width: 90%;
    }

    #main .connect {
        text-align: center;
    }

    #footer .footer-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media screen and (max-width: 425px) {
    .container {
        padding: 0;
    }

    #main .app-slider .slider-content-wrapper {
        width: 100%;
    }


    #app #main .slider.app-slider .tlf-wrapper {
        width: 90%;
    }

    #main .service-section .svc-card-wrapper .card-grid,
    #main .svc-section .svc-wrapper.grid {
        display: block;
    }

    #main .svc-section .svc-wrapper.grid .card {
        margin: 1rem 0;
    }

    #main .hero-section .img-fluid {
        min-height: 100%;
    }

    #app #main .slider.app-slider .carousel .carousel-inner .carousel-item .banner-text-wrapper {
        min-width: 100%;
    }

    #app #main .slider.app-slider .carousel .carousel-inner .carousel-item .banner-text-wrapper .action-wrapper .menu-wrapper .item .link,
    #app #main .slider.app-slider .carousel .carousel-inner .carousel-item .banner-text-wrapper .title {
        font-size: var(--font-size-sm);
    }



    #main .bg-slider.fixed .content .title {
        font-size: var(--font-size-base);
    }


    #footer .footer-row {
        flex-direction: column;
    }

    #footer .footer-row .column.fs,
    #footer .footer-row .column.ls {
        flex: 1;
        width: 100%;
        max-width: 100%;
    }

    #footer .footer-row .column.ls .title {
        font-size: 16px;
    }
}