/* Universal selector: applies styles to all elements */
* {
		flex: 100%;
    box-sizing: border-box; /* Includes padding and border in element's total width/height */
    margin: 0px 0px 0px 0px; /* Remove default margin around all elements */
    background-color: #f4f1ec; /* Sets a light beige background for all elements (can be overridden) */
}

/* Styles for the html element */
html {
		background: transparent;
/* Missing value here, likely a mistake. Should set margin if needed. */
}

/* Style for all h3 headings */
h3 {
    margin: 10px; /* Adds margin around h3 headings */
    font-size: 30px; /* Sets font size to 30px */
    background: transparent; /* No background color */
    text-align: center;
}

/* Style for all paragraph elements */
p {
    font-size: 15px; /* Sets font size to 15px */
    background: transparent; /* No background color */
    margin: 10px; /* Margin around paragraphs */
    text-align: center;
}

footer {
    background-color: #faebd7;
    font-family: Helvetica, sans-serif;
    text-align: top, center;
    width: 100%;
    height: 27.5px;
    position: fixed; /* or relative, depending on your layout */
    bottom: 0;
    padding: 0;
}

footer .footer-text{
	font-size: 17.5px;
	margin: 0px 0px 0px 0px;
	
}


/* Styles for the body element */
body {
    height: 100vh; /* Full height of viewport */
    width: 100vw;
    font-size: 2vw; /* Font size relative to viewport width */
    display: flex; /* Use Flexbox layout for body */
    flex-wrap: wrap; 
        background-image: linear-gradient(#FAEBD7, #89b0ae 65%); /* Allow items to wrap to next line if needed */
        overflow: hidden;
        padding: -30px;
    margin: 0;
}

/* Styles for all <section> elements */
section {
    display: flex; /* Flex container for sections */
    flex-wrap: nowrap; /* Keep children on a single line (note: correct property is 'nowrap') */
}

.bannertp {
		background: transparent;
}



/* Container for the first large box (probably header/banner) */
.boxcontainer1 {
    height: 13%; /* Fixed height */
    width: 42%px; /* Fixed width */
    display: flex; /* Flex layout */
    background: transparent;
    flex: 0.8;
    flex-wrap: wrap; /* Wrap child elements if needed */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    border-radius: 10px; /* Rounded corners */
    margin: 5px 60px 0px 75px; /* Margin: top, right, bottom, left */

}

.maincontent {
		background: transparent;
		display: flex;
		flex-shrink: 1;
		flex-direction: row;
		overflow: auto;
		justify-content: space-evenly;
		margin: 10px 0px 10px 0px;
		

}

.splashscreen {
  all: unset !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f4f1ec;
  z-index: 99999;
  background-size: cover;
  background-position: center;
}

#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent; /* or your desired background */
  z-index: 9999; /* high enough to overlay everything */
  display: flex; /* center the halves */
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease;
}



@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
    align-items: center;
  }
}

/* Container for the first section of content (probably a row) */
.frstlayer {
		background: transparent;
		height: auto;
    flex-direction: row; /* Arrange children in a row */
    overflow: auto; /* Add scrollbars if content overflows */
    display: flex; /* Flex container */
    flex-shrink: 1; /* Allow shrinking if needed */
    justify-content: flex-start; /* Align children to start (left) */
    margin: 0px 0px 20px 0px;

}

/* Container for a section with multiple boxes (e.g., services) */
.boxcontainer2 {
    background-color: #F0F8FF; /* Background color */
    font-size: 2vw;
    height: 170px; /* Fixed height */
    width: 450px; /* Fixed width */
    border: 15px solid #3B5A6B; /* Border around container */
    display: flex; /* Flex layout */
    flex-wrap: wrap; /* Wrap items to new lines if needed */
    justify-content: space-around; /* Evenly distribute items with space around */
    /* align-items: ;  <-- empty, remove or specify if needed */
    border-radius: 20px; /* Rounded corners */
    margin: 70px 60px 10px 60px; /* Margin: top, right, bottom, left */
    flex: 1.2;
    box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.3);
}

