/* COLOR PALETTE
- Bright Blue #3366FF #36f rgb(51,102,255,1)
- Light Blue #26A0D7 rgb(38,160,215,1)
- Dark Blue #2E3188 rgb(46,49,136,1)
- Green #CDD523 rgb(205,213,35,1)

*/

/* FONTS & modifiers
font-family: "Host Grotesk", serif;
font-weight: 300-800
font-size: 00px;
line-height: 00px;
text-align: direction;
*/

/*----------GENERAL STYLING-------------*/

html{
	scroll-behavior: smooth;
	overflow-x: hidden;
}

*{
	margin: 0;
}

h1{
	font-family: "Host Grotesk", serif;
}

h6{
	font-family: "Host Grotesk", serif;
	font-weight: 800;
	font-size: 10px;
	color: floralwhite;
}

a{
	list-style: none;
	text-decoration: none;
	color: floralwhite;
}

li{
	font-family: "Host Grotesk", serif;
	list-style: none;
}

p{
	font-family: "Host Grotesk", serif;
}

img{
	max-width: 100%;
}

h2{
	font-family:"Host Grotesk", serif;
	font-size: 38px;
	text-align: center;
	opacity: 0;
	position: relative;
	top:0;

	padding: 130px 0 0 0;

	color: #2E3188;
}

h2.in-view{
	animation: tothebottom_anim 1s forwards;
}

@keyframes tothebottom_anim{
	from{opacity: 0; top: -50px}
	to{opacity: 1; top: 0;}
}

h5{
	font-family:"Host Grotesk", serif;
	font-size: 24px;
	font-weight: 500;

	color: #2E3188;
}

hr{
	border: none;
}

/*----------GENERAL STYLING: NAVBAR-------------*/
.scroll-button{
}

#up-arrow{
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 1;
}

#up-arrow-active{
	
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	opacity: 0;

	z-index: 2;
}

#up-arrow-active:hover{
	opacity: 1;
	animation: button_fade 0.3s;
	
}

@keyframes button_fade{
	from{opacity: 0;}
	to{opacity: 1}
}
 
 body{
 	width: 100%;
 	margin: 0;
 }

 header{
 	position: fixed;
 	width: 100%;
 	z-index: 999;
 }

 .hamburg{
 	display: none;
 }

#navbar-home{
	padding: 40px 40px 60px;
	background: linear-gradient(180deg, rgb(0,0,0,0.7), rgb(46,49,136,0));

	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	z-index: 120;
}

.home-nav{
	padding: 40px 40px 20px;
	background: linear-gradient(180deg, rgb(46,49,136,0.7), rgb(46,49,136,0));

	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

#navbar-logo{
	width: 300px;
	opacity: 0;
	position: relative;
	left: 0;
}

.small-nav-logo{
	display: none;
}

.small-nav-logo-white{
	display: none;
}

#navbar-logo.in-view{
	animation-name: totheright_anim;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes totheright_anim{
	from{opacity: 0; left: -30px}
	to{opacity: 1; left: 0}
}

#nav-menu{
	position: relative;
	
	opacity: 0;
}

#nav-menu ul{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

#nav-menu.in-view{
	animation-name: totheleft_anim;
	animation-duration: 1s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}

@keyframes totheleft_anim{
	from{opacity: 0; right: -30px}
	to{opacity: 1; right: 0}
}

#nav-menu ul .menu-item a{
	color: floralwhite;
	
	font-size: 14px;
	font-weight: 300;
	margin: 0;

	text-align: center;
}

.menu-item a{
	text-decoration: none;
}

.menu-item:nth-child(2){
	margin-left: 35px;
}

.menu-item:nth-child(3){
	margin-left: 35px;
}

#nav-menu ul li.menu-item a:hover{
	color: #CDD523;
	font-weight: 800;
}

.withdropdown{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	width: 180px;

	position: relative;
	top: 2px;
}

#anim-menu{
	padding: 10px 0 0 0;
	display: none;
	position: relative;
	top: -50px;
	z-index: 109;

}

.dropline{

	height: 2px;
	background-color: #26A0D7;
	margin-bottom: 5px;
	width: 100px;
}

.dropline-home{
	height: 2px;
	background-color: floralwhite;
	margin-bottom: 5px;
	margin-top: 0px;
	width: 100px;
	opacity: 1;
}

.withdropdown:hover #anim-menu{
	display: flex;
	flex-direction: column;
	align-items: center;
	animation-name: dropdown_ani;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	font-size: 10px;
}

@keyframes dropdown_ani{
	from{opacity: 0; top:-50;}
	to{opacity: 1; top: 0;}
}



#navbar-white{
	padding: 40px 40px 60px;
	background: linear-gradient(180deg, rgb(255,255,255,1), rgb(255,255,255,0));

	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	z-index: 120;
}

.menu-white{
	color: #3366FF;
}

#nav-menu ul .menu-item-wh a{
	color: #3366FF;
	
	font-size: 14px;
	font-weight: 300;
	margin: 0;

	text-align: center;
}

.menu-item-wh:nth-child(2){
	margin-left: 35px;
}

.menu-item-wh:nth-child(3){
	margin-left: 35px;
}

#nav-menu ul li.menu-item-wh a:hover{
	color: #26A0D7;
	font-weight: 800;
}

.dropline-white{
	width: 100px;
	margin-bottom: 5px;
	border: none;
	height: 2px;
	background-color: #26A0D7;
}


/*----------GENERAL STYLING: FOOTER-------------*/

#footer{
	background-color: #3366FF;
	display: flex;
	flex-direction: column;

	position: relative;
	bottom: 0;
	width: 100%;
	z-index: 998;
}

#footer.in-view{
	animation-name: footer_change;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes footer_change{
	from{background-color: #3366FF; bottom: -20px;}
	to{background-color: #2E3188; bottom: 0;}
}

#footer-main{
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 70px 100px 30px;
	color: floralwhite;
}

#footer-left{
	display: flex;
	align-items: flex-end;
}

#footer-left a{
	padding-right: 20px;
}

#footer-logo{
	width: 100px;
	position: relative;
	bottom: 0px;
	opacity: 0;
	/*animation-name: upup;
	animation-duration: 2s;*/
	
}

#footer-logo.in-view{
	animation-name: foot_up;
	animation-duration: 1s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}


@keyframes foot_up{
	from{
		bottom: -20px;
		opacity: 0;
	}

	to{
		bottom: 0px;
		opacity: 1;
	}
}

#footer-left img:hover{
	filter: invert(19%) sepia(63%) saturate(520%) hue-rotate(16deg) brightness(95%) contrast(94%);
}

