/* Styles for contact page */


.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}


.banner {
  background-image: url("/images/contact/contact-section-image.jpg");
  box-shadow: 0 3000px rgba(14, 13, 14, 0.582) inset;

}

.contact .heading {
  text-align: left;
  padding-bottom: 1rem;
}

.contact .heading hr {
  width: 80%;
  margin-left: 0;
}


.content-details {
  display: flex;
  flex-direction: column;
}

.contact-item{
  display: grid;
  grid-template-columns: 30px auto;
  padding: 1.3rem 0;
}

.contact-item a, address, .contact-item i {
  text-decoration: none;
  color: var(--darkergray);
  font-size: 1.2rem;
}

.socials a i:hover {
  color: var(--gold);
}


/* Social Media handles consider moving them to the component file */
.socials .fa-tiktok,
.socials .fa-instagram,
.socials .fa-x-twitter,
.socials .fa-whatsapp {
  font-size: 2em;
  color: var(--darkergray);
  margin-right: 0.3em;
}


/* Horizontal rule underneath the follow statement */
.socials>hr {
  margin: 0.5em 0 1em 0;
}


@media only screen and (min-width: 655px) {}