/* Import other CSS files */

@import url('./splash.css');
@import url('./loader.css');
@import url('./navbar.css');
@import url('./hero.css'); /* Import the hero section styles */
@import url('./introduction.css');

html {
  scroll-behavior: smooth;
}

/* Base styles for the body */
body {
    margin: 0;
    font-family: sans-serif;
    overflow: hidden; /* Prevent scrolling during loading */
    
    /* Define CSS variables for theming */
    --bg-color: #f4f4f4; /* Default background color (light mode) */
    --text-color: #333; /* Default text color (light mode) */
    --splash-bg: #eee; /* Default splash screen background (light mode) */
    --splash-text: #121212; /* Default splash screen text color (light mode) */
    --progress-bg: #ddd; /* Default progress bar background (light mode) */
    --progress-color: #800080; /* Default progress bar color (light mode - purple) */
    --progress-binary-color: #fff; /* Default binary color (light mode - white) */
    
    /* Light Theme Navigation Colors */
    --nav-bg: #f4f4f4;
    --nav-text: #333;
    --nav-hover-bg: #800080;
    --nav-hover-text: #f4f4f4;
    --nav-dropdown-bg: #f4f4f4;
    --nav-dropdown-text: #333;
    --nav-dropdown-hover-bg: #ddd;
    --nav-dropdown-hover-text: #333;
    
    /* Hero Section Colors (Light Mode) */
    --hero-text-color: #fff; /* Default hero text color */
    
    /* CTA Button Colors (Light Mode) */
    --cta-button-text-color: #fff;
    --cta-button-bg-color: #800080;
    --cta-button-hover-bg-color: #000000;
    --cta-hover-text: #000000;
    --cta-text-color: var(--bg-color);
    
    /* Section Colors (Light Mode) */
    --primary-color: #800080;
    --secondary-color: #FFB14E;
    
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Dark Mode Styles */
body[data-theme="dark"] {
    /* Override CSS variables for dark mode */
    --bg-color: #121212;
    --text-color: #eee;
    --splash-bg: #000;
    --splash-text: #fff;
    --progress-bg: #333;
    --progress-color: #FFD700; /* Golden color for dark mode progress bar */
    --progress-binary-color: #000; /* Binary color changes to black in dark mode */
    
    /* Dark Theme Navigation Colors */
    --nav-bg: #222222; /* Charcoal Black */
    --nav-text: #FFFFFF; /* White */
    --nav-hover-bg: #FFB14E; /* Light Golden */
    --nav-hover-text: #222222;
    --nav-dropdown-bg: #333333; /* Dark Gray */
    --nav-dropdown-text: #FFFFFF; /* White */
    --nav-dropdown-hover-bg: #FFB14E; /* Light Golden */
    --nav-dropdown-hover-text: #222222;
    
    /* Hero Section Colors (Dark Mode) */
    --hero-dark-text-color: #fff;
    
    /* CTA Button Colors (Dark Mode) */
    --cta-button-text-color: var(--text-color); /* Use dark mode text color */
    --cta-button-bg-color: var(--nav-hover-bg); /* Use navigation hover background color */
    --cta-button-hover-bg-color: var(--nav-hover-text); /* Use navigation hover text color */
    --cta-hover-text: var(--text-color);
    
    /* Section Colors (Dark Mode) */
    --primary-color: #FFD700;
    --secondary-color: #FFB14E;
}

/* ======================================= */
/* 3D GEOMETRIC SHAPES - EXACT COPY FROM INTRODUCTION */
/* ======================================= */

/* Target sections that need shapes */
#blog-section,
.blog-section,
#career-section,
.career-section,
#careers-section,
.careers-section,
#contact-section,
.contact-section,
#contact-us-section,
.contact-us-section {
    position: relative;
    overflow: hidden;
}

/* Geometric shapes container - EXACT COPY */
#blog-section .geometric-shapes,
.blog-section .geometric-shapes,
#career-section .geometric-shapes,
.career-section .geometric-shapes,
#careers-section .geometric-shapes,
.careers-section .geometric-shapes,
#contact-section .geometric-shapes,
.contact-section .geometric-shapes,
#contact-us-section .geometric-shapes,
.contact-us-section .geometric-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Individual Shape Elements - EXACT COPY */
#blog-section .shape,
.blog-section .shape,
#career-section .shape,
.career-section .shape,
#careers-section .shape,
.careers-section .shape,
#contact-section .shape,
.contact-section .shape,
#contact-us-section .shape,
.contact-us-section .shape {
    position: absolute;
    opacity: 0;
    animation: floatShape 8s ease-in-out infinite;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Shape 1 - Circle - EXACT COPY */
#blog-section .shape-1,
.blog-section .shape-1,
#career-section .shape-1,
.career-section .shape-1,
#careers-section .shape-1,
.careers-section .shape-1,
#contact-section .shape-1,
.contact-section .shape-1,
#contact-us-section .shape-1,
.contact-us-section .shape-1 {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--primary-color), transparent);
    border-radius: 50%;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

/* Shape 2 - Rotated Square - EXACT COPY */
#blog-section .shape-2,
.blog-section .shape-2,
#career-section .shape-2,
.career-section .shape-2,
#careers-section .shape-2,
.careers-section .shape-2,
#contact-section .shape-2,
.contact-section .shape-2,
#contact-us-section .shape-2,
.contact-us-section .shape-2 {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, #FFB14E, transparent);
    transform: rotate(45deg);
    top: 20%;
    right: 10%;
    animation-delay: 1s;
}

/* Shape 3 - Triangle - EXACT COPY */
#blog-section .shape-3,
.blog-section .shape-3,
#career-section .shape-3,
.career-section .shape-3,
#careers-section .shape-3,
.careers-section .shape-3,
#contact-section .shape-3,
.contact-section .shape-3,
#contact-us-section .shape-3,
.contact-us-section .shape-3 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 80px solid rgba(128, 0, 128, 0.15);
    top: 60%;
    left: 8%;
    animation-delay: 2s;
}

