*{
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;
}


}


/* =========================================
   NAVIGATION
========================================= */

.services-nav {
    width: 100%;
    height: 125px;

    padding: 0 5%;

    display: flex;
    align-items: center;
    gap: 35px;

    background: #050505;

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

    position: sticky;
    top: 0;
    z-index: 1000;
}


/* =========================================
   LOGO
========================================= */

.nav-logo {
    flex: 0 0 auto;
}

.nav-logo img {
    width: 55px;
    height: auto;
    display: block;
}


/* =========================================
   PATTERN BANNER
========================================= */

.nav-pattern {
    position: relative;

    flex: 1;

    height: 100%;

    display: flex;
    align-items: center;

    overflow: hidden;
}


/* THE ACTUAL BANNER */

.nav-pattern img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;

    /* Keeps the original banner proportions */
    max-height: 100%;
}


/* =========================================
   FADE THE LEFT + RIGHT EDGES
========================================= */

.nav-pattern::before,
.nav-pattern::after {
    content: "";

    position: absolute;
    top: 0;

    width: 18%;

    height: 100%;

    z-index: 2;

    pointer-events: none;
}


/* LEFT FADE */

.nav-pattern::before {
    left: 0;

    background: linear-gradient(
        to right,
        #050505 0%,
        rgba(5, 5, 5, 0.85) 25%,
        rgba(5, 5, 5, 0.35) 60%,
        transparent 100%
    );
}


/* RIGHT FADE */

.nav-pattern::after {
    right: 0;

    background: linear-gradient(
        to left,
        #050505 0%,
        rgba(5, 5, 5, 0.85) 25%,
        rgba(5, 5, 5, 0.35) 60%,
        transparent 100%
    );
}


/* =========================================
   HOME BUTTON
========================================= */

.home-btn {
    flex: 0 0 auto;

    padding: 12px 28px;

    color: white;
    text-decoration: none;

    font-size: 15px;
    font-weight: 500;

    border: 1px solid #1748ff;

    border-radius: 50px;

    background: rgba(5, 5, 5, 0.5);

    transition: 0.3s ease;
}

.home-btn:hover {
    background: #1748ff;

    color: white;

    box-shadow: 0 0 25px rgba(23, 72, 255, 0.45);

    transform: translateY(-2px);
}


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

@media (max-width: 768px) {

    .services-nav {
        height: 85px;

        padding: 0 4%;

        gap: 15px;
    }

    .nav-logo img {
        width: 42px;
    }

    .nav-pattern {
        min-width: 0;
    }

    .nav-pattern img {
        width: 100%;
        height: auto;
    }

    .nav-pattern::before,
    .nav-pattern::after {
        width: 25%;
    }

    .home-btn {
        padding: 9px 17px;

        font-size: 12px;
    }

}

/* =========================================================
   ROYAL DESIGNS — ABOUT HERO FINAL OVERRIDE
   Paste this at the VERY BOTTOM of style.css
========================================================= */


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

.about-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: #050505;
}


/* =========================
   LARGE PHOTO
========================= */

.about-image {
    position: absolute;

    top: 0;
    right: 0;

    width: 68%;
    height: 100%;

    z-index: 1;

    overflow: hidden;
}

.about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;

    transform: scale(1.02);
}


/* =========================
   PHOTO GRADIENT
   BLACK → PHOTO
========================= */

.about-image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        /* LEFT BLACK GRADIENT */
        linear-gradient(
            to right,
            #050505 0%,
            #050505 10%,
            rgba(5, 5, 5, 0.96) 22%,
            rgba(5, 5, 5, 0.72) 36%,
            rgba(5, 5, 5, 0.28) 52%,
            transparent 72%
        ),

        /* BOTTOM FADE */
        linear-gradient(
            to top,
            #050505 0%,
            rgba(5, 5, 5, 0.95) 5%,
            rgba(5, 5, 5, 0.65) 15%,
            rgba(5, 5, 5, 0.15) 30%,
            transparent 45%
        );
}


/* =========================
   TEXT AREA
========================= */

.about-content {
    position: relative;

    z-index: 5;

    width: 40%;

    margin-left: 7%;

    padding-bottom: 90px;

    /* Keeps text completely on the left */
    margin-right: auto;
}


/* =========================
   SMALL TITLE
========================= */

.about-content .hero-tag {
    font-size: 12px;

    letter-spacing: 3px;

    color: #00d4ff;

    margin-bottom: 20px;

    font-weight: 600;
}


/* =========================
   NAME
========================= */

.about-content h1 {
    font-size: clamp(4rem, 6vw, 6.5rem);

    line-height: 0.9;

    letter-spacing: -4px;

    margin: 0;

    color: #ffffff;

    font-weight: 700;

    white-space: nowrap;
}


/* SECOND NAME */

.about-content h1 span {
    display: block;

    color: transparent;

    -webkit-text-stroke: 1px #ffffff;

    opacity: 0.9;
}


/* =========================
   PROFESSION
========================= */

.about-content h3 {
    margin-top: 25px;

    font-size: 17px;

    line-height: 1.5;

    font-weight: 500;

    color: #eeeeee;
}


/* =========================
   DESCRIPTION
========================= */

.about-content > p:not(.hero-tag) {
    max-width: 480px;

    margin-top: 18px;

    font-size: 15px;

    line-height: 1.8;

    color: #bdbdbd;
}


