.ourservicesextended {

    text-align: center;
    color: white;
    font-size: 2rem;
    text-shadow: 0 8px 12px rgba(241, 130, 3, 0.8);
    margin-bottom: 5rem;

    animation: ServicesExtendedAppear;
    animation-timeline: view();
    animation-range: entry 50% cover 100vh;

}

@keyframes ServicesExtendedAppear {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


@media (min-width: 1000px) and (max-width: 1100px) {
   
    .ourservicesextended {

        margin-top: 30rem;
    
    }

}


@media (min-width: 1100px) and (max-width: 1125px) {
   
    .ourservicesextended {

        margin-top: 25rem;
    
    }

}

@media (min-width: 1125px) and (max-width: 1250px) {
   
    .ourservicesextended {

        margin-top: 18rem;
    
    }

}

.wrapper {

  width: 70%;
  margin: auto;
  
}

.elements {

    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(127, 235, 26) rgb(75, 75, 75);
    height: auto;
    z-index: 10;
    
}

.elements > div {

    flex: 0 0 auto;
    margin: 25px;
    scroll-snap-align: center;

}


.element {

    color: white;
    text-align: center;
    font-size: 1rem;
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    padding-bottom: 3rem;    

}

@media (max-width: 438px) {

    .element {

        font-size: 0.7rem;

    }

    .wrapper {

        width: 90%;

    }

}

@media (min-width: 1700px) {

    
    .ourservicesextended {

        font-size: 4vw;

    }

    .element {

        font-size: 2vw;

    }

    .wrapper {

        width: 70%;

    }

}