@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
html {
	scroll-behavior: auto;
	overflow-x: hidden;
}
.Section2Mobile {
	display: none;
}
.mobileNAV {
	display: none;
}

body {
	background-color: #eaffea;
	margin: 0;
	padding: 0;
}

/*                 WHITE SCROLL BAR           */
::-webkit-scrollbar {
	width: 0px;
	height: 2px;
}

/*               NAVIGATION BAR           */
.Navbar {
	width: 100%;
	background: none;
	
}
.Navbar tr {
	z-index: 10;
	position: absolute;
	top: 0;
		border-bottom: solid 1px #0d5333;
	backdrop-filter: blur(40px);
}
.Navbar tr th {
	width: 0.001%;
	padding-top: 1.5vw;
	padding-bottom: 1vw;
}
.Navbar tr th a {
	animation: load 3s ease-in-out;
	font-weight: 900;
	font-size: 17PX;
	text-decoration: none;
	color: #0d5333	;
	font-family: 'Roboto', sans-serif;
	margin: 0.6vw;
	padding: 0.7vw;
}
.Navbar img {
	width: 2.5vh;
	margin: 0vw;
	padding: 0vw 0.8vw;
}
.Navbar .Nav-logo {
	width: 13.2vh;
}
#link1{

}

@keyframes navscroll {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.Navbar-scroll {
	margin-left: 10%;
	width: 80vw;
	top: 20px;
	animation: navscroll 0.4s alternate ease-in-out;
	z-index: 4;
	position: fixed;
}
.Navbar-scroll tr {
	border: solid 1px #0d5333	;
	border-radius:80px;
	background-color: #e0e3e460;
	backdrop-filter: blur(50px);
}
.Navbar-scroll tr th {
	width: 20%;
	padding-top: 4px;
	padding-bottom: 2px;
	padding-left: 1vw;
}
.Navbar-scroll tr th a {
	font-weight: 600;
	font-size: 15PX;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	margin: 0 0.5vw;
	padding: 0 0.2vw;
}

.Navbar-scroll img {
	width: 2.2vh;
	margin: 0vw;

}

.lines{
	opacity: 0.5;
	z-index: 10;
	top: 0;
	position: fixed;
	right: 0;
	background-repeat: repeat;
	width: 0.6vw;
	background-size: cover;
	height: 100vh;
background-image: url(./img/line.png);	
}
.bgoverlay{
	position: fixed;
	z-index: 0;
	bottom: 0;
	right: 0;
	width: 50vw;
	opacity: 0.3;
}
.back{
	transition: 1s;
	z-index: 14;
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	right: 0;
	background-color: #0d0d0d78;
	box-shadow: inset 0 0 8vw 1px #0d0d0dc2;
	border: none;
	display: none;
	justify-content: center;
	align-items: center;
}
.back i{
	position: absolute;
	bottom: 83vh;
	color: rgb(138, 210, 143);
	font-size: 45px;
}
.modal{	
	transition: 1s;
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	z-index: 15;
position: fixed;
bottom: -300vh;
height: 80VH;
width: 100vw;
border-radius: 4vw 4vw 0 0;
background-color: rgba(240, 251, 231, 0.841);
backdrop-filter: blur(40px);
border-top: solid 1px rgba(255, 255, 255, 0.502);
box-shadow: 0 0 30px 10px #17171737;
}
.modal .titles{
	margin-left: 5vw;
	color: #293e02;
	width: 60vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
}
.modal .titles h1{
	font-family: 'Aboreto', cursive;
	font-weight: 100;
	margin-top: -5vh;
	width: 70%;
	font-size: 50px;
}
.modal .titles h2{
	width:100%;
	margin-top: -0.5vw;
	font-weight: 100;
	font-size: 25px;
	opacity: 1;
}
.modal .titles p{
	margin-top: -0.5vw;
	font-weight: 100;
	width: 55vw;
	font-size: 18px;
	opacity: 0.8;
line-height: 25px;
}
.modal .titles h3{
	font-size: 20px;
	position: absolute;
	top: 6vh;
	right: 5vw;
	color: rgb(90, 166, 95);
	border:solid 1px rgb(90, 166, 95);
	border-radius: 3vw;
	padding: 15px 38px;
}

.modal .p1{
	border-radius: 3vw;
width: 28vw;
margin-top: -5VW;

}
.modal .p2{
	border-radius: 3vw;
width: 10vw;
position: absolute;
top: -8vh;
left: 3vw;
}
.modal .titles ul{
	color: rgb(90, 166, 95);
	margin-bottom: -0.5vw;
	margin-left: -3vw;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: start;
	align-items: center;
}
.modal .titles li{
	justify-content: center;
	align-items: center;
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 1vw;
}
.modal .titles li h4{
	font-size: 15px;

}
.modal .titles li h4 span{
	opacity: 0.8;

}
.modal .titles li img{
	margin-right: 0.3vw;
	aspect-ratio: 3/2;
	object-fit: contain;
	width: 50px;
}
.btnmodal{
	transition: 0.5s;
	margin-top: 2vw;
color: white;
background: linear-gradient(to right, rgb(29, 90, 25), rgb(122, 201, 147));
	border-radius: 2vw 0.5vw 2vw 0.5vw;
      border: none;
	  box-shadow: none;
	height: 60px;
	padding: 0 320px;
}
.btnmodal:hover {
	transition: 0.3s;
	text-shadow: 0 0 50px #ffffff;
	transform: scale(103%);
	box-shadow: 0 0 20px #00000029;
}


/*                 SECTION 1 (HOME)           */
.Section1 {
	overflow: hidden;
	background-image: url("./img/bagckground.png");
	border-bottom: solid 1px #222;
	height: 100vh;
	background-size: cover;
	padding-bottom: 7vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	color: #0d5333	;}

.Section1 h1 {
	font-family: 'Aboreto', cursive;
	letter-spacing: -0.3vh;
	line-height: 110px;
	font-weight: 200;
	font-size:80px;
	width: 60%;
	margin-top: 22vh;
	margin-left: 5vh;}

.Section1 h1 span {font-family: 'Roboto', sans-serif;
	letter-spacing: -0.05vw;
	opacity: 1;
	font-size: 30px;
	font-weight: 100;
}

.Section1 h3 {
	font-size: 2.5vh;
	width: 30%;
	font-weight: 200;
	margin-left: 7vw;}

.Section1 .learnmore {
	opacity: 0.8;
	margin: 7vh 0vh;
	width: 15vw;}

.Section1 .circle {
	opacity: 1;
	height: 15vw;
	width: 15vw;
	border-radius: 100%;
	backdrop-filter: blur(20px);
	position: absolute;
	z-index: 3;
	right: 100px;
	bottom: -17vh;}


/*                 SECTION 2 (PRODUCTS)           */
.Section2 {
	font-family: 'Roboto', sans-serif;
	height: fit-content;
	padding-top: 10vh;
	border-bottom: solid 1px #dfdede70;
	margin-bottom: 300px;
	display: flex;
	flex-direction: row;
}

.Section2 .left {
	margin-left: 2vw;
	width: 50%;
	margin-bottom: 350px;
	margin-top: 140px;
}
.Section2 .left .context {
	position: sticky;
	top: 30VH;
	right: 0;
}
.Section2 .left .context h1 {
	margin-left: 10vw;
	color: rgb(71, 81, 61);
	font-weight: 900;
	font-size: 35px;
	line-height: 30px;
}
.Section2 .left .context h1 span {
	font-size: 20px;
	opacity: 0.8;
}
.Section2 .left .context .frame {
	position: absolute;
	right: 0;
	top: -150px;
	width: 55VH;
	height: 55VH;
	background: none;
	border-radius: 60px;
	overflow: hidden;
}
.Section2 .left .context .frame .div1 {
	border-radius: 40px 40px 0 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
}

.Section2 .right {
	padding-top: 100px;
	width: 50%;
}
.Section2 .right .product {
	width: 40vw;
	height: 430px;
}
.Section2 .right div h1 {
	color: rgb(71, 81, 61);
	font-weight: 900;
	margin-left: 4vw;
	font-size: 35px;
	line-height: 5vh;
}

.Section2 .right div h2 {
	width: 100vw;
	text-transform: lowercase;
	font-weight: 900;
	color: rgb(71, 81, 61);
	margin-left: 5vw;
	font-size: 20px;
	line-height: 35px;
	opacity: 0.6;
}
.productbuttons {
	width: 100vw;
	margin-left: 4vw;
	margin-bottom: 2vh;
}

.btn {
	font-weight: 100;
	transition: 0.7s;
	background: linear-gradient(to right, rgb(29, 90, 25), rgb(122, 201, 147));
	color: #ffffff;
	height: fit-content;
	padding: 18px 30px;
	padding-top: 20px;
	border-radius: 3000px;
	border: none;
	box-shadow: none;
	font-size: 18px;
}
 .btn i {
	font-weight: 600;
}

 .btn-2 {
	margin-left: 0.5vw;
	padding-right: 20px;
	font-weight: 600;
	background: none;
	color: rgb(90, 166, 95);
	border: solid 2px rgb(90, 166, 95);
	box-shadow: none;
}
.Section2 .right div .btn:hover .icon-1 {
	animation: drip 0.3s infinite alternate ease-in-out;
}
@keyframes drip {
	from {
		transform: translateY(0px);
	}
	to {
		transform: translateY(2px);
	}
}
.btn:hover {
	transition: 0.3s;
	text-shadow: 0 0 50px #ffffff;
	transform: scale(103%);
	box-shadow: 0 0 20px #00000029;
}

.Section3 {
	margin-top: 0vh;
	width: 100vw;
	height: fit-content;
	background: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.sector1 {
	overflow: hidden;
	width: 100vw;
	height: 70vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.Section3 .sector1 .Art {
	padding-top: 10vh;
	padding-bottom: 5vh;
	width: 100%;
	height: fit-content;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #ffffffcc;
	font-family: 'Roboto', sans-serif;
}

.Section3 .Art h1 {
	font-family: 'Aboreto', cursive;
	letter-spacing: -0.2vw;
	font-weight: 600;
	line-height: 7vw;
	font-size: 8vw;
}
.Section3 .Art h1 span {
	color: rgb(154, 219, 157);

}
.Section3 .Art h2 {
	margin-bottom: -60px;
	letter-spacing: 0.3vw;
	font-size: 1.5vw;
}
.Section3 .sector1 .bg-video-wrap {
	z-index: -1;
	position: absolute;
	overflow: hidden;
	width: 95vw;
	height: 60vw;
	border-radius: 3vw;
}
.Section3 .sector1 video {
opacity: 0.6;
	min-width: 100%;
	min-height: 120vh;
	z-index: 1;
}

.Section3 .sector2 {
	margin-top: -6vh;
	padding: 10vh 0vw;
	padding-bottom: 15vh;

	color: #dfdedec2;
	font-family: 'Roboto', sans-serif;
	background-color: #eaffea;
	width: 100vw;
	height: fit-content;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;}

.Section3 .sector2 .art .h1 {
	letter-spacing: -0.1vw;
		font-size: 45px;
	width: 100%;
	font-weight: 900;

}
.Section3 .sector2 .art .h2 {
	color: rgb(71, 81, 61);
	font-weight: lighter;
	margin-bottom: -1vh;
	letter-spacing: 4px;
	font-size: 17px;}

.Section3 .sector2 .art p strong {
	background-size: 200% 100%;
	background-position-x: 100%;

	background-clip: text;
	-webkit-background-clip: text;}

.Section3 .sector2 .art > p {
	background: linear-gradient(
		to right,
		rgb(43, 76, 55) 50%,
		rgba(43, 76, 55, 0.208) 50%
	);
	background-size: 200% 100%;
	background-position-x: 100%;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	margin-bottom: -32px;
	margin-left: 0px;}

.Section3 .sector3 {
	background: none;
	padding: 20vh 0vw;

	color: #dfdedec2;
	font-family: 'Roboto', sans-serif;
	width: 100vw;
	height: 50vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.Section3 .sector3 .bg {
	position: absolute;
	margin-top: 170vh;
	z-index: -1;
	width: 100vw;
	height: 130vh;
	background-image: url("./img/ourstore.jpg");
	opacity: 0.5;
	background-repeat: no-repeat;
	background-size: cover;
}
.Section3 .sector3 .art .h1 {
	letter-spacing: -0.1vw;
	width: 100%;
	font-weight: 600;
	font-size: 50px;
}
.Section3 .sector3 .art .h2 {
	color: rgb(255, 255, 255);
	font-weight: lighter;
	margin-bottom: -1vh;
	letter-spacing: 4px;
	font-size: 17px;
}

.Section3 .sector3 .art > p {
	background: linear-gradient(
		to right,
		rgb(255, 255, 255) 50%,
		rgba(71, 81, 61, 0.29) 50% 50%
	);
	background-size: 200% 100%;
	background-position-x: 100%;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	margin-bottom: -48px;
	margin-left: 0px;
}
.footer {
	background-color: #eaffea;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: fit-content;
	justify-content: center;
	align-items: center;
	height: fit-content;
	width: 100vw;
	font-family: 'Roboto', sans-serif;

}
.footer .Word {
	width: 100%;

	font-size: 20vw;
	color: rgb(43, 76, 55);
	margin-bottom: -20vw;
}
.footer .Word h1 {
	margin-top: -8vw;
	width: 100%;
	line-height: 23vw;
	letter-spacing: -0.9vw;
}

.footer .links {
	margin-bottom: 8vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: fit-content;
	justify-content: center;
	align-items: start;
	font-family: 'Roboto', sans-serif;
}
.footer .links .dividers {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: fit-content;
	margin: 0vh 9vw;
	align-items: start;
}
.footer .links .dividers h1 {
	color: rgb(43, 76, 55);
	margin-bottom: 1vw;
	font-size: 3vw;
}
.footer .links .dividers a {
	font-size: 1.2vw;
	margin-top: 1vw;
	text-decoration: none;
	color: rgb(0, 0, 0);
	overflow: hidden;
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.footer .links .dividers a::after {
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	content: attr(data-replace);
	height: 100%;
	top: 0;
	transform-origin: 100% 50%;
	transform: translatey(200%);
	transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
	color: rgb(16, 168, 57);
}

.footer .links .dividers a:hover::after {
	transform: translate3d(0, 0, 0);
}

.footer .links .dividers a span {
	display: inline-block;
	transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.footer .links .dividers a:hover span {
	transform: translatey(-200%);
}



/* 
           /mobile                           view                                  port/
           /mobile                           view                                  port/
           /mobile                           view                                  port/
        */

@media screen and (max-width: 942px) {
	::-webkit-scrollbar {
		border-radius: 1000px;
		width: 2px;
		height: 3px;
		border-radius: 49px;
	  }
	  
	  /* Track */
	  ::-webkit-scrollbar-track {
		background: none;
	  }
	  
	  /* Handle */
	  ::-webkit-scrollbar-thumb {
		background: #1d4215c1;
	  }
	.lines{
		opacity: 0.3;
		z-index: 10;
		top: 0;
		position: fixed;
		left: 0;
		background-repeat: repeat;
		width: 2vw;
		background-size: cover;
		height: 100vh;
	background-image: url(./img/line.png);	
	}
	.bgoverlay{
		position: fixed;
		z-index: 0;
		bottom: 0;
		right: 0;
		width: 90vw;
		opacity: 0.1;
	}

	.Navbar {
		display: none;
	}

	.mobileNAV {	
		box-shadow: 0 -10px 30px 1px #2d5c233d;
		z-index: 13;
		position: fixed;
		bottom: 0;
		background-color: #d4efd1b9;
		backdrop-filter: blur(30px);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 50PX;
		border-radius: 20px 20px 0 0;	font-family: 'Roboto', sans-serif;
	}

	.mobileNAV a {
		font-size: 8PX;
		text-align: center;
		color: rgb(108, 122, 94);
		text-decoration: none;
		font-weight: 100;
	}

	.mobileNAV a .mobileicon {
		opacity: 0.8;
		padding-bottom: 3px;
		width: 20PX;
		margin: 0vh 7.5vw;
	}

	.mobilelogo {
		opacity: 1;
		backdrop-filter: blur(20px);
		transform: translateY(-20px);
		background-color: rgb(46, 130, 52);
		padding: 3vw;
		clip-path: circle(50% at center);
		margin: 0vh 1.5vw;
		width: 20px;
		height: 20PX;
	}

	.Section1 {
		margin: 3vw 2vw;
		border-radius: 20px;
		box-shadow: 0px 0px 10px 5px #0d0d0d2d;
		border-bottom: none;
		background-position-x: -10vh;
		height: 30vh;
		background-size: 140vw;
		width: calc(100% - 4vw);
	}

	.Section1 h1 {
		line-height: normal;
		font-size: 3vh;
		width: 80%;
		margin-top: 8vh;
		margin-left: 5vw;
	}

	.Section1 h1 span {
		font-size: 1.5vh;
	}

	.Section1 .learnmore {
		width: 120px;
	}

	.Section1 .circle {
		height: 70px;
		width: 70px;
		right: 30px;
		top: 34vh;
	}
	.Section2 {
		display: none;
	}

	.Section2Mobile {	font-family: 'Roboto', sans-serif;
		width: 100vw;
		white-space: wrap;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		margin-top: 4vh;
	}
	.Section2Mobile .productwrapper {
		scroll-snap-type: x mandatory;
		width: 100vw;
		white-space: wrap;
		overflow-x: auto;
		overflow-y: hidden;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: start;
		height: fit-content;
	}
	.Section2Mobile h1 {
		margin-bottom: 1vh;
		font-weight: 100;
		font-size: 5vw;
		width: 100%;
		margin-left: 10vw;
	}
	.Section2Mobile .product {
		background-size: cover;
		background-repeat: no-repeat;
		scroll-snap-align: center;
		overflow: hidden;
		margin: 3vw 4vw;
		min-width: calc(100vw - 8vw);
		height: 92.5vw;
		box-shadow: 0px 0px 10px 5px #0d0d0d6f;
		background-color: #0d0d0d;
		border-radius: 40px;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: 100;
	}
	.Section2Mobile .product .btnmobile{	font-family: 'Roboto', sans-serif;
          margin-top: 70vw;
          box-shadow: none;
		  background: none;
		  color: rgba(255, 255, 255, 0.948);
		  font-size: 10px;
		  font-weight: 100;
		 border: solid 2px rgba(255, 255, 255, 0.648);
		 backdrop-filter: blur(30px);
		 font-weight: 900;
		 padding: 0 10vw;
		 height: 25px;
		 border-radius: 110px;
	}

	.Section3 {
		margin-top: 5vh;
		width: 100vw;
		height: fit-content;
		background: none;
	}
	.sector1 {
		border-radius: 20px;
		width: 100vw;
		height: 50vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.Section3 .sector1 .Art {
		padding-top: 0vh;
		padding-bottom: 0vh;
		width: 95%;
		height: fit-content;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.Section3 .Art h1 {
margin-bottom: 3vw;
		letter-spacing: -0.2vw;
		font-weight: 600;
		line-height: 13vw;
		font-size: 13vw;
	}
	.Section3 .Art h2 {
		margin-bottom: -8vw;
		letter-spacing: 0.3vw;
		font-size: 3vw;}

	.Section3 .sector1 .bg-video-wrap {
		z-index: -1;
		border-radius: 30px;
		position: absolute;
		overflow: hidden;
		width: 95vw;
		height: 50vh;
	}
	.Section3 .sector1 video {
		max-width: 200vw;
		min-height: 100vw;
		z-index: 1;
	}
	.Section3 .sector2 {
		margin-top: 0vh;
		padding: 10vh 0vw;
		width: 100vw;
		height: fit-content;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.Section3 .sector2 .art .h1 {
		letter-spacing: -0.1vw;
		width: 100%;
		font-weight: 600;
		font-size: 3.5vw;
	}
	.Section3 .sector2 .art .h2 {
		
		font-weight: lighter;
		margin-bottom: 3vh;
		letter-spacing: 0.15vw;
		font-size: 2.5vw;
	}
	.Section3 .sector2 .art p strong {
		background-size: 200% 100%;
		background-position-x: 100%;
		color: transparent;
		background-clip: text;
		-webkit-background-clip: text;
	}
	
	.Section3 .sector2 .art > p {
	background-size: 200% 100%;
		background-position-x: 100%;
		color: transparent;
		background-clip: text;
		-webkit-background-clip: text;
		margin-bottom: -2vw;
		margin-left: 0px;
	}

	.Section3 .sector3 {
		background: none;
		padding: 10vh 0vw;
		color: #dfdedec2;
		width: 100vw;
		height: 30vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.Section3 .sector3 .bg {
		position: absolute;
		margin-top: 50vh;
		z-index: -1;
		width: 100vw;
		height: 160vw;
		background-image: url("./img/ourstore.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	.Section3 .sector3 .art .h1 {

		width: 100%;
		font-weight: 600;
		font-size: 4.5vw;
	}
	.Section3 .sector3 .art .h2 {
		font-weight: lighter;
opacity: 0.7;
		letter-spacing: 0.1vw;
		font-size: 2.5vw;
	}

	.Section3 .sector3 .art > p {	
		background-size: 200% 100%;
		background-position-x: 100%;
		color: transparent;
		background-clip: text;
		-webkit-background-clip: text;
		margin-bottom: -3vw;
		margin-left: 0px;
	}
	.footer {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: fit-content;
		justify-content: center;
		align-items: start;
		height: fit-content;
		width: 100vw;
	}
	.footer .Word {
		width: 100%;
		font-size: 23vw;
		margin-bottom: -8vh;
	}
	.footer .Word h1 {
		margin-top: -6.5vw;
		width: 100%;
		line-height: 25vw;
		letter-spacing: -0.9vw;
	}

	.footer .links {
		margin-bottom: 30vh;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: fit-content;
		justify-content: start;
		align-items: start;
	}
	.footer .links .dividers {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: fit-content;
		margin: 2vh 9vw;
		align-items: start;
	}

	.footer .links .dividers h1 {
		margin-bottom: 2vw;
		font-size: 5.5vw;
	}
	.footer .links .dividers a {
		opacity: 0.7;
		font-size: 3.5vw;
		margin-top: 1.5vh;
		cursor: none;
		text-decoration: none;
		overflow: hidden;
		position: relative;
		display: inline-block;
		vertical-align: top;
	}

	.footer .links .dividers a::after {
		content: "";
		position: absolute;
		width: 100%;
		left: 0;
		content: attr(data-replace);
		height: 100%;
		top: 0;
		transform-origin: 100% 50%;
		transform: translatey(200%);
		transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
	}

	.footer .links .dividers a:hover::after {
		transform: translate3d(0, 0, 0);
	}

	.footer .links .dividers a span {
		display: inline-block;
		transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
	}

	.footer .links .dividers a:hover span {
		transform: translatey(-200%);
	}

	.back{
		transition: 1s;
		z-index: 4;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		right: 0;
		border: none;
		display: none;
		justify-content: center;
		align-items: center;
	}
	.back i{
		position: absolute;
		top: 13vh;
		font-size: 7vw;
	}
	.modal{	
		transition: 1s;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 5;
	position: fixed;
	bottom: -300vh;
	height: 700px;
	width: 100vw;
	border-radius: 4vw 4vw 0 0;
	background-color: rgba(240, 251, 231, 0.841);
	backdrop-filter: blur(40px);
	border-top: solid 1px rgba(255, 255, 255, 0.502);
	box-shadow: 0 0 30px 10px #17171737;
	}
	.modal .titles{
		color: #293e02;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
	.modal .titles h1{
		text-align: center;
		font-weight: 100;
		margin-top: 20px;
		width: 100%;
		font-size: 22px;
	}
	.modal .titles h2{
		text-align: center;
		margin-top: 0;
		font-weight: 100;
		font-size: 12px;
		opacity: 1;
	}
	.modal .titles p{
		margin-top: 0vw;
		font-weight: 600;
		width: 80vw;
		font-size: 9px;
		opacity: 0.5;
	line-height: normal;
	}
	.modal .titles h3{
		font-size: 10px;
		position: absolute;
		top: 25px;

		margin-right: 15vw;
		color: rgba(255, 255, 255, 0.7);
		border:solid 1px rgba(255, 255, 255, 0.687);
		border-radius: 3vw;
		padding: 5px 20px;
	}
	
	.modal .p1{
		border-radius: 35px;
	width: 270px;
	margin-top: -17vw;
	}
	.modal .p2{
		border-radius: 3vw;
	width: 60px;
	position: absolute;
	top: -3vh;
	left: 3vw;
	}
	.modal .titles ul{
		margin-top: 0;
		margin-bottom: -0.5vw;
		margin-left: -9vw;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}
	.modal .titles li{
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: row;
		list-style: none;
		margin-right: 3vw;
	
	}
	.modal .titles li h4{
		font-size: 10px;
		color: rgb(114,186,52);
	}
	.modal .titles li h4 span{
		opacity: 0.8;
		color: rgb(114,186,52);
	}
	.modal .titles li img{
		margin-right: 0.3vw;
		aspect-ratio: 3/2;
		object-fit: contain;
		width: 32px;
		opacity: 0.7;
		
	}
	.btnmodal{
		transition: 0.5s;
		margin-top: 5vw;
	color: white;
		background-image: linear-gradient( to right, rgb(80, 161, 10),rgb(148, 211, 93));
		border-radius: 5vw 1.5vw 5vw 1.5vw;
		  border: none;
		  box-shadow: none;
		height: 30px;
		padding: 0 25%;
	}
	.btnmodal:hover {
		transition: 0.3s;
		text-shadow: 0 0 50px #ffffff;
		transform: scale(103%);
		box-shadow: 0 0 20px #00000029;
	}
	

}

#slider1 {
	background-image: url("./img/1.png");
	background-size: contain;
}

#slider2 {
	background-image: url("./img/2.png");
	background-size: contain;
}

#slider3 {
	background-image: url("./img/4.png");
	background-size: contain;
}

#slider4 {
	background-image: url("./img/3.png");
	background-size: contain;
}

#slider5 {
	background-image: url("./img/5.png");
	background-size: contain;
}

#slider6 {
	background-image: url("./img/6.png");
	background-size: contain;
}