/* =========================
   BUTTONS
========================= */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 30px;
}


.btn-primary,
.btn-secondary {

    display: inline-flex;

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

    padding: 14px 28px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: all 0.3s ease;
}


/* PRIMARY */

.btn-primary {

    background: #00d4ff;

    color: #000;

    border: 1px solid #00d4ff;
}

.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 0 30px rgba(0, 212, 255, 0.4);
}


/* SECONDARY */

.btn-secondary {

    color: #ffffff;

    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.25);

    backdrop-filter: blur(10px);
}

.btn-secondary:hover {

    background: #ffffff;

    color: #000000;

    transform: translateY(-3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .about-image {
        width: 65%;
    }

    .about-content {
        width: 43%;
        margin-left: 6%;
    }

    .about-content h1 {
        font-size: clamp(3.5rem, 6vw, 5.5rem);
    }

}


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

@media (max-width: 768px) {

    .about-hero {

        min-height: 100svh;

        align-items: flex-end;
    }


    /* FULL SCREEN IMAGE */

    .about-image {

        top: 0;
        right: 0;

        width: 100%;
        height: 100%;
    }


    .about-image img {

        object-position: center top;
    }


    /* MOBILE GRADIENT */

    .about-image::after {

        background:

            linear-gradient(
                to bottom,
                rgba(5,5,5,0.05) 0%,
                rgba(5,5,5,0.10) 30%,
                rgba(5,5,5,0.55) 55%,
                rgba(5,5,5,0.90) 75%,
                #050505 100%
            );
    }


    /* TEXT */

    .about-content {

        width: 100%;

        margin: 0;

        padding: 0 7% 50px;

        z-index: 5;
    }


    .about-content .hero-tag {

        font-size: 9px;

        letter-spacing: 2px;

        margin-bottom: 14px;
    }


    .about-content h1 {

        font-size: clamp(3.2rem, 15vw, 5rem);

        line-height: 0.9;

        letter-spacing: -2px;

        white-space: normal;
    }


    .about-content h3 {

        font-size: 14px;

        margin-top: 18px;
    }


    .about-content > p:not(.hero-tag) {

        font-size: 13px;

        line-height: 1.7;

        max-width: 450px;
    }


    .hero-buttons {

        margin-top: 22px;

        gap: 10px;
    }


    .btn-primary,
    .btn-secondary {

        padding: 11px 20px;

        font-size: 11px;
    }

}
/* =========================================================
   ROYAL DESIGNS — FAST LOADER
========================================================= */

#loader {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    background: #030303;

    display: flex;

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

    z-index: 99999;

    opacity: 1;

    visibility: visible;

    transition:
        opacity .6s ease,
        visibility .6s ease;
}


/* WHEN LOADING IS FINISHED */

#loader.loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* CONTENT */

.loader-content {

    width: min(320px, 80%);

    text-align: center;
}


/* LOGO */

.loader-content img {

    width: 75px;

    height: auto;

    display: block;

    margin: 0 auto 20px;

    animation:
        loaderLogo 1s ease;
}


@keyframes loaderLogo {

    from {

        opacity: 0;

        transform: scale(.75);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


/* TITLE */

.loader-content h2 {

    margin: 0;

    color: #fff;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 600;

    letter-spacing: 5px;
}


/* SUBTITLE */

.loader-content p {

    margin-top: 9px;

    color: #555;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;
}


/* PROGRESS */

.loader-progress {

    margin-top: 32px;

    width: 100%;
}


/* TRACK */

.loader-track {

    position: relative;

    width: 100%;

    height: 2px;

    background: #1b1b1b;

    overflow: hidden;
}


/* MOVING BAR */

#loader-bar {

    display: block;

    width: 0%;

    height: 100%;

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

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

    transition:
        width .12s linear;
}


/* BOTTOM TEXT */

.loader-bottom {

    margin-top: 9px;

    display: flex;

    justify-content: space-between;

    color: #444;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 2px;
}


/* PERCENTAGE */

#loader-percent {

    color: #00d4ff;

    min-width: 35px;

    text-align: right;
}
/* =========================================================
   ABOUT HERO — MOBILE FIX
   Paste at the VERY BOTTOM of style.css
========================================================= */

