@charset "UTF-8";
/* CSS Document */

/* References:
Eagle green: #425123;
Eagle gold: #cca32d;
*/

/* fix Bootstrap's sometimes weird side scroll thing */
body {
    overflow-x: hidden;
}

/* ============== */
/* Default Colors */
/* ============== */

.green {
	color: #425123;
}

.gold {
	color: #cca32d;
}

.gray {
	color: #808080;
}

.white {
	color: #ffffff;
}

/* ============ */
/* Font Related */
/* ============ */

.font-roboto-slab-light {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.font-roboto-slab-regular {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-roboto-slab-bold {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.font-pt-serif-regular {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.font-pt-serif-bold {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.font-pt-serif-regular-italic {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.font-pt-serif-bold-italic {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-style: italic;
}

.font-headline {
	font-size: 3.8rem; /* was 4.29rem */
}

.font-subhead {
	font-size: 1.5rem;
}

.font-in-between {
	font-size: 3rem;
}

.font-body {
	font-size: 1.15rem;
}

.font-nav {
	font-size: 1.05rem;
}

.font-footer {
	font-size: .85rem;
}

.font-legal {
	font-size: .75rem;
}

.loose-leading {
	line-height: 1.8rem;
}

/* ========== */
/* Nav Styles */
/* ========== */

.nav-padding {
    padding-left: 30px;
    padding-right: 30px;
	padding-top: 10px;
  }

/* =============== */
/* Carousel Styles */
/* =============== */

/* Push the image carousel and / or hero image down the page so the header and nav don't block it */
.carousel-hero-image-top-margin {
	margin-top: 121px;
}

.carousel-padding {
    padding-left: 30px;
    padding-right: 30px;
  }


/* =========== */
/* Misc Styles */
/* =========== */

.soft-close-shadow {
	box-shadow: 4px 5px 10px 1px #808080;
}

/* for the Lambo Bull */
.parallax-image {
  position: relative;
  z-index: 10; /* Hover above elements below */
  margin-bottom: -100px; /* Overlap below content by 100px to make up for the extra spacing around things */
  transition: transform 0.1s ease-out; /* Smooth movement */
}

/* for the build yours button */
.parallax-small {
  position: relative; /* important so transform works in place */
  z-index: 5;         /* above flood content */
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* For the golf course background image */
.flood-image {
  position: relative;
  overflow: hidden;
  padding-bottom: 60px; /* More room under the text */
}

.flood-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* Make background taller so the parallax has room to move */
  background-image: url('../images/bg-course.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* Back to cover — but the height buffer prevents distortion */
  z-index: 1;
  pointer-events: none;
}

.flood-content {
  position: relative;
  z-index: 2;
}

.bg-hex {
  background-image: url('../images/bg-hexagons.webp');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 300px; /* optional */
}

/* Change focus outline/glow for navbar dropdowns to gold */
.navbar .dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(204, 163, 45, 0.5); /* #cca32d at 50% opacity */
    outline: none; /* remove default browser outline */
}

/* Highlight dropdown menu items with 50% gold on hover/focus */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: rgba(204, 163, 45, 0.2); /* gold at 50% opacity */
    color: #000; /* optional: ensures text remains readable */
}

/* carousel similar padding for other areas */
.carousel-like-padding {
    padding: 30px;
  }

.advantage-block {
    border-left: 1px solid #ffffff;
    padding-left: 20px;
  }

.sep-line {
	border-bottom: 1px solid #000;
}

/* Highlight item border */
.highlight-item {
  border: 1px solid black;
  border-radius: 0.75rem; /* rounded-3 */
  overflow: hidden;
}

/* Left text background */
.highlight-text {
  background-color: #dfdfdf;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  height: 100%;
}

.gray-background {
  background-color: #dfdfdf;
}

/* Right "Build Yours" block */
.highlight-build {
  background-color: #425123;
  color: #ffffff;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto Slab', serif;
  font-size: 1rem;
  font-weight: 400;
  height: 100%;
  text-decoration: none; /* remove default link underline */
  transition: background-color 0.3s ease; /* smooth hover transition */
}

/* Hover effect: slightly lighten green */
.highlight-build:hover {
  background-color: #566b37; /* slightly lighter green */
  color: #ffffff; /* keep text white */
}


/* Styles for screens under 1200px */
@media screen and (max-width: 1200px) {
	.font-headline {
	font-size: 3.0rem;
}

.font-subhead {
	font-size: 1.25rem;
}

.font-in-between {
	font-size: 2rem;
}

.font-body {
	font-size: 1.0rem;
}
}



/* Styles for screens under 990px */
@media screen and (max-width: 990px) {
	.font-headline {
	font-size: 2.25rem;
}

.font-subhead {
	font-size: 1.0rem;
}

.font-in-between {
	font-size: 1.5rem;
}

.font-body {
	font-size: 1.0rem;
}
	
/* Adjust the size of the bull on the homepage when on md and smaller devices */	
.parallax-md-disabled {
    max-width: 50%;
	float: right;
  }

 /* Disable parallax effect on md and smaller */
 .parallax-md-disabled.parallax-image {
    transform: none !important;
  }
	
/* Fix the "build yours" button for md an smaller screens */
.build-btn-md {
    max-width: 50% !important; /* Shrinks button to ~50% */
  }

  /* 2. Reduce gap between text and button */
  .flood-content .col-md-5 {
    margin-top: 20px; /* collapses spacing from large gap */
  }

  /* 3. Remove vertical white line next to "Our Advantage" */
  .advantage-block {
    border-left: none !important;
    padding-left: 0 !important;
  }
	
.flood-background.static-bg {
    background-position: center top !important;
    background-size: cover; /* keep looking nice */
    height: 100% !important; /* prevent huge tall container */
  }

  .flood-image {
    padding-bottom: 40px; /* optional tweak */
  }
	
    .carousel-like-padding {
    padding-bottom: 10px !important;
  }
}

/* Styles for screens under 768px */
@media screen and (max-width: 768px) {
/* Push the image carousel and / or hero image down the page so the header and nav don't block it */
.carousel-hero-image-top-margin {
	margin-top: 135px;
	}
}

/* ---- MR1 IMAGE SIZING ---- */
@media (min-width: 576px) and (max-width: 768px) {
  img.mr1-image {
    max-width: 70% !important;
	display: block;       /* necessary for margin auto */
    margin-left: auto;
    margin-right: auto;
  }
}

/* Styles for screens under 576px */
@media screen and (max-width: 576px) {
/* Push the image carousel and / or hero image down the page so the header and nav don't block it */
.carousel-hero-image-top-margin {
	margin-top: 150px;
	}
	
/* Heavy up the body font for mobile - it's too hard to read */
.font-roboto-slab-light {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}	
}