/* Container for slideshow 1 */
.slideshowcontainer1 {
    height: 525px; /* Fixed height */
    width: 25%; /* Fixed width */
    border: 5px solid #f4f1ec; /* Border with color */
    border-radius: 20px; /* Rounded corners */
    box-sizing: border-box; /* Include border in size calculations */
    overflow: auto; /* Scrollbars if needed */
    flex: 1;
    box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.3);
    border: 15px solid #3B5A6B;
    display: flex; /* Flex layout */
    flex-wrap: wrap; /* Wrap content if overflow */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    margin: 0px 30px 0px 30px; /* Margin around container */
  

}

/* Container for the third box group, likely a row of info boxes */
.boxcontainer3 {
    display: grid; /* Change from flex to grid */
    grid-template-columns: repeat(2, 1fr); /* 2 columns of equal width */
    grid-template-rows: repeat(3, auto); /* 3 rows, height adjusts automatically */
    gap: 10px; /* Optional: space between boxes */
    transition: all 0.3s ease;
    background-color: #F0F8FF;
    height: 450px;
    width: 25%;
    flex: 2;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3);  
    border: 12px solid #3B5A6B;
    border-radius: 20px;
    margin: 30px 30px 0px 30px;
    justify-items: center; /* center items horizontally if needed */
    align-items: space-evenly; /* align items to top vertically */
}

.aboutus {
    display: grid; /* Change from flex to grid */
    grid-template-columns: repeat(1, 1fr); /* 2 columns of equal width */
    grid-template-rows: repeat(3, auto); /* 3 rows, height adjusts automatically */
    gap: 10px; /* Optional: space between boxes */
    transition: all 0.3s ease;
    background-color: #F0F8FF;
    height: 450px;
    width: 25%;
    flex: 1;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3);
  	padding: 10px;
    border: 12px solid #3B5A6B;
    border-radius: 20px;
    margin: 30px 30px 0px 30px;
    justify-items: center; /* center items horizontally if needed */
    align-items: space-around; /* align items to top vertically */
}

.aboutus, h3 {
		font-family: Arial, sans-serif;
		
}

.aboutus:hover {
		height: 525px;
    box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.3);
		margin: 0px 30px 0px 30px;
}

.aubox {
    font-size: 1.5rem; /* Font size */
    font-family: Impact, sans-serif; /* Font style */
    transition: all 0.5s ease; /* Smooth height change on hover */
    
    background-color: lightgrey; /* Background color */
    box-sizing: border-box; /* Size includes border and padding */
    overflow: hidden; /* Hide overflowing content when height changes */
    justify-content: center; /* Distribute content evenly */
    align-items: space-around;
    width: 90%; /* Fixed width */
    height: 55px; /* Fixed height initially */
    border: 5px solid #3B5A6B; /* Border color */
    border-radius: 20px; /* Rounded corners */
    margin: 10px 35px; /* Margin around boxes */
    
 }
 
.aubox:hover {
		height: 120px;


}
 
 
.aubox, p a{
		
    font-size: 20px; /* Responsive font size */
    text-align: center; /* Left align text */
    margin: 0; /* Remove margin for paragraph */
    padding: 0; /* Remove padding */
    
    background-color: #faebd7; /* No background */
}

/* Container for slideshow 2 (similar to slideshow 1) */
.slideshowcontainer2 {
    height: 525px; /* Fixed height */
    width: 25%; /* Fixed width */
    border: 5px inset #f4f1ec; /* Border color */
    border-radius: 20px; /* Rounded corners */
    box-sizing: border-box; /* Include border in size */
    overflow: auto; /* Scroll if needed */
    flex: 1;
    border: 15px solid #3B5A6B;
    box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.3);
    display: flex; /* Flex layout */
    flex-wrap: wrap; /* Wrap content */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    margin: 0px 30px 0px 30px; /* Margin; note negative right margin */
}

