:root {
	--black: #000000;
	--yellow: #e4c14d;
	--medium-yellow: #d38e3d;
	--light-red: #b76969;
	--red: #500e12;
	--dark-red: #3b0408;
	--light-brown: #2d2104;
	--dark-brown: #150e01;
	--dark-green: #042a14;
	--light-green: #00db00;
	--white: white;
	--dark-orange: #523616;
	--other-brown: #3f320c;
}

@font-face {
	font-family: "Erstoria";
	src: url("fonts/erstoria.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

.dm-serif-text-regular {
	font-family: "DM Serif Text", serif;
	font-weight: 400;
	font-style: normal;
  }
  
  .dm-serif-text-regular-italic {
	font-family: "DM Serif Text", serif;
	font-weight: 400;
	font-style: italic;
  }
  

html{
	overflow: -moz-scrollbars-vertical; 
	overflow-y: scroll;
	-webkit-overflow-scrolling: auto;
	overflow-x: hidden;
	flex-shrink: 0;
	scroll-behavior: smooth;
}

body {
	background-color: var(--black);
	color: white;
	font-family: "Montserrat", sans-serif;
	text-align: center;
	line-height: 1.5;
	font-weight: 100;
	margin: 0;
}

strong {
    font-weight: 900;
}

b {
    font-weight: 900;
}

img {
	max-width: 100%;
	user-select: none;
}

h3 {
	text-align: center;
	font-weight: 100;
	font-size: 2rem;
	line-height: 1.05;
}

h4 {
	text-align: center;
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1.05;
}

p {
	text-align: justify;
}


button{
	font-size: 1rem;
	cursor: pointer;
	

}
.fancy {
	font-family: "Erstoria", "DM Serif Text", sans-serif; /* Fallback to sans-serif if Erstoria is unavailable */
	font-size: 2.3rem;
}

.mentor-name {
	font-size: 1.5rem;
}

.content {
	text-align: center;
	margin: auto;
}

.yellow {
	color: var(--yellow);
}

.bg-yellow-gradient {
    background: linear-gradient(
        to right,
        transparent 0%, 
        var(--other-brown) 20%, /* Full dark-orange */
        var(--other-brown) 80%, /* Extend the dark-orange area */
        transparent 100%
    );
}




#hero .content {
	position: relative;
}

.taper-top,
.taper-bottom {
	width: 100%; /* Ensure the taper covers the full width */
	height: 60px;
	background: linear-gradient(to right, var(--red), var(--black));
}

.taper-top {
	transform: rotate(-2.5deg);
	z-index: 2;
	margin-top: -80px;
}

.taper-bottom {
	transform: rotate(2.5deg);
	z-index: 1;
	filter: sepia(100%) blur(3px); /* Apply full sepia and a 5px blur */
	
}

.taper-top .taper-content,
.taper-bottom .taper-content {
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	width: 200%; /* Double width to allow for seamless looping */
	height: 100%;
	animation: moveTaper 25s linear infinite; /* Seamless animation */
}

.taper-top .taper-content img,
.taper-bottom .taper-content img {
	height: 100%;
	object-fit: cover; /* Ensure the image scales properly */
}

@keyframes moveTaper {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.flare-container {
	position: relative;
	overflow: hidden; /* Ensure the flares stay within the container */
	background: url("images/circle-bg-rounded.webp") no-repeat center center;
	background-size: 1200px; /* Adjust to cover the entire container */
	background-position: 50% 32%;
}

.flare-overlay {
	position: absolute;
	width: 1000px; /* Size of the flare image */
	height: 1000px; /* Size of the flare image */
	background: url("images/flare.webp") no-repeat center center;
	background-size: contain; /* Ensure the image scales correctly */
	opacity: 0.7; /* Base opacity for the flare */
	pointer-events: none;
	animation: moveAndRotateTopLeft 12s infinite ease-in-out, glow 2s infinite alternate;
	/* Combines movement and rotation, plus glow */
	z-index: 3;
}

.flare-container-what-is {
	position: relative;
	overflow: hidden; /* Ensure the flares stay within the container */
	background: url("images/Vozes de Sucesso - Assinatura - Fundo.webp") no-repeat center center;
	background-size: 800px; /* Adjust to cover the entire container */
	background-position: 150% 22%;
}

.flare-top-left {
	top: -200px;
	left: -200px;
	animation: moveAndRotateTopLeft 12s infinite ease-in-out, glow 2s infinite alternate;
}

.flare-bottom-right {
	bottom: -200px;
	right: -200px;
	animation: moveAndRotateBottomRight 14s infinite ease-in-out, glow 2s infinite alternate;
}

@keyframes moveAndRotateTopLeft {
	0% {
		transform: translate(0, 0) rotate(0deg); /* Start at top-left */
	}
	25% {
		transform: translate(50%, 10%) rotate(90deg); /* Move and rotate */
	}
	50% {
		transform: translate(-20%, 60%) rotate(180deg); /* Move and rotate */
	}
	75% {
		transform: translate(40%, 40%) rotate(270deg); /* Move and rotate */
	}
	100% {
		transform: translate(0, 0) rotate(360deg); /* Return to start */
	}
}

@keyframes moveAndRotateBottomRight {
	0% {
		transform: translate(0, 0) rotate(0deg); /* Start at bottom-right */
	}
	25% {
		transform: translate(-30%, -20%) rotate(90deg); /* Move and rotate */
	}
	50% {
		transform: translate(-50%, -60%) rotate(180deg); /* Move and rotate */
	}
	75% {
		transform: translate(-10%, -40%) rotate(270deg); /* Move and rotate */
	}
	100% {
		transform: translate(0, 0) rotate(360deg); /* Return to start */
	}
}

@keyframes glow {
	0% {
		opacity: 0.05; /* Start with 5% opacity */
	}
	100% {
		opacity: 0.2; /* Increase to 20% opacity */
	}
}

.logo {
	width: 400px;
	max-width: 80%;
	text-align: center;
	margin: auto;
	padding: 60px 0 30px;
}

#intro {
	text-align: center;
	background-image: url(images/Assinatura\ Lateral\ -\ Vozes\ de\ Sucesso\ -\ Branco.webp);
	background-repeat: no-repeat;
	background-size: 200px;
	background-position: 0% 23%;
}

.text-intro {
}

.cta-button {
	display: inline-block;
	padding: 1px;
	border-radius: 30px; /* Adjust the radius */
	background: linear-gradient(to right, white, black);
}

.cta-hero {
	font-weight: 900;
	text-transform: uppercase;
	padding: 10px 20px;
	color: var(--red);
	background-color: var(--yellow);
	border: none;
	border-radius: 30px; /* Same radius as wrapper */
	cursor: pointer;
}
.cta-discount {
	font-weight: 900;
	text-transform: uppercase;
	padding: 10px 20px;
	color: var(--red);
	background-color: var(--yellow);
	border: none;
	border-radius: 30px; /* Same radius as wrapper */
	cursor: pointer;
}

.button-holder {
	margin: auto;
	margin-bottom: 40px;
	max-width: 80%;
}


.text-intro {
	max-width: 65%;
	margin: auto;
	text-align: justify;
	font-weight: 100;
	padding: 10px 0 60px 0;
}

.video {
	position: relative;
	width: 80%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625 * 100 = 56.25) */
	height: 0;
	overflow: hidden;
	margin: auto;
	z-index: 4;
}