#footer-left-text{
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	font-size: 10px;
	font-weight: 300;
	line-height: 12px;

	opacity: 0;
	position: relative;
	bottom: 0;
}

#footer-left-text.in-view{	
	animation-name: foot_up;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
}

/*#footer-left-text.in-view{
	animation-name: foot_up;
	animation duration: 3s;
}*/

#footer-left-text hr{
	width: 100px;
	height: 17px;
	visibility: hidden;
}

#footer-links{
	display: flex;
	justify-items: flex-start;
	padding: 10px 0 12px;
}

#footer-links a img{
	width: 40px;
}

#footer-links a img:hover{
	filter: invert(19%) sepia(63%) saturate(520%) hue-rotate(16deg) brightness(95%) contrast(94%);
}

#footer-links a:nth-child(2){
	position: relative;
	margin: 0 -10px;
}

#footer-right{
	opacity: 0;
	position: relative;
	bottom: 0;
}

#footer-right.in-view{
	animation-name: foot_up;
	animation-duration: 1s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}

#footer-right ul{
	text-align: right;
}

#footer-right ul li a{
	color: floralwhite;
	font-weight: 300;
	line-height: 30px;
	font-size: 15px;
}

#footer-right ul li a:hover{
	color: #CDD523;
	font-weight: 600;
}

#footer-copyright{
	display: flex;
	justify-content: center;
	padding: 8px 0px;
	background-color: #26A0D7;
}

/*THIS IS THE START OF THE HOME SPECIFIC FOOTER. IT IS DIFFERENT BECAUSE OF THE ADDED JQUERY AND BOOTSTRAP MESSING THINGS UP*/



#homefooter{
	background-color: #3366FF;
	display: flex;
	flex-direction: column;

	position: relative;
	bottom: 0;
	width: 100%;
	z-index: 998;
}

#homefooter.in-view{
	animation-name: footer_change;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes footer_change{
	from{background-color: #3366FF; bottom: -20px;}
	to{background-color: #2E3188; bottom: 0;}
}

#homefooter-main{
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 70px 100px 30px;
	color: floralwhite;
}

#homefooter-left{
	display: flex;
	align-items: flex-end;
}

#homefooter-left a{
	padding-right: 20px;
}

#homefooter-logo{
	width: 115px;
	position: relative;
	bottom: 0px;
	opacity: 0;
}

#homefooter-logo.in-view{
	animation-name: foot_up;
	animation-duration: 1s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}


@keyframes foot_up{
	from{
		bottom: -20px;
		opacity: 0;
	}

	to{
		bottom: 0px;
		opacity: 1;
	}
}

#homefooter-left img:hover{
	filter: invert(19%) sepia(63%) saturate(520%) hue-rotate(16deg) brightness(95%) contrast(94%);
}

#homefooter-left-text{
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	font-size: 10px;
	font-weight: 300;
	line-height: 0px;

	opacity: 0;
	position: relative;
	bottom: 0;
}

#homefooter-left-text p{
	margin: 0 0 12px 0;
}

#homefooter-left-text.in-view{	
	animation-name: foot_up;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
}

/*#footer-left-text.in-view{
	animation-name: foot_up;
	animation duration: 3s;
}*/

#footbreak{
	visibility: hidden;
}

#homefooter-links{
	display: flex;
	justify-items: flex-start;
	padding: 5px 0 12px;
}

#homefooter-links a img{
	width: 40px;
}

#homefooter-links a img:hover{
	filter: invert(19%) sepia(63%) saturate(520%) hue-rotate(16deg) brightness(95%) contrast(94%);
}

#homefooter-links a:nth-child(2){
	position: relative;
	margin: 0 -10px;
}

#homefooter-right{
	opacity: 0;
	position: relative;
	bottom: 0;
}

#homefooter-right.in-view{
	animation-name: foot_up;
	animation-duration: 1s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}

#homefooter-right ul{
	text-align: right;
}

#homefooter-right ul li a{
	color: floralwhite;
	text-decoration: none;
	font-weight: 300;
	line-height: 30px;
	font-size: 15px;
}

#homefooter-right ul li a:hover{
	color: #CDD523;
	font-weight: 600;
}

#homefooter-copyright{
	display: flex;
	justify-content: center;
	padding: 8px 0 0 0;
	background-color: #26A0D7;
	color: floralwhite;
}

#homefooter-copyright h6{
	font-size: 10px;
}


/*----------PAGE STYLING-------------*/

/*----------PAGE STYLING: HOME-------------*/

.mission{
	width: 100vw;
	height: 100vh;
	background-color: #2E3188;
	/*background-image:url("../images/wm-home_landing.webp");*/
	
	background-position: center-bottom;
	background-size: cover;
	background-repeat: no-repeat;
}

.home-mission{
	position: absolute;
	top: 0;

	opacity:0;

	animation: mission_anim 25s linear infinite 0s;

	/*animation: mission_anim 10s ease-in-out;*/
}

#mission1{
	opacity: 1;
}
#mission2{
	animation-delay: 5s;
}
#mission3{
	animation-delay: 10s;
}
#mission4{
	animation-delay: 15s;
}
#mission5{
	animation-delay: 20s;
}

@keyframes mission_anim{
	0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}

.landingimage{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}






.home-abt{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 80px;
}

.home-abt-1{
	width: 700px;
	padding: 60px 0;
	text-align: center;
	position: relative;
	opacity: 0;

	font-weight: 300;
	color: #2E3188;
}

.home-abt-1.in-view{
	animation: totheleft_anim 1s 0.3s forwards;
}

.home-abt-2{
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0 0 70px 0;
	width: 100vw;
}

#homeabt2img{
	width: 55vw;

	position: relative;
	z-index: 6;
}

.home-abt-txt-2{
	width: 300px;
	margin: 0 30px;
	font-weight: 300;
	color: #2E3188;

	opacity: 0;
	position: relative;
	z-index: 5;
}

.home-abt-txt-2.in-view{
	animation: slideout_right 1s 0.2s forwards;
}

.home-abt-3{
	display: flex;
	justify-content: flex-end;
	padding: 0 0 70px 0 ;
	width: 100vw;
}

#homeabt3img{
	width: 70vw;
	position: relative;
	right: 0;
}


/* move to bottom*/
.home-services{
	opacity: 0;
	position: relative;
	bottom: -30px;

	height: 550px;
}

.home-services.in-view{
	animation: tothetop_anim 1s 0.4s forwards;
}

@keyframes tothetop_anim{
	from{opacity: 0; bottom: -50px;}
	to{opacity: 1; bottom: 0;}
}

