/*
   Virent Studio - Main Stylesheet
   Theme: Dark Cinematic, Professional, Modern
*/

/* Font import removed - already in HTML */

:root {
    /* Colors - Dark Theme (Default) */
    --bg-color: #0B0D10;
    /* The main background color of the entire site. Change this to change the overall 'mood'. */
    --bg-secondary: #121417;
    /* Background for specific containers or alternate sections. Should be slightly different from --bg-color. */
    --bg-card: rgba(255, 255, 255, 0.02);
    /* Very subtle background for internal boxes/cards. Increasing opacity (e.g., 0.1) makes boxes more visible. */
    --bg-overlay: rgba(0, 0, 0, 0.85);
    /* Color used for dropdown menus or full-screen overlays. Controls transparency of menus. */

    --text-main: #EAEAEA;
    /* The default color for all normal text (paragraphs). Change to a darker color if using a light theme. */
    --text-muted: #8E9AAF;
    /* Used for secondary text or 'less important' info. Change this for better or worse readability. */
    --text-highlight: #ffffff;
    /* The color for Headings (h1, h2, etc). Usually brightest for high contrast. */

    --accent-color: #B4121B;
    /* THE MAIN BRAND COLOR. This affects buttons, active icons, and important highlights. Change this to change your brand color (e.g., Green, Blue, Red). */
    --accent-glow: rgba(159, 74, 71, 0.2);
    /* The soft glow effect around buttons. Usually a transparent version of --accent-color. */
    --border-color: #a1a1a1;
    /* The color of thin lines, dividers, and boxes. Change for sharper or softer UI edges. */

    --bg-navbar: rgba(11, 13, 16, 0.95);
    /* Color of the top menu bar. Adjust transparency (0.95) to see the page scrolling behind it. */
    --shadow-main: rgba(0, 0, 0, 0.7);
    /* Global shadow color. Making it lighter or darker affects the 'depth' of elements. */

    /* Typography Settings */
    --font-main: 'Comfortaa', sans-serif;
    /* The font used for all body text. Swap this for a different Google Font here. */
    --font-heading: 'Comfortaa', sans-serif;
    /* The font used for all titles. Can be different from --font-main for style. */

    /* Layout Settings */
    --section-padding: 80px 0;
    /* Vertical space between major sections. Increase for a more 'spacious' feel. */
    --container-width: 1200px;
    /* The maximum width of the content. Decreasing this makes the site content narrower. */
    --transition-speed: 0.3s;
    /* Global speed for hover effects (buttons shifting, etc). Lower is snappier, higher is smoother/slower. */
}

[data-theme="light"] {
    --bg-color: #F8F9FA;
    /* Background color when 'Light Mode' is active. */
    --bg-secondary: #E9ECEF;
    /* Secondary background for light mode. */
    --bg-card: #ffffff;
    /* Card background for light mode (usually pure white). */
    --bg-overlay: rgba(248, 249, 250, 0.8);
    /* Menu/overlay background for light mode. */

    --text-main: #1A1A1A;
    /* Default text color for light mode (usually Dark Grey/Black for contrast). */
    --text-muted: #4B5563;
    /* Muted text color for light mode. */
    --text-highlight: #000000;
    /* Heading color for light mode. */

    --accent-color: #B4121B;
    /* Brand color for light mode. Change this if you want a different brand color in light mode. */
    --accent-glow: rgba(159, 74, 71, 0.2);
    /* Button glow for light mode. */

    --border-color: #E2E8F0;
    /* Divider color for light mode. */
    --bg-navbar: rgba(248, 249, 250, 0.95);
    /* Header color for light mode. */
    --shadow-main: rgba(0, 0, 0, 0.1);
    /* Soft global shadow for light mode. */
}

/* GLOBAL RESET & BASE STYLES */
body {
    transition: var(--transition-theme);
    /* Smoothly transition colors when switching Light/Dark modes */
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-main);

    /* These prevent users from accidentally 'highlighting' or selecting images/spaces they shouldn't */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide content during loading */
