/* =============================================
   GLOBAL RESET & TOKENS (New Design)
   ============================================= */
:root {
    --bg:           #0a0a0a;          /* Deepest black/gray */
    --bg-surface:   #121212;
    --text:         #ffffff;
    --text-muted:   #999999;
    --accent:       #ff004f;          /* Bright pinkish-red from reference */
    --accent-dark:  #a60033;          /* Darker shade of red */
    --glass-bg:     rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
    --nav-h:        80px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { 
    overflow-x: hidden;
    width: 100%;
}
body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    width: 100%;
}

/* Background grid pattern */
.bg-grid-pattern {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    z-index: 0;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
}

.highlight-red {
    color: var(--accent);
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4%;
    z-index: 900;
    background: transparent;
    transition: background 0.4s ease;
}

.navbar.scrolled {
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.5px;
}
.logo-icon {
    width: 24px; height: 24px;
    background: var(--accent);
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l6 4.5-6 4.5z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l6 4.5-6 4.5z"/></svg>');
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    background: rgba(40, 40, 40, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 0.3rem;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-links li {
    margin: 0;
}

.nav-links a {
    text-decoration: none;
    color: #aaa;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 2px -1px rgba(255, 255, 255, 1), 0 -5px 15px -5px rgba(255, 255, 255, 0.3);
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0.5rem 0.5rem 0.5rem 1.2rem;
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.3s, border-color 0.3s;
}
.cta-button:hover {
    background: var(--glass-bg);
    border-color: rgba(255,255,255,0.2);
}
.btn-arrow-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: var(--text-muted);
    border-radius: 50%;
    color: var(--bg);
}

/* =============================================
   HERO
   ============================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    padding: calc(var(--nav-h) + 2rem) 0 0 4%; /* removed right padding so image touches edge */
    z-index: 1;
    overflow: hidden; /* Prevents giant background text from stretching the page */
}

/* ---- Hero Left ---- */
.hero-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 5%;
    z-index: 2;
}

.hero-hello {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    margin-bottom: 1.5rem;
}

.hero-name {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.hero-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 90%;
    margin-bottom: 2.5rem;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    border: 1px solid var(--accent);
    border-radius: 50px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    background: transparent;
    width: fit-content;
    transition: background 0.3s;
}
.primary-btn:hover { background: rgba(255,0,79,0.1); }

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    background: var(--accent);
    border-radius: 50%;
    color: white;
}

.hero-social { margin-top: 4rem; }
.social-title {
    display: block;
    font-size: 0.8rem;
    color: var(--text);
    margin-bottom: 1rem;
}
.social-row { display: flex; gap: 10px; }
.social-icon {
    width: 32px; height: 32px;
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
}
.social-icon:hover { border-color: var(--text); color: var(--text); }

/* ---- Hero Right ---- */
.hero-right {
    flex: 1.2;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 1;
}

.hero-bg-text {
    position: absolute;
    top: 30%;
    left: 65%; /* Shifted right to prevent overlap with left text */
    transform: translate(-50%, -50%);
    font-size: clamp(6rem, 12vw, 12rem);
    font-weight: 900;
    letter-spacing: -2px;
    white-space: nowrap;
    z-index: 0;
    display: flex;
}
.bg-text-filled { color: rgba(255, 255, 255, 0.05); }
.bg-text-outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.4);
}

.contact-bg-text, .cert-bg-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(6rem, 15vw, 15rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    letter-spacing: -2px;
}

.projects-section .contact-bg-text {
    top: 12%; /* Align closer to the top of the section as requested */
}

.experience-section .contact-bg-text {
    top: 2%; /* Move it slightly higher as requested to avoid intersecting the building */
    font-size: clamp(3rem, 9vw, 9rem); /* Shrink font size to allow the entire sentence to fit on screen */
}

.achievements-section {
    position: relative;
    overflow: hidden;
    padding: 16rem 0 0 0; /* Remove bottom padding — fade handles the transition */
}

/* Fade seamlessly into publications section */
.achievements-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent 0%, #050505 100%);
    pointer-events: none;
    z-index: 5;
}

.achievements-section .contact-bg-text {
    top: 2rem; /* Position exactly from the top */
    transform: translateX(-50%); /* Stop it from shifting upwards and getting cut off */
    font-size: clamp(4rem, 10vw, 12rem);
}

.publications-section .contact-bg-text {
    top: 2rem;
    transform: translateX(-50%);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.14);
    font-size: clamp(5rem, 12vw, 14rem);
    letter-spacing: -4px;
    color: rgba(255, 255, 255, 0.18);
    z-index: 0;   /* above section bg, below pub-layout-container (z-index:2) */
    line-height: 1;
    pointer-events: none;
}

.hero-glow-blob {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 80%; height: 60%;
    background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%);
    opacity: 0.6;
    filter: blur(60px);
    z-index: 0;
}

.hero-image-wrap {
    position: relative;
    z-index: 2;
    width: 85%;
    max-width: 500px;
    overflow: hidden;
    border-radius: 8px;
}
.hero-photo {
    width: 100%;
    height: auto;
    display: block;
    /* Mask the bottom to fade into background and hide watermark */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 5%, black 25%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 5%, black 25%);
}

.stamp-container {
    position: absolute;
    bottom: 20%; left: 0%;
    width: 140px; height: 140px;
    z-index: 3;
}
.rotating-stamp {
    width: 100%; height: 100%;
    animation: rotate 15s linear infinite;
    fill: var(--text-muted);
}
@keyframes rotate { 100% { transform: rotate(360deg); } }

