/* Ultra-wide screens (21:9 or wider) */
@media screen and (min-aspect-ratio: 21/9)  {
    .image-container {
        width:75%!important;
    }
    .row1-1 img {
        height:45% !important;
    }
    .row2-1 img {
        height:43% !important;
    }
    .row1-2 img {
        height:44% !important;
    }
    .row2-2 img {
        height:44% !important;
    }
    .row1-3 img {
        height:59% !important;
    }
    .row2-3 img {
        height:42% !important;
    }
    .row1-4 img {
        height:59% !important;
    }
    .row2-4 img {
        height:51% !important;
    }
    .performance-mirror {
        top:8vh!important;
    }
        .image-box-icon {
        top: 46px !important;
    }

}
@media (max-width:1920px) and (min-aspect-ratio:21/9) {
    .row1-1 img {
        height:45% !important;
    }
    .row2-1 img {
        height:43% !important;
    }
    .row1-2 img {
        height:44% !important;
    }
    .row2-2 img {
        height:44% !important;
    }
    .row1-3 img {
        height:59% !important;
    }
    .row2-3 img {
        height:42% !important;
    }
    .row1-4 img {
        height:59% !important;
    }
    .row2-4 img {
        height:51% !important;
    }
}


.icon-slot i {
    width: 20px;
    height: 20px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s linear, visibility 0.2s linear;
}

/* performance lense preview */
.colormatic-preview {
    margin-top: 40px;
    text-align: center;
    width: 290px;
    transition: opacity 0.3s ease;
    opacity: 0;
}
.colormatic-preview img {
    width: 150px;
    height: auto;
    display: inline-block;
}
.colorswatchesfixed {
    position: fixed;top: 55.5%;max-width:320px;
}
.preview-caption {
    text-align:center;
    font-size: 16px;
    color: #201e43;
    margin-top: 8px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.4;
}


