html, body {
    height: 100%; /* Full height for the root and body */
    margin: 0;
    padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full viewport height */
}

header, main, footer {
    width: 100%;
}

/*--HEADER STYLING--*/
header {
    background-color: #ffffff; 
    color: #0073ca;
    display: flex;
    align-items: center;
	height: auto;
 /*   min-height: 12em; /* Fixed height of 25% of viewport height */
/*	max-height: 12em; */
    box-sizing: border-box; /* Include padding in height calculation */
}

header .container {
    display: flex;
    width: 70%; /* Default width for normal screens */
    margin: 10px auto;
    height: 100%; /* Ensure container takes full height of header */
	flex-direction: column; /* Stack rows vertically */
}

.top-row {
    display: flex;
    width: 100%;
	height: 82%;
}

.left-column, .right-column {
    display: flex;
	padding: 0;
	margin: 0;
    height: 100%; /* Ensure columns take full height of header */
    flex: 1;
}

.bottom-row {
    width: 100%;
    text-align: center; /* Center text in the bottom row */
	height: 18%;
	display: flex;
	color: black;
	padding: 0;
	justify-content: center;
	align-items: center;
}

/* Ensure the header content does not affect height  */
header .left-column {
    flex: 1 62%;
	align-items: center;
	justify-content: left;
}

header .right-column {
    flex: 1 38%;
	justify-content: right;
	align-items: center;
}

header h1 {
	font-size: calc(2rem + 1vw); /* Combines rem and vw for scaling */
	color: #0073ca;
	margin: 0;
	padding: 0;
}

header h2 {
	font-size: calc(0.6rem + 1vw); /* Combines rem and vw for scaling */
	margin: 0;
	padding: 0;
}

header h3 {
	font-size: calc(0.2rem + 1vw); /* Combines rem and vw for scaling */
	font-weight: normal;
	padding: 0;
	margin: 0;
	color: #0073ca;
}

header p {
	font-size: calc(0.4rem + 1vw); /* Adjust font size for small text */
    color: #212121; /* Lighter color for description */
    margin: 0; /* Remove margins */
    padding: 0; /* Add a little space between h1 and p */
}

/* Logo styling */
.logo {
    max-width: 22%;
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between logo and text */
}
/* Text container for h1 and p */
.text-container {
    display: flex;
    flex-direction: column; /* Stack h1 and p vertically */
    justify-content: center;
}
/* Menu list styling */
.right-column ul {
	display: flex;
	flex-direction: column !important;
	list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
}

.right-column li {
    padding: 5px 0; /* Space between menu items */
	font-size: calc(0.3rem + 1vw); /* Combines rem and vw for scaling */
	padding: 0;
	display: block;
	margin: 0;
}

header a {
	text-decoration: none;
	color: #0073ca;
}

header a:hover {
	text-decoration: underline;
}

/*--MAIN--*/
main {
    background-color: #2196F3; /* Blue */
	background-image: url('bg_20.png'); /* Add the path to your image */
    background-repeat: repeat; /* This ensures the background repeats */
    background-size: auto; /* The image will keep its original size */
    background-position: top left; /* The starting position of the background image */
    color: white;
    display: flex;
    align-items: flex-start; /* Align items to start */
    justify-content: center;
	flex-grow: 1; /* Allow the main section to fill remaining space */
}

main h1 {
	color: #0073ca;
	margin: 0;
	padding: 0;
	font-size: calc(2rem + 0.6vw); /* Dynamic scaling with viewport width */
}

main p {
	font-size: calc(0.8rem + 0.6vw); /* Dynamic scaling with viewport width */
	line-height: 1.6em;
	padding: 0;
	color: #213343;
}

main ul li {
	color: #213343;
	list-style: none;
	line-height: 2em;
	font-size: calc(0.8rem + 0.6vw); /* Dynamic scaling with viewport width */
	padding: 10px auto;
}

main a {
	text-decoration: none;
	color: #213343;
}

main a:hover {
	text-decoration: underline;
}

main .container {
   /* background-color: #e0f7fa; /* Light blue background for the container */
    color: black; /* Adjust text color */
    display: flex;
    flex-direction: column; /* Arrange items vertically */
    gap: 1px; /* Space between sections */
    width: 70%; /* Constrain width to 70% */
    box-sizing: border-box; /* Ensure padding is included in width */
	height: 100%;
}

.section {
    background-color: #ffffff; /* White background for each section */
    flex: 1; /* Each section takes up equal space */
    box-sizing: border-box; /* Ensure padding is included in width */
	position: relative;
	padding: 0;
	margin: 0;
}

.section1 {
    display: flex;
    align-items: center; /* Align image and text vertically in the center */
	justify-content: flex-start;
	margin: 0;
	padding: 40px;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 10px; 
}

.section1 img {
	margin-right: 40px;
}

.text-content {
    display: flex;
    flex-direction: column; /* Stack the heading and paragraph vertically */
    justify-content: center; /* Center the text vertically */
}

