/* iPod Container */
.ipod {
  width: 320px;
  height: 550px;
  background-color: #b0e0e6;
  border-radius: 40px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transform-origin: center;
  transition: transform 8s ease;
}

/* iPod Screen */
.ipod-screen {
  width: 85%;
  height: 60%;
  background-color: #000;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 5%;
  left: 7.5%;
  transform-origin: center;
  transition: transform 6s ease, opacity 1s ease;
  z-index: 2;
}

/* Company Logo */
.logo {
  filter: invert(1);
  width: 150px; /* Adjust width as needed */
  height: auto; /* Maintain aspect ratio */
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.5s;
  background-size: cover; /* Ensure the image covers the element */
  background-position: center; /* Center the image */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Scroll Wheel */
.scroll-wheel {
  width: 160px;
  height: 160px;
  background-color: #d4d4d4;
  border-radius: 50%;
  margin-top: 20px;
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2);
}

/* Homepage Layout */
.homepage {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  color: black;
  font-size: 24px;
  z-index: 3;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Homepage Back */
.homepageBack {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  color: black;
  font-size: 24px;
  z-index: 4; /* Higher z-index to ensure it appears above other content */
  opacity: 1; /* Show immediately */
  display: none; /* Initially hidden */
}

/* Left Section */
.left-section {
  transition: transform 1s ease-in-out;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start; /* Align items to the left */
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.left-section.hidden {
  transform: translateX(50%); /* Slide out of view */
}

.new-left-section {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  transition: transform 1.2s ease-in-out;
  background-color: rgb(255, 255, 255);
}

.new-left-section.active {
  transform: translateX(0%); /* Move into view */
  z-index: 9;
}

.new-left-section.hidden {
  transform: translateX(-100%); /* Slide out of view */
}
.new-left-section.next {
  transform: translateX(-50%); /* Slide out of view */
}

/* Move left-section out to the left */
.left-section.slide-left {
  transform: translateX(
    -200%
  ); /* Moves it completely out of view to the left */
}

/* Move left-section out to the left */
.new-left-section.slide-left {
  transform: translateX(
    -250%
  ); /* Moves it completely out of view to the left */
}

.new-left-sections {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  transition: transform 1.5s ease-in-out;
  background-color: rgb(255, 255, 255);
}

.new-left-sections.active {
  transform: translateX(0%); /* Move into view */
  z-index: 9;
}

.new-left-sections.hidden {
  transform: translateX(-100%); /* Slide out of view */
      z-index: -1;
}
.new-left-sections.next {
  transform: translateX(-50%); /* Slide out of view */
}

/* Move left-section out to the left */
.left-sections.slide-left {
  transform: translateX(
    -200%
  ); /* Moves it completely out of view to the left */
}

/* Move left-section out to the left */
.new-left-sections.slide-left {
  transform: translateX(
    -250%
  ); /* Moves it completely out of view to the left */
}

.songone {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transform: translateX(50%);
  transition: transform 1.5s ease-in-out;
  background-color: white;
}

.songone.active {
  transform: translateX(0%); /* Move into view */
  z-index: 9;
}

.songone.hidden {
  transform: translateX(-100%); /* Slide out of view */
}
.songone.next {
  transform: translateX(-50%); /* Slide out of view */
}

/* Move left-section out to the left */
.left-sections.slide-left {
  transform: translateX(
    -200%
  ); /* Moves it completely out of view to the left */
}

/* Move left-section out to the left */
.songone.slide-left {
  transform: translateX(
    -250%
  ); /* Moves it completely out of view to the left */
}

.girl-left-section {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  transform: translateX(50%);
  transition: transform 1s ease-in-out;
}

.girl-left-section.active {
  transform: translateX(-50%); /* Move into view */
}

.girl-left-section.hidden {
  transform: translateX(50%); /* Slide out of view */
}

@font-face {
  font-family: "Helvetica";
  src: url("fonts/Helvetica.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Container for Menu Text and Battery Logo */
.menu-battery-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Full width to align items */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100%
  ); /* Darker gray at the bottom */
  padding: 2px; /* Adjust padding for spacing */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
}

.new-menu-battery-container {
  display: flex;
  visibility: hidden;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Full width to align items */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100%
  ); /* Darker gray at the bottom */
  padding: 2px; /* Adjust padding for spacing */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  transform: translateX(0%);
  transition: transform 1s ease-in-out;
}

.new-menu-battery-container.hide {
  visibility: hidden;
}
.new-menu-battery-container.stay-still {
  transform: translateX(-100%); /* Move into view */
}

.new-menu-battery-containers {
  display: flex;
  visibility: hidden;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Full width to align items */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100%
  ); /* Darker gray at the bottom */
  padding: 2px; /* Adjust padding for spacing */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  transform: translateX(0%);
  transition: transform 2s ease-in-out;
}

.new-menu-battery-containers.hide {
  visibility: hidden;
}
.new-menu-battery-containers.stay-still {
  transform: translateX(-100%); /* Move into view */
}

.songone-menu-battery-container {
  display: flex;
  visibility: hidden;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Full width to align items */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100%
  ); /* Darker gray at the bottom */
  padding: 2px; /* Adjust padding for spacing */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  transform: translateX(0%);
  transition: transform 1.5s ease-in-out;
}

.songone-menu-battery-container.hide {
  visibility: hidden;
}
.songone-menu-battery-container.stay-still {
  transform: translateX(-100%); /* Move into view */
}

.new-menu-battery-containerss {
  display: flex;
  visibility: hidden;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Full width to align items */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100%
  ); /* Darker gray at the bottom */
  padding: 2px; /* Adjust padding for spacing */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  transform: translateX(0%);
  transition: transform 1.5s ease-in-out;
}

.new-menu-battery-containerss.hide {
  visibility: hidden;
}
.new-menu-battery-containerss.stay-still {
  transform: translateX(-100%); /* Move into view */
}