@media (min-width: 2500px) {
    .video-bg {
        height:1200px!important;
    }
    #bgVideo1{
        height:1200px!important;
    }
    #bgVideo2{
        height:1200px!important;
    }
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body, html {
     width: 100%;
     height: 100%;
     overflow: hidden;
     background: url('/img/bg.jpg') no-repeat center center/cover;
     font-family: 'Montserrat', sans-serif;
     font-size:16px;
     margin: 0;
     padding: 0;
     overflow: hidden;
}

 a, a:visited, a:hover, a:active {
     all: unset;
     display: inline;
     cursor:pointer;
}
 .video-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     transition: opacity 1.5s ease-in-out;
     z-index: 1002;
     background: black;
}
 video {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100vw;
     height: 100vh;
     object-fit: cover;
     transform: translate(-50%, -50%);
}
 .skip-button {
     position: fixed;
     bottom: 20px;
     right: 20px;
     padding: 15px;
     background: red;
     color: white;
     border: none;
     cursor: pointer;
     border-radius: 50%;
     z-index: 1001;
     font-size: 16px;
     width: 50px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
 .background-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: url('/img/bg.jpg') no-repeat center center;
     background-size: cover;
     z-index: 1;
}
 .image-box-container {
     position: absolute;
     top: 51.5%;
     left: 50%;
     width: 100vw;
     height: 56.25vw;
     max-width: 3840px;
     max-height: 2160px;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 3.9vh;
     opacity: 1;
     transition: opacity 1s ease-in-out;
     z-index: 3;
    /* perspective: 1000px;
     Creates 3D depth effect */
}
 .image-container {
     width: 17%;
     height: auto;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: transform 0.3s ease-out;
     transform-style: preserve-3d;
}
/*.image-container:hover {
     transform: rotateX(15deg) rotateY(15deg) scale(1.1);
    /* 3D hover effect */
    /* 
}
 */
 .image-box img {
     height: auto;
     object-fit: contain;
     transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
 .resume-button {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 15px 30px;
     font-size: 20px;
     background: rgba(255, 0, 0, 0.8);
     color: white;
     border: none;
     cursor: pointer;
     border-radius: 10px;
     z-index: 1009;
    /* Above video */
     opacity: 0;
    /* Initially hidden */
     transition: opacity 0.5s ease-in-out;
    /* Smooth fade effect */
     pointer-events: none;
    /* Prevent clicks when invisible */
}
 .resume-button.show {
     opacity: 1;
     pointer-events: auto;
    /* Enable clicks when visible */
}
 .top-bar {
     position: fixed;
     top: 0;
     width: 100%;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: rgba(255, 255, 255, 0.0);
     padding: 0 20px;
     z-index: 10;
     z-index: 1003;
    /* Above video */
     opacity: 1;
    /* Initially hidden */
     transition: opacity 0.5s ease-in-out;
    /* Smooth fade effect */
}
 .top-bar.show {
     opacity: 1;
}
 .logo {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
}
.logo img {
    height:30px;
}
 .menu-button {
     font-size: 30px;
     cursor: pointer;
}
 body > div.top-bar > div.logo > img {
     width:120px;
}
 body > div.top-bar > div.menu-button > img {
     width:16px;
     margin-left:10px;
}
 .action-button {
     padding: 5px 20px;
     margin-top:-8px;
     background: #015481;
     border: none;
     color: #ffffff;
     font-size: 11px;
     border-radius: 20px;
     cursor: pointer;
     font-family: 'Montserrat', sans-serif;
}
 .sidebar {
     position: fixed;
     top: 0;
     left: -500px;
     width: 500px;
     height: 100vh;
     background: white;
     transition: left 0.3s ease;
     padding: 80px 20px 20px 80px;
     z-index: 1004;
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}
 .sidebar.open {
     left: 0;
}
 .close-button {
     font-size: 24px;
     cursor: pointer;
     position: absolute;
     top: 20px;
     right: 20px;
}
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0.3);
     display: none;
     z-index: 15;
}
 .overlay.show {
     display: block;
}
 .menu {
     list-style: none;
}
 .menu li {
     padding: 40px 0;
     font-size: 20px;
     cursor: pointer;
}
 .menu li span {
     margin-right: 10px;
}
 .submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
  padding: 0; /* no bottom spacing here */
  margin: 0;  /* no unwanted space */
}
.submenu.show {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
}
.submenu-inner {
    padding: 20px 0;
    transition: padding 0.3s ease;
}
.submenu:not(.show) .submenu-inner {
    padding: 0;
}
.submenu li {
  padding: 30px 0 0 37px; /* spacing between submenu items */
  margin: 0;        /* prevent bottom jump */
  list-style-type: disc;
  list-style-position: inside;
  font-size:18px;
}
 #explore-icon {
    display: inline-block;
    width: 20px;
    transition: transform 0.3s ease;
}
 .rotate-down {
     transform: rotate(90deg);
}
 .explore-content {
     position: fixed;
     bottom: 100px;
     left: 80px;
     max-width: 500px;
     text-align: left;
     color: white;
     background: rgba(0, 0, 0, 0.0);
     padding: 15px;
     border-radius: 10px;
     color: #201E43;
     z-index: 1003;
    /* Above video */
     opacity: 0;
    /* Initially hidden */
     transition: opacity 0.5s ease-in-out;
    /* Smooth fade effect */
}
.image-box p {
    color:#24757F;
    font-weight:500;
    font-size:20px;
}
@media(min-width:2500px){
     .explore-content h2, .lens-content h2 {
     font-size:55px!important;}
    .explore-content p, .lens-content p {
     font-size:22px!important;}
     .explore-content {
         max-width:604px;
     }
      .menu-left-item.active p {font-weight:600;font-size:25px!important;}
      .menu-left-item p {font-size:20px!important;}
      .menu-left-item p:hover {font-size:25px!important;}
}
@media (min-width: 2048px) {
    .menu-left {
        left: 4.5vw !important;
    }
    .performance-mirror {
        left: 4vw !important;
    }
}

 .lens-content {
     position: fixed;
     bottom: 100px;
     left: 80px;
     max-width: 500px;
     text-align: left;
     color: white;
     background: rgba(0, 0, 0, 0.0);
     padding: 15px;
     border-radius: 10px;
     color: #201E43;
     z-index: 1002;
    /* Above video */
     opacity: 0;
    /* Initially hidden */
     transition: opacity 0.5s ease-in-out;
    /* Smooth fade effect */
}
 .explore-content.show {
     opacity: 1;
}
 .lens-content.show {
     opacity: 1;
}
 .explore-content h2 {
     font-size: 20px;
     margin-bottom: 10px;
}
 .lens-content h2 {
     font-size: 20px;
     margin-bottom: 10px;
}
 .explore-content p {
     margin-bottom: 5px;
}
 .lens-content p {
     margin-bottom: 5px;
}
 .cta-button {
     font-weight:100;
     background: #B08F46;
     color: white;
     border: none;
     padding: 8px 20px;
     padding-right:30px;
     font-size: 14px;
     cursor: pointer;
     border-radius: 20px;
     box-shadow: 0px 0px 20px rgb(177 143 69 / 60%);
     display: flex;
     align-items: center;
    /* Centers icon and text */
     justify-content: center;
     gap: 25px;
    /* Space between icon and text */
}
 .cta-button:hover {
     background: #ffffff;
     color:#000;
}
 @media (max-width: 600px) {
     .explore-content {
         max-width: 90%;
         left: 10px;
         right: 10px;
    }
}
/* Apply blur to everything inside .blurred except specific containers */
 .blurred > :not(#thisMenu):not(.sidebar) {
     filter: blur(10px);
     pointer-events: none;
     transition: filter 0.2s ease-out;
     will-change: filter;
}
 #thisMenu {
     position: relative;
     z-index: 1005 !important;
}
 @media screen and (max-width: 768px) {
     body *:not(.mobile-message) {
         display: none !important;
        /* Hide all content except the message */
    }
     .mobile-message {
         display: flex !important;
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         background: url('/img/mobile.jpg') no-repeat center center;
         background-size: cover;
         color: #fff;
         font-size: 24px;
         font-family: Arial, sans-serif;
         text-align: center;
         justify-content: center;
         align-items: center;
         padding: 20px;
    }
     .mobile-message {
        /* ... rest of your styles ... */
         color: transparent;
    }
}
 .image-box-icon {
     position: absolute;
     display: inline-flex;
     width: 210px;
     top: 30px;
     color: #585595;
     gap: 40px;
     padding: 0px 40px;
}
 .image-box-icon p {
     padding-top:4px;
     white-space:nowrap;
}
 .image-container:hover .image-box-icon img {
     filter: brightness(0) saturate(100%) invert(60%) sepia(53%) saturate(343%) hue-rotate(2deg) brightness(95%) contrast(95%);
}
 .image-container:hover .image-box-icon p {
     color: #B08F46;
}
 .video-bg {
     position: relative;
}
/* .protection-video {
     height:700px;
    width:auto;
}
 */
 .video-button.disabled {
     pointer-events: none;
     opacity: 0.4;
     filter: grayscale(80%);
     cursor: not-allowed;
     transform: none !important;
}
 .video-button {
     background: none;
     border: none;
     font-size: 14px;
     font-weight: 700;
     color: #0E5582;
     min-width:150px;
    /* text color */
     cursor: pointer;
     padding: 10px 20px;
     position: relative;
     opacity: 0.5;
     text-transform: uppercase;
     transition: all 0.3s ease;
     font-family: 'Montserrat', sans-serif;
     font-weight:500;
}
 .video-button img {
     /* max-width:120px; */
     height:30px;
}
@media (min-width:2500px) {
         .video-button img {
         max-width:170px!important;
    }
    .buttonContainer {
        gap:100px!important;
    }
    .video-button {
        font-size:20px;
        font-weight:600;
    }
}
/* Always show vertical line */
 .video-button::before {
     content: "";
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: -30px;
     border-radius:30px;
     width: 1px;
     height: 30px;
     background-color: #201E43;
    /* vertical line */
     transition: all 0.3s ease;
}

