*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#f7f7f7;
overflow-x:hidden;
}

.topbar{
display:flex;
justify-content:space-between;
padding:12px 100px;
background:#fff;
}

.social i{
margin-left:20px;
color:#6c3cf0;
cursor:pointer;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 100px;
background:white;
}

.logo h1{
font-size:25px;
}

.logo span{
font-size:16px;
display:block;
}

nav ul{
display:flex;
gap:40px;
list-style:none;
}

nav a{
text-decoration:none;
color:black;
font-size:18px;
}

nav button{
background:#6c3cf0;
color:white;
padding:14px 32px;
border:none;
border-radius:35px;
cursor:pointer;
}

.hero{

height:100vh;

position:relative;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

background:#f7f7f7;

}

/* BACKGROUND BLOBS */

.hero::before{

content:"";

position:absolute;

left:-200px;

top:-100px;

width:700px;

height:700px;

background:radial-gradient(circle,
rgba(194,255,228,.55),
transparent 70%);

filter:blur(40px);

}

.hero::after{

content:"";

position:absolute;

right:-180px;

top:-80px;

width:650px;

height:650px;

background:radial-gradient(circle,
rgba(214,223,255,.55),
transparent 70%);

filter:blur(50px);

}

.hero-content{

position:relative;

z-index:2;

display:flex;

align-items:center;

justify-content:center;

gap:80px;

}

/* LEFT TEXT */

.left-text{

text-align:center;

}

.left-text h3{

font-size:50px;

color:#efab92;

font-weight:700;

margin-bottom:10px;

}