@media (max-width: 768px) {

    /* HERO */
    .about-hero {
        position: relative;

        display: flex;
        flex-direction: column;

        width: 100%;
        min-height: auto;

        padding: 0;

        overflow: hidden;

        background: #050505;
    }


    /* =========================================
       PHOTO
    ========================================= */

    .about-image {
        position: relative;

        top: auto;
        right: auto;

        width: 100%;
        height: 70svh;

        flex-shrink: 0;

        overflow: hidden;

        z-index: 1;
    }


    .about-image img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;

        /* Adjust this if you want to move the
           person higher/lower */
        object-position: center top;

        transform: none;
    }


    /* =========================================
       PHOTO → BLACK FADE
    ========================================= */

    .about-image::after {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 2;

        pointer-events: none;

        background:

            /* subtle side darkness */
            linear-gradient(
                to right,
                rgba(5,5,5,.25),
                transparent 35%,
                transparent 65%,
                rgba(5,5,5,.25)
            ),

            /* strong bottom fade */
            linear-gradient(
                to bottom,
                transparent 50%,
                rgba(5,5,5,.25) 65%,
                rgba(5,5,5,.75) 82%,
                #050505 100%
            );
    }


    /* =========================================
       TEXT — NOW BELOW PHOTO
    ========================================= */

    .about-content {
        position: relative;

        width: 100%;

        margin: 0;

        padding:
            5px 7% 65px;

        z-index: 5;

        background: #050505;
    }


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

    .about-content .hero-tag {

        margin: 0 0 15px;

        font-size: 9px;

        line-height: 1.5;

        letter-spacing: 2px;

        color: #00d4ff;
    }


    /* =========================================
       NAME
    ========================================= */

    .about-content h1 {

        margin: 0;

        font-size:
            clamp(3.2rem, 14vw, 5rem);

        line-height: .88;

        letter-spacing: -2px;

        white-space: normal;

        color: white;
    }


    .about-content h1 span {

        display: block;

        margin-top: 3px;

        color: transparent;

        -webkit-text-stroke:
            1px white;
    }


    /* =========================================
       PROFESSION
    ========================================= */

    .about-content h3 {

        margin-top: 20px;

        max-width: 450px;

        font-size: 14px;

        line-height: 1.5;

        font-weight: 500;

        color: #e5e5e5;
    }


    /* =========================================
       DESCRIPTION
    ========================================= */

    .about-content > p:not(.hero-tag) {

        max-width: 430px;

        margin-top: 14px;

        font-size: 13px;

        line-height: 1.7;

        color: #888;
    }


    /* =========================================
       BUTTONS
    ========================================= */

    .hero-buttons {

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        margin-top: 22px;
    }


    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        padding:
            12px 20px;

        font-size: 11px;
    }

}
/* =====================================================
   STICKY PORTFOLIO CATEGORY NAVIGATION
===================================================== */

.portfolio-filter {
    position: sticky;
    top: 0;

    z-index: 1000;

    display: flex;
    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 14px 20px;

    overflow-x: auto;

    white-space: nowrap;

    background: rgba(3, 3, 3, 0.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

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

    scrollbar-width: none;
}

.portfolio-filter::-webkit-scrollbar {
    display: none;
}


/* CATEGORY BUTTONS */

.portfolio-filter a {

    flex-shrink: 0;

    padding: 9px 16px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 50px;

    color: #888;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 1px;

    transition:
        all 0.3s ease;
}


/* HOVER */

.portfolio-filter a:hover {

    color: white;

    border-color:
        rgba(0, 212, 255, 0.5);

    background:
        rgba(0, 212, 255, 0.08);
}


/* ACTIVE */

.portfolio-filter a.active {

    color: #000;

    background: #00d4ff;

    border-color: #00d4ff;

    box-shadow:
        0 0 20px rgba(0, 212, 255, 0.25);
}
/* =========================================
   PORTFOLIO — TIGHTEN FIRST ROW
========================================= */

.portfolio-filter {
    position: sticky;
    top: 0;
    z-index: 1000;

    margin-bottom: 0 !important;
}

.portfolio-grid,
.portfolio-masonry,
.portfolio-gallery {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.portfolio-section,
.portfolio-category,
.category-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* =========================================================
   ROYAL DESIGNS — MOTION EXPERIENCE
========================================================= */

.motion-section {

    position: relative;

    min-height: 900px;

    padding: 150px 6% 110px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 70, 255, .10),
            transparent 40%
        ),
        #030303;
}


/* =========================================================
   GIANT BACKGROUND WORD
========================================================= */

.motion-bg-text {

    position: absolute;

    top: 18%;

    left: 50%;

    transform:
        translateX(-50%);

    font-size:
        clamp(12rem, 28vw, 30rem);

    line-height: .7;

    font-weight: 900;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.035);

    pointer-events: none;

    user-select: none;

    white-space: nowrap;
}


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

.motion-intro {

    position: relative;

    z-index: 5;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 80px;
}


.motion-number {

    color: #00d4ff;

    font-size: 9px;

    letter-spacing: 4px;

    padding-top: 10px;
}


.motion-title {

    max-width: 700px;

    margin-right: 5%;
}


.motion-title h2 {

    margin: 0;

    font-size:
        clamp(4rem, 7vw, 8rem);

    line-height: .8;

    letter-spacing: -5px;

    font-weight: 800;
}


.motion-title h2 span {

    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.8);
}


.motion-title p {

    max-width: 400px;

    margin-top: 30px;

    margin-left: auto;

    color: #777;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   SHOWCASE
========================================================= */

.motion-showcase {

    position: relative;

    z-index: 10;

    width: 100%;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   VIDEO PREVIEWS
========================================================= */

.motion-preview {

    position: absolute;

    width: 25%;

    z-index: 2;

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1),
        opacity .5s ease;
}


/* LEFT */

.preview-left {

    left: 0;

    transform:
        translateY(30px)
        rotate(-7deg);
}


/* RIGHT */

.preview-right {

    right: 0;

    transform:
        translateY(30px)
        rotate(7deg);
}


/* =========================================================
   VIDEO FRAME
========================================================= */

.motion-frame {

    position: relative;

    width: 100%;

    min-height: 260px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #080808;

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

    border-radius: 5px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.7);
}