.stamp-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; height: 30px;
    background: var(--accent);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px;
}

/* =============================================
   QUOTE SECTION
   ============================================= */
.quote-section {
    padding: 8rem 8%;
    text-align: center;
    position: relative;
    z-index: 2;
}
.quote-text {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.5;
    font-weight: 700;
    color: var(--text-muted);
}
.quote-text .highlight-red { color: var(--accent); }

/* =============================================
   INLINE PROJECTS SECTION
   ============================================= */
.projects-section, .contact-section, .certifications-section, .publications-section {
    position: relative;
    overflow: hidden;
}

.projects-section {
    padding: 6rem 8% 10rem; /* More top space so the giant label and header don't collide */
    position: relative;
    z-index: 2;
    text-align: center;
}
.projects-header {
    margin: 140px auto -120px auto;
    position: relative;
    z-index: 5;
}
.projects-header .section-title {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 800;
    margin: 0.5rem 0 1rem;
    max-width: 100%;
}
.projects-header .section-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0 auto;
}

.inline-scene {
    width: 100%;
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1800px;
    overflow: visible;
}

.inline-grid-container {
    display: grid;
    grid-template-columns: repeat(6, 160px);
    gap: 20px;
    transform-style: preserve-3d;
    transform: rotateX(15deg) rotateZ(-10deg);
    transition: transform 0.1s ease-out;
}

/* Inline card sizing — smaller than the standalone page */
.inline-scene .card-wrapper {
    width: 160px;
    height: 220px;
    perspective: 800px;
    transform-style: preserve-3d;
}
.inline-scene .card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    box-shadow: -10px 10px 20px rgba(0,0,0,0.5);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 8px;
    overflow: hidden;
}
.inline-scene .card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.inline-scene .card-front,
.inline-scene .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}
.inline-scene .card-front { background: rgba(18,18,18,0.6); }
.inline-scene .card-back {
    background: #121212;
    border: 1px solid rgba(255,255,255,0.08);
    transform: rotateY(180deg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.inline-scene .card-back h3 { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--accent); }
.inline-scene .card-back p  { color: #999; font-size: 0.72rem; line-height: 1.5; }

/* Active card fullscreen overlay reused from projects page */
.active-card-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 40px;
    box-sizing: border-box;
    perspective: 2000px;
}
.active-card-container .card {
    cursor: default;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    pointer-events: auto;
    width: 320px; 
    height: 450px;
    max-width: 85vw;
    max-height: 80vh;
}
.active-card-container .card.is-flipped .card-inner { transform: rotateY(180deg); }
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.close-btn {
    position: absolute;
    top: 30px; right: 40px;
    background: none; border: none;
    font-size: 3rem; cursor: pointer;
    color: #fff;
    transition: transform 0.3s ease;
}
.close-btn:hover { transform: scale(1.2); }

/* =============================================
   EXPERIENCE / ABOUT SECTION
   ============================================= */
.experience-section {
    padding: 8rem 4% 8rem; /* Extra top padding to clear the 3D scene above */
    display: flex;
    gap: 6%;
    position: relative;
    z-index: 2;
}

/* ---- Left Side (Cards) ---- */
.exp-left {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.exp-glow {
    position: absolute;
    bottom: -10%; left: -10%;
    width: 300px; height: 300px;
    background: var(--accent);
    filter: blur(80px);
    opacity: 0.5;
    z-index: 0;
    border-radius: 50%;
}

.glass-card {
    background: rgba(18, 18, 18, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.big-card {
    width: 100%;
    max-width: 500px; /* Same as logos-card for perfect alignment */
    padding: 2rem;
    text-align: center;
    margin-bottom: 20px; /* Add space between the cards */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.building-img {
    width: 100%;
    height: auto;
    max-width: 400px; /* Slightly larger building */
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6));
}

.logos-card {
    width: 100%;
    max-width: 500px;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.club-logo-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--accent); /* Red circle to match theme */
    background: rgba(255, 0, 79, 0.05);
    position: relative; /* For absolute centering of img */
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.club-logo-wrap img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%; /* Scales image down nicely without padding */
    height: 55%;
    object-fit: contain;
    /* Fix contrast: Make dark logos pure white so they pop against the dark background */
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: all 0.3s ease;
}

.club-logo-wrap:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(-5px) scale(1.1);
}
.club-logo-wrap:hover img {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,0.8));
}

/* Specific fix for SU logo to prevent it from becoming a solid white block */
.club-logo-wrap[data-club="brainstrust"] img,
.club-logo-wrap[data-club="iot"] img {
    filter: grayscale(1) brightness(1.2);
}
.club-logo-wrap[data-club="brainstrust"]:hover img,
.club-logo-wrap[data-club="iot"]:hover img {
    filter: grayscale(1) brightness(1.5) drop-shadow(0 0 5px rgba(255,255,255,0.8));
}

/* ---- Right Side (Content) ---- */
.exp-right {
    flex: 1.2;
    padding-top: 2rem;
    position: relative; /* Needed for absolute spin badge */
}

/* ---- Spinning Club Badge (top-right corner) ---- */
.spin-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 50px rgba(255, 255, 255, 0.2),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow: hidden;
    perspective: 600px;
    transform-style: preserve-3d;
    animation: spin-y 2.5s linear infinite;
    transition: opacity 0.4s ease;
}
.spin-badge.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
}
.spin-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
/* Exception for the SU logo to keep its details visible but make it black and white */
.spin-badge img[src*="su_logo.png"],
.spin-badge img[src*="iot internship.jpg"] {
    filter: grayscale(1) brightness(1.2);
}
.section-subtitle {
    color: var(--accent);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}