.homeserv-title{
	font-family: "Host Grotesk", serif;
	font-weight: 400;
	font-style: italic;
	font-size: 36px;
	color: floralwhite;
	margin: 0 0 0 70px;

	background-color: rgb(255,255,255,0.4);
	box-shadow: 0 0 30px 30px rgb(255,255,255,0.4);
	filter: drop-shadow(1px 1px 10px black);

	position: relative;
	top: 90px;

	opacity: 0;

	z-index: 3;
}

.homeserv-title.in-view{
	animation-name: totheright_anim;
	animation-duration: 1s;
	animation-delay: 0.05s;
	animation-fill-mode: forwards;
}

#serv-carousel{
	position: relative;

	z-index: 1;
}

.home-slideshow-content{
	width: 100vw;
	height: 500px;

	display: flex;
	align-items: flex-end;
}

#home-serv-txt{
	font-family: "Host Grotesk", serif;
	font-size: 36px;
	color: white;
	font-weight: 300;
	text-align: right;
	
	margin: 20px 70px 70px 20px;
	padding: 0 20px;

	background-color: rgb(255,255,255,0.4);
	box-shadow: 0 0 30px 30px rgb(255,255,255,0.4);
	filter: drop-shadow(1px 1px 10px black);


	opacity: 0;

	position: absolute;
	bottom: 0;
	right: 0;
}

#home-serv-txt.in-view{
	animation-name: totheleft_anim;
	animation-delay: 0.05s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

#homeserv1{background-image: url("../images/wm-homeserv1.webp"); background-size: cover;}
#homeserv2{background-image: url("../images/wm-homeserv2.webp"); background-size: cover;}
#homeserv3{background-image: url("../images/wm-homeserv3.webp"); background-size: cover;}
#homeserv4{background-image: url("../images/wm-homeserv4.webp"); background-size: cover;}
#homeserv5{background-image: url("../images/wm-homeserv5.webp"); background-size: cover;}

.car-btn:hover{
	filter: invert(19%) sepia(14%) saturate(3436%) hue-rotate(26deg) brightness(106%) contrast(93%);
}


.home-projects{
	height: 900px;
	background-image: url("../images/icons/wm_logo_large.svg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgb(255,255,255,0.6);
	background-blend-mode: lighten;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	justify-items: flex-start;
}

#homfeatproj{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	align-self: center;
	padding: 160px 0 50px 0;
	position: relative;
	opacity: 0;

	font-size: 38px;
	font-weight: 300;
	color: #2E3188;
}

#homfeatproj.in-view{
	animation: totheleft_anim 1s 0.2s forwards;
}

.card-container{
	width: 800px;
	height: 400px;
	background-image: url("../images/wm-homeproj.webp");
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	opacity: 0;
	position: relative;

	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.card-container.in-view{
	animation: totheright_anim 1s 0.4s forwards;
}

.card-content{
	display: flex;
	flex-direction: column;
	padding: 20px 30px 30px 20px;
	margin: 0 0 20px 0;
	background-color: rgb(255,255,255,0.75);
	opacity: 0;
	position: relative;

	width: 300px;
	height: 240px;
}

.card-content.in-view{
	animation: tothetop_anim 1s 0.6s forwards;
}

#cardtitle{
	font-size: 26px;
	font-style: italic;
	font-weight: 500;
	width: 300px;
	padding-bottom: 5px;
}
#cardtxt{
	font-size: 15px;
	font-weight: 300;
	line-height: 18px;
}

#view-more-button-home{
	width: 130px;
	font-size: 15px;
	margin: 0;
}
#view-btn-link{
	text-decoration: none;
}
#view-btn-hm{
	padding: 10px 0 0 18px;
	text-decoration: none;
}




/*----------PAGE STYLING: ABOUT US-------------*/

.about-top{
	display: flex;
	flex-direction: column;
	align-items: center;

	position: relative;
	top: 50px;

	margin-bottom: 80px;
}

#page-title-abt{
	position: relative;
	color: floralwhite;
	filter: drop-shadow(1px 1px 5px rgb(0,0,0,0.5));
	z-index: 3;
}
.about-top1{
	width: 70vw;
	margin-left: auto;
	margin-right: auto;

	opacity: 0;
	position: relative;
	z-index: 2;
	top: -80px;
}

.about-top1.in-view{
	animation: tothetop_anim1 1s forwards;
}

@keyframes tothetop_anim1{
	from{
		top:-30px;
		opacity: 0;
	}
	to{
		top:-80px;
		opacity: 1;
	}
}

.about-top2{
	padding: 0 0 20px 0;
	position: relative;
	opacity: 0;
	top: -40px;
}

.about-top2.in-view{
	animation:totheleft_anim 1s forwards;
}

.about-top2 h3{
	width: 1000px;
	text-align: center;
	font-weight: 300;
	font-size: 38px;
	font-family: "Host Grotesk", serif;
	color: #2E3188;
}

#logobgabt{
	background-image: url("../images/icons/wm_logo_large.svg");
	background-size: contain;
	background-color: rgb(255,255,255,0.75);
	background-blend-mode: lighten;
	background-repeat: no-repeat;
	background-position: right;

	padding: 100px 0 90px 0;

	position: relative;
	top: -40px;
}

.about-top3{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 0 40px 0;

	width: 100vw;
}

#txtabt3{
	width: 30vw;
	text-align: right;
	padding: 40px;
	position: relative;
	right: -500px;
	opacity: 0;

	z-index: 8;

	font-weight: 300;
	color: #2E3188;
}

#txtabt3.in-view{
	animation: slideout_left 1s forwards;
}

@keyframes slideout_left{
	from{right: -500px; opacity: 0}
	to{right: 0; opacity: 1}
}

.about-top3 img{
	width: 60vw;
	position: relative;
	z-index: 10;
}

.about-top4{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 0 40px 0;

	width: 100vw;
}

#txtabt4{
	width: 20vw;
	text-align: left;
	padding: 40px;
	position: relative;
	left: -500px;
	opacity: 0;

	z-index: 7;

	font-weight: 300;
	color: #2E3188;
}

#txtabt4.in-view{
	animation: slideout_right 1s forwards;
}

@keyframes slideout_right{
	from{left: -500px; opacity: 0}
	to{left: 0; opacity: 1}
}

.about-top4 img{
	width: 70vw;
	position: relative;
	z-index: 9;
}


.mission-values{
	display: flex;
	flex-direction: column;
	position: relative;
	top: -100px;

	align-items: flex-start;
}

#misvaltitle{
	font-size: 50px;
	font-weight: 500;
	font-style: italic;
	position: relative;
	opacity: 0;

	padding: 0 0 20px 50px;
	color: #2E3188;
}

#misvaltitle.in-view{
	animation: tothebottom_anim 1s forwards;
}

