@font-face {
	font-family: 'myfont';
	src: url('../fonts/digital-7.regular.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/digital-7.regular.woff') format('woff'),
	     url('../fonts/digital-7.regular.ttf')  format('truetype'),
	     url('../fonts/digital-7.regular.svg#svgFontName') format('svg');
	}

:root {
	--main-radius: 50px;
	--padding-top: 20px;
}

html,body{
margin: 0;
padding:0;

}

.wrapper {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: 100px 40px auto auto;
	grid-template-areas:
	"n n n n n n"
	"m m m m m m"
	"p p p p p p"
	"p p p p p p"
	"p p p p p p"
	 "f f f f f f";
	grid-gap:.2em
}

.nav {
	display: grid;
	color: rgb(5, 4, 4);
	background: rgb(2, 2, 48);
	background: rgb(0, 0, 0);
	background: #030a16;
	background: rgb(102, 101, 104);
	background: #5c5f63;
/* 	background-image: linear-gradient(grey,rgb(104, 178, 178),white,rgb(5, 239, 5),grey); */
	grid-area: n;
	grid-gap: .3em;
	grid-template-columns: 1fr 4fr 1fr;
}

#earth {
	margin: auto auto;
	grid-template-columns: 1fr;
	background: url("../img/Earth_Color4096.jpg");
	border-radius: 50%;
	background-size: 100px 100px;
	box-shadow: inset 16px 0 40px 3px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
	animation-name: rotate;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes rotate {
	from {
			background-position-x: 0px;
	}
	to {
			background-position-x: 100px;
	}
}

#earth {
	width: 70px;
	height: 70px;
	border-collapse: separate;
	z-index: 999;

}

#earth {
	/**/
	float: left;
	filter: drop-shadow(0px 0px 10px rgba(236, 239, 240, 0.911));

}

.nav>.holder {
	grid-template-columns: 4fr;
	font-size: 2.5em;

	color: #999;
	color:rgb(54, 56, 84);
	color: rgba(248, 217, 217, 0.867);
	color:#cbced3;
	font-weight: 700;
	justify-content: center;
	justify-items: center;
	text-justify: middle;
	text-align: center;
	overflow: hidden;
}

.nav>.menu {
	grid-template-columns: 2fr;

/* 	background: #cbced3; */
}

.marque {
	background: green;
	background:#afd275;
	background: #cbced3;
	grid-area: m;
	grid-template-columns: 1/6;
	border-radius: 24px;
	color: rgb(35, 66, 80);
	font-size: 1.5em;
	text-align: center;
	padding-top: 10px;
	box-shadow:
  12px 12px 16px 0 rgba(0, 0, 0, 0.25),
  -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}
.marque marque {
	font-size: 2em;
}

.slideshow-cont {
	display: grid;
	grid-template-columns: 6fr;

	grid-area: c;
	width: 100%;
	object-fit: cover;

	}

	.dot {

		cursor: pointer;
		height: 15px;
		width: 15px;
		margin: 0 2px;
		background-color: rgb(237, 8, 31);
		border-radius: 50%;
		display: inline-block;
	/*	transition: background-color 5s ease;*/
		z-index: 100;
	}
	.active,
	.dot:hover {
			background-color: #eee;}
			.prev,
	.next {
			cursor: pointer;
			position: absolute;
			top: 30%;
			width: auto;
			padding: 16px;
			margin-top: -22px;
			color: white;
			font-weight: bold;
			font-size: 18px;
			transition: 0.6s ease;
			border-radius: 0 3px 3px 0;
			user-select: none;
	}
	.next {
		right: 0;
		border-radius: 3px 0 0 3px;
	}
	.prev:hover,
	.next:hover {
			background-color: rgba(0, 0, 0, 0.8);
	}
	.slide-text {
		color: #ddd;
		background-color:transparent;
		background-color: rgba(23, 42, 70, 0.589);
		font-size: 30px;
		position:relative;



		width: inherit;
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
vertical-align: middle;

	}

.prgm {
	display: grid;
	background: #cbced3;
	grid-gap: 1.5em;
	grid-area: p;
	grid-template-columns: 4fr;
	grid-template-columns: 1fr 1fr;
	padding: 5%;
}
.prgm > div {
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
	font-weight: 500;
	text-align: center;
	padding-bottom:40px;

}

.yt,
.ssl,
.fmly,
.bbl,
.pry,
.fcc,
.zm,
.scd,
.intnum {
display: grid;
padding-top: var(--padding-top);
border-radius:var(--main-radius);
grid-template-columns: 1fr;
padding-left:40px;
padding-right:40px;
background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(255,255,255,0.25));
box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
 -8px -8px 12px 0 rgba(255, 255, 255, 0.3);


}
/* font of cards */
.bbl a, .ssl a, .yt a, .fmly a, .pry a, .fcc a, .zm a, .scd a, .intnum a {
	color:rgb(54, 56, 84);
	font-size: 1em;

text-align: center;
}
.logo{
	margin: auto;
	max-width: 100%;

}
img{
	margin: auto;
	max-width: 100%;
}
.footer {
	display: grid;
	background: rgb(1, 0, 3);
	grid-area: f;
	color: white;
	grid-template-columns: 100%;
padding-bottom: 5px;
}

