#layout{
	background-color: #282c35;
	height: 700px;
	width: auto;
}
#banner{
	background-color:white;
	height: 160px;
	width: auto;
}
#menues {
    
  display: flex;
  justify-content: center;
  gap: 30px;
  position: absolute;
  top: 0px;
  height: 60px;
  width: 108%;
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.2); /* semi-transparent */
  padding: 15px 0;
  transform: scale(1);
  border-radius: 10px;
  backdrop-filter: blur(5px); /* glassmorphism effect */
}

#content{
	 background: url('background.jpeg')
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
	background-color: white;
	height: 230px;
	width: auto;
	margin: 0 auto;
}
#footer{
	background-color: black;
	height:20px;
	width: auto;
  color: white;
}


.nav{
	overflow: hidden;
    position: absolute;
   
   left: 5%;
    margin-top: -85px;

}
.nav a{
	float: left;
    color: black;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    width: 170px;
    text-decoration: none;
    text-transform: capitalize;
}

   #btns{
   	 position: absolute;
    top: 7%;
    left: 80%;
    transform: translate(-45%,-50%)
    padding: 13px 10px;
    }
        .btn1{
    	background-color: #9a835f;
    	 color: black;
    	 text-transform: capitalize;
    	 text-decoration: none;
    	  padding: 7px 9px;
    font-size: 13px;
    border-radius: 20px;

    }
    .btn1:hover{
    	background-color: black;
    color: white;
}
     .btn2{
    	background-color: drakgrey;
    	 color: black;
    	 text-transform: capitalize;
    	 text-decoration: none;
    	  padding: 7px 9px;
    font-size: 16px;
    } 
    .btn3{
    	background-color: drakgrey;
    	 color: black;
    	 text-transform: capitalize;
    	 text-decoration: none;
    	  padding: 7px 9px;
    font-size: 16px;
    }
    .search-container {
      display: flex;
      justify-content: center;
      margin-top: 15px;
    }

    .search-box {
      width: 300px;
      height: 40px;
      border: 2px solid #ccc;
      border-radius: 20px;
      padding: 0 15px;
      font-size: 16px;
    }

    .search-button {
      height: 40px;
      margin-left: 10px;
      padding: 0 20px;
      border: none;
      border-radius: 20px;
      background-color: #9a835f;
      color: black;
      font-size: 16px;
      cursor: pointer;
    }

    .search-button:hover {
      background-color: black;
      color: white;
    }
/* Center the menu */


/* Main menu items */
.menu {
    position: relative; /* Needed to position submenu relative to the parent */
    cursor: pointer; /* Adds a pointer cursor for interactive elements */
}

.menu > a {
    text-decoration: none; /* Remove underline */
    color: black; /* Set text color */
    font-size: 18px; /* Set font size */
    padding: 5px 8px; /* Add padding for clickable area */
    display: flex; /* Allow inline content like arrow and text alignment */
    align-items: center; /* Vertically center content */
    justify-content: space-between; /* Space out text and arrow */
    transition: color 0.3s ease;
}

.menu > a:hover {
    color: blue; /* Change color on hover */
}

/* Arrow styling */
.arrow {
    margin-left: 8px; /* Adds space between text and arrow */
    transition: transform 0.3s ease; /* Smooth arrow rotation */
}

/* Rotate arrow when menu is hovered */
.menu:hover .arrow {
    transform: rotate(180deg); /* Rotates arrow upwards */
}

/* Submenu container */
.submenu {
    display: none; /* Hidden by default */
    position: absolute; /* Position relative to the parent */
    top: 100%; /* Place below the parent menu */
    left: 0; /* Align submenu with the parent menu */
    background-color: white; /* Set background color */
    border: 1px solid #ccc; /* Optional border for better visibility */
    padding: 0; /* Remove default padding */
    width: 210px; /* Set a fixed width for submenu */
    z-index: 10; /* Ensure it appears above other elements */
}



/* Submenu items */
.submenu a {
    text-decoration: none; /* Remove underline */
    color: black; /* Set submenu link color */
  padding: 10px;
    display: block; /* Stacks submenu links vertically */
    font-size: 16px; /* Adjust font size */
    transition: background-color 0.3s ease;
}

.submenu a:hover {
    background-color: #d47f55; /* Change background on hover */
}

/* Show submenu on hover */
.menu:hover .submenu {
    display: block; /* Show submenu when parent is hovered */
}

/* Reset and Basics */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
}

/* Hero Section */
.hero-section {
  height: 50vh;
  background: url('background-image.jpg') no-repeat center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.hero-section h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.hero-section p {
  font-size: 1.5rem;
}

/* Content Section */


.content-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.content-item:nth-child(even) {
  flex-direction: row-reverse;
}

.content-image {
  flex: 1;
  max-width: 50px;
  border-radius: 8px;
}

.content-text {
  flex: 2;
}

.content-text h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: black;
}

.content-text p {
  font-size: 1rem;
  color: #555;
}
.content-text:hover h2{
	color: darkgrey;
}
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  overflow: hidden;
}

.mySlides {
  display: none;
}

.mySlides img {
  width: 80%;
  height: 500px; /* adjust height as you want */
  object-fit: cover;
  border-radius: 10px;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from { opacity: 2.5; }
  to { opacity: 1; }
}
@media (max-width: 775px) {
  #content, #banner, #layout {
    flex-direction: column;
    height: auto;
  }
  .nav a {
    width: 50%;
    font-size: 12px;
  }
}