*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
html {
    /* scroll-behavior is applied via JS to prevent history restore bugs */
}
body{
    background: #080808;
    color: #fff;
    overflow-x: hidden;
}

/* ── Splash Screen Intro ── */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #080808;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
#intro-screen.slide-up {
    transform: translateY(-100%);
}
#intro-text {
    color: rgba(255, 255, 255, 0.72);
    font-family: 'Lora', serif;
    font-size: 3.5vw;
    opacity: 0;
    transition: opacity 0.8s ease;
    text-align: center;
    padding: 0 20px;
}
#intro-divider {
    width: 250px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.8s ease;
}
#intro-tagline {
    color: rgba(255, 255, 255, 0.5); /* slightly lower opacity */
    font-family: 'Alegreya', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.4vw; /* lower font size */
    opacity: 0;
    transition: opacity 0.8s ease;
    text-align: center;
    padding: 0 20px;
}
@media only screen and (max-width: 768px) {
    #intro-text {
        font-size: 6vw;
    }
    #intro-divider {
        width: 150px;
    }
    #intro-tagline {
        font-size: 3.5vw;
    }
}
#intro-text.fade-in,
#intro-divider.fade-in,
#intro-tagline.fade-in {
    opacity: 1;
    transition: opacity 0.8s ease; /* fade in duration */
}

/* ============================================================
   HELICOPTER LOADER (White)
   ============================================================ */
.loader-container {
    position: absolute;
    bottom: 40px;
    left: 50%;
    width: 100%;
    max-width: 400px;
    height: 60px;
    transform: translateX(-50%) scale(0.65);
    opacity: 0;
    transition: opacity 0.8s ease;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.loader-container.fade-in {
    opacity: 1;
}
.loader {
  position: absolute;
  top: 50%;
  margin-left: -50px;
  left: 50%;
  animation: speeder 0.4s linear infinite;
}
.loader > span {
  height: 5px;
  width: 35px;
  background: #555555;
  position: absolute;
  top: -19px;
  left: 60px;
  border-radius: 2px 10px 1px 0;
}
.base span {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 100px solid #555555;
  border-bottom: 6px solid transparent;
}
.base span:before {
  content: "";
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #555555;
  position: absolute;
  right: -110px;
  top: -16px;
}
.base span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-right: 55px solid #555555;
  border-bottom: 16px solid transparent;
  top: -16px;
  right: -98px;
}
.face {
  position: absolute;
  height: 12px;
  width: 20px;
  background: #555555;
  border-radius: 20px 20px 0 0;
  transform: rotate(-40deg);
  right: -125px;
  top: -15px;
}
.face:after {
  content: "";
  height: 12px;
  width: 12px;
  background: #555555;
  right: 4px;
  top: 7px;
  position: absolute;
  transform: rotate(40deg);
  transform-origin: 50% 50%;
  border-radius: 0 0 0 2px;
}
.loader > span > span:nth-child(1),
.loader > span > span:nth-child(2),
.loader > span > span:nth-child(3),
.loader > span > span:nth-child(4) {
  width: 30px;
  height: 1px;
  background: #555555;
  position: absolute;
  animation: fazer1 0.2s linear infinite;
}
.loader > span > span:nth-child(2) {
  top: 3px;
  animation: fazer2 0.4s linear infinite;
}
.loader > span > span:nth-child(3) {
  top: 1px;
  animation: fazer3 0.4s linear infinite;
  animation-delay: -1s;
}
.loader > span > span:nth-child(4) {
  top: 4px;
  animation: fazer4 1s linear infinite;
  animation-delay: -1s;
}
@keyframes fazer1 { 0% { left: 0; } 100% { left: -80px; opacity: 0; } }
@keyframes fazer2 { 0% { left: 0; } 100% { left: -100px; opacity: 0; } }
@keyframes fazer3 { 0% { left: 0; } 100% { left: -50px; opacity: 0; } }
@keyframes fazer4 { 0% { left: 0; } 100% { left: -150px; opacity: 0; } }
@keyframes speeder {
  0% { transform: translate(2px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -3px) rotate(-1deg); }
  20% { transform: translate(-2px, 0px) rotate(1deg); }
  30% { transform: translate(1px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 3px) rotate(-1deg); }
  60% { transform: translate(-1px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-2px, -1px) rotate(1deg); }
  90% { transform: translate(2px, 1px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.longfazers {
  position: absolute;
  width: 100%;
  height: 100%;
}
.longfazers span {
  position: absolute;
  height: 2px;
  width: 20%;
  background: #555555;
}
.longfazers span:nth-child(1) { top: 20%; animation: lf 0.6s linear infinite; animation-delay: -5s; }
.longfazers span:nth-child(2) { top: 40%; animation: lf2 0.8s linear infinite; animation-delay: -1s; }
.longfazers span:nth-child(3) { top: 60%; animation: lf3 0.6s linear infinite; }
.longfazers span:nth-child(4) { top: 80%; animation: lf4 0.5s linear infinite; animation-delay: -3s; }
@keyframes lf { 0% { left: 200%; } 100% { left: -200%; opacity: 0; } }
@keyframes lf2 { 0% { left: 200%; } 100% { left: -200%; opacity: 0; } }
@keyframes lf3 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; } }
@keyframes lf4 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; } }

#header{
    width: 100%;
    height: 100vh; /* Fallback for older browsers */
    height: 100svh; /* Small viewport height to fix mobile jitter */
    background-image: url(images/background.png);
    background-size: cover;
    background-position: right center;
    /* background-attachment: fixed; Removed to fix severe scroll lag/glitching on Chrome/Safari */
    position: relative;   /* anchor for scroll indicator */
}

/* ── Background blur layer for scroll effect ── */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind the container, but above the background image */
    pointer-events: none; /* Let clicks pass through */
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    /* No transition on scroll values to avoid lag during fast scrolling, 
       but we can use transform/opacity optimizations if needed */
    will-change: backdrop-filter, background-color;
}

#header .container {
    position: relative;
    z-index: 2; /* Keep content above the background layer */
}


/* ── Scroll indicator (home section) ── */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 28px;
    text-decoration: none;
    animation: floatUpDown 2.4s ease-in-out infinite;
    transition: color 0.3s ease, transform 0.3s ease;
    z-index: 10;
}
.scroll-indicator:hover {
    color: #ff004f;
    transform: translateX(-50%) scale(1.15);
    animation-play-state: paused;
}

