/* Resets margin and padding for all elements */
* {
  margin:0px;
  padding:0px;
}

/* Contact Section Styling */
#contact {
  margin-bottom:25px;
  background-color: #000000; /* Custom background color */
  color: #F5F5F7;
}
#top-page-contact{
  font-size: 65px;
  color: #F5F5F7;
}

.contact-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #F5F5F7;
  transition: transform 0.3s ease;
}

.contact-icon i {
  transition: color 0.3s ease;
}

.contact-icon span {
  margin-top: 8px;
}

/* Hover Effects for Icons */
.contact-icon:hover {
  transform: translateY(-5px);
}

.contact-icon:hover i.fa-envelope {
  color: #dd4b39; /* Email icon hover color */
}

.contact-icon:hover i.fa-github {
  color: #6cc644; /* GitHub icon hover color */
}

.contact-icon:hover i.fa-linkedin {
  color: #0077b5; /* LinkedIn icon hover color */
}

.contact-icon:hover i.fa-youtube {
  color: #b2071d; /* YouTube icon hover color */
}

/* Small screens (phones)*/
@media (max-width: 600px) {
  /*make the contact icons and text below it smaller*/
  .contact-icon {
    font-size: 0.8em;
  }
}