/* CSS Document */


html, body{
        margin: 0px;
        padding: 0px;
        text-align: center;
		/*border: dotted green 6px;*/
}

a{
	color: white;
}

a:link {
  text-decoration: none;
	color: white;
}

a:visited {
  text-decoration: none;
}


body{
	background-color: #FFFFFF;
}

.menu-container{
	/*border: 2px green;*/
	background-color: #00C72C;
	height: 6vh;
}

#icons-left{
	/*border: 2px solid white;*/
	text-align: left;
	width: 10vw;
	height: 100%;
	margin-left: 15px;
}

#icons-right{
	/*border: 2px solid purple;*/
	width: 15vw;
	height: 100%;
	text-align: right;
	position: relative; 
	left: 80vw;
	bottom: 6vh;
}

.menu-icons{
	height: 100%;
	width: 3vw;
	margin-right: 8px;
}

h1{
	font-family: 'Zen Dots', sans-serif;
	color: #00C72C;
	text-shadow: #00420F 2px 2px 4px;
	font-size: 90px;
	/*border: 2px dashed pink;*/
}

#banner-info{
	font-family: 'Zen Dots', sans-serif;
	color: white;
	text-align: center;
	font-size: 30px;
	width: 30%;
	margin: 0 auto;
	/*border: 2px dashed pink;*/
	margin-top: -40px;
}

.banner-text-container{
	/*background: 1px solid pink;*/
	position: absolute;
	top: 15vh;
	left: 15vh;
	/*border: 8px dashed white;*/
	width: 80%;
}

.banner-container{
	height: 60vh;
}

#banner-image{
	height: 60vh;
	width: 100%;
}

h2{
	font-family: 'Zen Dots', sans-serif;
	color: #2B00C7;
	font-size: 45px;
}

.button-title{
	color: white;
	font-family: 'Zen Dots', sans-serif;
	font-size: 30px;
}

.button-styles{
	background-color: #00C72C;
	border: none;
  	color: white;
	/*height padding, width padding*/
  	padding: 0px 76px;
  	text-align: center;
  	text-decoration: none;
	border-radius: 40px;
}

.button-styles:hover {
  background-color: #00781a; /* Darker Green */
  color: white;
}

.who-we-are-paragraph{
	font-family: 'Yaldevi', sans-serif;
	color: #2B00C7;
	font-size: 20px;
	text-align: left;
}

.text-section-about{
	/*border: 3px dotted orange;*/
	height: 40vh;
}

.text-section-about-flex-container{
	display: flex;
	gap: 10px;
	/*background-color: grey;*/
	padding: 35px;
	height: 30vh;
}

.flex-container-items-1{
	/*border: 3px dashed white;*/
	padding: 20px;
	width: 40%; 
	margin-left: 20px;
}

.flex-container-items-2{
	/*border: 3px dashed white;*/
	border-left: 3px solid #2F38D3;
	padding: 50px;
	width: 60%;
	margin-right: 35px;
}

/*Products Section*/
/*parent?*/
.row-col-contain{
	/*border: 2px solid green;*/
}

.product-section{
	/*border: 2px dashed black;*/
	height: 75vh;
	background-color: #2B00C7;
}



.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 40vh;
  background-color: #2196F3;
  padding: 10px;
  width: 33%;
 
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}






footer{
	border: 2px purple;
	height: 36vh;
	background-color: #2F38D3;
}

.title-icon-container{
	/*weird error where padding top gets messed up when border taken away*/
	/*quick fix = making border same color as background color*/
	border: 3px dashed #2F38D3;
	width: 20%;
	text-align: center;
	margin-left: 80px;
	padding-top: 8px;
}

.list-footer-links{
	border: 4px solid green;
	width: 30%;
	text-alight: left;
}

.footer-lists{
	/*border: 2px solid green;*/
	width: 30%;
	margin-left: 30vw;
	margin-top: -20vh;
	text-alight: left;
	color: white;
	font-family: 'Russo One', sans-serif;
	text-decoration: none;
	list-style: none;
}

.footer-titles{
	font-size: 15px;
}

#facebook-logo{ 
	height: 45px;
}

#mail-icon{
	height: 46px;
}

