/* //////////////////////////////////////////////////////////////////////////////////////////

Contact Page:
Hero

////////////////////////////////////////////////////////////////////////////////////////// */


.contact-hero {
  background-color: #e30613;
  padding: 130px 0 115px 0;
  width: 100%;
}
  @media screen and (max-width: 1400px) {
    .contact-hero {
      padding: 125px 0 80px 0;
    }
  }
  @media screen and (max-width: 700px) {
    .contact-hero {
      padding: 100px 0 60px 0;
    }
  }

  
/* ////////// */
  

/* Title */
  
.contact-hero-title {
  font-family: 'Proxima Intervlag Extrabold', Helvetica, Arial, sans-serif;
  font-size: clamp(32px, calc(6px + 5vw), 65px);
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  line-height: 0.85;
  animation: contact-hero-entrance-animation 0.9s ease 0.55s both;
}

/* Keyframes - Entrance Animation: Hero Title */

@keyframes contact-hero-entrance-animation {
  from {
    opacity: 0;
    transform: translateY(20%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ////////// */


/* Contact - Wrapper */
  
.contact-wrapper {
  background-color: #fff;
  padding: 120px 0;
  box-sizing: border-box;
  animation: contact-wrapper-entrance-animation 1.2s ease 0.45s both;
  will-change: clip-path;
}
  @media screen and (max-width: 900px) {
    .contact-wrapper {
      padding: 0;
    }
  }

/* Keyframes - Entrance Animation: Contact Wrapper */
@keyframes contact-wrapper-entrance-animation {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}




/* Contact - Container */
  
.contact-container {
  padding: 0 35px;
  box-sizing: border-box;
  display: flex;
  gap: clamp(10px, calc(5px + 5.5vw), 50px);
  width: 100%;
  max-width: 1350px;
  margin: auto;
}
  @media screen and (max-width: 1200px) {
    .contact-container {
      gap: 15px;
    }
  }
  @media screen and (max-width: 900px) {
    .contact-container {
      display: grid;
      gap: 0;
      padding: 0;
    }
  }


/* ////////// */


/* Contact - Column Left */
  
.contact-col-left {
  position: relative;
  overflow: hidden;
  background-color: #eff2f4;
  width: 100%;
  height: inherit;
  border-radius: clamp(28px, calc(10px + 2.5vw), 40px);

  font-family: 'Proxima Nova Semibold', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
  @media screen and (max-width: 900px) {
    .contact-col-left {
      border-radius: 0;
    }
  }


/* ////////// */


/* Details - Container */

.contact-details-container {
  padding: 55px clamp(20px, calc(5px + 3vw), 45px);
  box-sizing: border-box;
  width: 100%;
}
  @media screen and (max-width: 900px) {
    .contact-details-container {
      padding: 80px 35px;
    }
  }
  @media screen and (max-width: 700px) {
    .contact-details-container {
      padding: 50px 20px;
    }
  }

/* Details */

.contact-details-row {
  display: flex;
}
  @media screen and (max-width: 900px) {
    .contact-details-row {
      max-width: 600px;
      margin: auto;
    }
  }

.contact-details-separator {
  width: 100%;
  height: 1px;
  background-color: #222228;
  opacity: 0.1;
  margin: 40px 0;
  display: block;
}
  @media screen and (max-width: 900px) {
    .contact-details-separator {
      max-width: 600px;
      margin: 30px auto;
    }
  }

/* ///// */

.contact-details-col-left {
  width: 45px;
  color: #222228;
  opacity: 0.6;
}

.contact-details-bold {
  font-family: 'Proxima Nova Bold', Helvetica, Arial, sans-serif;
}

.contact-details-icon::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: #222228;
}
  .contact-details-icon.address::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10,4.144c-2.602,0-4.718,2.117-4.718,4.718c0,3.654,4.249,6.666,4.429,6.792L10,15.856l0.289-0.202 c0.181-0.126,4.429-3.138,4.429-6.792C14.718,6.261,12.601,4.144,10,4.144z M10,14.61c-0.919-0.719-3.71-3.122-3.71-5.748 c0-2.046,1.664-3.71,3.71-3.71c2.045,0,3.71,1.664,3.71,3.71C13.71,11.488,10.919,13.89,10,14.61z"/> <path d="M10,6.988c-1.033,0-1.874,0.841-1.874,1.874c0,1.033,0.841,1.874,1.874,1.874c1.033,0,1.874-0.841,1.874-1.874 C11.874,7.829,11.033,6.988,10,6.988z M10,9.728c-0.478,0-0.866-0.388-0.866-0.866c0-0.477,0.388-0.866,0.866-0.866 c0.477,0,0.865,0.388,0.865,0.866C10.866,9.339,10.477,9.728,10,9.728z"/></svg>');
  }
  .contact-details-icon.telephone::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.922,12.078c4.014,4.014,6.273,2.767,6.805,1.321c0.149-0.406,0.008-0.861-0.347-1.108l-1.61-1.122 c-0.311-0.217-0.732-0.179-1,0.089l-0.51,0.51c-0.194,0.194-0.505,0.204-0.711,0.023c-0.3-0.264-0.747-0.67-1.209-1.131 c-0.462-0.462-0.867-0.909-1.131-1.209C8.027,9.245,8.037,8.934,8.231,8.74l0.51-0.51c0.268-0.268,0.305-0.689,0.089-1L7.709,5.62 C7.462,5.265,7.006,5.123,6.601,5.273C5.155,5.805,3.908,8.064,7.922,12.078z"/></svg>');
  }
  .contact-details-icon.email::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.168,5.836H5.832c-0.676,0-1.226,0.55-1.226,1.226v5.877c0,0.676,0.55,1.226,1.226,1.226h8.336 c0.676,0,1.226-0.55,1.226-1.226V7.062C15.394,6.386,14.844,5.836,14.168,5.836z M10.284,10.141c-0.157,0.154-0.412,0.154-0.568,0 L6.359,6.852h7.282L10.284,10.141z M8.119,10l-2.497,2.447V7.553L8.119,10z M8.846,10.711l0.159,0.156 c0.275,0.269,0.635,0.403,0.996,0.403s0.721-0.134,0.996-0.403l0.159-0.156l2.486,2.436H6.359L8.846,10.711z M11.881,10l2.497-2.447 v4.893L11.881,10z"/></svg>');
  }
  .contact-details-icon.opening-times::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10,16.5c-3.584,0-6.5-2.916-6.5-6.5S6.416,3.5,10,3.5s6.5,2.916,6.5,6.5S13.584,16.5,10,16.5z M10,4.618 c-2.968,0-5.382,2.414-5.382,5.382S7.032,15.382,10,15.382s5.382-2.414,5.382-5.382S12.968,4.618,10,4.618z"/> <path d="M11.444,10.559H10c-0.309,0-0.559-0.25-0.559-0.559V6.994c0-0.309,0.25-0.559,0.559-0.559s0.559,0.25,0.559,0.559v2.447 h0.885c0.309,0,0.559,0.25,0.559,0.559C12.004,10.309,11.753,10.559,11.444,10.559z"/></svg>');
  }


