:root {
  --primary-color: #f5d8a3;
  --black: #262626;
  --red: #ff4545;
}
/* Global Styles */
body {
  background-color: #f5d8a3;
  color: #333;
  margin: 0;
  font-family: "Roboto Slab", serif;
}

h1 {
  font-family: "Roboto Slab", serif;
  font-weight: 600;
  text-align: center;
  font-size: 1.8125rem;
  padding-bottom: 1rem;
  color: var(--black);
}

/* Main Section */
main {
  margin: 0 auto;
  padding: 20px;
  background: white;
}

main section {
  margin-bottom: 40px;
}

/* Contact Form Section */
.contact-form h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.contact-form form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* gap: 15px; */
}

.contact-form form label {
  font-weight: bold;
  margin-bottom: 5px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  max-width: 100%; /* Prevent inputs from expanding */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box; /* Ensure padding doesn't break layout */
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  background-color: #f5d8a3;
  color: #262626;
  border: none;
  border-radius: 5px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.contact-form button:hover {
  background-color: #c6ab84;
}

/* Contact Details Section */
.contact-details h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.contact-details p {
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

.map-container {
  margin-top: 20px;
  text-align: center;
}

.map-container iframe {
  border: 0;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  height: 300px;
  margin: 0 auto;
  display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
  main {
    padding: 15px;
  }

  header h1 {
    font-size: 2rem;
  }

  header p {
    font-size: 1rem;
  }

  .contact-form form {
    padding: 0 10px;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem; /* Ensure readable input on smaller screens */
  }

  .contact-form label {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .contact-form button {
    font-size: 1rem;
  }

  .map-container iframe {
    width: 100%; /* Full width on mobile */
    height: 250px;
  }
}
.contact-container {
  pointer-events: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: fixed;
  width: 100vw;
  display: flex;
  justify-content: end;
  margin-top: 60vh;
  z-index: 999;
}

.contact-btn img {
  pointer-events: auto;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  width: 67px;
  padding: 0.4rem;
  margin-bottom: 15px;
  border-radius: 50px 0 0 50px;
  height: 41px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
header span {
  transform: translateY(50%);
}
header {
  padding-top: 60px;
  height: 30vh;
  background-image: none;
  --sz: 16px;
  --c0: #fff0;
  --c1: #bdd0e1;
  --c2: #809bb9;
  --c3: #3e394a;
  --c4: #18151f;
  --ts: 50%/ calc(var(--sz) * 13.0) calc(var(--sz) * 21.0);
  --bp: calc(var(--sz)* -6.5) calc(var(--sz)* -10.5);
  margin: 0;
  padding: 0;
  overflow: hidden;
  --bg:
  conic-gradient(from 0deg at 79.5% 7.45%, var(--c2) 0 120deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -60deg at 73% 5.45%, var(--c2) 0 60deg,  var(--c3) 0 120deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from 60deg at 92.5% 32.25%, var(--c4) 0 60deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -90deg at 8% 50%, var(--c4) 0 30deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from 60deg at 92% 50%, var(--c4) 0 30deg, var(--c0) 0 100%) var(--ts),
  linear-gradient(150deg, var(--c3) 0 11%,  var(--c0) 0 100%) var(--ts),
  conic-gradient(from -60deg at 30% 11.25%, var(--c4) 0 60deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from 90deg at 50% 0.5%, var(--c4) 0 30deg, var(--c0) 0 150deg,  var(--c4) 0 100%) var(--ts),
  conic-gradient(from 0deg at 97.5% 50%, var(--c4) 0 90deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -60deg at 54.45% 16.5%, var(--c1) 0 120deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -60deg at 48.75% 17.95%, var(--c2) 0 120deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -60deg at 23.07% 25%, var(--c1) 0 120deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -60deg at 45.45% 27.5%, var(--c3) 0 60deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -60deg at 76.92% 24.3%, var(--c1) 0 120deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -60deg at 76.92% 38%, var(--c2) 0 60deg, var(--c3) 0 120deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from 0deg at 45.45% 37%, var(--c4) 0 60deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from 0deg at 29% 42.75%, var(--c3) 0 60deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -90deg at 2.5% 50%, var(--c4) 0 90deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -90deg at 23% 50%, var(--c2) 0 90deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -90deg at 29.5% 50%, var(--c3) 0 90deg, var(--c0) 0 100%) var(--ts),
  conic-gradient(from -90deg at 50% 50%, var(--c2) 0 30deg, var(--c1) 0 150deg, var(--c3) 0 180deg, var(--c0) 0 100%) var(--ts);
  background: var(--bg), var(--bg);
  background-position:
  var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp),
  var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp),
  var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp),
  0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
  0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
  0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}
@media (max-width: 767px) {
  header {
    --sz: 8px;
  }
}