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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:#F8FAFC;

color:#1E293B;

line-height:1.6;

}

.container{

width:90%;

max-width:1280px;

margin:auto;

}

header{

position:fixed;

top:0;

left:0;

width:100%;

background:white;

box-shadow:0 2px 20px rgba(0,0,0,.05);

z-index:999;

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

}

.logo{

font-family:Poppins;

font-size:32px;

font-weight:700;

color:#2563EB;

text-decoration: none;

}

nav ul{

display:flex;

gap:40px;

list-style:none;

}

nav a{

text-decoration:none;

color:#1E293B;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:#2563EB;

}

.btn-primary{

background:#2563EB;

padding:14px 28px;

border-radius:10px;

color:white;

text-decoration:none;

display:inline-block;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(37,99,235,.3);

}

.btn-secondary{

padding:14px 28px;

border:2px solid #2563EB;

color:#2563EB;

border-radius:10px;

text-decoration:none;

margin-left:15px;

}

/*====================================
HERO
====================================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:90px;

background:
linear-gradient(rgba(7,20,55,.65),rgba(7,20,55,.65)),
url("../images/hero-banner.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

color:#fff;

}

.hero .container{

width:100%;

}

.hero-content{

max-width:620px;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

background:rgba(37,99,235,.18);

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

border-radius:30px;

font-size:14px;

font-weight:600;

letter-spacing:2px;

margin-bottom:30px;

}

.hero h1{

font-size:62px;

font-weight:700;

line-height:1.15;

margin-bottom:25px;

font-family:'Poppins',sans-serif;

}

.hero p{

font-size:20px;

line-height:1.9;

color:#D1D5DB;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

flex-wrap:wrap;

}

.hero-highlights{

display:flex;

gap:60px;

}

.highlight h3{

font-size:38px;

font-family:'Poppins',sans-serif;

margin-bottom:8px;

color:#60A5FA;

}

.highlight span{

font-size:16px;

color:#CBD5E1;

}

@media(max-width:992px){

.hero{

text-align:center;

padding:140px 0 80px;

background-position:right center;

}

.hero-content{

max-width:100%;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

justify-content:center;

}

.hero-highlights{

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

}

@media(max-width:576px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons a{

width:100%;

max-width:280px;

text-align:center;

}

}

/* ===========================
   SERVICES
=========================== */

.services {

    padding:100px 0;

    background:#ffffff;

}

.section-title{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-title span{

    color:#2563EB;

    font-weight:700;

    letter-spacing:1px;

    font-size:14px;

}

.section-title h2{

    font-family:Poppins,sans-serif;

    font-size:44px;

    margin:18px 0;

    color:#0F172A;

}

.section-title p{

    color:#64748B;

    font-size:18px;

    line-height:1.8;

}

.services-grid{

    display:grid;

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

    gap:35px;

}

.service-card{

    background:#fff;

    padding:40px;

    border-radius:18px;

    border:1px solid #E2E8F0;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:5px;

    background:#2563EB;

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(15,23,42,.08);

}

.service-card:hover::before{

    width:100%;

}

.service-icon{

    width:72px;

    height:72px;

    border-radius:16px;

    background:#DBEAFE;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:25px;

}

.service-card h3{

    font-family:Poppins,sans-serif;

    font-size:24px;

    margin-bottom:18px;

    color:#0F172A;

}

.service-card p{

    color:#64748B;

    margin-bottom:25px;

    line-height:1.8;

}

.service-card ul{

    list-style:none;

    margin-bottom:30px;

}

.service-card li{

    padding:10px 0;

    color:#334155;

    border-bottom:1px solid #F1F5F9;

}

.service-card li:last-child{

    border:none;

}

.service-card li::before{

    content:"✓";

    color:#2563EB;

    font-weight:bold;

    margin-right:10px;

}

.service-card a{

    color:#2563EB;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.service-card a:hover{

    letter-spacing:.5px;

}

/* Responsive */

@media(max-width:992px){

.services-grid{

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

}

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:34px;

}

}

