/* Main font */
.inter-<uniquifier > {
   font-family: "Inter", serif;
   font-optical-sizing: auto;
   font-weight: <weight>;
   font-style: normal;
}

/* Heading font */
.bitter-<uniquifier > {
   font-family: "Bitter", serif;
   font-optical-sizing: auto;
   font-weight: <weight>;
   font-style: normal;
}

/* General styles */
body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Inter", sans-serif;
   font-size: 16px;
   line-height: 22px;
   color: #000;
   background-color: #f7f7f7;
}

h1 {
   font-family: "Bitter", serif;
   font-weight: 900;
   font-size: 30px;
   line-height: 38px;
   letter-spacing: 0.7px;
   color: #226130;
   margin-top: 20px;
   margin-bottom: 15px;
   text-align: center;
}

.gallery-heading {
   font-family: "Bitter", serif;
   font-weight: 900;
   font-size: 30px;
   line-height: 40px;
   letter-spacing: 0.7px;
   color: #226130;
   margin-top: 40px;
   margin-bottom: 30px;
   text-align: center;
}

h2 {
   color: #226130;
   line-height: 40px;
}

h3 {
   line-height: 14px;
}

a {
   color: #226130;
   text-decoration: none;
   font-weight: 700;
}

a:hover {
   color: #dcbb4a;
   text-decoration: none;
}

/* Header */
.header {
   background-color: #333;
   height: 27vh;
   position: relative;
   width: 100%;
   z-index: 3;
}

.header ul {
   margin: 0;
   padding: 0;
   list-style: none;
   overflow: hidden;
}

.header li a {
   display: block;
   padding: 20px 20px;
   text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
   background-color: #226130;
   color: white;
}

.header .logo {
   padding-left: 7%;
}

.header .logo img {
   height: 110px;
}

.header .center {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   height: 96px;
   /* Requires explicit height */
}

/* Menu */
.header .menu {
   clear: both;
   max-height: 0;
   transition: max-height 0.2s ease-out;
}

/* Menu links */
.header ul li a {
   display: block;
   color: white;
   font-weight: 500;
   text-decoration: none;
   font-size: 18px;
   padding: 2em 1em;
   transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Menu icon */
.header .menu-icon {
   cursor: pointer;
   display: inline-block;
   float: right;
   padding: 1em;
   position: relative;
   user-select: none;
   background: #dcbb4a;
   margin-right: 7%;
}

.header .menu-icon .navicon {
   background: black;
   display: block;
   height: 2px;
   position: relative;
   transition: background 0.2s ease-out;
   width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
   background: black;
   content: "";
   display: block;
   height: 100%;
   position: absolute;
   transition: all 0.2s ease-out;
   width: 100%;
}

.header .menu-icon .navicon:before {
   top: 5px;
}

.header .menu-icon .navicon:after {
   top: -5px;
}

/* Menu btn */
.header .menu-btn {
   display: none;
}

.header .menu-btn:checked ~ .menu {
   max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
   background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
   transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
   transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
   top: 0;
}

/* Slideshow */
.slideshow {
   position: relative;
   width: 100%;
   height: 600px;
   overflow: hidden;
}

.slideshow img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   opacity: 0;
   transition: opacity 1s ease-in-out;
}

.slideshow img.active {
   opacity: 1;
}

/* Overlay text on slideshow */
.slideshow-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   z-index: 1;
   /* Ensure it sits above the slideshow */
}

.overlay-text {
   text-align: center;
}

.overlay-text h1 {
   font-size: 44px;
   font-family: "Bitter", serif;
   font-weight: 900;
   color: white;
   letter-spacing: 0.7px;
   text-shadow: 2px 4px 12px rgba(0, 0, 0, 1);
}

.overlay-text p {
   font-size: 22px;
   margin-bottom: 28px;
   font-weight: 600;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.book-now-button {
   background-color: #dcbb4a;
   color: #000;
   font-size: 18px;
   padding: 12px 24px;
   text-decoration: none;
   border-radius: 4px;
   font-weight: 700;
   transition: background-color 0.3s;
}

.book-now-button:hover {
   background-color: #226130;
   color: white;
}

/* Header image styles */
.header-image {
   position: relative;
   width: 100%;
   height: 300px;
   overflow: hidden;
   /* Ensure the image stays within the container */
}

.header-img {
   width: 100%;
   /* Make the image take the full width */
   height: 100%;
   /* Make the image take the full height */
   object-fit: cover;
   /* Ensure the image covers the entire area without distortion */
}

/* Overlay text for static header image */
.header-image-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /* background: rgba(0, 0, 0, 0.1); /* Semi-transparent dark background */
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   z-index: 1;
   /* Ensure it sits above the header image */
}

.header-overlay-text {
   text-align: center;
}

.header-overlay-text h1 {
   font-size: 44px;
   font-family: "Bitter", serif;
   font-weight: 900;
   color: white;
   letter-spacing: 0.7px;
   text-shadow: 2px 4px 12px rgba(0, 0, 0, 1);
}