.back-button {
  font-size: calc(1.25vw + 1.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* No padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

.back-buttons {
  font-size: calc(1.25vw + 1.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* No padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

.songone-back-button {
  font-size: calc(1.25vw + 1.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* No padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

.girl-menu-battery-container {
  display: flex;
  visibility: hidden;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Full width to align items */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100%
  ); /* Darker gray at the bottom */
  padding: 2px; /* Adjust padding for spacing */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
}

.girl-menu-battery-container.hide {
  visibility: hidden;
}

.girl-back-button {
  font-size: calc(1.25vw + 1.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* No padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

/* Menu Text */
.menu-text, .menu-text a {
  color: black; /* Text color */
  text-decoration: none;
  font-size: calc(2.25vw + 2.25vh);
  font-family: "Helvetica", sans-serif !important; /* Replace with the font used in menu options */
  text-align: center; /* Align text to the left */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  margin-right: 10px; /* Space between text and battery logo */
}

.menu-text {
  padding-left: 20px;
}

/* New Menu Text */
.new-menu-text {
  color: black; /* Text color */
  font-size: calc(2.25vw + 2.25vh);
  padding-left: 0px;
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  text-align: center; /* Align text to the left */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  margin-right: 10px; /* Space between text and battery logo */
}

/* Sumbmissions Menu Text */
.sub-menu-text {
  color: black; /* Text color */
  font-size: calc(2.25vw + 2.25vh);
  padding-left: 0px;
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  text-align: center; /* Align text to the left */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  margin-right: 10px; /* Space between text and battery logo */
}

/* Sumbmissions Menu Text */
.aboutus-menu-text {
  color: black; /* Text color */
  font-size: calc(2.25vw + 2.25vh);
  padding-left: 0px;
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  text-align: center; /* Align text to the left */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  margin-right: 10px; /* Space between text and battery logo */
}

/* Sumbmissions Menu Text */
.contactus-menu-text {
  color: black; /* Text color */
  font-size: calc(2.25vw + 2.25vh);
  padding-left: 0px;
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  text-align: center; /* Align text to the left */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  margin-right: 10px; /* Space between text and battery logo */
}

.femalemodels-menu-text {
  color: black; /* Text color */
  font-size: calc(2.25vw + 2.25vh);
  padding-left: 0px;
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  text-align: center; /* Align text to the left */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  margin-right: 10px; /* Space between text and battery logo */
}

.malemodels-menu-text {
  color: black; /* Text color */
  font-size: calc(2.25vw + 2.25vh);
  padding-left: 0px;
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  text-align: center; /* Align text to the left */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
  margin-right: 10px; /* Space between text and battery logo */
}

/* Battery Design */
.battery {
  width: 6.5vw; /* Smaller width relative to viewport width */
  height: 3vw; /* Smaller height relative to viewport width */
  background: linear-gradient(
    to top,
    #8bc34a 0%,
    #b0e57c 100%
  ); /* Green gradient from bottom to top */
  border-radius: 4px; /* Slightly rounded corners */
  position: relative;
  right: 1vw;
  border: 2px solid #a0a0a0; /* Light gray border */
  box-sizing: border-box; /* Include border in element's total width and height */
}

.battery::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.4vw; /* Position the terminal on the right side */
  width: 0.4vw; /* Smaller width relative to viewport width */
  height: 1vw; /* Shorter height relative to the battery height */
  background: #a0a0a0; /* Match the border color */
  border-radius: 2px;
  transform: translateY(-50%);
}

/* For Submissions Page */
.submissions-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}

.submissions-container .background-image {
  position: absolute; /* Position the image absolutely to fill the container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the container without stretching */
  object-position: top; /* Ensure the top of the image is always visible */
  z-index: 1; /* Place the image behind the text and button */
}

.submissions-container h1 {
  position: relative; /* Ensure the heading is above the background image */
  z-index: 2; /* Place the heading above the image */
  color: white;
  font-size: 3vw;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  text-align: center; /* Center the text horizontally */
}

.submissions-container button {
  position: relative; /* Ensure the button is above the background image */
  z-index: 2; /* Place the button above the image */
  padding: 10px 20px;
  font-size: 2.25vw;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submissions-container button:hover {
  background-color: #0056b3;
}

/* For Board Page */
.board-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}

.board-container .background-image {
  position: absolute; /* Position the image absolutely to fill the container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the container without stretching */
  object-position: top; /* Ensure the top of the image is always visible */
  z-index: 1; /* Place the image behind the text and button */
}

.board-container h1 {
  position: relative; /* Ensure the heading is above the background image */
  z-index: 2; /* Place the heading above the image */
  color: white;
  font-size: 3vw;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  text-align: center; /* Center the text horizontally */
}

.board-container button {
  position: relative; /* Ensure the button is above the background image */
  z-index: 2; /* Place the button above the image */
  padding: 10px 20px;
  font-size: 2.25vw;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.board-container button:hover {
  background-color: #0056b3;
}

/* For Contact Us Page */
.contact-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vw 2vw;
  box-sizing: border-box;
  text-align: center;
  min-height: 100vh; /* Ensure full height on small screens */
  min-width: 50vw;
  text-transform: uppercase; /* Convert all text to uppercase */
}

.contact-content {
  padding: 3vw;
  padding-top: 5vh;
  box-sizing: border-box;
  min-height: auto; /* Allow it to adjust to its content */
  justify-content: center; /* Center vertically */
  width: 100%;
  overflow-y: auto; /* Enable vertical scrolling if needed */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  margin-top: 5vh; /* Add margin equal to or greater than .sub-menu-battery-container height */
  text-align: center; /* Center text within the container */
}

.contact-photo img {
  width: 40%; /* Make the main image full width (can adjust) */
  max-width: 60%; /* Limit the maximum width of the image */
  height: auto;
  margin-bottom: 20px;
}

.contact-content p {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 20px;
  font-size: calc(0.65rem + 0.65vw); /* Base size + responsive scaling */
}

.contact-email p {
  font-size: 20px;
  font-size: calc(0.75rem + 0.75vw); /* Base size + responsive scaling */
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* For Submissions Models Page */
.submissions-container-model {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  padding: 5vw 2vw;
}

.submissions-container-model .background-image {
  position: absolute; /* Position the image absolutely to fill the container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the container without stretching */
  object-position: top; /* Ensure the top of the image is always visible */
  z-index: 1; /* Place the image behind the text and button */
}

.submissions-container-model h1 {
  position: relative; /* Ensure the heading is above the background image */
  z-index: 2; /* Place the heading above the image */
  color: white;
  font-size: 3vw;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  text-align: center; /* Center the text horizontally */
}

.submissions-container-model button {
  position: relative; /* Ensure the button is above the background image */
  z-index: 2; /* Place the button above the image */
  padding: 10px 20px;
  font-size: 2.25vw;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submissions-container-model button:hover {
  background-color: #0056b3;
}

/* For Submissions Male Models Page */
.submissions-container-male-model {
  padding: 5vw 2vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}

.submissions-container-male-model .background-image {
  position: absolute; /* Position the image absolutely to fill the container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the container without stretching */
  object-position: top; /* Ensure the top of the image is always visible */
  z-index: 1; /* Place the image behind the text and button */
}

.submissions-container-male-model h1 {
  position: relative; /* Ensure the heading is above the background image */
  z-index: 2; /* Place the heading above the image */
  color: white;
  font-size: 3vw;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  text-align: center; /* Center the text horizontally */
}

.submissions-container-male-model button {
  position: relative; /* Ensure the button is above the background image */
  z-index: 2; /* Place the button above the image */
  padding: 10px 20px;
  font-size: 2.25vw;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submissions-container-male-model button:hover {
  background-color: #0056b3;
}

/* Position the logo in the center of the slideshow */
.logo-overlay {
  position: absolute;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  z-index: 2; /* Ensure it's on top of the slideshow */
  pointer-events: none;
}

.logo-overlay img {
  width: 40vw; /* Adjust the logo size based on your requirements */
  height: auto;
  filter: invert(1);
  pointer-events: none;
}

/* Board Side Bar Functions */
.menu-sidebar {
  width: 100%;
  position: relative;
  transition: transform 1s ease-in-out;
  transform: translateX(0); /* Sidebar starts visible */
}

.menu-sidebar ul {
  list-style: none;
  font-size: calc(1.75vw + 1.75vh);
  padding: 0;
  margin: 0;
}

.menu-sidebar ul li {
  position: relative;
  padding: 2px 20px;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: space-between; /* Space between text and arrow */
  box-sizing: border-box;
  cursor: pointer;
}

.menu-sidebar ul li.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}
.menu-sidebar ul li.enabled {
  pointer-events: auto; /* Allow clicking */
  cursor: pointer; /* Change cursor to indicate it's clickable */
}

.menu-sidebar ul li.hovered {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); /* Change to whatever hover effect you want */
  color: #ffffff; /* Example of text color change */
}
.menu-sidebar ul li.hovered::after {
  visibility: visible;
  border-color: white; /* Keep the arrow white */
}

.menu-sidebar ul li:hover {
  background: linear-gradient(to bottom, #66aaff 0%, #007aff 100%);
  color: white;
}

/* Reintroduce the arrow styling */
.menu-sidebar ul li::after {
  content: "";
  visibility: hidden;
  display: inline-block;
  width: 0.3em; /* Adjust size as needed */
  height: 0.3em; /* Adjust size as needed */
  border-right: 0.125em solid transparent;
  border-top: 0.125em solid transparent;
  border-color: rgb(255, 255, 255); /* Default arrow color */
  margin-left: 0em;
  margin-right: 0em; /* Adjust spacing from text */
  transform: rotate(45deg); /* Rotate to form an arrow */
  transition: border-color 0.3s ease; /* Smooth color transition */
}

.menu-sidebar ul li:hover::after {
  border-color: white;
  visibility: visible;
}

.menu-sidebar ul li:hover::before {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); /* Gradient background on hover */
}

.menu-sidebar.hidden {
  transform: translateX(-100%); /* Moves the sidebar out of view */
}

/* Board Side Bar Functions */
.board-sidebar {
  visibility: hidden;
  width: 100%;
  position: relative;
  transition: transform 1s ease-in-out;
  transform: translateX(0%);
}

/* When move-right class is added */
.board-sidebar.move-rights {
  visibility: visible; /* Make it visible when moving */
  transform: translateX(100%); /* Move to the right */
}

.board-sidebar ul {
  list-style: none;
  font-size: calc(1.75vw + 1.75vh);
  padding: 0;
  margin: 0;
}

.board-sidebar.show {
  visibility: visible;
  transform: translateX(0); /* Slide into view */
}
.board-sidebar ul li.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}
.board-sidebar ul li.enabled {
  pointer-events: auto; /* Allow clicking */
  cursor: pointer; /* Change cursor to indicate it's clickable */
}

.board-sidebar ul li {
  position: relative;
  padding: 2px 20px;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: space-between; /* Space between text and arrow */
  box-sizing: border-box;
  cursor: pointer;
}

.board-sidebar ul li.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.board-sidebar ul li.hovered {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); /* Change to whatever hover effect you want */
  color: #ffffff; /* Example of text color change */
}
.board-sidebar ul li.hovered::after {
  visibility: visible;
  border-color: white; /* Keep the arrow white */
}

.board-sidebar ul li:hover {
  background: linear-gradient(to bottom, #66aaff 0%, #007aff 100%);
  color: white;
}

/* Reintroduce the arrow styling */
.board-sidebar ul li::after {
  content: "";
  visibility: hidden;
  display: inline-block;
  width: 0.3em; /* Adjust size as needed */
  height: 0.3em; /* Adjust size as needed */
  border-right: 0.125em solid transparent;
  border-top: 0.125em solid transparent;
  border-color: rgb(255, 255, 255); /* Default arrow color */
  margin-left: 0em;
  margin-right: 0em; /* Adjust spacing from text */
  transform: rotate(45deg); /* Rotate to form an arrow */
  transition: border-color 0.3s ease; /* Smooth color transition */
}

.board-sidebar ul li:hover::after {
  border-color: white;
  visibility: visible;
}

.board-sidebar ul li:hover::before {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); /* Gradient background on hover */
}

.board-sidebar.hidden {
  transform: translateX(100%); /* Moves the sidebar out of view */
}
.board-sidebar.next {
  transform: translateX(-100%);
}

/* Board Side Bar Functions */
.board-sidebars {
  visibility: hidden;
  width: 100%;
  position: relative;
  transition: transform 1s ease-in-out;
  transform: translateX(0%);
  display: flex;
  gap: 0;
}

/* When move-right class is added */
.board-sidebars.move-rights {
  visibility: visible; /* Make it visible when moving */
  transform: translateX(100%); /* Move to the right */
}

.board-sidebars ul {
  list-style: none;
  font-size: calc(1.75vw + 1.75vh);
  padding: 0;
  margin: 0;
}

.board-sidebars.show {
  visibility: visible;
  transform: translateX(0); /* Slide into view */
}
.board-sidebars ul li.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}
.board-sidebars ul li.enabled {
  pointer-events: auto; /* Allow clicking */
  cursor: pointer; /* Change cursor to indicate it's clickable */
}

.board-sidebars ul li {
  position: relative;
  padding: 2px 20px;
  display: flex;
  align-items: center; /* Center vertically */
  box-sizing: border-box;
  cursor: pointer;
  margin-bottom: 0px;
}

.board-sidebars ul li.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

/* .board-sidebars ul li.hovered {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); 
  color: #ffffff; 
} */

.board-sidebars ul li:hover {
  background: linear-gradient(to bottom, #66aaff 0%, #007aff 100%);
  color: white;
}

/* Reintroduce the arrow styling */

.board-sidebars ul li:hover::after {
  border-color: white;
  visibility: visible;
}

.board-sidebars ul li:hover::before {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); /* Gradient background on hover */
}

.board-sidebars.hidden {
  transform: translateX(100%); /* Moves the sidebar out of view */
}
.board-sidebars.next {
  transform: translateX(-100%);
}

/* Board Side Bar Functions */
.songone-sidebar {
  visibility: hidden;
  width: 100%;
  position: relative;
  transition: transform 1s ease-in-out;
  transform: translateX(0%);
}

/* When move-right class is added */
.songone-sidebar.move-rights {
  visibility: visible; /* Make it visible when moving */
  transform: translateX(100%); /* Move to the right */
}

.songone-sidebar ul {
  list-style: none;
  font-size: calc(1.75vw + 1.75vh);
  padding: 0;
  margin: 0;
}

.songone-sidebar.show {
  visibility: visible;
  transform: translateX(0); /* Slide into view */
}
.songone-sidebar ul li.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}
.songone-sidebar ul li.enabled {
  pointer-events: auto; /* Allow clicking */
  cursor: pointer; /* Change cursor to indicate it's clickable */
}

.songone-sidebar ul li {
  position: relative;
  padding: 2px 20px;
  display: flex;
  align-items: center; /* Center vertically */
  box-sizing: border-box;
  cursor: pointer;
}

.songone-sidebar ul li.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.songone-sidebar ul li.hovered {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); /* Change to whatever hover effect you want */
  color: #ffffff; /* Example of text color change */
}

.songone-sidebar ul li:hover {
  background: linear-gradient(to bottom, #66aaff 0%, #007aff 100%);
  color: white;
}

/* Reintroduce the arrow styling */

.songone-sidebar ul li:hover::after {
  border-color: white;
  visibility: visible;
}

.songone-sidebar ul li:hover::before {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); /* Gradient background on hover */
}

.songone-sidebar.hidden {
  transform: translateX(100%); /* Moves the sidebar out of view */
}
.songone-sidebar.next {
  transform: translateX(-100%);
}

/* Girl Side Bar Functions */
.girl-sidebar {
  width: 100%;
  position: relative;
  visibility: hidden;
  transition: transform 1s ease-in-out;
  transform: translateX(0%);
}

.girl-sidebar ul {
  list-style: none;
  font-size: calc(2vw + 2vh);
  padding: 0;
  margin: 0;
}

.girl-sidebar.show {
  transform: translateX(0); /* Slide into view */
  visibility: visible;
}
.girl-sidebar.left {
  left: 0%; /* Slide into view */
}

.girl-sidebar ul li.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}
.girl-sidebar ul li.enabled {
  pointer-events: auto; /* Allow clicking */
  cursor: pointer; /* Change cursor to indicate it's clickable */
}