.mission-container{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	position: relative;
	opacity: 0;

	width: 100vw;
}

.mission-container.in-view{
	animation: totheright_anim 1s 0.2s forwards;
}

.mission-container img{
	position: relative;
	z-index: 1;
}

.mission-cont-txt{
	width: 60vw;
	text-align: right;

	font-family: "Host Grotesk", serif;
	font-weight: 600;
	font-size: 48px;
	color: floralwhite;

	filter: drop-shadow(1px 1px 10px black);

	position: relative;
	opacity: 0;
	bottom: 120px;
	top: -130px;
	right: 60px;
	z-index: 2;
}

.mission-cont-txt.in-view{
	animation: tothetop_anim 1s forwards;
}

@keyframes totheleft_anim2{
	from{right: -100px; opacity: 0;}
	to{right: 60px; opacity: 1;}

}



/*----------PAGE STYLING: OUR SERVICES-------------*/

.slide{
	height: 700px;
}

.service-slideshow-cont{
	width: 700px;
	height: 350px;
	
	margin-left: auto;
	margin-right: auto;

	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

#slideshow-1{background-image: url("../images/wm_serv-bulk.webp"); background-size: cover;}
#slideshow-2{background-image: url("../images/wm_serv-treat.webp"); background-size: cover;}
#slideshow-3{background-image: url("../images/wm_serv-sep.webp"); background-size: cover;}
#slideshow-4{background-image: url("../images/wm_serv-red.webp"); background-size: cover;}
#slideshow-5{background-image: url("../images/wm_serv-improv.webp"); background-size: cover;}

.serv-slide-content{
	display: flex;
	flex-direction: column;
	align-items: flex-start;


	background-color: rgb(255,255,255,0.75);
	filter: drop-shadow(0 0 20px black);
	width: 350px;
	
	padding: 25px;

	position: relative;
	bottom: 10px;
}

.view-more-button{
	background-color: floralwhite;
	border-radius: 30px;
	padding: 15px 10px;
	margin: 10px 0;
	width: 80px;


	display: block;
	align-self: flex-end;
}

.view-btn{
	font-family: "Host Grotesk", serif;
	color: #2E3188;
	text-align: left;


	padding: 15px;
	font-weight: 400;
}

.view-more-button:hover{
	.view-btn{color: white; font-weight: 800}
	font-weight: 400;
	background-color: #CDD523;
}

.button-slide img{
	width: 50px;
	position: absolute;
	top: 0;
}
.arrow-button-active{
	opacity: 0
}

.arrow-button-active:hover{
	opacity: 1;
}

.hi-slide{
	padding: 40px 0 0 0 ;
	position: relative;
	width: 100vw;
	overflow: hidden;
}

.hi-slide .hi-next{
	position: absolute;
	top: 200px;
	right: 220px;
	width: 55px;
	z-index: 999;
}
.hi-slide .hi-prev{
	position: absolute;
	top: 200px;
	left: 240px;
	width: 45px;
	z-index: 1000;
}

.hi-slide ul{
	list-style: none;
	position: relative;
	width: 90vw;
	height: 700px;
	margin: 0;
	padding: 0;
}

.hi-slide ul li{
	overflow: hidden;
	position: absolute;
	z-index: 0;
	left: 700px;
	top: 147px ;
	width: 2px;
	height: 2px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}


.service-bottom{

	display: flex;
	flex-direction: column;
	align-items: center;
	width: 95vw;

	margin-left: auto;
	margin-right: auto;

	position: relative;
	top: -100px;
}

.serv-card{
	width: 80vw;
	padding: 20px 0;

	display: flex;
	align-items: flex-end;
	justify-content: center;

	margin-left: 20vw;
	margin-right: 10vw;
}

.serv-card-img{

	width: 70vw;
	height: 500px;

	position: relative;
	z-index: 4;
	opacity: 0;
}

.serv-card-img.in-view{
	animation: totheright_anim 1s 0.1s forwards;
}


#cardimg1{background-image: url("../images/wm_serv1.webp"); background-position: center; background-size: contain; background-repeat: no-repeat;}
#cardimg2{background-image: url("../images/wm_serv-treat.webp"); background-position: center; background-size: contain; background-repeat: no-repeat;}
#cardimg3{background-image: url("../images/wm_serv-sep.webp"); background-position: center; background-size: contain; background-repeat: no-repeat;}
#cardimg4{background-image: url("../images/wm_serv-red.webp"); background-position: center; background-size: contain; background-repeat: no-repeat;}
#cardimg5{background-image: url("../images/wm_serv-improv.webp"); background-position: center; background-size: contain; background-repeat: no-repeat;}


.serv-card-content{
	background-color: #CDD523;
	filter: drop-shadow(10px 10px 5px rgb(0,0,0,0.5));
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding: 30px 10px;

	width: 30vw;
	height: 100%;
	position: relative;
	right: 150px;
	bottom: 20px;

	opacity: 0;
	z-index: 5;
}

.serv-card-content.in-view{
	animation: totheleft_anim3 1s 0.2s forwards;
}

@keyframes totheleft_anim3{
	from{
		right: -150px;
		opacity: 0;
	}

	to{
		right: 150px;
		opacity: 1;
	}
}

.scardtxt{
	color: black;
	font-family: "Host Grotesk", serif;
	font-weight: 500;
	font-size: 27px;
	width: 85%;
	padding: 0 30px 10px 0px;
}

#inq-btn{
	color: black;
	font-family: "Host Grotesk", serif;
	font-weight: 300;

	text-align: center;

	width: 100px;
	padding: 10px 0;

	position: relative;
	right: 30px;
	bottom: -10px;
}

#inq-btn:hover{
	background-color: #3366FF;
	color: #CDD523;
	font-weight: 800;
}


/*----------PAGE STYLING: FEATURED PROJECTS-------------*/


.feat-top{
	background-image: url("../images/wm_projland.webp");
	background-size: cover;
	width: 100vw;
	height: 100vh;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#projtitle{
	color: floralwhite;
}

.abuyog-title{
	color: floralwhite;
	font-family: "Host Grotesk", serif;
	font-size: 70px;
	font-weight: 600;

	width: 100vw;
	padding: 0 0 60px 0;
	opacity: 0;
	position: relative;
	text-align: center;
}

.abuyog-title.in-view{
	animation: slideout_right 1s forwards;
}

