:root {
       --navy-deep: #001A33;
       --navy-primary: #003366;
       --accent-blue: #2563eb;
       --accent-light: #dbeafe;
       --border: #e2e8f0;
       --text-muted: #64748b;
       --bg-light: #f1f5f9;
   }

   body {
       font-family: 'Roboto', 'Open Sans', 'Quicksand', Arial, sans-serif;
       margin: 0;
       padding: 0;
       background-color: #ffffff;
       overflow-x: hidden;
   }

   /* --- Animations --- */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

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

   @keyframes orbitSpin {
       0% {
           transform: rotate(0deg);
       }

       100% {
           transform: rotate(360deg);
       }
   }

   .reveal {
       opacity: 0;
   }

   .reveal.active {
       animation: fadeInUp 0.6s ease forwards;
   }

   /* --- Hero Section --- */
   /* --- Hero Section with 80vw Height --- */
   .career-hero {
       background: linear-gradient(to right,
               rgba(0, 0, 0, 0.9) 0%,
               rgba(0, 0, 0, 0) 30%,
               rgba(0, 0, 0, 0) 70%,
               rgba(0, 0, 0, 0.9) 100%),
           url('../../static/assets/careerHero2.jpg');

       background-size: cover;
       background-position: center;
       color: white;
       /* Updated height to 80vw */
       height: 80vh;
       /* Ensures content stays centered regardless of the vw height */
       display: flex;
       justify-content: center;
       align-items: center;
       text-align: center;
       box-sizing: border-box;
   }

   .container-career {
       margin: 0 auto;
       padding: 0 20px;
   }

   /* --- Force Sharp Rendering and Isolate from Global style.css --- */

   .career-hero *,
   .container-career h1,
   .container-career p {
       /* 1. Reset any global filters or transforms that might be inherited */
       filter: none !important;
       perspective: none !important;
       transform-style: flat !important;

       /* 2. Force high-quality text rendering */
       -webkit-font-smoothing: antialiased !important;
       -moz-osx-font-smoothing: grayscale !important;
       text-rendering: optimizeLegibility !important;

       /* 3. Disable browser "guessing" on sub-pixel positioning */
       -webkit-transform: translateZ(0) !important;
       transform: translateZ(0) !important;

       /* 4. Prevent font-size jittering during animations */
       -webkit-text-size-adjust: 100%;
   }

   /* 5. Special fix for animated characters to prevent 'shimmer' */
   .container-career .char,
   .container-career .hero-char {
       display: inline-block !important;
       backface-visibility: hidden !important;
       -webkit-backface-visibility: hidden !important;
       /* This prevents the letters from moving 0.5px and looking blur */
       transform: translate3d(0, 0, 0) !important;
   }

   /* --- Enhanced Hero Typography --- */
   .container-career h1 {
       font-size: 4.7rem;
       /* Scales perfectly with your 80vw height */
       font-weight: 800;
       margin-bottom: 24px;
       letter-spacing: 0.01em;
       line-height: 1.1;
       color: #fff;
       /* Soft glow effect for readability */
       text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
       max-width: 900px;
   }

   .container-career p {
       font-size: 1.5rem;
       font-weight: 500;
       max-width: 650px;
       margin: 0 auto 40px;
       line-height: 1.6;
       word-spacing: 2px;
       color: rgba(255, 255, 255, 0.95);
       /* Subtle separation from the background */
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

   }

   /* Button Styling */
   .hero-apply-btn {
       background-color: #0056b3;
       /* A lighter, more 'active' shade of #003366 */
       color: #ffffff;
       text-decoration: none;
       border-bottom: none;
       display: inline-block;
       padding: 14px 32px;
       border: none;
       border-radius: 6px;
       font-weight: 700;
       font-size: 1rem;
       cursor: pointer;
       transition: all 0.3s ease;
       box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
   }

   .hero-apply-btn:hover,
   .hero-apply-btn:focus,
   .hero-apply-btn:active,
   .hero-apply-btn:visited {
       text-decoration: none !important;
       border-bottom: none !important;
   }

   .hero-apply-btn:hover {
       background-color: #004080;
       /* Darker than the button, lighter than the base navy */
       transform: translateY(-2px);
       box-shadow: 0 6px 15px rgba(0, 51, 102, 0.3);
   }

   /* Active/Click State */
   .hero-apply-btn:active {
       transform: translateY(0);
       background-color: #003366;
       /* Match your base navy on click */
   }

   /*    JUMPSTART SECTION */
   .internship-jumpstart {
       padding: 100px 0;
       background-color: #ffffff;
   }

   .jumpstart-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 60px;
       align-items: center;
       max-width: 1100px;
       margin: 0 auto;
   }

   /* Styling the Card to match your image */
   .jumpstart-card {
       background: #ffffff;
       padding: 30px;
       /* Extra rounded as per your image */
       box-shadow: 0 20px 60px rgba(0, 51, 102, 0.08);
       /* Soft blue-tinted shadow */
       position: relative;
       transition: all 0.6s ease;
       border: 2px solid transparent;
   }

   .jumpstart-card.active-glow {
       border-color: rgba(37, 99, 235, 0.3);
       box-shadow: 0 0 30px rgba(37, 99, 235, 0.15),
           0 20px 60px rgba(0, 51, 102, 0.08);
       animation: cardPulse 3s ease-in-out infinite alternate;
   }

   .char,
   .jumpstart-char {
       display: inline-block;
       opacity: 0;
       color: inherit;
       animation: charFade 0.4s ease forwards;
   }
   
   .reveal,
   .jumpstart-text,
   .jumpstart-card {
       opacity: 1 !important;
   }

   /* Keyframes for the character entrance */
   @keyframes charFade {
       0% {
           opacity: 0;
           transform: translateY(10px);
       }

       100% {
           opacity: 1;
           transform: translateY(0);
       }
   }

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

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

   .jumpstart-card h3 {
       color: #003366;
       font-size: 2.5rem;
       font-weight: 800;
       margin-bottom: 20px;
   }

   .jumpstart-card p {
       font-size: 1.1rem;
       color: #64748b;
       /* Muted Slate */
       line-height: 1.8;
       max-width: 550px;
       margin-bottom: 35px;
   }

   .jumpstart-text .subtitle {
       display: inline-block;
       color: #2563eb;
       font-weight: 700;
       text-transform: uppercase;
       font-size: 0.85rem;
       letter-spacing: 1.5px;
       margin-bottom: 15px;
       animation: charEntrance 0.5s ease forwards;
   }

   /* Heading (Accelerate Your Journey) */
   .jumpstart-text h2 {
       font-size: 3rem;
       color: #003366;
       /* Deep Navy */
       font-weight: 800;
       line-height: 1.1;
       margin-bottom: 25px;
       letter-spacing: -0.02em;
       animation: charEntrance 0.5s ease forwards;
   }

   /* Paragraph Text */
