/* CONTAINER SETTINGS */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  
}

.text-title {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  text-align: center;
  font-size: 3.5em;
  font-weight: 100;
  color: rgb(204, 0, 0);
  margin-top: 2px;
  
}

.title-married {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  text-align: center;
  font-size: 2.0em;
  font-weight: 100;
  color: rgb(0, 0, 0);
  margin-top: 2px;
  margin-bottom: 20px;
  
}

.date-married {
  font-family: "Karla", serif;
  text-align: center;
  font-style: bold;
  font-size: 3em;
  font-weight: 300;
  color: rgb(204, 0, 0);
  margin-top: 50px;
  
}

.date-married-next {
  font-family: "Karla", serif;
  text-align: center;
  font-style: bold;
  font-size: 1.0em;
  font-weight: 500;
  color: rgb(0, 0, 0);
  margin-top: 10px;
  
}

/* VIDEO STYLING */
#myVideo {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.bottom-row-text
{
  font-family: "Bodoni Moda", serif;
  font-size: 1.0em;
  font-weight: 100;
  font-style: italic;
  margin: 10px;
  text-align: center;
  color: rgb(51, 51, 51);
}

/* TITLE AND DESCRIPTION */
#title {
  margin-top: 50px;
  margin-left: 300px;
  font-size: 1.00em;
  margin-bottom: 20px;
  color: rgb(51, 51, 51);
  font-family: "Karla", serif;
  font-weight: 100;
  text-align: left;
}

.description {
  margin-left: 300px;
  font-size: 0.9em;
  font-weight: 100;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  margin-bottom: 50px;
  margin-right: 300px;
  color: rgb(51, 51, 51);
  text-align: left;
}

/* HOTELS SECTION */
.hotels {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Change from 'center' to 'stretch' */
  justify-content: center;
  background-color: rgb(204, 204, 204);
  width: 100%; /* Ensure the container spans the full width of the screen */
  margin-left: 20px;
  margin-right: 20px;
}


/* ROW SETTINGS */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Space between the items */
  gap: 15px;
  width: 100%;
}

/* Wrap each image and card body together */
.hotel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  max-width: 100%; /* Set fixed width for each card */
}

/* IMAGE STYLING */
.hotel-img {
  width: 100%;
  margin-top: 10px;
  max-width: 220px; /* Max width for consistency */
  aspect-ratio: 2 / 1; /* Maintain square shape */
  object-fit: cover;
}

/* CARD BODY (Text box) */
.card-body {
  position: static; /* Keep the card body in its natural flow */
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  text-align: center;
  margin-top: 10px; /* Add a little space below the image */
  width: 100%; /* Ensure card body stretches the width of its parent */
}

.wedding-details {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Change from 'center' to 'stretch' */
  justify-content: center;
  background-color: rgb(245, 211, 245);
  width: 100%; /* Ensure the container spans the full width of the screen */
  margin-top: 20px;
  padding: 70px;
}

.bottom-row {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Change from 'center' to 'stretch' */
  justify-content: center;
  background-color: rgb(245, 211, 245);
  width: 100%; /* Ensure the container spans the full width of the screen */
  margin-top: 20px;
  padding: 50px;
}



.hotel-title {
  font-size: 0.8em;
  font-weight: 100;
}

.card-text
{
  font-size: 0.7em;
  font-weight: 100;
  margin: 10px;
  color: rgb(51, 51, 51);
}

/* RESPONSIVE DESIGN */


@media (max-width: 576px) {
  /* Video adjustments for small screens */
  #myVideo {
    height: auto;
    width: 100%; /* Set video width to 100% */

    object-fit: contain;


  }

  

  /* Stack images and cards vertically */
  .row {
    flex-direction: column; /* Stack items vertically */
    align-items: stretch;   /* Stretch child elements to full width */
    width: 100%;            /* Ensure the row spans the full screen width */
    margin: 0;
    padding: 0;
  }
  
  .hotel-card {
    width: 100%;            /* Cards should take the full width */
    margin: 10px 0;         /* Add vertical spacing */
    display: flex;
    flex-direction: column; /* Stack image and card body */
  }
  
  .row, .hotels {
    width: 100% !important;  /* Ensure the container spans the full width */
    max-width: none;
  }
  
  

  .hotel-img {
    max-width: 100% !important  ;
   
    height: auto;    /* Maintain the aspect ratio */
  }
  
  .card-body {
    max-width: 100% !important;     
    width: 100% !important;     /* Match the parent's width */
    padding: 10px;   
    height: auto !important;    /* Add spacing inside the card body */
    text-align: center;     /* Align text for better readability */
    background-color: rgb(250, 250, 250);
  }
  

  .card-title {
    font-size: 1em; /* Adjust font size for smaller screens */
    
  }

  .card-text {
    font-size: 0.9em; /* Adjust font size for smaller screens */
  }
}





/* Medium Screens (Tablet) */
@media (max-width: 992px) {
  #title, .description {
    margin-left: 20px;
    margin-right: 20px;
    text-align: center; /* Center-align title and description */
  }

  /* Video adjustments for medium screens */
  #myVideo {
    height: auto;
    width: 100%; /* Set video width to 100% */

    object-fit: contain;


  }


  .hotel-img {
    max-width: 150px; /* Adjust image size for medium screens */
  }

  /* Card body adjustments for medium screens */
  .card-body {
    width: 150px; /* Make card body a little smaller on medium screens */
  }
}

/* Large Screens (Desktop) */
@media (min-width: 1200px) {
  #myVideo {
    margin-top: 10px;
    width: 100%;
    max-width: 800px; /* Set video max-width for large screens */
    height: auto; /* Adjust height automatically */
  }

  /* ROW SETTINGS */
.row {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);

  justify-content: center; /* Align cards to the start, no space between */
  gap: 0; /* Remove the gap between the cards */
  width: 100%;
}



  .hotel-card {
    margin-left: 5px; /* Add a margin to separate the cards */
    margin-right: 5px; /* Add a margin to separate the cards */
    width: auto; /* Set fixed width for cards */
    margin-top: 20px;
  }

  /* Title and description styling on large screens */
  #title {
    margin-left: 300px;
    font-size: 1.5em;
    text-align: left;
  }

  .description {
    margin-left: 300px;
    margin-right: 300px;

    font-size: 0.9em;
    text-align: left;
  }

  /* Image size on large screens */
  .hotel-img {
    max-width: 250px;
  }

  /* Card body on large screens */
  .card-body {
    width: auto

  }
}