body.loading {
    overflow: hidden;
}

body.loading .navbar,
body.loading .hero-content,
body.loading .scroll-indicator {
    opacity: 0;
    visibility: hidden;
}

/* CINEMATIC PRELOADER - Ultimate Refinement */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #050608;
    /* Deepest blue-black */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1),
        visibility 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.intro-logo {
    height: 400px;
    /* Respecting aspect ratio */
    width: auto;
    filter: blur(10px);
    opacity: 0;
    transform: scale(0.6);
    animation: minimalZoom 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes minimalZoom {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(0.6);
    }

    50% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1.1);
        /* Zoom In past settle point */
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
        /* Final Settle (Zoom Out) */
    }
}


/* Cursor styles - default system cursor restored */
a,
button,
.btn,
input,
textarea,
select,
label,
[role="button"] {
    cursor: pointer;
}

/* TEXT SELECTION WHITELIST
   Normally we blocked selection above for the whole body (to keep the UI clean).
   These lines RESTORE text selection for actual text elements so you can still copy-paste info.
*/
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
strong,
em,
b,
i,
u,
small,
mark,
li,
blockquote,
pre,
code,
a,
label,
input,
textarea,
select,
.stat-number,
.career-type,
.btn {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Keep button pointers default unless text inside is specifically wanted, 
   but usually buttons are clickable not selectable. 
   Removing .btn from above list if you want buttons to be clickable only. 
   User asked for 'white empty space' issues, usually buttons are fine. 
   Let's keep them selectable for copy-paste utility if user wants. */

a,
.btn {
    cursor: pointer;
}

.section,
.navbar,
footer,
.service-card,
.career-card,
.contact-form,
.stat-item,
.project-card,
.job-section,
.apply-cta,
.related-job-card {
    transition: var(--transition-theme);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    width: 100%;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-speed);
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    width: 95%;
    /* Responsive width - increased from 90% */
    max-width: 1600px;
    /* Wider for Full HD screens - increased from 1400px */
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: var(--section-padding);
}

.section-title {
    font-size: 2.5rem;
    color: var(--text-highlight);
    text-align: center;
    margin: 0 auto 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: block;
    width: fit-content;
}



.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    margin: 15px auto 0;
    box-shadow: 0 0 20px var(--accent-glow);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-title:hover::after {
    width: 120px;
}


/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--bg-navbar);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    transition: all 0.3s ease;
}

.navbar.scrolled {
    padding: 15px 0;
    background: var(--bg-color);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    /* Ensure uniform height for centering */
}

.logo {
    display: flex;
    align-items: center;
}

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

.virent-logo-svg {
    width: auto;
}

/* Header and Footer logos */
.logo-img,
.footer-logo-img {
    transition: filter 0.3s ease;
}

/* Intro logo styling */
.intro-logo {
    height: 300px;
    object-fit: contain;
}

.logo-img {
    height: 60px;
    /* Reverted from 45px to maintain consistency */
    width: auto;
    object-fit: contain;
}

.footer-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}


.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
    /* Ensure all items are vertically centered */
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-main);
    position: relative;
    text-transform: none;
    letter-spacing: 0.1rem;
    line-height: 1.5;
    /* Match logo line height */
    display: flex;
    align-items: center;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: var(--accent-color);
}

.btn-contact {
    border: 1px solid var(--accent-color);
    padding: 8px 20px;
    border-radius: 4px;
    color: var(--accent-color);
}

.btn-contact:hover {
    background: var(--accent-color);
    color: #000;
}

/* Navigation Actions (Theme Toggle & Back Button) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn-small {
    padding: 8px 20px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Theme Toggle Styles */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-highlight);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

[data-theme="light"] .theme-toggle {
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
}

.theme-toggle:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-glow);
}

.theme-toggle i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.theme-toggle:active i {
    transform: scale(0.8);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--text-highlight);
    transition: 0.3s;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    /* Fallback */
    min-height: 100dvh;
    /* Dynamic Viewport Height for Mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 80px 20px;
    /* Safe padding for small screens */
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #090909 0%, #1a1a2e 100%);
    /* Fallback gradient */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.video-background video,
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    /* Behind overlay */
}

#hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    animation: slowZoom 20s infinite alternate ease-in-out;
}

@keyframes slowZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

/* Ensure overlay stays on top */
/* Overlay removed as requested */

.hidden {
    display: none !important;
}

.hero-content {
    z-index: 2;
    padding-top: 60px;
    /* Offset for navbar */
    max-width: 1000px;
    width: 100%;
    transition: opacity 1s ease, visibility 1s ease;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 6rem;
    /* Even larger for cinematic scale */
    font-weight: 300;
    line-height: 1.1;
    margin: 0 auto 20px;
    letter-spacing: 2rem;
    /* Starts super wide */
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.4), 0 0 80px rgba(255, 255, 255, 0.2);
    width: fit-content;
    display: block;
    opacity: 0;
    filter: blur(20px);
    transition: letter-spacing 2s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 2s ease,
        filter 2s ease,
        transform 2s cubic-bezier(0.19, 1, 0.22, 1);
    transform: scale(1.1);
}

/* This class will be applied after the preloader fades out */
body:not(.loading) .hero h1 {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0.8rem;
    /* Settles into a clean wide look */
    transform: scale(1);
}

/* Atmospheric Overlay for smoother transition */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 3s ease;
}

body:not(.loading) .hero::after {
    opacity: 1;
}

.tagline {
    font-size: 1.5rem;
    color: #ffffff;
    /* Always white for video contrast */
    margin: 0 auto 40px;
    font-weight: 300;
    opacity: 0;
    /* Start hidden */
    width: fit-content;
    display: block;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.3s;
    /* Staggered after h1 */
}

body:not(.loading) .tagline {
    opacity: 0.9;
    transform: translateY(0);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    /* Start hidden */
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.5s;
    /* Staggered after tagline */
}

body:not(.loading) .hero-buttons {
    opacity: 1;
    transform: translateY(0);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 35px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--accent-color);
    color: #000;
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 15px var(--accent-glow);
}

.btn-primary:hover {
    background: transparent;
    color: var(--accent-color);
    box-shadow: 0 0 25px var(--accent-glow);
}

.btn-outline {
    background: transparent;
    color: var(--text-highlight);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-outline:hover {
    border-color: var(--text-highlight);
    background: rgba(255, 255, 255, 0.05);
}

.btn i {
    margin-right: 10px;
}

/* About Section */
.about-section {
    background: var(--bg-color);
}

.about-section .container {
    max-width: 1200px;
}


.lead-text {
    font-size: 1.25rem;
    text-align: center;
    max-width: 1200px;
    /* Increased from 800px */
    margin: 0 auto 30px;
    color: var(--text-highlight);
    width: fit-content;
    display: block;
}

.about-content p {
    text-align: center;
    max-width: 1200px;
    /* Increased from 800px */
    margin: 0 auto 30px;
    color: var(--text-muted);
    margin-bottom: 22px;
    /* tighter & more cinematic */
    line-height: 1.3;
    width: fit-content;
    display: block;
}

.about-content strong {
    color: var(--text-highlight);
    font-weight: 600;
}


.stats-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-color);
    margin: 0 auto 5px;
    width: fit-content;
}

.stat-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    width: fit-content;
    margin: 0 auto;
    display: block;
}

/* Services Section - Minimalist Text Only */
.services-section {
    background: var(--bg-color);
    /* Match About Section */
    position: relative;
    z-index: 1;
}

.services-grid {
    display: flex;
    /* Use Flexbox for layout */
    flex-direction: column;
    /* Stack items vertically */
    gap: 80px;
    /* Space between each service row. Increase for more 'breathing room'. */
    max-width: 1200px;
    /* Prevents the section from getting too wide on huge monitors. */
    margin: 0 auto;
    /* Centers the entire grid on the page. */
}

