*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body{
    background:#0b0b0f;
    color:white;
    overflow-x:hidden;
    padding-top:85px;
}

body {
  padding-top: 80px;
}

/* NAV - GLASS EFFECT */
nav{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 8%;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,0.08);
z-index:1000;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.logo-img{
width:55px;
filter:drop-shadow(0 0 10px rgba(0,212,255,0.3));
}

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

nav ul li a{
color:#ddd;
text-decoration:none;
font-weight:500;
transition:.3s;
position:relative;
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 8%;
  flex-wrap: wrap;
}

nav ul li a:hover{
color:#00d4ff;
text-shadow:0 0 10px rgba(0,212,255,0.6);
}


/* HERO */
.hero{
    padding:20px 6% 60px;
}
.hero-text{
max-width:750px;
}

.tag{
color:#00d4ff;
letter-spacing:4px;
font-size:12px;
opacity:0.8;
}

.hero h1{
    font-size:90px;
}

@media(max-width:768px){

.hero h1{
    font-size:52px;
    line-height:1;
    letter-spacing:-2px;
}

.hero-description{
    font-size:16px;
    line-height:1.7;
}

}

.hero h1 span{
color:#00d4ff;
text-shadow:0 0 25px rgba(0,212,255,0.6);
}

.hero h2{
font-size:22px;
font-weight:400;
color:#cfcfcf;
margin-top:10px;
}

.description{
margin-top:20px;
color:#aaa;
line-height:1.7;
max-width:600px;
}

/* BUTTONS - APPLE/Nike STYLE */
.buttons{
display:flex;
gap:15px;
margin-top:30px;
}

.btn{
padding:14px 34px;
border-radius:999px;
background:#00d4ff;
color:black;
text-decoration:none;
font-weight:600;
transition:.3s;
box-shadow:0 0 0 rgba(0,212,255,0);
}

.btn:hover{
transform:translateY(-3px);
box-shadow:
0 0 25px rgba(0,212,255,0.8),
0 0 60px rgba(0,212,255,0.4);
}

.btn-outline{
padding:14px 34px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.2);
color:white;
text-decoration:none;
transition:.3s;
backdrop-filter:blur(10px);
background:rgba(255,255,255,0.03);
}

.btn-outline:hover{
border-color:#00d4ff;
box-shadow:0 0 25px rgba(0,212,255,0.5);
color:#00d4ff;
}

/* GLASS SECTIONS */
section{
padding:110px 8%;
}

.section-title{
text-align:center;
font-size:40px;
font-weight:700;
letter-spacing:-1px;
margin-bottom:50px;
}

/* ABOUT GLASS CARD */
.about p{
max-width:700px;
margin:auto;
text-align:center;
padding:30px;
border-radius:20px;
background:rgba(255,255,255,0.04);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,0.08);
color:#bbb;
}

/* SERVICES */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;
}

.card{
padding:30px;
border-radius:20px;
background:rgba(255,255,255,0.04);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.08);
text-align:center;
transition:.3s;
}

.card i{
font-size:40px;
color:#00d4ff;
margin-bottom:15px;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 0 25px rgba(0,212,255,0.3);
border-color:#00d4ff;
}

/* PORTFOLIO */
.project{
height:220px;
border-radius:20px;
background:rgba(255,255,255,0.03);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,0.08);
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
transition:.3s;
}

.project:hover{
transform:scale(1.05);
box-shadow:0 0 35px rgba(0,212,255,0.4);
border-color:#00d4ff;
color:#00d4ff;
}

/* CONTACT */
.contact{
text-align:center;
}

.contact p{
color:#aaa;
margin-bottom:20px;
}


/* ANIMATION */
.reveal{
opacity:0;
transform:translateY(30px);
animation:fadeUp 1s ease forwards;
}

.reveal-1{animation-delay:.2s;}
.reveal-2{animation-delay:.4s;}
.reveal-3{animation-delay:.6s;}
.reveal-4{animation-delay:.8s;}
.reveal-5{animation-delay:1s;}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* MOBILE */
@media(max-width:768px){
.hero h1{font-size:48px;}
.hero{text-align:center;flex-direction:column;}
.buttons{justify-content:center;}
}