.video-container {
	position: relative;
	display: inline-block;
	width: 80%;
	max-width: 100%; /* Ensures responsiveness */
	margin: auto;
  }
  
  #video {
	display: block;
	width: 100%; /* Ensures the video fits within the container */
	height: auto;
  }
  
  .play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url('images/play-button-icon.webp') no-repeat center center;
	background-size: 50px 50px; /* Adjust the size of the icon */
	border: none;
	width: 80px;
	height: 80px;
	cursor: pointer;
	outline: none;
	z-index: 2;
  }
  
  .play-button:focus {
	outline: none;
  }
  
  /* Only hide the native play button overlay, keep other controls intact */
  #video::-webkit-media-controls-overlay-play-button {
	display: none !important;
  }
  
  #video::-webkit-media-controls-start-playback-button {
	display: none !important;
  }
  

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80%;
	border: 0; /* Optional: remove the iframe border */
}

.light-brown {
	color: var(--light-brown);
}

#about {
	background: rgb(57, 43, 8);
	background: linear-gradient(90deg, rgba(57, 43, 8, 1) 33%, rgba(23, 14, 1, 1) 79%);
	padding: 40px;
	position: relative;
	border-left: none;
	border-right: none;
	border-top: 5px solid transparent; /* Adjust thickness */
	border-bottom: 5px solid transparent; /* Adjust thickness */
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-image: linear-gradient(to right, var(--yellow), white, var(--yellow)), /* Top border */ linear-gradient(to right, var(--yellow), white, var(--yellow)), /* Bottom border */ linear-gradient(90deg, rgba(57, 43, 8, 1) 33%, rgba(23, 14, 1, 1) 79%); /* Background */
	background-size: 100% 9px, 100% 4px, 100% 100%; /* First two for borders, third for background */
	background-position: top left, bottom left, left top;
	background-repeat: no-repeat;
}