#footer-list-two{
	/*weird error where margin top gets messed up when border taken away*/
	/*quick fix = making border same color as background color*/
	border: 2px solid #2F38D3;
	width: 30%;
	/*margin-left: 30vw;
	margin-top: -28vh;*/
	text-alight: left;
	color: white;
	font-family: 'Russo One', sans-serif;
	text-decoration: none;
	list-style: none;
	margin-left: 57vw;
	margin-top: -18vh;
}

li{
	text-alight: left;
}

.title-footer{
	color: white;
}

/*CONTACT PAGE SECTION*/
#contact-body{
	background-color: black;
}

#contact-us-title{
	font-size: 80px;
	font-family: 'Zen Dots', sans-serif;
	color: #2B00C7;
	filter: drop-shadow(-10px 3px 3px #00C72C);
}
	
	.image-container-contact{
		height: 70vh;
		/*border: 4px dashed white;*/
		/*width 50%;*/
		width: 68vw;
		display: inline-block;
		margin-left: -59vw;
		background-color: black;
	}

#large-img-contact{
	text-align: left;
	height: 100%;
	width: 69vw;
	/*width: 50vw;*/
	/*margin-right: 70vw;*/
}
	
	.form-contact-container{
		/*border: 4px solid blue;*/
		/*use instead of width*/
		width: 42vw;
    	height: 75vh;
    	display: inline-block;
   		margin-right: -46vw;
		text-align: left;
		font-family: 'Zen Dots', sans-serif;
		font-size: 26px;
	}

	/*form inputs*/
	input[type=text], select, textarea {
	  width: 100%;
	  padding: 12px;
	  /*
	  border: 5px solid pink;
	  border-radius: 4px;
	  box-sizing: border-box;*/
	  margin-top: 29px;
	  margin-bottom: 3px;
	  resize: vertical;
	  border-bottom: 5px solid #00C72C;
	  background-color: black;
	}

	input[type=submit] {
		  background-color: #00C72C;
		  color: white;
		  padding: 25px 55px;
		  border: none;
		  border-radius: 35px;
		  cursor: pointer;
		  font-family: 'Russo One', sans-serif;
		  font-size: 25px;
		  margin-left: 12vw;
	}

	input[type=submit]:hover {
	  	background-color: #45a049;
		margin-left: 6vw;
	}

	.container {
	  border-radius: 5px;
	  background-color: black;
	  padding: 20px;
	  color: white;
	}

.label-styles{
	color: #00C72C;
	text-align: left;
}

	
	
	
	
	
	
	/*END OF CONTACT PAGE SECTION*/

@media screen and (max-width: 1128px) {
	body{
		background-color: white;
	}
	
	.button-styles{
	/*height padding, width padding*/
  	padding: 0px 35px;
	margin-top: -25px;
	}	
	
	.image-container-contact {
    width: 61vw;
    }
	
}

@media screen and (max-width: 995px) {
  body{
    background-color: red;
  }
	
  .menu-icons{
		width: 6vw;
		margin-right: 0px;
	}

	#icons-left{
		/*border: 2px solid white;*/
		width: 15vw;
		margin-left: 15px;
	}

	#icons-right{
		/*border: 2px solid purple;*/
		width: 40vw; 
		left: 55vw;
		bottom: 6vh;
	}
	
	.banner-container{
		height: 45vh;
	}

	#banner-image{
	height: 45vh;
	}

	#banner-info{
		font-size: 25px;
		width: 48%;
		margin: 0 auto;
		/*border: 2px dashed pink;*/
		margin-top: -40px;
	}

	.banner-text-container{
		top: 2vh;
		left: 10vh;
	}
	
	
	.text-section-about-flex-container{
	display: flex;
	gap: 10px;
	background-color: white;
	padding: 35px;
	height: 30vh;
	}

	.flex-container-items-1{
	/*border: 3px dashed white;*/
	padding: 15px;
	width: 40%; 
	margin-left: 10px;
	}	

	.flex-container-items-2{
	/*border: 3px dashed white;*/
	border-left: 3px solid #2F38D3;
	padding: 10px;
	margin-right: 20px;
	}

	.button-styles{
	background-color: #00C72C;
	border: none;
  	color: white;
	/*height padding, width padding*/
  	padding: 0px 0px;
	width: 290px;
	}
	
	.button-styles{
	/*height padding, width padding*/
  	padding: 10px 18px;
	margin-top: -20px;
	}
	
	.image-container-contact {
    width: 100%;
	}
	
	.image-container-contact {
    margin-left: -2vw;
	}
	
	.form-contact-container {
    width: 100%;
    margin-right: 0vw;
	}
	
	input[type=submit] {
    margin-left: 30%;
	}
}

