.image-slide-left, .image-slide-right, .fallingText {
	will-change: transform, opacity;
  }

  .hero-speech-bubble-container{
	position: absolute;
top: 30%;
left: 37%;
z-index: 10000000;
  }
  .hero-speech-bubble-image {
	
	width: 30vw;

  }

@media only screen and (max-width: 768px) {
	.slidepenguin{
		display: none;
	}

	}

	.speech-bubble {
		position: relative;
		display: inline-block; /* or flex, depending on your layout */
	  }
	  
	  .countdown-text {
		position: absolute;
		top: 50%; /* adjust as necessary */
		left: 45%; /* adjust as necessary */
		transform: translate(-50%, -50%); /* to center the text inside the bubble */
		font-size: 1.8vw; /* your desired size */
		font-weight: bold; /* if you want the text to be bold */
		/* additional styling as needed */
	  }
	  



.hero-text-container p {

margin-top: 0px;
margin-bottom: 0px;
}
  /* This is a simplistic approach. Depending on the complexity of your site and the specific content of your hero section,
	 you might need to adjust the selectors and styles. */
  



body, html {

	  
	overscroll-behavior-y: none;
	overscroll-behavior-x: none;
  }
  html, body {
	max-width: 100vw;
	overflow-x: hidden;
  }
  
:root {
	--light-blue: #add8e6;
	--dark-blue: #00bfff;
	--white: #ffffff;
}
body, html {
	font-family: 'Bebas Neue', sans-serif;
    background-color: black;
	margin: 0;
	padding: 0;
	
	text-align: center;
}
header {
	
	color: var(--white);
	position: relative;
	z-index: 10;
}
h1 {
	margin: 0;
	font-size: 2.5em;
}
.full-width-image {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}
/* Penguins styles */
/* Adjusted penguin styles */
/* Penguins styles */
.penguin {
	
	width: 120px;
	z-index: 100;
	height: auto;
	margin: 0 10px;
	
}
.first-penguin {
	margin-top: 20px;
	/* Half the previous space from the collage */
}
#penguin1 {
	z-index: 100;
	transform: scale(1);
	/* Increase penguin size */
}
#penguin2 {
	float: right;
	/* Float to the right side */
	transform: scale(-1,1);
	/* Flip horizontally and increase size */
}
#penguin3 {
	transform: scale(1);
	/* Increase penguin size */
}
#penguin4 {
	float: right;
	/* Float to the right side */
	transform: scale(-1, 1);
	/* Flip horizontally and increase size */
}
#collageContainer {
	position: relative;
	background-image: url('pengainz_collage.webp');
	background-size: cover;
	background-repeat: repeat-x;
	min-height: 100vh;
	width: 100%;
	animation: slideRight 30s linear infinite;
}
#collageContainer::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.15);
	/* Black with 50% opacity */
	z-index: 1;
}
@keyframes slideRight {
	from {
		background-position: 0 0;
	}
	to {
		/* Using 100% will move the background by its own width, which should be seamless. */
		background-position: -2000px 0;
	}
}
.fallingText {
	position: absolute;
	
	color: white;
	font-weight: bold;
	
	
	text-align: center;
	transform-origin: top center;
	z-index: 2;
}
.header-text{
	color: white;
	font-size: 8rem;
	font-family: 'Maple 3 Cartoon', cursive;
}
.introduction-content{
	font-family: 'Bebas Neue', sans-serif;
	font-size: 1em;
}
#fallingText1 {
	top: -100%;
	
	
	
}
#fallingText2 {
	
	top: -100%;
	
	/* Center 'of' */
	
}
#fallingText3 {
	top: -100%;
	
	/* Adjust this value to position 'Madagascar' below 'Penguins' and 'of' */
	
}