.header-overlay-text p {
   font-size: 18px;
   margin-bottom: 25px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

/* Home section*/
.home {
   padding: 20px 120px;
   text-align: center;
}

.home-content {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin-bottom: 10px;
   /* Reduced margin between sections */
   gap: 10px;
   /* Reduced gap between text and images */
}

.home-content .text-right {
   flex: 1;
   text-align: left;
   margin-left: 5px;
}

.home-content .image-left {
   flex: 1;
   text-align: center;
   margin-right: 5px;
   margin-top: 20px;
}

.home-image {
   max-width: 100%;
   /* Ensure images take up full width without overflow */
   height: auto;
   border-radius: 8px;
}

.text-right .first-paragraph {
   font-weight: 700;
   font-size: 18px;
   line-height: 24px;
}

/* About Us section */
.about-us {
   padding: 20px 190px;
   text-align: left;
}

.about-us h1 {
   margin-bottom: 30px;
}

.about-us-first {
   font-weight: 700;
   font-size: 18px;
   line-height: 24px;
}

/* Lightbox gallery */
.gallery {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 10px;
   padding: 20px;
}

.gallery img {
   width: 100%;
   height: 115px;
   /* Or whatever thumbnail height you want */
   object-fit: cover;
   cursor: pointer;
   transition: transform 0.3s ease;
}

.gallery img:hover {
   transform: scale(1.05);
}

/* Lightbox modal */
.lightbox {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   justify-content: center;
   align-items: center;
   z-index: 1000;
}

.lightbox img {
   max-width: 90%;
   max-height: 80%;
   margin: 0 auto;
   display: block;
}

/* Gallery navigation buttons (left and right) */
.nav-buttons {
   position: absolute;
   top: 50%;
   width: 100%;
   display: flex;
   justify-content: space-between;
   transform: translateY(-50%);
   padding: 0 10px;
}

.nav-buttons button {
   background-color: transparent;
   color: white;
   font-weight: 900;
   font-size: 2.5rem;
   border: none;
   cursor: pointer;
   z-index: 2;
   /* Ensure buttons are above the image */
}

/* Left button */
.nav-buttons .prev-btn {
   margin-left: 20px;
}

/* Right button */
.nav-buttons .next-btn {
   margin-right: 20px;
}

/* Lightbox caption */
.lightbox .caption {
   color: white;
   text-align: center;
   margin-top: 10px;
   font-size: 1.2rem;
}

/* Close button (X) */
.lightbox .close-btn {
   position: absolute;
   top: 10px;
   right: 20px;
   background-color: transparent;
   color: white;
   font-size: 2rem;
   border: none;
   cursor: pointer;
   z-index: 3;
   /* Ensure the close button is above everything */
}

/* FAQs section */
.faqs {
   padding: 20px;
   text-align: left;
}

.faq-item {
   background-color: #fff;
   color: #000;
   padding: 20px;
   margin: 0 auto 20px;
   /* Centers the item horizontally */
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   width: 50%;
   /* Set to % of the parent container's width */
   max-width: 1000px;
   /* Optional: Set a max width for larger screens */
}

.faq-item h3 {
   font-size: 20px;
   color: #000000;
   line-height: 28px;
}

.indented-list {
   padding-left: 5px;
   /* Indent the whole list */
   list-style-position: inside;
   /* Ensures numbers are part of the list item */
}

.indented-list li {
   padding-left: 10px;
   /* Optional: add extra indent to the list items themselves */
}

/* Resources section */
.resources {
   padding: 20px 20px;
   text-align: center;
   margin-top: 15px;
   margin-bottom: 15px;
}

.resources-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 20px;
   column-gap: 8%;
   margin: 0 auto;
   max-width: 45%;
   justify-content: center;
   /* Limit the grid width */
}

.resource-item {
   background-color: #fff;
   padding: 20px;
   text-align: center;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   width: 290px;
   /* Ensure each resource box uses the full available width */
}

.resource-item h3 {
   font-size: 20px;
   margin-bottom: 10px;
}

.resource-item p {
   font-size: 18px;
   margin: 0;
}

/* Contact Us section */
.contact-us {
   padding: 20px;
   /* Reduced padding for smaller margins */
   margin: 0 auto;
   /* Centers the section */
   max-width: 1200px;
   /* Limits the maximum width */
}

/* Contact grid styles */
.contact-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   padding: 0;
}

.contact-item-large {
   grid-column: span 4;
   /* Makes this item span across all 4 columns */
   padding: 0;
   text-align: center;
}

.please-read {
   margin-bottom: 30px;
}

.contact-item {
   background: #fff;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   text-align: center;
   margin-bottom: 20px;
}

.contact-icon {
   width: 80px;
   height: 80px;
}