.section-title {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    max-width: 90%;
}
.section-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 3rem;
    max-width: 90%;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}
.feature-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 12px;
}
.feature-icon {
    width: 40px; height: 40px;
    background: var(--accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.2rem;
}

/* Spinning club logo badge that replaces the first feature-icon */
.feature-icon.spin-logo {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 0 18px rgba(255, 255, 255, 0.6),
        0 0 40px rgba(255, 255, 255, 0.3),
        inset 0 0 12px rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 48px;
    height: 48px;
    padding: 8px;
    overflow: hidden;
    animation: spin-glow 3s linear infinite;
}
.feature-icon.spin-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

@keyframes spin-y {
    0%   { transform: rotateY(0deg);   box-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 50px rgba(255,255,255,0.2); }
    50%  { transform: rotateY(180deg); box-shadow: 0 0 40px rgba(255,255,255,1.0), 0 0 80px rgba(255,255,255,0.6); }
    100% { transform: rotateY(360deg); box-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 50px rgba(255,255,255,0.2); }
}
.feature-text h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.feature-text p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; }

.solid-red-btn {
    display: inline-block;
    background: var(--accent);
    color: white;
    text-decoration: none;
    padding: 0.9rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 30px rgba(255,0,79,0.3);
    transition: 0.3s;
}
.solid-red-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255,0,79,0.5);
}

/* =============================================
   GSAP reveals
   ============================================= */
.gsap-reveal { opacity: 0; visibility: hidden; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 992px) {
    .hero, .experience-section { flex-direction: column; }
    .hero-bg-text { font-size: 6rem; top: 15%; }
    .stamp-container { left: auto; right: 0; bottom: 10%; }
    .exp-left { margin-bottom: 4rem; }
    .features-grid { grid-template-columns: 1fr; }
    .nav-links { display: none; }
}

/* =============================================
   TECH STACK MARQUEE
   ============================================= */
.tech-marquee-section {
    padding: 1rem 0 3rem; /* Reduced outer padding */
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: transparent;
}
.tech-marquee-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 3rem 0; /* ADDED INNER PADDING so hovering icons have space to scale up without being clipped */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.tech-marquee {
    display: flex;
    width: max-content;
    animation: tech-scroll 30s linear infinite;
    gap: 4rem;
}
.tech-marquee i {
    font-size: 4rem;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.tech-marquee i:hover {
    transform: scale(1.2);
}
@keyframes tech-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 2rem)); }
}

 
 /*   ----   Hamburger   Mobile   Toggle   ----   */ 
 .hamburger   {   display:   none;   } 
 
 /*   ============================================= 
       MOBILE   RESPONSIVENESS 
       =============================================   */ 
 @media   (max-width:   768px)   { 
         html,   body   {   overflow-x:   hidden;   } 
         .hero-name   {   font-size:   2.5rem;   } 
         .quote-text   {   font-size:   1.5rem;   } 
         .section-title   {   font-size:   2.5rem;   } 
         .about-section,   .projects-section,   .certifications-section,   .contact-section   {   padding:   60px   20px;   } 
 
         /*   Navbar   &   Hamburger   */ 
         .hamburger   { 
                 display:   flex; 
                 flex-direction:   column; 
                 justify-content:   space-between; 
                 width:   30px; 
                 height:   20px; 
                 background:   transparent; 
                 border:   none; 
                 cursor:   pointer; 
                 z-index:   1000; 
         } 
         .hamburger   span   { 
                 display:   block; 
                 height:   3px; 
                 width:   100%; 
                 background-color:   var(--text); 
                 border-radius:   3px; 
                 transition:   all   0.3s   ease; 
         } 
         .nav-links   { 
                 position:   fixed; 
                 top:   0; 
                 right:   -100%; 
                 width:   70%; 
                 height:   100vh; 
                 background:   rgba(10,   10,   10,   0.95); 
                 backdrop-filter:   blur(15px); 
                 -webkit-backdrop-filter:   blur(15px); 
                 flex-direction:   column; 
                 justify-content:   center; 
                 align-items:   center; 
                 transition:   right   0.4s   ease; 
                 border-radius:   0; 
                 border:   none; 
                 border-left:   1px   solid   var(--glass-border); 
                 z-index:   950; 
                 padding:   0; 
                 gap:   2rem; 
         } 
         .nav-links.nav-active   {   right:   0;   } 
         .nav-links   li   {   margin:   0;   } 
         .nav-links   a   {   font-size:   1.5rem;   } 
         .hamburger.toggle   span:nth-child(1)   {   transform:   translateY(8.5px)   rotate(45deg);   } 
         .hamburger.toggle   span:nth-child(2)   {   opacity:   0;   } 
         .hamburger.toggle   span:nth-child(3)   {   transform:   translateY(-8.5px)   rotate(-45deg);   } 
         .cta-button   {   display:   none;   } 
 
         /*   Hero   Section   */ 
         .hero   {   flex-direction:   column-reverse;   padding-top:   120px;   text-align:   center;   gap:   2rem;   } 
         .hero-left   {   align-items:   center;   padding-right:   0;   } 
         .hero-desc   {   text-align:   center;   } 
         .hero-right   {   display:   flex;   justify-content:   center;   margin-top:   2rem;   } 
         .hero-bg-text   {   font-size:   5rem;   top:   -5%;   } 
         .hero-actions   {   flex-direction:   column;   align-items:   center;   width:   100%;   } 
         .primary-btn,   .pink-pill-btn   {   width:   100%;   max-width:   300px;   justify-content:   center;   margin-left:   0   !important;   } 
 
         /*   About   &   Experience   */ 
         .about-content   {   flex-direction:   column;   } 
         .about-left,   .about-right   {   width:   100%;   } 
         .skills-grid   {   grid-template-columns:   1fr;   } 
 
         /*   Projects   */ 
         .projects-grid   {   grid-template-columns:   1fr;   } 
         .project-card   {   height:   auto;   min-height:   400px;   } 
 
         /*   Timeline   */ 
         .timeline   {   padding:   0;   } 
         .timeline::before   {   left:   20px;   } 
         .timeline-item   {   width:   100%;   padding-left:   60px;   padding-right:   0;   } 
         .timeline-item:nth-child(even)   {   left:   0;   } 
         .timeline-item:nth-child(even)::before,   .timeline-item:nth-child(odd)::before   {   left:   10px;   } 
         .timeline-content   {   width:   100%;   } 
 
         /*   Certifications   */ 
         .cert-grid   {   grid-template-columns:   1fr;   } 
 
         /*   Interactive   Resume   Machine   */ 
         .resume-section   {   padding:   40px   10px;   } 
         .retro-frame { transform: scale(clamp(0.45, 1.5vw + 0.3, 0.65)); transform-origin: top center; margin-bottom: clamp(-250px, -10vw - 100px, -150px); } 
 
         /*   Contact   */ 
         .contact-container   {   flex-direction:   column;   } 
         .contact-left,   .contact-right   {   width:   100%;   max-width:   100%;   } 
         .contact-info-cards   {   grid-template-columns:   1fr;   } 
 } 
 
 @media   (max-width:   480px)   { 
         .hero-name   {   font-size:   2rem;   } 
         .section-title   {   font-size:   2rem;   } 
         .retro-frame { transform: scale(clamp(0.45, 1.5vw + 0.3, 0.65)); margin-bottom: clamp(-250px, -10vw - 100px, -150px); }
}

