/* Reset styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-size: clamp(1rem, 2vw, 2.5rem); /* Base font size scales with viewport */
}

.blue{
	position: absolute; top:30%; left: 25%; width:50%; background-color:rgba(222,222,222,0.3); border-radius:5px;
}
.red{
	width:100%;
}

/* Carousel Styles */
.carousel {
    position: relative;
    width: 100%;
    max-width: 1900px;
    overflow: hidden;
    height: 100vh; /* Full viewport height */
}

.carousel-inner {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease;
}

.carousel-item {
    flex: 1 0 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.carousel-button {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.2);
    border: none;
    color: white;
    padding: 12px; /* Scales with base font size */
    cursor: pointer;
    font-size: 16px; /* Scales with viewport */
    transition: background 0.3s ease;
	height: 10%;
}

.carousel-button:hover {
    background: rgba(225, 225, 225, 0.5);
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 15px; /* Scales with base font size */
    width: 100%;
}

.dot {
    height: 10px; /* Scales with base font size */
    width: 10px; /* Scales with base font size */
    margin: 0 0.5rem; /* Scales with base font size */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active,
.dot:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* Navbar Styles */
nav {
    background-color: white;
    height: 10vh; /* Relative height */
    font-size: clamp(1rem, 2vw, 2.5rem); /* Scales with viewport */
    border-bottom: solid 1px grey;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

li {
    margin-bottom: 4vh;
    font-family: Times, serif;
    text-align: center;
    letter-spacing: 0.2em;
}

nav ul li a {
    color: grey;
    text-decoration: none;
    font-size: clamp(1rem, 2vw, 2.5rem); /* Scales with viewport */
}

li:hover {
    text-decoration: underline;
    color: black;
    text-decoration-color: grey;
}

/* Updated iframe container to position it over the carousel */
.iframe-container {
    position: absolute; /* Position the iframe absolutely within the carousel */
    top: 0; /* Align to the top of the carousel */
    left: 0; /* Align to the left of the carousel */
    width: 100%; /* Full width */
    height: 100%; /* Full height, adjust as needed */
    z-index: 10; /* Ensure the iframe is above other content */
    background-color: rgba(255, 255, 255, 0.9); /* Optional: semi-transparent background to help visibility */
    display: flex;
    justify-content: center; /* Center iframe horizontally */
    align-items: center; /* Center iframe vertically */
}

/* CSS for iframe itself */
iframe {
    width: 90%; /* Adjust width as needed */
    height: 80%; /* Adjust height as needed */
    border: none; /* Removes default border */
    max-width: 100%;
    max-height: 100%;
}

/* Footer Styles */
footer {
    position: relative; /* Ensure footer is positioned below the carousel and iframe */
    z-index: 1; /* Ensure the footer is below the carousel */
    margin-top: 20px; /* Adds margin to separate it from the content above */
}