/* IMPORTANT:
   DON'T FORCE VIDEO INTO A RATIO
*/

.motion-frame video {

    display: block;

    width: 100%;

    height: auto;

    max-height: 360px;

    object-fit: contain;

    background: #050505;
}


/* =========================================================
   MAIN FEATURE
========================================================= */

.motion-featured {

    position: relative;

    width: 52%;

    z-index: 5;

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1);
}


.featured-frame {

    position: relative;

    width: 100%;

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

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

    border-radius: 8px;

    background: #060606;

    box-shadow:
        0 40px 100px rgba(0,0,0,.8),
        0 0 80px rgba(0,70,255,.08);
}


/* MAIN VIDEO */

.featured-frame video {

    display: block;

    width: 100%;

    height: auto;

    max-height: 520px;

    object-fit: contain;

    background: #050505;

    transition:
        transform .8s ease;
}


/* =========================================================
   MAIN HOVER
========================================================= */

.motion-featured:hover {

    transform:
        scale(1.025);
}


.motion-featured:hover
.featured-frame video {

    transform:
        scale(1.02);
}


/* =========================================================
   NUMBER TAGS
========================================================= */

.motion-frame-number,
.featured-number {

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 5;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

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

    backdrop-filter:
        blur(10px);

    color: white;

    font-size: 9px;

    letter-spacing: 1px;
}


.featured-number {

    width: 40px;

    height: 40px;

    top: 20px;

    left: 20px;

    color: #00d4ff;

    border-color:
        rgba(0,212,255,.5);
}


/* FEATURED LABEL */

.featured-label {

    position: absolute;

    right: 20px;

    top: 20px;

    padding: 8px 12px;

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

    border-radius: 50px;

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

    backdrop-filter:
        blur(10px);

    color: #00d4ff;

    font-size: 7px;

    letter-spacing: 2px;
}


/* =========================================================
   PROJECT TITLES
========================================================= */

.motion-preview-title {

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: 14px;

    padding-left: 4px;
}


