/* Heading styles preserved */
    
    /* Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Segoe UI", Helvetica, sans-serif;
      cursor: default;
    }
    
    /* Ensure images inside interactive elements inherit cursor */
    button img, 
    a img,
    [role="button"] img,
    .thumbnail-button img,
    img.thumbnail,
    img.thumbnail.active {
      cursor: pointer !important;
    }
    
    /* Theme variables */
    :root {
      /* Dark mode colors (default) */
      --bg-color: #000;
    }
    
    .nav { /* Pull nav links to the left */
      flex: 0 1 auto; /* Don't expand, but allow shrinking */
    }
    
    .nav-link { /* Reduce horizontal padding */
      font-size: 16px;
    }
        
    .award-container { /* Increased to account for two 100px images plus margin */
      display: flex;
    }
    
    @keyframes rotate360 {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    .uses-section .info-list .icon-container::before {
      opacity: 0.85;
    }
    
    .faq-container {
      margin-top: 30px;
    }
    
    .faq-question {
      margin: 0;
    }
    
    .faq-question-button {
      background: none;
      border: none;
      padding: 15px 0;
      width: 100%;
      text-align: left;
      font-size: 18px;
      font-weight: bold;
      color: var(--heading-color);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .faq-question-button:hover,
    .faq-question-button:focus {
      color: var(--highlight-color);
      outline: none;
    }
    
    .faq-question-button:focus-visible {
      outline: 2px solid var(--highlight-color);
      outline-offset: 2px;
    }
    
    .faq-icon {
      width: 24px;
      height: 24px;
      transition: transform 0.3s;
      flex-shrink: 0;
      stroke: var(--highlight-color);
    }
    
    .faq-question-button[aria-expanded="true"] .faq-icon {
      transform: rotate(180deg);
    }
    
    .faq-answer {
      margin-bottom: 15px;
    }
    
    /* Product listings styling */
    .product-listings-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      background-color: var(--bg-color);
      position: relative;
      z-index: 5;
    }

    .product-card {
      display: flex;
      flex-direction: column;
      background-color: var(--card-bg);
      border-radius: 8px;
      margin-bottom: 20px;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      cursor: default;
      position: relative;
      border: 3px solid transparent;
    }

    .product-upper {
      display: flex;
      width: 100%;
    }

    /* Reset all elements inside the card to default cursor */
    .product-card * {
      cursor: default;
    }

    /* Set pointer cursor only on interactive elements */
    .product-card .main-image-container,
    .product-card .thumbnail,
    .product-card .thumbnail-button,
    .product-card .thumbnail-nav,
    .product-card stripe-buy-button,
    .product-card .read-more,
    .product-card a, 
    .product-card .buy-button,
    .product-card .tab-btn {
      cursor: pointer !important;
    }
    
    /* Force pointer cursor on thumbnail elements */
    .thumbnail-button img, 
    .thumbnail-button img.active, 
    .thumbnail.active {
      cursor: pointer !important;
    }

    .product-card:hover {
      transform: translateY(-3px);
      background-color: rgba(0, 102, 255, 0.15);
      box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4);
      border: 3px solid #0066ff !important;
    }

    .product-image {
      flex: 0 0 200px;
      overflow: hidden;
    }

    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .product-card:hover .product-image img {
      transform: scale(1.05);
    }

    .product-details {
      flex: 1;
      padding: 0 30px 30px 30px;
      justify-content: space-between;
    }

    .product-title {
      color: var(--heading-color);
      font-size: 20px;
      margin: 0 0 15px;
      line-height: 1.3;
    }

    .product-price {
      font-size: 20px;
      margin: 0 0 25px;
    }

    .product-description {
      margin: 0 0 30px;
      font-size: 16px;
      flex-grow: 1;
    }



    .product-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 10px;
    }

    .read-more {
      color: white;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
      padding: 0;
      border: none;
      background: none;
      transition: color 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }

    .read-more:hover {
      color: white;
    }
    
    /* Ensure all child elements of read-more are clickable */
    .read-more * {
      cursor: pointer;
      pointer-events: none;
    }

    .chevron-icon {
      transition: transform 0.3s ease;
      display: block;
      margin: 0;
      width: 24px;
      height: 24px;
      stroke: white;
    }

    .expanded-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease;
      width: calc(100% - 20px);
      position: relative;
      box-sizing: border-box;
      margin: 0 10px 10px 10px;
    }
    
    .tab-container {
      width: 100%;
      overflow-x: hidden;
    }
    
    .product-card.expanded .expanded-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background-color: var(--border-color);
    }

    .expanded-inner {
      padding: 0 20px 10px;
      width: 100%;
      box-sizing: border-box;
    }
    
    .expanded-row {
      display: flex;
      flex-direction: row;
      margin: 0;
      padding: 0;
      width: 100%;
    }
    
    .expanded-container {
      flex: 1;
      width: 100%;
    }

    .product-card.expanded .expanded-content {
  max-height: 1200px !important; /* Increased to accommodate larger content in the Applications tab */
}

    .product-card.expanded .read-more {
      flex-direction: column-reverse;
    }
    
    .product-card.expanded .chevron-icon {
      transform: rotate(180deg);
      margin-bottom: 5px;
      margin-top: 0;
    }

    .expanded-content h4 {
      margin: 15px 0 10px;
      font-size: 16px;
      color: var(--heading-color);
    }

    .expanded-content ul {
      margin: 0 0 15px 20px;
      padding: 0;
    }

    .expanded-content li {
      margin-bottom: 5px;
      color: var(--text-color);
    }

    .buy-button {
      background-color: #0066ff;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      margin-top: 10px;
      transition: background-color 0.2s ease;
      width: auto;
      max-width: fit-content;
    }

    .buy-button:hover {
      background-color: #0055cc;
    }

    

    
    

    
    /* Override any cursor properties for clickable images */
    .thumbnail-button .thumbnail,
    .product-image-gallery img,
    img[data-image],
    .thumbnail-button img {
      cursor: pointer !important;
    }
    
    


    /* Main content section styling */
    .main-content-section {
      padding-top: 100px;
      background-color: var(--bg-color);
      position: relative;
      z-index: 5;
    }

    .main-content-section .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .main-content-section h2 {
      color: var(--heading-color);
      text-align: center;
      margin-bottom: 40px;
    }

    /* Tab styling */
    .tab-container {
      width: 100%;
      position: relative;
      top: 0;
      box-sizing: border-box;
    }

    .tabs {
      display: flex;
      border-bottom: 1px solid var(--border-color);
      width: 100%;
    }

    .tab-btn {
      background-color: transparent;
      border: none;
      padding: 10px 15px;
      font-size: 14px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.2s ease;
      color: var(--text-color);
      flex: 1;
      text-align: center;
      outline: none;
    }

    .tab-btn:hover {
      color: var(--heading-color);
      background-color: rgba(0, 102, 255, 0.15);
    }

    .tab-btn.active {
      border-bottom-color: var(--highlight-color);
      color: var(--heading-color);
      font-weight: bold;
    }

    /* Hide tabs with data-tab-hidden attribute by default */
    .tab-btn[data-tab-hidden="true"] {
      display: none;
    }

    .tab-content {
      display: none;
      padding: 15px 0;
      width: 100%;
    }

    .tab-content.active {
      display: block;
      animation: fadeIn 0.3s ease;
      padding-left: 20px;
      max-width: 700px;
      width: 100%;
      box-sizing: border-box;
    }
    
    /* Add modest spacing between paragraphs in tab content and content description */
    .tab-content p,
    .content-description {
      margin-bottom: 15px;
      line-height: 1.6;
    }
    
    .tab-content p + p,
    .content-description + .content-description {
      margin-top: 15px;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    

    


    /* Main content styling */
    .main-content {
      padding: 300px 0 40px;
      background-color: var(--bg-color);
      position: relative;
      z-index: 5;
    }

    .content-header {
      max-width: 800px;
      margin: 0 auto 200px;
      padding: 0 20px;
      text-align: center;
    }

    .content-header h1 {
      color: var(--heading-color);
      font-size: 36px;
      margin-bottom: 20px;
    }

    .content-description {
      color: var(--text-color);
      font-size: 18px;
      line-height: 1.6;
      max-width: 700px;
      margin: 0 auto;
    }

    /* Ribbon Banner */
    .ribbon {
      position: absolute;
      right: -5px;
      top: -5px;
      z-index: 1;
      overflow: hidden;
      width: 150px;
      height: 150px;
      text-align: right;
      pointer-events: none;
    }
    
    .ribbon-content {
      position: absolute;
      display: block;
      width: 225px;
      padding: 8px 0;
      background-color: #0066ff;
      box-shadow: 0 3px 10px rgba(0,0,0,.5);
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.3);
      text-align: center;
      font-weight: bold;
      font-size: 12px;
      line-height: 1;
      transform: rotate(45deg);
      right: -62px;
      top: 30px;
      pointer-events: none;
    }
    
    /* Remove blue squares */
    
    /* Clean ribbon design without decorative ends */

    /* YouTube responsive embed container */
    .video-container {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      overflow: hidden;
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    /* Thumbnail navigation */
    .thumbnail-container {
      position: relative;
    }
    
    .thumbnail-nav {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 28px;
      background-color: var(--highlight-color);
      border: 2px solid white;
      border-radius: 50%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      cursor: pointer !important;
      opacity: 0.9;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .thumbnail-nav:hover {
      opacity: 1;
      transform: translateX(-50%) scale(1.1);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    }
    
    .thumbnail-nav.prev {
      top: -12px;
    }
    
    .thumbnail-nav.next {
      bottom: -12px;
    }
    
    .thumbnail-nav svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: white;
      stroke-width: 2.5;
      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    }
    
    /* For accessibility */
    .thumbnail-nav:focus {
      outline: 2px solid var(--highlight-color);
      opacity: 1;
    }
    
    /* Hide thumbnails outside current view */
    .thumbnail-button {
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .thumbnail-button.hidden {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      transform: translateX(100%);
    }
    
    /* Ensure pointer cursor on all thumbnails, especially active ones */
    .product-card .thumbnail-button .thumbnail,
    .product-card .thumbnail-button:hover .thumbnail,
    .product-card .thumbnail-button:focus .thumbnail,
    .product-card .thumbnail-button .thumbnail.active,
    .thumbnail-button .thumbnail.active,
    .product-image-gallery .thumbnail-container .thumbnail-button .thumbnail.active {
      cursor: pointer !important;
    }
    
    /* Image modal */
  
    /* Product card structure */
    .product-upper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
      }
      
      .product-image-section {
        flex: 0 0 450px;
        margin-right: 20px;
        padding-top: 10px;
      }
      
      .stripe-button-container {
        flex: 0 0 auto;
        margin-right: 20px;
        align-self: flex-start;
        padding-top: 10px;
      }
      
      .product-info-section {
        flex: 1;
        padding-top: 10px;
        padding-right: 30px;
        min-width: 300px;
      }
      
      .product-details {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        z-index: 5;
      }
      
      .product-title {
        padding-right: 40px;
        margin-top: 15px;
      }
      
      .product-footer {
        margin-top: auto;
      }
      
      /* Product image gallery */
      .product-image-gallery {
        flex: 0 0 350px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
        padding-left: 10px;
      }
      
      .main-image-container {
        position: relative;
        flex: 1;
        margin-right: 10px;
        height: 320px;
        overflow: hidden;
        cursor: pointer;
      }
      
      .main-product-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        object-position: center;
      }
      
      .main-image-container:hover .main-product-image {
        transform: scale(1.05);
      }
      
      .image-zoom-icon {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .main-image-container:hover .image-zoom-icon {
        opacity: 1;
      }
      
      .thumbnail-container {
        display: flex;
        flex-direction: column;
        gap: 5px;
        overflow: hidden;
        padding: 0;
        justify-content: space-between;
        width: 60px;
        height: 320px;
      }
      
      .thumbnail-button {
        background: none;
        border: none;
        padding: 0;
        width: 60px;
        height: 60px;
        cursor: pointer !important; /* Ensure pointer cursor always shows */
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .thumbnail {
        width: 60px;
        height: 60px;
        object-fit: cover;
        cursor: pointer;
        border: 1px solid transparent;
        transition: border-color 0.3s ease, transform 0.2s ease;
        flex-shrink: 0;
      }
      
      .thumbnail:hover,
      .thumbnail-button:focus .thumbnail {
        transform: scale(1.05);
        border-color: #0066ff;
      }
      
      .thumbnail-button:focus {
        outline: 2px solid #0066ff;
        outline-offset: 2px;
      }
      
      .thumbnail.active {
        border-color: #0066ff;
        cursor: pointer !important;
      }
      
      /* Image modal */
      .image-modal {
        display: none;
        position: fixed;
        z-index: 1001;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        overflow: hidden;
      }
      
      .modal-content {
        position: relative;
        margin: 40px auto 20px;
        max-width: 80%;
        max-height: 70vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      #modal-image {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
      }
      
      .modal-close {
        position: absolute;
        top: 15px;
        right: 25px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        z-index: 1002;
      }
      
      .modal-navigation {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: space-between;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1002;
      }
      
      .modal-prev, .modal-next {
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        font-size: 24px;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
      }
      
      .modal-prev {
        margin-left: 15px;
      }
      
      .modal-next {
        margin-right: 15px;
      }
      
      .modal-prev:hover, .modal-next:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }
      
      .modal-thumbnails {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 10px;
        margin-top: 10px;
      }
      
      /* Full-screen gallery lightbox (product photo grids) */
      .gallery-lightbox-trigger {
        cursor: zoom-in;
      }

      .gallery-lightbox {
        align-items: center;
        background: rgba(0, 0, 0, 0.92);
        display: none;
        inset: 0;
        justify-content: center;
        padding: 24px;
        position: fixed;
        z-index: 10050;
      }

      .gallery-lightbox.active {
        display: flex;
      }

      .gallery-lightbox img {
        max-height: 90vh;
        max-width: 90vw;
        object-fit: contain;
        transition: opacity 0.2s linear;
      }

      .gallery-lightbox img.is-changing {
        opacity: 0;
      }

      .gallery-lightbox button {
        background: rgba(0, 0, 0, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.5);
        color: #fff;
        cursor: pointer;
        font-size: 32px;
        line-height: 1;
        padding: 12px 16px;
        position: absolute;
      }

      .gallery-lightbox-close {
        right: 24px;
        top: 24px;
      }

      .gallery-lightbox-prev {
        left: 24px;
      }

      .gallery-lightbox-next {
        right: 24px;
      }

      .photo-gallery-section {
        background-color: var(--bg-color);
        position: relative;
      }

      .photo-gallery-section > .container > .paragraph {
        max-width: 850px;
        margin: 0 auto 35px;
        text-align: center;
      }

      .photo-gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 18px;
      }

      .photo-gallery-grid img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 8px;
      }

      .form-section-intro {
        max-width: 720px;
        margin: 0 auto 32px;
        text-align: center;
      }

      .form-section-intro .paragraph {
        text-align: center;
      }

      .site-form {
        max-width: 520px;
        margin: 0 auto;
      }

      .site-form label {
        display: block;
        font-size: 0.95rem;
        font-weight: bold;
        margin-bottom: 6px;
        color: var(--heading-color);
      }

      .site-form .form-field {
        margin-bottom: 20px;
      }

      .site-form input[type="email"],
      .site-form select,
      .site-form input[type="range"] {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        font-size: 16px;
        border: 1px solid rgba(128, 128, 128, 0.35);
        border-radius: 8px;
        background-color: var(--card-bg);
        color: var(--text-color);
      }

      .site-form input[type="range"] {
        padding: 0;
        height: 36px;
        cursor: pointer;
        accent-color: var(--highlight-color);
      }

      .form-budget-value {
        display: block;
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: var(--heading-color);
      }

      .site-form input[type="email"]:focus,
      .site-form select:focus,
      .site-form input[type="range"]:focus {
        outline: 2px solid var(--highlight-color);
        outline-offset: 1px;
      }

      .site-form button[type="submit"] {
        width: 100%;
        margin-top: 8px;
      }

      .site-form button[type="submit"]:disabled {
        opacity: 0.65;
        cursor: not-allowed;
      }

      .form-status {
        margin-top: 16px;
        text-align: center;
        font-size: 0.95rem;
      }

      .form-status.success {
        color: var(--highlight-color);
      }

      .form-status.error {
        color: #c0392b;
      }

      .modal-thumbnail {
        width: 80px;
        height: 60px;
        object-fit: cover;
        cursor: pointer;
        border: 2px solid transparent;
        opacity: 0.7;
        transition: opacity 0.3s ease, border-color 0.3s ease;
      }
      
      .modal-thumbnail:hover {
        opacity: 1;
      }
      
      .modal-thumbnail.active {
        border-color: #0066ff;
        opacity: 1;
      }
      
      

      
      

      
      

      
      

      /* Heading styles preserved */
    /* Custom style for tables after title paragraphs */
    p[style*="font-weight: bold"] + table.bulldog-table {
        margin-top: 0;
      }
      
      /* Ensure all table rows get hover highlighting */
      .bulldog-table tr:hover {
        background-color: rgba(0, 102, 255, 0.3) !important;
      }
      
      /* Remove left padding from the first column and set oblique font style */
      .bulldog-table td:first-child,
      .bulldog-table th:first-child {
        padding-left: 0;
        font-style: oblique;
      }
      
      /* Set bottom margin for all tables */
      table.bulldog-table {
        margin-bottom: 40px !important;
      }
      
      /* Reset */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Helvetica, sans-serif;
        cursor: default;
      }
      
      /* Add transition to all table rows for smooth hover effect */
      .bulldog-table tr {
        transition: background-color 0.2s ease;
      }
      
      /* Preserve pointer cursor on interactive elements */
      a, button, .cta-button, .nav-button, .menu-toggle, .dark-mode-toggle, .footer-submit-btn, .social-link, .dropdown-item, .action-button, .faq-item, .faq-question {
        cursor: pointer;
      }
      
      /* Add heading font styles */
      h1, h2, h3, h4, h5, h6 {
        font-family: Arial, sans-serif;
      }
      
      /* Theme variables */
      :root {
        /* Dark mode colors (default) */
        --bg-color: #000;
        --text-color: #ccc;
        --header-bg: #003399;
        --card-bg: #1a1a1a;
        --section-bg: #1a1a1a;
        --border-color: #333;
        --highlight-color: #0066ff;
        --secondary-text: #444;
        --footer-bg: #111;
        --heading-color: #ffffff;
        --gallery-dot-color: #ffffff;
        --gallery-dot-inactive: rgba(255, 255, 255, 0.5);
        --gallery-progress-bg: rgba(255, 255, 255, 0.3);
        --gallery-progress-fill: #ffffff;
        --svg-primary-color: #ffffff;
        --svg-accent-color: #06f;
      }
  
      
      
      /* Light mode */
      [data-theme="light"] {
        --bg-color: #f5f5f5;
        --text-color: #222;
        --header-bg: #003399;
        --card-bg: #ffffff;
        --section-bg: #e5e5e5;
        --border-color: #ddd;
        --highlight-color: #0055cc;
        --secondary-text: #444;
        --footer-bg: #eaeaea;
        --heading-color: #000000;
        --gallery-dot-color: #0055cc;
        --gallery-dot-inactive: rgba(0, 85, 204, 0.5);
        --gallery-progress-bg: rgba(0, 85, 204, 0.3);
        --gallery-progress-fill: #0055cc;
        --svg-primary-color: #000000;
        --svg-accent-color: #0066ff;
      }
      
      /* Feature icon styling - use !important to override any other styles */
      .feature-icon .cls-1 {
        fill: var(--svg-primary-color) !important;
      }
      
      .feature-icon .cls-2 {
        fill: var(--svg-accent-color) !important;
      }
      
      /* Additional styles for better contrast in light mode */
      [data-theme="light"] .info-text {
        color: #111; /* Even darker for paragraph text */
      }
      
      [data-theme="light"] .info-list li {
        color: #111; /* Darker color for list items */
      }
      
      [data-theme="light"] .dropdown-item {
        color: #111; /* Darker for dropdown items */
      }
      
      [data-theme="light"] .faq-answer {
        color: #111; /* Darker for FAQ answers */
      }
      
      [data-theme="light"] .feature-item {
        color: #111; /* Darker for feature list items */
      }
      
      [data-theme="light"] .product-subtitle {
        color: #444; /* Darker for product subtitles */
      }
      
      [data-theme="light"] .tagline {
        color: #111; /* Darker for tagline */
      }
      
      [data-theme="light"] .footer {
        background-color: var(--footer-bg);
        color: #222;
      }
      
      body {
        background-color: var(--bg-color);
        color: var(--text-color);
        overflow-x: clip;
      }
      
      /* Header/Navigation */
      .header {
        background-color: var(--header-bg);
        color: white;
        display: flex;
        justify-content: space-between;
        padding: 0;
        height: 40px;
        position: fixed;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: 98%;
        z-index: 1100;
      }
  
      .left-nav{
        display: flex;
        height: 60px;
        background-color: var(--header-bg);
        margin-left: 40px;
      }
  
      /* Left angle - using scale transform */
      .left-nav .left-nav-angle {
        position: absolute;
        height: 60px;
        width: 60px;
        background: inherit;
        top: 0px;
        left: 1px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%);
        transform-origin: left;
        transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      
      /* Right angle - direct width change for reliability */
      .left-nav .right-nav-angle {
        position: absolute;
        height: 60px;
        width: 60px;
        background: inherit;
        top: 0px;
        left: 525px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
        transform-origin: right;
        transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      
      .logo-container {
        display: flex;
        align-items: center;
        background-color: #003399;
        padding: 0 20px;
        height: 100%;
        width: 180px; /* Fixed width for logo container */
      }
      
      .logo {
        font-weight: bold;
        font-size: 24px;
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        cursor: pointer !important;
      }
  
      .logo-nav-svg {
        height: 30px;
        width: auto;
        pointer-events: none;
      }
      
      .logo-text {
        margin-left: 5px;
        text-transform: uppercase;
        font-weight: bold;
        line-height: 1;
      }
      
      .nav {
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: -20px; /* Pull nav links to the left */
        flex: 0 1 auto; /* Don't expand, but allow shrinking */
      }
      
      .nav-links {
        display: flex;
        height: 100%;
      }
      
      .nav-item {
        height: 100%;
        position: relative;
      }
      
      .nav-link {
        color: white;
        text-decoration: none;
        padding: 0 12px; /* Reduce horizontal padding */
        font-size: 16px;
        display: flex;
        align-items: center;
        height: 100%;
        text-wrap-mode: nowrap;
      }
      
      .nav-link.dropdown::after {
        display: none;
      }
      
      .nav-link.dropdown {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      
      .nav-link.dropdown .dropdown-icon {
        width: 12px;
        height: 12px;
        transition: transform 0.3s ease;
        flex-shrink: 0;
        pointer-events: none;
      }
      
      .nav-link.dropdown .search-icon {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
        flex-shrink: 0;
      }
      
      .nav-item:hover .nav-link.dropdown .dropdown-icon {
        transform: rotate(180deg);
      }
      
      .nav-item:hover .nav-link.dropdown .search-icon {
        transform: scale(1.2);
      }
      
      .nav-item:hover .nav-link.dropdown::after {
        transform: rotate(180deg);
      }
      
      /* Search nav item uses magnifying glass icon instead of dropdown arrow */
      .nav-item:last-of-type .nav-link.dropdown::after {
        background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.8 28.8'%3E%3Cpath fill='white' d='M24.52,5.55c-2.34-2.67-6.41-2.94-9.08-.6-2.15,1.88-2.75,4.87-1.68,7.36l-9.57,8.33s-.01,0-.02,0c-.01.01-.02.01-.03.02l-.49.44c-.09.09-.15.2-.21.3-.01.01-.01.02-.01.03-.38.71-.3,1.61.25,2.24.57.66,1.45.84,2.21.55.03-.01.07-.02.1-.04.03,0,.06-.02.09-.04.07-.03.13-.07.2-.11,0,0,0,0,.02-.01l.41-.37s.02-.02.03-.03l9.6-8.35c.71.44,1.49.72,2.29.85,1.83.31,3.78-.18,5.29-1.5,2.67-2.34,2.94-6.4.6-9.08ZM6.22,22.96l-1.48-1.7,8.92-7.75,1.47,1.7-8.91,7.75ZM19.73,15.6c-3.24,0-5.87-2.63-5.87-5.87s2.63-5.88,5.87-5.88,5.87,2.63,5.87,5.88-2.63,5.87-5.87,5.87Z'/%3E%3C/svg%3E");
        transform: none;
      }
      
      .nav-item:last-of-type:hover .nav-link.dropdown::after {
        transform: none;
      }
      
      .right-actions {
        flex: 1;
      }
      
      .welcome-container {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .buttons-container {
        display: flex;
        align-items: center;
        height: 100%;
      }
      
      .welcome-text {
        color: white;
        font-size: 14px;
        font-weight: normal;
        white-space: nowrap;
      }
      
      .action-button {
        background-color: #c7f394;
        border: none;
        color: black;
        padding: 5px 10px;
        margin-right: 10px;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        height: 30px;
        white-space: nowrap;
        border-radius: 8px;
        transition: transform 0.2s ease;
        text-decoration: none;
      }
  
      .action-button:hover {
        transform: scale(1.05);
      }
  
      .action-button svg {
        margin-right: 8px;
        cursor: pointer !important;
        transition: all 0.2s ease;
        pointer-events: none;
      }
  
      .action-button:hover svg path {
        d: path("M3.5 4.5H20.5V19.5H3.5V4.5Z M3.5 4.5L12 1L20.5 4.5 M7.5 8.5L12 11.5L16.5 8.5");
        stroke: currentColor;
        stroke-width: 0.5;
        fill: currentColor;
      }
  
      .order-button {
        background-color: transparent;
        border: 1px solid #0066ff;
        border-radius: 6px;
        color: white;
        padding: 5px 10px;
        margin-left: 10px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        height: 30px;
        white-space: nowrap;
      }
      
      .dark-mode-toggle {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        margin: 0 15px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 60px;
        transition: transform 0.3s ease;
        position: relative;
      }
      
      .dark-mode-toggle:hover {
        transform: scale(1.1);
      }
      
      .dark-mode-icon,
      .light-mode-icon {
        width: 24px;
        height: 24px;
        position: absolute;
        transition: opacity 0.3s ease;
        cursor: pointer !important;
        pointer-events: none;
      }
      
      .dark-mode-icon {
        opacity: 1;
      }
      
      .light-mode-icon {
        opacity: 0;
      }
      
      [data-theme="light"] .dark-mode-icon {
        opacity: 0;
      }
      
      [data-theme="light"] .light-mode-icon {
        opacity: 1;
      }
      
  
      
      
      

      
      /* Info Section */
      
      /* Info Section */
      .info-section {
        background-color: var(--bg-color);
        padding: 60px 0 200px;
        position: relative;
        z-index: 2;
      }
      
      .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
      }
      
      .container {
        width: 85%;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
      }
      
      .container-narrow {
        width: 40%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
      }
      
      h2 {
        color: white;
        font-size: 36px;
        margin-bottom: 20px;
        text-align: center;
      }
      
      .info-section h2 {
        text-align: left !important;
      }
  
      [data-theme="light"] h2 {
        color: var(--header-bg);
      }
      
      h4 {
        color: white;
        font-size: 24px;
        margin-bottom: 10px;
        text-align: left;
      }
    
      [data-theme="light"] h4 {
        color: var(--header-bg);
      }
      
      .info-text {
        color: var(--text-color);
        line-height: 1.8;
        margin-bottom: 20px;
        text-align: left;
      }
  
      .paragraph {
        color: var(--text-color);
        line-height: 1.8;
        margin-bottom: 20px;
        text-align: left;
      }
  
      .product-description {
        color: var(--text-color);
        line-height: 1.8;
        margin-bottom: 20px;
        text-align: left;
        font-weight: lighter;
        font-style: oblique;
      }
  
      .product-subtitle {
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 6px;
        text-align: left;
      }
  
      .product-price {
        color: #0066ff;
        line-height: 1;
        margin-bottom: 20px;
        text-align: left;
        font-weight: bold;
      }
  
      .info-image {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
  
      .main-image {
        width: 100%;
        max-width: 600px;
        height: auto;
        display: block;
        margin: 0;
        transition: transform 0.3s ease-in-out;
      }
  
      .main-image:hover {
        transform: scale(1.05);
      }
      
      .info-list {
        list-style-type: none;
        margin: 30px 0;
      }
      
      .info-list li {
        position: relative;
        padding-left: 0;
        margin-bottom: 10px;
        color: var(--text-color);
        cursor: default;
      }
      
      .info-list li::before {
        display: none;
      }
      
      /* Heading styles preserved */
      h3 {
        color: var(--heading-color);
        font-size: 24px;
        margin-bottom: 40px;
        text-align: left;
      }
      
  
      
      /* Button styling */
      .cta-button {
        background-color: white;
        color: black;
        padding: 10px 24px;
        cursor: pointer;
        font-weight: bold;
        display: block;
        margin: 0 auto auto;
        border: none;
        font-size: 16px;
        border-radius: 8px;
        box-shadow: 0 1px 2px 4px rgba(199, 243, 148, 0.2);
        position: relative;
        overflow: hidden;
        text-decoration: none;
      }
  
      .cta-button::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.3) 0%,
          rgba(0, 0, 0, 0.15) 100%
        );
        pointer-events: none;
        display: none;
      }
  
      .cta-button::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.6) 50%,
          rgba(0, 0, 0, 0) 100%
        );
        transform: rotate(45deg);
        transition: transform 0.5s ease-out;
        pointer-events: none;
        opacity: 0;
      }
  
      .cta-button:hover {
        box-shadow: 
          0 4px 8px rgba(0, 0, 0, 0.3),
          0 8px 16px rgba(0, 0, 0, 0.2),
          0 1px 2px 4px rgba(199, 243, 148, 0.35);
      }
  
      .cta-button:hover::after {
        transform: rotate(45deg) translate(50%, 50%);
        opacity: 1;
        transition: transform 0.5s ease-out, opacity 0.2s ease-in-out;
      }
      
      .tagline {
        text-align: center;
        color: var(--text-color);
        margin-top: 40px;
        font-size: 16px;
      }
      
      /* Purpose Section */
      .purpose-section {
        background-color: #003399;
        padding: 40px 0;
        position: relative;
        z-index: 2;
        min-height: 250px;
        display: flex;
        align-items: center;
      }
      
      .purpose-section .container {
        max-width: 800px;
        margin: 0 18vw;
        display: flex;
        align-items: center;
        gap: 60px;
      }
      
      .purpose-section .logo-emblem {
        width: 140px;
        height: 140px;
      }
      
      .purpose-section .content {
        flex: 1;
      }
      
      h6 {
        color: white;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.6;
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
      }
      
      /* FAQ Section */
      .faq-section {
        background-color: var(--bg-color);
        padding: 80px 0 80px;
        position: relative;
        z-index: 1;
        min-height: 800px;
      }

      .faq-section.photo-gallery-section {
        z-index: 1001;
      }
      
      .faq-container {
        width: 65%;
        max-width: 600px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
      }
      
      .faq-item {
        margin-bottom: 15px;
        overflow: hidden;
        cursor: pointer;
      }
      
      .faq-question {
        background-color: var(--bg-color);
        padding: 15px 20px 5px 0;
        color: var(--heading-color);
        font-size: 18px;
        border-bottom: 1px solid var(--highlight-color);
      }
      
      .faq-answer {
        padding: 0;
        line-height: 1.6;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease-in-out,
                    padding 0.3s ease-in-out;
        overflow: hidden;
        color: var(--text-color);
        cursor: pointer;
      }
      
      .faq-item:hover .faq-answer {
        max-height: 300px;
        opacity: 1;
        padding: 20px 0;
      }
      
      .faq-answer.active {
        max-height: 300px;
        opacity: 1;
        padding: 20px 0;
      }
      
      /* Footer */
      .footer {
        background-color: var(--footer-bg);
        padding: 60px 0 30px;
        color: var(--text-color);
        position: relative;
        z-index: 20;
        clear: both;
        width: 100%;
        display: block;
        margin-top: 0;
      }
      
      .footer-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        margin-bottom: 40px;
        justify-content: center;
      }
      
      .footer-column {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      
      .footer-column:first-child {
        padding-right: 20px;
      }
      
      .footer-logo {
        margin-bottom: 20px;
      }
      
      .logo-svg {
        width: 150px;
        height: auto;
        pointer-events: none;
      }
      
      .footer-text {
        margin-bottom: 15px;
        line-height: 1.4;
        color: var(--text-color);
      }
      
      .award-container {
        margin-top: 20px;
        padding-top: 20px;
        min-height: 210px; /* Increased to account for two 100px images plus margin */
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      
      .footer-award {
        width: 100px;
        height: 100px;
        object-fit: contain;
      }
      
      .footer-heading {
        font-size: 18px;
        margin-bottom: 15px;
        color: var(--text-color);
        font-weight: bold;
        text-transform: none;
      }
      
      .footer-divider {
        height: 2px;
        background-color: var(--highlight-color);
        width: 100%;
        margin-bottom: 20px;
      }
      
      .footer-links {
        list-style: none;
        padding: 0;
        margin-top: 0;
        margin-bottom: 15px;
      }
      
      .footer-links-spaced {
        margin-bottom: 10px;
      }
      
      .footer-links li {
        margin-bottom: 8px;
        cursor: default;
      }
      
      .footer-links a {
        color: var(--heading-color);
        text-decoration: none;
        transition: color 0.2s;
        font-size: 14px;
      }
      
      .footer-links a:hover {
        color: var(--highlight-color);
      }
      
      .footer-section-title {
        font-weight: normal;
        margin: 5px 0 5px;
        color: #888888;
        font-size: 14px;
        letter-spacing: 0.2px;
      }
      
      .footer-section-title strong {
        font-weight: bold;
      }
      
      .footer-section-title:first-of-type {
        margin-top: 0;
      }
      
      .footer-contact-form {
        display: flex;
        margin-bottom: 30px;
        position: relative;
      }

      .footer-contact-form .site-form {
        max-width: none;
        margin: 0;
        width: 100%;
      }

      .footer-contact-form .site-form button[type="submit"] {
        margin-top: 0;
      }

    /* Generic loading placeholder text (used for HubSpot embeds and other async widgets) */
    .loading-placeholder {
      color: var(--text-color);
      font-size: 14px;
      line-height: 1.4;
    }

    [data-theme="light"] .loading-placeholder {
      color: #111;
    }
      
      .footer-input {
        flex: 1;
        padding: 10px;
        border: none;
        background-color: var(--card-bg);
        color: var(--text-color);
      }
      
      .footer-submit-btn {
        flex: 1;
        background-color: var(--highlight-color);
        border: none;
        color: white;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      
      .contact-info {
        margin-bottom: 30px;
      }
      
      .contact-item {
        display: flex;
        margin-bottom: 15px;
        align-items: flex-start;
      }
      
      .contact-icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        filter: brightness(0) saturate(100%) invert(37%) sepia(98%) saturate(1401%) hue-rotate(206deg) brightness(94%) contrast(102%);
      }
      
      [data-theme="light"] .contact-icon {
        filter: brightness(0) saturate(100%) invert(22%) sepia(82%) saturate(1645%) hue-rotate(203deg) brightness(99%) contrast(102%);
      }
      
      .contact-text p {
        margin: 0 0 5px;
        color: var(--heading-color);
        font-size: 14px;
      }
      
      .contact-item p {
        color: var(--heading-color);
      }
      
      .social-links {
        display: flex;
        gap: 15px;
        margin-top: 20px;
      }
      
      .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--border-color);
        color: var(--text-color);
        text-decoration: none;
        transition: all 0.2s;
      }
      
      .social-link:hover {
        background-color: var(--highlight-color);
        color: white;
        border-color: var(--highlight-color);
      }
      
      .social-icon {
        display: block;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
      }
      
      .social-icon svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
        cursor: pointer !important;
        transition: transform 0.2s ease;
        pointer-events: none;
      }
      
      .social-link:hover .social-icon svg {
        transform: scale(1.2);
      }
      
      .footer-bottom {
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
        font-size: 14px;
      }
      
      .copyright {
        color: var(--secondary-text);
        margin: 0;
      }
      
      .footer-legal {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      
      .footer-separator {
        color: var(--secondary-text);
        font-size: 10px;
      }
      
      .footer-legal a {
        color: var(--secondary-text);
        text-decoration: none;
      }
      
      .footer-legal a:hover {
        color: var(--text-color);
      }
      
      /* Consolidated responsive styles */
      

      
      

      
      

  
      /* Dropdown Menu */
      .dropdown-content {
        display: none;
        position: fixed;
        top: 55px;
        left: 10%;
        background-color: black;
        width: 70%;
        max-width: 1200px;
        z-index: 10;
        padding: 20px 0 80px 0;
        border-radius: 8px;
        border: 1px solid #0066ff;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
      }
  
      /* Dropdown connector - invisible element that helps maintain hover state */
      .dropdown-connector {
        position: absolute;
        width: 100%;
        height: 20px;
        bottom: -20px;
        left: 0;
        background-color: transparent;
      }
  
      /* Show dropdown on hover with a delay */
      .nav-item:hover .dropdown-content,
      .dropdown-content:hover {
        display: block;
        opacity: 1;
        visibility: visible;
      }
      
      /* Show dropdown when clicked (additional to hover) */
      .nav-item.dropdown-open .dropdown-content {
        display: block;
        opacity: 1;
        visibility: visible;
      }
  
      /* Add a transition delay to keep menu open while moving mouse */
      .nav-item:hover .dropdown-connector {
        display: block;
      }
  
      .dropdown-inner {
        display: flex;
        width: 90%;
        max-width: 1000px;
        margin: 0 auto;
        margin-left: 20px;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
      }
  
      .dropdown-column {
        padding: 10px;
        min-width: 145px;
        width: 192px;
        flex: 0 0 192px;
      }
  
      .dropdown-header {
        color: white;
        font-weight: bold;
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--highlight-color);
        cursor: pointer;
        text-decoration: none;
        display: block;
      }
  
      .dropdown-header:hover {
        color: white;
        text-decoration: none;
        border-bottom: 1px solid var(--highlight-color);
      }
  
      /* Remove pointer cursor from non-link headers */
      div.dropdown-header {
        cursor: default;
      }
  
      .dropdown-item {
        display: block;
        color: var(--text-color);
        text-decoration: none;
        padding: 5px 0;
        transition: color 0.2s;
      }
  
      .dropdown-item:hover {
        color: white;
      }
  
      /* Dropdown search input styling */
      .dropdown-search-input {
        width: 100%;
        padding: 8px 12px;
        margin-top: 10px;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--text-color);
        font-size: 14px;
        transition: border-color 0.2s, background-color 0.2s;
      }
  
      .dropdown-search-input:focus {
        outline: none;
        border-color: var(--highlight-color);
        background-color: var(--bg-color);
      }
  
      .dropdown-search-input::placeholder {
        color: var(--secondary-text);
      }
  
      /* Image display in dropdown */
      .dropdown-images {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        margin-top: 20px;
        min-height: 225px;
      }
  
      .dropdown-image-container {
        width: 100%;
        max-width: 225px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 225px;
        overflow: hidden;
        flex-shrink: 0;
      }
  
      .dropdown-image {
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
        object-fit: contain;
      }
  
      .dropdown-image.active {
        opacity: 1;
        visibility: visible;
      }

      /* Hide dropdown preview images on small screens (avoid layout + requests) */
      @media (max-width: 480px) {
        .dropdown-images,
        .dropdown-image-container,
        .dropdown-image {
          display: none !important;
        }
      }
  
      /* Navigation item highlight on hover */
      .nav-item:hover .nav-link.dropdown {
        background-color: black;
        position: relative;
        z-index: 15;
        border-top: 1px solid #0066ff;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
  
      /* Navigation item highlight when clicked open */
      .nav-item.dropdown-open .nav-link.dropdown {
        background-color: black;
        position: relative;
        z-index: 15;
        border-top: 1px solid #0066ff;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      
      /* Remove blue borders for mobile navigation */
      

  
      /* Side tabs */
      .side-tabs {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1100;
        writing-mode: vertical-rl;
        background-color: rgba(0, 0, 0, 0.8);
        padding: 10px 5px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
      }
  
      .side-tabs.visible {
        opacity: 1;
        visibility: visible;
      }
  
      .side-tab {
        color: #0066ff;
        text-decoration: none;
        margin: 15px 0;
        font-size: 14px;
      }
      
      /* Bulldog Section Styles */
      .bulldog-section {
    height: 90vh; /* Reduced from 100vh to 90vh */
    display: flex;
    padding-top: 0; /* Remove padding-top */
    margin-top: 0; /* Remove margin-top */
    background-color: var(--bg-color);
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: background-color 0.5s ease;
  }
  
  /* Override for mobile to prevent overlapping */
  

  
  /* Mobile styles for bulldog-section */
  

  
      /* Remove padding from all sections including first section */
  #section1 {
    padding-top: 0;
  }
  
      .bulldog-left-side { /* Make both sides equal width */
        height: 100vh;
        position: relative;
      }
  
      .bulldog-right-side { /* Make both sides equal width */
        padding: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
  
      /* Adjust media container to use full height/width */
      .media-container {
        width: 100%;
        height: 100%;
        background-color: var(--bg-color);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
      }
      
      /* Section Navigation */
      .section-nav {
        position: fixed;
        top: 55px;
        right: 0;
        background-color:var(--bg-color);
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        z-index: 1000;
        
        transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
        box-sizing: border-box;
      }
      
      .section-nav-btn {
        color: var(--text-color);
        background-color: var(--header-bg);
        padding: 6px 10px;
        margin: 0 4px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 13px;
        font-weight: bold;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        white-space: nowrap;
      }
      
      .section-nav-btn:hover, .section-nav-btn:focus {
        background-color: var(--highlight-color);
        transform: translateY(-2px);
      }
      
      /* Make sure scrolling is smooth for section navigation */
      html {
        scroll-behavior: smooth;
      }
      
      

  
      /* We no longer need to adjust main container margins since nav is only above right column */
      
      /* Image Gallery Styles */
      .image-gallery {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
      }
      
      .gallery-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s linear, visibility 0.2s linear;
        cursor: pointer;
        will-change: opacity; /* Improves performance with hardware acceleration */
        backface-visibility: hidden; /* Reduces blurriness during transitions */
        transform: translateZ(0); /* Force GPU acceleration */
      }
      
      .gallery-image.active {
        opacity: 1;
        visibility: visible;
        z-index: 1;
        transition: opacity 0.2s linear, visibility 0.2s linear;
      }

      .gallery-video-wrap {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .gallery-video-wrap video,
      .gallery-video-wrap .gallery-video-poster {
        width: 100%;
        height: 100%;
        display: block;
      }

      .gallery-video-poster {
        position: absolute;
        inset: 0;
        object-fit: cover;
        z-index: 1;
        pointer-events: none;
        transition: opacity 0.5s ease;
      }

      .gallery-video-wrap.playing .gallery-video-poster {
        opacity: 0;
      }

      @media (min-width: 769px) {
        .image-gallery {
          cursor: pointer;
        }

        .image-gallery .gallery-controls {
          cursor: default;
        }
      }
      
      .gallery-controls {
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 5;
      }
      
      .gallery-prev, .gallery-next {
        background-color: rgba(0, 0, 0, 0.5);
        color: var(--gallery-dot-color);
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin: 0 10px;
        font-size: 18px;
        transition: background-color 0.3s, color 0.3s;
      }
      
      .gallery-prev:hover, .gallery-next:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }
      
      .gallery-dots {
        display: flex;
        justify-content: center;
        margin: 0 15px;
        position: relative;
        width: auto;
      }
      
      .gallery-nav-container {
        display: flex;
        align-items: center;
        position: relative;
      }
      
      .gallery-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%; /* Perfect circle */
        background-color: var(--gallery-dot-inactive);
        cursor: pointer;
        transition: background-color 0.6s ease-in-out, transform 0.4s ease;
        position: relative;
        z-index: 2;
        flex-shrink: 0;
        margin: 0;
      }
      
      .gallery-dot.active {
        background-color: var(--gallery-dot-color);
        transform: scale(1.1);
      }
      
      /* Progress bar between dots */
      .progress-line {
        width: 40px;
        height: 2px;
        background-color: var(--gallery-progress-bg);
        margin: 0 10px;
        position: relative;
        overflow: hidden;
      }
      
      .progress-fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: var(--gallery-progress-fill);
        transition: width 2000ms linear;
        transform: translateZ(0); /* Enable hardware acceleration */
        will-change: width; /* Hint to browser for optimization */
      }

      /* New styles for article cards with featured images */
    .article-card-image {
      height: 50%; 
      overflow: hidden;
    }
    
    .article-card-image img {
      width: 100%; 
      height: 100%; 
      object-fit: cover;
    }
    
    .article-card-featured-content {
      height: 50%; 
      display: flex; 
      flex-direction: row; 
      align-items: center; 
      justify-content: space-between;
    }
    
    .article-content-wrapper {
      width: 85%; 
      overflow: hidden; 
      height: 100%;
      padding-top: 10px;
      padding-left: 10px;
    }
    
    .article-title-container {
      margin-bottom: 5%; 
      height: 30%;
    }
    
    .article-featured-title {
      font-size: 18px; 
      line-height: 1.3; 
      margin-bottom: 4%;
      text-align: left;
    }
    
    h2.article-featured-title {
      font-size: 18px;
      font-weight: normal;
      text-align: left;
    }
    
    .article-featured-text {
      font-size: 13px; 
      line-height: 1.5; 
      height: 65%; 
      overflow: hidden;
    }
    
    .article-arrow-container {
      margin-top: 0; 
      width: 15%; 
      height: 100%; 
      display: flex; 
      justify-content: center; 
      align-items: center;
    }
    
    .arrow-container {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: auto;
    }
    
    .arrow-container svg path {
      stroke: #0066ff;
    }

    .blog-header-container {
      height: 26vh;
    }
    
    .blog-header-shift {
      top: calc(20vh - 1px) !important;
    }
    
    .blog-header {
      background-color: var(--header-bg);
      width: 100%;
      height: 20vh;
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 30px;
      z-index: 50;
      transition: all 0.3s ease;
    }
    
    .blog-header-content {
      transition: all 0.3s ease;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .blog-header-content.compact {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: center;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding-bottom: 20px;
    }
    
    .blog-title {
      max-width: 40vw;
      font-size: calc(1.5rem + 1vw);
      font-weight: bold;
      line-height: 1.2;
      color: white;
      margin-bottom: 10px;
      transition: all 0.3s ease;
      text-align: center;
    }
    
    .blog-title.compact-text {
      font-size: calc(1rem + 0.3vw);
      margin-bottom: 0;
      margin-right: 10px;
    }
    
    .blog-subtitle {
      max-width: 40vw;
      font-size: calc(1rem + 0.5vw);
      line-height: 1.3;
      color: white;
      margin-bottom: 15px;
      transition: all 0.3s ease;
      text-align: center;
    }
    
    .blog-subtitle.compact-text {
      font-size: calc(0.8rem + 0.2vw);
      margin-bottom: 0;
    }
    
    .blog-date {
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.8);
      transition: all 0.3s ease;
    }
    
    .blog-date.hidden {
      display: none;
    }

    .article-card-date {
      color: var(--text-color);
      font-size: 12px;
      margin-bottom: 10px;
    }

    .article-card-title {
      color: var(--heading-color);
      font-size: 15px;
      margin-bottom: 0;
      font-weight: bold;
      line-height: 1.3;
    }
      /* Article date class for separated dates */
    .article-date {
      display: block;
      font-size: 12px;
      color: #0066ff;
      font-weight: normal;
      margin-bottom: 6px;
    }

    .categories-dropdown-container {
      width: 100%;
      margin-bottom: 15px;
      position: relative;
    }
    .blog-right-column {
      width: 25%;
      min-width: 250px;
      position: absolute;
      right: 0;
    }
      

        
      @keyframes rotate360 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
        
      @keyframes rotate360 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
        
      @keyframes rotate360 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }      
      /* Mobile menu button */
      .menu-toggle {
        display: none;
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        padding: 0 15px;
        height: 100%;
        background-color: #002266;
      }
  
      /* Mobile utility classes */
      .mobile-only {
        display: none;
      }
      
      

      
      /* Consolidated responsive styles */
      

      
      

      
      

      
      

  
      html {
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
      }
      
      /* Add scroll snap to bulldog sections */
      .bulldog-section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }
      
      /* No image card styles */
      .no-image-card .article-card-featured-content {
        height: 100%; 
        padding-top: 20px;
      }
      
      .no-image-card .article-title-container {
        height: 15%;
      }
      
      /* Minimal page styles */
      
      .sticky {
        position: sticky;
        top: 0;
        z-index: 100;
      }
      
  
      
      /* Page wrapper */
      .page-wrapper {
        display: block;
        width: 100%;
        min-height: 100vh;
        position: relative;
        z-index: 5;
        overflow: hidden;
      }
      
      /* Content wrapper */
      .content-wrapper {
        display: block;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 30px 20px;
        background-color: var(--bg-color);
        position: relative;
        z-index: 10;
      }
      
      .article-card {
        background-color: var(--bg-color);
        border-radius: 8px;
        overflow: hidden;
        text-decoration: none;
        transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        border: 2px solid #0066ff;
        width: 350px;
        height: 450px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        position: relative;
        z-index: 10;
        margin: 0;
        /* Removed hardware acceleration properties for smoother animations */
      }
      
      .blog-content-spacer {
        flex: 1;
      }
      
      .blog-main-content {
        flex: 8;
        color: var(--text-color);
        line-height: 1.7;
        background-color: var(--bg-color);
        padding: 0;
        max-width: 600px;
      }
      
      .blog-main-content p {
        margin-bottom: 20px;
        font-size: 16px;
      }
      
      .blog-main-content h2 {
        color: #0066ff;
        text-align: left;
      }
      
      .blog-main-content p:first-of-type a {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
      }
      
      .blog-main-content p:first-of-type a:visited {
        color: #c7f394;  /* Green from action button */
      }
      
      .blog-main-content p:first-of-type a:hover {
        text-decoration: underline;
      }
      
      .blog-sidebar {
        flex: 3;
        flex-shrink: 0;
        padding-top: 0;
      }
      
      .sidebar-section {
        margin-bottom: 20px;
        background-color: var(--card-bg);
        border-radius: 0;
        padding: 15px;
      }
      
      .sidebar-heading {
        font-size: 18px;
        margin-bottom: 12px;
        color: var(--highlight-color);
        font-weight: normal;
      }
      
      .tag-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        max-height: none;
      }
      
      .tag-item {
        color: var(--text-color);
        text-decoration: none;
        padding: 8px 12px;
        display: block;
        transition: background-color 0.2s, transform 0.2s, color 0.2s;
        font-size: 14px;
        background-color: var(--card-bg);
        border: solid rgba(200, 200, 200, 0.3) 1px;
        border-radius: 20px;
        width: fit-content;
      }
      
      .tag-item:hover {
        background-color: #0066ff;
        color: white;
        transform: scale(1.05);
      }
      
      .tag-item.active {
        background-color: var(--highlight-color);
        color: white;
      }
      
      .blog-image {
        width: 100%;
        max-width: 100%;
        margin: 25px 0;
        display: block;
        border-radius: 0;
        height: auto;
      }
      
      .blog-categories-list {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      
      .blog-category-item {
        color: var(--text-color);
        text-decoration: none;
        padding: 8px;
        border-radius: 0;
        display: block;
        transition: background-color 0.2s;
        font-size: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      
      .blog-category-item:hover {
        background-color: rgba(0, 102, 255, 0.1);
      }
      
      .blog-category-item:last-child {
        border-bottom: none;
      }
      
      /* Blog responsive styles */
      

      
      

      
      

      
      

      
      

      
  
      
      /* Basic article card styles (simplified) */
      .article-card {
        background-color: var(--bg-color);
        border-radius: 8px;
        overflow: hidden;
        text-decoration: none;
        transition: background-color 0.2s ease, transform 0.2s ease;
        border: 2px solid #0066ff;
        padding: 15px;
        cursor: pointer;
        margin-bottom: 20px;
      }
      
      .article-card:hover {
        transform: scale(1.02);
        background-color: rgba(0, 102, 255, 0.4);
      }

      .blog-left-column {
        width: 75%;
        padding-right: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: flex-start;
        align-content: flex-start;
        float: left;
        margin-bottom: 30px;
      }
  
      /* Scroll Animations */
      .fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
      }
  
      .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
      }
  
      /* Specific FAQ animations */
      .faq-item.fade-in {
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                   transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
  
      /* Uses Section */
      .uses-section {
        background-color: var(--bg-color);
        padding: 150px 0 80px;
        position: relative;
        z-index: 1;
      }
  
      @keyframes rotate360 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
  
      .uses-section .container {
        max-width: 600px;
      }
  
      .uses-section h2 {
        margin-bottom: 20px;
      }
  
      .uses-section .uses-intro {
        margin-bottom: 60px;
      }
  
  
  
      .right-actions {
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: auto; /* Push to the right */
      }
  
      .uses-section .info-list {
        list-style-type: none;
        margin: 30px 0;
      }
      
      .uses-section .info-list li {
        position: relative;
        margin-bottom: 20px;
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: 20px;
      }
      
      .uses-section .info-list .icon-container {
        flex: 0 0 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .uses-section .info-list .icon-container::before {
        content: '';
        width: 60px;
        height: 60px;
        background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.8 28.8'%3E%3Cstyle%3E.circle%7Bfill:none;stroke:%23ccc;stroke-width:1px%7D.pattern%7Bfill:%23ccc%7D%3C/style%3E%3Ccircle class='circle' cx='14.6' cy='14.5' r='12'/%3E%3Ccircle class='circle' cx='14.6' cy='14.5' r='13.5'/%3E%3Cpath class='pattern' d='M10 20.4c.1-.1.9-1.6 1-1.8.7-.5 2-1.8 2-1.7 0 0 1.2 1.2 2.3 1.5l.1.8c-.4.2-1.5.7-1.9.9-1.1.2-2.5.2-3.5.2z'/%3E%3Cpath class='pattern' d='M9 22.4c1.2.3 2.3.3 3.4.3 0 0 2.6-.6 2.6-.6-.1.2-.5.8-1.8 1.1-.5.1-1 .1-1.1.1l-.2.5-.4.7c2.5.6 4.4.1 4.4.1-.7-1.7-.8-2.2-.4-4l-5.8.6-.7 1.2zm6.2-1.6v0z'/%3E%3Cpath class='pattern' d='M18.7 8.2c-.1.1-.9 1.6-1 1.8-.7.5-2.1 1.8-2 1.7 0 0-1.2-1.2-2.3-1.5l-.1-.8c.4-.2 1.5-.7 1.9-.9 1.1-.2 2.5-.2 3.5-.2z'/%3E%3Cpath class='pattern' d='M19.7 6.3c-1.2-.3-2.3-.3-3.4-.3 0 0-2.6.6-2.6.6.1-.2.5-.8 1.8-1.1.5-.1 1-.1 1.1-.1l.2-.5.4-.7c-2.5-.6-4.4-.1-4.4-.1.7 1.7.8 2.2.4 4l5.8-.6.7-1.2zm-6.3 1.6v0z'/%3E%3Cpath class='pattern' d='M11.8 7.7c.1.1.8 1.6.9 1.8 0 .9.3 2.7.3 2.6 0 0-1.6.4-2.6 1.1l-.7-.4c.1-.4.3-1.7.3-2.1.4-1 1.2-2.2 1.8-3.1z'/%3E%3Cpath class='pattern' d='M10.8 5.8c-.9.8-1.6 1.8-2.1 2.7 0 0-.9 2.5-.9 2.5-.1-.2-.4-.9.1-2.1.2-.5.4-.9.5-1 0 0-.2-.4-.3-.5-.1-.2-.4-.7-.4-.7-1.9 1.8-2.5 3.6-2.5 3.6 1.8.4 2.3.5 3.6 1.9 0 0 1.2-2.7 2.7-5.2 0 0-.6-1.3-.7-1.2zm-2.2 6.1h0z'/%3E%3Cpath class='pattern' d='M7.6 13.2c.2 0 1.8.3 2 .3.7.5 2.4 1.3 2.3 1.3 0 0-.7 1.5-.6 2.7l-.7.4c-.3-.3-1.2-1.2-1.5-1.5-.6-.9-1.1-2.2-1.5-3.2z'/%3E%3Cpath class='pattern' d='M5.4 12.9c.2 1.2.5 2.3 1 3.3 0 0 1.5 2.2 1.5 2.2-.2 0-.9-.2-1.7-1.3-.3-.5-.5-.9-.5-1 0 0-.4-.1-.6-.1-.3 0-.8-.1-.8-.1.4 2.6 1.4 4.1 1.4 4.1 1.4-1.2 1.7-1.5 3.6-1.8 0 0-1.5-2.6-2.6-5.2 0 0-1.4-.2-1.4-.2zm3.6 5.3h0z'/%3E%3Cpath class='pattern' d='M17.4 20.9c-.1-.1-.9-1.6-1-1.8-.1-.9-.4-2.7-.4-2.6 0 0 1.6-.4 2.5-1.2l.7.3c-.1.4-.2 1.7-.2 2.1-.4 1-1.1 2.2-1.7 3.1z'/%3E%3Cpath class='pattern' d='M18.6 22.8c.8-.8 1.5-1.8 2-2.7 0 0 .8-2.5.8-2.5.1.2.4.8 0 2.1-.2.5-.4.9-.5 1 0 0 .2.4.3.5.1.2.4.7.4.7 1.8-1.9 2.4-3.7 2.4-3.7-1.8-.3-2.3-.4-3.6-1.8 0 0-1.1 2.8-2.5 5.3 0 0 .7 1.3.7 1.2zm1.9-6.1v0z'/%3E%3Cpath class='pattern' d='M21.5 15.3c-.2 0-1.8-.2-2-.3-.7-.4-2.4-1.2-2.3-1.2 0 0 .6-1.6.5-2.7l.7-.4c.3.3 1.2 1.2 1.6 1.4.6.9 1.2 2.2 1.6 3.2z'/%3E%3Cpath class='pattern' d='M23.7 15.5c-.2-1.2-.6-2.3-1.1-3.2 0 0-1.6-2.2-1.6-2.2.2 0 .9.1 1.7 1.3.3.5.5.9.5 1 0 0 .4 0 .6 0 .3 0 .8.1.8.1-.5-2.6-1.6-4.1-1.6-4.1-1.3 1.3-1.7 1.6-3.6 1.9 0 0 1.6 2.5 2.8 5.1 0 0 1.4.2 1.4.1zm-3.9-5.2h0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: cover;
      }
      
      .uses-section .info-list .icon-container::before {
        animation: none;
      }
      
      .uses-section .info-list .text-container {
        flex: 1;
      }
      
      .uses-section .info-list .list-title {
        color: var(--heading-color);
        font-weight: bold;
        margin-bottom: 5px;
      }
      
      .uses-section .info-list .list-content {
        line-height: 1.4;
      }
  
      .footer .container {
        width: auto;
        max-width: none;
        margin: 0 10vw;
        position: relative;
        z-index: 2;
      }
  
      .uses-section .info-list li:hover .icon-container::before {
        animation: rotate360 0.5s linear infinite;
      }
  
      .uses-section .container {
        width: 95%;
        margin: 0 auto;
      }
      
      .uses-section .info-list .icon-container,
      .uses-section .info-list .icon-container::before {
        width: 50px;
        height: 50px;
      }
      
      .faq-section {
        padding-bottom: 40px;
        min-height: 400px;
      }
  
  
  
      /* Purpose section SVG styling */
      .purpose-section .logo-emblem .cls-1 {
        fill: rgba(0, 102, 255, 0.411) !important;
      }
  
      /* Header logo SVG styling */
      .logo-nav-svg .cls-2 {
        fill: #0066ff !important;
      }
      
      /* Universal SVG pointer events fix */
      svg {
        pointer-events: none;
      }
      
      /* Hide the Industry teamwork footer column */
      .footer-grid .footer-column:nth-child(3) {
        display: none;
      }
  
      /* Phone number responsive display */
      .phone-mobile {
        display: none;
      }
      
      .phone-desktop {
        display: block;
      }
      
      

  
      .bulldog-section {
        height: 100vh;
        display: flex;
        margin-top: 80px; /* Space for the fixed header */
        background-color: var(--bg-color);
      }
  
      .bulldog-left-side {
        width: 75vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
  
      .bulldog-right-side {
        padding: 2rem 5vw 2rem 2rem;
        overflow-y: auto;
        height: auto;
      }
  
      .media-container {
        width: 100%;
        height: 100%;
        background-color: var(--bg-color);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
  
      .media-container img, 
      .media-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  
      table.bulldog-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        color: var(--text-color);
      }
  
      .bulldog-table th, .bulldog-table td {
        padding: 0.75rem 0.5rem;
        text-align: left;
        border: none;
        line-height: 1.3;
        font-size: 0.9rem;
      }
  
      .bulldog-table th {
        background-color: transparent;
      }
      
      .bulldog-table tr {
        border-bottom: 1px solid rgba(0, 102, 255, 0.05);
        transition: background-color 0.2s ease;
      }
      
      .bulldog-table tr:hover {
        background-color: rgba(0, 102, 255, 0.3);
      }
      
      .bulldog-table tr:last-child {
        border-bottom: none;
      }
      
      .bulldog-table tr:nth-child(even) {
        background-color: rgba(0, 102, 255, 0.1);
      }
      
      .bulldog-table tr:nth-child(even):hover {
        background-color: rgba(0, 102, 255, 0.3);
      }
      
      .bulldog-table tr:nth-child(odd) {
        background-color: transparent;
      }
      
      .bulldog-table td:first-child {
        font-weight: 400;
      }
  
      .bulldog-section h2 {
        color: var(--highlight-color);
        font-size: 2rem;
        margin-bottom: 1rem;
        text-align: left;
      }
  
      .bulldog-section h3 {
        font-size: 1.5rem;
        margin: 1.5rem 0 0.75rem;
      }
  
      .bulldog-section ul {
        margin: 0.5rem 0 1.5rem 1.25rem;
      }
  
      .bulldog-section li {
        margin-bottom: 0.5rem;
        color: var(--text-color);
      }
  
      .bulldog-section p {
        margin-bottom: 1rem;
        line-height: 1.6;
        color: var(--text-color);
      }
      
      #section1 .bulldog-left-side { background-color: var(--bg-color); }
      #section2 .bulldog-left-side { background-color: var(--bg-color); }
      #section3 .bulldog-left-side { background-color: var(--bg-color); }
      #section4 .bulldog-left-side { background-color: var(--bg-color); }
      #section5 .bulldog-left-side { background-color: var(--bg-color); }
      
      /* Responsive styles for bulldog sections */
      

  
      .bulldog-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease, filter 0.5s ease;
        cursor: pointer;
      }

      .bulldog-left-container .image-gallery .bulldog-image,
      .mobile-gallery-container .image-gallery .bulldog-image {
        object-fit: contain !important;
        background: var(--bg-color);
      }
  
      .media-container:hover .bulldog-image {
        transform: scale(1.05);
        filter: brightness(1.1) saturate(1.1);
      }
  
      /* Update bulldog section structure for scroll effect */
      .bulldog-sections-container {
        position: relative;
        width: 100%;
        display: flex;
      }
  
      .bulldog-left-container {
    position: fixed;
    left: 0;
    top: 80px; /* Adjusted to match margin-top of bulldog-section */
    width: 65vw;
    height: calc(100vh - 80px); /* Adjusted to account for top positioning */
    z-index: 10;
    cursor: pointer;
  }
  
  .bulldog-right-container {
    margin-left: 65vw;
    width: 35vw;
  }
  
  /* Mobile layout - completely static, vertical stacking */
  

  
      /* Override the fixed height for bulldog sections - desktop only */
      

      
      /* Each left side panel - only one visible at a time */
      .bulldog-left-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    background-color: var(--bg-color);
    cursor: pointer;
  }
  
      .bulldog-left-panel.active {
        opacity: 1;
        visibility: visible;
      }
  
      /* Right side modifications */
      .bulldog-section {
        flex-direction: column;
        height: 100vh;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
      }
  
      .bulldog-right-side {
        width: 100%;
        min-height: 100vh;
      }
      
      /* Options Box Styles */
      .options-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 1rem 0 2rem;
        justify-content: center;
      }
      
      .option-box {
        width: 180px;
        height: 180px;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        word-wrap: break-word;
        overflow: hidden;
        flex: none;
      }
      
      .option-box:hover {
        background-color: var(--highlight-color);
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 102, 255, 0.2);
      }
      
      /* Stripe pricing table styles */
      stripe-pricing-table {
        display: block;
        position: relative;
        z-index: 100;
        margin: 20px 0;
        min-height: 400px;
        background: white;
        --stripe-color: #0066ff;
        --stripe-accent-color: #333;
      }

      /* =========================================================
         Tactical Robots page: page-scoped styles
         (Hero, V-shapes, products grid/cards, hotspots, videos carousel)
         ========================================================= */

      /* Hero (Tactical Robots) */
      .hero {
        position: relative;
        width: 100%;
        height: 80vh;
        min-height: 420px;
        background-color: #000;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        opacity: 0;
        transition: opacity 0.35s ease;
      }

      .hero-text {
        color: #cccccc;
        font-size: 12px;
        text-align: center;
        max-width: 800px;
        line-height: 1.4;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        background-color: #0000008e;
        padding: 12px 24px;
        border-radius: 2px;
        font-style: oblique;
      }

      .hero-title {
        font-size: 185px;
        color: rgba(0, 102, 255, 1);
        margin-bottom: 30px;
        text-align: center;
      }

      .nav-button {
        background-color: transparent;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-decoration: none;
      }
      
      .nav-button svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
        pointer-events: none;
      }

      .hero-video iframe video,
      iframe.hero-video video {
        object-fit: cover !important;
        object-position: top center !important;
        width: 100% !important;
        height: 100% !important;
      }

      /* Enhanced YouTube iframe scaling for fullscreen background (hero) */
      iframe.hero-video.hero-video-active {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw !important;
        height: 56.25vw !important; /* 16:9 aspect ratio */
        min-height: 100%;
        min-width: 177.77vh; /* 16:9 aspect ratio */
        transform: translate(-50%, -50%);
        z-index: 0;
        border: none;
        pointer-events: none;
        opacity: 1;
      }

      .hero-placeholder {
        position: absolute;
        inset: 0;
        z-index: 1;
      }

      .hero-overlay {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px 20px;
      }

      /* Section Angles - with directional animations */
    .v-shape-divider {
      position: relative;
      height: 6vh;
      width: 100%;
      overflow: hidden;
      margin-top: -1px; /* Prevent gaps between sections */
      margin-bottom: -1px;
    }
    
    /* Left angle - using scale transform */
    .v-shape-divider .left-angle {
      position: absolute;
      height: 6vh;
      background: inherit;
      top: 0px;
      left: 0%;
      width: 15vw;
      clip-path: polygon(0 0, 100% 0, calc(100% - 4vh) 100%, 0 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s ease-out;
    }
    
    /* Right angle - direct width change for reliability */
    .v-shape-divider .right-angle {
      position: absolute;
      height: 6vh;
      background: inherit;
      top: 0px;
      right: 0%;
      width: 15vw;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 4vh 100%);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.5s ease-out;
    }
    
    /* Animation state for left angles */
    .left-angle.animate {
      transform: scaleX(1) !important;
    }
    .right-angle.animate {
      transform: scaleX(1) !important;
    }
    
    /* Section Angles - updated to V-shape pattern */
    .v-shape-divider-overlay {
      position: relative;
      height: 6vh;
      width: 100%;
      overflow: hidden;
      margin-top: -5.9vh; /* Prevent gaps between sections */
      margin-bottom: -1px;
      z-index: 10;
    }
    
    /* Left angle - using scale transform */
    .v-shape-divider-overlay .left-angle {
      position: absolute;
      height: 6vh;
      background: inherit;
      top: 0px;
      left: 0%;
      width: 15vw;
      clip-path: polygon(0 0, calc(100% - 4vh) 0, 100% 100%, 0 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s ease-out;
    }
    
    /* Right angle - direct width change for reliability */
    .v-shape-divider-overlay .right-angle {
      position: absolute;
      height: 6vh;
      background: inherit;
      top: 0px;
      right: 0%;
      width: 15vw;
      clip-path: polygon(4vh 0, 100% 0, 100% 100%, 0 100%);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.5s ease-out;
    }

    /* Blog header styling */
    .sticky{
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .blog-header-container{
      height: 26vh;
      display: flex;
      flex-direction: column;
    }
    
    .blog-header-shift{
      top: calc(20vh - 1px) !important;
    }
    
    .scroll-indicator {
      height: 1px;
      width: 100%;
      position: absolute;
      top: 50px;
      left: 0;
      z-index: 60;
    }

    .custom-select-container {
      position: relative;
      width: 100%;
      cursor: pointer;
    }
    
    .custom-select-selected {
      width: 100%;
      padding: 8px 12px;
      background-color: var(--card-bg);
      color: var(--text-color);
      border: 1px solid rgba(200, 200, 200, 0.3);
      border-radius: 3px;
      font-size: 14px;
      cursor: pointer;
      outline: none;
      background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
      background-repeat: no-repeat;
      background-position: right 15px center;
      padding-right: 45px;
    }
    
    .custom-select-selected:hover {
      border-color: var(--highlight-color);
    }
    
    .custom-select-options {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: var(--card-bg);
      border: 1px solid rgba(200, 200, 200, 0.3);
      border-radius: 3px;
      margin-top: 5px;
      max-height: 300px;
      overflow-y: auto;
      z-index: 10;
      display: none;
    }
    
    .custom-select-container.open .custom-select-options {
      display: block;
    }
    
    .custom-option {
      padding: 8px 12px;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s;
    }
    
    .custom-option:hover {
      background-color: #0066ff;
      color: white;
    }

    .sidebar-description {
      color: var(--text-color);
      margin-bottom: 12px;
      font-size: 14px;
    }
      


      /* Products (Tactical Robots) */
      .products-section {
        background-color: var(--section-bg);
        padding: 80px 0;
        position: relative;
        z-index: 2;
      }

      .products-hero-image {
        margin: 40px 0 30px;
      }

      .products-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 20px;
        margin-top: 30px;
      }

      /* Products-grid cards (intended for comparison pages; uses tactical-* names to avoid collisions) */
      .products-grid .tactical-product-card {
        flex: 1 1 280px;
        max-width: 320px;
        margin: 0;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px;
        background-color: var(--card-bg);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
        cursor: pointer;
      }

      .products-grid .tactical-product-card:hover {
        border-color: var(--highlight-color) !important;
        background-color: rgba(0, 102, 255, 0.08);
        box-shadow: 0 10px 25px rgba(0, 102, 255, 0.22);
      }

      .products-grid .product-header {
        padding: 22px 22px 0;
      }

      .products-grid .product-features {
        padding: 0 22px 22px;
      }

      .products-grid .tactical-product-image-container {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0 14px;
      }

      .products-grid img.tactical-product-image {
        width: 180px;
        height: 180px;
        object-fit: contain;
        flex: none;
        overflow: visible;
      }

      .products-grid .tactical-product-image-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.65);
        opacity: 0;
        transition: opacity 0.25s ease;
        border-radius: 8px;
        pointer-events: none;
      }

      .products-grid .tactical-product-image-container:hover .tactical-product-image-overlay {
        opacity: 1;
      }

      .products-grid .tactical-product-image-overlay-text {
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        line-height: 1.2;
      }

      .products-grid .tactical-product-title {
        color: var(--heading-color);
        font-size: 22px;
        margin: 0 0 10px;
        line-height: 1.2;
        text-align: left;
      }

      .products-grid .tactical-product-price {
        color: var(--highlight-color);
        font-weight: bold;
        margin: 0 0 14px;
        text-align: left;
      }

      .products-grid .tactical-product-description {
        color: var(--text-color);
        line-height: 1.7;
        margin: 0 0 16px;
        text-align: left;
        font-weight: normal;
        font-style: normal;
      }

      .products-grid .feature-list {
        list-style: none;
        padding: 0;
        margin: 0 0 18px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .products-grid .feature-item,
      .products-grid .feature-item-filled {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-color);
      }

      .products-grid .checkbox {
        width: 14px;
        height: 14px;
        border-radius: 3px;
        border: 1px solid var(--border-color);
        background: transparent;
        flex: none;
      }

      .products-grid .checkbox.filled {
        background: var(--highlight-color);
        border-color: var(--highlight-color);
      }

      /* Tactical robot hotspot UI */
      .tactical-robot-container {
        position: relative;
        display: inline-block;
        cursor: default; /* Prevents changing cursor on hover */
      }

      .tactical-robot-image {
        max-width: 280px;
        height: auto;
        opacity: 0.9;
        pointer-events: none; /* Prevents browser visual search from triggering */
      }

      .hotspot {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: var(--highlight-color);
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 1;
      }

      .hotspot-tracks { top: 85%; left: 2%; }
      .hotspot-gripper { top: 5%; left: 100%; }
      .hotspot-arm { top: 35%; left: 50%; }
      .hotspot-RPTZ { top: 0%; left: 70%; }
      .hotspot-cameras { top: 65%; left: 80%; }
      .hotspot-network { top: 65%; left: 3%; }
      .hotspot-material { top: 80%; left: 50%; }

      /* Controller hotspots positioning */
      .hotspot-controller-1 { top: 35%; left: 50%; }
      .hotspot-controller-2 { top: 40%; left: 2%; }
      .hotspot-controller-3 { top: 25%; left: 75%; }
      .hotspot-controller-4 { top: 50%; left: 90%; }
      .hotspot-controller-5 { top: 65%; left: 20%; }

      .hotspot-pulse {
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border: 2px solid var(--highlight-color);
        border-radius: 50%;
        animation: pulse 2s infinite;
        opacity: 0.6;
        z-index: -1;
      }

      .hotspot-tooltip {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 12px 16px;
        border-radius: 4px;
        border: 2px solid #0066ff;
        font-size: 14px;
        min-width: 280px;
        max-width: 400px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 9999;
        pointer-events: none;
        display: block; /* Ensure tooltips are always in the layout */
      }

      


      .hotspot-tooltip-title {
        font-size: 14px;
        color: var(--heading-color);
        font-weight: bold;
        margin-bottom: 4px;
      }

      .hotspot-tooltip-description {
        font-size: 12px;
        color: var(--text-color);
        line-height: 1.3;
      }

      .hotspot-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #0066ff;
      }

      .hotspot:hover {
        transform: scale(1.2);
        background-color: white;
        box-shadow: 0 0 15px var(--highlight-color);
        z-index: 10000;
      }

      .hotspot:hover .hotspot-tooltip,
      .hotspot.active-tooltip .hotspot-tooltip {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 10000;
      }

      .hotspot:hover .hotspot-pulse,
      .hotspot.active-tooltip .hotspot-pulse {
        animation-duration: 1s;
      }

      @keyframes pulse {
        0% { transform: scale(1); opacity: 0.6; }
        50% { transform: scale(1.3); opacity: 0.3; }
        100% { transform: scale(1); opacity: 0.6; }
      }

      


      /* Videos section (carousel) */
      .videos-section {
        background-color: var(--bg-color);
        padding: 80px 0;
        position: relative;
        z-index: 1;
      }

      .video-cta-section {
        margin-top: 100px;
        margin-bottom: 100px;
        text-align: center;
      }
  
      .video-cta-section h4 {
        margin-bottom: 30px;
        text-align: center;
      }
  
      .video-cta-buttons {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 30px;
      }
  
      .video-cta-buttons .cta-button {
        margin: 0;
        min-width: 140px;
      }

      /* Divider between robot + controller (Tactical Robots comparison) */
      .showcase-divider {
        width: 2px;
        height: 300px;
        background-color: var(--text-color);
        opacity: 0.6;
      }

      


      .videos-container {
        width: 95%;
        max-width: 1400px;
        margin: 0 auto;
        text-align: center;
      }

      .videos-section h2 {
        margin-bottom: 40px;
      }

      .video-display {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
      }

      .video-display iframe {
        width: 100%;
        height: 650px;
        border: none;
      }

      .video-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
      }

      .carousel-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        margin-bottom: 20px;
      }

      .carousel-btn {
        background-color: transparent;
        color: var(--highlight-color);
        border: none;
        padding: 0;
        margin: 0;
        width: 80px;
        height: 80px;
        cursor: pointer;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-weight: bold;
      }

      .carousel-btn svg {
        width: 75px;
        height: 75px;
        cursor: pointer !important;
        pointer-events: none;
      }

      .carousel-btn:hover {
        color: #0055cc;
        transform: scale(1.2);
      }

      .carousel-btn:disabled {
        color: #666;
        cursor: not-allowed;
        transform: scale(1);
      }

      .carousel-indicators {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        height: 80px;
      }

      .indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #666;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .indicator.active {
        background-color: var(--highlight-color);
        transform: scale(1.2);
      }

      .video-title {
        margin-top: 15px;
        color: var(--heading-color);
        font-size: 18px;
        font-weight: bold;
        text-align: center;
      }

