/* General Reset */
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.background {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
/* Font-face for Medel Font */
@font-face {
  font-family: 'Medel';
  src: url('/xrpfonts/medel/Medel.ttf') format('truetype'); /* Ensure you include the font file */
  font-weight: normal;
  font-style: normal;
  }
/* Font-face for Quesha Font */
@font-face { 
  font-family: 'Quesha';
  src: url('/xrpfonts/quesha/Quesha-gndR.ttf') format('truetype'); /* Ensure you include the font file */
  font-weight: normal;
  font-style: normal;
}

/* Main Background */
.main-image {
  width: 360%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  transform: translateX(0);
  transition: transform 0.2s ease-out;
}

/* iPhone Container */
.iphone-container {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  opacity: 0;
  transition: opacity 1.5s ease, bottom 1.5s ease;
}

.iphone-overlay {
  width: 100%;
  height: auto;
}

 .iphone-video {
  position: absolute;
  top: 19.5%;
  left: 20%;
  width: 53%;
  height: 60%;
  object-fit: cover;
  border-radius: 16px;
  z-index: 20;
}




/* Text Overlay Section */
.text-overlay {
  position: absolute;
   top: 0px; /* 40px for the ticker + 5px gap as top: 0;*/
  left: 0;
  z-index: 900; /* Ensure it is below the ticker was z-index: 30; */
  width: 100%;
  text-align: center;
  background-color: rgba(240, 236, 220, 0.8); /* Approximation for the off-white color with 80% opacity */
  color: white;
  transform: translateY(-95%);
  transition: transform 1s ease;
  padding: 20px 0;
  font-family: Arial, sans-serif;
}

.text-box .title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  color: white;
  text-shadow: 2px 2px 4px rgba(128, 128, 128, 0.7);
}

.text-box .subtitle {
  font-size: 1.5rem;
  margin-top: -7px;
  font-weight: 600;
  font-family: 'Medel', Arial, sans-serif;
  color: #5C6E6E;
  text-align: center;
}

.star {
  display: inline-block;
  font-size: 3rem;
  color: white;
  margin: 0 5px;
}

.triangle-indicator {
  position: absolute;
  bottom: -15px;
  left: 60%;
  transform: translateX(-50%);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid white;
  cursor: pointer;
  z-index: 31;
}

/* Mobile-specific adjustments Text Overlay Section smaller screens*/
@media (max-width: 400px) {
  .text-box .title {
 font-size: 2.5rem;
  font-weight: 800;
  text-transform: uppercase;
  color: white;
  text-shadow: 2px 2px 4px rgba(128, 128, 128, 0.7);
  }
  .star {
  display: inline-block;
  font-size: 2.5rem;
  color: white;
  margin: 0 5px;
}
}
/* Mobile-specific adjustments Text Overlay Section smaller screens*/
@media (max-width: 412px) {
  .text-box .title {
 font-size: 2.3rem; 
  font-weight: 800;
  text-transform: uppercase;
  color: white;
  text-shadow: 2px 2px 4px rgba(128, 128, 128, 0.7);
  }
  .star {
  display: inline-block;
  font-size: 2.3rem;
  color: white;
  margin: 0 5px;
}
}

/* More Info Overlay */
.more-info-overlay {
  position: absolute;
  left: 50%;
  bottom: -100px; /* Initially off-screen */
  transform: translateX(-50%) translateY(100%); /* Hidden below */
  width: 200px; /* Rectangle size */
  height: 50px;
background-color: rgba(48, 153, 153, 0.9); /*  #333;ticker #76e9e5;colour Approximation rgba(48, 153, 153, 0.9); for the new blue with 80% opacity */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Medel', Arial, sans-serif;
  font-size: 1.2rem;
  text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Drop shadow for text */
  border-radius: 10px; /* Rounded corners */
  box-shadow:0px 8px 15px rgba(0, 0, 0, 0.8); /* Strong drop shadow  0px 4px 6px rgba(0, 0, 0, 0.1); oldshadow */
  z-index: 50;
  transition: transform 1s ease, bottom 1s ease, opacity 0.5s ease; /* Add opacity transition */
  opacity: 1; /* Fully visible by default */
  cursor: pointer; /* Add this line */
}