.video-button::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -40px;
  width: 80px;   /* invisible hover zone */
  height: 50px;
  z-index: 1;
}

/* Hover & active: scale text up AND move up slightly */
 .video-button:hover, .video-button.active {
     color: #0E5582;
    /* unchanged text color */
     opacity: 1;
     padding-bottom: 30px;
     transform: scale(1.2) translateY(-15px);
}
/* Enlarge + keep yellow vertical line */
 .video-button:hover::before, .video-button.active::before {
     background-color: #201E43;
    /* vertical line */
    width:2px;
     height: 50px;
     transform: translateX(-50%) scaleY(1.2);
}
 .protection-video {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: translate(-50%, -50%);
     transition: opacity 0.7s ease;
    /* Smooth crossfade */
}
/* //////////////////// loader ////////////////// */

/* =================== LOADER =================== */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #7ddbd7 url('/img/bg.jpg') no-repeat center center;
  background-color: #7ddbd7;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

/* ========== LOGO WITH GLOW PULSE ========== */
.loader-logo {
  width: 140px;
  height: 140px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  animation: glowPulse 1.8s ease-out infinite;
}

/* Glow pulse effect using drop-shadow */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
  50% {
    filter: drop-shadow(5px 5px 10px rgba(0, 255, 255, 1));
  }
}