.girl-sidebar ul li {
  position: relative;
  padding: 2px 20px;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: space-between; /* Space between text and arrow */
  box-sizing: border-box;
  cursor: pointer;
}

.girl-sidebar ul li.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.girl-sidebar ul li.hovered {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); /* Change to whatever hover effect you want */
  color: #ffffff; /* Example of text color change */
}
.girl-sidebar ul li.hovered::after {
  visibility: visible;
  border-color: white; /* Keep the arrow white */
}

.girl-sidebar ul li:hover {
  background: linear-gradient(to bottom, #66aaff 0%, #007aff 100%);
  color: white;
}

/* Reintroduce the arrow styling */
.girl-sidebar ul li::after {
  content: "";
  visibility: hidden;
  display: inline-block;
  width: 0.3em; /* Adjust size as needed */
  height: 0.3em; /* Adjust size as needed */
  border-right: 0.125em solid transparent;
  border-top: 0.125em solid transparent;
  border-color: rgb(255, 255, 255); /* Default arrow color */
  margin-left: 0em;
  margin-right: 0em; /* Adjust spacing from text */
  transform: rotate(45deg); /* Rotate to form an arrow */
  transition: border-color 0.3s ease; /* Smooth color transition */
}

.girl-sidebar ul li:hover::after {
  border-color: white;
  visibility: visible;
}

.girl-sidebar ul li:hover::before {
  background: linear-gradient(
    to bottom,
    #66aaff 0%,
    #007aff 100%
  ); /* Gradient background on hover */
}

.girl-sidebar.hidden {
  transform: translateX(100%); /* Moves the sidebar out of view */
}

/* Right Section */
.right-section {
  transition: transform 1s ease-in-out;
  width: 0%; /* Takes up the right half of the screen */
  height: 100%;
  overflow: auto; /* Scroll if content overflows */
  background-color: #fff; /* Example background color */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Move right-section out to the right */
.right-section.slide-right {
  transform: translateX(
    -200%
  ); /* Moves it completely out of view to the right */
}

.centered-content {
  padding: 3vw;
  padding-top: 5vh;
  box-sizing: border-box;
  min-height: auto; /* Allow it to adjust to its content */
  width: 100%;
  overflow-y: auto; /* Enable vertical scrolling if needed */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  margin-top: 5vh; /* Add margin equal to or greater than .sub-menu-battery-container height */
  text-align: center; /* Center text within the container */
}

.main-image {
  width: 40%; /* Make the main image full width (can adjust) */
  max-width: 60%; /* Limit the maximum width of the image */
  display: block; /* Ensure the images are treated as block elements */
  margin: 0 auto 20px auto; /* Center the images with spacing */
}

.second-image {
  width: 20%; /* Make the main image full width (can adjust) */
  max-width: 30%; /* Limit the maximum width of the image */
  display: block; /* Ensure the images are treated as block elements */
  margin: 0 auto 20px auto; /* Center the images with spacing */
}

.small-image {
  width: 5vw; /* Adjust the size of the small image */
  display: block;
  margin: 20px auto 0 auto; /* Center the small image */
}

.centered-content p {
  font-size: calc(0.65rem + 0.65vw); /* Base size + responsive scaling */
  line-height: 1.6; /* Improve readability */
  color: #333;
  padding-left: 10px;
  padding-right: 10px;
}

.submission-section {
  position: absolute;
  top: 0;
  transform: translateX(100%); /* Start off-screen to the right */
  width: 100vw;
  height: 100vh;
  background: white; /* Adjust as needed */
  transition: transform 1s ease-in-out; /* Smooth transition for sliding effect */
  z-index: 10; /* Ensure it's above other sections */
  display: flex;
  flex-direction: column; /* Stack the elements vertically */
  justify-content: flex-start;
  align-items: flex-start;
  /* Add additional styling as needed */
}

.submission-section.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.submission-section.active {
  transform: translateX(0%); /* Slide into view */
}

.sub-menu-battery-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw; /* Full width */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100% /* Darker gray at the bottom */
  );
  padding: 2px;
  box-sizing: border-box;
  position: fixed; /* Keep it fixed at the top */
  top: 0; /* Stick to the top of the viewport */
  z-index: 100; /* Ensure it stays above other elements */
  transition: transform 1s ease-in-out; /* Smooth transition for sliding effect */
  transform: translateX(100%); /* Slide into view */
}