/* PAGE HERO */
.page-hero{
padding:140px 8% 60px;
text-align:center;
}

.page-hero h1{
font-size:50px;
font-weight:800;
}

.page-hero p{
color:#aaa;
margin-top:10px;
}

/* GLASS SECTION */
.glass-section{
padding:80px 8%;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:25px;
}

.glass-card{
background:rgba(255,255,255,0.04);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,0.08);
padding:30px;
border-radius:20px;
transition:.3s;
}

.glass-card:hover{
transform:translateY(-5px);
border-color:#00d4ff;
box-shadow:0 0 20px rgba(0,212,255,0.3);
}
/* ================= HERO V2 ================= */

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

overflow:hidden;

padding:0 8%;

}

/* GRID */

.background-grid{

position:absolute;

width:100%;

height:100%;

background:

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

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

background-size:70px 70px;

opacity:.35;

}

/* BLURS */

.blur{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.5;

}

.blur1{

width:350px;

height:350px;

background:#00d4ff;

top:-80px;

left:-100px;

}

.blur2{

width:300px;

height:300px;

background:#0048ff;

bottom:-100px;

right:-60px;

}

/* CONTENT */

.hero-content{

position:relative;

z-index:5;

max-width:900px;

}

.hero-tag{

letter-spacing:4px;

font-size:14px;

color:#00d4ff;

margin-bottom:20px;

text-transform:uppercase;

animation:fadeUp .8s ease;

}

.hero h1{

font-size:90px;

font-weight:900;

line-height:.95;

letter-spacing:-4px;

margin-bottom:30px;

animation:fadeUp 1s ease;

}

.hero h1 span{

color:#00d4ff;

text-shadow:

0 0 20px rgba(0,212,255,.4),

0 0 60px rgba(0,212,255,.25);

}

.hero-description{

max-width:650px;

margin:auto;

font-size:19px;

line-height:1.8;

color:#bfbfbf;

animation:fadeUp 1.2s ease;

}

/* BUTTONS */

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:45px;

flex-wrap:wrap;

}

.btn-primary{

background:#00d4ff;

padding:16px 38px;

border-radius:100px;

color:#000;

font-weight:700;

text-decoration:none;

transition:.4s;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 0 20px rgba(0,212,255,.7),

0 0 60px rgba(0,212,255,.4);

}

.btn-secondary{

padding:16px 38px;

border-radius:100px;

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

color:#fff;

text-decoration:none;

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

backdrop-filter:blur(12px);

transition:.4s;

}

.btn-secondary:hover{

border-color:#00d4ff;

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

}

/* NAV BUTTON */

.nav-btn{

padding:12px 25px;

border-radius:100px;

background:#00d4ff;

text-decoration:none;

color:#000;

font-weight:600;

transition:.3s;

}

.nav-btn:hover{

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

}
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  body {
    font-size: 14px;
  }
}

/* SCROLL */

.scroll{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

font-size:12px;

letter-spacing:4px;

opacity:.6;

animation:float 2s infinite;

}

@keyframes float{

50%{

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

}

}

@media (max-width: 900px) {

  nav {
    flex-direction: row;
    align-items: center;
    padding: 15px 8%;
  }

  nav ul {
    display: flex;
    flex-direction: row;   /* 👈 makes it sideways */
    gap: 15px;
    width: auto;
    margin-left: auto;
  }

  nav ul li a {
    font-size: 14px;
  }

  .nav-btn {
    display: none; /* optional: hides button to save space */
  }
}
/* ================= FOOTER ================= */

footer{
    text-align:center;
    padding:30px;
    background:rgba(255,255,255,0.02);
    border-top:1px solid rgba(255,255,255,0.05);
}

.socials-section{
    text-align:center;
    padding:80px 8%;
    background:rgba(255,255,255,0.02);
    border-top:1px solid rgba(255,255,255,0.05);
    border-bottom:1px solid rgba(255,255,255,0.05);
    backdrop-filter:blur(15px);
}

