/* --- Add these styles to your existing style.css --- */

/* Style for elements that should respect newlines from JSON */
.preserve-newlines {
    white-space: pre-line; /* Preserves newlines, collapses other whitespace, allows wrapping */
  }
  
  /* Basic styling for content within the detail modal */
  #detailModalBody .content-styling p {
      margin-bottom: 1rem;
      line-height: 1.7;
  }
  
  #detailModalBody .content-styling h3,
  #detailModalBody .content-styling h4 {
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
      font-weight: bold;
  }
  #detailModalBody #detailModalImage {
      max-width: 100%;
      height: auto;
      border-radius: 5px;
      margin-bottom: 1.5rem;
  }
  
  /* --- Keep all your previous CSS rules below --- */
  
  /* IMPORTANT: Adjust font path relative to the CSS file location */
  @font-face {
    font-family: 'Eurostile';
    /* Path goes up one level from css/ to root, then into assets/fonts/ */
    src: url('../assets/fonts/eurostile.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  :root {
    --primary-color: #a80a16;
    --primary-hover: #90100f;
    --neutral-white: #ffffff;
    --neutral-dark: #333333;
    --navbar-height: 70px;
  }
  
  html {
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      scroll-padding-top: var(--navbar-height); /* Offset for fixed navbar */
  }
  
  body {
    font-family: 'Eurostile', sans-serif;
    color: var(--neutral-dark);
    background-color: var(--neutral-white);
    margin: 0;
    /* Body padding removed */
  }
  
  main {
     display: block;
     padding-top: var(--navbar-height); /* Offset content below fixed navbar */
  }
  
  /* Navbar */
  .navbar {
      height: var(--navbar-height);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1030;
      background-color: rgba(255, 255, 255, 0.95) !important; /* Ensure navbar bg is slightly transparent */
      backdrop-filter: blur(5px);
  }
  .navbar-brand img {
    max-height: 45px; /* Slightly smaller logo */
  }
  .navbar-nav .nav-link {
    font-weight: 500;
    transition: color 0.3s;
    font-size: 0.9rem;
  }
  .navbar-nav .nav-link i {
      margin-right: 0.3rem;
  }
  .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { /* Updated selector for active */
    color: var(--primary-color);
  }
  
  /* Hero Section Specific */
  #home.hero-section {
    min-height: 100vh; /* Fill viewport */
    padding: 0 15px; /* Remove vertical padding, handled by flex */
    margin-top: calc(-1 * var(--navbar-height)); /* Pull up */
    position: relative;
    /* NOTE: Ensure this background image path is correct relative to your final deployment */
    background: url('../assets/backgrounds/background2.webp') no-repeat center center/cover;
    color: var(--neutral-white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #home.hero-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(50, 0, 0, 0.6); /* Darker overlay */
    z-index: 1;
  }
  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 2rem;
  }
  .hero-content h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Text shadow for readability */
  }
  .hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  }
  .hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
  }
  .hero-stats .stat {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
  }
  
  /* Section Defaults */
  section {
    min-height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content block vertically */
    padding: 5rem 15px; /* Consistent padding */
    position: relative;
    overflow-x: hidden; /* Prevent horizontal overflow */
  }
  /* Specific Backgrounds */
   #technology {
       /* NOTE: Ensure this background image path is correct */
       background: url('../assets/backgrounds/background4.jpg') no-repeat center center/cover;
       color: var(--neutral-white); /* Adjust text color for dark bg */
   }
    #technology .section-subheading { color: #ccc; }
    #technology .card { background-color: rgba(0,0,0, 0.5); color: var(--neutral-white); }
    #technology .card-title { color: var(--neutral-white); }
  
   #about {
        /* NOTE: Ensure this background image path is correct */
        background: url('../assets/backgrounds/background3.jpg') no-repeat center center/cover;
        color: var(--neutral-white);
   }
   #about .section-subheading { color: #ccc; }
   #about strong { color: #eee; }
   #about .card { background-color: rgba(0,0,0, 0.6); color: var(--neutral-white); }
  
  
  /* Container within sections */
   section > .container {
     width: 100%;
  }
   /* Style container for sections without image background */
   #products > .container,
   #features > .container,
   #news > .container,
   #partners > .container,
   #investors > .container,
   #careers > .container,
   #contact > .container {
      background-color: rgba(255, 255, 255, 0.92); /* White background for readability */
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0,0,0,0.08);
      padding: 2.5rem; /* More padding inside container */
   }
  
  
  /* Section Headings */
  .section-heading {
    font-size: 2.3rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: bold;
  }
  .section-subheading {
      text-align: center;
      margin-bottom: 2.5rem;
      font-size: 1.1rem;
      color: #555;
      max-width: 750px; /* Wider max-width */
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
  }
  
  
  /* Cards */
  .card {
    border: none;
    background: var(--neutral-white);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  }
  .card-body {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between; /* Helps align button at bottom */
     padding: 1.25rem;
  }
  .card-title {
      font-size: 1.1rem;
      margin-bottom: 0.75rem;
      font-weight: bold;
  }
  .card-text {
      flex-grow: 1; /* Allows text to push button down */
      font-size: 0.9rem;
      line-height: 1.5;
      margin-bottom: 1rem;
      color: #999; /* Slightly darker card text */
  }
  .card-img-top {
    object-fit: cover;
    height: 170px; /* Adjust height */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  
  /* Icon styling */
  .icon {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  /* Buttons */
  .btn {
      padding: 0.7rem 1.5rem;
      font-size: 0.9rem;
      font-weight: 500;
      border-radius: 50px;
      transition: all 0.3s ease;
      border: 1px solid transparent;
      display: inline-flex; /* Align icon and text */
      align-items: center;
      justify-content: center;
      cursor: pointer; /* Ensure pointer cursor for JS-handled buttons */
  }
  .btn i {
      line-height: 0; /* Better icon alignment */
  }
  .btn-lg {
     padding: 0.9rem 1.8rem;
     font-size: 1.05rem;
  }
  .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--neutral-white);
  }
  .btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--neutral-white);
  }
  .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: var(--neutral-white);
  }
  .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: var(--neutral-white);
  }
  .btn-outline-light {
      color: var(--neutral-white);
      border-color: var(--neutral-white);
  }
  .btn-outline-light:hover {
      color: var(--primary-color);
      background-color: var(--neutral-white);
      border-color: var(--neutral-white);
  }
  .btn-outline-primary {
      color: var(--primary-color);
      border-color: var(--primary-color);
  }
  .btn-outline-primary:hover {
      color: var(--neutral-white);
      background-color: var(--primary-color);
      border-color: var(--primary-color);
  }
  
  
  /* Footer */
  footer {
    background-color: var(--neutral-dark);
    color: var(--neutral-white);
    padding: 3rem 15px;
    position: relative;
    scroll-snap-align: end;
  }
  footer a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.3s;
  }
  footer a:hover {
      color: var(--neutral-white);
  }
  footer .list-unstyled li {
      margin-bottom: 0.5rem;
  }
  footer .social-icons i {
      font-size: 1.5rem;
      transition: color 0.3s;
  }
  .clickable-item {
    cursor: pointer;
  }
  /* Add hover effects for clickable items if desired */
  .clickable-item:hover {
      /* Example: Slight scale or opacity change */
      /* filter: brightness(1.1); */
      /* transform: scale(1.02); */
      /* Be mindful of elements inside changing (like cards) */
  }
  
  .fixed-bottom-right-logo {
      position: fixed;
      bottom: 10px;
      right: 10px;
      z-index: 1000; /* Ensure it's above general content, but below modals/nav if needed */
      opacity: 0.8;
      transition: opacity 0.2s ease-in-out; /* Add transition */
  }
  .fixed-bottom-right-logo:hover {
       opacity: 1.0; /* Become fully opaque on hover */
  }
  /* Ensure the image itself inside the container responds to clicks */
   .fixed-bottom-right-logo img {
       max-height: 140px;
       width: auto;
       display: block; /* Prevents extra space */
       /* pointer-events: auto; /* Explicitly allow pointer events on image if needed, usually default */
   }
  
  /* Style for list items that are clickable on dark backgrounds */
  .about-point-link.linked-item-on-dark:hover > div {
       background-color: rgba(255, 255, 255, 0.1);
       border-radius: 4px;
  }
  .team-member-link.linked-item-on-dark:hover {
      background-color: rgba(255, 255, 255, 0.1);
       border-radius: 8px;
  }
  
  /* Partner & Investor Logos */
   #partners .partner-logo img,
   .strategic-partner-logo img {
      max-height: 90px;
      width: auto;
      filter: grayscale(20%) opacity(0.8);
      transition: filter 0.3s ease;
      margin: 0.5rem 1rem;
  }
   #partners .partner-logo img:hover,
   .strategic-partner-logo img:hover {
      filter: grayscale(0%) opacity(1);
  }

  #investors .investor-logo img,
  .investor-logo img {
     max-height: 190px;
     width: auto;
     filter: grayscale(20%) opacity(0.8);
     transition: filter 0.3s ease;
     margin: 0.5rem 1rem;
  }
  #investors .investor-logo img:hover,
  .investor-logo img:hover {
     filter: grayscale(0%) opacity(1);
  }
  
  /* Team Section Styling */
  .team-member {
      text-align: center;
      margin-bottom: 1.5rem;
  }
  .team-member img {
      max-width: 120px;
      border-radius: 50%;
      margin-bottom: 0.75rem;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .team-member h5 {
      font-size: 1rem;
      margin-bottom: 0.2rem;
      color: inherit; /* Inherit color from parent (#about section) */
  }
   .team-member p {
       font-size: 0.85rem;
       color: inherit;
       opacity: 0.8;
   }
  
  
  /* Background particles */
  #tsparticles {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -10;
  }
  
  /* GLightbox Background */
  .goverlay {
      background: rgba(0, 0, 0, 0.85); /* Darker overlay for lightbox */
  }