@keyframes floatUpDown {
    0%,  100% { transform: translateX(-50%) translateY(0); }
    50%        { transform: translateX(-50%) translateY(-10px); }
}
.container{
    padding: 10px 7%;
}
#portfolio .container{
    padding: 10px 5%;
}

/* ============================================================
   LIQUID GLASS NAVBAR — iOS 26 / macOS Tahoe aesthetic
   ============================================================ */

/* ── CSS custom properties ── */
:root {
    --glass-bg:           rgba(20, 20, 32, 0.22);
    --glass-bg-scrolled:  rgba(10, 10, 20, 0.72);
    --glass-blur:         saturate(180%) blur(40px);
    --glass-border:       rgba(255, 255, 255, 0.10);
    --glass-rim:          rgba(255, 255, 255, 0.18);
    --glass-shadow:       0 8px 40px rgba(0, 0, 0, 0.40),
                          0 2px 8px  rgba(0, 0, 0, 0.25),
                          inset 0 1px 0 rgba(255,255,255,0.14),
                          inset 0 -1px 0 rgba(0,0,0,0.18);
    --accent:             #ff004f;
    --nav-height:         64px;
}

/* ========= FIXED TOP NAVBAR ========= */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 0 6%;
    z-index: 9999;

    /* Liquid Glass core */
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    /* Prismatic border — top rim only */
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);

    transition:
        background 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow  0.4s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.4s ease;
}

/* Specular rim highlight (top edge gleam) */
nav::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.10) 0%,
        transparent 60%
    );
    z-index: 0;
}

nav > * { position: relative; z-index: 1; }

/* Scrolled state — denser glass */
nav.scrolled {
    background: var(--glass-bg-scrolled);
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -1px 0 rgba(0,0,0,0.22);
    border-bottom-color: rgba(255,255,255,0.08);
}

.logo {
    width: 100px;
    flex-shrink: 0;
}

.nav-right{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    height:100%;
    gap:18px;
}

.profile-logo{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    object-position:center;
    display:block;
    padding:0;
    margin:0;
    overflow:hidden;

    /* Creates a 2px transparent gap between image and the outer ring */
    border: 2px solid transparent;
    
    /* Draws the blue ring on the very outside edge of the transparent border */
    box-shadow:
    0 0 0 1px rgba(109,140,255,.8),
    0 0 10px 2px rgba(109,140,255,.25),
    inset 0 0 8px rgba(255,255,255,.1);
    
    background:rgba(255,255,255,.06);
    background-clip: padding-box; /* Prevents background from bleeding into the transparent border gap */
}
/* ── Desktop nav links ── */
nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
}

nav ul li {
    display: inline-block;
    list-style: none;
    margin: 0;
}

nav ul li a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.4px;
    padding: 7px 16px;
    border-radius: 20px;
    position: relative;
    display: block;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

/* Hover: subtle glass pill */
nav ul li a:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(0,0,0,0.20);
}

/* Active: filled glass pill with accent tint */
nav ul li a.active-nav {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 0, 79, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(255,0,79,0.2),
        0 0 16px rgba(255,0,79,0.15),
        0 2px 8px rgba(0,0,0,0.25);
}


@media (max-width: 1024px) {
    .submenu {
        display: none !important;
    }
    .has-submenu .fa-caret-down {
        display: none !important;
    }
}

/* --- Submenu Styles (Desktop) --- */
@media (min-width: 1025px) {
    nav {
        position: fixed; /* Nav is already fixed, but this acts as anchor for absolute child */
    }
    .has-submenu .submenu {
        overflow: hidden;
        position: absolute;
        top: 100%; /* Just below the navbar */
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background: rgba(20, 20, 32, 0.85);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        height: 0; /* Hidden by default */
        box-sizing: border-box;
        transition: height 0.3s ease-in-out;
        z-index: -1; /* Behind nav bottom border */
        
        /* Fade blur on left and right */
        mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
        z-index: -1; /* Behind nav bottom border */
    }

    /* Invisible bridge to prevent hover loss between link and submenu */
    .has-submenu .submenu::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 40px; 
    }

    .has-submenu:hover .submenu {
        height: 55px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    .submenu li {
        margin: 0 15px;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        transition-delay: 0s;
    }

    .has-submenu:hover .submenu li {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.1s; /* Delay appearance until bar slides down */
    }

    .submenu li a {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 5px 10px;
        transition: color 0.2s ease, text-shadow 0.2s ease;
        background: none !important;
        box-shadow: none !important;
    }

    .submenu li a:hover {
        color: #fff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
}

/* Remove old underline pseudo-element */
nav ul li a::after { display: none; }
.header-text{
    margin-top: 20%;
    font-size: 30px;
    width: 55%;
    /* Fluidly restrict the max width on smaller desktop screens to force the heading to wrap 
       naturally before reaching the portrait. At 1920px, 50vw is 960px (no restriction).
       At 1024px, 50vw is 512px (forces wrap). */
    max-width: clamp(380px, 50vw, 1000px);
    will-change: transform, opacity;
}
.header-text h1{
    font-size: 60px;
    margin-top: 20px;
}


.intro{
    font-family: "Alegreya", serif;
    font-style: italic;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.mobile-break {
    display: none;
}

.name-font{
    font-family: "Risque", serif;
    font-size: 150px;
    line-height: 1;
    margin-bottom: 25px;

    display: inline-block;
    transform: scale(1.60, 1.55);
    transform-origin: left center;
}

#mesh-canvas {
    position: absolute;
    z-index: 2;
    pointer-events: none; /* Crucial: prevent the padded canvas from blocking clicks on buttons below */
}

.role{
    font-family: "Alegreya", serif;
    font-style: italic;
    font-size: 20px;      /* same size as intro */
    font-weight: 500;
    color: rgba(255,255,255,.65);  /* less bright */
    letter-spacing: 1px;
    margin-top: 20px;
    max-width: 700px;   /* limit width */
    line-height: 1.5;   /* better spacing */
}

.name-red{
    color: #ff004f;
    font-family: inherit;
}


/*-------------about section------------------*/
#about{
    padding: 64px 0 44px;
    color: #ababab;
}
.row{
    display: flex;
    justify-content: space-between;
    flex-wrap:nowrap;
    gap:14px;
}

.about-col-1 {
    flex-basis: 42%;
}

/* ============================================================
   WHEEL-DRIVEN CARD GALLERY
   ============================================================ */