.discovery p {
	margin-top: -20px;
	text-align: justify;
}

.discovery {
	margin: auto;
	max-width: 80%;
}

.discovery h3 {
	font-weight: 900;
}

#what-is {
}

.what-is-intro {
	margin: auto;
	max-width: 65%;
}

.what-is-outro {
	margin: auto;
	max-width: 65%;
}

.what-is-cta {
	padding: 30px 0 30px;
	max-width: 80%;
	margin: auto;
}

.what-is-cta h3 {
	font-weight: 900;
}

#mentors-bio {
	text-align: center;
	background-image: url(images/Assinatura\ Lateral\ -\ Vozes\ de\ Sucesso\ -\ Dourado.webp);
	background-repeat: no-repeat;
	background-size: 200px;
	background-position: 100% 0%;
}

.mentors-cards-box {
	max-width: 1200px;
	width: 80%;
	margin: 0 auto; /* Center the box horizontally */
	background: linear-gradient(to right, var(--black), var(--black)); /* Gradient background */
	padding: 60px 60px 60px 60px; /* Optional: Add padding around the content */
	border-radius: 50px; /* Optional: Add rounded corners */
	border: solid 30px var(--dark-red);
}

.mentors-content {
	display: flex;
	height: 100%;
}

.mentors-card {
	background-color: var(--black);
	display: flex;
	flex-direction: row;
	padding: 30px; /* Adjust padding as needed */
	border-radius: 15px; /* Optional: Add rounded corners to the card */
	color: white; /* Optional: Ensure text is readable against the black background */
}

.mentors-bio-img img {
	width: 100%;
	border: solid 1px var(--dark-brown);
	border-radius: 20px;
}

.mentors-bio-img {
	width: 50%;
	margin: auto;
	margin-right: 20px; /* Space between image and text */
}

.mentors-bio-text h2 {
	margin: 0;
	margin-bottom: 10px;
}

.mentors-bio-text p {
	margin: 0;
	font-size: 0.7em;
	padding: 17px;
}

.mentors-bio-text {
	width: 50%;
	max-height: 600px;
	overflow-y: scroll;
	scrollbar-color: rgb(255, 255, 255) rgb(54, 54, 54);
	scrollbar-width: thin;
}

.card-carroussel-buttons {
	display: flex;
	flex-direction: row;
	justify-content: center; /* Center the dots */
	margin-top: 20px; /* Space above the dots */
}

.card-carroussel-buttons p {
	margin: 0 5px; /* Space between the dots */
	font-size: 0.7em;
	color: var(--light-grey); /* Default color for inactive dots */
	cursor: pointer;
}

.card-active {
	color: var(--red) !important; /* Active dot color */
}

.mentors-cards-wrapper,
.mentors-card,
.mentors-card * {
    user-select: none; /* Prevent text selection for all child elements */
}

