@media (max-width: 1500px) {

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

}

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

@media (max-width: 1280px) {

    .contact-info {
        margin-right: 50px;
    }



    ul.menu {
        position: fixed;
        top: -20px;
        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;
        color: #888;
    }



    #menu {
        width: 40px;
        height: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        position: fixed;
        top: 30px;
        right: 20px;
        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;
}


}

@media (max-width: 800px) {

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




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

}