/* General body styling */
body {
    background-color: white; /* Clean white background for a sleek look */
    color: #333; /* Dark text for readability */
    font-family: 'Andale Mono', monospace, sans-serif; /* Modern monospace font for a minimalist touch */
    margin: 0;
    padding: 0;
    line-height: 1.6; /* Increased line height for readability */
    min-height: 100vh; /* Ensure the body takes full viewport height */
}

/* Main content styling */
main {
    padding: 20px; /* Add padding around the content */
    margin: 0 auto; /* Center the content */
    max-width: 1200px; /* Optional: Set a max width for large screens */
}
/* Targeting h3 for the pastel sky blue padding and background */
h3 {
    padding: 15px; /* Adjust padding as needed */
    background-color: #f5f7f9; /* Pastel sky blue background color */
    border-radius: 5px; /* Optional: Rounded corners for a softer look */
    color: #333; /* Ensures the text is readable */
    margin: 10px 0; /* Adds spacing around the h3 */
}

/* Targeting the paragraph or text under the h3 */
h3 + p {
    padding: 15px; /* Same padding as h3 */
    background-color: #bedef0; /* Pastel sky blue background color */
    border-radius: 5px; /* Optional: Rounded corners */
    color: #333; /* Ensures the text is readable */
    margin-top: 0; /* Removes the default margin-top */
    margin-bottom: 20px; /* Adds space below the paragraph */
}

/* Services page background */
body.services-page {
    background-color: white; /* Set white background to prevent any default body background */
    background-image: url('cargoship milta.jpg'); /* Full page background image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh; /* Ensure the image spans the full page height */
}

/* Overlay effect for transparency */
body.services-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent black overlay */
    z-index: -1; /* Place it behind other content */
}
.sampling-icon {
    width: 50px;  /* Adjust size as needed */
    height: auto;
    display: block;
    margin: 10px auto; /* Center the image */
}

/* Header and sections */
header, section, footer {
    margin-bottom: 40px; /* Spacing between sections */
    padding: 20px;
    background-color: white; /* White background for all sections */
    border-radius: 10px; /* Soft, rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Header container */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /*spread elements evenly*/
    text-align: center;
    padding: 5px;
    width: 100%;
    background-color: #003366; /* Navy background for a sleek look */
    color: white; /* White text for contrast */
}

/* Title container */
.title-container {
    flex-grow: .5;
    text-align: center;
}

.company-logo {
    height: 250px; /* Adjust logo size as needed */
    width: auto;
}

.main-heading {
    font-size: 4.5em;/*increase font size
    font-weight: bold;
    margin: 0;
    color: white; /* White text for visibility */
}

.subheading {
    font-size: 3.5rem;
    margin: 5px 0;
    color: white; /* White text for consistency */
}

/* Navigation menu styles */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin-right: 25px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
}

nav ul li a {
    color: #0077b6; /* Pastel baby blue for a soft touch */
    text-decoration: none;
}

nav ul li a:hover {
    color: #003366; /* Navy on hover for a sleek transition */
    text-decoration: underline;
}

/* Service section and cards */
.services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align services to the left */
    gap: 20px; /* Add gap between service cards */
}

.service-card {
    background-color: white; /* White background for clean, minimal design */
    border-radius: 8px;
    padding: 20px;
    margin: 15px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.service-card h2 {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #0077b6; /* Pastel baby blue for headings */
}

.service-card p {
    color: #333; /* Dark text for readability */
}

/* Section with transparent background image */
.background-section {
    background-image: url('cargoshipmilta.JPG'); /* Your image file */
    background-size: cover; /* Make the image cover the entire section */
    background-position: center; /* Center the image */
    background-attachment: fixed; /* Keeps the image fixed while scrolling */
    height: 100vh; /* Ensure the section takes full viewport height */
    position: relative;
}

/* Overlay for semi-transparency in the background section */
.background-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent black overlay */
    z-index: -1; /* Place it behind other content */
}

/* Adjust the height and padding of other sections to make sure the image covers the entire space */
#key-elements {
    background-image: url('mountain/halfmountain.png'); /* Path to the image */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center center; /* Centers the image */
    background-attachment: fixed; /* Keeps the background fixed while scrolling */
    padding: 40px 20px; /* Adds padding inside the section */
    color: #000000; /* Ensures the text is readable */
    list-style-type: none; /* Removes default bullets from the list */
    position: relative; /* Ensures the background is placed correctly */
}

/* Adding a semi-transparent white overlay behind the text */
#key-elements::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.65); /* White overlay with transparency */
    z-index: 1; /* Ensures the overlay stays behind the text */
}

/* Make sure the text stays above the overlay */
#key-elements h4,
#key-elements ul {
    position: relative;
    z-index: 2; /* Text stays above the overlay */
}

/* Style for the header inside Key Elements section */
#key-elements h4 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: center;
}