@keyframes dropInMadagascar {
	to {
		top: 20%;
		/* Adjust this if you want 'Madagascar' higher or lower */
	}
}
@font-face {
	font-family: 'Maple 3 Cartoon';
	src: url('komigo/Komigo3D-Regular.ttf') format('opentype');
}
/* ... other styles ... */
/* ... Existing styles ... */
.fullscreen-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
	padding: 30px;
	align-items: start;
	justify-content: center;
	min-height: 100vh;
	animation: fadeIn 0.5s ease-in forwards;
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.card {
	border: 3px solid #fff;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	animation: enter 0.5s ease-out forwards;
	transform: scale(0.9);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:nth-child(1) {
	animation-delay: 0.1s;
}
.card:nth-child(2) {
	animation-delay: 0.2s;
}
.card:nth-child(3) {
	animation-delay: 0.3s;
}
/* Repeat for each card */
.card img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.5s ease;
}
.card:hover {
	transform: scale(1.05) translateY(-10px) rotate(0);
	z-index: 5;
	box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.6);
}
.card:hover img {
	transform: rotate(0deg) scale(1.1);
}
@keyframes enter {
	from {
		transform: translateY(50px) rotate(-2deg) scale(0);
	}
	to {
		transform: translateY(0) rotate(-2deg) scale(0.9);
	}
}
/* Dynamic layout for cards */
/* Adjust rotation degrees for each card to create randomness */
.card:nth-child(odd) {
	transform: rotate(-2deg) scale(0.9);
}
.card:nth-child(even) {
	transform: rotate(2deg) scale(0.9);
}
.image-slide-left,.image-slide-right {
    position: absolute;
    bottom:76%;
	visibility: hidden;
	/* Start with the image invisible */
}


/* Custom Font Face */
@font-face {
	font-family: 'Maple 3 Cartoon';
	src: url('komigo/Komigo3D-Regular.ttf') format('truetype');
	/* Make sure the path is correct */
	font-weight: normal;
	/* Define the font-weight */
	font-style: normal;
	/* Define the font-style */
}

@font-face {
	font-family: 'Bangers';
	src: url('bangers2.ttf') format('truetype');
	/* Make sure the path is correct */
	font-weight: normal;
	/* Define the font-weight */
	font-style: normal;
	/* Define the font-style */
}

#collageContainer {
	/* ... Other styles ... */
	overflow: hidden;
	/* This will hide the penguins before they slide in */
}
/* Penguins container for the non-animated penguins */
.penguins-container {
	width: 100%;
	/* Ensures the container takes full width of the viewport */
	text-align: center;
	/* Center the penguins */
	padding: 20px 0;
	/* Adds padding above and below the penguin row */
}
.penguin {
	/* Remove float and clear styles */
	display: inline-block;

	
	margin: 20px;
	/* Space out the penguins */
}
.alternatingLayoutContainer {
	width: 100%;
	max-width: 1200px;
	margin: 40px auto;
}
.alternatingRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	flex-wrap: wrap;
}
.alternatingImage, .alternatingText {
	
	flex-basis: calc(50% - 20px);
	/* Subtracting margin from 50% width */
	margin: 10px;
}
.alternatingImage img {
	max-width: 100%;
	height: auto;
	display: block;
	/* Ensures no extra space for inline elements */
}
/* For odd rows, image is on the left, text is on the right */
.alternatingRow:nth-child(odd) .alternatingImage {
	order: 1;
}
.alternatingRow:nth-child(odd) .alternatingText {
	order: 2;
}
/* For even rows, text is on the left, image is on the right */
.alternatingRow:nth-child(even) .alternatingImage {
	order: 2;
}
.alternatingRow:nth-child(even) .alternatingText {
	order: 1;
}
@media screen and (max-width: 768px) {
	.alternatingImage, .alternatingText {
		flex-basis: 100%;
		margin: 10px 0;
	}
	.alternatingImage img {
		width: 100%;
		/* Fix width for smaller screens */
	}
	/* Reset order for mobile view */
	.alternatingRow .alternatingImage, .alternatingRow .alternatingText {
		order: unset;
	}
}
.introduction-content{
	font-family: 'Bebas Neue', sans-serif;
	font-size: 3rem;
	margin-left: 15vw;
	margin-right: 15vw;
}
.hero-penguins-container {
	display: flex;
	justify-content: center;
	z-index: 2;
	/* Ensure penguins are above the background but below the text */
}
/* ... Other existing styles ... */
/* Adjust vertical positioning of slide penguins */
.slidepenguin {
	
    z-index: 100;
	position: absolute;
	width: 30vw;
	
	
	/* Centers the image horizontally */
}
/* Slide in animations */
@keyframes slideInLeft {
	0% {
		left: -100%;
		/* Start off-screen to the left */
		visibility: hidden;
	}
	to {
		left: 0%;
		/* End at the horizontal center of the screen */
		visibility: visible;
	}
}
@keyframes slideInRight {
	0% {
		right: -100%;
		/* Start off-screen to the right */
		visibility: hidden;
	}
	to {
		right: 30%;
		/* End at the horizontal center of the screen */
		visibility: visible;
	}
}
/* Apply animations to penguin classes */
.image-slide-left {
    position:absolute;
	animation: slideInLeft 7s ease-out forwards;
	
}
.image-slide-right {
    position:absolute;
	animation: slideInRight 7s ease-out forwards;
	
}
/* ... Other existing styles ... */
.alternatingText .header-text {
	
	font-size: 8rem;
	/* Increased size for headers */
	color: white;
	font-family: 'Maple 3 Cartoon', sans-serif;
	text-shadow: 2px 2px var(--light-blue);
	/* Subtle shadow for depth */
	margin-bottom: 0.5em;
	/* Spacing between header and paragraphs */
	animation: popIn 0.5s ease forwards;
	/* Animation for headers */
	visibility: hidden;
	/* Start with the header invisible */
}
.alternatingText p {
	font-size: 3rem;
	
	/* Increased size for paragraph text */
	color: #000;
	/* Darker text color for better readability */
	line-height: 1.4;
	/* Improved line spacing */
	margin-bottom: 1em;
	/* Spacing between paragraphs */
	font-family: 'Bebas Neue', sans-serif;
	animation: fadeInUp 0.5s ease forwards;
	/* Animation for paragraphs */
	visibility: hidden;
	/* Start with the paragraph text invisible */
}
/* Keyframes for header pop-in effect */
@keyframes popIn {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.5;
	}
	100% {
		transform: scale(1);
		opacity: 1;
		visibility: visible;
	}
}
/* Keyframes for paragraph fade-in-up effect */
@keyframes fadeInUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
}

