:root {
  --icon-size: 2.5rem;
}

footer {
  background: linear-gradient(
    30deg,
    #00f 0%,
    #7b28ae 100%
  );
  background-size: 200%;
  background-position: 100% 0%;
}

.footerContainer {
  width: 100%;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: space-evenly; 
}

.footer-logo {
  width: 40%;
  height: 100%;
  display: flex;
  background-image: url(/assets/images/Branding\ Zenith/Sigla_alb.png);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center center;
  align-items: center;
  justify-content: center;
}

.footer-img {
  height: 2vh;
}

.copyright-text {
  width: 20%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.copyright-text p {
  color: #fff;
  font-size: 1.2rem;
}

.socialIcons {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 5em);
  row-gap: 0;
}

@media (max-width: 1300px) {
  .footerContainer {
    height: 24vh;
  }

  .socialIcons {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .footer-logo {
    background-image: url(/assets/images/Branding\ Zenith/Logo_alb.png);
    background-size: max(20%, 6em);
  }

  .copyright-text p {
    font-size: 1.2rem;
    color: #fff;
    visibility: hidden;
    position: relative;
  }
  
  .copyright-text p::after {
    content: "©2025";
    visibility: visible;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
  }
}

.socialIcons a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.3s;
}

.socialIcons a:hover {
  transform: scale(1.2);
}
.socialIcons a .bi {
  font-size: var(--icon-size);
}

.socialIcons a:link i{
  color: #f9f;
}

.socialIcons a:hover i{
  color: #fff;
  transition: 0.3s;
}

.socialIcons a:visited i{
  color: #f9f;
}

.linktree-icon {
  transition: 0.3s;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: #f9f;
  mask-image: url('/assets/images/Icons/linktree_logo.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('/assets/images/Icons/linktree_logo.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.linktree-icon img {
  width: 100%;
  mix-blend-mode: multiply;
}

.linktree-icon:hover {
  background-color: #fff;
}

@media (max-width: 500px) {
    #ctcftr {position: relative !important; margin-top: 100px;}
    /* .footerContainer {padding-top: 50px;} */
}