*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Poppins,sans-serif;
background:#111;
color:white;

}

header{

Position:static;
width:100%;
z-index:999;
background:black;

}

nav{

display:flex;
justify-content:space-between;
align-items:center;
padding:18px 60px;

}

.logo img{

Height:100px;

}

nav ul{

display:flex;
gap:25px;
list-style:none;

}

nav a{

text-decoration:none;
color:white;
font-weight:500;
transition:.3s;

}

nav a:hover{

color:#ab92ff;

}

.hero{

height:100vh;

background:url("../img/hero.jpg") center center;
background-size:cover;

position:relative;

display:flex;
align-items:center;

}

.overlay{

position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.68);

}

.content{

position:relative;

display:flex;
justify-content:space-between;
align-items:center;

width:90%;
margin:auto;

}

.left{

width:55%;

}

.left h3{

font-size:30px;
color:#b698ff;

}

.left h1{

font-size:82px;
margin:15px 0;

}

.left p{

font-size:23px;
line-height:1.7;

margin-bottom:50px;

}

.services{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:35px;

}

.services div{

text-align:center;

}

.services i{

font-size:40px;
color:#a68cff;

margin-bottom:12px;

}

.services span{

display:block;

}

.right img{

height:700px;

filter:drop-shadow(0 0 40px black);

}

footer{

background:#0c0c0c;

padding:40px;

display:flex;

justify-content:space-around;

align-items:center;

font-size:22px;

}

footer i{

color:#a68cff;

margin-right:15px;

}