<!--------->

html {
   background: linear-gradient(rgb(83, 105, 91)) ;
   scroll-behavior: smooth;
}

 body {
  background-color: #fff; /* Set a solid background color */
 
  /* Gradient background for the body */
  margin: 0;
  height: 100vh;
  /*background-image: url('background-image.jpg'); /* Set a background image */
  /*background-repeat: no-repeat; /* Prevent the image from repeating */
  /*background-size: cover; /* Cover the entire background with the image */
  /*background-position: center; /* Center the background image */
  /*background-attachment: fixed; /* Keep the background image fixed during scroll */
  /*margin: 0; /* Remove default margins */
  font-family: Arial, sans-serif; /* Set a default font for the page */
} 

.gallery {
  background-color: #ffffff;

}

#tagline {
  display: flex; /* Set container as a flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  height: 20vh; /* Set container height to full viewport height */
  color: #ffffff;
  font-family: Montserrat;
  /* font-size: 80%; */
  background: #006BFF;
}

   /* CSS to make the video fill the banner space */
   .banner-video {
    width: 100%; /* Make the video span the full width */
    height: auto; /* Adjust height to maintain aspect ratio */
    /*max-height: 900px;*/ /* Limit the banner height */
    object-fit: cover; /* Crop the video to fill the container */
}

/* Optional: Style for the banner container */
.banner-container {
    position: relative;
   /* overflow: hidden; *//* Hide anything outside the container */
   padding: none;
   margin-bottom: -10px;
}


.navbar { 
  background: #001F3F;
  font-family: Montserrat;
  font-size: 1.5em;
  /*text-decoration-color: #ffffff; */
  text-align: justify;
  
}

.navbar a {
  color: #FFF7D1;
  text-decoration: none;
  padding: 10px 20px;
}

.navbar a:hover {
  background-color: rgba(153, 186, 232, 0.881);
  border-radius: 5px;
}

/* Style the button */
#backToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position */
  bottom: 80px; /* Position the button 20px from the bottom */
  right: 200px; /* Position the button 30px from the right */
  z-index: 99; /* Ensure it is on top of other elements */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #007bff; /* Dark background */
  color: white; /* White text */
  text-decoration: #fff;
  cursor: pointer; /* Pointer/hand icon */
  padding: none; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 20px; /* Increase font size */
  font-family: Montserrat;
}

#backToTopBtn:hover {
  background-color: #8ebef0; /* Darker background on hover */
}


.top-container {
  display: flex; /* Enables flexbox */
  gap: 10px; /* Optional: Adds space between the divs */
}

.box {
  flex: 1; /* Makes each div take up equal width */
  padding: 20px;
  /*background-color: #9eafe6;*/
  border: 1px solid #ccc;
}
 /* CSS styles for the slideshow container and images */
 .slideshow-container {
  /*max-width: 70%;*/
  position: relative;
  width: 100%; /* Adjust based on your design */
  max-width: 800px; /* Max width for the slideshow */
  height: 500px; /* Fixed height for the slideshow */
  margin: auto;
  overflow: hidden; /* Hide anything outside the container */
  margin: 1%; /* Adds space around the divs */
  padding: 0px;
  border-radius: 10px;
}

.content-container {
  position: relative;
  /*box-sizing: border-box; */
  border-radius: 10px;
  /*overflow: hidden;*/
  width: 100%;
  margin: 1%; /* Adds space around the divs */
  padding: 10px;
  background: #7CF5FF;
  border: none;
  text-align: left;
  font-family: Montserrat;
  font-size: 1.4em;
  text-decoration: #ffffff;
  vertical-align: top; /* Aligns the divs to the top */
  /*box-sizing: border-box;*/
   /* Ensures padding and borders are included in the width */
  
}
.slideshow-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes the image cover the entire container */
  position: relative;
  /*height: auto; */
  /*object-fit: cover;*/
  border-radius: 10px;
  transition: opacity 1s ease;
}

.intro-container {
  max-width: fit-content; /* Sets the width of each div */
  padding: 20px;
  border-radius: 20px;
  margin: 1%;
  background-color: #b2c3eb;
  background: #06D001;
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: top; /* Aligns the divs to the top */
  box-sizing: border-box;
   /* Ensures padding and borders are included in the width */
  min-height: auto;
  
}

.button1, .button2 {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: Montserrat;
  margin: 4px 2px;
  border-radius: 5px;
  cursor: pointer;
}