/*begin url issue-----------------*/

#dynamic-container {
  position: absolute;
  bottom: 0; /* Initially aligned to the bottom */
  left: 0;
  width: 100%;
  transition: bottom 1s ease-in-out; /* Smooth movement */
}
/*end url issue-----------------*/

/* Play Button container */

.shadowcontainer{
	  position: absolute;
      filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
	  z-index: 85;
    }
/* Play Button Overlay */
.play-button-overlay {
  position: absolute;
  z-index: 85;
  opacity: 0; /* Start hidden */
  visibility: hidden; /* Prevent interaction until shown */
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.3s ease-in-out;

  /* Size and Shape */
  --r: 15px; /* Border radius for rounded corners */
  height: 120px; /* Height of the triangle */
  aspect-ratio: calc(1 / cos(30deg)); /* Maintain triangle proportions */
  --_g: calc(tan(60deg) * var(--r)) left var(--r), #000 98%, #0000 101%;
  -webkit-mask:
    conic-gradient(from 60deg at calc(3 * var(--r) / 2 - 100%), #000 60deg, #0000 0)
      0 0 / calc(100% - 3 * var(--r) / 2) 100% no-repeat,
    radial-gradient(var(--r) at calc(100% - 2 * var(--r)) 50%, #000 98%, #0000 101%),
    radial-gradient(var(--r) at top var(--_g)),
    radial-gradient(var(--r) at bottom var(--_g));
  clip-path: polygon(100% 50%, 0 100%, 0 0); /* Triangle shape */
  
  /* Background and Shadow */
  background: #FF4500;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
    cursor: pointer; /* Add this line */
}
.play-button-overlay {
  position: relative;
  z-index: 85;
  height: 120px;
  aspect-ratio: calc(1 / cos(30deg));
  clip-path: polygon(100% 50%, 0 100%, 0 0);
  background: #FF4500;


}





/* Text inside the Play Button Overlay */
.play-button-overlay span {
  position: absolute;
  /*transform: rotate(-24deg) translate(-55px, -45px) !important; */
transform: rotate(-24deg) translate(-44px, -56px) !important;
  white-space: nowrap; /* Prevent text wrapping */
  font-family:  'Quesha', Arial, sans-serif;
  font-size: 1.6rem; /* Adjust font size */
  font-weight: bold;
  color: white; /* Text color orange#FF4500;*/
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Drop shadow for text */
  text-align: center;
  line-height: 1.1; /* Adjust line spacing */
  top: 50%; /* Center text vertically */
  left: 50%; /* Center text horizontally */
  transform: translate(-65%, -50%); /* Ensure text is centered in the triangle */
  z-index: 85; /* Ensure text is above the triangle */
}
.press-here {
  position: absolute;
  top: 60%; /* Adjust vertical position */
  left: 20%; /* Adjust horizontal position */
  font-family: 'Quesha', Arial, sans-serif;
  font-size: 1.4rem; /* Adjust font size */
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 1.2;
}
.wendy {
  display: inline-block; /* Ensure transform works properly */
  transform: rotate(-4deg); /* Rotate counterclockwise by 4 degrees */
}
/*endplaybutton overlay */
/*start play button fade in and out */
/* Meet WENDY Text */
.meet-wendy {
  position: absolute;
  top: 24%; /* Adjust vertical position */
  left: 3%; /* Adjust horizontal position */
  font-family: 'Quesha', Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 1.2;
  display: block; /* Visible by default */
  transform: rotate(-24deg); /* Rotate */
  transition: opacity 1s ease-in-out; /* Smooth fade */
}

.press-here {
  position: absolute;
  top: 28%; /* Adjust vertical position */
  left: 10%; /* Adjust horizontal position */
  font-family: 'Quesha', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 1.2;
  display: none; /* Hidden by default */
  transform: rotate(-24deg); /* Rotate */
  transition: opacity 1s ease-in-out; /* Smooth fade */
}

/* Text Fade In/Out Animation */
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
/*end play button fade in and out */

.info-overlay {
  position: absolute;
  background-color: rgba(240, 236, 220, 0.8); /* Approximation for the off-white color with 80% opacity */
  display: none;
  flex-direction: column;
  justify-content: flex-start; /* Stack items */
  align-items: flex-start; /* Align content to the left */
  color: #5C6E6E; /* Green-grey text color */
  font-family: Arial, sans-serif; /* Set font to Arial */
  font-weight: bold; /* Make the text bold */
  text-align: left;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.5s ease;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  overflow-y: auto;
  padding: 20px 15px 15px 15px; /* Add extra top padding for the Close button */
  width: 90%;
  max-width: 425px;
}
.info-overlay p .highlight-text {
  color: #FF4500; /* Same orange color as the stars */
  text-shadow: none; /* Remove drop shadow */
}
/* here General styles for all paragraphs in the overlay */
/* General styles for all paragraphs in the overlay */

.info-overlay p {
  margin: 5px 0; /* Adjust spacing between lines */
  padding-left: 5px; /* Move the text closer to the left edge */
  font-size: 1.3rem; /* Adjust for readability */
  line-height: 1.3; /* Adjust line spacing */
  color: white; /* White text for all lines */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Drop shadow for emphasis */
  font-weight: 800; /* Bold text for visibility */
}

/* Style for the stars */
.info-overlay p .star2 {
  margin-left: -5px; /* Move the stars even closer to the left edge */
  color: #FF4500; /* Orange color for stars */
  font-size: 1.3rem; /* Match the text size */
    text-shadow: none; /* Remove the drop shadow */
}






/* Style for the CLOSE button */
.info-overlay .close-info {
  font-size: 0.8rem; /* Smaller font size */
  position: absolute; /* Position it absolutely within the overlay */
  top: 10px; /* Distance from the top */
  right: 15px; /* Distance from the right */
  color: #FF4500; /* Orange color for text */
  cursor: pointer;
  background: none; /* Remove background */
  border: none; /* Remove borders */
  text-shadow: none; /* No drop shadow for the CLOSE button */
}


/*here

/* Style for Stars and Text in Info Overlay Only */
.info-overlay p {
  margin: 5px 0; /* Adjust spacing between lines */
  font-size: 1.3rem; /* Adjust for readability */
  line-height: 1.3; /* Adjust line spacing */
  color: white; /* Green-grey for text */
}


.info-overlay p .star2 {
  text-shadow: none; /* Remove the drop shadow */
  color: #FF4500; /* Keep the orange color for the stars */
  font-size: 1.3rem; /* Match the existing font size */
}

/* Close Info Button */
.info-overlay .close-info {
  font-size: 0.8rem; /* Smaller font size */
  position: absolute; /* Position it absolutely within the overlay */
  top: 90px; /* Distance from the top */
  right: 5px; /* Distance from the right */
  color: #FF4500; /* Orange color for stars */
  cursor: pointer;
  background: none; /* Remove background */
  border: none; /* Remove borders */
}


/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .info-overlay {
    font-size: 1rem;
    padding: 15px; /* Adjust padding for smaller screens */
    max-width: 90%; /* Fit smaller screens */
  }

  .info-overlay p {
    margin: 4px 0; /* Tighter spacing for small screens */
  }

  .info-overlay .close-info {
    font-size: 0.9rem; /* Smaller close button font size */
  }
}

/* Responsive Adjustments for Tablet Screens */
@media (max-width: 1024px) {
  .info-overlay {
    font-size: 1rem;
    padding: 15px; /* Adjust padding */
    max-width: 80%;
    line-height: 1.5;
  }

  .info-overlay p {
    margin: 2px 0;
  }
}

/* Specific styles for LG V60 */
@media (max-width: 1080px) and (min-height: 2460px) and (min-device-pixel-ratio: 2) {
  .info-overlay p {
    line-height: 1.2; /* Adjust spacing for LG V60 */
  }
}

/* Specific styles for iPhone 14 Plus */
@media (max-width: 1284px) and (min-height: 2778px) and (min-device-pixel-ratio: 3) {
  .info-overlay p {
    line-height: 1.4; /* Adjust line spacing for iPhone 14 Plus */
  }
}

/* For Larger Screens */
@media (min-width: 1025px) {
  .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }
}
/*new codehere*/
/* Wendy Intro Image Container */
/* Wendy Intro Image Container */
.wendy-intro-container {
  display: none; /* Initially hidden */
  position: absolute;
  top: 19.5%; /* Matches the iPhone video placement */
  left: 20%; /* Matches the iPhone video placement */
  width: 53%; /* Default size */
  height: 60%; /* Default size */
  z-index: 100; /* Above the iPhone container */
  pointer-events: none; /* Prevent interaction */
  transition: width 0.5s ease, height 0.5s ease, top 0.5s ease, left 0.5s ease;
}

