/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
	font-family: serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Container for constraining max-width on large laptop screens */
.container {
  width: 92%;
  margin: 0 auto;
  padding: 0 20px;
}

.bannermidspacer{
	width:100%;
	height:8vw;
}

.bannermidspacer2{
	width:100%;
	height:7vw;
}

/* ==========================================================================
   2. TOP NAVIGATION MENU
   ========================================================================== */
#nav-standard {
	display: inline-flex;
}

#nav-mobile {
	display: none;
}

#extra-hero-text{
	display: inline-flex;
}

#mobile-nav-menu {
	display: none;
	top: 0px;
	left: 0px;
	width: 60%;
	height: auto;
	padding: 2vw;
	line-height: 2;
}

#hero-floating-image{
	width:100%;
	height: auto;
	vertical-align: bottom;
	position:absolute;
	bottom: 0;
	right: 0;
}

.navbar {
  background-color: #002445;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
	color:#FFF;
	padding-top:15px;
	padding-bottom:15px;
	border-bottom: 2px solid #FFF;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
	/*padding-right: 100px;*/
}

.nav-logo {
  font-size: 30px;
  font-weight: bold;
  color: #FFF;
}

.nav-logo-sub {
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
	margin-top:-10px;
}

.nav-menu {
  display: flex;
  list-style: none;
}

.nav-menu-mobile {
	display: block;
	width: 100%;
}

.nav-items-align{
	padding-left: 50px;
}

.nav-item {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 18px;
}

.nav-item a {
  font-weight: 500;
  transition: color 0.3s;
}

.nav-item-mobile {
  font-weight: 500;
	font-size: 24px;
  transition: color 0.3s;
}

.nav-item a:hover {
  color: #FFF;
}

/* ==========================================================================
   3. HERO BANNER
   ========================================================================== */
.hero {
  background-color: #002445;
	background-image: url("../images/Banner - Columns Right - Wider.png");
	background-repeat: no-repeat;
	/*background-size: auto auto;*/
	background-size: contain;
  background-position: right center;
  color: #ffffff;
  padding: 40px 0;
  text-align: center;
	height: auto;
	min-height: 500px;
}

.hero-center-image {
	width:45%;
	height:100%;
	position: absolute;
	bottom: 0px;
	right: 25%;
	z-index: 0;
	overflow-x: hidden;
}

