@media (max-width: 1500px) {

:root {--max-width: 95%;}

}

@media (max-width: 1000px) {
    #hero {background-image: url(../img/herom.jpg); height: 60vh; background-size: cover;}
}



@media (max-width: 800px) {

    .service-cards {display: flex; gap: 5px;}
    .card {flex: 1 1 100%;}

    ul.menu {
        position: fixed;
        top: 0;
        left: -200%;
        z-index: 20;
        width: 100%;
        height: 100vh;
        display: block;
        transition: 0.5s all;
        max-width: unset;
        overflow-y: auto;
        box-sizing: border-box;
        padding-top: 80px;
    }

    .module-container {display: block; margin: 1em auto;}
    .left_content, .right_content {flex: 1 1 100%; text-align: left; margin-bottom: 1em;}
    .right_content {flex: 1 1 100%;}
    .why-us-card {width: 100%; box-sizing: border-box; margin-bottom: 10px;}
    .why-us-stats {display: block;}
    .top-header {display: block;text-align: left;padding: 1em;}    
    .form-group span {flex: 1 1 100%!important;}
    .form-group {display: block;}
    section {padding: 1em 0.3em;}
    h1 {font-size: 2em;}
    h2 {font-size: 1.4em;}
    .contact-info {display: none!important;}
    .contact-info p {padding: 0;}
    .hero-content {max-width: 95%;}
    .hero-content h1 {font-size: 2.5em;}
    .icon {display: none;}
    .hero-content h2 {font-size: 1.2em;}
    .menu li:hover .submenu {position: relative;}


    #menu {
        width: 40px;
        height: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        position: fixed;
        top: 1.5em;
        right: 1.5em;
        z-index: 50;
        transform: scale(0.7);
    }
    #mobilemenu {
        background-color: #222;
    }
    #menu span {
        display: block;
        height: 5px;
        background:#D5A00C;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    #menu.close span:nth-child(1) {
        transform: translateY(12px) rotate(45deg);
    }
    
    #menu.close span:nth-child(2) {
        opacity: 0;
    }
    
    #menu.close span:nth-child(3) {
        transform: translateY(-12px) rotate(-45deg);
    }
    .activemenu {
        left: 0!important;
    }
.mobileinfo {
    display: block;
    margin: 1.5em;
    box-sizing: border-box;
    background-color: #111;
    padding: 0.5em;
    color: white;
    border-radius: 10px;
}
.mobileinfo div {
    padding: 1em 0;
}
nav ul li {
    line-height: unset;
    background-color: #111;
    margin-bottom: 2px!important;
}
.mobileinfo a {
    padding: 0;
}
.submenu {
    background-color: #010201;
}



}