/* Wendy Intro Image */
.wendy-intro {
  position: absolute;
  top: 19.5%; /* Matches the video placement */
  left: 20%; /* Matches the video placement */
  width: 53%; /* Matches the video width */
  height: 60%; /* Matches the video height */
  object-fit: cover; /* Ensures the image fits perfectly within the iPhone */
  border-radius: 16px; /* Matches the video corner radius */
  z-index: 100; /* Above the iPhone container */
  opacity: 0; /* Start fully transparent for fade-in */
  transition: opacity 1s ease-in-out; /* Smooth fade-in effect */
}

/* Show the Wendy Intro when needed */
.show-wendy-intro .wendy-intro {
  opacity: 1; /* Fully visible with fade-in effect */
}



/* Desaturated Background */
.desaturate-background {
  filter: grayscale(90%);
  transition: filter 0.5s ease;
}

/* Enlarged iPhone Overlay */
.enlarged-iphone {
  transform: translateX(-50%) translateY(-15%) scale(1.45);
  opacity: 1; /* Ensure visibility */
  z-index: 90; /* Above the desaturated background */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.enlarged-iphone .join-button {
 top: 46% !important;
 left: 52% !important;
 display: flex !important;
 transform: scale(.69) !important;/* Prevent scaling */
 
}


/* Hidden Elements */
.hidden {
  opacity: 0 !important; /* Forces opacity to 0 */
  visibility: hidden !important; /* Ensures it's not interactable or visible */
  transition: opacity 0.5s ease; /* Optional smooth fade-out */
}


/* Side Overlays */
.side-overlay {
  position: absolute;
  top: 0;
  width: 20%; /* Adjust width for desired coverage */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 80; /* Ensure it's above the background but below the iPhone container */
  pointer-events: none; /* Prevent interaction with overlays */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.5s ease;
}

.left-overlay {
  left: 0;
}

.right-overlay {
  right: 0;
}

/* Show overlays when needed */
.side-overlay.show-overlays {
  opacity: 1 !important; /* Force the overlays to be visible */
}


/* Updated square button */
.square-button {
  position: absolute;
  top: 79%; /* Adjust based on desired position */
  left: 52%; /* Adjust to center the button */
  width: 30%; /* Button width */
  aspect-ratio: auto; /* Height adjusts proportionally */
  background-color: white; /* Off-white background */
  background-image: url('transparentwhite_tile.jpg'); /* Tile background */
  background-repeat: repeat;
  background-size: auto;
  color: #000; /* Black text */
  font-family: 'Medel', Arial, sans-serif;
  padding: 5px; /* Padding adjustments */
  font-style: italic;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 12px; /* Rounded corners */
  text-align: center;
  line-height: 1;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6); /* Shadow */
  z-index: 1000; /* Layer above other elements */
  cursor: pointer;
  overflow: visible; /* Allow the clicker to extend outside */
  opacity: 0; /* Start fully transparent */
  transition: opacity 1.5s ease, visibility 0.5s ease;
}