.motion-preview-title span {

    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.motion-preview-title strong {

    color: #aaa;

    font-size: 13px;

    font-weight: 500;
}


/* =========================================================
   FEATURE INFO
========================================================= */

.featured-info {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 18px;
}


.featured-info span {

    color: #555;

    font-size: 7px;

    letter-spacing: 3px;
}


.featured-info h3 {

    margin-top: 6px;

    font-size: 19px;

    font-weight: 500;
}


.motion-arrow {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: #00d4ff;

    transition: .3s ease;
}


.motion-featured:hover
.motion-arrow {

    background: #00d4ff;

    color: #000;

    transform:
        rotate(45deg);
}


/* =========================================================
   PREVIEW HOVER
========================================================= */

.motion-preview:hover {

    z-index: 10;
}

.preview-left:hover {

    transform:
        translateY(10px)
        rotate(-2deg)
        scale(1.04);
}


.preview-right:hover {

    transform:
        translateY(10px)
        rotate(2deg)
        scale(1.04);
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.motion-bottom {

    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 90px;

    color: #444;

    font-size: 8px;

    letter-spacing: 4px;
}


.motion-bottom i {

    color: #00d4ff;

    font-size: 9px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .motion-section {

        padding:
            110px 5% 90px;
    }


    .motion-preview {

        width: 23%;
    }


    .motion-featured {

        width: 55%;
    }


    .featured-frame {

        min-height: 350px;
    }


    .motion-frame {

        min-height: 220px;
    }

}


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

@media (max-width: 700px) {

    .motion-section {

        min-height: auto;

        padding:
            90px 6% 70px;
    }


    .motion-bg-text {

        top: 25%;

        font-size: 45vw;
    }


    .motion-intro {

        display: block;

        margin-bottom: 45px;
    }


    .motion-number {

        margin-bottom: 20px;
    }


    .motion-title {

        margin: 0;
    }


    .motion-title h2 {

        font-size:
            clamp(3.5rem, 15vw, 6rem);

        letter-spacing: -3px;
    }


    .motion-title p {

        margin:
            25px 0 0;

        max-width: 100%;

        font-size: 12px;
    }


    /* HORIZONTAL MOBILE GALLERY */

    .motion-showcase {

        display: flex;

        align-items: flex-start;

        justify-content: flex-start;

        gap: 18px;

        min-height: auto;

        overflow-x: auto;

        overflow-y: visible;

        padding:
            15px 10% 30px;

        margin:
            0 -6%;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;
    }


    .motion-showcase::-webkit-scrollbar {

        display: none;
    }


    .motion-preview,
    .motion-featured {

        position: relative;

        flex: 0 0 82%;

        width: 82%;

        left: auto;

        right: auto;

        top: auto;

        bottom: auto;

        transform: none;

        scroll-snap-align: center;
    }


    .motion-preview:hover,
    .preview-left:hover,
    .preview-right:hover {

        transform: none;
    }


    .featured-frame,
    .motion-frame {

        min-height: 0;

        height: auto;

        aspect-ratio: auto;
    }


    .featured-frame video,
    .motion-frame video {

        width: 100%;

        height: auto;

        max-height: none;

        object-fit: contain;
    }


    .motion-featured {

        order: 1;
    }


    .preview-left {

        order: 2;
    }


    .preview-right {

        order: 3;
    }


    .featured-info {

        padding-top: 14px;
    }


    .motion-bottom {

        margin-top: 35px;

        gap: 10px;

        font-size: 6px;

        letter-spacing: 2px;
    }

}
/* =========================================================
   MIDDLE MOTION VIDEO — REEL FORMAT
   9:16 VERTICAL
========================================================= */

.motion-featured {
    width: 360px;
    max-width: 100%;
}


/* Vertical Reel frame */

.featured-frame {
    width: 100%;
    aspect-ratio: 9 / 16;

    min-height: 0;

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

    overflow: hidden;

    background: #050505;

    border-radius: 8px;

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

    box-shadow:
        0 40px 100px rgba(0,0,0,.8),
        0 0 80px rgba(0,70,255,.08);
}


/* Keep the actual video inside the Reel frame */

.featured-frame video {
    width: 100%;
    height: 100%;

    max-height: none;

    object-fit: contain;

    display: block;

    background: #050505;
}


/* Keep side videos smaller */

.motion-preview {
    width: 25%;
}


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

@media (max-width: 700px) {

    .motion-featured {

        flex: 0 0 72%;

        width: 72%;

        max-width: none;
    }

    .featured-frame {

        width: 100%;

        aspect-ratio: 9 / 16;

        min-height: 0;
    }

    .featured-frame video {

        width: 100%;
        height: 100%;

        object-fit: contain;
    }

}

/* =========================================================
   ROYAL DESIGNS
   FINAL MOBILE NAV + MOTION FIX
========================================================= */


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media (max-width: 768px) {

    /* Make sure the navbar is ALWAYS above everything */

    nav {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 70px !important;

        z-index: 99999 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        padding: 0 6% !important;

        background: rgba(3, 3, 3, 0.92) !important;

        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;

        border-bottom:
            1px solid rgba(255,255,255,0.07) !important;
    }


    /* LOGO */

    nav .logo {
        display: flex !important;

        align-items: center !important;

        position: relative;

        z-index: 100000;
    }


    nav .logo-img {
        width: 42px !important;

        height: auto !important;

        display: block !important;
    }


    /* HAMBURGER */

    nav .menu-toggle {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;

        color: #fff !important;

        cursor: pointer;

        position: relative;

        z-index: 100001;

        background:
            rgba(255,255,255,0.05) !important;

        border:
            1px solid rgba(255,255,255,0.12) !important;

        border-radius: 50%;
    }


    nav .menu-toggle i {
        font-size: 15px !important;
    }


    /* HIDE DESKTOP BUTTON */

    nav .nav-btn {
        display: none !important;
    }


    /* MOBILE MENU */

    nav .nav-links {

        position: fixed !important;

        top: 70px !important;
        right: -100% !important;

        width: 100% !important;

        height: calc(100svh - 70px) !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 28px !important;

        padding: 30px !important;

        margin: 0 !important;

        background:
            rgba(3,3,3,0.98) !important;

        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;

        z-index: 99998 !important;

        transition:
            right .4s cubic-bezier(.77,0,.18,1) !important;
    }


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


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


    nav .nav-links a {

        display: block !important;

        color: #fff !important;

        font-size: 20px !important;

        text-decoration: none !important;

        padding: 5px !important;
    }


    nav .nav-links a:hover {
        color: #00d4ff !important;
    }


    /* Prevent the page from sitting underneath nav */

    .hero {
        padding-top: 70px !important;
    }

}


/* =========================================================
   MOTION SECTION — MOBILE
========================================================= */

@media (max-width: 768px) {

    .motion-section {

        position: relative !important;

        width: 100% !important;

        min-height: auto !important;

        padding:
            90px 6% 70px !important;

        overflow: hidden !important;

        z-index: 1 !important;

        background: #030303 !important;
    }


    /* =========================================
       MOTION HEADING
    ========================================= */

    .motion-intro {

        position: relative !important;

        z-index: 5 !important;

        display: block !important;

        margin-bottom: 40px !important;
    }


    .motion-number {

        margin-bottom: 18px !important;

        font-size: 8px !important;

        letter-spacing: 3px !important;
    }


    .motion-title {

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;
    }


    .motion-title h2 {

        font-size:
            clamp(3rem, 14vw, 5rem) !important;

        line-height: .88 !important;

        letter-spacing: -3px !important;
    }


    .motion-title p {

        width: 100% !important;

        max-width: 420px !important;

        margin:
            22px 0 0 !important;

        font-size: 12px !important;

        line-height: 1.7 !important;

        color: #777 !important;
    }


    /* =========================================
       MOBILE VIDEO TRACK
    ========================================= */

    .motion-showcase {

        position: relative !important;

        width: calc(100% + 12%) !important;

        margin-left: -6% !important;

        display: flex !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        gap: 18px !important;

        min-height: auto !important;

        padding:
            10px 7% 30px !important;

        overflow-x: auto !important;

        overflow-y: visible !important;

        scroll-snap-type:
            x mandatory !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }


    .motion-showcase::-webkit-scrollbar {
        display: none !important;
    }


    /* =========================================
       ALL THREE CARDS
    ========================================= */

    .motion-preview,
    .motion-featured {

        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        flex-shrink: 0 !important;

        margin: 0 !important;

        transform: none !important;

        scroll-snap-align: center !important;
    }


    /* SIDE VIDEOS */

    .motion-preview {

        width: 72% !important;

        flex-basis: 72% !important;

        opacity: .82;
    }


    /* MIDDLE / FEATURED VIDEO */

    .motion-featured {

        width: 70% !important;

        flex-basis: 70% !important;

        max-width: none !important;

        order: 2 !important;

        z-index: 5 !important;
    }


    .preview-left {
        order: 1 !important;
    }


    .preview-right {
        order: 3 !important;
    }


    /* =========================================
       REEL FRAME
    ========================================= */

    .featured-frame {

        position: relative !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        aspect-ratio: 9 / 16 !important;

        overflow: hidden !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 8px !important;

        background: #050505 !important;
    }


    /* REEL VIDEO */

    .featured-frame video {

        width: 100% !important;

        height: 100% !important;

        max-width: 100% !important;

        max-height: 100% !important;

        display: block !important;

        object-fit: contain !important;

        background: #050505 !important;
    }


    /* =========================================
       SIDE VIDEO FRAMES
    ========================================= */

    .motion-frame {

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        aspect-ratio: auto !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        overflow: hidden !important;

        background: #050505 !important;

        border-radius: 7px !important;
    }


    .motion-frame video {

        display: block !important;

        width: 100% !important;

        height: auto !important;

        max-width: 100% !important;

        max-height: none !important;

        object-fit: contain !important;
    }


    /* =========================================
       INFORMATION
    ========================================= */

    .motion-preview-title {

        margin-top: 12px !important;

        padding-left: 2px !important;
    }


    .motion-preview-title span {

        font-size: 7px !important;

        letter-spacing: 2px !important;
    }


    .motion-preview-title strong {

        font-size: 13px !important;
    }


    .featured-info {

        padding-top: 14px !important;
    }


    .featured-info h3 {

        font-size: 16px !important;
    }


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

    .motion-bg-text {

        top: 25% !important;

        left: 50% !important;

        font-size: 45vw !important;

        z-index: 0 !important;
    }


    /* =========================================
       BOTTOM LABEL
    ========================================= */

    .motion-bottom {

        position: relative !important;

        z-index: 5 !important;

        margin-top: 25px !important;

        gap: 9px !important;

        font-size: 6px !important;

        letter-spacing: 2px !important;
    }

}
/* =========================================================
   ROYAL DESIGNS — CLEAN FINAL MOBILE SYSTEM
========================================================= */

@media (max-width: 768px) {

    /* =========================
       NAVIGATION
    ========================= */

    body {
        padding-top: 70px;
    }

    nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 70px !important;

        padding: 0 20px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;

        flex-wrap: nowrap !important;

        background: rgba(5,5,5,.94) !important;

        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;

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

        z-index: 999999 !important;
    }


    /* LOGO */

    nav .logo {
        display: flex !important;
        align-items: center !important;

        flex: 0 0 auto !important;
    }

    nav .logo-img {
        width: 42px !important;
        height: auto !important;
    }


    /* HAMBURGER */

    nav .menu-toggle {
        display: flex !important;

        width: 42px !important;
        height: 42px !important;

        align-items: center !important;
        justify-content: center !important;

        color: white !important;

        cursor: pointer;

        z-index: 1000001 !important;

        border-radius: 50%;

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

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


    nav .menu-toggle i {
        font-size: 16px !important;
    }


    /* HIDE DESKTOP BUTTON */

    nav .nav-btn {
        display: none !important;
    }


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

    nav .nav-links {

        position: fixed !important;

        top: 70px !important;
        left: 0 !important;
        right: auto !important;

        width: 100% !important;
        height: calc(100vh - 70px) !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 28px !important;

        padding: 30px !important;
        margin: 0 !important;

        background: rgba(3,3,3,.98) !important;

        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;

        transform: translateX(100%) !important;

        transition:
            transform .45s cubic-bezier(.77,0,.18,1) !important;

        z-index: 1000000 !important;
    }


    nav .nav-links.active {

        transform: translateX(0) !important;

    }


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


    nav .nav-links li a {

        display: block !important;

        color: white !important;

        text-decoration: none !important;

        font-size: 22px !important;

        font-weight: 500 !important;

        padding: 5px !important;

        transition: .3s ease;
    }


    nav .nav-links li a:hover {
        color: #00d4ff !important;
    }


    /* =========================
       MOTION SECTION
    ========================= */

    .motion-section {

        width: 100% !important;

        min-height: auto !important;

        padding:
            80px 0 70px !important;

        overflow: hidden !important;

        position: relative !important;

        z-index: 1 !important;
    }


    /* =========================
       MOTION INTRO
    ========================= */

    .motion-intro {

        display: block !important;

        width: 100% !important;

        padding: 0 7% !important;

        margin-bottom: 40px !important;
    }


    .motion-number {

        margin-bottom: 18px !important;

        font-size: 8px !important;

        letter-spacing: 3px !important;
    }


    .motion-title {

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;
    }


    .motion-title h2 {

        font-size:
            clamp(3rem, 14vw, 5rem) !important;

        line-height: .88 !important;

        letter-spacing: -3px !important;
    }


    .motion-title p {

        width: 100% !important;

        max-width: 400px !important;

        margin: 22px 0 0 !important;

        font-size: 12px !important;

        line-height: 1.7 !important;
    }


    /* =========================
       VIDEO SLIDER
    ========================= */

    .motion-showcase {

        width: 100% !important;

        min-height: auto !important;

        margin: 0 !important;

        padding:
            10px 8% 35px !important;

        display: flex !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        gap: 18px !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        scroll-snap-type:
            x mandatory !important;

        -webkit-overflow-scrolling:
            touch !important;

        scrollbar-width: none !important;
    }


    .motion-showcase::-webkit-scrollbar {
        display: none !important;
    }


    /* =========================
       ALL VIDEO CARDS
    ========================= */

    .motion-preview,
    .motion-featured {

        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;

        flex-shrink: 0 !important;

        scroll-snap-align: center !important;

        margin: 0 !important;
    }


    /* SIDE VIDEOS */

    .motion-preview {

        width: 76% !important;

        flex-basis: 76% !important;

        opacity: .85;
    }


    /* =========================
       MIDDLE REEL
    ========================= */

    .motion-featured {

        width: 68% !important;

        flex-basis: 68% !important;

        max-width: 330px !important;

        order: 2 !important;

        z-index: 5 !important;
    }


    .preview-left {
        order: 1 !important;
    }


    .preview-right {
        order: 3 !important;
    }


    /* =========================
       REEL FRAME
    ========================= */

    .featured-frame {

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        aspect-ratio: 9 / 16 !important;

        overflow: hidden !important;

        display: block !important;

        background: #050505 !important;

        border-radius: 8px !important;

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


    .featured-frame video {

        display: block !important;

        width: 100% !important;

        height: 100% !important;

        max-width: none !important;

        max-height: none !important;

        object-fit: contain !important;

        background: #050505 !important;
    }


    /* =========================
       SIDE VIDEO FRAME
    ========================= */

    .motion-frame {

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        aspect-ratio: auto !important;

        overflow: hidden !important;

        background: #050505 !important;

        border-radius: 7px !important;
    }


    .motion-frame video {

        display: block !important;

        width: 100% !important;

        height: auto !important;

        max-width: 100% !important;

        max-height: none !important;

        object-fit: contain !important;
    }


    /* =========================
       FEATURE INFO
    ========================= */

    .featured-info {

        padding-top: 14px !important;
    }


    .featured-info h3 {

        font-size: 16px !important;
    }


    /* =========================
       PREVIEW INFO
    ========================= */

    .motion-preview-title {

        margin-top: 12px !important;

        padding-left: 2px !important;
    }


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

    .motion-bg-text {

        font-size: 45vw !important;

        top: 25% !important;

        z-index: 0 !important;
    }


    /* =========================
       BOTTOM TEXT
    ========================= */

    .motion-bottom {

        margin-top: 20px !important;

        gap: 9px !important;

        font-size: 6px !important;

        letter-spacing: 2px !important;
    }

}
img {
    content-visibility: auto;
}
/* =========================================================
   HOMEPAGE FINAL CTA
========================================================= */

.home-cta {
    position: relative;

    padding: 150px 7%;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            rgba(0,212,255,.08),
            transparent 55%
        );
}


.home-cta > span {
    color: #00d4ff;

    font-size: 9px;

    letter-spacing: 4px;
}


.home-cta h2 {
    margin: 25px auto;

    max-width: 900px;

    font-size: clamp(50px, 8vw, 110px);

    line-height: .85;

    letter-spacing: -6px;
}


.home-cta h2 em {
    display: block;

    color: transparent;

    -webkit-text-stroke: 1px white;

    font-style: normal;
}


.home-cta p {
    max-width: 450px;

    margin: 0 auto 35px;

    color: #777;

    font-size: 13px;

    line-height: 1.8;
}


.home-cta a {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 14px 22px;

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

    border-radius: 50px;

    color: white;

    text-decoration: none;

    font-size: 9px;

    letter-spacing: 2px;

    transition: .3s ease;
}


.home-cta a:hover {
    background: #00d4ff;

    border-color: #00d4ff;

    color: #000;

    gap: 25px;
}

/* =========================================================
   GLOWING CROWN — FINAL CTA
========================================================= */

.cta-crown {
    width: 70px;
    height: 70px;

    margin: 0 auto 30px;

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

    color: #00d4ff;

    font-size: 32px;

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

    border-radius: 50%;

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

    animation: crownGlow 2.8s ease-in-out infinite;
}


/* GLOW ON → OFF → ON */

@keyframes crownGlow {

    0%,
    100% {

        opacity: .45;

        transform: translateY(0);

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

        text-shadow:
            0 0 5px rgba(0,212,255,.2);
    }

    50% {

        opacity: 1;

        transform: translateY(-4px);

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

        text-shadow:
            0 0 8px #00d4ff,
            0 0 25px rgba(0,212,255,.7),
            0 0 45px rgba(0,212,255,.35);
    }

}
/* =========================================================
   ROYAL DESIGNS — LIQUID LOGO LOADER
========================================================= */

.royal-loader {

    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100vh !important;

    background: #000 !important;

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

    overflow: hidden !important;

    z-index: 999999 !important;

}


/* =========================================================
   LOGO AREA
========================================================= */

.royal-logo-loader {

    position: relative;

    width: 160px;
    height: 160px;

}


/* =========================================================
   HOLLOW LOGO
========================================================= */

.royal-logo-outline {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        grayscale(1)
        brightness(0)
        invert(1);

    opacity: .25;

}


/* =========================================================
   LIQUID FILL
========================================================= */

.royal-logo-liquid {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    height: 0;

    overflow: hidden;

    animation:
        royalLiquidRise
        2.5s
        cubic-bezier(.65,0,.2,1)
        forwards;

}


/* THE LOGO INSIDE THE LIQUID */

.royal-logo-liquid img {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 160px;
    height: 160px;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1)
        drop-shadow(
            0 0 12px rgba(255,255,255,.9)
        );

}


/* =========================================================
   LIQUID RISE
========================================================= */

@keyframes royalLiquidRise {

    0% {
        height: 0%;
    }

    15% {
        height: 8%;
    }

    30% {
        height: 20%;
    }

    50% {
        height: 42%;
    }

    70% {
        height: 65%;
    }

    85% {
        height: 85%;
    }

    100% {
        height: 100%;
    }

}


/* =========================================================
   GLOW
========================================================= */

.royal-logo-loader::after {

    content: "";

    position: absolute;

    inset: -40px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.18),
            transparent 65%
        );

    opacity: 0;

    animation:
        royalGlow
        1s
        ease
        2.2s
        forwards;

    pointer-events: none;

}