/* Shape 4 - Rounded Rectangle - EXACT COPY */
#blog-section .shape-4,
.blog-section .shape-4,
#career-section .shape-4,
.career-section .shape-4,
#careers-section .shape-4,
.careers-sections .shape-4,
#contact-section .shape-4,
.contact-section .shape-4,
#contact-us-section .shape-4,
.contact-us-section .shape-4 {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, transparent, #FFB14E);
    border-radius: 20px;
    bottom: 15%;
    right: 5%;
    transform: rotate(15deg);
    animation-delay: 3s;
}

/* Shape 5 - Small Circle - EXACT COPY */
#blog-section .shape-5,
.blog-section .shape-5,
#career-section .shape-5,
.career-section .shape-5,
#careers-section .shape-5,
.careers-section .shape-5,
#contact-section .shape-5,
.contact-section .shape-5,
#contact-us-section .shape-5,
.contact-us-section .shape-5 {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, var(--primary-color), transparent);
    border-radius: 50%;
    top: 40%;
    left: 15%;
    animation-delay: 4s;
}

/* Shape 6 - Conic Gradient Circle - EXACT COPY */
#blog-section .shape-6,
.blog-section .shape-6,
#career-section .shape-6,
.career-section .shape-6,
#careers-section .shape-6,
.careers-section .shape-6,
#contact-section .shape-6,
.contact-section .shape-6,
#contact-us-section .shape-6,
.contact-us-section .shape-6 {
    width: 90px;
    height: 90px;
    background: conic-gradient(from 0deg, #FFB14E, transparent, var(--primary-color));
    border-radius: 50%;
    top: 70%;
    right: 20%;
    animation-delay: 1.5s;
}

/* Shape 7 - Line - EXACT COPY */
#blog-section .shape-7,
.blog-section .shape-7,
#career-section .shape-7,
.career-section .shape-7,
#careers-section .shape-7,
.careers-section .shape-7,
#contact-section .shape-7,
.contact-section .shape-7,
#contact-us-section .shape-7,
.contact-us-section .shape-7 {
    width: 140px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    top: 35%;
    right: 8%;
    transform: rotate(-15deg);
    animation-delay: 2.5s;
}

/* Enhanced floating animation - EXACT COPY */
@keyframes floatShape {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.1;
    }
    25% {
        transform: translateY(-20px) rotate(5deg);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-10px) rotate(-3deg);
        opacity: 0.15;
    }
    75% {
        transform: translateY(-25px) rotate(2deg);
        opacity: 0.25;
    }
}

/* ======================================= */
/* ANIMATION STATES - EXACT COPY */
/* ======================================= */

/* Show shapes when section is in view */
#blog-section.animate-in .shape,
.blog-section.animate-in .shape,
#career-section.animate-in .shape,
.career-section.animate-in .shape,
#careers-section.animate-in .shape,
.careers-section.animate-in .shape,
#contact-section.animate-in .shape,
.contact-section.animate-in .shape,
#contact-us-section.animate-in .shape,
.contact-us-section.animate-in .shape {
    opacity: 0.1;
    transform: scale(1);
}

/* Hide shapes when section is out of view */
#blog-section.animate-out .shape,
.blog-section.animate-out .shape,
#career-section.animate-out .shape,
.career-section.animate-out .shape,
#careers-section.animate-out .shape,
.careers-section.animate-out .shape,
#contact-section.animate-out .shape,
.contact-section.animate-out .shape,
#contact-us-section.animate-out .shape,
.contact-us-section.animate-out .shape {
    opacity: 0;
    transform: scale(0.5);
}

/* ======================================= */
/* THEME-AWARE ADJUSTMENTS - ENHANCED VISIBILITY */
/* ======================================= */

/* Light theme adjustments - MUCH MORE VISIBLE */
body:not([data-theme="dark"]) #blog-section .shape,
body:not([data-theme="dark"]) .blog-section .shape,
body:not([data-theme="dark"]) #career-section .shape,
body:not([data-theme="dark"]) .career-section .shape,
body:not([data-theme="dark"]) #careers-section .shape,
body:not([data-theme="dark"]) .careers-section .shape,
body:not([data-theme="dark"]) #contact-section .shape,
body:not([data-theme="dark"]) .contact-section .shape,
body:not([data-theme="dark"]) #contact-us-section .shape,
body:not([data-theme="dark"]) .contact-us-section .shape {
    opacity: 0.2; /* INCREASED from 0.08 to 0.2 for visibility */
}

