al@charset "utf-8";
@font-face {
font-family: 'Roboto';
src: url('/css/fonts/Roboto-Regular-webfont.woff2') format('woff2'),
 url('/css/fonts/Roboto-Regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('/css/fonts/Roboto-Italic-webfont.woff2') format('woff2'),
url('/css/fonts/Roboto-Italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('/css/fonts/Roboto-Medium-webfont.woff2') format('woff2'),
url('/css/fonts/Roboto-Medium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('/css/fonts/roboto-bold.woff2') format('woff2'),
url('/css/fonts/roboto-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-Italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-Semibold-webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-Bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('/css/fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
 url('/css/fonts/OpenSans-BoldItalic-webfont.woff') format('woff');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Comfortaa';
src: url('/css/fonts/Comfortaa-Regular.woff2') format('woff2'),
     url('/css/fonts/Comfortaa-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
/* WOWI Brand Colors */
--wowi-blue:#2e4857;
--wowi-green:#98C683;

/* Text */
--text-muted:#4f6470;

/* Core Backgrounds */
--bg-light-blue:#F2F7FA;
--bg-light-green:#F6FAF6;
	
/* Backgrounds */
--bg-page:#F4F7F9;
--bg-card:#FFFFFF;
--bg-soft:#F8FBFC;
--bg-step:#EEF4F7;

/* Borders */
--border-light:#D6E2E8;

/* Neutral / Gray System */
--neutral-dark:#6B7C86;
--neutral-mid:#A8B5BC;
--neutral-light:#DCE4E8;
--neutral-lighter:#F4F7F9;
	
--shadow-soft: 0 10px 30px rgba(46,72,87,.08);

/* Assessment Section Colors */

/* Career Interest Activities (CIA) */
--cia-blue:#336699;
--cia-blue-light:#EEF5F8;

/* Career Training Potentials (CTP) */
--ctp-green:#8dc774;
--ctp-green-light:#F1F7EE;

/* Job Satisfaction Indicators (JSI) */
--jsi-purple:#5C5176;
--jsi-purple-light:#F4F1F7;
}

/* =============================================================================
HTML5 display definitions
========================================================================== */
html, body {margin:0;}
html {box-sizing: border-box;}
*, *::before, *::after { box-sizing: inherit;}
img, object, embed, video {max-width:100%;}
img {display:block;}
a img {border:none;}

/* Links
------------------------------------------------------------------------------*/
a:link {color:#263943;}
a:visited {color:#263943;}
a:hover {color:#263943; }
a:active {color:#263943;}

/* Accessibility issue */
a:focus-visible {
outline: 2px solid var(--wowi-blue);
outline-offset: 2px;
}
body {
display: grid;
grid-template-rows:auto 1fr auto;
min-height: 100vh;
}
body {
margin: 0; 
color:#263943;
font-family: 'Open Sans', Arial, sans-serif;
}

ul {list-style-type:disc;} 
sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
button {display:block;}
* {margin: 0;}

h1, h3 {font-family: 'Roboto'; font-weight: 400;}
h2 {font-family: 'Roboto'; font-weight: 400; letter-spacing: .01rem;}
h4 {font-family: 'Open Sans', Arial, sans-serif; font-weight: 400;}
h4 {text-align:center;}

h1 {font-size: clamp(2rem, 3vw, 3rem);}
h2 {font-size: clamp(1.9rem, 3.5vw, 2rem);}
h3 {font-size: clamp(1.45rem, 2.3vw, 1.5rem);}
h4 {font-size: clamp(1.2rem, 1.8vw, 1.35rem);}

h1, h2, h3, h4 {line-height: 1.15;}

p {
font-size: clamp(1.05rem, 1.12vw, 1.12rem);
line-height: 1.7;
margin: 0 0 1.25rem;
}
p, a, ol, ul, li {font-family: 'Open Sans', Arial, sans-serif; font-weight: 400;}

em {font-style: italic;}
strong {font-weight: 600;}

header {
grid-column:1/-1;
overflow:visible;
}
/* nav is divided into Logo, Menu, Sign In */
nav {
display:grid;
grid-column:1/-1;
}

main {
grid-column:1/-1;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
grid-column:1/-1;
width: 100%;
margin: 0;
padding-top: .25em;
text-align: center;
background-color: #D3D9DE;
}
footer img {
margin:0 auto;
height:40px;
}
/* HERO
------------------------------------------------------------------------------*/
.hero {
  margin: 0;
  background: var(--wowi-blue);
  overflow: hidden;
}
.hero-inner {
  margin: 0;
  padding: 0;
  min-height: clamp(430px, 44vw, 600px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: stretch;
  gap: clamp(2rem, 5vw, 5rem);
}
.hero-copy {
  align-self: start;
padding-top: clamp(3rem, 6vw, 7rem);
padding-bottom: 0;
padding-left: 0;
  z-index: 2;
}
.hero h1 {
font-size: clamp(2.7rem, 5vw, 4rem);
line-height: 1.02;
}
.hero-subtext {
  color: #fff;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.45;
  max-width: 520px;
  font-weight: 500;
  margin: 0 0 .35rem;
}
.hero-support {
color: #fff;
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 520px;
  margin: .2rem 0 0;
} 
.hero-media {
  position: relative;
  width: 100%;
}
/* COMPACT HERO
------------------------------------------------------------------------------*/
.compact-hero {
padding-top: 0;
padding-bottom: .5em;
background: var(--wowi-blue);
}
.compact-hero h1 {
font-size: clamp(2.3rem, 3.6vw, 3.35rem);
line-height: 1.08;
}
/* HERO and COMPACT HERO
------------------------------------------------------------------------------*/
.hero-accent-line {
display: block;
width: 72px;
height: 4px;
background-color: var(--wowi-green);
margin: 0 0 .75rem 0;
transform: scaleX(0);
transform-origin: left;
animation: growLine 0.6s ease forwards;
}

@keyframes growLine {
to {
transform: scaleX(1);
}
}

.hero-eyebrow, .compact-hero-eyebrow {
margin:0 0 14px 0;
font-size: .92rem;
font-weight: 700;
color: #D7E0E5;
letter-spacing: .08em;
text-transform: uppercase;
}
.hero h1, .compact-hero h1 {
color:#fff;
text-align: left;
margin-bottom: 1rem;
max-width: 780px;
line-height: 1.08;
}

/* =============================================================================
MOBILE and SMALL TABLET
================================================================================ */
@media screen and (max-width:767px) {
	
nav, footer, .hero, .c1, .flagship-page, .compact-hero, .headerText, .ban, .ban-mini {padding-left:7%; padding-right:7%;}

}

/* =============================================================================
TABLET - Large
========================================================================== */
@media print, screen and (min-width:768px) {
	
nav, footer, .hero, .c1, .flagship-page, .compact-hero, .headerText, .ban, .ban-mini {padding-left:5%; padding-right:5%;}

}
/* =============================================================================
DESKTOP
========================================================================== */ 
/* inherits from tablet except nav */	
@media screen and (min-width:1366px) {
	
nav, footer, .hero, .c1, .flagship-page, .compact-hero, .headerText, .ban, .ban-mini {padding-left:7%; padding-right:7%;}

}
/* =============================================================================
DESKTOP - Large
================================================================================ */ 
@media screen and (min-width:1920px) {

}
/* =============================================================================
  PRINT
================================================================================ */ 
@media print {
.compact-hero {
background: none !important;
color: #000 !important;
padding: 0 0 1rem !important;
}
.compact-hero h1,
.compact-hero-eyebrow {
color: #000 !important;
}
.hero-accent-line {
display: none !important;
}	

}