/* ////////// */

.contact-details-col-right {
  width: 100%;
  color: #555560;
}

.contact-details-col-right a {
  color: #555560;
  text-decoration: none;
  display: block;
  width: fit-content;
}

.contact-details-col-right .link {
  font-family: 'Proxima Nova Semibold', Helvetica, Arial, sans-serif;
  color: #fff;
  margin-top: 35px;
  width: fit-content;
  position: relative;
  background-color: #0c0c10;
  border-radius: 20px;
  padding: 11.75px 20px;
  font-size: 15px;
  line-height: 1;
  transition: opacity 0.2s ease;
}
  .contact-details-col-right .link:hover {
    opacity: 0.9;
  }




/* ///// */


.contact-details-illustration {
  width: 100%;
  height: fit-content;
  padding-top: 40px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
}
  @media screen and (max-width: 900px) {
    .contact-details-illustration {
      position: unset;
    }
  }

  .contact-details-illustration img {
    width: 100%;
    height: auto;
  }

/* ////////// */


/* Contact - Column Right */
  
.contact-col-right {
  width: 100%;
  height: 100%;
}
  @media screen and (max-width: 900px) {
    .contact-col-right {
      background-color: #e30613;
      padding: 25px;
      box-sizing: border-box;
    }
  }

.contact-form-container {
  padding: 50px clamp(20px, calc(5px + 3vw), 45px);
  box-sizing: border-box;
  width: 100%;
  display: grid;
  gap: 35px;
}
  @media screen and (max-width: 1200px) {
    .contact-form-container {
      padding-right: 10px;
    }
  }
  @media screen and (max-width: 900px) {
    .contact-form-container {
      padding: 80px 25px 120px 25px;
      border-radius: 18px;
      background-color: #fff;
      max-width: 550px;
      margin: auto;
    }
  }

