/*este codigo es de los iconos que incluye el footer*/
footer{
 background-color: #203f6b; 

}

.footer{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-top: 2rem; /*espacio*/
  max-width: 1900px;
  justify-items: center;
}

.p{
  font-size: medium;
  color: white;
}

.h3color{
  color: #FFB600;
  font-family: Helvetica, Arial, sans-serif;
}

.footer div{
  display: grid;
  
}

.box1{
  justify-items: center; 

}

.box2{
  
}

.box3{

}

.box4{

}

.box5{
  justify-content: end;
}

.scroll1{
  width:100%; 
  min-width: 70%;
  visibility: hidden;
}

.scroll2{
  visibility: hidden;
}



@media screen and (max-width: 900px){
  .footer{
    grid-template-rows: repeat(2, 1fr);
  }

  .footer div{
  display: grid;
  width: 70%;
  column-gap: 5%;
}

.p{
  font-size: x-small;
  
}
  .box1{
    grid-column: 1/3;
    justify-content: unset;
  }

  .box2{
    grid-column: 3/5;
    justify-content: unset;
  }



  .box4{
    grid-column: 3/5;
    justify-content: unset;
  }

  .box5{
    grid-column: 5/6;
    grid-row: 1/3;
    justify-content: unset;
  }

  .scroll1{
    width:100%; 
    min-width: 70%;
    visibility: hidden;
  }

  .scroll2{
    width:70%; 
    min-width: 50%;
    visibility: visible;
  }

  .scroll1:hover{
    cursor: pointer;
  }

  .scroll2:hover{
    cursor: pointer;
  }

}