.sub-menu-battery-container.show {
  transform: translateX(0%); /* Slide into view */
}

.sub-back-button {
  font-size: calc(1.25vw + 1.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* No padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

.sub-back-button.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.aboutus-section {
  position: absolute;
  top: 0;
  transform: translateX(100%); /* Start off-screen to the right */
  width: 100vw;
  height: 100vh;
  background: white; /* Adjust as needed */
  transition: transform 1s ease-in-out; /* Smooth transition for sliding effect */
  z-index: 10; /* Ensure it's above other sections */
  display: flex;
  flex-direction: column; /* Stack the elements vertically */
  justify-content: flex-start;
  align-items: flex-start;
  /* Add additional styling as needed */
}

.aboutus-section.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.aboutus-section.active {
  transform: translateX(0%); /* Slide into view */
}

.aboutus-menu-battery-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw; /* Full width */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100% /* Darker gray at the bottom */
  );
  padding: 2px;
  box-sizing: border-box;
  position: fixed; /* Keep it fixed at the top */
  top: 0; /* Stick to the top of the viewport */
  z-index: 100; /* Ensure it stays above other elements */
  transition: transform 1s ease-in-out; /* Smooth transition for sliding effect */
  transform: translateX(100%); /* Slide into view */
}

.aboutus-menu-battery-container.show {
  transform: translateX(0%); /* Slide into view */
}

.aboutus-back-button {
  font-size: calc(1.25vw + 1.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* Padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

.aboutus-back-button.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.contactus-section {
  position: absolute;
  top: 0;
  transform: translateX(100%); /* Start off-screen to the right */
  width: 100vw;
  height: 100vh;
  background: white; /* Adjust as needed */
  transition: transform 1s ease-in-out; /* Smooth transition for sliding effect */
  z-index: 10; /* Ensure it's above other sections */
  display: flex;
  flex-direction: column; /* Stack the elements vertically */
  justify-content: flex-start;
  align-items: flex-start;
  /* Add additional styling as needed */
}

.contactus-section.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.contactus-section.active {
  transform: translateX(0%); /* Slide into view */
}

.contactus-menu-battery-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw; /* Full width */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100% /* Darker gray at the bottom */
  );
  padding: 2px;
  box-sizing: border-box;
  position: fixed; /* Keep it fixed at the top */
  top: 0; /* Stick to the top of the viewport */
  z-index: 100; /* Ensure it stays above other elements */
  transition: transform 1s ease-in-out; /* Smooth transition for sliding effect */
  transform: translateX(100%); /* Slide into view */
}

.contactus-menu-battery-container.show {
  transform: translateX(0%); /* Slide into view */
}

.contactus-back-button {
  font-size: calc(1.25vw + 1.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* Padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

.contactus-back-button.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.femalemodels-section {
  position: absolute;
  top: 15px;
  transform: translateX(100%); 
  width: 100vw;
  height: 100vh;
  background: white; 
  transition: transform 1s ease-in-out; 
  z-index: 10;
  overflow: auto;
}

.femalemodels-section.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.femalemodels-section.active {
  transform: translateX(0%); /* Slide into view */
}

.femalemodels-menu-battery-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw; /* Full width */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100% /* Darker gray at the bottom */
  );
  padding: 2px;
  box-sizing: border-box;
  position: fixed; /* Keep it fixed at the top */
  top: 0; /* Stick to the top of the viewport */
  z-index: 100; /* Ensure it stays above other elements */
  transition: transform 1s ease-in-out; /* Smooth transition for sliding effect */
  transform: translateX(100%); /* Slide into view */
}

.femalemodels-menu-battery-container.show {
  transform: translateX(0%); /* Slide into view */
}

