:root { 
	--gray: #d9d9d9;
	--prim-color: #000000; 
	--sec-color: #ffd54f;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--gray);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: var(--sec-color);
	
}

body {
	font-family: 'Georgia';
}

h1, h2, h3, h4, h5, h6, strong {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
}

h1 {
	font-size: 20px;
}


a {
	color: var(--prim-color);
	text-decoration: underline;
	font-weight: 500;
}

a:visited {
	color: var(--prim-color);
}

a:hover {
	color: var(--sec-color);
}

p {
	font-size: 16px;
	text-align: left;
	margin-bottom: 0px;
}

.bg-primary {
	background-color: var(--prim-color);
	color: var(--sec-color);
}

.bg-secondary {
	background-color: var(--sec-color);
	color: var(--prim-color);
}

.bg-card{
	background-color: #39836C;
	color: white;
}

.txt-color-primary {
	color: var(--prim-color);
}

.txt-color-secondary {
	color: var(--sec-color);
}

.logo {
	width: 100%;
	max-width: 275px;
}

.page-heading {
	font-weight: 600;
	color: var(--prim-color);
}

.no-margin{
	margin: 0;
}

.ellipses{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*Header */
.header-accent-line{
	height: 15px;
	width: 100%;
}

.header-accent-1{
	background-color: #F2EDA8;
	height: 15px;
	width: 100%;
}

.header-accent-2{
	background-color: #FAE100;
	height: 15px;
	width: 100%;
}

.header-accent-3{
	background-color: #FED34C;
	height: 15px;
	width: 100%;
}

.header-accent-4{
	background-color: #EAAB00;
	height: 15px;
	width: 100%;
}


.wci-banner{
	background-color: var(--gray);
}


.main-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	min-height: 70vh;
	padding-top: 16px !Important;
}

/*Home  */
.img-tile{
	height: 250px;
	width: 250px;
	margin: auto;
	margin-bottom: 15px;
	position: relative;
}

.home-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tile-container {
	margin-bottom: 20px;
}

.tile-button{
	width: 100%;
}

.overlay-text {
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);  
  text-align: center;
}

/*Footer  */
.footer-container {
	width: 100%;
	min-height: 200px;
	color: white;
	display: flex;
	justify-content: center;
}