.roadmap-wrapper * {
	-ms-overflow-style: none;   /* IE and old Edge */
  scrollbar-width: none;
}

.roadmap-wrapper::-webkit-scrollbar{
	display: none;
	width:0;
	height: 0;
}

.roadmap-wrapper{

	background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 100px;
  width:100%;
  overflow: hidden;

}

.rmap-title{
	margin-top: 80px;
	font-size:80px;

}

.rmap-title-after{
	font-size:60px;
	margin:10px 0;
}



.stages-container{
	display: grid;
	gap: 20px;

	width:100%;
	padding: 80px 50px 80px;

	position: relative;
	overflow: scroll;
	grid-template-columns: repeat(10, 1fr);

	scroll-snap-type: x mandatory;  /* enable horizontal snapping */
  scroll-behavior: smooth;        /* optional: smooth scroll */
  
  -webkit-overflow-scrolling: touch; /* smoother on iOS Safari */

}

.glass{
	background: rgba(255,255,255, 0.8);  /* translucent white */
  backdrop-filter: blur(15px) saturate(120%); /* key: glass blur */
  -webkit-backdrop-filter: blur(15px) saturate(120%); /* Safari fix */
}


.stage{

	transform: scale(0.7);
	opacity:0.6;
	display: flex;
	flex-direction: column;
	padding: 1rem 10rem;
  border-radius: 15px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.06); /* soft shadow */
  color: white;
  min-width:300px;
  text-align: center;
  justify-content: flex-start;
  align-items: center;
  transition: transform 0.6s, opacity 0.6s;
  scroll-snap-align: center; /* snap each card’s left edge into view */
}

.active {
  opacity: 1;       /* fully visible */
  transform: scale(1); /* slightly bigger */
}

.fakestage{
	width:650px;
	
}

.stage-icon{
	width:30px;
	margin:25px 0;
}

.stage-text-container{
	display: flex;
	flex-direction: column;
	color: var(--dark);
	text-align: center;
	gap:15px;
	width:115%;
	

}

.stage-title{
	font-weight: bold;
	font-size: 1.7rem;

}

.stage-desc{
	font-size: 1.1rem;
}
.carousel-btn-wrapper *{border: 0px solid red}
.carousel-btn-wrapper{
	width:100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;

}

.carousel-btn-container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	margin-right:100px;
	gap:35px;
}

.carousel-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: 50px;
	padding:8px;
	box-shadow: 1px 1px 3px #bbb;

	transition: box-shadow 0.3s;
}

.carousel-btn:hover{
	cursor: pointer;
	box-shadow: 1px 2px 4px #aaa;

}

.carousel-btn:hover .carousel-icon{
opacity:1;

}



.carousel-icon{
	width:30px;
	opacity:0.7;
	transition: opacity 0.3s;
}



/*@media (max-width: 1201px) {
    .stages-container {
      grid-template-columns: repeat(10, 1fr);
    }
}

@media (max-width: 1200px) {
    .stages-container {
      grid-template-columns: repeat(10, 1fr);
    }
}

@media (max-width: 750px) {
    .stages-container {
      grid-template-columns: repeat(10, 1fr);
    }

    .fakestage{
    	width:130px;
    }
}*/