.femalemodels-back-button {
  font-size: calc(2.25vw + 2.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* Padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

/* .femalemodels-back-button.disabled {
  pointer-events: none;
  cursor: not-allowed;
} */

.malemodels-section {
  position: absolute;
  top: 15px;
  transform: translateX(100%);
  width: 100vw;
  height: 100vh;
  background: white;
  transition: transform 1s ease-in-out;
  z-index: 10;
  overflow: auto;
}

.malemodels-section.disabled {
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Change cursor to indicate disabled state */
}

.malemodels-section.active {
  transform: translateX(0%); /* Slide into view */
}

.malemodels-menu-battery-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw; /* Full width */
  background: linear-gradient(
    to bottom,
    #f6f6f6 0%,
    /* Light gray at the top */ #e0e0e0 50%,
    /* Light gray in the middle */ #b0b0b0 100% /* Darker gray at the bottom */
  );
  padding: 2px;
  box-sizing: border-box;
  position: fixed; /* Keep it fixed at the top */
  top: 0; /* Stick to the top of the viewport */
  z-index: 100; /* Ensure it stays above other elements */
  transition: transform 1s ease-in-out; /* Smooth transition for sliding effect */
  transform: translateX(100%); /* Slide into view */
}

.malemodels-menu-battery-container.show {
  transform: translateX(0%); /* Slide into view */
}

.malemodels-back-button {
  font-size: calc(2.25vw + 2.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* Padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

.malemodels-back-buttons {
  font-size: calc(2.25vw + 2.25vh); /* Responsive font size */
  color: #000; /* Text color */
  background-color: transparent; /* No background */
  border: none; /* Remove border */
  padding-left: 20px; /* Padding */
  cursor: pointer; /* Change cursor to pointer */
  text-decoration: none; /* Remove underline */
}

/* .malemodels-back-button.disabled {
  pointer-events: none;
  cursor: not-allowed; 
} */

.height-form-container {
  padding: 3vw;
  padding-top: 5vh;
  box-sizing: border-box;
  min-height: auto; /* Allow it to adjust to its content */
  width: 100%;
  overflow-y: auto; /* Enable vertical scrolling if needed */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  margin-top: 5vh; /* Add margin equal to or greater than .sub-menu-battery-container height */
}
#submitForm {
  width: 100%; /* Full width of the parent container */
  margin-bottom: 10vh; /* Space at the bottom of the form */
  padding-bottom: 20px; /* Optional padding */
}

/* Container for city and state inputs, aligned horizontally */
.city-state-container {
  display: flex; /* Align inputs horizontally */
  gap: 20px; /* Space between the city and state inputs */
  max-width: 500px;
}

/* Ensure city and state inputs take up equal space */
.city-state-group {
  flex: 1; /* Make both inputs take equal space */
  display: flex;
  flex-direction: column; /* Stack input and help text vertically */
  align-items: flex-start; /* Align input to the start */
}
/* Ensure the container width is consistent */

/* Optional: adjust margins and padding */
.city-state-group .address-input {
  margin-bottom: 5px; /* Space between input and help text */
}

.form-help-text {
  font-size: 0.875rem; /* Smaller font size for help text */
  color: #666; /* Gray color for help text */
  margin-left: 0; /* Ensure no margin affects alignment */
  padding-bottom: 1rem;
}

.form-group {
  display: flex;
  align-items: center; /* Center items vertically */
  margin-bottom: 15px; /* Spacing between form groups */
  gap: 15px; /* Space between label and input/select */
}

.address-group {
  display: flex;
  flex-direction: column; /* Stack label and input container vertically */
  margin-bottom: 10px; /* Space between form groups */
}

.address-label {
  font-size: 1rem; /* Adjust font size */
  margin-bottom: 5px; /* Space between label and input container */
}

.address-input-container {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.address-input {
  /* flex: 1; */ /* Make the input field take up remaining space */
  font-size: 1rem; /* Adjust font size */
  padding: 8px; /* Padding inside the input */
  height: 2rem;
  box-sizing: border-box; /* Include padding in width */
  /* max-width: 500px; */ /* Optional: Set a max-width to control the input width */
}

.form-help-text {
  font-size: 0.875rem; /* Smaller font size for help text */
  color: #666; /* Gray color for help text */
  margin-top: 5px; /* Space above help text */
}

.form-photos-text {
  font-size: 0.875rem; /* Smaller font size for help text */
  color: #666; /* Gray color for help text */
}

.form-label {
  font-size: 0.82rem; /* Consistent text size for labels */
   /* Fixed width for labels */
  text-align: left; /* Align text to the right */
  width: 90px;
}

.form-input {
  height: 2rem;
  width: 100%; /* Full width of the address-container */
   /* Optional: Set a max-width to control the input width */
  font-size: 0.82rem; /* Adjust font size */
  padding: 8px; /* Padding inside the input */
  box-sizing: border-box; /* Include padding in width */
  margin-bottom: 5px; /* Space between input and help text */
  max-width: 220px;
}

.form-select {
  flex: 1; /* Make input and select fields take the remaining space */
  font-size: 0.82rem; /* Consistent text size */
  padding: 8px; /* Padding inside the fields */
  margin-bottom: 0px; /* Space between input and help text */
  height: 2.1rem; /* Increased height for better visibility */
  line-height: 2.1rem; /* Match line-height to height for vertical alignment */
  max-width: 220px; /* Limit the maximum width of inputs/selects */
  box-sizing: border-box; /* Include padding in the element’s total width and height */
}

.form-select {
  border: 1px solid #858484; /* Add border to make select box visible */
  border-radius: 4px; /* Rounded corners for consistency */
}

#submitForm button {
  margin-top: 20px; /* Space above the button */
  padding: 10px 20px; /* Padding inside the button */
  font-size: 1.5rem;
  background-color: #007bff; /* Example background color */
  color: #ffffff; /* Example text color */
  border: none; /* Remove default border */
  border-radius: 4px; /* Rounded corners */
}

.section-title {
  font-size: calc(1rem + 1vw);
  margin: 20px 0;
  position: relative;
  padding-bottom: 10px;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #000; /* Black underline */
  z-index: -1; /* Make sure it appears behind the text */
}

.modal {
  visibility: hidden; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Sit on top of everything */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  display: flex; /* Use flexbox to center the modal content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
}

.modal.show {
  visibility: visible; /* Show the modal when necessary */
}

.confirm-modal {
  visibility: hidden; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Sit on top of everything */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  display: flex; /* Use flexbox to center the modal content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
}

.upload-info {
  font-size: 0.875rem; /* Adjust the value as needed */
  line-height: 1.2; /* Optional: Adjust line height for better readability */
  color: #333; /* Optional: You can customize the text color */
}

.confirm-modal.show {
  visibility: visible; /* Show the modal when necessary */
}

.confirm-modal-content {
  max-height: 90%; /* Set maximum height for content */
  width: 80%; /* Set width of modal content */
  background: white; /* Background for modal content */
  border-radius: 8px; /* Rounded corners */
  padding: 20px; /* Padding for content */
  overflow-y: auto; /* Allow vertical scrolling for content */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for aesthetics */
  text-align: center; /* Center text inside the modal */
}

.modal-con {
  visibility: hidden; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Sit on top of everything */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  display: flex; /* Use flexbox to center the modal content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
}

.modal-con.show {
  visibility: visible; /* Show the modal when necessary */
}

.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1.5s linear infinite;
  margin: 20px auto; /* Center the loader */
}

.modal-content {
  background-color: #fff;
  padding: 20px 40px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #888;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  margin-left: 20px;
  margin-right: 20px;
}

.confirm-button {
  padding: 10px 20px;
  margin: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.confirm-button:hover {
  background-color: #0056b3;
}

/* Loader spin animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: none; /* Hide all pages by default */
}

/* Styles for slideshow container */
.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Hide overflow to create slide effect */
}

/* Styles for each slide */
.slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top center;
  transition: transform 1s ease-in-out; /* Adjust timing for smooth transition */
}