@media (max-width: 1200px) {
        .product-upper {
          justify-content: center;
        }
        
        .product-image-section {
          flex: 0 0 400px;
        }

        .blog-left-column {
          justify-content: center;
        }
      }

@media (max-width: 1200px) {
        .container-narrow { width: 60%; }
        .faq-container { width: 80%; }
        .hero-title { font-size: 100px; }
      }

@media (max-width: 1200px) {
        .footer-grid {
          gap: 30px;
        }
      }

@media (max-width: 1024px) {
        .phone-mobile {
          display: block;
        }
        
        .phone-desktop {
          display: none;
        }
      }

@media (max-width: 1024px) {
        .welcome-text {
          display: none;
        }
        
        .footer-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        
        .footer-column:first-child {
          padding-right: 0;
        }
        
        .award-container {
          margin-top: 20px;
          min-height: 210px;
        }
      }

@media (max-width: 1024px) {
        .mobile-only {
          display: block;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .left-nav .right-nav-angle {
          left: 165px;
        }
  
      }

@media (max-width: 1024px) {
        /* Layout changes */
        .container-narrow { width: 90%; }
        .faq-container { width: 90%; }
        .info-grid { grid-template-columns: 1fr; gap: 20px; }
        .info-image { order: -1; } /* Move image above text */
        
        /* Product grids */
        .products-grid { justify-content: center; }
        .product-card { flex: 0 0 calc(50% - 10px); margin-bottom: 20px; }
        
        /* Header elements */
        .header { top: 10px; width: 95%; }
        .logo-container { width: auto; }
        .dark-mode-toggle { margin: 0; width: 50px; }
        .right-actions { margin-left: auto; }
        
        /* Navigation */
        .nav-links {
          display: none;
          position: fixed;
          top: 75px;
          left: 2.5%;
          width: 95%;
          background-color: var(--header-bg);
          flex-direction: column;
          height: auto;
          z-index: 100;
          max-height: 80vh;
          overflow-y: auto;
          border-radius: 0 0 8px 8px;
        }
        .nav-links.active { display: flex; }
        .nav-item { width: 100%; height: auto; }
        .nav-link { 
          height: 50px; 
          width: 100%; 
          padding: 0 20px; 
          justify-content: space-between; 
          border: none !important; 
        }
        .menu-toggle { display: block; }
        .mobile-only .nav-link { font-weight: bold; }
        
        /* Remove all border styles in mobile navigation */
        .nav-item .nav-link,
        .nav-item .nav-link.dropdown,
        .nav-item:hover .nav-link.dropdown,
        .nav-item.dropdown-open .nav-link.dropdown {
          border: none !important;
          border-top: none !important;
          border-bottom: none !important;
          border-left: none !important;
          border-right: none !important;
          background-color: transparent;
          border-radius: 0;
        }
        
        /* Dropdown modifications */
        .dropdown-content {
          position: static;
          width: 100%;
          transform: none;
          border-radius: 0;
          box-shadow: none;
          padding: 0;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s;
          border: none !important;
        }
        .dropdown-inner { flex-direction: column; width: 100%; }
        .dropdown-column { width: 100%; padding: 5px 20px; flex: 0 0 100%; }
        
        /* Typography adjustments */
        h2 { font-size: 28px; }
        h3 { font-size: 24px; }
        h6 { font-size: 16px; }
        .hero-title { font-size: 60px; }
        
        /* Other elements */
        .hero { height: 60vh; }
      }

@media (max-width: 1024px) {
  
  
      }

@media (max-width: 1024px) {
        .nav-item:hover .nav-link.dropdown,
        .nav-item.dropdown-open .nav-link.dropdown,
        .nav-link.dropdown {
          border: none !important;
          border-top: none !important;
          border-bottom: none !important;
          border-left: none !important;
          border-right: none !important;
          border-radius: 0 !important;
          background-color: transparent;
        }
        
        .dropdown-content {
          border: none !important;
        }
      }

@media (max-width: 1024px) {
    }

@media (max-width: 1000px) {
        .blog-title {
          max-width: 80vw;
          font-size: calc(1.2rem + 0.8vw);
        }
        
        .blog-subtitle {
          max-width: 80vw;
          font-size: calc(0.9rem + 0.3vw);
        }
      }

@media (max-width: 1000px) {
        .blog-content-container {
          flex-direction: column;
          align-items: center;
        }
        
        .blog-left-column {
          width: 100%;
          padding-right: 0;
          float: none;
        }
        
        /* Remove spacer entirely from flow on smaller screens */
        .blog-left-spacer {
          display: none;
          width: 0;
          float: none;
        }
        
        .blog-right-column {
          width: 100%;
          float: none;
          margin-top: 30px;
          position: relative;
        }
        
        .blog-sidebar {
          width: 100%;
          max-width: 100%;
        }
        
        .blog-main-content {
          max-width: 600px;
          width: 100%;
          padding: 0 15px;
        }
        
        .article-card {
          flex: 0 0 calc(50% - 10px);
          width: calc(50% - 10px); /* Ensure consistent width with flex property */
        }
      }

@media (max-width: 968px) {
        .modal-content {
          max-width: 90%;
        }
        
        .modal-thumbnails {
          overflow-x: auto;
          justify-content: flex-start;
          padding: 10px 5%;
        }
        
        .product-upper {
          flex-direction: column;
          align-items: center;
        }
        
        .product-image-section {
          flex: 0 0 auto;
          width: 90%;
          margin-right: 0;
          max-width: 450px;
        }
        
        .stripe-button-container {
          margin: 20px 0;
          width: 90%;
          text-align: center;
        }
        
        .product-info-section {
          flex: 0 0 auto;
          width: 90%;
          padding-right: 0;
          margin-bottom: 20px;
        }
        
        .product-title {
          padding-right: 0;
        }
      }

@media (max-width: 900px) {
        .video-display { width: 100%; }
        .carousel-controls { gap: 20px; }
        .carousel-btn { width: 40px; height: 40px; }
        .carousel-btn svg { width: 28px; height: 28px; }
      }

@media (max-width: 900px) {
        /* On mobile, position tooltips relative to hotspots */
        .hotspot-tooltip {
          position: absolute;
          bottom: 30px;
          left: 50%;
          transform: translateX(-50%);
        }
      }

@media (max-width: 800px) {
        .showcase-divider {
          width: 80%;
          height: 2px;
          margin: 30px auto;
        }
      }

@media (max-width: 768px) {
        /* Adjust section containers for mobile - stack vertically with images on top */
        .bulldog-sections-container {
          display: block;
        }
        
        /* Make left container (images) position relative instead of fixed */
        .bulldog-left-container {
          position: relative;
          width: 100%;
          height: 40vh;
          top: auto;
          left: auto;
        }
        
        /* Reset right container styles */
        .bulldog-right-container {
          margin-left: 0;
          width: 100%;
        }
        
        /* Make sections display as blocks in mobile */
        .bulldog-section {
          display: block;
          height: auto;
          min-height: auto;
          padding-top: 0;
          margin-top: 0;
        }
        
        .bulldog-right-side {
          width: 100%;
          height: auto;
          min-height: auto;
          padding: 2rem 1.5rem;
          overflow-y: visible;
        }
        
        /* Disable scroll snapping on mobile */
        html {
          scroll-snap-type: none;
        }
        
        /* Make the left panels visible as needed in the flow */
        .bulldog-left-panel {
          position: relative;
          height: 40vh;
          opacity: 1;
          visibility: visible;
          display: block;
        }
        
        /* Add proper spacing between sections */
        .bulldog-section:not(:first-child) {
          margin-top: 40vh;
        }
        
        /* Structure each section to have its panel shown above its content */
        .bulldog-section {
          position: relative;
          margin-bottom: 2rem;
        }

        .blog-header {
          padding: 0 15px;
        }
        
        .article-cards-container {
          grid-template-columns: repeat(1, 1fr);
        }
        
        .blog-header-content {
          width: 100%;
        }
        
        .blog-title {
          font-size: calc(1rem + 0.8vw);
        }
        
        .blog-subtitle {
          font-size: calc(0.8rem + 0.3vw);
        }
        
        .blog-date {
          font-size: 0.8rem;
        }
      }

@media (max-width: 768px) {
    /* Reset the entire sections container */
    .bulldog-sections-container {
      display: block !important;
      width: 100% !important;
      margin-top: 80px !important; /* Add more space for header */
      position: static !important;
    }
    
    /* Remove mobile background images for sections 2-5 */
    #section2::before,
    #section3::before,
    #section4::before,
    #section5::before {
      display: none !important;
    }
    
    /* Special mobile gallery for section 1 - PRESERVE THIS */
    .mobile-gallery-container {
      display: none;
    }
    
    @media (max-width: 768px) {
      .mobile-gallery-container {
        display: block !important;
        width: 100% !important;
        height: 40vh !important;
        margin-bottom: 20px !important;
        position: relative !important;
        overflow: hidden !important;
      }
      
      .mobile-gallery-container .image-gallery {
        width: 100% !important;
        height: 100% !important;
      }
      
      .mobile-gallery-container .gallery-image {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
      }
      
      .mobile-gallery-container .gallery-controls {
        position: absolute !important;
        bottom: 10px !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 10 !important;
      }
      
      .mobile-gallery-container .bulldog-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
      }
    }
    
    /* Hide the original desktop containers */
    .bulldog-left-container {
      display: none !important;
      position: static !important;
      height: auto !important;
    }
    
    /* Reset margin for right container */
    .bulldog-right-container {
      margin-left: 0 !important;
      width: 100% !important;
      position: static !important;
      height: auto !important;
      overflow: visible !important;
    }
    
    /* Create fully static section layout */
    .bulldog-section {
      display: block !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      margin: 0 0 40px 0 !important; /* Adjusted bottom margin */
      padding: 20px 0 60px 0 !important; /* Added top and bottom padding */
      position: static !important;
      width: 100% !important;
      border-bottom: 2px solid rgba(0, 102, 255, 0.3) !important; /* Visible section separator */
      overflow: visible !important;
    }
    
    /* Last section doesn't need bottom margin and border */
    .bulldog-section:last-child {
      margin-bottom: 40px !important;
      border-bottom: none !important;
    }
    
    /* Mobile section image container */
    .mobile-section-image {
      width: 100% !important;
      height: 40vh !important;
      margin-bottom: 30px !important;
      display: block !important;
      position: relative !important;
      overflow: hidden !important;
    }
    
    /* Mobile section content */
    .bulldog-right-side {
      width: 100% !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      padding: 0 1.5rem !important;
      overflow: visible !important;
      position: static !important;
    }
    
    /* Make sure images display properly */
    .mobile-section-image img, 
    .mobile-section-image video {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }
    
    /* Gallery specific fixes for mobile */
    .mobile-section-image .image-gallery {
      width: 100% !important;
      height: 100% !important;
      position: relative !important;
    }
    
    .mobile-section-image .gallery-image {
      width: 100% !important;
      height: 100% !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
    }
    
    .mobile-section-image .gallery-controls {
      position: absolute !important;
      bottom: 10px !important;
      left: 0 !important;
      width: 100% !important;
      z-index: 10 !important;
    }
    
    /* Clear all fixed positioning */
    .bulldog-left-panel {
      position: static !important;
    }
    
    /* Disable scroll snapping */
    html {
      scroll-snap-type: none !important;
    }
    
    body {
      overflow-y: auto !important;
    }
    
    .bulldog-section {
      scroll-snap-align: none !important;
      scroll-snap-stop: normal !important;
    }
    
    /* Ensure FAQ section doesn't overlap */
    .faq-section {
      padding-top: 60px !important;
      margin-top: 40px !important;
      position: static !important;
    }
  }

