html{
scroll-behavior:smooth;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Poppins',sans-serif;
background:#0D0D0D;
color:white;
}
/* NAVBAR */
nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 10%;
background:#0D0D0D;
border-bottom:1px solid #2A2A2A;
}
.logo{
font-size:30px;
font-weight:bold;
color:#2563EB;
cursor:pointer;
transition:.3s;
}
.logo:hover{
transform:scale(1.08);
color:#4F8DFF;
}
nav ul{
display:flex;
list-style:none;
gap:40px;
}
nav a{
text-decoration:none;
color:white;
font-size:17px;
transition:.3s;
}
nav a:hover{
color:#2563EB;
}
/* HERO */
.hero{
height:90vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}
.hero-content{
max-width:850px;
}
.hero h1{
font-size:65px;
line-height:1.2;
margin-bottom:25px;
}
.hero p{
font-size:20px;
color:#A0A0A0;
line-height:1.7;
margin-bottom:40px;
}
.buttons{
display:flex;
justify-content:center;
gap:20px;
}
.btn-primary{
background:#2563EB;
padding:16px 38px;
border-radius:8px;
text-decoration:none;
color:white;
font-weight:600;
transition:.3s;
}
.btn-primary:hover{
background:#1D4ED8;
}
.btn-secondary{
border:1px solid #2563EB;
padding:16px 38px;
border-radius:8px;
text-decoration:none;
color:white;
transition:.3s;
}
.btn-secondary:hover{
background:#2563EB;
}
/* Mobile */
@media(max-width:768px){
nav{
flex-direction:column;
gap:20px;
}
nav ul{
gap:20px;
}
.hero h1{
font-size:42px;
}
.hero p{
font-size:17px;
}
.buttons{
flex-direction:column;
}
}
/* ========================= */
/* HERO BACKGROUND */
/* ========================= */
.hero{
position:relative;
overflow:hidden;
}
/* GRID */
.grid{
position:absolute;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(37,99,235,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px);
background-size:45px 45px;
opacity:.35;
z-index:0;
}
/* CONTENT */
.hero-content{
position:relative;
z-index:2;
}
/* GLOW */
.glow{
position:absolute;
border-radius:50%;
filter:blur(130px);
animation:float 8s infinite ease-in-out;
}
.glow1{
width:420px;
height:420px;
background:#2563EB;
left:-150px;
top:60px;
opacity:.28;
}
.glow2{
width:350px;
height:350px;
background:#2563EB;
right:-120px;
bottom:40px;
opacity:.22;
animation-delay:3s;
}
@keyframes float{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-40px);
}
100%{
transform:translateY(0px);
}
}
/* BADGE */
.badge{
display:inline-block;
padding:10px 22px;
background:rgba(37,99,235,.15);
border:1px solid rgba(37,99,235,.4);
border-radius:999px;
margin-bottom:28px;
color:#7db2ff;
font-size:15px;
backdrop-filter:blur(12px);
}
/* BUTTON GLOW */
.btn-primary{
box-shadow:
0 0 25px rgba(37,99,235,.45);
}
.btn-primary:hover{
transform:translateY(-4px);
box-shadow:
0 0 45px rgba(37,99,235,.7);
}
/* GLASS NAV */
nav{
backdrop-filter:blur(18px);
background:rgba(13,13,13,.82);
position:sticky;
top:0;
z-index:999;
}
/* HERO TEXT */
.hero h1{
max-width:900px;
margin:auto;
}
.hero p{
max-width:760px;
margin:auto;
margin-top:25px;
margin-bottom:40px;
}
/* ========================= */
/* SERVICES */
/* ========================= */
.services{
padding:120px 10%;
text-align:center;
}
.services h2{
font-size:50px;
margin-bottom:20px;
}
.section-text{
color:#9CA3AF;
font-size:18px;
max-width:700px;
margin:auto;
margin-bottom:70px;
line-height:1.8;
}
.service-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
}
.card{
background:#18181B;
border:1px solid #2A2A2A;
padding:45px;
border-radius:20px;
transition:.35s;
text-align:left;
}
.card:hover{
transform:translateY(-12px) scale(1.03);
border-color:#2563EB;
box-shadow:0 0 40px rgba(37,99,235,.22);
}
.icon{
font-size:50px;
margin-bottom:25px;
color:#2563EB;
}
.card h3{
font-size:28px;
margin-bottom:18px;
}
.card p{
color:#9CA3AF;
line-height:1.8;
font-size:17px;
}
@media(max-width:900px){
.service-grid{
grid-template-columns:1fr;
}
.services h2{
font-size:38px;
}
}
/* ========================= */
/* WHY US */
/* ========================= */
.why-us{
padding:120px 10%;
text-align:center;
}
.why-us h2{
font-size:48px;
margin-bottom:60px;
}
.why-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.why-card{
background:#18181B;
border:1px solid #2A2A2A;
padding:35px;
border-radius:18px;
transition:.35s;
}
.why-card:hover{
transform:translateY(-10px);
border-color:#2563EB;
box-shadow:0 0 30px rgba(37,99,235,.2);
}
.why-card h3{
margin-bottom:18px;
font-size:25px;
}
.why-card p{
color:#9CA3AF;
line-height:1.8;
}
/* ========================= */
/* STATS */
/* ========================= */
.stats{
padding:100px 10%;
display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;
gap:25px;
}
.stat{
background:#18181B;
padding:40px;
border-radius:18px;
border:1px solid #2A2A2A;
}
.stat h2{
font-size:48px;
color:#2563EB;
margin-bottom:15px;
}
.stat p{
color:#A0A0A0;
}
/* ========================= */
/* ABOUT */
/* ========================= */
.about{
padding:120px 10%;
text-align:center;
}
.about-text{
max-width:900px;
margin:auto;
}
.about h2{
font-size:48px;
margin-bottom:30px;
}
.about p{
font-size:19px;
line-height:2;
color:#A0A0A0;
}
@media(max-width:900px){
.why-grid{
grid-template-columns:1fr;
}
.stats{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:600px){
.stats{
grid-template-columns:1fr;
}
}
/* ========================= */
/* TESTIMONIALS */
/* ========================= */
.testimonials{
padding:120px 10%;
text-align:center;
}
.testimonials h2{
font-size:48px;
margin-bottom:60px;
}
.testimonial-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.testimonial-card{
background:#18181B;
border:1px solid #2A2A2A;
padding:35px;
border-radius:18px;
transition:.3s;
}
.testimonial-card:hover{
transform:translateY(-10px);
border-color:#2563EB;
box-shadow:0 0 30px rgba(37,99,235,.2);
}
.testimonial-card p{
color:#A0A0A0;
line-height:1.8;
font-size:18px;
margin-bottom:20px;
}
.testimonial-card h4{
color:#FFFFFF;
}
/* ========================= */
/* CONTACT */
/* ========================= */
.contact{
padding:120px 10%;
text-align:center;
}
.contact h2{
font-size:48px;
margin-bottom:20px;
}
.contact p{
color:#9CA3AF;
margin-bottom:50px;
}
.contact form{
max-width:700px;
margin:auto;
display:flex;
flex-direction:column;
gap:20px;
}
.contact input,
.contact textarea{
background:#18181B;
border:1px solid #2A2A2A;
padding:18px;
border-radius:12px;
color:white;
font-size:16px;
}
.contact input:focus,
.contact textarea:focus{
outline:none;
border-color:#2563EB;
}
.contact button{
background:#2563EB;
color:white;
padding:18px;
border:none;
border-radius:12px;
font-size:17px;
cursor:pointer;
transition:.3s;
}
.contact button:hover{
background:#1D4ED8;
}
.contact-email{
margin-top:40px;
font-size:20px;
color:#7db2ff;
}
/* ========================= */
/* FOOTER */
/* ========================= */
footer{
padding:35px;
text-align:center;
border-top:1px solid #2A2A2A;
color:#777;
margin-top:100px;
}
@media(max-width:900px){
.testimonial-grid{
grid-template-columns:1fr;
}
}
/* ========================= */
/* WORKFLOW */
/* ========================= */
.workflow{
padding:120px 10%;
text-align:center;
}
.workflow h2{
font-size:48px;
margin-bottom:20px;
}
.workflow-text{
color:#A0A0A0;
max-width:720px;
margin:auto;
margin-bottom:70px;
line-height:1.8;
font-size:18px;
}
.workflow-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.workflow-card{
background:#18181B;
padding:45px;
border-radius:20px;
border:1px solid #2A2A2A;
transition:.35s;
}
.workflow-card:hover{
transform:translateY(-12px);
border-color:#2563EB;
box-shadow:0 0 35px rgba(37,99,235,.25);
}
.workflow-card i{
font-size:55px;
color:#2563EB;
margin-bottom:25px;
}
.workflow-card h3{
margin-bottom:20px;
font-size:28px;
}
.workflow-card p{
color:#A0A0A0;
line-height:1.8;
}
@media(max-width:900px){
.workflow-grid{
grid-template-columns:1fr;
}
}