@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Macondo&display=swap");

/* CSS Variables */
:root {
  --primary-font: "Grenze Gotisch", sans-serif;
  --secondary-font: "Macondo", cursive;
  --primary-color: #3a4163;
  --secondary-color: #cbe3ef;
  --background-color: #edf3fb;
  --button-color: #5aa8d6;
}

body {
  font-family: var(--primary-font);
  margin: 0;
  padding: 0;
  background-color: var(--background-color); /* Apply background color */
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-color);
}

.logo {
  width: 70px;
  height: 70px;
}
button {
  background-color: var(--button-color);
  color: var(--secondary-color); /* Set the text color to secondary color */
  border: none; /* Optional: Remove default border */
  padding: 10px 20px; /* Optional: Add padding */
  cursor: pointer; /* Optional: Change cursor to pointer */
}
.left, .right{
  display: flex;
      flex-direction: column;
  }

/* Set colour of buttons */
.btn {
  background-color: var(--button-color);
  color: #fefae0;
  border-color: #bc6c25;
}

/* Set colour of submit button when hovered over */
.btn:hover {
  background-color: #fefae0;
  color: #bc6c25;
  border-color: #fefae0;
}

.navbar {
  background-color: var(
    --button-color
  ) !important; /* Apply button color as background color */
  color: var(
    --secondary-color
  ) !important; /* Set the text color to secondary color */
  height: 80px;
  display: flex;
  align-items: center; /* Center the content vertically */
  font-size: 1.2rem;
  font-family: var(--primary-font);
}

.footer {
  background-color: var(
    --button-color
  ) !important; /* Apply button color as background color */
  color: var(
    --secondary-color
  ) !important; /* Set the text color to secondary color */
}

.hero-image {
  height: 400px;
  width: 100%;
}

.gi-image {
  display: block;
  max-height: 400px;
  height: auto;
  width: auto;
}

.january-container {
  background: url("../images/floral-january.jpg") no-repeat center center;
  object-fit: fill;
  display: block;
  height: 100%;

  width: auto;
  display: flex;
  justify-content: center;
  align-content: center;
}

.january-text {
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-content: center;
}

.get-involved {
  background-color: #5aa8d6;
}

.card {
  background: #edf3fb;
  border: none;
}

.centered {
  position: absolute;
  top: 50%;
  /* left: 50%; */
  transform: translate(-50%, -50%);
}

#contactPage {
  padding: 3vw;
  padding: 3vw;
}

#contactForm {
  background-color: var(--primary-color);
  background-color: var(--primary-color);
  color: #fefae0;
  padding: 5vw;
}

#contactPage h1 {
  font-family: var(--primary-font);
  color: #fefae0;
  color: #fefae0;
}

@media (max-width: 767px) {
  .gi-image {
    object-fit: contain;
    display: block;
    height: 200px;
  }
}

@media (max-width: 991px) {
  .gi-image {
    object-fit: contain;
    display: block;
    height: 300px;
  }

  .touch-image {
    object-fit: contain;
    display: block;
    height: 200px;
  }
}

/* ----------------MAP STYLING---------------- */

#map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#map-container svg {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

.info-box {
  position: absolute;
  top: 300px;
  right: 20px;
  background: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 10px 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 14px;
}

.highlighted {
  fill: green;
  opacity: 0.5;
}

@media (max-width: 768px) {
  #map-container {
    width: 100vw;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
  }
}