@charset "utf-8";
/* CSS Document */
.parallax {
  /* The image used */
  background-image: url("../pic/web1.png");

  /* Set a specific height */
  min-height:700px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;	
  image-rendering: optimizeQuality;
  image-rendering :-webkit-transform: translate3d(0,0,0);
  image-rendering: -webkit-optimize-contrast;	
}
	
body {
  margin: 0;
  background-color: white;	
}
	
footer {
  position: relative;
  bottom: 0;	
  background-color: white;
  color: black;
  height: 25px;
  padding-top: 8px;	
  text-decoration: none;
}	
	
/* Full-width input fields */
select {
  width: 100%;
  padding: 5px;
  margin: 5px 0 18px 0;
  border: solid 1px black;
  border-radius: 2px;
  background: #f1f1f1;	
}
	
textarea {
  width: 100%;
  padding: 10px;
  margin: 5px 0 10px 0;
  border: solid 1px black;
  border-radius: 2px;
  background: #f1f1f1;
}	
	
input[type=text], input[type=email]{
  width: 100%;
  padding: 10px;
  margin: 5px 0 18px 0;
  border: solid 1px black;
  border-radius: 2px;	
  background: #f1f1f1;
}
	
input[type=text]:focus, input[type=email]:focus , textarea:focus , select:focus {
  background-color: #ddd;
  outline: none;
}	

/* Add styles to the form container */
.container {
  left: 10px;
  margin: 15px;
  max-width: 45vw;
  padding: 12px;
  background-color: white;
  text-align: left;		
}
	
* {
  box-sizing: border-box;
}	
/* Set a style for the submit button */
.btn {
  background-color: #af8f4e;
  color: black;
  padding: 12px 10px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 1;
	border-radius: 2px;
}

.btn:hover {
  opacity: 0.9;
	border: solid 1px black;
  border-radius: 2px;
}	

	
	
.contact {
	display: flex; /* Makes the contact a flex contact */
	flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
	gap: 20px; /* Adds space between the flex items */
	max-width: 100%;
	height:730px;
}

.left-div, .right-div {
	flex: 1; /* Allows both divs to grow and shrink proportionally */
	width: 300px; /* Minimum width before wrapping */
	padding: 20px;
	border: 1px solid black;
	box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

/* Media query for smaller screens (e.g., mobile) */
@media (max-width: 768px) {
	.contact {
		flex-direction: column; /* Stacks items vertically on smaller screens */
		height: 1600px !important;
	}
	.left-div, .right-div {
		width: 100%; /* Full width on smaller screens */
	}
	
	.container {
		max-width: 94% !important;
	}
}	

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }	

	
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}