/* Basic styles for body */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('../images/receiver_v3_pcb_design_purple.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    box-sizing: border-box;
}

/* Header styling */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2c3e50; /* Dark header background color */
    padding: 1rem 2vw; /* Use vw for responsive padding */
    width: 100%;
    box-sizing: border-box;
}

header h2 {
    color: white; /* White text for the title */
    font-size: 1.5rem;
    margin: 0;
}

p, h2, h3 {
    text-align: center;
}

nav {
    display: flex;
    gap: 0.5vw; /* Space between buttons */
}

button {
    padding: 1.5vh 1.5vw; /* Padding using vh and vw for responsiveness */
    font-size: 1.5rem; /* Set font size using rem */
    cursor: pointer;
    border: none;
    border-radius: 0.5rem;
    background-color: #2c3e50; /* Same as header background */
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
    white-space: normal; /* Allow text to wrap inside buttons */
    display: flex;
    flex-direction: column; /* Stack text vertically inside button */
    justify-content: center; /* Center the text vertically */
    align-items: center; /* Center the text horizontally */
    text-align: center; /* Make sure text is centered */
}

/* Button hover effect */
button:hover {
    background-color: #1a252f; /* Darker version of header color */
    transform: scale(1.05); /* Slightly increase the size of the button on hover */
}

/* Hamburger menu styles */
.hamburger {
    font-size: 3rem; /* Larger size for the hamburger */
    display: none; /* Hide by default */
    cursor: pointer;
    color: white;
}

/* Show hamburger menu only on small screens */
@media (max-width: 768px) {
    .hamburger {
        display: block; /* Show hamburger icon */
    }

    nav {
        display: none; /* Hide regular menu */
        flex-direction: column; /* Stack buttons vertically */
        width: 100%;
        background-color: #2c3e50; /* Dark background for the menu */
        padding-top: 1rem;
    }

    .active {
        display: flex; /* Show the menu when it has the "active" class */
    }

    button {
        width: 100%; /* Make buttons full width */
        text-align: center;
        margin-bottom: 1rem; /* Add space between buttons */
    }
}

/* Text Sections Styling */
.text-section {
    background-color: #2c3e50; /* Use header background color */
    color: white; /* White text */
    padding: 2vh 4vw;
    margin: 2vh auto;
    max-width: 70%;
    border-radius: 0.5rem;
}

/* Cards Container Styling */
.cards-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2vw; /* Space between the cards */
    padding: 2vw;
}

.card {
    background-color: #2c3e50; /* Match header background */
    color: white;
    border-radius: 0.5rem;
    width: 23%; /* Make each card take up 23% of the width */
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the content */
    text-align: center; /* Center the text */
}

/* Headshot Styling */
.card img {
    width: 90%; /* Make the image width 90% of the card width */
    height: auto; /* Maintain aspect ratio */
    max-height: 250px; /* Set a max height to avoid excessive height */
    object-fit: contain; /* Ensure the full image is visible */
    margin-bottom: 1rem; /* Space between the image and text */
    border-radius: 0; /* No rounded corners */
}

/* Reusable styles for any section containing an ordered list */
.list-section {
    background-color: #2c3e50; /* Same as header background color */
    color: white; /* White text color */
    padding: 0.5vh 0 2vh; /* Padding for spacing around text (adjust as needed) */
    margin: 2vh auto; /* Center the section and add vertical spacing */
    border-radius: 0.5rem; /* Optional: rounded corners */
    text-align: center; /* Center the content inside the section */
    width: 100%;
    max-width: 80%; /* Restrict maximum width on large screens */
}

/* Center the h3 title above the list */
.list-section h3 {
    font-size: 2rem;
    margin-bottom: 1rem; /* Space between the title and the list */
}

/* Styling for the ordered list */
.list-section ol {
    list-style-type: decimal; /* Use decimal numbers for the list */
    padding: 0; /* Remove default padding */
    margin: 0 auto; /* Center the list itself horizontally */
    width: 100%; /* Ensure the list takes up full width */
    display: flex; /* Enable flexbox for horizontal alignment */
    flex-direction: column; /* Stack list items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text within each list item */
}

.list-section li {
    font-size: 1.2rem; /* Increase font size for readability */
    margin-bottom: 1rem; /* Add spacing between list items */
    padding: 0;
    width: 90%; /* Limit the width of each list item for better control */
    word-wrap: break-word; /* Ensure text wraps properly */
    overflow-wrap: break-word; /* Support wrapping for long words */
    text-align: left; /* Align text to the left */
    line-height: 1.5; /* Add spacing between lines */
    white-space: normal; /* Allow wrapping */
}

/* Ensure only the last card goes below the first three */
@media (max-width: 768px) {
    .cards-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 100%; /* Cards stack vertically on small screens */
        margin-bottom: 2vh;
    }

    /* Adjust headshot image size for mobile */
    .card img {
        width: 90%;  /* Make image width 90% of its container */
        height: auto; /* Maintain aspect ratio */
        max-height: 250px; /* Uniform height for images */
        object-fit: contain; /* Ensure full image is shown without cropping */
        margin-bottom: 1rem; /* Space between the image and text */
        border-radius: 0; /* Ensure no rounded corners */
    }
}

/* For Tablets (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .card img {
        width: 90%; /* Keep image filling the width */
        height: auto; /* Adjust the height to maintain aspect ratio */
        max-height: 250px; /* Set a consistent max height */
        object-fit: contain; /* Ensure the image fits without cropping */
        margin-bottom: 1rem;
    }
}

/* Darker Background PNG for specific section */
.image-section {
    background-color: #2c3e50; /* Dark background color */
    background-image: url('images/your-image.png'); /* Replace with your PNG image path */
    background-size: cover; /* Make the background cover the section */
    background-position: center; /* Center the image */
    color: white;
    padding: 1vh 4vw 2vh;
    margin: 2vh auto;
    max-width: 70%;
    border-radius: 0.5rem;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.image-container img {
    width: 100%;
    max-width: 80%;
    height: auto;
    border-radius: 0.5rem; /* Round the corners */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Add a shadow for better contrast */
}

img {
    padding: 2vh 1vw;
}

ol::marker {
    font-weight: bold;
}

.pdf-container {
    display: flex; /* Places the icons horizontally */
    justify-content: center; /* Centers the icons */
    gap: 2vw; /* Adds space between each icon */
    padding: 2vw; /* Adds padding around the container */
    text-align: center;
}

.pdf-container a {
    text-decoration: none; /* Removes underline from links */
    color: red; /* Sets the icon and text color */
    display: flex; /* Aligns the icon and text horizontally */
    flex-direction: column; /* Stacks icon above the text */
    align-items: center; /* Centers content inside each link */
    transition: transform 0.3s ease-in-out; /* Smooth animation */
}

.pdf-container a:hover {
    transform: scale(1.1);
    color: darkred;
    background-color: #1a252f;
    border-radius: 0.5rem;
}

.pdf-container i {
    font-size: 6vw;
}

.pdf-container span {
    margin-top: 0.5vw;
    font-size: 1.5vw;
    color: white;
}

.video-section {
    background-color: #2c3e50;
    color: white; /* White text */
    padding: 2vh 4vw; /* Responsive padding */
    margin: 2vh auto;
    width: 100%; /* Maintain aspect ratio */
    max-width: 40%;
    border-radius: 0.5rem; /* Rounded corners */
    text-align: center; /* Center the content */
}

/* Styling for the heading */
.video-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
}

/* Styling for the video */
.video-section video {
    width: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure it fits within the container */
    max-height: 80vh;
    border-radius: 0.5rem; /* Rounded corners */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}