body{
	background-color:#020617;
	color:white;
}
*{
	
}
a{
	text-decoration:none;
	color:#fff;
}
.navigation{
	display:flex;
	gap:20px;
	padding:0 20px;
	justify-content:space-between;
}
.navbar-right{
	display:flex;
	gap:10px;
}
.navbar-right h1{
	font-size:22px;
}
.navbar-center{
	margin-top:0.9rem;
}
.navbar-center span{
	margin-left:40px;
	font-size:17px;
	transition:1s;
}
.navbar-center span:hover{
	text-decoration:underline;
	font-weight:800;
	
}
.navbar-left{
	margin-top:0.8rem;
	font-size:22px;
}
.hero{
	display:flex;
	padding:10px;
	background:linear-gradient(
				to bottom right,
				#020617,
				#0f172a,
				#1e1b4d
	);
}
.hero-right{
	padding:10px 15px;
	margin-top:-3rem;
}
.hero-right h2{
	font-size:60px;
}
.hero-right h1{
	font-size:70px;
	margin-top:-3rem;
}
.hero-right p{
	margin-top:-3rem;
}
.hero-btn{
	display:flex;
	gap:20px;
}
.hero-btn span{
	background-image: radial-gradient( circle 315px at 8% 51.4%,  rgba(95,54,238,1) 0%, rgba(248,238,253,1) 100.3% );
	border-radius: 10px;
	padding:5px 20px;
}

.hero-left{
  display: flex;
  align-items: center;
  margin-right:4rem;
}
.hover-card{
  width: 360px;
  height: 320px;
  border-radius: 30px;
  background: linear-gradient(
    145deg,
    rgba(139,92,246,0.15),
    rgba(59,130,246,0.08)
  );
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 30px rgba(139,92,246,0.15);
}
.hover-box{
  width: 240px;
  height: 200px;
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    #ffffff,
    #e2e8f0
  );
	margin-top:3rem;
  transition:
    transform 0.7s ease,
    border-radius 0.6s ease,
    background 0.6s ease,
    box-shadow 0.6s ease;
}
.hover-card:hover .hover-box{

  transform:
    rotate(15deg)
    scale(1.1);
  border-radius: 45px;
  box-shadow:
    0 0 35px rgba(139,92,246,0.6);
}
.hover-box img{
	width:200px;
	height:180px;
	padding:10px 20px;
	border-radius:50px;
}
.hover-card p{
  color: white;
  font-size: 26px;
  font-style: italic;
  letter-spacing: 1px;
}

.property{
	padding:0 20px;
	background:#020617;
}
.property h2{
	text-align:center;
}
.diff-pro{
	display:flex;
	gap:20px;
}
.pro-card{
	background: linear-gradient(
    145deg,
    #111827,
    #1e293b
  );

  padding: 30px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.pro-card:hover{
	border-color: rgba(139,92,246,0.5);
}
.pro-card p{
	padding:0 20px;
}
.card-1{
	background:pink;
	margin-left:4rem;
	width:100px;
	height:100px;
	border-radius:10px;
	background-color:#ec4899;
	transition-property:background-color;
	transition-duration:0.5s;
}
.card-1:hover{
	background:#8b5cf6;
}
.card-2{
	background:pink;
	margin-left:4rem;
	width:100px;
	height:100%;
	border-radius:10px;
	max-height:100px;
	background-color:#5C5CFF;
	transition-property:width;
	transition-duration:2s;
}
.card-2:hover{
	width:180px;
}
.card-3{
	background:pink;
	margin-left:4rem;
	width:100px;
	height:100px;
	border-radius:10px;
	background-color:#A3A300;
	box-shadow:0 0 0 transparent;
	transition-property:box-shadow;
	transition-delay:1s;
}
.card-3:hover{
	box-shadow:0 0 25px;
}
.card-4{
	background:pink;
	margin-left:5rem;
	max-width:100px;
	width:100%;
	height:100%;
	max-height:100px;
	border-radius:10px;
	background-color:#2EFF2E;
	transition-property:border-radius;
	transition-duration:0.6s;
}
.card-4:hover{
	border-radius:50px;
}


.timing-section{
	text-align:center;
	background-color:#020617;
	padding:10px 20px;
}
.timing-section h2{
	font-size:30px;
	margin-bottom:40px;
}
.timing-all{
	display:flex;
	gap:20px;
}
.timing-card{
	background: linear-gradient(
    145deg,
    #111827,
    #1e293b
  );
	padding:25px;
	border-radius:20px;
	margin-bottom:25px;
	width:100%;
	max-width:500px;
	border:1px solid rgba(255, 255, 255,0.08);
}
.timing-card:hover{
	border-color: rgba(139,92,246,0.5);
}
.timing-card p{
	margin-bottom:15px;
	font-size:20px;
}
.bar{
	width:100px;
	height:15px;
	border-radius:20px;
	background-color:#4169E1;
	transition-property:width;
	transition-duration:3s;
}
.timing-card:hover .bar{
	width:100%;
}
.linear .bar{
	transition-timing-function:linear;
}
.ease .bar{
	transition-timing-function:ease;
}
.ease-in .bar{
	transition-timing-function:ease-in;
}
.ease-out .bar{
	transition-timing-function:ease-out;
}
.ease-in-out .bar{
	transition-timing-function:ease-in-out;
}
.bezier .bar{
	transition-timing-function:cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
/*----Transmormation----*/

.transform-section{
  background: #020617;
  padding: 8px 20px;
}

.transform-heading{
  text-align: center;
  margin-bottom: 50px;
}

.transform-heading h2{
  color: #f8fafc;
  margin-bottom: 10px;
}

.transform-heading p{
  font-size: 18px;
}


.transform-container{
  display: grid;
  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));
  gap: 25px;
}


