html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Barlow', sans-serif;
}

html {
  scroll-behavior: smooth;
}

a {
  color: rgba(133, 133, 130, 1);
  text-decoration: none;
}

h2 {
  font-size: 32px;
}

body.no-scroll {
  overflow: hidden;
}

.nax_gold {
  color: rgb(255, 194, 22);
}

.nax_floating_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: black;
  z-index: 1000;
  display: flex;
  flex-direction: column; /* Stack menu and dropdown */
  align-items: center;
}

.nax_floating_menu_container {
  max-width: 1600px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nax_menu_logo {
  font-size: 24px;
  color: white;
}

.nax_menu_categories a {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  color: white;
  text-decoration: none;
  margin: 0 20px;      /* 20px gap on the left and right of each link */
  padding: 8px 12px;   /* Optional: space inside the link for better clickability */
  transition: color 0.3s;
}

.nax_menu_categories a:hover {
  color: #FFC216;
}

/* Mobile toggle button (hamburger) */
.nax_menu_toggle {
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

/* Mobile dropdown menu hidden by default */
.nax_mobile_menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 80px;
  right: 20px;
  background-color: black;
  padding: 10px 20px;
  z-index: 999;
  width: max-content;
  max-width: 80vw;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.nax_mobile_menu.show {
  max-height: 500px; /* Adjust depending on expected height */
  opacity: 1;
  pointer-events: auto;
}

.nax_mobile_menu a {
  color: white;
  text-decoration: none;
  white-space: nowrap;  /* Prevent text from wrapping */
  overflow: hidden;     /* Optional: hide overflow */
  text-overflow: ellipsis; /* Optional: ellipsis for long items */
  padding: 10px 0;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
}


.nax_mobile_menu a:hover {
  color: #FFC216;
}

/* Responsive rules */
@media screen and (max-width: 1024px) {
  .nax_menu_categories {
    display: none;
  }

  .nax_menu_toggle {
    display: block;
    font-size: 28px;
    color: white;
    cursor: pointer;
    padding: 10px;
  }


  .nax_mobile_menu.show {
    display: flex;
  }
}



/* Container for all sections */
.nax_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    font-family: 'Barlow', sans-serif;
}

h5 {
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 0;
}

/* First Section: Video */
.nax_video_section {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 400px; /* Minimum height for video section */
}

.nax_background_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video Overlay – covers entire video */
.nax_video_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25); /* Dark semi-transparent overlay */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* New container to center overlay content within 1200px */
.nax_overlay_container {
    width: 100%;
    max-width: 1000px; /* To constrain the content width */
    padding: 0 20px;
}

/* New container for overlay content */
.nax_video_content {
    display: flex;
    justify-content: space-between; /* Push the two sections apart */
    align-items: center;
    color: white;
    flex-wrap: wrap; /* Allow the content to stack on smaller screens */
}

/* Fade-in animation for the overlay content */
.fade-in {
  animation: fadeIn 1.2s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Overlay content (title, logo, button) styling */
.nax_intro_block {
    max-width: 50%;  /* Let this part take half of the container */
    text-align: left;
}

.nax_intro_title {
    font-size: 36px;
    margin: 20px 0;
    animation: fadeIn 1.5s ease forwards;
    animation-delay: 2s;      /* Delay of 3 seconds after page load */
}

.nax_intro_logo {
    max-width: 100%;
    height: auto;
}

.nax_intro_button {
  background-color: white;
  color: black;
  padding: 10px 20px;
  border: none;
  font-size: 1em;
  border-radius: 5px;
  cursor: pointer;
  width: fit-content;
}

/* The part with the paragraph and button */
.nax_video_content .nax_button_area {
    display: flex;
    flex-direction: column;  /* Stack button and text vertically on narrow screens */
    align-items: flex-end;  /* Align everything to the right */
    max-width: 50%; /* Ensure this part stays within half of the container */
    margin-left: 20px; /* Space between intro block and button area */
    text-align: right;
}

@media (max-width: 768px) {
    .nax_video_section {
        min-height: 600px; /* Reduce minimum height on mobile */
    }
    
    /* Make sure video background covers and crops from sides on narrow screens */
    .nax_background_video {
        object-fit: cover;  /* Crop from sides and cover the area */
        height: 600px;  /* Full height */
    }
  
    .nax_video_content {
        flex-direction: column; /* Stack content vertically */
        align-items: center;
        text-align: center;
    }
    
    .nax_video_content .nax_button_area {
      flex-direction: unset;
    }
  
    .nax_intro_block {
        max-width: 100%;  /* Full width on mobile */
        margin-bottom: 20px;
    }
    
    .nax_button_area {
        max-width: 100%; /* Take full width on mobile */
        align-items: center;
    }
    
    .nax_custom_button {
        width: auto; /* Ensure button does not stretch */
        margin-top: 10px;
    }
}


/* Second Section: Carousel */
.nax_carousel_section {
    position: relative;
    width: 100%;
    /*display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;*/
    background-color: #e6e6e6;
    min-height: 100%; /* Allow the section to grow with content */
}

.nax_carousel_wrapper {
    position: relative;
    overflow: hidden; /* Ensure only the active image is shown */
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;
}

.nax_carousel {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack image and text vertically */
}

.nax_carousel_gif {
    background-attachment: scroll !important;
    position: relative;
    width: 65%;
    min-width: 10px;
    min-height: 10px;
    order: 0;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    /*justify-content: center;
    align-items: center;*/
    margin-bottom: -7%;
    }
    
.nax_carousel_gif img {
    width: 100%;
    height: 100%;
    background-attachment: scroll !important;
    object-fit: cover;
    padding-top: -20px;
    padding-bottom: -20px;
    }

.nax_slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto; /* This ensures the height adapts to the image size */
    opacity: 0; /* Hide all slides initially */
    transition: opacity 1s ease-in-out; /* Fade transition for images */
}

