body{

margin:0;

font-family:Arial;

}



/* Header */

.header{

display:flex;

justify-content:space-between;

align-items:center;

background:black;

color:white;

padding:15px;

}


.logo{

margin-left:20px;

}


nav a{

color:white;

margin:10px;

text-decoration:none;

}



/* Hero Section */

.hero{

display:flex;

justify-content:space-around;

align-items:center;

padding:50px;

background:lightgray;

flex-wrap:wrap;

}



.hero-text{

max-width:400px;

}



.btn{

background:black;

color:white;

padding:12px 20px;

text-decoration:none;

display:inline-block;

margin-top:10px;

}



/* Features */

.features{

text-align:center;

padding:40px;

}



.cards{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:20px;

}



.card{

background:white;

padding:20px;

width:200px;

box-shadow:0px 0px 10px gray;

}



/* Steps */

.system{

background:#f2f2f2;

padding:40px;

text-align:center;

}



.steps{

display:flex;

justify-content:center;

gap:50px;

flex-wrap:wrap;

}



/* Footer */

footer{

background:black;

color:white;

text-align:center;

padding:20px;

}



/* Mobile Responsive */

@media(max-width:768px){


.hero{

flex-direction:column;

text-align:center;

}


nav{

display:block;

text-align:center;

}


}