* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  
}

/* Style the body */
 body, html {
  margin: 0;
  max-height:100%;
  height: 100%;
  max-width: 100%;
  width: 100%;
  background-color: #717d7e;
  color: #ffffff;
  }
  
  



/* Header appearance desktops*/
@media only screen and (min-width: 601px) {
  .header {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: auto%;
    background-color: #C9CECE;
    color: #ffffff;
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 5px;
    justify-content: space-between;
  }

  .logo-container {
    display: flex;
    align-items: left;
    justify-content: justify;
    width: 39%;
    height: auto;
    padding-top: 0.3%;
    padding-bottom: 0.3%;
  }

  .logo {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }

  .menu-container {
    display: flex;
    width: 12%;
    height: auto;
    align-items: center;
    padding-top: 1.5%;
    
  }

  .menu-container a {
    font-size: 18px;
	color: #000000;
  }
}
 


/* Header appearance mobile*/

@media only screen and (max-width: 600px) {
  .header {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: auto;
    background-color: #C9CECE;
    color: #ffffff;
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 5px;
    justify-content: space-between;
  }

  .logo-container {
    display: flex;
    align-items: left;
    justify-content: justify;
    width: 75%;
    height: auto;
    padding-top: 0.3%;
    padding-bottom: 0.3%;
  }

  .logo {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }

  .menu-container {
    display: flex;
    width: 18%;
    height: auto;
    align-items: center;
    padding-top: 1.5%;
   
  }

  .menu-container a {
    font-size: 15px;
	color: #000000;
  }
}


@media only screen and (min-width: 601px) {
  /* announcement bar appearance and graphics */
  .announcement-bar {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: auto;
    background-color: #96A0A0;
    color: #ffffff;
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 21px;
    white-space: nowrap;
  }

  .announcement-bar p {
    animation: scroll 30s linear infinite;
    width: 100%;
	left:100%
    }

  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}


