@charset "UTF-8";

body {
    font-family: Arial, sans-serif;
    background-image: url("images/background/MossLanding.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Ensure full viewport height */
}

.logo-bar {
    position: relative;
    top: 50px; /* Starts 50px down from the top */
    background-color: white; /* Full-width white background */
    padding: 20px; /* Padding around the content */
    width: 100%; /* Ensures full width */
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-bar img {
    display: block;
    margin-left: 0; /* Aligns left */
}

/* Default contact info positioning (Desktop View) */
.contact-info {
    position: absolute;
    right: 40px; /* 40px from the right edge */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for exact vertical centering */
    text-align: left; /* Left-align text inside the box */
    background-color: white; /* Ensures it blends with the bar */
    padding: 5px 10px; /* Padding inside the box */
    font-family: Arial, sans-serif; /* Match your site's font */
    white-space: nowrap; /* Prevent text from wrapping */
}

.contact-info p {
    font-size: 16px; /* Normal font size */
    margin: 5px 0; /* Reduce spacing between lines */
}

.company-name {
    font-size: 18px; /* Slightly larger font */
    font-weight: bold; /* Make it stand out */
}

.vspace {
    height: 5px; /* Adjust the spacing as needed */
}

/* ===== Mobile Styles (When Screen Width is 600px or Less) ===== */
@media (max-width: 600px) {
    .logo-bar {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center logo and text */
        text-align: center;
        padding: 20px 0; /* Adjust padding */
    }

    .contact-info {
        position: static; /* Remove absolute positioning */
        transform: none; /* Reset transformation */
        text-align: center; /* Center align text for better readability */
        white-space: normal; /* Allow text wrapping */
        margin-top: 10px; /* Add spacing between logo and contact info */
    }
}