body{

margin:0;

font-family:Poppins,sans-serif;

background:#111;

background-image:linear-gradient(135deg,#1b1b1b,#090909);

color:white;

overflow-x:hidden;

}

.logo{
    margin-bottom:25px;
}

.logo img{
    width:180px;
    height:auto;
    display:block;
}

@media(max-width:900px){

.logo{
    display:flex;
    justify-content:center;
}

.logo img{
    width:150px;
}

}

.hero{

display:flex;

justify-content:space-between;

align-items:center;

padding:80px 8%;

min-height:100vh;

}

.content{

max-width:600px;

}

.tag{

background:#d62828;

padding:10px 18px;

border-radius:40px;

font-size:15px;

}

h1{

font-family:'Bebas Neue';

font-size:95px;

margin:20px 0;

line-height:90px;

}

h1 span{

color:#f7b801;

}

p{

font-size:20px;

line-height:35px;

opacity:.9;

}

.counter{

display:flex;

gap:20px;

margin:50px 0;

}

.box{

width:110px;

height:110px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

border-radius:20px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

border:1px solid rgba(255,255,255,.1);

}

.box h2{

font-size:40px;

color:#f7b801;

margin:0;

}

.notify{

display:flex;

margin-top:40px;

}

.notify input{

flex:1;

padding:18px;

border:none;

border-radius:50px 0 0 50px;

font-size:16px;

}

.notify button{

padding:18px 35px;

border:none;

background:#d62828;

color:white;

font-weight:bold;

border-radius:0 50px 50px 0;

cursor:pointer;

}

.notify button:hover{

background:#f7b801;

color:#111;

}

.social{

margin-top:40px;

display:flex;

gap:20px;

}

.social a{

width:55px;

height:55px;

display:flex;

justify-content:center;

align-items:center;

background:#d62828;

border-radius:50%;

color:white;

font-size:22px;

transition:.4s;

text-decoration:none;

}

.social a:hover{

transform:translateY(-8px);

background:#f7b801;

color:#111;

}

.image img{

width:650px;

animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%,100%{transform:translateY(0);}

50%{transform:translateY(-20px);}

}

.features{

display:grid;

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

padding:70px 8%;

gap:30px;

background:#181818;

}

.feature{

text-align:center;

}

.feature i{

font-size:55px;

color:#f7b801;

}

.feature h3{

margin-top:20px;

}

footer{

padding:40px;

text-align:center;

background:#111;

}

@media(max-width:900px){

.hero{

flex-direction:column;

text-align:center;

}

.image img{

width:90%;

margin-top:40px;

}

.features{

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

}

.counter{

justify-content:center;

flex-wrap:wrap;

}

}

@media(max-width:600px){

.features{

grid-template-columns:1fr;

}

h1{

font-size:65px;

line-height:60px;

}

}