:root {
  --feature-section-height: 50px; /* Define the variable */
  --background-light-color: #ffffff;;

}


@media (prefers-color-scheme: dark) {
	:root {
		--background-light-color: #3a3a3a;
	}
}




.hero-section {

  background: url('/content/assets/images/heros/surfer-hires.jpg') no-repeat center center; /* 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/surfer-hires.jpg') no-repeat center center;
	background-size: cover;
  }
}

.section-title-background {
	display: inline-flex; /* Flexbox to allow vertical centering */
	justify-content: center; /* Horizontally centers content if necessary */
	align-items: center; /* Vertically centers the content */
	padding: 0 50px; /* Padding for left and right sides */
	color: var(--text-color); /* Text color */
	background: linear-gradient(
		115deg, /* Angles the gradient */
		transparent 22px, /* Start with transparent on the top left */
		var(--background-color) 10px, /* Color starts at 10px */
		var(--background-color) calc(100% - 22px), /* Continue color until near the bottom right */
		transparent calc(100% - 22px) /* Transparent for the bottom right angle */
	);
	position: relative;
	height: 50px;
	margin-left: 10%;
}

@media (max-width: 768px) {
  .section-title-background {
	margin-left: 7%;
  }
}


/* Sections that include name of feature are deprecated, use colors */
.organization-section {
	background: linear-gradient(
		115deg,
		var(--igg-dark-blue) 0%,  
		var(--igg-dark-blue) 66%, 
		var(--igg-dark-blue) 66%,
		var(--igg-dark-blue) 66%,
		var(--igg-orange) 66%,
		var(--igg-orange) 100%
	);
	height: var(--feature-section-height);
}

.blue-orange-section {
	background: linear-gradient(
		115deg,
		var(--igg-dark-blue) 0%,  
		var(--igg-dark-blue) 66%, 
		var(--igg-dark-blue) 66%,
		var(--igg-dark-blue) 66%,
		var(--igg-orange) 66%,
		var(--igg-orange) 100%
	);
	height: var(--feature-section-height);
}

.budget-section {
	background: linear-gradient(
		115deg,
		var(--igg-light-blue) 0%,  
		var(--igg-light-blue) 66%, 
		var(--igg-light-blue) 66%,
		var(--igg-light-blue) 66%,
		var(--igg-dark-blue) 66%,
		var(--igg-dark-blue) 100%
	);
	height: var(--feature-section-height);
}

.light-blue-dark-blue-section {
	background: linear-gradient(
		115deg,
		var(--igg-light-blue) 0%,  
		var(--igg-light-blue) 66%, 
		var(--igg-light-blue) 66%,
		var(--igg-light-blue) 66%,
		var(--igg-dark-blue) 66%,
		var(--igg-dark-blue) 100%
	);
	height: var(--feature-section-height);
}

.report-section {
	background: linear-gradient(
		115deg,
		var(--igg-orange) 0%,  
		var(--igg-orange) 66%, 
		var(--igg-orange) 66%,
		var(--igg-orange) 66%,
		var(--igg-black) 66%,
		var(--igg-black) 100%
	);
	height: var(--feature-section-height);
}
.orange-black-section {
	background: linear-gradient(
		115deg,
		var(--igg-orange) 0%,  
		var(--igg-orange) 66%, 
		var(--igg-orange) 66%,
		var(--igg-orange) 66%,
		var(--igg-black) 66%,
		var(--igg-black) 100%
	);
	height: var(--feature-section-height);
}


.investment-section {
	background: linear-gradient(
		115deg,
		var(--igg-dark-blue) 0%,  
		var(--igg-dark-blue) 66%, 
		var(--igg-dark-blue) 66%,
		var(--igg-dark-blue) 66%,
		var(--igg-light-blue) 66%,
		var(--igg-light-blue) 100%
	);
	height: var(--feature-section-height);
}

.dark-blue-light-blue-section {
	background: linear-gradient(
		115deg,
		var(--igg-dark-blue) 0%,  
		var(--igg-dark-blue) 66%, 
		var(--igg-dark-blue) 66%,
		var(--igg-dark-blue) 66%,
		var(--igg-light-blue) 66%,
		var(--igg-light-blue) 100%
	);
	height: var(--feature-section-height);
}