.card-gallery-wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    border-radius: 28px;
    padding: 10px 0;
    max-width:420px;
    margin:0 auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.30);
    overflow: hidden; /* Crucial for clipping the rotating beam to the rounded corners */
    display: flex;
    justify-content: center;
}

/* The sweeping animated border effect */
.card-gallery-wrap::before {
    position: absolute;
    content: ' ';
    display: block;
    width: 250px; /* Increased line length */
    height: 160%;
    top: -30%; /* Shift up to cover corners during rotation */
    background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);
    animation: rotation_481 8000ms infinite linear; /* Slowed down from 5000ms */
    z-index: 0;
}

/* The inner mask that blocks the middle of the beam, revealing only the border */
.card-gallery-wrap::after {
    content: '';
    position: absolute;
    inset: 2px; /* 2px border width */
    border-radius: 26px; /* 28px outer - 2px gap */
    background: #000; /* Solid background to block the beam, replacing glassmorphism */
    z-index: 0;
}

/* Ensure the gallery content sits ON TOP of the mask */
.card-gallery-wrap > * {
    position: relative;
    z-index: 1;
}

@keyframes rotation_481 {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

/* Tall clipping window with fade mask for peek effect */
.card-gallery {
    position: relative;
    width: 100%;
    height: 620px;
    cursor: ns-resize;
    /* Fade top & bottom — blurry peek of adjacent cards */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.55) 9%,
        black 18%,
        black 82%,
        rgba(0,0,0,0.55) 91%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.55) 9%,
        black 18%,
        black 82%,
        rgba(0,0,0,0.55) 91%,
        transparent 100%
    );
}

/* Every card sits in the same slot, absolutely stacked */
.gallery-card {
    position: absolute;
    left: 18px;
    width:calc(100% - 36px);
    top: 50%;
    height: 540px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.55),
        0 4px 16px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);
    /* Default: hidden below */
    opacity: 0;
    transform: translateY(calc(-50% + 120px)) scale(0.88);
    filter: blur(6px);
    pointer-events: none;
    transition:
        transform  0.52s cubic-bezier(0.22, 1, 0.36, 1),
        opacity    0.42s ease,
        filter     0.42s ease;
    will-change: transform, opacity, filter;
    z-index: 1;
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:22px;
}
/* ── Card states ── */

/* Active card — center stage */
.gallery-card.card-active {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    filter: blur(0);
    pointer-events: auto;
    z-index: 10;
}

/* Card just above active (peek from top) */
.gallery-card.card-prev {
    opacity: 0.90;
    transform: translateY(calc(-50% - 200px)) scale(0.80);
    filter: blur(1px);
    z-index: 7;
}

/* Card just below active (peek from bottom) */
.gallery-card.card-next {
    opacity: 0.90;
    transform: translateY(calc(-50% + 300px)) scale(0.80);
    filter: blur(1px);
    z-index: 7;
}

/* Hidden cards further away */
.gallery-card.card-far-prev {
    opacity: 0;
    transform: translateY(calc(-50% - 280px)) scale(0.80);
    z-index: 4;
}
.gallery-card.card-far-next {
    opacity: 0;
    transform: translateY(calc(-50% + 280px)) scale(0.80);
    z-index: 4;
}

.about-col-2{
    flex-basis: 55%;
}

.sub-title{
    font-size: 52px;
    font-weight: 600;
    color: #fff;
}

.tab-titles{
    display: flex;
    margin: 14px 0 22px;
}
.tab-links{
    margin-right: 36px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}
.tab-links::after{
    content: '';
    width: 0;
    height: 3px;
    background: #ff004f;
    position: absolute;
    left: 0;
    bottom: -8px;
    transition: 0.5s;
}
.tab-links.active-link::after{
    width: 50%;
}
.tab-contents ul li{
    list-style: none;
    margin: 8px 0;
    font-size: 13.5px;
}
.tab-contents ul li span{
    color: #b54769;
    font-size: 15px;
}
.highlight-red {
    color: #ff004f !important;
}
.status-pursuing {
    color: #00d4ff !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    font-weight: 600;
    font-size: 0.9em;
}
.status-completed {
    color: #00ff88 !important;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
    font-weight: 600;
    font-size: 0.9em;
}
.tab-contents{
    display: none;
}
.tab-contents.active-tab{
    display: block;
}

/* ============================================================
   ABOUT — INFO ROW (tabs left + tech stack right)
   ============================================================ */
.about-intro {
    margin-bottom: 16px;
    line-height: 1.62;
    font-size: 14px;
    color: #ababab;
}

.about-info-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 4px;
}

/* Left: Experience / Education tabs */
.tabs-panel {
    flex: 0 0 50%;
    min-width: 0;
}

/* Right: Tech Stack container */
.tech-stack-panel {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 16px 14px 12px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 8px 32px rgba(0,0,0,0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}

.tech-panel-title {
    font-family: 'Lora', serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.tech-group-label {
    font-family: 'Lora', serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ff004f;
    margin: 10px 0 6px;
}

.tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tech-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 6px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    cursor: default;
    transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.tech-chip:hover {
    border-color: rgba(255,0,79,0.45);
    background: rgba(255,0,79,0.10);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,0,79,0.15);
}
.tech-chip img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.tech-chip img.icon-invert {
    filter: invert(1) brightness(0.85);
}
.tech-chip-icon {
    font-size: 14px;
    color: #ff004f;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tech-chip span {
    font-family: 'Lora', serif;
    font-size: 11px;
    font-weight: 500;
    color: #d0d0d0;
    white-space: nowrap;
}

/* ============================================================
   ABOUT — SERVICES STRIP
   ============================================================ */
.about-services-strip {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.about-service-card {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 4px 20px rgba(0,0,0,0.25);
}
.about-service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,0,79,0.06) 0%, transparent 60%);
    opacity: 0;
    pointer-events: none;
}

