#services{
  z-index: 1;
}

.services-container{
  display: flex;
  flex-wrap: wrap;  
    width: 90%;
    max-width: 90em;
    height:100vh;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}


.features-title{
    text-transform: uppercase;
    font-size: 1em;
    margin-bottom: 2.5em;
}

.services-title{
      font-size: 1.2em;
}

.services-subtitle{
  font-size: 0.8em;
  line-height: 1.5em;
}
/* ------------------- */

.left-box{
    display: flex;
    height: max-content;
    width: 45%;
    max-width: 40em;
    margin-right: auto;
        height: 7.5em;

    background: #b5b5b55c;
    background: linear-gradient(0deg, rgba(181, 181, 181, 0.331) 0%, rgba(224, 224, 224, 0.231) 44%, rgba(234, 234, 234, 0.226) 81%);
    border-radius: 20px;
    padding: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}



/* estado inicial (invisible y abajo) */
#left1,
#left2,
#left3 {
  opacity: 0;
  transform: translateY(40px);
}

/* estado animado, se activa con JS */
#left1.is-visible {
  animation: up 2s ease-out forwards;
}
#left2.is-visible {
  animation: up 2s ease-out forwards;
  animation-delay: 0.6s;
}
#left3.is-visible {
  animation: up 2s ease-out forwards;
  animation-delay: 1.1s;
}



@keyframes up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*        
#left1{
  opacity: 1;
  transform: translateY(40px); 
  animation: up 4s ease-out forwards;
}

#left2{
  opacity: 1;
  transform: translateY(40px); 
  animation: up 4s ease-out forwards;
   animation-delay: 1s;
}

#left3{
  opacity: 1;
  transform: translateY(40px); 
  animation: up 4s ease-out forwards;
   animation-delay: 2s;
}
 
@keyframes up {
  to {
    opacity: 1;
    transform: translateY(0px); 
  }
}




*/

.left-services-img {
    transform: translateX(0.5em);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5em;
    height: 4.5em;

    /*     background-color: #001f3f;  */
    color: #001f3f;
    border-radius: 200px;
    width: 4em;
    height: 4em;

        box-shadow: 
        0 0 0 1px #e5e5e5, 
        0 0 10px rgba(0, 0, 0, 0.05) inset, 
        0 5px 10px rgba(0, 0, 0, 0.1); 
}

.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
  /*   background-color: #001f3f;  */
    color: #001f3f;
    border-radius: 200px;
    width: 4.5em;
    height: 4.5em;
}


.left-services-img i{
    color: #001f3f;
    font-size: 2em;
 /*    filter: brightness(0) invert(1); */
 filter: brightness(0) saturate(100%) invert(9%) sepia(92%) saturate(1533%) hue-rotate(185deg) brightness(95%) contrast(104%);
}

.left-services-texts{
    margin-left: 2em;
}



/* ------------- */



.right-box{
    display: flex;
    height: max-content;
    flex-direction: row-reverse;
    width: 45%;
    max-width: 40em;
    height: 7.5em;
    margin-left: auto;

    background: #b5b5b55c;
    background: linear-gradient(0deg, rgba(181, 181, 181, 0.331) 0%, rgba(224, 224, 224, 0.231) 44%, rgba(234, 234, 234, 0.226) 81%);
    border-radius: 20px;
    padding: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}


#right1,
#right2,
#right3 {
  opacity: 0;
  transform: translateY(40px);
}


#right1.is-visible {
  animation: up2 2s ease-out forwards;
    animation-delay: 0.3s;
}
#right2.is-visible {
  animation: up2 2s ease-out forwards;
  animation-delay: 0.8s;
}
#right3.is-visible {
  animation: up2 2s ease-out forwards;
  animation-delay: 1.4s;
}

@keyframes up2 {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.right-services-img {
  transform: translateX(-0.5em);
    display: flex;
    align-items: center;
    justify-content: center;
/*     background-color: #001f3f;  */
    color: #001f3f;
    border-radius: 200px;
    width: 4em;
    height: 4em;

        box-shadow: 
        0 0 0 1px #e5e5e5, 
        0 0 10px rgba(0, 0, 0, 0.05) inset, 
        0 5px 10px rgba(0, 0, 0, 0.1); 
}

.right-services-img i{
    color: #001f3f;
    font-size: 2em;
 /*    filter: brightness(0) invert(1); */
 filter: brightness(0) saturate(100%) invert(9%) sepia(92%) saturate(1533%) hue-rotate(185deg) brightness(95%) contrast(104%);
}

.right-services-texts{
    margin-left: auto;
    text-align: right;
    margin-right: 2em;
}





/* -------------responsive------------- */

@media (max-width: 700px) {

.services-container{
  display: flex;
/*   justify-content: center; */
align-items: center;
  flex-wrap:nowrap;  
  flex-direction: column;
    width: 100%;
/*     max-width: 90em; */
    height:180vh;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
/*     background-color: red; */
}

.left-box{
    display: flex;
    height: max-content;
    width: 100%;
/*     max-width: 40em; */
    margin-right: auto;
        height: 7.5em;

    background: #b5b5b55c;
    background: linear-gradient(0deg, rgba(181, 181, 181, 0.331) 0%, rgba(224, 224, 224, 0.231) 44%, rgba(234, 234, 234, 0.226) 81%);
    border-radius: 20px;
    padding: 0.5em;
margin: 2em;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}


.right-box{
    display: flex;
    height: max-content;
    flex-direction: row-reverse;
    width: 100%;
    max-width: 40em;
    height: 7.5em;
    margin-left: auto;

    background: #b5b5b55c;
    background: linear-gradient(0deg, rgba(181, 181, 181, 0.331) 0%, rgba(224, 224, 224, 0.231) 44%, rgba(234, 234, 234, 0.226) 81%);
    border-radius: 20px;
    padding: 0.5em;
margin: 2em;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}


}