/* Class for the current slide */
.slideshow-slide.active {
  transform: translateX(0);
  pointer-events: none;
}

/* Class for the slide leaving the screen */
.slideshow-slide.leave {
  transform: translateX(-100%); /* Slide out to the left */
  pointer-events: none;
}

/* Class for the slide entering the screen */
.slideshow-slide.enter {
  transform: translateX(100%); /* Slide in from the right */
  pointer-events: none;
}

/* Disable pointer events during transitions */
.slideshow-slide.transitioning {
  pointer-events: none;
}

/* Class to hide the slide */
.slideshow-slide.hidden {
  display: none;
}

.page.active {
  display: block;
}

.show-page {
  display: block; /* Show the specific page */
  opacity: 1; /* Ensure page is visible */
}

.show-homepage {
  opacity: 1;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* Ensure it's above all other content */
  pointer-events: auto; /* Ensure it blocks interactions */
}

.required-asterisk,
.required-cup-asterisk {
  color: red; /* Red color for the asterisk */
  font-weight: bold; /* Make the asterisk bold */
  margin-left: 5px; /* Space between the label and the asterisk */
}

.required-cup-asterisk.visible {
  display: inline; /* Show asterisk when needed */
}

.form-input:invalid + .required-asterisk,
.form-input:invalid + .required-cup-asterisk,
.address-input:invalid + .required-asterisk,
.form-select:invalid + .required-asterisk {
  display: inline; /* Show asterisk if input is invalid */
}

.form-input:valid + .required-asterisk,
.address-input:valid + .required-asterisk,
.form-select:valid + .required-asterisk {
  display: none; /* Hide asterisk if input is valid */
}

#cupSizeContainer {
  display: none; /* Hidden by default */
}

#cupSizeContainer.flex {
  display: flex; /* Use flex for proper layout */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between label and input */
}

#dressSizeContainer {
  display: none; /* Hidden by default */
}

#dressSizeContainer.flex {
  display: flex; /* Use flex for proper layout */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between label and input */
}

/* Hide the default file input */
.file-upload-wrapper {
  position: relative;
  display: inline-block;
}

.file-upload-wrapper input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.custom-file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px; /* Adjust width as needed */
  height: 150px; /* Adjust height as needed */
  font-size: 2rem; /* Size of the upload icon */
  color: #007bff; /* Icon color */
  background-color: #f8f9fa; /* Light gray background */
  border: 2px solid #007bff; /* Blue border */
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
  text-align: center; /* Center text */
  padding: 10px; /* Add padding for spacing */
  overflow: hidden; /* Hide overflow to keep layout tidy */
}

.custom-file-upload:hover {
  background-color: #e2e6ea; /* Slightly darker gray on hover */
  border-color: #0056b3; /* Darker blue on hover */
}

.custom-file-upload:active {
  background-color: #cfd3d9; /* Even darker gray on active */
  border-color: #004080; /* Darker blue on active */
}

.upload-icon {
  display: block;
  margin-bottom: 10px; /* Space between icon and file names */
}

.file-names {
  font-size: 1rem; /* Adjust font size for file names */
  color: #333; /* Darker text color for readability */
  word-wrap: break-word; /* Allow long file names to wrap */
}

.intro-section {
  display: flex;
  flex-direction: column;
  align-items: center; /* Horizontally centers the content */
  justify-content: center; /* Vertically centers the content if necessary */
  text-align: center; /* Center-aligns the text itself */
  padding: 0.7rem 0; /* Adds some space around the text */
}

/* Style for the logo image */
.logo-image {
  max-width: 100%; /* 150px */
  height: 100px;
}

.intro-container {
  max-width: 800px; /* Adjust the width to fit your needs */
  margin: 0 auto; /* Centers the container */
  text-align: center; /* Centers text */
}

/* Style for the intro text */
.intro-text {
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  font-size: calc(0.60rem + 0.60vw); /* Base size + responsive scaling */
  margin-top: 0.625rem; /* 10px top margin */
}

/* Style for the height requirements text */
.men-height-requirements-text {
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  font-size: calc(0.60rem + 0.60vw); /* Base size + responsive scaling */
  margin-top: 0.625rem; /* 10px top margin */
  margin-bottom: 2vh;
}

.women-height-requirements-text {
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  font-size: calc(0.60rem + 0.60vw); /* Base size + responsive scaling */
  margin-top: 0.625rem; /* 10px top margin */
}

.men-height-requirements-texts {
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  font-size: calc(0.60rem + 0.60vw); /* Base size + responsive scaling */
  margin-top: 2vh;
}

.women-height-requirements-texts {
  font-family: "Helvetica", sans-serif; /* Replace with the font used in menu options */
  font-size: calc(0.60rem + 0.60vw); /* Base size + responsive scaling */
}

.intro-text,
.women-height-requirements-text,
.men-height-requirements-text {
  text-transform: uppercase;
}


.cover-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out;
}

.cover-flow {
width: 100%;
}

.cover {
  width: 300px;
  height: 500px;
  margin: 0 10px;
  perspective: 1000px; /* Enables the 3D effect */
  cursor: pointer;
  position: relative;
}

.cover-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* Allows both sides of the cover to be visible */
}

.cover-front,
.cover-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hide the back face */
  border-radius: 10px;
}

.cover-front {
  background-size: cover;
  background-position: top center;
}

.cover-back {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align items to the top */
  align-items: center; /* Center contents horizontally */
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transform: rotateY(180deg); /* Initially hide the back */
  font-size: 20px; /* Adjust this value to make the text smaller */
}

.cover-back h3 {
  text-align: center; /* Center the h3 text */
  margin-bottom: 20px; /* Add space below the h3 */
}

.cover-back p {
  text-align: left; /* Align the p text to the left */
  width: 100%; /* Make sure the paragraph spans the full width */
  margin-left: 20px; /* Adds margin to the left side */
}

.instagram-container {
  display: flex;
  justify-content: center; /* Center the Instagram logo horizontally */
  margin-top: 20px; /* Space between the text and the Instagram logo */
}

.instagram-container img {
  width: 50px; /* Adjust the size of the Instagram logo */
  height: 50px;
  object-fit: contain;
  margin-top: 10px; /* Adjust the space between the logo and text */
}

.cover.flipped .cover-inner {
  transform: rotateY(
    180deg
  ); /* Trigger flip when the class 'flipped' is added */
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 2rem;
  padding: 10px;
  cursor: pointer;
  z-index: 100;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

.malecover-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out;
}

.malecover {
  width: 300px;
  height: 500px;
  margin: 0 10px;
  perspective: 1000px; /* Enables the 3D effect */
  cursor: pointer;
  position: relative;
}

.malecover-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* Allows both sides of the cover to be visible */
}

.malecover-front,
.malecover-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hide the back face */
  border-radius: 10px;
}

.malecover-front {
  background-size: cover;
  background-position: top center;
}

.malecover-back {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align items to the top */
  align-items: center; /* Center contents horizontally */
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transform: rotateY(180deg); /* Initially hide the back */
  font-size: 20px; /* Adjust this value to make the text smaller */
}

.malecover-back h3 {
  text-align: center; /* Center the h3 text */
  margin-bottom: 20px; /* Add space below the h3 */
}

.malecover-back p {
  text-align: left; /* Align the p text to the left */
  width: 100%; /* Make sure the paragraph spans the full width */
  margin-left: 20px; /* Adds margin to the left side */
}

.maleinstagram-container {
  display: flex;
  justify-content: center; /* Center the Instagram logo horizontally */
  margin-top: 20px; /* Space between the text and the Instagram logo */
}

.maleinstagram-container img {
  width: 50px; /* Adjust the size of the Instagram logo */
  height: 50px;
  object-fit: contain;
  margin-top: 10px; /* Adjust the space between the logo and text */
}

