/* main.css - Horizontal Scroll Section Updated + Responsive */

/* Lucide Icons Font Face */
@font-face {
    font-family: 'LucideIcons';
    src: url(https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.ttf) format('truetype');
  }
  .lucide { font-family: 'LucideIcons'; font-style: normal; font-weight: normal; font-variant: normal; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; }

  /* Base Body Styles */
  body {
      font-family: 'Inter', sans-serif;
      background-color: #F8F4EC; /* Main background color */
      color: #1f2937; /* Default text color (dark gray) */
      overflow-x: hidden; /* Prevent horizontal scroll on body */
  }

  /* --- Preloader Styles --- */
  #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #F8F4EC; /* Match body background */
      z-index: 9999; /* Ensure it's on top */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; /* Fade out transition */
  }
  #preloader-logo {
      transform: scale(1); /* Initial scale for logo */
      /* GSAP handles the pulse animation */
  }
  #preloader.hidden {
      opacity: 0;
      visibility: hidden; /* Hide after transition */
  }

  /* --- Initial Animation States (for GSAP) --- */
  .animate-element { opacity: 0; transform: translateY(30px); }
  .animate-left { opacity: 0; transform: translateX(-50px); }
  .animate-right { opacity: 0; transform: translateX(50px); }
  .animate-stagger-item { opacity: 0; transform: translateY(30px); }
  .animate-fade { opacity: 0; transform: none; } /* For elements only fading in */
  /* Reset transforms if multiple classes are used */
  .animate-left.animate-element, .animate-right.animate-element, .animate-stagger-item.animate-element, .animate-fade.animate-element { transform: none; }
  .animate-left { transform: translateX(-50px); }
  .animate-right { transform: translateX(50px); }
  .animate-stagger-item { transform: translateY(30px); }
  .animate-fade { transform: none; }
  header { opacity: 0; } /* Header fades in */
  .hero-word { display: inline-block; opacity: 0; transform: translateY(50px); will-change: transform, opacity; } /* Hero words animate up */
  .reveal-image { clip-path: inset(0 0 100% 0); will-change: clip-path; } /* Image reveal animation */
  .image-reveal-wrapper { overflow: hidden; border-radius: 0.5rem; } /* Container for reveal effect */


  /* --- Headline Font Styles --- */
  .hero-headline, .trust-headline, .we-will-headline, .value-prop-headline,
  .team-headline, .faq-headline, .final-cta-headline,
  .slide__heading /* Style new slide headings */ {
      font-family: 'Oswald', sans-serif; /* Bold, uppercase font */
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: -0.02em; /* Slightly tighter letter spacing */
  }
  .hero-headline {
      font-size: 10vw; /* Responsive font size based on viewport width */
      line-height: 1; /* Tight line height */
      font-weight: 800; /* Extra bold for hero */
      letter-spacing: -0.05em; /* Even tighter spacing for hero */
      position: relative; /* For positioning images */
      font-family: 'Oswald', sans-serif;
  }

  /* Hero Section Specific Styles */
  #hero-subtext, #hero-button {
      opacity: 0; /* Initial state for animation */
      transform: translateY(30px);
  }
  .hero-headline .img-placeholder-wrapper {
      display: inline-block; /* Allows positioning images within text flow */
      position: relative;
      vertical-align: baseline; /* Align with text */
  }
  .hero-headline .img-placeholder {
      position: absolute; /* Position relative to wrapper */
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      object-fit: cover;
      opacity: 0; /* Initial state for animation */
      transform: scale(0.8); /* Initial state for animation */
      width: 4vw; /* Responsive size */
      height: 4vw;
      min-width: 40px; /* Minimum size */
      min-height: 40px;
      border-radius: 9999px; /* Circular */
  }
  .hero-headline .img-placeholder.pos-l {
      top: 0;
      left: 50%;
      transform: translate(-50%, -20%) scale(0.8); /* Position top-center relative to letter */
  }
  .hero-headline .img-placeholder.pos-s {
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 20%) scale(0.8); /* Position bottom-center relative to letter */
  }

  /* Squiggle Style */
  .squiggle {
      width: 120px;
      height: auto;
      stroke: #6C63FF; /* Accent color */
      stroke-width: 3;
      fill: none;
      stroke-dasharray: 500; /* For GSAP animation */
      stroke-dashoffset: 500; /* Initial state for animation */
  }

  /* Testimonial Slider Styles */
  .testimonial-card {
      width: 100%; /* Each card takes full width of the container */
      flex-shrink: 0; /* Prevent cards from shrinking */
      box-sizing: border-box;
  }

  /* --- Horizontal Scroll Section Styles --- */
  .horizontal-scroll-section {
      padding-top: 5rem;
      padding-bottom: 5rem;
      overflow: hidden;
  }
  #horizontal-scroll-container {
      height: 100vh;
      width: 100%;
      overflow: hidden;
      position: relative;
  }
  #horizontal-scroll-track {
      display: flex;
      height: 100%;
      width: max-content;
      position: relative;
      will-change: transform;
  }
  .slide {
      width: 100vw;
      height: 100vh;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 4rem; /* Default padding for larger screens */
      box-sizing: border-box;
      position: relative;
  }
  .slide__outer { width: 100%; }
  .slide__inner { width: 100%; }
  .slide__content {
      max-width: 700px; /* Default max width */
      width: 100%;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 0.75rem;
      padding: 2.5rem; /* Default padding */
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }
  .slide__container { /* Merged into slide__content */ }
  .slide__heading {
      font-size: 3rem; /* Default heading size */
      margin-bottom: 1rem;
      color: #1f2937;
  }
  .slide__description {
      font-size: 1rem; /* Default description size */
      color: #4b5563;
      line-height: 1.6;
      margin-bottom: 1.5rem;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
  }
  .slide__img-cont {
      margin: 0 auto;
      max-width: 450px; /* Default image container width */
      border-radius: 0.5rem;
      overflow: hidden;
      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  }
  .slide__img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 55vh; /* Default image height */
      object-fit: cover;
  }

  /* --- Responsive Adjustments for Horizontal Scroll --- */

  /* Medium screens (e.g., tablets) */
  @media (max-width: 768px) {
      .slide {
          padding: 2rem 2rem; /* Reduce horizontal padding */
      }
      .slide__content {
          max-width: 600px; /* Adjust max width */
          padding: 2rem; /* Reduce padding */
      }
      .slide__heading {
          font-size: 2.5rem; /* Reduce heading size */
      }
      .slide__description {
          font-size: 0.95rem; /* Slightly smaller description */
          margin-bottom: 1.25rem;
      }
      .slide__img-cont {
          max-width: 400px; /* Reduce image container width */
      }
      .slide__img {
           max-height: 50vh; /* Slightly reduce max image height */
      }
  }

  /* Small screens (e.g., mobile phones) */
  @media (max-width: 640px) {
        .horizontal-scroll-section {
            padding-top: 3rem; /* Less padding on mobile */
            padding-bottom: 3rem;
        }
      .slide {
          padding: 1.5rem 1rem; /* Further reduce padding */
      }
      .slide__content {
          max-width: 90%; /* Allow content to take more width */
          padding: 1.5rem; /* Further reduce padding */
      }
      .slide__heading {
          font-size: 2rem; /* Further reduce heading size */
          margin-bottom: 0.75rem;
      }
      .slide__description {
          font-size: 0.9rem; /* Further reduce description size */
          margin-bottom: 1rem;
          max-width: 95%; /* Allow description to take more width */
      }
      .slide__img-cont {
          max-width: 300px; /* Reduce image container width */
      }
       .slide__img {
           max-height: 40vh; /* Reduce max image height for mobile */
      }
  }

  /* --- End Horizontal Scroll Styles --- */

  /* Team Section Info Box Styles */
  .team-info-box {
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 0.5rem;
      padding: 1rem;
      background-color: #F8F4EC;
      transition: box-shadow 0.2s ease-in-out;
  }
  .team-info-box:hover {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  }

  /* FAQ Accordion Styles */
  .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      text-align: left;
      padding: 1rem 0;
      cursor: pointer;
      background: none;
      border: none;
      font-weight: 700;
      color: inherit;
  }
  .faq-question span:first-child { padding-right: 1rem; }
  .faq-icon {
      font-size: 1.5rem;
      color: #6C63FF;
      transition: transform 0.3s ease-in-out;
      flex-shrink: 0;
  }
  .faq-item-js.active .faq-icon { transform: rotate(45deg); }
  .faq-answer {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      padding: 0;
      transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, opacity 0.3s ease-in-out;
      color: #4b5563;
      font-size: 0.9rem;
      line-height: 1.6;
  }
  .faq-answer p { padding-bottom: 1rem; }
  .faq-item-js.active .faq-answer {
      opacity: 1;
      padding-top: 0.5rem;
      padding-bottom: 1rem;
      /* max-height is set by JS */
  }

  /* Mobile Menu Styles */
  .mobile-menu {
      height: 0;
      opacity: 0;
      overflow: hidden;
      visibility: hidden;
  }

  /* Navigation Link Styles */
  .nav-link {
      position: relative;
      transition: color 0.2s ease-in-out;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      font-weight: 500;
  }
  .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 1px;
      display: block;
      margin-top: 2px;
      right: 0;
      background: #6C63FF;
      transition: width 0.3s ease;
  }
  .nav-link:hover::after {
      width: 100%;
      left: 0;
      background-color: #6C63FF;
  }
  .nav-link:hover { color: #1f2937; }

  /* Button Base Styles & Transitions */
  .btn {
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      user-select: none;
      border: 1px solid transparent;
      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
      text-decoration: none;
  }

  /* Enhanced Hover Effects for Buttons */
  .btn-primary:hover, .btn-secondary:hover {
      transform: scale(1.03);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  /* Testimonial Arrow Styles */
  .testimonial-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 1px solid #e5e7eb;
      border-radius: 9999px;
      color: #6b7280;
      background-color: white;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
  }
  .testimonial-arrow:hover {
      background-color: #f3f4f6;
      border-color: #d1d5db;
      color: #1f2937;
      transform: scale(1.1);
  }

  /* ===================== IMPROVEMENTS ===================== */
  /* Responsive Hero Headline Improvements */
  .hero-headline {
      font-size: clamp(2.5rem, 10vw, 6rem); /* More controlled responsive sizing */
      line-height: 1.1; /* Slightly improved readability */
      margin-bottom: 1.5rem; /* Consistent spacing */
  }

  /* Better hero image placeholder scaling */
  @media (max-width: 640px) {
      .hero-headline .img-placeholder {
          width: 40px; /* Fixed size on small screens */
          height: 40px;
          min-width: 40px;
          min-height: 40px;
      }
  }

  @media (min-width: 641px) and (max-width: 1024px) {
      .hero-headline .img-placeholder {
          width: 3.5vw; /* Slightly smaller on medium screens */
          height: 3.5vw;
          min-width: 40px;
          min-height: 40px;
      }
  }

  /* Improved Mobile Menu Styles */
  .mobile-menu {
      height: 0;
      opacity: 0;
      overflow: hidden;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease; /* Smoother transition */
  }

  .mobile-menu.active {
      height: auto;
      opacity: 1;
      visibility: visible;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
  }

  /* Mobile menu button improvements */
  #mobile-menu-button {
      position: relative;
      z-index: 20;
      transition: background-color 0.2s ease;
  }

  #mobile-menu-button:hover {
      background-color: rgba(0, 0, 0, 0.05);
  }

  #mobile-menu-button:focus {
      outline: 2px solid #6C63FF;
      outline-offset: 2px;
  }

  /* Mobile menu link improvements */
  .mobile-menu .nav-link {
      display: block;
      padding: 0.5rem 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .mobile-menu .nav-link:last-child {
      border-bottom: none;
  }