.hero-content {
	display: inline-flex;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: 800;
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.hero-text-containers {
	max-width: 35%;
	display: inline-block;
	padding: 30px;
	line-height: 1.1;
	vertical-align: middle;
}

.inline-div{
	display: inline-block;
}

.hero-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #002445;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: bold;
  transition: transform 0.2s, background-color 0.2s;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hero-btn:hover {
  transform: translateY(-2px);
  background-color: #f0f4ff;
}

.dark-btn {
  display: inline-block;
  background-color: #002445;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: bold;
  transition: transform 0.2s, background-color 0.2s;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.dark-btn:hover {
  transform: translateY(-2px);
  background-color: #0B3D77;
}

/* ==========================================================================
   4. 6-COLUMN GRID LAYOUT (Laptop Default)
   ========================================================================== */
.grid-section {
  padding: 10px 0;
}

.grid-container {
  display: grid;
  /* Laptop/Desktop default: 6 equal columns */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.grid-container-8 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.grid-container-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.grid-item-3 {
  background-color: #fbfcfd;
	color:#002445;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.grid-item-8 {
  background-color: #fbfcfd;
	color:#002445;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.grid-item {
  background-color: #002445;
	color:#fff;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* =======================
	Other Content
*/
.light-blue-container-4-row {
	background-color:  #f3f7fb;
	display: inline-flex;
	width: 22%;
	height: auto;
	color: #002445;
	border-radius: 15px;
	padding: 20px;
	margin: 15px 
}
.light-blue-container-5-row {
	background-color:  #f3f7fb;
	display: inline-flex;
	width: 17%;
	height: auto;
	color: #002445;
	border-radius: 15px;
	padding: 20px;
	margin: 15px 
}
.arrowcnt{
	width:100%;
	text-align:center;
	position: absolute;
	bottom: 1vw;
	right: 1vw;
}
.circlearrow {
	border: 2px solid white;
	border-radius: 50%;
	width: 3vw;
	height: 3vw;
	font-size: 1.5vw;
	font-weight: bold;
	padding-top: .15vw;
}

/* ==========================================================================
   5. RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* Medium Devices (Tablets, less than 1024px) */
@media (max-width: 1024px) {
  .grid-container {
    /* Switch to 3 columns on tablet sizes */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
	
  .grid-container-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
	
 .grid-container-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
	
	.bannermidspacer{
		width:100%;
		height:16vw;
	}
  
	.hero {
	  background-color: #002445;
		background-image: url("../images/Banner - Columns Right - Wider.png");
		background-repeat: no-repeat;
		/*background-size: auto auto;*/
		background-size: cover;
	  background-position: center center;
	  color: #ffffff;
	  padding: 40px 0;
	  text-align: center;
		height: auto;
		min-height: 500px;
	}
	
  .hero-content h1 {
    font-size: 2.5rem;
  }
	
	.hero-text-containers {
		width: 100%;
		max-width: 100%;
		display: block;
		padding: 5px;
		line-height: 1.1;
		vertical-align: middle;
	}
	
	.nav-logo {
	  font-size: 20px;
	  font-weight: bold;
	  color: #FFF;
	}

	.nav-logo-sub {
	  font-size: 14px;
	  font-weight: bold;
	  color: #FFF;
		margin-top:-10px;
	}
	
	#nav-standard {
		display: none;
	}
	
	#nav-mobile {
		display: inline-flex;
	}
	
	.mobile-menu-icon {
		width: 15%;
		height: auto;
		margin-right: 4vw;
		max-height: 400px;
		cursor: pointer;
	}
	
	.hero-center-image {
		width:60%;
		height:100%;
		position: absolute;
		bottom: 0px;
		right: 22%;
		z-index: 0;
		overflow-x: hidden;
	}
	
	#hero-floating-image{
		width:100%;
		height: auto;
		vertical-align: bottom;
		position:absolute;
		bottom: 0;
		right: 0;
	}
	
	.light-blue-container-4-row {
		background-color:  #f3f7fb;
		display: inline-flex;
		width: 46%;
		height: auto;
		color: #002445;
		border-radius: 15px;
		padding: 20px;
		margin: 15px 
	}
	.light-blue-container-5-row {
		background-color:  #f3f7fb;
		display: inline-flex;
		width: 46%;
		height: auto;
		color: #002445;
		border-radius: 15px;
		padding: 20px;
		margin: 15px 
	}
	.arrowcnt{
		width:100%;
		text-align:center;
		color:#FFF;
		position: absolute;
		bottom: 2vw;
		right: 2vw;
	}
	.circlearrow {
		border: 2px solid white;
		border-radius: 50%;
		width: 6vw;
		height: 6vw;
		font-size: 3vw;
		font-weight: bold;
		padding-top: .3vw;
	}
}

/* Small Devices (Landscape Phones & Small Tablets, less than 768px) */
@media (max-width: 768px) {
  .nav-menu {
    gap: 15px;
  }
	
	.mobile-menu-icon {
		width: 25%;
		height: auto;
		margin-right: auto;
		max-height: 200px;
		cursor: pointer;
	}

}

/* Extra Small Devices (Mobile Phones, less than 576px) */
@media (max-width: 576px) {
	.mobile-menu-icon {
		width: 50%;
		height: auto;
		margin-right: auto;
		max-height: 200px;
		cursor: pointer;
	}
	
	.hero-center-image {
		width:58%;
		height:100%;
		position: absolute;
		bottom: -200px;
		right: 18%;
		z-index: 0;
		vertical-align: bottom;
	}
	
	#extra-hero-text{
		display: none;
	}
	
	.hero-center-image {
		width:100%;
		height:100%;
		position: absolute;
		bottom: 0px;
		right: -20%;
		z-index: 0;
		overflow-x: hidden;
	}
	
	#hero-floating-image{
		width:100%;
		height: auto;
		vertical-align: bottom;
		position:absolute;
		bottom: 0;
		right: 0;
	}
	
	.bannermidspacer{
		width:100%;
		height:52vw;
	}
	
  .nav-container {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    height: auto;
    padding: 15px 5px;
  }
  
  .hero {
    padding: 60px 0;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .grid-container {
    /* Stack columns vertically into 1 column on mobile */
    grid-template-columns: 1fr;
  }
	
  .grid-container-8 {
    grid-template-columns: 2fr;
  }
	
  .grid-container-3 {
    grid-template-columns: 1fr;
  }
	
	.light-blue-container-4-row {
		background-color:  #f3f7fb;
		display: inline-flex;
		width: 94%;
		height: auto;
		color: #002445;
		border-radius: 15px;
		padding: 20px;
		margin: 15px 
	}
	.light-blue-container-5-row {
		background-color:  #f3f7fb;
		display: inline-flex;
		width: 94%;
		height: auto;
		color: #002445;
		border-radius: 15px;
		padding: 20px;
		margin: 15px 
	}
	.arrowcnt{
		width:100%;
		text-align:center;
		color:#FFF;
		position: absolute;
		bottom: 3vw;
		right: 3vw;
	}
	.circlearrow {
		border: 2px solid white;
		border-radius: 50%;
		width: 12vw;
		height: 12vw;
		font-size: 6vw;
		font-weight: bold;
		padding-top: .6vw;
	}
}