@media (max-width: 768px) {
        .blog-header {
          padding: 0 15px;
        }
        
        .article-cards-container {
          grid-template-columns: repeat(1, 1fr);
        }
        
        .blog-header-content {
          width: 100%;
        }
        
        .blog-title {
          font-size: calc(1rem + 0.8vw);
        }
        
        .blog-subtitle {
          font-size: calc(0.8rem + 0.3vw);
        }
        
        .blog-date {
          font-size: 0.8rem;
        }
      }

@media (max-width: 768px) {
        .section-nav {
          width: 100%;
          top: 65px;
          overflow-x: auto;
          padding: 8px 5px;
          justify-content: flex-start;
          z-index: 100;
        }
        
        .section-nav-btn {
          flex: 0 0 auto;
          margin: 0 3px;
          padding: 6px 8px;
          font-size: 12px;
        }
      }

@media (max-width: 768px) {
    
    /* Force image panels to be on top in mobile */
    .bulldog-left-container {
      order: -1;
    }
  }

@media (max-width: 768px) {
    .bulldog-section {
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      margin-bottom: 100px !important;
      padding-bottom: 50px !important;
      display: block !important;
      position: static !important;
    }
  }

@media (max-width: 768px) {
      .product-upper {
        flex-direction: column;
      }
      
      .product-image-gallery {
        width: 100%;
      }
    }

