/* Logo in navigation menu */

/* Desktop - horizontal menu with logo */
#header nav a[href="#menu"] {
    display: none !important;
}

.nav-logo {
    display: inline-block;
    padding: 0;
}

.nav-logo img {
    height: 4em;  /* Match text height */
    width: auto;
    vertical-align: middle;
    display: block;
}

#nav {
    display: block !important;
}

#nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2em;
}

#nav ul li {
    display: inline-block;
}

#nav ul li a {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

/* Mobile - hide horizontal nav, show hamburger */
@media screen and (max-width: 980px) {
    #nav {
        display: none !important;  /* Hide horizontal menu */
    }
    
    /* Show hamburger menu button */
    #header nav a[href="#menu"] {
        display: inline-block !important;
    }
}

/* Mobile fixes - Logo and Video */
@media screen and (max-width: 736px) {
    /* Much smaller header logo */
    header .logo img {
        height: 1.2em !important;
        max-width: 120px;
    }

    /* Smaller nav logo */
    .nav-logo img {
        height: 1em !important;
    }

    /* Banner adjustments */
    #banner {
        min-height: 50vh !important;
        height: 50vh !important;
        max-height: none !important;
    }

    /* Video - ensure it fits and covers properly */
    #banner-video {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* Banner logo - much smaller */
    #banner .logo img {
        max-width: 50% !important;
        height: auto !important;
        max-height: 80px;
        margin: 0 auto;
        display: block;
    }

    /* Reduce banner text size */
    #banner .content p {
        font-size: 0.85em;
    }

    #banner .button {
        font-size: 0.85em;
        padding: 0.5em 1.5em;
    }

    /* Reduce banner padding */
    #banner .inner {
        padding: 2em 1.5em !important;
    }
}

/* Tablet */
@media screen and (max-width: 980px) and (min-width: 737px) {
    header .logo img {
        height: 1.8em !important;
    }

    #banner .logo img {
        max-width: 60% !important;
        max-height: 100px;
    }
}

/* Logo in hamburger menu - larger and centered */
@media screen and (max-width: 980px) {
    #menu .nav-logo,
    #menu a.nav-logo {
        display: block;
        text-align: center;
        padding: 2em 0 1em 0;
        border-bottom: solid 1px rgba(255, 255, 255, 0.1);
        margin-bottom: 1em;
    }

    #menu .nav-logo img {
        height: 4em !important;  /* Much larger */
        max-width: 70%;
        margin: 0 auto;
        display: block;
    }

    /* Center all menu items */
    #menu ul.links {
        text-align: center;
    }

    #menu ul.links li {
        text-align: center;
    }

    #menu ul.links li a {
        text-align: center;
    }
}
/* Fix banner button on mobile */
@media screen and (max-width: 736px) {
    /* Larger button with better spacing */
    #banner .button {
        font-size: 0.9em !important;
        padding: 0.75em 2em 0.75em 1.5em !important;
        white-space: nowrap;
        display: inline-block;
    }

    /* Alternative: Remove arrow on mobile */
    #banner .button.next:after {
        display: none !important;
        content: none !important;
    }
}

/* Very small screens */
@media screen and (max-width: 480px) {
    #banner .button {
        font-size: 0.8em !important;
        padding: 0.65em 1.75em 0.65em 1.25em !important;
    }
}


/* Logo styling */
.logo img {
    height: 20.5em;  /* Adjust height as needed */
    width: auto;
    display: block;
    border-bottom: 0;
}

/* Remove text formatting from logo link */
.logo strong, .logo span {
    display: none;
}

/* Banner background color */
#banner {
    background-color: #7893c9 !important;
    background-image: none !important;  /* Remove default background image */
}
#contact {
    background-color: #7893c9 !important;
    background-image: none !important;  /* Remove default background image */
}
#footer {
    background-color: #7893c9 !important;
    background-image: none !important;  /* Remove default background image */
}

/* Optional: Adjust text color for better contrast */
#banner h1, #banner p {
    color: #ffffff;
}

#banner .button {
    border-color: #ffffff;
    color: #ffffff;
}

#banner .button:hover {
    background-color: #ffffff;
    color: #7893C9;
}

/* Center banner content */
#banner .inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#banner .logo {
    display: inline-block;
    margin: 0 auto;
}

#banner .content {
    margin: 0 auto;
    text-align: center;
}

#banner .actions {
    justify-content: center;
    display: flex;
}


/* Add uniform background color to the :before overlay */
.tiles article:before {
    background-color: rgba(100, 115, 140, 0.85) !important;
    opacity: 1;
}

/* Keep existing :after layer */
.tiles article:after {
    background-color: rgba(36, 41, 67, 0.25);
}

/* Hover effect still works */
.tiles article:hover:before {
    opacity: 0;
}

/* Image background for banner */
#banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ensures video covers entire area */
    z-index: 0;  /* Behind all content */
}

/* Video background for banner */
#banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ensures video covers entire area */
    z-index: 0;  /* Behind all content */
}

/* Ensure banner content appears above video */
#banner .inner {
    position: relative;
    z-index: 2;
}

/* Optional: Add overlay for better text readability */
#banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(120, 147, 201, 0.3);  /* Light overlay */
    z-index: 1;
}

/* Darker input fields for contact section */
#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
    background-color: #4a6491 !important;  /* Darker blue */
    border-color: #3d5478 !important;
    color: #ffffff !important;
}

/* Placeholder text */
#contact input::placeholder,
#contact textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Focus state */
#contact input[type="text"]:focus,
#contact input[type="email"]:focus,
#contact textarea:focus {
    background-color: #3d5478 !important;
    border-color: #ffffff !important;
}

/* Labels */
#contact label {
    color: #ffffff;
}

/* Contact info text */
#contact .contact-method h3,
#contact .contact-method span,
#contact .contact-method a {
    color: #ffffff;
}

/* Remove underline/border from logo link */
.logo,
.logo a,
a.logo {
    border-bottom: 0 !important;
    text-decoration: none !important;
}

/* Ensure no hover effects either */
.logo:hover,
.logo a:hover,
a.logo:hover {
    border-bottom: 0 !important;
}