.feat-content{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.feat-content-sec{
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 40px 0;
}

.conttitle{
	color: #2E3188;
	font-family: "Host Grotesk", serif;
	font-size: 38px;
	font-weight: 300px;
	font-style: italic;
	position: relative;
	opacity: 0;

	padding-bottom: 40px;
}

.conttitle.in-view{
	animation: tothetop_anim 1s 0.2s forwards;
}

.feat-content-block1{
	background-image: url("../images/wm_proj-2.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100vw;
	height: 500px;

	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#the-project{
	background-color: floralwhite;
	padding: 40px;
	width: 400px;
	height: 275px;

	margin: 60px;

	display: flex;
	align-items: center;
	opacity: 0;
	position: relative;

	border-radius: 30px;
	filter: drop-shadow(1px 1px 10px rgb(0,0,0,0.5));
}

#prjtxt1{
	font-weight: 300;
}

#prjtxt1 span{
	visibility: hidden;
}

#the-project.in-view{
	animation: totheright_anim 1s 0.2s forwards;
}

.feat-content-block2{
	background-image: url("../images/wm_proj-3.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100vw;
	height: 500px;

	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.featured-project-text{
	color: #2E3188;
	font-family: "Host Grotesk", serif;
	font-size: 15px;
}

#the-facility{
	background-color: floralwhite;
	padding: 40px;
	width: 400px;
	height: 275px;

	margin: 60px;
	opacity: 0;
	position: relative;

	display: flex;
	align-items: center;

	border-radius: 30px;
	filter: drop-shadow(1px 1px 10px rgb(0,0,0,0.5));
}

#prjtxt2{
	font-weight: 300;
}

#prjtxt2 span{
	visibility: hidden;
}

#the-facility.in-view{
	animation: totheleft_anim 1s 0.2s forwards;
}

#learn_btn_main{
	color: floralwhite;
	font-family: "Host Grotesk", serif;
	text-align: center;
	padding: 15px 20px;

	background-color: #3366FF;
	width: 90px;
	border-radius: 30px;
	opacity: 0;
	position: relative;

	margin: 20px 0 60px;
}

#learn_btn_main.in-view{
	animation: tothetop_anim 1s 0.2s forwards;
}

#learn_btn_main:hover{
	background-color: #CDD523;
	font-weight: 800;
}

/*----------PAGE STYLING: CONTACT US-------------*/
#contact-main{
	background-color: #2E3188;
	
}

.contact-page{
	width: 100vw;
	height: 100vh;

	background-image: url("../images/wm-contact-50.webp");
	background-size: cover;
	background-position: left;

	animation: bg-moving 60s infinite linear;
}

@keyframes bg-moving{
	0%{background-position: left;}
	50%{background-position: right;}
	100%{background-position: left;}
}


.contact-container{
	position: absolute;
	top: 0;

	width: 100vw;
}

.contact-container-main{
	margin-left: auto;
	margin-right: auto;
	width: 80vw;
}

#con-bg{
	visibility: hidden;
	width: 100%;
	height: 100vh;
	object-fit: cover;

	position: relative;
	top: 0;
	left: 0px;

	animation: bg-sliding 100s infinite linear;
}

@keyframes bg-sliding{
	from{left: 0;}
	to{left: -500px;}
}

#contact-us{
	color: floralwhite;
	padding: 130px 0 50px 0;
}

.contact-content{
	display: flex;
	align-content: center;
	align-items: flex-start;
	justify-content: center;

	margin-left: auto;
	margin-right: auto;

	padding: 60px;
}

.contact-info{
	color: floralwhite;
	font-family: "Host Grotesk", serif;
	text-align: right;

	padding: 0 50px 0 0;

	span{visibility: hidden;}

	filter: drop-shadow(1px 1px 5px rgb(0,0,0,0.9));

}

#contact-links{
	display: flex;
	justify-content: flex-end;
}

#contact-links a img{
	width: 40px;
	padding: 5px 0 5px 5px;
}

#contact-links a:hover{
	cursor: pointer;
	filter: invert(19%) sepia(63%) saturate(520%) hue-rotate(16deg) brightness(95%) contrast(94%);
}

.email-box{
	display: flex;
}

.contact-left{
	display: flex;
	flex-direction: column;
	padding: 0 0 0 50px;

	color: floralwhite;
	font-family: "Host Grotesk", serif;
	text-align: left;

	width: 500px;

	filter: drop-shadow(1px 1px 5px rgb(0,0,0,0.9));
}

.contact-left-title{
	font-size: 25px;
	font-weight: 600;

	margin: -5px 0 0 0;
}

.contact-left-title hr{
	background-color: floralwhite;
	height: 3px;
	width: 90px;
	margin-bottom: 10px;
}

.contact-input{
	margin: 5px 0;
	border-radius: 5px;
	border: none;

	background-color: rgb(255,255,255,0.8);

	font-family: "Host Grotesk", serif;
	font-size: 14px;
	color: #2E3188;
}

#in1{
	padding: 10px;
}

#in2{
	padding: 10px;
}

#in3{
	padding: 10px;
	height: 100px;
}

#send{
	border: none;
	border-radius: 30px;
	padding: 15px;
	width: 80px;
	margin: 10px 0;

	font-family: "Host Grotesk", serif;
	font-size: 15px;
	color: floralwhite;

	background-color: #2E3188;
}

#send:hover{
	cursor: pointer;
	background-color: #3366FF;
}

/* COLOR PALETTE
- Bright Blue #3366FF #36f rgb(51,102,255,1)
- Light Blue #26A0D7 rgb(38,160,215,1)
- Dark Blue #2E3188 rgb(46,49,136,1)
- Green #CDD523 rgb(205,213,35,1)*/


/*-------------------------MEDIA QUERIES-----------------------------*/

@media only screen and (min-width: /*use 1441*/ 1441px) and (max-width:  1920px){
}

@media only screen and (min-width: /*use 1025*/ 320px) and (max-width:  1300px){
	/*home*/
	.mission{
		width: 100vw;
		background-size: contain;
	}

	.mission{
		width: 100vw;
		height: 100vh;
		background-color: #2E3188;
	}

	.landingimage{
		width: 100vw;
		height: 100vh;
		object-fit: cover;

		object-position: left;
	}

	.home-abt-1{
		width: 700px;
		padding: 0 0 30px 0;
	}

	#home-serv-txt{
		font-size: 28px;
		
		margin: 20px 60px 60px 20px;
		padding: 0 20px;

		background-color: rgb(255,255,255,0.4);
		box-shadow: 0 0 30px 30px rgb(255,255,255,0.4);
		filter: drop-shadow(1px 1px 10px black);


		opacity: 0;

		position: absolute;
		bottom: 0;
		right: 0;
	}

	/*about*/

	#txtabt3{
	padding: 0px 30px 0 0;
	}

	.mission-container{
		width: 101vw;
	}

	.mission-cont-txt{
		width: 800px;
	}

	/*services*/

	.page-title{
		padding-bottom: 0px;
	}

	#topworks-hislide{
		display: none;
	}

	.service-bottom{

		margin-top: 90px;
	}

	.serv-card{
		width: 100vw;
		padding: 20px 0;

		display: flex;
		align-items: flex-end;
		justify-content: center;

		margin-left: 24vw;
		margin-right: 10vw;
	}

	.serv-card-content{
		
		padding: 20px 10px;
		margin: 0 0 70px;
		width: 40vw;
	}

	.scardtxt{
		font-size: 18px;
		width: 85%;
		padding: 0 30px 10px 0px;
	}

	/*contact*/

	#in3{
		padding: 10px;
		height: 130px;
	}

	.contact-info{
		padding: 0;
	}

	.email-box{
		display: flex;

		width: 500px;
	}

	.contact-container{
		position: absolute;
		top: 0;

		width: 100vw;
		
		z-index: 2;
	}
}

