@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400&display=swap');

body, html {
   position: fixed;
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   font-family: 'Inter Thin', sans-serif;
   font-weight: 100;
   box-sizing: border-box;
   background-color: white;
}
.viewport {
   position: fixed;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   overflow: hidden;
   box-sizing: border-box;
   color: black;
   background-color: white;
}
.floatingMenu {
   position: fixed;
   top: 30px;
   left: calc(20% + 15px);
   width: calc(60% - 30px);
   height: 25px;
   background-color: black;
   color: white;
   font-size: 12px;
   border-radius: 10px;
   z-index: 1;
   display: flex;
   box-sizing: border-box;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);            
}
.menuLeft{
   position: absolute;
   top: 5px;
   left: 10px;
   width: 70px;
   display: block;
   justify-content: left;
   align-items: left;
   padding-top: 2px;
   z-index: 2;
   box-sizing: border-box;
}
.menuRight{
   position: absolute;
   top: 5px;
   right: 5px;
   width: 70px;
   display: block;
   justify-content: center;
   align-items: center;
   padding-top: 2px;
   z-index: 2;
   box-sizing: border-box;
}
.menuLessRight{
   position: absolute;
   top: 5px;
   right: 80px;
   width: 70px;
   display: block;
   justify-content: center;
   align-items: center;
   padding-top: 2px;
   z-index: 2;
   box-sizing: border-box;
}
.menuLessLessRight{
   position: absolute;
   top: 5px;
   right: 160px;
   width: 70px;
   display: block;
   justify-content: center;
   align-items: center;
   padding-top: 2px;
   z-index: 2;
   box-sizing: border-box;
}
.menuLessLessLessRight{
   position: absolute;
   top: 5px;
   right: 240px;
   width: 70px;
   display: block;
   justify-content: center;
   align-items: center;
   padding-top: 2px;
   z-index: 2;
   box-sizing: border-box;
}
.bodyContainer {
   position: fixed;
   top: 65px;
   left: calc(15% + 30px);
   display: flex;
   height: calc(100% - 65px - 25px - 5px);
   width: calc(85% - 30px - 5px);
   overflow: hidden;
   color: black;
   background-color: white;
   box-sizing: border-box;
   z-index: 1;
}
.bodyContainerVScroll {
   position: fixed;
   top: 65px;
   left: calc(15% + 30px);
   display: flex;
   height: calc(100% - 65px - 25px - 5px);
   width: calc(85% - 30px - 5px);
   overflow-Y: auto;
   color: black;
   background-color: white;
   box-sizing: border-box;
   z-index: 1;
}
.logo {
   position: absolute;
   top: 20px;
   left: 15px;
   width: 15%;
   height: auto;
   display: block;
}
.button {
   position: fixed;
   background-color: black;
   color: white;
   padding: 10px 10px;
   border: none;
   border-radius: 10px;
   font-size: 16px;
   width: 15%;
   height: auto;
   display: block;
   bottom: calc(20px + 25px);
   left: 15px;
}
.button:hover {
   font-weight: bold;
   cursor: pointer;
}
.footer {
   position: fixed;
   left: 0px;
   bottom: 0px;
   width: 100%;
   height: 25px;
   background-color: black;
   color: white;
   text-align: center;
   box-sizing: border-box;
}
.copyright {
   position: absolute;
   font-size: 12px;            
   line-height: normal;
   top: 5px;
   left: 20px
}
.privacy {
   position: absolute;
   font-size: 12px;            
   line-height: normal;
   top: 5px;
   right: 20px
}
.swiper-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   color: black;
   background-color: white;
   box-sizing: border-box;
   padding-bottom: 30px;
}
.swiper-wrapper {
   background-color: white;
}
.swiper-slide {
      position: relative;
      background-position: center;
      background-size: cover;
      width: 100%;
      height: 100%;
      background-color: white;
}
.swiper-pagination {
   position: absolute;
   bottom: 5px;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   box-sizing: border-box;
}
.swiper-pagination-bullet {
   background-color: black; /* Change to your desired color */
}
.swiper-pagination-bullet-active {
   background-color: rgba(3, 168, 250, 0.718); /* Change to your desired color */
}
.swiper-slide iframe {
   width: 100%;
   height: 100%;
   border: none;
}
.video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.body-link {
   color: blue;
}
.body-link:hover {
   color: blue;
   font-weight: bold;
   cursor: pointer;
}
.floatingMenu a, .privacy a {
   color: white;
   background-color: transparent;
   text-decoration: none;
   text-emphasis: none;
}
.floatingMenu a:hover, .privacy a:hover {
   color: white;
   background-color: transparent;
   text-decoration: none;
   font-weight: bold;
   cursor: pointer
}
.text-section {
   position: relative;
   top: 10px; 
   background-color: #f9f9f9; /* Optional: background color */
   padding: 20px;
   margin-top: 20px; /* Adjust as needed for spacing */
}
/* Mobile Menu Icon */
.menu-icon {
   display: none; /* Hidden by default, shown in mobile view */
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 5;
   cursor: pointer;
}
form {
   position: absolute;
   top: 100px;
   left: 15px;
   width: calc(80%);
   padding: 20px;
   border-radius: 10px;
   background-color: #f4f4f4;
   }
label {
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
}
input[type="text"],
   input[type="email"],
   textarea {
   width: 80%;
   padding: 10px;
   margin-bottom: 10px;
   border: 1px solid #ccc;
   border-radius: 10px;
}
button[type="submit"] {
   position: absolute;
   right: 20px;
   bottom: 20px;
   background-color: black;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 10px;
   cursor: pointer;
}