.left-text h1{

font-size:90px;

font-weight:900;

background:linear-gradient(
90deg,
#4e5cff,
#9d3dff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

line-height:1;

}

.right-text{

margin-top:40px;

font-size:30px;

color:#efab92;

}

/* CENTER IMAGE */

.hero-image{

position:relative;

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

}

.hero-image img{

width:420px;

}

/* FLOATING ANIMATION */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

.hero-glow{

position:absolute;

bottom:-200px;

left:50%;

transform:translateX(-50%);

width:500px;

height:500px;

background:rgba(255,170,230,.35);

filter:blur(120px);

border-radius:50%;

}
/* ABOUT */
.about{

padding:40px 100px;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.image-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

position:relative;

}

.image-grid img{

width:100%;

height:280px;

object-fit:cover;

border-radius:22px;

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.experience-card{

position:absolute;

bottom:-30px;

right:40px;

background:#6c3cf0;

color:white;

padding:25px;

border-radius:20px;

text-align:center;

}

.about-right h2{

font-size:52px;

margin:20px 0;

}

.feature-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin:35px 0;

}

.feature-card{

display:flex;

gap:18px;

padding:22px;

background:#fafafa;

border-radius:18px;

transition:.4s;

}

.feature-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.feature-card i{

font-size:28px;

color:#6c3cf0;

margin-top:5px;

}

.about-stats{

display:flex;

gap:25px;

margin:35px 0;

}

.stat-box{

background:#f7f7f7;

padding:20px 30px;

border-radius:18px;

text-align:center;

}

.stat-box h2{

color:#6c3cf0;

}

.service-list{

margin:35px 0;

display:flex;

flex-direction:column;

gap:25px;

}

.service-item{

display:flex;

gap:20px;

align-items:flex-start;

padding:20px;

background:#fafafa;

border-radius:16px;

transition:.4s;

}

.service-item:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.service-item i{

font-size:35px;

color:#6c3cf0;

margin-top:8px;

}

.service-item h3{

margin-bottom:10px;

font-size:22px;

}

.service-item p{

color:#666;

line-height:1.8;

}

/* OFFERINGS */

.offerings{

padding:40px 100px;

background:#f7f8fd;

position:relative;

overflow:hidden;

}

.offer-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.card{

position:relative;

background:white;

padding:40px;

border-radius:26px;

overflow:hidden;

cursor:pointer;

transition:.5s;

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

}

.card::before{

content:"";

position:absolute;

top:-100%;

left:0;

width:100%;

height:100%;

background:linear-gradient(
135deg,
#6c3cf0,
#9d5cff
);

transition:.5s;

z-index:0;

}

.card:hover::before{

top:0;

}

.card i,
.card h3,
.card p,
.card a{

position:relative;

z-index:2;

transition:.4s;

}

.card i{

font-size:55px;

color:#6c3cf0;

margin-bottom:25px;

}

.card h3{

font-size:28px;

margin-bottom:18px;

}

.card p{

line-height:1.9;

color:#666;

margin-bottom:25px;

}

.card a{

text-decoration:none;

font-weight:700;

color:#6c3cf0;

}

.card:hover{

transform:translateY(-18px)
scale(1.03);

box-shadow:0 35px 60px rgba(108,60,240,.35);

}

.card:hover i,
.card:hover h3,
.card:hover p,
.card:hover a{

color:white;

}

/* glow */

.card::after{

content:"";

position:absolute;

width:180px;

height:180px;

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

border-radius:50%;

right:-60px;

bottom:-60px;

}

.title{

text-align:center;

margin-bottom:80px;

}

.title h4{

color:#6c3cf0;

}

.title h2{

font-size:25px;

margin-top:15px;

}



/* SERVICES */
.services{

padding:70px 100px;

background:#fafafa;

}

.services-container{

display:grid;

grid-template-columns:1.1fr 1fr;

gap:80px;

align-items:center;

}

/* LEFT SIDE */

.services-left{

display:grid;

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

gap:28px;

}

.service-box{

background:#eef2fb;

padding:45px;

border-radius:24px;

transition:.45s;

cursor:pointer;

}

.box1{

margin-top:-40px;

}

.box2{

margin-top:60px;

}

.box3{

margin-top:-20px;

}

.box4{

margin-top:40px;

}

.service-box:hover{

transform:translateY(-14px)
scale(1.02);

background:linear-gradient(
135deg,
#6c3cf0,
#955cff
);

box-shadow:0 25px 50px rgba(108,60,240,.30);

}

.service-box:hover h3,
.service-box:hover p,
.service-box:hover a,
.service-box:hover i{

color:white;

}

.service-box i{

font-size:30px;

color:#6c3cf0;

margin-bottom:25px;

transition:.4s;

}

.service-box h3{

font-size:25px;

margin-bottom:20px;

line-height:1.2;

}

.service-box p{

line-height:1.9;

color:#555;

margin-bottom:25px;

}

.service-box a{

text-decoration:none;

font-weight:700;

color:#111;

}

/* RIGHT SIDE */

.services-right h4{

color:#7d4bff;

font-size:26px;

margin-bottom:20px;

}

.services-right h2{

font-size:40px;

line-height:1.1;

margin-bottom:35px;

}

.services-right p{

line-height:2;

font-size:18px;

color:#555;

margin-bottom:25px;

}

.service-points{

margin:40px 0;

display:grid;

grid-template-columns:1fr 1fr;

gap:22px;

}

.service-points div{

font-size:18px;

font-weight:600;

}

.service-points i{

color:#6c3cf0;

margin-right:10px;

}

.services-right button{

padding:18px 35px;

border:none;

border-radius:45px;

background:#6c3cf0;

color:white;

font-size:17px;

cursor:pointer;

transition:.4s;

}

.services-right button:hover{

transform:translateY(-6px);

}

/* PROCESS */

.process{

padding:40px 100px;

background:linear-gradient(
135deg,
#f8f9ff,
#eef3ff
);

}

.process-header{

text-align:center;

max-width:900px;

margin:auto;

margin-bottom:90px;

}

.process-header h4{

color:#7a4cff;

font-size:22px;

margin-bottom:20px;

}

.process-header h2{

font-size:30px;

margin-bottom:30px;

}

.process-header p{

font-size:18px;

line-height:2;

color:#666;

}

/* timeline */

.timeline{

position:relative;

max-width:1400px;

margin:auto;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

width:4px;

height:100%;

background:#7a4cff;

transform:translateX(-50%);

}

/* card */

.timeline-card{

width:56%;

background:white;

padding:40px;

border-radius:30px;

display:flex;

gap:30px;

margin-bottom:55px;

position:relative;

box-shadow:0 18px 40px rgba(0,0,0,.08);

transition:.45s;

}

.timeline-card:nth-child(odd){

margin-right:auto;

}

.timeline-card:nth-child(even){

margin-left:auto;

}

.timeline-card:hover{

transform:translateY(-14px)
scale(1.02);

box-shadow:0 30px 60px rgba(122,76,255,.25);

}

/* number */

.number{

min-width:95px;

height:95px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:25px;

font-weight:600;

background:linear-gradient(
135deg,
#6c3cf0,
#9f62ff
);

color:white;

}

/* text */

.content h3{

font-size:30px;

margin-bottom:20px;

}

.content p{

line-height:2;

font-size:18px;

color:#555;

}

/* PARTNER */
.partner{

padding:40px 100px;

background:#f8f9ff;

}

.partner-header{

text-align:center;

max-width:950px;

margin:auto;

margin-bottom:80px;

}

.partner-header h4{

color:#7a4cff;

margin-bottom:20px;

}

.partner-header h2{

font-size:30px;

margin-bottom:25px;

}

.partner-header p{

line-height:2;

font-size:19px;

color:#666;

}

/* grid */

.partner-grid{

display:grid;

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

gap:30px;

}

/* card */

.partner-card{

background:white;

padding:45px;

border-radius:30px;

text-align:center;

transition:.45s;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.partner-card:hover{

transform:translateY(-15px);

background:linear-gradient(
135deg,
#6c3cf0,
#935cff
);

}

.partner-card:hover i,
.partner-card:hover h3,
.partner-card:hover p{

color:white;

}

.partner-card i{

font-size:30px;

color:#6c3cf0;

margin-bottom:25px;

}

.partner-card h3{

font-size:28px;

margin-bottom:20px;

}

.partner-card p{

line-height:1.9;

color:#666;

}

.featured{

transform:scale(1.08);

}

/* bottom */

.partner-bottom{

margin-top:90px;

}

.partner-info{

background:white;

padding:60px;

border-radius:35px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

text-align:center;

}

.partner-info h3{

font-size:48px;

margin-bottom:25px;

}

.partner-info ul{

list-style:none;

margin:40px 0;

line-height:2.3;

font-size:20px;

}

.partner-info button{

padding:18px 36px;

border:none;

border-radius:45px;

background:#6c3cf0;

color:white;

cursor:pointer;

}

/* TECH */

.tech{

padding:40px 100px;

background:linear-gradient(
135deg,
#f7f9ff,
#eef3ff
);

}

.tech-container{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:80px;

align-items:center;

}

/* LEFT */

.tech-left h4{

color:#7a4cff;

font-size:22px;

margin-bottom:20px;

}

.tech-left h2{

font-size:40px;

line-height:1.1;

margin-bottom:30px;

}

.tech-left p{

font-size:18px;

line-height:2;

color:#666;

margin-bottom:25px;

}

.tech-left button{

padding:18px 35px;

border:none;

border-radius:45px;

background:#6c3cf0;

color:white;

cursor:pointer;

}

/* RIGHT */

.tech-right{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.tech-card{

display:flex;

gap:25px;

padding:35px;

background:white;

border-radius:28px;

transition:.45s;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.tech-card:hover{

transform:translateY(-12px);

background:linear-gradient(
135deg,
#6c3cf0,
#955cff
);

}

.tech-card:hover h3,
.tech-card:hover p,
.tech-card:hover i{

color:white;

}

.tech-card i{

font-size:30px;

color:#6c3cf0;

transition:.4s;

}

.tech-card h3{

font-size:28px;

margin-bottom:15px;

}

.tech-card p{

line-height:1.8;

color:#666;

}

/* CONTACT */

.contact{

padding:40px 100px;

background:linear-gradient(
135deg,
#f8f9ff,
#eef2ff
);

}

.contact-header{

text-align:center;

font-size: 30px;

max-width:950px;

margin:auto;

margin-bottom:90px;

}

.contact-header h4{

color:#7b4cff;

margin-bottom:20px;

}

.contact-header h2{

font-size:40px;

margin-bottom:25px;

}

.contact-header p{

font-size:19px;

line-height:2;

color:#666;

}

/* wrapper */

.contact-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:50px;

}

/* info */

.contact-info{

display:grid;

gap:28px;

}

.info-card{

background:white;

padding:35px;

border-radius:30px;

text-align:center;

transition:.45s;

box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.info-card:hover{

transform:translateY(-10px);

background:#6c3cf0;

}

.info-card:hover i,
.info-card:hover h3,
.info-card:hover p{

color:white;

}

.info-card i{

font-size:40px;

color:#6c3cf0;

margin-bottom:22px;

}

.info-card h3{

margin-bottom:14px;

}

/* form */

.contact-form{

background:white;

padding:50px;

border-radius:35px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.contact-form h3{

font-size:30px;

margin-bottom:18px;

}

.contact-form p{

line-height:1.8;

margin-bottom:35px;

color:#666;

}

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:22px;

margin-bottom:22px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

width:100%;

padding:20px;

border:none;

background:#f4f6ff;

border-radius:18px;

font-size:16px;

}

.contact-form button{

padding:18px 40px;

border:none;

background:#6c3cf0;

color:white;

border-radius:45px;

font-size:17px;

cursor:pointer;

margin-top:25px;

transition:.4s;

}

.contact-form button:hover{

transform:translateY(-6px);

}

/* FOOTER */

footer{

background:#111;

color:white;

padding:80px 100px 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-grid ul{

list-style:none;

line-height:2.2;

}

.footer-social i{

font-size:15px;

margin-right:18px;

cursor:pointer;

}

.copyright{

text-align:center;

margin-top:60px;

border-top:1px solid #333;

padding-top:25px;

color:#aaa;

}

/* RESPONSIVE */

@media(max-width:991px){

nav,
.topbar,
.about,
.partner,
.contact{

flex-direction:column;

padding:40px;

}

.offer-grid,
.service-grid,
.process-grid,
.tech-grid,
.footer-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:35px;

}

.hero h2{

font-size:20px;

}

}