footer {
  background-color: #122f67;

  i {
    font-size: 20px;
  }

  .sitemap-grid a {
    transition: all 250ms ease-in-out;
    min-width: 200px;
  }
  .sitemap h3 {
    padding-bottom: 1rem;
  }
  .sitemap-grid a:hover {
    font-weight: 600;
    min-width: 175px;
  }

  .vr {
    opacity: 1;
    height: 30px;
    width: 2px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .terms-design * {
    font-size: 14px;
  }
  .footer-social-media h3 {
    padding-bottom: 1rem;
    text-align: center;
  }
  .footer-social-media {
    transition: all 250ms ease;

    .social-icon-link {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
      border-radius: 50%;
      background-color: transparent;
      transition:
        background-color 0.3s ease,
        transform 0.2s ease,
        opacity 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;

      svg,
      img {
        max-width: 26px;
        max-height: 26px;
        width: 85%;
        height: 85%;
        object-fit: contain;
      }

      svg rect {
        fill: none !important;
      }

      svg path:not([fill='none']),
      svg circle:not([fill='none']),
      svg polygon:not([fill='none']) {
        fill: #ffffff !important;
        transition: fill 0.3s ease;
      }

      i {
        font-size: 22px;
        color: #ffffff !important;
        transition: color 0.3s ease;
      }

      &:hover {
        background-color: #ffffff;
      }

      &.social-facebook:hover {
        svg path:not([fill='none']),
        svg circle:not([fill='none']),
        svg polygon:not([fill='none']) {
          fill: #1877f2 !important;
        }
        i {
          color: #1877f2 !important;
        }
      }

      &.social-instagram:hover {
        svg path:not([fill='none']),
        svg circle:not([fill='none']),
        svg polygon:not([fill='none']) {
          fill: #e4405f !important;
        }
        i {
          color: #e4405f !important;
        }
      }

      &.social-youtube:hover {
        svg path:not([fill='none']),
        svg circle:not([fill='none']),
        svg polygon:not([fill='none']) {
          fill: #ff0000 !important;
        }
        i {
          color: #ff0000 !important;
        }
      }

      &.social-x-twitter:hover,
      &.social-x:hover,
      &.social-twitter:hover {
        svg path:not([fill='none']),
        svg circle:not([fill='none']),
        svg polygon:not([fill='none']) {
          fill: #000000 !important;
        }
        i {
          color: #000000 !important;
        }
      }

      &.social-linkedin:hover {
        svg path:not([fill='none']),
        svg circle:not([fill='none']),
        svg polygon:not([fill='none']) {
          fill: #0a66c2 !important;
        }
        i {
          color: #0a66c2 !important;
        }
      }
    }
  }
}

@media screen and (max-width: 867px) {
  footer .sitemap {
    text-align: center;
  }

  footer .sitemap h3 {
    text-align: center;
  }

  footer .sitemap-grid.sitemap-line {
    border-left: none;
    padding-left: 0 !important;
    text-align: left;
    width: 100%;
    justify-items: center;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Χωρίς min-width (2 x 200px ξεπερνάει το πλάτος της οθόνης) και χωρίς
     font-weight στο hover, που άλλαζε το πλάτος και "πηδούσε" το grid. */
  footer .sitemap-grid a,
  footer .sitemap-grid a:hover {
    min-width: 0;
    font-weight: inherit;
  }

  footer .sitemap-grid a:hover {
    text-shadow:
      0 0 0.6px currentColor,
      0.3px 0 0 currentColor;
  }

  footer .footer-social-media {
    justify-content: center !important;
  }

  footer .terms-design {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem !important;
  }

  footer .terms-design #terms {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem !important;
  }

  footer .terms-design #terms .vr {
    display: none !important;
  }

  footer .terms-design .terms-separator {
    display: block !important;
    opacity: 0.4;
  }

  footer .terms-design #design {
    text-align: center;
  }
}