#steps-intro {
    background: black; /* Keep the background color as black */
    padding: 40px;
    position: relative;
    border-left: none;
    border-right: none;
    border-top: 12px solid transparent; /* Adjust thickness */
    border-bottom: 5px solid transparent; /* Adjust thickness */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image: 
        linear-gradient(to right, var(--yellow), white, var(--yellow)), /* Top border */
        linear-gradient(to right, var(--yellow), white, var(--yellow)), /* Bottom border */
        url('images/Nível Avançado - Assinatura Borrada.webp'), /* Bottom-left image */
        linear-gradient(90deg, rgb(0, 0, 0) 33%, rgb(0, 0, 0)); /* Original Background Gradient */;
    background-size: 100% 10px, 100% 0px, 500px, 105% 105%; /* Adjust the first two for border height, third for the image, fourth for the gradient */
    background-position: top left, bottom left, center left, left top; /* Positioning the layers */
    background-repeat: no-repeat;
    z-index: 1; /* Ensure it stays above any other elements as needed */
}


#steps-carroussel-intro {
	position: relative;
	padding: 60px; /* Adjust padding as needed */
	
	background: linear-gradient(to right, var(--dark-green) 0%, var(--black) 100%);no-repeat bottom left;

	border-top: 5px solid transparent; /* Set a transparent border first */
	background-origin: border-box;
	background-clip: padding-box, border-box;

	overflow: hidden; /* Ensures content stays within the div */
	z-index: 2;
}

#steps-carroussel-intro::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("images/Nível Iniciante - Assinatura Borrada.webp") ;
	background-size: auto 50%;
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0.8; /* Adjust opacity for the overlay */

	z-index: 1; /* Position the overlay above the background image but below 
	content */
	background-position: left bottom;
}
#steps-carroussel-medium {
	position: relative;
	padding: 60px; /* Adjust padding as needed */
	
	background: linear-gradient(to right, var(--yellow) 0%, var(--black) 100%);no-repeat bottom left;

	border-top: 5px solid transparent; /* Set a transparent border first */
	background-origin: border-box;
	background-clip: padding-box, border-box;

	overflow: hidden; /* Ensures content stays within the div */
	z-index: 2;
}

#steps-carroussel-medium::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("images/Nível\ Intermediário\ -\ Assinatura\ Borrada.webp") ;
	background-size: auto 50%;
	background-repeat: no-repeat;
	opacity: 0.8; /* Adjust opacity for the overlay */
	pointer-events: none;
	z-index: 1; /* Position the overlay above the background image but below 
	content */
	background-position: left bottom;
}
#steps-carroussel-advanced {
	position: relative;
	padding: 60px; /* Adjust padding as needed */
	
	background: linear-gradient(to right, var(--red) 0%, var(--black) 100%);no-repeat bottom left;

	border-top: 5px solid transparent; /* Set a transparent border first */
	background-origin: border-box;
	background-clip: padding-box, border-box;

	overflow: hidden; /* Ensures content stays within the div */
	z-index: 2;
}

#steps-carroussel-advanced::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("images/Nível\ Avançado\ -\ Assinatura\ Borrada.webp") ;
	background-size: auto 50%;
	background-repeat: no-repeat;
	opacity: 0.8; /* Adjust opacity for the overlay */
	pointer-events: none;
	z-index: 1; /* Position the overlay above the background image but below 
	content */
	background-position: left bottom;
}

.carroussel-modules::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px; /* Adjust the height of the border */
	background: linear-gradient(to right, var(--dark-brown) 0%, var(--light-brown) 50%, var(--dark-brown)100% );
	z-index: 1; /* Ensure it stays on top of the content but below other pseudo-elements if any */

}