.alternatingText:nth-child(odd) h2 {
	animation-delay: 0.3s;
	
}
.alternatingText:nth-child(even) h2 {
	animation-delay: 0.6s;
	
}
.alternatingText:nth-child(odd) p {
	animation-delay: 0.5s;
	
}
.alternatingText:nth-child(even) p {
	animation-delay: 0.8s;
	
}

.alternatingText {
	position: relative;
}

@media screen and (max-width: 768px) {
	.alternatingText h2 {
		font-size: 2em;
	}
	.alternatingText p {
		font-size: 1.2em;
		
	}
}
#howToSection {
    background-color: #f0f8ff;
    color: #03396c;
    padding: 50px 0;
    text-align: center;
}

.section-title {
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #0277BD;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.steps-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.step {
    background: #fff;
    padding: 20px;
    width: 220px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
    transform: scale(1);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    position: relative;
    overflow: hidden;
}

.step:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.step-icon {
    margin: 0 auto 20px auto;
    height: 60px;
}

.step h3 {
    margin: 20px 0 10px 0;
    font-size: 1.5em;
}

.step p {
    font-size: 1em;
    color: #666;
}

.step::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, #ade1fb, transparent);
    transition: left 0.5s ease-in-out;
}

.step:hover::before {
    left: 100%;
}

@media (max-width: 768px) {
    .steps-container {
        flex-direction: column;
        align-items: center;
    }

    .step {
        width: 80%;
        max-width: 350px;
    }

}
.step {
    /* ... existing styles ... */
    opacity: 0; /* set initial state to invisible */
    transform: translateY(50px) scale(0.9); /* start below their final position */
    animation: stepEnterAnimation 1s ease forwards;
}

