body{

margin:0;
font-family:Poppins;
background:#F5F7FA;

}


/* NAVBAR */

.nav{

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

padding:20px 10%;

background:#111;

color:white;

}

.logo{

height:40px;

}

.nav ul{

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

}


/* HERO */

.hero{

text-align:center;
padding:120px 20px;

background:linear-gradient(135deg,#7B4DFF,#4A8CFF);

color:white;

}

.hero h1{

font-size:48px;

}

.hero-btns{

margin-top:30px;

}

.btn1{

background:white;
color:black;
padding:12px 25px;
margin-right:10px;
border-radius:30px;

}

.btn2{

border:2px solid white;
padding:12px 25px;
border-radius:30px;

}


/* SERVICES */

.services{

padding:80px 10%;
text-align:center;

}

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:25px;

margin-top:40px;

}

.card{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 4px 20px rgba(0,0,0,0.05);

}


/* ABOUT */

.about{

padding:80px 15%;

text-align:center;

}


/* MISSION */

.mission{

padding:80px 15%;

background:#fff;

text-align:center;

}


/* CLIENTS */

.clients{

padding:80px 0;

text-align:center;

}

.slider{

overflow:hidden;

}

.slide-track{

display:flex;

animation:scroll 20s linear infinite;

}

.slide-track img{

width:160px;

margin:0 40px;

filter:grayscale(100%);

}

@keyframes scroll{

0%{transform:translateX(0);}

100%{transform:translateX(-50%);}

}


/* CTA */

.cta{

background:#7B4DFF;

color:white;

text-align:center;

padding:80px 20px;

}

.cta form{

display:flex;

flex-direction:column;

gap:15px;

max-width:400px;

margin:auto;

}

.cta input,.cta textarea{

padding:12px;

border:none;

border-radius:5px;

}

.cta button{

padding:12px;

background:black;

color:white;

border:none;

}


/* FOOTER */

footer{

background:#111;

color:white;

text-align:center;

padding:20px;

}


/* WHATSAPP */

.whatsapp{

position:fixed;

bottom:20px;

right:20px;

background:#25D366;

color:white;

padding:15px 20px;

border-radius:30px;

text-decoration:none;

}

.typing{

font-size:28px;

margin-top:10px;

color:#fff;

font-weight:500;

border-right:3px solid white;

display:inline-block;

padding-right:5px;

animation:blink 1s infinite;

}

@keyframes blink{

0%{border-color:white;}
50%{border-color:transparent;}
100%{border-color:white;}

}