.footer>div {
	text-align: center;
	border-bottom: 2px white dotted;
	margin-left: 20%;
	margin-right: 20%;
}

.footer p {
	color: rgb(197, 194, 194);
	font-size: .95em;
	padding: 0px;
}

.subft {
	grid-template-columns: 100%;
}

.navbar-bottom {
	bottom: 50px;
	position: relative;
	line-height: auto;
	background-color: rgba(14, 36, 160, 0.767);
  }

.carousel-control-prev {
	color: red;
}

.carousel-control-prev {
	color: red;
	background: blue;
}
/*The Nav bar menu style starts here*/

.site-nav {
	position: absolute;
	top: 100px;
	right: 0%;
	background: rgb(31, 73, 146);
	clip-path: circle(0px at top right);
	transition: clip-path ease-in-out 700ms;
	z-index: 1000;
}

.site-nav--open {
	clip-path: circle(150% at top right);
}

.site-nav--open {
	height: auto;
}

.site-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav li {
	border-bottom: 1px solid #575766;
}

.site-nav li:last-child {
	border-bottom: none;
}

.site-nav a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	padding: 1em 1em 1em 1em;
}

.site-nav a:hover,
.site-nav a:focus {
	background: rgb(173, 87, 17);
	color: #ececf1;
}

.site-nav--icon {
	display: inline-block;
	font-size: 1.5em;
	margin-right: 1em;
	text-align: right;
	color: rgba(255, 255, 255, .5)
}

.menu-toggle {
	padding: 1em;
	position: absolute;
	top: 1.5em;
	right: 3.5em;
	cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
	content: '';
	display: block;
	background: #EBEBD3;
	background: #cbced3;
	height: 3px;
	width: 1.75em;
	border-radius: 3px;
	transition: all ease-in-out 500ms;
}

.hamburger::before {
	transform: translateY(-6px);
}

.hamburger::after {
	transform: translateY(3px);
}

.open .hamburger {
	transform: rotate(45deg);
}

.open .hamburger::before {
	opacity: 0;
}

.open .hamburger::after {
	transform: translateY(-3px) rotate(-90deg);
}
.cprt{
	display: grid;
	padding:60px;
	color: white;
	background: rgb(1, 0, 3);
	text-align:center;
	align-items:center;

	}
	/*count down starts here*/

	@font-face
{
    font-family: 'myfont';
src:url('../fonts/digital-7.regular.ttf');
}


.ct_container {
    position:fixed;
    top:20%;
    margin:auto;
    text-align: center;
    padding:12px;
    box-shadow: 0 0 5px 5px blue;
	font-family:sans-serif ;
	font-family:myfont ;
    border-radius: 20px;
    background:rgb(0, 0, 21);
    opacity: .7;
    z-index: 1000;
}

.info{

    /*background: rgb(8, 8, 8);*/
    color:rgb(71, 229, 54);
    font-size:1.5em;
    font-family: myfont;

}
/*count stops here*/
/* =============================================Medium size device screen========================= */
@media only screen and (min-width: 60em) {
	.wrapper {
			display: grid;
			grid-template-columns: repeat(3, 6fr);
			grid-template-rows: 100px 50px 0x 100px 100px 100px auto;
			grid-template-areas:
			"n n n n n n"
			"m m m m m m"
			"p p p p p p"
			"p p p p p p"
			"p p p p p p"
			"f f f f f f";
			grid-gap: 0.5em;
	}
	.nav {
			display: grid;
			color: rgb(5, 4, 4);
			grid-area: n;
			grid-gap: .3em;
			grid-template-columns: 1fr 4fr 1fr;
	}

	.slideshow-cont {
		display: grid;
		grid-template-columns: 6fr;

		grid-area: c;
		width: 100%;
		object-fit: cover;
		}


	.prgm {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding-top: var(--padding-top);
	padding-right:5%;
	padding-left:5%;
	padding-top: 4%;
padding-bottom: 4%;

	}
	.ssl,
	.fmly,
	.bbl,
	.pry,
	.fcc,
	.yt,
	.zm,
	.scd,
	.intnum {
			display: grid;
			padding-top: var(--padding-top);
			padding: 40px;
			grid-template-columns: 1fr;
			border-radius: 30px;
			background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(255,255,255,0.25));
			box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
			 -8px -8px 12px 0 rgba(255, 255, 255, 0.3);

	}