/* Animation that slides the steps up and fades them in */
@keyframes stepEnterAnimation {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Add a delay to each step based on its order */
.step[data-step="1"] {
    animation-delay: 0.3s;
}
.step[data-step="2"] {
    animation-delay: 0.6s;
}
.step[data-step="3"] {
    animation-delay: 0.9s;
}
.step[data-step="4"] {
    animation-delay: 1.2s;
}


.steps-section {
	background-color: black;
    width: 100%;
    overflow: hidden;
  }
  
  .step-row {
    height: 40vh; /* Adjust based on your preference to sum up to 1.5 viewports */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 50px;
  }
  
  .step-info {
    display: flex;
    align-items: center;
  }
  
  .step-number {
    font-size: 4em;
    color: #fff;
    font-weight: bold;
    margin-right: 20px;
  }
  
  .step-text {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 1.2em;
    color: #333;
    max-width: 60%;
	
  }
  
  @media (max-height: 800px) {
    .step-row {
      height: 37.5vh; /* Adjust to keep the total height around 1.5 viewports */
    }
  }
  

  .steps-section {
    width: 100%;
    overflow: hidden;
}


.stagemap1 {
    position: absolute;
	width: 50%;
    top: 21.4%;
    right: 48%;
    z-index: 1000; /* Above the image */
    
}
.stagemap2 {
	width: 50%;
    position: absolute;
   top: 36.1%;
   left: 22.2%;
    z-index: 1000; /* Above the image */
	
    
}
.stagemap3 {
    position: absolute;
	width: 50%;
	top: 52.23%;
	right: 53.2%;
    z-index: 1000; /* Above the image */
    
}
.step-row {
    height: 40vh; /* Adjust based on your preference */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end; /* Changed to end to move content to the right */
    padding-right: 15vw; /* Adjust padding to the right */
}

.step-info {
    display: flex;
    align-items: center;
}

.step-number {
    font-size: 4vw;
    color: #fff;
    font-weight: bold;
    margin-left: 20px; /* Change margin to left for spacing after moving to right */
}

.step-text {
    background-color: #fff;
    padding: 20px;
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 4vw;
    color: #333;
    max-width: 60%;
}

@media (max-height: 800px) {
    .step-row {
        height: 37.5vh; /* Adjust to keep the total height around 1.5 viewports */
    }
}
.jagged-divider {
    height: 5px; 
    background: repeating-linear-gradient(-45deg, #000, #000 10px, #fff 10px, #fff 20px);
    /* This creates a jagged pattern. Adjust the size and angle as you see fit. */
}
.thick-black {
    height: 20px; 
    background: black;
}
#howToSection {
    display: none;
}

.alternatingRow {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    justify-content: space-between; /* Keep this to maintain the space between items */
    flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
    .alternatingText, .alternatingImage {
        flex-basis: 100%; /* Full width for smaller screens */
        text-align: center; /* Center the text */
    }
    .alternatingImage {
        order: -1; /* Image above text in mobile view */
    }
}
.alternatingText {
	margin-top: 0px;
}
.step-info {
	font-family: 'Maple 3 Cartoon', cursive;
}

.step-text {
	background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
	
	padding: 20px;
	
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
	border: 1px solid #000; /* Light blue border that fits the theme */
	font-family: 'Maple 3 Cartoon', cursive;
	
	position: absolute; /* Positioning relative to parent */
	right: 10%; /* Adjust to move right */
	
	
  }
  .countdown-text {
	font-family: 'AnimeAce2';
  }
  .hero-speech-bubble-image {
	position: relative;
  }
  .text-container {
	width: 50%;
	height: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
  }
  
  .airdrop-text {
	width: 100%;
	font-size: 1.8vw; /* your desired size */
	position: absolute;
	top:0%;
	
	text-align: center;
	font-family: "AnimeAce2";
	line-height: 1.4; /* This will create space between this text and the countdown */
	/* additional styling as needed */
  }
 
  /* Add media query for responsiveness */
  @media (max-width: 768px) {
	.step-text {
	  transform: translateX(0);
	  position: static; /* Stack in mobile view */
	  margin: 0 auto; /* Center in mobile view */
	  max-width: 90%; /* Adjust width in mobile view */
	}
  }
  
  /* Font styling for the headings inside the text box */
  .step-text h3 {
	font-size: 1.5em;
	color: #03396c; /* Dark blue color for heading */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
  }
  
  /* Font styling for the paragraph inside the text box */
  .step-text p {
	font-size: 8vw;
	color: #666; /* Grey color for paragraph to be readable */
  }
  
  .fallingText {
    position: absolute;
    font-size: 11.5vw;
    color: black;
    font-weight: bold;
    font-family: 'Bangers';
    padding: 20px;
    text-align: center;
    transform-origin: top center;
    z-index: 2;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust horizontal position based on width */
}

@keyframes dropIn {
    to {
        top: -2%; /* Adjusted for first element */
    }
}

@keyframes dropIn2 {
    to {
        top: 3%; /* Adjusted for second element */
    }
}

@keyframes dropIn3 {
    to {
        top: 20%; /* Adjusted for third element, ensuring they stack vertically */
    }
}

/* Apply specific animations to each falling text */
#fallingText1 {
    animation: dropIn 0.5s linear 0.5s forwards;
}

#fallingText2 {
    animation: dropIn2 0.5s linear 1s forwards;
}

