/* ===========================
   FOOTER SOCIAL COMPONENT
   Uiverse.io style - Grid 2x2
   =========================== */

/* Container */
.footer-social-wrapper {
  margin-top: 0;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.footer-social__up,
.footer-social__down {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

/* Card Base */
.footer-social__card {
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 5px;
  border: 3px solid #2d2d2d;
  box-shadow: 6px 6px 0px #2d2d2d;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Card Variants with Custom Border Radius */
.footer-social__card1 {
  border-radius: 70px 5px 5px 5px;
  padding-top: 10px;
  padding-left: 10px;
}

.footer-social__card2 {
  border-radius: 5px 70px 5px 5px;
  padding-top: 10px;
  padding-right: 10px;
}

.footer-social__card3 {
  border-radius: 5px 5px 5px 70px;
  padding-bottom: 8px;
  padding-left: 10px;
}

.footer-social__card4 {
  border-radius: 5px 5px 70px 5px;
  padding-bottom: 10px;
  padding-right: 10px;
}

/* SVG Icons Size Adjustment */
.footer-social__card svg {
  width: 32px;
  height: 32px;
}

/* Icon Colors */
.footer-social__instagram,
.footer-social__linkedin,
.footer-social__facebook,
.footer-social__whatsapp {
  transition: fill 0.2s ease-in-out;
}

.footer-social__instagram {
  fill: #e1306c;
}

.footer-social__linkedin {
  fill: #0077b5;
}

.footer-social__facebook {
  fill: #1877f2;
}

.footer-social__whatsapp {
  fill: #00a849;
}

/* Hover Effects */
.footer-social__card:hover {
  cursor: pointer;
  transform: translate(-6px, -6px);
  box-shadow: 12px 12px 0px #2d2d2d;
}

.footer-social__card1:hover {
  background-color: #fd1d1d;
}

.footer-social__card2:hover {
  background-color: #0077b5;
}

.footer-social__card3:hover {
  background-color: #1877f2;
}

.footer-social__card4:hover {
  background-color: #4cd137;
}

.footer-social__card:hover svg {
  fill: white;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .footer-social-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  
  .footer-social {
    align-items: center;
  }
  
  .footer-social__card {
    width: 75px;
    height: 75px;
  }
  
  .footer-social__card svg {
    width: 35px;
    height: 35px;
  }
  
  .footer-social__card1,
  .footer-social__card2 {
    padding-top: 10px;
  }
  
  .footer-social__card3,
  .footer-social__card4 {
    padding-bottom: 8px;
  }
  
  .footer-social__card1,
  .footer-social__card3 {
    padding-left: 10px;
  }
  
  .footer-social__card2,
  .footer-social__card4 {
    padding-right: 10px;
  }
}

@media (max-width: 480px) {
  .footer-social-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  
  .footer-social {
    gap: 0.5em;
    align-items: center;
  }
  
  .footer-social__card {
    width: 65px;
    height: 65px;
  }
  
  .footer-social__card svg {
    width: 30px;
    height: 30px;
  }
  
  .footer-social__up,
  .footer-social__down {
    gap: 0.5em;
  }
  
  .footer-social__card1,
  .footer-social__card2 {
    padding-top: 8px;
  }
  
  .footer-social__card3,
  .footer-social__card4 {
    padding-bottom: 6px;
  }
  
  .footer-social__card1,
  .footer-social__card3 {
    padding-left: 8px;
  }
  
  .footer-social__card2,
  .footer-social__card4 {
    padding-right: 8px;
  }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .footer-social__card {
    width: 80px;
    height: 80px;
  }
  
  .footer-social__card svg {
    width: 36px;
    height: 36px;
  }
}