/* Segment styling for Section 2 */
.segment {
    flex: 1;
	position: relative;
    display: flex;
    justify-content: top left;
    align-items: center;
    margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Class to split any section into two vertical segments */
.split-segment {
	background-color: #ffffff;
    display: flex;
    flex-direction: row; /* Stack segments horizontally */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}

.split-segment > div {
    color: white;
    padding: 0;
	margin: 0;
    flex: 1; /* Make the two segments take up equal height */
	background-color: #fff;
	margin-bottom: -1px;
}

.split-segment .text-segment {
	display: flex;
    flex-direction: column; /* Stack the heading and paragraph vertically */
    justify-content: center; /* Center the text vertically */
	align-items: center;
	text-align: center;
	color: black;
}

/* Vertical image styling */
.image {
    width: 100%; /* Adjust the width for vertical images */
    height: auto; /* Maintain the aspect ratio */
    object-fit: contain; /* Ensure the image is contained without distortion */
	margin: 0;
	padding: 0;
	display: block;
}

/* Text over the image */
.overlay-text {
    position: absolute; /* Absolute positioning relative to the segment */
    top: 50%; /* Center the text vertically */
    left: 50%; /* Center the text horizontally */
    transform: translate(-50%, -50%); /* Adjust for perfect centering */
    color: white; /* Text color */
    font-size: calc(3em + 1vw); /* Combines rem and vw for scaling */
    text-align: center; /* Center the text */
    z-index: 1; /* Ensure text is above the image */
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a background for better readability */
    padding: 18px; /* Padding around the text */
}


footer {
    background-color: #212121;
    color: white;
    height: 80px; /* Fixed height for the footer */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media query for ultra-wide screens */
@media (min-width: 2000px) {
    header .container {
		width: 50%;
	}
	
	main .container {
        width: 50%; /* Reduced width for ultra-wide screens */
    }
	
	header h1 {
		font-size: calc(2rem + 0.8vw); /* Combines rem and vw for scaling */
	}

	header h2 {
		font-size: calc(0.6rem + 1vw); /* Combines rem and vw for scaling */
	}

	header h3 {
		font-size: calc(1em + 0.3vw); /* Combines rem and vw for scaling */
	}

	header p {
		font-size: calc(0.8rem + 0.5vw); /* Adjust font size for small text */
	}
	
	.right-column li {
		font-size: calc(1.5rem + 0.1vw); /* Combines rem and vw for scaling */
	}
	
	main h1 {
		font-size: calc(2rem + 0.5vw); /* Dynamic scaling with viewport width */
	}

	main p {
		font-size: calc(1rem + 0.3vw); /* Dynamic scaling with viewport width */
	}

	.overlay-text {
		font-size: calc(2em + 1.5vw); /* Combines rem and vw for scaling */
	}
	main ul li {
		font-size: calc(1rem + 0.4vw); /* Dynamic scaling with viewport width */
	}
}


/* Media query for ultra-wide screens */
@media (max-width: 1180px) {
	header .container {
		width: 96%;
	}
	
    main .container {
        width: 96%; /* Reduced width for ultra-wide screens */
    }
	
	header h1 {
		font-size: calc(2.5rem + 1vw); 
	}

	header h2 {
		font-size: calc(0.6rem + 1vw); 
	}

	header h3 {
		font-size: calc(0.5rem + 1vw); 
	}

	header p {
		font-size: calc(0.8rem + 1vw); /
	}
	
	header .top-row {
		flex-direction: column;
		margin-top: 10px;
	}
	
	header .left-column {
		justify-content: center;
	}
	
	/* Logo styling */
	.logo {
		max-width: 18%; /* Adjust width as needed */
	}
	
	header .right-column {
		justify-content: center;
		align-items: center;
	}
	.right-column ul {
		margin-top: 16px;
		flex-direction: row !important;
		justify-content: center;
    }

	.right-column li {
		font-size: calc(0.6rem + 1vw); /* Combines rem and vw for scaling */
		margin: 0 10px;
	}
	
	.overlay-text {
		font-size: calc(2em + 1vw); /* Combines rem and vw for scaling */
	}
}

/* Media query for phones and tablets */
@media (max-width: 800px) {
	header {
        display: flex;
        flex-direction: column;
        min-height: auto; /* Let header adjust based on column heights */
		width: 100%;
		box-sizing: border-box;
    }

 	header .container {
        width: 100%; /* Full width for the container on small screens */
		min-height: auto;
		margin-bottom: 0;
    }
	
	header .top-row {
        flex-direction: column; /* Stack left and right columns vertically */
        width: 100%;
		justify-content: center;
    }
	
	header .left-column {
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 10px auto;
	}
	
	header .right-column {
		width: 100%;
		margin: 10px auto;
		justify-content: center;
		align-items: center;
	}
	
	header h1 {
		font-size: calc(1.7rem + 1vw); /* Combines rem and vw for scaling */
	}

	header h2 {
		font-size: calc(2rem + 1vw); /* Combines rem and vw for scaling */
	}

	header h3 {
		font-size: calc(0.7rem + 1vw); /* Combines rem and vw for scaling */
		padding: 0;
		margin: 0;
	}
	
	header p {
		font-size: calc(0.7rem + 1vw); /* Combines rem and vw for scaling */
		padding: 0;
		margin: 0;
	}
	.right-column ul {
       flex-direction: column !important;
    }

    .right-column li {
        padding: 5px 0; 
		font-size: calc(0.8rem + 1vw);
		font-weight: bold;
    }
	
    main .container {
        width: 100%; /* Full width for phones and tablets */
		font-size: calc(1rem + 0.8vw); /* Dynamic scaling with viewport width */
    }
	
	main h1 {
		font-size: calc(1.8rem + 1vw); /* Combines rem and vw for scaling */
	}
	
	main p {
		font-size: calc(0.7rem + 1vw); /* Combines rem and vw for scaling */
	}
	
	.section1 {
        flex-direction: column; /* Stack image and text vertically on smaller screens */
        align-items: center;
    }
	
	.section1 img {
        width: 120px; /* Further reduce the image size */
        height: 120px;
    }
	
	.split-segment {
		flex-direction: column;
	}
	
	.overlay-text {
		font-size: calc(2em + 1vw); /* Combines rem and vw for scaling */
	}
	
	.text-segment {
		min-height: 50vh;
	}
	
	.text-segment h1 {
		margin-top: 10px;
	}
}