/* Add common CSS styles for the divisions, layout here */

.spacebetween {
  width: 100%;
  height: 100px;
}
.bgimage {
  width: 100%;
  height: 800px;
  background: url('../images/2.webp');
  background-repeat: no-repeat;
  background-position: Center;
  background-size: cover;
  position: relative;
  
}
.text-overlay {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size:400%; /* Set the font size to 60 pixels (or any other larger value) */
  font-weight: bold;
   position: relative;
  animation: moveUp 1s ease-in-out forwards;
  top: 50%; /* Position relative to the parent container */
  left: 50%; /* Position relative to the parent container */
  transform: translate(-50%, 100%); /* Initial position */
  text-align: center;
}

@keyframes moveUp {
  0% {
    transform: translate(-50%, 100%);
  }
  100% {
    transform: translate(-50%, -50%); /* Centered position */
  }
}

.text-overlay p {
  margin: 1px 0; /* Adjust the margin between the paragraphs */
  font-family: Georgia;
}
.first-division {
  background-image: url("images/homesmall1.jpg");
  background-size: cover; /* This will make the image cover the entire division */
  background-position: center; /* Center the image within the division */
}
.division {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
  /* Add other styles as needed */
}
.division img {
  max-width: 100%;
  height: auto;
  /* Add other image styles as needed */
}
 .division-about {
	  margin-top:60px;
	  align-items: center;
  }
  
  .divisionthree {
  padding: 20px;
  text-align: center; /* Center align the content */
}
.contentthree {
  display: flex;
  flex-direction: column; /* Stack image and text vertically */
  align-items: center; /* Center align both image and text */
  max-width: 300px; /* Adjust this width as needed */
  margin: 0 auto; /* Center the division */
}
.textthree {
	padding:10px;
}

.division-text-three {
	text-align :center;
}
.golden-text {
    color: #DAA520;
}


.content {
  display: flex;
  flex-wrap: wrap; /* Allow the content to wrap on smaller screens */
  justify-content: center;
  align-items: center;
  max-width: 1000px; /* Set a maximum width for the content */
}
.photo {
  flex: 1;
  padding-right: 20px;
}
.photo .image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden; /* Hide any overflow beyond the wrapper */
}
.photo:hover img {
  transform: scale(1.08); /* Adjust the scale value as needed to control the zoom level */
}

.roundphoto {
  flex: .3;
  border-radius: 50%; /* Use 50% to make the image perfectly round */
  overflow: hidden; /* This ensures the image stays within the rounded borders */
}

.text {
  flex: 1;
  padding-left: 20px;
  text-align: justify;
}
.text a {
	margin-top:5px;
	color: #DAA520;	
}
  .row {
	  padding :20px;
  }
  /* About us text animation */
.text-container {
  position: relative;
  overflow: hidden; /* Add this line to hide the overflow */
  animation: moveFromRight .5s ease-in-out forwards;
}

@keyframes moveFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.logoImage {
  width: 40px; /* Set the desired width of the logo */
  height: auto; /* Auto height will preserve the aspect ratio of the logo */
}
/*  section for footer styles */
.custom-footer {
  background-color: #f2f2f2; /* Light grey background color */
  color: #666; /* Text color for the footer */
   display: flex;
  justify-content: space-between; /* To have copyright on left and icons on right */
  align-items: center;
  padding: 10px;
}

.footer-left {
  text-align: left;
 flex: 1; /* Take the available space */
}

.footer-right {
  text-align: right;
  flex: 1; /* Take the available space */
}

.footer-center {
  text-align: center;
  flex: 1; /* Take the available space */
}

.footer-left .nav-item a {
    color: #9E7200; /* Golden color - Change this color to your desired golden shade */
}
.navbar-nav a { /* colour for Header HOME etc */
    color: #9E7200; /* Golden color - Change this color to your desired golden shade */
  }
  

/* For mobile screens (up to 767px width) */
@media (max-width: 767px) {
  .gallery-container .imagebox {
    width: 100%; /* 1 image per row for mobile screens */
  }
  .content {
    flex-direction: column; /* Change flex-direction to column for mobile screens */
  }
  .bgimage {
    background-position: center; /* Move the background image to the left */
  }
  .d-inline-block {
	  margin-left:15px
  }
  .division:nth-child(5) {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1022px) {
  .gallery-container .imagebox {
    width: 50%; /* 2 images in a row for tablets */
  }
}
.text h2 {
	margin-top:20px;
  margin-bottom: 20px;
}
.text h6 {
	margin-top:20px;
	color: #DAA520;
	
}


/* Style for social media icons */
.social-icon {
  font-size: 24px;
  color: #666;
  margin-right: 10px;
}

  .social-icon {
    font-size: 24px; /* Adjust the icon size as needed */
    margin-right: 10px; /* Add some spacing between icons */
    color: #9E7200; /* Facebook - Change this color to your desired color */
  }
  /* You can add more CSS rules for other social media icons if needed */
  .social-icon.youtube {
    color: #9E7200; /* YouTube - Change this color to your desired color */
  }

  .social-icon.instagram {
    color: #9E7200; /* Instagram - Change this color to your desired color */
  }