#fallingText3 {
    animation: dropIn3 0.5s linear 1.5s forwards;
}
.hero-icons-container {
    text-align: center; /* Center the icons container */
    margin: 20px 0; /* Provide some spacing above and below the icons */
}

.icon-button {
    margin: 0 10px; /* Space out the icons */
    display: inline-block; /* Line them up in a row */
    width: 10vw; /* Define the size of the icons */
    height: 50px; /* Maintain a square aspect ratio */
}

.icon-button img {
    width: 100%; /* Ensure the image fills the button */
    height: auto; /* Maintain aschpect ratio */
    vertical-align: middle; /* Align the icon vertically */
    transition: transform 0.3s; /* Smooth transition for hover effect */
}

.icon-button:hover img {
    transform: scale(1.1); /* Scale up icons slightly on hover */
}


.hero-details {
    text-align: center; /* Center everything in the hero details */
    font-family: 'Maple 3 Cartoon', cursive; /* Your custom font family */
    position: absolute; /* Positioning relative to its parent */
    width: 100%; /* Take full width to center content within it */
    top: 30%; /* Position below the falling text. Adjust this value based on your design */
}

.hero-icons-container {
    display: inline-block; /* Align icons next to each other */
    margin-top: 20px; /* Provide space between the text and icons */
}

.icon-button {
    display: inline-flex; /* Use flex to center the icon inside the button */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 50px; /* Width of the button */
    height: 50px; /* Height of the button */
    margin: 0 10px; /* Margin between buttons */
    border-radius: 25px; /* Rounded corners for the button */
    background-color: #fff; /* Button background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow to lift the button off the page */
    transition: all 0.3s ease; /* Transition for hover effects */
    color: #03396c; /* Icon color */
    font-size: 24px; /* Icon size */
    text-decoration: none; /* No underline on the icons */
}

.icon-button:hover,
.icon-button:focus {
    background-color: #0277BD; /* Background color for hover state */
    color: #fff; /* Icon color for hover state */
    transform: translateY(-3px); /* Lift the button up slightly on hover */
}

/* Ensure the icon-button class does not inherit text styles from other links */
.icon-button * {
    text-decoration: none;
    color: inherit;
}

/* Adjust the size of the icons */
.icon-button i {
    font-size: 3vw; /* Adjust the font size as needed */
}


.hero-text-container {
    position: absolute;
    width: 100vw;
    bottom: 3%; /* Position at the bottom. Adjust this value based on your design */
    z-index: 10000; /* Same z-index to ensure it is above the background */
    color: #fff; /* Text color */
    
    text-align: center; /* Center text */
	
}

.hero-text-container p {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 3vw; /* Text size */
}

.hero-details {
	
	position: absolute;
	z-index: 100;
}



body, html {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
  }
  
  .roadmap {
	text-align: center;
	padding: 20px;
  }
  
  .penguins {
	display: flex;
	justify-content: center;
	gap: 20px;
  }
  

  .roadmap-image {
	width: 100%;

  }
  /* Add to your existing style.css */

.stage {
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transformations and shadow */
  }
  
  .stage:hover {
	transform: scale(1.05); /* Enlarge the stage on hover */
	box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Increase shadow for emphasis */
  }
  .connector { /* Assuming .connector is a class for your line elements */
	height: 2px; /* Or 'width' if it's a vertical line */
	background: #000; /* Or any color */
	transition: height 0.3s ease; /* Smooth transition for the line thickness */
  }
  
  .connector:hover {
	height: 4px; /* Make the line thicker on hover */
  }
  

  .rm-roadmap {
    position: relative;
    width: 100%;
    padding: 50px 0;
}

.rm-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: black;
    z-index: 1;
}

.rm-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px; /* Adjust spacing between stages */
}

.rm-content, .rm-image {
	background-color: #000;
    flex: 1;
    text-align: center;
	width: 100%;
}

.rm-content h2 {
    margin: 0 0 20px 0;
}

/* Responsive adjustments for the roadmap section */
@media (max-width: 768px) {
    .rm-stage {
        flex-direction: column;
    }
}
.cartoon-speech-bubble-container {
    display: flex;
    justify-content: center;
    margin: 100vh 0; /* Ensure it's off-screen initially for scroll effect */
}

.cartoon-speech-bubble-content {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 20px;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 16px;
    max-width: 300px;
    text-align: center;
    opacity: 0; /* Initially hidden */
    transform: scale(0);
    transition: all 0.5s ease-out;
	z-index: 100;
}