.carousel-top {
	display: none;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "left right";
	max-width: 800px;
	gap: 20px;
	margin: auto;
}
.carousel-top.active {
	display: grid;
}
.carousel-top-left {
	grid-area: left;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.carousel-top-left > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;

}
.carousel-top-right {
	grid-area: right;
	color: #fff;
	max-height: 400px;
	display: flex;
	flex-direction: column;
	text-align: left;
}
.carousel-top-right ul {
	display: block;
	list-style: none;
	padding: 0;
	overflow-y: scroll;
	scrollbar-color: rgb(255, 255, 255) rgb(54, 54, 54);
	scrollbar-width: thin;
	margin-bottom: 0;
}
.carousel-top-right li {
	font-size: 0.6rem;
	margin-bottom: 0.5rem;
}
.carousel-top-right > .h2 {
	color: #00db00;
}
.carousel-top-right > .h1,
.carousel-top-right > .h2 {
	flex-shrink: 0;
	font-weight: 900;
	font-size: 1rem;
	text-align: center;
	line-height: 1.2rem;
}
.carousel-bottom {
	display: flex;
	justify-content: center;
	padding: 20px 0 10px 0;
	z-index: 1;
}
.carousel-bottom img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
	object-position: 10% 100%;
}
.carousel-bottom button {
	background-color: #000;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	width: 150px;
	height: 70px;
	margin: 0 5px 0 5px;
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
	border-radius: 20px;
	z-index: 1;
}
.carousel-bottom .active {
	transition: opacity 0.3s ease-in-out;
	opacity: 0.5;
}

.steps-cta {
	padding: 60px 0 60px 0;
}

.intermediate-yellow {
	color: var(--yellow) !important;
}
.advanced-red {
	color: var(--light-red) !important;
}

#for-who {
	border-top: solid 3px rgba(255, 255, 255, 0.26);

	position: relative;
	overflow: hidden; /* Ensure the background stays within the section */
	background: url("images/flare-2.webp") no-repeat left center;
	background-size: 1800px;
	animation: moveBackground 30s linear infinite; /* Slow-moving animation */
}

#price-carroussel {
	background: linear-gradient(to right, var(--dark-green) 0%, var(--light-green) 50%, var(--black) 100%) top/100% 5px, /* Top border */ linear-gradient(to right, var(--dark-green) 0%, var(--light-green) 50%, var(--black) 100%) bottom/100% 5px, /* Bottom border */ linear-gradient(to right, var(--dark-green) 0%, var(--black) 100%) center/100% 100%; /* Existing background */
	background-repeat: no-repeat;

	padding: 20px; /* Optional: Add padding if needed */
	margin-bottom: -20px;
}
#price-carroussel-medium {
	background: linear-gradient(to right, var(--dark-orange) 0%, rgba(255,255,255, 0.3) 50%, var(--black) 100%) top/100% 5px, /* Top border */ linear-gradient(to right, var(--dark-orange) 0%, rgba(255,255,255, 0.3) 50%, var(--black) 100%) bottom/100% 5px, /* Bottom border */ linear-gradient(to right, var(--dark-orange) 0%, var(--black) 100%) center/100% 100%; /* Existing background */
	background-repeat: no-repeat;

	padding: 20px; /* Optional: Add padding if needed */
	margin-bottom: -20px;
	margin-top: 50px;
}
#price-carroussel-advanced {
	background: linear-gradient(to right, var(--dark-red) 0%, rgba(255,255,255, 0.3) 50%, var(--black) 100%) top/100% 5px, /* Top border */ linear-gradient(to right, var(--dark-red) 0%, rgba(255,255,255, 0.3) 50%, var(--black) 100%) bottom/100% 5px, /* Bottom border */ linear-gradient(to right, var(--dark-red) 0%, var(--black) 100%) center/100% 100%; /* Existing background */
	background-repeat: no-repeat;

	padding: 20px; /* Optional: Add padding if needed */
	margin-bottom: -20px;
	margin-top: 50px;

}

.price-carroussel-card-inside {
	display: flex;
}

.price-carroussel-card-inside ul {
	margin: auto;
	text-align: left;
	line-height: 2;
	list-style: none;
}

#price-carroussel li{
	background: url(images/green-bullet.webp) left center no-repeat;
	padding-left: 44px;
}

#price-carroussel-medium li {
	background: url(images/yellow-bullet.webp) left center no-repeat;
	padding-left: 44px;
}
.price-carroussel-card-inside ul li {
	background: url(images/yellow-bullet.webp) left center no-repeat;
	padding-left: 44px;
}
#price-carroussel-advanced ul li {
	background: url(images/red-bullet.webp) left center no-repeat;
	padding-left: 44px;
}

