:root {
	--background-color: #ffffff;
	--text-color: #000000;
	--primary-color: #007bff;
	--secondary-color: #6c757d;
	--accent-color: #17a2b8;
	--success-color: #28a745;
	--warning-color: #ffc107;
	--danger-color: #dc3545;
	--info-color: #17a2b8;
	--light-color: #f8f9fa;
	--dark-color: #343a40;
	
	--muted-color: #6c757d; /* Default muted color in light mode */
	
	
	--igg-dark-blue: color(display-p3 0.122 0.301 0.69);
	--igg-dark-blue-offset: color(display-p3 0.259 0.435 0.749);
	--igg-light-blue: color(display-p3 0.266 0.595 0.949);
	--igg-light-blue-offset: color(display-p3 0.348 0.67 0.961);
	--igg-green:color(display-p3 0.322 0.663 0.569);
	--igg-light-green:color(display-p3 0.435 0.769 0.718);
	--igg-orange:color(display-p3 0.925 0.412 0.365);
	--igg-orange-offset:color(display-p3 0.925 0.518 0.486);
	--igg-gray:color(display-p3 0.878 0.898 0.898);
	--igg-gray-offset:color(display-p3 0.94 0.945 0.945);
	
	--igg-dark-gray:color(display-p3 0.384 0.384 0.384);
	--igg-black:color(display-p3 0.006 0.006 0.006);
	--igg-light-text:color(display-p3 0.988 0.984 0.984);
	--igg-light-text-hover:color(display-p3 0.935 0.929 0.929);
	
	--igg-muted-text: color(display-p3 0.39 0.389 0.389);
	
	--igg-navbar-menu-item-selection-color: color(display-p3 0.909 0.911 0.914);
	
	--carousel-indicator-color: rgba(0, 0, 0, 0.5); /* Default for light mode */
	--carousel-indicator-active-color: rgba(0, 0, 0, 1); /* Active indicator in light mode */
}

/* Define the dark mode color palette */
@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #121212;
		--text-color: #ffffff;
		--primary-color: #1a73e8;
		--secondary-color: #b0b0b0;
		--accent-color: #00bcd4;
		--success-color: #34a853;
		--warning-color: #ffb300;
		--danger-color: #ea4335;
		--info-color: #00bcd4;
		--light-color: #6c757d;
		--dark-color: #f8f9fa;
		
		--muted-color: #aab0b6;  /* Muted color in dark mode */
		
		/*These need to be updated for dark mode?*/
		--igg-dark-blue: color(display-p3 0.215 0.441 0.931);
		--igg-dark-blue-offset: color(display-p3 0.259 0.435 0.749);
		--igg-light-blue: color(display-p3 0.071 0.399 0.752);
		--igg-light-blue-offset: color(display-p3 0.062 0.45 0.8);
		--igg-green:color(display-p3 0.322 0.663 0.569);
		--igg-light-green:color(display-p3 0.435 0.769 0.718);
		--igg-orange:color(display-p3 0.929 0.479 0.467);
		--igg-orange-offset:color(display-p3 0.929 0.518 0.49);
		--igg-gray:color(display-p3 0.34 0.336 0.336);
		--igg-gray-offset:color(display-p3 0.284 0.277 0.284);
		
		--igg-dark-gray:color(display-p3 0.384 0.384 0.384);
		--igg-black:color(display-p3 0.006 0.006 0.006);
		--igg-light-text:color(display-p3 1 0.987 0.987);
		--igg-light-text-hover:color(display-p3 0.935 0.929 0.929);
		
		--igg-muted-text: color(display-p3 0.796 0.796 0.796);
		--igg-navbar-menu-item-selection-color: color(display-p3 0.047 0.047 0.047);
		
		--carousel-indicator-color: rgba(255, 255, 255, 0.5); /* Default for dark mode */
		--carousel-indicator-active-color: rgba(255, 255, 255, 1); /* Active indicator in dark mode */
	}
}