.svc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.svc-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,0,79,0.12);
    border: 1px solid rgba(255,0,79,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.svc-icon-wrap i {
    font-size: 16px;
    color: #ff004f;
}

.about-service-card h4 {
    font-family: 'Lora', serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 1;
}
.about-service-card p {
    font-family: 'Lora', serif;
    font-size: 11.5px;
    color: #999;
    line-height: 1.5;
    margin: 0;
    position: relative;
    z-index: 1;
}


#services{
    padding: 30px 0;
}
.services-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 40px;
    margin-top: 40px;
}
.services-list div{
    background: #262626;
    padding: 40px;
    font-size: 13px;
    font-weight: 300;
    border-radius: 10px;
    transition: background 0.5s, transform 0.5s;
}
.services-list div i{
    font-size: 50px;
    margin-bottom: 30px;
}
.services-list div h2{
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 20px;
}
.services-list div a{
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    margin-top: 20px;
    display: inline-block;
}
.services-list div:hover{
    background: #ff004f;
    transform: translateY(-10px);
}
/*-------------portfolio section------------------*/
#portfolio{
    padding: 120px 0;
}
.portfolio-header {
    margin-bottom: 30px;
}
.portfolio-subtitle {
    color: #ababab;
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.5;
}
.work-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-top:50px;
    align-items:start;
}
.work{
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 24px;
    transition: .35s;
}
.work img{
    width:100%;
    height:420px;
    object-fit:cover;

    display:block;

    border-radius:24px;

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

    background:#111;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 15px 40px rgba(0,0,0,.35);

    transition:.5s;
}
.glass-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    background: rgba(20, 20, 32, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    border-radius: 0 0 24px 24px;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-header h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #fff;
    margin: 0;
}
.panel-desc {
    font-family: 'Lora', serif;
    font-size: 14px;
    color: #ccc;
    margin: 0;
    text-align: left;
}
.panel-header a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    background: rgba(255, 0, 79, 0.8);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.3s;
}
.panel-header a:hover {
    background: #ff004f;
    transform: scale(1.1);
}
.work:hover{
    transform:translateY(-8px);
}

.work:hover img{
    transform:scale(1.04);
}
.work:hover .glass-panel{
    transform: translateY(0);
    opacity:1;
}

/* --- 3D Coverflow Styles (Desktop Only) --- */
.coverflow-wrapper {
    display: none; /* Hidden on mobile */
    width: 100%;
    height: 750px;
    margin-top: 50px;
}

@media (min-width: 1025px) {
    .portfolio-header {
        text-align: center;
        max-width: 600px;
        margin: 0 auto 50px auto;
    }
    .work-list {
        display: none !important; /* Hide old grid on desktop */
    }
    .coverflow-wrapper {
        display: block; /* Show coverflow on desktop */
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
}

.coverflow-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1600px;
    overflow: hidden;
    outline: none;
    transform-style: preserve-3d;
}

.coverflow-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: auto;
    padding: 2px;
    border-radius: 20px;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    background-color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(255, 0, 79, 0.12), 0 0 15px rgba(255, 0, 79, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.coverflow-card.active::before {
    position: absolute;
    content: ' ';
    display: block;
    width: 400px;
    height: 300%;
    top: -100%;
    left: calc(50% - 200px);
    background: linear-gradient(90deg, transparent, #ff004f, #ff004f, #ff004f, transparent);
    animation: rotation_481 9000ms infinite linear;
    z-index: 0;
}

.coverflow-card img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    pointer-events: none;
    border-radius: 18px;
    z-index: 1;
}

.coverflow-card .card-dim {
    position: absolute;
    inset: 2px;
    border-radius: 18px;
    background: #000;
    opacity: 0.6;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 1;
}

.coverflow-card .card-overlay {
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: calc(100% - 4px);
    border-radius: 0 0 18px 18px;
    transform: translateY(100%);
    background: rgba(20, 20, 32, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 24px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

/* Hovering on the active card shows the description overlay */
.coverflow-card:hover .card-overlay.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto; /* allows clicking buttons */
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.overlay-header h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.overlay-links {
    display: flex;
    gap: 12px;
}

.overlay-links a {
    color: #fff;
    font-size: 16px;
    background: rgba(255, 0, 79, 0.15);
    border: 1px solid rgba(255, 0, 79, 0.3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.overlay-links a:hover {
    background: #ff004f;
    border-color: #ff004f;
    transform: scale(1.1);
}

.tech-chips-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tech-chips-mini span {
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
}

.card-overlay p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.btn{
    display: block;
    margin: 50px auto 0;
    width: fit-content;
    border: 1px solid #ff004f;
    padding: 14px 50px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    transition: background 0.5s;
}
.btn:hover{
    background: #ff004f;
}
/*-------------contact section------------------*/
#contact .container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.contact-left{
    flex-basis: 35%;
}
.contact-right{
    flex-basis: 60%;
}
.contact-left p{
    margin-top: 30px;
}
.contact-left p i{
    color: #ff004f;
    margin-right: 15px;
    font-size: 25px;
}
.social-icons{
    margin-top: 30px;
}
.social-icons a{
    text-decoration: none;
    font-size: 30px;
    margin-right: 15px;
    color: #ababab;
    display: inline-block;
    transition: transform 0.5s;
}
.social-icons a:hover{
    color: #ff004f;
    transform: translateY(-5px);
}
.btn.btn2{
    display: inline-block;
    background: #ff004f;
}
.collab-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}
.collab-heading {
    font-size: 52px;
    font-family: "Alegreya", serif;
    font-weight: 500;
    color: #fff;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.1;
}
.collab-heading-dim {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9em;
}
.collab-subheading {
    font-size: 16px;
    color: #ababab;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 90%;
    font-family: 'Lora', serif;
}
.collab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ff004f;
    border: 1px solid #ff004f;
    padding: 14px 50px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    transition: background 0.5s;
}
.collab-btn:hover {
    background: #ff004f;
}
.collab-btn i {
    font-size: 18px;
}
.copyright{
    position: relative;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    background: #262626;
    font-weight: 300;
    margin-top: 40px;
}
#contact{
    position: relative;
    padding-bottom: 0;
}
.copyright i{
    color: #ff004f;
}

#contact .signature-watermark {
    display: block;
    width: fit-content;
    margin-top: 10px;
    margin-left: auto;
    font-family: 'Zeyada', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    white-space: nowrap;
}

@keyframes write-signature {
    0%, 10% { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
    70%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}
/* ============================================================
   MOBILE & RESPONSIVE
   ============================================================ */
nav .fa-bars,
nav ul .fa-square-xmark {
    display: none;
}

/* ---- Overlay backdrop ---- */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    z-index: 998;
    opacity: 0;
    pointer-events: none;   /* ← FIX: don't block taps when invisible */
    transition: opacity 0.35s ease;
}
.nav-overlay.active {
    opacity: 1;
    pointer-events: auto;   /* ← allow taps only when menu is open */
}

/* ============================================================
/* ============================================================
   DESKTOP HERO PORTRAIT (TRANSPARENT PNG)
   ============================================================ */
