/* Custom Font Declarations for Home Page */
@font-face {
    font-family: 'Nixie One';
    src: url('https://static.igem.wiki/teams/5836/fonts/nixie-one/nixieone-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Blinker';
    src: url('https://static.igem.wiki/teams/5836/fonts/blinker/blinker-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NotoSans Telugu Condensed';
    src: url('https://static.igem.wiki/teams/5836/fonts/notosans/notosanstelugu-condensed-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Add at the top of your CSS file */
@font-face {
    font-family: 'Quantico';
    src: url('https://static.igem.wiki/teams/5836/fonts/quantico/quantico-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* SPECIFIC font application - only to home page sections */
.dual-video-hero,
.sepsis-section,
.problem-detail-section,
.sepsis-today-section,
#team-section {
    font-family: 'Nixie One', serif;
}

/* Home page headings - be more specific */
.sepsis-title,
.problem-detail-title,
.sepsis-today-title,
.solution-title,
.solution-name,
#team-section h1 {
    font-family: 'Blinker', sans-serif !important;
    font-weight: bold !important;
}

/* Apply Quantico font to the digital counter */
.digital-counter {
    font-family: 'Quantico', monospace, sans-serif !important;
    font-size: 6.5rem;
    color: #6e0d25;
    font-weight: 900;
    background: none;
    padding: 0;
    border: none;
    text-shadow: none;
    letter-spacing: 0.1em;
    position: relative;
}

/* SPECIFIC FONT OVERRIDES FOR SECTIONS 2 AND 3 */
/* Section 2: "The problem we tackled" - Use Nixie One */
.problem-title {
    font-family: 'Nixie One', serif !important;
    font-weight: normal !important;
}

/* Section 3: "WHAT IS SEPSIS?" - Use Blinker Bold */
.sepsis-title {
    font-family: 'Blinker', sans-serif !important;
    font-weight: bold !important;
}

/* Override containers only for specific home sections - NOT body */
.dual-video-hero .container,
.sepsis-section .container,
.problem-detail-section .container {
    max-width: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* SECTION 1: HERO / LOGO */
.hero-section {
  height: 100vh;
  margin: 0;
  padding-top: 0; /* Remove any top padding */
  margin-top: -90px; /* Negative margin to account for navbar height */
  padding-top: 90px; /* Add padding to push content below navbar */
  display: flex; /* Add flexbox for proper centering */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */

  /* pointer position (same as before) */
  --x: calc(var(--posX, 0) * 1px);
  --y: calc(var(--posY, 0) * 1px);

  /* 🔴 6 stacked gradients – now all in black / dark-red tones */
  background-image:
    /* broad diagonal wash */
    linear-gradient(115deg, rgb(60 0 0), rgb(0 0 0)),

    /* top-centre ember that chases the cursor */
    radial-gradient( 90% 100%  at calc( 50% + var(--x)) calc(  0% + var(--y)),
                    rgb(140  0  0 / 0.80), rgb(  0  0  0)),

    /* top-right glow */
    radial-gradient(100% 100%  at calc( 80% - var(--x)) calc(  0% - var(--y)),
                    rgb(200  0  0 / 0.60), rgb(  0  0  0)),

    /* sweeping slash from the right */
    radial-gradient(150% 210%  at calc(100% + var(--x)) calc(  0% + var(--y)),
                    rgb(120  0  0 / 0.50), rgb(  0  0  0)),

    /* mid-right hot-spot */
    radial-gradient(100% 100%  at calc(100% - var(--x)) calc( 30% - var(--y)),
                    rgb(255 20 20 / 0.70), rgb(  0  0  0)),

    /* subtle diagonal depth */
    linear-gradient( 60deg, rgb(40 0 0), rgb(0 0 0));

  /* same blend recipe – keeps the “smoky” feel */
  background-blend-mode: overlay, overlay, difference, difference, difference, normal;
}

.hero-section img {
    width: 60%;
    height: auto;
}


/* SECTION 2: PROBLEM STATEMENT */
.problem-section {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.problem-section .container-fluid {
    position: relative;
    z-index: 1;
    text-align: center;
}

.problem-title {
    font-family: 'Nixie One', serif;
    font-size: 6.5rem;
    color: #ffffff;
    margin-bottom: 40px;
    line-height: 1.2;
    font-weight: normal;
}

.problem-highlight {
    font-family: 'Blinker', sans-serif;
    font-size: 9rem;
    color: #d7af6b;
    font-weight: bold;
    margin: 0;
    letter-spacing: 3px;
}


/* SECTION 3: WHAT IS SEPSIS? */
.sepsis-section {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 40px 0 5px 0; /* Reduced bottom padding from 20px to 5px */
    
    /* Dark blue to lighter blue gradient background */
    background: linear-gradient(to bottom, #071626 0%, #102845 100%);
    color: #F0E7CE;
    overflow: hidden;
}

.sepsis-section .container {
    max-width: none;
    width: 100%;
    padding: 0 60px;
}

.sepsis-section .row {
    margin: 0;
}

/* Typography for Section 3 - WAY BIGGER */
.sepsis-title {
    font-family: 'Blinker', sans-serif !important;
    font-size: 6.2rem;
    font-weight: bold !important;
    line-height: 1.1;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    text-transform: uppercase;
    color: #d7af6b;
    margin-top: 0;
}

.sepsis-description {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    margin-bottom: 8rem;
    color: #ffffff;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.sepsis-details {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    line-height: 1.4;
    color: #ffffff;
    text-align: right;
    margin-top: -10rem; /* Negative margin to bring text almost inside the bacterio image */
    margin-bottom: 0; /* Remove bottom margin to eliminate gap */
    letter-spacing: 0.03em;
    max-width: 60%; /* Limit width for alignment and wrap */
    margin-left: auto;
    margin-right: 0;
    word-break: keep-all; /* Keep words together */
    overflow-wrap: break-word; /* Only break at word boundaries */
    hyphens: none; /* Disable hyphenation */
}

/* Letter-by-letter animation keyframes */
@keyframes letter-glow {
    0%   { opacity: 0; text-shadow: 0 0 1px rgba(255,255,255,0.10); }
    66%  { opacity: 1; text-shadow: 0 0 12px rgba(255,255,255,0.50); }
    100% { opacity: 0.85; text-shadow: 0 0 8px rgba(255,255,255,0); }
}

/* Default state for characters - hidden until animated with spacing */
.char-span {
    display: inline-block;
    opacity: 0;
    /* Remove margin-right to fix text selection gaps */
}

/* Word grouping to prevent word breaking */
.word-span {
    display: inline-block;
    white-space: nowrap; /* Keep words together */
    letter-spacing: 0.05em; /* Move letter spacing to word level for better selection */
}

/* Special handling for space characters */
.space-char {
    width: 0.3em; /* Ensure spaces have proper width */
    margin-right: 0; /* No extra margin for spaces */
}

/* Animation class applied via JavaScript */
.animate-char {
    animation: letter-glow 1.2s ease both; /* Slower: increased from 0.7s to 1.2s */
}

/* GIF animation - WAY BIGGER */
.virus-animation {
    max-width: 550px;
    animation: gif-pop 0.9s 0.6s ease both, float-up-down 3s ease-in-out infinite;
}

@keyframes gif-pop {
    0%   { opacity: 0; transform: scale(0.8) translateY(30px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes float-up-down {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}


/* ===== SECTION 3: PATIENT SECTION ===== */
.patient-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 80px 0;
    
    /* Blue gradient transitioning from section 2 ending color to lighter blue */
    background: linear-gradient(to bottom, #102845 0%, #193451 100%);
    color: #ffffff;
    overflow: hidden;
}

.patient-section .container {
    max-width: none;
    width: 100%;
    padding: 0 60px;
}

/* Top text styling */
.patient-top-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
    margin-bottom: -50px; /* Reduced from 60px to bring closer to GIF */
    font-weight: normal;
}

.patient-top-text p {
    margin: 0;
}

/* Right text styling - bigger width and better formatting */
.patient-right-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    line-height: 1.4;
    color: #ffffff;
    text-align: center;
    padding-left: 10px;
    margin-left: -10px; /* Pull the right text even closer to GIF */
    display: flex;
    align-items: center;
    min-height: 400px;
}

.patient-right-text p {
    margin: 0;
    font-weight: normal;
    max-width: 100%;
}

/* Image container and styling - EVEN BIGGER GIF */
.patient-image-container {
    position: relative;
    padding: 20px 0;
    text-align: left;
    margin-left: -40px; /* Push container more left */
}

.patient-organs-gif {
    max-width: 100%; /* Allow it to be bigger than container */
    width: 100%; /* Force it to be 120% of container width */
    height: auto;
    min-height: 800px; /* Even bigger minimum height */
    max-height: 1000px; /* Even bigger maximum height */
    object-fit: contain;
    background: transparent;
    margin-left: -210px; /* Push the gif itself even more left */
    transform: scale(0.9); /* Scale it up by 10% */
}

/* Bottom description styling - SMALLER */
.patient-description {
    margin-top: -70px; /* Reduced from 60px to bring closer to GIF */
    padding: 0 20px;
    text-align: left; /* Left-aligned instead of center */
}

.patient-description p {
    font-family: 'Nixie One', serif;
    font-size: 1.8rem;
    color: #ffffff;
    margin: 0;
    font-style: italic;
    opacity: 0.8;
}

/* ===== RESPONSIVE SECTION 1: DUAL VIDEO HERO ===== */

/* iPhone 14 Pro Max: 430x932 */
@media screen and (max-width: 431px) {
    /* DUAL VIDEO HERO RESPONSIVE - TEXT ONLY */
    .problem-title {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }
    
    .problem-highlight {
        font-size: 3.5rem !important;
        letter-spacing: 1px !important;
        margin: 0 !important;
    }
    
    /* First video (logo) - tiny/smaller transform */
    #video-1 .hero-video {
        object-fit: cover !important;
        transform: scale(1.75) !important;
    }
    
    /* Second video (problem statement) - heavy stretch to eliminate black bars */
    #video-2 .hero-video {
        object-fit: cover !important;
        width: 150% !important;
        height: 200% !important;
        margin: -95% 0 0 -25% !important;
        transform: scale(2.1) !important;
    }
    
    .iframe-container {
        overflow: hidden !important;
    }
    .arrow-left {
    left: 5px !important;
    }
.arrow-right {
    right: 2px !important; /* Position next to accessibility button */
}
}

/* ===== RESPONSIVE SECTION 3: WHAT IS SEPSIS & PATIENT SECTION ===== */

/* iPhone 14 Pro Max: 430x932 */
@media screen and (max-width: 431px) {
    /* SEPSIS SECTION RESPONSIVE - Stretch blue background to overlay hero section */
.sepsis-section {
        padding: 60px 0 5px 0; /* Increased top padding for content spacing */
        margin-top: -180px; /* Pull section up to overlay hero section */
        position: relative;
        z-index: 2; /* Ensure it appears above hero section */
    }
    
    .sepsis-section .container {
        padding: 0 20px;
    }
    
    .sepsis-title {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        letter-spacing: 0.05em;
    }
    
    .sepsis-section .sepsis-description {
        font-size: 1.2rem !important;
        margin-bottom: -3.5rem !important;
        line-height: 1.2 !important;
    }
    
    .sepsis-section .sepsis-details {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
        margin-top: -8rem !important;
        margin-bottom: 0 !important;
        max-width: 85% !important;
        text-align: right !important;
    }
    
    .virus-animation {
        max-width: 280px;
    }
    
    /* PATIENT SECTION RESPONSIVE */
    .patient-section {
        padding: 30px 0;
    }
    
    .patient-section .container {
        padding: 0 20px;
    }
    
    .patient-top-text {
        font-size: 1.2rem;
        margin-bottom: -20px;
        text-align: center;
    }
    
    .patient-right-text {
        display: none; /* Hide from original position */
    }
    
    .patient-image-container {
        margin-left: 0;
        text-align: center;
        padding: 10px 0;
    }
    
    .patient-organs-gif {
        max-width: 100%;
        width: 100%;
        min-height: 300px;
        max-height: 400px;
        margin-left: 0;
        transform: scale(1);
    }
    
    .patient-description {
        margin-top: -30px;
        padding: 0 10px;
        text-align: center;
    }
    
    .patient-description p {
        font-size: 1rem;
    }
    
    /* Add the right text content after description */
    .patient-description::after {
        content: "A dysregulated response leads to damage in body tissues and organs and even death.";
        display: block;
        font-family: 'Nixie One', serif;
        font-size: 1.2rem;
        color: #ffffff;
        text-align: center;
        margin-top: 20px;
        line-height: 1.4;
        font-style: normal;
        opacity: 1;
    }
}

/* Nest Hub: 1024x600 */
@media screen and (min-width: 768px) and (max-width: 3839.98px) {
    /* SEPSIS SECTION RESPONSIVE */
    .sepsis-section {
        padding: 30px 0 5px 0;
        margin-top: -10px; /* Pull section up to overlay hero section */
    }
    
    .sepsis-section .container {
        padding: 0 40px;
    }
    
    .sepsis-title {
        font-size: 4.2rem;
        margin-bottom: 1.5rem;
        letter-spacing: 0.08em;
    }
    
    .sepsis-section .sepsis-description {
        font-size: 1.8rem !important;
        margin-bottom: 5rem !important;
        line-height: 1.25 !important;
    }
    
    .sepsis-section .sepsis-details {
        font-size: 1.8rem !important;
        line-height: 1.35 !important;
        margin-top: -6rem !important;
        margin-bottom: 0 !important;
        max-width: 57% !important;
        text-align: right !important;
    }
    
    .virus-animation {
        max-width: 360px;
    }
    
    /* PATIENT SECTION RESPONSIVE */
    .patient-section {
        padding: 50px 0;
    }
    
    .patient-section .container {
        padding: 0 40px;
    }
    
    .patient-top-text {
        font-size: 1.8rem;
        margin-bottom: -30px;
        text-align: left;
    }
    
    .patient-right-text {
        font-size: 1.8rem;
        text-align: center;
        padding-left: 5px;
        margin-left: -5px;
        min-height: 300px;
    }
    
    .patient-image-container {
        margin-left: -20px;
        text-align: left;
        padding: 15px 0;
    }
    
    .patient-organs-gif {
        max-width: 100%;
        width: 100%;
        min-height: 600px;
        max-height: 700px;
        margin-left: -140px;
        transform: scale(1.0    5);
    }
    

    .patient-description {
        margin-top: -90px;
        padding: 0 15px;
        text-align: left;
    }
    
    .patient-description p {
        font-size: 1.2rem;
        max-width: 40%;
        line-height: 1.3;
        word-wrap: break-word;
    }
}


/* SECTION 5: THE PROBLEM DETAIL */
.problem-detail-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 60px 0;
    
    /* Start with dark blue (where Section 4 ends) and go to lighter blue for smooth transition */
    background: linear-gradient(to bottom, #193451 0%,  #2F639A 80%);
    color: #fff;
    overflow: hidden;
}

.problem-detail-section .container {
    max-width: none;
    width: 100%;
    padding: 0 60px;
}

/* Main title */
.problem-detail-title {
    font-family: 'Blinker', sans-serif;
    font-size: 6.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #d7af6b;
    margin-bottom: 3rem;
    margin-top: 0;
    text-align: left;
    letter-spacing: 0.1em;
}

/* Text content wrapper */
.problem-text-content {
    max-width: 2000px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 4rem;
}

/* Main text paragraphs */
.problem-intro, .problem-covid {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
}

.problem-intro strong, .problem-covid strong {
    color: #d7af6b;
    font-weight: 700;
    /* Fixed width containers for animated numbers to prevent layout jumping */
    display: inline-block;
    min-width: auto; /* Remove fixed width */
    text-align: left; /* Left align to reduce spacing */
    margin-right: 0.1em; /* Add small space after each strong element */
}

/* Highlight section */
.problem-highlight-section {
    margin: 3rem 0;
    padding: 9rem 0;
}

.problem-highlight-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem; /* Reduced from 4rem (20% smaller) */
    color: #fff;
    margin-bottom: 2rem;
    font-style: italic;
}

/* Death counter section */
.death-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
}

.counter-text {
    font-family: 'Nixie One', serif;
    text-align: left;
    margin: 0;
}

.counter-description {
    font-size: 3.2rem;
    color: #d7af6b;
    font-style: italic;
}

.counter-number {
    font-size: 3.2rem;
    color: #d7af6b;
    font-weight: 700;
}

/* Digital counter - realistic clock style */
.digital-counter {
    font-family: "monospace", "Lucida Console", monospace;
    font-size: 6.5rem;
    color: #99141E;
    font-weight: 900;
    background: none;
    padding: 0;
    border: none;
    text-shadow: none;
    letter-spacing: 0.1em;
    position: relative;
}

/* Pie Chart Image - Centered and Big */
.pie-chart-container {
    margin: 60px 0;
    text-align: center;
    width: 100%;
}

.pie-chart-image {
    width: 100%;
    max-width: 1300px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* Statistics Images Section - One below each other */
.statistics-images-section {
    margin-top: 60px;
    margin-bottom: 60px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.stat-item {
    text-align: center;
    max-width: 800px;
    width: 100%;
    position: relative; /* Make container relative for absolute positioning */
}

/* Style for items with images (first two statistics) */
.stat-item:nth-child(1),
.stat-item:nth-child(2) {
    position: relative;
}

/* Style for the third item (number only) */
.stat-item:nth-child(3) {
    position: static; /* Reset positioning for third item */
}

.stat-image-individual {
    width: 100%;
    max-width: 1000px; /* Increased from 600px to 800px - bigger images */
    height: auto;
    display: block;
    margin: 0 auto; /* Remove bottom margin completely */
    object-fit: contain;
}

/* Huge number styling for the third statistic */
.stat-number-huge {
    font-family: 'Nixie One', sans-serif;
    font-size: 8rem; /* Huge size */
    font-weight: bold;
    color: #99141e; /* Exact color as requested */
    text-align: center;
    margin: -50px auto 20px auto; /* Increased top margin from 0 to 40px to push down */
    line-height: 1;
}

/* Image styling for the 261000 SVG */
.stat-number-image {
    height: 28rem; /* Increased from 8rem to make it bigger */
    width: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center the image */
}

/* Text overlay for first statistic */
.stat-item:nth-child(1) .stat-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    /* Position text over the image */
    position: absolute;
    bottom: 1%; /* Position near bottom of image */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: 90%; /* Use most of the container width */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add shadow for readability */
}

/* Text overlay for second statistic - different positioning for babies image */
.stat-item:nth-child(2) .stat-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    margin: 5px 0 0 0; /* Add top margin to push text below image */
    line-height: 1.4;
    text-align: center;
    /* Remove absolute positioning - let text flow normally below image */
    position: static;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add shadow for readability */
}

/* Normal text styling for third statistic (not overlaid) */
.stat-item:nth-child(3) .stat-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    margin: 0;
    margin-top: -10rem; /* Reduce gap between image and text */
    line-height: 1.4;
    text-align: center;
    /* Normal positioning - no overlay */
    position: static;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add shadow for readability */
}

/* Final image at the end of THE PROBLEM section */
.problem-final-image-container {
    margin: 80px 0 -125px 0; /* Back to original positioning */
    text-align: center;
    width: 100vw; /* Full viewport width */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Center the container */
}

.problem-final-image {
    width: 100%; /* Full width of container */
    max-width: none; /* Remove max-width constraint */
    height: auto;
    display: block;
    margin: 0;
    clip-path: inset(42% 0 0 0); /* Crop/hide the top 25% of the image */
}


/* Download image at the bottom of section 5 */
.download-image-container {
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 0;
    text-align: center;
}

.download-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* ===== RESPONSIVE SECTION 5: THE PROBLEM DETAIL ===== */

/* iPhone 14 Pro Max: 430x932 */
@media screen and (max-width: 431px) {
    /* PROBLEM DETAIL SECTION RESPONSIVE */
    .problem-detail-section {
        padding: 30px 0;
    }
    
    .problem-detail-section .container {
        padding: 0 20px;
    }
    
    .problem-detail-title {
        font-size: 2.5rem;
        margin-bottom: 2rem;
        letter-spacing: 0.05em;
    }
    
    .problem-text-content {
        margin-bottom: 2rem;
    }
    
    .problem-detail-section .problem-intro, 
    .problem-detail-section .problem-covid {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .problem-highlight-section {
        margin: 2rem 0;
        padding: 4rem 0;
    }
    
    .problem-detail-section .problem-highlight-text {
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .death-counter {
        flex-direction: column;
        gap: 1.5rem;
        margin: 1.5rem 0;
    }
    
    .problem-detail-section .counter-description, 
    .problem-detail-section .counter-number {
        font-size: 1.2rem !important;
    }
    
    .digital-counter {
        font-size: 3rem;
    }
    
    .pie-chart-container {
        margin: 30px 0;
    }
    
    .pie-chart-image {
        max-width: 100%;
    }
    
    .statistics-images-section {
        margin: 30px 0;
        gap: 20px;
    }
    
    .stat-image-individual {
        max-width: 100%;
    }
    
    .stat-item:nth-child(1) .stat-text,
    .stat-item:nth-child(2) .stat-text,
    .stat-item:nth-child(3) .stat-text {
        font-size: 1.2rem !important;
    }
    
    /* Adjust first statistic text positioning - closer to people image */
    .stat-item:nth-child(1) .stat-text {
        position: absolute;
        bottom: 5% !important; /* Moved closer to image - increased from 1% */
    }
    
    /* Adjust second statistic text positioning - further down from 261000 */
    .stat-item:nth-child(2) .stat-text {
        margin-top: 25px !important; /* Increased spacing to avoid overlap */
    }
    
    /* Adjust third statistic text positioning - further down from 261000 */
    .stat-item:nth-child(3) .stat-text {
        margin-top: -50px !important; /* Increased spacing to avoid overlap with red 261000 number */
    }
    
    .stat-number-image {
        height: 11rem;
        margin-top: 25px !important; /* Increased spacing to avoid overlap with red 261000 number */

    }
    
    .problem-final-image-container {
        margin: 40px 0 -90px 0;
    }
}

/* Nest Hub: 800-1280x900 */
@media screen and (min-width: 768px) and (max-width: 3839.98px){
    /* PROBLEM DETAIL SECTION RESPONSIVE */
    .problem-detail-section {
        padding: 40px 0;
    }
    
    .problem-detail-section .container {
        padding: 0 40px;
    }
    
    .problem-detail-title {
        font-size: 4.2rem;
        margin-bottom: 2.5rem;
        letter-spacing: 0.08em;
    }
    
    .problem-text-content {
        margin-bottom: 3rem;
    }
    
    .problem-detail-section .problem-intro, 
    .problem-detail-section .problem-covid {
        font-size: 1.8rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .problem-highlight-section {
        margin: 2.5rem 0;
        padding: 6rem 0;
    }
    
    .problem-detail-section .problem-highlight-text {
        font-size: 1.8rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .death-counter {
        gap: 2rem;
        margin: 1.5rem 0;
    }
    
    .problem-detail-section .counter-description, 
    .problem-detail-section .counter-number {
        font-size: 1.8rem !important;
    }
    
    .digital-counter {
        font-size: 4.5rem;
    }
    
    .pie-chart-container {
        margin: 40px 0;
    }
    
    .pie-chart-image {
        max-width: 900px;
    }
    
    .statistics-images-section {
        margin: 40px 0;
        gap: 30px;
    }
    
    .stat-image-individual {
        max-width: 700px;
    }
    
    .stat-item:nth-child(1) .stat-text,
    .stat-item:nth-child(2) .stat-text,
    .stat-item:nth-child(3) .stat-text {
        font-size: 1.8rem !important;
    }
    
    /* Adjust first statistic text positioning - closer to people image */
    .stat-item:nth-child(1) .stat-text {
        position: absolute;
        bottom: 18% !important; /* Moved closer to image - increased from 1% */
    }
    
    /* Adjust second statistic text positioning - further down from 261000 */
    .stat-item:nth-child(2) .stat-text {
        margin-top: 25px !important; /* Increased spacing to avoid overlap */
    }
    
    /* Adjust third statistic text positioning - further down from 261000 */
    .stat-item:nth-child(3) .stat-text {
        margin-top: -100px !important; /* Increased spacing to avoid overlap with red 261000 number */
    }
    
    .stat-number-image {
        height: 18rem;
        margin-top: 55px !important; /* Increased spacing to avoid overlap with red 261000 number */

    }
    
    .problem-final-image-container {
        margin: 60px 0 -90px 0;
    }
}


/* ===== RESPONSIVE SECTIONS 6 & 6.5: OUR MISSION & SEPSIS TODAY ===== */

/* iPhone 14 Pro Max: 430x932 */
@media screen and (max-width: 431px) {
    /* SECTION 6: OUR MISSION RESPONSIVE */
    .mission-hero-image {
        height: 40vh;
    }
    
    /* SECTION 6.5: SEPSIS TODAY RESPONSIVE */
    .sepsis-today-section {
        padding: 40px 0;
    }
    
    .sepsis-header-content {
        margin-bottom: 30px;
    }
    
    .sepsis-today-title {
        font-size: 2.5rem !important;
        letter-spacing: 0.05em !important;
    }
    
    .sepsis-today-subtitle {
        font-size: 2.5rem;
        letter-spacing: 0.05em;
    }
    
    .sepsis-today-section .sepsis-description-text {
        font-size: 1.2rem !important;
        margin: 20px auto 0 auto;
        padding: 20px 20px;
        max-width: 95%;
    }
    
    .virus-content {
        margin: 30px 0;
    }
    
    .virus-gif {
        max-width: 100%;
    }
    
    .sepsis-today-section .virus-description {
        font-size: 1.2rem !important;
        max-width: 95%;
    }
    
    .hospital-content {
        flex-direction: column !important;
        margin: 40px 0 !important;
        gap: 20px !important;
    }
    
    .hospital-text {
        max-width: 100% !important;
        padding-left: 0 !important;
        text-align: center !important;
        order: 2 !important;
        padding: 0 15px !important;
    }
    
    .sepsis-today-section .hospital-text p {
        font-size: 1.2rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
    
    .hospital-symbol {
        max-width: 100% !important;
        text-align: center !important;
        order: 1 !important;
        margin-bottom: 20px !important;
    }
    
    .symbol-gif {
        max-width: 80%;
    }
    
    .challenges-content {
        margin: 50px 0;
    }
    
    .challenges-title {
        font-size: 2.5rem !important;
        margin: 0 0 60px 0;
        text-align: center;
        letter-spacing: 0.05em;
    }
    
    .challenges-comparison {
        flex-direction: column;
        margin: 40px 0 60px 0;
        gap: 30px;
    }
    
    .challenge-left,
    .challenge-right {
        max-width: 100%;
    }
    
    .sepsis-today-section .challenge-left p,
    .sepsis-today-section .challenge-right p {
        font-size: 1.2rem !important;
    }
    
    .challenge-ampersand {
        font-size: 6rem !important;
        margin: 0 15px;
    }
    
    .challenges-conclusion {
        margin: 60px auto 0 auto;
        max-width: 95%;
    }
    
    .sepsis-today-section .challenges-conclusion p {
        font-size: 1.2rem !important;
    }
    
    .clock-chart-container {
        flex-direction: column !important;
        margin: 60px 0 !important;
        gap: 30px !important;
        align-items: center !important;
    }
    
    .clock-section {
        height: 200px !important;
        padding-right: 0 !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .clock {
        height: 150px !important;
        width: 150px !important;
        margin: 0 auto !important;
    }
    
    .chart-section {
        padding-left: 0 !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .chart-image {
        max-width: 70% !important;
        margin: 0 auto !important;
    }
    
    .prognostic-text-container {
        margin: 20px 0 40px 0;
    }
    
    .sepsis-today-section .prognostic-text {
        font-size: 1.2rem !important;
    }
    
    .solution-content {
        margin: 40px 0 30px 0;
    }
    
    .solution-logo-container {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .aechmi-logo {
        max-width: 60% !important;
        margin-right: 0 !important;
        order: 1 !important;
        margin: 0 auto !important;
    }
    
    .solution-text-content {
        margin-left: 0 !important;
        order: 2 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .solution-title {
        font-size: 2rem !important;
        margin-left: 0 !important;
        text-align: center !important;
        letter-spacing: 0.05em !important;
        margin-bottom: 10px !important;
    }
    
    .solution-name {
        font-size: 2rem !important;
        margin-left: 0 !important;
        text-align: center !important;
        letter-spacing: 0.05em !important;
        margin-top: 0 !important;
    }
    
    .sepsis-today-section .aechmi-description {
        font-size: 1.2rem !important;
        margin: 20px 0;
        padding: 0 10px;
    }
    
    .crispr-content {
        margin: 50px 0;
    }
    
    .crispr-text-block {
        margin: 40px auto;
        max-width: 95%;
    }
    
    .sepsis-today-section .crispr-text {
        font-size: 1.2rem !important;
        max-width: 100%;
    }
    
    .scissors-container {
        margin: 40px 0;
    }
    
    .scissors-gif {
        max-width: 80% !important;
    }
    
    .wave-container {
        margin: -65px 0 40px 0;
    }
    
    .wave-image {
        max-width: 80% !important;
        margin-top: 75px !important;
        margin-right: 60px !important;
    }
    
    .signal-section {
        flex-direction: column !important;
        margin: -10px 0 40px 0 !important;
        padding: 0 20px !important;
        align-items: center !important;
    }
    
    .signal-text-container {
        padding-right: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        order: 2 !important;
        margin-top: 20px !important;
        padding: 0 15px !important;
    }
    
    .sepsis-today-section .signal-text {
        font-size: 1.2rem !important;
        line-height: 1.5 !important;
    }
    
    .signal-image-container {
        max-width: 100% !important;
        height: 250px !important;
        order: 1 !important;
        text-align: center !important;
    }
    
    .center-bubble {
        max-width: 200px !important;
        margin-top: -20px !important;
        width: 200px !important;
    }
    
    .all-signals {
        max-width: 300px !important;
        position: relative !important;
        transform: translate(10px, 10px) !important;
    }
    
    .mission-content-overlay {
        padding: 0 20px;
        min-height: 200px;
    }
    
    .mission-top-text {
        margin-top: 0;
        margin-left: 0;
    }
    
    .sepsis-today-section .mission-top-text p {
        font-size: 1.2rem !important;
        max-width: 100%;
    }
    
    .mission-bottom-section {
        flex-direction: column !important;
        margin-top: 30px !important;
        padding-left: 0 !important;
        gap: 20px !important;
        align-items: center !important;
    }
    
    .mission-left-text {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        text-align: center !important;
        order: 1 !important;
        padding: 0 15px !important;
    }
    
    .sepsis-today-section .mission-left-text p {
        font-size: 1.2rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    
    .mission-right-device {
        max-width: 90% !important;
        margin-top: 20px !important;
        margin-left: 0 !important;
        order: 2 !important;
        text-align: center !important;
    }
    
    .device-gif {
        max-width: 120% !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Nest Hub: 800-1280x900 */
@media screen and (min-width: 768px) and (max-width: 3839.98px) {
    /* SECTION 6: OUR MISSION RESPONSIVE */
    .mission-hero-image {
        height: 50vh;
    }
    
    /* SECTION 6.5: SEPSIS TODAY RESPONSIVE */
    .sepsis-today-section {
        padding: 60px 0;
    }
    
    .sepsis-header-content {
        margin-bottom: 40px;
    }
    
    .sepsis-today-title {
        font-size: 4.2rem;
        letter-spacing: 0.08em;
    }
    
    .sepsis-today-subtitle {
        font-size: 4.2rem;
        letter-spacing: 0.08em;
    }
    
    .sepsis-today-section .sepsis-description-text {
        font-size: 1.8rem !important;
        margin: 25px auto 0 auto !important;
        padding: 30px 40px !important;
        max-width: 85% !important;
        line-height: 1.4 !important;
    }
    
    .virus-content {
        margin: 40px 0;
    }
    
    .virus-gif {
        max-width: 700px;
    }
    
    .sepsis-today-section .virus-description {
        font-size: 1.8rem !important;
        max-width: 85%!important;
    }
    
    .hospital-content {
        margin: 60px 0;
        gap: 20px;
    }
    
    .hospital-text {
        padding-left: 80px;
    }
    
    .sepsis-today-section .hospital-text p {
        font-size: 1.8rem !important;
    }
    
    .symbol-gif {
        max-width: 800px;
    }
    
    .challenges-content {
        margin: 70px 0;
    }
    
    .challenges-title {
        font-size: 4.2rem !important;
        margin: 0 0 80px 35px !important; /* Added 30px left margin to move slightly right */
        letter-spacing: 0.08em;
    }
    
    .challenges-comparison {
        margin: 60px 0 80px 0;
        gap: 40px;
    }
    
    .sepsis-today-section .challenge-left p,
    .sepsis-today-section .challenge-right p {
        font-size: 1.8rem !important;
    }
    
    .challenge-ampersand {
        font-size: 8rem !important;
        margin: 0 20px!important;
    }
    
    .challenges-conclusion {
        margin: 80px auto 0 auto;
        max-width: 90%;
    }
    
    .sepsis-today-section .challenges-conclusion p {
        font-size: 1.8rem !important;
    }
    
    .clock-chart-container {
        margin: 80px 0!important;
    }
    
    .clock-section {
        height: 300px!important;
        padding-right: 100px!important;
    }
    
    .clock {
        height: 200px !important;
        width: 200px !important;
    }
    
    .chart-section {
        padding-left: 5px !important;
    }
    
    .chart-image {
        max-width: 350px !important;
    }
    
    .prognostic-text-container {
        margin: 10px 0 60px 0;
    }
    
    .sepsis-today-section .prognostic-text {
        font-size: 1.8rem !important;
    }
    
    .solution-content {
        margin: 60px 0 40px 0;
    }
    
    .solution-logo-container {
        gap: -20px !important; /* No gap at all */
        display: flex !important;
        flex-direction: row !important; /* Logo LEFT, text RIGHT */
        align-items: center !important; /* Vertically center both */
        justify-content: flex-start !important; /* Move whole group to the LEFT */
        margin-left: -60px !important; /* Push both logo and text left */
    }
    
    .aechmi-logo {
        max-width: 450px !important;
        margin-right: 0 !important; /* Logo stays on the left */
        margin-left: 0 !important;
    }
    
    .solution-text-content {
        margin-left: -100px !important; /* MASSIVE negative margin to pull text RIGHT AGAINST logo */
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .solution-title {
        font-size: 3.8rem !important;
        margin-left: 0 !important; /* Remove negative margin */
        letter-spacing: 0.08em !important;
        text-align: left !important; /* Left align */
        margin-bottom: 0 !important;
    }
    
    .solution-name {
        font-size: 4.2rem !important;
        margin-left: 0 !important; /* Remove negative margin */
        letter-spacing: 0.08em !important;
        text-align: left !important; /* Left align */
        margin-top: 0 !important;
    }
    
    .sepsis-today-section .aechmi-description {
        font-size: 1.8rem !important;
        margin: 30px 0!important;
        padding: 0 15px!important;
    }
    
    .crispr-content {
        margin: 70px 0!important;
    }
    
    .crispr-text-block {
        margin: 60px auto;
        max-width: 85%;
    }
    
    .sepsis-today-section .crispr-text {
        font-size: 1.8rem !important;
        max-width: 700px;
    }
    
    .scissors-container {
        margin: 60px 0;
    }
    
    .scissors-gif {
        max-width: 600px !important;
    }
    
    .wave-container {
        margin: -90px 0 60px 0 !important;
    }
    
    .wave-image {
        max-width: 700px !important;
    }
    
    .signal-section {
        margin: -15px 0 120px 0 !important;
        padding: 0 40px!important;
    }
    
    .signal-text-container {
        padding-right: 50px!important;
        max-width: 700px!important;
        margin-top: -12rem !important;

    }
    
    .sepsis-today-section .signal-text {
        font-size: 1.8rem !important;
    }
    
    .signal-image-container {
        max-width: 350px!important;
        height: 350px !important;
    }
    
    .center-bubble {
        max-width: 200px !important;
        width: 200px !important;
        margin-top: -7rem !important;

    }
    
    .all-signals {
        max-width: 400px !important;
        margin-top: -2rem !important;

    }
    
    .mission-content-overlay {
        padding: 0 40px;
        min-height: 300px;
    }
    
    .mission-top-text {
        margin-top: 3% !important;
        margin-left: 5% !important;
    }
    
    .sepsis-today-section .mission-top-text p {
        font-size: 1.8rem !important;
        max-width: 85%;
    }
    
    .mission-bottom-section {
        margin-top: 100px !important;
        padding-left: 1%;
        gap: 2%;
    }
    
    .mission-left-text {
        max-width: 70%;
        margin-left: -8%;
        margin-top: 3%;
    }
    
    .sepsis-today-section .mission-left-text p {
        font-size: 1.8rem !important;
    }
    
    .mission-right-device {
        max-width: 35%;
        margin-top: 1%;
        margin-left: 3%;
    }
    
    .device-gif {
        max-width: 140%;
        margin-left: -15%;
    }
}


/* SECTION 6: OUR MISSION - FULL SCREEN IMAGE ONLY */
.our-mission-section {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

.mission-hero-image-container {
    width: 100vw;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

.mission-hero-image {
    width: 100%;
    height: 60vh;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* SECTION 6.5: SEPSIS TODAY */
.sepsis-today-section {
    background: linear-gradient(to bottom, #6E0D25 0%, #0b1320 100%);
    padding: 80px 0;
    margin: 0;
    min-height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Prevent content from overflowing into next section */
}

/* Header content centered */
.sepsis-header-content {
    text-align: center; /* Center instead of right */
    margin-bottom: 60px;
    padding: 0; /* Remove right padding */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all content */
}

.sepsis-today-title {
    font-family: 'Blinker', sans-serif;
    font-size: 6.2rem;
    font-weight: 700;
    color: #d7af6b;
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.1;
}

.sepsis-today-subtitle {
    font-family: 'Blinker', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    color: #d7af6b;
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.1;
}

.sepsis-description-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem; /* Keep current size */
    color: #ffffff;
    margin: 30px auto 0 auto; /* Center with auto margins */
    text-align: center; /* Center text alignment */
    line-height: 1.4;
    max-width: 80%; /* Increase width from 60% to 80% for bigger width */
    display: block;
    padding: 40px 60px; /* Add padding for rectangle-like spacing */
}

/* Virus GIF and description section */
.virus-content {
    text-align: center;
    margin: 60px 0;
}

.virus-gif {
    max-width: 1100px; /* Much bigger - increased from 800px to 1400px */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 30px auto; /* Center the GIF with bottom margin */
}

.virus-description {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    text-align: center;
    margin: 0 auto;
    max-width: 80%;
    line-height: 1.4;
    font-style: italic; /* Make it italic to match the image style */
}

/* Hospital content section with text left and symbol right */
.hospital-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 80px 0;
    gap: 10px; /* Much closer - reduced from 40px to 10px */
}

.hospital-text {
    flex: 1;
    max-width: 50%;
    padding-left: 150px; /* Move the entire text block closer to center */
}

.hospital-text p {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem; /* Large text size to match virus description */
    color: #ffffff;
    line-height: 1.4;
    margin: 0;
    text-align: left; /* Keep left alignment but text block is moved closer */
    padding-right: 0; /* Remove any right padding to get closer */
}

.hospital-text strong {
    font-weight: bold;
    color: #ffffff;
}

.hospital-symbol {
    flex: 1;
    max-width: 50%;
    text-align: center;
}

.symbol-gif {
    max-width: 1200px; /* Way bigger - increased from 600px to 1200px */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Major Challenges section */
.challenges-content {
    margin: 100px 0;
    text-align: center;
}

.challenges-title {
    font-family: 'Blinker', sans-serif;
    font-size: 6.2rem;
    font-weight: 700;
    color: #d7af6b; /* Gold color */
    margin: 0 0 120px 0; /* Increased gap from 80px to 120px */
    text-align: left; /* Left aligned as shown in image */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.1;
}

.challenges-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0 120px 0; /* Increased bottom margin from 60px to 120px */
    gap: 60px; /* Increased gap from 40px to 60px */
}

.challenge-left,
.challenge-right {
    flex: 1;
    max-width: 35%;
}

.challenge-left p,
.challenge-right p {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    line-height: 1.3; /* Reduced for better line separation */
    margin: 0;
    text-align: center;
    white-space: pre-line; /* Allow line breaks in text */
}

.challenge-ampersand {
    font-family: 'NotoSans Telugu Condensed', sans-serif;
    font-size: 12rem; /* Way bigger - increased from 8rem to 12rem */
    font-weight: 900; /* Make it bolder */
    color: #d7af6b; /* Gold color */
    margin: 0 30px;
    line-height: 1;
}

.challenges-conclusion {
    margin: 120px auto 0 auto; /* Increased from 80px to 120px */
    max-width: 90%;
}

.challenges-conclusion p {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    line-height: 1.4;
    margin: 0;
    text-align: center; /* Centered across the page */
}

/* Clock and Chart section */
.clock-chart-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 120px 0;
    gap: 5px; /* Way even closer - reduced from 20px to 5px */
}

.clock-section {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Move clock to the right */
    align-items: center;
    position: relative;
    height: 400px;
    padding-right: 150px; /* Push clock more to the right */
}

.chart-section {
    flex: 1;
    display: flex;
    justify-content: flex-start; /* Move chart to the left */
    align-items: center;
    padding-left: 150px; /* Push chart more to the left */
}

.chart-image {
    max-width: 600px; /* Huge chart */
    width: 100%;
    height: auto;
}

/* Animated Clock Styles */
.clock {
    position: relative;
    height: 300px; /* Huge clock */
    width: 300px;
    background: transparent; /* No white background - section background shows through */
    box-sizing: border-box;
    border-radius: 100%;
    border: 3px solid #ffffff; /* Way thinner border - reduced from 15px to 3px */
}

.clock .top {
    position: absolute;
    width: 4px;
    height: 12px;
    background: #ffffff; /* White indicators */
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 10px;
}

.clock .right {
    position: absolute;
    width: 12px;
    height: 4px;
    background: #ffffff; /* White indicators */
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto 0;
}

.clock .bottom {
    position: absolute;
    width: 4px;
    height: 12px;
    background: #ffffff; /* White indicators */
    left: 0;
    right: 0;
    bottom: 10px;
    margin: 0 auto;
}

.clock .left {
    position: absolute;
    width: 12px;
    height: 4px;
    background: #ffffff; /* White indicators */
    top: 0;
    bottom: 0;
    left: 10px;
    margin: auto 0;
}

.clock .center {
    height: 8px;
    width: 8px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #ffffff; /* White center */
    border-radius: 100%;
}

.clock .hour {
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: time 60s infinite linear;
}

.clock .hour:before {
    position: absolute;
    content: "";
    background: #ffffff; /* White hour hand */
    height: 80px;
    width: 4px;
    top: 40px;
}

.clock .minute {
    width: 2px;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: time 30s infinite linear;
}

.clock .second {
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: time 15s infinite linear;
}

.clock .second:before {
    position: absolute;
    content: "";
    background: #ffffff; /* White second hand */
    height: 70px;
    width: 3px;
    top: 55px;
}

@keyframes time {
    to {
        transform: rotate(360deg);
    }
}

/* Full width prognostic text */
.prognostic-text-container {
    margin: 1px 0 80px 0; /* Much closer to clock/chart - reduced top margin from 80px to 20px */
    width: 100%;
}

.prognostic-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    width: 100%;
    font-style: italic; /* Matching the style from your image */
}

/* Solution section */
.solution-content {
    margin: 80px 0 60px 0;
}

.solution-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Even smaller gap - almost touching */
}

.aechmi-logo {
    max-width: 2500px; /* Keep the big size as requested */
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    order: 1; /* Place logo first (left side) */
    flex-shrink: 0; /* Don't let logo shrink */
    margin-right: 100px; /* Negative margin to overlap slightly */
    transform: scale(1.25); /* Scale it up by 10% */
}

.aechmi-logo:hover {
    transform: scale(1.45) rotate(5deg);
    filter: brightness(1.2);
}

.solution-text-content {
    order: 2; /* Place text second (right side) */
    flex-shrink: 0; /* Don't let text shrink */
    margin-left: -10px; /* Negative margin to overlap with logo */
}

.solution-title {
    font-family: 'Blinker', sans-serif;
    font-size: 6.2rem;
    font-weight: 700;
    color: #d7af6b;
    margin: 0; /* Remove bottom margin - stick sentences together */
    margin-left: -700px; /* Negative margin to overlap slightly */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 0.9; /* Tighter line height */
    text-align: left; /* Keep "OUR SOLUTION" left-aligned */
}

.solution-name {
    font-family: 'Blinker', sans-serif;
    font-size: 6.2rem;
    font-weight: 700;
    color: #d7af6b;
    margin: 0;
    margin-left: -700px; /* Negative margin to overlap slightly */

    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 0.9; /* Tighter line height */
    text-align: center; /* Center-align "AECHMI" */
}

/* AECHMI Description */
.aechmi-description {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    text-align: center;
    margin: 40px 0;
    line-height: 1.4;
    max-width: 100%;
    padding: 0 20px;
}

/* CRISPR Content Section */
.crispr-content {
    margin: 100px 0;
    text-align: center;
}

.crispr-text-block {
    margin: 80px auto;
    max-width: 80%; /* Not full width - centered with max width */
}

.crispr-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    line-height: 1.4;
    text-align: center;
    margin: 0 auto;
    max-width: 900px; /* Centered with limited width */
}

.scissors-container {
    margin: 80px 0;
    text-align: center;
}

.scissors-gif {
    max-width: 900px; /* Huge scissors */
    width: 100%;
    height: auto;
}

.wave-container {
    margin: -130px 0 80px 0; /* Negative top margin to move up and overlay */
    text-align: center;
    position: relative;
    z-index: 2; /* Ensure it overlays properly */
}

.wave-image {
    max-width: 1000px; /* Even bigger wave image */
    width: 100%;
    height: auto;
}

/* Signal Section */
.signal-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -20px 0 80px 0; /* Negative margin to position closer to wave end */
    padding: 0 5%;
    position: relative;
    z-index: 3;
}

.signal-text-container {
    flex: 1;
    text-align: left;
    padding-right: 200px; /* Increased spacing from image */
    max-width: 900px;
}

.signal-text {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    line-height: 1.2;
    color: white;
    margin: 0;
}

.signal-highlight {
    font-weight: bold;
}

.signal-image-container {
    flex-shrink: 0;
    text-align: center;
    position: relative;
    max-width: 700px;
    width: 100%;
    height: 500px;
    margin: 0 auto;
}

/* Center bubble - starts hidden */
.center-bubble {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%) scale(0);
    max-width: 450px;
    width: 550px;
    height: auto;
    opacity: 0;
    transition: all 2s ease-out;
    z-index: 3;
}

/* All signals - starts hidden */
.all-signals {
    position: absolute;
    top: -20%;
    left: 0;
    max-width: 900px;
    width: 100%;
    height: auto;
    opacity: 0;
    transform: scale(0);
    transition: all 1s ease-out;
    z-index: 1;
}

/* Show animations - controlled by JS */
.center-bubble.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.all-signals.show {
    opacity: 1;
    transform: scale(1);
}


/* Mission Background - HUGE OVERLAY */
.mission-background {
    margin: 80px 0;
    text-align: center;
    position: relative;
    width: 100%;
    background-color: rgba(255, 0, 0, 0.1); /* Debug: red background to see container */
    min-height: 600px; /* Make it taller so we can see it */
    display: block;
}

.mission-image {
    width: 80%; /* Start smaller to ensure it's visible */
    max-width: 800px;
    height: auto;
    display: block;
    margin: 50px auto;
    border: 2px solid red; /* Debug: red border to see if image loads */
}


/* Force paragraph size changes - temporary override */
.sepsis-description,
.sepsis-details,
.problem-intro,
.problem-covid,
.problem-highlight-text,
.counter-description,
.counter-number,
.sepsis-description-text,
.microneedle-text,
.silver-wave-main-text,
.final-text {
    font-size: 3.2rem !important;
}

/* Even smaller for some sections */
.team-copy p,
.final-text {
    font-size: 2.0rem !important;
}


/* Mission Image in Section 6.5 - Full Width */
.mission-image-container {
    margin: 80px 0 0 0;
    width: 140vw;
    position: relative;
    left: -25vw; /* Push it left to center the 140% width (20% on each side) */
    background: transparent;
    padding: 0;
    overflow: visible;
}

.mission-image {
    width: 100%;
    max-width: none !important;
    height: auto;
    display: block;
    margin: 0;
    background: transparent;
    border: none;
    object-fit: cover;
}

/* Mission Content Overlay */
.mission-content-overlay {
    position: relative; /* Changed from absolute since no background image */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 12%; /* Removed top padding, keep side padding */
    box-sizing: border-box;
    min-height: 400px; /* Give it some height for spacing */
}

/* Top text styling */
.mission-top-text {
    text-align: center;
    margin-bottom: auto;
    margin-top: 5%; /* Additional margin to push text down more */
    margin-left: 8%; /* Push GIF more to the left */

}

.mission-top-text p {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    line-height: 1.4;
    margin: 0;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Bottom section with text and device */
.mission-bottom-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3%; /* Reduced gap for more space */
    margin-top: 100px; /* Add much more space from top text */
    padding-left: 2%; /* Much more padding to push text way right */
    margin-bottom: 3%; /* Push gif down a bit */
}

/* Left text styling */
.mission-left-text {
    flex: 1;
    max-width: 80%; /* Increased from 35% to 50% for more freedom */
    margin-left: -12%; /* Moved to far left - reduced from 2% to 0% */
    margin-top: 5%; /* Push gif down */

}

.mission-left-text p {
    font-family: 'Nixie One', serif;
    font-size: 3.2rem;
    color: #ffffff;
    line-height: 1.4;
    margin: 0;
    text-align: left;
}

/* Right device styling */
.mission-right-device {
    flex: 1;
    max-width: 40%; /* Increased from 35% to 40% for bigger container */
    text-align: center;
    margin-top: 1%; /* Push gif down */
    margin-left: 5%; /* Push GIF more to the right */
}

.device-gif {
    max-width: 180%; /* Made GIF much bigger - increased from 150% to 180% */
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-left: -20%; /* Reduced negative margin to move GIF more right */
}


/* Dual Video Hero Section */
.dual-video-hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: -70px; /* Move up to eliminate white stripe - adjust based on navbar height */
    padding-top: 70px; /* Add padding to push content below navbar */
    background-color: #6e0d25; /* Background color during transitions */
}

.video-container {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease-in-out;
    transform: translateX(100%); /* Start from right by default */
    background-color: #6e0d25; /* Prevent white flashes */
}

.video-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Video 1 slides in from left when coming back */
.video-container#video-1.slide-in-left {
    transform: translateX(-100%);
}

/* Video 2 slides in from right */
.video-container#video-2.slide-in-right {
    transform: translateX(100%);
}

/* Slide out animations */
.video-container.slide-out-left {
    transform: translateX(-100%);
}

.video-container.slide-out-right {
    transform: translateX(100%);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: #6e0d25; /* Prevent white background */
    display: block; /* Remove any inline spacing */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
}

/* Remove any potential white space above videos */
.hero-video video {
    vertical-align: top;
}

/* Arrow Navigation */
.arrow-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001; /* Higher than accessibility button */
    cursor: pointer;
    padding: 20px;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.video-container.active .arrow-container {
    opacity: 1;
    visibility: visible;
}

.arrow-right {
    right: 80px; /* Position next to accessibility button */
}

.arrow-left {
    left: 80px;
}

.arrow-image {
    width: 60px;
    height: auto; /* Maintain aspect ratio instead of forcing square */
    max-height: 60px; /* Prevent excessive height */
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); /* Make white with shadow */
    opacity: 0.5;
    transition: all 0.3s ease;
    object-fit: contain; /* Prevent compression */
    display: block; /* Remove inline spacing */
}

.arrow-flipped {
    transform: scaleX(-1); /* Flip horizontally for left arrow */
}

.arrow-container:hover .arrow-image {
    opacity: 0.8;
    transform: scale(1.1);
}

.arrow-container:hover .arrow-flipped {
    transform: scaleX(-1) scale(1.1);
}

/* Video Text Overlay */
.video-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none; /* Allow clicks to pass through to arrows */
    background: transparent; /* Ensure no white background */
}

.problem-title {
    font-size: 3rem;
    font-weight: 300;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.problem-highlight {
    font-size: 6rem;
    font-weight: bold;
    color: #D7AF6B;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8);
    margin: 0;
    letter-spacing: 4px;
}

/* Ensure no white space in container elements */
.container-fluid,
.row,
.col-12 {
    background: transparent;
    margin: 0;
    padding: 0;
}

.video-text-overlay .container-fluid {
    width: 100%;
    max-width: 100%;
}


/* Replace the problematic rule at the bottom - back to using .container */
body .container {
    max-width: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Fix the iframe container positioning to center the oversized video */
.iframe-container {
  padding: 0;
  margin: 0;
  position: absolute;
  top: -20%;
  left: -10%; /* Center the 125% width container */
  width: 125%;
  height: 125%;
  overflow: hidden;
}

.hero-video iframe {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  object-fit: cover; /* This helps with proper scaling */
}