/* =========================
   JANSEN DIGITAL V5
========================= */

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

body{

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

background:#08111f;

color:white;

overflow-x:hidden;

}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

section{
padding:100px 8%;
}

/* =========================
   NAVBAR
========================= */

nav{

position:fixed;

top:0;
left:0;

width:100%;

height:125px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 6%;

background:rgba(8,17,31,.85);

backdrop-filter:blur(15px);

z-index:9999;

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

}

.nav-left,
.nav-right{

display:flex;

gap:35px;

}

.nav-left a,
.nav-right a{

position:relative;

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 22px;

border-radius:14px;

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

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

backdrop-filter:blur(10px);

color:white;

font-weight:600;

overflow:hidden;

transition:.3s;

}

.nav-left a::before,
.nav-right a::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60px;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(0,212,255,.9),
transparent
);

transform:skewX(-25deg);

animation:navGlow 4s linear infinite;

}



.nav-left a:nth-child(1)::before{
animation-delay:0s;
}

.nav-left a:nth-child(2)::before{
animation-delay:.5s;
}

.nav-left a:nth-child(3)::before{
animation-delay:1s;
}

.nav-right a:nth-child(1)::before{
animation-delay:1.5s;
}

.nav-right a:nth-child(2)::before{
animation-delay:2s;
}

.nav-right a:nth-child(3)::before{
animation-delay:2.5s;
}


@keyframes navGlow{

0%{
left:-120%;
}

100%{
left:150%;
}

}

.nav-left a:hover,
.nav-right a:hover{

transform:translateY(-3px);

color:#00d4ff;

border-color:#00d4ff;

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


}

.nav-left a::after,
.nav-right a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:#00d4ff;

transition:.3s;

}

.nav-left a:hover::after,
.nav-right a:hover::after{

width:100%;

}

.nav-logo img{

height:140px;

width:auto;

}


/* =========================
  PART 2
========================= */


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

.hero{

position:relative;

overflow:hidden;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding-top:150px;

padding-left:8%;

padding-right:8%;

}

.hero-video{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:-2;

}

.hero-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

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

z-index:-1;

}

.hero-right{

max-width:900px;

margin:auto;

}

.hero-tag{

display:inline-block;

padding:12px 25px;

border-radius:50px;

border:1px solid #00d4ff;

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

margin-bottom:25px;

font-weight:600;

color:#00d4ff;

}

