.contact {
  background-color: black;
  padding: 50px 0 0 0 ;
}

.contact .sec-title h2 {
  font-size: 50px;
  font-family: "Inter Tight", sans-serif;
  color: white;
  font-weight: 800;
  font-style: italic;
}

.contact-form h3 {
  color: white;
}

.contact-form #form-submit {
  color: white;
}

.contact-form {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 40px 120px;
}
.contact-form .say-hey {
  border: 2px solid white;
  border-radius: 144px;
  font-family: "Inter Tight", sans-serif;
  font-size: 20px;
  padding: 10px;
  min-width: 150px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
}

/* contact form */
#contact-form {
  display: grid;
  grid-template-columns: 1fr 162px;
  gap: 20px;
  width: 100%;
}

/* Safari-specific styles using @supports */
@supports (-webkit-backdrop-filter: none) {
  #contact-form {
    grid-template-columns: 1fr 168px;
  }
}

/* Safari-specific styles using media query */
@media not all and (min-resolution:.001dpcm) {
  @media (min-width: 0px) {
    #contact-form {
      grid-template-columns: 1fr 168px;
    }
  }
}

#contact-form .input-group-custom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

#contact-form .input-group-custom .input-field-custom {
  display: flex;
  flex-direction: column;
}

#contact-form .input-group-custom input {
  border: 0;
  border-radius: 0;
  padding: 10px;
  font-family: "Inter Tight", sans-serif;
  font-size: 17px;
  font-weight: 300;
  height: 50px;
  margin-bottom: 0;
  text-align: center;
  background-color: transparent;
  border-bottom: 1px solid rgb(128, 128, 128);
  color: rgb(179, 179, 179);
}

#contact-form .input-group-custom input:-webkit-autofill,
#contact-form .input-group-custom input:-webkit-autofill:hover, 
#contact-form .input-group-custom input:-webkit-autofill:focus, 
#contact-form .input-group-custominput:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px black inset !important;
    color: rgb(191, 191, 191) !important;
    -webkit-text-fill-color: rgb(191, 191, 191) !important;
}

#contact-form .input-group-custom input:-webkit-input-placeholder {
    color: rgb(191, 191, 191);
    text-align: center;
    font-size: 17px;
    font-family: "Inter Tight", sans-serif;
}

#contact-form .get-in-touch-btn {
  position: relative;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 144px;
  padding: 0 25px;
  background-color: transparent;
  min-width: 100px;
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
  font-weight: 300;
  height: 50px;
  letter-spacing: -.2px;
  border: 1px solid white;
  width: 100%;
  transition: background-color 0.3s, color 0.3s;
}
#contact-form .get-in-touch-btn:hover {
  background-color: rgb(56, 56, 56);
}
/* end form */

.footer {
  background-color: black;
  padding: 30px 0;
  border: 0;
}

.footer .footer-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
}
.footer-logo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer-logo p {
  font-family: "Inter Tight", sans-serif;
  font-size: 17px;
  line-height: 1.2;
  margin: 0;
  display: block;
  margin-block-end: 0;
  margin-block-start: 0;
  letter-spacing: 1.2px;
}

.footer-logo img {
  width: 100%;
  height: 50px;
  object-fit: contain;
}

.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: 0;
  gap: 10px;
}

.footer-social p {
  font-family: "Inter Tight", sans-serif;
  font-size: 17px;
  line-height: 1.2;
  margin: 0;
  display: block;
  margin-block-end: 0;
  margin-block-start: 0;
  letter-spacing: 1.2px;
}

.footer-social ul {
  display: flex;
  justify-content: end;
  gap: 20px;
}

.footer-social li a {
  margin-bottom: 0;
}