/* Make the active slide visible */
.nax_slide.active {
    opacity: 1;
    position: relative;
    z-index: 1;
}

.nax_slide img {
    width: 50%;
    height: auto; /* Ensure the image keeps its aspect ratio */
    margin: 0 auto;
    display: block;
}

.nax_caption {
    font-family: 'Barlow', sans-serif;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    font-size: 30px;
    color: white;
    text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 10; /* Ensures the text is above the image */
}

.nax_slide.active .nax_caption {
    opacity: 1;
    transition-delay: 1s; /* Text appears after image transition finishes */
}

/* Fade-out effect for the label before transition */
.nax_slide:not(.active) .nax_caption {
    opacity: 0;
    transition: opacity 0.5s ease-in-out 0s; /* Label disappears before image fades out */
}

/* Arrows */
.nax_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: black;
    z-index: 20; /* Keep arrows above everything */
}

/* Adjust to be close to the carousel image */
.nax_left_arrow {
    left: calc(50% - 32.5% + 100px);
}

.nax_right_arrow {
    right: calc(50% - 32.5% + 100px);
}

@media (max-width: 1024px) {
  .nax_arrow {
      width: 30px;
      height: 30px;
  }

  .nax_left_arrow {
      left: calc(50% - 45% + 10px);
  }

  .nax_right_arrow {
      right: calc(50% - 45% + 10px);
  }
    
  .nax_slide img {
  width: 90%;
  }
  
  .nax_caption {
      font-size: 20px;
  }
}


/* 3 - Background Image */
.nax_section_three {
  position: relative; /* Create stacking context for overlay */  
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../images/naxeon-1920-banner-37-2880w.webp');
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 9;
  min-height: 720px; /* or desired minimum height */
  overflow: hidden;
}

/* Create the overlay effect using a pseudo-element */
.nax_section_three::before {
  content: ""; /* No text, just the overlay */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent dark overlay */
  z-index: 1; /* Make sure the overlay is above the background but below the content */
}

/* Centering and styling for the content */
.nax_section_three_content {
  position: relative; /* Ensure content is above the overlay */  
  max-width: 1000px;
  width: 90%;
  margin: auto;
  text-align: center;
  z-index: 2; /* Make sure content is above the overlay */
}

/* Heading styles with fixed font size */
.nax_section_three_heading {
    font-size: 36px;
    color: white;
    margin: 10px 0;
}

.nax_section_three_subheading {
    font-size: 30px;
    color: white;
    margin-bottom: 20px;
}

.nax_icon_rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

.nax_icon_wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* max-width: 800px;  Set a max width for wider screens */
    gap: 20px;
    /*height: 100px;
    box-sizing: border-box; /* Ensure padding/margins don't add extra height */
}

.nax_icon {
    width: 20%;
    height: 100px;
    text-align: right; /* Align icon to the right */
    display: flex;
    justify-content: center;
    align-items: center;
}

.nax_icon img {
    height: 50%;
}

