style.css

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins&family=Roboto&family=Ubuntu+Mono:wght@700&display=swap');

:root {
    /* --p-color: #281241; */
    --p-color: #1D0937;
    --palt-color: #1F094A;
    --s-color: #3400b7;
    --t-color: #00ffff;
}
*{
    margin: 0;
    padding: 0;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
	/* font-family: 'Poppins', sans-serif; */
	/* font-family: 'Ubuntu Mono', monospace; */
	/* font-family: 'Roboto', sans-serif; */
	box-sizing: border-box;
	

}
html{
	scroll-behavior: smooth;
	height: 100%;
}

body{
    /* background: url(images/bg.jpg) no-repeat fixed; */
    background-color: #1b0332fa;
    /* background-blend-mode:soft-light;   */
	overflow-x:hidden ;	
	z-index: -1;
	height: 100%;
}
/* 
body::after {
	content: '';
	display: flex
	/* height: 50px; Set same as footer's height */
 */

.home{
    background: rgba(32, 34, 141, 0.85);
    position:relative;
    margin: 0% 5% 50%;
    padding: 2% 0% 0%
    ;
}
nav {
    display:block;
    font-family: 'Times New Roman', Times, serif;
    overflow: hidden;
    /* background-color: rgba(33, 99, 82, 0.8); */
	background-color: rgba(132, 0, 255, 0.403);
    height: 80px;
    /* position: -webkit-sticky; */
    position: sticky;
    top: 0;
    z-index: 3;
	margin: 0 -13px 0 0;
}
#one{
    display: flex;
    list-style-type: none;
    height: 80px;
    float: left;
    margin: 0 5px 0;
}
#mid{
	display: flex;
    list-style-type: none;
    height: 80px;
    float: left;
    margin: 0 0 0 25%  ;
}
#mid li{
	display: flex;
	align-items: center;
	justify-content: center;
	padding:10px;
	
}
#mid li a{
	text-decoration: none;
	color: white;
	font-family: 'Ubuntu Mono', monospace;	
	font-size: 20px;
}
#mid li a:hover{
	color: orange;
}
#two{
    display: flex;
    list-style-type: none;
    height: 80px;
    float: right;
    padding: 0 15px;
}


.icons {
    display: flex;
    align-items: center;
    border-right: 5px solid #edffea;
    border-radius: 5px;
    padding: 0 5px;
}
.icons .smtg{
    padding: 10px 10px;
}

.overlay {
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .3s ease;
    background-color: #ff4800;
    overflow: hidden;
    border-radius: 20px;
  }

.smtg:hover .overlay {
    opacity: 1;
}
.hove {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
  }

#one .junkai img {
    width: auto;
    height: 90%;
}
.junkai {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    border: none;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.0);
}
.backgro{
	position: absolute;
	z-index: 0;
	height: 100%;

}
.backgro .img1
  {
    position:absolute;
	
    top :-100px;
  }
.backgro .img2
  {
    position: absolute;
    top: 330px;
    left: 950px;
   
  }
.backgro .img3
  {
    position: absolute;
    top: 950px;
    left: 10px;
  }
.backgro .img4
{
    position: absolute;
    top: 1980px;
    left:1050px;
}
.backgro .img5
{
    position: absolute;
    top:1600px;
    left:1	0px;
}

.smtg {
    position: relative;
}
.smtg img{
    height: 40px;
    display: block;
    position: relative;
}
#slogan{
	float: center;
	height: auto;
	margin: 0 0 2% 5%;
	text-align: center;
}
.caption{
	position: relative;
	overflow-y: auto;
	height:30%;
}
.agenda{
	display: flex;
	margin: 0 0 2% 3%;
	border-bottom: 3px solid gold ;
	width: fit-content;
	transition: border 1s ease-in-out 2s;
	text-transform: uppercase;
}

