/*====================================================

MUBA PORTFOLIO
Version 2.0

=====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*=========================
RESET
=========================*/

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

html{

scroll-behavior:smooth;

}

body{

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

background:#070707;

color:#ffffff;

overflow-x:hidden;

line-height:1.8;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:white;

}

button{

font-family:inherit;

cursor:pointer;

}

ul{

list-style:none;

}

/*=========================
VARIABLES
=========================*/

:root{

--primary:#8B5CF6;

--secondary:#22C55E;

--blue:#3B82F6;

--dark:#070707;

--dark2:#111111;

--gray:#BDBDBD;

--white:#ffffff;

--glass:rgba(255,255,255,.06);

--border:rgba(255,255,255,.08);

}

/*=========================
BACKGROUND
=========================*/

.background{

position:fixed;

inset:0;

z-index:-100;

overflow:hidden;

background:

radial-gradient(circle at top left,#8b5cf620,transparent 30%),

radial-gradient(circle at bottom right,#22c55e15,transparent 35%),

linear-gradient(180deg,#070707,#090909,#0f0f0f);

}

.grid-overlay{

position:absolute;

width:100%;

height:100%;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:45px 45px;

opacity:.25;

}

.blob{

position:absolute;

border-radius:50%;

filter:blur(140px);

opacity:.35;

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

}

.blob1{

width:420px;

height:420px;

background:#8B5CF6;

top:-120px;

left:-100px;

}

.blob2{

width:350px;

height:350px;

background:#22C55E;

bottom:-120px;

right:-60px;

animation-delay:5s;

}

.blob3{

width:280px;

height:280px;

background:#3B82F6;

top:40%;

left:55%;

animation-delay:8s;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-70px);

}

}

/*=========================
LOADER
=========================*/

#loader{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:#070707;

z-index:99999;

transition:.8s;

}

.loader-logo{

text-align:center;

}

.loader-circle{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

border:4px solid rgba(255,255,255,.08);

border-top:4px solid var(--primary);

animation:spin 1s linear infinite;

}

.loader-logo h1{

margin-top:25px;

font-size:40px;

}

.loader-logo p{

color:#999;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*=========================
CURSOR
=========================*/

.cursor{

position:fixed;

width:18px;

height:18px;

background:white;

border-radius:50%;

pointer-events:none;

z-index:9999;

transform:translate(-50%,-50%);

mix-blend-mode:difference;

transition:.08s;

}

.cursor2{

position:fixed;

width:42px;

height:42px;

border:2px solid #8B5CF6;

border-radius:50%;

pointer-events:none;

z-index:9998;

transform:translate(-50%,-50%);

transition:.15s;

}

/*=========================
PROGRESS BAR
=========================*/

#progress-bar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(90deg,var(--primary),var(--secondary));

z-index:99999;

}

/*=========================
HEADER
=========================*/

header{

position:fixed;

top:22px;

left:50%;

transform:translateX(-50%);

width:92%;

z-index:999;

transition:.4s;

}

.navbar{

max-width:1300px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:16px 28px;

border-radius:70px;

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

backdrop-filter:blur(20px);

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

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-size:23px;

font-weight:700;

}

.logo img{

width:50px;

height:50px;

border-radius:50%;

border:2px solid var(--primary);

}

.nav-links{

display:flex;

gap:38px;

}

.nav-links a{

font-weight:500;

transition:.35s;

}

.nav-links a:hover{

color:var(--primary);

}

.hire-btn{

padding:14px 30px;

border-radius:50px;

background:linear-gradient(135deg,var(--primary),#6D28D9);

font-weight:600;

transition:.35s;

}

.hire-btn:hover{

transform:translateY(-4px);

box-shadow:0 0 35px rgba(139,92,246,.4);

}

.menu-btn{

display:none;

font-size:25px;

cursor:pointer;

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

.hero{

max-width:1300px;

margin:auto;

min-height:100vh;

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:80px;

padding:160px 40px 80px;

}

.hero-left{

z-index:2;

}

.tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

border-radius:50px;

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

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

color:var(--secondary);

font-size:15px;

margin-bottom:30px;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.05;

margin-bottom:20px;

max-width:700px;

}

.hero h2{

font-size:28px;

font-weight:600;

color:#d7d7d7;

margin-bottom:25px;

}

.hero h2 span{

color:var(--primary);

}

.hero p{

font-size:18px;

color:var(--gray);

max-width:640px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-bottom:35px;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:60px;

background:linear-gradient(135deg,var(--primary),#6d28d9);

font-weight:600;

transition:.35s;

}

.btn:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(139,92,246,.35);

}

.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:60px;

background:transparent;

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

transition:.35s;

}

