/* ============================= MOBILE (<= 991.98px) ============================= */
@media (max-width: 991.98px) {
   
  html, body {
  overflow-x: visible !important;
}
body.nav-open {
    height: 100vh;
    overflow-y:hidden;
}

body.nav-open .footer-background{
  display: None;
}

.navbar-collapse {
    padding: 1rem;
    border-radius: 2rem;
    height:0; 
    opacity:0;
    padding-left: calc(50vw - 120px);
    transition: height ease-in-out .1s, opacity ease-in-out .1s;
  }

body.nav-open div#timeline-center-date{
  display: None !important;
}

body.nav-open div.bubble-pop{
  display: None !important;
}
  .navbar-collapsing {
    background-color: red;
  }
  .navbar-collapse.show {
  height: 100vh;
  opacity: 1;

  }
  .dropdown-menu {
    width: max-content !important;
    min-width: 12rem;
    max-width: 90vw;
    left: 0 !important;   
    right: auto !important;
  }
  .nav-link {
    display: block;
    border-radius: 2rem; 
    width: fit-content;
    margin: 0;    
    padding: 0.75rem 1rem;
    background-color: transparent; 
  }

  .navbar-nav {
  position: static;    
  transform: none;      
  flex-direction: column; 
  width: 100%;          
}
    .dropdown-menu {
    position: static;     
    transform: none;
    box-shadow: none;
    background: none;    
    border-radius: 0;
    padding-left: 1rem;  
    opacity: 1 !important;
    visibility: visible !important;
  }

  .dropdown-item {
    padding: 0.5rem 1rem;
  }
    .sidebar {
    display: none;
  }
    #educationTabs {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }
}

/* ================== Header ================== */
@media (max-width: 1200px) {
    .sitehead-container {
    display: none;
    }
    .sitehead-container img {
    display: none;
    }
    #connie_header {
    display: none;
    }
    #introbox {
      display: none;
    }
}
/*====================Gallery=====================*/

@media (max-width: 992px) {
  .gallery-container { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.span-2 { grid-column: span 1; }
}
@media (max-width: 480px) {
  .gallery-container { grid-template-columns: 1fr; gap: 0.6rem; }
  .gallery-item.span-2 { grid-column: span 1; }
}

/* ============================= Mobile Adjustments (Homepage) ============================= */


@media (max-width: 768px) {

  #bubble-container { height: 40vh; min-height: 200px; }
  #bubble-container .bubble-title h1 { font-size: clamp(2rem, 12vw, 6rem); }
  #bubble-container .bubble-title h3 { font-size: clamp(0.7rem, 3vw, 1.2rem); }

  .background-snake,
  .overlap-img,
  #connie-intro .speech-bubble-home,
  #connie-outro .speech-bubble-home, .connie {
    display: none !important;
  }

  .qa-section {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  
  .shortline p { font-size: clamp(0.8rem, 3.5vw, 1rem); }
  .qa-item {
    max-width: 100%;
    margin: 1rem auto;
    font-size: 0.85rem;
     padding: 1rem;
    transform: translateX(0) !important;
  }
  .qa-image {
    max-width: 100%;
    margin: 1rem auto;
    display: flex;
    justify-content: center;
  }
  .scene,
  .scene:nth-child(odd),
  .scene:nth-child(even) {
    margin: 3rem auto;
  }
  #project-tabs {
    gap: 2rem;
    margin: 2rem auto;
    align-items: center;
  }
  #project-tabs .section {
    margin-left: 0 !important;
    max-width: 100%;
  }
    .scroll-button {
    display: none;           
  }
}

@media (max-width: 480px) {
  #bubble-container { height: 35vh; min-height: 180px; }
  #bubble-container .bubble-title h1 { font-size: clamp(1.5rem, 14vw, 4.5rem); }
  #bubble-container .bubble-title h3 { font-size: clamp(0.6rem, 4vw, 1rem); }
}

@media (max-width: 768px) {
  footer {
    padding: 2rem 1rem;     
  }
}

@media (min-width: 1024px) {
  #back-to-top {
    display: block;
  }
}


@media (max-width: 1790px) {
  .connie-site {
    display: none !important;
  }
}

/***mobile description***/
@media (max-width: 992px) {
  .merge-section {
    height: auto !important;
    view-timeline-name: none;
    padding: 2rem 1rem;
  }

  .merge-sticky {
    position: static !important;
    transform: none !important;
    height: auto !important;
    flex-direction: column;
    gap: 2rem;
  }

  .teaser,
  .merged-box {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    mix-blend-mode: normal !important;
    background: rgba(0, 0, 0, 0.8);
    margin-bottom: 1.5rem;
  }

  .teaser-text {
    font-size: 1rem;
  }

  .teaser-title {
    font-size: 1.25rem;
  }

  .spacer {
    height: 0 !important;
  }
}