/* Google maps */
.google-maps {
   width: 99.5vw;
   /* Use the full viewport width */
   margin-top: 15px;
   padding: 0;
   /* Remove padding */
   position: relative;
   left: 50%;
   /* Move the container to the center */
   right: 50%;
   /* Move the container to the center */
   margin-left: -50vw;
   /* Offset the 50% shift to truly span full width */
}

/* Footer */
.footer {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #333;
   color: white;
   padding: 40px 10%;
   height: auto;
}

.footer-column {
   flex: 1;
   text-align: left;
   padding: 0;
   height: 250px;
}

.badge {
   width: 130px;
   margin-top: 16px;
}

.footer h3 {
   color: #e3b647;
   line-height: 0.1;
}

.footer-column:nth-child(3) {
   padding-right: 10%;
}

/* Footer vertical navigation links */
.footer-column:nth-child(2) {
   display: flex;
   flex-direction: column;
}

.footer-column:nth-child(2) a:not(:first-of-type) {
   margin-top: 10px; /* Adjust the spacing as needed */
   display: block;   /* Ensures the margin takes effect vertically */
}

.footer-column:nth-child(2) a {
   color: white;
   text-decoration: none;
   font-size: 16px;
}

.footer-column:nth-child(2) a:hover {
   color: #36a165;
}

/* Copyright footer styles */
.copyright-footer {
   text-align: center;
   background-color: #444;
   padding: 20px;
   height: 60px;
   font-family: "Inter", sans-serif;
   font-size: 16px;
   font-weight: 500;
   color: #fff;
}

.copyright-footer a {
   color: #dcbb4a;
   text-decoration: none;
   font-size: 16px;
}

.copyright-footer a:hover {
   color: #fff;
   text-decoration: none;
}

/* Responsive design */
@media (max-width: 1200px) {
   .contact-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Devices larger than 1024px */
@media (min-width: 1024px) {
   .header li {
      float: left;
   }

   .header li a {
      padding: 20px 30px;
   }

   .header .menu {
      clear: none;
      max-height: none;
      float: right;
      margin-right: 7%;
   }

   .header .menu-icon {
      display: none;
   }
}

/* All iPads (portrait & landscape) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
   .header .menu-icon {
      display: inline-block !important;
   }

   .header .menu {
      clear: both;
      max-height: 0;
      transition: max-height 0.2s ease-out;
      float: none !important;
   }

   .header li {
      float: none !important;
   }
   .header ul li a {
      padding: 0.5em;
      z-index: 1000;
      background-color: #fff;
      color: #000;
   }
   .header .menu-icon {
      margin-top: 3%;
   }

   .home-content .about-us-content {
      flex-direction: column;
      gap: 20px;
   }
   .home-content {
      flex-direction: column !important;
      align-items: flex-start;
   }

   .home-content .text-left,
   .home-content .text-right,
   .home-content .image-left,
   .home-content .image-right {
      width: 100%;
      margin: 0 auto;
   }
   .home-content .image-left,
   .home-content .image-right {
      text-align: center;
   }
   .footer {
      padding: 40px;
   }
   .badge {
      width: 90px;
   }
}

/* iPad Mini portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 834px) {
   .header .menu-icon {
      margin-top: 1% !important;
   }
}

/* Devices smaller than 768px */
@media (max-width: 768px) {
   .header .logo img {
      height: 72px;
   }

   .header .menu-icon {
      margin-top: 3%;
   }

   .header ul {
      background-color: #fff;
   }

   .header ul li a {
      color: #000;
      padding: 0.5em 2em;
      font-size: 14px;
   }

   .header-overlay-text h1 {
      line-height: 50px;
   }

   .home {
      padding: 7%;
   }

   .home-content {
      flex-direction: column;
      align-items: center;
   }

   .home-content .text-left,
   .home-content .text-right,
   .home-content .image-left,
   .home-content .image-right {
      flex: none;
      width: 100%;
   }

   .home-image {
      max-width: 100%;
   }

   .about-us {
      padding: 20px 40px;
      text-align: left;
   }
   
   .resources-grid {
      grid-template-columns: 1fr;
      /* Single column layout on smaller screens */
      max-width: 90%;
      /* Allow more width on tablet/phone */
      margin: 0 auto;
   }

   .resource-item {
      padding: 14px;
      /* Slightly smaller padding on smaller screens */
   }

   .contact-grid {
      grid-template-columns: 1fr !important;
      gap: 0;
   }

   .contact-item-large.features {
      grid-column: span 1;
   }

   .contact-item-large.features .contact-item {
      grid-column: 1;
      place-self: center;
      width: 80%;
   }

   .footer {
      flex-direction: column;
      align-items: center;
      height: auto;
      padding: 20px;
   }

   .footer-column {
      flex: auto;
      padding: 0 5%;
      width: 100%;
      text-align: center;
   }

   .footer-column:nth-child(3) {
      margin-bottom: -35px;
      padding-right: 5%;
   }
}

@media screen and (max-width: 480px) {
   .overlay-text h1 {
      line-height: 50px;
   }

   .faq-item {
      width: 85%;
   }
}