.price-carroussel-card-inside img {
	max-width: 40%;
	margin: auto;
	padding: 30px;
	z-index: 2;
}

.for-who-list ul {
	list-style: none;
}

.for-who-list li {
	background: url(images/yellow-bullet.webp) left center no-repeat;
	padding-left: 44px;
	line-height: 1.5rem;
	margin-bottom: 15px;
}

@keyframes moveBackground {
	0% {
		background-position: left 35%;
	}
	50% {
		background-position: 50% 50%; /* Moves to the middle horizontally */
	}
	100% {
		background-position: left 35%;
	}
}

.for-who-inner {
	display: flex;
	padding: 60px;
}

.for-who-list {
	text-align: left;
	border: solid 1px rgba(255, 255, 255, 0.392);
	border-radius: 30px;
	padding: 20px;
	line-height: 2;
}

.for-who-title {
	margin: auto;
	margin-right: 20px;
}

.price-carroussel-button-beginner {
	border-radius: 50px;
	background: linear-gradient(to right, var(--dark-green) 0%, var(--light-green) 100%) /* Top border */;
	border: none;
	padding: 15px 30px 15px 30px;
	margin-top: -50px;
	color: var(--white);
	font-weight: 900;
}

.price-carroussel-button-medium {
	border-radius: 50px;
	background: linear-gradient(to right, var(--dark-orange) 0%, var(--medium-yellow) 100%) /* Top border */;
	border: none;
	padding: 15px 30px 15px 30px;
	margin-top: -50px;
	color: var(--white);
	font-weight: 900;
}

.price-carroussel-button-advanced {
	border-radius: 50px;
	background: linear-gradient(to right, var(--dark-red) 0%, var(--red) 100%) /* Top border */;
	border: none;
	padding: 15px 30px 15px 30px;
	margin-top: -50px;
	color: var(--white);
	font-weight: 900;
}

.congrats-text {
}

.congrats-text h3 {
	font-weight: 600;
	margin-bottom: 0;
}

.congrats-text p {
	font-weight: 100;
	text-align: center;
	line-height: 1;
	font-size: 1.5rem;
}

.congrats-full-price img {
	max-width: 60%;
}

#upgrade-price {
	background: rgb(57, 43, 8);
	background: linear-gradient(90deg, rgba(57, 43, 8, 1) 33%, rgba(23, 14, 1, 1) 79%);
	padding: 40px;
	position: relative;
	border-left: none;
	border-right: none;
	border-top: 5px solid transparent; /* Adjust thickness */
	border-bottom: 5px solid transparent; /* Adjust thickness */
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-image: linear-gradient(to right, var(--yellow), rgb(61, 54, 43), var(--yellow)), /* Top border */ linear-gradient(to right, var(--yellow), rgb(61, 54, 43), var(--yellow)), /* Bottom border */ linear-gradient(90deg, rgba(57, 43, 8, 1) 33%, rgba(23, 14, 1, 1) 79%); /* Background */
	background-size: 100% 9px, 100% 4px, 100% 100%; /* First two for borders, third for background */
	background-position: top left, bottom left, left top;
	background-repeat: no-repeat;
}

.access-icons {
	display: flex;
	justify-content: center;
}

.access-icons img {
	height: 75px;
	margin-right: 20px;
}

.module-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}

.margin-right-70{
	margin-right: 70px;
}

.module-icon p {
}

.full-cta {
	border-radius: 50px;
	background: linear-gradient(to right, var(--dark-brown) 0%, var(--yellow) 100%) /* Top border */;
	border: none;
	padding: 15px 30px 15px 30px;
	margin-top: 50px;
	color: var(--white);
	font-weight: 900;
}