.hero-portrait-wrap {
    display: none; /* Hidden by default (for mobile/tablet) */
}

@media only screen and (min-width: 1025px) {
    #header {
        background-image: none !important;
        background-color: #000;
    }

    .header-text h1.name-font {
        word-spacing: -5px;
    }
    
    .hero-portrait-wrap {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* Sit firmly beneath the background blur and text */
        pointer-events: none;
    }

    .hero-portrait {
        position: fixed; /* Locks portrait to the viewport */
        bottom: 0;
        right: 10vw; /* Shifted 10% toward the center */
        /* Fluid portrait scaling to prevent clipping on smaller laptops while preserving aspect ratio */
        height: clamp(600px, 95vh, 1200px);
        width: clamp(400px, 45vw, 1000px);
        object-fit: contain;
        object-position: bottom right;
        pointer-events: none; /* Let clicks pass through */
        /* Smooth clipping transition during fast scrolls */
        will-change: clip-path;
    }
}

/* ============================================================
   TABLET RESPONSIVENESS (1024px and below)
   ============================================================ */
@media only screen and (max-width: 1024px) {
    .container {
        padding: 10px 5%;
    }
    .header-text {
        width: 80%;
        max-width: 100%;
    }
    .header-text h1.name-font {
        font-size: 100px;
    }
    #about .row {
        flex-direction: column;
        gap: 40px;
    }
    .about-col-1,
    .about-col-2 {
        flex-basis: 100%;
        width: 100%;
    }
    .about-col-2 {
        order: 1;
    }
    .about-col-1 {
        order: 2;
        margin-top: 20px;
    }
    .card-gallery-wrap {
        max-width: 500px;
    }
}

@media only screen and (max-width: 768px) {

    /* ── Floating pill nav bar ── */
    nav {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 28px);
        height: 54px;

        padding: 0 18px;
        border-radius: 36px;

        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 10px;

        /* Premium liquid glass pill */
        background: rgba(16, 16, 28, 0.30);
        backdrop-filter: saturate(200%) blur(36px);
        -webkit-backdrop-filter: saturate(200%) blur(36px);

        /* Prismatic edge: top bright rim + bottom subtle dark */
        border: 1px solid rgba(255,255,255,0.13);
        box-shadow:
            0 8px 32px rgba(0,0,0,0.40),
            0 2px 6px rgba(0,0,0,0.25),
            inset 0 1px 0 rgba(255,255,255,0.18),
            inset 0 -1px 0 rgba(0,0,0,0.20),
            0 0 0 0.5px rgba(255,255,255,0.06);
    }

    /* Specular gleam on mobile pill */
    nav::before {
        border-radius: 36px;
        background: linear-gradient(
            to bottom,
            rgba(255,255,255,0.12) 0%,
            transparent 55%
        );
    }

    nav.scrolled {
        top: 8px;
        background: rgba(8, 8, 20, 0.78);
        box-shadow:
            0 12px 40px rgba(0,0,0,0.55),
            inset 0 1px 0 rgba(255,255,255,0.16),
            inset 0 -1px 0 rgba(0,0,0,0.24);
    }

    .nav-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 54px;          /* match nav pill height — keeps avatar centered */
        gap: 12px;
    }

    .logo { width: 90px; }

    /* Profile avatar — equal gap top & bottom inside 54px pill */
    .profile-logo {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        display: block;
        margin-block: auto;   /* pushes equal space above and below */
        align-self: center;   /* flex centering as a backup */
    }

    /* Hamburger icon — plain minimal bars, no circle */
    nav .fa-bars {
        display: block;
        font-size: 20px;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.85);
        line-height: 1;
        padding: 4px;
        background: none;
        border: none;
        box-shadow: none;
        transition: color 0.25s;
    }
    nav .fa-bars:hover {
        color: #ff004f;
    }

    /* Show overlay on mobile */
    .nav-overlay { display: block; }

    /* ── Liquid glass slide-in panel ── */
    nav ul {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 75%;
        max-width: 280px;
        height: 100dvh;
        z-index: 9999;
        padding: 0;
        display: flex;
        flex-direction: column;

        /* Frosted glass panel */
        background: rgba(10, 10, 22, 0.52);
        backdrop-filter: saturate(180%) blur(40px);
        -webkit-backdrop-filter: saturate(180%) blur(40px);

        /* Left rim highlight (edge facing content) */
        border-left: 1px solid rgba(255,255,255,0.12);
        box-shadow:
            -16px 0 60px rgba(0,0,0,0.60),
            -4px 0 16px rgba(0,0,0,0.30),
            inset 1px 0 0 rgba(255,255,255,0.08);

        transition: right 0.44s cubic-bezier(0.22, 1, 0.36, 1);
        overflow-y: auto;
    }

    /* Glass panel header bar */
    nav ul::before {
        content: '';
        display: block;
        flex-shrink: 0;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,0.20) 30%,
            rgba(255,255,255,0.08) 70%,
            transparent
        );
        margin: 0 0 4px;
    }

    /* Close button — glass circle */
    nav ul .fa-square-xmark {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        align-self: flex-end;
        font-size: 20px;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.60);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin: 16px 18px 8px auto;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
        transition: color 0.25s, background 0.25s, transform 0.30s;
        z-index: 10;
    }
    nav ul .fa-square-xmark:hover {
        color: #ff004f;
        background: rgba(255, 0, 79, 0.15);
        border-color: rgba(255, 0, 79, 0.25);
        transform: rotate(90deg) scale(1.1);
    }

    /* Mobile nav link items */
    nav ul li {
        display: block;
        margin: 2px 12px;
    }

    nav ul li a {
        display: flex;
        align-items: center;
        padding: 12px 18px;
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.72);
        border-radius: 14px;
        letter-spacing: 0.3px;
        background: transparent;
        border: 1px solid transparent;
        transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
    }

    nav ul li a:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255,255,255,0.10);
        color: rgba(255,255,255,0.95);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
    }

    nav ul li a.active-nav {
        color: #fff;
        font-weight: 600;
        background: rgba(255, 0, 79, 0.16);
        border-color: rgba(255, 0, 79, 0.22);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.14),
            0 0 12px rgba(255,0,79,0.12);
    }

    nav ul li a::after { display: none; }

    /* ── Mobile Glider Highlight ── */
    .glider-container {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
        z-index: -1;
        pointer-events: none;
    }

    .glider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #ff004f 50%, rgba(0, 0, 0, 0) 100%);
        transition: transform 0.4s cubic-bezier(0.37, 1.95, 0.66, 0.56), height 0.4s ease;
    }

    .glider::before {
        content: "";
        position: absolute;
        height: 60%;
        width: 12px;
        top: 50%;
        left: -5px;
        transform: translateY(-50%);
        background: #ff004f;
        filter: blur(8px);
    }

    .glider::after {
        content: "";
        position: absolute;
        left: 0;
        height: 100%;
        width: 120px;
        background: linear-gradient(90deg, rgba(255, 0, 79, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }

    /* ── HERO SECTION ── */
    #header{
        height: 100vh;
        height: 100svh;
        background-image: url(images/mobile-bg1.png);
        background-size: cover;
        background-position: center;
    }
    .header-text {
        width: 100%;
        max-width: 100%;
        margin-top: 80px;
        padding: 0;
    }
    .intro {
        font-size: 16px;
        margin-bottom: 0px;
    }
    .mobile-break {
        display: block;
    }
    .header-text h1.name-font {
        display: block;          
        font-size: 16vw;
        transform: none;         
        transform-origin: unset;
        line-height: 1.1;
        margin-top: 0;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: visible;
    }
    .role {
        width: 55%;
        font-size: 12px;
        line-height: 1.7;
        max-width: 100%;
        letter-spacing: 0;
        margin-top: 15px;
        color:rgba(255,255,255,.72);
    }

.hero-buttons .hero-cv{
    background:#ff0055;
}
    

    /* ── ABOUT SECTION ── */
    #about {
        padding: 60px 0 40px;
    }
    .about-col-1,
    .about-col-2 {
        flex-basis: 100%;
    }
    .about-col-1 {
        margin-bottom: 24px;
    }
    .about-col-1 img {
        width: 75%;
        display: block;
        margin: 0 auto;
    }
    .sub-title {
        font-size: 36px;
    }
    .tab-titles {
        margin: 16px 0 28px;
        flex-wrap: wrap;
        gap: 32px;
    }
    .tab-links {
        margin-right: 0;
        font-size: 15px;
    }
    .tab-contents ul li {
        font-size: 14px;
    }
    .tab-contents ul li span {
        font-size: 15px;
    }

    /* About info row — stack vertically on mobile */
    .about-info-row {
        flex-direction: column;
        gap: 20px;
    }
    .tabs-panel {
        flex: none;
        width: 100%;
    }
    .tech-stack-panel {
        flex: none;
        width: 100%;
    }
    .tech-chip span {
        display: inline; /* show words on mobile as requested */
    }
    .tech-chip {
        padding: 6px 8px;
    }
    .tech-chip img {
        width: 20px;
        height: 20px;
    }

    /* Services strip — stack vertically on mobile */
    .about-services-strip {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }
    .about-service-card {
        padding: 16px 14px;
    }

    .row{
    flex-direction:column;
    gap:30px;
}

