/*
  RX Watt Brandbook Palette 2025
  --brand-blue: #335B74;
  --brand-teal: #258F95;
  --bg-dark: #1a1d24;
  --text-light: #ffffff;
  --text-muted: #a8b2c1;
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root {
    --brand-blue: #335B74;
    --brand-teal: #258F95;
    --bg-dark: #1a1d24;
    --text-light: #ffffff;
    --text-muted: #a8b2c1;
    --border-radius-lg: 16px;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-dark);
    color: var(--text-light);
}

h1, h2, h3, h4, h5 {
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-light);
}

h1 { font-size: 3.5rem; letter-spacing: -1px; }
h2 { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.4rem; margin-bottom: 0.25rem; }
p { font-size: 1.2rem; color: var(--text-muted); }

section {
    padding: 7rem 2rem;
    overflow: hidden;
    background-color: var(--bg-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); /* fade at bottom */
    backdrop-filter: blur(8px);
    border-bottom: none;
    pointer-events: auto;

}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

nav .logo img {
    height: 80px; /* Increased logo size */
    transition: var(--transition-smooth);
}

nav .logo:hover img {
    opacity: 0.95;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2.5rem;
}

nav a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 600;
    transition: var(--transition-smooth);
}

nav ul a:hover {
    color: var(--brand-teal);
}


#home {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    position: relative;
    border-bottom: none;
}

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

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

#home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bg-dark), rgba(26, 29, 36, 0.5));
    z-index: -1;
}

#scenarios {
    padding-left: 0;
    padding-right: 0;
    background-color: var(--brand-blue);
}
#scenarios .section-inner {
    max-width: none;
}
.scenarios-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.scenario-item {
    border-radius: var(--border-radius-lg); /* or use something like 16px directly */
    overflow: hidden;
    transition: var(--transition-smooth);
    position: relative;
    height: 500px;
}

.scenario-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
    border-radius: inherit; /* ensures image follows the parent's rounded corners */
}


.scenario-item:hover img {
    transform: scale(1.05);
}

.scenario-description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    padding: 2rem;
    text-align: center;
    transition: var(--transition-smooth);
}
.scenario-description h5,
.scenario-description p {
    color: white;
}
.scenario-item:hover .scenario-description {
    opacity: 1;
}

.features-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: left;
}

.feature-item {
    background-color: transparent;
    transition: var(--transition-smooth);
}

.feature-image-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-image-container img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.feature-item:hover .feature-image-container img {
    transform: scale(1.05);
}

.feature-description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 29, 36, 0.9);
    color: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    transition: var(--transition-smooth);
}
.feature-description p {
    color: var(--text-light);
}

.feature-item:hover .feature-description {
    opacity: 1;
}

.feature-item h3 {
    padding-bottom: 0.5rem;
    color: var(--brand-teal);
}

#sustainability {
    background-color: var(--brand-teal);
}
.sustainability-text {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 1rem auto 0;
}

/*
  Seamless News Ticker CSS

  This version creates a truly continuous horizontal scrolling effect
  that loops seamlessly without jumping. The animation pauses on hover.

  IMPORTANT: For this seamless loop to work, you MUST duplicate
  all of the .news-item elements inside the .news-container in your HTML.
  The animation is designed to work with two identical sets of items.

  Example HTML Structure:
  <div class="news-container">
    <!-- Original Items -->
    <a class="news-item">...</a>
    <a class="news-item">...</a>
    <a class="news-item">...</a>
    <!-- DUPLICATED Items -->
    <a class="news-item">...</a>
    <a class="news-item">...</a>
    <a class="news-item">...</a>
  </div>
*/

/* 1. Keyframe animation for a seamless horizontal scroll */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    /*
      This is the key change. We move the container by exactly 50%
      of its total width. Since the container holds two sets of items,
      this moves it by the width of one full set. When the animation
      loops, the second set is in the exact position the first set
      started in, creating a seamless and continuous effect.
    */
    transform: translateX(-50%);
  }
}

#news {
  background-color: white;
  padding: 2rem 0; /* Added some vertical padding for aesthetics */
  /* Crucially, hide the overflowing content to create the ticker effect */
  overflow: hidden;
  position: relative; /* Required for the fade-out effect */
}

/* 2. Add a fade-out effect on the edges for a smoother appearance */
#news::before,
#news::after {
    content: '';
    position: absolute;
    top: 0;
    width: 5rem;
    height: 100%;
    z-index: 2;
}
#news::before {
    left: 0;
    background: linear-gradient(to right, white 20%, transparent);
}
#news::after {
    right: 0;
    background: linear-gradient(to left, white 20%, transparent);
}

.news-container {
  /* Use flexbox for a single horizontal row of items */
  display: flex;
  /*
    With duplicated items in the HTML, this will naturally become
    twice as wide, which is essential for the seamless translateX(-50%) effect.
  */
  width: max-content;

  /* 3. Apply the marquee animation */
  /* The animation-duration (e.g., 40s) controls the speed. */
  animation: marquee 30s linear infinite;
}

/* 4. Pause the animation when the user hovers over the container */
.news-container:hover {
  animation-play-state: paused;
}

.news-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  /* Add horizontal margin to create space between items */
  margin: 0 1rem;
  /* Giving items a consistent width helps with the scrolling effect */
  width: 250px;
  flex-shrink: 0; /* Prevent items from shrinking */
}

.news-item img {
  max-height: 90px;
  max-width: 180px;
  width: auto;
  opacity: 1;
  transition: 0.3s ease;
  margin-bottom: 1.5rem;
}

.news-item p {
  font-size: 1rem;
  transition: color 0.3s ease;
  color: #17a2b8; /* Example color for --brand-teal */
  font-weight: 600;
  white-space: normal; /* Allow text to wrap if it's long */
}

/* This is your original hover effect, which still works perfectly */
.news-item:hover p {
  color: black;
}




#team {
    background-color: var(--bg-dark);
}
.team-container {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}
.team-member {
    text-align: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.team-member:hover {
    transform: translateY(-10px);
}
.team-member img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    border: 6px solid transparent;
    transition: var(--transition-smooth);
}
.team-member:hover img {
    border-color: var(--brand-teal);
}
.team-member .linkedin-link {
    text-decoration: none;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}
.team-member .linkedin-link:hover {
    color: var(--brand-teal);
}

#modal-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 15, 31, 0.8);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.modal-content {
    background: var(--bg-dark);
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    width: 90%;
    position: relative;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#modal-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
    border: 4px solid var(--brand-teal);
}

.button-container {
    text-align: center;
    margin-top: 2rem;
}

.action-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.action-button.border-style {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid white;
    border-radius: var(--border-radius-lg);
    background-color: transparent;
    color: white;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.action-button.border-style:hover {
    background-color: white;
    color: var(--bg-dark);
}

}
#modal-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 4px solid var(--brand-teal);
}
#modal-name {
    color: var(--text-light);
}
#modal-bio {
    margin-top: 1rem;
    text-align: left;
    color: var(--text-light);
}

#supported-by {
    background-color: white;
}
#supported-by h2 {
    text-align: center;
    color: black;
}
.logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}


.logos-container img {
    height: 90px;
    filter: none;
    opacity: 1;
}

footer {
    text-align: center;
    padding: 2rem;
    background-color: #95;
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }
    nav ul { display: none; }
}

@media (max-width: 480px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    section { padding: 5rem 1rem; }
}

.action-button {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--border-radius-lg);
    background-color: var(--brand-teal);
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-button:hover {
    background-color: var(--brand-blue);
    color: white;
    transform: translateY(-2px);
}