@media only screen and (min-width: /*use 769*/ 320px) and (max-width:  1024px){
	#nav-menu{
		display: none;
	}

	.hamburg::before,
	.hamburg input{
		content: "";
		width: 60px;
		height: 5px;
		background-color: white;
		border-radius: 5px;
	}

	.hamburg2::before,
	.hamburg2 input{
		background-color: #3366FF;
	}

	.hamburg{
		display: flex;
		flex-direction: column;
		gap: 5px;

		position: fixed;
		top: 60px;
		right: 60px;
		cursor: pointer;
		z-index: 9999;
	}

	.hamburg input{
		appearance: none;
		padding: 0;
		margin: 0;
		outline: none;
		pointer-events: none;
	}

	.hamburg input:checked{
		position: relative;
		top: -10px;
		transition: position var(--animation-timing), rotate var(--animation-timing);
		rotate: 90deg;
	}

	input:checked ~ #sidebar{
		opacity: 1;
		transform: translateX(0);
		transition: opacity var(--animation-timing), transform var(--animation-timing);
	}

	:root{
		--animation-timing: 200ms ease-in-out;
	}

	#sidebar{
		position: fixed;
		top: 60px;
		right: 60px;
		width: 240px;
		margin-left: 30px;
		opacity: 0;
		transform: translateX(100%);

		background-color: rgb(51, 102, 255, 0.75);
	}

	#sidebar ul{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;

		padding: 30px 30px 10px 60px;
	}

	#sidebar li a{
		color: floralwhite;
		font-family: "Host Grotesk", serif;
		font-weight: 400;
		text-decoration: none;
		font-size: 18px;
		text-align: right;

		width: 200px;
	}

	#sidebar li a:hover{
		color: #CDD523;
	}


	.withdropdown{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin: 0 0 5px 0;
		width: 150px;
		text-align: right;

		position: relative;
		top: 2px;
	}

	#hamburger-anim-menu{
		padding: 10px 0 0 0;
		display: none;
		position: relative;
		top: -50px;
		z-index: 109;
	}

	.hamburger-dropline{
		height: 2px;
		border: none;
		background-color: floralwhite;
		margin: -5px 0 5px 0;
		width: 100px;
		opacity: 1;
	}

	.withdropdown:hover #hamburger-anim-menu{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		animation: dropdown_ani 0.5s forwards;
	}

	@keyframes dropdown_ani{
		from{opacity: 0; top:-50;}
		to{opacity: 1; top: 0;}
	}


	/*contact*/
	.contact-page{
		width: 100vw;
		height: 1000px;

		background-image: url("../images/wm-contact-50.webp");
		background-size: cover;
		background-position: left;

		animation: bg-moving 60s infinite linear;
	}


	.contact-content{
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: flex-start;
		justify-content: flex-start;

		margin-left: auto;
		margin-right: auto;

		padding: 0px;
	}


	#in3{
		padding: 10px;
		height: 130px;
	}

	.contact-info{
		padding: 0 0 60px 40px;
		margin: 0;
		font-size: 16px;

		text-align: center;
		width: 70vw;

	}

	.email-box{
		display: flex;
		padding: 0;
		margin-left: auto;
		margin-right: auto;

		width: 70vw;
	}

	.contact-container{
		position: absolute;
		top: 0;

		width: 100vw;
		
		z-index: 2;
	}

	#contact-links{
		display: flex;
		justify-content: center;

	}



	/*projects*/

	.abuyog-title{
		font-size: 60px;
	}

	.sec2{
		position: relative;
		top: 100px;

		margin-bottom: 200px;
	}

	.feat-content-block1{
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.feat-content-block2{
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}


	#the-project{
		background-color: floralwhite;
		padding: 40px;
		width: 70vw;
		height: 205px;

		margin: 0px 0 100px;

		display: flex;
		align-items: center;
		opacity: 0;
		position: relative;
		bottom: -170px;

		border-radius: 30px;
		filter: drop-shadow(1px 1px 10px rgb(0,0,0,0.5));
	}

	#the-facility{
		background-color: floralwhite;
		padding: 40px;
		width: 70vw;
		height: 205px;

		margin: 0px 0 100px;

		display: flex;
		align-items: center;
		opacity: 0;
		position: relative;
		bottom: -170px;

		border-radius: 30px;
		filter: drop-shadow(1px 1px 10px rgb(0,0,0,0.5));
	}

	/*service*/

	.serv-card{
		width: 90vw;
		padding: 20px 0;

		display: flex;
		flex-direction: column;
		align-items: center;


		margin-left: auto;
		margin-right: auto;
	}

	.serv-card-img{

		width: 90vw;
		height: 300px;
		margin: 0;

		position: relative;
		z-index: 4;
		opacity: 0;
	}

	#cardimg1{background-image: url("../images/wm_serv1.webp"); background-position: center; background-size: cover; background-repeat: no-repeat;}
	#cardimg2{background-image: url("../images/wm_serv-treat.webp"); background-position: center; background-size: cover; background-repeat: no-repeat;}
	#cardimg3{background-image: url("../images/wm_serv-sep.webp"); background-position: center; background-size: cover; background-repeat: no-repeat;}
	#cardimg4{background-image: url("../images/wm_serv-red.webp"); background-position: center; background-size: cover; background-repeat: no-repeat;}
	#cardimg5{background-image: url("../images/wm_serv-improv.webp"); background-position: center; background-size: cover; background-repeat: no-repeat;}

	.serv-card-content{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding: 20px 20px;
		margin: 0;

		width: 90vw;
		height: 120px;
		position: relative;
		right: 0px;
		bottom: 0px;

		opacity: 0;
		z-index: 5;
	}

	.scardtxt{
		font-size: 30px;
		text-align: center;
		padding: 0 0 0 0;
		align-self: center;
	}

	.scardtxt br{
		display: none;
	}

	.serv-card-content.in-view{
		animation: totheleft_anim3 1s 0.2s forwards;
	}

	@keyframes totheleft_anim3{
		from{
			right: -150px;
			opacity: 0;
		}

		to{
			right: 0px;
			opacity: 1;
		}
	}
	

	/*about*/
	.about-top{
		width: 100vw;
	}
	.mission-cont-txt{
		font-size: 40px;
	}

	#logobgabt{

		padding: 100px 0 90px 0;
		margin: 0;

		position: relative;
		top: -40px;
	}

	.about-top3{
		flex-direction: column;
		justify-content: space-between;
 	}

 	.about-top3 img{
		width: 90vw;
		position: relative;
		z-index: 10;

		object-fit: cover;
	}

	#txtabt3{
		width: 90vw;
		text-align: center;
		padding: 40px 0;
	}

	.about-top4 img{
		width: 90vw;
		position: relative;
		z-index: 10;

		object-fit: cover;
	}

	.about-top4{
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: flex-start;
		padding: 0 0 40px 0;

		width: 100vw;
	}

	#txtabt4{
		width: 70vw;
		text-align: center;
		padding: 40px 0;
	}

	/*home*/

	.home-services{
		height: 300px;
	}

	.home-abt{
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		margin-top: 80px;
	}

	#homeabt3img{
		width: 100vw;
		position: relative;
		right: 0;

	}

	.home-slideshow-content{
		width: 100vw;
		height: 300px;

		display: flex;
		align-items: center;
		align-content: center;
	}

	#home-serv-txt{
		font-size: 20px;
		
		font-weight: 300;
		text-align: center;
		
		margin: 20px 70px 30px 20px;
		padding: 0 20px;
	}

	.homeserv-title{
		font-size: 20px;

		margin: 0 0 0 70px;
		position: relative;
		top: 60px;

	}

	.card-container{
		width: 90vw;
	}

}

