footer {
    background-color: #03012C;  
  }
  
  .footer__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .footer__container {
    margin-top: var(--mb-2);
    row-gap: 5rem;
  }
  
  .footer__content {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    row-gap: 2rem;
  }
  
  .footer__title,
  .footer__subtitle {
    font-size: var(--h3-font-size);
    color: white;
  }
  
  .footer__title {
    margin-bottom: var(--mb-0-5);
  }
  
  .footer__description {
    margin-bottom: var(--mb-2);
    color: white;
    font-size: 12px;
    line-height : 20px;
  }
  
  .footer__subtitle {
    margin-bottom: var(--mb-1);
  }
  
  .footer__item {
    margin-bottom: var(--mb-0-75);
  }
  
  .footer__link {
    color: white;
  }
  
  .footer__link:hover {
    color: var(--jms-light-red);
  }
  
  .certificados {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
  }
  
  .compromiso {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  
  .compromiso img {
    width: 20%;
  }
  
  .certificados__footer {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  
  .certificados__footer img {
    width: 20%;
  }
  
  .footer__rights {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  text-align: center;
  }
  
  .footer__copy, .footer__terms-link {
  font-size: var(--small-font-size);
  color: white;
  }
  
  .footer__terms {
  display: flex;
  column-gap: 1.5rem;
  justify-content: center;
  }
  
  .footer__terms-link:hover {
  color:var(--jms-light-red);
  }
  .container-icon-svg-1{
  display: none;
  
  }
  .color-icon-svg #color-icon_1{
  fill: var(--text-color);
  }
  .color-icon-svg #color-icon_2{
  fill: var(--color-menu-footer);
  }
  .container__menu{
  position: relative;
  }
  
  .menu,
  .submenu{
  list-style: none;
  }
  
  
  .menu__link,
  .submenu__link{
  display: block;
  padding: 5px;
  color: white;
  text-decoration: none;
  }
  
  .menu,
  .submenu{
  position: absolute;
  width: 195px;
  background: var(--background-color-menu-footer);
  margin: 0 0 0 0px;
  padding: 0 0 0 10px;
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
  }
  
  .submenu{
  width: 125px;
  }
  .container__menu:hover .menu{
  opacity: 1;
  visibility: visible;
  }
  
  .submenu_1{
  top: 0px;
  }
  .submenu_2{
  top: 50px;
  }
  .submenu_3{
  top: 90px;
  }
  .submenu_4{
  top: 130px;
  }
  
  .submenu_1,
  .submenu_2,
  .submenu_3,
  .submenu_4{
  margin-left: 185px;
  margin-bottom: 40px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  }
  .container__submenu:hover .submenu_1,
  .container__submenu:hover .submenu_2,
  .container__submenu:hover .submenu_3,
  .container__submenu:hover .submenu_4{
  opacity: 1;
  visibility: visible;
  }
  
  .submenu__link:hover{
  text-decoration: underline;
  }
  
  /* @ Media Queris */
  
  @media (max-width: 770px) {
      .menu__hidden{
          display: none;
        }
        .menu{
          opacity: 1;
          visibility: visible;
      
        }
      
        .menu__btn{
          cursor: pointer;
        }
        .menu__btn:hover{
          text-decoration: underline;
        }
      
        .submenu{
          width: 100%;
          position: relative;
          background: var(--background-color-submenu-footer);
        }
        .submenu__btn{
          cursor: pointer;
        }
        .submenu_1-hidden{
          display: none;
        }
        .submenu_2-hidden,
        .submenu_3-hidden,
        .submenu_4-hidden{
          display: none;
        }
        .submenu_1,
        .submenu_2,
        .submenu_3,
        .submenu_4{
          top: 0px;
          margin: 0;    
        }
      
        .submenu_1,
        .submenu_2,
        .submenu_3,
        .submenu_4{
          opacity: 1;
          visibility: visible;
        }
      
        .submenu__link:hover{
          text-decoration: underline;
        }
  }
  
  @media screen and (min-width: 768px) {
  .footer__rights {
      flex-direction: row;
      justify-content: space-between;
  }
  }
  
  @media screen and (min-width: 1024px) {
    .footer__content {
      justify-items: center;
    }
  }
  
  @media screen and (max-width: 350px) {
    .footer__terms {
      flex-direction: column;
    }
  }