.mainMenuGrid {
  display: grid; /* Enables CSS Grid */
  grid-template-columns: repeat(2, 1fr); /* Creates 2 columns of equal fraction width */
  gap: 20px; /* Adds spacing between rows and columns */
  margin: 0 auto; /* Centers the container on the page */
}
./homePanelContainer {    /*                 THIS IS WRONG BUT FIXING BREAKS THE HOME PAGE   */
  background-color: transparent;
  display: grid;         /* Enables the CSS grid layout */
  grid-template-columns: 1fr; /* Explicitly forces a single column spanning the full width */
  gap: 15px;             /* Adds clean vertical spacing between your grid items */
  max-width: 600px;      /* Restricts container width for better readability */
  margin: 0 auto;        /* Centers the container horizontally on the screen */
  text-align: left;
  padding: 120px;
}
.homePanelContainer h2, .homePanelContainer h3 {
  text-align: left;
  margin: 0 0 10px 0; /* Clears default browser margins and adds bottom spacing */
  font-weight: 600;
  line-height: 1.2;
  font-family: "Merriweather", "serif";
}
.homePanelContainer h2 { font-size: 5.0rem; color: white; }
.homePanelContainer h3 { font-size: 2.0rem; color: white; font-family: inthent; }
.homePanelItem {
  background-color: transparent;
  padding: 20px;
  font-family: sans-serif;
  display: flex;
  justify-content: flex-end
/*   xmin-height: 300px;  */
}
.homePanelItemText {
  width: 70%;
/*     align: right;   */
  background: transparent;
}
.rentalGridContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: repeat(2, minmax(150px, auto)); 
  gap: 20px; 
  padding: 20px;
  width: 90%;
  box-sizing: border-box;
}
.rentalGridItem {
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rentalGridItem img {
  display: block;    /* Removes the default extra bottom whitespace */
  width: 100%;       /* Forces the image to span 100% of the parent's width */
  height: auto;      /* Automatically scales height to prevent distortion */
}
.image-block img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}
.text-block {
  padding: 20px;
  justify-content: center;
  font-family: system-ui, sans-serif;
  color: #334155;
}
.text-block h5 {
  margin: 0 0 8px 0;
}
.text-block p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .rentalGridContainer {
    grid-template-columns: 1fr;
    grid-template-rows: auto; 
  }
  .image-block img {
    height: 250px; 
  }
  .rentalGridItem--1 { order: 1; }
  .rentalGridItem--5 { order: 2; }
  .rentalGridItem--2 { order: 3; }
  .rentalGridItem--6 { order: 4; }
  .rentalGridItem--3 { order: 5; }
  .rentalGridItem--7 { order: 6; }
  .rentalGridItem--4 { order: 7; }
  .rentalGridItem--8 { order: 8; }
}
.threeGridContainer {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, minmax(150px, auto));
            gap: 20px;
            padding-left: 10%;
            padding-right: 10%;
            width: 100%;
            box-sizing: border-box;
            background: transparent;
        }