/* Make sure the list is displayed nicely */
#key-elements ul {
    padding-left: 20px; /* Adds some padding to the left for the list */
    font-size: 1.2rem; /* Adjusts font size */
    line-height: 1.6; /* Increases line spacing for better readability */
}

/* Style the list items */
#key-elements li {
    margin-bottom: 10px; /* Adds spacing between list items */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); /* Adds shadow for better text contrast */
}
.bottom-right-image {
    position: absolute;
    width: 150px;
    height: auto;
    border-radius: 8px;
    right: 10px;  /* Stay on the right */
    bottom: 0;  /* Align with the bottom of the section */
}
/* Background for Contact Us page only */
.contact-page {
    background-image: url('imagebigcopy.png'); /* Corrected file name */
    background-size: cover;  
    background-position: center;  
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    min-height: 100vh; /* Ensure it covers the full page */
}
.contact-page .main-content {
    background: none; /* Remove the big white box */
    box-shadow: none;
    border-radius: 0;
    padding: 20px;
    max-width: 900px;
    margin: auto;
}

.contact-page .staff-member {
    background: rgba(255, 255, 255, 0.8); /* Keep individual text boxes */
    padding: 15px;
    margin: 15px 0;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.contact-page .contact-info {
    background: rgba(0, 51, 102, 0.8); /* Keep the contact info box */
    padding: 20px;
    border-radius: 10px;
}


@media screen and (max-width: 768px) {
    /* Ensure content fits the screen */
    body, main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Adjust header for smaller screens */
    .header-container {
        flex-direction: column;
        text-align: center;
        padding: 15px 10px;
    }

    /* Resize the logo for mobile */
    .company-logo {
        height: 150px; /* Reduce size for a more balanced layout */
        width: auto;
    }

    /* Optimize navigation menu */
    nav ul {
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
        gap: 8px; /* Adds even spacing */
    }

    nav ul li {
        display: block;
        font-size: 1rem; /* Slightly smaller for better fit */
    }

    /* Improve section spacing */
    section {
        padding: 12px;
    }

    /* Service section: Ensure proper layout */
    .services-container {
        flex-direction: column;
        align-items: center;
        gap: 15px; /* Uniform spacing between cards */
    }

    .service-card {
        width: 90%; /* Slightly reduced width for balance */
        margin: 10px auto; /* Center the cards */
        padding: 15px;
    }

    /* Background adjustments for small screens */
    .background-section, #key-elements {
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
    }

    /* Optimize text sizes for better readability */
    h3 {
        font-size: 1.3rem;
        padding: 10px;
    }

    p {
        font-size: 1rem;
        padding: 10px;
        line-height: 1.5;
    }

    /* Improve button sizes for touch usability */
    button, .btn {
        padding: 12px 16px;
        font-size: 1rem;
    }

    /* Footer adjustments */
    footer {
        padding: 15px;
        text-align: center;
    }
}
/* Apply styles only to the index page */
body.index-page {
    background-color: #f8f9fa; /* Light gray for a modern, clean look */
    font-family: 'Poppins', sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Header */
.index-page .header-container {
    background: linear-gradient(135deg, #003366, #0077b6); /* Gradient for a modern look */
    color: white;
    text-align: center;
    padding: 40px 20px;
    border-radius: 0 0 20px 20px;
}

/* Navigation Menu */
.index-page nav ul {
    display: flex;
    justify-content: center;
    background: #003366;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.index-page nav ul li {
    display: inline-block;
    margin: 0 15px;
}

.index-page nav ul li a {
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 15px;
    transition: 0.3s ease-in-out;
}

.index-page nav ul li a:hover {
    background: #005599;
    border-radius: 5px;
}

/* Main Content */
.index-page .main-content {
    padding: 40px 20px;
    max-width: 1000px;
    margin: auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Headings */
.index-page h1, 
.index-page h2, 
.index-page h3 {
    color: #003366;
    text-align: center;
}

.index-page h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
}

.index-page h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.index-page h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Call-to-Action (Buttons) */
.index-page .btn {
    display: inline-block;
    background: #0077b6;
    color: white;
    font-size: 1.2em;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.index-page .btn:hover {
    background: #005599;
}

/* Footer */
.index-page .footer {
    background: #003366;
    color: white;
    text-align: center;
    padding: 15px;
    border-radius: 20px 20px 0 0;
}

/* Mobile Optimization */
@media screen and (max-width: 768px) {
    .index-page .header-container {
        padding: 25px 10px;
    }

    .index-page nav ul {
        flex-direction: column;
        text-align: center;
    }

    .index-page .main-content {
        padding: 20px;
    }

    .index-page h1 {
        font-size: 2.2rem;
    }

    .index-page h2 {
        font-size: 1.6rem;
    }
}
.small-left-image {
    width: 150px; /* Adjust size */
    height: auto;
    display: block;
    margin-left: 0;
    margin-top: 10px;
}