.contact-form-head {
  font-family: 'Proxima Nova Bold', Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.55;
  letter-spacing: 0.1px;
  color: #222228;
}
  @media screen and (max-width: 900px) {
    .contact-form-head {
      text-align: center;
    }
  }

.contact-form-text {
  font-family: 'Proxima Nova Semibold', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #666668;
  line-height: 1.55;
  margin-bottom: 25px;
}
  @media screen and (max-width: 900px) {
    .contact-form-text {
      text-align: center;
    }
  }


/* ////////// */



/* Container voor de groep van input + label */
.form-group {
  position: relative;
  margin-bottom: 13px; /* Verplaatst van input naar de groep */
}

.contact-form-label {
  /* Positionering voor het "floating" effect */
  position: absolute;
  top: 18px;
  left: 12px;
  padding: 0 4px;
  
  font-family: 'Proxima Nova Medium', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #555560;
  opacity: 0.6;
  
  pointer-events: none; /* Zorgt dat je door de label heen klikt */
  transition: transform 0.2s ease, font-size 0.2s ease;
}

.contact-form-input {
  margin: 0;
  width: 100%;
  padding: 24px 18px 3px 16px;
  border: none;
  border-radius: 12px;
  outline: 1px solid rgba(0, 0, 40, 0.13);
  
  font-family: 'Proxima Nova Medium', Helvetica, Arial, sans-serif;
  line-height: 1.55;
  font-size: 16px;
  color: #222;
}

.contact-form-input:focus + .contact-form-label,
.contact-form-input:not(:placeholder-shown) + .contact-form-label {
  transform: translateY(-63%);
  font-size: clamp(9px, calc(6px + 1vw), 12px);
}

.contact-form-input:hover {
  outline: 2px solid rgba(0, 0, 40, 0.13);
}

.contact-form-input:focus {
  outline: 2px solid #181821;
  border-radius: 12px; /* force correct border-radius for ios Safari */
  background-color: #fff;
  transition: 0.15s;
}

.contact-form-textarea {
  height: 340px;
  resize: vertical;
}




.contact-form-button {
  box-sizing: border-box;
  display: block;
  text-decoration: none !important;
  font-family: 'Proxima Nova Bold', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #FFF;
  font-size: 16px;
  padding: 22px;
  width: 100%;
  transition: 0.22s;
  letter-spacing: 0.1px;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color 0.32s cubic-bezier(0, 0, 0, 1);
  background-color: #0c0c10;
}
  @media screen and (max-width: 500px) {
    .contact-form-button {
      padding: max(15px, 2.594svh);
    }
  }
  .contact-form-button:hover {
    background-color: #e30613;
    color: #FFF;
  }
  .contact-form-button:active {
    background-color: #ae0f0a;
    transition: 0.1s;
    color: #FFF;
  }