body {
  background-image: 
    radial-gradient(circle, #7d7d7d 10%, transparent 10%),
    radial-gradient(circle, #7d7d7d 10%, transparent 10%),
    url('images/background.png');
  background-position: 
    0 0,
    10px 10px,
    center;
  background-size: 
    20px 20px,
    20px 20px,
    cover;
  background-repeat: 
    repeat,
    repeat,
    no-repeat;
}

.logo-title {
color: #FFAD29;
}

.scrolling-container {
background-color: #FFAD29;
}

header .contact-button {
background-color: #FFAD29;
}

header .contact-button:hover {
background-color: #FF8EDD;
}

.contact-section {
display: flex;
justify-content: space-between;
}

.left-column {
display: flex;
flex-direction: column;
}

.contact-section .left-column {
flex: 1;
padding: 20px;
}

.heading-contact {
display: flex;
align-items: left;
position: relative; 
gap: 20px; 
}

.seen-icon {
width: 150px;
height: 130px;
margin: 210px 0 0 0; 
align-self: flex-start; 
transform: translate(-50%, -50%) scaleX(1);
pointer-events: none;
}

.contact-section .right-column {
width: 30%;
background-color: #F6C26D;
padding: 20px;
margin-right: 150px;
margin-top: 50px;
border-radius: 10px;
box-shadow: 0 0 0 20px #FFAD29,
  0 0 0 25px #000; 
border: 5px solid #000000;
transition: all 0.3s ease-in-out;
}

.contact-section .contact-form {
display: flex;
flex-direction: column;
gap: 15px;
text-align: left;
}

.contact-section .contact-form input,
.contact-section .contact-form textarea {
padding: 12px;
padding-left: 30px;
border-radius: 150px 50px 50px 150px; 
border: 3px solid #000000;
font-size: 28px;
font-family: mono45 headline, sans-serif;
resize: none; 
text-align: left;
position: relative;
outline: none; 
z-index: 1; 
border-bottom: 6px solid #000000;
}

.contact-section .contact-form .form-group {
position: relative;
}

.contact-section .contact-form button {
background-color: #AAFFAA;
color: #000000;
padding: 12px;
font-size: 26px;
letter-spacing: 3%;
font-family: mono45 headline, sans-serif;
cursor: pointer;
border-radius: 100px;
border-bottom: 6px solid #000000;
position: relative;
}

.contact-section .contact-form button::after {
content: '';
position: absolute;
top: 10%;
left: 95%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background-image: url('images/sparkle.png');
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.contact-section .contact-form button::before {
content: '';
position: absolute;
top: 75%;
left: 05%;
width: 30px;
height: 30px;
background-image: url('images/sparkle.png');
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.contact-section .contact-form button:hover::after,
.contact-section .contact-form button:hover::before {
opacity: 1;
}

.contact-section .contact-form button:hover {
transform: scale(1.05);
}

.contact-section .contact-form h2 {
font-size: 48px;
letter-spacing: 3%;
text-align: left;
padding: 0;
margin: 0;
font-family: mono45 headline, sans-serif;
color: #F9F9F9;
-webkit-text-stroke: 1px #000000;
text-shadow: 0 4px 0px black; 
}

.contact-section .right-column:hover {
transform: translateY(-10px);
}

.socials-container {
display: flex;
justify-content: flex-start;
gap: 20px;
padding-left: 90px;
margin-top: -50px;
}

.socials-container .social-link {
display: inline-block;
text-decoration: none;
transition: transform 0.3s ease;
}

.socials-container .social-icon {
width: 100px;
height: 100px;
object-fit: cover;
transition: transform 0.3s ease;
}

.socials-container .social-link:hover .social-icon {
transform: scale(1.1);
}

.subheading-contact {
  font-size: 64px;
  line-height: 110%;
}

@media (max-width: 1024px) {
  .contact-section {
    flex-direction: column;
    padding: 10px; 
  }

  .contact-section .left-column,
  .contact-section .right-column {
    width: 90%; 
    margin-right: 0; 
    margin-top: 20px; 
    margin-bottom: 20%;
  }

  .contact-section .contact-form {
    width: 90%; 
    margin: 0; 
  }

  .contact-section .contact-form input,
  .contact-section .contact-form textarea {
    font-size: 22px; 
    padding: 10px;
    width: 100%; 
  }

  .contact-section .contact-form button {
    font-size: 22px; 
    padding: 10px;
    width: 100%; 
  }

  .contact-section .contact-form h2 {
    font-size: 42px; 
  }

  .seen-icon {
    width: 110px; 
    height: 90px;
  }

  .contact-section .right-column {
    margin-right: 0;
    padding: 15px; 
  }

  .socials-container {
    justify-content: left; 
    padding-left: 0;
    margin-top: 5px; 
  }

  .socials-container .social-icon {
    width: 70px;
    height: 70px;
  }

  .subheading-contact {
    text-align: left;
    font-size: 42px; 
    margin: 10px 0; 
    white-space: normal; 
    word-wrap: break-word; 
    word-break: break-word;
  }

  .heading-contact{
    text-align: left;
    padding: 0;
    margin: 0;
  }

}