@media (max-width: 900px) and (orientation: landscape) {
    .hero-bg-text { top: 5%; }
    .retro-frame { transform: scale(0.4); margin-bottom: -300px; }
}

@media (max-width: 768px) {
    .hero {
        padding: calc(var(--nav-h) + 1rem) 1rem 0;
        gap: 1.5rem;
    }

    .hero-left {
        width: 100%;
        padding-right: 0;
        align-items: center;
        text-align: center;
    }

    .hero-name {
        font-size: clamp(2rem, 7vw, 2.8rem);
        line-height: 1.1;
    }

    .hero-desc {
        max-width: 100%;
        font-size: 0.95rem;
    }

    .hero-social {
        margin-top: 2rem;
    }

    .hero-right {
        width: 100%;
        min-height: 420px;
        margin-top: 0;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .hero-bg-text {
        top: 0;
        left: 50%;
        z-index: 3;
        transform: translate(-50%, 0);
        font-size: clamp(2.6rem, 12vw, 4rem);
        letter-spacing: -1px;
    }

    .hero-image-wrap {
        width: min(100%, 360px);
        max-width: 360px;
        margin-left: auto;
        margin-right: -1.5rem;
    }

    .stamp-container {
        width: 110px;
        height: 110px;
        bottom: 4%;
        right: 2%;
        left: auto;
    }

    .quote-section {
        padding: 4rem 1rem 2rem;
    }

    .quote-text {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
        line-height: 1.5;
    }

    .tech-marquee-section {
        padding: 0.5rem 0 2rem;
    }

    .tech-marquee-wrap {
        padding: 1.5rem 0;
    }

    .tech-marquee {
        gap: 2rem;
    }

    .tech-marquee i {
        font-size: 2.6rem;
    }

    .contact-bg-text,
    .cert-bg-text {
        font-size: clamp(2.4rem, 9vw, 4rem);
        letter-spacing: -1px;
        max-width: calc(100vw - 2rem);
        white-space: normal;
        line-height: 0.95;
        text-align: center;
    }

    .projects-section {
        padding-top: 8rem;
    }

    .projects-section .contact-bg-text {
        top: 1rem;
        font-size: clamp(3.5rem, 11vw, 6rem);
        transform: translateX(-50%) !important;
    }

    .experience-section .contact-bg-text {
        top: 1rem;
        font-size: clamp(2.8rem, 8.5vw, 5rem) !important;
        white-space: normal !important;
        max-width: calc(100vw - 2rem);
        line-height: 0.95;
    }

    .achievements-section .contact-bg-text {
        top: 1rem;
        font-size: clamp(4rem, 12vw, 7rem) !important;
        transform: translateX(-50%) !important;
        white-space: normal !important;
        max-width: calc(100vw - 2rem);
        line-height: 0.95;
    }

    .publications-section .contact-bg-text {
        top: 1rem;
        left: 50%;
        font-size: clamp(3rem, 10vw, 8rem);
        letter-spacing: -4px;
        color: rgba(255, 255, 255, 0.18) !important;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.14) !important;
        white-space: nowrap !important;
        max-width: none !important;
        transform: translateX(-50%) !important;
    }

    .contact-section .contact-bg-text {
        top: 1rem;
        font-size: clamp(2.4rem, 9vw, 3.8rem);
        letter-spacing: -2px;
    }

    .section-title {
        font-size: clamp(2rem, 7vw, 2.5rem);
    }

    .about-section,
    .projects-section,
    .certifications-section,
    .contact-section,
    .experience-section,
    .publications-section,
    .achievements-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .projects-section {
        padding-top: 8rem;
    }

    .achievements-section {
        padding-top: 3rem !important;
        padding-bottom: 2.5rem !important;
    }

    .achievements-header {
        margin: 2rem auto 1rem !important;
    }

    .about-content,
    .contact-container,
    .experience-section,
    .projects-grid,
    .cert-grid,
    .contact-info-cards,
    .skills-grid {
        grid-template-columns: 1fr;
    }

    .about-content,
    .contact-container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .about-left,
    .about-right,
    .contact-left,
    .contact-right {
        width: 100%;
        max-width: 100%;
    }

    .projects-section {
        padding-top: 0.75rem !important;
        padding-bottom: 2rem;
    }

    .projects-section .contact-bg-text {
        top: 0.45rem !important;
        font-size: clamp(3rem, 12vw, 5rem) !important;
    }

    .projects-header {
        margin: 3rem auto 0.25rem !important;
    }

    .projects-header .section-desc {
        margin-top: 0.5rem;
    }

    .inline-scene {
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: 0 0.5rem;
        margin-top: -1.5rem;
    }

    .inline-grid-container {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 1rem;
        transform: none;
        justify-items: center;
    }

    .inline-scene .card-wrapper {
        width: min(100%, 340px);
        height: auto;
        aspect-ratio: 160 / 220;
    }

    .inline-scene .card {
        height: 100%;
    }

    .projects-grid {
        gap: 1rem;
    }

    .project-card {
        min-height: 360px;
    }

    .timeline {
        padding: 0;
    }

    .timeline::before {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 0;
    }

    .timeline-item:nth-child(even) {
        left: 0;
    }

    .timeline-item:nth-child(even)::before,
    .timeline-item:nth-child(odd)::before {
        left: 10px;
    }

    .timeline-content {
        width: 100%;
    }

    .resume-section {
        padding: 40px 10px;
    }

    .retro-frame {
        transform: scale(clamp(0.45, 1.5vw + 0.3, 0.65));
        transform-origin: top center;
        margin-bottom: clamp(-250px, -10vw - 100px, -150px);
    }

    .nav-links a {
        font-size: 1.35rem;
    }
}