@media (max-width: 768px) {
        .product-image-gallery {
          flex: 0 0 auto;
          flex-direction: column-reverse;
          align-items: center;
        }
        
        .main-image-container {
          height: 320px;
          margin-right: 0;
          margin-bottom: 10px;
          width: 100%;
        }
        
        .thumbnail-container {
          flex-direction: row;
          height: auto;
          width: 100%;
          justify-content: center;
          gap: 10px;
          margin-bottom: 10px;
        }
        
        .thumbnail {
          width: 50px;
          height: 50px;
        }
        
        .modal-prev, .modal-next {
          padding: 5px 10px;
          width: 40px;
          height: 40px;
        }
        
        .tab-container {
          width: 100%;
          overflow-x: auto;
        }
        
        .tab-content {
          width: 100%;
          box-sizing: border-box;
        }
        
        .tab-content.active {
          padding-left: 10px;
          padding-right: 10px;
          max-width: 100%;
        }
        
        .expanded-inner {
          padding: 0 15px 10px;
        }
      }

@media (max-width: 600px) {
        .footer-grid {
          grid-template-columns: 1fr;
        }
        
        .footer-bottom, 
        .footer-legal {
          flex-direction: column;
          gap: 15px;
          align-items: center;
        }
      }

@media (max-width: 600px) {
        .main-image-container {
          height: 250px;
        }
        
        .product-image-section,
        .stripe-button-container,
        .product-info-section {
          width: 95%;
        }
        
        .tab-container {
          width: 100%;
          max-width: 100%;
          overflow-x: auto;
        }
        
        .tabs {
          min-width: 480px;
        }
        
        .expanded-content {
          width: 100%;
          margin: 0 0 10px 0;
          padding: 0;
        }
        
        .expanded-inner {
          width: 100%;
          padding: 0 10px 10px;
        }
        
        .tab-content.active {
          padding-left: 5px;
          padding-right: 5px;
          max-width: 100%;
        }
        
        .tab-content ul {
          margin-left: 15px;
        }
      }

