.hamburger-menu {
    display: none
}

.close-button {
    display: none
}

@media(max-width: 1345px) {
    .hero-section {
        width: 100%;
        height: auto;
        overflow: hidden
    }

    .step h5 {
        font-size: 20px
    }
}

@media(max-width: 1004px) {
    .primary-menu {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 300px;
        background-color: #537aa5;
        display: flex;
        justify-content: center;
        z-index: 999;
        transition: all .2s linear
    }

    .primary-menu ul {
        flex-direction: column
    }

    .primary-menu nav {
        width: 100%;
        margin-top: 150px
    }

    .close-button {
        display: block;
        transform: translate(124%, 2%);
        font-size: 20px;
        color: #fff;
        transition: all .2s linear
    }

    .header-btn {
        display: none
    }

    .hamburger-menu {
        display: block
    }

    .active-primarymenu {
        right: 0
    }
}

@media(max-width: 1050px) {
    .container {
        width: 100%;
        padding: 0px 10px
    }

    .about-us .main-about {
        display: flex
    }

    .hamburger-menu {
        padding-right: 1.5rem;
        cursor: pointer
    }

    .hamburger-menu .line {
        display: block;
        width: 2.5rem;
        height: 2px;
        margin-bottom: 10px;
        background-color: #fff;
        cursor: pointer
    }
}

@media(max-width: 991px) {
    .main-about {
        flex-direction: column
    }

    .about-us .main-about .about-img {
        width: 100%;
        position: relative
    }

    .about-us .main-about .about-img img {
        width: 70%
    }

    .about-us .main-about .about-img .black-men {
        position: absolute;
        bottom: 0;
        width: 250px;
        margin-bottom: -50px
    }

    .projects .heading .heading-texture {
        font-size: 100px
    }

    .about-us .main-about .about-content {
        width: 100%
    }

    .main-why-choose-us .why-choose-us-container {
        background-color: #031b34;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        flex-direction: column
    }
}

@media(max-width: 900px) {
    header .top-header .main-top-header a {
        font-size: 11px
    }
}

@media(max-width: 768px) {
    .main-contact-section{
        flex-direction: column;
    .contact-details{
        width: 100%;
        }
        .contact-form{
            width: 100%;
        }
    }
    header .top-header .main-top-header a {
        font-size: 11px
    }

    .left-part .email {
        display: none
    }

    .service-section .service-lists {
        margin-top: 60px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px;
        grid-row: max-content
    }

    .about-us .main-about .about-img .black-men {
        position: absolute;
        bottom: 0;
        width: 250px;
        margin-bottom: -50px
    }

    .projects .heading .heading-texture {
        display: none
    }

    .about-us .main-about .about-img img {
        width: 70%
    }

    .about-us .main-about .about-img {
        width: 100%;
        position: relative
    }

    .projects .heading .heading-texture {
        font-size: 50px
    }

    .section-heading {
        font-size: 30px;
        color: #999;
        text-transform: uppercase;
        line-height: 1.2
    }

    .projects.section-padding {
        padding: 40px 0 0 0
    }
}

@media(max-width: 480px) {
    .inner-banner-heading {
    font-size: 30px;
}
    form {
    .group-box {
        flex-direction: column;
        .box{
            width: 100%;
        }
    }
}
    .service-section .service-lists {
        grid-template-columns: repeat(1, 1fr)
    }

    .about-us .main-about .about-img img {
        width: 100%
    }

    .about-us .main-about .about-img .black-men {
        width: 150px;
        margin-bottom: -50px
    }

    .text-slide .big {
        font-size: 50px;
        line-height: normal
    }

    header .bottom-header .main-bottom-header .logo a img {
        width: 111px
    }

    .tagline {
        padding: 20px 0px
    }

    .main-why-choose-us .content-side {
        padding: 10px 10px
    }

    .main-why-choose-us .content-side h2 {
        font-size: 17px
    }

    .main-why-choose-us .cta {
        flex-direction: column-reverse
    }

    .call-info {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px
    }

    .hero-section {
        height: 80vh
    }

    .hero-section video {
        height: 80vh;
        -o-object-fit: cover;
        object-fit: cover
    }
}

@media screen and (max-width: 600px) {
    .navbar {
        justify-content: space-around
    }

    .nav-menu {
        display: block;
        position: static;
        width: auto;
        margin-right: 20px;
        background: none
    }

    .nav-menu a {
        display: inline-block;
        padding: 15px 20px
    }

    .nav-menu a:hover {
        background-color: #dffbdb;
        border-radius: 5px
    }

    .hero-section {
        height: 80vh
    }

    .hero-section video {
        height: 80vh;
        -o-object-fit: cover;
        object-fit: cover
    }
}

@media(max-width: 350px) {
    header .bottom-header .main-bottom-header .logo a img {
        width: 100px
    }

    .hero-section {
        height: 80vh
    }

    .hero-section video {
        height: 80vh;
        -o-object-fit: cover;
        object-fit: cover
    }
}