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

    #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;
            left: 0;
            top: 100%;
            width: 100%;
            background-color: transparent;
            width: 100%;
            flex-grow: 1;
            z-index: 11;
            /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            margin-bottom: 10px; */
        /* transition: all 2s ease;
            height: 0;
            overflow: hidden;
           visibility: hidden; */

        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%;
        ;
    }

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


    #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-base);
    }

    #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;
    }

    #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 .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{
        display: block;
    }

    #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 .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;
    }
}

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

    
    #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;
     }
}