.socials-section h2{
    font-size:38px;
    margin-bottom:20px;
}

.socials{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    margin:25px 0;
}

.socials a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:#ccc;
    text-decoration:none;
    transition:.3s;
}

.socials a:hover{
    transform:translateY(-4px);
    border-color:#00d4ff;
    color:#00d4ff;
}

.socials-section p{
    margin-top:20px;
    color:#aaa;
}

/* Title */
.socials-section h2{
font-size:38px;
margin-bottom:20px;
letter-spacing:-1px;
font-weight:700;
}

/* Social links container */
.socials{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin:25px 0;
}

/* Social buttons */
.socials a{
display:flex;
align-items:center;
gap:10px;
padding:14px 22px;
border-radius:999px;

background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);

color:#ccc;
text-decoration:none;
font-weight:500;

transition:0.3s ease;
backdrop-filter:blur(10px);
}

/* Icons */
.socials a i{
font-size:18px;
color:#00d4ff;
transition:0.3s;
}

/* Hover effect (neon glow) */
.socials a:hover{
transform:translateY(-4px);
border-color:#00d4ff;
box-shadow:0 0 25px rgba(0,212,255,0.4);
color:#00d4ff;
}

.socials a:hover i{
color:#00d4ff;
text-shadow:0 0 10px rgba(0,212,255,0.6);
}

/* Phone text */
.socials-section p{
margin-top:20px;
color:#aaa;
font-size:15px;
}
/* =========================
   RESPONSIVE NAVBAR
========================= */

.menu-toggle{
    display:none;
    font-size:28px;
    color:white;
    cursor:pointer;
}
@media (max-width:768px){

.menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    cursor:pointer;
    z-index:1001;
}

.nav-btn{
    display:none;
}

.nav-links{
    position:fixed;
    top:0;
    right:-260px;

    width:250px;
    height:100vh;

    background:rgba(15,15,20,.98);
    backdrop-filter:blur(20px);

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:100px 30px;

    gap:25px;

    transition:.35s ease;

    z-index:999;
}

.nav-links.active{
    right:0;
}

.nav-links li{
    list-style:none;
}

.nav-links li a{
    color:white;
    text-decoration:none;
    font-size:18px;
    font-weight:500;
}
}

@media(max-width:768px){

.hero h1{
    font-size:58px;
    line-height:.95;
    letter-spacing:-2px;
}

.hero-description{
    font-size:17px;
    line-height:1.8;
    margin-top:20px;
}

.hero-buttons{
    flex-direction:column;
    width:100%;
}

.btn-primary,
.btn-secondary{
    width:100%;
}

}

/* ===== MASONRY PORTFOLIO ===== */

.portfolio{
    width:92%;
    max-width:1600px;
    margin:auto;
    padding:80px 0;
}

.portfolio-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:50px;
}

.portfolio-filter button{
    padding:12px 22px;
    border-radius:30px;
    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.portfolio-filter button:hover,
.portfolio-filter .active{
    background:#00d4ff;
    color:#000;
}

/* Masonry Layout */

.portfolio-grid{
    column-count:4;
    column-gap:22px;
}

.portfolio-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    margin-bottom:22px;
    break-inside:avoid;
    cursor:pointer;
}

.portfolio-item img{
    width:100%;
    display:block;
    border-radius:18px;
    transition:.5s;
}

.portfolio-item:hover img{
    transform:scale(1.05);
}

.overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:25px;
    background:linear-gradient(to top,
        rgba(0,0,0,.9),
        rgba(0,0,0,.15));
    opacity:0;
    transition:.4s;
}

.portfolio-item:hover .overlay{
    opacity:1;
}

/* Ignore old classes */

.large,
.wide,
.tall{
    grid-column:unset;
    grid-row:unset;
}

/* Responsive */

@media(max-width:1200px){
    .portfolio-grid{
        column-count:3;
    }
}

@media(max-width:768px){
    .portfolio-grid{
        column-count:2;
    }
}

@media(max-width:500px){
    .portfolio-grid{
        column-count:1;
    }
}

.portfolio-item {
    position: relative;
    overflow: hidden;
}

