@import url("https://fonts.googleapis.com/css2?family=Changa:wght@200..800&display=swap");

:root {
	--black: #222222;
	--white: white;
	--yellow: #e6a000;
	--blue: #064471;
	--orange-1: #e3822e;
	--orange-2: #ed3d00;
	--radius-sm: 6px;
	--radius-md: 16px;
	--radius-lg: 24px;
}

html,
body {
	font-family: "Changa", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	color: var(--black);
	font-size: 16px;
}

h1 {
	font-family: "Changa", serif;
	font-weight: 600;
	font-style: normal;
	font-size: 2.8rem;
	line-height: 110%;
}
b {
	font-weight: 600;
}
p {
	font-size: 1.8rem;
	line-height: 130%;
}

.lines-1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}
.lines-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}

.spacing {
	padding: 6rem 0;
}
.pt-6 {
	padding-top: 4rem;
}
.pb-6 {
	padding-bottom: 4rem;
}
.pt-7 {
	padding-top: 6rem;
}
.pb-7 {
	padding-bottom: 6rem;
}
@media (min-width: 991px) {
	.pt-lg-7 {
		padding-top: 6rem !important;
	}
	.pb-lg-7 {
		padding-bottom: 6rem !important;
	}
}
@media (min-width: 768px) {
	.pt-md-7 {
		padding-top: 6rem !important;
	}
	.pb-md-7 {
		padding-bottom: 6rem !important;
	}
}

@media (max-width: 575px) {
	h1 {
		font-size: 2.4rem;
	}
	.spacing {
		padding: 4rem 0;
	}
}

/* nav */
.navbar {
	background-color: var(--yellow);
}
.navbar-brand img,
.offcanvas-title img {
	width: 14rem;
}
.nav-link {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--white);
	padding: 0.7rem 1.2rem !important;
	border-radius: var(--radius-sm);
}
.nav-link:hover {
	color: var(--white);
	opacity: 0.8;
}
.nav-link.button {
	padding: 0.7rem 2rem !important;
	background-color: var(--blue);
	justify-content: center;
	align-items: center;
	display: flex;
	clip-path: polygon(0 0, 96% 0, 100% 15%, 100% 100%, 4% 100%, 0 85%);
}
.navbar-toggler {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	border: none;
	box-shadow: none !important;
}
.offcanvas {
	background-color: var(--yellow);
}
@media (max-width: 991px) {
	.offcanvas-body .navbar-nav {
		width: 100%;
	}
}

/* hero */

.hero img {
	object-fit: cover;
	width: 100%;
	min-height: 20rem;
}
@media (max-width: 575px) {
	.hero img {
		min-height: 15rem;
		object-position: 30% 0;
	}
}

/* places */

.places {
	background: url("img/bg.png") center/cover;
	/*background-position: bottom;*/
	padding-top: 8rem;
	padding-bottom: 30rem;
}
.places .sec-1 h1 {
	font-weight: 700;
	margin-bottom: -0.2rem;
}
.places .sec-1 span {
	background-color: var(--yellow);
	color: var(--white);
	font-weight: 600;
	font-size: 2.2rem;
	display: inline-block;
	line-height: 100%;
	padding: 0.3rem 0.8rem;
}
.places .sec-1 p {
	padding-top: 2rem;
}

.places .sec-2 h1 {
	color: var(--orange-2);
	line-height: 100%;
	font-size: 3rem;
}
.places .sec-2 header {
	display: flex;
	padding-bottom: 2rem;
}
.places .line {
	margin-top: 1rem;
	transform: translateX(-2rem);
	background: url("img/line.png") top/contain;
	background-repeat: no-repeat;
	flex: 1;
}
.places .globe {
	margin-top: -4rem;
	width: 11rem;
	height: 11rem;
	background-repeat: no-repeat;
	background: url("img/globe.png") center/cover;
}
.places .photo {
	padding-top: 2rem;
}
.places .photo img {
	width: 100%;
	transition: all ease 200ms;
}
.places .photo img:hover {
	transform: scale(1.05);
	filter: drop-shadow(0px 7px 29px rgba(100, 100, 111, 0.2));
}
.places .more {
	background-color: var(--orange-2);
	color: var(--white);
	font-weight: 600;
	font-size: 2.2rem;
	display: inline-block;
	line-height: 100%;
	padding: 0.4rem 1rem;
	margin: 0 auto;
	text-align: center;
}

@media (max-width: 575px) {
	.places {
		padding: 4rem 0 30rem 0;
	}
	.places .line {
		display: none;
	}
	.places header {
		flex-direction: column-reverse;
	}
	.places .globe {
		margin-bottom: 2rem;
	}
}

/* orange */