.threeGridItem {
            background-color: #ffffff;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
.image-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
.text-block {
            padding: 20px;
            color: #334155;
            font-size: 2.1rem;
        }
@media (max-width: 768px) {
  .threeGridContainer {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
            }
  .image-block img {
                height: 250px;
            }
  .threeGridItem--1 { order: 1; }
  .threeGridItem--4 { order: 2; }
  .threeGridItem--2 { order: 3; }
  .threeGridItem--5 { order: 4; }
  .threeGridItem--3 { order: 5; }
  .threeGridItem--6 { order: 6; }
}
.Visitgrid-container {
  display: grid;
  /* Spans the entire width of the page viewport */
  width: 100vw; 
  /* Includes padding and borders in the element's total width calculation */
  box-sizing: border-box; 
  
  /* 5-column base layout */
  grid-template-columns: repeat(5, 1fr);
  /* 10-row layout */
  grid-template-rows: repeat(10, minmax(80px, auto));
  gap: 16px;
}
.Visitgrid-col-2-3 {
  grid-column: 2 / span 2;
}
.Visitgrid-item {
  background-color: transparent;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  box-sizing: border-box;
}
.Visitgrid-item img {
  display: block;    /* Removes the default extra bottom whitespace */
  width: 100%;       /* Forces the image to span 100% of the parent's width */
  height: auto;      /* Automatically scales height to prevent distortion */
}
@media (max-width: 600px) {
  .Visitgrid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .Visitgrid-col-2-3 {
    grid-column: auto;
  }
}
.mediaContainer {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr; 
      gap: 10px;
      padding: 0px;
align-items: center;
justify-self: center

    }
.mediaCell {
      background-color: transparent; /* Blue on mobile */
      width: 100%;
      padding: 0px;
      text-align: center;
      font-family: sans-serif;
      /* Leverages the CSS order property to re-sort the stack on mobile */
      order: var(--mob-order);
    }

.mediaCell img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* Crops the image to fill the square/rectangle without distortion */
}
@media (min-width: 768px) {
  .mediaContainer {
        grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
        grid-template-rows: repeat(12, auto);   /* 10 rows */
      }
  .mediaCell {
        /* Snaps cells into their exact PC coordinates, ignoring mobile order */
        grid-row: var(--pc-row);
        grid-column: var(--pc-col);
        background-color: transparent; /* Green on PC */
      }
}
.containerTaC {
  padding-top: 15px;
  padding-left: 15%;
  padding-right: 15%;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr; 
  gap: 15px; 
}
@media (min-width: 768px) {
  .containerTaC {
    text-align: left;
    grid-template-columns: repeat(3, 1fr); 
    text-align: left;
  }
}
.cellTaC {
  background-color: #f2f2f2; 
  text-align: left;
  padding: 20px; 
  padding-left: 45px;            
}

.containerEvents {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
    padding-left: 15%;
    padding-right: 15%;
  }
.cellEvents {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
.cellEvents img {
    display: block;
    width: 100%;
    height: auto;
  }
@media (max-width: 600px) {
  .containerEvents {
      grid-template-columns: 1fr;
    }
}
.weddingGalleryContainer {
  display: grid;
  margin: 0 auto;
  width: 70%;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.weddingGalleryCell img {
  width: 100%;
  padding-bottom: 20px;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .weddingGalleryContainer {
    grid-template-columns: 1fr;
  }
}
.feedbackContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin: 0 auto;
  padding: 0 5%;
  gap: 50px;
  box-sizing: border-box;
}
.feedbackCell {
  width: 30%;
  padding-left: 5%;
  padding-right: 5%;
  text-align: center;
  background: white;
}
@media (max-width: 768px) {
  .feedbackContainer {
    grid-template-columns: 1fr;
  }
}
.custom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns desktop */
  width: 100%;
  border: none; /* No borders */
}
.cell {
  text-align: center;
  background-color: transparent; 
  width: 100%;
}
.cell img {
  width: 100%;
  height: auto;
}
.cell:nth-child(even) {
  background-color: transparent;
}
@media (max-width: 768px) {
  .custom-grid {
  grid-template-columns: 1fr; /* Shrinks to 1 column */
}
  .cell:nth-child(1)  { order: 1; }
  .cell:nth-child(2)  { order: 2; }
  .cell:nth-child(3)  { order: 4; }
  .cell:nth-child(4)  { order: 3; }
  .cell:nth-child(5)  { order: 5; }
  .cell:nth-child(6)  { order: 6; }
}
.custom-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns desktop */
  width: 70%;
  border: none; /* No borders */
}
.cell2 {
  padding: 10px;
  text-align: center;
  background-color: transparent; 
  width: 100%;
}
.cell2 img {
  width: 100%;
  height: auto;
}
.cell2:nth-child(even) {
  background-color: transparent;
}
@media (max-width: 768px) {
  .custom-grid2 {
  grid-template-columns: 1fr; /* Shrinks to 1 column */
}
  .cell2:nth-child(1)  { order: 1; }
  .cell2:nth-child(2)  { order: 2; }
  .cell2:nth-child(3)  { order: 4; }
  .cell2:nth-child(4)  { order: 3; }
  .cell2:nth-child(5)  { order: 5; }
  .cell2:nth-child(6)  { order: 6; }
  .cell2:nth-child(7)  { order: 8; }
  .cell2:nth-child(8)  { order: 7; }
}



.footerGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  place-items: center;
}

.footerCell {
  /* content centered by place-items on parent */
  place-items: center
}

/* Mobile: collapse to 1×1, show only cell 2 */
@media (max-width: 768px) {
  .footerGrid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .footerCell {
    display: none;
  }

  .footerCell:nth-child(2) {
    display: block;
  }
}