.malecover.flipped .malecover-inner {
  transform: rotateY(
    180deg
  ); /* Trigger flip when the class 'flipped' is added */
}

.malenav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 2rem;
  padding: 10px;
  cursor: pointer;
  z-index: 100;
}

.maleprev-button {
  left: 10px;
}

.malenext-button {
  right: 10px;
}

/* Music Player */
.music-player {
  width: 100%;
  margin-top: 20px;
  padding: 0 10px;
  box-sizing: border-box;
  transition: transform 1s ease-in-out;
}

/* .music-player.move-left {
  transform: translateX(-100%);
} */
.music-player.hidden {
  transform: translateX(-100%);
}

.song-info {
  width: 100%;
  white-space: nowrap; /* Prevent wrapping of text */
  overflow: hidden; /* Hide overflow text */
  text-align: center;
  margin-bottom: 18px;
}

.song-name {
  display: block;
  font-size: calc(1vw + 1vh);
  font-weight: bold;
  /* animation: scrollSongName 30s linear infinite; */
  animation-play-state: running;
}
.song-name-new {
  display: inline-block;
  font-size: calc(1.65vw + 1.65vh);
  font-weight: bold;
  animation: scrollSongName 30s linear infinite;
  animation-play-state: running;
}

@keyframes scrollSongName {
  0% {
    transform: translateX(100%); /* Start at the center */
  }
  100% {
    transform: translateX(-100%); /* Scroll to the left */
  }
}

/* Play bar container */
.play-bar-container {
  width: 100%;
  margin-bottom: 10px;
  position: relative;
}

progress {
  width: 86%;
    display: block;
    margin: 0 auto;
  height: 10px;
  border: 1px solid #cacaca;
  appearance: none;
  background-color: #e0e0e0;
  border-radius: 5px;
}

progress::-webkit-progress-bar {
  background-color: #e0e0e0;
  border-radius: 5px;
}

progress::-webkit-progress-value {
  background: linear-gradient(to bottom, #66aaff 0%, #007aff 100%);
  border-radius: 5px;
}

/* Music controls container */
.music-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 5vw;
}

/* Individual music control buttons */
.music-controls button {
  background-color: transparent;
  color: #333;
  border: none;
  padding: 0.2vw 0.2vw 0.2vw 0.2vw;
  font-size: 2vw;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  width: 4vw;
  height: 4vw;
  box-shadow: none;
}

.music-controls button:hover {
  background-color: #bbb;
}

.music-controls button:active {
  transform: scale(0.95);
}

.play-pause {
  font-size: 4vw;
  width: 8vw;
  height: 8vw;
  padding: 0.2vw 0.2vw 0.2vw 0.5vw !important;
}

.skip-left,
.skip-right {
  font-size: 0;
  width: 6vw;
  height: 6vw;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5vw;
}

.music-ul li img {
  height: 40px;
    width: 40px;
    object-fit: cover;
    object-position: top;
}

.music-ul li {
  margin-bottom: 10px;
}
.music-ul li span {
  padding-left: 10px;
  font-size: 20px;
}

