/* Basic Reset */
body, h1, h2, p, ul, li {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

body {
 font-family: sans-serif;
 line-height: 1.6;
 color: #333;
}

/* ... (other CSS rules remain the same) ... */

/* Header Styling */
#mainHeader {
  background-color: transparent;
  padding: 0; /* No extra spacing around the banner */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: none; /* No fade on scroll anymore */
}

/*#mainHeader.scrolled {
 background-color: black;
 /* Ensure no image is lingering if there was a previous rule */
 /*background-image: none;
}*/

/*.header-content {
 display: flex;
 justify-content: space-between;
 align-items: center;
 max-width: 1200px;
 margin: 0 auto;
}*/

.header-content {
  position: relative; /* Needed for absolutely positioned Shop button */
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-content .logo {
 font-size: 1.5em;
}

.header-content .button {
 background-color: white;
 color: black;
 padding: 10px 20px;
 border-radius: 20px;
 text-decoration: none;
 font-weight: bold;
}

.header-logo {
  width: 100%; /* Full-width banner */
  max-height: 100px; /* Adjust as needed, was 150px */
  object-fit: contain;
  display: block;
}

.shop-overlay {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 101;
  background-color: white;
  color: black;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Hero Section Styling */
#hero {
 background-image: url('images/image_01.jpg'); /* THIS SECTION NOW HOLDS THE MAIN BACKGROUND IMAGE */
 background-size: cover;
 background-position: center;
 color: white; /* was white */
 display: flex;
 justify-content: flex-start; /* Align content to the left */
 align-items: center;
 /* Adjust padding-top to make space for the fixed header's content.
    The exact value might need tweaking based on your header's height.
    Initial thought: header padding (20px top + 20px bottom) + logo/button height.
    Let's start with a value and you can adjust.
    Consider that the text for section 2 should start BELOW the header.
    The height of your header is roughly 20px padding + line height of h1 + 20px padding.
    Let's try adding a bit more than the header's height.
 */
 padding: 150px 20px 100px; /* You might need to increase the top padding */
 /* Alternatively, if you want the hero text to start truly at the top *under* the transparent header,
    you could remove extra top padding here and position hero-content with margin-top,
    but having the background image defined here and header transparent is the key.
    The existing padding might actually be fine as it pushes the content down.
 */
	
	padding-top: 160px; /* Adjust depending on logo height */
}

.full-screen {
 min-height: 100vh; /* Ensure it covers the viewport height */
}


.hero-content {
 max-width: 600px;
 /* If the header is transparent, this content will appear under it.
    Add a margin-top to push it below the header content.
    Estimate header height: padding (20px*2) + font size of h1 (approx 24px if 1.5em)
    ~64px. Add some buffer.
 */
 /* margin-top: 80px; */ /* Let's test without this first as padding on #hero might be enough */
}


/* ... (rest of your style.css remains the same) ... */
.hero-title {
 font-size: 2.5em;
 margin-bottom: 20px;
}

.hero-subtitle {
 font-size: 1.1em;
 line-height: 1.8;
 margin-bottom: 30px;
}

/* Button Styling */
.button {
 display: inline-block;
 background-color: white;
 color: black;
 padding: 10px 20px;
 border-radius: 20px;
 text-decoration: none;
 font-weight: bold;
}

.button.outlined {
 background-color: transparent;
 color: black;
 border: 2px solid black;
}

/* Image Grid Styling */
#imageGrid {
 padding: 0;
 overflow: hidden; /* To contain floated images */
}

.image-grid-container {
 overflow: hidden; /* For slideshow overlay */
 position: relative;
}

.image-grid {
 display: flex;
 flex-wrap: wrap;
}

.image-grid img {
 width: 50%;
 height: auto;
 display: block; /* Remove extra space below inline images */
 cursor: pointer;
}

/* Slideshow Overlay */
#slideshowOverlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 z-index: 101;
}

