@charset "utf-8";
/* CSS Document */


	
h3 {font-family: 'Figtree', sans-serif; color:#000; line-height:1.2em; font-weight:900; font-size:52px; margin-bottom:20px; text-shadow: 1px 1px #020d64;}

h2 {font-family: 'Figtree', sans-serif; line-height:1.6em; font-weight:300; font-size:20px; margin-bottom:20px;}


	h5 {font-family: 'Figtree', sans-serif;color:#020d64; line-height:1.3em; font-weight:900; font-size:40px; margin-bottom:20px;} 
	
h4  {font-family: 'Figtree', sans-serif;  font-weight:900; font-size:24px; color: #020d64; margin-bottom:30px;  line-height:1.2em; }


	p, li, h1 {font-family: 'Figtree', sans-serif; font-size: 20px; color:#000; font-weight:300; line-height:1.6em; }

.larger {font-size:20px; font-weight:500;}
.source {font-size:16px; color:#000; font-family:'Figtree', sans-serif;  font-weight: 600; line-height: 1.3em;}
.footer {font-size: 15px;}

.row {margin-left:0px; margin-right:0px;}

.icon {width:75%;}
.icon:hover {opacity: 80%;}
.course:hover {opacity:80%;}

.nav-link  {color:#fff!important;   font-size:16px !important;  text-align: right !important;  font-family: 'montserrat' !important;} 

.navbar-toggler {color:#000 !important;}
.nav-item {line-height:1.3em !important;  margin-right:20px; }

a.nav-link:hover {color: #d7ac4b !important;}
a.button:hover {text-decoration: none !important;}
.buttonlink  {color:#fff !important; font-size:18px !important; padding:10px; text-align:left !important; font-family:montserrat;}
.login {color: #020d64; font-weight:600; font-size:20px; font-family: 'oswald';}
.login:hover {text-decoration:none; color:#f26725;}
.caption {font-size:15px; padding:10px; line-height:1.3em; text-align: left;}




.carousel-item {background-color:#; border-radius: 2%;}
.carousel-control-prev-icon {filter: invert(0%); background-size:100%;}
.carousel-control-next-icon {filter: invert(0%); background-size:100%;}
.carousel-control-prev {background-color:transparent; border:0px;}
.carousel-control-next {background-color:transparent; border:0px;}

.carousel-control-prev {
	margin-left: -15px;  
}

.carousel-control-next {
  margin-right: -15px;   
}

 .carousel-indicators [data-bs-target] { filter: invert(0%); border-top:0px !important; border-bottom:0px !important; height:15px !important; width:15px !important; border-radius:50% !important; margin-top:40px; margin-right:20px; box-shadow: none;}


.intro {background-image:url(hexagon.png); background-repeat: no-repeat; background-position: top right; } 
.hero {width:100%;}
.slide { padding: 20px;}
.slidetext {font-size:16px;}
.slide img {width:100%;  }
.nav-link {text-align:right;}
.btn:hover  {background-color: #d7ac4b;}
.btn-danger:hover, .btn-danger:active   {background-color: #f26725  !important;}
.btn-danger {background-color: #020d64; font-family: 'oswald';}

.btn-orange {background-color: #f26725; font-family: 'oswald';}
.btn-orange:hover, .btn-danger:active   {background-color: #020d64  !important;}


 .fly  {
  animation-duration: 1s;
  animation-name: slide-in;
 
}

 

@keyframes slide-in {
  from {
    translate:  -150vw 0;
    scale:  100% 1 ;
  }

  to {
    translate: 0 0;
    scale:  100% 1;
  }
}

@keyframes reveal {
	from {
		opacity: 1;
		clip-path: inset(100% 100% 100% 100%);
	}
	to {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
	}
}

.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
}

.hero-background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero-background img:first-child {
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  margin-top: 50px;
}

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

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 40px;
}

.hero-content button {
  font-size: 1.2rem;
  padding: 12px 30px;
  border: none;
  background-color: white;
  color: black;
  border-radius: 25px;
  cursor: pointer;
}

.hero-content button:hover {
  background-color: black;
  color: white;
}


.revealing-image {
	/* Create View Timeline */
	view-timeline-name: --revealing-image;
	view-timeline-axis: block;

	/* Attach animation, linked to the  View Timeline */
	animation: linear reveal both;
	animation-timeline: --revealing-image;

	/* Tweak range when effect should run*/
	animation-range: entry 0% cover 50%;
}




a {color:#f26725; font-weight:500;}
a:hover {color:#020d64;}
.quote::before {
		content: "";
		width: 20%;
		height: 10px;
		background: #f26725;
	display:block;
		margin: 0 10px 20px 0;
	}


.card {background-color: #f0f0f0; border:0px;}
.video-container{overflow:hidden;position:relative;width:100%}.video-container:after{padding-top:56.25%;display:block;content:''}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;}


.quote2::before {
content: '\201C';
background: transparent;
position:relative;
top:30px;
left:-10px;
float:left;
color: #f3c000;
font-size: 200px;
z-index: 9;
font-family:georgia;}


header {
  position: relative;
  height: 65vh;
  min-height: 40rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 3;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
 
 background-color: #f26725 ;
 opacity: 0.7; /* Standard compliant browsers */
   -moz-opacity: 0.7; /* Firefox and Mozilla browsers */
   -webkit-opacity: 0.7; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=70); /* For IE8 and earlier */
  z-index: 1;
}




/* 
 ##Device = Low Resolution Tablets, Mobiles (Landscape)
 ##Screen = B/w 481px to 767px
*/
	/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (min-width: 768px) and (max-width: 2000px) {
		
		
			
			.mobile {display:none;}
	.floater {float:right; width:40%;}
	.bubble { display: flex; flex-direction: row-reverse ;}
		}



	@media (min-width: 481px) and (max-width: 767px) {
		
		
			.hero {width:100%;}

			h2 {font-size:22px;}
		h3 {font-size:32px; margin-top:40px;}
			h4 {font-size:20px;}
			.desktop {display:none;}
			.rounded-circle {width:50%;}
		.footer {text-align:center;}
				.btn-danger .btn-orange {font-size:15px; }
	.floater {float:none; width:100%; padding:20px;}
		.heading {text-align:center;}
		.heroimage {display:none;}
		.footerlogo {width:40%;}
			p, .regular {font-size:16px;}
		.logo {width:100%;}
		.herobutton {display:none;}
				.carousel-control-prev {
	margin-left: -20px;  margin-bottom:10%;
}

.carousel-control-next {
  margin-right: -20px;   margin-bottom:10%;
}
		
		.carousel-control-next-icon {width:20px; height:20px;}
		.carousel-control-prev-icon {width:20px; height:20px;}
		}
	
	/* 
 ##Device = Most of the Smartphones Mobiles (Portrait)
 ##Screen = B/w 320px to 479px
*/
	
	@media (min-width: 0px) and (max-width: 480px) {
	
		
	.desktop {display:none;}
		.hero {width:100%;}
	
			h2 {font-size:22px;}
		h3 {font-size:32px;}
			h4 {font-size:20px;}
		.floater {float:none; width:100%; padding:20px;}
		.footer {text-align:center;}
		.rounded-circle {width:50%; }
		.heading {text-align:center;}
		.heroimage {display:none;}
		.logo {width:100% !important;}
		.footerlogo {width:40%}
		.btn-danger .btn-orange {font-size:15px; }
		.herobutton {display:none;}
		.login {font-size:14px;}
		p, li, .regular {font-size:16px;}
		
		.carousel-control-prev {
	margin-left: -25px;  margin-bottom:10%;
}

.carousel-control-next {
  margin-right: -25px;   margin-bottom:10%;
}
		
		.carousel-control-next-icon {width:20px; height:20px;}
		.carousel-control-prev-icon {width:20px; height:20px;}
	}