.btn-outline:hover{

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

}

.hero-social{

display:flex;

gap:20px;

}

.hero-social a{

width:54px;

height:54px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

font-size:20px;

transition:.35s;

}

.hero-social a:hover{

background:var(--primary);

transform:translateY(-5px);

}

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

.hero-right{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.hero-image{

position:relative;

width:460px;

height:460px;

}

.hero-image img{

width:100%;

height:100%;

object-fit:cover;

border-radius:50%;

border:4px solid rgba(255,255,255,.08);

box-shadow:

0 0 80px rgba(139,92,246,.35),

0 0 180px rgba(34,197,94,.12);

animation:floatImage 6s ease-in-out infinite;

}

.circle{

position:absolute;

border-radius:50%;

border:2px solid rgba(255,255,255,.08);

}

.one{

width:520px;

height:520px;

top:-30px;

left:-30px;

animation:rotateCircle 16s linear infinite;

}

.two{

width:590px;

height:590px;

top:-65px;

left:-65px;

animation:rotateCircleReverse 20s linear infinite;

}

.three{

width:660px;

height:660px;

top:-100px;

left:-100px;

animation:rotateCircle 26s linear infinite;

opacity:.25;

}

@keyframes floatImage{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes rotateCircle{

100%{

transform:rotate(360deg);

}

}

@keyframes rotateCircleReverse{

100%{

transform:rotate(-360deg);

}

}

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

.stats{

max-width:1300px;

margin:auto;

display:grid;

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

gap:30px;

padding:0 40px 120px;

}

.stat-card{

padding:40px;

text-align:center;

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

backdrop-filter:blur(20px);

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

border-radius:26px;

transition:.4s;

}

.stat-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.stat-card h2{

font-size:54px;

font-weight:700;

color:var(--primary);

margin-bottom:10px;

}

.stat-card p{

color:var(--gray);

}

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

.about{

max-width:1300px;

margin:auto;

padding:120px 40px;

}

.section-header{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-tag{

display:inline-block;

padding:10px 22px;

border-radius:50px;

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

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

color:var(--secondary);

margin-bottom:20px;

}

.section-header h2{

font-size:52px;

margin-bottom:18px;

font-weight:700;

}

.section-header p{

font-size:18px;

color:var(--gray);

}

.about-container{

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:70px;

align-items:center;

}

.about-image img{

width:100%;

border-radius:30px;

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

box-shadow:0 25px 70px rgba(0,0,0,.35);

}

.about-content h3{

font-size:42px;

margin-bottom:20px;

}

.about-content>p{

color:var(--gray);

font-size:18px;

margin-bottom:25px;

}

.about-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.about-box{

padding:28px;

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

border-radius:24px;

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

transition:.35s;

}

.about-box:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.about-box i{

font-size:34px;

margin-bottom:20px;

color:var(--primary);

}

.about-box h4{

font-size:22px;

margin-bottom:12px;

}

.about-box p{

color:var(--gray);

font-size:15px;

}
/*====================================================
BELIEFS
====================================================*/

.beliefs{

max-width:1300px;
margin:auto;
padding:120px 40px;

}

.belief-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;

}

.belief-card{

padding:40px;

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

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

border-radius:28px;

transition:.4s;

position:relative;

overflow:hidden;

}

.belief-card::before{

content:"";

position:absolute;

width:260px;
height:260px;

background:radial-gradient(var(--primary),transparent 70%);

top:-140px;
right:-140px;

opacity:.18;

}

.belief-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

}

.belief-card span{

font-size:54px;

font-weight:800;

color:rgba(139,92,246,.35);

display:block;

margin-bottom:20px;

}

.belief-card h3{

font-size:28px;

margin-bottom:15px;

}

.belief-card p{

color:var(--gray);

}

/*====================================================
TIMELINE
====================================================*/

.timeline{

max-width:1100px;

margin:auto;

padding:120px 40px;

}

.timeline-wrapper{

position:relative;

padding-left:50px;

}

.timeline-wrapper::before{

content:"";

position:absolute;

left:12px;

top:0;

width:3px;

height:100%;

background:linear-gradient(var(--primary),var(--secondary));

}

.timeline-item{

position:relative;

margin-bottom:60px;

}

.timeline-dot{

position:absolute;

left:-48px;

top:8px;

width:24px;

height:24px;

border-radius:50%;

background:var(--primary);

box-shadow:0 0 25px rgba(139,92,246,.6);

}

.timeline-content{

padding:30px;

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

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

border-radius:22px;

}

.timeline-content h3{

font-size:26px;

margin-bottom:12px;

}

.timeline-content p{

color:var(--gray);

}

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

.services-grid{

max-width:1300px;

margin:auto;

display:grid;

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

gap:35px;

padding:0 40px 120px;

}

.service-card{

padding:45px 35px;

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

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

border-radius:30px;

text-align:center;

transition:.4s;

}

.service-card:hover{

transform:translateY(-12px);

border-color:var(--primary);

box-shadow:0 25px 50px rgba(0,0,0,.35);

}

.service-card i{

font-size:60px;

color:var(--primary);

margin-bottom:25px;

}

.service-card h3{

font-size:28px;

margin-bottom:18px;

}

.service-card p{

color:var(--gray);

}

/*====================================================
PROJECTS
====================================================*/

.projects{

max-width:1300px;

margin:auto;

padding:120px 40px;

}

.projects-grid{

display:grid;

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

gap:35px;

}

.project-card{

position:relative;

overflow:hidden;

border-radius:28px;

cursor:pointer;

}

.project-card img{

width:100%;

height:340px;

object-fit:cover;

transition:.6s;

}

.project-overlay{

position:absolute;

inset:0;

background:linear-gradient(to top,
rgba(0,0,0,.85),
rgba(0,0,0,.2));

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:35px;

opacity:0;

transition:.5s;

}

.project-card:hover img{

transform:scale(1.12);

}

.project-card:hover .project-overlay{

opacity:1;

}

.project-overlay h3{

font-size:30px;

margin-bottom:10px;

}

.project-overlay p{

color:#ddd;

}

/*====================================================
CONTENT
====================================================*/

.content{

max-width:1300px;

margin:auto;

padding:120px 40px;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.content-left h2{

font-size:54px;

margin:20px 0;

}

.content-left p{

color:var(--gray);

margin-bottom:35px;

font-size:18px;

}

.content-right{

display:flex;

justify-content:center;

}

.content-right img{

width:420px;

border-radius:30px;

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

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

}

/*====================================================
SOCIALS
====================================================*/

.social-section{

max-width:1300px;

margin:auto;

padding:120px 40px;

}

.social-grid{

display:grid;

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

gap:30px;

}

.social-card{

padding:40px;

text-align:center;

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

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

border-radius:25px;

transition:.4s;

}

.social-card:hover{

transform:translateY(-10px);

background:rgba(139,92,246,.12);

}

.social-card i{

font-size:48px;

margin-bottom:20px;

color:var(--primary);

}

.social-card h3{

margin-bottom:10px;

}

.social-card p{

color:var(--gray);

}

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

.cta{

padding:120px 40px;

}

.cta-box{

max-width:1100px;

margin:auto;

padding:80px 60px;

text-align:center;

border-radius:35px;

background:linear-gradient(
135deg,
rgba(139,92,246,.18),
rgba(34,197,94,.08)
);

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

}

.cta-box h2{

font-size:58px;

margin-bottom:25px;

}

.cta-box p{

max-width:760px;

margin:0 auto 40px;

color:var(--gray);

font-size:19px;

}

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

.contact{

max-width:1300px;

margin:auto;

padding:120px 40px;

}

.contact-container{

display:grid;

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

gap:30px;

}

.contact-card{

padding:40px;

text-align:center;

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

border-radius:24px;

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

transition:.35s;

}

.contact-card:hover{

transform:translateY(-10px);

border-color:var(--secondary);

}

.contact-card i{

font-size:48px;

color:var(--secondary);

margin-bottom:20px;

}

.contact-card h3{

margin-bottom:10px;

}

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

footer{

margin-top:80px;

padding:70px 40px;

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

}

.footer-content{

max-width:900px;

margin:auto;

text-align:center;

}

.footer-content h2{

font-size:42px;

margin-bottom:20px;

}

.footer-content p{

color:var(--gray);

}

.footer-social{

display:flex;

justify-content:center;

gap:20px;

margin:35px 0;

}

.footer-social a{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

transition:.35s;

}

.footer-social a:hover{

background:var(--primary);

transform:translateY(-5px);

}

.copyright{

margin-top:30px;

font-size:15px;

color:#888;
}
/*==================================
MOBILE MENU
==================================*/

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:300px;

height:100vh;

background:#090909;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:35px;

transition:.45s;

z-index:99999;

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

}

.mobile-menu.active{

right:0;

}

.mobile-menu a{

font-size:22px;

font-weight:600;

transition:.3s;

}

.mobile-menu a:hover{

color:var(--primary);

}

body.no-scroll{

overflow:hidden;

}
/*=========================================
RIPPLE
=========================================*/

.btn,
.btn-outline,
.hire-btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/*=========================================
BACK TO TOP
=========================================*/

.top-btn{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:20px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

box-shadow:0 15px 35px rgba(139,92,246,.35);

}

.top-btn.show{

opacity:1;

visibility:visible;

}

.top-btn:hover{

transform:translateY(-6px);

background:var(--secondary);

}

/*=========================================
ACTIVE NAV
=========================================*/

.nav-links a.active{

color:var(--primary);

}
.featured{

max-width:1300px;
margin:auto;
padding:120px 40px;

}

.featured-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.featured-card{

padding:40px;

text-align:center;

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

border-radius:25px;

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

transition:.35s;

}

.featured-card:hover{

transform:translateY(-12px);

border-color:var(--primary);

}

.featured-card i{

font-size:55px;

margin-bottom:20px;

color:var(--primary);

}

.featured-card h3{

font-size:26px;

margin-bottom:10px;

}
.project-content{

padding:30px;

}

.project-category{

display:inline-block;

padding:8px 16px;

border-radius:30px;

background:rgba(139,92,246,.12);

color:var(--primary);

font-size:14px;

margin-bottom:15px;

}

.project-tech{

display:flex;

gap:10px;

flex-wrap:wrap;

margin:25px 0;

}

.project-tech span{

padding:8px 16px;

border-radius:30px;

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

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

font-size:14px;

}

.project-links{

display:flex;

gap:15px;

margin-top:20px;

flex-wrap:wrap;

}
.process{

max-width:1300px;
margin:auto;
padding:120px 40px;

}

.process-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.process-card{

padding:35px;

border-radius:24px;

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

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

transition:.35s;

}

.process-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

}