@media (max-width: 600px) {
      .product-upper {
        flex-direction: column;
      }
      
      .product-image {
        flex: 0 0 200px;
        width: 100%;
      }
    }

@media (max-width: 600px) {
        .product-card { flex: 0 0 100%; }
      }

@media (max-width: 600px) {
        .article-card {
          flex: 0 0 100%;
          width: 100%;
        }
        
        .blog-content-wrapper {
          padding-bottom: 30px;
        }
      }

@media (max-width: 480px) {
        .hotspot {
          width: 24px;
          height: 24px;
          z-index: 100;
        }

        .hotspot-tooltip {
          min-width: 160px;
          max-width: 200px;
          font-size: 12px;
          padding: 8px 12px;
          bottom: 40px;
          z-index: 10000;
        }

        .hotspot-tooltip-title {
          font-size: 12px;
          margin-bottom: 3px;
        }

        .hotspot-tooltip-description {
          font-size: 10px;
          line-height: 1.2;
        }

        /* Adjust tooltip position for edge hotspots */
        .hotspot-gripper .hotspot-tooltip,
        .hotspot-cameras .hotspot-tooltip,
        .hotspot-controller-3 .hotspot-tooltip {
          left: auto;
          right: 0;
          transform: none;
        }

        .hotspot-tracks .hotspot-tooltip,
        .hotspot-arm .hotspot-tooltip,
        .hotspot-network .hotspot-tooltip,
        .hotspot-controller-2 .hotspot-tooltip,
        .hotspot-controller-5 .hotspot-tooltip {
          left: 0;
          transform: none;
        }

        .video-cta-section {
          margin-top: 100px;
          margin-bottom: 100px;
          text-align: center;
        }
  
        .video-cta-buttons {
          flex-direction: column;
          gap: 15px;
          align-items: center;
        }
  
        .video-cta-buttons .cta-button {
          min-width: 200px;
          max-width: 250px;
        }

        .blog-header-container {
          height: 22vh;
        }
        
        .blog-header {
          height: 16vh;
        }
        
        .blog-title {
          font-size: calc(0.9rem + 0.7vw);
        }
        
        .blog-subtitle {
          font-size: calc(0.7rem + 0.3vw);
        }
        
        .blog-date {
          font-size: 0.7rem;
        }

        .v-shape-divider.blog-header-container {
          height: auto !important;
          min-height: 26vh !important;
        }
        .blog-header-shift {
          top: calc(20vh - 1px) !important;
          height: 6vh !important;
        }
        .blog-header {
          top: 0 !important;
          position: relative !important;
          height: auto !important;
          min-height: 20vh !important;
        }
        .blog-header.compact-header {
          position: relative !important;
          top: 0 !important;
          height: auto !important;
        }
        .blog-subtitle.compact-text {
          display: none !important;
        }
        .blog-title.compact-text {
          margin-top: 60px !important;
        }
        .scroll-indicator {
          top: 0 !important;
        }
      }

