/* Import Roboto font from Google Fonts with weights 400 and 700 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Apply border-box sizing to all elements */
* {
    box-sizing: border-box;
}

/* Set global styles for the body: font, background, and layout */
body {
    font-family: 'Roboto', sans-serif; /* Use Roboto font, fallback to sans-serif */
    background-color: #1a1a1a; /* Dark background color */
    background: linear-gradient(to right, #2c3e50, #34495e); /* Gradient background */
    background-size: cover; /* Cover the entire background */
    background-position: center; /* Center the background */
    background-attachment: fixed; /* Fix the background position */
    color: white; /* Set text color to white */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    min-height: 100vh; /* Minimum height of 100% viewport height */
}

/* Style the header section */
header {
    background-color: #0d0d0d; /* Dark background for header */
    background: linear-gradient(to right, #1a252f, #22303f); /* Gradient background for header */
    top: 0; /* Position at the top */
    left: 0; /* Position at the left */
    width: 100%; /* Full width */
    margin-top: 0; /* Remove top margin */
    padding: 2%; /* Add padding */
    text-align: center; /* Center-align text */
    font-size: 120%; /* Increase font size */
}

/* Style the main content section */
main {
    padding: 5%; /* Add padding */
}

/* Style the container for content blocks */
.lite_cont {
    background: rgba(25, 25, 25, 0.3); /* Semi-transparent dark background */
    backdrop-filter: blur(10px); /* Apply blur effect */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Light border */
    border-radius: 25px; /* Rounded corners */
    text-align: left; /* Left-align text */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for transform and shadow */
    display: flex; /* Use flexbox for layout */
    gap: 20rem; /* Space between flex items */
    padding: 5%; /* Add padding */
    margin: 5%; /* Add margin */
}

/* Style images within the content container */
.lite_cont img {
    width: 40%; /* Set image width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 25px; /* Rounded corners */
    aspect-ratio: 16 / 9; /* Force 16:9 aspect ratio */
    border: 5px solid rgba(255, 255, 255, 0.1); /* Light border */
}

/* Style the text container within the content block */
.text-div {
    width: 40%; /* Set width */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    gap: 6%; /* Space between flex items */
}

/* Style paragraphs within the main content */
main p {
    line-height: 1.6; /* Increase line height for readability */
}

/* Style anchor links */
a {
    color: white; /* Set text color to white */
    text-decoration: none; /* Remove underline */
    padding: 2%; /* Add padding */
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    border-radius: 8px; /* Rounded corners */
    text-align: center; /* Center-align text */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    font-size: 1.1em; /* Increase font size */
}

/* Hide the separator by default */
.separator {
    display: none; /* Do not display */
}

/* Style the footer section */
footer {
    background-color: #0d0d0d; /* Dark background for footer */
    background: linear-gradient(to right, #1a252f, #22303f); /* Gradient background for footer */
    width: 100%; /* Full width */
    padding: 3%; /* Add padding */
    text-align: center; /* Center-align text */
    margin-top: auto; /* Push footer to the bottom */
}

/* Responsive styles for screens up to 1500px */
@media (max-width: 1500px) {
    .lite_cont {
        flex-direction: row; /* Align items in a row */
        gap: 2rem; /* Reduce gap */
        padding: 3%; /* Reduce padding */
        margin: 3%; /* Reduce margin */
    }
    .text-div {
        width: 50%; /* Increase width */
    }
    .lite_cont img {
        width: 45%; /* Increase width */
        max-width: 100%; /* Ensure image does not exceed container */
        aspect-ratio: 16 / 9; /* Force 16:9 aspect ratio */
    }
    header, main {
        padding: 3%; /* Reduce padding */
    }
}

/* Responsive styles for screens up to 1024px */
@media (max-width: 1024px) {
    .lite_cont {
        flex-direction: row; /* Align items in a row */
        gap: 2rem; /* Reduce gap */
        padding: 3%; /* Reduce padding */
        margin: 3%; /* Reduce margin */
    }
    .text-div {
        width: 50%; /* Increase width */
    }
    .lite_cont img {
        width: 45%; /* Increase width */
        max-width: 100%; /* Ensure image does not exceed container */
        aspect-ratio: 16 / 9; /* Force 16:9 aspect ratio */
    }
    header, main {
        padding: 3%; /* Reduce padding */
    }
}

/* Responsive styles for screens up to 965px */
@media (max-width: 965px) {
    header {
        padding: 4%; /* Increase padding */
        font-size: 120%; /* Maintain font size */
    }
    .lite_cont {
        text-align: center; /* Center-align text */
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Stack children vertically */
        gap: 80%; /* Increase gap */
        height: 100%; /* Full height */
        margin: 6%; /* Increase margin */
    }
    .text-div {
        width: 100%; /* Full width */
        gap: 10%; /* Increase gap */
    }
    .lite_cont img {
        width: auto; /* Auto width */
    }
    .separator {
        display: block; /* Display separator */
        padding: 4%; /* Add padding */
    }
    footer {
        padding: 8%; /* Increase padding */
    }
}