.service-card {
    display: flex;
    /* Allows Image and Text to sit side-by-side. */
    align-items: center;
    /* Keeps Image and Text perfectly centered vertically with each other. */
    gap: 50px;
    /* Distance between the Image and the Text. */
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    max-width: 100%;
}

/* Zigzag Pattern: Target every 2nd card (2, 4, 6...) and flip it. */
.service-card:nth-child(even) {
    flex-direction: row-reverse;
    /* Reverses the order (Text first, then Image). */
}

/* Responsive: Stack vertically on smaller screens */
@media (max-width: 900px) {

    .service-card,
    .service-card:nth-child(even) {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
}

/* No Hover Effects */
.service-card:hover {
    transform: none;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Remove Metallic Sheen */
.service-card::after {
    display: none;
}

/* Remove Top Accent Bar */
.service-card::before {
    display: none;
}

.service-image-container {
    flex: 1;
    /* Takes up equal space as the text. */
    width: 100%;
    max-width: 500px;
    /* Keeps the image box from becoming too large. */
    aspect-ratio: 16 / 9;
    /* Forces the box to be a wide rectangle. Change to 1/1 for a square. */
    border-radius: 10px;
    /* Rounds the corners. 0 = square corners, 50% = circle. */
    overflow: hidden;
    /* Ensures the image doesn't spill out of the rounded corners. */
    background: #FFFFFF;
    /* Background of the box. Important if image is transparent or fits inside. */
    border: 1px solid #e0e0e0;
    /* Thin border around the box. */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Adds depth with a soft shadow. */
    padding: 15px;
    /* Adds space around the image inside the box. */
}

.service-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Fits the WHOLE image inside without cropping. Change to 'cover' to fill the box instead. */
    display: block;
    transition: transform 0.5s ease;
    /* Smooth speed of the hover-zoom effect below. */
}

.service-card:hover .service-image-container img {
    transform: scale(1.03);
}

.service-content {
    flex: 1;
    text-align: left;
}

/* Center text on mobile */
@media (max-width: 900px) {
    .service-content {
        text-align: center;
    }
}

.service-card:hover .icon-box {
    background: transparent;
    border-color: transparent;
    color: var(--accent-color);
    transform: none;
    box-shadow: none;
}

.service-card h3 {
    font-size: 2rem;
    /* Size of the Service Title. */
    font-family: var(--font-heading);
    color: var(--text-highlight);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    /* Makes all letters capital. Change to 'none' for normal text. */
    letter-spacing: 2px;
    /* Adds space between each letter. */
    font-weight: 700;
}

.short-desc {
    color: var(--text-muted);
    /* Uses the secondary text color. */
    font-size: 1.1rem;
    margin: 0 0 20px 0;
    font-weight: 300;
    letter-spacing: 0.5px;
    border-bottom: none;
    padding-bottom: 0;
    width: 100%;
    max-width: none;
}

.hover-content {
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    transition: none;
}

.hover-content p {
    font-size: 1rem;
    line-height: 1.8;
    /* Space between lines of text. Increase for readability. */
    color: var(--text-main);
    margin: 0;
}

.service-card:hover .hover-content {
    /* No changes on hover */
    max-height: none;
    opacity: 1;
    transform: none;
}



.service-card:hover .hover-content {
    max-height: 120px;
    opacity: 1;
    transform: translateY(0);
}

/* Light Mode Overrides for Services */
/* Light Mode - No changes needed as we use vars */
[data-theme="light"] .service-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

[data-theme="light"] .service-card:hover {
    background: transparent;
    border: none;
    box-shadow: none;
}

[data-theme="light"] .service-image-container {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: #d0d0d0;
    background: #FFFFFF;
}

[data-theme="light"] .short-desc {
    border-color: transparent;
}

[data-theme="light"] .hover-content p {
    color: var(--text-main);
}

/* Showreel Section */
.showreel-section {
    background: linear-gradient(to bottom, var(--bg-color), var(--bg-secondary));
    text-align: center;
}

.video-wrapper {
    position: relative;
    width: 100%;
    /* Full width of container */
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-overlay {
    /* If you want a custom overlay before playing, implemented with JS usually.
       For now, we just rely on iframe or a simple overlay that disappears on click if we had custom video.
       Since we use iframe, this overlay helps style the button if needed, but for iframe usually users just click the iframe.
       I'll hide this purely decorative overlay if pointer-events interfere, 
       but for the requirements 'Watch Full Showreel' button I'll place it below or make it a modal trigger. 
       Let's keep it simple: The requirement says "Button: Watch Full Showreel". 
       So maybe we hide the iframe initially? 
       To keep it simple and 'HTML only', I'll just show the iframe. 
       The overlay here is just visual sugar or for a custom implementation. 
    */
    display: none;
}

/* Playlist Styles */
.showreel-playlist {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px auto 0;
    max-width: 1000px;
    flex-wrap: wrap;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    max-width: 300px;
    border: 1px solid transparent;
}

.playlist-item:hover,
.playlist-item.active {
    background: rgba(225, 6, 0, 0.1);
    border-color: var(--accent-color);
}

.playlist-item .thumb {
    width: 80px;
    height: 45px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.playlist-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-item .thumb i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: var(--text-highlight);
    opacity: 0.8;
}

.playlist-item .info h4 {
    font-size: 0.9rem;
    color: var(--text-highlight);
    margin: 0;
    font-weight: 500;
}


/* Projects Section */
.projects-section {
    background: var(--bg-color);
}

.projects-section .section-title {
    color: var(--text-highlight);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.project-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 2/3;
    background: var(--bg-secondary);
}

.poster-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.poster-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    opacity: 0.85;
}

.project-card:hover .poster-container img {
    transform: scale(1.1);
    opacity: 0.4;
}

.project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    transform: translateY(100%);
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.project-card:hover .project-info {
    transform: translateY(0);
}

.project-info h3 {
    font-size: 1.1rem;
    color: var(--text-highlight);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.project-info .year {
    font-size: 0.9rem;
    color: var(--accent-color);
}

/* Careers Section */
.careers-section {
    background: var(--bg-color);
}

.careers-intro {
    text-align: center;
    max-width: 1200px;
    /* Increased from 900px */
    margin: 0 auto 50px;
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.8;
    width: fit-content;
    display: block;
}

.careers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.career-card {
    background: var(--bg-card);
    padding: 35px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.career-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.career-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 15px 40px var(--shadow-main);
}

.career-card:hover::before {
    transform: scaleX(1);
}

.career-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 15px;
}

.career-header h3 {
    font-size: 1.4rem;
    color: var(--text-highlight);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex: 1;
    width: fit-content;
    display: block;
}

.career-type {
    font-size: 0.75rem;
    color: var(--accent-color);
    background: rgba(225, 6, 0, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-block;
    width: fit-content;
}

.career-description {
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
    width: fit-content;
    display: block;
}

.career-requirements {
    list-style: none;
    margin-bottom: 25px;
    flex: 1;
}

.career-requirements li {
    color: var(--text-main);
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    font-size: 0.95rem;
    width: fit-content;
    display: block;
}

.career-requirements li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: 1.2rem;
}

.career-card .btn {
    margin-top: auto;
}

/* Contact Section */
.contact-section {
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.contact-info {
    text-align: center;
}

.contact-info h3 {
    font-size: 1.8rem;
    color: var(--text-highlight);
    margin-bottom: 20px;
}

.contact-info p {
    color: var(--text-muted);
    margin: 0 auto 40px;
    max-width: 400px;
    width: fit-content;
    display: block;
}

.info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.info-item i {
    color: var(--accent-color);
}

.info-item a,
.info-item span {
    font-family: var(--font-main);
    color: var(--text-main);
    font-weight: 400;
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-item a:hover {
    color: var(--accent-color);
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.social-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

.social-icon {
    position: relative;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-highlight);
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

.social-icon i {
    font-size: 1.4rem;
    line-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.social-icon:hover {
    background: var(--accent-color) !important;
    color: #000 !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 25px var(--accent-glow) !important;
}

/* Magnetic ghost effect style */
.magnetic-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    background: var(--accent-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    filter: blur(10px);
    transition: opacity 0.3s ease, transform 0.1s ease-out;
}

.contact-form {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-highlight);
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.btn-submit {
    width: 100%;
}

.form-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 15px;
}

/* Footer */
footer {
    background: var(--bg-secondary);
    padding: 40px 0;
    border-top: 1px solid var(--border-color);
    text-align: center;
    /* Ensure footer content is centered nicely */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    margin: 0 auto 15px;
    width: fit-content;
    display: block;
}

.footer-logo-img {
    height: 50px;
    /* Size of the logo in the footer */
    width: auto;
    display: block;
    margin: 0 auto;
}

.copyright {
    color: var(--text-muted);
    font-size: 0.9rem;
    width: fit-content;
    display: block;
    margin: 0 auto;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

/* Responsive */
@media (max-width: 900px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        /* Below navbar */
        left: -100%;
        width: 100%;
        background: var(--bg-navbar);
        flex-direction: column;
        align-items: center;
        padding: 40px 0;
        transition: 0.4s;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-link {
        font-size: 1.2rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .stats-grid {
        gap: 30px;
    }

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

/* Scroll Reveal System */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-zoom {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-zoom.active {
    opacity: 1;
    transform: scale(1);
}

/* Hover Effects */
.btn,
.service-card,
.project-card,
.career-card {
    position: relative;
    overflow: hidden;
}

.magnetic-wrap {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.float-ui {
    animation: float 4s ease-in-out infinite;
}

/* Cursor Trail Container */
#cursor-trail-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.trail-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.9;
    box-shadow: 0 0 8px var(--accent-color);
    transition: opacity 0.5s ease-out;
    filter: blur(0.5px);
    z-index: 10000;
}

.cursor-skull {
    position: fixed;
    top: 0;
    left: 0;
    font-size: 24px;
    color: #ffffff;
    /* Always white */
    pointer-events: none;
    z-index: 10001;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 8px #ffffff;
    /* Always white glow */
    transition: transform 0.05s linear;
    /* Removed color transition */
}

.trail-dot.strong {
    width: 10px;
    height: 10px;
    opacity: 1;
    box-shadow: 0 0 20px var(--accent-color), 0 0 40px var(--accent-color), 0 0 60px var(--accent-color);
}

@keyframes trailPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.trail-dot.pulse {
    animation: trailPulse 0.5s ease-out forwards;
}

/* Specialized Card Hover */
.service-card {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-12px) scale(1.02);
}

.project-card .poster-container {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .poster-container {
    transform: scale(1.05);
}

/* Staggering Delay Classes */
.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.animate-fade-up {
    animation: fadeUp 1s ease forwards;
    opacity: 0;
    /* JS can trigger this, but we'll default play it */
    animation-delay: 0.2s;
}

.delay-1 {
    animation-delay: 0.4s;
}

.delay-2 {
    animation-delay: 0.6s;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

@keyframes jitter {
    0% {
        transform: translate(0, 0) scale(1.0);
    }

    10% {
        transform: translate(-2px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(2px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-2px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(2px, -2px) rotate(0deg);
    }

    100% {
        transform: translate(0, 0) scale(1.0);
    }
}

/* Specific Fixes for Job Details & Apply Pages */
.job-section h2,
.apply-header h1,
.apply-header p {
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.scatter-char {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.3s ease,
        text-shadow 0.3s ease;
    white-space: pre;
    will-change: transform;
    /* Fix visibility issues with transparent fill */
    -webkit-text-fill-color: initial;
    color: inherit;
}

.scatter-char.scared {
    color: var(--accent-color) !important;
    text-shadow:
        0 0 5px var(--accent-color),
        0 0 15px var(--accent-color),
        0 0 30px rgba(144, 224, 239, 0.5);
    filter: blur(0.3px);
}