@media screen and (max-width: 768px) {
  body{
    background-color: darkblue;
  }
	
  .menu-icons{
	width: 8vw;
	margin-right: 5px;
	}

	#icons-left{
	/*border: 2px solid white;*/
	width: 20vw;
	margin-left: 15px;
	}

	#icons-right{
	/*border: 2px solid purple;*/
	width: 40vw; 
	left: 55vw;
	bottom: 6vh;
	}
	
	.banner-container{
	/*border: 2px dashed powderblue;*/
	height: 40vh;
	}

	#banner-image{
		height: 35vh;
	}
	
	.banner-container{
		height: 35vh;
	}

	#banner-image{
	height: 40vh;
	}
	
	h1{
		font-size: 70px;
	}
	
	#banner-info{
		font-size: 20px;
		width: 48%;
	}

	.banner-text-container{
		top: 8vh;
		left: 6vh;
	}
	
	.text-section-about-flex-container{
		flex-direction: column;
	}
	
	.text-section-about-flex-container{
	/*border: 3px dotted orange;*/
	height: 80vh;
	}
	
	.flex-container-items-1 {
    /*border: 3px dashed white;*/
    width: 100%;
	/*center text*/
	margin-left: -20px;
	}
	
	.flex-container-items-2 {
    /* border: 3px dashed white; */
    border-left: 3px solid white;
    padding: 0px;
    width: 100%;
    margin-right: 0px;
	}
	
	h2 {
    font-size: 60px;
	}
	
	.who-we-are-paragraph {
    font-size: 30px;
	}
	
	.title-icon-container{
	/*weird error where padding top gets messed up when border taken away*/
	/*quick fix = making border same color as background color*/
	/*border: 3px dashed #2F38D3;*/
	width: 100%;
	margin: 0px auto;
}
	/*Footer*/
	footer {
    border: 2px purple;
    height: 70vh;
    background-color: #2F38D3;
	}

	.list-footer-links{
		border: 4px solid green;
		width: 30%;
		text-alight: left;
	}

	.footer-lists{
		/*border: 2px solid green;*/
		width: 90%;
		margin-left: 0vw;
		margin-top: 5vh;
		text-alight: center;
	}

	.footer-titles{
		font-size: 15px;
	}


	#footer-list-two{
		width: 90%;
		/*margin-left: 30vw;
		margin-top: -28vh;*/
		margin-left: 0vw;
		margin-top: 4vh;
	}
	
	.image-container-contact {
    height: 40vh;
	}
	
	input[type=submit] {
    margin-left: 25%;
	}
}

@media screen and (max-width: 600px) {
  body{
    background-color: lightgreen;
  }

	.banner-container{
		height: 25vh;
	}

	#banner-image{
	height: 25vh;
	}
	
	h1{
		font-size: 50px;
	}
	
	#banner-info{
		font-size: 18px;
		width: 48%;
	}

	.banner-text-container{
		top: 8vh;
		left: 5vh;
	}
	
	.who-we-are-paragraph {
    font-size: 25px;
	}
	
	.image-container-contact {
    height: 30vh;
	}
	
	input[type=submit] {
    margin-left: 17%;
	}
}

@media screen and (max-width: 480px) {
  body{
    background-color: yellow;
  }

	.banner-container{
		height: 23vh;
	}

	#banner-image{
	height: 23vh;
	}
	
	h1{
		font-size: 50px;
		width: 100%;
	}
	
	.who-we-are-paragraph {
    font-size: 22px;
	}
	
	.banner-text-container {
	/*centering*/
     width: 100%;
	 margin-left: -54px;
	}
	
	#banner-info{
		font-size: 20px;
		width: 60%;
	}

	.banner-text-container{
		top: 4vh;
		left: 5vh;
	}
	
	#contact-us-title {
    font-size: 65px;
	}
	/*button*/
	input[type=submit] {
    margin-left: 8%;
	}
	
	/*FOOTER*/
	
}