@media only screen and (max-width: 600px) {

/* announcement bar appearance and graphics */
.announcement-bar {
  display:flex;
  overflow: hidden;
  width: 100%;
  height:auto;
  background-color: #96A0A0;
  color: #ffffff;
  padding: 1px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
  white-space: nowrap;
}

.announcement-bar p {
  animation: scroll 24s linear infinite;
  width:100%;
  left:100%
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

}

/* Style the navigation menu */


/* Large screens (desktops) */
@media only screen and (min-width: 601px) {
  .navbar {
	display:flex;
    overflow: hidden;
	width: 100%;
    height:auto%;
    background-color:#586666;
    padding: 1px;
	border: 1px solid #ccc;
	border-radius: 5px;
	align-items:center;
	justify-content:space-evenly;
	
	}
  
  
    .navbar a {
    display: flex;
    color: #ffffff;
    text-decoration: none;
    font-size: 21px;
	padding: 1%;
    width: 100%;
	height:auto;
	text-align:center;
	
	
  }



  .navbar a:hover {
    text-decoration: underline;
    font-weight: bold;
  }
}

/* Small screens (mobile devices) */
@media only screen and (max-width: 600px) {
  .navbar {
	display:flex;
    overflow: hidden;
	width: 100%;
    height:auto;
    background-color:#586666;
    padding: 1px;
	border: 1px solid #ccc;
	border-radius: 5px;
	align-items:center;
	justify-content:space-evenly;
		
	}
  
  
    .navbar a {
    display: flex;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
	padding: 1%;
    width: 100%;
	height:auto;
	text-align:center;
	
  }



  .navbar a:hover {
    text-decoration: underline;
    font-weight: bold;
  }
}


/* styling main images for the page*/

.hero-image-index {
  background-image: url("index-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */

@media screen and (max-width: 600px) {
  .hero-image-index {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

.hero-image-about {
  background-image: url("about-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position:relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-about {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}


.hero-image-products {
  background-image: url("products-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-products {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

.hero-image-services {
  background-image: url("services-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-services {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

.hero-image-contact {
  background-image: url("contact-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-contact {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

.hero-image-feedback {
  background-image: url("feedback-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-feedback {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

.hero-image-collaborate {
  background-image: url("collaborate-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-collaborate {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

.hero-image-SignUp {
  background-image: url("SignUp-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-SignUp {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

 .hero-image-LogIn {
  background-image: url("LogIn-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-LogIn {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

 .hero-image-privacypolicy {
  background-image: url("privacypolicy-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-privacypolicy {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

 .hero-image-terms-and-conditions {
  background-image: url("terms-and-conditions-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-terms-and-conditions {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}

 .hero-image-faqs {
  background-image: url("faqs-image.gif");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media screen and (max-width: 600px) {
  .hero-image-faqs {
    height: 18%;
	width: auto%;
    background-size: contain;
    background-position: center;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
}



/* Style section in between hero-image and footer*/

@media only screen and (min-width: 601px) {
 .body {
	display: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
		
	}
 .text-area {
  font-family: Arial, sans-serif;
  font-size: 21px;
  color: #ffffff;
  background-color: #717d7e;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  justify-content: space-evenly;
  text-align: justify;
  word-wrap: break-word;
  
  
}
 .item-listings {
  color: #ffffff;
  background-color: #717d7e;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align:justify;
  font-size:21px;
    
}
	
 .form {
    display: flex;
    flex-direction: column;
    align-items: center;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	
  }
  
  label, input, textarea {
    display: block;
	margin: 10px;
  }
  
  label {
    font-weight: bold;
  }
  
  textarea {
    height:150px;
	width: 300px;
  }
  
  button {
    margin-top: 20px;
  }
  
  
  
  
  pre {
  white-space: pre-wrap; /* this will make sure the text wraps when it reaches the edge of the screen */
  font-size: 21px; /* reduce the font size for smaller screens */
  width: 100%; /* make the pre-formatted text element take up the full width of the screen */
  }

}


@media screen and (max-width: 600px) {
	.body {
    display: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	
  }
	.text-area {
	font-family: Arial, sans-serif;
	font-size: 15px;
	color: #ffffff;
	background-color: #717d7e;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	justify-content: space-evenly;
	text-align: justify;
	word-wrap: break-word;
	
}

	.item-listings {
	color: #ffffff;
	background-color: #717d7e;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-align: justify;
	word-wrap: break-word;
}

   .form {
    display: flex;
    flex-direction: column;
    align-items: center;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
  
  label, input, textarea {
    display: block;
	margin: 10px;
  }
  
  label {
    font-weight: bold;
  }
  
  textarea {
    height: 150px;
	width: 300px;
  }
  
  button {
    margin-top: 20px;
  }
  
  
  
pre {
  white-space: pre-wrap; /* this will make sure the text wraps when it reaches the edge of the screen */
  font-size: 15px; /* reduce the font size for smaller screens */
  width: 100%; /* make the pre-formatted text element take up the full width of the screen */
  }


}

/* Style the footer */

/* footer top section */

@media only screen and (min-width: 601px) {
	
 .footer {
  display: flex;
  width: 100%;
  height: auto%;
  padding:1px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

 .footer-top {
  background-color: #717e7d;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-height:100%
}

 .social-icons {
  display: flex;
  

  
}

 .social-icons a {
  display: flex;
  width: 45px;
  height: 45px;
  padding:3px
  
  }


 .footer-links {
    background-color: #586666;
	display: flex;
	align-items:center;
	justify-content:space-evenly;
	padding:1px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width:100%;
	height:auto;
  }

  .footer-links a {
    display: flex;
	flex-wrap: wrap;
	background-color:#586666;
	color: #ffffff;
	text-decoration: none;
	font-size: 100%;
	margin-top:1.5%;
	margin-bottom:1.5%;
		
  }
  
  .footer-links a:hover {
    text-decoration: underline;
    font-weight: bold;
  }

 .footer-text {
  font-size:90%;
  margin-right: auto;
  margin-left:auto;
	}



/* footer bottom section */

 .footer-bottom {
  margin-top: auto;
  font-size: 18px;
  align-items: center;
  background-color: #717e7d;
  margin-left:auto;
  margin-right:auto;
    
}

 .footer-bottom p {
  padding-bottom:auto;
}

}

@media only screen and (max-width: 600px) {
	
 .footer {
  display: flex;
  width: 100%;
  height: auto%;
  padding:1px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

 .footer-top {
  background-color: #717e7d;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-height:100%
}

 .social-icons {
  display: flex;
  
}

 .social-icons a {
  display: flex;
  width: 30px;
  height: 30px;
  padding:1.5px;
  
  }


 .footer-links {
    background-color: #586666;
	display: flex;
	align-items:center;
	justify-content:space-evenly;
	padding:1px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width:100%;
	height:auto;
  }

  .footer-links a {
    display: flex;
	flex-wrap: wrap;
	background-color:#586666;
	color: #ffffff;
	text-decoration: none;
	font-size: 100%;
	margin-top:3%;
	margin-bottom:3%;
	padding:3%;
		
  }
  
  .footer-links a:hover {
    text-decoration: underline;
    font-weight: bold;
  }

 .footer-text {
  font-size:90%;
  margin-right: auto;
  margin-left:auto;
	}



/* footer bottom section */

 .footer-bottom {
  margin-top: auto;
  font-size: 18px;
  align-items: center;
  background-color: #717e7d;
  margin-left:auto;
  margin-right:auto;
    
}

 .footer-bottom p {
  padding-bottom:auto;
}

}