/* Hero Section  */

#services-hero {
    /* width: 100%; */
    margin-top: 5vmax;
    height: 8vmax;
    display: flex;
    align-items: center;
    overflow: hidden;
    flex-wrap: nowrap;
    justify-content: center;
    /* position: relative; */
}


#services-hero h1 span{
    font-family: "Geist", sans-serif;
    font-size: 6.5vw;
    font-weight: 600;
    color: var(--primary-color);
    -webkit-text-fill-color: var(--primary-color); /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 1.4px;
    -webkit-text-stroke-color: black;
    text-transform:uppercase;
    letter-spacing: .5px;
    /* position: absolute; */

}


#lower-hero{
    /* background-color: red; */
    width: 100%;
    height: 30vmax;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vmax;
}
#txt-area p{
    font-weight: 400;
    font-size: 1.2vw;
}

.img{
    width: 40vmax;
    /* background-color: rgb(97, 118, 0); */
    height: 20vmax;
    border-radius: 20px;

}

#services{
    /* background-color: red; */
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 4vw;
    padding: 4vmax 0;
}

.title{
    padding: 0 4vmax;
}
.service{
    width: 100%;
    height: 50vmax;
    /* background-color: black; */
    padding: 3vmax;
    display: flex;
    /* justify-content: center; */
    align-items: end;
    flex-direction: column;
}
.service-top{
    display: flex;
    align-items: center;
    justify-content: right;
}
.service-top h2{
    font-weight: 600;
    font-size: 3vmax;
    text-transform: uppercase;
    opacity: 60%;
    line-height: 2.2vmax;
    text-align: right;
}
.service-bottom{
    background-color: cyan;
    width: 95%;
    height: 30vmax;

}



/* Swiper CSS */

swiper-container {
    margin: 8vw auto;
    width: 100%;
    height: 30vmax;
    cursor: grab;
  }

  swiper-slide {
    display: flex;
    align-items: start;
    /* justify-content: center; */
    flex-direction: column;
    padding: 40px;
    border-top-left-radius: 30px ;
    border-bottom-left-radius: 30px ;
  }

.pink{
    background-color: #FF379B;
}
.cyan{
    background-color: cyan;
}
.green{
    background-color: #60F071;
}
.orange{
    background-color: #FF7F50;
}
.voilet{
    background-color: #8A67FF;
}
.yellow{
    background-color: #DCF060;
}
.swiper-txt{
    font-size: 3.5vmax;
}
.swiper-desc{
    width: 50%;
}
.desc-txt{
    font-size: 1.6vmax;
    line-height: 1.4vmax;
    padding-top: 2vw;
}


@media screen and (max-width: 700px) {
    #txt-area p{
        font-weight: 400;
        font-size: 2vw;
        text-align: center;
    }

    #services-hero h1 span{
        -webkit-text-stroke-width: .2vw;
    
    }
  }


  @media screen and (max-width: 500px) {
    #txt-area p{
        font-weight: 400;
        font-size: 3vw;
        text-align: center;
    }

  }