html {
	font-size: 16px; /* The default font size, all other font sizes will be in 'rem' */
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	font-family: 'Roboto', Arial, sans-serif;
	display: flex;
	flex-direction: column;
	background-color: var(--background-color);
	color: var(--text-color);
}

h1 {
	font-family: 'Rubik', sans-serif;
	font-size: 4rem;
	font-weight: 300; /* light weight */
}

h2 {
	font-family: 'Rubik', sans-serif;
	font-size: 3rem;
	font-weight: 300; /* light weight */
}

h3 {
	font-family: 'Rubik', sans-serif;
	font-size: 2rem;
	font-weight: 700;
}

h4 {
	font-family: 'Rubik', sans-serif;
	font-size: 1.75rem;
	font-weight: 300; /* light weight */
}

h5 {
	font-family: 'Rubik', sans-serif;
	font-size: 1.5rem;
	font-weight: 300; /* light weight */
}

/*This is essentially to be used where you need a bold paragraph-like style*/
h6 {
	font-family: 'Roboto', sans-serif;
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--igg-muted-text);
}

p {
	font-size: 1.1rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 300; /* light weight */
	color: var(--igg-muted-text);
}

li {
	font-size: 1.1rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 300; /* light weight */
	color: var(--igg-muted-text);
}

.site-banner {
	background-color: var(--igg-green);
	text-decoration: none;
	font-size: 1.4rem;
}

.site-banner a {
	color: var(--igg-light-text);
	text-decoration: none;
}

.site-banner a:hover {
	text-decoration: underline;
	color: var(--igg-light-text-hover);
}

.site-banner-animation {
	animation: pulse 2s infinite;
}

/* Define the pulse animation */
@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.03);
	}
	100% {
		transform: scale(1);
	}
}

.text-bold {
	font-weight: bold;
}

.med-weight {
	
	font-weight: 500;
}

#content {
	flex: 1;
}

footer {
	background-color: var(--igg-gray); /* Bootstrap light background */
	padding: 20px;
	text-align: center;
	width: 100%;
}

@media (max-width: 1200px) {
	h1 {
		font-size: 2.8rem; /* Adjust as needed for larger screens */
	}
	
	h2 {
		font-size: 2.6rem; /* Adjust as needed for larger screens */
	}

}

@media (max-width: 991px) {
	h1 {
		font-size: 2.5rem;
	}
	
	h2 {
		font-size: 2rem;
	}
}

@media (max-width: 768px) {
 
  h1 {
	font-size: 2.2em;
  }
  
  h2 {
	  font-size: 2.0rem;
  }
  
}

/* NAVIGATION */

/* Style for the brand name */
.navbar-brand {
	font-size: 1.5rem; /* Adjust the font size as needed */
	color: var(--igg-dark-blue); /* Adjust the color as needed */
	display: flex;          /* Use Flexbox to align items */
	align-items: center;  
	
}

.navbar-brand-text {
	font-family: 'Rubik', sans-serif;
	font-weight: 600; 
	margin-left: 0px;
	margin-top: 8px;
	font-size: 1.3rem;
	color: var(--igg-black);
	text-decoration: none;
	margin-left: 10px;
}

/* Targeting the image inside the navbar-brand */
.navbar-brand img {
	width: auto; /* Adjust the width as needed */
	height: 38px; /* Automatically adjusts the height to maintain aspect ratio */
}

/* Style for the main navigation links */
.navbar-nav .nav-link {
	font-size: 1rem; /* Adjust the font size as needed */
	font-weight: 400;
	color: var(--igg-dark-blue); /* Adjust the color as needed */
}

/* Style for the dropdown links */
.navbar-nav .dropdown-item {
	font-size: 0.9rem; /* Adjust the font size as needed */
	color: var(--igg-dark-blue); /* Adjust the color as needed */
}

