@font-face {
	font-family: 'Trebuchet MS';
	src: url('../fonts/TrebuchetMSRegular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;;
}
@font-face {
	font-family: 'Trebuchet MS Bold';
	src: url('../fonts/TrebuchetMSBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;;
}

:root {
	--darkBlueText: #002159;
	--darkBlueBg: #001740;
	--lightBlue: #00CFFF;
	--darkRed: #E76265;
	--lightRed: #EDC5C7;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Trebuchet MS';
	font-weight: 400;
	color: #434142;
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Trebuchet MS Bold';
	font-weight: bold;
}
h1 {
	font-size: 4vw;
}
h5 {
	font-size: 1.3vw;
}
a, a:hover {
	text-decoration: none;
}
.main {
    padding: 25px;
}
.darkBlue {
	color: var(--darkBlueText);
}
.lightBlue {
	color: var(--lightBlue);
}
.action-btn-wrapper {
	margin-top: 110px;
}
.action-btn {
	font-family: 'Trebuchet MS';
	font-size: 1vw;
	background: var(--lightBlue);
	color: var(--darkBlueText);
	padding: 5px 15px;
    border-radius: 20px;
}
.btn-lg {
	font-size: 1.4vw;
}
.jumbotron {
    padding: 5vh 0 7vh 0;
}

/*------------------------
5 STAGE GRID BOX START	
------------------------*/
.grid-box-wrapper .grid-item {
	flex-basis: 20%;
	background: rgb(0 207 255 / 15%);
	cursor: pointer;
}
.stage-badge {
	font-size: 1.4vw;
    color: #fff;
    background: var(--darkBlueBg);
    display: inline-block;
    padding: 5px 15px;
    border-radius: 0px 0px 12px 12px;
    margin-left: -15px;
}
#stage_3 .stage-badge {
	background: #003080;
}
#stage_4 .stage-badge {
	background: #144CA7;
}
#stage_5 .stage-badge {
	background: #00AAFF;
}
.stage-title {
	color: var(--darkBlueText);
	font-family: 'Trebuchet MS Bold';
	font-weight: bold;
	font-size: 1.4vw;
	line-height: 1.2;
	text-align: center;
	display: flex;
    justify-content: center;
    margin-top: 3vh;
}
.arrow-btn {
	width: 60px;
    position: absolute;
    bottom: 20px;
    right: -33px;
}


/*------------------------
SECTION CONTENT START	
------------------------*/
section {
	display: none;
	margin-top: 30px;
	padding-bottom: 10vh;
}
.info-head {
    border: 2px solid #00CFFF;
    border-radius: 20px;
    padding: 20px;
}
.stage-content-wrapper {
    margin-bottom: 50px;
}
.stage-content-wrapper img {
    height: 100px;
    width: auto !important;
}
.border-head:before {
    content: "";
    background: var(--lightBlue);
    width: 27%;
    height: 6px;
    display: block;
    margin-bottom: 6px;
}
.content-wrapper {
	display: none;
}
.toggle-title {
	cursor: pointer;
	display: inline-block;
}
.content-wrapper p,
.content-wrapper ul li,
.info-head {
	font-size: 1vw;
}
.content-wrapper ul {
	padding-left: 20px;
}

.key-info-section {
	position: absolute;
    top: 0;
    right: 0;
    width: 25%;
}
.accordion-button {
    color: #fff;
    background: var(--darkRed);
    border-radius: 30px !important;
    padding: 10px;
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background: var(--darkRed);
    box-shadow: none;
    z-index: 9;
}
.accordion-button:focus {
	box-shadow: none;
}
.accordion-button::after {
	display: none;
}
.accordion-item:last-of-type>.accordion-collapse {
	transform: translateY(-15px);
}
.accordion-body {
	background-color: var(--lightRed);
    padding-top: 30px;
    font-size: 1.2vw;
    line-height: 1.4;
}
.accordion-body ul {
	padding-left: 15px;
}
.accordion-body ul li::marker {
	color: var(--darkRed);
}

.grid-item.disabled {
    filter: grayscale(100%); /* greyed-out effect */
    opacity: 0.6;           /* optional dimming */
    transition: all ease .4s;
}
.grid-item.disabled:hover {
	filter: grayscale(0%);
	opacity: 1;
}


#myTab {
	margin-top: 30px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	background: var(--lightBlue);
}
.nav-pills .nav-link {
    border-radius: 30px;
    padding: 5px 25px;
    color: #606060;
    background: rgb(124 124 124 / 10%);
    font-family: 'Trebuchet MS Bold';
    font-size: 1.4vw;
    min-width: 320px;
}

.footer {
	padding: 10vh 0;
}