@media screen and (max-width:1200px) {
    .container {
        max-width: 100%;
        padding: 10px 20px;
    }

    #app #header{
        height: unset !important;
    }


    #app #header .slider.no-slide .title
    {
        margin-top: 10px;
        font-size: var(--font-size-xl);
    }

    #app #header .container {
        width: 100%;
        padding: 0;
    }



    #app #header .button-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    #app #header .top-nav {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding: 0 5px;
    }

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

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

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

    #app #main #cust-info.colorful-background .row div {
        width: 100%;
    }

    #app #main #cust-info.colorful-background .row div .title,
    #app #main #cust-info.colorful-background .row div .text {
        text-align: center;
        max-width: 100%;
    }

    #app #main #cust-info.colorful-background .ms-menu .item {
        justify-content: center;
    }


    #app #main section#hw .row div {
        width: 100%;
    }

    #app #main section#hw {
        margin-top: 0;
        padding-top: 0;
    }

    #app #main section#hw .row .img-fluid {
        width: 260px;
        height: auto;
        display: block;
        margin: auto;
    }


    body {
        position: relative;
    }


    #app #header .top-nav {
        flex-direction: column;
        justify-content: flex-start;
    }


    #app #header .top-nav .brand-wrapper .btn.mobile-sidenav-controller-btn,
    #app #header .top-nav .main-menu-container .btn.close-mobile-sidebar-menu-btn {
        display: block;
    }

    #app #header .top-nav .main-menu-container .btn.close-mobile-sidebar-menu-btn {
        margin: 1rem 0;
    }

    #app #header .top-nav .brand-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }


    #app #header .slider.no-slide{
        padding: 10px;
    }

    #header .main-menu-container {
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
        width: 0;
        background-color: var(--white);
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        transition: all 0.9s ease;
        overflow: hidden;
    }



    #header .main-menu-container.active {
        width: 98%;
        overflow: visible;
        color: var(--dark);
    }


    #app #header .top-nav .main-menu-container .top-nav-menu .menu-item {
        display: block;
        margin: 12px 0 !important;
        font-size: var(--font-size-lg);
        width: 100%;
        text-align: center;
    }
}


   


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

   #main h2.section-title,
#main h3.section-title,
#main h4.section-title,
#main h5.section-title,
#main h6.section-title {
        font-size: var(--font-size-md);
        letter-spacing: 6px;
    }



    #footer .info .img-fluid {
        margin-left: 0;
    }

    #footer .title,
    #footer .tm-wrapper,
    #footer .info .text {
        text-align: left;
    }

    #footer .row {
        gap: 20px;
    }
}


@media screen and (max-width:510px) {
    .container {
        padding: 4px 8px;
    }


    #app #main section#hw .section-title{
        text-align: center;
    }

  #app #main #about-svc .grid-wrapper.card-grid,
  #app #main #about-svc.objective-wrapper .grid-wrapper.card-grid,
  #app #main section#wcs .grid-wrapper.card-grid{
    grid-template-columns: repeat(1, 1fr);
  }

}