/* Change the color on hover */
.navbar-nav .nav-link:hover,
.navbar-nav .dropdown-item:hover {
	color: var(--igg-light-blue);
	background-color: color(display-p3 0.942 0.939 0.939);
	border-radius: 5px; /* Optionally add border-radius for a rounded look */
}

/*Change the focus/selection box when you click on a drop down item */
.nav-link.dropdown-toggle:focus {
	outline: none; /* Removes the default blue outline */
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Adds a subtle shadow */
	border-radius: 5px; /* Optionally add border-radius for a rounded look */
}


/* Optional: Style the active link */
.navbar-nav .nav-link.active {
	font-weight: bold; /* Make the active link bold */
	color: var(--igg-dark-blue); /* Adjust the active color */
}

.nav-item-slash {
	display: inline-flex;
	align-items: center;
	color: var(--igg-dark-blue);
	padding: 0 10px;
	font-size: 1rem;
	line-height: normal;
	vertical-align: middle;
	position: relative; /* Allows fine-tuning the position */
	top: 10px; /* Adjust this value until the slash aligns perfectly */
}

.navbar-nav .nav-item-slash:last-of-type {
	display: none; /* Hide the last slash if it's not needed */
}

.dropdown-item:active, .dropdown-item:focus {
	background-color: var(--igg-navbar-menu-item-selection-color); /* Bright orange background on click */
}

/* Dark Mode Styles */

/* Navbar background for dark mode */
@media (prefers-color-scheme: dark) {
	.navbar-light,
	#stickyNav {
		background-color: rgba(51, 51, 51, 0.85) !important; /* Dark background */
		color: #ffffff; /* White text */
	}

	/* Adjust text colors in dark mode */
	.navbar-nav .nav-link,
	.navbar-nav .dropdown-item {
		color: #cccccc; /* Lighter gray for text */
	}

	/* Hover effect for dark mode */
	.navbar-nav .nav-link:hover,
	.navbar-nav .dropdown-item:hover {
		color: #ffffff; /* Bright white hover */
	}

	/* Dropdown menu background in dark mode */
	.navbar-nav .dropdown-menu {
		background-color: #444444; /* Darker background for dropdown */
	}

	/* Active link in dark mode */
	.navbar-nav .nav-link.active {
		color: #ffffff;
		border-bottom: 2px solid #ffffff; /* White underline for active link */
	}
	
	/* Change the color on hover */
	.navbar-nav .nav-link:hover,
	.navbar-nav .dropdown-item:hover {
		color: #ffffff;
		background-color: #444444;
		border-radius: 5px; /* Optionally add border-radius for a rounded look */
	}
	
	.nav-link.dropdown-toggle:focus {
		outline: none; /* Removes the default blue outline */
		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Adds a subtle shadow */
		border-radius: 5px; /* Optionally add border-radius for a rounded look */
		color: #ffffff;
	}

	/* Slash between nav items in dark mode */
	.nav-item-slash {
		color: #888888; /* Lighter color for slashes */
	}

	/* Adjust the logo in dark mode if necessary */
	.navbar-brand img {
		filter: brightness(0.8); /* Optional: slightly darken logo in dark mode */
		
	}
	.navbar-brand-text {
		color: #cccccc;
	}
	
	/* Dark mode styles for the navbar toggler */
	.navbar-toggler {
		background-color: #555555; /* Lighter background for dark mode toggler */
		border-color: #888888; /* Border color to make it stand out */
	}
	
	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
		/* Light-colored hamburger icon */
	}
}


#stickyNav {
	transition: top 0.3s ease-in-out;
	top: -100px; /* Hidden initially */
	width: 100%;
	background-color: color(display-p3 0.973 0.976 0.98 / 0.85); /* Semi-transparent background */
	border-bottom: 1px solid color(display-p3 0.663 0.664 0.664 / 0.85);
}

#stickyNav.sticky {
	top: 0;
}

/* Bootstrap Override */

.text-muted {
	color: var(--igg-muted-text) !important;
}