/* ========== TEXT UNDER LOGO ========== */
.loader-text {
  color: white;
  font-size: 20px;
  letter-spacing: 1px;
  opacity: 0.9;
}


/* /////////////////// */
 .buttonContainer {
     position: fixed;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 100px;
     z-index: 1005;
     padding-bottom: 30px;
}
/* Core visibility transitions */
 .show {
     opacity: 1!important;
     transition: opacity 1s ease-in-out;
}
 .hide {
     opacity: 0!important;
     pointer-events: none;
     transition: opacity 1s ease-in-out;
}
 h2 {
     font-size: 20px;
     margin-bottom: 10px;
}
 p {
     font-size: 16px;
}
 .performance-mirror {
     position: fixed;
     top: 10vh;
     left: 5vw;
     font-size:16px;
     max-width: 400px;
     text-align: justify!important;
     color: white;
     background: rgba(0, 0, 0, 0.0);
     padding: 15px;
     border-radius: 10px;
     color: #201E43;
     z-index: 1002;
    /* Above video */
     opacity: 1;
    /* Initially hidden */
     transition: opacity 0.5s ease-in-out;
    /* Smooth fade effect */
}
 .performance-mirror h2 {
     font-size:36px;
     font-weight:200;
     display:RUBY-TEXT!important;
     margin-bottom:-10px;
     text-align:left!important;
 }
 @media (max-width: 1596px) { 
     .performance-mirror p {
         font-size:12px;
     }
     .lens-content {
         max-width:400px!important;
     }
     .lensviz-index-labels, .lensviz-index-item, .lensviz-icon-title.left-label, .lensviz-value-block, .feature p, .feature h3 {
         font-size:12px!important;
     }
     .lensviz-labels {
         font-size:10px!important;
     }
    .menu-left {
          gap:4vh!important;
    }
    .menu-left-item p {
        font-size:12px!important;
    }
    .menu-left-item p:hover {
        font-size:16px!important;
    }
    .menu-left-item.active p {
        font-size:16px!important;
    }
    .buttonContainer {
        gap:70px!important;
    }

 .video-button {
     font-size: 12px;
     min-width:100px;
    /* text color */
     padding: 10px 20px;
     font-weight:500;
}
 .video-button img {
     /* max-width:120px; */
     height:25px;
}
/* Always show vertical line */
 .video-button::before {
     transform: translateX(-45%);
     bottom: -30px;
     border-radius:30px;
     width: 1px;
     height: 25px;
}

.video-button::after {
  transform: translateX(-45%);
  width: 70px;   /* invisible hover zone */
  height: 45px;
}

/* Hover & active: scale text up AND move up slightly */
 .video-button:hover, .video-button.active {
     padding-bottom: 30px;
     transform: scale(1.2) translateY(-15px);
}
/* Enlarge + keep yellow vertical line */
 .video-button:hover::before, .video-button.active::before {
     background-color: #201E43;
    /* vertical line */
    width:2px;
     height: 45px;
     transform: translateX(-45%) scaleY(1.2);
}
    
    
    
 }