/* cuo- CHECK-US-OUT BUTTON */
.cuo-button, .submit-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 20px;
  color: white;
  background-color: #007BFF; /* Blue background */
  text-align: center;
  text-decoration: none;
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s ease;
}

.cuo-button:hover {
  background-color: #8ebef0; /* Darker blue on hover */
}

/* home button in gellery page */
.home-button {
  display: inline-block;
  padding: 10px 20px;
  position: relative;
  left: 18px;
  font-size: 20px;
  color: white;
  background-color: #007BFF; /* Blue background */
  text-align: center;
  text-decoration: none;
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s ease;
}

.home-button:hover {
  background-color: #8ebef0; /* Darker blue on hover */
}


/* CSS for div elements */
.rounded-container {
  /*display: inline-block; /* Makes the divs inline */
  max-width: auto; /* Sets the width of each div */
  margin: 1%; /* Adds space around the divs */
  padding: 10px;
  border-radius: 20px;
  
  background: #72BF78;
  border: none;
  text-align: left;
  vertical-align: top; /* Aligns the divs to the top */
  box-sizing: border-box;
   /* Ensures padding and borders are included in the width */
  min-height: auto; 
}
 
/* background: linear-gradient(to bottom, #b2c3eb 10%, #4a90e2 60%, #5498db 100%); */ 

h5 {
  color: #09090b;
  font-family: "Arial", Gadget, sans-serif;
  font-size: 2.0em;
  font-weight: 500;
  padding: 20px;
   
}

p, li {
  font-family: Montserrat;
  font-size: 1.5em;
  color: #131416;
  text-align: justify;
}


a {
  font-family: Montserrat;
  font-size: 1.0em;
  color: #0c0d0d;
}
/* banner */
img {
  height: auto;
  width: 100%;
  object-fit: cover;
 
  } 
  

.whatsapp-link-fixed {
  color: #25D366; /* WhatsApp green color */
  font-size: 36px; /* Size of the icon */
  text-decoration: none; /* Remove underline */
  background-color: #fff; /* Background color */
  padding: 10px;
  border-radius: 20%; /* Make it a circle */
}

.whatsapp-link-fixed:hover {
  background-color: #25D366;
  color: #fff; /* Change icon color on hover */
}

.whatsapp-link {
  color: #25D366; /* WhatsApp green color */
  font-size: 36px; /* Size of the icon */
  text-decoration: none; /* Remove underline */
  position: fixed; /* Fixed position on the screen */
  bottom: 80px; /* Distance from the bottom */
  right: 20px; /* Distance from the right */
  z-index: 99;
  background-color: #fff; /* Background color */
  padding: 10px;
  border-radius: 20%; /* Make it a circle */
  box-shadow: 0px 2px 10px rgba(35, 232, 101, 0.1); /* Add shadow for better visibility */
}

.whatsapp-link:hover {
  background-color: #25D366;
  color: #fff; /* Change icon color on hover */
      
  }

.social-link {
    display: inline-block;
    text-decoration: none; /* Remove underline from the link */
    color: #1255dd; /* Facebook Blue */
    font-size: 30px; /* Icon size */
    margin: 10px;
    transition: color 0.3s ease; /* Smooth color change on hover */
}

.social-link:hover {
    color: #2d4373; /* Darker shade of blue when hovered */
}


hr {
  border: 1px solid rgb(57, 61, 108);
  color: #4e434c;
}

    footer {
      text-align: right; /* Center the text */
      padding: 20px;
      background-color: #f1f1f4; /* Dark background */
      color: white; /* Light text */
      font-size: 10px; /* Adjust font size */
      position: relative;
      bottom: 0;
      width: 100%;
    }

    .gallery-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
      grid-gap: 10px; /* Space between images */
      padding: 10px;
      max-width: auto; /* Sets the width of each div */
      margin: 1%; /* Adds space around the divs */
      border-radius: 20px;
      background: #72BF78;
      border: none;
      text-align: left;
      vertical-align: top; /* Aligns the divs to the top */
      box-sizing: border-box;
      /* Ensures padding and borders are included in the width */
      min-height: auto;
  }
  
  .gallery-item {
      overflow: hidden; /* Ensures no overflow from images */
  }
  
  .gallery-item img {
      width: 100%; /* Make images fit inside the container */
      height: 200px; /* Fixed height for all images */
      object-fit: cover; /* Ensures that the image covers the entire container without distortion */
      border-radius: 5px; /* Optional: Adds rounded corners */
  }