#contact-us {
  display: grid;
  grid-template-rows: repeat(2, minmax(45vh, 1fr));
  border-radius: 10px;
  overflow: hidden;
  /* Reset some styles from sectiion selector!! */
  min-height: 90vh !important;
  scroll-margin-top: 5vh !important;
  box-shadow: 0 0 2px 0;
  color: #fff;
}
#contact-us h1 {
  text-transform: uppercase;
}
#contact-us h2 {
  text-transform: capitalize;
}

#contact-us .intro {
  background-color: transparent;
  background-color: #fff;
  background-color: #714e76;
  /* border-bottom: 2px solid rgba(35, 35, 35, 0.35); */
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  /* border-: unset; */
  flex-direction: column;
  gap: 1rem;
}
.contact-wraaper {
  background-color: #1f1e28;
  display: flex;
  column-gap: 25px;
}
#contact-us .intro,
#contact-us .contact-wraaper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-wraaper .icon {
  display: inline-flex;
  width: 60px;
  height: 60px;
  text-decoration: none;
  font-size: 26px;
  /* color: #fff; */
  border-radius: 50%;
  outline: 2px solid #fff;
  transition-property: outline-offset, outline-color, background-color;
  transition-duration: 0.25s;
}

.icon:hover,
.icon:active {
  outline-offset: 4px;
}
.icon:active {
  transform: scale(0.9);
}
.icon a {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon ion-icon {
  margin: auto;
}
.icon:hover ion-icon {
  animation: shake 0.25s;
}
.icon--mail:hover {
  /* For instagram */
  /* background-image: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
    ); */
  /* outline-color: #a02d76; */
  /* background-color: #b991fd; */
  background-color: #757ffb;
  outline-color: #757ffb;
}
.icon--phone:hover {
  background-color: #1da1f2;
  outline-color: #1da1f2;
}

.icon--whatsapp:hover {
  background-color: #2ea44f;
  outline-color: #2ea44f;
}
@keyframes shake {
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  30% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-15deg);
  }
}

/* ===================== RESPONSIVE ===================== */
@media (width > 992px) {
  #contact-us {
    width: 80%;
    grid-template-rows: unset;
    grid-template-columns: repeat(2, minmax(45vh, 1fr));
  }

  .contact-wraaper .icon {
    width: 80px;
    height: 80px;
  }
  .contact-wraaper .icon ion-icon {
    font-size: xx-large;
  }

  #contact-us .intro {
    /* border-right: 2px solid rgba(35, 35, 35, 0.35); */
    border-right: 2px solid rgba(255, 255, 255, 0.25);
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    border-bottom: unset;
  }
}