/*====================================
WHY SERVFUSION
====================================*/

.why-us{

padding:110px 0;

background:#F8FAFC;

}

.why-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.why-card{

background:#fff;

padding:45px;

border-radius:18px;

transition:.35s;

border:1px solid #E5E7EB;

}

.why-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(0,0,0,.08);

}

.why-icon{

width:72px;

height:72px;

background:#2563EB;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#fff;

margin-bottom:25px;

}

.why-card h3{

font-size:24px;

font-family:Poppins;

margin-bottom:15px;

}

.why-card p{

color:#64748B;

line-height:1.8;

}

/*====================================
STATS
====================================*/

.stats{

background:linear-gradient(135deg,#0F172A,#1E3A8A);

padding:90px 0;

color:#fff;

}

.stats-grid{

display:grid;

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

gap:40px;

}

.stat-box{

text-align:center;

}

.stat-box h2{

font-size:64px;

font-family:Poppins;

margin-bottom:15px;

}

.stat-box span{

font-size:18px;

opacity:.9;

}

@media(max-width:992px){

.why-grid{

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

}

.stats-grid{

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

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

}

/*====================================
INDUSTRIES
====================================*/

.industries{

padding:110px 0;

background:#ffffff;

}

.industry-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.industry-card{

background:linear-gradient(180deg,#ffffff,#f8fafc);

padding:45px;

border-radius:20px;

border:1px solid #E2E8F0;

transition:.35s;

position:relative;

overflow:hidden;

}

.industry-card::before{

content:"";

position:absolute;

left:0;

top:0;

height:100%;

width:5px;

background:#2563EB;

transform:scaleY(0);

transition:.35s;

transform-origin:top;

}

.industry-card:hover::before{

transform:scaleY(1);

}

.industry-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 50px rgba(15,23,42,.08);

}

.industry-icon{

width:80px;

height:80px;

background:#DBEAFE;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

margin-bottom:25px;

}

.industry-card h3{

font-family:Poppins,sans-serif;

font-size:24px;

margin-bottom:18px;

color:#0F172A;

}

.industry-card p{

color:#64748B;

line-height:1.8;

font-size:16px;

}

@media(max-width:992px){

.industry-grid{

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

}

}

@media(max-width:768px){

.industry-grid{

grid-template-columns:1fr;

}

}

/*====================================
TECHNOLOGY
====================================*/

.technology{

padding:110px 0;

background:#F8FAFC;

}

.tech-category{

margin-top:55px;

}

.tech-category h3{

font-size:28px;

font-family:Poppins,sans-serif;

margin-bottom:25px;

color:#0F172A;

}

.tech-grid{

display:grid;

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

gap:20px;

}

.tech-card{

background:#fff;

padding:22px;

border-radius:14px;

border:1px solid #E2E8F0;

text-align:center;

font-weight:600;

transition:.35s;

cursor:default;

}

.tech-card:hover{

background:#2563EB;

color:#fff;

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(37,99,235,.30);

}

/*====================================
PROCESS
====================================*/

.process{

padding:120px 0;

background:#ffffff;

position:relative;

}

.process-wrapper{

position:relative;

margin-top:70px;

}

.process-line{

position:absolute;

top:48px;

left:0;

width:100%;

height:4px;

background:#E2E8F0;

}

.process-grid{

display:grid;

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

gap:20px;

position:relative;

}

.process-step{

text-align:center;

position:relative;

}

.process-circle{

width:96px;

height:96px;

margin:auto;

border-radius:50%;

background:#2563EB;

color:#fff;

font-size:34px;

font-weight:700;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 15px 40px rgba(37,99,235,.30);

transition:.35s;

position:relative;

z-index:5;

}

.process-step:hover .process-circle{

transform:scale(1.1);

background:#0F172A;

}

.process-step h3{

margin-top:30px;

font-family:Poppins;

font-size:22px;

margin-bottom:15px;

}

.process-step p{

color:#64748B;

font-size:15px;

line-height:1.7;

padding:0 10px;

}

@media(max-width:1200px){

.process-grid{

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

gap:50px;

}

.process-line{

display:none;

}

}

@media(max-width:768px){

.process-grid{

grid-template-columns:1fr;

}

}

/*====================================
CASE STUDIES
====================================*/

.case-studies{

padding:120px 0;

background:#F8FAFC;

}

.case-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.case-card{

background:#fff;

padding:40px;

border-radius:20px;

border:1px solid #E2E8F0;

transition:.35s;

display:flex;

flex-direction:column;

}

.case-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(15,23,42,.08);

}

.case-tag{

display:inline-block;

align-self:flex-start;

padding:8px 16px;

background:#DBEAFE;

color:#2563EB;

font-weight:600;

font-size:14px;

border-radius:999px;

margin-bottom:20px;

}

.case-card h3{

font-family:Poppins,sans-serif;

font-size:26px;

margin-bottom:18px;

color:#0F172A;

}

.case-card p{

color:#64748B;

line-height:1.8;

margin-bottom:25px;

}

.case-card ul{

list-style:none;

padding:0;

margin:0;

}

.case-card li{

padding:10px 0;

border-top:1px solid #F1F5F9;

color:#334155;

}

.case-card li:first-child{

border-top:none;

}

@media(max-width:992px){

.case-grid{

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

}

}

@media(max-width:768px){

.case-grid{

grid-template-columns:1fr;

}

}

/*====================================
TESTIMONIALS
====================================*/

.testimonials{

padding:120px 0;

background:#ffffff;

}

.testimonial-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.testimonial-card{

background:#F8FAFC;

padding:40px;

border-radius:20px;

border:1px solid #E2E8F0;

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(15,23,42,.08);

}

.quote-icon{

font-size:48px;

color:#2563EB;

margin-bottom:20px;

}

.testimonial-card p{

line-height:1.9;

color:#475569;

margin-bottom:35px;

}

.testimonial-footer{

display:flex;

align-items:center;

gap:15px;

}

.avatar{

width:55px;

height:55px;

border-radius:50%;

background:#2563EB;

color:white;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

font-size:22px;

}

.testimonial-footer h4{

margin:0;

font-family:Poppins;

}

.testimonial-footer span{

color:#64748B;

font-size:15px;

}

/*====================================
TRUST
====================================*/

.trust{

background:#0F172A;

padding:90px 0;

color:white;

}

.trust-grid{

display:grid;

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

gap:40px;

}

.trust-item{

text-align:center;

padding:20px;

}

.trust-item h3{

font-size:26px;

font-family:Poppins;

margin-bottom:20px;

}

.trust-item p{

opacity:.85;

line-height:1.8;

}

@media(max-width:992px){

.testimonial-grid{

grid-template-columns:1fr;

}

.trust-grid{

grid-template-columns:1fr;

}

}

/*====================================
CTA
====================================*/

.cta{

padding:120px 0;

background:#F8FAFC;

}

.cta-box{

background:linear-gradient(135deg,#2563EB,#1D4ED8);

padding:70px;

border-radius:24px;

display:flex;

justify-content:space-between;

align-items:center;

gap:50px;

color:white;

}

.cta-content span{

font-weight:700;

letter-spacing:1px;

opacity:.9;

}

.cta-content h2{

font-size:46px;

font-family:Poppins,sans-serif;

margin:18px 0;

line-height:1.2;

}

.cta-content p{

font-size:18px;

opacity:.95;

max-width:650px;

}

.cta-actions{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.cta .btn-secondary{

border-color:#fff;

color:#fff;

}

.cta .btn-secondary:hover{

background:#fff;

color:#2563EB;

}

/*====================================
FOOTER
====================================*/

footer{

background:#0F172A;

color:#CBD5E1;

padding:80px 0 25px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

margin-bottom:50px;

}

.footer-column h3{

font-family:Poppins,sans-serif;

font-size:34px;

color:#fff;

margin-bottom:20px;

}

.footer-column h4{

font-size:22px;

margin-bottom:20px;

color:#fff;

}

.footer-column p{

line-height:1.8;

}

.footer-column ul{

list-style:none;

padding:0;

}

.footer-column li{

margin-bottom:14px;

}

.footer-column a{

color:#CBD5E1;

text-decoration:none;

transition:.3s;

}

.footer-column a:hover{

color:#fff;

padding-left:6px;

}

.footer-bottom{

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

padding-top:25px;

text-align:center;

font-size:15px;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:992px){

.cta-box{

flex-direction:column;

text-align:center;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

}

.cta-content h2{

font-size:34px;

}

}

/*====================================
ABOUT
====================================*/

.about{

padding:120px 0;

background:#ffffff;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

height:550px;

border-radius:24px;

background:linear-gradient(135deg,#2563EB,#0F172A);

position:relative;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

}

.about-image::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

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

}

.about-image::after{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

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

top:40px;

right:40px;

}

.experience-card{

position:relative;

background:#fff;

padding:40px;

border-radius:20px;

text-align:center;

box-shadow:0 25px 60px rgba(0,0,0,.15);

z-index:2;

}

.experience-card h2{

font-family:Poppins;

font-size:72px;

color:#2563EB;

margin-bottom:10px;

}

.experience-card span{

font-size:20px;

font-weight:600;

color:#334155;

}

.section-tag{

display:inline-block;

padding:8px 18px;

background:#DBEAFE;

color:#2563EB;

border-radius:30px;

font-weight:600;

margin-bottom:20px;

}

.about-content h2{

font-family:Poppins;

font-size:46px;

line-height:1.2;

margin-bottom:25px;

color:#0F172A;

}

.about-content p{

font-size:17px;

line-height:1.9;

color:#64748B;

margin-bottom:22px;

}

.about-features{

margin:35px 0;

}

.feature{

display:flex;

gap:20px;

margin-bottom:25px;

align-items:flex-start;

}

.feature-icon{

width:42px;

height:42px;

background:#2563EB;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-weight:700;

flex-shrink:0;

}

.feature h4{

font-size:20px;

margin-bottom:8px;

font-family:Poppins;

color:#0F172A;

}

.feature p{

margin:0;

}

@media(max-width:992px){

.about-grid{

grid-template-columns:1fr;

}

.about-image{

height:400px;

}

.about-content h2{

font-size:36px;

}

}

/*====================================
MOBILE MENU
====================================*/

.menu-toggle{

display:none;

font-size:30px;

background:none;

border:none;

cursor:pointer;

color:#0F172A;

}

@media (max-width:992px){

.desktop-btn{

display:none;

}

.menu-toggle{

display:block;

z-index:1001;

}

.navbar{

position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:#ffffff;

padding:100px 30px;

transition:.35s;

box-shadow:-5px 0 30px rgba(0,0,0,.15);

}

.navbar.active{

right:0;

}

.navbar ul{

display:flex;

flex-direction:column;

gap:25px;

}

.navbar a{

font-size:18px;

}

}

/*====================================
FOOTER CONTACT
====================================*/

.contact-info{

display:flex;

flex-direction:column;

gap:18px;

margin-top:20px;

}

.contact-item{

display:flex;

align-items:flex-start;

gap:15px;

}

.contact-item i{

width:40px;

height:40px;

background:#2563EB;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:16px;

flex-shrink:0;

transition:.3s;

}

.contact-item:hover i{

background:#3B82F6;

transform:translateY(-2px);

}

.contact-item a{

color:#CBD5E1;

text-decoration:none;

transition:.3s;

}

.contact-item a:hover{

color:#ffffff;

}

.contact-item span{

color:#CBD5E1;

line-height:1.6;

}