.header {
  min-height: 100vh;

  position: relative;
  background-attachment: fixed;
}

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');


.banner {
  position: absolute;
  top: 75%;
  left: 50%;
  height: 50vh;
  text-align: center;
  transform: translate(-50%, -50%);
}

.banner-subtitle {
  font-size: 2rem;
  margin-top: 5vh;
  font-family: Poppins, sans-serif;
  color: #f8f9fa;
  /* animation */
  animation-name: slideup;
  -webkit-animation-name: slideup;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  z-index: 999999;

}.banner-subheading {
  font-size: 1.5rem;
  font-family: Poppins, sans-serif;
  color: #f8f9fa;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 5vh;
  /* animation */
  animation-name: slideup;
  -webkit-animation-name: slideup;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  z-index: 999999;

}

.banner-title {
  font-family: SpartanLimport;
  font-size: 3.5rem;
  color: white;
  line-height: 1.3;
  /* animation */
  animation-name: slidedown;
  -webkit-animation-name: slidedown;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  z-index: auto;
}

.banner-bottom {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-name: downarrow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.banner-bottom img {
  height: 40px;

}

@keyframes downarrow {
  0% {
    top: 91%;
  }

  50% {
    top: 96%;
  }

  100% {
    top: 91%;
  }
}




.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.container_about_home {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Creates two columns */
  grid-template-rows: repeat(2, 1fr);
  /* Creates two rows */
  gap: 20px;
  /* Adjust the gap as needed */
  justify-content: center;
  align-items: center;
  width: 30vw;
  /* Adjusted to accommodate 2x2 grid */
  margin: 0 auto;
  margin-top: 50px;
  animation: slidein 3s;
}

.box_home {
  width: 10vw;
  /* Adjusted to take full width of the grid column */
  padding: 20px;
  margin: 2vh;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  text-align: center;
  border: 2px solid;
  border-color: rgb(247, 145, 0);
  transition: transform 0.3s ease;
  animation: slidein 3s;
}

.box_home:hover {
  transform: translateY(-10px);
}

.icon {
  font-size: 40px;
  margin-bottom: 10px;

}

.container_about_home ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.container_about_home li {
  margin-bottom: 20px;
}

.container_about_home p {
  margin: 0;
}

.container_about_home img {
  margin: 0;
  width: 100px;

}

.para {
  width: 80vw;
  margin: 0 auto;
  font-size: larger;
  line-height: 2 rem;
  margin-top: 10vh;
  animation: slidein 3s;

}

@media (max-width: 768px) {
  .container_about_home {
    display: block;
  }

  .box_home {
    width: 30vw;
    margin-top: 5vh;
  }
}

h1,menu-text-Items{
  font-family: Sora;
  font-weight: 600;

}


.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Black color with 50% opacity */
  /* Add other styles as needed */
}

.about_home_video {
  width: 100vw;
  height: 50vh;
  object-fit: cover;
  z-index: -1;

}

.overlay_heading_about_video{
  position: relative;
  top: -40vh;
  left: 10vw;
  font-size: 10vh;
  font-family: 'Sora';

  z-index: 999;
  color: white;
  width: 70vw;
  margin-bottom: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  grid-gap: 2rem; /* Gap between items */
  padding: 1rem;
  margin: 0 auto;
  width: 80vw;
  margin-top: -20vh;
  margin-bottom: 20vh;
}

/* Individual grid items */
.grid-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 5%;
  margin-left:10vh ;
}

.grid-item img {
height: 10vh;
width: auto;
}

.grid-icon {
  margin-right: 1rem;
}

.grid-text {
  margin-left: 3vw;
  font-size: 1.2rem;
}.grid-text h3 {

font-weight: bolder;}

