/**********************************
*   INITAL SECTION MARGIN TOP     *
**********************************/
#presentation,
#education,
#skill,
#experience,
#portfolio,
#contact {
  scroll-margin-top: 40px;
}

/************************************
 *  social media for hero and about  *
 *************************************/
.container #presentation .social-media,
.container #introduction .social-media,
.container #education .social-media,
.container #skill .social-media,
.container #experience .social-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  top: 68%;
  left: 1%;
  font-size: 16px;
}

.social-media a {
  color: var(--color-social-media);
}

.container #presentation .social-media i,
.container #introduction .social-media i,
.container #education .social-media i,
.container #skill .social-media i,
.container #experience .social-media i,
.footer-container .social-media i {
  background-color: var(--social-media);
  padding: 13px;
  border-radius: 50%;
  border: 1px solid rgb(213 213 213);
  transition: all 0.2s ease;
}

.container #presentation .social-media i:hover,
.container #introduction .social-media i:hover,
.container #education .social-media i:hover,
.container #experience .social-media i:hover,
.footer-container .social-media i:hover {
  cursor: pointer;
  background-color: var(--color-secondary);
  box-shadow: 0 0 1rem var(--color-secondary);
  color: rgb(255 255 255);
}

/* SOCIAL MEDIA FOOTER */
.footer-container .social-media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 0.775rem;
  margin: 20px 0;
}

.footer-container .social-media i {
  box-shadow: 0 0 25px rgb(0 0 0 / 0.1);
}

.footer-container .social-media i:hover {
  transform: scale(1.1) translateY(-5px);
}

@media only screen and (max-width: 768px) {
  .container-education::after,
  .experience-container::after {
    display: none;
  }

  .checkpoint {
    display: none;
  }

  .container #experience .social-media,
  .container #education .social-media,
  .container #skill .social-media,
  .container #introduction .social-media,
  .container #presentation .social-media {
    display: none;
  }

  .timeline-item-head {
    flex-direction: column;
    gap: 10px;
  }

  .timeline-badge {
    font-size: 0.7rem;
  }

  .timeline-tags span {
    font-size: 0.7rem;
  }
}

@media only screen and (max-width: 1168px) {
  .container #presentation .container {
    flex-direction: column;
    font-size: 16px;
  }

  .container-contact {
    flex-direction: column;
  }
}