.agenda-content{
	display: flex;
	margin: 0 0 -5% 45%;
	max-width: 600px;
	/* background-color: #6900cc; */
	overflow: hidden;
	border-radius: 25px;
	/* border: 1px solid black; */
	/* box-shadow: 2px 6px 5px 0 whitesmoke; */
}
section{
	position: relative	;
	height: 100%;
	z-index: 2;
}
.agenda-content p{
	font-family: 'Roboto', sans-serif;
	font-size: 45px;
	font-weight: 500;
	color: #edffea;
	max-width: 600px;	
}
.road-map{
	margin: 5% 0 0 3%;
	border-bottom: 3px solid gold ;
	width: fit-content;
	transition: border .5s ease-in-out 1s;
}

.road-map h2, .agenda h2{
	color: #edffea;
	font-size: 40px;
	font-weight: 600;
	text-transform: uppercase;
}
.cards{
	
	margin: 10% 5% ;
	position: relative;
	display: flex;
  	flex-direction: row;
  	align-items:stretch;
  	overflow: hidden;
  	width: 600px;
  	width: 1500px
	
  	/* width: calc(100% - 100px); */
}
.cards .phase{
	margin: 10px;
	display: inline-block;
	width: 900px;
	max-width: 300px;
	height: 450px;
	border-radius: 30px;
	transform: translateX(0);
	transition: max-width 1s, height 1s, transform 0.75s;
	cursor: pointer;
}
.cards .phase h6{
	font-size: 55px;
	font-family: 'Ubuntu Mono', monospace;
	font-weight: bold;
	text-transform:uppercase;
}
.phase:nth-child(1){
	/* background-color: #f700ff; */
	background-color: #FFABE1	;
	margin: 10px 0 0 0;
	padding: 5% 5% 0 1.5%;
	z-index: 3;
	box-shadow: -5px 5px 20px 4px ;
	
}
.phase:nth-child(1):hover{
	background-color: #FFABE1;
	padding: 10% 5% 0 2.5%;
	max-width: 800px;
	transform: translate(5%, 2.5%);
	height: 500px;
	z-index: 6;
}
.phase:nth-child(2){
	background-color: #C689C6;
	margin: 10px 0 0 -40px;
	padding: 10% 5% 0 1.5%;
	z-index: 4;
	box-shadow: -5px 5px 20px 4px ;
}
.phase:nth-child(2):hover{
	background-color: #C689C6;
	margin: 10px 0 0 -35px;
	padding: 15% 5% 0 1.5%;
	transform: translate(-3%, 2.5%);
	max-width: 800px;
	height: 500px;
	z-index: 7;
}
.phase:nth-child(3){
	background-color:#937DC2;
	margin: 10px 0 0 -35px;
	padding: 15% 5% 0 1.5%;
	z-index: 5;
	box-shadow: -5px 5px 20px 4px ;
}
.phase:nth-child(3):hover{
	background-color:#937DC2;
	margin: 10px 0 0 -35px;
	transform: translate(-3%, 2.5%);
	max-width: 800px;
	height: 500px;
	z-index: 8;
}

.phase p{
	font-size: 25px;
	font-family: 'Poppins', sans-serif;
	color: transparent;
}
.phase:hover p{
	color: black;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
#myBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: rgba(140, 0, 255, 0.486);
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
  }
  
  #myBtn:hover {
	background-color: rgb(140, 0, 255);
  }
  .material-symbols-outlined {
	font-variation-settings:
	'FILL' 100,
	'wght' 400,
	'GRAD' 50,
	'opsz' 48;
	font-size: 10px;
  }
.cube{
	position: absolute;
	top:0;
	right: 0;
	display: inline-flex;
	/* margin: 0 0 0 60%; */
	z-index: 9	;
	width: 600px;
	height: 600px;
}
#goals .cube img{
	transform: rotate(-90deg);
	width: 600px;
	height: 600px;
}
.stepbox {
	position: relative;
	margin: 4% 2%;
	max-width: 900px;
	height: 500px;
}
.steps{
	margin: 25px 10px;
	display: inline-block;
	width: 900px;
	max-width: 600px;
	height: 70px;
	border-radius: 30px;
	position: relative;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.781);
	box-shadow: 2px 2px 5px 5px rgb(24, 24, 24);
}
.steps h3{
	position: relative;
	display: block;
	padding:  15px 0 0 5px;
	font-family: 'Ubuntu Mono', monospace;
	font-size: 30px;
	font-weight: 600px;

}
.steps:nth-child(1){
	background-color: #FFE6F7;
	margin-left: 0%;
}
.steps:nth-child(2){
	background-color: #FFABE1;
	margin-left: 7%;
}
.steps:nth-child(3){
	background-color: #C689C6;
	margin-left: 14%;
}
.steps:nth-child(3) h3{
	padding:  18px 0 0 5px;
	font-size: 24px;
}
.steps:nth-child(4){
	background-color: #937DC2;
	margin-left: 21%;
}
	