.orange {
	background: url("img/bg2.png") center/cover;
	padding-top: 8rem;
	padding-bottom: 18rem;
}
.orange .hosting {
	margin-top: -30rem;
}
.orange .hosting .box {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: var(--radius-lg);
	padding: 3rem;
}
.orange .hosting h1 {
	color: var(--orange-2);
}
.orange .hosting a {
	color: var(--orange-2);
	text-decoration: none;
}
#carousel-1 .slide {
	display: block;
	width: 100%;
	border-radius: var(--radius-md);
	overflow: hidden;
}
#carousel-1 .slide img {
	width: 100%;
	aspect-ratio: 1.7;
	object-fit: cover;
}
.hosting .icons-cont {
	display: flex;
	justify-content: center;
	gap: 3rem;
}
.hosting .icons-cont .icon {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.hosting .icons-cont .icon span {
	line-height: 120%;
	font-weight: 600;
	font-size: 1.8rem;
}
@media (max-width: 575px) {
	.orange .hosting .box {
		padding: 2rem;
	}
	.hosting .icons-cont {
		flex-direction: column;
	}
}
.mentors h1 {
	color: white;
	text-align: center;
}
#carousel-2 img {
	width: 100%;
}
#carousel-2 .text {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#carousel-2 p {
	color: black;
	font-size: 2.1rem;
}
#carousel-2 .name {
	color: white;
	font-size: 2.1rem;
	line-height: 100%;
	font-weight: 600;
}
#carousel-2 .mentors-btn {
	border-radius: var(--radius-sm);
	padding: 0.6rem 1.8rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: white;
	background-color: var(--blue);
	display: inline-block;
	width: fit-content;
}
#carousel-2 .mentors-btn:hover {
	cursor: pointer;
	opacity: 0.8;
}
#videoModal .modal-content {
	background: none;
	border: none;
}
.mentor-video {
	margin: 0 auto;
	max-width: 70rem;
	padding-bottom: 6rem;
	padding-top: 2rem;
}

/* map */

.map {
	background: url("img/bg3.png") center/cover;
	background-attachment: fixed;
	padding-top: 0rem;
	padding-bottom: 12rem;
}
.counter {
	margin-top: -6rem;
	display: flex;
	background-color: var(--yellow);
	padding: 2.5rem 0;
	border-radius: var(--radius-lg);
}
.counter > div {
	padding: 0 4rem;
}
.counter > div:nth-child(1) {
	border-right: 3px solid white;
}
.counter img {
	width: 1.8rem;
	height: 1.8rem;
}
.counter h1 {
	color: white;
	margin: 0;
	font-size: 2.2rem;
}
.counter .num-cont {
	margin-top: 1rem;
	padding: 0 2rem;
}
.counter .num-cont:nth-child(1) {
	border-right: 3px dashed white;
}
.counter .num {
	color: white;
	font-size: 6rem;
	font-weight: 500;
	line-height: 100%;
}
.counter .num-subtitle {
	color: var(--blue);
	font-size: 1.6rem;
	font-weight: 500;
	margin-top: -0.5rem;
}
.counter .date {
	padding-top: 1rem;
	color: white;
	font-size: 2rem;
	font-weight: 500;
}
@media (max-width: 991px) {
	.counter {
		padding: 0rem 0;
		flex-direction: column;
		width: 100%;
	}
	.counter > div:nth-child(1) {
		border-right: none;
		border-bottom: 3px solid white;
	}
	.counter > div {
		padding: 3rem 0;
		width: 100%;
	}
}

/* pricing */

.pricing .box {
	background-color: var(--blue);
	border-radius: var(--radius-lg);
	padding: 3rem;
	margin-top: 6rem;
	color: white;
}
.pricing .investment {
	color: white;
	font-weight: 600;
	margin: 0;
	font-size: 2.2rem;
}
.pricing .price {
	color: white;
	font-weight: 600;
	line-height: 100%;
	margin: 0;
	font-size: 5rem;
}
.pricing .price-subtitle {
	color: white;
	margin: 0;
	font-size: 2rem;
	line-height: 100%;
}
.pricing .price-note {
	color: white;
	margin: 0;
	padding-top: 0.5rem;
	font-size: 1.2rem;
	padding-bottom: 3rem;
	text-align: right;
	width: 100%;
	max-width: 450px;
}
.pricing .logo {
	margin: 0 3rem;
	width: 12rem;
}
.pricing .invest {
	width: 110%;
	z-index: 3;
}
.pricing .invest-2 {
	width: 110%;
	z-index: 4;
	margin-top: -6rem;
}
.pricing .included {
	padding-top: 2rem;
	color: white;
	font-weight: 600;
	margin: 0;
	line-height: 100%;
	font-size: 2.2rem;
}
.pricing .included-2 {
	color: white;
	font-weight: 600;
	margin: 0;
	font-size: 1.6rem;
	line-height: 100%;
	text-align: center;
}
.pricing .yellow-box {
	background-color: var(--yellow);
	display: block;
	width: 100%;
	max-width: 500px;
	border-radius: 1.5rem;
	overflow: hidden;
	padding-bottom: 3.5rem;
	margin-top: 2rem;
}
.pricing .yellow-box img {
	width: 100%;
}
.pricing .yellow-box .splide__pagination {
	bottom: 2.5rem;
}
givebutter-widget {
	width: 420px;
	transform: scale(1.2);
}
@media (max-width: 1200px) {
	givebutter-widget {
		transform: none;
	}
}
@media (max-width: 991px) {
	.pricing .invest {
		width: 100%;
	}
}
@media (max-width: 575px) {
	.pricing .box {
		padding: 2rem;
	}
	.pricing .logo {
		display: none;
	}
}

