/* Custom Banner Image Styles for Newport Way */

/* ===== BANNER SIZE CUSTOMIZATION ===== */

.headerImage {
  /* HEIGHT OPTIONS - Choose one: */
  
  /* Option 1: Viewport-based height (current default) */
  min-height: 30vh;  /* 50% of viewport height */
  
  /* Option 2: Fixed height */
  /* min-height: 400px; */
  
  /* Option 3: Larger viewport height */
  /* min-height: 70vh; */
  
  /* Option 4: Smaller viewport height */
  /* min-height: 30vh; */
  
  /* Option 5: Full viewport height */
  /* min-height: 100vh; */
  
  /* Removed opacity - using dark overlay instead for better contrast */
}

/* ===== IMAGE POSITION CUSTOMIZATION ===== */

.headerImage {
  /* BACKGROUND SIZE OPTIONS - Choose one: */
  
  /* Option 1: Cover (current default) - fills entire area, may crop */
  background-size: cover;
  
  /* Option 2: Contain - shows entire image, may have empty space */
  /* background-size: contain; */
  
  /* Option 3: Custom size */
  /* background-size: 100% auto; */
  
  /* BACKGROUND POSITION OPTIONS - Choose one: */
  
  /* Option 1: Center (current default) */
  background-position: center center;
  
  /* Option 2: Top center - shows top of image */
  /* background-position: center top; */
  
  /* Option 3: Bottom center - shows bottom of image */
  /* background-position: center bottom; */ 
  
  /* Option 4: Left center - shows left side of image */
  /* background-position: left center; */
  
  /* Option 5: Right center - shows right side of image */
  /* background-position: right center; */
  
  /* Option 6: Custom position (X% Y%) */
  /* background-position: 25% 30%; */
  
  /* Option 7: Top left corner */
  /* background-position: left top; */
  
  /* Option 8: Bottom right corner */
  /* background-position: right bottom; */
}

/* ===== RESPONSIVE BANNER SIZES ===== */

/* Mobile devices (up to 768px) */
@media (max-width: 768px) {
  .headerImage {
    min-height: 40vh;  /* Smaller on mobile */
    background-position: center center;
  }
}

/* Tablet devices (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .headerImage {
    min-height: 45vh;  /* Medium size on tablets */
  }
}

/* Desktop devices (1025px and up) */
@media (min-width: 1025px) {
  .headerImage {
    min-height: 55vh;  /* Larger on desktop */
  }
}

/* ===== COLOR OVERLAY CUSTOMIZATION ===== */

.color-overlay {
  /* OVERLAY OPACITY OPTIONS - Choose one: */
  
  /* Option 1: Light overlay (current default) */
  /* background-color: rgba(0, 0, 0, 0.2); */
  
  /* Option 2: Darker overlay for better text readability */
  background-color: rgba(0, 0, 0, 0.3);
}

/* Page-specific overlay adjustments */
.services .color-overlay {
  background-color: rgba(0, 0, 0, 0.25);  /* Lighter overlay for services page */
  
  /* Option 3: Very dark overlay */
  /* background-color: rgba(0, 0, 0, 0.7); */
  
  /* Option 4: No overlay */
  /* background-color: transparent; */
  
  /* Option 5: Colored overlay (blue tint) */
  /* background-color: rgba(30, 64, 175, 0.3); */
  
  /* Option 6: Gradient overlay */
  /* background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); */
}

/* ===== TEXT POSITIONING ===== */

.color-overlay {
  /* TEXT ALIGNMENT OPTIONS - Choose one: */
  
  /* Option 1: Center (current default) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Option 2: Bottom center */
  /* display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 50px; */
  
  /* Option 3: Top center */
  /* display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 50px; */
  
  /* Option 4: Left center */
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 50px; */
}

/* ===== BANNER HEIGHT PRESETS ===== */

/* Uncomment one of these presets for quick setup: */

/* PRESET 1: Large Hero Banner */
/*
.headerImage {
  min-height: 70vh;
  background-position: center center;
}
@media (max-width: 768px) {
  .headerImage { min-height: 50vh; }
}
*/

/* PRESET 2: Compact Banner */
/*
.headerImage {
  min-height: 30vh;
  background-position: center center;
}
@media (max-width: 768px) {
  .headerImage { min-height: 25vh; }
}
*/

/* PRESET 3: Full Screen Banner */
/*
.headerImage {
  min-height: 100vh;
  background-position: center center;
}
@media (max-width: 768px) {
  .headerImage { min-height: 70vh; }
}
*/

/* PRESET 4: Real Estate Optimized */
/*
.headerImage {
  min-height: 60vh;
  background-position: center 30%;  /* Show more of the building/property */
  background-size: cover;
}
.color-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(30,64,175,0.4) 100%);
}
@media (max-width: 768px) {
  .headerImage { 
    min-height: 45vh;
    background-position: center center;
  }
}
*/