footer {
	display: flex;
	bottom: 0;
	z-index: 2;
}

.footer-distributed{
	background-color: rgb(85, 0, 165);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;
	padding: 10px 10px 10px ;
	display: flex;
	/* padding: 55px 50px; */


}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	justify-content: space-between;
}

/* Footer left */

.footer-distributed .footer-left{
	width: 33%;
	align-items: center	;
	border-right: 1px solid white;
}

/* The company logo */


.footer-distributed .footer-left h3{
	color: white;
	font-family: 'Ubuntu Mono', monospace;
	font-size: 50px;

}
.footer-distributed h3 span{
	color:  lightseagreen;
}

/* Footer links */

.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
  font-weight:400;
	text-decoration: none;
	color:  inherit;
	font-family: 'Poppins', sans-serif;
}

.footer-distributed .footer-company-name{
	color:  #222;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
	width: 33%;
	font-family: 'Ubuntu Mono', monospace;
	display: inline-block;
	margin-left: 30px;
	border-right: 1px solid white;
	
}
.footer-center h4{
	color: white;
	font-family: 'Ubuntu Mono', monospace;
	font-size: 28px;
	font-weight: 400;
}

/* .footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	
	vertical-align: middle;
} */

/* .footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
} */

.footer-distributed .footer-center p{
	display: flex;
	color: #b8b8b8;
  font-weight:200;
  
	/* vertical-align: middle; */
}

.footer-distributed .footer-center p span, .footer-right div p span{
	display:inline-flex;
	font-weight: normal;
	font-size:14px;
	padding: 3px;
	color: rgb(255, 255, 255);
	margin-right:10px ;
	background-color: black;
	border-radius: 100%;

}

.footer-distributed .footer-center p a{
	color:  lightseagreen;
	text-decoration: none;;
}

.footer-distributed .footer-links a:before {
  content: "|";
  font-weight:300;
  font-size: 20px;
  left: 0;
  color: #fff;
  display: inline-block;
  padding-right: 5px;
}

.footer-distributed .footer-links .link-1:before {
  content: none;
}

/* Footer Right */

.footer-distributed .footer-right{
	width: 20%;
	color: white;
	font-family: 'Ubuntu Mono', monospace;
	margin-left: 30px;	
}

.footer-distributed .footer-right .footer-company-about{
	line-height: 20px;
	color:  #92999f;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}

.footer-distributed .footer-right  h4{
	display: block;
	color:  #ffffff;
	font-size: 23px;
	font-weight: bold;
	margin-bottom: 5px;
}
.footer-right p span{
	display:inline-flex;
	font-size:16px;
	padding: 5px;
	margin: 10px 10px 0 0;	
	background-color: black;	
	border-radius: 100%;
	color: white;
}
.footer-right div p{
	padding-top: -45px 0 0;
	margin-top: -5px;
	color: rgb(189, 189, 189);

}

.reveal {
	position: relative;
	opacity: 0;
  }
  
  .reveal.active {
	opacity: 1;
  }
  
.active.fade-left {
	animation: fade-left 0.8s ease-in-out;
  }
/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

	.footer-distributed{
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

	.footer-distributed .footer-center i{
		margin-left: 0;
	}

}
.footer-distributed .footer-center .team h4{
	color: white;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
}
@keyframes fade-left {
	0% {
	  transform: translateX(-100px);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0);
	  opacity: 1;
	}
  }