/* Reset margins and paddings for the entire document */
body {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Apply box-sizing and font-family to all elements */
* {
    box-sizing: border-box; /* Includes padding and border in element's total width and height */
    font-family: Arial; /* Set default font to Arial */
}

/* Styling for the navigation bar */
nav {
    display: flex; /* Use flexbox for layout */
    width: 100%; /* Full width of the container */
    height: 60px; /* Fixed height for navigation bar */
    z-index: 500; /* Ensure navigation bar is on top of other elements */
}

/* Style list items in the navigation */
.nav-con>li {
    margin-left: 20px; /* Space between list items */
    list-style-type: none; /* Remove default list styling */
    color: white; /* Text color */
    font-size: 18px; /* Font size */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Style links within list items */
.nav-con>li>a {
    color: white; /* Text color */
    text-decoration: none; /* Remove underline from links */
}

/* Container for navigation bar content */
.nav-bar-content {
    width: 60%; /* Width of the content container */
    margin: auto; /* Center container horizontally */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    height: 60px; /* Height of the container */
}

.nav-con {
    display: flex;
}

.nav-con-mobile {
    display: none;
}

.nav-mobile {
    display: none;
}

/* Styling for the logo */
.logo {
    margin-right: auto; /* Push logo to the left */
    color: #fff; /* Text color */
    font-size: 18px; /* Font size */
    font-weight: bold; /* Bold text */
    /* width: 150px; Fixed width for logo */
}

/* Styling for selected navigation item */
.selected {
    color: #E45353 !important; /* Highlight color for the selected item */
    font-weight: bold; /* Bold text */
}

/* Styling for the hero section */
.hero-section {
    background: black; /* Background color */
    height: 600px; /* Height of the hero section */
    background-image: url("img/hero_background_home.png"); /* Background image */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center content vertically */
    margin-top: -60px; /* Adjust margin to overlap with navigation bar */
    justify-content: center; /* Center content horizontally */
}

/* Style for hero section image */
.hero-section-img {
    width: 100%; /* Full width */
    height: 600px; /* Fixed height */
}

/* Container for hero section content */
.hero-section-content {
    width: 60%; /* Width of content container */
}

/* Styling for heading in hero section */
.hero-section-content>h2 {
    font-size: 50px; /* Font size */
    color: white; /* Text color */
    margin-bottom: 15px; /* Space below heading */
}

/* Styling for paragraph in hero section */
.hero-section-content>p {
    font-size: 18px; /* Font size */
    color: white; /* Text color */
    line-height: 30px; /* Line height */
    margin-top: 0; /* Remove top margin */
}

/* Styling for button in hero section */
.hero-section-content>a>button {
    width: 160px; /* Width of the button */
    height: 60px; /* Height of the button */
    font-size: 18px; /* Font size */
    border-radius: 5px; /* Rounded corners */
    background: #E45353; /* Background color */
    border: none; /* Remove border */
    color: white; /* Text color */
    margin-top: 5px; /* Space above button */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Button hover effect in hero section */
.hero-section-content>button:hover {
    background: #E66060; /* Change background color on hover */
}

/* Section for "Who We Are" */
.who-we-are-section {
    background: #2D2D2D; /* Background color */
    width: 100%; /* Full width */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    padding: 60px 0; /* Vertical padding */
    justify-content: center; /* Center items vertically */
}

/* Heading style for sections */
.section-heading {
    text-align: left; /* Align text to the left */
    width: 60%; /* Width of heading container */
    margin-top: 0; /* Remove top margin */
    font-size: 26px; /* Font size */
    color: white; /* Text color */
    padding-top: 0; /* Remove top padding */
}

/* Container for navigation sections */
.navigation-container {
    display: grid; /* Use grid layout */
    width: 100%; /* Full width */
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
}

/* Styling for navigation sub-container */
.navigation-sub-con {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    column: 1; /* Position in the grid */
    height: 400px; /* Fixed height */
}

/* Styling for text in navigation sub-container */
.navigation-sub-con>span {
    font-size: 26px; /* Font size */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below text */
}

/* Styling for buttons in navigation sub-container */
.navigation-sub-con>a>button {
    width: 160px; /* Width of the button */
    height: 60px; /* Height of the button */
    font-size: 18px; /* Font size */
    border-radius: 5px; /* Rounded corners */
    background: #E45353; /* Background color */
    border: none; /* Remove border */
    color: white; /* Text color */
    margin-top: 5px; /* Space above button */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Button hover effect in navigation sub-container */
.navigation-sub-con>button:hover {
    background: #E66060; /* Change background color on hover */
}

/* Styling for images in navigation sub-container */
.navigation-sub-img {
    column: 2; /* Position in the grid */
    width: 100%; /* Full width */
    object-fit: cover; /* Cover image without distortion */
    height: 400px; /* Fixed height */
}

/* Styling for footer */
footer {
    background: #2D2D2D; /* Background color */
    height: 80px; /* Fixed height */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
}

/* Styling for footer text */
footer>span {
    color: white; /* Text color */
}

.mobile-nav-bar-content {
    display: none;
}

@media all and (min-width: 320px) and (max-width: 700px) {
    .nav-con {
        display: none;
    }

    .nav-mobile {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(39, 39, 39);
        flex-direction: column;
        list-style-type: none;
        justify-content: center;
        align-items: center;
    }

    .nav-con-mobile>li>a {
        color: white;
    }

    .nav-mobile>li>a {
        color: white;
        text-decoration: none;
    }
        .nav-mobile>li {
            margin: 10px;
            font-size: 20px;
        }

        #exit_button {
            position: absolute;
            right: 10px;
            top: 10px;
            background: none;
            border: none;
            color: white;
        }

    .nav-con-mobile {
        display: block;
    }

    .nav-bar-content {
        width: 90%;
    }

    .hero-section-content {
        width: 90% !important;
    }

    .hero-section-content>h2 {
        font-size: 35px;
    }

    .who-we-are-section {
        align-items: unset;
        padding: 60px 10px;
        width: 100%;
    }

    video {
        width: 100% !important;
        height: 300px !important;
    }

    .navigation-sub-img {
        display: none;
    }

    .navigation-sub-con {
        width: 100%;
        border-bottom: 1px solid black;
    }

    .navigation-sub-con:nth-child(1) {
        background: #235c88;
    }

                .navigation-sub-con:nth-child(2) {
        background: #018758;                }

        .navigation-sub-con>span {
            text-align: center;
            color: white;
        }

        .navigation-container {
            display: block;
        }

        footer>span {
            font-size: 15px; 
            text-align: center;
            margin: 10px;           
        }

}