/* Shape 1 - Circle - Light Mode Enhanced */
body:not([data-theme="dark"]) #blog-section .shape-1,
body:not([data-theme="dark"]) .blog-section .shape-1,
body:not([data-theme="dark"]) #career-section .shape-1,
body:not([data-theme="dark"]) .career-section .shape-1,
body:not([data-theme="dark"]) #careers-section .shape-1,
body:not([data-theme="dark"]) .careers-section .shape-1,
body:not([data-theme="dark"]) #contact-section .shape-1,
body:not([data-theme="dark"]) .contact-section .shape-1,
body:not([data-theme="dark"]) #contact-us-section .shape-1,
body:not([data-theme="dark"]) .contact-us-section .shape-1 {
    background: linear-gradient(135deg, #800080, rgba(128, 0, 128, 0.3)); /* DARKER and more visible */
}

/* Shape 2 - Square - Light Mode Enhanced */
body:not([data-theme="dark"]) #blog-section .shape-2,
body:not([data-theme="dark"]) .blog-section .shape-2,
body:not([data-theme="dark"]) #career-section .shape-2,
body:not([data-theme="dark"]) .career-section .shape-2,
body:not([data-theme="dark"]) #careers-section .shape-2,
body:not([data-theme="dark"]) .careers-section .shape-2,
body:not([data-theme="dark"]) #contact-section .shape-2,
body:not([data-theme="dark"]) .contact-section .shape-2,
body:not([data-theme="dark"]) #contact-us-section .shape-2,
body:not([data-theme="dark"]) .contact-us-section .shape-2 {
    background: linear-gradient(45deg, #FFB14E, rgba(255, 177, 78, 0.25)); /* DARKER orange */
}

/* Shape 3 - Triangle - Light Mode Enhanced */
body:not([data-theme="dark"]) #blog-section .shape-3,
body:not([data-theme="dark"]) .blog-section .shape-3,
body:not([data-theme="dark"]) #career-section .shape-3,
body:not([data-theme="dark"]) .career-section .shape-3,
body:not([data-theme="dark"]) #careers-section .shape-3,
body:not([data-theme="dark"]) .careers-section .shape-3,
body:not([data-theme="dark"]) #contact-section .shape-3,
body:not([data-theme="dark"]) .contact-section .shape-3,
body:not([data-theme="dark"]) #contact-us-section .shape-3,
body:not([data-theme="dark"]) .contact-us-section .shape-3 {
    border-bottom-color: rgba(128, 0, 128, 0.25); /* DARKER purple triangle */
}

/* Shape 4 - Rectangle - Light Mode Enhanced */
body:not([data-theme="dark"]) #blog-section .shape-4,
body:not([data-theme="dark"]) .blog-section .shape-4,
body:not([data-theme="dark"]) #career-section .shape-4,
body:not([data-theme="dark"]) .career-section .shape-4,
body:not([data-theme="dark"]) #careers-section .shape-4,
body:not([data-theme="dark"]) .careers-sections .shape-4,
body:not([data-theme="dark"]) #contact-section .shape-4,
body:not([data-theme="dark"]) .contact-section .shape-4,
body:not([data-theme="dark"]) #contact-us-section .shape-4,
body:not([data-theme="dark"]) .contact-us-section .shape-4 {
    background: linear-gradient(135deg, rgba(255, 177, 78, 0.1), #FFB14E); /* Visible rectangle */
}

/* Shape 5 - Small Circle - Light Mode Enhanced */
body:not([data-theme="dark"]) #blog-section .shape-5,
body:not([data-theme="dark"]) .blog-section .shape-5,
body:not([data-theme="dark"]) #career-section .shape-5,
body:not([data-theme="dark"]) .career-section .shape-5,
body:not([data-theme="dark"]) #careers-section .shape-5,
body:not([data-theme="dark"]) .careers-section .shape-5,
body:not([data-theme="dark"]) #contact-section .shape-5,
body:not([data-theme="dark"]) .contact-section .shape-5,
body:not([data-theme="dark"]) #contact-us-section .shape-5,
body:not([data-theme="dark"]) .contact-us-section .shape-5 {
    background: radial-gradient(circle, #800080, rgba(128, 0, 128, 0.2)); /* Visible small circle */
}

/* Shape 6 - Conic Circle - Light Mode Enhanced */
body:not([data-theme="dark"]) #blog-section .shape-6,
body:not([data-theme="dark"]) .blog-section .shape-6,
body:not([data-theme="dark"]) #career-section .shape-6,
body:not([data-theme="dark"]) .career-section .shape-6,
body:not([data-theme="dark"]) #careers-section .shape-6,
body:not([data-theme="dark"]) .careers-section .shape-6,
body:not([data-theme="dark"]) #contact-section .shape-6,
body:not([data-theme="dark"]) .contact-section .shape-6,
body:not([data-theme="dark"]) #contact-us-section .shape-6,
body:not([data-theme="dark"]) .contact-us-section .shape-6 {
    background: conic-gradient(from 0deg, #FFB14E, rgba(255, 177, 78, 0.2), #800080); /* Visible conic */
}

/* Shape 7 - Line - Light Mode Enhanced */
body:not([data-theme="dark"]) #blog-section .shape-7,
body:not([data-theme="dark"]) .blog-section .shape-7,
body:not([data-theme="dark"]) #career-section .shape-7,
body:not([data-theme="dark"]) .career-section .shape-7,
body:not([data-theme="dark"]) #careers-section .shape-7,
body:not([data-theme="dark"]) .careers-section .shape-7,
body:not([data-theme="dark"]) #contact-section .shape-7,
body:not([data-theme="dark"]) .contact-section .shape-7,
body:not([data-theme="dark"]) #contact-us-section .shape-7,
body:not([data-theme="dark"]) .contact-us-section .shape-7 {
    background: linear-gradient(90deg, transparent, #800080, transparent); /* Visible line */
    opacity: 0.3; /* Extra visibility for line */
}

/* Dark theme adjustments - Keep existing */
body[data-theme="dark"] #blog-section .shape,
body[data-theme="dark"] .blog-section .shape,
body[data-theme="dark"] #career-section .shape,
body[data-theme="dark"] .career-section .shape,
body[data-theme="dark"] #careers-section .shape,
body[data-theme="dark"] .careers-sections .shape,
body[data-theme="dark"] #contact-section .shape,
body[data-theme="dark"] .contact-section .shape,
body[data-theme="dark"] #contact-us-section .shape,
body[data-theme="dark"] .contact-us-section .shape {
    opacity: 0.15;
}

/* ======================================= */
/* ANIMATION STATES - ENHANCED VISIBILITY */
/* ======================================= */

/* Show shapes when section is in view - ENHANCED */
#blog-section.animate-in .shape,
.blog-section.animate-in .shape,
#career-section.animate-in .shape,
.career-section.animate-in .shape,
#careers-section.animate-in .shape,
.careers-section.animate-in .shape,
#contact-section.animate-in .shape,
.contact-section.animate-in .shape,
#contact-us-section.animate-in .shape,
.contact-us-section.animate-in .shape {
    opacity: 0.2; /* Base visibility */
    transform: scale(1);
}

/* Light mode - even more visible when animated in */
body:not([data-theme="dark"]) #blog-section.animate-in .shape,
body:not([data-theme="dark"]) .blog-section.animate-in .shape,
body:not([data-theme="dark"]) #career-section.animate-in .shape,
body:not([data-theme="dark"]) .career-section.animate-in .shape,
body:not([data-theme="dark"]) #careers-section.animate-in .shape,
body:not([data-theme="dark"]) .careers-section.animate-in .shape,
body:not([data-theme="dark"]) #contact-section.animate-in .shape,
body:not([data-theme="dark"]) .contact-section.animate-in .shape,
body:not([data-theme="dark"]) #contact-us-section.animate-in .shape,
body:not([data-theme="dark"]) .contact-us-section.animate-in .shape {
    opacity: 0.25 !important; /* EXTRA visibility in light mode */
}

/* Dark mode - standard visibility when animated in */
body[data-theme="dark"] #blog-section.animate-in .shape,
body[data-theme="dark"] .blog-section.animate-in .shape,
body[data-theme="dark"] #career-section.animate-in .shape,
body[data-theme="dark"] .career-section.animate-in .shape,
body[data-theme="dark"] #careers-section.animate-in .shape,
body[data-theme="dark"] .careers-section.animate-in .shape,
body[data-theme="dark"] #contact-section.animate-in .shape,
body[data-theme="dark"] .contact-section.animate-in .shape,
body[data-theme="dark"] #contact-us-section.animate-in .shape,
body[data-theme="dark"] .contact-us-section.animate-in .shape {
    opacity: 0.2 !important;
}


/* ======================================= */
/* CLEAN SECTIONS WITHOUT SHAPES */
/* ======================================= */

/* Ensure hero and projects sections stay clean */
#hero-section,
.hero-section,
#project-section,
.project-section,
#projects-section,
.projects-section {
    background: var(--bg-color) !important;
    position: relative;
}

#hero-section::before,
#hero-section::after,
.hero-section::before,
.hero-section::after,
#project-section::before,
#project-section::after,
.project-section::before,
.project-section::after,
#projects-section::before,
#projects-section::after,
.projects-sections::before,
.projects-section::after {
    display: none !important;
}

/* Adjust main content padding to account for fixed header */
#content {
    padding-top: 70px;
    padding-bottom: 20px;
    text-align: center;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Utility Class */
.hidden {
    display: none !important;
}

/* Fade Out Effect */
.fade-out {
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out;
}

/* Remove any wave elements globally */
.wave,
.wave-top,
.wave-bottom,
.wave svg,
.wave path {
    display: none !important;
}

/* Clean background for all sections */
section,
.section {
    background: var(--bg-color) !important;
}
/* Enhanced floating animation - MORE VISIBLE */
@keyframes floatShape {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.15; /* INCREASED base opacity */
    }
    25% {
        transform: translateY(-20px) rotate(5deg);
        opacity: 0.3; /* INCREASED peak opacity */
    }
    50% {
        transform: translateY(-10px) rotate(-3deg);
        opacity: 0.22; /* INCREASED mid opacity */
    }
    75% {
        transform: translateY(-25px) rotate(2deg);
        opacity: 0.35; /* INCREASED highest opacity */
    }
}

/* Light mode floating animation - EXTRA VISIBLE */
body:not([data-theme="dark"]) .shape {
    animation-name: floatShapeLight;
}

@keyframes floatShapeLight {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.2; /* Higher base opacity for light mode */
    }
    25% {
        transform: translateY(-20px) rotate(5deg);
        opacity: 0.4; /* Much higher peak opacity */
    }
    50% {
        transform: translateY(-10px) rotate(-3deg);
        opacity: 0.3; /* Higher mid opacity */
    }
    75% {
        transform: translateY(-25px) rotate(2deg);
        opacity: 0.45; /* Highest opacity in light mode */
    }
}
/* ======================================= */
/* EXTEND GEOMETRIC SHAPES TO PROJECT SECTION */
/* ======================================= */

/* Add project sections to the existing shapes system */
#projects-showcase-container,
#project-section,
.project-section,
#projects-section,
.projects-section {
    position: relative;
    overflow: hidden;
}

/* Geometric shapes container for project sections */
#projects-showcase-container .geometric-shapes,
#project-section .geometric-shapes,
.project-section .geometric-shapes,
#projects-section .geometric-shapes,
.projects-section .geometric-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Individual Shape Elements for project sections */
#projects-showcase-container .shape,
#project-section .shape,
.project-section .shape,
#projects-section .shape,
.projects-section .shape {
    position: absolute;
    opacity: 0;
    animation: floatShape 8s ease-in-out infinite;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Shape 1 - Circle for project sections */
#projects-showcase-container .shape-1,
#project-section .shape-1,
.project-section .shape-1,
#projects-section .shape-1,
.projects-section .shape-1 {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--primary-color), transparent);
    border-radius: 50%;
    top: 15%;
    left: 8%;
    animation-delay: 0s;
}

/* Shape 2 - Rotated Square for project sections */
#projects-showcase-container .shape-2,
#project-section .shape-2,
.project-section .shape-2,
#projects-section .shape-2,
.projects-section .shape-2 {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, #FFB14E, transparent);
    transform: rotate(45deg);
    top: 25%;
    right: 15%;
    animation-delay: 1s;
}

/* Shape 3 - Triangle for project sections */
#projects-showcase-container .shape-3,
#project-section .shape-3,
.project-section .shape-3,
#projects-section .shape-3,
.projects-section .shape-3 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 80px solid rgba(128, 0, 128, 0.15);
    top: 65%;
    left: 12%;
    animation-delay: 2s;
}

/* Shape 4 - Rounded Rectangle for project sections */
#projects-showcase-container .shape-4,
#project-section .shape-4,
.project-section .shape-4,
#projects-section .shape-4,
.projects-section .shape-4 {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, transparent, #FFB14E);
    border-radius: 20px;
    bottom: 20%;
    right: 8%;
    transform: rotate(15deg);
    animation-delay: 3s;
}

/* Shape 5 - Small Circle for project sections */
#projects-showcase-container .shape-5,
#project-section .shape-5,
.project-section .shape-5,
#projects-section .shape-5,
.projects-section .shape-5 {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, var(--primary-color), transparent);
    border-radius: 50%;
    top: 45%;
    left: 20%;
    animation-delay: 4s;
}

/* Shape 6 - Conic Gradient Circle for project sections */
#projects-showcase-container .shape-6,
#project-section .shape-6,
.project-section .shape-6,
#projects-section .shape-6,
.projects-section .shape-6 {
    width: 90px;
    height: 90px;
    background: conic-gradient(from 0deg, #FFB14E, transparent, var(--primary-color));
    border-radius: 50%;
    top: 75%;
    right: 25%;
    animation-delay: 1.5s;
}

/* Shape 7 - Line for project sections */
#projects-showcase-container .shape-7,
#project-section .shape-7,
.project-section .shape-7,
#projects-section .shape-7,
.projects-section .shape-7 {
    width: 140px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    top: 40%;
    right: 12%;
    transform: rotate(-15deg);
    animation-delay: 2.5s;
}

/* ======================================= */
/* PROJECT SECTION ANIMATION STATES */
/* ======================================= */

/* Show shapes when project section is in view */
#projects-showcase-container.animate-in .shape,
#project-section.animate-in .shape,
.project-section.animate-in .shape,
#projects-section.animate-in .shape,
.projects-section.animate-in .shape {
    opacity: 0.1;
    transform: scale(1);
}

/* Hide shapes when project section is out of view */
#projects-showcase-container.animate-out .shape,
#project-section.animate-out .shape,
.project-section.animate-out .shape,
#projects-section.animate-out .shape,
.projects-section.animate-out .shape {
    opacity: 0;
    transform: scale(0.5);
}

/* ======================================= */
/* PROJECT SECTION THEME ADJUSTMENTS */
/* ======================================= */

/* Light theme adjustments for project sections */
body:not([data-theme="dark"]) #projects-showcase-container .shape,
body:not([data-theme="dark"]) #project-section .shape,
body:not([data-theme="dark"]) .project-section .shape,
body:not([data-theme="dark"]) #projects-section .shape,
body:not([data-theme="dark"]) .projects-section .shape {
    opacity: 0.25; /* Extra visibility for project sections */
}

body:not([data-theme="dark"]) #projects-showcase-container .shape-1,
body:not([data-theme="dark"]) #project-section .shape-1,
body:not([data-theme="dark"]) .project-section .shape-1,
body:not([data-theme="dark"]) #projects-section .shape-1,
body:not([data-theme="dark"]) .projects-section .shape-1 {
    background: linear-gradient(135deg, #800080, rgba(128, 0, 128, 0.3));
}

body:not([data-theme="dark"]) #projects-showcase-container .shape-2,
body:not([data-theme="dark"]) #project-section .shape-2,
body:not([data-theme="dark"]) .project-section .shape-2,
body:not([data-theme="dark"]) #projects-section .shape-2,
body:not([data-theme="dark"]) .projects-section .shape-2 {
    background: linear-gradient(45deg, #FFB14E, rgba(255, 177, 78, 0.25));
}

body:not([data-theme="dark"]) #projects-showcase-container .shape-3,
body:not([data-theme="dark"]) #project-section .shape-3,
body:not([data-theme="dark"]) .project-section .shape-3,
body:not([data-theme="dark"]) #projects-section .shape-3,
body:not([data-theme="dark"]) .projects-section .shape-3 {
    border-bottom-color: rgba(128, 0, 128, 0.25);
}

body:not([data-theme="dark"]) #projects-showcase-container .shape-4,
body:not([data-theme="dark"]) #project-section .shape-4,
body:not([data-theme="dark"]) .project-section .shape-4,
body:not([data-theme="dark"]) #projects-section .shape-4,
body:not([data-theme="dark"]) .projects-section .shape-4 {
    background: linear-gradient(135deg, rgba(255, 177, 78, 0.1), #FFB14E);
}

body:not([data-theme="dark"]) #projects-showcase-container .shape-5,
body:not([data-theme="dark"]) #project-section .shape-5,
body:not([data-theme="dark"]) .project-section .shape-5,
body:not([data-theme="dark"]) #projects-section .shape-5,
body:not([data-theme="dark"]) .projects-section .shape-5 {
    background: radial-gradient(circle, #800080, rgba(128, 0, 128, 0.2));
}

body:not([data-theme="dark"]) #projects-showcase-container .shape-6,
body:not([data-theme="dark"]) #project-section .shape-6,
body:not([data-theme="dark"]) .project-section .shape-6,
body:not([data-theme="dark"]) #projects-section .shape-6,
body:not([data-theme="dark"]) .projects-section .shape-6 {
    background: conic-gradient(from 0deg, #FFB14E, rgba(255, 177, 78, 0.2), #800080);
}

body:not([data-theme="dark"]) #projects-showcase-container .shape-7,
body:not([data-theme="dark"]) #project-section .shape-7,
body:not([data-theme="dark"]) .project-section .shape-7,
body:not([data-theme="dark"]) #projects-section .shape-7,
body:not([data-theme="dark"]) .projects-section .shape-7 {
    background: linear-gradient(90deg, transparent, #800080, transparent);
    opacity: 0.3;
}

/* Dark theme adjustments for project sections */
body[data-theme="dark"] #projects-showcase-container .shape,
body[data-theme="dark"] #project-section .shape,
body[data-theme="dark"] .project-section .shape,
body[data-theme="dark"] #projects-section .shape,
body[data-theme="dark"] .projects-section .shape {
    opacity: 0.2; /* Good visibility in dark mode */
}

/* Light mode - even more visible when animated in */
body:not([data-theme="dark"]) #projects-showcase-container.animate-in .shape,
body:not([data-theme="dark"]) #project-section.animate-in .shape,
body:not([data-theme="dark"]) .project-section.animate-in .shape,
body:not([data-theme="dark"]) #projects-section.animate-in .shape,
body:not([data-theme="dark"]) .projects-section.animate-in .shape {
    opacity: 0.3 !important;
}

/* Dark mode - standard visibility when animated in */
body[data-theme="dark"] #projects-showcase-container.animate-in .shape,
body[data-theme="dark"] #project-section.animate-in .shape,
body[data-theme="dark"] .project-section.animate-in .shape,
body[data-theme="dark"] #projects-section.animate-in .shape,
body[data-theme="dark"] .projects-section.animate-in .shape {
    opacity: 0.25 !important;
}

/* Ensure project content appears above shapes */
#projects-showcase-container > *,
#project-section > *,
.project-section > *,
#projects-section > *,
.projects-section > * {
    position: relative;
    z-index: 2;
}

/* Special case for projects scroller */
.projects-scroller {
    z-index: 2;
}
/* ======================================= */
/* EXTEND SHAPES TO FULL CAREER SECTION */
/* ======================================= */

/* Ensure career section has proper positioning for full-height shapes */
.careers-section {
    position: relative;
    overflow: hidden;
}

/* EXTENDED: Geometric shapes container to cover entire career section */
.careers-section .geometric-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover entire career section */
    overflow: hidden;
    z-index: 1; /* Behind content */
    pointer-events: none;
}

/* ADDITIONAL SHAPES FOR LOWER SECTION (Current Openings) */

/* Shape 8 - Circle in lower section */
.careers-section .shape-8 {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--primary-color), transparent);
    border-radius: 50%;
    bottom: 25%; /* Position in lower section */
    left: 12%;
    animation-delay: 3.5s;
    position: absolute;
    opacity: 0;
    animation: floatShape 8s ease-in-out infinite;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Shape 9 - Square in lower section */
.careers-section .shape-9 {
    width: 70px;
    height: 70px;
    background: linear-gradient(45deg, #FFB14E, transparent);
    transform: rotate(45deg);
    bottom: 40%;
    right: 18%;
    animation-delay: 4.5s;
    position: absolute;
    opacity: 0;
    animation: floatShape 8s ease-in-out infinite;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Shape 10 - Small circle in lower section */
.careers-section .shape-10 {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, var(--primary-color), transparent);
    border-radius: 50%;
    bottom: 15%;
    left: 25%;
    animation-delay: 2.2s;
    position: absolute;
    opacity: 0;
    animation: floatShape 8s ease-in-out infinite;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Shape 11 - Triangle in lower section */
.careers-section .shape-11 {
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 60px solid rgba(128, 0, 128, 0.12);
    bottom: 35%;
    right: 8%;
    animation-delay: 1.8s;
    position: absolute;
    opacity: 0;
    animation: floatShape 8s ease-in-out infinite;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Shape 12 - Line in lower section */
.careers-section .shape-12 {
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    bottom: 20%;
    right: 15%;
    transform: rotate(25deg);
    animation-delay: 0.8s;
    position: absolute;
    opacity: 0;
    animation: floatShape 8s ease-in-out infinite;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Shape 13 - Conic gradient circle in lower section */
.careers-section .shape-13 {
    width: 75px;
    height: 75px;
    background: conic-gradient(from 0deg, #FFB14E, transparent, var(--primary-color));
    border-radius: 50%;
    bottom: 50%;
    left: 8%;
    animation-delay: 3.2s;
    position: absolute;
    opacity: 0;
    animation: floatShape 8s ease-in-out infinite;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ENSURE ALL CONTENT IS ABOVE SHAPES */
.career-hero,
.career-openings-section,
.career-openings-container,
.roles-accordion {
    position: relative;
    z-index: 2; /* Above shapes */
}

/* ANIMATION STATES FOR NEW SHAPES */
.careers-section.animate-in .shape-8,
.careers-section.animate-in .shape-9,
.careers-section.animate-in .shape-10,
.careers-section.animate-in .shape-11,
.careers-section.animate-in .shape-12,
.careers-section.animate-in .shape-13 {
    opacity: 0.1;
    transform: scale(1);
}

.careers-section.animate-out .shape-8,
.careers-section.animate-out .shape-9,
.careers-section.animate-out .shape-10,
.careers-section.animate-out .shape-11,
.careers-section.animate-out .shape-12,
.careers-section.animate-out .shape-13 {
    opacity: 0;
    transform: scale(0.5);
}

/* THEME ADJUSTMENTS FOR NEW SHAPES */

/* Light theme */
body:not([data-theme="dark"]) .careers-section .shape-8,
body:not([data-theme="dark"]) .careers-section .shape-9,
body:not([data-theme="dark"]) .careers-section .shape-10,
body:not([data-theme="dark"]) .careers-section .shape-11,
body:not([data-theme="dark"]) .careers-section .shape-12,
body:not([data-theme="dark"]) .careers-section .shape-13 {
    opacity: 0.25;
}

body:not([data-theme="dark"]) .careers-section .shape-8 {
    background: linear-gradient(135deg, #800080, rgba(128, 0, 128, 0.3));
}

body:not([data-theme="dark"]) .careers-section .shape-9 {
    background: linear-gradient(45deg, #FFB14E, rgba(255, 177, 78, 0.25));
}

body:not([data-theme="dark"]) .careers-section .shape-10 {
    background: radial-gradient(circle, #800080, rgba(128, 0, 128, 0.2));
}

body:not([data-theme="dark"]) .careers-section .shape-11 {
    border-bottom-color: rgba(128, 0, 128, 0.25);
}

body:not([data-theme="dark"]) .careers-section .shape-12 {
    background: linear-gradient(90deg, transparent, #800080, transparent);
    opacity: 0.3;
}

body:not([data-theme="dark"]) .careers-section .shape-13 {
    background: conic-gradient(from 0deg, #FFB14E, rgba(255, 177, 78, 0.2), #800080);
}

/* Dark theme */
body[data-theme="dark"] .careers-section .shape-8,
body[data-theme="dark"] .careers-section .shape-9,
body[data-theme="dark"] .careers-section .shape-10,
body[data-theme="dark"] .careers-section .shape-11,
body[data-theme="dark"] .careers-section .shape-12,
body[data-theme="dark"] .careers-section .shape-13 {
    opacity: 0.2;
}

/* Light mode - extra visibility when animated in */
body:not([data-theme="dark"]) .careers-section.animate-in .shape-8,
body:not([data-theme="dark"]) .careers-section.animate-in .shape-9,
body:not([data-theme="dark"]) .careers-section.animate-in .shape-10,
body:not([data-theme="dark"]) .careers-section.animate-in .shape-11,
body:not([data-theme="dark"]) .careers-section.animate-in .shape-12,
body:not([data-theme="dark"]) .careers-section.animate-in .shape-13 {
    opacity: 0.3 !important;
}

/* Dark mode - standard visibility when animated in */
body[data-theme="dark"] .careers-section.animate-in .shape-8,
body[data-theme="dark"] .careers-section.animate-in .shape-9,
body[data-theme="dark"] .careers-section.animate-in .shape-10,
body[data-theme="dark"] .careers-section.animate-in .shape-11,
body[data-theme="dark"] .careers-section.animate-in .shape-12,
body[data-theme="dark"] .careers-section.animate-in .shape-13 {
    opacity: 0.25 !important;
}
/* Quick performance fix for touchpad scrolling */
@media (pointer: fine) {
    /* Mouse users get full animations */
    .geometric-shapes .shape {
        animation-duration: 8s;
    }
}

@media (pointer: coarse) {
    /* Touch users get reduced animations */
    .geometric-shapes .shape {
        animation-duration: 4s;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .geometric-shapes .shape {
        animation: none !important;
    }
    
    * {
        transition-duration: 0.1s !important;
        animation-duration: 0.1s !important;
    }
}
/* ======================================= */
/* SAFE PERFORMANCE OPTIMIZATIONS */
/* ======================================= */

/* Only optimize specific elements, not everything */
.geometric-shapes .shape {
    /* Enable hardware acceleration for shapes only */
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* Optimize only during scrolling - no universal * selector */
.is-scrolling .geometric-shapes .shape {
    animation-play-state: paused;
}

body:not(.is-scrolling) .geometric-shapes .shape {
    animation-play-state: running;
}

/* Only optimize expensive backdrop-filter elements */
.is-scrolling .benefit-card,
.is-scrolling .position-item,
.is-scrolling .role-item {
    backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Touchpad specific optimizations - much less aggressive */
.touchpad-scrolling .geometric-shapes .shape {
    animation-duration: 2s !important;
}

.touchpad-scrolling .benefit-card,
.touchpad-scrolling .position-item {
    backdrop-filter: blur(5px) !important;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .geometric-shapes .shape {
        animation: none !important;
    }
    
    * {
        transition-duration: 0.01s !important;
    }
}
/* Base animated shapes container */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Animated shape elements */
.shape {
    position: absolute;
    border-radius: 50%;
    animation: float 20s infinite linear;
    filter: blur(1px);
}

/* Light Mode Shapes - Subtle and Soft */
[data-theme="light"] .shape:nth-child(1) {
    width: 80px;
    height: 80px;
    background: rgba(99, 102, 241, 0.08); /* Very subtle indigo */
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

[data-theme="light"] .shape:nth-child(2) {
    width: 60px;
    height: 60px;
    background: rgba(168, 85, 247, 0.06); /* Very subtle purple */
    top: 60%;
    right: 15%;
    animation-delay: -5s;
}

[data-theme="light"] .shape:nth-child(3) {
    width: 100px;
    height: 100px;
    background: rgba(34, 197, 94, 0.05); /* Very subtle green */
    bottom: 20%;
    left: 20%;
    animation-delay: -10s;
}

[data-theme="light"] .shape:nth-child(4) {
    width: 70px;
    height: 70px;
    background: rgba(251, 191, 36, 0.07); /* Very subtle yellow */
    top: 30%;
    right: 30%;
    animation-delay: -15s;
}

/* Dark Mode Shapes - Even More Subtle */
[data-theme="dark"] .shape:nth-child(1) {
    width: 80px;
    height: 80px;
    background: rgba(99, 102, 241, 0.12); /* Slightly more visible indigo for dark */
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

[data-theme="dark"] .shape:nth-child(2) {
    width: 60px;
    height: 60px;
    background: rgba(168, 85, 247, 0.10); /* Subtle purple */
    top: 60%;
    right: 15%;
    animation-delay: -5s;
}

[data-theme="dark"] .shape:nth-child(3) {
    width: 100px;
    height: 100px;
    background: rgba(34, 197, 94, 0.08); /* Subtle green */
    bottom: 20%;
    left: 20%;
    animation-delay: -10s;
}

[data-theme="dark"] .shape:nth-child(4) {
    width: 70px;
    height: 70px;
    background: rgba(251, 191, 36, 0.09); /* Subtle yellow */
    top: 30%;
    right: 30%;
    animation-delay: -15s;
}

/* Floating animation */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    33% {
        transform: translateY(-30px) rotate(120deg);
        opacity: 0.6;
    }
    66% {
        transform: translateY(30px) rotate(240deg);
        opacity: 0.4;
    }
    100% {
        transform: translateY(0px) rotate(360deg);
        opacity: 0.3;
    }
}

/* Additional geometric shapes for variety */
.shape.triangle {
    border-radius: 0;
    width: 0;
    height: 0;
    background: transparent !important;
}

[data-theme="light"] .shape.triangle {
    border-left: 25px solid rgba(99, 102, 241, 0.06);
    border-right: 25px solid transparent;
    border-bottom: 43px solid transparent;
}

[data-theme="dark"] .shape.triangle {
    border-left: 25px solid rgba(99, 102, 241, 0.10);
    border-right: 25px solid transparent;
    border-bottom: 43px solid transparent;
}

.shape.square {
    border-radius: 15%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .shape {
        filter: blur(2px);
    }
    
    .shape:nth-child(1) { width: 60px; height: 60px; }
    .shape:nth-child(2) { width: 45px; height: 45px; }
    .shape:nth-child(3) { width: 75px; height: 75px; }
    .shape:nth-child(4) { width: 50px; height: 50px; }
}