body {margin: 0}
article,aside,header,nav,section {display: block}

body {
    font-weight: normal;
    line-height: 1;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: none}
	
body {
overflow-x: hidden;}

.backg{margin:-5px -5px; height: 100vh; background: #dadada80;}
.aligncenter{text-align: center;}

#menu {z-index: 2;}#menu-bar {width: 45px;height: 40px;margin: 30px 0 20px 20px;cursor: pointer;position: fixed;}
.bar {height: 5px;width: 100%;background-color: #006633CC;display: block;border-radius: 5px;transition: 0.9s ease;}#bar1 {transform: translateY(-4px);}#bar3 {transform: translateY(4px);}.nav {transition: 0.9s ease;display: none;}.nav ul {padding: 40px 22px;}.nav li {list-style: none;padding: 12px 0;}
.nav li a {color: white; font-family: "montserrat-medium", sans-serif;font-size:20px;text-decoration: none;}.nav li a:hover {color: #589F91;}.menu-bg, #menu {top: 0;right:30;position: fixed;}
.menu-bg {z-index: 1;width: 0;height: 0;margin: 30px 0 20px 20px;background: radial-gradient(circle, #006633CC, #006633CC);border-radius: 1%;transition: 0.3s ease;}.change {display: block;}.change .bar {background-color: white;}.change #bar1 {transform: translateY(4px) rotateZ(-45deg);}.change #bar2 {opacity: 0;}.change #bar3 {transform: translateY(-6px) rotateZ(45deg);}.change-bg {width: 6000px;height: 6000px;transform: translate(-60%,-30%);}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  vertical-align: middle;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 1px;
  color: #006633;
  font-weight: bold;
  font-size: 40px;
  transition: 0.6s ease;
  border-radius: 24px 24px 24px 24px;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 24px 24px 24px 24px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #b2b2b2;
}



/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #006633;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #e30617;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}





@layer demo {
	.carousel {
		--items: 22;
		--carousel-duration: 90s;
		@media (width > 600px) {
			--carousel-duration: 90s;
		}
		--carousel-width: min(
			90vw,
			1200px
		); /* note - it will "break" if it gets too wide and there aren't enough items */
		--carousel-item-width: 342px;
		--carousel-item-height: 155px;
		--carousel-item-gap: 2rem;

		--clr-cta: rgb(0, 132, 209);

		position: relative;
		width: var(--carousel-width);
		height: var(--carousel-item-height);
		overflow: clip;

		&[mask] {
			/* fade out on sides */
			mask-image: linear-gradient(
				to right,
				transparent,
				black 10% 90%,
				transparent
			);
		}

		&[reverse] > article {
			animation-direction: reverse;
		}
	}
	.carousel > article {
		position: absolute;
		top: 0;
		left: calc(100% + var(--carousel-item-gap));
		width: var(--carousel-item-width);
		height: var(--carousel-item-height);
		display: grid;
		grid-template-rows: 200px auto 1fr auto;
		gap: 0.25rem;

		/* animation */
		will-change: transform;
		animation-name: marquee;
		animation-duration: var(--carousel-duration);
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-delay: calc(
			var(--carousel-duration) / var(--items) * 1 * var(--i) * -1
		);
		&:nth-child(1) {
			--i: 0;}
		&:nth-child(2) {
			--i: 1;}
		&:nth-child(3) {
			--i: 2;}
		&:nth-child(4) {
			--i: 3;}
		&:nth-child(5) {
			--i: 4;}
		&:nth-child(6) {
			--i: 5;}
		&:nth-child(7) {
			--i: 6;}
		&:nth-child(8) {
			--i: 7;}
		&:nth-child(9) {
			--i: 8;}
		&:nth-child(10) {
			--i: 9;}
		&:nth-child(11) {
			--i: 10;}
		&:nth-child(12) {
			--i: 11;}
		&:nth-child(13) {
			--i: 12;}
		&:nth-child(14) {
			--i: 13;}
		&:nth-child(15) {
			--i: 14;}
		&:nth-child(16) {
			--i: 15;}
		&:nth-child(17) {
			--i: 16;}
		&:nth-child(18) {
			--i: 17;}
		&:nth-child(19) {
			--i: 18;}
		&:nth-child(20) {
			--i: 19;}
		&:nth-child(21) {
			--i: 20;}
		&:nth-child(22) {
			--i: 21;}
		&:nth-child(23) {
			--i: 22;}
	}
	.carousel span {
		width: 100%;
		height: 100%;
		object-fit: cover;

	}
	.carousel > article > *:not(span) {
		padding: 0 1rem;
	}
	.carousel > article > div {
		grid-row: span 2;
		display: grid;
		grid-template-rows: subgrid;
		font-size: 0.8rem;
	}
	

	@keyframes marquee {
		100% {
			transform: translateX(
				calc(
					(var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) *
						-1
				)
			);
		}
	}
}

[data-aos][data-aos][data-aos-delay='300'],
body[data-aos-delay='300'] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay='300'].aos-animate,
body[data-aos-delay='300'] [data-aos].aos-animate {
    transition-delay: .3s
}

[data-aos][data-aos][data-aos-duration='600'],
body[data-aos-duration='600'] [data-aos] {
    transition-duration: .6s
}

[data-aos][data-aos][data-aos-duration='3000'],
body[data-aos-duration='3000'] [data-aos] {
    transition-duration: 3s
}

[data-aos][data-aos][data-aos-easing=ease-in-sine],
body[data-aos-easing=ease-in-sine] [data-aos] {
    transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715)
}

[data-aos][data-aos][data-aos-easing=ease-out-cubic],
body[data-aos-easing=ease-out-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

[data-aos^=fade][data-aos^=fade] {
    opacity: 0;
    transition-property: opacity, transform
}

[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translate(0)
}

[data-aos=fade-up] {
    transform: translateY(100px)
}

[data-aos^=zoom][data-aos^=zoom] {
    opacity: 0;
    transition-property: opacity, transform
}

[data-aos^=zoom][data-aos^=zoom].aos-animate {
    opacity: 1;
    transform: translate(0) scale(1)
}

[data-aos=zoom-in] {
    transform: scale(0.6)
}

[data-aos^=flip][data-aos^=flip] {
    backface-visibility: hidden;
    transition-property: transform
}

[data-aos=flip-left] {
    transform: perspective(2500px) rotateY(-100deg)
}

[data-aos=flip-left].aos-animate {
    transform: perspective(2500px) rotateY(0)
}