.about-col-1,
.about-col-2{
    flex-basis:100%;
    width:100%;
}
.about-col-2{
    order:1;
}

.about-col-1{
    order:2;
}

    /* ── SERVICES SECTION ── */
    #services {
        padding: 40px 0;
    }
    .services-list {
        grid-template-columns: 1fr;
        grid-gap: 16px;
        margin-top: 24px;
    }
    .services-list div {
        padding: 26px 20px;
    }
    .services-list div i {
        font-size: 34px;
        margin-bottom: 14px;
    }
    .services-list div h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    /* ── PORTFOLIO SECTION ── */
    #portfolio {
        padding: 40px 0;
    }
    .work-list {
        grid-template-columns: 1fr;
        grid-gap: 16px;
        margin-top: 24px;
    }
    .work{
    aspect-ratio:auto;
}

.work img{
    width:100%;
    height:100%;
    object-fit:contain;

    display:block;

    border-radius:24px;

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

    background:#111;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 15px 40px rgba(0,0,0,.35);
    }
    .btn {
        padding: 12px 36px;
        font-size: 14px;
        margin-top: 30px;
    }

    /* ── CONTACT SECTION ── */
    #contact .container {
        flex-direction: column;
    }
    .contact-left,
    .contact-right {
        flex-basis: 100%;
        width: 100%;
    }
    .contact-left {
        margin-bottom: 28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .contact-left p {
        font-size: 14px;
        margin-top: 18px;
        word-break: break-all;
    }
    .contact-left p i {
        font-size: 18px;
        margin-right: 10px;
    }
    .social-icons {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        gap: 22px;
    }
    .social-icons a {
        font-size: 26px;
        margin-right: 0;
    }
    .contact-left .btn2 {
        width: fit-content;
    }
    .collab-heading {
        font-size: 38px;
    }
    .collab-heading-dim {
        font-size: 0.9em;
    }
    .collab-subheading {
        font-size: 14px;
        max-width: 100%;
        margin-bottom: 30px;
    }
    .collab-btn {
        padding: 14px 36px;
        font-size: 16px;
    }

    /* ── MISC ── */
    .copyright {
        font-size: 13px;
        padding: 16px 12px;
    }
    .container {
        padding: 10px 5%;
    }

    /* Scroll indicator \u2014 bottom left on mobile */
    .scroll-indicator {
        left: 8%;
        transform: none;
        font-size: 20px;
        bottom: 80px;
    }
    .scroll-indicator:hover {
        transform: scale(1.15);
    }
    @keyframes floatUpDown {
        0%,  100% { transform: translateY(0); }
        50%        { transform: translateY(-10px); }
    }

    /* Hide Available for Hire box only on mobile */
    .status-box{
        display:none !important;
    }

/* Align buttons for mobile */
.hero-buttons{
    display:flex;
    flex-direction:column;
    align-items:flex-start !important;
    gap:12px;
    margin-top:20px !important;
    margin-left: 0 !important;
}

/* Smaller location and CV boxes left aligned */
.hero-buttons .location-box,
.hero-buttons .hero-cv{
    width: 145px;
    height: 38px;
    margin: 0 !important;
    padding: 0 16px;
    justify-content: flex-start !important;
    border-radius: 14px;
    font-size: 12px;
    gap: 10px;
    transform: none;
}
.hero-buttons .hero-cv {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;
}

    /* ── CARD GALLERY — mobile ── */
    .about-col-1 {
        flex-basis: 100%;
        margin-bottom: 10px;
    }
    .card-gallery {
        height: 420px;
    }
    .gallery-card{
        left:12px;
        width:calc(100% - 24px);

        height:350px;

        border-radius:28px;
        overflow:hidden;
    }
    .gallery-card img{
        width:100%;
        height:100%;
        object-fit:cover;
        border-radius:28px;
    }

    .gallery-card.card-prev{
        transform: translateY(calc(-50% - 180px)) scale(0.92);
    }

    .gallery-card.card-next{
        transform: translateY(calc(-50% + 180px)) scale(0.92);
    }
    .card-gallery-wrap{
        max-width:100%;
        padding:0;

        background:transparent;
        backdrop-filter:none;

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

        box-shadow:
            0 0 0 1px rgba(255,255,255,0.03),
            inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .card-dots {
        flex-direction: row;
        gap: 8px;
    }
    .card-dot.active {
        height: 6px;
        width: 20px;
        border-radius: 4px;
    }
}

#msg{
    color: #61b547;
    margin-top: -40px;
    display: block;
}
.hero-buttons{
    display:flex;
    font-family: "Alegreya", serif;
    align-items:center;
    gap:14px;
    margin-top:32px;
}
.hero-buttons .btn{
    margin:0;      /* override .btn's margin:50px auto 0 */
}