@keyframes royalGlow {

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

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }

}


/* =========================================================
   FINAL LOGO BURST
========================================================= */

.royal-logo-loader {

    animation:
        royalLogoBurst
        .8s
        cubic-bezier(.2,.8,.2,1)
        2.7s
        forwards;

}


@keyframes royalLogoBurst {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }

}


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

.royal-loader {

    animation:
        royalLoaderExit
        .7s
        ease
        3.2s
        forwards;

}


@keyframes royalLoaderExit {

    to {

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

    }

}

/* =========================================================
   SEAMLESS INSTAGRAM CAROUSEL
========================================================= */

.carousel-project {
    width: 100%;
    padding: 120px 7%;
    background: #050505;
    overflow: hidden;
}


/* HEADER */

.carousel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 60px;
}

.carousel-heading span {
    color: #00d4ff;
    font-size: 9px;
    letter-spacing: 4px;
}

.carousel-heading h2 {
    margin: 18px 0 0;
    font-size: clamp(50px, 7vw, 100px);
    line-height: .85;
    letter-spacing: -5px;
}

.carousel-heading h2 em {
    color: transparent;
    -webkit-text-stroke: 1px white;
    font-style: normal;
}

.carousel-heading p {
    max-width: 330px;
    color: #777;
    font-size: 12px;
    line-height: 1.8;
}


