@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/*
#footer{
  max-height: 55px;
  display: grid;
  place-items: center;
  background: var(--social_variant);
  grid-template-columns: auto auto auto auto auto;  
  grid-template-rows: auto auto;
  grid-template-areas: 
  "socials-container"
  "wrapper";
}
*/

/* Style for rounded icon buttons */
   .social-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #333;
      transition: background-color 0.3s, transform 0.3s;
    }
    /*
    .social-icon:hover {
      background-color: #007bff;
      color: white;
      transform: scale(1.1);
    }
    */
/*
Your layout is breaking into 3 rows of 2 icons because you are combining Bootstrap grid classes (row, col-4) with custom flexbox rules (display: flex) on the same element.
When you apply display: flex and gap: 10px to .socials-container, you override Bootstrap's native row layout mechanics. Because flexboxes default to flex-wrap: nowrap unless specified, 
or wrap arbitrarily when combined with columns, it breaks the Bootstrap 12-column grid calculations
*/
.social-container{
  display:flex;
  gap: 10px;
  margin: 0 auto; /* centers the social icons */
}

/* REMOVE display: flex, gap, and margin from this class */
.socials-container {
  /* Leave this empty or use it only for bootstrap and non-layout styling */
}

.socials-container a {
  background-color: white;
  /*padding: 1em;*/
  border-radius: 50%;
  height: 60px;
  width: 60px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  margin: 0 auto; /* Centers the icon inside the Bootstrap column */
}

.socials-container a svg {
  /*height: 24px; Reduced slightly so 36px doesn't overflow a 60px padded circle 
  width: auto;*/
   /* Set a fluid width and height so they scale based on the 60px parent */
  width: 55%;  
  height: 55%;
  max-width: 100%;
  max-height: 100%;
}

.socials-container a::before{
  content: attr(data-social);
  position: absolute;
  background-color: var(--accent-color);
  color: white;
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: 100px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transform: translateY(-30px) rotate(25deg);
  opacity: 0;
  transition: 200ms cubic-bezier(.42,0,.44,1.68);
}
.socials-container a:hover{
  background-color: var(--accent-color);
  fill: white;
}
.socials-container a::after{
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--accent-color);
  transform: translateY(0) rotate(25deg);
  opacity: 0;
  transition: 200ms cubic-bezier(.42,0,.44,1.68);
}
.socials-container a:hover::before{
  transform: translateY(-65px) rotate(0);
  opacity: 1;
}
.socials-container a:hover::after{
  transform: translateY(-42px) rotate(0);
  opacity: 1;
}