.hero-right h1{



font-size:6rem;

font-weight:800;

line-height:1.05;

margin-bottom:25px;

background:linear-gradient(
90deg,
#ffffff,
#00d4ff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-right p{

max-width:700px;

margin:auto;

font-size:1.15rem;

line-height:1.8;

color:#d4d4d4;

margin-bottom:40px;

}

/* HERO BUTTONS */

.hero-buttons{

margin-bottom:40px;

}

.btn-primary{

display:inline-block;

padding:16px 35px;

border-radius:50px;

background:#00d4ff;

color:#000;

font-weight:700;

margin-right:15px;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 0 25px rgba(0,212,255,.5);

}

.btn-secondary{

max-width : 250px;

display:inline-block;

padding:16px 35px;

border-radius:50px;

border:1px solid #00d4ff;

color:white;

transition:.3s;

}

.btn-secondary:hover{

background:#00d4ff;

color:black;

}

/* HERO FEATURES */

.hero-features{

display:grid;

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

gap:15px;

max-width:700px;

margin:auto;

}

.hero-features div{

padding:18px;

border-radius:18px;

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

backdrop-filter:blur(12px);

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

transition:.3s;

}

.hero-features div:hover{

transform:translateY(-5px);

border-color:#00d4ff;

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

}



/* =========================
  PART 3
========================= */


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

.stats{

display:grid;

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

gap:25px;

background:#ffffff;

color:#111;

}

.stat-card{

background:#f7f9fc;

padding:40px 25px;

border-radius:25px;

text-align:center;

transition:.3s;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.stat-card:hover{

transform:translateY(-8px);

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

}

.stat-card h2{

font-size:2.2rem;

color:#00b8ff;

margin-bottom:10px;

}

.stat-card p{

font-size:1rem;

color:#444;

}

/* =========================
   SECTION TAG
========================= */

.section-tag{

display:inline-block;

padding:10px 20px;

border-radius:30px;

background:rgba(0,212,255,.12);

color:#00d4ff;

font-size:.9rem;

margin-bottom:20px;

}

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

.about{

display:flex;

align-items:center;

justify-content:center;

gap:80px;

background:#f7f9fc;

color:#111;

}


.about-image img{

max-width:550px;

width:100%;

margin:auto;

height:auto;

border-radius:25px;

box-shadow:0 15px 40px rgba(0,212,255,.20);

}

.about-content{

flex:1;

}

.about-content h2{

font-size:3rem;

margin-bottom:20px;

}

.about-content p{

line-height:1.9;

color:#555;

margin-bottom:30px;

}

.about-highlights{

display:grid;

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

gap:15px;

margin-bottom:30px;

}

.about-highlights div{

background:white;

padding:18px;

border-radius:15px;

box-shadow:0 8px 20px rgba(0,0,0,.06);

font-weight:500;

transition:.3s;

}

.about-highlights div:hover{

transform:translateY(-5px);

box-shadow:0 12px 25px rgba(0,212,255,.15);

}


/* =========================
  PART 4
========================= */


/* =========================
   WHY CHOOSE SECTION
========================= */

.why-choose{

background:#08111f;

color:white;

}

.section-heading{

text-align:center;

margin-bottom:60px;

}

.section-heading h2{

font-size:3rem;

margin-top:15px;

}

.why-grid{

display:grid;

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

gap:25px;

}

.why-card{

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

backdrop-filter:blur(15px);

padding:35px;

border-radius:25px;

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

text-align:center;

transition:.4s;

}

.why-card:hover{

transform:translateY(-10px);

border-color:#00d4ff;

box-shadow:
0 0 25px rgba(0,212,255,.25);

}

.why-card h3{

margin:15px 0;

font-size:1.3rem;

}

.why-card p{

color:#cfcfcf;

line-height:1.8;

}

/* =========================
   REVIEW SECTION
========================= */

.review-section{

padding:120px 8%;

background:

linear-gradient(
rgba(5,10,20,.82),
rgba(5,10,20,.82)
),

url('review-bg.jpg');

background-size:cover;

background-position:center;

background-attachment:fixed;

text-align:center;

}

.review-section h2{

font-size:3rem;

color:white;

margin-bottom:50px;

}

.review-card{

max-width:900px;

margin:auto;

padding:60px;

border-radius:30px;

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

backdrop-filter:blur(15px);

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

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

}

.review-card p{

font-size:1.2rem;

line-height:1.8;

color:white;

margin:25px 0;

}

.review-card h4{

font-size:1.3rem;

color:#00d4ff;

margin-bottom:20px;

}

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

.cta-section{

padding:120px 8%;

text-align:center;

background:

linear-gradient(
rgba(5,10,20,.88),
rgba(5,10,20,.88)
),

url('cta-bg.jpg');

background-size:cover;

background-position:center;

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

border-bottom:1px solid rgba(0,255,255,.2);

}

.cta-section h2{

font-size:3rem;

margin-bottom:20px;

}

.cta-section p{

max-width:700px;

margin:auto;

line-height:1.8;

margin-bottom:35px;

}

.cta-section{
...
}

.cta-section h2{
...
}

.cta-section p{
...
}

/* HIER */

.cta-features{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:30px;

}

.cta-features span{

padding:12px 20px;

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

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

border-radius:30px;

color:white;

}



.cta-section a{

display:inline-block;

padding:16px 35px;

border-radius:50px;

background:white;

color:black;

font-weight:700;

}


/* =========================
  PART 5
========================= */


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

.contact{
background:linear-gradient(180deg,#08111f,#0b1830);
padding:100px 5%;
text-align:center;
}

.contact-grid{
display:flex;
grid-template-columns:repeat(4,250px);
justify-content : center;
gap:25px;
flex-wrap:wrap;
margin-top:50px;
}

.contact-card{
background:rgba(255,255,255,.05);
backdrop-filter:blur(15px);
border-radius:25px;
padding:30px;
width:100%;
text-decoration:none;
color:white;

transition:.35s ease;

min-height:220px;

display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
}

.contact-card:hover{
transform:translateY(-10px) scale(1.03);
}

/* WHATSAPP */

.whatsapp-card{
border:2px solid #00ff88;
box-shadow:0 0 25px rgba(0,255,136,.25);
}

.whatsapp-card:hover{
box-shadow:0 0 40px rgba(0,255,136,.5);
}

/* FACEBOOK */

.facebook-card{
border:2px solid #1877f2;
box-shadow:0 0 25px rgba(24,119,242,.25);
}

.facebook-card:hover{
box-shadow:0 0 40px rgba(24,119,242,.5);
}

/* INSTAGRAM */

.instagram-card{
border:2px solid #e1306c;
box-shadow:0 0 25px rgba(225,48,108,.25);
}

.instagram-card:hover{
box-shadow:0 0 40px rgba(225,48,108,.5);
}

/* LOCATION */

.location-card{
border:2px solid #888;
box-shadow:0 0 25px rgba(255,255,255,.1);
}

.contact-card h3{
font-size:32px;
margin-bottom:15px;
font-weight:700;
}

.contact-card p{
font-size:22px;
color:#d7d7d7;
line-height:1.5;
}


/* CONTACT COLORS */

.contact-card:nth-child(1){
border:1px solid #00ff88;


box-shadow:
0 0 25px rgba(0,255,136,.2);

}

.contact-card:nth-child(2){

border-top:4px solid #1877F2;

}

.contact-card:nth-child(3){

border-top:4px solid #E1306C;

}

.contact-card:nth-child(4){

border-top:4px solid #666666;

}

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

footer{

background:#0d1117;

padding:80px 20px;

text-align:center;

}

footer img{

height:100px;

margin:auto;

margin-bottom:20px;

}

footer h3{

font-size:2rem;

margin-bottom:15px;

}

footer p{

color:#bcbcbc;

margin-bottom:10px;

}

.footer-services{

margin-top:20px;

opacity:.85;

}



/* FLOATING SOCIAL BAR */

.social-float{

position:fixed;

bottom:20px;

right:20px;

display:flex;

flex-direction:column;

gap:12px;

z-index:9999;

}

.social-float a{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

background:#08111f;

border:1px solid rgba(0,212,255,.3);

border-radius:50%;

font-size:24px;

text-decoration:none;

box-shadow:
0 0 20px rgba(0,212,255,.25);

transition:.3s;

}

.social-float a:hover{

transform:scale(1.1);

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

}