/* Clicker image as a pseudo-element */
.square-button::after {
  content: '';
  position: absolute;
  bottom: -20px; /* Adjust position */
  right: -15px; /* Adjust alignment */
  width: 30px; /* Width of the clicker */
  height: 30px; /* Height of the clicker */
  background-image: url('clicker.png'); /* Path to the clicker image */
  background-size: contain; /* Ensure it fits the dimensions */
  background-repeat: no-repeat; /* Prevent tiling */
  transform: rotate(0deg) scale(1); /* Default rotation and scale */
  z-index: 1; /* Place above other elements */
  transition: transform 0.3s ease; /* Smooth animation on hover */
}

/* Hover effect to rotate or scale the clicker */
.square-button:hover::after {
  transform: rotate(20deg) scale(1.2); /* Rotate and slightly enlarge */
}

/* Overlay for the Button */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  color: #000; /* Black text */
  font-family: 'Medel', Arial, sans-serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.2;
  padding: 10%;
  box-sizing: border-box;
  display: none; /* Hidden initially */
  z-index: 1100; /* Above the button */
  overflow-y: auto; /* Scrollable if content exceeds height */
  text-align: center;
}
/* Overlay styling for thenext page after the windey intro image  clicking the square button*/
/* Overlay styling */
/* Overlay styling */
/* Overlay styling */
/* Overlay styling */
/* Overlay styling */
.overlay {
  position: fixed; /* Ensure the overlay covers the entire viewport */
  top: 0;
  left: 0;
  width: 100%; /* Full width of the screen */
  height: 100%; /* Full height of the screen */
  background-color: #fdf5e6; /* Background matching the square button */
  z-index: 2200; /* Ensure it appears above all other elements */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content at the top */
  align-items: center;
  max-height: 100vh !important; /* Limit height to viewport height */
  padding: 5%; /* Space around content */
  box-sizing: border-box; /* Include padding in width and height */
  overflow-y: auto; /* Allow scrolling if content exceeds height */
  border-radius: 0; /* Fullscreen appearance */
}

