@import './variables.css';

.social-media {
  position: absolute;
}

.mf-social-side-list {
  position: fixed;
  top: 40%;
  left: 0.7rem;
  z-index: 100;
}

.mf-social-side-list ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin:0
}

.mf-social-side-list ul li a {
  color: white;
  border-radius: 10%;
  width: 4rem;
  height: 4rem;
  line-height: 4.5rem;
  margin-top: 5px;
  text-align: center;
  display: inline-block;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.mf-social-side-list ul li a:hover {
  opacity: .9;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}

.mf-social-side-list ul li a i {
  font-size: 2rem;
}

.instagram-icon{
  background: rgb(98,60,199);
  background: linear-gradient(
    180deg, rgba(98,60,199,1) 0%, 
    rgba(238,50,119,1) 60%, 
    rgba(244,133,88,1) 100%);
}

.whatsapp-icon{
  background-color: #25D366;
  position: relative;
}

.whatsapp-icon::after {
  content: '1';
  position: absolute;
  top: -0.5rem; 
  right: -0.5rem;
  background-color: red; 
  color: white; 
  font-size: 1rem; 
  width: 1.8rem; 
  height: 1.8rem; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
}

.mail-icon{
  background-color: #dd4b39;
}


@media screen and (max-width: 540px) {
  .mf-social-side-list {
    position: fixed;
    top: 40%;
    left: 0.4rem;
    z-index: 100;
  }

  .mf-social-side-list ul li a {
    width: 3rem;
    height: 3rem;
    line-height: 3.5rem;
  }

  .mf-social-side-list ul li a i {
    font-size: 1.5rem;
  }

}


@media screen and (min-width: 541px) and (max-width: 768px) {
  .mf-social-side-list {
    position: fixed;
    top: 40%;
    left: 0.4rem;
    z-index: 100;
  }
}