.italy-2 {
              left: 15%;
              top: 45% !important;

          }

          .italy-1 {
              top: 27% !important;
              left: 15%;
          }

          .milan-1 {
              top: 15% !important;
              left: 15%;
          }

          .milan-2 {
              top: 29% !important;
              left: 15%;
          }

          .milan-5 {
              top: 71% !important;
              left: 15%;
          }

          .milan-3 {
              top: 43% !important;
              left: 15%;
          }

          .milan-4 {
              top: 57% !important;
              left: 15%;
          }

          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              font-family: Arial, sans-serif;
              font-optical-sizing: auto;
              font-weight: 600;
              font-style: normal;
          }

          body {
              background-color: transparent;
              overflow: hidden;
          }

          /* Accordion container hidden by default */
          .accordion {
              max-height: 0;
              overflow: hidden;
              transition: max-height 0.6s ease, opacity 0.4s ease;
              opacity: 0;
          }

          /* When opened */
          .accordion.open {
              max-height: 800px;
              /* adjust depending on content height */
              opacity: 1;
          }

          /* Optional smooth scrollable section */
          .scrollable-section {
              max-height: 60vh;
              overflow-y: auto;
              margin-bottom: 20px;
          }

          .landing-section-text {
              font-size: clamp(20px, 2vw, 26px);
              line-height: 1.8;
          }


          .landing-section-text {
              font-size: clamp(20px, 2vw, 26px);
              line-height: 1.9;
              text-align: justify;
          }

          /* Next Button Style */
          .next-section-btn {
              padding: 12px 26px;
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              color: white;
              border: none;
              border-radius: 30px;
              font-weight: bold;
              cursor: pointer;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
              transition: all 0.3s ease;
          }

          .next-section-btn:hover {
              transform: translateY(-2px);
              box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
          }

          /* Scrollable section */
          .scrollable-section {
              max-height: 60vh;
              overflow-y: auto;
              padding: 15px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 8px;
              border: 1px solid rgba(255, 255, 255, 0.2);
          }


          .poi-marker {
              transition: 0.3s ease;
          }

          /* Jab ek group active ho — uske andar ke non-active markers blur ho jaayein */
          .poi-group.has-active .poi-marker:not(.active) {
              opacity: 0.5;
              filter: blur(2px);
          }

          /* Active marker normal rahe */
          .poi-marker.active {
              opacity: 1;
              filter: none;
          }


          .container {
              position: relative;
              width: 100vw;
              height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: transparent;
              display: block;
              pointer-events: none;
              z-index: 2;
          }

          .map-container {
              position: relative;
              width: 100%;
              height: 100%;
              background-color: transparent;
              overflow: hidden;
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          }

          .map {
              width: 100%;
              height: 100%;
              background-size: cover;
              background-position: center;
              display: flex;
              position: relative;
              background-color: transparent;
              z-index: 2;
          }

          .logo {
              position: absolute;
              top: 20px;
              left: 20px;
              color: white;
              font-size: clamp(16px, 2vw, 24px);
              font-weight: bold;
              letter-spacing: 1px;
              z-index: 1;
          }

          .navigation-buttons {
              position: absolute;
              color: #00d2ff;
              right: 40px;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              flex-direction: column;
              gap: 15px;
              z-index: 10;
              pointer-events: auto;
          }

          .nav-button {
              padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px);
              background-color: rgba(255, 255, 255, 0.9);
              border: none;
              border-radius: 30px;
              color: #333;
              font-weight: bold;
              cursor: pointer;
              transition: all 0.3s;
              width: clamp(80px, 10vw, 120px);
              text-align: center;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              font-family: Arial, sans-serif;
              font-optical-sizing: auto;
              font-weight: 400;
              font-style: normal;
          }

          .nav-button:hover {
              background-color: white;
              transform: translateX(-5px);
          }

          .nav-button.active {
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              color: white;
          }

          .map-title {
              position: absolute;
              top: 5%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: white;
              font-size: clamp(24px, 5vw, 48px);
              text-align: center;
              text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
              z-index: 10;
          }

          .map-controls {
              position: absolute;
              bottom: 20px;
              left: 50%;
              transform: translateX(-50%);
              display: flex;
              gap: 10px;
          }

          .control-dot {
              width: clamp(6px, 1vw, 10px);
              height: clamp(6px, 1vw, 10px);
              background-color: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              cursor: pointer;
          }

          .control-dot.active {
              background-color: white;
          }

          .selection-dots {
              position: absolute;
              left: 20px;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              flex-direction: column;
              gap: 15px;
              z-index: 10;
              pointer-events: all;
          }

          .selection-dot {
              width: clamp(6px, 1vw, 10px);
              height: clamp(6px, 1vw, 10px);
              background-color: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              cursor: pointer;
              transition: all 0.3s ease;
          }

          .selection-dot.active {
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              transform: scale(1.5);
          }

          .location-markers {
              pointer-events: none;
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              background: rgb(255 255 255 / 0%);
              background-color: rgb(207 207 207 / 8%);
              backdrop-filter: blur(8px);
              mask-image: radial-gradient(circle at center, transparent 20%, rgb(124, 124, 124) 60%);
              -webkit-mask-image: radial-gradient(circle at center, transparent 20%, rgb(116 114 114 / 93%) 55%);
          }

          .location-markers::before,
          .location-markers::after {
              content: none;
          }

          .marker {
              position: absolute;
              background-color: rgba(255, 255, 255, 0.8);
              border-radius: 50%;
              width: clamp(30px, 3vw, 40px);
              height: clamp(30px, 3vw, 40px);
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
          }

          .poi-container {
              position: absolute;
              width: 70%;
              height: 100%;
              top: 0;
              left: 0;
              z-index: 5;
              pointer-events: none;
          }

          .poi-group {
              position: relative;
              height: 100%;
              top: 100px;
          }

          .poi-marker {
              position: absolute;
              display: flex;
              align-items: center;
              gap: 10px;
              opacity: 1;
              transition: all 0.3s ease;
              pointer-events: none;
          }

          .poi-marker.visible {
              opacity: 1;
              pointer-events: all;
          }

          .poi-marker:nth-child(1) {
              top: 20%;
              left: 15%;
          }

          .poi-marker:nth-child(2) {
              top: 36%;
              left: 15%;
          }

          .poi-marker:nth-child(3) {
              top: 52%;
              left: 15%;
          }

          .poi-marker:nth-child(4) {
              top: 53%;
              left: 15%;
          }

          .poi-marker:nth-child(5) {
              top: 67%;
              left: 15%;
          }


          .poi-circle {
              width: clamp(40px, 5vw, 84px);
              height: clamp(40px, 5vw, 84px);
              border-radius: 50%;
              background-color: rgba(255, 255, 255, 0.9);
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
              cursor: pointer;
              border: 2px solid white;
              transition: all 0.3s;
              overflow: hidden;
          }

          .poi-marker.active .poi-circle {
              border: 2px solid #42b0d8;
              transform: scale(1.4);
          }

          .poi-circle:hover {
              border: 2px solid #03b8fa;
              transform: scale(1.4);
          }

          .poi-circle img {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }

          .poi-text {
              color: white !important;
              font-weight: bold !important;
              letter-spacing: 1px !important;
              /* font-size: clamp(8px, 1vw, 12px) !important; */
              font-size: clamp(12px, 1.2vw, 18px) !important;
              text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
              text-transform: uppercase !important;
              /* desktop par bhi wrap allow karein taa-ke title aur description ka width equal lage */
              white-space: normal !important;
              padding-left: 15px !important;
              font-family: Arial, sans-serif !important;
              font-optical-sizing: auto !important;
              font-weight: 700 !important;
              font-style: normal !important;
              transition: font-size 0.3s !important;
          }

          .poi-marker.active .poi-text {
              font-size: clamp(12px, 1.5vw, 22px) !important;
              font-weight: 800 !important;
          }

          .poi-desc {
              display: block;
              color: white;
              text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
              white-space: normal;
              padding-left: 15px;
              max-width: 400px;
              font-size: clamp(10px, 1vw, 14px);
              line-height: 1.4;
              font-weight: 400;
              margin-top: 5px;
          }

          .gif-button {
              position: absolute;
              bottom: 20px;
              left: 50%;
              transform: translateX(-50%);
              width: clamp(60px, 8vw, 80px);
              height: clamp(60px, 8vw, 80px);
              border: none;
              border-radius: 50%;
              cursor: pointer;
              transition: all 0.3s;
              z-index: 10;
              overflow: hidden;
              background-color: transparent;
          }

          .gif-button img {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }

          .center-buttons {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              flex-direction: column;
              gap: 15px;
              z-index: 10;
              pointer-events: auto;
          }

          .center-button {
              padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px);
              background-color: rgba(255, 255, 255, 0.9);
              border: none;
              border-radius: 30px;
              color: #333;
              font-weight: bold;
              cursor: pointer;
              transition: all 0.3s;
              width: clamp(100px, 12vw, 150px);
              text-align: center;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              font-family: Arial, sans-serif;
              font-optical-sizing: auto;
              font-weight: 400;
              font-style: normal;
          }

          .center-button:hover {
              background-color: white;
              transform: scale(1.05);
          }

          .center-button.active {
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              color: white;
          }

          .popup {
              top: 0;
              right: -40%;
              width: 25%;
              height: 100%;
              background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
              box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
              transition: right 0.5s ease;
              z-index: 1000;
              padding: 40px 20px;
              color: #333;
              overflow-y: auto;
              border-left: 5px solid #00d2ff;
              pointer-events: auto;
              background: rgba(255, 255, 255, 0.2);
              backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px);
          }

          .popup.active {
              right: 0;
          }

          .close-popup {
              position: absolute;
              top: 20px;
              right: 20px;
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              color: white;
              border: none;
              padding: 8px 16px;
              border-radius: 30px;
              cursor: pointer;
              font-weight: bold;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              transition: all 0.3s;
              pointer-events: auto;
          }

          .close-popup:hover {
              transform: scale(1.05);
          }

          .popup h2 {
              font-size: clamp(20px, 3vw, 32px);
              color: #3a7bd5;
              margin-bottom: 20px;
              text-shadow: none;
          }

          .popup p {
              font-size: clamp(12px, 1.5vw, 16px);
              line-height: 1.5;
              margin-bottom: 20px;
          }

          .popup img {
              width: 100%;
              max-height: 200px;
              object-fit: cover;
              margin-bottom: 10px;
              border-radius: 10px;
              margin-top: 36px;
          }

          .poi-group.has-active .poi-marker:not(.active) {
              opacity: 0.5;
              filter: blur(2px);
          }

          .poi-info {
              display: flex;
              flex-direction: column;
              gap: 5px;
              /* title (poi-text) aur description (poi-desc) ko same width ke andar rakhein */
              max-width: 340px;
          }

          @media (max-width: 1200px) {
              .poi-marker:nth-child(1) {
                  left: 15%;
              }

              .poi-marker:nth-child(2) {
                  left: 15%;
              }

              .poi-marker:nth-child(3) {
                  left: 15%;
              }

              .poi-marker:nth-child(4) {
                  left: 15%;
              }

              .poi-marker:nth-child(5) {
                  left: 15%;
              }

              .landing-content {
                  max-width: 800px;
                  padding: 30px 20px;
              }

              .landing-section-title {
                  font-size: 1.6rem;
              }

              .landing-section-text {
                  font-size: 0.95rem;
              }

              #terminological-section {
                  height: 130px;
              }
          }



          @media (max-width: 480px) {
              .poi-container {
                  width: 90%;
              }

              .poi-marker:nth-child(1) {
                  left: 15%;
                  top: 10%;
              }

              .poi-marker:nth-child(2) {
                  left: 15%;
                  top: 25%;
              }

              .poi-marker:nth-child(3) {
                  left: 15%;
                  top: 40%;
              }

              .poi-marker:nth-child(4) {
                  left: 15%;
                  top: 55%;
              }

              .poi-marker:nth-child(5) {
                  left: 15%;
                  top: 70%;
              }

              .navigation-buttons {
                  right: 10px;
                  gap: 8px;
              }

              .map-title {
                  width: 80%;
              }

              .selection-dots {
                  left: 10px;
                  gap: 8px;
              }

              .selection-dot {
                  width: 6px;
                  height: 6px;
              }

              .gif-button {
                  width: clamp(40px, 6vw, 60px);
                  height: clamp(40px, 6vw, 60px);
              }

              .center-button {
                  width: clamp(60px, 8vw, 100px);
              }

              .popup {
                  width: 80%;
                  padding: 15px;
              }

              .poi-marker.active .poi-circle {
                  border: 2px solid #42b0d8;
                  transform: scale();
                  /* width: 50px; */
              }

              .poi-info {
                  display: flex;
                  flex-direction: column;
                  gap: 5px;
              }

              #application-splash img {
                  position: absolute;
                  top: -100px;
                  left: -121px;
                  width: 400px;
              }

              .landing-logo {
                  width: 350px;
              }


              .poi-modal-header {
                  position: relative;
                  flex-direction: column;
                  align-items: center;
                  gap: 10px;
              }

              .poi-modal-actions {
                  position: static;
                  width: auto;
                  justify-content: center;
                  top: auto;
                  transform: none;
              }

              .poi-fullscreen-btn {
                  order: -1;
                  width: auto;
                  margin-bottom: 0px;
              }

              .poi-modal.fullscreen #poiTitle {
                  font-size: 1.5rem;
              }

              .poi-modal.fullscreen .poi-gallery img {
                  max-height: 250px;
              }

              .poi-modal-header {
                  position: fixed;
                  flex-direction: column;
                  align-items: center;
                  gap: 10px;
              }

              .poi-modal-actions {
                  position: static;
                  width: auto;
                  justify-content: center;
                  top: auto;
                  transform: none;
              }

              .poi-fullscreen-btn {
                  order: -1;
                  width: auto;
                  margin-bottom: 0px;
              }

              .poi-modal.fullscreen #poiTitle {
                  font-size: 1.5rem;
              }

              .poi-modal.fullscreen .poi-gallery img {
                  max-height: 250px;
              }

              .poi-container {
                  width: 90%;
              }

              .navigation-buttons {
                  right: 10px;
                  gap: 8px;
              }

              .map-title {
                  width: 80%;
              }

              .selection-dots {
                  left: 10px;
                  gap: 8px;
              }

              .selection-dot {
                  width: 6px;
                  height: 6px;
              }

              .gif-button {
                  width: clamp(40px, 6vw, 60px);
                  height: clamp(40px, 6vw, 60px);
              }

              .center-button {
                  width: clamp(60px, 8vw, 100px);
              }

              .popup {
                  width: 80%;
                  padding: 15px;
              }

              .landing-content {
                  padding: 10px;
              }

              .landing-section-title {
                  font-size: clamp(20px, 3vw, 28px);
              }

              .landing-section-text {
                  font-size: clamp(12px, 1.5vw, 16px);
              }
          }

          @media (max-height: 600px) {
              .poi-marker:nth-child(1) {
                  top: 8%;
              }

              .poi-marker:nth-child(2) {
                  top: 23%;
              }

              .poi-marker:nth-child(3) {
                  top: 38%;
              }

              .poi-marker:nth-child(4) {
                  top: 53%;
              }

              .poi-marker:nth-child(5) {
                  top: 68%;
              }

              .selection-dots {
                  gap: 10px;
              }
          }

          /* Tablet screens (adjust marker spacing) */
          @media (max-width: 768px) {
              .poi-marker:nth-child(1) {
                  left: 10%;
                  /* top: 10%; */
              }

              .poi-marker:nth-child(2) {
                  left: 10%;
                  /* top: 22%; */
              }

              .poi-marker:nth-child(3) {
                  left: 10%;
                  /* top: 34%; */
              }

              .poi-marker:nth-child(4) {
                  left: 10%;
                  /* top: 46%; */
              }

              .poi-marker:nth-child(5) {
                  left: 10%;
                  /* top: 58%; */
              }

              .poi-marker {
                  position: absolute;
                  display: flex;
                  align-items: normal;
              }
          }

          @media (max-width: 425px) {
              .poi-marker:nth-child(1) {
                  left: 8%;
                  /* top: 11%; */
              }

              .poi-marker:nth-child(2) {
                  left: 8%;
                  /* top: 23%; */
              }

              .poi-marker:nth-child(3) {
                  left: 8%;
                  /* top: 35%; */
              }

              .poi-marker:nth-child(4) {
                  left: 8%;
                  /* top: 47%; */
              }

              .poi-marker:nth-child(5) {
                  left: 8%;
                  /* top: 59%; */
              }

              .poi-marker {
                  position: absolute;
                  display: flex;
                  align-items: normal;
              }
          }

          /* Small mobiles (narrow + short screen) */
          @media (max-width: 480px),
          (max-height: 600px) {
              .poi-marker:nth-child(1) {
                  left: 8%;
                  /* top: 10%; */
              }

              .poi-marker:nth-child(2) {
                  left: 8%;
                  /* top: 22%; */
              }

              .poi-marker:nth-child(3) {
                  left: 8%;
                  /* top: 34%; */
              }

              .poi-marker:nth-child(4) {
                  left: 8%;
                  /* top: 46%; */
              }

              .poi-marker:nth-child(5) {
                  left: 8%;
                  /* top: 58%; */
              }

              .poi-marker {
                  position: absolute;
                  display: flex;
                  align-items: normal;
              }
          }

          @media (max-width: 375px) {
              .poi-marker:nth-child(1) {
                  left: 6%;
                  /* top: 10%; */
              }

              .poi-marker:nth-child(2) {
                  left: 6%;
                  /* top: 22%; */
              }

              .poi-marker:nth-child(3) {
                  left: 6%;
                  /* top: 34%; */
              }

              .poi-marker:nth-child(4) {
                  left: 6%;
                  /* top: 46%; */
              }

              .poi-marker:nth-child(5) {
                  left: 6%;
                  /* top: 58%; */
              }

              .poi-marker {
                  position: absolute;
                  display: flex;
                  align-items: normal;
              }
          }

          .iframe-container {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              z-index: 1;
          }

          .iframe-container iframe {
              position: absolute;
              width: 100%;
              height: 100%;
              border: none;
              top: 0;
              left: 0;
              transition: opacity 0.5s ease;
          }

          .iframe-container iframe.hidden-iframe {
              opacity: 0;
              pointer-events: none;
              z-index: -1;
          }

          .poi-group {
              display: block;
          }

          .poi-modal {
              display: none;
              position: fixed;
              z-index: 1000;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              overflow-y: auto;
              overflow-x: hidden;
              backdrop-filter: blur(4px);
              animation: fadeIn 0.4s ease;
              pointer-events: auto;
          }


          .poi-modal-area {
              display: flex;
              justify-content: end;
              align-items: center;
              width: 100%;
              height: inherit;
              padding: 40px;
              padding-right: 170px;
          }

          .poi-modal-content {
              background: linear-gradient(145deg, #1a1a1a87, #2b2b2b);
              padding: 25px 25px 0px 25px;
              padding-bottom: 40px;
              border-radius: 16px;
              width: 800px;
              max-width: 900px;
              height: 95%;
              overflow-y: scroll !important;
              box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
              font-family: Arial, sans-serif;
              color: #eaeaea;
              animation: popUp 0.5s ease;
              border: 1px solid rgba(200, 170, 90, 0.4);
              scrollbar-width: thin;
              scrollbar-color: rgba(200, 170, 90, 0.6) rgba(0, 0, 0, 0.2);
              position: relative;
          }

          /* Sticky blur bar that stays at the bottom of the visible scroll area */
          .poi-bottom-fade {
              position: sticky;
              bottom: 0;
              left: 0;
              right: 0;
              height: 60px;
              pointer-events: none;
              background: linear-gradient(to top,
                      rgba(255, 255, 255, 0.88) 0%,
                      rgba(255, 255, 255, 0.78) 2%,
                      rgba(255, 255, 255, 0.48) 45%,
                      rgba(255, 255, 255, 0.20) 65%,
                      rgba(255, 255, 255, 0.05) 85%,
                      transparent 100%);
              margin-left: -25px;
              margin-right: -25px;
              margin-top: -40px;
              z-index: 2;
              opacity: 1;
              transition: opacity 0.25s ease;
          }

          /* Scroll end par blur ko softly hide karne ke liye */
          .poi-bottom-fade.hidden {
              opacity: 0;
          }

          #poiTitle {
              font-family: Arial, sans-serif;
              font-size: 1.8rem;
              color: #e8d3a8;
              text-align: center;
              margin-bottom: 10px;
              margin-top: 6px;
              margin-left: 70px;
              margin-right: 70px;

          }

          #poiAddress {
              text-align: center;
              font-size: 1rem;
              font-style: italic;
              color: #bbb;
              margin-bottom: 20px;
          }

          #poiDescription p {
              margin: 12px 0px 30px 0px;
              line-height: 1.6;
              color: #ddd;
          }

          .poi-close {
              float: right;
              font-size: 26px;
              font-weight: bold;
              cursor: pointer;
              color: #eaeaea;
              transition: color 0.2s;
          }

          .poi-close:hover {
              color: #e8d3a8;
          }

          .poi-gallery {
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 20px 0;
              position: relative;
              /*top: 40px;*/
          }

          .poi-gallery img {
              max-width: 100%;
              max-height: 260px;
              border-radius: 12px;
              object-fit: cover;
              border: 1px solid rgba(200, 170, 90, 0.3);
              box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
              transition: transform 0.3s ease;
          }

          .poi-gallery img:hover {
              transform: scale(1.02);
          }

          .poi-gallery button {
              background: rgba(30, 30, 30, 0.7);
              border: 1px solid rgba(200, 170, 90, 0.5);
              width: 44px;
              height: 44px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              transition: all 0.3s ease;
              z-index: 10;
          }

          .poi-gallery button img {
              width: 40px;
              height: 40px;
              object-fit: contain;
              filter: invert(85%) sepia(20%) saturate(150%) hue-rotate(15deg);
              transition: all 0.3s ease;
              border-radius: 50%;
              align-items: center;
              justify-content: center;
              text-align: center;

          }

          #prevImg {
              left: 12px;
          }

          #nextImg {
              right: 12px;
          }

          .poi-gallery button:hover {
              background: rgba(200, 170, 90, 0.85);
              transform: translateY(-50%) scale(1.1);
          }

          .poi-gallery button:hover img {
              filter: invert(10%) sepia(100%) saturate(80%) hue-rotate(10deg);
          }

          @media (max-width: 600px) {
              .poi-gallery img {
                  max-height: 180px;
                  border-radius: 8px;
              }

              .poi-gallery button {
                  width: 36px;
                  height: 36px;
              }

              .poi-gallery button img {
                  width: 18px;
                  height: 18px;
              }
          }

          @keyframes fadeIn {
              from {
                  opacity: 0;
              }

              to {
                  opacity: 1;
              }
          }

          @keyframes popUp {
              from {
                  transform: scale(0.8);
                  opacity: 0;
              }

              to {
                  transform: scale(1);
                  opacity: 1;
              }
          }

          @media (max-width: 992px) {
              .poi-modal-content {
                  width: 85%;
                  padding: 20px 20px 0px 20px;
                  height: 90%;
                  overflow-x: hidden !important;
                  overflow-y: scroll !important;
              }

              #poiTitle {
                  font-size: 1.6rem;
              }

              #poiAddress {
                  font-size: 0.95rem;
              }

              .poi-gallery img {
                  max-height: 240px;
              }

              .poi-modal-area {
                  justify-content: center;
                  padding: 40px;
              }

          }

          @media (max-width: 600px) {
              .poi-modal-content {
                  width: 90%;
                  padding: 15px 15px 0px 15px;
              }

              #poiTitle {
                  font-size: 1.4rem;
              }

              #poiAddress {
                  font-size: 0.85rem;
              }

              #poiDescription p {
                  font-size: 0.9rem;
                  line-height: 1.4;
              }

              .poi-gallery img {
                  max-height: 180px;
                  border-radius: 8px;
              }

              .poi-gallery button {
                  font-size: 22px;
                  padding: 6px 10px;
              }
          }

          @media (max-width: 400px) {
              #poiTitle {
                  font-size: 1.2rem;
              }

              .poi-gallery img {
                  max-height: 150px;
              }
          }



          #micasa {
              text-align: center;
          }


          #poiAddress {
              display: inline-block;
              margin-bottom: 18px;
              font-size: 1rem;
              font-style: italic;
              color: #e8d3a8;
              text-decoration: none;
              transition: color 0.3s ease, text-shadow 0.3s ease;
          }

          #poiAddress:hover {
              color: #f5e1b6;
              text-shadow: 0 0 6px rgba(200, 170, 90, 0.6);
          }

          .more-link {
              display: inline-block;
              margin-left: 0px;
              color: #00c2ff;
              font-weight: bold;
              cursor: pointer;
              text-decoration: none;
          }

          .more-link:hover {
              text-decoration: underline;
          }

          #poiDescription p {
              margin-bottom: 30px;
              line-height: 1.6;
              text-align: justify;
          }


          .poi-modal.fullscreen {
              background: rgba(0, 0, 0, 0.95);
              backdrop-filter: blur(15px);
              -webkit-backdrop-filter: blur(15px);
          }

          .poi-modal.fullscreen .poi-modal-content {
              width: 95%;
              height: 95%;
              margin: 2.5% auto;
              max-width: none;
              max-height: none;
              padding: 30px 30px 0px 30px;
              border-radius: 12px;
              background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
              border: 2px solid rgba(200, 170, 90, 0.6);
              overflow-y: auto;
          }

          .poi-modal-header {
              display: flex;
              justify-content: center;
              align-items: center;

              position: relative;
          }

          .poi-modal-actions {
              display: flex;
              gap: 10px;
              align-items: center;
              position: absolute;
              right: 0;
              top: 45%;
              transform: translateY(-50%);
          }

          .poi-fullscreen-btn {
              color: white;
              border: none;
              outline: none;
              background: none;
              font-size: 25px;
          }

          .poi-modal.fullscreen #poiTitle {
              font-size: 2.5rem;
              text-align: center;
              margin-bottom: 20px;
              color: #e8d3a8;
              text-shadow: 0 2px 10px rgba(232, 211, 168, 0.3);
          }

          .poi-modal.fullscreen #poiAddress {
              font-size: 1.2rem;
              text-align: center;
              margin-bottom: 30px;
          }

          .poi-modal.fullscreen .poi-gallery {
              margin: 30px 0;
          }

          .poi-modal.fullscreen .poi-gallery img {
              max-height: 380px;
              max-width: 100%;
              border-radius: 16px;
              box-shadow: 0 8px 35px rgba(0, 0, 0, 0.8);
          }

          .poi-modal.fullscreen #poiDescription {
              font-size: 1.1rem;
              line-height: 1.8;
              max-width: 900px;
              margin: 0 auto;
              padding: 20px;
              background: rgba(255, 255, 255, 0.05);
              border-radius: 12px;
              border-left: 4px solid #e8d3a8;
          }

          .poi-modal.fullscreen .poi-gallery button {
              font-size: 32px;
              /* padding: 12px 18px; */
              padding: initial;
              background: rgba(30, 30, 30, 0.9);
              border: 2px solid rgba(200, 170, 90, 0.6);
          }

          .poi-modal.fullscreen .poi-gallery button:hover {
              background: rgba(200, 170, 90, 0.9);
          }

          .poi-citation {
              font-size: 0.85rem;
              font-style: italic;
              color: #bbb;
              margin-top: 22px;
              text-align: center;
              font-family: Arial, sans-serif;
          }

          .language-selector {
              position: absolute;
              top: 20px;
              right: 20px;
              display: flex;
              gap: 10px;
              z-index: 1000;
              pointer-events: auto;
          }

          .language-option {
              display: flex;
              align-items: center;
              gap: 5px;
              padding: 8px 5px;
              background-color: none;
              cursor: pointer;
              font-size: clamp(12px, 1.5vw, 14px);
              font-weight: 500;
              color: #333;
              transition: all 0.3s;
          }

          .language-option img {
              width: 50px;
              height: 50px;
              border-radius: 100%;
              transition: all 0.3s;
          }

          .language-option:hover {
              transform: scale(1.2);
              transition: all 0.3s;
          }

          .language-option.active img {
              transform: scale(1.2);
              border: 2px solid #fff;
              box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
              border-radius: 100%;
              transition: all 0.3s;
          }

          /* //////////////// */

          @media (min-width: 1600px) {
              .poi-modal-content {
                  height: 90vh;
              }
          }

          @media (min-width: 1920px) {
              .poi-modal-content {
                  height: 85vh;
              }
          }

          @media (min-width: 2560px) {
              .poi-modal-content {
                  height: 80vh;
              }
          }

          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              font-family: Arial, sans-serif;
              font-optical-sizing: auto;
              font-weight: 600;
              font-style: normal;
          }

          body {
              background-color: transparent;
              overflow: hidden;
          }

          #landing-page,
          #second-landing {
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              /* background: url(../Images/Remove_Text.webp);url(../Images/New_Logo.png) */
              background: url(../Images/New_Logo.png);
              background-color: white;
              background-size: cover;
              background-position: center;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 20;
              pointer-events: auto;
          }

          .landing-content {
              text-align: center;
              color: white;
              width: 100vw;
              height: 100vh;
              padding: 0;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              position: relative;
              box-sizing: border-box;
              overflow: hidden;
          }

          .landing-subtitle-2 {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: clamp(22px, 3.5vw, 70px);
              font-weight: 700;
              white-space: nowrap;
              line-height: 1.2;
              color: white;
              margin: 0;
              text-align: center;
              font-family: Arial, Helvetica, sans-serif;
              letter-spacing: -0.2px;
          }

          .landing-arrow {
              position: absolute;
              top: 60.8%;
              /* left: 48%; */
              /* transform: translate(-50%, -50%); */
              width: 68px;
              height: 68px;
              border: 2px solid white;
              background: transparent;
              border-radius: 50%;
              color: white;
              font-size: 26px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0;
          }

          .landing-arrow:hover {
              background: transparent;
              /* transform: translate(-50%, -50%); */
          }

          .landing-arrow span {
              font-weight: bold;
          }

          .landing-bottom {
              position: absolute;
              /* bottom: 16.5%; */
              bottom: 20.5%;
              left: 50%;
              transform: translateX(-50%);
              width: 95%;
              max-width: 1200px;
              text-align: center;
          }

          .landing-subtitle-3 {
              font-size: clamp(13px, 1.4vw, 27px);
              font-weight: 400;
              font-style: italic;
              white-space: nowrap;
              line-height: 1.4;
              color: white;
              margin-left: auto;
              margin-right: auto;
              text-align: center;
              font-family: Arial, Helvetica, sans-serif;
          }

          .landing-subtitle-3 b {
              font-weight: 700;
              font-style: italic;
          }

          .landing-section-title {
              font-size: clamp(28px, 4vw, 48px);
              font-weight: 700;
              margin-bottom: 15px;
              text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
              letter-spacing: 1px;
              line-height: 1.1;
              font-family: Arial, sans-serif;
              text-align: center;
          }

          .landing-arrow {
              width: 80px;
              height: 80px;
              border: 3px solid white;
              background: transparent;
              border-radius: 50%;
              color: white;
              font-size: 32px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.3s ease;
              margin: 0 auto;
          }

          .landing-arrow:hover {
              background: rgba(255, 255, 255, 0.1);
              transform: scale(1.1);
          }

          .landing-arrow span {
              font-weight: bold;
          }

          .map-container {
              position: relative;
              width: 100%;
              height: 100%;
              background-color: transparent;
              overflow: hidden;
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          }

          .map {
              width: 100%;
              height: 100%;
              background-size: cover;
              background-position: center;
              display: flex;
              position: relative;
              background-color: transparent;
              z-index: 2;
          }

          .logo {
              position: absolute;
              top: 20px;
              left: 20px;
              color: white;
              font-size: clamp(16px, 2vw, 24px);
              font-weight: bold;
              letter-spacing: 1px;
              z-index: 1;
          }

          .navigation-buttons {
              position: absolute;
              color: #00d2ff;
              right: 40px;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              flex-direction: column;
              gap: 15px;
              z-index: 10;
              pointer-events: auto;
          }

          .nav-button {
              padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px);
              background-color: rgba(255, 255, 255, 0.9);
              border: none;
              border-radius: 30px;
              color: #333;
              font-weight: bold;
              cursor: pointer;
              transition: all 0.3s;
              width: clamp(80px, 10vw, 120px);
              text-align: center;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              font-family: Arial, sans-serif;
              font-optical-sizing: auto;
              font-weight: 400;
              font-style: normal;
          }

          .nav-button:hover {
              background-color: white;
              transform: translateX(-5px);
          }

          .nav-button.active {
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              color: white;
          }

          .map-title {
              position: absolute;
              top: 5%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: white;
              font-size: clamp(24px, 5vw, 48px);
              text-align: center;
              text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
              z-index: 10;
          }

          .map-controls {
              position: absolute;
              bottom: 20px;
              left: 50%;
              transform: translateX(-50%);
              display: flex;
              gap: 10px;
          }

          .control-dot {
              width: clamp(6px, 1vw, 10px);
              height: clamp(6px, 1vw, 10px);
              background-color: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              cursor: pointer;
          }

          .control-dot.active {
              background-color: white;
          }

          .selection-dots {
              position: absolute;
              left: 20px;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              flex-direction: column;
              gap: 15px;
              z-index: 10;
              pointer-events: all;
          }

          .selection-dot {
              width: clamp(6px, 1vw, 10px);
              height: clamp(6px, 1vw, 10px);
              background-color: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              cursor: pointer;
              transition: all 0.3s ease;
          }

          .selection-dot.active {
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              transform: scale(1.5);
          }

          .location-markers {
              pointer-events: none;
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              background: rgb(255 255 255 / 0%);
              background-color: rgb(207 207 207 / 8%);
              backdrop-filter: blur(8px);
              mask-image: radial-gradient(circle at center, transparent 20%, rgb(124, 124, 124) 60%);
              -webkit-mask-image: radial-gradient(circle at center, transparent 20%, rgb(116 114 114 / 93%) 55%);
          }

          .location-markers::before,
          .location-markers::after {
              content: none;
          }

          .marker {
              position: absolute;
              background-color: rgba(255, 255, 255, 0.8);
              border-radius: 50%;
              width: clamp(30px, 3vw, 40px);
              height: clamp(30px, 3vw, 40px);
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
          }

          .poi-group {
              position: relative;
              height: 100%;
              top: 100px;
          }

          .poi-marker {
              position: absolute;
              display: flex;
              /* align-items: center; */
              gap: 10px;
              opacity: 1;
              transition: all 0.3s ease;
              pointer-events: none;
          }

          .poi-marker.visible {
              opacity: 1;
              pointer-events: all;
          }

          .poi-marker:nth-child(1) {
              top: 20%;
              left: 15%;
          }

          .poi-marker:nth-child(2) {
              top: 36%;
              left: 15%;
          }

          .poi-marker:nth-child(3) {
              top: 52%;
              left: 15%;
          }

          .poi-marker:nth-child(4) {
              top: 53%;
              left: 15%;
          }

          .poi-marker:nth-child(5) {
              top: 67%;
              left: 15%;
          }

          .poi-circle {
              width: clamp(40px, 5vw, 90px);
              height: clamp(40px, 5vw, 90px);
              border-radius: 50%;
              background-color: rgba(255, 255, 255, 0.9);
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
              cursor: pointer;
              border: 2px solid rgba(200, 170, 90, 0.6);
              transition: all 0.3s;
              overflow: hidden;
          }

          .poi-marker.active .poi-circle {
              border: 2px solid #42b0d8;
              transform: scale(1.3);
          }

          .poi-circle:hover {
              border: 2px solid #03b8fa;
              transform: scale(1.3);
          }

          .poi-circle img {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }

          .poi-desc {
              display: none;
              color: white;
              text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
              white-space: normal;
              padding-left: 15px;
              /* width ko container (poi-info) ke equal rakhein */
              max-width: 100%;
              font-size: 14px;
          }

          .poi-marker.active .poi-desc {
              display: block;
          }



          .center-buttons {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              flex-direction: column;
              gap: 15px;
              z-index: 10;
              pointer-events: auto;
          }

          .center-button {
              padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px);
              background-color: rgba(255, 255, 255, 0.9);
              border: none;
              border-radius: 30px;
              color: #333;
              font-weight: bold;
              cursor: pointer;
              transition: all 0.3s;
              width: clamp(100px, 12vw, 150px);
              text-align: center;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              font-family: Arial, sans-serif;
              font-optical-sizing: auto;
              font-weight: 400;
              font-style: normal;
          }

          .center-button:hover {
              background-color: white;
              transform: scale(1.05);
          }

          .center-button.active {
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              color: white;
          }

          .popup {
              top: 0;
              right: -40%;
              width: 25%;
              height: 100%;
              background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
              box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
              transition: right 0.5s ease;
              z-index: 1000;
              padding: 40px 20px;
              color: #333;
              overflow-y: auto;
              border-left: 5px solid #00d2ff;
              pointer-events: auto;
              background: rgba(255, 255, 255, 0.2);
              backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px);
          }

          .popup.active {
              right: 0;
          }

          .close-popup {
              position: absolute;
              top: 20px;
              right: 20px;
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              color: white;
              border: none;
              padding: 8px 16px;
              border-radius: 30px;
              cursor: pointer;
              font-weight: bold;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              transition: all 0.3s;
              pointer-events: auto;
          }

          .close-popup:hover {
              transform: scale(1.05);
          }

          .popup h2 {
              font-size: clamp(20px, 3vw, 32px);
              color: #3a7bd5;
              margin-bottom: 20px;
              text-shadow: none;
          }

          .popup p {
              font-size: clamp(12px, 1.5vw, 16px);
              line-height: 1.5;
              margin-bottom: 20px;
          }

          .popup img {
              width: 100%;
              max-height: 200px;
              object-fit: cover;
              margin-bottom: 10px;
              border-radius: 10px;
              margin-top: 36px;
          }

          .poi-group.has-active .poi-marker:not(.active) {
              opacity: 0.5;
              filter: blur(2px);
          }

          .poi-info {
              display: flex;
              flex-direction: column;
              gap: 5px;
          }

          @media (max-height: 600px) {
              .poi-marker:nth-child(1) {
                  top: 10%;
              }

              .poi-marker:nth-child(2) {
                  top: 22%;
              }

              .poi-marker:nth-child(3) {
                  top: 34%;
              }

              .poi-marker:nth-child(4) {
                  top: 46%;
              }

              .poi-marker:nth-child(5) {
                  top: 58%;
              }

              .selection-dots {
                  gap: 10px;
              }
          }

          .iframe-container {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              z-index: 1;
          }

          .iframe-container iframe {
              width: 100%;
              height: 100%;
              border: none;
          }

          .poi-group {
              display: block;
          }

          .poi-modal {
              display: none;
              position: fixed;
              z-index: 1000;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              overflow-y: auto;
              overflow-x: hidden;
              backdrop-filter: blur(4px);
              animation: fadeIn 0.4s ease;
          }

          .poi-modal-area {
              display: flex;
              justify-content: end;
              align-items: center;
              width: 100%;
              height: inherit;
              padding: 40px;
              padding-right: 170px;
          }

          .poi-modal-content {
              background: linear-gradient(145deg, #1a1a1a87, #2b2b2b);
              padding: 25px 25px 0px 25px;
              border-radius: 16px;
              width: 800px;
              max-width: 900px;
              height: 95%;
              overflow-y: scroll !important;
              box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
              font-family: Arial, sans-serif;
              color: #eaeaea;
              position: relative;
              animation: popUp 0.5s ease;
              border: 1px solid rgba(200, 170, 90, 0.4);
              scrollbar-width: thin;
              scrollbar-color: rgba(200, 170, 90, 0.6) rgba(0, 0, 0, 0.2);
          }

          #poiTitle {
              font-family: Arial, sans-serif;
              font-size: 1.8rem;
              color: #e8d3a8;
              text-align: center;
              margin-bottom: 10px;
              margin-top: 6px;
              margin-left: 70px;
              margin-right: 70px;

          }

          #poiAddress {
              text-align: center;
              font-size: 1rem;
              font-style: italic;
              color: #bbb;
              margin-bottom: 20px;
          }

          #poiDescription p {
              margin: 12px 0px 30px 0px;
              line-height: 1.6;
              color: #ddd;
          }

          .poi-close {
              float: right;
              font-size: 26px;
              font-weight: bold;
              cursor: pointer;
              color: #eaeaea;
              transition: color 0.2s;
          }

          .poi-close:hover {
              color: #e8d3a8;
          }

          .poi-gallery {
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 20px 0;
              position: relative;
          }

          .poi-gallery img {
              max-width: 100%;
              max-height: 260px;
              border-radius: 12px;
              object-fit: cover;
              border: 1px solid rgba(200, 170, 90, 0.3);
              box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
              transition: transform 0.3s ease;
          }

          .poi-gallery img:hover {
              transform: scale(1.02);
          }

          .poi-gallery button {
              background: rgba(30, 30, 30, 0.7);
              border: 1px solid rgba(200, 170, 90, 0.5);
              width: 44px;
              height: 44px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              transition: all 0.3s ease;
              z-index: 10;
          }

          .poi-gallery button img {
              width: 40px;
              height: 40px;
              object-fit: contain;
              filter: invert(85%) sepia(20%) saturate(150%) hue-rotate(15deg);
              transition: all 0.3s ease;
              border-radius: 50%;
              align-items: center;
              justify-content: center;
              text-align: center;
          }

          #prevImg {
              left: 12px;
          }

          #nextImg {
              right: 12px;
          }

          .poi-gallery button:hover {
              background: rgba(200, 170, 90, 0.85);
              transform: translateY(-50%) scale(1.1);
          }

          .poi-gallery button:hover img {
              filter: invert(10%) sepia(100%) saturate(80%) hue-rotate(10deg);
          }

          @media (max-width: 600px) {
              .poi-gallery img {
                  max-height: 180px;
                  border-radius: 8px;
              }

              .poi-gallery button {
                  width: 36px;
                  height: 36px;
              }

              .poi-gallery button img {
                  width: 18px;
                  height: 18px;
              }
          }

          @keyframes fadeIn {
              from {
                  opacity: 0;
              }

              to {
                  opacity: 1;
              }
          }

          @keyframes popUp {
              from {
                  transform: scale(0.8);
                  opacity: 0;
              }

              to {
                  transform: scale(1);
                  opacity: 1;
              }
          }

          @media (max-width: 992px) {
              .poi-modal-content {
                  width: 85%;
                  padding: 20px 20px 0px 20px;
                  height: 90%;
                  overflow-x: hidden !important;
                  overflow-y: scroll !important;
              }

              #poiTitle {
                  font-size: 1.6rem;
              }

              #poiAddress {
                  font-size: 0.95rem;
              }

              .poi-gallery img {
                  max-height: 240px;
              }

              .poi-modal-area {
                  justify-content: center;
                  padding: 40px;
              }
          }

          @media (max-width: 600px) {
              .poi-modal-content {
                  width: 90%;
                  padding: 15px 15px 0px 15px;
              }

              #poiTitle {
                  font-size: 1.4rem;
              }

              #poiAddress {
                  font-size: 0.85rem;
              }

              #poiDescription p {
                  font-size: 0.9rem;
                  line-height: 1.4;
              }

              .poi-gallery img {
                  max-height: 180px;
                  border-radius: 8px;
              }

              .poi-gallery button {
                  font-size: 22px;
                  padding: 6px 10px;
              }
          }

          @media (max-width: 400px) {
              #poiTitle {
                  font-size: 1.2rem;
              }

              .poi-gallery img {
                  max-height: 150px;
              }
          }

          #micasa {
              text-align: center;
          }

          #poiAddress {
              display: inline-block;
              margin-bottom: 18px;
              font-size: 1rem;
              font-style: italic;
              color: #e8d3a8;
              text-decoration: none;
              transition: color 0.3s ease, text-shadow 0.3s ease;
          }

          #poiAddress:hover {
              color: #f5e1b6;
              text-shadow: 0 0 6px rgba(200, 170, 90, 0.6);
          }

          .more-link {
              display: inline-block;
              margin-left: 0px;
              color: #00c2ff;
              font-weight: bold;
              cursor: pointer;
              text-decoration: none;
          }

          .more-link:hover {
              text-decoration: underline;
          }

          #poiDescription p {
              margin-bottom: 30px;
              line-height: 1.6;
              text-align: justify;
          }

          .poi-modal.fullscreen {
              background: rgba(0, 0, 0, 0.95);
              backdrop-filter: blur(15px);
              -webkit-backdrop-filter: blur(15px);
          }

          .poi-modal.fullscreen .poi-modal-content {
              width: 95%;
              height: 95%;
              margin: 2.5% auto;
              max-width: none;
              max-height: none;
              padding: 30px 30px 0px 30px;
              border-radius: 12px;
              background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
              border: 2px solid rgba(200, 170, 90, 0.6);
              overflow-y: auto;
          }

          .poi-modal-header {
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
          }

          .poi-modal-actions {
              display: flex;
              gap: 10px;
              align-items: center;
              position: absolute;
              right: 0;
              top: 45%;
              transform: translateY(-50%);
          }

          .poi-fullscreen-btn {
              color: white;
              border: none;
              outline: none;
              background: none;
              font-size: 25px;
          }

          .poi-modal.fullscreen #poiTitle {
              font-size: 2.5rem;
              text-align: center;
              margin-bottom: 20px;
              color: #e8d3a8;
              text-shadow: 0 2px 10px rgba(232, 211, 168, 0.3);
          }

          .poi-modal.fullscreen #poiAddress {
              font-size: 1.2rem;
              text-align: center;
              margin-bottom: 30px;
          }

          .poi-modal.fullscreen .poi-gallery {
              margin: 30px 0;
          }

          .poi-modal.fullscreen .poi-gallery img {
              max-height: 380px;
              max-width: 100%;
              border-radius: 16px;
              box-shadow: 0 8px 35px rgba(0, 0, 0, 0.8);
          }

          .poi-modal.fullscreen #poiDescription {
              font-size: 1.1rem;
              line-height: 1.8;
              max-width: 900px;
              margin: 0 auto;
              padding: 20px;
              background: rgba(255, 255, 255, 0.05);
              border-radius: 12px;
              border-left: 4px solid #e8d3a8;
          }

          .poi-modal.fullscreen .poi-gallery button {
              font-size: 32px;
              /* padding: 12px 18px; */
              background: rgba(30, 30, 30, 0.9);
              border: 2px solid rgba(200, 170, 90, 0.6);
              padding: initial;
          }

          .poi-modal.fullscreen .poi-gallery button:hover {
              background: rgba(200, 170, 90, 0.9);
          }





          .language-selector {
              position: absolute;
              top: 20px;
              right: 20px;
              display: flex;
              gap: 10px;
              z-index: 1000;
              pointer-events: auto;
          }

          .language-option {
              display: flex;
              align-items: center;
              gap: 5px;
              padding: 8px 5px;
              background-color: none;
              cursor: pointer;
              font-size: clamp(12px, 1.5vw, 14px);
              font-weight: 500;
              color: #333;
              transition: all 0.3s;
          }

          .language-option img {
              width: 50px;
              height: 50px;
              border-radius: 100%;
              transition: all 0.3s;
          }

          .language-option:hover {
              transform: scale(1.2);
              transition: all 0.3s;
          }

          .language-option.active img {
              transform: scale(1.2);
              border: 2px solid rgba(200, 170, 90, 0.6);
              box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
              border-radius: 100%;
              transition: all 0.3s;
          }

          @media (min-width: 1600px) {
              .poi-modal-content {
                  height: 90vh;
              }
          }

          @media (min-width: 1920px) {
              .poi-modal-content {
                  height: 85vh;
              }
          }

          @media (min-width: 2560px) {
              .poi-modal-content {
                  height: 80vh;
              }
          }

          .show-terminological-btn {
              display: inline-block;
              margin-top: 20px;
              padding: 12px 30px;
              font-size: 18px;
              font-weight: 600;
              color: #fff;
              background: linear-gradient(135deg, #3a7bd5, #00d2ff);
              /* background: linear-gradient(135deg, #3a7bd500, #00d2ff00); */
              border: none;
              border-radius: 40px;
              cursor: pointer;
              transition: all 0.3s ease;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
              margin-bottom: 20px;
          }

          .show-terminological-btn:hover {
              transform: translateY(-2px);
              box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
          }

          .show-terminological-btn:active {
              transform: scale(0.97);
              box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
          }


          .landing-section-title {
              display: inline-block;
              /* underline sirf text ke width tak rahegi */
              border-bottom: 4px solid white;
              /* 4px moti safed line */
              padding-bottom: 5px;
              /* thoda gap text aur line ke beech */
          }

          .sheet {
              width: 100%;
              height: 100vh;
              position: relative;
              background-color: #00d2ff;
              z-index: 9999999999999999999999999999999999999999999999999999999999999999999;
          }

          /* //////////////////////// */
          /* NEW STYLES FOR LANDING PAGES */
          .scrollable-section {
              max-height: 60vh;
              overflow-y: auto;
              padding: 15px;
              margin-bottom: 20px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 8px;
              border: 1px solid rgba(255, 255, 255, 0.2);
              scrollbar-width: thin;
              scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.1);
          }

          .scrollable-section::-webkit-scrollbar {
              width: 8px;
          }

          .scrollable-section::-webkit-scrollbar-track {
              background: rgba(0, 0, 0, 0.1);
              border-radius: 10px;
          }

          .scrollable-section::-webkit-scrollbar-thumb {
              background: rgba(255, 255, 255, 0.5);
              border-radius: 10px;
          }

          .landing-section-text {
              font-size: clamp(16px, 2vw, 26px);
              font-weight: 400;
              line-height: 1.6;
              opacity: 0.95;
              max-width: 1200px;
              margin-left: auto;
              margin-right: auto;
              text-align: justify;
              text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
              margin-bottom: 20px;
              height: 285px;
          }

          .start-experience-btn {
              position: fixed;
              bottom: 30px;
              right: 30px;
              padding: 12px 24px;
              background: linear-gradient(to right, #3a7bd5, #00d2ff);
              color: white;
              border: none;
              border-radius: 30px;
              font-weight: bold;
              cursor: pointer;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
              transition: all 0.3s ease;
              opacity: 1;
              /* visibility: hidden; */
              transform: translateY(3px);
              z-index: 100;
              /* pointer-events: none; */
          }

          .start-experience-btn.active {
              opacity: 1;
              visibility: visible;
              transform: translateY(0);
              pointer-events: all;
          }

          .start-experience-btn:hover {
              transform: translateY(-.5px);
              box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
          }

          .scroll-indicator {
              position: absolute;
              bottom: 10px;
              left: 50%;
              transform: translateX(-50%);
              color: rgba(255, 255, 255, 0.7);
              font-size: 14px;
              text-align: center;
              animation: bounce 2s infinite;
          }

          .container {
              display: none;
              /* UI hidden jab tak button click na ho */
          }

          @keyframes bounce {

              0%,
              20%,
              50%,
              80%,
              100% {
                  transform: translateX(-50%) translateY(0);
              }

              40% {
                  transform: translateX(-50%) translateY(-10px);
              }

              60% {
                  transform: translateX(-50%) translateY(-5px);
              }
          }

          /* Make landing logo responsive */
          .landing-logo {
              max-width: 90%;
              height: auto;
              display: block;
              margin: 0 auto;
              position: relative;
              bottom: 100px;
          }





          /* Tablets */
          @media (max-width: 992px) {
              .landing-content {
                  max-width: 700px;
                  padding: 25px 15px;
              }

              .scrollable-section {
                  max-height: 200px;
              }
          }


          @media (max-height: 700px) {
              .landing-content {
                  min-height: 90vh;
                  padding: 40px 15px;
              }
          }

          @media (max-height: 500px) {
              .landing-content {
                  min-height: 80vh;
                  padding: 60px 15px;
              }
          }

          @media (max-height: 800px) {
              .landing-content {
                  justify-content: flex-start;
                  /* content top se start ho */
                  padding-top: 80px;
                  padding-bottom: 40px;
              }
          }

          /* Chhoti laptops ya tablets ke liye */
          @media (max-height: 650px) {
              .landing-content {
                  min-height: auto;
                  padding: 60px 20px;
              }
          }

          /* /////////////////////////////////////// */

          /* SECOND LANDING PAGE RESPONSIVE FIX */
          #second-landing {
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              /* full screen area */
              /* background: linear-gradient(rgba(42, 42, 42, 0.8), rgba(42, 42, 42, 0.6)),
                  url('../Images/Landingpage.jpg'); */
              background: linear-gradient(rgba(42, 42, 42, 0.8), rgba(42, 42, 42, 0.6)),
                  url('Images/logo_Memoriale.jpg');
              background-size: cover;
              background-position: center;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow-y: auto;
              /* scroll enable if content overflows */
              z-index: 20;
              padding: 20px;
              box-sizing: border-box;
          }

          /* Main content wrapper inside second landing */
          #second-landing .landing-content {
              text-align: center;
              color: white;
              max-width: 1100px;
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              min-height: calc(100vh - 40px);
              padding: 20px;
              box-sizing: border-box;
          }

          /* Make text blocks scrollable independently if needed */
          #second-landing .scrollable-section {
              max-height: 65vh;
              overflow-y: auto;
              padding: 15px 20px;
              border-radius: 8px;
              background: rgba(255, 255, 255, 0.1);
              border: 1px solid rgba(255, 255, 255, 0.2);
              scrollbar-width: thin;
              scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
          }

          /* Laptop screen with smaller height */
          @media (max-height: 800px) {
              #second-landing {
                  align-items: flex-start;
                  padding-top: 80px;
              }

              #second-landing .landing-content {
                  justify-content: flex-start;
                  min-height: auto;
              }
          }

          /* Tablets or smaller laptop screens */
          @media (max-height: 650px) {
              #second-landing {
                  overflow-y: scroll;
                  align-items: flex-start;
                  padding-top: 60px;
              }

              #second-landing .landing-content {
                  padding: 40px 15px;
                  justify-content: flex-start;
              }

              #second-landing .scrollable-section {
                  max-height: none;
                  /* allow full scroll when screen too short */
              }
          }

          /* Mobile devices */
          @media (max-width: 768px) {
              #second-landing {
                  flex-direction: column;
                  justify-content: flex-start;
                  padding-top: 60px;
                  padding-bottom: 40px;
              }

              #second-landing .landing-content {
                  padding: 30px 15px;
                  min-height: auto;
              }

              #second-landing .scrollable-section {
                  /* max-height: 70vh; */
                  max-height: 22vh;
              }

              .poi-container {
                  width: 80%;
              }

              /* .poi-group {
                width: 80%;
            } */

              .poi-marker {
                  gap: 5px;
              }

              .poi-marker:nth-child(1) {
                  left: 15%;
                  top: 25%;

              }

              .italy-2 {
                  left: 15%;
                  top: 45%;

              }

              .italy-1 {
                  left: 15%;
                  top: 28% !important;

              }

              .poi-marker:nth-child(2) {
                  left: 15%;
                  top: 35%;

              }

              .poi-marker:nth-child(3) {
                  left: 15%;
                  top: 45%;

              }

              .poi-marker:nth-child(4) {
                  left: 15%;
                  top: 46%;

              }

              .poi-marker:nth-child(5) {
                  left: 15%;
                  top: 58%;

              }

              .navigation-buttons {
                  right: 20px;
              }

              .selection-dots {
                  left: 15px;
                  gap: 10px;
              }

              .selection-dot {
                  width: 8px;
                  height: 8px;
              }



              .center-button {
                  width: clamp(80px, 10vw, 120px);
              }

              .popup {
                  width: 60%;
                  padding: 20px;
              }

              .poi-modal.fullscreen .poi-modal-content {
                  width: 98%;
                  height: 98%;
                  margin: 1% auto;
                  padding: 20px 20px 0px 20px;
              }

              .poi-modal.fullscreen #poiTitle {
                  font-size: 1.8rem;
              }

              .poi-modal.fullscreen .poi-gallery img {
                  max-height: 220px;
                  max-width: 90%;
              }

              .poi-modal.fullscreen #poiDescription {
                  font-size: 1rem;
                  padding: 15px;
              }

              .poi-container {
                  width: 80%;
              }

              /* .poi-group {
                width: 80%;
            } */

              .poi-marker {
                  gap: 5px;
              }



              .navigation-buttons {
                  right: 20px;
              }

              .selection-dots {
                  left: 15px;
                  gap: 10px;
              }

              .selection-dot {
                  width: 8px;
                  height: 8px;
              }



              .center-button {
                  width: clamp(80px, 10vw, 120px);
              }

              .popup {
                  width: 60%;
                  padding: 20px;
              }

              .landing-section-title {
                  font-size: clamp(24px, 3.5vw, 36px);
              }

              .landing-section-text {
                  font-size: clamp(14px, 1.8vw, 18px);
              }

              .poi-modal.fullscreen .poi-modal-content {
                  width: 98%;
                  height: 98%;
                  margin: 1% auto;
                  padding: 20px 20px 0px 20px;
              }

              .poi-modal.fullscreen #poiTitle {
                  font-size: 1.8rem;
              }

              .poi-modal.fullscreen .poi-gallery img {
                  max-height: 220px;
                  max-width: 90%;
              }

              .poi-modal.fullscreen #poiDescription {
                  font-size: 1rem;
                  padding: 15px;
              }

              .landing-content {
                  max-width: 100%;
                  padding-top: 145px;
              }

              .landing-subtitle,
              .landing-subtitle-2,
              .landing-subtitle-3 {
                  white-space: normal !important;
              }

              .landing-section-title {
                  font-size: 1.4rem;
              }

              .landing-section-text {
                  font-size: 0.9rem;
              }
          }

          @media (max-width: 768px) {
              .poi-desc {
                  display: none;
                  color: white;
                  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
                  white-space: normal;
                  padding-left: 15px;
                  max-width: 215px;
                  font-size: 13px;
              }

              .language-option {
                  display: flex;
                  align-items: center;
                  gap: 5px;
                  padding: 1px 0px;
                  background-color: none;
                  cursor: pointer;
                  font-size: clamp(12px, 1.5vw, 14px);
                  font-weight: 500;
                  color: #333;
                  transition: all 0.3s;
              }

              .language-option img {
                  width: 40px;
                  height: 40px;
                  border-radius: 100%;
                  transition: all 0.3s;
                  gap: 5px;
              }
          }

          /* ===================================================== */
          /* 📱 Special for 425px screens (e.g. Pixel 6, iPhone 14) */
          /* ===================================================== */
          @media (max-width: 425px) {
              .poi-desc {
                  display: none;
                  color: white;
                  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
                  white-space: normal;
                  padding-left: 15px;
                  max-width: 215px;
                  font-size: 13px;
              }

              .language-option {
                  display: flex;
                  align-items: center;
                  gap: 5px;
                  padding: 1px 0px;
                  background-color: none;
                  cursor: pointer;
                  font-size: clamp(12px, 1.5vw, 14px);
                  font-weight: 500;
                  color: #333;
                  transition: all 0.3s;
              }

              .language-option img {
                  width: 40px;
                  height: 40px;
                  border-radius: 100%;
                  transition: all 0.3s;
                  gap: 5px;
              }
          }

          /* ===================================================== */
          /* Small Mobiles (max-width: 480px or max-height: 600px) */
          /* ===================================================== */
          @media (max-width: 480px),
          (max-height: 600px) {
              .poi-desc {
                  display: none;
                  color: white;
                  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
                  white-space: normal;
                  padding-left: 15px;
                  max-width: 215px;
                  font-size: 13px;
              }

              .language-option {
                  display: flex;
                  align-items: center;
                  gap: 5px;
                  padding: 1px 0px;
                  background-color: none;
                  cursor: pointer;
                  font-size: clamp(12px, 1.5vw, 14px);
                  font-weight: 500;
                  color: #333;
                  transition: all 0.3s;
              }

              .language-option img {
                  width: 40px;
                  height: 40px;
                  border-radius: 100%;
                  transition: all 0.3s;
                  gap: 5px;
              }
          }

          /* ===================================================== */
          /* Extra Small (max-width: 375px — e.g. iPhone SE) */
          /* ===================================================== */
          @media (max-width: 375px) {
              .poi-desc {
                  display: none;
                  color: white;
                  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
                  white-space: normal;
                  padding-left: 15px;
                  max-width: 215px;
                  font-size: 13px;
              }

              .language-option {
                  display: flex;
                  align-items: center;
                  gap: 5px;
                  padding: 1px 0px;
                  background-color: none;
                  cursor: pointer;
                  font-size: clamp(12px, 1.5vw, 14px);
                  font-weight: 500;
                  color: #333;
                  transition: all 0.3s;
              }

              .language-option img {
                  width: 40px;
                  height: 40px;
                  border-radius: 100%;
                  transition: all 0.3s;
                  gap: 5px;
              }
          }

          /* 🔧 Mobile Fix — allow wrapping & smaller font */
          @media (max-width: 768px) {
              .poi-text {
                  white-space: normal !important;
                  word-break: break-word !important;
                  line-height: 1.2 !important;
                  max-width: 80vw;
                  text-align: left !important;
              }
          }

          /* 🔧 Extra small devices (425px and below) */
          @media (max-width: 425px) {
              .poi-text {
                  max-width: 55vw;
                  padding-left: 10px !important;
              }
          }

          /* Animation Classes */
          @keyframes fadeIn {
              from {
                  opacity: 0.5;
              }

              to {
                  opacity: 1;
              }
          }

          .fade-in {
              animation: fadeIn 0.5s ease-in-out;
          }

          .poi-close {
              font-size: 24px;
              font-weight: 100;
              cursor: pointer;
          }

          /* Bibliography Toggle Styles */
          .poi-bibliography-wrapper {
              margin-top: 25px;
              border-top: 1px solid rgba(255, 255, 255, 0.1);
              padding-top: 20px;
              text-align: left;
          }

          .bibliography-btn {
              background: linear-gradient(135deg, #2c3e50, #000000);
              color: white;
              border: 1px solid rgba(255, 255, 255, 0.2);
              padding: 10px 20px;
              border-radius: 8px;
              cursor: pointer;
              display: inline-flex;
              align-items: center;
              gap: 12px;
              font-size: 14px;
              font-weight: 600;
              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
          }

          .bibliography-btn:hover {
              background: linear-gradient(135deg, #34495e, #1a1a1a);
              transform: translateY(-2px);
              box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
              border-color: rgba(255, 255, 255, 0.4);
          }

          .bibliography-btn:active {
              transform: translateY(0);
          }

          .btn-icon {
              font-size: 18px;
              transition: transform 0.3s ease;
          }

          .poi-bibliography {
              margin-top: 15px;
              padding: 15px;
              background: rgba(255, 255, 255, 0.05);
              border-radius: 8px;
              border: 1px solid rgba(255, 255, 255, 0.1);
              font-size: 14px;
              line-height: 1.6;
              color: #e0e0e0;
              animation: slideDown 0.4s ease-out;
          }

          .poi-bibliography p {
              margin-bottom: 10px;
          }

          .poi-bibliography p:last-child {
              margin-bottom: 0;
          }

          .poi-bibliography.hidden {
              display: none;
          }

          @keyframes slideDown {
              from {
                  opacity: 0;
                  transform: translateY(-10px);
              }

              to {
                  opacity: 1;
                  transform: translateY(0);
              }
          }

          /* --- Premium Mobile Responsiveness Enhancements --- */
          @media (max-width: 768px) {

              /* Modal Container Adjustments */
              .poi-modal-area {
                  padding: 15px;
                  /* Remove heavy desktop padding */
                  justify-content: center;
                  align-items: flex-start;
                  /* Start from top to allow scrolling */
              }

              .poi-modal-content {
                  width: 95%;
                  height: auto;
                  max-height: 90vh;
                  padding: 20px 15px;
                  margin-top: 20px;
                  border-radius: 12px;
              }

              /* Modal Header & Title */
              #poiTitle {
                  font-size: 1.4rem !important;
                  margin-left: 0;
                  margin-right: 0;
                  margin-top: 30px;
                  /* Space for close button */
              }

              #poiAddress {
                  font-size: 0.9rem;
                  margin-bottom: 15px;
              }

              /* Gallery Adjustments */
              .poi-gallery img {
                  max-height: 220px;
                  border-radius: 8px;
              }

              .poi-gallery button {
                  width: 34px;
                  height: 34px;
              }

              .poi-gallery button img {
                  width: 16px;
                  height: 16px;
              }

              /* Description Adjustments */
              #poiDescription p {
                  font-size: 0.95rem;
                  line-height: 1.5;
                  margin-bottom: 15px;
              }

              /* Bibliography Button for Mobile */
              .bibliography-btn {
                  width: 100%;
                  justify-content: center;
                  padding: 12px;
                  font-size: 13px;
              }

              .poi-bibliography {
                  font-size: 13px;
                  padding: 12px;
              }

              /* Close Button Positioning */
              .poi-close {
                  position: absolute;
                  top: 15px;
                  right: 15px;
                  font-size: 28px;
                  z-index: 100;
              }

              /* Landing Arrow Mobile Style */
              .landing-arrow {
                  position: absolute;
                  top: 60.5%;
                  /* left: 43%; */
                  width: 60px;
                  height: 60px;
                  border: 3px solid white;
                  background: transparent;
                  border-radius: 50%;
                  color: white;
                  font-size: 32px;
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  transition: all 0.3s ease;
                  margin: 0 auto;
              }
          }

          /* Ultra Small Devices */
          @media (max-width: 480px) {
              .poi-gallery img {
                  max-height: 180px;
              }

              #poiTitle {
                  font-size: 1.2rem !important;
              }

              .navigation-buttons {
                  right: 10px;
                  gap: 10px;
              }

              .nav-button {
                  padding: 6px 12px;
                  font-size: 11px;
                  width: 90px;
              }
          }
          
            @media (min-width: 1280px) and (max-width: 1600px) and (max-height: 820px) {
              .landing-bottom {

                  bottom: 17.5% !important;

              }

              .navigation-buttons {
                  top: 54% !important;
              }

              .selection-dots {
                  top: 55% !important;
              }
          }

          @media (min-width: 1495px) and (max-height: 706px) {
              .landing-bottom {
                  bottom: 17.5% !important;
              }

              .navigation-buttons {
                  top: 54% !important;
              }

              .selection-dots {
                  top: 55% !important;
              }


          }