.process-card span{

font-size:52px;

font-weight:700;

color:rgba(139,92,246,.35);

display:block;

margin-bottom:15px;

}

.process-card h3{

margin-bottom:15px;

}
/*====================================
FEATURED CONTENT
====================================*/

.featured-content{

max-width:1300px;

margin:auto;

padding:120px 40px;

}

.video-grid{

display:grid;

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

gap:30px;

}

.video-card{

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

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

border-radius:25px;

overflow:hidden;

transition:.35s;

}

.video-card:hover{

transform:translateY(-10px);

}

.video-thumbnail{

position:relative;

overflow:hidden;

}

.video-thumbnail img{

width:100%;

height:240px;

object-fit:cover;

transition:.5s;

}

.video-card:hover img{

transform:scale(1.08);

}

.play-btn{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:70px;

height:70px;

border-radius:50%;

background:rgba(139,92,246,.9);

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

}

.video-card h3{

padding:25px 25px 10px;

}

.video-card p{

padding:0 25px 25px;

color:var(--gray);

}
/*====================================
TOOLBOX
====================================*/

.toolbox{

max-width:1300px;
margin:auto;
padding:120px 40px;

}

.toolbox-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}

.tool-card{

padding:35px;

text-align:center;

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

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

border-radius:24px;

transition:.35s;

}

