body {
    overflow-x: hidden;
     width:100vw;
     /* margin: 0;  */
}
.homePage {
    .slider {
        overflow: hidden;
        &>img {
            width: 100%;
            height: 60vh;
        }
    }

    .mainContent {
        margin-inline: 40px;

        h2 {
            margin-top: 60px;
            font-size: 30px;
            font-weight: 400;
        }

        .servicesContainer {
            margin-block: 30px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 30px;

            .service {
                flex: 1;
                text-align: center;

                h3 {
                    margin-bottom: 10px;
                    font-size: 25px;
                    font-weight: 400;
                }

                p {
                    color: rgb(156, 155, 155);
                    font-size: 13px;
                    line-height: 20px;
                    margin-top: 8px;
                }

                img {
                    width: 80%;
                    height: 80%;
                    /* height: 300px; */
                }
            }
        }
    }

}
@media screen and (max-width: 768px) {
    .homePage {

        .mainContent {
            margin-inline: 20px;

            .servicesContainer {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .service {
                    flex: auto;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
             
        }
    }

}
@media screen and (max-width: 1260px) {
    .homePage {
        .slider {
             margin-left: -20px;
            margin-right: -20px;
        }
    }
}