/* Hover Up */
.hover-up {
	transition: transform 0.3s ease-in-out;
  }
  
  .hover-up:hover {
	transform: translateY(-5px);
  }
  
  .hover-up:active {
	transform: translateY(2px);
  }
  
  /* Hover Zoom */
  .hover-zoom {
	transition: transform 0.8s ease-in-out;
  }
  
  .hover-zoom:hover {
	transform: scale(1.03);
  }
  
  .hover-zoom:active {
	transform: scale(1.03);
  }
  
  /* Animated Bounce */
  .animated-bounce {
	animation: bounce 10s ease-in-out infinite;
  }
  
  @keyframes bounce {
	0%, 100% {
	  transform: translateY(0);
	}
	50% {
	  transform: translateY(-15px);
	}
  }
  
  /* Hover Glow */
  .hover-glow {
	transition: box-shadow 0.3s ease-in-out;
  }
  
  .hover-glow:hover {
	box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);
  }
  
  .hover-glow:active {
	box-shadow: 0 0 15px 7px rgba(255, 255, 255, 1);
  }
  
  /* Hover Pop Color */
  .hover-pop-color {
	transition: filter 0.3s ease-in-out;
  }
  
  .hover-pop-color:hover {
	filter:grayscale(1);
  }
  
  .hover-pop-color:active {
	filter:grayscale(0);
  }

  .price-carroussel-content{
	padding-bottom: 60px;
  }

  #congrats-reveal{
	border-radius: 50px;
	background: linear-gradient(to right, var(--dark-brown) 0%, var(--yellow) 100%) /* Top border */;
	border: none;
	padding: 15px 30px 15px 30px;
	margin-top: -50px;
	color: var(--white);
	font-weight: 900;
  }

  #congrats-button {
    transition: opacity 0.5s ease-in-out;
}

#congrats-content {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
  

  #whatsapp {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 3;
	text-align: right;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#whatsapp img {
	max-height: 60px;
}

#whatsapp p {
	font-size: 0.5rem;
	text-align: right;
	margin-top: -7px;
}


#faq{
	background: linear-gradient(to right, var(--red), var(--black));
	padding-bottom: 100px;
	margin-top: -30px;
}

.faq-section {
	width: 80%;
	padding-top: 100px;
}
  
  .faq-item {
	margin-bottom: 35px;
  }
  
  .faq-header {
	display: flex;
	align-items: center;
	cursor: pointer;
  }
  
  .faq-number {
    background: white;
    color: var(--black);
    border-radius: 50%;
    width: 80px;       /* Circle size */
    height: 80px;      /* Ensure width and height are equal for a perfect circle */
    display: flex;     /* Flexbox to center content */
    align-items: center;  /* Vertically center the number */
    justify-content: center;  /* Horizontally center the number */
    margin-right: -20px;
    font-weight: bold;
    font-size: 1.7em;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Optional: Add a subtle shadow for depth */
}

  
  .faq-title-container {
	text-align: left;
	display: flex;
	align-items: center;
	background: linear-gradient(
		to right, 
		transparent 0%, 
		var(--red) 10%, 
		var(--dark-orange) 70%, 
		transparent 100%
	);
	padding: 10px 20px;
	border-radius: 5px;
  }
  
  .faq-title {
	color: white;
	font-size: 1em;
	margin-right: 40px;
	margin-left: 30px;
	text-transform: uppercase;
  }
  
  .faq-arrow {
	color: white;
	font-size: 1.2em;
	transition: transform 0.3s ease-in-out;
	margin-right: 20px;
  }
  
  .faq-content {
	max-height: 0;
	overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
	padding-left: 45px; /* Align with the title */
	padding: 0 20px;
	font-size: 0.8rem;
  }
  
  .faq-item.active .faq-content {

    padding: 10px 20px;
}
  
  .faq-item.active .faq-arrow {
	transform: rotate(180deg);
  }
  

.congrats-show {
	max-width: 80%;
	margin: auto;
	margin-top: 60px;
	margin-bottom: 30px;
	font-weight: 100;
}

.mentors-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.mentors-cards-wrapper {
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    cursor: grab; /* Indicate draggable area */
}

.mentors-cards-box {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition for sliding */
    position: relative;
}

.mentors-card {
    min-width: 100%; /* Ensure each card takes full width */
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
}

.mentors-card.active img{
	pointer-events: none;

}

.mentors-card.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    transition: opacity 0.5s ease-in-out;
}


.carousel-arrow {
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.3s ease;
    position: absolute;
    top: 50%;
}