.tool-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:0 20px 40px rgba(139,92,246,.2);

}

.tool-card i{

font-size:48px;

margin-bottom:20px;

color:var(--primary);

}

.tool-card h3{

font-size:20px;

font-weight:600;

}
/*====================================
BY THE NUMBERS
====================================*/

.numbers{

max-width:1300px;

margin:auto;

padding:120px 40px;

}

.numbers-grid{

display:grid;

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

gap:30px;

}

.number-card{

padding:45px;

text-align:center;

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

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

border-radius:24px;

transition:.35s;

}

.number-card:hover{

transform:translateY(-10px);

border-color:var(--secondary);

}

.number-card h2{

font-size:58px;

color:var(--secondary);

margin-bottom:10px;

}

.number-card h4{

font-size:20px;

font-weight:500;

color:var(--gray);

}
/*==================================
VISION
==================================*/

.vision{

padding:140px 40px;

}

.vision-container{

max-width:950px;

margin:auto;

text-align:center;

}

.vision h2{

font-size:60px;

line-height:1.2;

margin:25px 0;

}

.vision p{

font-size:20px;

line-height:1.9;

color:var(--gray);

margin-bottom:50px;

}

.vision-list{

display:grid;

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

gap:25px;

margin-top:60px;

}

.vision-item{

padding:28px;

border-radius:20px;

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

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

display:flex;

align-items:center;

gap:18px;

transition:.35s;

}