.goal-section {
	background: linear-gradient(
		115deg,
		var(--igg-black) 0%,  
		var(--igg-black) 66%, 
		var(--igg-black) 66%,
		var(--igg-black) 66%,
		var(--igg-green) 66%,
		var(--igg-green) 100%
	);
	height: var(--feature-section-height);
}
.black-green-section {
	background: linear-gradient(
		115deg,
		var(--igg-black) 0%,  
		var(--igg-black) 66%, 
		var(--igg-black) 66%,
		var(--igg-black) 66%,
		var(--igg-green) 66%,
		var(--igg-green) 100%
	);
	height: var(--feature-section-height);
}



.real-estate-section {
	background: linear-gradient(
		115deg,
		var(--igg-light-blue) 0%,  
		var(--igg-light-blue) 66%, 
		var(--igg-light-blue) 66%,
		var(--igg-light-blue) 66%,
		var(--igg-orange) 66%,
		var(--igg-orange) 100%
	);
	height: var(--feature-section-height);
}
.light-blue-orange-section {
	background: linear-gradient(
		115deg,
		var(--igg-light-blue) 0%,  
		var(--igg-light-blue) 66%, 
		var(--igg-light-blue) 66%,
		var(--igg-light-blue) 66%,
		var(--igg-orange) 66%,
		var(--igg-orange) 100%
	);
	height: var(--feature-section-height);
}

.cryptocurrency-section {
	background: linear-gradient(
		115deg,
		var(--igg-dark-gray) 0%,  
		var(--igg-dark-gray) 66%, 
		var(--igg-dark-gray) 66%,
		var(--igg-dark-gray) 66%,
		var(--igg-black) 66%,
		var(--igg-black) 100%
	);
	height: var(--feature-section-height);
}
.dark-gray-black-section {
	background: linear-gradient(
		115deg,
		var(--igg-dark-gray) 0%,  
		var(--igg-dark-gray) 66%, 
		var(--igg-dark-gray) 66%,
		var(--igg-dark-gray) 66%,
		var(--igg-black) 66%,
		var(--igg-black) 100%
	);
	height: var(--feature-section-height);
}

.currency-section {
	background: linear-gradient(
		115deg,
		var(--igg-green) 0%,  
		var(--igg-green) 66%, 
		var(--igg-green) 66%,
		var(--igg-green) 66%,
		var(--igg-dark-blue) 66%,
		var(--igg-dark-blue) 100%
	);
	height: var(--feature-section-height);
}
.green-dark-blue-section {
	background: linear-gradient(
		115deg,
		var(--igg-green) 0%,  
		var(--igg-green) 66%, 
		var(--igg-green) 66%,
		var(--igg-green) 66%,
		var(--igg-dark-blue) 66%,
		var(--igg-dark-blue) 100%
	);
	height: var(--feature-section-height);
}

.cloud-sync-section {
	background: linear-gradient(
		115deg,
		var(--igg-dark-gray) 0%,  
		var(--igg-dark-gray) 66%, 
		var(--igg-dark-gray) 66%,
		var(--igg-dark-gray) 66%,
		var(--igg-light-blue) 66%,
		var(--igg-light-blue) 100%
	);
	height: var(--feature-section-height);
}
.dark-gray-light-blue-section {
	background: linear-gradient(
		115deg,
		var(--igg-dark-gray) 0%,  
		var(--igg-dark-gray) 66%, 
		var(--igg-dark-gray) 66%,
		var(--igg-dark-gray) 66%,
		var(--igg-light-blue) 66%,
		var(--igg-light-blue) 100%
	);
	height: var(--feature-section-height);
}

.bank-connections-section {
	background: linear-gradient(
		115deg,
		var(--igg-green) 0%,  
		var(--igg-green) 66%, 
		var(--igg-green) 66%,
		var(--igg-green) 66%,
		var(--igg-black) 66%,
		var(--igg-black) 100%
	);
	height: var(--feature-section-height);
}
.green-black-section {
	background: linear-gradient(
		115deg,
		var(--igg-green) 0%,  
		var(--igg-green) 66%, 
		var(--igg-green) 66%,
		var(--igg-green) 66%,
		var(--igg-black) 66%,
		var(--igg-black) 100%
	);
	height: var(--feature-section-height);
}