@media (max-width: 768px) {
   /* CSS styles for screens up to 768px wide (typical for mobile devices) */

   body, html {
      position: fixed;
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      font-family: 'Inter Thin', sans-serif;
      font-weight: 100;
      box-sizing: border-box;
      background-color: white;
   }
   .viewport {
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      overflow: hidden;
      box-sizing: border-box;
      color: black;
      background-color: white;
   }
   .menu-icon {
      display: block; /* Show the menu icon */
      position: fixed;
      top: 20px; /* Adjust as necessary to align vertically */
      right: 20px; /* Place on the right side */
      z-index: 5; /* Ensure it's above other content */
      cursor: pointer;
   }
   .floatingMenu {
      position: fixed;
      top: 0;
      padding-top: 50px; /* Adjust to ensure it's below the menu icon */
      left: -100%; /* Start off-screen */
      width: 80%;
      height: 100%;
      background-color: #000;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: right;
      align-items: flex-end; /* Align items to the right */
      text-align: right; /* Align text to the right within the items */
      transition: left 0.3s ease; /* Smooth sliding effect */
      z-index: 2; /* Ensure it's above other content */
   }
   /* Adjust menu item styles for mobile */
   .floatingMenu a {
      text-align: right; /* This is correct for aligning text */
      margin: 5px 20px 5px auto; /* This helps push items to the right */
      width: auto; /* Ensure width is auto to avoid forcing block to full container width */
      display: block; /* Keeps it as block but aligns text right */
   }
   .menuLeft, .menuRight, .menuLessRight, .menuLessLessRight, .menuLessLessLessRight {
      position: relative; /* Reset from absolute to align within flex container */
      top: auto; /* Reset positioning */
      right: 10px; /* Adjust right margin */
      width: auto; /* Allow natural width based on content */
      display: block; /* Ensure they're displayed */
      justify-content: right; /* Ensure text within these is also aligned right */
      text-align: right; /* Ensure text within these is also aligned right */
      margin-right: 20px; /* Ensure they're aligned to the right edge */
      margin-bottom: 10px; /* Adjust bottom margin to control line spacing */
   }
   .bodyContainer {
      position: fixed;
      top: 65px;
      left: calc(15% + 20px);
      display: flex;
      height: calc(100% - 65px - 25px - 5px);
      width: calc(85% - 20px - 5px);
      overflow: hidden;
      color: black;
      background-color: white;
      box-sizing: border-box;
      z-index: 1;
   }
   .bodyContainerVScroll {
      position: fixed;
      top: 65px;
      left: calc(15% + 20px);
      display: flex;
      height: calc(100% - 65px - 25px - 5px);
      width: calc(85% - 20px - 5px);
      overflow-Y: auto;
      color: black;
      background-color: white;
      box-sizing: border-box;
      z-index: 1;
   }
   .logo {
      position: absolute;
      top: 20px;
      left: 10px;
      width: 15%;
      height: auto;
      display: block;
   }
   .button {
      position: fixed;
      background-color: black;
      color: white;
      padding: 10px 5px 10px 5px; 
      border: none;
      border-radius: 10px;
      font-size: 12px;
      width: 15%;
      height: auto;
      display: block;
      bottom: calc(20px + 25px);
      left: 10px;
   }
   .footer {
      position: fixed;
      left: 0px;
      bottom: 0px;
      width: 100%;
      height: 25px;
      background-color: black;
      color: white;
      text-align: center;
      box-sizing: border-box;
   }
   .copyright {
      position: absolute;
      font-size: 12px;            
      line-height: normal;
      top: 5px;
      left: 20px
   }
   .privacy {
      position: absolute;
      font-size: 12px;            
      line-height: normal;
      top: 5px;
      right: 20px
   }
   .swiper-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: black;
      background-color: white;
      box-sizing: border-box;
      padding-bottom: 30px;
   }
   .swiper-slide {
         position: relative;
         background-position: center;
         background-size: cover;
         width: 100%;
         height: 100%;
         background-color: white;
   }
   .swiper-pagination {
      position: absolute;
      bottom: 5px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      box-sizing: border-box;
   }
   .swiper-pagination-bullet {
      background-color: white; /* Change to your desired color */
   }
   .swiper-pagination-bullet-active {
      background-color: rgba(3, 168, 250, 0.718); /* Change to your desired color */
   }
   .swiper-slide iframe {
      width: 100%;
      height: 100%;
      border: none;
   }  
   .video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }
   .body-link {
      color: blue;
   }
   .body-link:hover {
      color: blue;
      font-weight: bold;
      cursor: pointer;
   }
   .floatingMenu a, .privacy a {
      color: white;
      background-color: transparent;
      text-decoration: none;
      text-emphasis: none;
   }
   .floatingMenu a:hover, .privacy a:hover {
      color: white;
      background-color: transparent;
      text-decoration: none;
      font-weight: bold;
      cursor: pointer;
   }
   .text-section {
      position: relative;
      top: 10px; 
      background-color: #f9f9f9; /* Optional: background color */
      padding: 20px;
      margin-top: 20px; /* Adjust as needed for spacing */
   }
   form {
      position: absolute;
      top: 100px;
      left: 15px;
      width: calc(80%);
      padding: 20px;
      border-radius: 10px;
      background-color: #f4f4f4;
      }
   label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
   }
   input[type="text"],
      input[type="email"],
      textarea {
      width: 80%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
   }
   button[type="submit"] {
      position: absolute;
      right: 20px;
      bottom: 20px;
      background-color: black;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
   }
}