@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

:root{
  --firstgradient: linear-gradient(
    45deg,
    #755bea,
    #6dd5ed,
    #ffafbd,
    #753a88,
    #fa878e,
    #36d1dc
    );

  --secondgradient: linear-gradient(
  45deg,
  #753a88,
  #fa878e,
  #36d1dc,
  #755bea,
  #6dd5ed,
  #ffafbd
  );
}

.tabs{
  height: 100%;
  width: 100%;
  /*display: flex;*/
  justify-content: center;
  align-items: center;
}
body{
  background: #00214d;
  width: 100%;
  height: 100%;
}
body::before
{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--secondgradient);
  background-size: 400%;
  animation: bg-animation 20s infinite alternate;
  clip-path: circle(30% at right 70%);
}
body::after
{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--firstgradient);
  background-size: 400%;
  animation: bg-animation 20s infinite alternate;
  clip-path: circle(20% at 10% 10%);
  z-index: -1;
}

@keyframes bg-animation{
  0% {background-position: left}
  100% {background-position: right;}
}

.container{
  position: relative;
  /*display: flex;
  flex-direction: row;*/
  justify-content: center;
  align-items: center;
  z-index: 1;
  margin: auto;
  height: 100%;
}

.container .card {
  position: relative;
 /* width: 288px;
  height: 360px;*/
  width:calc(33% - 40px);
  height:45vh;
  float:left;
  margin: 20px;
  box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
  border-radius: 15px;
  background: rgba(225,225,225,0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(225,225,225,0.1);
  border-left: 1px solid rgba(225,225,225,0.1);
  backdrop-filter: blur(5px);

}
.container .card .content{
  padding: 20px;
  text-align: center;
  transform: translateY(10px);
  opacity: 0.8;
  transition: 0.5s
}
.container .card:hover .content{
  transform: translateY(10px);
  opacity: 1;
}
.container .card .content h3{
  font-size: 1.5em;
  color: #fff;
  animation: shadow-color 10s ease-in-out infinite;
  z-index: 1;
  font-weight: 400;
}
.container .card .content p{
  font-size: 0.8em;
  color: #fff;
  font-weight: 200;
}
.container .card .content a{
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  margin-top: 15px;
  color:#fff;
  animation: bg-color 10s ease-in-out infinite;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 400;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.container .card .content a:hover{
  color: #fff;
  transition: 0.5s ease;
  border-radius: 20px;
}

.container .card .content a:active{
  background-color: #fff;
  background-size: 100%;
  transition: background 0s;
}

.menu{
  float: right;
  list-style-type: none;
  margin-top: 30px;
  margin-right: 20px;
}
.menu li{
  display: inline-block;
}
.menu li a{
  text-decoration: none;
  color: #fff;
  padding: 1vh 2vw;
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  backdrop-filter: blur(5px);
  background: rgba(225,225,225,0.1);
  overflow: hidden;
  font-size: 0.9em;
}

.menu li a:hover{
  color: #fff;
  transition: 0.5s ease;
  animation: bg-color 10s ease-in-out infinite;
  box-shadow: 0 0px 10px rgba(117, 91, 234, 0.4), 0 0px 20px rgba(117, 91, 234, 0.4), 0 0px 40px rgba(117, 91, 234, 0.4);
}

.main{
  margin: auto;
}
.menu li.active a{
  animation: bg-color 10s ease-in-out infinite;
  color: #fff;
}
.menu li a:active {
  background-color: #fff;
  background-size: 100%;
  transition: background 0s;
}

.title {
	display:block;
	position: relative;

	text-align:center;
	margin-top:5vh;
	margin-bottom:0vh;
	  margin-left: auto;
  margin-right: auto;
  height:25vh;
}
.title h1{
  position: absolute;
  top: 0%;
  left: 0%;
  /*transform: translate(-50%,-50%);*/
  /*margin-left: auto;
  margin-right: auto; */
  color: #fff;
  font-size: 6vw;
  font-weight: 600;
  display:block;
  width:100%;

}

.title h1:nth-child(1){
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.title h1:nth-child(2){
  animation: animate 4s ease-in-out infinite, color 10s ease-in-out infinite;
}

@keyframes animate{
  0%, 100%{
    clip-path: polygon(0 46%, 16% 45%, 34% 52%, 50% 60%, 70% 61%, 84% 59%, 100% 52%,  100% 100%, 0 100%);
  }
  50%{
    clip-path: polygon(0 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0 100%);
  }
}

@keyframes color{
0%, 100%{
	color: #755bea;
	}
	20%{color:#6dd5ed;}
    40%{color:#ffafbd;}
	60%{color:  #753a88d;}
	80%{color: #fa878e;}
}

@keyframes bg-color{
0%, 100%{
	background: #755bea;
	}
	20%{background:#6dd5ed;}
    40%{background:#ffafbd;}
	60%{background:  #753a88d;}
	80%{background: #fa878e;}
}

@keyframes shadow-color{
0%, 100%{
	text-shadow: 0 0px 10px rgba(117, 91, 234, 0.4), 0 0px 20px rgba(117, 91, 234, 0.4), 0 0px 40px rgba(117, 91, 234, 0.4), 0 0px 80px rgba(117, 91, 234, 0.4), 0 0px 160px rgba(117, 91, 234, 0.4);
	}
	
	20%{text-shadow: 0 0px 10px rgba(109,213,237, 0.4), 0 0px 20px rgba(109,213,237, 0.4), 0 0px 40px rgba(109,213,237, 0.4), 0 0px 80px rgba(109,213,237, 0.4), 0 0px 160px rgba(109,213,237, 0.4);}
    40%{text-shadow: 0 0px 10px rgba(255,175,189, 0.4), 0 0px 20px rgba(255,175,189, 0.4), 0 0px 40px rgba(255,175,189, 0.4), 0 0px 80px rgba(255,175,189, 0.4), 0 0px 160px rgba(255,175,189, 0.4);}
	
	
	60%{text-shadow: 0 0px 10px rgba(117, 58, 136,0.4), 0 0px 20px rgba(117, 58, 136,0.4), 0 0px 40px rgba(117, 58, 136,0.4), 0 0px 80px rgba(117, 58, 136,0.4), 0 0px 160px rgba(117, 58, 136,0.4); }
	80%{background: 0 0px 10px rgba(250, 135, 142,0.4), 0 0px 20px rgba(250, 135, 142,0.4), 0 0px 40px rgba(250, 135, 142,0.4), 0 0px 80px rgba(250, 135, 142,0.4), 0 0px 160px rgba(250, 135, 142,0.4);}
}


.subheading{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.subheading h1{
  color: #fff;
  font-size: 65px;
}

.text{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #000;
  font-size: 22px;
  width: 1000px;
  font-family: 'Poppins', sans-serif;
}

.logo img{
  margin-top: 20px;
  margin-left: 20px;
  float: left;
  width: 50px;
  height: auto;
  z-index: 1;
}

@media (max-height:700px){
  .container .card {
  /*position: relative;
  width: 240px;
  height: 300px;
  margin: 20px;
  box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
  border-radius: 15px;
  background: rgba(225,225,225,0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(225,225,225,0.1);
  border-left: 1px solid rgba(225,225,225,0.1);
  backdrop-filter: blur(5px);
  margin-top: 150px;*/
  }

  .title h1{
  /*position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 50px;
  font-weight: 600;*/
  }
}

@media (max-width: 700px){
	.container .card {
	  width:60%;
	  margin-left:20%;
	  margin-right:20%;
  	}

  	.title {
		margin-top:1vh;
		margin-bottom:1vh;
		height: 10vh;
	}
}

@media (max-width: 420px){
  .container{
  /*position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 1;
  margin: auto;
  height: 100%;*/
	}



  .container .card {

  width:80%;
	  margin-left:10%;
	  margin-right:10%;

  /*position: relative;
  width: 288px;
  height: 360px;
  margin: 10px;
  box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
  border-radius: 15px;
  background: rgba(225,225,225,0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(225,225,225,0.1);
  border-left: 1px solid rgba(225,225,225,0.1);
  backdrop-filter: blur(5px);*/
}

  .title {
		margin-top:5vh;
		margin-bottom:0vh;
		height: 5vh;
	}

  .title h1{
 /* position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 100px;*/
  }
}