@media (max-width: 767px) {
  .video-container {
    position: sticky;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }
  #section05 a {
    font-weight: 300;
    font-size: 16px;
  }
  video {
    height: 100vh;
    object-fit: cover;
    background-color: transparent !important;
  }
  .frame-child {
    max-width: 180px;
  }
  /* Button Styles */
  button {
    all: unset;
    display: inline-block;
    padding: 10px 20px;
    color: var(--darkGray);
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0; /* Initially hidden */
    transform: translateY(10px); /* Slightly off-position */
    transition: opacity 0.6s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent; /* Removes blue highlight */
  }

  /* Fade-in class */
  .fade-in {
    opacity: 1;
    transform: translateY(0); /* Bring to original position */
  }
  #button0 {
    bottom: calc(8%);
    right: calc(6.5%);
    border-radius: 6px;
  }
  .scroll-down {
    font-weight: 300;
  }
  /* All buttons centered at the bottom with consistent width and height */
  #button1,
  #button3,
  #button4,
  #button6,
  #button8 {
    position: fixed;
    bottom: calc(10%); /* Centered near the bottom */
    left: calc(
      50% - 120px
    ); /* Centers buttons horizontally (adjust based on width) */
    transform: translateX(50%);
    width: 240px; /* Consistent width */
    height: 40px; /* Consistent height */
    background-color: var(--yellowAccent); /* Yellow background color */
    border-radius: 12px; /* Smooth rounded corners */
    color: var(--white); /* White text color */
    font-size: 18px; /* Text size */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    outline: none; /* Remove outline on focus */
    text-align: center; /* Center the text */
    align-items: center;
    line-height: 22px; /* Vertically align text */
    right: 0;
    transform: none; /* No centering on mobile */
  }

  /* Style for hover effect */
  #button1:hover,
  #button2:hover,
  #button3:hover,
  #button4:hover,
  #button5:hover,
  #button6:hover,
  #button7:hover,
  #button8:hover {
    background-color: var(--hover); /* Slightly darker yellow on hover */
  }

  #button9 {
    position: fixed;
    bottom: calc(100% - 100%);
    right: calc(50% - 140px);
    border-radius: 6px;
  }
  #button10 {
    bottom: calc(100% - 60%);
    right: calc(50% - 610px);
    border-radius: 6px;
  }
  .feature-section-container {
    max-width: 280px;
    margin: 0 auto;
  }
  .feature-section-container-2 {
    max-width: 250px;
    margin: 0 auto;
  }
  .feature-section {
    background: var(--featureDropdown);
    border-radius: 10px;
    margin: 15px 0;
    padding: 16px;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensure content is contained within the section */
  }

  .feature-section h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    text-align: right;
  }

  .feature-section .feature-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding-top 0.3s ease;
    font-size: 10px;
    color: var(--darkGrayOpacity);
    line-height: 1.6;
    padding-top: 0;
  }

  .feature-section.active {
    background: var(--featureDropdown);
  }

  .feature-section.active .feature-content {
    max-height: 150px;
    padding-top: 0px; /* Creates downward separation */
    display: flex;
    flex-direction: column;
  }
  .feature-content a {
    color: inherit;
    text-decoration: none;
    text-align: right;
    align-items: baseline;
    font-weight: 200;
  }

  .toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }

  .feature-section.active .toggle-icon {
    transform: rotate(180deg);
  }

  /* Remove focus outline */
  button:focus {
    outline: none;
  }

  /* Optionally, add custom focus styling */
  button:focus-visible {
    outline: 2px solid var(--white); /* Optional: add white outline on focus */
  }
}
/* Hide default desktop buttons on mobile */
button[id^="button"] {
  display: none;
}

/* Show mobile buttons only on mobile view */
@media (max-width: 767px) {
  button[id^="mobileButton"] {
    display: block;
  }

  /* footer */
  .frame-parent {
    width: 100%;
    position: relative;
    display: flex;
    top: 40%;
    left: 2.5%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 31px;
    text-align: left;
    font-size: var(--font-size-12-xxs);
    color: var(--color-black);
  }
  .frame-group {
    display: block;
  }
  .frame-item {
    display: block;
  }
  .group-container {
    display: none;
  }
  .line-parent {
    display: none;
  }
  .strategic-ai-advisory a:hover,
  .advanced-ai-solutions a:hover,
  .feature-content a:hover,
  .align-with-us a:hover,
  .ceo-articulating a:hover,
  .saige_footer a:hover,
  .ai-security a:hover {
    color: var(--redAccent);
  }
  .home a:hover {
    color: var(--redAccent);
  }
}