.jumpstart-text p {
    /* Existing styles */
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
    font-weight: 400;

    /* --- FIX FOR WORD BREAKING --- */
    hyphens: none;            /* Prevents the browser from adding hyphens */
    word-break: keep-all;     /* Prevents breaking words in the middle */
    overflow-wrap: normal;    /* Standard wrapping behavior */
    text-align: left;         /* Optional: standard left alignment prevents gaps */
}

   .jumpstart-cta-btn {
       background-color: #004a8f;
       /* Lighter shade of #003366 */
       color: #ffffff;
       text-decoration: none;
       padding: 16px 35px;
       font-size: 1rem;
       font-weight: 700;
       border: none;
       border-radius: 8px;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       gap: 12px;
       /* Space between text and arrow */
       transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
       box-shadow: 0 10px 20px rgba(0, 74, 143, 0.15);
       margin-top: 10px;
   }

   .jumpstart-cta-btn i {
       font-size: 0.9rem;
       transition: transform 0.3s ease;
   }

   .jumpstart-cta-btn:hover {
       background-color: #003366;
       /* Your primary navy on hover */
       transform: translateY(-3px);
       box-shadow: 0 15px 30px rgba(0, 51, 102, 0.25);
   }

   /* Arrow animation on hover */
   .jumpstart-cta-btn:hover i {
       transform: translateX(5px);
   }

   .benefit-list {
       list-style: none;
       padding: 0;
       margin-top: 30px;
   }

   .benefit-list li {
       padding: 15px 0;
       border-bottom: 1px solid #f1f5f9;
       color: #001A33;
       font-weight: 600;
       display: flex;
       align-items: center;
       opacity: 0;
       transform: translateX(-20px) scale(0.95);
       transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .benefit-list li i {
       color: #2563eb;
       /* Blue checkmark */
       margin-right: 15px;
       font-size: 1.1rem;
   }

   .benefit-list li.show-item {
       opacity: 1;
       transform: translateX(0) scale(1);
   }

   .benefit-list li.show-item i {
       animation: iconSpin 0.8s ease forwards;
   }

   @keyframes iconSpin {
       from {
           transform: rotate(-180deg);
       }

       to {
           transform: rotate(0);
       }
   }

   .subtitle {
       color: #2563eb;
       text-transform: uppercase;
       font-weight: 700;
       letter-spacing: 1px;
   }

   @media (max-width: 992px) {
       .jumpstart-grid {
           grid-template-columns: 1fr;
           text-align: center;
       }
   }

   /* Modal Styling (Hidden by default) */
   .modal-overlay {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(5px);
       z-index: 1000;
       justify-content: center;
       align-items: center;
   }

   .modal-content {
       background: white;
       padding: 40px;
       border-radius: 10px;
       width: 90%;
       max-width: 400px;
       position: relative;
       animation: slideUp 0.4s ease;
   }

   @keyframes slideUp {
       from {
           transform: translateY(50px);
           opacity: 0;
       }

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

   .close-modal-btn {
       font-size: 32px;
       font-weight: 400;
       color: #64748b;
       cursor: pointer;
       line-height: 1;
       transition: all 0.2s ease;
       padding: 10px;
       /* Increases the clickable area */
   }

   .close-modal-btn:hover {
       color: #ef4444;
       /* Turns red on hover */
       transform: scale(1.1);
   }

   .close-btn {
       position: absolute;
       right: 20px;
       top: 10px;
       font-size: 28px;
       cursor: pointer;
   }

   /* --- Open Positions Section --- */
   .open-positions {
       padding: 80px 0;
       background: var(--bg-light);
   }

   .section-title {
       text-align: center;
       color: var(--navy-primary);
       font-size: 3rem;
       margin-bottom: 40px;
       font-weight: 800;
   }

   .section-title .char {
       display: inline-block;
       opacity: 0;
       filter: blur(8px);
       transform: translateY(15px);
       animation: titleCharIn 0.6s cubic-bezier(0.2, 0, 0.2, 1) forwards;
   }

   @keyframes titleCharIn {
       to {
           opacity: 1;
           filter: blur(0);
           transform: translateY(0);
       }
   }

   .slider-wrapper {
       position: relative;
       max-width: 1200px;
       margin: 0 auto;
   }

   /* --- Horizontal Grid --- */
   .career-cards-grid {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding: 20px 10px 60px 10px;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.career-cards-grid::-webkit-scrollbar {
    display: none;
}

/* Important: fixed card width for horizontal slider */
.job-card {
    flex: 0 0 300px;   /* Fixed width */
}

   /* Chrome/Safari */

   /* --- Unified Blue Slider UI --- */
   .custom-slider-ui {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 15px;
       margin-top: -20px;
       padding-bottom: 40px;
   }

   .slider-arrow {
       color: #003366;
       font-size: 1rem;
       cursor: pointer;
       transition: transform 0.3s, opacity 0.3s;
   }

   .slider-arrow:hover {
       opacity: 0.7;
       transform: rotate(-90deg) scale(1.2) !important;
   }

   .slider-track {
       width: 300px;
       height: 12px;
       background: var(--accent-light);
       border-radius: 20px;
       position: relative;
       overflow: hidden;
   }

   .slider-thumb {
       position: absolute;
       height: 100%;
       width: 40%;
       background: #003366;
       border-radius: 20px;
       left: 0;
       transition: left 0.1s ease-out;
       box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
   }

   /* --- Animated Job Card --- */
   .job-card {
       background: #ffffff;
       padding: 35px 25px;
       border-radius: 24px;
       border: 1px solid var(--border);
       text-align: center;
       opacity: 0;
       transform: translateY(40px);
       transition:
           opacity 0.8s ease,
           transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
           border-color 0.3s ease,
           /* Keep your existing hover transitions */
           box-shadow 0.3s ease;
   }

   .job-card:hover {
       background: #ffffff;
       border: 1px solid rgba(0, 51, 102, 0.05);
       position: relative;
       overflow: hidden;
       transform: translateY(-12px) scale(1.05) !important;
       box-shadow: 0 25px 50px rgba(0, 51, 102, 0.15);
       z-index: 10;
   }

   .job-card.active {
       opacity: 1;
       transform: translateY(0);
   }

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

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

   /* Orbit Icon Animation */
   .card-icon {
       width: 70px;
       height: 70px;
       background: #f0f7ff;
       color: #003366;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.6rem;
       margin: 0 auto 20px;
       position: relative;
       transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       /* Bouncy transition */
   }

   .card-icon::before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       border-radius: 50%;
       background: var(--accent-blue);
       opacity: 0;
       z-index: -1;
       transition: all 0.5s ease;
   }

   .job-card:hover .card-icon {
       transform: translateY(-5px) scale(1.1);
       background: #003366;
       color: white;
   }

   .job-card:hover .card-icon::before {
       animation: pulseRipple 1.5s infinite;
   }

   @keyframes pulseRipple {
       0% {
           transform: scale(1);
           opacity: 0.5;
       }

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

   .job-card:hover .card-icon::after {
       opacity: 1;
       animation: orbitSpin 1s linear infinite;
   }

   .job-card h3 {
       color: var(--navy-primary);
       font-size: 1.3rem;
       font-weight: 800;
       margin-bottom: 10px;
   }

   .job-card p {
       color: var(--text-muted);
       font-size: 0.95rem;
       margin-bottom: 25px;
       line-height: 1.5;
   }

   .apply-link-btn {
       width: 100%;
       max-width: 140px;
       background: #f8fafc;
       color: #003366;
       border: 1px solid var(--border);
       padding: 12px 0;
       border-radius: 12px;
       font-weight: 700;
       cursor: pointer;
       transition: 0.3s;
   }

   .job-card:hover .apply-link-btn {
       background: #003366;
       color: white;
       border-color: #003366;
   }

   /*      form section      */
   /* 1. The Full-Screen Overlay */
   .modal-overlay {
       display: none;
       /* Controlled by JS */
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(15, 23, 42, 0.8);
       /* Dark navy transparent bg */
       backdrop-filter: blur(8px);
       /* Modern blur effect */
       z-index: 9999;
       justify-content: center;
       align-items: center;
       padding: 20px;
   }

   /* Add these to your existing modal CSS */

   .modal-content select {
       padding: 12px 16px;
       border: 1px solid #e2e8f0;
       border-radius: 8px;
       background-color: #fff;
       color: #475569;
       font-size: 1rem;
       cursor: pointer;
   }

   .file-upload-wrapper {
       display: flex;
       flex-direction: column;
       gap: 8px;
       margin-top: 5px;
   }

   .file-upload-wrapper label {
       font-size: 0.85rem;
       font-weight: 600;
       color: #64748b;
   }

   .file-upload-wrapper input[type="file"] {
       font-size: 0.9rem;
       padding: 8px;
       border: 1px dashed #cbd5e1;
       background: #f8fafc;
       border-radius: 8px;
       cursor: pointer;
   }

   .file-upload-wrapper input[type="file"]::file-selector-button {
       background: #e2e8f0;
       border: none;
       padding: 6px 12px;
       border-radius: 4px;
       margin-right: 10px;
       cursor: pointer;
       transition: 0.2s;
   }

   .file-upload-wrapper input[type="file"]::file-selector-button:hover {
       background: #cbd5e1;
   }

   /* 2. The Form Card */
   .modal-content {
       background: #ffffff;
       padding: 40px;
       border-radius: 16px;
       width: 100%;
       max-width: 450px;
       position: relative;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
       animation: modalSlideIn 0.3s ease-out;
   }

   @keyframes modalSlideIn {
       from {
           transform: scale(0.9);
           opacity: 0;
       }

       to {
           transform: scale(1);
           opacity: 1;
       }
   }

   /* 3. Title and Close Button */
   .modal-content h2 {
       color: #1e293b;
       margin-bottom: 25px;
       font-size: 1.5rem;
       font-weight: 700;
       text-align: center;
   }

   .close-btn {
       position: absolute;
       right: 20px;
       top: 15px;
       font-size: 24px;
       color: #64748b;
       cursor: pointer;
       transition: color 0.2s;
   }

   .close-btn:hover {
       color: #ef4444;
   }

   /* 4. Form Inputs */
   .modal-content form {
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .modal-content input,
   .modal-content textarea {
       padding: 12px 16px;
       border: 1px solid #e2e8f0;
       border-radius: 8px;
       font-size: 1rem;
       outline: none;
       transition: all 0.2s;
   }

   .modal-content input:focus,
   .modal-content textarea:focus {
       border-color: #2563eb;
       box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
   }

   .modal-content textarea {
       height: 120px;
       resize: none;
       font-family: inherit;
   }

   /* 5. Submit Button */
   .submit-btn {
       background: #2563eb;
       color: white;
       padding: 14px;
       border: none;
       border-radius: 8px;
       font-weight: 600;
       font-size: 1rem;
       cursor: pointer;
       transition: background 0.2s;
       margin-top: 10px;
   }

   .submit-btn:hover {
       background: #1d4ed8;
   }

   /* --- Modals --- */
   /* Wide Modal for Details */
   /* Premium Modal Overlay */
   .modal {
       display: none;
       /* Add this line to hide it by default */
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(10, 15, 30, 0.85);
       backdrop-filter: blur(12px);
       z-index: 10001;
       /* High z-index to stay on top */
       overflow-y: auto;
   }

   .modal-content-premium {
       background: #ffffff;
       width: 95%;
       max-width: 900px;
       margin: 40px auto;
       border-radius: 24px;
       overflow: hidden;
       box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.4);
       animation: slideInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   }

   @keyframes slideInUp {
       from {
           transform: translateY(100px);
           opacity: 0;
       }

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

   /* Sticky Header */
   .modal-header-sticky {
       padding: 40px 50px 25px;
       background: #f8fafc;
       border-bottom: 1px solid #e2e8f0;
       position: sticky;
       top: 0;
   }

   .header-main {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .header-main h2 {
       font-size: 2.2rem;
       color: #003366;
       font-weight: 800;
       letter-spacing: -0.02em;
   }

   .job-pills {
       display: flex;
       gap: 15px;
       margin-top: 15px;
   }

   .job-pills span {
       background: #eff6ff;
       color: #2563eb;
       padding: 6px 14px;
       border-radius: 100px;
       font-size: 0.85rem;
       font-weight: 600;
   }

   /* Body Content */
   .modal-body {
       padding: 40px 50px;
       max-height: 60vh;
       overflow-y: auto;
   }

   .details-section {
       margin-bottom: 40px;
   }

   .details-section h3 {
       display: flex;
       align-items: center;
       font-size: 1.25rem;
       color: #1e293b;
       margin-bottom: 18px;
   }

   .accent-bar {
       width: 4px;
       height: 20px;
       background: #2563eb;
       margin-right: 12px;
       display: inline-block;
       border-radius: 2px;
   }

   .details-section p,
   .details-section li {
       color: #475569;
       line-height: 1.8;
       font-size: 1.05rem;
   }

   /* Footer Section */
   .modal-footer-premium {
       padding: 30px 50px;
       background: #f1f5f9;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .modal-footer-premium p{
      color: #003366;
   }
   .apply-now-inner {
       background: #2563eb;
       color: white;
       border: none;
       padding: 16px 40px;
       border-radius: 12px;
       font-weight: 700;
       cursor: pointer;
       transition: 0.3s;
   }

   .apply-now-inner:hover {
       background: #1d4ed8;
       transform: translateY(-2px);
       box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
   }

   @media (max-width: 768px) {
       .job-card {
        flex: 0 0 85%;
    }

       .slider-track {
           width: 200px;
       }
   }

   /* 1. Styling the 'About' Paragraph */
   #aboutRoleText {
       font-size: 1.1rem;
       color: #475569;
       /* Professional Slate Gray */
       line-height: 1.8;
       margin-bottom: 30px;
       display: block;
   }

   /* 2. Styling the Lists (Responsibilities & Requirements) */
   #responsibilitiesList,
   #requirementsList {
       list-style: none;
       /* Removes default black dots */
       padding: 0;
       margin: 0;
   }

   /* 3. Individual List Items Styling */
   #responsibilitiesList li,
   #requirementsList li {
       position: relative;
       padding-left: 30px;
       margin-bottom: 15px;
       color: #003366;
       /* Dark Navy for readability */
       font-size: 1.05rem;
       line-height: 1.6;
       transition: transform 0.2s ease;
       cursor: pointer;
   }

   /* 4. Adding Premium Custom Icons (Checkmarks) */
   #responsibilitiesList li::before,
   #requirementsList li::before {
       content: "\f00c";
       /* FontAwesome Checkmark code */
       font-family: "Font Awesome 6 Free";
       font-weight: 900;
       position: absolute;
       left: 0;
       top: 2px;
       color: #2563eb;
       /* Your brand blue */
       font-size: 0.9rem;
   }

   /* 5. Subtle Hover Effect for List Items */
   #responsibilitiesList li:hover,
   #requirementsList li:hover {
       transform: translateX(8px);
       color: #2563eb;
   }

   /* 6. Formatting the Section Headers inside the Modal Body */
   .details-section h3 {
       font-size: 1.25rem;
       font-weight: 700;
       color: #003366;
       margin-bottom: 15px;
       display: flex;
       align-items: center;
   }

   /* --- New Animations --- */




   /* 2. Character Entrance */
   @keyframes charFade {
       0% {
           opacity: 0;
           transform: translateY(10px) rotateX(-40deg);
       }

       100% {
           opacity: 1;
           transform: translateY(0) rotateX(0);
       }
   }

   .char,
   .jumpstart-char {
       display: inline-block;
       opacity: 0;
       color: inherit;
       /* Keeps Navy for Jumpstart and White for Hero */
       animation: charFade 0.4s ease forwards;
   }

   /* Character Styling */
   .char {
       display: inline-block;
       opacity: 0;
       color: inherit;
       animation: charFade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
   }

   /* --- MOBILE RESPONSIVENESS --- */

   /* Tablet & Mobile (Below 992px) */
   @media (max-width: 992px) {
       .jumpstart-grid {
           grid-template-columns: 1fr;
           text-align: center;
           gap: 40px;
       }

       .jumpstart-text h2 {
           font-size: 2.8rem;
       }
    
       .jumpstart-card {
           margin: 0 auto;
           max-width: 100%;
       }

       .benefit-list li {
           justify-content: center;
       }
   }

   /* Mobile Devices (Below 768px) */
   @media (max-width: 768px) {

       /* Hero Section */
       .container-career h1 {
           font-size: 2.5rem;
           /* Scale down heading */
           line-height: 1.2;
       }

       .container-career p {
           font-size: 1.1rem;
           padding: 0 10px;
       }

       .career-hero {
           height: 70vh;
           /* Slightly shorter on mobile */
       }

       /* Jumpstart Section */
       .internship-jumpstart {
           padding: 60px 0;
       }

       .jumpstart-text h2 {
           font-size: 2.2rem;
       }

       /* Open Positions Grid */
       .section-title {
           font-size: 2.2rem;
           margin-bottom: 20px;
       }

       .career-cards-grid {
           grid-auto-columns: 85%;
           /* Show 85% of a card so the next one is visible */
           gap: 15px;
           padding-bottom: 40px;
       }

       .custom-slider-ui {
           display: none;
           /* Hide manual slider arrows on mobile (use touch swipe) */
       }

       /* Modals (Premium & Form) */
       .modal-content-premium,
       .modal-content {
           width: 95%;
           margin: 20px auto;
           padding: 20px;
       }

       .modal-header-sticky {
           padding: 20px;
       }

       .header-main h2 {
           font-size: 1.5rem;
       }

       .modal-body {
           padding: 20px;
       }

       .job-pills {
           flex-wrap: wrap;
           /* Stack tags on small screens */
           gap: 8px;
       }

       .modal-footer-premium {
           flex-direction: column;
           gap: 15px;
           text-align: center;
           padding: 20px;
       }

       .apply-now-inner {
           width: 100%;
       }
   }

   /* Very Small Screen (Below 480px) */
   /* --- Ultra-Mobile Font Adjustments (Max-width: 480px) --- */
   @media (max-width: 480px) {

       /* 1. Hero Section */
       .container-career h1 {
           font-size: 2.1rem !important;
           /* Scale down from 5.3rem */
           line-height: 1.2;
           letter-spacing: -0.01em;
       }

       .container-career p {
           font-size: 1.05rem !important;
           /* Easy to read paragraph */
           line-height: 1.5;
           margin-bottom: 30px;
       }

       .hero-apply-btn {
           padding: 12px 24px;
           font-size: 0.95rem;
       }

       /* 2. Jumpstart Section (Left Text) */
       .jumpstart-text h2 {
           font-size: 1.9rem !important;
           /* Scale down from 4rem */
           margin-bottom: 15px;
       }

       .jumpstart-text p {
           font-size: 1rem;
           line-height: 1.6;
       }

       .jumpstart-text .subtitle {
           font-size: 0.75rem;
           letter-spacing: 1px;
       }

       /* 3. Jumpstart Card (Right Card) */
       .jumpstart-card h3 {
           font-size: 1.5rem !important;
           /* Scale down from 2.4rem */
           margin-bottom: 15px;
       }

       .jumpstart-card p {
           font-size: 0.95rem;
           line-height: 1.5;
       }

       .benefit-list li {
           font-size: 0.9rem;
           padding: 10px 0;
       }

       /* 4. Open Positions Section */
       .section-title {
           font-size: 1.8rem !important;
           /* Scale down from 3rem */
           margin-bottom: 25px;
       }

       .job-card h3 {
           font-size: 1.2rem;
       }

       .job-card p {
           font-size: 0.85rem;
       }

       /* 5. Modal Contents */
       .header-main h2 {
           font-size: 1.3rem !important;
           /* Dynamic Job Title in Modal */
       }

       .details-section h3 {
           font-size: 1.1rem;
       }

       .details-section p,
       .details-section li {
           font-size: 0.95rem;
       }

       .job-pills span {
           font-size: 0.7rem;
           padding: 4px 10px;
       }
   }