/* ============================================
   ERGONOMICS ENGINEERED - MOBILE & TABLET STYLES
   Affects screens 1040px and below
   ============================================ */

@media (max-width: 1040px) {

  /* ----- BODY/HTML BACKGROUND FALLBACK ----- */
  body, html {
    background-color: #0a1628;
  }

  /* ----- MOBILE MENU BAR - BLACK WITH WHITE HAMBURGER ----- */
  .grax_tm_mobile_menu .topbar_inner {
    background-color: #0a1628 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .my_trigger .hamburger-inner,
  .my_trigger .hamburger-inner::before,
  .my_trigger .hamburger-inner::after {
    background-color: #fff !important;
  }

  /* Mobile menu logo - make it bigger */
  .grax_tm_mobile_menu .logo img {
    max-width: 130px !important;
  }

  /* Mobile dropdown menu */
  .grax_tm_mobile_menu .dropdown {
    background-color: #0a1628 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a {
    color: #fff !important;
  }

  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a:hover,
  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a:active,
  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li.current a {
    color: #00d4ff !important;
  }

  /* ----- FORCE FULL WIDTH ON ALL CONTAINERS ----- */
  .grax_tm_all_wrap,
  .grax_tm_hero,
  .grax_tm_hero > * {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* But keep some padding on text content */
  .grax_tm_hero .details {
    padding-left: 20px !important;
    padding-right: 20px !important;
    top: calc(8% - 15px) !important;
    transform: translateY(0) !important;
  }

  /* Hide taglines on mobile */
  .grax_tm_hero .details .tagline {
    display: none !important;
  }

  /* ----- HERO SECTION ----- */

  /* Allow line breaks in brand prefix */
  .grax_tm_hero .details .brand_prefix {
    white-space: normal !important;
    display: block !important;
    text-align: left !important;
  }

  .grax_tm_hero {
    min-height: 100vh;
    overflow: hidden;
  }

  .grax_tm_hero .ripple {
    background-image: url('../img/slider/2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Ensure background covers fully */
  .grax_tm_hero .background,
  .grax_tm_hero .image {
    width: 100%;
    background-size: cover;
    background-position: center center;
  }

  /* ----- ERGOSPHERE SECTION (01) ----- */
  /* Mobile structure: Image → Text → Button → Carousel */

  #ergosphere .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #ergosphere .about_inner {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Use display:contents to flatten .right so we can reorder its children */
  #ergosphere .about_inner.reverse .right {
    display: contents;
  }

  /* Order: 1=image, 2=text, 3=button */
  #ergosphere .about_inner.reverse .right .image {
    order: 1 !important;
    width: 75% !important;
    margin: 0 auto !important;
    max-height: 280px;
  }

  #ergosphere .about_inner.reverse .left {
    order: 2 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #ergosphere .about_inner.reverse .right .grax_tm_button {
    order: 3 !important;
    width: 100%;
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 40px;
  }

  /* Remove bottom padding from text container */
  #ergosphere .about_inner.reverse .left .text {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Reduce section gaps on mobile */
  #ergosphere .grax_tm_about {
    margin-bottom: 0 !important;
    padding-bottom: 65px !important;
  }

  /* Remove carousel bottom margins on mobile */
  #ergosphere .ergosphere_gallery {
    margin-bottom: 0 !important;
  }

  /* ----- ERGOBYTES SECTION (02) ----- */
  /* Mobile structure: Image → Text → Button → Carousel */

  #ergobytes .ergobytes_top {
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }

  /* Order: 1=image, 2=text (which contains button) */
  #ergobytes .ergobytes_top .ergobytes_logo {
    order: 1 !important;
    width: 60% !important;
    max-width: 250px;
    margin: 0 auto 20px auto !important;
  }

  #ergobytes .ergobytes_top .ergobytes_text {
    order: 2 !important;
  }

  /* Reduce space after description */
  #ergobytes .ergobytes_description {
    margin-bottom: 0 !important;
  }

  /* Center the YouTube button and match spacing to sections 01/03 */
  #ergobytes .ergobytes_cta {
    text-align: center;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }

  /* Episodes carousel - mobile size adjustments */
  #ergobytes .episode_card {
    width: 200px;
  }

  #ergobytes .episode_image {
    height: 113px;
  }

  #ergobytes .ergobytes_episodes {
    margin-bottom: 0 !important;
  }

  /* Match section spacing to other sections */
  #ergobytes .grax_tm_news {
    padding-bottom: 65px !important;
  }

  /* ----- ERGOCONNECT SECTION (03) ----- */
  /* Mobile structure: Image → Text → Button */

  #ergoconnect .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #ergoconnect .about_inner {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Use display:contents to flatten .right so we can reorder its children */
  #ergoconnect .about_inner .right {
    display: contents;
  }

  /* Order: 1=image, 2=text, 3=button */
  #ergoconnect .about_inner .right .image {
    order: 1 !important;
    width: 75% !important;
    margin: 0 auto !important;
    max-height: 280px;
  }

  #ergoconnect .about_inner .left {
    order: 2 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #ergoconnect .about_inner .right .grax_tm_button {
    order: 3 !important;
    width: 100%;
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 40px;
  }

  /* Remove bottom padding from text container */
  #ergoconnect .about_inner .left .text {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Match section 02 header and footer spacing */
  #ergoconnect .grax_tm_about {
    margin-bottom: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 65px !important;
  }

  /* ----- JOURNEY SECTION (04) ----- */

  /* Add header space above the image and footer space below */
  #journey .grax_tm_journey {
    padding-top: 75px !important;
    padding-bottom: 65px !important;
  }

  #journey .journey_top {
    margin-top: 20px !important;
    padding-top: 0 !important;
  }

  #journey .journey_portrait {
    margin-top: 0 !important;
    width: 75% !important;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ----- CONTACT SECTION ----- */

  #contact.grax_tm_contact {
    padding-top: 20px !important;
    padding-bottom: 75px !important;
    margin-bottom: 0 !important;
  }

  /* Center the title */
  #contact .grax_tm_title_holder {
    text-align: center;
  }

  #contact .contact_inner {
    padding-top: 30px !important;
  }

  /* Hide text labels, show only icons */
  #contact .info_list ul {
    display: flex !important;
    justify-content: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #contact .info_list ul li {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
  }

  #contact .info_list .list_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0 !important;
  }

  /* Hide the text */
  #contact .info_list .list_inner p {
    display: none !important;
  }

  /* Circle container on the anchor */
  #contact .info_list .list_inner > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  #contact .info_list .list_inner > a:hover {
    border-color: #00d4ff;
  }

  /* Style the icon inside */
  #contact .info_list .list_inner img.svg {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: none !important;
    border-radius: 0 !important;
    filter: brightness(0) invert(1);
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide Location, show YouTube on mobile */
  #contact .info_list ul li.location-item {
    display: none !important;
  }

  #contact .info_list ul li.youtube-item {
    display: block !important;
  }

  /* ----- FOOTER/COPYRIGHT ----- */

  /* Force footer elements visible - fixes WOW.js not triggering on mobile */
  .grax_tm_copyright .wow {
    visibility: visible !important;
    animation: none !important;
  }

  .grax_tm_copyright {
    padding: 40px 0 30px 0 !important;
    margin-bottom: 0 !important;
  }

  /* Exclude footer from general section rules */
  .grax_tm_section > .grax_tm_copyright {
    padding-top: 40px !important;
    margin-bottom: 0 !important;
  }

  /* Hide social icons in footer (now in contact section) */
  .grax_tm_copyright .social {
    display: none !important;
  }

  /* Logo size and center */
  .grax_tm_copyright .logo {
    text-align: center;
    width: 100%;
  }

  .grax_tm_copyright .logo img,
  .ee_footer .logo img {
    max-width: 450px !important;
    width: 75% !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ----- GENERAL FIXES ----- */

  /* Reduce section spacing by half */
  .grax_tm_about,
  .grax_tm_section > div {
    padding-top: 75px !important;
    margin-bottom: 75px !important;
  }

  /* Fix all overflow elements */

  /* Modal - hide or constrain */
  .grax_tm_modalbox_news,
  .grax_tm_modalbox_news .box_inner,
  .grax_tm_modalbox_news .description_wrap {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* Animated galleries - keep overflow hidden */
  .ergosphere_gallery,
  .awards_gallery {
    max-width: 100vw !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .gallery_scroll,
  .awards_scroll {
    max-width: none !important;
    width: max-content !important;
  }

  /* Contact section */
  .grax_tm_contact,
  .grax_tm_contact .container,
  .contact_inner,
  .contact_simple,
  .contact_info {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Global container fix */
  .container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow: hidden !important;
  }

  /* Main wrapper */
  .grax_tm_all_wrap {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

}

@media (max-width: 768px) {

  /* ----- MOBILE-ONLY HERO BACKGROUND ----- */
  .grax_tm_hero .ripple {
    background-image: url('../img/slider/2_MOBILE.png');
    background-position: top center;
  }

}

@media (max-width: 480px) {

  /* ----- SMALL MOBILE TWEAKS ----- */

  /* Scale down the main title */
  .grax_tm_hero .brand_name,
  .grax_tm_hero .name {
    font-size: 2.5rem !important;
    word-break: keep-all;
    white-space: normal;
  }

}

@media (max-width: 360px) {

  /* ----- EXTRA SMALL MOBILE ----- */

  .grax_tm_hero .brand_name,
  .grax_tm_hero .name {
    font-size: 2rem !important;
  }

}