/* Overlay content */
.overlay-content {
  font-family: 'Medel', Arial, sans-serif; /* Use the specified font */
  font-style: italic;
  text-align: center; /* Justify text for readability */
  font-size: 1.2rem; /* Base font size */
  color: #000; /* Black text */
  line-height: 1.2; /* 1.4Improve readability */
  max-width: 90%; /* Ensure text doesn’t span too wide */
  margin-top: 20%; /* Add spacing from the top */
  word-wrap: break-word; /* Prevent text overflow */
max-height: calc(100vh - 10%) !important; /* Adjust for padding */
  overflow-y: auto; /* Enable vertical scrolling for large content */
}

/* Overlay image for mobile */
/* Default hidden */
.overlay-image {
  display: none;
  max-width: 83%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
}

/*begin new css for fade*/
/* Fade-in and fade-out transition for overlay content and image */
.overlay-content,
.overlay-image {
  opacity: 0; /* Start hidden by default */
  transition: opacity 0.75s ease-in-out; /* Smooth fade-in and fade-out */
}

.overlay-content.fade-in,
.overlay-image.fade-in {
  opacity: 1; /* Fully visible when the fade-in class is added */
}

.overlay-content.fade-out,
.overlay-image.fade-out {
  opacity: 0; /* Hidden when the fade-out class is added */
}
/*end new css for fade*/

/*begin new css for triangle on text large*/
/* Orange triangle for overlay content */
.overlay-content::before {
  content: ''; /* Pseudo-element for the triangle */
  position: absolute;
  transform: rotate(-90deg); /* Rotate the entire wrapper */
  bottom: 35%; /* Adjust position */
  left: -23%; /* Adjust alignment */
  width: 0;
  height: 0;
  border-left: 180px solid transparent; /* Width of the triangle */
  border-right: 180px solid transparent; /* Width of the triangle */
  border-top: 200px solid #FF4500; /* Orange color for the triangle */
  opacity: 0.5; /* Default opacity .8 */
  z-index: -1; /* Ensure it doesn't overlap content */
  pointer-events: none; /* Prevent interaction with the triangle */
  transition: opacity 0.5s ease; /* Smooth opacity changes */
}

