/* =======================
   GLOBAL STYLES
   (Applies to all pages)
   ======================= */
   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;700&display=swap');

   /* ------------------ Global Reset / Base ------------------ */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     background-color: #1A237E; /* Dark blue background */
     color: #ffffff; /* White text */
     font-family: "IBM Plex Sans", sans-serif;
     line-height: 1.6;
   }
   
   /* ------------------ Header & Nav ------------------ */
   header {
     margin: 0;
     padding: 0;
   }
   
   nav {
     background-color: #0D1B53; /* Same dark blue */
     border-bottom: 3px solid #FFCC00; /* Yellow underline */
     height: 120px;
     padding: 12px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   .logo img {
     width: 100px;
     height: auto;
   }
   
   .nav-links {
     list-style: none;
     display: flex;
     gap: 20px;
   }
   
   .nav-links a {
     text-decoration: none;
     color: #ffffff;
     font-size: 18px;
     transition: color 0.3s;
   }
   
   .nav-links a:hover {
     color: #FFD700;
   }
   
   /* ------------------ Hero Section ------------------ */
   .hero {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 20px 0;
   }
   
   .hero h1 {
     font-size: 36px;
     font-weight: bold;
     margin-bottom: 20px;
     text-align: center;
   }
   
   /* ------------------ Images ------------------ */
   .image-container {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     width: 100%;
   }
   
   .image-container img {
     width: 250px;
     height: 250px;
     object-fit: cover;
     border: 2px solid black;
     transition: transform 0.3s ease-in-out;
   }
   
   .image-container img:hover {
     transform: scale(1.05);
   }
   
   /* ------------------ News Box ------------------ */
   #news {
     position: absolute;
     right: 20px;
     top: 100px;
     width: 350px;
     padding: 20px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
   }
   
   /* ------------------ Headings & Lists ------------------ */
   h2 {
     font-weight: bold;
     text-align: center;
   }
   
   /* ------------------ Stock Grid Styles ------------------ */
   .stock-grid {
     text-align: center;
     padding: 40px;
   }
   
   .stock-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
   }
   
   .stock-card {
     width: 200px;
     height: 250px;
     background: white;
     border-radius: 10px;
     padding: 15px;
     text-align: center;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease-in-out;
   }
   
   .stock-card img {
     width: 80px;
     height: auto;
     margin-bottom: 10px;
   }
   
   .stock-card h3 {
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 5px;
   }
   
   .domestic {
     border: 3px solid #0D1B53;
     background: #E3EAFD;
   }
   
   .foreign {
     border: 3px solid #FFD700;
     background: #FFF5D0;
   }
   
   .stock-card:hover {
     transform: scale(1.05);
   }
   
   /* ------------------ About Page Styles ------------------ */
   .about-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 40px 20px;
   }
   
   .about-container h1 {
     font-size: 48px;
     text-align: center;
     margin-bottom: 30px;
     font-weight: bold;
   }
   
   .about-container h2 {
     font-size: 32px;
     margin-top: 40px;
     margin-bottom: 15px;
   }
   
   .about-container p {
     font-size: 18px;
     margin-bottom: 20px;
   }
   
   /* ------------------ Footer ------------------ */
   footer {
     background-color: #0D1B53;
     border-top: 3px solid #FFD700;
     color: white;
     text-align: center;
     padding: 15px;
     font-size: 14px;
   }
   
   /* ------------------ Stock Data Page Styles ------------------ */
#stock-data-page .image-gallery {
  text-align: center;
  margin: 50px auto;
  max-width: 90%;
}

#stock-data-page .image-gallery h1 {
  font-size: 36px; /* Larger title */
  font-weight: bold;
  margin-bottom: 30px; /* Adds space below title */
}

#stock-data-page .image-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

#stock-data-page .image-box {
  flex: 1;
  max-width: 48%;
  text-align: center;
  position: relative; /* Prevents overlap issues */
}

#stock-data-page .image-box.centered {
  max-width: 60%;
  margin: 0 auto;
  display: block;
}

/* Prevents hover effect from covering title */
#stock-data-page .image-box img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.3);
  transition: transform 0.3s ease-in-out;
}

#stock-data-page .image-box img:hover {
  transform: scale(1.03); /* Slightly smaller hover effect */
}

/* Ensures title stays visible and separated from the image */
#stock-data-page .image-box p {
  margin-top: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #FFD700;
}

   }
  /* ------------------ Stock Toggle Styles ------------------ */
.stock-section {
  text-align: center;
  padding: 40px;
}

.toggle-buttons {
  margin-bottom: 20px;
}

