/* General title and subtitle styles */
#titl {
    width: 100%;
    padding: 0 15px; /* Ensures title doesn't touch the sides */
    box-sizing: border-box;
    margin-top: -15px !important;
    text-align: center; /* Ensure subtitle and title are centered */
}

.subtitle {
    color: #070101dc;
    padding: 0 10px;
    font-size: 0.7em; /* Default font size */
    text-align: center;
    margin: 0;
    box-sizing: border-box;
    max-width: 100%;
    word-wrap: break-word;
    margin-top: -10px; /* Space between subtitle and title */
}

.titles-moa {
    color:#025928;
    font-size: 2em; /* Default font size */
    text-align: center;
    margin-top: -5px;
    line-height: 1.1;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive for mobile screens (up to 767px) */
@media (max-width: 767px) {
    #loggs {
        left: 2em; /* Fine-tune for small screens */
        top: 50%;  /* Keep vertically centered */
        transform: translateY(-50%);
        width: 110px; /* Adjust logo width */
        height: auto; /* Keep height proportional */
    }

    .subtitle {
        font-size: 1.2em; /* Slightly smaller subtitle font for mobile */
        margin-top: -8px; /* Adjust top margin for better alignment */
        padding: 0 5px; /* Reduce padding */
    }

    .titles-moa {
        font-size: 0.8em; /* Adjust title font size for smaller screens */
        margin-top: 0; /* Adjust for better alignment */
        word-wrap: break-word; /* Allow title to wrap on smaller screens */
        white-space: normal; /* Allow text to wrap */
    }
}

/* Responsive for very small screens (up to 480px) */
/* Responsive for very small screens (up to 480px) */
@media (max-width: 480px) {
    #loggs {
        left: 10%; /* Slightly adjust for better alignment on very small screens */
        top: 3.5em;  /* Move the logo up a bit */
        transform: translateY(0);  /* Disable vertical centering on very small screens */
        width: 100px; /* Adjust logo width */
    }

    .subtitle {
        font-size: 0.7em; /* Smaller font size */
        margin-top: -6px; /* Adjust vertical margin */
    }

    .titles-moa {
        font-size: 0.8em; /* Further reduce title font size */
        margin-top: 0; /* Adjust margin */
        line-height: 1.2; /* Adjust line height */
    }
}

/* For extremely small screens (less than 360px) */
@media (max-width: 360px) {
    .subtitle {
        font-size: 12px; /* Further reduce subtitle size */
        margin-top: -4px; /* Adjust margin for very small screens */
    }

    .titles-moa {
        font-size:0.8em; /* Further reduce title font size */
        line-height: 1.2;
    }
    #loggs {
        left: 10%;  /* Adjust to keep the logo aligned on very small screens */
        top: 3.5em;  /* Same adjustment for vertical position */
        width: 90px; /* Further reduce the logo size */
    }
}

/* Additional styles for the top-section and header */
.top-section-wrapper {
    background-image: url('/site/images/headerbgg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    padding: 0;
}

.top-nav, .mlf-custom-background1 {
    width: 100%;
}

.top-middle {
    padding-left: 15px;
}

/* Adjust the logo for mobile */
#loggs {
    position: absolute;
    left: 12%; /* Default positioning for larger screens */
    margin-left: -50px !important;
    display: block;
    margin-top: -10px !important;
    top: 1.1em;
}

/* Style for the search form */
.nav-form input[type="search"] {
    background-color: white;
    border: 1px solid #ccc;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
}

.nav-form input[type="search"]:focus {
    outline: none;
    border-color: #007bff;
}