/* Media query for mobile view */
@media screen and (max-width: 786px) {
  .grid-container {
    margin-top: 0;
      grid-template-columns: 1fr; /* Single column */
      width: 80vw;
      margin: 0 auto;
  }
  .grid-item {

    margin-left:0 ;
  }
  .overlay_heading_about_video{
    width: 80vw;
    left: 0;
    margin: 0 auto;
    top: 0;
    color: black;
    font-size: 5vh;
    font-family: 'Sora';

  }
.overlay-heading{
  width: 100vw;
  font-family: 'Sora';
  font-size: 10vh;
}
}

body{
  overflow-x:hidden;
  box-sizing: border-box;
}
html{
  overflow-x:hidden;

  width: 100vw;
}
.logo-container {
  display: flex;
  align-items: center; /* Vertically align items */
  text-decoration: none; /* Remove underline from the link */
  position: relative; /* Enable absolute positioning for text */
}

.logo-image {
  width: 300px;
  height: 80px;
  margin: 0; /* Remove any margin */
  padding: 0; /* Ensure no padding */
  display: block; /* Prevent inline spacing issues */
}

/* Container for the logo and text */
.logo-container {
  display: flex;
  align-items: center; /* Vertically align items */
  text-decoration: none; /* Remove underline from link */
  position: relative; /* Enable absolute positioning for text */
}

/* Logo Image */
.logo-image {
  width: 300px;
  height: 80px;
  margin: 0; /* Remove any gap */
  padding: 0; /* Ensure no padding */
  display: block; /* Avoid inline gaps */
}

/* Text Container */
.logo-text-container {
  position: absolute; /* Position text over the logo */
  left: 230px; /* Reduce gap by overlapping more */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust centering */
  margin: 0; /* Remove default margins */
  white-space: nowrap; /* Prevent text wrapping */
}

/* Logo Name Styling */
.logo-name {
  font-size: 2em;
  font-family: 'Libre Baskerville', cursive;
  color: transparent; /* Transparent text for gradient */
  background: linear-gradient(to right, #414242, #34383b); /* Gradient background */
  -webkit-background-clip: text; /* Clip the gradient to the text */
  background-clip: text;
  /* text-shadow: 
    2px 2px 3px rgba(0, 0, 0, 0.6), /* Dark shadow for depth 
    -1px -1px 2px rgba(255, 255, 255, 0.2); /* Subtle highlight 
  -webkit-text-stroke: 1px white; /* White outline 
  text-stroke: 1px white; Cross-browser white outline */
  margin: 0;
}


/* Slogan Styling */
.logo-slogan {
  font-size: 1.2em; /* Slightly larger for better visibility */
  font-family: 'Merienda', cursive; /* Apply Sevillana font */
  color: transparent; /* Transparent for gradient effect */
  background: linear-gradient(to right, #227304, #1d6802); /* Dark gradient */
  -webkit-background-clip: text; /* Clip gradient to text */
  background-clip: text; /* Cross-browser compatibility */
  text-shadow: 
    1px 1px 3px rgba(0, 0, 0, 0.6), /* Dark shadow for depth */
    -1px -1px 1px rgba(255, 255, 255, 0.2); /* Subtle light highlight */
  margin: 0;
  white-space: nowrap; /* Prevent wrapping */
}
/* CSS Reset for Padding/Margins */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  /* Adjust logo container for mobile */
  .logo-container {
    flex-direction: column;  /* Stack logo and text vertically */
    justify-content: center;  /* Center content vertically */
    text-align: center;  /* Align text to center */
  }

  /* Adjust text container */
  .logo-text-container {
    left: 0; /* Align text container to the center */
    top: 100%; /* Move text below the logo */
    transform: translateY(0); /* Reset vertical centering */
    font-size: 1.2rem; /* Adjust font size for smaller screens */
    margin-top: 10px;  /* Add some space between logo and text */
  }

  /* Adjust logo name size */
  .logo-name {
display: none;  }

  /* Adjust slogan size */
  .logo-slogan {
display: none;  }

  /* Adjust logo image for mobile */
  .logo-image {
    width: 150px;  /* Smaller width for mobile */
    height: 50px;  /* Maintain aspect ratio */
  }
}