.hero-section {

  background: url('/content/assets/images/heros/man_on_overlander_hires.jpg') no-repeat center top; /* Hero background image */
  background-size: cover; /* Ensure the image covers the entire section */
}


/* Dark mode gradient overlay */
@media (prefers-color-scheme: dark) {
  .hero-section {
    background: 
      linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), 
      url('/content/assets/images/heros/man_on_overlander_hires.jpg') no-repeat center top;
    background-size: cover;
  }
}

/* ACCOLADES SECTION */

.accolades {
  background-color: var(--igg-gray);
}

.accolades img {
  height: 45px;
}

#time-tested-method h2 {
  color: var(--igg-dark-blue);
}

.homepage-section {
  
	height: 500px; /* Adjust the height as needed */
    overflow: hidden; /* Ensure overflow is hidden to clip the image */
    position: relative; /* Needed for positioning child elements */
}


.homepage-section img.image-offset {
    position: absolute;
    top: 25%; /* Offset the image from the top */
    left: 10%;
    width: 40%; /* Set image width to make it scale dynamically */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image scales correctly */
}

.homepage-section img.image-offset-rt {
    position: absolute;
    top: 25%; /* Offset the image from the top */
    right: 10%;
    width: 40%; /* Set image width to make it scale dynamically */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image scales correctly */
}




.homepage-section img.landscape-image {
    position: absolute;
    top: 25%; /* Offset the image from the top */
    left: 5%;
    width: 50%; /* Set image width to make it scale dynamically */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image scales correctly */
}

.homepage-section img.landscape-image-rt {
    position: absolute;
    top: 25%; /* Offset the image from the top */
    right: 5%;
    width: 50%; /* Set image width to make it scale dynamically */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image scales correctly */
}

.homepage-section-primary-content {
  z-index: 10; 
}

.small-callout {
  font-size: 1.0rem !important;
  color: var(--igg-muted-text) !important;
}

.sup {
  vertical-align: super;
  font-size: smaller;
}

/*This is only for when we have headlines that might bleed onto the guy standing on the vehicle. Remove this when we don't need it anymore*/
@media (min-width: 1200px)  {
  .hero-text h1 {
    font-size: 3.65rem;
  }
}

@media (max-width: 768px) {
  /* For small screens */
  .homepage-section {
    height: auto; /* Adjust height automatically on small screens */
    max-height: 500px;
    padding-top: 20px; /* Add space at the top */
    padding-bottom: 20px;
  }

  .homepage-section img.image-offset {
    position: relative;
    top: auto;
    left: auto;
    width: 80%;
  }
  
  .homepage-section img.image-offset-rt {
    position: relative;
    top: auto;
    right: auto;
    width: 80%;
  }
  
  .homepage-section img.landscape-image {
      position: relative;
      top: auto;
      right: auto;
      width: 100%;
  }
  
  .homepage-section img.landscape-image-rt {
      position: relative;
      top: auto;
      right: auto;
      width: 100%;
  }
}

.igg-solid-blue {
  background: var(--igg-dark-blue);
}



.igg-big-blue {
  background: 
    linear-gradient(
      115deg,
      var(--igg-dark-blue) 0%, 
      var(--igg-dark-blue) 85%, /* Adjust this percentage for how far the color should stretch */
      var(--igg-dark-blue-offset) 85%
    );
      
}

.igg-big-green {
	
	background: linear-gradient(
		115deg,
		var(--igg-light-green) 15%, 
		var(--igg-green) 15%, /* Adjust this percentage for how far the color should stretch */
		var(--igg-green) 100%
	);
}

.igg-big-orange {
 
  background: linear-gradient(
    115deg,
    var(--igg-orange) 0%, 
    var(--igg-orange) 85%, /* Adjust this percentage for how far the color should stretch */
    var(--igg-orange-offset) 85%
  );
}

.igg-big-light-blue {
 
  background: linear-gradient(
    115deg,
    var(--igg-light-blue-offset) 15%, 
    var(--igg-light-blue) 15%, /* Adjust this percentage for how far the color should stretch */
    var(--igg-light-blue) 100%
  );
}