
.container-slider{
    position: relative;
}

.next-prev-sliders{
    font-size: 2vw;
    position: absolute;
    bottom: 2vw;
    right: 7vw;
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 1vw;
    border-radius: 12px;
    gap: 0.5vw;
    background-color: #cea967a1;
    padding: 1vw;
}
   
.next-prev-sliders i:hover{
    color: var(--blue);
    cursor: pointer;
}
.img1{
    background-image: url("../media/jpg/welding-services/Banner.jpg");
}
.img2{
    background-image: url("../media/jpg/tig-welding-services/Banner.jpg");
}
.img3{
    background-image: url("../media/jpg/mig-welding-services/Banner.jpg");
}
.img4{
    background-image: url("../media/jpg/aluminum-welding-services/Banner.jpg");
}
.img5{
    background-image: url("../media/jpg/boat-railings-services/Banner.jpg");
}
.img6{
    background-image: url("../media/jpg/green-stick-welding-services/Banner.jpg");
}
.img7{
    background-image: url("../media/jpg/commercial-welding-services/Banner.jpg");
}

.services-section{
    width: 100%;
    height: 40vw;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    background-color: #797979;
    background-blend-mode: multiply;
}
.content-services{
    padding: 0 12vw;
    color: var(--white);
}

.content-services span{
    font-size: 1.4vw;
    text-transform: uppercase;
}
.content-services h1{
    font-size: 3vw;
    width: 40vw;
    text-transform: uppercase;
}
.container-info{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
}
.container-info div{
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
.section-info{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

@media (max-width: 996px) {
    .section-info {
        width: 100vw;
        gap: 6vw;
    }
    .container-info {
        grid-template-columns: repeat(1, 1fr);
        gap: 6vw;
    }
    .container-info div {
        gap: 6vw;
    }

    .services-section {
        height: 70vw;
    }
    .next-prev-sliders {
        padding: 3vw;
        gap: 4vw;
        font-size: 6vw;
    }
    .content-services span{
        font-size: 3.5vw;
       
    }
    .content-services h1{
        font-size: 7vw;
        width: 60vw;
    }
}