.nax_texts {
    display: flex;
    flex-direction: row; /* Ensure text remains in a row on wide screens */
    gap: 20px;
    width: 80%;
}

.nax_text1, .nax_text2 {
    width: 50%; /* Fixed width for alignment */
    text-align: left;
}

.nax_text1 p, .nax_text2 p {
    margin-top: 5px;
    margin-bottom: 0px;
}

/* Color classes for each row */
.nax_orange_row .nax_texts {
    color: #FFC216;
}

.nax_white_row .nax_texts {
    color: white;
}

.nax_green_row .nax_texts {
    color: #8BDF64;
}

@media (max-width: 768px) {
  
  .nax_section_three {
      background-size: cover; /* Ensures the image keeps the aspect ratio while cropping */
      background-position: center center; /* Adjusts the position to center the image */
      min-height: 720px; /* Ensure the minimum height on narrow screens */
  }

  /*.nax_section_three {
      background-size: auto 100%; /* Keeps full height while cropping width * /
      background-position: center;
  }*/
  
  .nax_icon_wrapper {
    justify-content: center; /* Center align the whole row */
    gap: 16px; /* Adjust vertical spacing between items */
    padding: 10px 0; /* Optional: add padding for extra space */
  }
  
  /* Stack heading text slightly smaller */
  .nax_section_three_heading { font-size: 28px; }
  .nax_section_three_subheading { display: none; }
      
  .nax_icon {
      width: 10%;
  }
  .nax_texts {
      width: 100%;
      flex-direction: column; /* Stack texts on smaller screens */
      gap: 10px;
  }
  .nax_text1, .nax_text2 {
      width: 100%;
  }
}




/* Fourth Section */
.nax_section_four {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    padding: 20px;
}

/* Tabs */
.nax_tabs {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    margin-bottom: 10px;
}

.nax_tab {
    background-color: white;
    color: black;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    outline: none;
    flex: 1;
    border-bottom: 3px solid grey;
}

.nax_tab.active {
    border-bottom: 3px solid black;
}

@media (max-width: 768px) {
  .nax_anim_area {
    width: 80% !important;
  }
  
  .nax_tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 8px;
    scrollbar-width: none; /* hide scrollbar on Firefox */
  }

  .nax_tabs::-webkit-scrollbar {
    display: none; /* hide scrollbar on Chrome/Safari */
  }

  .nax_tab {
    flex: none;
    font-size: 0.75em;
    padding: 4px 6px;
    white-space: nowrap;
  }
}

/* Slide area */
.nax_anim_area {
    background-color: black;
    width: 40%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.nax_anim_area img {
    width: 100%;
    height: auto;
}

/* Individual slides */
.nax_anim {
    opacity: 0;
    transition: opacity 0.4s ease;
    display: none;
    width: 100%;
    text-align: center;
}

/* Show the active slide */
.nax_anim.active {
    opacity: 1;
    display: block;
}

.nax_explanation_area {
    width: 80%;
    max-width: 1000px;
    margin-top: 20px;
    text-align: left;
}

.nax_explanation_text {
    opacity: 0;
    transition: opacity 0.4s ease;
    display: none;
    text-align: left;
}

.nax_explanation_text.active {
    display: block;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.nax_explanation_text h3 {
  font-size: 1.5em;
  margin: 10px 0;
}

.nax_explanation_text p {
  font-size: 1em;
  margin: 0;
  line-height: 1.5;
}


/* Section Five Styling */
.nax_section_five {
    background-color: black;
    width: 100%;
    padding: 40px 0;
    text-align: center;
    color: white;
}

.nax_section_five h2 {
    font-size: 32px;
    margin-bottom: 20px;
}



/* Content Container (now .nax_column) */
.nax_column {
    display: flex;
    flex-direction: column;
    gap: 48px;
/*    height: 332px;                 /* Fixed height for each row */
    justify-self: center;
}

.nax_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 24px;
    max-width: 1200px;
}

/* Styling for the cells (content of each column) */
.nax_cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background-color: #333;        /* Dark background for each column */
    padding: 20px;
    color: white;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 769px) {
  .nax_cell {
    min-height: 332px;                 /* Fixed height for each row */
  }
}

/* Align the left or right media based on the class */
.nax_cell.left-media {
    flex-direction: row;   /* Media on the left */
}

.nax_cell.right-media {
    flex-direction: row-reverse;   /* Media on the right */
}

.nax_media img, .nax_media video {
    width: 100%;
    height: auto;
    max-width: 100%;  /* Ensures the media fits within the container */
    object-fit: cover;
}