/* font of cards */
.bbl a, .ssl a, .yt a, .fmly a, .pry a, .fcc a, .zm a, .scd a, .intnum a {
	color:rgb(54, 56, 84);
	font-size: 1.2em;
}
.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color:black;
	border-radius: 50%;
	display: inline-block;
/*	transition: background-color 5s ease;*/
	z-index: 100;
}
	/*count down starts here*/

	@font-face
{
    font-family: 'myfont';
src:url('../fonts/digital-7.regular.ttf');
}

.ct_container {
    position:fixed;
    top:20%;
    margin:auto;
    text-align: center;
    padding:12px;
    box-shadow: 0 0 2px 2px blue;
	font-family:sans-serif ;
	font-family:myfont ;
    border-radius: 10px;
    background:rgb(0, 0, 21);
    opacity: .7;
    z-index: 1000;
}

.info{

    /*background: rgb(8, 8, 8);*/
    color:rgb(71, 229, 54);
    font-size:1em;
    font-family: myfont;

}

}
/* ==========================================BIG SCREENS STARTS==================================

This is for big screens */
@media only screen and (min-width: 80em) {
	.wrapper {
display: grid;
grid-template-columns: repeat(6, 2fr);
grid-template-rows: 100px auto;
grid-template-areas:
"n n n n n n"
"m m m m m m"
"p p p p p p"
"p p p p p p"
"p p p p p p"
"f f f f f f";
grid-gap: .5em;
}
.nav {
display: grid;
color: rgb(5, 4, 4);
grid-area: n;
grid-gap: .3em;
grid-template-columns: 2fr 8fr 2fr;
}
.prgm {
display: grid;
grid-template-columns: 4fr 4fr 4fr;
grid-area: p;
padding-top: 4%;
padding-bottom: 4%;
}
.yt,
.ssl,
.fmly,
.bbl,
.pry,
.fcc,
.zm,
.scd,
.intnum {
display: grid;
padding-top: var(--padding-top);

}
.bbl a, .ssl a, .yt a, .fmly a, .pry a, .fcc a, .zm a, .scd a, .intnum a {
	color:rgb(54, 56, 84);
	font-size: 1.7em;
}
.slideshow-cont {
display: grid;
grid-template-columns: 6fr;

grid-area: c;
width: 100%;

}

.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color:black;
	border-radius: 50%;
	display: inline-block;
/*	transition: background-color 5s ease;*/
	z-index: 100;
}
.active,
.dot:hover {
		background-color: #eee;}
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 60%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
.slideshow-cont .slideshow-container{

	color: #ddd;
	justify-items: center;
	font-size: 40px;
	padding: 8px 12px;
	width:inherit;
	font-weight:600;
	/* width: 80%; */



}
.slide-text {
	color: #ddd;
	grid-area:c;
	font-size: 40px;

	font-weight:600;
	justify-self: center;
	align-self: center;
	z-index: 1000;
}
/* Next */
	.footer {
			display: grid;
			background: rgb(102, 101, 104);
			grid-area: f;
			color: white;
			grid-template-columns: 1.5fr repeat(4, 1.125fr);
			align-items: center;
			justify-items: center;

	}
	.footer>div {
			text-align: left;
			border-left: 2px rgb(88, 79, 79) dotted;
			margin-top: 10%;
			margin-bottom: 10%;
			margin-left: 10px;
			border-bottom: none;
			grid-template-columns: 1.5fr repeat(4, 1.125fr);

	}
	.footer>div:nth-child(1) {
			margin-bottom: 10%;
			margin-left: 20px;
			padding: 20px;
			border-left: none;
			grid-template-columns: 1.5fr repeat(4, 1.125fr);
	}


.footer>div:nth-child(6) {
	text-align: center;
	padding: 20px;
	border-left: none;
	grid-template-columns:1/6;
	align-items: center;
	justify-self: center;

}

.cprt{
	padding:30px;
	color: white;
	background: rgb(1, 0, 3);
	text-align:center;
	padding-bottom:60px;
	}

	/*count down starts here*/

	@font-face
{
    font-family: 'myfont';
src:url('../fonts/digital-7.regular.ttf');
}


.ct_container {
    position:fixed;
    top:20%;
    margin:auto;
    text-align: center;
    padding:12px;
    box-shadow: 0 0 5px 5px blue;
	font-family:sans-serif ;

    border-radius: 20px;
    background:rgb(0, 0, 21);
    opacity: .7;
    z-index: 1000;
}

.info{
    /*background: rgb(8, 8, 8);*/
    color:rgb(71, 229, 54);
    font-size:1.5em;
    font-family: myfont;
}





  .navbar-bottom  a:hover {
	background: #097e92;
	color: black;
  }

  .navbar-bottom  a.active {
	background-color: #5e3a69;
	color: rgb(157, 172, 30);
  }
  #status{
	  color:rgb(71, 229, 54);
	  font-family: "Power Geez Unicode1";
	  width: inherit;
  }