/* HERO SECTIONS */

.hero-section {
  position: relative;
  width: 100%;
  height: 90vh;
  max-height: 800px;
  background-size: cover; /* Ensure the image covers the entire section */
  display: flex;
  padding-top: 60px;
  /* padding-top: 150px; */
}

/* Title goes up for smaller size screen .*/
@media (max-width: 768px) {
  .hero-section {
	padding-top: 10px;
  }
}


.hero-text {
  position: relative;
  color: var(--text-color); /* Text color */
  
}

.hero-text h1 {
  margin-bottom: 10px;
  margin-top: 10px;
  line-height: 1.0;
}

.hero-text p {
  font-size: 1.5em; /* Adjust paragraph size */
  line-height: 1.4;
  max-width: 500px; /* Limit the text width */
}

/* Medium screens and smaller (tablets) */
@media (max-width: 991px) {
  .hero-section {
	height: 80vh; /* Reduce height for medium screens */
  }
  
  .hero-text p {
	font-size: 1.2rem;
	width: 60%;
  }
  
}

@media (max-width: 768px) {
  .hero-section {
	height: 78vh;
  }
}

/* Small screens (phones) */
@media (max-width: 575px) {
  .hero-section {
	height: 74vh; /* Further reduce height for small screens */
  }
}

/* MASTHEAD */

:root {
	--swirly-bg-opacity: 0.05; /* Define the opacity as a CSS variable */
}

.masthead {
	overflow: hidden; 
	position: relative;
	width: 100%;
	height: 300px;
	display: flex;
	align-items: center; /* Center content vertically */
	overflow: hidden;
	background-size: cover;
}

.masthead-content {
	z-index: 5; /* Float it above the background image */
}

.masthead h1 {	
	color: var(--igg-light-text); /* Existing text color */
}

.masthead p {
	color: var(--igg-light-text); /* Existing text color */
}

.masthead-orange-gray-lblue {
  background: linear-gradient(
	  70deg,
	  var(--igg-orange),
	  var(--igg-dark-blue),
	   var(--igg-light-blue));
}

.masthead-dblue-green-lblue {
  background: linear-gradient(
	  70deg,
	  var(--igg-dark-blue),
	  var(--igg-green),
	   var(--igg-light-blue));
}

.masthead-lblue-dblue-orange {
  background: linear-gradient(
	  70deg,
	  var(--igg-light-blue),
	  var(--igg-dark-blue),
	   var(--igg-orange));
}

.masthead-dblue-lblue-gray {
  background: linear-gradient(
	  70deg,
	  var(--igg-dark-blue),
	  var(--igg-light-blue),
	   var(--igg-gray));
}

.masthead-gray-lblue-dblue {
  background: linear-gradient(
	  70deg,
	  var(--igg-dark-gray),
	  var(--igg-light-blue),
	   var(--igg-dark-blue));
}

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

.swirly-bg {
	opacity: var(--swirly-bg-opacity);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: rotate(0deg);
	
	/* Animation to rotate the image */
	/* animation: rotate-image 800s linear infinite;  */
	animation: move-sideways 400s ease-in-out infinite;
}

.static-swirly-bg {
	opacity: var(--swirly-bg-opacity);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: rotate(0deg);
}

.swirly-bg-v2 {
	opacity: var(--swirly-bg-opacity);
	position: absolute;
	left: 10%;
	top: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: rotate(10deg);
	
	/* Animation to rotate the image */
	/* animation: rotate-image 800s linear infinite;  */
	animation: rotate-image 400s linear infinite;
}

.static-swirly-bg-v2 {
	opacity: var(--swirly-bg-opacity);
	position: absolute;
	left: 10%;
	top: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: rotate(10deg);
}

.static-swirly-bg-v3 {
	opacity: var(--swirly-bg-opacity);
	position: absolute;
	left: 20%;
	top: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: rotate(70deg);
}

