#title-container {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 80px; /* Reserves enough space */
}

/* Make sure both titles occupy the same space */
.gp-ai-title, .economic-ai-title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #555555;
  text-align: center;
  width: 100%;
  max-width: 90%;
  white-space: nowrap;
  position: absolute; /* ✅ Ensures both stay in the same place */
}

/* First line */
.gp-ai-title {
  justify-content: center;
  text-align: center;
  border-right: 3px solid transparent; /* ✅ Removes cursor effect after typing */
}

/* Second line: Initially hidden */
.economic-ai-title {
  opacity: 0;
  visibility: hidden;
}

/* Animation for fading out the first title */
.gp-ai-title.fade-out {
  animation: fadeOut 1s forwards;
}

/* Animation for fading in the second title */
.economic-ai-title.fade-in {
  visibility: visible;
  animation: fadeIn 2.5s steps(30, end) forwards;
}

/* Keyframe animations */
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Responsive Fix for Smaller Screens */
@media (max-width: 768px) {
  .gp-ai-title, .economic-ai-title {
    font-size: 24px;
    text-align: center;
    white-space: normal; /* Allow wrapping */
  }
}


/* ==============================
   FADE EFFECTS CSS (fade-effects.css)
   Handles all fade animations for the site
   ============================== */

/* Generic fade-in effect */
.fade-in {
  opacity: 0;
  animation: fadeIn 1.5s ease-in forwards;
}

/* Fade-in delay for the first line */
.fade-in-delay {
  opacity: 0;
  animation: fadeIn 1.5s ease-in forwards;
  animation-delay: 1s; /* Delays first line fade-in by 1s */
}

/* Fade-in delay for the second line before typing starts */
.fade-in-typing {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  animation-delay: 2s; /* Slightly after the first line */
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/* ================================
   🔥 GP-AI GATEKEEPER LOGO FADE-IN
   This controls the fade-in effect for the 
   Innovate UK & Government logo above the header.
   ================================ */

.fade-in-logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.4s ease-in-out, visibility 0s linear 0.3s;
    
    /* ✅ Restore correct sizing */
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* When Logo is in View, Trigger Fade */
.fade-in-logo.visible {
    opacity: 1;
    visibility: visible;
}

/* ================================
   🔥 GP-AI GATEKEEPER HEADER FADE-IN
   This controls the scroll-triggered fade-in 
   when the GP-AI Gatekeeper title appears.
   ================================ */

/* GP-AI Title Scroll (Initially Hidden) */
.gp-ai-title-scroll {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(0px) !important;
    transition: opacity 1.8s ease-in-out, visibility 0s linear 0.3s !important; /* ✅ Adjusted for better sync */
    
    /* Keep existing styles */
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 36px !important;
    color: #555555 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 90% !important;
    white-space: nowrap !important;
}

/* When Fading In */
.gp-ai-title-scroll.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ================================
   🔥 MOBILE RESPONSIVE FIXES
   Ensures correct logo & text sizing on mobile.
   ================================ */

@media (max-width: 768px) {
    /* ✅ Fixes the logo being too large */
    .fade-in-logo {
        max-width: 80% !important;
    }

    /* ✅ Ensures the GP-AI title fits on mobile */
    .gp-ai-title-scroll {
        font-size: 26px !important; /* ✅ Slightly smaller font */
        text-align: center !important;
        white-space: normal !important; /* ✅ Allow wrapping */
        max-width: 90% !important;
        margin: 0 auto !important;
    }
}