.cartoon-speech-bubble-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: #f0f0f0;
    border-bottom: 0;
    margin-left: -20px;
    margin-bottom: -20px;
}
.roadmap-container {
    position: relative;
    text-align: center; /* Center content */
    width: 100%; /* Full width */
	background-color: rgba(0, 0, 0, 0); /* Fully transparent */
    /* Ensure there's enough height here or content to push the height; otherwise, add a min-height */
}

.rm-image img {
    width: 100%; /* Ensure image covers full width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any extra space below the image */
}

.dotlottie-player {
    position: absolute;
    top: 70%;
    width: 60vw; /* Adjust based on your design */
    height: auto; /* Maintain aspect ratio */
    z-index: 999999; /* Above the image */
    left: -10%; /* Centering adjustment, modify as needed */
}


.roadmap-container {
    position: relative;
    /* Ensure the container is large enough to hold all items. */
    width: 100%; /* Or the width that fits your layout */
}
.dotlottie-player {
    position: absolute;
    left: 50%; /* Adjust this as necessary to position Lottie animations */
    width: 60vw; /* Example width, adjust as needed */
    height: auto; /* For correct aspect ratio */
    z-index: 5; /* Ensures visibility above the image but below the speech bubbles */
}

.cartoon-speech-bubble-container {
    position: absolute;
    /* No specific top value here; each bubble will need individual positioning */
    z-index: 1000;
	background-color: #f0f0f0;
    border-radius: 10px;
    padding: 20px;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 16px;
    text-align: center;
    /* Reset any transforms if they were previously used to hide the bubbles */
    transform: none;
    opacity: 1; /* Ensure visibility */ /* Above the Lottie animations */
}

.cartoon-speech-bubble-content {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 20px;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 16px;
    text-align: center;
    /* Reset any transforms if they were previously used to hide the bubbles */
    transform: none;
    opacity: 1; /* Ensure visibility */
}

.howtotext{
	width: 25vw;
	height: 15vh;
	border-color: #000;
	border-width: 10px;
	border-radius: 10px;
	background-color: white;
	position: absolute;
	z-index: 1000;
	top: 15%;
	left: 60%;
	text-align: center;

}.flip-horizontal {
	transform: scaleX(-1);
  }
  
  .excepttext {
	
width:100%;
padding: 20px;
background-color: white;
border: #000;
border-width: 5px;
  }

  /* Header Text Animation */
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.header-text {
    animation: fadeIn 0.5s ease forwards;
}


/* Descriptive Text Animation */
@keyframes jumpIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}



/* Add staggered animation delays for each paragraph */
.alternatingText p:nth-child(1) { animation-delay: 1s; } /* Adjust base delay to sync with previous animations */
.alternatingText p:nth-child(2) { animation-delay: 1.2s; }
.alternatingText p:nth-child(3) { animation-delay: 1.4s; }

@font-face {
	font-family: 'AnimeAce2';
	src: url('/anime_ace_bb/animeace2bb_tt/animeace2_reg.ttf') format('truetype');
  }

  .excepttext{
	font-size: 1.5vw;
	font-family: 'AnimeAce2';
  }

  @media only screen and (max-width: 768px) {
    body, html {
        font-size: 14px; /* Adjust base font size for readability */
    }



    .penguin, .first-penguin, .fallingText, .header-text, .introduction-content, .hero-details {
        /* Scale down images, text sizes, and adjust layouts for mobile */
        font-size: smaller;
    }

    .penguin {
        width: 80px; /* Smaller penguins */
    }

    .fallingText {
        font-size: 6rem; /* Smaller falling text */
    }

    .header-text {
        font-size: 6rem; /* Smaller headers */
    }

    .alternatingText .header-text, .alternatingText p {
        font-size: 2rem; /* Smaller text in alternating text blocks */
    }


    /* Adjust the layout for the alternating rows to stack vertically */
    .alternatingRow {
        flex-direction: column;
    }

    .alternatingImage, .alternatingText {
        /* Full width for images and text in a vertical layout */
        flex-basis: 100%;
        text-align: center; /* Center text for mobile */
    }

    .alternatingImage img {
        max-width: 80%; /* Smaller images in the alternating layout */
        margin: 0 auto; /* Center images */
    }

    /* Additional adjustments as needed based on your content */
}
@media only screen and (max-width: 768px) {
    /* Resetting order for mobile view to ensure images always come before text */
    .alternatingRow .alternatingImage, .alternatingRow .alternatingText {
        order: -1; /* This ensures images are always above the text */
    }
    
    /* Since all items now have the same order, we specifically target the text to follow the image */
    .alternatingRow .alternatingText {
        order: 1;
    }

    /* Adjust any additional styling for mobile layout here */
    /* Example: Centering text below images */
    .alternatingText {
        text-align: center;
        margin-top: 20px; /* Add some space between the image and the text */
		
    }
}
.roadmap-header-text {
	color: black;
	font-size: 8rem;
	font-family: 'Maple 3 Cartoon', cursive;
}
.roadmap-header {
    position: absolute;
    top: 2%;
    left: 50%; /* Center horizontally relative to the parent */
    transform: translateX(-50%); /* Shift it back to the left by half its width */
    z-index: 1000;
    color: black;
    font-size: 10vw;

    font-family: 'Maple 3 Cartoon', cursive;
	
		background-color: rgba(0, 0, 0, 0); /* Fully transparent */
		background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
	
	padding: 20px;
	
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
	border: 1px solid #000; /* Light blue border that fits the theme */
	font-family: 'Maple 3 Cartoon', cursive;
	

	
}

