/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Hero Section Stuff */

@font-face {
  font-family: "Andrea";
  src: url("fonts/Andrea.ttf") format("truetype");
}

@font-face {
  font-family: "Mathilda"; /* Name of the font */
  src: url("fonts/MathildaDEMO.otf") format("opentype"); /* Path to your OTF file */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Ibarra_Real_Nova";
  src: url("fonts/Ibarra_Real_Nova/IbarraRealNova-VariableFont_wght.ttf")
    format("truetype"); /* Path to your OTF file */
  font-weight: normal;
  font-style: normal;
}

/* Fixed Background Image Section */
.hero {
  height: 100vh;
  background-image: url("images/kissing.jpg"); /* Replace with your image */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Keeps the background fixed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .hero {
    background-attachment: scroll;
  }
}

.hero-content {
  position: absolute;
  top: 50%; /* Position 1/3 of the way down */
  left: 50%;
  transform: translate(-50%, -50%); /* Center the content horizontally */
  font-family: "Mathilda", sans-serif;
}

.hero h1 {
  white-space: nowrap;
  padding: 0;
  margin: 0;
  font-family: "Andrea", sans-serif;
  font-size: 2rem;
}

.hero p {
  font-size: 1.5rem;
}

/* Everything Else */

body {
  margin: 0;
  justify-content: center;
  align-items: center;
  font-family: "Ibarra_Real_Nova", sans-serif;
  color: #434343;
}

a {
  color: #434343;
}

h1 {
  font-size: 1.75rem;
  font-weight: semibold;
  margin-bottom: 10px;
}

h2 {
  font-size: 1.25rem;
  font-weight: semibold;
  margin-bottom: 10px;
}

p {
  font-size: 1rem;
  font-style: regular;
  max-width: 800px;
  margin: 0 auto;
  text-align: leading;
}

section {
  padding: 20px;
}

section:nth-child(even) {
  background-color: #f3d9a6;
}

.join-us {
  text-align: center;
  padding-bottom: 100px;
}

.join-us p {
  padding: 0 20px;
}

.photo-gallery {
  padding: 20px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: -100px 0;
}

.photo-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s ease-in-out;
  position: center;
}

.the-wedding {
  text-align: leading;
  padding-top: 100px;
}

.the-wedding-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Align items to the top */
}

.the-wedding-image-container {
  width: 40%;
  margin-right: 20px; /* Space between the image and the list */
}

.the-wedding-image-container img {
  width: 100%;
  height: auto; /* Keep image aspect ratio */
  object-fit: cover;
}

.the-wedding-numbered-list {
  list-style-position: inside; /* Makes list numbers inside the container */
  font-size: 1.2em;
}

.the-wedding-numbered-list li {
  margin-bottom: 10px;
  list-style-type: none;
}

#map {
  height: 60vw;
  margin-top: 20px;
}

.gmp-map {
  height: 60vw;
  margin-top: 20px;
}

.getting-there {
}

.text-image-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 20px;
}

.text-container {
  flex: 1; /* Takes up 50% of the section */
}

.image-container {
  flex: 1; /* Takes up the other 50% */
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container img {
  width: 100%;
  height: auto;
  max-width: 100%; /* Prevents overflow */
  object-fit: contain; /* Ensures correct aspect ratio */
}

.square-button {
  font-size: 1rem;
  font-weight: bold;
  display: inline-block;
  background-color: white;
  padding: 20px;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Small shadow */
  margin-bottom: 20px;
}

.full-width-image {
  width: 100vw; /* Full width of the viewport */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove inline spacing */
}

.triple-image-container {
  display: flex;
  justify-content: center;
}

.triple-image-container img {
  width: calc(
    50% - 5px
  ); /* Distributes space between 3 images, with 20px total padding between them */
  object-fit: cover;
}

/* Apply the gap between only the middle images */
.triple-image-container img:not(:last-child) {
  margin-right: 10px;
}

.questions h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}

p {
  padding-left: 20px;
}

.timeline {
  max-width: 800px;
  position: relative;
  margin: 0 auto 10px auto;
  border-left: 1px dashed #ababab;
}

.timeline--block {
  padding: 20px 10px;
  align-items: center;
  display: flex;
}

.timeline--dot {
  position: absolute;
  height: 16px;
  width: 16px;
  left: -8px;
  background-image: url("images/flower-bullet.png");
  background-size: cover;
}

.timeline--time {
  flex-basis: 100px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

.timeline--info {
  flex: 1;
}

.timeline--info--title {
  font-weight: bold;
}

.timeline--info--secondary {
  font-size: 17px;
}

.timeline--info--link {
  font-size: 14px;
}

.timeline--info--location {
  margin-top: 5px;
  display: flex;
  font-size: 14px;
}

.timeline--info--location--icon {
  flex-basis: 25px;
}