@charset "utf-8";
/* CSS Document */


/* Container for header and buttons */
.column-header {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 10px;
  font-family: 'Baskerville', sans-serif;
}

/* Container for buttons */
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 5px;
}

/* Style for each button */
.custom-button {
  background-color: #012d43;
  border: 2px solid #ae914b;
  color: white;
  padding: 12px 24px;
  margin: 10px;
  border-radius: 8px;
  font-size: 1.0833em;
  cursor: pointer;
  flex: 1 1 calc(25% - 20px); /* Four across */
  max-width: calc(25% - 20px);
  text-align: center;
  transition: background-color 0.3s, transform 0.2s;
}

/* Style for icon images or font icons inside buttons */
.button-icon {
  width: 5px; /* size of icon */
  height: 5px;
  margin-right: 60px; /* space between icon and text */
  vertical-align: middle; /* align icon vertically with text */
}

/* Hover effect */
.custom-button:hover {
  background-color: #ae914b;
  transform: translateY(-2px);
}

/* Responsive adjustments for tablets and smaller screens */
@media (max-width: 768px) {
  .custom-button {
    flex: 1 1 calc(50% - 20px); /* Two across on tablets */
    max-width: calc(50% - 20px);
  }
}

/* On mobile, stack vertically and make header sticky if desired */
@media (max-width: 480px) {
  .column-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    padding: 10px 0;
  }
  .custom-button {
    flex: 1 1 100%; /* Full width on mobile */
    max-width: 100%;
  }
}

        .megamenu {
            display: none; /* Keep it hidden initially */
    position: absolute; /* Make sure it's positioned properly */
    z-index: 1500; /* High enough to be above everything else */
    background-color: white; /* Optional: could help if it's transparent */
        }
    
  
    
    /* Close Button Style */
.close-btn {
    background-color: #012d43; /* Background color */
    color: #ae914b; /* Text color */
    border: none; /* Remove border */
    font-size: 24px; /* Adjust font size */
    cursor: pointer; /* Change cursor on hover */
    padding: 5px 10px; /* Padding for button */
    position: absolute; /* Position absolutely */
    top: 10px; /* Adjust this value as needed */
    right: 10px; /* Adjust to position it at the top right */
    border-radius: 5px; /* Rounded corners (if desired) */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .close-btn {
        display: none; /* Hide the close button on mobile */
    }
}


/* Default styles for mobile (will apply when screen is below 768px) */
.navigation {
    display: block;  /* Or none if you want to hide it entirely */
    /* Styles specific to your mobile navigation */
}

.close-btn {
    display: none; /* Initially hidden in mobile if you want */
    /* Add any additional mobile-specific styles */
}

/* Media Query for Desktop Styles */
@media (min-width: 768px) {
    .navigation {
        display: flex; /* Display as desired for desktop */
        /* Additional desktop navigation styles */
    }

    .close-btn {
        display: block; /* Show the close button in desktop view */
        background-color: #012d43; /* Desktop background color */
        color: #ae914b; /* Desktop text color */
        font-size: 24px; /* Larger font size for desktop */
        padding: 5px 10px; /* Padding for desktop */
        position: absolute; /* Positioning as needed */
        top: 10px; /* Adjust this for positioning */
        right: 10px; /* Adjust this for positioning */
        border-radius: 5px;
        border: none; /* Remove border */
        cursor: pointer; /* Change cursor */
    }
    
}

		.indent {
			text-indent: 60px;
		}
		
		.indent2 {
			text-indent: 40px;
		}

body {
justify-content: center;
align-items: center;
  }
.pr-container {
padding-left: 16px; /* add your desired padding value */
content: center;
}

#loader {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  margin-right: 10px;
  animation: loader 1s ease-in-out infinite;
}

.inner:nth-child(1) {
  background-color: #012d43;
  animation-delay: 0s;
}

.inner:nth-child(2) {
  background-color: #ae914b;
  animation-delay: 0.09s;
}

.inner:nth-child(3) {
  background-color: #012d43;
  animation-delay: 0.18s;
}

@keyframes loader {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.5);
  }
  40% {
    transform: scale(1);
  }
}

/* hide the content until the page is fully loaded */
#content {
  display: none;
}

  .sub-menu {
    margin-left: 5px;
							  
	font-size: 0.812em; /* set the desired font size in pixels */
	}

    .resizable-image {
        max-width: 80%;
        height: auto;
        display: block;
    }
				
				.image-container {
        padding-right: 400px; /* Adjust the amount of padding as per your preference */
    }
    
    @media only screen and (max-width: 600px) {
        .resizable-image {
            max-width: 50%;
        }
    }
    
    @media only screen and (max-width: 400px) {
        .resizable-image {
            max-width: 75%;
        }
    }

/* video background */
.video-banner {
  width: 100%;
  height: 30vh; /* or any height you prefer */
  overflow: hidden;
  position: relative;
}
.content-over-video {
  position: relative;
  z-index: 1; /* above the video banner */
}

/* Style for the video element */
#banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures it covers the container area without distortion */
  display: block;
}

/* page content */

@media screen and (max-width:767px) {
  #page section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
#page section:first-child {
    min-height: unset !important;
    height: 30vh !important;
}
  }

main {
  background-image: url("../../Images/background-image.png");
		background-color: white;
		font-size: 2rem;
  margin-top: 50vh;
  padding: 5px;
  position: relative;
}