/* Allow opacity adjustment dynamically */
.overlay-content.triangle-opacity-low::before {
  opacity: 0.4; /* Lower opacity */
}

.overlay-content.triangle-opacity-high::before {
  opacity: 1; /* Full opacity */
}

/*end new css for triangle on text large*/

/* Show image only on mobile */
@media (max-width: 768px) {
  .overlay-image {
    display: block;
  }
  .overlay-content {
    display: none; /* Hide text content on mobile */
  }
}



/* Adjust close button for all screen sizes */
.close-button {
  position: absolute; /* Position relative to the overlay */
  top: 10%; /* Adjust top spacing */
  right: 5%; /* Adjust right spacing */
  color: #ff4500; /* Optional hover effect (e.g., orange) */
  font-style: bold;
  font-size: 1.5rem; /* Font size for visibility */
  background: none; /* No background for button */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor for interactivity */
  z-index: 2100; /* Ensure it stays on top of the overlay */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .close-button {
    font-size: 1.3rem; /* Slightly smaller close button */
    bottom: -50%; /* Adjust spacing for smaller screens */
	 font-style: bold;
    right: 15%; /* Adjust spacing for smaller screens */
  }
}

.close-button:hover {
  color: #ff4500; /* Optional hover effect (e.g., orange) */
}


/* small Triangle for overlay-image and overlay-content */
.triangle-overlay {
  position: absolute;
  bottom: 10px; /* Default bottom position */
  right: 10px; /* Default right position */
  width: 0;
  height: 0;
  border-left: 20px solid transparent; /* Adjust size as needed */
  border-right: 20px solid transparent;
  border-top: 20px solid #FF4500; /* Orange color */
  z-index: 10; /* Ensure it appears above content */
}

/* Adjustments for larger screens */
@media (min-width: 768px) {
  .triangle-overlay {
    bottom: 20px; /* Adjust for desktop positioning */
    right: 20px;
  }
}


/*new code for join button below */
.join-button {
  position: absolute;
  top: 50%; /* Vertically center relative to the container */
  transform: translate(-45%, -37%); /* scale(1) !important;  Fine-tune 0 position and prevent scaling */
  width: 175px; /* Adjust width for the size */
  height: 175px; /* Adjust height proportionally */
  background: url('star.png') no-repeat center center; /* Star image */
  background-size: contain; /* Ensure the image fits */
  font-family: 'Medel', Arial, sans-serif;
  font-size: .9rem; /* Base font size for text */
  font-weight: bold;
  color: #ff4500; /* Text color */
  text-align: center;
   line-height: .9; /* Improve readability */
  border: none;
  cursor: pointer;
  animation: pulseVisibility 3s infinite; /* Pulse animation */
  z-index: 2000; /* Ensure it's above other elements */
 display: none; /* Correctly hide the button initially */
  flex-direction: column; /* Stack text vertically */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
}
/* For Larger Screens */
@media (min-width: 1025px) {
  .join-button {
  transform: translate(-40%, -40%);
  }
}


.join-button .text-wrapper {
  transform: rotate(-24deg); /* Rotate the entire wrapper */
}

.join-button span {
  display: block; /* Stack words */
  color: #ff4500; /* Default text color */
  font-size: 1rem; /* Default font size */
}

.join-button span.word-free {
  color: #ff4500; /* Highlight "FREE" */
  font-size: 1.2rem; /* Larger font size for emphasis */
}

.join-button span.week {
  font-size: .9rem; /* Slightly smaller font size for "week" */
  margin-top: -5px; /* Optional: Adjust spacing between lines */
 
}




@keyframes pulseVisibility {
  0% {
    opacity: 1; /* Fully visible */
  }
  50% {
    opacity: 0; /* Fully invisible */
  }
  100% {
    opacity: 1; /* Fully visible */
  }
}