/* carousel */
.cert-carousel{
    position: relative;
    height: 800px;
    overflow: hidden;
    margin-top: -50px;
}
.cert-carousel .list{
    position: absolute;
    width: 1140px;
    max-width: 90%;
    height: 80%;
    left: 50%;
    transform: translateX(-50%);
}
.cert-carousel .list .item{
    position: absolute;
    left: 0%;
    width: 70%;
    height: 100%;
    font-size: 15px;
    transition: left 0.5s, opacity 0.5s, width 0.5s;
}
.cert-carousel .list .item:nth-child(n + 6){
    opacity: 0;
}
.cert-carousel .list .item:nth-child(2){
    z-index: 10;
    transform: translateX(0);
}
.cert-carousel .list .item img{
    width: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: right 1.5s;
}

.cert-carousel .list .item .introduce{
    opacity: 0;
    pointer-events: none;
}
.cert-carousel .list .item:nth-child(2) .introduce{
    opacity: 1;
    pointer-events: auto;
    width: 400px;
    position: absolute;
    top: 50%;
    transform:  translateY(-50%);
    transition: opacity 0.5s;
}
.cert-carousel .list .item .introduce .title{
    font-size: 2em;
    font-weight: 500;
    line-height: 1em;
}
.cert-carousel .list .item .introduce .topic{
    font-size: 4em;
    font-weight: 500;
}
.cert-carousel .list .item .introduce .des{
    font-size: small;
    color: #5559;
}
.cert-carousel .list .item .introduce .seeMore{
    font-family: Poppins;
    margin-top: 1.2em;
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid #555;
    background-color: transparent;
    font-weight: bold;
    letter-spacing: 3px;
    transition: background 0.5s;
}
.cert-carousel .list .item .introduce .seeMore:hover{
    background: #eee;
}
.cert-carousel .list .item:nth-child(1){
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    z-index: var(--item1-zIndex);
    opacity: var(--item1-opacity);
    pointer-events: none;
}
.cert-carousel .list .item:nth-child(3){
    transform: var(--item3-transform);
    filter: var(--item3-filter);
    z-index: var(--item3-zIndex);
}
.cert-carousel .list .item:nth-child(4){
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    z-index: var(--item4-zIndex);
}
.cert-carousel .list .item:nth-child(5){
    transform: var(--item5-transform);
    filter: var(--item5-filter);
    opacity: var(--item5-opacity);
    pointer-events: none;
}
/* animation text in item2 */
.cert-carousel .list .item:nth-child(2) .introduce .title,
.cert-carousel .list .item:nth-child(2) .introduce .topic,
.cert-carousel .list .item:nth-child(2) .introduce .des,
.cert-carousel .list .item:nth-child(2) .introduce .seeMore{
    opacity: 0;
    animation: showContent 0.5s 1s ease-in-out 1 forwards;
}
@keyframes showContent{
    from{
        transform: translateY(-30px);
        filter: blur(10px);
    }to{
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}
.cert-carousel .list .item:nth-child(2) .introduce .topic{
    animation-delay: 1.2s;
}
.cert-carousel .list .item:nth-child(2) .introduce .des{
    animation-delay: 1.4s;
}
.cert-carousel .list .item:nth-child(2) .introduce .seeMore{
    animation-delay: 1.6s;
}
/* next click */
.cert-carousel.next .item:nth-child(1){
    animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}
@keyframes transformFromPosition2{
    from{
        transform: var(--item2-transform);
        filter: var(--item2-filter);
        opacity: var(--item2-opacity);
    }
}
.cert-carousel.next .item:nth-child(2){
    animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}
@keyframes transformFromPosition3{
    from{
        transform: var(--item3-transform);
        filter: var(--item3-filter);
        opacity: var(--item3-opacity);
    }
}
.cert-carousel.next .item:nth-child(3){
    animation: transformFromPosition4 0.9s ease-in-out 1 forwards;
}
@keyframes transformFromPosition4{
    from{
        transform: var(--item4-transform);
        filter: var(--item4-filter);
        opacity: var(--item4-opacity);
    }
}
.cert-carousel.next .item:nth-child(4){
    animation: transformFromPosition5 1.1s ease-in-out 1 forwards;
}
@keyframes transformFromPosition5{
    from{
        transform: var(--item5-transform);
        filter: var(--item5-filter);
        opacity: var(--item5-opacity);
    }
}
/* previous */
.cert-carousel.prev .list .item:nth-child(5){
    animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}
.cert-carousel.prev .list .item:nth-child(4){
    animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}
.cert-carousel.prev .list .item:nth-child(3){
    animation: transformFromPosition2 0.9s ease-in-out 1 forwards;
}
.cert-carousel.prev .list .item:nth-child(2){
    animation: transformFromPosition1 1.1s ease-in-out 1 forwards;
}
@keyframes transformFromPosition1{
    from{
        transform: var(--item1-transform);
        filter: var(--item1-filter);
        opacity: var(--item1-opacity);        
    }
}

/* detail  */
.cert-carousel .list .item .detail{
    opacity: 0;
    pointer-events: none;
}
/* showDetail */
.cert-carousel.showDetail .list .item:nth-child(3),
.cert-carousel.showDetail .list .item:nth-child(4){
    left: 100%;
    opacity: 0;
    pointer-events: none;
}
.cert-carousel.showDetail .list .item:nth-child(2){
    width: 100%;
}
.cert-carousel.showDetail .list .item:nth-child(2) .introduce{
    opacity: 0;
    pointer-events: none;
}
.cert-carousel.showDetail .list .item:nth-child(2) img{
    right: 50%;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail{
    opacity: 1;
    width: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    pointer-events: auto;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .title{
    font-size: 4em;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications{
    display: flex;
    gap: 10px;
    width: 100%;
    border-top: 1px solid #5553;
    margin-top: 20px;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications div{
    width: 90px;
    text-align: center;
    flex-shrink: 0;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications div p:nth-child(1){
    font-weight: bold;
}
.cert-carousel.cert-carousel.showDetail .list .item:nth-child(2) .checkout button{
    font-family: Poppins;
    background-color: transparent;
    border: 1px solid #5555;
    margin-left: 5px;
    padding: 5px 10px;
    letter-spacing: 2px;
    font-weight: 500;
}
.cert-carousel.cert-carousel.showDetail .list .item:nth-child(2) .checkout button:nth-child(2){
    background-color: #693EFF;
    color: #eee;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail  .title,
.cert-carousel.showDetail .list .item:nth-child(2) .detail  .des,
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications,
.cert-carousel.showDetail .list .item:nth-child(2) .detail .checkout{
    opacity: 0;
    animation: showContent 0.5s 1s ease-in-out 1 forwards;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail  .des{
    animation-delay: 1.2s;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications{
    animation-delay: 1.4s;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .checkout{
    animation-delay: 1.6s;
}
.arrows{
    position: absolute;
    bottom: 10px;
    width: 1140px;
    max-width: 90%;
    display: flex;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
}
#prev,
#next{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: monospace;
    border: 1px solid #5555;
    font-size: large;
    bottom: 20%;
    left: 10%;
}
#next{
    left: unset;
    right: 10%;
}
#back{
    position: absolute;
    z-index: 100;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    border-bottom: 1px solid #555;
    font-family: Poppins;
    font-weight: bold;
    letter-spacing: 3px;
    background-color: transparent;
    padding: 10px;
    /* opacity: 0; */
    transition: opacity 0.5s;
}
.cert-carousel.showDetail #back{
    opacity: 1;
}
.cert-carousel.showDetail #prev,
.cert-carousel.showDetail #next{
    opacity: 0;
    pointer-events: none;
}
.cert-carousel::before{
    width: 500px;
    height: 300px;
    content: '';
    background-image: linear-gradient(70deg, #DC422A, blue);
    position: absolute;
    z-index: -1;
    border-radius: 20% 30% 80% 10%;
    filter: blur(150px);
    top: 50%;
    left: 50%;
    transform: translate(-10%, -50%);
    transition: 1s;
}
.cert-carousel.showDetail::before{
    transform: translate(-100%, -50%) rotate(90deg);
    filter: blur(130px);
}
@media screen and (max-width: 991px){
    /* ipad, tablets */
    .cert-carousel .list .item{
        width: 90%;
    }
    .cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications{
        overflow: auto;
    }
    .cert-carousel.showDetail .list .item:nth-child(2) .detail .title{
        font-size: 2em;
    }
}
@media screen and (max-width: 767px){
    /* mobile */
    .cert-carousel{
        height: 600px;
    }
    .cert-carousel .list .item{
        width: 100%;
        font-size: 10px;
    }
    
    .cert-carousel .list{
        height: 100%;
    }
    .cert-carousel .list .item:nth-child(2) .introduce{
        width: 50%;
    }
    
    .cert-carousel .list .item img{
        width: 40%;
    }
    .cert-carousel.showDetail .list .item:nth-child(2) .detail{
        backdrop-filter: blur(10px);
        font-size: small;
    }
    .cert-carousel .list .item:nth-child(2) .introduce .des,
    .cert-carousel.showDetail .list .item:nth-child(2) .detail .des{
        height: 100px;
        overflow: auto;
    }
    .cert-carousel.showDetail .list .item:nth-child(2) .detail .checkout{
        display: flex;
        width: max-content;
        float: right;
    }
    }
}

/* detail  */
.cert-carousel .list .item .detail{
    opacity: 0;
    pointer-events: none;
}
/* showDetail */
.cert-carousel.showDetail .list .item:nth-child(3),
.cert-carousel.showDetail .list .item:nth-child(4){
    left: 100%;
    opacity: 0;
    pointer-events: none;
}
.cert-carousel.showDetail .list .item:nth-child(2){
    width: 100%;
}
.cert-carousel.showDetail .list .item:nth-child(2) .introduce{
    opacity: 0;
    pointer-events: none;
}
.cert-carousel.showDetail .list .item:nth-child(2) img{
    right: 50%;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail{
    opacity: 1;
    width: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    pointer-events: auto;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .title{
    font-size: 4em;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications{
    display: flex;
    gap: 10px;
    width: 100%;
    border-top: 1px solid #5553;
    margin-top: 20px;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications div{
    width: 90px;
    text-align: center;
    flex-shrink: 0;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications div p:nth-child(1){
    font-weight: bold;
}
.cert-carousel.cert-carousel.showDetail .list .item:nth-child(2) .checkout button{
    font-family: Poppins;
    background-color: transparent;
    border: 1px solid #5555;
    margin-left: 5px;
    padding: 5px 10px;
    letter-spacing: 2px;
    font-weight: 500;
}
.cert-carousel.cert-carousel.showDetail .list .item:nth-child(2) .checkout button:nth-child(2){
    background-color: #693EFF;
    color: #eee;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail  .title,
.cert-carousel.showDetail .list .item:nth-child(2) .detail  .des,
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications,
.cert-carousel.showDetail .list .item:nth-child(2) .detail .checkout{
    opacity: 0;
    animation: showContent 0.5s 1s ease-in-out 1 forwards;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail  .des{
    animation-delay: 1.2s;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications{
    animation-delay: 1.4s;
}
.cert-carousel.showDetail .list .item:nth-child(2) .detail .checkout{
    animation-delay: 1.6s;
}
.arrows{
    position: absolute;
    bottom: 10px;
    width: 1140px;
    max-width: 90%;
    display: flex;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
}
#prev,
#next{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: monospace;
    border: 1px solid #5555;
    font-size: large;
    bottom: 20%;
    left: 10%;
}
#next{
    left: unset;
    right: 10%;
}
#back{
    position: absolute;
    z-index: 100;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    border-bottom: 1px solid #555;
    font-family: Poppins;
    font-weight: bold;
    letter-spacing: 3px;
    background-color: transparent;
    padding: 10px;
    /* opacity: 0; */
    transition: opacity 0.5s;
}
.cert-carousel.showDetail #back{
    opacity: 1;
}
.cert-carousel.showDetail #prev,
.cert-carousel.showDetail #next{
    opacity: 0;
    pointer-events: none;
}
.cert-carousel::before{
    width: 500px;
    height: 300px;
    content: '';
    background-image: linear-gradient(70deg, #DC422A, blue);
    position: absolute;
    z-index: -1;
    border-radius: 20% 30% 80% 10%;
    filter: blur(150px);
    top: 50%;
    left: 50%;
    transform: translate(-10%, -50%);
    transition: 1s;
}
.cert-carousel.showDetail::before{
    transform: translate(-100%, -50%) rotate(90deg);
    filter: blur(130px);
}
@media screen and (max-width: 991px){
    /* ipad, tablets */
    .cert-carousel .list .item{
        width: 90%;
    }
    .cert-carousel.showDetail .list .item:nth-child(2) .detail .specifications{
        overflow: auto;
    }
    .cert-carousel.showDetail .list .item:nth-child(2) .detail .title{
        font-size: 2em;
    }
}
@media screen and (max-width: 767px){
    /* mobile */
    .cert-carousel{
        height: 600px;
    }
    .cert-carousel .list .item{
        width: 100%;
        font-size: 10px;
    }
    
    .cert-carousel .list{
        height: 100%;
    }
    .cert-carousel .list .item:nth-child(2) .introduce{
        width: 50%;
    }
    
    .cert-carousel .list .item img{
        width: 40%;
    }
    .cert-carousel.showDetail .list .item:nth-child(2) .detail{
        backdrop-filter: blur(10px);
        font-size: small;
    }
    .cert-carousel .list .item:nth-child(2) .introduce .des,
    .cert-carousel.showDetail .list .item:nth-child(2) .detail .des{
        height: 100px;
        overflow: auto;
    }
    .cert-carousel.showDetail .list .item:nth-child(2) .detail .checkout{
        display: flex;
        width: max-content;
        float: right;
    }
}

/* Achievements Section Restored CSS */
.ach-track-wrap {
    width: 100%;
    overflow: hidden;
    padding: 2rem 4rem; /* Moved horizontal padding here */
}
.ach-track-wrap::-webkit-scrollbar {
    display: none;
}
.ach-track {
    display: flex;
    gap: 2rem;
    padding: 0; /* Removed padding to make math exact */
    width: max-content;
    animation: scroll-milestones 40s linear infinite;
}
.ach-track:hover {
    animation-play-state: paused;
}
.ach-card {
    flex: 0 0 380px;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.ach-card:hover {
    transform: translateY(-10px);
}
.ach-img-wrap {
    width: 100%;
    height: 250px;
    position: relative;
}
.ach-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.4s ease;
}
.ach-card:hover .ach-img-wrap img {
    filter: grayscale(0%);
    transform: scale(1.05); /* Slight zoom effect for extra flair */
}
.ach-overlay-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,1), transparent);
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.ach-card:hover .ach-overlay-label {
    opacity: 1;
    transform: translateY(0);
}
.ach-tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: rgba(255, 51, 51, 0.9);
    border-radius: 20px;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ach-overlay-label h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}
.ach-track {
    animation: scroll-milestones 40s linear infinite;
}
.ach-track:hover {
    animation-play-state: paused;
}
@keyframes scroll-milestones {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--scroll-width)); }
}
/* Achievements Modal */
.ach-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ach-modal.open {
    opacity: 1;
    pointer-events: auto;
}
.ach-modal-inner {
    background: #111;
    border-radius: 20px;
    max-width: 800px;
    width: 90%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
}
.ach-close-btn {
    position: absolute;
    top: 15px; right: 15px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    width: 40px; height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ach-modal-img-wrap {
    width: 100%;
    height: 400px;
    background: #000;
}
.ach-modal-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ach-modal-content {
    padding: 2rem;
}
.ach-modal-tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: rgba(255, 51, 51, 0.9);
    border-radius: 20px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ach-modal-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #fff;
}
.ach-modal-desc {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.6;
}

/* Modal Nav Buttons */
.ach-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 50%;
}
.ach-nav-btn.prev-btn { left: 10px; }
.ach-nav-btn.next-btn { right: 10px; }

/* Modal Dots */
.ach-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.ach-dots span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
}
.ach-dots span.active {
    background: white;
}

/* =============================================
   HERO CANVAS BACKGROUND
   ============================================= */
.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero .left-column, .hero .right-column {
    position: relative;
    z-index: 2;
}






/* ================================================================
   VORTEX RESUME COMPILER OVERLAY
   ================================================================ */
#vortex-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, #1a0505 0%, #000000 100%);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    overflow: hidden;
}
#vortex-overlay.active {
    opacity: 1;
    pointer-events: all;
}