.leftfloatcomic {
	display: inline-block;
		width:auto;
		font-family: 'AnimeAce2';
		text-align: left;
		padding: 20px;
		background-color: white;
		border: #000;
		border-width: 5px;
	
}

.speech-bubble {
	position: absolute;
	right: 20px; /* Adjust based on your needs */
	top: 50%;
	transform: translateY(-50%) translateX(100%);
	background-color: #f0f0f0;
	border: 2px solid #666;
	border-radius: 20px;
	padding: 20px;
	width: 200px;
	text-align: center;
	font-family: Arial, sans-serif;
	opacity: 0; /* Start invisible */
	z-index: 10; /* Ensure it's above the image */
  }
  #trigger {
	height: 100px; /* You can adjust the height if needed */
	position: relative;
	top: 100px; /* Adjust this value to position the trigger higher */
  }
  .thin-black {
	height:4px;
	background-color: black;
	z-index: 10000;
  }

    .footer-container{
		position: relative;
		background-color: #000;
		width: 100%;
		height: auto;

	}
  .finaltext {
	
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 20px;
	background-color: white;
	border: #000;
	border-width: 5px;
	font-family: 'AnimeAce2';
	  }

	  @media only screen and (max-width: 768px) {
	.slidepenguin{
		display: none;
	}

	}

	#imageToFadeIn {
		opacity: 0;
	  }
	  


	  #fallingText1 {
	
	
		font-size: 4vw;
		/* Center 'of' */
	
	}

	@media only screen and (max-width: 1300px) {
		@keyframes dropIn {
			to {
				top: 2%; /* Adjusted for first element */
			}
		}
		
		@keyframes dropIn2 {
			to {
				top: 4%; /* Adjusted for second element */
			}
		}
		
		@keyframes dropIn3 {
			to {
				top: 13%; /* Adjusted for third element, ensuring they stack vertically */
			}
		}
		
		
	}

	.end-part{
		background-color: black;
	}


	.roadmaptext {
		
		position: absolute;
		z-index: 100;
		top: 78%;
		
		padding: 20px;
		background-color: white;
		border: #000;
		
		border: 5px solid black;
		
			font-size: 1.5vw;
			font-family: 'AnimeAce2';
			border-left: none;
	}

	.ripperplan {
		
		position: absolute;
		z-index: 100;
		top: 68%;
		
		padding: 20px;
		background-color: white;
		border: 5px solid black;
		border-width: 5px;
		border-left: none;
		
			font-size: 1.5vw;
			font-family: 'AnimeAce2';
		
	}

	
	.meetthecrewcontainer {
		background-color: #ffb48d;
	}

	.icon-button {
		height: 4vw;
		width: 4vw;
		border-radius:7vw;
		margin-left: 1.5vw;
	}

	.excepttextinside {
		
		position: absolute;
		top: 0%;
		left: 0%;
			width:100%;
			padding: 20px;
			background-color: white;
			border: #000;
			border-width: 5px;
			font-size: 1.5vw;
	font-family: 'AnimeAce2';

		
			
	}