/* Location & Available boxes */
.hero-box,
.hero-cv{
    width:180px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 0 16px;

    border:1px solid #ff004f;
    border-radius:20px;

    font-family:"Alegreya", serif;
    font-style:italic;
    font-size:18px;

    white-space:nowrap;
}

.hero-cv {
    display: flex !important;
    padding: 0 16px !important;
}

.location-box{
    width:220px;
}

.status-box{
    width:180px;
}

.hero-cv{
    background:#ff0055;
}

.hero-box span,
.hero-cv span{
    font-family:"Alegreya", serif;
}
/* Don't turn red on hover */
.hero-box:hover{
    background:transparent;
    color:#fff;
}

/* Available box fixed size */
.status-box{
    width:180px;
    height:48px;
}

/* Prevent shrinking when text changes */
#status-text{
    width:120px;
    text-align:center;
}

/* About section onwards */
#about,
#about *,
#services,
#services *,
#portfolio,
#portfolio *,
#contact,
#contact *{
    font-family: 'Lora', serif;
}

.sub-title{
    font-family: 'Lora', serif;
    font-weight: 700;
}

.tab-links,
.services-list h2,
.layer h3,
.contact-left h1{
    font-family: 'Lora', serif;
    font-weight: 600;
}

/* ============================================================
   WORKS PAGE STYLES
   ============================================================ */

/* Navbar Adjustments */
#header-works {
    width: 100%;
    position: relative;
    height: 100px; /* Shorter header for works page */
}

/* Back Button Section */
.back-btn-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    position: relative;
    z-index: 10;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.back-btn i {
    font-size: 16px;
}

.back-btn:hover {
    background: #ff004f;
    border-color: #ff004f;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 0, 79, 0.3);
}

@media only screen and (max-width: 768px) {
    .back-btn .back-text {
        display: none;
    }
    
    .back-btn {
        padding: 0;
        border: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    .back-btn i,
    .back-btn svg {
        font-size: 35px !important;
        width: 27px !important;
        height: 27px !important;
    }
    
    .back-btn:hover {
        background: transparent;
        box-shadow: none;
        transform: translateY(-2px);
        color: #ff004f;
    }
}

#works-hero {
    padding: 100px 0 40px;
    text-align: center;
}

#works-hero .sub-title {
    font-size: 56px;
    margin-bottom: 20px;
}