.left-arrow {
    left: 15px;
}

.right-arrow {
    right: 15px;
}

.carousel-arrow:hover {
    transform: translateY(-5px); /* Slight zoom on hover */
}

.card-carroussel-buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.card-carroussel-buttons p {
    margin: 0 5px;
    font-size: 0.5rem;
    color: var(--light-grey); /* Default color for inactive dots */
    cursor: pointer;
    transition: color 0.3s ease;
}

.card-carroussel-buttons .card-active {
    color: white; /* Active dot color */
}


#payment{
	margin-top: 80px;
}

.payment-buttons{
	display: flex;
	width: 70%;
	margin: auto;
	margin-bottom: 40px;
	column-gap: 5%;
}

.payment-buttons button {
	padding: 5px;
	background-color: var(--black);
	border: none;
	transition: all ease-in-out 0.3s;
}

.payment-buttons button:hover{
	transform: scale(1.05);
}

#content-frame{
	height: 1900px;
}

/* Big screens (Desktops and larger) */
@media screen and (min-width: 1200px) {
	/* Styles for big screens */
	html {
		font-size: 28px;
	}
	.content {
		max-width: 1200px;
	}

	.flare-container-what-is {
		background-position: 100% 22%;
	}

	/* Add other styles specific to big screens here */
}

/* Medium screens (Tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	/* Styles for medium screens */
	html {
		font-size: 22px;
	}
	.content {
		width: 100%;
		max-width: 1200px;
	}

	.mentors-bio-text {
		max-height: 350px;
	}

	.mentors-cards-box {
		max-width: 1200px;
		width: 70%;
		padding: 0;
	}
.faq-section{
margin: auto;
}
.left-arrow {
    left: 5%;
}

.right-arrow {
    right: 5%;
}
	/* Add other styles specific to medium screens here */
}

/* Small screens (Mobile devices) */
@media screen and (max-width: 767px) {
	.left-arrow {
		left: 7%;
	}
	
	.right-arrow {
		right: 7%;
	}
	/* Styles for small screens */
	html {
		font-size: 18px;
	}
	.content {
		width: 100%;
	}
	.mentors-content {
		flex-direction: column;
	}
	.mentors-bio-img {
		width: 100%;
	}
	.mentors-bio-text {
		width: 100%;
		max-height: 250px;
	}

	.mentors-bio-text p {
		font-size: 1rem;
	}

	.carousel .active {
		display: flex;
		flex-direction: column;
	}

	.carousel-top-right li {
		font-size: 1.3rem;
		margin-bottom: 1rem;
	}

	.carousel-top-right > .h1,
	.carousel-top-right > .h2 {
		font-size: 2rem;
	}
	#intro {
		background-size: 110px;
		background-position: 0% 44%;
	}

	.mentors-bio-img{
		margin-bottom: 40px;
	}

	.flare-container{
		background-position: 50% -60%;
	}

	.for-who-inner{
		flex-direction: column;
	}
	.price-carroussel-card-inside{
		flex-direction: column;
		padding-bottom: 30px;
	}

	.price-carroussel-card-inside img{
		max-width: 60%;
	}

	.taper-top,
.taper-bottom {
	height: 35px;
}

	.taper-top{
		margin-top: -60px;
	}

	.taper-bottom {
		margin-bottom: -10px;
	}
	.logo{
		max-width: 50%;
	}

	.carousel-top-right > .h2{
		line-height: 2rem;
	}
	.carousel-top-right > .h1 {
		margin-bottom: 25px;
	}

	.access-icons{
		flex-direction: column;
	}
	.margin-right-70{
		margin-right: 0;
		margin-bottom: 20px;
	}

	.mentors-cards-box {
		max-width: 1200px;
		width: 70%;
		border-radius: 50px;
		padding: 0;
	}

	.faq-section{
		margin: auto;
	}

	.mentors-card{
		padding: 5px;
	}

	.payment-buttons{
		width: 100%;
		margin: auto;
		margin-bottom: 40px;
		column-gap: 1%;
	}

	/* Add other styles specific to small screens here */
}