.aboutMe {
    background-color: var(--aboutme-blogs-bg);
    // padding: 50px 0px;
    .about-img-col {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 7px;
    }
    .about-text-col {
      padding: 10px 0px;
      .about-me-heading {
        position: relative;
        &::before {
          content: "";
          width: 58px;
          border-bottom: solid 5px #8247E5;
          position: absolute;
          left: 0px;
          bottom: -7px;
          z-index: 1;
        }
      }
      .about-list {
        margin-top: 10px;
        margin-bottom: 26px;
      }
    }
  }
  .about-list li:first-child {
    font-weight: bold;
    font-size: 15px;
    padding-left: 20px;
    list-style-type: none;
    position: relative;
    &::before {
      content: "";
      width: 13%;
      border-bottom: solid 3px var(--paragraph);
      position: absolute;
      left: -20px;
      top: 45%;
      z-index: 1;
    }
  }
  
  @media only screen and (max-width: 991px) {
    .about-text-col {
      .about-text {
        justify-content: center;
      }
      .about-lists-row {
        justify-content: center;
        .about-list {
          max-width: 300px;
        }
      }
    }
    .contact-me-wrapper {
      text-align: center;
    }
  }
  
  // Variables
$social-media-link-dimensions: 45px !default;
$social-media-link-border-radius: 4px !default;
$social-media-link-color: #fff !default;
$social-media-link-font-size: 20px !default;
$social-media-link-space-between: 4px !default;
$social-media-link-hover-top-shifting: -16px !default;
$social-media-color-facebook: #5F7AAE;
$social-media-color-twitter: #5AC2F0;
$social-media-color-instagram: #4D4D4D;
$social-media-color-linkedin: #4390B5;
$social-media-color-youtube: #C34A47;

$backgrounds: (
  "facebook": $social-media-color-facebook,
  "twitter":$social-media-color-twitter,
  "instagram":$social-media-color-instagram,
  "linkedin":$social-media-color-linkedin,
  "youtube":$social-media-color-youtube
);

@each $network, $color in $backgrounds {
  .social-media-link--#{$network} {
    &:before {
      background-image: linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 49%, $color 50%);
    }
  }
}

.social-media-links {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 100px;
}

.social-media-link {
  width: $social-media-link-dimensions;
  height: $social-media-link-dimensions;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: $social-media-link-color;
  font-size: $social-media-link-font-size;
  position: relative;
  transition: transform .50s ease-in-out;
  > i {
    z-index: 1;
  }
  &:before {
    width: $social-media-link-dimensions;
    height: $social-media-link-dimensions;
    border-radius: $social-media-link-border-radius;
    content: "";
    position: absolute;
    background-size: 300%;
    background-position: 0% 0%;
    transition: background-position .55s cubic-bezier(.79,.14,.15,.86);
  }
  &:hover,
  &:active,
  &:focus {
    transform: translateY($social-media-link-hover-top-shifting);
    /* This padding-bottom helps the pointer do stay inside the link,
    avoiding the animation to flicker. */
    padding-bottom: abs($social-media-link-hover-top-shifting) * 2;
    &:before {
      background-position: top right;
    }
  }
  + .social-media-link {
    margin-left: $social-media-link-space-between;
  }
}