html {
          box-sizing: border-box;
      }

      *,
      *::before,
      *::after {
          box-sizing: inherit;
      }

      /* Global styles */
      body {
          margin: 0;
          background-color: #000;
          font-family: 'Roboto', sans-serif;
          color: white;
          box-sizing: border-box;
          /* Ensure padding and border are included in element's total width and height */
          overflow-x: hidden;
          /* Prevent horizontal scrolling on the body */
      }

      ::selection {
          background: #ed1e24;
          color: white;
      }

      /* Loading overlay */
      #loading-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #000;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;
          transition: opacity 0.5s ease-out;
          opacity: 1;
      }

      #loading-overlay.hidden {
          opacity: 0;
          pointer-events: none;
          /* Allow clicks through once hidden */
      }

      .spinner {
          border: 4px solid rgba(255, 255, 255, 0.3);
          border-top: 4px solid #a60000;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 1s linear infinite;
      }

      @keyframes spin {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }

      /* ================= Navbar Base Styles ================= */

      .navbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 24px;
          background-color: #000;
          border-bottom: 1px solid #222;
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 1000;
          box-sizing: border-box;
      }

      .left-section {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-left: 30px;
      }

      .logo {
          font-weight: 600;
          font-size: 1.15rem;
          color: white;
          text-decoration: none;
      }

      .navbar-left .logo {
          display: flex;
          align-items: center;
          margin-left: 20%;
          height: 40px;
      }

      .nav-links {
          display: flex;
          gap: 24px;
          margin-right: auto;
          padding-left: 80px;
      }

      .nav-links a {
          text-decoration: none;
          color: #ffffffa6;
          font-weight: 500;
          font-size: 0.88rem;
          padding: 8px 12px;
          display: inline-block;
          transition: color 0.2s ease;
      }

      .nav-link-button {
          background: none;
          border: none;
          color: white;
          font-weight: 500;
          font-size: 0.88rem;
          padding: 8px 12px;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          cursor: pointer;
          transition: color 0.2s ease;
      }

      .nav-link-button:hover {
          color: #a60000;
      }

      .nav-link-button .arrow {
          font-size: 0.7em;
          transform: translateY(1px);
      }

      .right-section {
          display: flex;
          align-items: center;
          gap: 24px;
          margin-right: 3%;
      }

      .nav-links ul {
          display: flex;
          list-style: none;
          gap: 24px;
          margin: 0;
          padding: 0;
          flex-direction: row;
      }

      .nav-links li {
          position: relative;
      }

      .nav-links .dropdown-menu {
          display: flex;
          opacity: 0;
          visibility: hidden;
          position: absolute;
          top: 100%;
          left: 0;
          background-color: #1a1a1a;
          color: white;
          padding: 24px 32px;
          gap: 32px;
          border-radius: 16px;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
          min-width: 600px;
          z-index: 1000;
          margin-top: 10px;
          transition: opacity 0.2s ease, visibility 0.2s ease;
      }

      @media (min-width: 1024px) {
          .nav-links .dropdown:hover .dropdown-menu {
              opacity: 1;
              visibility: visible;
          }
      }

      .dropdown-column a {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 14px;
          font-weight: 400;
      }


      .dropdown-column a .icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 36px;
          height: 36px;
          background-color: #1a1a1a;
          border: 1px solid #333;
          border-radius: 8px;
          flex-shrink: 0;
          transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
          font-size: 20px;
          color: #ccc;
      }

      .dropdown-column a .icon img {
          width: 20px;
          height: 20px;
          object-fit: contain;
          display: block;
      }

      .dropdown-column a:hover .icon {
          border-color: #ffffff;
          color: white;
      }

      .story-snippet {
          font-size: 12.5px;
          color: #bbb;
          line-height: 1.4;
          margin-top: 4px;
      }

      .disabled {
          color: #777;
          font-style: italic;
          font-size: 13px;
          margin-top: 4px;
          display: block;
      }

      .dropdown-column hr {
          border: none;
          height: 1px;
          background-color: #333;
          margin: 8px 0;
      }


      .nav-links .dropdown:hover>.nav-link-button,
      .nav-links a:hover {
          color: #ffffff;
          cursor: pointer;
      }

      .solutions-main-options {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .solution-item {
          display: flex;
          align-items: center;
          padding: 12px 14px;
          border-radius: 8px;
          text-decoration: none;
          color: white;
          transition: background-color 0.2s ease, transform 0.2s ease, border 0.2s ease;
          cursor: pointer;
          border: 1px solid transparent;
          min-height: 64px;
      }

      .solution-item.selected {
          background-color: #3a3a3a;
          border-color: #a60000;
          box-shadow: 0 0 0 2px #a60000;
      }

      .solution-item .icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          background-color: #1a1a1a;
          border: 1px solid #333;
          border-radius: 8px;
          margin-right: 12px;
          flex-shrink: 0;
          transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
          font-size: 24px;
          color: #a60000;
      }

      .solution-item .icon img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
      }

      .solution-item:hover .icon {
          border-color: #ffffff;
          color: white;
      }

      .solution-item h4 {
          font-size: 15px;
          font-weight: 500;
          color: white;
          margin: 0;
      }

      .solution-item p {
          font-size: 12.5px;
          color: #bbb;
          margin: 4px 0 0;
          line-height: 1.4;
      }

      .solutions-blogs {
          border-left: 1px solid #333;
          padding-left: 32px;
          gap: 10px;
          display: flex;
          flex-direction: column;
      }

      .solutions-blogs h4 {
          font-size: 14.5px;
          font-weight: 600;
          color: white;
          margin-bottom: 12px;
      }

      .solutions-blogs a {
          color: #ccc;
          text-decoration: none;
          font-size: 13.5px;
          line-height: 1.3;
          transition: color 0.2s ease;
      }

      .solutions-blogs a:hover {
          color: #e0e0e0;
      }

      .blog-snippet {
          font-size: 11.5px;
          color: #888;
          font-style: italic;
      }

      .resource-link {
          text-decoration: none;
          color: #ffffffa6;
          font-weight: 500;
          font-size: 0.88rem;
          transition: color 0.2s ease;
      }

      .resource-link:hover {
          color: #fff;
      }

      .cta-button {
          background: rgba(255, 0, 0, 0.48);
          color: #fff;
          border: 1px solid #ff0000;
          border-radius: 6px;
          padding: 6px 12px;
          font-weight: 500;
          cursor: pointer;
          white-space: nowrap;
          transition: background 0.3s ease, box-shadow 0.3s ease;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .cta-button:hover {
          background: rgba(255, 0, 0, 0.65);
          box-shadow:
              inset 0 1px 1px rgba(255, 255, 255, 0.3),
              0 2px 4px rgba(0, 0, 0, 0.25);
      }

      .hamburger {
          display: none;
          font-size: 1.5rem;
          background: none;
          border: none;
          color: white;
          cursor: pointer;
          z-index: 1100;
      }

      /* ================= Mobile Styles ================= */

      @media (max-width: 1100px) {
          .left-section {
              margin-left: 10px;
          }

          .navbar-left .logo {
              margin-left: 10px;
          }

          .nav-links,
          .right-section .resource-link,
          .right-section .cta-button {
              display: none;
          }

          .nav-links {
              position: absolute;
              top: 60px;
              left: 0;
              right: 0;
              background-color: #000;
              flex-direction: column;
              align-items: flex-start;
              padding: 0;
              gap: 0;
              border-top: 1px solid #222;
              z-index: 1000;
              width: 100%;
              box-sizing: border-box;
              overflow-y: auto;
              max-height: calc(100vh - 60px);
              -webkit-overflow-scrolling: touch;
          }

          .nav-links.open {
              display: flex;
          }

          .hamburger {
              display: block;
          }

          .right-section {
              gap: 12px;
              margin-right: 10px;
          }

          .nav-links ul {
              flex-direction: column;
              gap: 0;
              width: 100%;
              padding: 0;
              margin: 0;
          }

          .nav-links li {
              width: 100%;
              border-bottom: 1px solid #222;
          }

          .nav-links li:last-child {
              border-bottom: none;
          }

          .nav-links a {
              padding: 16px 24px;
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              gap: 10px;
              font-size: 0.95rem;
              font-weight: 500;
          }

          .nav-link-button {
              padding: 16px 24px;
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 0.95rem;
              font-weight: 500;
          }

          .nav-links .dropdown-menu {
              position: relative;
              width: 100%;
              min-width: unset;
              box-shadow: none;
              border-radius: 0;
              padding: 0;
              margin-top: 0;
              flex-direction: column;
              display: none;
              opacity: 1;
              visibility: visible;
              background-color: #1a1a1a;
              padding: 16px 0;
          }

          .nav-links .dropdown.open .dropdown-menu {
              display: flex;
          }

          .dropdown-column {
              width: 100%;
          }

          .dropdown-column a,
          .dropdown-column h4,
          .dropdown-column span,
          .dropdown-column p {
              padding-left: 24px;
              padding-right: 24px;
              text-align: left;
          }

          .dropdown-column a {
              gap: 10px;
              padding-top: 8px;
              padding-bottom: 8px;
              font-size: 0.9rem;
              font-weight: 400;
              align-items: center;
          }

          .dropdown-column a .icon,
          .solution-item .icon {
              width: 36px;
              height: 36px;
              background-color: transparent;
              border: 1px solid #333;
              /* ✅ Border added for mobile */
              border-radius: 8px;
              margin-right: 0;
              font-size: 20px;
              color: white;
              transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
          }

          .dropdown-column a:hover .icon,
          .solution-item:hover .icon {
              background-color: transparent;
              border-color: #ffffff;
              color: #a60000;
          }

          .dropdown-column h4 {
              margin-bottom: 8px;
              color: #bbb;
              font-size: 0.85rem;
              text-transform: uppercase;
              font-weight: 500;
              padding-top: 16px;
          }

          .story-snippet {
              margin-bottom: 8px;
              display: block;
              font-size: 0.8rem;
          }

          .disabled {
              padding-bottom: 8px;
              font-size: 0.8rem;
          }

          .solutions-main-options {
              gap: 0;
          }

          .solutions-blogs {
              border-left: none;
              padding-left: 0;
              padding-top: 24px;
          }

          .solutions-blogs h4 {
              margin-bottom: 8px;
              font-size: 0.9rem;
          }

          .solution-item {
              padding: 12px 24px;
              border-radius: 0;
              background-color: transparent;
              box-shadow: none;
              border: none;
              min-height: unset;
              display: flex;
              align-items: center;
              gap: 10px;
          }

          .solution-item h4 {
              color: white;
              font-size: 0.95rem;
              font-weight: 600;
          }

          .solution-item p {
              color: #bbb;
              font-size: 0.8rem;
          }

          .solutions-blogs a {
              padding: 8px 24px;
              display: block;
              color: #ccc;
              font-size: 0.85rem;
          }

          .solutions-blogs a:hover {
              color: white;
          }

          .solutions-blogs .blog-snippet {
              padding: 0 24px 8px;
              font-size: 0.7rem;
          }

          .mobile-footer-buttons {
              display: flex;
              flex-direction: column;
              gap: 16px;
              padding: 24px;
              background-color: #000;
              border-top: 1px solid #222;
              position: sticky;
              bottom: 0;
              width: 100%;
              box-sizing: border-box;
          }

          .mobile-footer-buttons .cta-button,
          .mobile-footer-buttons .resource-link {
              display: block;
              width: 100%;
              text-align: center;
              padding: 12px 0;
              border-radius: 8px;
              text-decoration: none;
              font-weight: 600;
          }

          .mobile-footer-buttons .resource-link {
              background-color: #333;
              color: white;
          }

          .mobile-footer-buttons .cta-button {
              background-color: #a60000;
              color: white;
          }
      }

      @media (max-width: 768px) {
          .navbar {
              padding: 8px 10px;
          }

          .logo {
              font-size: 1rem;
          }

          .right-section {
              gap: 8px;
          }

          .nav-links a,
          .nav-link-button,
          .solution-item,
          .solutions-blogs a {
              padding: 12px 16px;
          }

          .dropdown-column a,
          .dropdown-column h4,
          .dropdown-column p {
              padding-left: 16px;
              padding-right: 16px;
          }

          .dropdown-column a {
              padding-top: 8px;
              padding-bottom: 8px;
          }

          .dropdown-column span {
              padding-left: 16px;
              padding-right: 16px;
          }

          .solutions-blogs .blog-snippet {
              padding: 0 16px 8px;
          }

          .mobile-footer-buttons {
              padding: 16px;
          }
      }



      .container {
          max-width: 100%;
          margin: 0 auto;
          padding: 0;
          width: 100%;
          box-sizing: border-box;
          display: flex;
          /* Use flex to control content layout */
          flex-direction: column;
          /* Stack content vertically */

          /* Center content horizontally */
      }

      /* Hero Section */
      .hero {
          text-align: center;
          padding: 4rem 1rem;
          margin-top: 3%;
          min-height: calc(100vh - - 5rem);
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
      }

      .hero h1 {
          font-family: 'Roboto', sans-serif;
          font-weight: 600;
          font-style: normal;
          margin: 0;
          text-align: center;
          word-spacing: 0.5rem;

          font-size: clamp(2.5rem, 10vw, 10rem);
          /* Responsive from 2.5rem to 10rem */
          line-height: 1.2;
          /* Adjusted for better readability on large sizes */
          padding: 0 1rem;
          /* Optional: Padding to prevent overflow on mobile */
          white-space: normal;
          /* Ensures wrapping on smaller screens */
      }


      .hero h2 {
          color: #ff7e79;
          font-size: 1.8rem;
          /* Adjusted for mobile */
          margin: 1rem 0;
      }

      .hero p {
          max-width: 800px;
          margin: 0.5rem auto 2rem;
          color: #aaa;
          font-size: 1rem;
          /* Adjusted for mobile */
          line-height: 1.5;
      }

      .ai-visual {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 2rem;
      }

      .video-container {
          max-width: 1600px;
          width: 100%;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      }

      .video-container video {
          width: 100%;
          height: auto;
          display: block;
      }



      .cta-buttons {
          display: flex;
          justify-content: center;
          gap: 0.5rem;
          margin: 3rem 0;
          /* Adjusted margin */
          flex-wrap: wrap;
          /* Allow buttons to wrap */

      }

      .btn-red,
      .btn-outline {
          padding: 0.7rem 1.5rem;
          border-radius: 6px;
          /* More consistent with your previous CTA button */
          font-weight: 500;
          cursor: pointer;
          padding: 6px 12px;
          transition:
              background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
      }

      /* === RED FILLED BUTTON === */
      .btn-red {
          background: rgba(255, 0, 0, 0.48);
          /* Matches XD style */
          color: #ffffff;
          border: 1px solid #ff0000;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .btn-red:hover {
          background: rgba(255, 0, 0, 0.65);
          box-shadow:
              inset 0 1px 1px rgba(255, 255, 255, 0.3),
              0 2px 4px rgba(0, 0, 0, 0.25);
      }

      /* === OUTLINE BUTTON === */
      .btn-outline {
          background-color: #1a1a1a;
          /* Subtle dark tone */
          color: #f0f0f0;
          border: 1px solid #555;
      }

      .btn-outline:hover {
          background-color: #2a2a2a;
          /* Slightly lighter */
          border-color: #777;
          /* Light gray border */
          color: #ffffff;
          box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
          /* Soft glow */
      }


      /* Gradient Container & Transparent Card */
      .gradient-container {
          width: 100vw;
          height: 80vh;
          /* Height is 70vh */
          background: linear-gradient(to top, #FF0000 0%, #000000 50%);
          display: flex;
          justify-content: center;
          align-items: flex-end;
          position: relative;
      }

      .transparent-card {
          width: 85%;
          height: 90%;
          background-color: rgba(255, 255, 255, 0.1);
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          border: 1px solid rgba(255, 255, 255, 0.2);
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
      }

      .transparent-card img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          border-radius: 8px;
      }

      /* Buttons Section (below gradient) */
      .buttons-outer-wrapper {
          background-color: black;
          border-radius: 9999px;
          padding: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 40px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
          border: 1px solid #333;
          width: fit-content;
          max-width: 95%;
          margin-left: auto;
          margin-right: auto;
      }

      .button-container {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 5px;
      }

      .action-button {
          background-color: black;
          color: white;
          padding: 10px 15px;
          border-radius: 9999px;
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 500;
          transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
          flex-shrink: 0;
          text-align: center;
          border: 1px solid transparent;
          box-shadow: none;
          cursor: pointer;
      }

      .action-button.active {
          background-color: #33333344;
          /* border-color: #ffffff; */
      }

      .action-button:hover {
          background-color: #3a3a3a70;
          transform: translateY(-1px);
      }

      .button-description {
          color: white;
          font-size: 22px;
          font-weight: 300;
          text-align: center;
          max-width: 1200px;
          margin: 30px auto 0 auto;
          padding: 0 20px;
          line-height: 1.5;
          min-height: 50px;
          opacity: 90%;
      }

      /* Media Queries for Buttons Section */
      @media (max-width: 768px) {
          .gradient-container {
              height: 60vh;
          }

          .transparent-card {
              width: 95%;
              height: 70%;
              border-top-left-radius: 15px;
              border-top-right-radius: 15px;
          }

          .buttons-outer-wrapper {
              background-color: transparent;
              border-radius: 0;
              padding: 0;
              box-shadow: none;
              border: none;
              width: 100%;
              max-width: none;
              margin-top: 20px;
          }

          .button-container {
              padding: 0px 15px;
              /* Adjusted horizontal padding */
              gap: 8px;
              width: 100%;
          }

          .action-button {
              padding: 8px 12px;
              font-size: 0.8rem;
              min-width: unset;
              max-width: 100%;
              flex-basis: auto;
              background-color: #2a2a2a;
              border: 2px solid #444;
              border-radius: 9999px;
          }

          .action-button.active {
              background-color: #3a3a3a;
              border-color: #ffffff;
          }

          .button-description {
              font-size: 0.9rem;
              margin-top: 20px;
              padding: 0 15px;
          }
      }

      @media (max-width: 480px) {
          .buttons-outer-wrapper {
              flex-direction: column;
              padding: 6px;
              gap: 8px;
              border-radius: 20px;
              /* Less extreme roundness for tighter screens */
              margin-top: 24px;
          }

          .button-container {
              flex-direction: column;
              gap: 6px;
              width: 80%;
              align-items: center;
          }

          .action-button {
              width: 100%;
              font-size: 0.85rem;
              padding: 10px 12px;
              border-radius: 20px;
          }

          .button-description {
              font-size: 16px;
              line-height: 1.4;
              padding: 0 12px;
              margin-top: 20px;
          }
      }



      /* Why Spanner Section */
      .spanner-heading {
          font-size: 2.5rem;
          /* Equivalent to text-2xl */
          font-weight: inherit;
          text-align: center;
          margin-bottom: 1rem;
          margin-top: 4rem;
      }

      .spanner-paragraph {
          font-size: 1.0rem;
          /* Equivalent to text-lg */

          font-weight: lighter;
          /* Equivalent to font-medium */
          text-align: center;
          opacity: 80%;
          max-width: 52rem;
          /* Equivalent to max-w-2xl */
          margin: 0 auto 2rem auto;
          /* Centered with auto margins, mb-8 */
          padding: 0 1rem;
          /* px-4 */
      }

      .feature-buttons-container {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 1rem;
          /* gap-4 */
          margin-bottom: 2rem;
          /* mb-8 */
          padding: 0 1rem;
          /* px-4 */
      }

      .feature-button {
          padding: 0.75rem 1.5rem;
          /* py-3 px-6 */
          border: 1px solid #4B5563;
          /* border border-gray-600 */
          color: #FFFFFF80;
          opacity: 1;
          /* text-white */
          border-radius: 9999px;
          /* rounded-full */
          transition: all 0.3s ease-in-out;
          /* transition-all duration-300 ease-in-out */
          background-color: transparent;
          /* bg-transparent */
          cursor: pointer;
          /* cursor-pointer */
      }

      .feature-button:hover {
          border-color: white;
          /* hover:border-white */
      }

      .feature-button.btn-active {
          border-color: white;
          color: white;
          /* active:border-white */
      }

      /* Styles for the original points container */
      .points-container {
          display: flex;
          flex-wrap: wrap;
          /* Allow items to wrap on smaller screens */
          justify-content: center;
          /* Center items */
          gap: 0.5rem;
          /* Reduced gap between items */
          width: 100%;
          max-width: 74rem;
          /* Equivalent to max-w-6xl */
          overflow-x: auto;
          /* Enable horizontal scrolling if content overflows */
          scrollbar-width: none;
          /* Hide scrollbar for Firefox */
          margin: 0 auto 4rem auto;
          /* Centered with auto margins, mb-16 */
          padding: 0 1rem;
          /* Added padding for smaller screens */
      }

      .points-container::-webkit-scrollbar {
          display: none;
          /* Hide scrollbar for Webkit browsers */
      }

      .points-container>div {
          /* Styling for individual points within the original container */
          flex-shrink: 0;
          display: flex;
          align-items: center;
          padding: 0.5rem 0.75rem;
          /* py-2 px-3 */
          border-radius: 0.5rem;
          /* rounded-lg */
          margin-bottom: 0.25rem;
          /* Reduced margin-bottom for wrapped items */

      }

      .points-container svg {
          width: 1.5rem;
          /* Increased size for tick */
          height: 2.5rem;
          /* Increased size for tick */
          color: #a60000;
          /* Custom red color */
          margin-right: 0.5rem;
          /* mr-2 */
      }

      .points-container span {
          font-size: 1rem;
          /* text-base */
          white-space: normal;
          /* Allow text to wrap */
          line-height: 1.3;
      }

      /* Styles for the transparent card container */
      .spanner-feature-card {
          width: 90%;
          /* Responsive width */
          max-width: 1233px;
          /* Max width to control size on large screens */
          min-height: 450px;
          /* Set a minimum height for consistent card height */
          height: auto;
          /* Height adjusts to content if it exceeds min-height */
          background-color: rgba(255, 255, 255, 0.027);
          /* Slightly transparent white */
          border-radius: 20px;
          /* Applied to all four sides */
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
          /* Box shadow */
          backdrop-filter: blur(2px);
          /* Backdrop filter for blur effect */
          -webkit-backdrop-filter: blur(2px);
          /* Webkit prefix for backdrop filter */
          border: 1px solid rgba(255, 255, 255, 0.2);
          /* Border */
          box-sizing: border-box;
          /* Include padding and border in element's total width and height */
          margin: 2rem auto;
          /* Center the card and add vertical margin */
          padding-left: 2rem;
          padding-right: 2rem;


          /* Grid layout for three equal columns */
          display: grid;
          grid-template-columns: 1fr 2fr 1fr;
          /* Three equal columns */
          gap: 0px;
          /* Gap between grid items */
          align-items: stretch;
          /* Ensure grid items stretch to fill container height */
      }



      /* Styles for the text columns within the card */
      .spanner-feature-text-left,
      .spanner-feature-text-right,
      .spanner-feature-image-middle {
          /* Apply padding to all columns */
          display: flex;
          flex-direction: column;
          /* Ensure content within each column stacks vertically */
          justify-content: flex-start;
          /* Aligned to the start (top) of the container */
          align-items: flex-start;
          /* Align text to the left */
          height: 100%;
          /* Ensure columns take full height of the card */
          padding-top: 2rem;
          /* Add vertical padding to the column content */
          padding-bottom: 2rem;
          /* Add vertical padding to the column content */
      }

      /* Add vertical border to the right of the first text column and padding */
      .spanner-feature-text-left {
          border-right: 1px solid rgba(255, 255, 255, 0.2);
          padding-right: 1rem;
          /* Added padding to separate text from line */
      }

      /* Add vertical border to the right of the image column and padding */
      .spanner-feature-image-middle {
          border-right: 1px solid rgba(255, 255, 255, 0.2);
          padding-left: 0;
          /* Added padding to separate content from line */
          padding-right: 0;
          /* Added padding to separate content from line */
      }

      /* Add padding to the right text column */
      .spanner-feature-text-right {
          padding-left: 1rem;
          /* Added padding to separate text from line */
      }


      /* Styles for paragraphs within the card (no checkmark styling) */
      .spanner-feature-card p {
          font-size: 1.2rem;
          line-height: 1.9;
          /* Adjusted line-height */
          text-align: left;
          /* Aligned left */
          letter-spacing: 0px;
          color: rgba(255, 255, 255, 0.5);

          /* Applied specified color with opacity */
          margin-bottom: 1rem;
          /* Add some spacing between paragraphs */
      }

      .spanner-feature-card p:last-child {
          margin-bottom: 0;
          /* No margin after the last paragraph */
      }


      /* Styles for the image column within the card */
      .spanner-feature-image-middle {
          display: flex;
          /* Ensure inner flex properties apply */
          justify-content: center;
          align-items: center;
          height: 100%;
          /* Ensure image column takes full height */
      }

      .spanner-feature-card img {
          max-width: 100%;
          height: 100%;
          /* Image fills the height of its container */
          object-fit: cover;
          /* Ensures the image covers the area, cropping if necessary */
          display: block;
          margin: 0 auto;
          /* Center the image */
          border-radius: 0.5rem;
          /* Slightly rounded corners for the image */
      }

      .hidden {
          display: none;
      }

      /* Styles for the section below the card */
      .bottom-features-container {
          display: flex;
          flex-wrap: wrap;
          /* Allow items to wrap on smaller screens */
          justify-content: center;
          gap: 8rem;
          /* Increased space between items */
          margin-top: 4rem;
          /* Margin from the card above */
          padding: 0 1rem;
          /* Horizontal padding */
      }

      .bottom-feature-item {
          font-size: 1.125rem;
          /* text-lg */
          font-weight: 400;
          /* font-medium */
          color: #FFFFFF80;
          text-align: center;
          opacity: 1;
      }

      /* Horizontal line before footer - now truly end-to-end */
      .pre-footer-line {
          border-top: 1px solid rgba(255, 255, 255, 0.2);
          /* Subtle white line */
          margin-top: 2rem;
          /* Space above the line */
          margin-bottom: 2rem;
          /* Space below the line */

          /* Ensure it spans full width of the viewport */
          width: 100vw;
          /* Span the entire viewport width */
          margin-left: calc(50% - 50vw);
          /* Pull element left to align with viewport edge */
          box-sizing: border-box;
          /* Include padding/border in width calculation */
          min-height: 1px;
          /* Ensure it's rendered visually */
      }

      /* Footer styles - Mobile-first approach (styles applied by default for screens < 768px) */
      .site-footer {
          background-color: #000000;
          color: #ffffff;
          display: grid;
          /* --- REVISED: Single column for main sections on mobile/tablet --- */
          grid-template-columns: 1fr;
          /* Stacks logo/social and main content vertically */
          row-gap: 2.5rem;
          /* Vertical gap between sections on mobile */
          padding: 3rem 1.5rem 1.5rem;
          /* Horizontal padding for mobile */

          margin-top: 5rem;
          /* Adjust top margin */

          align-items: flex-start;
          /* Align sections to the top */
          /* Removed column-gap as it's now a single-column grid at this level */
      }

      /* --- REVISED: Mobile-first content columns grid (applies to both mobile and tablet by default) --- */
      .footer-main-content-right {
          display: grid;
          /* Use grid for internal columns */
          grid-template-columns: 1fr 1fr;
          /* Two columns for content on mobile/tablet */
          column-gap: 0.5rem;
          /* Gap between content columns on mobile */
          row-gap: 1.5rem;
          /* Gap between rows of content columns on mobile */
          align-items: flex-start;
          /* Align the columns within the wrapper */
          padding-bottom: 5rem;
          /* Reduced padding-bottom for mobile to make it more compact */
      }

      /* Responsive adjustments for Tablet screens (768px and above) */
      @media (min-width: 768px) {
          .site-footer {
              /* Maintain single column for tablet, just like mobile */
              grid-template-columns: 1fr;
              row-gap: 2.5rem;
              /* Vertical gap between rows */
              padding: 3rem 4rem 1.5rem;
              /* Adjusted horizontal padding for tablet */
              /* Removed column-gap as it's a single-column grid at this level */
          }

          .footer-left-content {
              align-items: flex-start;
              /* Left-align content within this section */
          }

          .footer-main-content-right {
              /* Reinforce 2-column grid for tablet with potentially larger gaps */
              display: grid;
              grid-template-columns: 1fr 1fr;
              column-gap: 2.5rem;
              /* Wider gap for tablet */
              row-gap: 2.5rem;
              /* Wider row gap for tablet */
              padding-bottom: 10rem;
              /* Added padding-bottom to increase height for tablet */
          }


      }

      /* Responsive adjustments for Desktop/Large screens (1024px and above) */
      @media (min-width: 1024px) {
          .site-footer {
              /* Revert to two columns for desktop: auto for logo/social, 1fr for content columns */
              grid-template-columns: auto 1fr;
              column-gap: 8rem;
              /* Increased horizontal gap between logo and main content right */
              row-gap: 0;
              /* No vertical gap in a single row layout */
              padding: 4rem 4rem 2rem;
              /* Adjusted horizontal padding for desktop */

              max-width: none;
              /* Ensure it takes full available width */
              margin-left: 0;
              /* Reset margin */
              margin-right: 0;
              /* Reset margin */
          }

          .footer-main-content-right {
              display: flex;
              /* Revert to flex for desktop */
              flex-direction: row;
              /* Arrange children (Features, Solutions, Pricing, Blog) in a row */
              justify-content: space-between;
              /* Distribute columns evenly across available space */
              align-items: flex-start;
              /* Align content to the top */
              gap: 2rem;
              /* Reduced space between columns */
              padding-bottom: 8rem;
              /* Reset padding-bottom for desktop */
          }

          .footer-left-content {
              grid-column: 1;
              /* Ensure logo is in the first column */
          }

          .footer-column {
              flex-grow: 1;
              /* Allow columns to grow and fill available space */
              flex-basis: 0;
              /* Important for flex-grow to work correctly with content */
          }
      }

      /* Styles for the logo and social icons section */
      .footer-left-content {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          /* Align logo and social icons to the left */
          margin-bottom: 2rem;
          /* Space below on mobile (aligns with original) */
          grid-column: 1;
          /* Occupy the first (and only) column in the .site-footer grid */
      }

      .footer-logo-img {
          height: 40px;
          /* Set a fixed height for the logo */
          width: auto;
          /* Maintain aspect ratio */
          margin-bottom: 1rem;
          /* Space below logo */
      }

      .social-icons {
          display: flex;
          gap: 1.5rem;
          /* Space between social icons */
      }

      .social-icon-img {
          width: 24px;
          /* Set a fixed size for social icons */
          height: 24px;
          object-fit: contain;
          /* Ensure image fits without cropping */
          opacity: 0.7;
          /* Default opacity */
          transition: opacity 0.2s ease-in-out;
          /* Smooth transition */
      }

      .social-icon-link:hover .social-icon-img {
          opacity: 1;
          /* Full opacity on hover */
      }

      /* Styles for individual Features/Solutions columns */
      .footer-column {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          /* Align items to the left within their column */
      }

      .footer-column-heading {
          font-weight: 700;
          /* Bold font weight */
          font-size: 1.125rem;
          /* Slightly larger font size for headings */
          margin-bottom: 1rem;
          /* Space below heading */
          color: #ffffff;
          /* White color */
      }

      .footer-column ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          /* Keep items stacked vertically as per image */
          row-gap: 0.75rem;
          /* Space between list items */
      }

      .footer-column ul a {
          color: rgba(255, 255, 255, 0.6);
          /* Slightly lighter gray for better visibility */
          text-decoration: none;
          transition: color 0.2s ease-in-out;

          /* Ensure text stays on a single line */
          white-space: nowrap;
          /* Prevent text from wrapping */
          overflow: hidden;
          /* Hide overflowing content */
          text-overflow: ellipsis;
          /* Show ellipsis for truncated text */
          max-width: 100%;
          /* Ensure it respects parent width */
          display: inline-block;
          /* Needed for text-overflow to work */

          /* Adjust font size for desktop to ensure fit */
          font-size: 0.9rem;
          /* Slightly smaller font size for list items on desktop */
      }

      .footer-column ul a:hover {
          color: #ffffff;
          /* Full white on hover */
      }

      /* Font size adjustment for mobile/tablet list items */
      @media (max-width: 1023px) {

          /* Apply to screens smaller than desktop breakpoint */
          .footer-column ul a {
              font-size: 0.55rem;
              /* Further reduced font size for mobile to help fit */
          }
      }

      /* Horizontal line just before the copyright section */
      .footer-separator-line {
          grid-column: 1 / -1;
          /* Span across all columns in the grid */
          border-top: 1px solid rgba(255, 255, 255, 0.2);
          /* Subtle white line */
          margin-top: 2rem;
          /* Space above the line */
          margin-bottom: 1rem;
          /* Space below the line */

          /* These properties make it extend full width within the footer's background */
          width: calc(100% + 4rem);
          /* Compensate for site-footer's 2rem left/right padding (2rem * 2 = 4rem) */
          margin-left: -2rem;
          /* Pull it to the left edge of the footer's background */
          box-sizing: border-box;
          /* Include padding in width calculation */
      }

      @media (min-width: 768px) {
          .footer-separator-line {
              width: calc(100% + 8rem);
              /* Compensate for site-footer's 4rem left/right padding */
              margin-left: -4rem;
              /* Pull it to the left edge */
          }
      }

      @media (min-width: 1024px) {
          .footer-separator-line {
              width: calc(100% + 12rem);
              /* Compensate for site-footer's 6rem left/right padding */
              margin-left: -6rem;
              /* Pull it to the left edge */
          }
      }

      /* Styles for the copyright section */
      .copyright-section {
          grid-column: 1 / -1;
          /* Span across all columns in the grid */
          text-align: center;
          /* Center align on mobile by default */
          padding-top: 0;
          /* No padding-top here, footer-separator-line handles spacing */
          color: #9ca3af;
          /* Lighter gray for better visibility */
          font-size: 0.875rem;
          /* Smaller font size */
          margin-top: 0;
          /* No margin-top here, footer-separator-line handles spacing */
      }

      @media (min-width: 768px) {
          .copyright-section {
              text-align: left;
              /* Align to the left on tablet and up */
          }
      }

      /* Responsive adjustments for headings and paragraphs */
      @media (min-width: 768px) {
          .hero h1 {
              font-size: 3rem;
          }

          .hero h2 {
              font-size: 2rem;
          }

          .hero p {
              font-size: 1.125rem;
          }

          .ai-center img {
              width: 630px;
              height: 287px;
          }

          .ai-box {
              font-size: 1rem;
          }

          .points-container {
              gap: 2rem;
              /* Restore larger gap on desktop */
              justify-content: space-around;
              /* Distribute points better */
          }

          .points-container>div {
              padding: 0.75rem 1rem;
          }

          .points-container span {
              font-size: 1.125rem;
          }
      }

      @media (max-width: 480px) {
          .hero h1 {
              font-size: 2rem;
          }
      }

      /* Tablet and smaller desktops (max-width: 1024px) */
      @media (max-width: 1024px) {
          .spanner-feature-card {
              /* Change to a single column layout */
              grid-template-columns: 1fr;
              /* Adjust padding for smaller screens */
              padding: 1.5rem;
              min-height: auto;
              /* Allow height to adjust to content on smaller screens */
          }

          /* Remove borders and adjust padding for stacked columns */
          .spanner-feature-text-left,
          .spanner-feature-image-middle,
          .spanner-feature-text-right {
              border-right: none;
              /* Remove vertical borders */
              padding: 1rem 0;
              /* Add vertical padding between stacked sections */
              width: 100%;
              /* Ensure sections take full width */
          }

          /* Add a bottom border between stacked sections */
          .spanner-feature-text-left,
          .spanner-feature-image-middle {
              border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          }

          /* Ensure image middle padding is consistent with text */
          .spanner-feature-image-middle {
              padding-left: 0;
              padding-right: 0;
          }

          .spanner-feature-text-right {
              padding-left: 0;
          }

          .spanner-feature-card img {
              max-height: 250px;
              /* Limit image height on smaller screens */
              width: auto;
              /* Allow width to scale */
              object-fit: contain;
          }

          .spanner-feature-card p {
              font-size: 1.1rem;
              /* Slightly reduce font size for paragraphs */
              line-height: 1.7;
          }
      }

      /* Smaller tablets and large phones (max-width: 768px) */
      @media (max-width: 768px) {
          .feature-buttons-container {
              gap: 0.75rem;
              /* Slightly reduce gap */
              padding: 0 0.75rem;
          }

          .feature-button {
              padding: 0.6rem 1.2rem;
              /* Slightly smaller buttons */
              font-size: 0.9rem;
          }

          .points-container {
              gap: 0.4rem;
              padding: 0 0.75rem;
              margin-bottom: 3rem;
              /* Adjust margin */
          }

          .points-container>div {
              padding: 0.4rem 0.6rem;
          }

          .points-container svg {
              width: 1.2rem;
              height: 2rem;
              margin-right: 0.4rem;
          }

          .points-container span {
              font-size: 0.9rem;
          }

          .spanner-feature-card {
              padding: 1rem;
              /* Further reduce card padding */
              min-height: auto;
          }

          .spanner-feature-card p {
              font-size: 1rem;
              /* Adjust paragraph font size */
              line-height: 1.6;
          }

          /* Tablet (width: 768px and below) */
          @media (max-width: 768px) {
              .bottom-features-container {
                  gap: 4rem;
                  /* Reduce gap */
                  margin-top: 3rem;
              }

              .bottom-feature-item {
                  font-size: 1rem;
                  /* Slightly smaller text */
              }
          }
      }

      /* Mobile phones (max-width: 480px) */
      @media (max-width: 480px) {
          .feature-buttons-container {
              flex-direction: column;
              /* Stack buttons vertically */
              align-items: center;
              /* Center stacked buttons */
              gap: 0.5rem;
              padding: 0 0.5rem;
          }

          .feature-button {
              width: 90%;
              /* Make buttons take more width */
              max-width: 250px;
              /* Limit max width for buttons */
              text-align: center;
              padding: 0.5rem 1rem;
              font-size: 0.85rem;
          }

          .points-container {
              /* Change to grid for 2x2 layout */


              gap: 0.5rem;
              /* Gap between grid items */
              padding: 0 0.5rem;
              margin-bottom: 2rem;
              width: 250px;
              justify-content: center;
              /* Center items if less than 2 in last row */
          }

          .points-container>div {
              width: auto;
              /* Let grid manage width */
              flex-basis: auto;
              /* Reset flex-basis if it was set */
              padding: 0.4rem 0.6rem;
              /* Adjust padding for grid items */
          }

          .points-container svg {
              width: 1rem;
              height: 1.8rem;
              margin-right: 0.3rem;
          }

          .points-container span {
              font-size: 0.85rem;
          }

          .spanner-feature-card {
              padding: 0.75rem;
              /* Minimal padding for very small screens */
              width: 95%;
              /* Adjust width for very small screens */
              min-height: auto;
          }

          .spanner-feature-card img {
              max-height: 200px;
              /* Smaller image height for mobile */
          }

          .spanner-feature-card p {
              font-size: 0.95rem;
              /* Smallest paragraph font size */
              line-height: 1.5;
          }

          /* Mobile (width: 480px and below) */
          @media (max-width: 480px) {
              .bottom-features-container {
                  gap: 2rem;
                  flex-direction: column;
                  /* Stack items vertically */
                  align-items: center;
              }

              .bottom-feature-item {
                  font-size: 0.95rem;
                  line-height: 1.4;
                  max-width: 90%;
                  /* Prevent overflow */
              }
          }
      }


      /* -----ANIMATION CSS----- */

      /* ===================== Scroll Animation ===================== */

      /* .scroll-animate {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1s ease, transform 1s ease;
    will-change: opacity, transform;
}

.scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0);
} */

      .scroll-animate {
          opacity: 0;
          transform: translateY(40px);
          /* ← Previously 60px */
          transition: opacity 0.8s ease, transform 0.8s ease;
      }


      .scroll-animate.in-view {
          opacity: 1;
          transform: translateY(0);
      }

      /* New swipe up animations */

      /* Swipe Animations - Faster */
      .swipe-left-out {
          animation: swipeLeftOut 0.15s forwards ease-in;
      }

      .swipe-left-in {
          animation: swipeLeftIn 0.15s forwards ease-out;
      }

      .swipe-right-out {
          animation: swipeRightOut 0.15s forwards ease-in;
      }

      .swipe-right-in {
          animation: swipeRightIn 0.15s forwards ease-out;
      }

      @keyframes swipeLeftOut {
          from {
              transform: translateX(0);
              opacity: 1;
          }

          to {
              transform: translateX(-20%);
              opacity: 0;
          }
      }

      @keyframes swipeLeftIn {
          from {
              transform: translateX(20%);
              opacity: 0;
          }

          to {
              transform: translateX(0);
              opacity: 1;
          }
      }

      @keyframes swipeRightOut {
          from {
              transform: translateX(0);
              opacity: 1;
          }

          to {
              transform: translateX(20%);
              opacity: 0;
          }
      }

      @keyframes swipeRightIn {
          from {
              transform: translateX(-20%);
              opacity: 0;
          }

          to {
              transform: translateX(0);
              opacity: 1;
          }
      }

      .button-container {
          position: relative;
          display: flex;
          gap: 1rem;
      }

      .button-border-indicator {
          position: absolute;
          top: 0;
          height: 100%;
          /* background-color: #13121218; */
          border: 2.5px solid #ffffff;
          border-radius: 9999px;
          transition: left 0.2s ease, width 0.4s ease;
          pointer-events: none;
          z-index: 0;
      }

      /* Default animation for desktop */
      .animate-in {
          animation: scaleIn 0.4s ease-out forwards;
      }

      .animate-out {
          animation: scaleOut 0.3s ease-in forwards;
      }

      /* Responsive adjustment for devices below 920px */
      @media (max-width: 920px) {

          /* ❌ Hide the border indicator entirely */
          .button-border-indicator {
              display: none !important;
          }

          .animate-in {
              animation: fadeInMobile 0.3s ease-out forwards;
          }

          .animate-out {
              animation: fadeOutMobile 0.2s ease-in forwards;
          }

          @keyframes fadeInMobile {
              from {
                  opacity: 0;
              }

              to {
                  opacity: 1;
              }
          }

          @keyframes fadeOutMobile {
              from {
                  opacity: 1;
              }

              to {
                  opacity: 0;
              }
          }
      }