@media only screen and (min-width: /*use 667*/ 320px) and (max-width:  768px){

	/*home*/
	.mission{
		width: 100vw;
		height: 500px;
		background-color: #2E3188;
		/*background-image:url("../images/wm-home_landing.webp");*/
		
		background-position: center-bottom;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.landingimage{
		width: 100vw;
		height: 500px;
		object-fit: cover;
	}

	.home-abt-txt-1{
		width: 90vw;
		margin-left: auto;
		margin-right: auto;
	}

	.mission-cont-txt{
		font-size: 30px;
	}

	/*services*/
	.scardtxt{
		font-size: 28px;
	}

	.serv-card-content{
		height: 100%;
		justify-content: center;
	}

}

@media only screen and (min-width: /*use 569*/ 320px) and (max-width:  666px){

	/*footer*/


	#footer-main{
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: center;

		padding: 40px 0px 40px;
		color: floralwhite;
	}

	#footer-left a{
		padding-right: 50px;
	}


	#footer-right{
		margin-bottom: 40px;
	}

	#footer-right ul{
		text-align: center;
	}

	#homefooter-main{
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: center;

		padding: 40px 0px 40px;
		color: floralwhite;
	}

	#homefooter-left a{
		padding-right: 50px;
	}
	#homefooter-logo img{
		width: 100px;
	}


	#homefooter-right{
		margin-bottom: 40px;
	}

	#homefooter-right ul{
		text-align: center;
	}



	/*navbar*/
	.sbig-nav{
		display: none;
	}

	#navbar-logo{
		width: 50px;
		
	}

	.small-nav-logo{
		display: block;
		filter: invert(36%) sepia(60%) saturate(4120%) hue-rotate(217deg) brightness(98%) contrast(108%);
	}

	.small-nav-logo-white{
		display: block;
		filter: invert(100%);
	}

	/*home*/

	.home-abt-2{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#homeabt2img{
		width: 90vw;
	}

	.home-abt-txt-2{
		width: 400px;
		margin: 50px 30px 20px;
		text-align: center;
	}

	.home-abt-txt-2.in-view{
		animation: totheright_anim 0.4s 0s forwards;
	}

	#homeabt3img{
		margin-top: -40px;
	}



	/*about*/


	.about-top{
		width: 100vw;
	}

	.about-top1{
		width: 100vw;
	}
	.mission-cont-txt{
		font-size: 30px;
		bottom: 70px;
	}

	.about-top2 h3{
		font-size: 30px;
	}


	.about-top4 img{
		width: 90vw;
		position: relative;
		z-index: 10;

		object-fit: cover;
	}

	.about-top4{
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: flex-start;
		padding: 0 0 40px 0;

		width: 100vw;
	}

	#txtabt4{
		width: 90vw;
		text-align: center;
		padding: 40px 0;
	}

	.mission-cont-txt{
		font-size: 25px;
	}

	/*contact*/

	.email-box{
		display: flex;

		width: 90vw;

		margin-left: auto;
		margin-right: auto;

		position: relative;
		left: -55px;
	}

	.contact-info{
		padding: 0 0 60px 25px;
		margin: 0;
		font-size: 16px;

		text-align: center;
		width: 70vw;

	}
	/*proj*/

	#the-project{
		height: 275px;
		bottom: -300px;
		margin: 0px 0 180px;
	}

	#the-facility{
		height: 300px;
		bottom: -300px;
	}

	.sec2{
		position: relative;
		top: 100px;

		margin-bottom: 300px;
	}


}