#vortex-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vortex-close {
    position: absolute;
    top: 1.5rem; right: 2rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,60,60,0.4);
    color: #fff;
    font-size: 1.2rem;
    width: 42px; height: 42px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
    display: flex; justify-content: center; align-items: center;
}
.vortex-close:hover {
    background: rgba(255,60,60,0.3);
    border-color: #ff3c3c;
    transform: scale(1.1) rotate(90deg);
}

#vortex-status-container {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

#vortex-progress {
    color: #ff3c3c;
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(255,60,60,0.8);
    opacity: 0.9;
}

#vortex-status {
    color: #fff;
    font-family: 'Inter', 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255,255,255,0.5);
    white-space: nowrap;
    opacity: 0.7;
}

/* Output button */
#vortex-output-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-decoration: none;
    z-index: 20;
}

.vortex-pdf-card {
    position: relative;
    width: 160px; height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(255,60,60,0.8);
    border-radius: 8px;
    background: rgba(20,5,5,0.7);
    backdrop-filter: blur(8px);
    overflow: hidden;
    box-shadow: 0 0 50px rgba(255,60,60,0.5), inset 0 0 20px rgba(255,60,60,0.2);
    transition: all 0.3s;
}
.vortex-pdf-card svg {
    width: 90px; height: 110px;
    z-index: 2;
    position: relative;
}
.vortex-pdf-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(255,60,60,0.2) 0%, transparent 60%);
    animation: vortexGlowPulse 2s ease-in-out infinite alternate;
}
@keyframes vortexGlowPulse {
    0%  { opacity: 0.5; transform: scale(0.8) rotate(0deg); }
    100%{ opacity: 1;   transform: scale(1.2) rotate(10deg); }
}
#vortex-output-btn:hover .vortex-pdf-card {
    box-shadow: 0 0 80px rgba(255,60,60,0.9), inset 0 0 30px rgba(255,60,60,0.4);
    border-color: #fff;
    transform: translateY(-5px);
}

.vortex-btn-label {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    border: 1px solid rgba(255,60,60,0.6);
    padding: 0.7rem 1.6rem;
    border-radius: 4px;
    background: rgba(255,60,60,0.15);
    text-shadow: 0 0 10px rgba(255,60,60,0.6);
    transition: all 0.3s ease;
}
#vortex-output-btn:hover .vortex-btn-label {
    background: rgba(255,60,60,0.3);
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255,60,60,0.5);
}