.works-subtitle {
    font-family: 'Lora', serif;
    font-size: 18px;
    color: #ababab;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

#works-content {
    padding: 40px 0 100px;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.works-card {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(20, 20, 32, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 15px 40px rgba(0,0,0,0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.works-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 25px 50px rgba(0,0,0,0.5);
    border-color: rgba(255, 0, 79, 0.3);
}

.works-img {
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.works-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.works-card:hover .works-img img {
    transform: scale(1.05);
}

.works-info {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.works-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.works-header h3 {
    font-family: 'Lora', serif;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.works-link-btn {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    background: rgba(255, 0, 79, 0.8);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.3s;
    flex-shrink: 0;
}

.works-link-btn:hover {
    background: #ff004f;
    transform: scale(1.1);
}

.works-desc {
    font-family: 'Lora', serif;
    font-size: 15px;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.works-copyright {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 20px;
}

@media only screen and (max-width: 900px){
    .works-grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 768px) {
    #header-works {
        height: 80px;
    }
    #works-hero {
        padding: 60px 0 20px;
    }
    #works-hero .sub-title {
        font-size: 36px;
    }
    .works-subtitle {
        font-size: 15px;
        padding: 0 10px;
    }
    .works-img {
        height: 220px;
    }
    .works-info {
        padding: 20px;
    }
    .works-header h3 {
        font-size: 22px;
    }
    .works-link-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .works-desc {
        font-size: 14px;
        margin-bottom: 15px;
    }
}

/* ============================================================
   PROJECT DETAILS PAGE
   ============================================================ */

.project-detail-body {
    background: #080808;
    color: #fff;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Adjust header to be static on this page so layout takes the rest */
.project-detail-body #header-works {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.project-page-content {
    display: flex;
    flex-direction: column;
    padding-top: 80px; /* offset for navbar */
    min-height:100vh;
}

.project-page-header {
    padding: 20px 7%;
    flex-shrink: 0;
}



.project-title-large {
    font-family: 'Lora', serif;
    font-size: 48px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-detail-container {
    display:grid;
    grid-template-columns: 68fr 32fr;
    gap: 40px;
    padding: 0 7%;
    align-items:start;
    flex-grow: 1;
    overflow: hidden;
    min-height: 0;
    animation: fadeSlideUp 0.8s ease backwards;
}

.project-left {
    height: 100%;
    padding: 0px 0px 40px 0px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.project-left-img-container {
    height: auto;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    transition: all 0.5s ease;
    animation: fadeSlideUp 0.8s ease 0.1s backwards;
}

.project-left-img-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 20px;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 2;
}

.project-left-img-container:hover {
    box-shadow: 0 15px 40px rgba(255,0,79,0.2);
    border-color: rgba(255,0,79,0.4);
}

.project-left-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.project-left-img-container:hover .project-left-img {
    transform: scale(1.05);
}

.project-core-stack {
    min-height:260px;
    min-height: 0;
    background: rgba(255,255,255,0.03);
    padding: 30px;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: fadeSlideUp 0.8s ease 0.2s backwards;
}
.project-core-stack::-webkit-scrollbar {
    display: none;
}

.project-core-stack h3 {
    font-family: 'Lora', serif;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
}

.stack-category {
    margin-bottom: 20px;
}

.stack-category:last-child {
    margin-bottom: 0;
}

.stack-category h4 {
    font-size: 14px;
    color: #ff004f;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stack-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-core-stack .tech-chip {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 14px;
    color: #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.02);
}

.project-core-stack .tech-chip:hover {
    background: rgba(255,0,79,0.1);
    border-color: #ff004f;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255,0,79,0.3), inset 0 2px 5px rgba(255,255,255,0.05);
}

.project-core-stack .tech-chip i {
    color: #ff004f;
    font-size: 14px;
    transition: color 0.3s;
}

.project-core-stack .tech-chip:hover i {
    color: #fff;
}

.project-right {
    position:sticky;
    top:100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px 0px 40px 0px;
    overflow: hidden;
    gap: 30px;
}

.project-right-scrollable {
    flex-grow: 1;
    min-height: 0;
    height:520px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 20px;
    padding-bottom: 20px;
    scroll-behavior: smooth;
    animation: fadeSlideUp 0.8s ease 0.3s backwards;
    
    /* Dynamic Fade Mask */
    --mask-top: black;
    --mask-bottom: transparent;
    -webkit-mask-image: linear-gradient(to bottom, var(--mask-top) 0%, black 10%, black 90%, var(--mask-bottom) 100%);
    mask-image: linear-gradient(to bottom, var(--mask-top) 0%, black 10%, black 90%, var(--mask-bottom) 100%);
    transition: --mask-top 0.3s, --mask-bottom 0.3s;
}

.project-right-scrollable.is-top {
    --mask-top: black;
    --mask-bottom: transparent;
}
.project-right-scrollable.is-middle {
    --mask-top: transparent;
    --mask-bottom: transparent;
}
.project-right-scrollable.is-bottom {
    --mask-top: transparent;
    --mask-bottom: black;
}

.project-right-scrollable::-webkit-scrollbar {
    display: none;
}

.project-right-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.project-section h2 {
    font-family: 'Lora', serif;
    font-size: 22px;
    margin-bottom: 10px;
    color: #ff004f;
    font-weight: 500;
}

.project-section p {
    font-size: 15px;
    line-height: 1.7;
    color: #ccc;
    font-family: 'Lora', serif;
}

.project-links {
    flex-shrink: 0;
    display: flex;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 20px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    flex-direction: column;
    animation: fadeSlideUp 0.8s ease 0.4s backwards;
    backdrop-filter: blur(20px);
}

.project-links a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: #ff004f;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s;
    font-size: 15px;
    position: relative;
    overflow: hidden;
}

.project-links a::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg) translateY(100%);
    transition: transform 0.5s ease;
}

.project-links a:hover::after {
    transform: rotate(45deg) translateY(-100%);
}

.project-links a:hover {
    background: #e60047;
    box-shadow: 0 5px 15px rgba(255,0,79,0.3);
}

.project-links a.btn-outline {
    background: transparent;
    border: 1px solid #ff004f;
}

.project-links a.btn-outline:hover {
    background: rgba(255,0,79,0.1);
}

@media only screen and (max-width: 1024px) {
    .project-detail-container {
        grid-template-columns: 55% 45%;
        gap: 20px;
    }
    .project-left-img-container {
        height: 500px;
    }
    .project-right-scrollable {
        height: 400px;
    }
}

@media only screen and (max-width: 768px) {
    .project-detail-body {
        min-height: 100vh;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        display: block;
    }
    .project-page-content {
        height: auto;
    }
    .project-detail-container {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 20px;
        padding: 0 5%;
    }
    .project-page-header {
        padding: 20px 5%;
    }
    .project-title-large {
        font-size: 32px;
    }
    .project-left {
        width: 100%;
        padding: 20px 0;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .project-left-img-container {
        height: auto;
        width: 100%;
    }
    .project-left-img {
        height: auto;
    }
    .project-core-stack {
        min-height: auto;
    }
    .project-right {
        width: 100%;
        height: auto;
        padding: 20px 0;
        position: static;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .project-right-scrollable {
        height: auto;
        overflow-y: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ============================================================
   SMALL MOBILE RESPONSIVENESS (480px and below)
   ============================================================ */
@media only screen and (max-width: 480px) {
    .collab-heading { font-size: 30px; }
    .collab-subheading { font-size: 13px; margin-bottom: 20px; }
    .sub-title { font-size: 30px; }
    .intro { font-size: 14px; margin-bottom: 0px; }
    .header-text { margin-top: 25%; width: 100%; }
    .project-title-large { font-size: 26px; }
    .nav-right { gap: 8px; }
}

/* ============================================================
   SHOWREEL VIDEO MODAL
   ============================================================ */

.showreel-btn {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(255, 0, 79, 0.3));
    margin-right: 5px;
    display: flex;
    align-items: center;
}

.showreel-btn:hover {
    color: #ff004f;
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(255, 0, 79, 0.8));
}

body.modal-open {
    overflow: hidden !important; /* Prevents background scrolling when modal is open */
}

.showreel-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Removed heavy backdrop-filter blur which causes massive GPU lag during video playback */
    background: rgba(10, 10, 15, 0.98); 
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
}

.showreel-modal.active {
    opacity: 1;
    visibility: visible;
}

.showreel-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 25px;
    color: #302f2f;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
    z-index: 100000;
}

.showreel-close:hover {
    color: #ff3377;
    transform: scale(1.1);
}

.showreel-content {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    overflow: hidden;
    background: #000;
    transform: scale(0.95);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.showreel-modal.active .showreel-content {
    transform: scale(1);
}

.showreel-content video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensures video covers the full screen without letterboxing */
    background: #000;
    outline: none;
    transform: translateZ(0); /* Forces hardware acceleration for smooth playback */
    will-change: transform;
}

/* Showreel Mobile Responsive */
@media (max-width: 768px) {
    .showreel-btn {
        font-size: 24px;
        margin-right: 0;
    }
    .showreel-close {
        top: 20px;
        right: 25px;
        font-size: 20px;
    }
    .showreel-content {
        width: 100%;
        border-radius: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}