.close-button {
 color: #fff;
 position: absolute;
 top: 20px;
 right: 30px;
 font-size: 3em;
 font-weight: bold;
 cursor: pointer;
 z-index: 102;
}

.slideshow-container {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 90%;
 max-height: 90%;
 display: flex;
 align-items: center;
 justify-content: center;
}

#slideshowImage {
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;}

/* Next & previous buttons */
.prev, .next {
 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 padding: 16px;
 margin-top: -22px;
 color: white;
 font-weight: bold;
 font-size: 1.5em;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;
}

/* Position the "next button" to the right */
.next {
 right: 0;
 border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
 background-color: rgba(0, 0, 0, 0.8);
}

.mega-bg-container {
  background-image: url('images/image_06.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* optional parallax effect */
  background-repeat: no-repeat;
}


.section-inner {
  padding: 50px 10px; /* Spacing between oval boxes */
  background-color: rgba(0, 0, 0, 0.1); /* Optional: add dark overlay per section was: rgba(0, 0, 0, 0.4)*/
  color: white;
}
 /* Override .white-bg in section 7 if needed */
  .section-inner.white-bg { 
  background-color: transparent;   /* Override white */
}

/* Optional: Add dark overlay across all 4 sections */
/*.mega-bg-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}
.mega-bg-container {
  position: relative;
  z-index: 1;
}
.section-inner {
  position: relative;
  z-index: 2;
}*/


/* Text with Background Image Sections */
.text-with-bg {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 50px 20px;  /* Was 100px 20px */
  background-color: #B5B1B1; /* Optional global bg was: #7B7272 */
  color: white;
  gap: 40px;
}

.oval-bg-container {
  flex: 1 1 100%;
  height: 300px;
  background-color: #fff; /* Was #fff */
  background-size: cover;
  background-position: center;
  border: 6px solid #333;
  border-radius: 150% / 30%; /* Was 50 /30 */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20; /* Height of oval boxes */
  text-align: center;
}

.oval-text {
  position: relative;
  color: white;
  z-index: 2;
  max-width: 80%;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7); /* For contrast */
}

.oval-text h2,
.oval-text p {
  margin: 0 0 10px;
}

/* Semi-transparent dark overlay inside the oval to boost contrast */
.oval-bg-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.section-bg-006 {
  background-image: url('images/image_06.jpg');
  background-size: cover;
  background-position: center;
}





.bg-image-006 {
 background-image: url('images/image_10.jpg');
}

.bg-image-007 {
 background-image: url('images/image_07.jpg');
}

.bg-image-008 {
 background-image: url('images/image_08.jpg');
}

.text-container {
 max-width: 50%;
 padding: 20px;
}

.left-align {
 text-align: left;
}

.right-align {
 text-align: right;
}

.section-title {
 font-size: 2em;
 margin-bottom: 20px;
}

/* White Background Section */
.white-bg {
 background-color: white;
 padding: 100px 20px;
 text-align: center;
}

.centered {
 max-width: 800px;
 margin: 0 auto;
}

.black-text {

 color: black;
}

/* Footer Styling */
#mainFooter {
 background-color: #f5f5dc; /* Beige */
 color: #333;
 padding: 30px 20px;
 text-align: center;
}

.footer-content p:first-child {
 font-weight: bold;
 margin-bottom: 5px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
 .text-with-bg {
  flex-direction: column;
  text-align: center;
 }

	
 .oval-bg-container {
    width: 100%;
    height: 250px;
  }	
	
	
	
	
 .text-container {
  max-width: 100%;
  text-align: center !important;
  margin-bottom: 30px;
 }

 .image-grid img {
  width: 100%;
 }

 .header-content {
  flex-direction: column;
  align-items: flex-start;
 }

 .header-content .button {
  margin-top: 10px;
 }

 .hero {
  padding-top: 120px;
  align-items: flex-start;
 }
}