/* Adjustments for responsive screens */
@media (max-width: 768px) {
  .join-button {
    width: 175px; /* Adjust size for smaller screens */
    height: 175px;
    font-size: 1rem; /* Adjust font size */
    /* line-height: 120px; Adjust vertical alignment */
  }
}

/*begin info ticker */


.ticker-container {
  width: 100%;
  background-color: #333; /* Dark color */
  color: white;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1000;
  height: 40px;
  display: none; /* Ensure it is hidden on page load */
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0; /* Fully transparent initially */
  transition: opacity 0.5s ease; /* Smooth fade-in */
}

/* Ticker Text */
.ticker-text {
  white-space: nowrap; /* Prevent text from wrapping */
  display: inline-block;
  animation: scroll-ticker 30s linear infinite; /* Smooth scrolling animation */
  animation-delay: 0s; /* No delay, starts scrolling immediately */
  font-family: 'Medel', Arial, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  line-height: 40px; /* Align text with ticker height */
}

/* Scrolling Animation */
@keyframes scroll-ticker {
  transform: translateX(50%)  {
    transform: translateX(25%); /* Start closer to the visible area */
  }
  100% {
    transform: translateX(-100%); /* End off-screen to the left */
  }
}

/*end info ticker */


/* Begin Carousel Button Styling */

/* end Carousel Button Styling */

/* Oval Overlay for the Carousel */
/* Default Oval Styling (for larger screens) */
.carousel-oval {
  position: absolute;
  top: 25%; /* Adjust this for default placement */
  left: 20%; /* Default horizontal alignment */
  width: 75px; /* Default oval width */
  height: 50px; /* Default oval height */
  background-color:  #FF4500;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Medel', Arial, sans-serif;
  font-size: 0.8rem; /* Adjust font size for default */
  font-weight: bold;
  color: white;
  transform: rotate(-10deg);
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 200;
}

/* For Medium Screens (Tablets, Small Laptops) */
@media (max-width: 1024px) {
  .carousel-oval {
    top: 20%; /* Adjust vertical position */
    left: 25%; /* Move slightly more to the left */
    width: 75px; /* Reduce size for medium screens */
    height: 50px; /* Reduce height proportionally */
    font-size: 0.7rem; /* Smaller font size for readability */
  }
}

/* For Small Screens (Phones) */
@media (max-width: 768px) {
  .carousel-oval {
    top: 26%; /* Adjust vertical position */
    left: 13%; /* Move further left */
    width: 70px; /* Smaller oval for small screens */
    height: 50px; /* Reduce height proportionally */
    font-size: 0.6rem; /* Even smaller font size */
  }
}

/* For Very Small Screens (Small Phones) */
@media (max-width: 480px) {
  .carousel-oval {
    top: 26%; /* Adjust vertical position further */
    left: 13%; /* Align left for smaller screens */
    width: 70px; /* Make the oval even smaller */
    height: 50px; /* Reduce height */
    font-size: 0.5rem; /* Small font size */
  }
}


/* end Oval Overlay for the Carousel */

/* Text on iPhone top section */
.iphone-top-text {
  position: absolute;
  z-index: 105;
  text-align: center;
  color: #f0ecec; /* Off-white */
  font-family: 'Medel', Arial, sans-serif;
  font-style: italic;
  font-weight: bold;
  font-size: 0.87rem;
  line-height: 0.89rem;
  background-color: rgba(0, 0, 0, 1); /* Black underlay */
  padding: 3px 10px;
  border-radius: 20px 20px 0 0; /* Rounded top corners */
  opacity: 0; /* Hidden by default */
  display: none; /* Hidden initially */
  transition: opacity 0.5s ease, top 0.5s ease, width 0.5s ease, left 0.5s ease;
}

.iphone-top-text.show {
  display: block !important;
  opacity: 1 !important;
}



/* End Text on iPhone top section */
#dynamic-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: var(--dynamic-height);
  min-height: var(--dynamic-height);
  padding-bottom: env(safe-area-inset-bottom);
}