@media(min-width:2500px){
     .performance-mirror {
         left: 4vw;

    }
    .performance-mirror p {font-size:20px;}
         .performance-mirror h2 {
         left: 4vw;
         font-size:55px;
    }
    .menu-left p {font-size:10px;}
    .menu-left-item p {font-size:16px;}
    .performance-mirror-right p {font-size:20px;}
    .feature h3 {font-size:20px!important;}
    .performance-mirror-right {right:7vw!important;max-width:390px!important;}
}
.menu-left p {font-size:8px;}
.menu-left-item p {font-size:14px;font-weight:500;}
 .performance-mirror-right {
     position: fixed;
     top: 20vh;
     right: 5vw;
     text-align:justify!important;
     /* transform: translateY(-50%); */
     max-width: 320px;
     color: #201E43;
     font-family: 'Montserrat', sans-serif;
     text-align: left;
     background: rgba(0, 0, 0, 0.0);
     padding: 15px;
     border-radius: 10px;
     z-index: 1002;
     opacity: 1;
     transition: opacity 0.5s ease-in-out;
}
 .performance-mirror-right h2 {
     font-weight: 100;
     font-size: 36px;
     margin-bottom: 10px;
}
 .performance-mirror-right h2 .thin {
     font-weight: 600;
}
 .performance-mirror-right .subtitle {
     padding-bottom: 30px;
     font-size: 16px;
     line-height: 1.6;
}
 .feature {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 20px;
}
 .bullet {
     width: 10px;
     height: 10px;
     background-color: #015481;
     border-radius: 2px;
     margin-top: 6px;
     flex-shrink: 0;
}
 .feature h3 {
     font-size: 16px;
     font-weight: 600;
     margin: 0;
}
@media (max-width: 1536px) { 
    .feature h3 {
    font-size: 14px;
    } 
    .feature p {
        font-size:14px;
    }
    p {
        font-size:14px;
    }
    .lensviz-index-labels {
        font-size:12px;
    }
    .lensviz-index-item {
        font-size:12px;
    }
    .lensviz-icon-title.left-label {
        font-size:12px;
    }
    .lensviz-value-block {
        font-size:12px;
    }
}
 .feature p {
     margin: 5px 0 0;
     line-height: 1.5;
}
 .color-label {
     font-size: 16px;
     font-weight: 700;
     margin-top: 30px;
     margin-bottom: 10px;
}
@media (min-width: 2048px) {
     .color-label {
         font-size:20px;
         font-weight:600;
     }
     .color-swatch img {
         width:35px!important;
     }
     .color-options {
         gap:31px!important
     }
     .colormatic-preview {
         /* width:200px!important; */
         scale:120%;
         padding-top:10%;
     }
}
 .color-options {
     display: flex;
     gap: 16px;
     align-items: center;
}
 .color-swatch {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     border: 0px solid #ccc;
     transition: transform 0.3s ease;
}
 .color-swatch:hover {
     transform: scale(1.4);
}
 .menu-left {
     position: fixed;
     top: 50%;
     left: 5.3vw;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 5vh;
     z-index: 1004;
     font-size:8px;
     color:#01548140;
}
 .menu-left-item {
     display: flex;
     align-items: center;
     gap: 50px;
     padding-left: 90px;
     position: relative;
     cursor: pointer;
     transition: all 0.3s ease;
}

/* Icon/Image wrapper */
 .icon-slot {
     position: absolute;
     left: 0;
     width: 24px;
     height: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
}
/* Common icon styles */
 .icon-slot i, .icon-slot img {
     width: 20px;
     height: 20px;
     transition: transform 0.3s ease;
}
/* Text */
 .menu-left-item p {
     margin: 0;
     color: #01548140;
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
     /* height:20px */;
     font-size:14px;
     transition: all 0.3s ease;
}