@media (max-width: 480px) {
      .main-image-container {
        height: 250px;
      }
    }

@media (max-width: 480px) {
        .video-display { width: 100%; }
        .carousel-controls { gap: 15px; margin-bottom: 15px; }
        .carousel-btn { width: 35px; height: 35px; }
        .carousel-btn svg { width: 24px; height: 24px; }
        .indicator { width: 10px; height: 10px; }
        .videos-section { padding: 60px 0; }
      }

@media (max-width: 480px) {
        .blog-header {
          top: 0 !important;
          position: relative !important;
          height: auto !important;
          min-height: 20vh !important;
        }
        .blog-header.compact-header {
          position: relative !important;
          top: 0 !important;
          height: auto !important;
        }
        .blog-subtitle.compact-text {
          display: none !important;
        }
        .blog-title.compact-text {
          margin-top: 60px !important;
        }
      }

@media (max-width: 480px) {
        .hero-30 {
          height: 25vh;
        }
        
        .v-shape-divider.blog-header-container {
          height: auto !important;
          min-height: 26vh !important;
        }
        
        .blog-title {
          font-size: calc(0.9rem + 0.7vw);
        }
        
        .blog-subtitle {
          font-size: calc(0.7rem + 0.3vw);
        }
        
        .blog-date {
          font-size: 0.7rem;
        }
        
        .sidebar-section {
          padding: 10px;
        }
        
        .tag-item {
          padding: 6px 10px;
          font-size: 12px;
        }
      }