.static-swirly-bg-v4 {
	opacity: var(--swirly-bg-opacity);
	position: absolute;
	left: 0%;
	top: -10%;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: rotate(30deg);
}


/* Define the keyframes for the rotation */
@keyframes rotate-image {
  from {
	transform: rotate(0deg);
  }
  to {
	transform: rotate(360deg);
  }
}

@keyframes move-sideways {
  0% {
	transform: translateX(0); /* Start from the left */
  }
  50% {
	transform: translateX(50%); /* Move to the right (50% of the width) */
  }
  100% {
	transform: translateX(0); /* Return to the left */
  }
}

/* Utilities */

.igg-large-landscape-image-sizing {
  width: 75%;
}

@media (max-width: 768px) {
  .igg-large-landscape-image-sizing {
	width: 100%;
  }
}


/*Begin standardized UI components*/

.igg-striped-divider {
	height: 8px;
	background: repeating-linear-gradient(
		115deg, /* Angle of the stripes */
		var(--igg-dark-blue), 
		var(--igg-dark-blue) 20px, 
		var(--igg-light-blue) 20px, 
		var(--igg-light-blue) 40px,
		var(--igg-green) 40px,
		var(--igg-green) 60px,
		var(--igg-orange) 60px,
		var(--igg-orange) 80px
	);
}


.igg-dark-blue-text {
	color: var(--igg-dark-blue)
}

.igg-light-blue-text {
	color: var(--igg-light-blue)
}


.igg-light-text {
	color: var(--igg-light-text)
}



/* Override default bootstrap primary color with our own */
.igg-rounded-btn {
	border-radius: 20px; /* More rounded corners */
	padding: 10px 20px;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	color: #fff;
	background-color: var(--igg-dark-blue); /* Bootstrap primary color */
	border: none;
	cursor: pointer;
}

.igg-rounded-btn:hover {
	background-color: var(--igg-dark-blue-offset);
}

.btn-light{
	background-color: var(--background-color); 
	color: var(--igg-dark-blue);
}

.btn-light:hover {
	background-color: var(--igg-gray-offset); 
	color: var(--igg-dark-blue);
}


.allow-button {
	height: 20px;
	width: 104px;
	color: #fff;
	font-size: 12px;
	line-height: 10px;
	border-radius: 3px;
	border: 1px solid green;
	background-color: green;
}

/* Big Background Sections */

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

/* Carousel Enhancements */

.carousel { 
	overflow: hidden; 
	padding-bottom: 4rem; 
	height: 540px;
}
.carousel-caption { top: 100%; }
.carousel-inner { overflow: visible; }
.carousel-control-next, .carousel-control-prev, .carousel-indicators { bottom: 4rem; }
.carousel-indicators [data-bs-target] {
	background-color: var(--carousel-indicator-color);
	opacity: 0.5;
	transition: opacity 0.6s ease;
}

.carousel-indicators .active {
	background-color: var(--carousel-indicator-active-color);
	opacity: 1;
}

.custom-carousel-indicators {
	bottom: -1rem;
	
}

/* Live Chat Button on Every Page */
.livechat-button {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
}

.livechat-button button {
	padding: 10px 25px;
	font-size: 16px;
	border-radius: 50px;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.livechat-button .line1,
.livechat-button .line2 {
	display: block;
}

.livechat-button .line1 {
	font-weight: bold;
}

.livechat-button .line2 {
	font-size: 14px;
	opacity: 0.8;
}

/* Footer CTA */

.footer-logo {
	max-width: 142px;
	padding-bottom: 20px;	
}

.footer-cta-bg {
 
  background: var(--igg-light-blue);
}

.footer-cta-bg h2 {
	font-size: 2.0rem;
}

/* Footer */
footer {
	padding-top: 40px;
}
#footer li a {
	color: var(--igg-muted-text);
	font-size: 0.9rem;
}

footer #copyright {
	color: var(--igg-muted-text);
	font-size: 0.7rem;
}

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