/* HOVER (temporary image swap + scale) */
.menu-left-item:hover .icon-slot i {
    opacity: 0;
    visibility: hidden;
}
 .menu-left-item:hover .icon-slot::after {
     content: "";
     display: block;
     width: 20px;
     height: 20px;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     transform: scale(1.2);
}
 .menu-left-item:hover .icon-slot::after {
     background-image: attr(data-img url);
    /* not fully supported — JS needed for hover replacement if dynamic */
}
 .menu-left-item:hover p {
     font-size: 20px;
     color: #AF8F46;
}
/* ACTIVE state: image shown, icon hidden, scaled, colored */
 .menu-left-item.active .icon-slot i {
     display: none;
}
 .menu-left-item.active .icon-slot img {
     display: block;
     transform: scale(1.2);
}
 .menu-left-item.active p {
     font-size: 20px;
     color: #AF8F46;
}
/* Material */
 .lensviz-container {
     position: relative;
     width: 100%;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 .lensviz-image-stack {
     position: relative;
     width: 90%;
     max-width: 1000px;
     aspect-ratio: 16 / 9;
     height: auto;
}
 .lensviz-img {
     position: absolute;
     width: 100%;
     height: 100%;
     object-fit: contain;
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
}
 .lensviz-img.active {
     opacity: 1;
}
 #lensviz-slider {
     width: 60%;
     margin-top: 20px;
}
 @media (max-width: 1000px) {
    .performance-mirror-right{
        right:-2vw;
    }
}
/* raindrops canvas */
 #drop-canvas {
     position: fixed;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100vh;
     pointer-events: none;
     z-index: 99999;
}
 #fluid {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 10;
     opacity:0.2;
     pointer-events: none;
}
 .mapsidebar {
     width: 35%;
     padding: 90px 40px;
     overflow-y: auto;
}
 .mapsidebar h1 {
     font-weight: 300;
     font-size: 32px;
     margin-bottom: 30px;
}
 .mapsidebar b {
     font-weight: 700;
}
 .mapsidebar select {
     width: 100%;
     margin-bottom: 20px;
     padding: 10px 0;
     border: none;
     border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     background: transparent;
     font-size: 16px;
     font-weight: 400;
     color: #333;
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 8px center;
     background-size: 16px;
     padding-right: 28px;
}
 #store-list {
     max-height: 100vh;
     overflow-y: auto;
     padding-bottom: 100px;
    /* allows last item to peek in */
     margin-bottom: -80px;
    /* negative margin to pull list down toward the bottom */
}
 .store-card {
     background: rgba(255, 255, 255, 0.0);
     border-radius: 12px;
     border:solid 1px #989898;
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     transition: background 0.2s;
}
 .store-card + .store-card {
     margin-top: 16px;
}
 .store-card:hover {
     background: rgba(255, 255, 255, 0.9);
}
 .store-info p {
     margin: 4px 0;
     font-weight: 400;
     color: #444;
}
 .store-info strong {
     font-size: 16px;
     font-weight: 600;
     display: block;
     margin-bottom: 4px;
}
 .store-direction {
     font-weight: 500;
     color: #111;
     white-space: nowrap;
     cursor: pointer;
}
 .status.open {
     color: green;
}
 .status.closed {
     color: gray;
}
 .map-container {
     width: 60%;
     height: 100vh;
     position: fixed;
     top: 30px;
     right: 0;
     padding-top: 60px;
     padding-bottom: 60px;
     padding-right: 30px;
     z-index: 0;
     border-radius: 30px;
     overflow: hidden;
     -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%);
     mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%);
}
 #map {
     width: 100%;
     height: 100%;
     border-radius: 12px;
     border: 0;
}
 .select-row {
     display: flex;
     gap: 20px;
     margin-bottom: 20px;
}
 .select-row select {
     flex: 1;
     margin-bottom: 0;
}
 .store-card.active {
     border: 1px solid #b27600;
}
 #bgVideo1, #bgVideo2 {
     transition: opacity 1s ease;
}