/* =========================================================
   SEAMLESS VIEWPORT
========================================================= */

.carousel-wrapper {
    width: 100%;

    overflow: hidden;

    cursor: grab;

    /* remove any gaps around the carousel */
    padding: 0;
}


.carousel-wrapper:active {
    cursor: grabbing;
}


/* =========================================================
   CONTINUOUS TRACK
========================================================= */

.carousel-track {

    display: flex;

    gap: 4px;

    width: max-content;

    transform: translateX(0);

    transition:
        transform .65s cubic-bezier(.77,0,.18,1);

    user-select: none;
}


/* =========================================================
   SLIDES
========================================================= */

.carousel-slide {

    position: relative;

    flex: 0 0 360px;

    width: 360px;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border-radius: 0;

    border: none;

    background: transparent;

    box-shadow: none;

    transform: none !important;
}


.carousel-slide img {

    display: block;

    width: 100%;

    height: auto;

    margin: 0;

    padding: 0;

    pointer-events: none;

    user-select: none;

    /* IMPORTANT:
       don't crop the carousel artwork
    */

    object-fit: contain;
}


/* =========================================================
   REMOVE ACTIVE EFFECT
========================================================= */

.carousel-slide.active {
    transform: none !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   CONTROLS
========================================================= */

.carousel-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 25px;

    margin-top: 35px;
}


.carousel-controls button {

    width: 44px;
    height: 44px;

    display: flex;

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

    border-radius: 50%;

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

    background: transparent;

    color: white;

    cursor: pointer;

    transition: .3s ease;
}


.carousel-controls button:hover {

    background: #00d4ff;

    color: #000;

    border-color: #00d4ff;
}


.carousel-counter {

    display: flex;

    gap: 8px;

    color: #555;

    font-size: 10px;

    letter-spacing: 2px;
}


#carouselCurrent {
    color: white;
}


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

@media (max-width: 768px) {

    .carousel-project {

        padding: 90px 0;
    }


    .carousel-heading {

        display: block;

        padding: 0 7%;

        margin-bottom: 40px;
    }


    .carousel-heading h2 {

        font-size: 15vw;

        letter-spacing: -3px;
    }


    .carousel-heading p {

        margin-top: 25px;

        max-width: 320px;
    }


    .carousel-wrapper {

        width: 100%;

        overflow: hidden;

        padding: 0;
    }


    .carousel-track {

        gap: 4px;
    }


    .carousel-slide {

        flex: 0 0 78vw;

        width: 78vw;

        max-width: none;
    }


    .carousel-controls {

        margin-top: 25px;
    }

}