/* Social media links to be placed in the hero section */

/* Social media container, styled to a 2 by 2 format */
.social_media_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 30vw;
}

/* Social media styling for both icon and text */
.social_media {
  cursor: pointer;
  text-decoration: none;
  color: rgb(76, 81, 86);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: auto;
  transition: 0.5s ease;
}

/* Social media styling for the text beside the icon */
.social_media span {
  text-transform: capitalize;
  font-weight: 500;
  font-size: var(--font-size-l);
}

/* Social media styling for the icon */
.social_media i {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background-color: rgb(76, 81, 86);
  color: #fff;
  font-size: var(--font-size-4xl);
  transition: 0.5s ease;
}

/* Social media styling when text is hovered */
.social_media:hover,
.social_media:hover {
  color: rgb(116, 121, 126);
}

/* social media styling for icon when hovered */
.social_media:hover i,
.social_media:focus i {
  background: rgb(116, 121, 126);
}

/* For second social media link, different colour to match the theme of the icon */
.social_media:nth-child(2) i {
  background-color: rgb(var(--blue-600));
}

.social_media:nth-child(2) {
  color: rgb(var(--blue-600));
}

.social_media:nth-child(2):hover i,
.social_media:nth-child(2):focus i {
  background-color: rgb(var(--blue-400));
}

.social_media:nth-child(2):hover {
  color: rgb(var(--blue-400));
}

/* For third social media link, different colour to match the theme of the icon */
.social_media:nth-child(3) i {
  background-color: rgb(131, 58, 180);
}

.social_media:nth-child(3) {
  color: rgb(131, 58, 180);
}

.social_media:nth-child(3):hover i,
.social_media:nth-child(3):focus i {
  background-color: rgb(171, 98, 220);
}

.social_media:nth-child(3):hover {
  color: rgb(171, 98, 220);
}

/* For fourth social media link, different colour to match the theme of the icon */
.social_media:nth-child(4) i {
  background-color: rgb(var(--blue-400));
}

.social_media:nth-child(4) {
  color: rgb(var(--blue-400));
}

.social_media:nth-child(4):hover i,
.social_media:nth-child(4):focus i {
  background-color: rgb(var(--blue-200));
}

.social_media:nth-child(4):hover {
  color: rgb(var(--blue-200));
}

@media (max-width: 500px) {
  .social_media_container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}

/* Highlight the "Get In Touch" label */
.container p.muted {
  font-size: var(--font-size-xl);
  font-weight: 500;
  color: rgb(var(--blue-500));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem !important;
}