@charset "utf-8";
/* CSS Document */
body{
background-image:url("Images/SprinklerBackground2.jpg");
 background-size: cover; /* Change this to "contain" or "100% 100%" as needed */
  background-position: left;
  background-repeat: no-repeat;
  height: 100vh;
}
#logo{
width:50%!important;
float:right;
margin-right:4vw;
margin-top:-10vw;
}
.nav-container {
  display: flex;
  gap: 15px;
  padding: 10px;
  border-radius: 20px; /* Outer rounded shape */
margin-top:15%;
width:40%;
margin-left:1%;
}

/* Individual navigation divs */
.nav-item {
  background-color:rgb(166, 138, 65);
  color: white;
  padding: 12px;
  text-align: center;
  border-radius: 10px; /* Perfectly rounded individual divs */
  flex: 1; /* Makes them evenly share the available space */
 filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.5));
}
a {
  text-decoration: none;
color:white;
font-weight:400;
 font-family:Niramit;
font-size:18px;
}
/* Media query stacks the divs vertically on small screens */

.text{
margin-top:-15%;
width:50%;
align-content: center;
float:left;
margin-left:2%;
display:block;
}
h1{
font-family:Niramit;
color:white;
text-align: left;
font-size:2vw;
filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.5));
}
h2{
font-family:Niramit;
color:white;
text-align: left;
font-size:3vh;
filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.5));
font-weight:600;
}

@media screen and (max-width: 900px) {
  h1 {
    font-size: 5vw;
  }
}
p{
font-family:Tajawal;
color:white;
text-align:left;
font-size:2.8vh;
font-weight:400;
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}
@media screen and (max-width: 900px) {
  p {
    font-size: 15px;
  }
	h2{
	font-size:2vh;	
	}
	.text{
	margin-top:10%;
	}
}
@media screen and (max-width: 900px) {
  #logo {
   width:90vw!important;
margin-left:30%!important;
text-align: center;
  }
	
}
@media screen and (max-width: 900px){.nav-container {
  display: flex;
  gap: 15px;
  padding: 10px;
  border-radius: 20px; /* Outer rounded shape */
margin-top:2%;
width:60vw;
margin-left:.1%;
	}}