.nax_explanation {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to new line */
    align-items: flex-start;
    margin-bottom: 20px;
}

.nax_column_icon {
    width: 72px; /* Set the width of the icon */
}

.nax_column_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nax_column_icon, .nax_title {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px; /* Space between icon and title */
}

/* Title and Text */
.nax_title {
    flex: 1; /* Take up remaining space */
    text-align: left;
}

.nax_text {
    width: 100%; /* Ensure text takes full width below the icon and title */
    margin-top: 10px; /* Add spacing between title and text */
    text-align: left;
}

.nax_text h3 {
    font-size: 24px;
    margin: 10px 0;
}

.nax_text p {
    font-size: 16px;
    line-height: 1.5;
}

/* Ensure the text fills the remaining space */
.nax_explanation .nax_title, .nax_explanation .nax_text {
    width: 100%;
}


@media (max-width: 768px) {
  .nax_column {
      display: flex;
      flex-direction: column;
  }
  
  .nax_row {
    flex-direction: column;
  }

  .nax_cell {
      flex-direction: column;            /* Stack the content vertically */
      height: auto;                      /* Adjust height for stacked layout */
      margin-bottom: 20px;               /* Space between stacked rows */
  }

  .nax_explanation {
      padding-left: 0;
  }
  
  .nax_cell.left-media,
  .nax_cell.right-media {
      order: 2; /* media comes second */
  }

  .nax_cell:not(.left-media):not(.right-media) {
      order: 1; /* text comes first */
  }
  
  .nax_cell {
    height: auto;
    padding: 10px 0;
  }
}





/* Section Six: White background, full width */
.nax_section_six {
  background-color: white;
  width: 100%;
  padding: 40px 0;
  box-sizing: border-box;
}

/* Container to restrict the content width to 1200px and center it */
.nax_six_container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px; /* Optional horizontal padding */
}

/* Section Title: Icon and Title aligned horizontally */
.nax_six_title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: black;
  text-align: left;
}

.nax_six_title img {
  width: 72px; /* Adjust icon size if needed */
  height: auto;
  margin-right: 16px;
}

.nax_six_title h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
}

.nax_six_title p {
  font-size: 30px;
  font-weight: 400;
  margin: 0;
}

@media (max-width: 768px) {
  .nax_section_five h2,
  .nax_six_title h2,
  .nax_seven_title h2  {
    font-size: 24px;
  }
  
  .nax_section_five p,
  .nax_six_title p,
  .nax_seven_title p  {
    font-size: 18px;
  }
}

/* Gallery container */
.nax_six_gallery {
  display: grid;
  grid-template-columns: repeat(4, 234px);
  gap: 16px;
  justify-content: space-between;
}

/* Each gallery item */
.nax_gallery_item {
  width: 234px;
  aspect-ratio: 234 / 471;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: 40px;
}

.nax_gallery_item img {
  width: 100%;
  height: auto;
  flex: 1;            /* Let the image take up available vertical space */
  object-fit: cover;  /* Ensure the image covers the area while keeping its aspect ratio */
}

.nax_gallery_caption {
  text-align: center;
  font-size: 16px;
  margin-top: 8px;
  color: #333;
}

/* Up to 1024px: switch to a 2×2 grid * /
@media (max-width: 1024px) {
  .nax_six_gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .nax_gallery_item {
    width: 100%;
    /* Maintain the aspect ratio using the CSS aspect-ratio property;
       if not supported, the object-fit on the image will help. * /
    aspect-ratio: 234 / 470;
  }
}

/* Up to 768px: all items stack vertically * /
@media (max-width: 768px) {
  .nax_six_gallery {
      grid-template-columns: 1fr;
  }
} */

.nax_gallery_swiper {
  display: none !important;
}

.swiper.nax_gallery_swiper {
  display: none !important; /* Force display: block on Swiper container */
}

@media (max-width: 1024px) {
  .nax_six_gallery {
    display: none; /* hide original gallery */
  }

  .nax_gallery_swiper {
    display: block !important;
  }
  .swiper.nax_gallery_swiper {
    display: block !important; /* Force display: block on Swiper container */
  }
  
  /* Optional: Adjust swiper styling to fit better on mobile */
  .swiper {
    width: 100%;
    height: auto;
  }

  .swiper-slide {
    display: flex !important;
    justify-content: center; /* center the content */
    align-items: center;
  }

}


