@media (max-width:567px) {
    .img-box {
        top: -20%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        padding: 0px 5px;
    }

    .space-mob {
        padding-top: 90px;
    }
}

@media (max-width: 767.98px) {
    .space-mob {
        padding-top: 130px !important;
    }

    .w-custom,
    .option-radio {
        width: 100%;
    }

    .roof-width {
        width: 100%;
    }

    .work-div {
        margin-top: 0px;
    }

    .why-choose-outer {
        width: 170px;
    }

    .height-mob {
        height: 50px;
    }

    .width-set-column {
        width: 70%;
        height: 70%;
    }

    .arrow-content {
        position: absolute;
        top: -35%;
        left: 50%;
        transform: translate(-50%, -35px) scale(0.9);
        z-index: 10;
    }

    .arrow-content-2 {
        position: absolute;
        top: -25%;
        right: -25%;
        z-index: 10;
        transform: scale(0.9);
    }

    .arrow-content-3 {
        position: absolute;
        bottom: 28%;
        right: -24%;
        z-index: 10;
        transform: scale(0.9);
    }

    .arrow-content-4 {
        position: absolute;
        bottom: -24%;
        left: 45%;
        transform: translate(10%, 10%) scale(0.9);
        z-index: 10;
    }

    .arrow-content-5 {
        position: absolute;
        bottom: -20%;
        right: 40%;
        transform: translate(-10%, 10%) scale(0.9);
        z-index: 10;
    }

    .arrow-content-6 {
        position: absolute;
        bottom: 45%;
        left: -27%;
        z-index: 10;
        transform: scale(0.9);
    }

    .arrow-content-7 {
        position: absolute;
        top: -25%;
        left: -22%;
        z-index: 10;
        transform: scale(0.9);
    }

    .leafs img {
        width: 80px;
    }

    .heading-2 {
        font-size: 1.8rem !important;
    }

    .questionMark-set {
        position: absolute;
        top: 11px;
        right: 90px;
        width: 30px;
    }

    .person-arrow {
        position: absolute;
        top: 10%;
        right: -13%;
        transform: scale(0.7);
    }

    .person-arrow-2 {
        position: absolute;
        bottom: 38%;
        right: -15%;
        transform: scale(0.7);
    }

    .person-arrow-3 {
        position: absolute;
        bottom: 10%;
        right: -12%;
        transform: scale(0.7);
    }

    .person-arrow-4 {
        position: absolute;
        top: 3%;
        left: -15%;
        transform: scale(0.7);
    }

    .person-arrow-5 {
        position: absolute;
        bottom: 46%;
        left: -15%;
        transform: scale(0.7);
    }

    .person-arrow-6 {
        position: absolute;
        bottom: 10%;
        left: -15%;
        transform: scale(0.7);
    }

    .interstellar-box {
        width: 50%;
        height: 50%;
    }

    .interstellar-box h5 {
        font-size: 14px !important;
    }

    .interstellar-box h5:nth-child(1) {
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .interstellar-box h5:nth-child(2) {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(90%, -50%);
    }

    .interstellar-box h5:nth-child(3) {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 90%);
    }

    .interstellar-box h5:nth-child(4) {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-85%, -50%);
    }

    .world-map {
        width: 80px;
    }

    .solar-panel-width {
        width: 30%;
    }

    .swiper {
        padding: 0px 0px 50px 0px !important;
    }
}

@media (min-width: 768px) {
    .strike-svg {
        position: absolute;
        top: -35px;
        left: -30px;
        width: 35px;
    }

    .hero-Btn {
        padding: 12px 40px;
    }

    .heading-2 {
        font-size: 2.7rem;
    }

    .my-6 {
        margin: 90px 0px;
    }

    .img-box {
        top: 50%;
        right: 5%;
        width: 70%;
        transform: translate(0, -50%);
    }

    .w-custom {
        width: 50%;
    }

    .option-radio {
        width: 350px;
    }

    .roof-width {
        width: 100%;
    }

    .work-div {
        margin-top: 140px;
    }

    .pt-custom {
        padding-top: 190px;
    }

    .pt-custom-3 {
        padding-top: 155px;
    }

    .why-choose-outer {
        width: 270px;
    }

    .height-mob {
        height: 50px;
    }

    .width-set-column {
        width: 100%;
        height: 100%;
    }

    .arrow-content {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -35px) scale(0.8);
        z-index: 10;
    }

    .arrow-content-2 {
        position: absolute;
        top: 15%;
        right: -12%;
        z-index: 10;
        transform: scale(0.8);
    }

    .arrow-content-3 {
        position: absolute;
        bottom: 10%;
        right: -9%;
        z-index: 10;
        transform: scale(0.8);
    }

    .arrow-content-4 {
        position: absolute;
        bottom: -15%;
        left: 45%;
        transform: translate(10%, 10%) scale(0.8);
        z-index: 10;
    }

    .arrow-content-5 {
        position: absolute;
        bottom: -12%;
        right: 40%;
        transform: translate(-10%, 10%) scale(0.8);
        z-index: 10;
    }

    .arrow-content-6 {
        position: absolute;
        bottom: 40%;
        left: 0%;
        z-index: 10;
        transform: scale(0.8);
    }

    .arrow-content-7 {
        position: absolute;
        top: 5%;
        left: 6%;
        z-index: 10;
        transform: scale(0.8);
    }

    .leafs img {
        width: 90px;
    }

    .questionMark-set {
        position: absolute;
        top: -10px;
        right: 125px;
        width: 30px;
    }

    .person-arrow {
        position: absolute;
        top: 10%;
        right: -5%;
    }

    .person-arrow-2 {
        position: absolute;
        bottom: 40%;
        right: -15%;
    }

    .person-arrow-3 {
        position: absolute;
        bottom: 10%;
        right: -5%;
    }

    .person-arrow-4 {
        position: absolute;
        top: 10%;
        left: -5%;
    }

    .person-arrow-5 {
        position: absolute;
        bottom: 40%;
        left: -25%;
    }

    .person-arrow-6 {
        position: absolute;
        bottom: 10%;
        left: -5%;
    }

    .why-choose-box {
        height: 250px;
    }

    .interstellar-box {
        width: 400px;
        height: 400px;
    }

    .interstellar-box h5:nth-child(1) {
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .interstellar-box h5:nth-child(2) {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(90%, -50%);
    }

    .interstellar-box h5:nth-child(3) {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 90%);
    }

    .interstellar-box h5:nth-child(4) {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-90%, -50%);
    }

    .world-map {
        width: 150px;
    }

    .solar-panel-width {
        width: 300px;
    }

    .swiper {
        padding: 0px 0px 70px 0px !important;
    }
}

@media (min-width: 1200px) {
    .py-custom {
        padding: 8rem 0;
    }

    .hero-Box:hover {
        width: 140%;
    }

    .heading-1 {
        font-size: 3.7rem;
        font-weight: 700;
    }

}