.theme-light {
  --color-primary: #0060df;
  --color-secondary: #1d3557;
  --color-accent: #fd6f53;
  --font-color: #000000;
  
  --bg-one: #f7f7f8;
  --bg-two: #eaebed;
  --bg-three: #bfc1c2;
  --text-one: #212121;
  --text-two: #666666;
  --text-three: #9e9e9e;
  --primary-one: #1d3557;
  --primary-two: #4a5078;
  --primary-three: #77859a;
  --secondary-one: #e63946;
  --secondary-two: #eb606a;
  --secondary-three: #f08890;
  --system-error: #bb000c;
  --system-success: #339900;
  --system-warning: #ffcc00;
  --logo-colour: #1d3557;
  --menu-bg: #1d3557;
  --menu-text: #FEF9EF;
  
  --bg-100: #fffdfd;
  --bg-90: #e6e4e4;
  --bg-80: #cccaca;
  --bg-70: #b3b1b1;
  --bg-60: #999898;
  --bg-50: #807f7f;
  --bg-40: #666565;
  --bg-30: #4c4c4c;
  --bg-20: #333333;
  --bg-10: #191919;
}
.theme-dark {
  --color-primary: #17ed90;
  --color-secondary: #161a1d;
  --color-accent: #12cdea;
  --font-color: #ffffff;
  
  --bg-one: #0d1117;
  --bg-two: #161b22;
  --bg-three: #21262d;
  --text-one: #e0e0e0;
  --text-two: #a0a0a0;
  --text-three: #6c6c6c;
  --primary-one: #1d3557;
  --primary-two: #4a5d78;
  --primary-three: #77859a;
  --secondary-one: #a7282f;
  --secondary-two: #b85258;
  --secondary-three: #ca7e82;
  --system-error: #a7282f;
  --system-success: #497031;
  --system-warning: #b3b400;
  --logo-colour: #e0e0e0;
  --menu-bg: #0c1625;
  --menu-text: #cacaca ;
  
  --bg-100: #02020a;
  --bg-90: #1b1b23;
  --bg-80: #35353b;
  --bg-70: #4e4e54;
  --bg-60: #67676c;
  --bg-50: #818185;
  --bg-40: #9a9a9d;
  --bg-30: #b3b3b6;
  --bg-20: #ccccce;
  --bg-10: #e6e6e7;
}

body {
  background-color: var(--bg-one);
  color: var(--text-one);
  transition: background-color 0.5s ease;
}

.navbar-colour, .navbar-colour .dropdown-menu{
	background-color: var(--menu-bg);
	border-color: none;
	color: var(--menu-text);
}
.navbar-colour a, .navbar-colour a:hover, .navbar-colour a:active, .navbar-colour a:visited{
	background-color: var(--menu-bg);
	color: var(--menu-text);
}
.dropdown-menu{
	border-color: var(--menu-bg);
}
.navbar .navbar-toggler{
  border-color: var(--menu-text);
  color: var(--menu-text);
}
.navbar-toggler .navbar-toggler-icon{
	background-image: url('/');
	border-color: var(--menu-text);
}

.navbar .navbar-toggler:hover, .menu .navbar-toggler:focus {
  background:none;
}

.navbar .megamenu{ padding: 1rem; }

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

  .navbar .has-megamenu{position:static!important;}
  .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }

}	

.jumbotron {
	background-color: var(--menu-bg);
    height: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--menu-text);
}

.jumbotron h1 {
    font-size: 3rem;
    margin-bottom: 3rem;
}

.jumbotron p {
    font-size: 1.5rem;
    margin-bottom: 3rem;
}
    
.mouse {
	width: 50px;
	height: 90px;
	border: 3px solid var(--menu-text);
	border-radius: 60px;
	position: relative;
	&::before {
		content: '';
		width: 12px;
		height: 12px;
		position: absolute;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--menu-text);
		border-radius: 50%;
		opacity: 1;
		animation: wheel 2s infinite;
		-webkit-animation: wheel 2s infinite;
	}
}

@keyframes wheel {
	to {
		opacity: 0;
		top: 60px;
	}
}

@-webkit-keyframes wheel {
	to {
		opacity: 0;
		top: 60px;
	}
}

.carousel-img {
    height: 75vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.aspect16-9 {  
	aspect-ratio: 16 / 9;
} 

.footer {
	background-color: var(--menu-bg);
	padding: 20px 0;
	color: var(--menu-text);
} 

.icon-column {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
    
.image-container {
    position: relative;
    display: inline-block;
}
    
.image-caption {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 20px;
    text-align: center;
}