/* Style the button to appear as just text */
.toggle-btn {
	display: flex;
	align-items: center;
	cursor: pointer;
	background-color: transparent;
	border: none;
	padding: 0;
	color: inherit;
	font-size: 1.25rem;
	color: var(--igg-dark-blue); 
}

.toggle-btn:focus {
	outline: none;
}

.toggle-btn i {
	transition: transform 0.3s ease;
	
}

.toggle-btn i.rotate {
	transform: rotate(180deg);
}

.feature-badge {
	width: 124px;
}

.video-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%; //wrapper is full width
}

video {
	display: block;
	border: 3px solid #ccc; /* Adds a border around the video */
	border-radius: 10px; /* Rounds the corners of the border */
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
	background-color: #f8f9fa; /* Optional: a light background color */
	max-width: 75%; /* Ensures it doesn’t overflow the parent */
	height: auto; /* Maintain aspect ratio */
}





.masthead {
	min-height: 400px !important;
	height: auto !important;
}

.igg-striped-divider-01 {
    height: 8px;
	background: var(--Blue---Red, linear-gradient(180deg, #009AFA 0%, #004EB6 51.5%, #FF5E58 100%));
}

.igg-striped-divider-blackfriday {
    height: 8px;
	background: var(--Blue---Red, linear-gradient(180deg, #1b7260 0%, #11352d 51.5%, #282828 100%));
}

.igg-striped-divider-holiday {
    height: 8px;
	background: var(--Blue---Red, linear-gradient(180deg, #1c806b 0%, #b15050 51.5%, #FF5E58 100%));
}

.igg-striped-divider-newyear {
    height: 8px;
	background: var(--Blue---Red, linear-gradient(180deg, #004EB6 0%, #3977C9 51.5%, #004EB6 100%));
}


.budget-vertical-center {
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.budget-feature-title {
	font-size: 2rem;
	line-height: 110%;
	font-weight: 600;
}

.budget-section-01-bg {
 background: var(--background-color);
}

.budget-section-02-bg {
	 background: var(--background-color);
}

.carousel-inner .item img { /* For Bootstrap 3 */
        margin: 0 auto;
        display: block; /* Important for margin auto to work on images */
    }

.carousel-inner img { /* For Bootstrap 4+ */
        margin: 0 auto;
        display: block;
}

.people-wrapper {
	border: solid 2px #D2D2D2;
    border-radius: 10px;
}

.budget-people>img {
border-radius: 50%;
border: 4px solid #4DAAD5;
}

.budget-comment {
	font-size: 1rem;
	line-height: 110%;
}

.budget-personname {
	font-size: 1rem;
	line-height: 110%;
	font-style: italic;
	color: #a5a5a5;
}

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

.review-stars>i{
	margin-right: 3px;
}

.review-stars>i:last-child{
	margin-right: 0px;
}

.review-subtitle {
	font-weight: bold;
	color: var(--igg-muted-text);
}

.review-person{
	font-weight: normal;
	color: #686868;
}

.card-text {
line-height: 120%;
color: var(--igg-muted-text);
}

.budget-left-icon{
	font-size: 60px;
	display: table-cell;
    vertical-align: top;
    padding-right: 10px;
	color: #185EBC;
	line-height: 100%;
}

.budget-right-text {
	display: table-cell;
    vertical-align: middle;
	color: #635E5E;
}

.budget-right-text > span {
	font-weight: bold;
}

.card {
        background-color: var(--background-light-color);
    }


.masthead-dgreen-black-lgreen {
  background: linear-gradient(
		70deg,
		var(--igg-green),
		var(--igg-black),
		var(--igg-green));
  }


  .masthead-dgreen-black-lorange {
  background: linear-gradient(
		70deg,
		var(--igg-green),
		var(--igg-black),
		var(--igg-orange));
  }


.btn-lg {
	border-radius: 2000px;
	padding: 16px 16px 16px 16px;
}

.promotion-expiration {
	font-size: 12px;
}

.disclaimer {
	font-size: 12px;
	color: #686868;
}