@charset "utf-8";
/* CSS Document */
body{
background-image:url("Images/flowerBackground.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%;
float:right;
margin-right:4vw;
margin-top:-10vw;
}
.nav-container {
  display: flex;
  gap: 15px;
  padding: 10px;
  border-radius: 20px; /* Outer rounded shape */
margin-top:8%;
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;
}

.align {
width:30vw;
position: relative;
float:left;
margin-top:2%;
margin-left:7%;
}
/* Slideshow container */
.slideshow-container {
width:80%;
position: relative;
float:left;
margin-top:1%;
margin-right:8%;
background-color:black;
}
.featured{
width:100%;
posiotm:relative;
float:left;
background-color:black;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
.wrapper{
width:cover;
height:cover;
}
p{
font-family:Tajawal;
color:white;
text-align:center;
font-size:2%;
font-weight:400;
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
margin-bottom: 5vh;
postion:absolute;}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 5vw;
  }
}
p{
font-family:Tajawal;
color:white;
text-align:left;
font-size:2.8vh;
font-weight:400;
 height:2vh;
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}
@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:-5%;
	}}
@media screen and (max-width: 600px){
	.text{
	Margin-top:2%;
	}}
@media screen and (max-width: 600px){
	.align{
	width:85%;
	}}