body{
  margin:0;
  background:#000051;
  color:#e8e8ff;
  font-family:'Rajdhani',sans-serif;
  overflow-x:hidden;
}

/* HERO (400px HEIGHT) */
.hero{
  height:400px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

.hero h1{
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:900;
  background:linear-gradient(90deg,#3d52ff,#d600c8,#ff6a00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{
    color: #ffffff;
    max-width: 600px;
    font-size: 18px;
}

.discription{
    color: #000000;
    max-width: 600px;
    font-size: 16px;
}

.title_txt{
		font-family: 'Rajdhani', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #000877;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

/* THREE CANVAS */
#bg3d{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

.hero-content{
  position:relative;
  z-index:2;
	margin-top: 121px;
}

/* CARDS */
.card-ai{
  background:rgb(222 245 255);
  border:1px solid rgba(214,0,200,.2);
  border-radius: 30px 0px 30px 0px;
  padding:25px;
  transition:.3s;
  height:100%;
}

.card-ai:hover{
  transform:translateY(-6px);
  box-shadow:0 0 35px rgba(214,0,200,.4);
}

.card-ai i{
  font-size:1.8rem;
  margin-bottom:12px;
  color:#d600c8;
}

section{
  padding:60px 0;
}

.title h2{
  text-align:center;
  margin-bottom:40px;
	font-size:45px;
	font-weight: 700;
}

.title span{
  background:linear-gradient(90deg,#3d52ff,#d600c8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* RESPONSIVE FIXES */
@media(max-width:768px){
  .hero{height:320px;}
}

@media (max-width: 576px) {
		.hero-content{
					 margin-top: 195px;
		}

}

}