.playeing {
  display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.playeing img {
  height: 350px;
  /* margin-right: 20px; */
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.playeing .son-title {
  font-size: calc(2.25vw + 2.25vh);
  font-weight: 600;
}

.playeing .son-artist {
  padding-top: 4px;
  font-size: calc(0.8vw + 2.25vh);
}

.songone-sidebar {
  padding: 40px;
}



.plays {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapperss {
  width: 100%;
}
.navi {
  /* background:rgba(250,250,250,0.7); */
  width: 100%;
  padding-bottom: 3px;
  padding-top: 20px;
  position: relative;
}

.defaultBar {
  width: 86%;
  position: relative;
  border: 1px solid #cacaca;
  height: 10px;
  margin-left: 40px;
  cursor: pointer;
}
.progressBar {
  position: absolute;
  height: 10px;
  background: linear-gradient(to bottom, #66aaff 0%, #007aff 100%);
  width: 0px;
}
.buttons {
  margin-top: 3px;
  margin-left: 3px;
  font-size: 14px;
  /* margin: auto; */
}
.playButton {
  /* background: pink; */
  border: none;
  font-size: calc(1.25vw + 2.25vh);
  /* height: 30px; */
  /* width: 30px; */
  /* margin: auto; */
  display: flex;
  justify-content: center;
  cursor: pointer;
  outline: none;
  /* margin-right:2px; */
  margin: 0 auto;
  align-items: center;
}

.playButton:active {
  position: relative;
  top: 2px;
  left: 2px;
}

.currentTime,
.fullDuration {
  font-size: 14px;
}

span.fullDuration {
  position: absolute;
  right: 0;
  top: 18px;
}

span.currentTime {
  position: absolute;
  top: 18px;
  left: 0;
}

.playlist {
  list-style: none;
  padding: 0;
}

.playlist li {
  cursor: pointer;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.playlist li:hover, .playlist li.active {
  background: #f0f0f0;
}

.song-image {
  height: calc(1.65vw + 1.65vh);
  display: inline-block;
  margin-bottom: 0;
}

.song-image img {
  height: calc(2.65vw + 2.65vh);
  /* line-height: 3; */
  margin-bottom: -1px;
}

.current-time {
  position: absolute;
  top: -3px;
  left: 10px;
  font-size: calc(0.6vw + 1vh);
}

.duration {
  position: absolute;
  top: -3px;
  right: 5px;
  font-size: calc(0.6vw + 1vh);
}

.music-player-ps {
  position: absolute;
  bottom: 5%;
  z-index: 9;
}

.personal-info .form-label{
width: 90px;
}

.models-females {
  padding: 40px;
  /* width: min-content; */
}

.playsing {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  /* justify-content: center; */
  flex-wrap: wrap;
  width: 100%;
  column-gap: 30px;
  row-gap: 50px;
  /* gap: 180px; */
}

.playsings {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  /* justify-content: center; */
  flex-wrap: wrap;
  width: 100%;
  column-gap: 50px;
  row-gap: 50px;
  /* gap: 180px; */
}

.playsingss {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  /* justify-content: center; */
  flex-wrap: wrap;
  width: 100%;
  column-gap: 35px;
  row-gap: 50px;
  /* gap: 180px; */
}

.playsing .cards img {
  height: 100%;
  /* margin-right: 20px; */
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.playsing .cards {
  width: 350px;
  height: 450px;
  position: relative;
  overflow: hidden;
  -webkit-transition: .5s ease-in;
  -moz-transition: .5s ease-in;
  -o-transition: .5s ease-in;
  transition: .5s ease-in;
}

.playsing .cardsss img {
  height: 100%;
  /* margin-right: 20px; */
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.playsing .cardsss {
  width: 350px;
  height: 450px;
  position: relative;
  overflow: hidden;
  -webkit-transition: .5s ease-in;
  -moz-transition: .5s ease-in;
  -o-transition: .5s ease-in;
  transition: .5s ease-in;
}

.models-details {
  width: 40%;
}

.playsing .models-details .name-medosl {
  font-size: calc(2.25vw + 2.25vh);
  font-weight: 600;
}

.playsing .models-details .meastusments {
  padding-top: 4px;
  font-size: calc(0.8vw + 2vh);
}

.navis {
  /* background:rgba(250,250,250,0.7); */
  width: 100%;
  padding-bottom: 3px;
  padding-top: 10px;
  position: relative;
}

.mdoels-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 5vw;
}

/* Individual music control buttons */
.mdoels-controls button {
  background-color: transparent;
  color: #333;
  border: none;
  padding: 0.2vw 0.2vw 0.2vw 0.2vw;
  font-size: 2vw;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  width: 4vw;
  height: 4vw;
  box-shadow: none;
}

.skip-left-models,
.skip-right-models {
  font-size: 0;
  width: 6vw;
  height: 6vw;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5vw;
}

.playButtons {
  border: none;
  font-size: calc(1.25vw + 2.25vh);
  display: flex;
  justify-content: center;
  cursor: pointer;
  outline: none;
  /* margin: 0 auto; */
  align-items: center;
}

/* .mdoels-controls button:hover {
  background-color: #bbb;
} */

.playss {
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bigger {
  font-size: 30px;
}

.meastusments {
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}

.meastusment {
  margin-top: 20px;
}

.playButtons img {
  width: 25px;
}

.skip-left-models img, .skip-right-models img {
  width: 25px;
}

.playsing .cards::before {
  width: 350px;
  height: 100%;
  content: none;
  position: absolute;
  top: 0;
  left: 0;
  background: #00000082;
  z-index: 1;
}

.playsing .cardsss::before {
  width: 350px;
  height: 100%;
  content: none;
  position: absolute;
  top: 0;
  left: 0;
  background: #00000082;
  z-index: 1;
}

/* Style the back side */
.flip-box-back {
  position: absolute;
  bottom: -5%;
  left: 9%;
  z-index: 9;
  color: white;
  opacity: 0;
  -webkit-transition: bottom 0.8s ease;
    -moz-transition: bottom 0.8s ease;
    -o-transition: bottom 0.8s ease;
    -ms-transition: bottom 0.8s ease;
    transition: bottom 0.8s ease;
} 

.playsing .cards:hover::before{
  content: "";
}

.playsing .cardsss:hover::before{
  content: "";
}

.playsing .cards:hover .flip-box-back{
  opacity: 1;
  bottom: 35%;
}

.playsing .cardsss:hover .flip-box-back{
  opacity: 1;
  bottom: 35%;
}

.flip-title {
  font-size: 22px !important;
  text-align: left;
  margin-bottom: 20px;
  letter-spacing: 0 !important;
}

.flip-location {
  font-size: 16px;
  text-align: left;
  margin-bottom: 20px;
}

.meastusments p {
  text-align: left;
  font-size: 16px;
  line-height: 30px;
}

.playsing .cardss {
  width: 400px;
  height: auto;
  position: relative;
  overflow: hidden;
  -webkit-transition: .5s ease-in;
  -moz-transition: .5s ease-in;
  -o-transition: .5s ease-in;
  transition: .5s ease-in;
}

.playsing .cardss img{
  height: auto;
    width: 400px;
    object-fit: cover;
    object-position: top;
}

.text-center {
  text-align: center !important;
}

.femalemodels-sections .meastusments{
margin-bottom: 30px;
margin-top: 10px;
}

.femalemodels-sections .meastusments span {
  font-size: 14px;
    line-height: 1.6;
}

.malemodels-sections .meastusmentss{
  margin-bottom: 35px;
    margin-top: 10px;
  }
  
  .malemodels-sections .meastusmentss span {
    font-size: 14px;
    line-height: 1.6;
  }

.mt-5{
  margin-top: 30px;
}
.mt-4{
  margin-top: 20px;
}

.mt-3{
  margin-top: 30px;
}

.mb-4{
  margin-bottom: 15px;
}
.mb-5{
  margin-bottom: 30px;
}

.mt-6{
  margin-top: 40px;
}

.women-height-requirements-textss li {
  padding-left: 50px;
}

.models-females h2{
  letter-spacing: -2px;
  font-size: 4rem;
}
.form-flex-container {
  display: grid;
    grid-template-columns: auto auto;
    gap: 40px;
}

.music-controlss button {
  background-color: transparent;
  color: #333;
  border: none;
  padding: 0.2vw 0.2vw 0.2vw 0.2vw;
  font-size: 2vw;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  width: 4vw;
  height: 4vw;
  box-shadow: none;
}

.music-controlss {
  justify-content: space-between;
}

.board-sidebars .music-ul {
  width: 50%;
}

.banners {
  width: 50%;
}

.banners img{
  height: 100vh;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

@media screen and (max-width: 767px) {

  .form-flex-container {
    display: grid;
      grid-template-columns: auto;
      gap: 0px;
  }
  .current-time {
    position: absolute;
    top: -3px;
    left: -3px;
    font-size: calc(1.6vw + 1vh);
}
.duration {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: calc(1.6vw + 1vh);
}
.playsing {
  grid-template-columns: 1fr;
}

.music-player-ps {
  bottom: 20%;
}

.defaultBar {
  width: 75%;
} 
.playsing .cardss, .playsing .cardsss {
  width: 100%;
    height: 100%;
}

.playsing .cardss img, .playsing .cardsss img{
  width: 100%;
    height: 100%;
}
.playsing .cards {
  width: 100%;
  height: 100%; 
}
.playsing .cards::before, .playsing .cardsss::before {
  width: 100%;
  height: 100%; 
}

.models-females {
  padding: 30px;
  width: 100%;
  margin-bottom: 50px;
}

.playsing .cards:hover .flip-box-back {
  bottom: 34%;
}

.playsing .cardsss:hover .flip-box-back{
  bottom: 34%;
}
.battery {
  width: 8.5vw;
  height: 5vw;
}

.back-button, .back-buttons, .songone-back-button {
  font-size: calc(3.25vw + 1.25vh);
}

.femalemodels-back-button, .malemodels-back-button, .malemodels-back-buttons {
  font-size: calc(3.25vw + 1.25vh);
}

.femalemodels-menu-battery-container, .malemodels-menu-battery-container {
  padding: 5px 2px;
}

.femalemodels-section, .malemodels-section {
  top: 25px;
}
.menu-sidebar ul {
    font-size: calc(2.75vw + 1.75vh);
}

.music-controls button {
  font-size: 4vw;
}
.malemodels-section .models-females h2, .femalemodels-section .models-females h2 {
    font-size: 2rem;
}
.mt-3 {
    margin-top: 5px;
}

.malemodels-section {
    width: 100%;
    height: 100%;
}

.form-group {
  display: block;
}

.form-label {
  display: block;
  font-size: 0.82rem;
  text-align: left;
  width: 100%;
  margin-bottom: 10px;
}

.form-select {
    display: block;
    max-width: 100%;
    width: 100%;
    margin-bottom: 10px;
}

.form-input, .address-input {
  height: 2.1rem;
  line-height: 2.1rem;
  width: 100%;
  /* box-sizing: border-box; */
  margin-bottom: 10px;
  max-width: 100%;
  border: 1px solid #858484;
}
.logo-image {
  max-width: 100%; /* 150px */
  height: auto;
}

.height-form-container {
  padding-top: 1vh;
}

.personal-info .form-label {
  width: 100%;
}

.board-sidebars ul li {
  padding: 2px 10px;
}

.music-ul li img {
  height: 30px;
}
.music-ul li span {
  padding-left: 10px;
  font-size: 12px;
}
.playeing img {
  height: 130px;
}
.playeing {
  gap: 15px;
}

.playeing .son-title {
  font-size: 22px;
  font-weight: 600;
}
.playeing .son-artist {
  padding-top: 4px;
  font-size: 16px;
}

.music-controlss {
  margin-top: 15px;
}
.songone-sidebar {
  padding: 20px;
}

.femalemodels-sections .meastusments span {
  font-size: 12px;
  line-height: 1.6;
}
.malemodels-sections .meastusmentss span {
  font-size: 12px;
  line-height: 1.6;
}
}

.active-song {
 
  font-weight: bold;
}

.banners img {
  transition: opacity 0.5s ease;
  opacity: 1;
}

.banners img.fade-out {
  opacity: 0;
}