.toggle-buttons button {
  padding: 12px 20px;
  margin: 5px;
  border: none;
  border-radius: 5px; /* Square-like buttons */
  background: #0D1B53;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

/* Button stays highlighted when active */
.toggle-buttons button.active {
  background: #FFD700;
  color: black;
}

/* Stock Cards */
.stock-container {
  display: none;
  flex-wrap: nowrap; /* Ensure cards stay in one row */
  justify-content: center;
  gap: 15px;
}

.stock-container.active {
  display: flex;
}

.stock-card {
  width: 200px;
  height: 100px; /* More compact */
  padding: 15px;
  background: white;
  border-radius: 10px;
  text-align: center;
  display: flex; /* Align text vertically */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

.stock-card h3 {
  font-size: 18px;
  font-weight: bold;
  color: #222; /* Darker text for better contrast */
  margin-bottom: 3px;
  text-align: center;
}

.stock-card p {
  font-size: 14px;
  font-weight: bold;
  color: #444;
  text-align: center;
}

/* Updated Color Scheme */
.domestic {
  border: 2px solid #174EA6; /* Medium Blue */
  background: #D4E4FF; /* Light Blue */
  color: black;
}

.foreign {
  border: 2px solid #C98C00; /* Muted Gold */
  background: #FFEBB2; /* Light Gold */
  color: black;
}

.stock-card:hover {
  transform: scale(1.05);
}

/* =======================
   FINDINGS PAGE STYLES
   ======================= */

   .findings-container {
    text-align: center;
    padding: 50px 20px;
}

.findings-container h1 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
}

.findings-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Individual Finding Cards */
.finding-card {
    width: 300px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.finding-card h2 {
    font-size: 20px;
    font-weight: bold;
    color: #0D1B53;
    margin-bottom: 10px;
}

.finding-card p {
    font-size: 16px;
    color: #444;
    font-weight: bold;
}

/* Hover Effect */
.finding-card:hover {
    transform: scale(1.05);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
}

/* Navigation Active Link */
.nav-links a.active {
  color: white; /* Make the text white */
  text-decoration: underline; /* Add an underline */
  font-weight: bold; /* (Optional) Make it stand out */
}

/* =======================
   TEAM SECTION STYLES
   ======================= */

   .team-section {
    text-align: center;
    padding: 40px 15px;
}

.team-section h1 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 25px;
}

.team-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
}

.team-card {
    background: white;
    color: #1A237E; /* Dark blue text */
    border: 1.5px solid #0D1B53;
    border-radius: 6px;
    padding: 10px 20px;
    min-width: 140px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hover Effect */
.team-card:hover {
    transform: scale(1.03);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* TradingView Ticker Styling */
.tradingview-container {
  width: 100%;
  background-color: #1A237E; /* Matches the page background */
  padding: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* Ensures it sits below the header */
  z-index: 10;
  border-bottom: none; /* Removes extra yellow line */
}

.tradingview-widget-container {
  width: 100%; /* Ensures it spans full width */
  max-width: 1200px;
}

/* Ensure Dropdown Background is White with Black Text */
select {
  background-color: white; /* White background */
  color: black; /* Black text */
  border: 1px solid black;
  padding: 5px;
}

/* Ensure Chart Labels and Legend Text is White */
.chart-container canvas {
  color: white !important;
}

/* Improve Legend Readability */
.chartjs-legend-item {
  color: white !important;
}

/* Ensure Maps Have Consistent Styling */
#mapT, #mapB {
  width: 100%;  /* Make it responsive */
  max-width: 900px; /* Ensures it doesn't stretch too wide */
  height: 400px; /* Adjust for visibility */
  background-color: #2C2C2C; /* Darker background */
  border: 2px solid white;
  border-radius: 10px;
  margin: 20px auto;
}

/* Fix Text Readability */
.text1 {
  font-size: 22px;
  font-weight: bold;
  color: #FFA726; /* Bright orange for better contrast */
  text-align: center;
}

/* ✅ Apply styles ONLY to MapVisualization.html */
#stock-performance-page .findings-container {
  text-align: center;
  padding: 20px 10px; /* Reduced padding */
  margin-bottom: -10px; /* Reduce vertical spacing */
}

#stock-performance-page .map {
  width: 100%;
  max-width: 900px;
  height: 400px;
  margin: 10px auto; /* Reduce spacing between maps */
}

/* ✅ Styles for the Data Flow Section */
#data-flow {
  text-align: center;
  padding: 40px 20px;
}

#data-flow h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

/* ✅ Timeline Layout */
.timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.timeline-item {
  display: flex;
  align-items: center;
  background: #D4E4FF; /* ✅ Light Blue (Matches Domestic Stock Cards) */
  padding: 15px;
  border-radius: 8px;
  width: 80%;
  max-width: 800px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  color: #0D1B53; /* ✅ Dark Blue Text for Readability */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* ✅ Add a Slight Hover Effect */
.timeline-item:hover {
  transform: scale(1.02);
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
}

.timeline-icon {
  font-size: 30px;
  margin-right: 15px;
}

.timeline-content {
  text-align: left;
}

.timeline-content h3 {
  color: #174EA6; /* ✅ Medium Blue (Matches Stock Cards) */
}

.timeline-content p {
  color: #222; /* ✅ Darker Gray for Better Readability */
}

.timeline-content img {
  width: 100%;
  max-width: 400px;
  margin-top: 10px;
  border-radius: 5px;
  border: 2px solid #174EA6; /* ✅ Blue Border for Images */



/* ✅ Fix Toggle for Stock Cards */
.toggle-buttons button {
  padding: 12px 20px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  background: #0D1B53; /* Default Dark Blue */
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

/* ✅ Active Button Turns Gold */
.toggle-buttons button.active {
  background: #FFD700;
  color: black;
}

/* ✅ Hide Stock Sections by Default */
.stock-container {
  display: none;
}

/* ✅ Show Active Section */
.stock-container.active {
  display: flex;
  justify-content: center;
  gap: 15px;
}