/* Change hex colors here */
:root {
    --orange: #f4a261;
    --lightgreen: #cae4c5;
    --darkgreen: #254222;
    --green: #99cc66;
}

.orange {
	color: var(--orange);
}
.lightgreen {
	color: var(--lightgreen);
}
.darkgreen {
	color: var(--darkgreen);
}
.green {
	color: var(--green);
}

/* Button styling 
orange-btn custom-btn, green-btn custom-btn, etc.
*/
.custom-btn a {
    border-radius: 0px;
    color: black;
    font-family: 'MANROPE';
    font-weight: bold;
}

.orange-btn a {
    background-color: var(--orange);
}

.curved-radius {
overflow: hidden;
}

.rel-index-2 {
    z-index: 2;
    position: relative;
}


@keyframes fadeInBottom {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Animation classes */
.fadeInBottom {
    animation: fadeInBottom 2s ease 0s 1 normal forwards;
}
.fadeInLeft {
    animation: fadeInLeft 2s ease 0s 1 normal forwards;
}


/* For full width viewport */
.full-width {
    max-width: 100% !important;
}
.boxed-width {
    padding-right: 10vw !important;
    padding-left: 10vw !important;
}

body {
	background-color: #f6f6f6;
}

.border-left {
    border-left: 5px solid var(--orange);
    padding-left: 16px;
}