/* Style for the boxes inside the container (probably info boxes) */
.box2 {
    font-size: 3rem; /* Large font size */
    font-family: Impact, sans-serif; /* Font style */
    background: transparent; /* No background */
    flex-shrink: 1; /* Allow shrinking if needed */
    /* justify-content: ;  <-- empty, remove or set as needed */
    border-radius: 20px; /* Rounded corners */
    margin: 10px 35px; /* Margin around each box */
}

/* Paragraph inside .box2, with responsive font size */
.box2 p {
    font-size: 27.5px;
    text-align: center; /* Left align text */
    margin: 0; /* Remove margin for paragraph */
    padding: 0; /* Remove padding */
    background: transparent; /* No background */
}

/* Style for info boxes (probably service categories) */
.box3 {
    font-size: 1.5rem; /* Font size */
    font-family: Impact, sans-serif; /* Font style */
    transition: all 0.5s ease; /* Smooth height change on hover */
    
    background-color: #faebd7; /* Background color */
    box-sizing: border-box; /* Size includes border and padding */
    overflow: hidden; /* Hide overflowing content when height changes */
    justify-content: center; /* Distribute content evenly */
    width: 90%; /* Fixed width */
    height: 55px; /* Fixed height initially */
    border: 5px solid #3B5A6B; /* Border color */
    border-radius: 20px; /* Rounded corners */
    margin: 10px 35px; /* Margin around boxes */
}

/* Flex container styling (general purpose) */
.container {
    display: flex; /* Flex layout */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    width: 100%; /* Full width */
    height: 300px; /* Fixed height */
    overflow: hidden; /* Hide overflow content */
}

/* Slideshow container styling */
.slideshow {
    position: relative; /* Position relative to allow absolutely positioned children */
    width: 100%; /* Fill parent width */
    height: 100%; /* Fill parent height */
}

/* Each slide in the slideshow */
.slide {
    position: absolute; /* Overlay on top of each other */
    top: 0;
    left: 0;
    width: 100%; /* Full width of container */
    height: 100%; /* Full height of container */
    object-fit: fill; /* Resize image to fit container while maintaining aspect ratio */
    opacity: 0; /* Hidden by default */
    border-radius: inherit;
    animation: fade 33s infinite; /* Animate with 'fade' keyframes infinitely */
}

/* Different delays for each slide to stagger animations */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 3s; }
.slide:nth-child(3) { animation-delay: 6s; }
.slide:nth-child(4) { animation-delay: 9s; }
.slide:nth-child(5) { animation-delay: 12s; }
.slide:nth-child(6) { animation-delay: 15s; }
.slide:nth-child(7) { animation-delay: 18s; }
.slide:nth-child(8) { animation-delay: 21s; }
.slide:nth-child(9) { animation-delay: 24s; }
.slide:nth-child(10) { animation-delay: 27s; }
.slide:nth-child(11) { animation-delay: 30s; }

/* Keyframes for fading in/out slides */
@keyframes fade {
  0% { opacity: 0; }
  8.33% { opacity: 1; } /* Fade in */
  25% { opacity: 1; } /* Fully visible */
  33.33% { opacity: 0; } /* Fade out */
  100% { opacity: 0; } /* Fully hidden */
}

/* Hover effects for info boxes and containers */
.box3:hover {
    height: 200px; /* Expand height on hover */
    width: 90%px;
    
}

.boxcontainer3:hover {
    height: 525px; /* Expand container height on hover */
    box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.3);
        margin: 0px 30px 0px 30px
}

/* General paragraph margin override (redundant, as it's already above) */
p {
    margin: 10px;
}
    
.box3, p {
	cursor: default;
	font-size:20px;
}

.aubox, p {

	font-size: 20px;
}