/* mobile.css */
@media (max-width: 991.98px) {
:target {
  scroll-margin-top: 100px; /* adjust to your navbar height */
}

.nav-link {
  position: relative;
  z-index: 9999;
}
    
  .navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 1rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    z-index: 10;
  }

  .navbar-brand img {
    width: 90px !important;
  }

  .navbar-toggler {
    margin-left: auto;
    padding: 0;
    border: none;
    background: transparent !important;
  }
  

  .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
  }

  .navbar-toggler-icon {
    display: none;
  }

  .navbar-toggler::before {
    content: "\2630";
    color: white;
    font-size: 1.8rem;
  }

  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    height: calc(100vh - 70px);
    background-color: #e2e2e2;
    z-index: 9;
    padding: 2rem 1.5rem;

    /* Start hidden */
    opacity: 0;
    clip-path: inset(0 0 100% 0); /* hidden from top */
    transition: 
      opacity 0.35s ease, 
      clip-path 0.35s ease; 
  }

  .navbar-collapse.show {
    opacity: 1;
    clip-path: inset(0 0 0 0); /* fully visible */
  }
  .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color:black;
  }

.navbar-nav .nav-link {
  color: #000 !important;
  padding: 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 600;


}

  .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }



@media (max-width: 991.98px) {
  .auth-username {
    color: black !important;
  }
}

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

@media (max-width: 991.98px) {

  .hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    pointer-events: none; /* disables all clicks/taps */
  }

  .concept-bg-video {
  pointer-events: none; /* Prevent click/tap */
  object-fit: cover; /* Fill area */
  object-position: center center; 
  width: 100%;
  height: 100%;
}

  /* Position text at lower third */
  .hero-text {
    position: absolute;
    bottom: 20%;
    left: 5%;
    z-index: 2;
    color: white;
    font-size: 1.5rem;
    text-align: left !important;
    width: 90%;
  }

  .hero-text h1 {
    font-size: 2rem;
    line-height: 1.4;
  }
}

/* FOUNDER */

@media (max-width: 767.98px) {
  .founder-section {
    background-position: 63% center; /* Shift image slightly right */
    padding: 80px 20px;
  }

  .founder-section .col-md-5 {
    margin-left: 0 !important;

  }

  .founder-section .lead {
    font-size: 0.95rem;
        text-align:left !important;
  }

  .view-more-wrapper-founder {
    position: relative;

    overflow: hidden;
    max-height: 180px; /* initial height */
    transition: max-height 0.4s ease;
  }

  .view-more-wrapper-founder.expanded-founder {
    max-height: 1000px; /* expanded height */
  }

  .view-more-founder-button {
    display: inline-block;
    margin-top: 1rem;
    color: #fff;


    cursor: pointer;
  }
}


/* CATERING */
/* CATERING Responsive Styles */
@media (max-width: 767.98px) {
  .catering-text-wrapper {
    margin-left: 0 !important;
    padding: 0 15px;
  }

    #catering.hero-section {
    position: relative !important;
    height: auto !important;
  }


  .catering-text-wrapper .lead {
    font-size: 0.95rem;
    text-align: left !important;
  }

  .view-more-wrapper-catering {
    position: relative;
    overflow: hidden;
    max-height: 380px;
    transition: max-height 0.4s ease;
  }

  .view-more-wrapper-catering.expanded-catering {
    max-height: 1000px;
  }

  .view-more-catering-button {
    display: inline-block;
    margin-top: 1rem;
    color: #fff;
    cursor: pointer;
  }
}

@media (max-width: 767.98px) {
  .toggle-wrapper {
    position: relative;
    overflow: hidden;
    max-height: 147px; /* Reduced from 250px for better mobile UX */
    transition: max-height 0.4s ease;
  }

  .toggle-wrapper.expanded {
    max-height: 2000px; /* Increased to accommodate all content */
  }

  .toggle-btn {
    display: inline-block;
    margin: 1rem 0;
    color: #fff;
    cursor: pointer;
    z-index: 1; /* Ensure button stays clickable */
    position: relative; /* Needed for z-index to work */
  }

  /* Add some padding to prevent text from touching edges */
  .overlay {
    padding: 1rem;
  }
}



  #segmentsCarouselMobile .carousel-item {
    min-height: auto !important;
    height: auto !important;
    transition: none; /* avoid height animation glitches */
  }

  /* Let the inner container grow */
  #segmentsCarouselMobile .carousel-inner {
    height: auto !important;
  }

  /* Prevent overflow issues */
  #segmentsCarouselMobile {
    overflow: visible;
  }
}



.concept-hero-mobile {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.concept-bg-video {
  pointer-events: none; /* Prevent click/tap */

  width: 100%;
  height: 100%;
}

.concept-hero-mobile .concept-bg-video,
.concept-hero-mobile .concept-bg-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.concept-hero-mobile .concept-gradient-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;

  z-index: 1;
}

.concept-hero-mobile .container {
  position: relative;
  z-index: 2;
}