@media (max-width: 480px) {
        /* Layout */
        .container, .container-narrow { width: 95%; }
        .purpose-section .container {
          margin: 0 5% 0 10%;
          gap: 20px;
          flex-direction: column;
          align-items: flex-start;
        }
        .uses-section .container { margin-left: 10%; margin-right: 5%; }
        
        /* Typography & elements */
        .hero-title { font-size: 40px; }
        .hero { height: 50vh; }
        .logo-text { font-size: 18px; }
        .dark-mode-toggle { width: 40px; margin: 0 5px; }
        .feature-list { font-size: 14px; }
        .purpose-section .logo-emblem { 
          width: 80px; 
          height: 80px; 
          align-self: flex-start; 
        }
        
        /* Animation adjustments */
        .fade-in { transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
      }

@media (max-width: 480px) {
        .v-shape-divider,
        .v-shape-divider-overlay {
          height: 50px;
        }
      }

@media (min-width: 769px) {
        .bulldog-section {
          min-height: 100vh !important;
          height: auto !important;
        }
        
        .bulldog-right-side {
          min-height: 100vh !important;
          height: auto !important;
          overflow-y: visible !important;
        }
      }

    /* Blog post page (single article) */
    .hero-30 {
      position: relative;
      height: 30vh;
      width: 100%;
      overflow: hidden;
      margin-top: 0;
      padding-top: 60px;
      background-color: var(--header-bg);
    }

    .blog-content-wrapper {
      display: flex;
      width: 100%;
      margin: 0 auto;
      padding: 30px 20px;
      gap: 30px;
      background-color: var(--bg-color);
    }

    .blog-main-content h2,
    .blog-main-content h3[id] {
      font-size: 1.3rem;
      margin-top: 24px;
      margin-bottom: 16px;
      scroll-margin-top: 200px;
    }

    .blog-main-content h2.summary-heading {
      color: var(--heading-color);
    }

    .blog-main-content .info-list a {
      color: var(--heading-color);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .blog-main-content .info-list a:hover {
      color: var(--highlight-color);
    }

    .blog-content-separator {
      margin: 30px 0;
      border: 0;
      height: 1px;
      background-color: #cccccc;
    }

    .reading-progress-container {
      position: absolute;
      width: 100%;
      height: 6vh;
      background-color: transparent;
      z-index: 1000;
      bottom: 1px;
      left: 0;
    }

    :root {
      --progress-color: #ccff66;
      --segment1-max-width: calc(15% - 4vh + 4px);
      --segment2-max-height: 6vh;
      --segment3-max-width: 70%;
      --segment4-max-height: 6vh;
      --segment5-max-width: calc(15% - 4vh + 4px);
    }

    .progress-segment {
      position: absolute;
      background-color: var(--progress-color);
      height: 5px;
      transition: all 0.2s;
    }

    .progress-segment-1 {
      bottom: 0;
      left: 0;
      width: 0;
      max-width: var(--segment1-max-width);
    }

    .progress-segment-2 {
      bottom: 0;
      left: calc(15% - 4vh - 1px);
      width: calc(4vh + 2px);
      height: 6vh;
      max-height: var(--segment2-max-height);
      clip-path: polygon(4vh 100%, calc(4vh + 5px) 100%, 5px 100%, 0 100%);
      transform-origin: bottom left;
    }

    .progress-segment-3 {
      top: 0;
      left: 15%;
      width: 0;
      max-width: var(--segment3-max-width);
    }

    .progress-segment-4 {
      top: 0;
      left: calc(85% - 5px);
      width: calc(4vh + 2px + 5px);
      height: 6vh;
      max-height: var(--segment4-max-height);
      clip-path: polygon(0 0, 5px 0, 5px 0, 0 0);
      transform-origin: top left;
    }

    .progress-segment-5 {
      bottom: 0;
      left: calc(85% + 4vh - 4px);
      width: 0;
      max-width: var(--segment5-max-width);
    }

    .related-articles-section-container {
      background-color: var(--bg-color);
      padding: 40px 0 60px;
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .related-articles-section-container .container-narrow {
      width: 100%;
      max-width: 600px;
      margin: 0;
    }

    .related-articles-section {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    .content-divider {
      border: 0;
      height: 1px;
      background-color: var(--border-color);
      margin: 30px 0;
    }

    .related-articles-heading {
      font-size: 24px;
      color: var(--heading-color);
      margin-top: 80px;
      margin-bottom: 40px;
      text-align: left;
    }

    .related-articles-section .article-cards-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      width: 100%;
    }

    .related-articles-section .article-card {
      width: auto;
      max-width: none;
      background-color: var(--header-bg);
      border-radius: 8px;
      overflow: hidden;
      text-decoration: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid var(--border-color);
      height: auto;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      padding: 0;
      margin-bottom: 0;
      box-shadow: none;
    }

    .related-articles-section .article-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      background-color: var(--header-bg);
    }

    .related-articles-section .article-card-content {
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 140px;
      height: 100%;
    }

    .related-articles-section .article-card-title {
      color: white !important;
      font-size: 15px;
      margin-bottom: 0;
      font-weight: bold;
      line-height: 1.3;
    }

    .related-articles-section .article-card-date {
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      margin-bottom: 10px;
    }

    @media (max-width: 1000px) {
      .blog-content-wrapper {
        flex-direction: column;
        align-items: center;
      }

      .blog-sidebar {
        width: 100%;
        max-width: 100%;
      }

      .blog-main-content {
        max-width: 600px;
        width: 100%;
        padding: 0 15px;
      }
    }

    @media (max-width: 768px) {
      .related-articles-section .article-cards-container {
        grid-template-columns: 1fr;
      }
    }