@media only screen and (min-width: /*use 320*/ 320px) and (max-width:  568px){

		#homefooter-left{
			flex-direction: column-reverse;
			align-content: center;
			align-items: center;
		}

		#homefooter-left a{
			padding-right: 0px;
		}
		#homefooter-logo{
			width: 100px;
			position: relative;
			bottom: 0px;
			opacity: 0;
		}

		#homefooter-left-text{
			text-align: center;
			align-items: center;
			margin-bottom: 30px;
		}

		#homefooter-links{
			display: flex;
			justify-items: space-around;

			padding: 0px 0 5px;
		}

		#homefooter-links a img{
			width: 30px;
			align-self: center;
			margin-left: 0px;
			margin-right: 0;
			padding-right: 0;
		}

		#homefooter-links a img:hover{
			filter: invert(19%) sepia(63%) saturate(520%) hue-rotate(16deg) brightness(95%) contrast(94%);
		}

		#homefooter-links a:nth-child(1){
			position: relative;
			margin: 0 5px 0 0;
			padding-right: 0;
		}

		#homefooter-links a:nth-child(2){
			position: relative;
			margin: 0 0px;
			padding-right: 0;
		}

		#homefooter-right{
			margin-left: 130px;
			margin-right: auto;
		}



		#footer-left{
			flex-direction: column-reverse;
			align-content: center;
			align-items: center;
		}

		#footer-left a{
			padding-right: 0px;
		}
		#footer-logo{
			width: 100px;
			position: relative;
			bottom: 0px;
			opacity: 0;
		}

		#footer-left-text{
			text-align: center;
			align-items: center;
			margin-bottom: 30px;
		}

		#footer-links{
			display: flex;
			justify-items: space-around;

			padding: 10px 0 5px;
		}

		#footer-links a img{
			width: 30px;
			align-self: center;
			margin-left: 0px;
			margin-right: 0;
			padding-right: 0;
		}

		#footer-links a img:hover{
			filter: invert(19%) sepia(63%) saturate(520%) hue-rotate(16deg) brightness(95%) contrast(94%);
		}

		#footer-links a:nth-child(1){
			position: relative;
			margin: 0 5px 0 0;
			padding-right: 0;
		}

		#footer-links a:nth-child(2){
			position: relative;
			margin: 0 0px;
			padding-right: 0;
		}

		#footer-right{
			display: none;
		}




		header{
			width: 100vw;
		}

		.hamburg::before,
		.hamburg input{
				width: 40px;
			}

		.hamburg{
			top: 40px;
			right: 30px;

			position: fixed;
		}
		.hamburg-home{
			top: 40px;
			right: 40px;

			position: fixed;
		}

		.hamburg-home2{
			top: 40px;
			right: 360px;

			position: fixed;
		}


		#sidebar{
			position: absolute;
			top: -40px;
			right: 0px;
			width: 150vw;
			height: 100vh;
			margin-left: 0px;
			margin-right: -40px;
		}

		#sidebar ul{

			padding: 100px 40px 10px 60px;
		}

		.ul-home{
			padding: 0 0 0 0;
		}

		.hamburger-item{
			margin: 10px 0;
		}


		.small-nav-logo{
			position: fixed;
			width: 50px;
			top:30px;
			left: 30px;
			display: block;
			filter: invert(36%) sepia(60%) saturate(4120%) hue-rotate(217deg) brightness(98%) contrast(108%);
		}

		.small-nav-logo-white{
			position: fixed;
			width: 50px;
			top:30px;
			left: 30px;
			display: block;
			filter: invert(100%);
		}


		.mission{
			width: 100vw;
			height: 300px;
			background-color: #2E3188;
			/*background-image:url("../images/wm-home_landing.webp");*/
			
			background-position: left;
			background-size: contain;

			background-repeat: no-repeat;
		}

		.landingimage{
			width: 100vw;
			height: 300px;
			object-fit: cover;
		}


		.home-abt-1{
			width: 100vw;
			margin-top: -50px;
		}

		.home-abt-txt-1{
			font-size: 14px;
		}

		#homeabt2img{
			width: 100vw;
		}

		.home-abt-txt-2{
			width: 80vw;
			font-size: 14px;

			margin: 30px 0 0 0;
		}

		.homeserv-title{
			text-align:center;
			margin: 0px 0px 0px 120px;
			font-size: 18px;
		}


		#home-serv-txt{
			font-size: 18px;
			text-align: center;
			
			margin: 0 0 0 0;
			padding: 30px 10px;
		}
		#homfeatproj{
			font-size: 30px;
			width: 80vw;
		}

		#homefooter-right{
			display: none;
		}


		/*about*/

		.about-top2 h3{
			width: 90vw;
			font-size: 20px;
		}

		.about-top3{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 0 40px 0;

			width: 90vw;
		}

		.about-top4{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 0 40px 0;

			width: 90vw;
		}

		#txtabt3{
			width: 90vw;
			text-align: center;
			padding: 30px 10;
			font-size: 14px;
			position: relative;
			right: 0px;
			opacity: 0;
		}
		#txtabt3.in-view{
			animation: totheright_anim 1s forwards;
		}

		#logobgabt{
			background-image: url("../images/icons/wm_logo_large.svg");
			background-size: contain;
			background-color: rgb(255,255,255,0.75);
			background-blend-mode: lighten;
			background-repeat: no-repeat;
			background-position: right;

			padding: 0px 0 90px 0;

			position: relative;
			top: -40px;
		}

		#txtabt4{
			width: 90vw;
			text-align: center;
			font-size: 14px;
			padding: 30px 10;
			position: relative;
			left: 0px;
			opacity: 0;
		}
		#txtabt4.in-view{
			animation: totheleft_anim 1s forwards;
		}

		#misvaltitle{
			font-size: 24px;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			padding: 0 0 20px 0;
		}

		.mission-values{
			margin-left: auto;
			margin-right: auto;
		}

		.mission-container{
			align-items: flex-start;
			margin-left: auto;
			margin-right: auto;

			width: 90vw;
		}

		.mission-container.in-view{
			animation: tothetop_anim 1s 0.2s forwards;
		}

		.mission-cont-txt{
			width: 80vw;
			text-align: left;

			font-family: "Host Grotesk", serif;
			font-weight: 600;
			font-size: 14px;
			color: floralwhite;

			text-shadow: 1px,1px, 10px, black;

			position: relative;
			opacity: 0;
			bottom: 30px;
			right: -20px;
			z-index: 2;
		}
		.mission-cont-txt.in-view{
			animation: tothetop2_anim 1s forwards;
		}

		@keyframes tothetop2_anim{
			from{opacity: 0; bottom: -50px;}
			to{opacity: 1; bottom: 30px;}
		}


		.scardtxt{
			font-size: 16px;
		}

		.serv-card-content{
			padding: 5px 0px;
			margin: 0;

			width: 90vw;
			height: 120px;
		}


		/*proj*/

		.feat-top{
			height: 460px;
		}

		.abuyog-title{
			color: floralwhite;
			font-family: "Host Grotesk", serif;
			font-size: 40px;
			font-weight: 600;

			width: 80vw;
			margin-left: auto;
			margin-right: auto;
			padding: 0 0 60px 0;
		}

		.abuyog-title.in-view{
			animation: totheright_anim 1s forwards;
		}

		.feat-content-block1{
			width: 100vw;
			height: 300px;

			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
		}

		#the-project{
			height: 330px;
			bottom: -500px;
			margin: 0px 0 180px;

		}

		#the-facility{
			height: 300px;
			bottom: -500px;

			margin:0 0 180px;
		}

		.featured-project-text{
			font-size: 14px;
		}

		.sec2{
			margin-top: 200px;
		}

		.feat-content-block2{
			width: 100vw;
			height: 300px;

			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
		}

		#learn_btn_main{
			margin: 150px 0 60px 0;
		}





				




}