/* faq */

.faq {
	padding-top: 6rem;
	color: var(--orange-2);
}
.faq h1 {
	padding-left: 3rem;
	font-size: 2.2rem;
}
.faq-cont {
	background-color: white;
	border: 2px solid var(--orange-2);
	border-bottom: none;
	margin-top: 1rem;
}
.faq-sec {
	position: relative;
	padding: 1.5rem 3rem 0 3rem;
	border-bottom: 2px solid var(--orange-2);
}
.faq-sec h2 {
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 1.2rem;
}
@media (max-width: 575px) {
	.faq-sec h2 {
		font-size: 1.6rem;
	}
}
.faq-sec p {
	font-size: 1.6rem;
	display: none;
	padding-bottom: 1.5rem;
}
.faq-sec.open p {
	display: block;
}
.faq-sec .arrow {
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.faq-sec .arrow ion-icon {
	font-size: 1.6rem;
}
.faq-sec .arrow:hover {
	cursor: pointer;
	opacity: 0.8;
}

/* contact */

.contact {
	margin-top: 10rem;
}

.contact .box {
	background-color: var(--yellow);
	border-radius: var(--radius-lg);
	padding: 4rem;
}
.contact .blue {
	line-height: 90%;
	color: var(--blue);
}
.contact .white {
	padding-top: 1rem;
	color: white;
	font-size: 3.6rem;
}
.contact a ion-icon {
	font-size: 1.8rem;
}
.contact a {
	padding: 0.2rem 0;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.4rem;
	color: white;
	text-decoration: none;
}
.contact a:hover {
	opacity: 0.8;
}
.contact input,
textarea {
	width: 100%;
	border: 2px solid var(--orange-2);
	margin-bottom: 1.5rem;
	padding: 0.5rem 1rem;
	font-size: 1.2rem;
}
.contact textarea {
	height: 16rem;
}
.contact .submit {
	background-color: var(--blue);
	color: white;
	border-radius: var(--radius-md);
	width: 100%;
	padding: 0.8rem 1rem;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
}
.contact .submit:hover {
	cursor: pointer;
	opacity: 0.8;
}
@media (max-width: 575px) {
	.contact .box {
		padding: 2rem;
	}
}

/* footer */

footer {
	background-color: var(--orange-1);
	padding: 3rem 1rem;
}
footer * {
	font-size: 1.4rem;
	color: white;
	text-decoration: none;
	line-height: 130%;
}
footer img {
	width: 16rem;
}
footer a {
	display: block;
}
footer a:hover {
	opacity: 0.8;
}
footer a ion-icon {
	color: white;
	font-size: 2rem;
}
footer .small {
	font-size: 1.1rem;
	margin-bottom: 0;
}

/* splide pagination */

.splide__pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	transform: translateY(3.5rem);
}
.splide__pagination__page {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: rgba(var(--black-rgb), 0.2);
	transition: all 0.3s;
	opacity: 1 !important;
	border: 2px solid var(--orange-2);
}
#carousel-2 .splide__pagination__page,
#carousel-3 .splide__pagination__page {
	border-color: white;
}
.splide__pagination__page.is-active {
	background-color: var(--orange-2);
	transform: scale(1);
}
#carousel-2 .splide__pagination__page.is-active,
#carousel-3 .splide__pagination__page.is-active {
	background-color: white;
}
.splide__pagination__page:hover {
	background-color: var(--orange-2);
	transform: scale(1.2);
}
#carousel-2 .splide__pagination__page:hover,
#carousel-3 .splide__pagination__page:hover {
	background-color: white;
}
.splide__arrow {
	background-color: var(--orange-2);
	opacity: 1;
	width: 3.5rem;
	height: 3.5rem;
}
.splide__arrow svg {
	fill: white;
}