.carousel {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.slide {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: center;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel {
    scrollbar-width: none;
}


/* ADD THIS */
/* BOOK CAROUSEL */

.portfolio-item:has(.carousel){
    height:500px;
}

.carousel{
    display:flex;
    width:100%;
    height:100%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
}

.carousel img{
    flex:0 0 100%;
    width:100%;
    height:100%;
    object-fit:cover;
    scroll-snap-align:start;
    border-radius:18px;
}


.carousel::-webkit-scrollbar{
    display:none;
}


.test-carousel {
    display: flex;
    width: 400px;
    height: 500px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.test-carousel img {
    min-width: 400px;
    height: 500px;
    object-fit: cover;
    scroll-snap-align: start;
}

.test-carousel::-webkit-scrollbar {
    display: none;
}

.bookSwiper{
    width:100%;
    aspect-ratio:4 / 5;
    border-radius:18px;
    overflow:hidden;
}

.bookSwiper .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* =========================
   MOBILE PORTFOLIO FIX
========================= */

@media(max-width:768px){

    .portfolio{
        width:94%;
        padding:50px 0;
    }

    .portfolio-grid{
        column-count:2;
        column-gap:12px;
    }

    .portfolio-item{
        margin-bottom:12px;
        border-radius:14px;
    }

    .portfolio-item img{
        border-radius:14px;
    }

    .overlay{
        padding:15px;
    }

    .overlay h3{
        font-size:14px;
    }

    .overlay p{
        font-size:12px;
    }

}


@media(max-width:500px){

    .portfolio-grid{
        column-count:2;
        column-gap:10px;
    }

}


/* BOOK CAROUSEL */

.bookSwiper{
    width:100%;
    aspect-ratio:4 / 5;
    border-radius:18px;
    overflow:hidden;
}

.bookSwiper .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.home-btn{
    padding:12px 28px;
    border-radius:100px;
    background:#00d4ff;
    color:#000;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.home-btn:hover{
    transform:translateY(-3px);
    box-shadow:
    0 0 20px rgba(0,212,255,.7),
    0 0 40px rgba(0,212,255,.3);
}

.button-group{
    display:flex;
    gap:15px;
    margin-top:10px;
}

.email-btn,
.whatsapp-btn{
    flex:1;
    padding:15px;
    border:none;
    border-radius:100px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.email-btn{
    background:#ffffff;
    color:#000;
}

.email-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 20px rgba(255,255,255,.3);
}

.whatsapp-btn{
    background:#00d4ff;
    color:#000;
}

.whatsapp-btn:hover{
    transform:translateY(-3px);
    box-shadow:
    0 0 20px rgba(0,212,255,.8),
    0 0 50px rgba(0,212,255,.3);
}

.email-btn i,
.whatsapp-btn i{
    margin-right:8px;
}

@media(max-width:600px){

.button-group{
    flex-direction:column;
}

}

.portfolio-link{
display:block;
position:relative;
text-decoration:none;
color:inherit;
}

/* ABOUT HERO */

.about-hero{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
    padding:120px 10%;
}

.about-image img{
    width:340px;
    height:340px;
    object-fit:cover;
    border-radius:25px;
    border:3px solid #00d4ff;
    box-shadow:0 20px 40px rgba(0,212,255,.25);
}

.about-content{
    max-width:600px;
}

.about-content h1{
    font-size:3rem;
    margin-bottom:10px;
}

.about-content h3{
    color:#00d4ff;
    margin-bottom:20px;
    font-weight:500;
}

.about-content p{
    line-height:1.8;
    margin-bottom:30px;
}



/* STATS */

.stats-section{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    padding:70px 10%;
}

.stat{
    text-align:center;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    padding:40px 20px;
}

.stat h2{
    color:#00d4ff;
    font-size:3rem;
}

.stat p{
    margin-top:10px;
}



/* LIST */

.about-list{
    list-style:none;
    padding:0;
}

.about-list li{
    margin:18px 0;
    font-size:17px;
}

.about-list i{
    color:#00d4ff;
    margin-right:10px;
}



/* MOBILE */

@media(max-width:900px){

.about-hero{
    text-align:center;
}

.about-image img{
    width:260px;
    height:260px;
}

.about-content h1{
    font-size:2.3rem;
}

.stats-section{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.stats-section{
    grid-template-columns:1fr;
}

}
/* =========================
   PORTFOLIO PAGE FIX
========================= */

.portfolio{
    width:90%;
    max-width:1450px;
    margin:120px auto 80px;
}

.portfolio-filter{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:70px;
}

.portfolio-filter a{
    display:inline-block;
    padding:12px 28px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50px;
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,.05);
    transition:.3s;
}

.portfolio-filter a:hover,
.portfolio-filter a.active{
    background:#00d4ff;
    color:#000;
    border-color:#00d4ff;
}

.portfolio-section{
    padding:80px 0;
}

.section-title{
    margin-bottom:15px;
    text-align:center;
    font-size:3rem;
    line-height:1.2;
}

.section-note{
    max-width:700px;
    margin:0 auto 50px;
    text-align:center;
    line-height:1.8;
    color:#bdbdbd;
}

.portfolio-grid{
    column-count:4;
    column-gap:20px;
}

.portfolio-item{
    display:inline-block;
    width:100%;
    margin-bottom:20px;
    break-inside:avoid;
    overflow:hidden;
    border-radius:18px;
    position:relative;
}

.portfolio-item img{
    width:100%;
    display:block;
}

.overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:60px 20px 20px;
    background:linear-gradient(to top,
    rgba(0,0,0,.95),
    rgba(0,0,0,0));
}

.overlay h3{
    margin:0;
    font-size:20px;
}

.overlay p{
    margin-top:5px;
    color:#00d4ff;
}

.placeholder-card{
    min-height:250px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px dashed rgba(255,255,255,.15);
    border-radius:18px;
    text-align:center;
    padding:30px;
}

/* MOBILE */

@media(max-width:992px){

.portfolio-grid{
column-count:3;
}

}

@media(max-width:768px){

.portfolio{
margin-top:100px;
}

.portfolio-grid{
column-count:2;
}

.section-title{
font-size:2.3rem;
}

}

@media(max-width:480px){

.portfolio-grid{
column-count:2;
column-gap:10px;
}

.portfolio-filter{
gap:10px;
}

.portfolio-filter a{
padding:10px 18px;
font-size:14px;
}

}

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

.back-to-top{
    position:fixed;
    bottom:30px;
    right:30px;

    width:55px;
    height:55px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#00d4ff;
    color:#000;

    border-radius:50%;
    text-decoration:none;

    font-size:22px;
    font-weight:bold;

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

    transition:.3s ease;

    z-index:999;
}

.back-to-top:hover{
    transform:translateY(-6px) scale(1.08);
    box-shadow:0 15px 40px rgba(0,212,255,.6);
}
.button-group{
    display:flex;
    gap:15px;
}

.email-btn,
.whatsapp-btn{
    flex:1;
    padding:15px;
    border:none;
    border-radius:50px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.email-btn{
    background:#ffffff;
    color:#111;
}

.email-btn:hover{
    background:#e5e5e5;
}

.whatsapp-btn{
    background:#25D366;
    color:white;
}

.whatsapp-btn:hover{
    background:#1da851;
}
/* ===========================
   PORTFOLIO SPACING FIX
   =========================== */

.portfolio{
    padding-top: 20px !important;
    margin-top: 0 !important;
}

.portfolio-filter{
    margin-bottom: 30px !important;
}

.portfolio-section{
    padding-top: 20px !important;
    margin-top: 0 !important;
}

.section-title{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
}

.section-note{
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}

.portfolio-grid{
    margin-top: 0 !important;
}

/* ================= INTRO ANIMATION ================= */

.intro-screen{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: removeIntro 4s forwards;
}

.intro-logo{
    width: 140px;
    opacity: 0;
    transform: scale(.7);
    animation: logoFade 1.3s ease forwards;
}

.intro-text{
    color: white;
    font-family: "Playfair Display", serif;
    letter-spacing: 8px;
    margin-top: 20px;
    font-size: 1.2rem;
    opacity: 0;
    animation: textFade 1s ease forwards;
    animation-delay: 1s;
}


/* WEBSITE FADE IN */

.website-content{
    opacity: 0;
    animation: websiteFade 1s ease forwards;
    animation-delay: 3.5s;
}


/* LOGO ANIMATION */

@keyframes logoFade{

    from{
        opacity: 0;
        transform: scale(.7);
    }

    to{
        opacity: 1;
        transform: scale(1);
    }

}


/* TEXT ANIMATION */

@keyframes textFade{

    from{
        opacity: 0;
        transform: translateY(20px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }

}


/* REMOVE INTRO SCREEN */

@keyframes removeIntro{

    0%,80%{
        opacity: 1;
        visibility: visible;
    }

    100%{
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

}


/* WEBSITE APPEARS */

@keyframes websiteFade{

    from{
        opacity: 0;
        transform: translateY(30px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }

}

/* INTRO SCREEN */

.intro-screen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#000;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:9999;
    transition:1s ease;
}

.intro-logo{
    width:140px;
    animation:logoAnimation 1.5s ease;
}

.intro-screen h1{
    color:white;
    letter-spacing:6px;
    margin-top:20px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
Helvetica, Arial, sans-serif;
}


/* WEBSITE */

.website-content{
    opacity:0;
    transition:1s ease;
}

.website-content.show{
    opacity:1;
}


/* LOGO ANIMATION */

@keyframes logoAnimation{

    from{
        opacity:0;
        transform:scale(.5);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}
.intro-screen h1 {
    color: #ffffff;
    margin-top: 20px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 12px;
    text-transform: uppercase;

    /* Glow effect */
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.4),
        0 0 15px rgba(255, 255, 255, 0.25),
        0 0 30px rgba(255, 255, 255, 0.15);

    /* Smooth fade in */
    animation: glowFade 2s ease-in-out forwards;
}@keyframes glowFade {
    from {
        opacity: 0;
        transform: translateY(10px);
        text-shadow: none;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.4),
            0 0 15px rgba(255, 255, 255, 0.25),
            0 0 30px rgba(255, 255, 255, 0.15);
    }
}
.intro-screen h1 {
    animation: breathingGlow 2s ease-in-out infinite;
}

@keyframes breathingGlow {
    0% {
        text-shadow:
            0 0 5px rgba(255,255,255,.2),
            0 0 10px rgba(255,255,255,.1);
    }

    50% {
        text-shadow:
            0 0 10px rgba(255,255,255,.6),
            0 0 25px rgba(255,255,255,.4),
            0 0 40px rgba(255,255,255,.2);
    }

    100% {
        text-shadow:
            0 0 5px rgba(255,255,255,.2),
            0 0 10px rgba(255,255,255,.1);
    }
}
/* SECTION TITLES */

.section-title{
    text-align:center;
    margin-bottom:50px;
}


/* QUOTE SECTION */

.quote-section{
    padding:120px 10%;
    text-align:center;
}

.quote-section h2{
    font-size:3rem;
    line-height:1.4;
    max-width:900px;
    margin:auto;
}


/* SKILLS */

.skills-section{
    padding:100px 10%;
}

.skill{
    margin-bottom:30px;
}

.skill p{
    margin-bottom:10px;
}

.bar{
    width:100%;
    height:12px;
    border-radius:50px;
    background:#222;
    overflow:hidden;
}

.fill{
    height:100%;
    border-radius:50px;
    background:white;
}

.fill-95{
    width:95%;
}

.fill-100{
    width:8
    0%;
}

.fill-98{
    width:98%;
}

.fill-90{
    width:90%;
}

/* SKILL BAR WIDTHS */

.fill-70{
    width: 70%;
}

.fill-80{
    width: 85%;
}

.fill-100{
    width: 100%;
}
/* CTA */

.cta-section{
    padding:120px 10%;
    text-align:center;
}

.cta-section h2{
    font-size:3rem;
    margin-bottom:20px;
}

.cta-section p{
    margin-bottom:40px;
}


/* GLASS CARDS HOVER */

.glass-card{
    transition:.4s ease;
}

.glass-card:hover{
    transform:translateY(-10px);
}


/* STATS HOVER */

.stat{
    transition:.4s ease;
}

.stat:hover{
    transform:scale(1.05);
}


/* LOADER */

#loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:black;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
    transition:1s ease;
}


.loader-content{
    text-align:center;
}


.loader-content img{

    width:170px;
    animation:logoAnimation 2s infinite ease-in-out;

}


.loader-content h2{

    color:white;
    margin-top:25px;
    letter-spacing:8px;
    font-size:1.5rem;

}


.loader-content p{

    color:#bdbdbd;
    margin-top:10px;
    letter-spacing:2px;
    font-size:.9rem;

}



.loader-line{

    width:280px;
    height:3px;
    background:#222;
    margin-top:30px;
    overflow:hidden;
    border-radius:30px;

}


.loader-line span{

    display:block;
    height:100%;
    width:100%;
    background:white;
    animation:loaderBar 1.8s infinite linear;

}


.loader-line{
    width:280px;
    height:3px;
    background:#222;
    margin:30px auto 0;
    overflow:hidden;
    border-radius:30px;
    position:relative;
}

.loader-line span{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:50%;
    background:white;
    animation:loaderBar 1.8s infinite ease-in-out;
}
/* SERVICES PAGE */

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

body{
background:#050505;
color:white;
overflow-x:hidden;
}


/* HERO */

.services-hero{

padding:150px 10%;
text-align:center;
}

.services-hero h1{

font-size:5rem;
margin-bottom:20px;
}

.services-hero p{

max-width:700px;
margin:auto;
font-size:1.2rem;
line-height:1.8;
color:#bdbdbd;
}



/* SERVICE CARDS */

.service-card{

padding:100px 10%;
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}


.reverse{

flex-direction:row-reverse;
}


.service-image{

flex:1;
}


.service-image img{

width:100%;
border-radius:25px;
transition:.4s;
}


.service-image img:hover{

transform:scale(1.03);
box-shadow:0 0 50px rgba(0,212,255,.4);

}


.service-content{

flex:1;
}


.service-content span{

font-size:5rem;
font-weight:800;
color:#00D4FF;
}


.service-content h2{

font-size:3rem;
margin-bottom:20px;
}


.service-content p{

line-height:1.8;
margin-bottom:30px;
color:#d6d6d6;
}


.service-content ul{

list-style:none;
}


.service-content ul li{

margin-bottom:15px;
font-size:1.1rem;
position:relative;
padding-left:25px;
}


.service-content ul li::before{

content:"✓";
position:absolute;
left:0;
color:#00D4FF;

}



/* STATS */


.stats{

padding:120px 10%;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}


.stat-box{

background:#111;
padding:50px;
text-align:center;
border-radius:25px;
transition:.4s;
border:1px solid rgba(255,255,255,.08);
}


.stat-box:hover{

transform:translateY(-10px);
box-shadow:0 0 40px rgba(0,212,255,.2);

}


.stat-box h2{

font-size:3rem;
color:#00D4FF;
}


.stat-box p{

margin-top:10px;
color:#c9c9c9;
}



/* CTA */

.cta{

padding:150px 10%;
text-align:center;
}


.cta h2{

font-size:4rem;
margin-bottom:30px;
}


.cta p{

max-width:700px;
margin:auto;
line-height:1.8;
color:#d6d6d6;
margin-bottom:40px;
}



.cta-btn{

padding:18px 40px;
background:#00D4FF;
color:black;
text-decoration:none;
font-weight:700;
border-radius:50px;
transition:.4s;
display:inline-block;
}


.cta-btn:hover{

transform:translateY(-5px);
box-shadow:0 0 40px rgba(0,212,255,.5);

}



/* MOBILE */

@media(max-width:900px){

.service-card{

flex-direction:column;
padding:80px 8%;

}


.reverse{

flex-direction:column;
}


.services-hero h1{

font-size:3rem;
}


.service-content h2{

font-size:2rem;
}


.cta h2{

font-size:2.5rem;
}


}