.transform-card{
  background: linear-gradient(
    145deg,
    #111827,
    #1e293b
  );

  padding: 30px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.transform-card:hover{
  border-color: rgba(139,92,246,0.5);
}

.transform-card h3{
  color: #f8fafc;
  margin-bottom: 25px;
}

.transform-card p{
  color: #94a3b8;
  margin-top: 25px;
  font-size: 15px;
}


.box{
  width: 80px;

  height: 80px;

  margin: auto;

  border-radius: 14px;

  transition: transform 0.6s ease;
}


.translate-box{
 background-image: linear-gradient( 75.1deg,  rgba(34,126,34,1) 6%, rgba(99,226,17,1) 84.3% );
}

.translate-card:hover .translate-box{
  transform: translate(30px);
}


.scale-box{
  background-image: radial-gradient( circle 1002px at 49.3% 52%,  rgba(255,206,45,1) 13.7%, rgba(255,124,124,0.68) 27.9% );
}

.scale-card:hover .scale-box{
  transform: scale(1.3);
}


.rotate-box{
 background-image: radial-gradient( circle farthest-corner at 8.3% 21.6%,  rgba(252,92,125,1) 13.1%, rgba(106,130,251,1) 90% );
}

.rotate-card:hover .rotate-box{
  transform: rotate(45deg);
}


.skew-box{
  background-image: radial-gradient( circle 921px at 94.2% 47.5%,  rgba(243,31,115,1) 0%, rgba(240,117,117,1) 42.8%, rgba(240,117,117,1) 71.5%, rgba(243,31,115,1) 82.8%, rgba(255,175,2,1) 97.6% );
}

.skew-card:hover .skew-box{
  transform: skewX(20deg);
}


.matrix-box{
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(0,97,255,1) 0%, rgba(96,239,255,1) 100.7% );
}

.matrix-card:hover .matrix-box{
  transform: matrix(
    1, 0.3,  0.2,  1, 20,10 );
}


.examples-section{
	text-align:center;
}
.examples-container{
	display:flex;
	gap:20px;
	justify-content:space-evenly;
}
.example-card{
	background-color:#111827;
	padding:35px;
	border-radius:20px;
	margin-bottom:25px;
	width:100%;
	max-width:200px;
	border:1px solid rgba(255, 255, 255,0.08);
}
.btn-grad {
  background-image: linear-gradient(to right, #1A2980 0%, #26D0CE 51%, #1A2980 100%);
}

.btn-grad {
  margin:30px 20px;
  padding: 15px 45px;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  border-radius: 10px;
  display: block;
  outline: none;
  border: none;
}

.btn-grad:hover {
 box-shadow: 0 0 20px #eee;
  text-decoration: none;
}
.search{
	padding:8px 5px;
	border:none;
	background:#ADADAD;
	border-radius:5px;
	margin-top:2rem;
	margin-right:4rem;
	transition-property:padding-right;
	transition-duration:1s;
}
.search:hover{
	padding-right:50px;
	border:3px solid black;
}
.profile{
	transition:box-shadow 0.5s ease,
			   border-radius 0.5s ease;
}
.profile h3{
	padding:20px;
}
.profile :hover{
	box-shadow:0 0 30px rgba(44,115,210,1);
	border-radius:20px;
	transition-delay:1s;
}
.nav-link{
	font-size:20px;
	text-align:center;
	letter-spacing:1px;
	transition:letter-spacing 0.5s;
}
.nav-link p{
	margin-top:2rem;
}
.nav-link:hover{
	letter-spacing:10px;
}