.hero-wrapper {
    position: relative; /* Needed for absolutely positioned children (like the SVG and heading) */
    width: 100%;
    overflow: visible; /* Allow SVG to overflow and show on the next section */
	margin-bottom: 130px;
}
/* Background image area */
.hero-background {
    background-image: url('/_assets/images/hero-reduced.jpg'); /* Background image */
    background-size: cover;
    background-position: center;
    height: 50vh; /* Full screen height */
}
/* Dark overlay strip for logo */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.6); /* Transparent black overlay */
    z-index: 2;
}
/* Logo image inside the overlay */
.hero-logo {
    height: 70px; /* Scales well on mobile */
}

/* SVG */
.idea-svg-mobile {
  height: 500px;
  width: 100vw;      
  object-fit: cover;
  display: block;
  position: absolute;
  bottom: -160px;
  left: 0;
  z-index: 3;
  pointer-events: none;
}
/* Heading text that sits on top of the purple SVG */
.idea-heading {
    position: absolute;
    bottom: 8%; /* Adjust position above the lowest part of the SVG */
    left: 20px;
    z-index: 4;
    color: white;
}
/* Style for the headline text */
.idea-heading h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
}
/* Text section below the hero wrapper */
.text-content {
    font-size: 1rem;
    color: #333;
    padding: 100px;
}


/* Resize for Desktop */
@media (max-width: 992px) {
.idea-svg-desktop{
		display: none;
	}
}
/* Resize for Desktop */
@media (min-width: 992px) {
	.hero-wrapper {
    position: relative; /* Needed for absolutely positioned children (like the SVG and heading) */
    width: 100%;
    overflow: visible; /* Allow SVG to overflow and show on the next section */
	margin-bottom:  100px;
    }
	
.text-content {
    font-size: 1rem;
    color: #333;
	max-width: 100%;
}
	
.hero-background {
    background-image: url('/_assets/images/hero-image.jpeg');
    background-size: cover;              /* Fill the area */
    background-position: center top;     /* Show the top of the image */
    background-repeat: no-repeat;
    height: 70vh;                       /* Full screen height */
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;              /* Position overlay text/logo lower */
    justify-content: center;
}	
	
/* SVG */
.idea-svg-desktop {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: absolute;  
	bottom: -125px!important;
    left: 0;
    z-index: 3;
    pointer-events: none;
    display: block;
}	
	
.idea-svg-mobile{
	display: none;
}	
	
.idea-heading {
  position: absolute;
  top: calc(50% - 50px);
  left: 5%; /* Or 0 if you want flush-left */
  transform: translateY(-50%);
  z-index: 3; /* Make sure it stays above SVG */
  color: white; /* Or whatever fits your design */
}
	
	
.svg-container {
  position: relative;
  width: 100%;
}	
	
}

/* Resize for Desktop */
@media (min-width: 1500px) {
	.hero-wrapper {
    position: relative; /* Needed for absolutely positioned children (like the SVG and heading) */
    width: 100%;
    overflow: visible; /* Allow SVG to overflow and show on the next section */
	margin-bottom:  100px; /* Move Text Lower */
    }
	
.text-content {
    font-size: 1rem;
    color: #333;
	max-width:72%!important;
	
}
.hero-background {
    background-image: url('/_assets/images/hero-image.jpeg');
    background-size: cover;              /* Fill the area */
    background-position: center top;     /* Show the top of the image */
    background-repeat: no-repeat;
    height: 90vh;                       /* Full screen height */
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;              /* Position overlay text/logo lower */
    justify-content: center;
}	
	
/* SVG */
.idea-svg-desktop {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: absolute;  
	bottom: -100px!important;
    left: 0;
    z-index: 3;
    pointer-events: none;
    display: block;
}	
	
.idea-svg-mobile{
	display: none;
}	
	
.idea-heading {
  position: relative;  /* No longer absolute */
  transform: translateY(-100px); /* move up */
  top: auto;
  left: auto;
  z-index: 3;
  color: white;
  text-align: center;
  margin-left: 100px;
	
}
	
.idea-heading h1{
	font-size: 65px!important;
}
	
.svg-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;         /* Center vertically */
  height: auto;                /* Optional: give a fixed or dynamic height if needed */
}
}



/* Resize for Desktop */
@media (min-width: 2050px) {
	.hero-wrapper {
    position: relative; /* Needed for absolutely positioned children (like the SVG and heading) */
    width: 100%;
    overflow: visible; /* Allow SVG to overflow and show on the next section */
	margin-bottom:  100px; /* Move Text Lower */
    }
	
.text-content {
    font-size: 1rem;
    color: #333;
	max-width:62%!important;
	
}
.hero-background {
    background-image: url('/_assets/images/hero-image.jpeg');
    background-size: cover;              /* Fill the area */
    background-position: center top;     /* Show the top of the image */
    background-repeat: no-repeat;
    height: 90vh;                       /* Full screen height */
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;              /* Position overlay text/logo lower */
    justify-content: center;
}	
	
/* SVG */
.idea-svg-desktop {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: absolute;  
	bottom: -185px!important;
    left: 0;
    z-index: 3;
    pointer-events: none;
    display: block;
}	
	
.idea-svg-mobile{
	display: none;
}	
	
.idea-heading {
  position: relative;  /* No longer absolute */
  transform: translateY(-50px); /* move up */
  top: auto;
  left: auto;
  z-index: 3;
  color: white;
  text-align: center;
  margin-left: 100px;
	
}
	
.idea-heading h1{
	font-size: 65px!important;
}
	
.svg-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;         /* Center vertically */
  height: auto;                /* Optional: give a fixed or dynamic height if needed */
}
}