.mhq-hero-1 {
    padding: 170px 0 ;
    position: relative;

    @include breakpoint (max-xl){
		padding: 130px 0;
	}

    @include breakpoint (max-md){
		padding: 90px 0;
	}

    .hero-shape-1 {
        position: absolute;
        top: 20%;
        left: 5%;

        @include breakpoint (max-xxl){
            top: 16%;
            left: 0%;
        }

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .hero-shape-2 {
        position: absolute;
        top: 68%;
        left: 40%;

        @include breakpoint (max-xxl){
            top: 69%;
            left: 32%;
        }

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .hero-shape-3 {
        position: absolute;
        top: 10%;
        right: 10%;

        @include breakpoint (max-xxl){
           max-width: 100px;
           top: 63%;

           img {
                @include imgw;
           }
        }

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .hero-shape-4 {
        position: absolute;
        bottom: 10%;
        right: 10%;

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .hero-shape-5 {
        position: absolute;
        bottom: 10%;
        left: 10%;

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .mhq-hero-content {
        position: relative;
        z-index: 9;

        span {
            color: $theme-color;
            padding: 10px 28px;
            line-height: 1;
            border-radius: 30px;
            background: rgba(0, 79, 68, 0.10);
        }

        h1 {
            color: $header-color;
            margin-top: 15px;
        }

        p {
            margin-top: 20px;

             @include breakpoint (max-xxl){
               font-size: 15px;
            }

            @include breakpoint (max-sm){
               font-size: 14px;
            }
        }

        .theme-btn {
            margin-top: 50px;
        }
    }

    .mhq-right-items {
        position: relative;

        .client-counter-box {
            @include flex;
            gap: 20px;
            border-radius: 77.5px;
            background: $white;
            display: inline-flex;
            padding: 25px;
            line-height: 1;
            position: absolute;
            z-index: 9;
            top: 3%;
            right: 45%;

            @include breakpoint (max-xl){
                display: none;
            }

            .content {
                h3 {
                    color: $theme-color-2;
                }

                p {
                    font-size: 16px;
                }
            }
        }

        .counter-box {
            position: absolute;
            bottom: 10%;
            right: -7%;
            border-radius: 77.5px;
            background: $white;
            padding: 18px 35px;
            text-align: center;
            line-height: 1;
            z-index: 9;

            @include breakpoint (max-xxxl){
                right: 0;
            }

            @include breakpoint (max-xl){
                display: none;
            }

            h3 {
                color: $theme-color;
            }
        }

        .mhq-hero-image {
            max-width:270px;
            margin-top: 190px;

             @include breakpoint (max-xl){
               margin-top: 0;
            }

            img {
                @include imgw;
            }
        }

        .mhq-hero-imag-2 {
            max-width: 342px;

            img {
                @include imgw;
            }
        }
    }
}


.mhq-hero-2 {
    padding: 220px 0 130px;
    position: relative;
    z-index: 9;

    .hero-shape-1 {
        position: absolute;
        top: 25%;
        right: 15%;
    }

    .hero-shape-2 {
        position: absolute;
        top: 50%;
        left: 30%;

        @include breakpoint (max-xxl){
            position: absolute;
            top: 54%;
            left: 25%;
        }
        
        @include breakpoint (max-xl){
            display: none;
        }
    }

    .hero-shape-3 {
        position: absolute;
        z-index: -1;
        bottom: 35%;
        right: 33%;
    }

    .line-shape-animation {
        height: 138px;
        position: absolute;
        bottom: -5px;
        left: 0;
        right: 0;
        z-index: 12;

        @include breakpoint (max-xxl){
            display: none;
        }
    }

    .mhq-hero-shape {
        position: absolute;
        bottom: 0;
        left: 40%;
        z-index: -1;

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .container {
        max-width: 1720px;
    }

    .mhq-hero-image {
        max-width: 400px;
        margin: 0 auto;
        position: relative;
        z-index: 9;
        
        img {
            @include imgw;
        }

        &.style-2 {
            margin-top: 180px;

            @include breakpoint (max-xxl){
                margin-top: 120;
            }

             @include breakpoint (max-xl){
                margin-top: 0;
            }
        }
    }

    .mhq-hero-content {
        text-align: center;
        position: relative;
        z-index: 9;

        span {
            color: $white;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.10);
            padding: 12px 24px;
            line-height: 1;
        }

        h1 {
            color: $white;
            margin-top: 25px;
        }

        p {
            max-width: 600px;
            font-size: 18px;
            color: $white;
            margin: 20px auto 0;

            @include breakpoint (max-sm){
                font-size: 16px;
            }
        }

        .theme-btn {
            margin-top: 50px;
            background-color: $white;
            color: $header-color;

            i {
                background-color: $theme-color;
                color: $white;
            }

            &::before {
                background-color: $theme-color-2;
            }

            &:hover {
                color: $header-color;

                i {
                    background-color: $white;
                    color: $theme-color;
                }
            }
        }
    }
}

.mhq-hero-3 {
    padding: 40px 0 0;
    overflow: hidden;
    position: relative;
    background-position: bottom !important;
    overflow: hidden;

    @include breakpoint (max-xxl){
       padding-top: 130px;
    }

    @include breakpoint (max-xl){
       padding-top: 70px !important;
    }

    .line-top {
        height: 60px;
        position: absolute;
        top: -30px;
        left: 0;
        right: 0;
        z-index: 12;

         @include breakpoint (max-xl){
           display: none;
        }
    }

    @include breakpoint (max-xl){
        padding: 140px 0;
    }

    @include breakpoint (max-xl){
        padding: 140px 0 0;
    }

    .mhq-hero-shape-1 {
        position: absolute;
        left: 0;
        top: 35%;

        @include breakpoint (max-xxl){
          max-width: 120px;

          img {
                @include imgw;
          }
        }

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .mhq-hero-shape-2 {
        position: absolute;
        left: 50%;
        top: 15%;

        @include breakpoint (max-xxl){
         left: 37%;
        }

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .mhq-hero-shape-3 {
        position: absolute;
        left: 26%;
        bottom: 4%;

        @include breakpoint (max-xxl){
            left: 28%;
        }

         @include breakpoint (max-xl){
            display: none;
        }
    }

    .mhq-hero-shape-4 {
        position: absolute;
        right: 13%;
        top: 6%;

        @include breakpoint (max-xxl){
          max-width: 120px;
            right: 10%;
            top: 8%;
          img {
                @include imgw;
          }
        }

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .mhq-hero-shape-5 {
        position: absolute;
        right: 8%;
        top: 35%;

        @include breakpoint (max-xxl){
            max-width: 200px;
            top: 38%;

          img {
                @include imgw;
          }
        }

        @include breakpoint (max-xl) {
            right: 2%;
            top: 41%;
            max-width: 240px;

            img {
                width: 100%;
            }
        }
        
        @include breakpoint (max-xl){
            display: none;
        }
    }

    .mhq-hero-shape-6 {
        position: absolute;
        left: 42%;
        bottom: 4%;

        @include breakpoint (max-xxl) {
             max-width: 265px;
            left: 44%;
            bottom: 8%;

            img {
                width: 100%;
            }
        }

        @include breakpoint (max-xl){
            display: none;
        }
    }


    .mhq-hero-content {
        position: relative;
        z-index: 99;
        margin-top: -50px;

        @include breakpoint (max-xxl){
         margin-top: -130px;
        }

        @include breakpoint (max-xl){
            text-align: center;
            margin-top: 0;
        }

        span {
            color: $theme-color;
            border-radius: 30px;
            background: rgba(0, 79, 68, 0.10);
            padding: 12px 24px;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 20px;

            @include breakpoint (max-sm){
                font-size: 14px;
                padding: 9px 20px;
                margin-bottom: 15px;
            }
        }

        h1 {
            color: $header-color;
            margin-top: 15px;
        }

        p {
            margin-top: 20px;

             @include breakpoint (max-xxl){
                br {
                    display: none;
                }
            }

            @include breakpoint (max-sm){
               font-size: 14px;
            }
        }

        .theme-btn {
            margin-top: 50px;
        }
    }

    .mhq-hero-image {
        margin-left: -70px;
       
         @include breakpoint (max-xl){
            margin-left: 0;
            max-width: 800px;
            margin: 0 auto;

            img {
                border-radius: 0 !important;
            }
        }

        img {
            @include imgw;
            border-bottom-right-radius: 300px;
        }
    }
}