/* Section Seven overall container */
.nax_section_seven {
  background-color: black;
  color: white;
  width: 100%;
  box-sizing: border-box;
}

/* Centered container for title (max-width: 1200px) */
.nax_seven_container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px; /* Optional horizontal padding */
}

/* Title area: icon and title horizontally aligned and centered */
.nax_seven_title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: white;
  text-align: left;
}

.nax_seven_title img {
  width: 72px; /* Adjust icon size if needed */
  height: auto;
  margin-right: 16px;
}

.nax_seven_title h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
}

.nax_seven_title p {
  font-size: 30px;
  font-weight: 400;
  margin: 0;
}

@media (max-width: 768px) {
  .nax_section_five h2,
  .nax_six_title h2,
  .nax_seven_title h2  {
    font-size: 24px;
  }
  
  .nax_section_five p,
  .nax_six_title p,
  .nax_seven_title p  {
    font-size: 18px;
  }
}

/* Background image container */
/* Flex properties added to center the overlay content both horizontally and vertically */
.nax_seven_background {
  width: 100%;
  background-image: url('../images/leading-2880w.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nax_nine_background {
  width: 100%;
  background-image: url('../images/bike1.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 390px;
}

/* Custom button style with the gradient background */
:root {
  --btn-bg-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(244, 234, 5, 1) 100%);
}


.nax_custom_button {
  width: 230px;
  height: 42px;
  padding: 0; /* Removing extra padding since dimensions are fixed */
  font-size: 18px;
  color: white;
  border: none;
  cursor: pointer;
  background-image: var(--btn-bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px; /* Adjust the radius as needed */
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

.nax_test_button {
  margin-top: 20px !important;
}

/* Optional: Hover effect to darken the button (or any other effect) */
.nax_custom_button:hover {
  filter: brightness(0.9);
}


/* Force 390px height for viewports below 1920px, otherwise maintain aspect ratio */
@media (max-width: 1919px) {
  .nax_seven_background {
    height: 390px;
  }
}
@media (min-width: 1920px) {
  .nax_seven_background {
    aspect-ratio: 1920 / 390;
  }
}

/* Overlaid container for punchlines, centered horizontally and vertically */
.nax_seven_content {
  max-width: 1200px;
  width: 100%;
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;  /* Increased gap between punchlines */
}

/* Styling for each punchline */
.nax_seven_punchline {
  font-size: 24px;
  font-weight: bold;
  position: relative;
  padding-left: 10px;
}

@media (max-width: 768px) {
  .nax_seven_punchline {
    font-size: 16px;
  }
}

/* Pseudo-element for bullet icon before each punchline */
.nax_seven_punchline:before {
  content: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><path fill='white' d='m79.086 18.453 2.4648 2.4648c5.582 5.582 4.2031 14.969-2.75 18.707-8.2695 4.4453-8.2695 16.309 0 20.754 6.9531 3.7383 8.3359 13.125 2.75 18.707l-2.4648 2.4648c-5.582 5.582-14.969 4.2031-18.707-2.75-4.4453-8.2695-16.309-8.2695-20.754 0-3.7383 6.9531-13.125 8.3359-18.707 2.75l-2.4648-2.4648c-5.582-5.582-4.2031-14.969 2.75-18.707 8.2695-4.4453 8.2695-16.309 0-20.754-6.9531-3.7383-8.3359-13.125-2.75-18.707l2.4648-2.4648c5.582-5.582 14.969-4.2031 18.707 2.75 4.4453 8.2695 16.309 8.2695 20.754 0 3.7383-6.9531 13.125-8.332 18.707-2.75z'></path></svg>");
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}

/* Section eight */
.nax_section_eight {
  background-color: white;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.nax_table_container {
  max-width: 1200px;
  width: 100%;
}

.nax_table {
  width: 100%;
  border-collapse: collapse;
}

.nax_table_scroll {
  width: 100%;
  overflow-x: auto;
}

.nax_table td {
  padding: 20px 10px;
  text-align: left;
  vertical-align: top;
  border-top: 2px solid grey;
}

.nax_table tr:first-child td {
  border-top: none; /* Remove top border from first row */
}

.nax_cell_content {
  display: flex;
  flex-direction: column;
}

.nax_cell_big {
  font-size: 30px;
/*  font-weight: bold; */
  margin-bottom: 5px;
}

.nax_cell_small {
  font-size: 16px;
  color: #555;
}

@media (max-width: 768px) {
  .nax_table td {
    padding: 12px 8px;
  }

  .nax_cell_big {
    font-size: 20px;
  }

  .nax_cell_small {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .nax_cell_big {
    font-size: 18px;
  }
}

/* Section 10: Full-width background with color #DDE2E6 */
.nax_section_ten {
  background-color: #DDE2E6;
  width: 100%;
  padding: 60px 0;
  box-sizing: border-box;
}

/* Container restricted to a maximum of 1200px and centered */
.nax_ten_container {
  max-width: 1200px;
  width: 85%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-left: 20px;
}

/* Each column */
.nax_ten_column {
  display: flex;
  flex-direction: column;
}

/* Header area: fixed height of 70px for text or image */
.nax_ten_header {
  height: 70px;
  display: flex;
  align-items: left;
  justify-content: left;
}

/* Ensure header images scale properly */
.nax_ten_header img {
  max-height: 100%;
  width: auto;
}

/* Separator: thin solid grey line; only inner horizontal ones */
.nax_ten_separator {
  height: 1px;
  background-color: grey;
  margin-bottom: 20px;
}

/* Content below the header and separator */
.nax_ten_content {
  text-align: left;
  font-size: 16px;
  color: #333;
}

.nax_big_icons {
    font-size: 30px;
    margin-top: 16px;
}

.nax_small_icons_margin {
    margin-right: 10px;
    color: #333;
}

@media (max-width: 768px) {
  .nax_ten_container {
    grid-template-columns: 1fr; /* Stack columns vertically */
    gap: 40px; /* More space between stacked sections */
    padding-left: 20px;
  }

  .nax_ten_header {
    justify-content: flex-start; /* Ensure alignment doesn't jump around */
  }

  .nax_ten_content {
    font-size: 15px;
  }

  .nax_big_icons {
    font-size: 24px;
  }
}



/* Footer section */
.nax_footer {
  background-color: black;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nax_footer_container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: white;
  text-align: center;
  padding: 0 16px;
}

.nax_footer a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.nax_footer a:hover {
  color: #FFC216; /* optional hover color */
}

@media (max-width: 768px) {
  .nax_footer_container {
    /*flex-direction: column;*/
    gap: 6px;
  }

  .nax_footer_container span {
    /*display: block;*/
    width: 100%;
  }


  .nax_footer_container span:nth-child(1),
  .nax_footer_container span:nth-child(2),
  .nax_footer_container span:nth-child(3),
  .nax_footer_container span:nth-child(4),
  .nax_footer_container span:nth-child(6),
  .nax_footer_container span:nth-child(7),
  .nax_footer_container span:nth-child(8)
  {
    display: none;
  } 
}


/* Gallery */
.nax_gallery_section {
  background-image: url('../images/naxeon-1920-banner-37-2880w.webp'); /* Replace with your image */
  background-size: cover;
  background-position: center;
/*  height: 100vh; */
  position: relative;
/*  display: flex; */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 80px;
}

.nax_video_overlay_flex_fix {
  flex-direction: column;
  align-items: normal;
  position: relative;
  background: rgba(0, 0, 0, 0.75);
  padding-bottom: 50px;
}

.nax_gallery_stacked_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* spacing between galleries */
}


.nax_gallery_wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  width: 90%;
}

.nax_gallery_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.nax_gallery_thumb {
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.nax_gallery_thumb img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  display: block;
}

.nax_gallery_thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nax_gallery_thumb:hover img {
  transform: scale(1.05);
}

.nax_gallery_thumb:hover::before {
  opacity: 1;
}

/* Fullscreen gallery */
.nax_fullscreen_gallery {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nax_fullscreen_gallery.hidden {
  display: none;
}

.nax_gallery_page_swiper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nax_gallery_page_swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nax_gallery_page_swiper img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.swiper-button-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  z-index: 10;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
}

.nax_gallery_heading {
  font-family: 'Barlow', sans-serif;
  color: white;
  text-align: center;
  font-size: 2rem;
  margin: 10px 0 00px;
}

/* Default: mobile Swipers hidden */
.nax_gallery_mobile_swiper {
  display: none !important;
}

/* On narrow screens: show Swipers, hide thumbs */
@media (max-width: 1024px) {
  .nax_gallery_wrapper {
    display: none;
  }

  .nax_gallery_mobile_swiper {
    display: block !important;
    width: 100%;
    padding: 1rem 0;
  }

  .nax_gallery_mobile_swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nax_gallery_mobile_swiper img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 10px;
  }
}