.vision-item:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.vision-item i{

font-size:24px;

color:var(--secondary);

}
/*====================================
MY PRINCIPLES
====================================*/

.principles{

max-width:1300px;
margin:auto;
padding:120px 40px;

}

.principles-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;

}

.principle-card{

position:relative;

padding:40px;

border-radius:28px;

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

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

transition:.35s;

overflow:hidden;

}

.principle-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

}

.principle-number{

font-size:72px;

font-weight:800;

opacity:.08;

position:absolute;

top:15px;

right:25px;

}

.principle-card h3{

margin-bottom:20px;

font-size:28px;

}

.principle-card p{

color:var(--gray);

line-height:1.8;

}
/*====================================
MY JOURNEY
====================================*/

.journey{

max-width:1300px;

margin:auto;

padding:120px 40px;

}

.journey-container{

display:grid;

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

gap:30px;

}

.journey-card{

padding:40px;

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

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

border-radius:28px;

transition:.35s;

}

.journey-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

}

.journey-card span{

display:inline-flex;

align-items:center;

justify-content:center;

width:60px;

height:60px;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),var(--secondary));

font-size:22px;

font-weight:700;

margin-bottom:25px;

}

.journey-card h3{

margin-bottom:15px;

font-size:28px;

}

.journey-card p{

color:var(--gray);

line-height:1.8;

}
/*====================================
SERVICES (UPDATED PREMIUM VERSION)
====================================*/

.services{

max-width:1300px;

margin:auto;

padding:120px 40px;

}

.services-grid{

display:grid;

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

gap:30px;

}

.service-card{

padding:45px;

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

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

border-radius:28px;

text-align:center;

transition:.35s;

}

.service-card:hover{

transform:translateY(-12px);

border-color:var(--primary);

box-shadow:0 20px 50px rgba(139,92,246,.15);

}

.service-card i{

font-size:55px;

color:var(--primary);

margin-bottom:25px;

}

.service-card h3{

font-size:26px;

margin-bottom:15px;

}

.service-card p{

color:var(--gray);

line-height:1.7;

}

<section class="cta">

    <div class="cta-box">

        <h2>
            Ready to Build Something Powerful?
        </h2>

        <p>
            Whether it's a website, content strategy, or digital brand—
            let's bring your idea to life and turn it into something real.
        </p>

        <a href="#contact" class="btn">
            Start Now
        </a>

    </div>

</section>
html{
scroll-behavior:smooth;
}

body{
overflow-x:hidden;
}
section{
padding:120px 40px;
}
body::before{

content:"";

position:fixed;

top:-200px;
left:-200px;

width:600px;
height:600px;

background:radial-gradient(circle,var(--primary),transparent 60%);

opacity:.08;

z-index:-1;

}

body::after{

content:"";

position:fixed;

bottom:-200px;
right:-200px;

width:600px;
height:600px;

background:radial-gradient(circle,var(--secondary),transparent 60%);

opacity:.06;

z-index:-1;

}
a,button{
transition:.3s ease;
}

a:hover{
opacity:.9;
}
.nav-links a.active{
color:var(--primary);
position:relative;
}

.nav-links a.active::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:100%;
height:2px;
background:var(--primary);
}