/* Links */
a {
    color: #0779e4;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #004080;
    text-decoration: underline;
}

/* Footer specific links */
footer a {
    color: #ffffff;
    font-weight: 500;
}

footer a:hover {
    color: #f0f0f0;
}

/* Email link specific styling */
footer a[href^="mailto:"] {
    color: #a9d4ff; /* Light blue that's easier to read on dark background */
    font-weight: normal;
}

footer a[href^="mailto:"]:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px; /* Base font size */
    line-height: 1.7;
    color: #333;
    background-color: #f8f9fa; /* Slightly off-white */
    font-weight: 400; /* Default weight for Roboto */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', Arial, sans-serif;
    color: #003366; /* Darker, more corporate blue */
    font-weight: 700; /* Bold weight for Montserrat */
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; font-weight: 600; } /* Slightly less bold for h4 */
h5 { font-size: 1.2rem; font-weight: 600; }
h6 { font-size: 1rem;   font-weight: 600; }

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 20px 0;
}

/* Header */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    border-bottom: #0779e4 3px solid;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-size: 1.8rem; /* Maintained */
    font-weight: 700; /* Consistent bold */
    font-family: 'Montserrat', Arial, sans-serif;
    color: #fff; /* Ensure logo color is white against dark header */
}

header nav ul {
    list-style: none;
    display: flex;
}

header nav ul li {
    margin-left: 20px;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-family: 'Roboto', Arial, sans-serif;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-family: 'Roboto', Arial, sans-serif;
    padding: 5px 0;
    border-bottom: 2px solid transparent; /* For hover effect */
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

header nav ul li a:hover, 
header nav ul li.dropdown:hover > a,
header nav ul li a.active-nav { /* Class for active page */
    color: #0779e4; /* Accent color for hover/active */
    border-bottom-color: #0779e4;
}

/* Dropdown Menu */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #444;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    list-style: none; /* Reset list-style for dropdown */
    padding: 0; /* Reset padding for dropdown */
}

.dropdown-content li {
    margin: 0; /* Reset margin for dropdown items */
}

.dropdown-content li a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    font-family: 'Roboto', Arial, sans-serif;
}

.dropdown-content li a:hover {
    background-color: #555;
    color: #0779e4;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Hero Section */
#hero {
    background: #004080; /* Dark blue color, similar to professional logistics sites */
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}

#hero h1 {
    font-size: 3rem; /* Slightly larger for impact */
    margin-bottom: 15px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #fff; /* Ensure white color on hero */
}

#hero h2 {
    font-size: 1.6rem; /* Adjusted for better hierarchy with new h1 */
    margin-bottom: 25px;
    font-weight: 400; /* Normal weight for subtitle */
    font-family: 'Montserrat', Arial, sans-serif;
    color: #e0e0e0; /* Lighter color for subtitle on dark hero */
}

.cta-button {
    display: inline-block;
    background: #ff8c00; /* Bright orange for CTA */
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
    font-family: 'Roboto', Arial, sans-serif;
}

.cta-button {
    display: inline-block;
    background: #ff8c00; /* Bright orange for CTA */
    color: #fff;
    padding: 12px 30px; /* Increased padding */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cta-button:hover {
    background: #e67e00; /* Slightly different hover orange */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.cta-button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Stats Section */
#stats {
    background: #f4f4f4;
    padding: 40px 0;
}
#stats .container {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat-item h3 {
    font-size: 2rem; /* Maintained */
    color: #00509e; /* Adjusted primary blue */
    margin-bottom: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
}

.stat-item p {
    font-size: 1rem;
    color: #555;
    font-family: 'Roboto', Arial, sans-serif;
}

/* Solutions Section */
#solutions {
    padding: 60px 0; /* Increased padding for visual balance with bg image */
    text-align: center;
    background-image: url('assets/images/bg-solutions.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: #fff; /* Default text color to white for this section */
}

#solutions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
    z-index: 1;
}

#solutions .container {
    position: relative;
    z-index: 2; /* Content above overlay */
}

#solutions h2, #solutions .solution-item h3, #solutions .solution-item p {
    color: #fff; /* Ensure all key text is white */
}

#solutions h2 {
    margin-bottom: 40px;
    font-size: 2.2rem; /* Maintained */
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
}

.solution-items {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.solution-item {
    background: rgba(255, 255, 255, 0.1); /* Lighter, semi-transparent background for items */
    padding: 20px;
    border-radius: 8px; /* Slightly more rounded */
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    flex-basis: 30%;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.solution-item h3 {
    color: #003366; /* Matched to new heading color */
    margin-bottom: 10px;
    font-size: 1.6rem; /* Adjusted size */
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
}

/* Transport Section */
#transport {
    background-image: url('assets/images/bg-transport.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    padding: 60px 0; /* Increased padding */
    text-align: center;
    color: #fff; /* Default text color to white */
}

#transport::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65); /* Slightly darker overlay */
    z-index: 1;
}

#transport .container {
    position: relative;
    z-index: 2;
}

#transport h2, #transport p {
    color: #fff; /* Ensure text is white */
}

#transport h2 {
    font-size: 2.2rem; /* Maintained */
    margin-bottom: 15px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
}

#transport p {
    max-width: 700px;
    margin: 0 auto 20px auto;
    line-height: 1.8;
}

.cta-button-secondary {
    display: inline-block;
    background: #555;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.cta-button-secondary:hover {
    background: #333;
}

/* Testimonials Section */
#testimonials {
    padding: 60px 0; /* Increased padding */
    background-image: url('assets/images/bg-testimonials.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: #f0f0f0; /* Default text color to light grey/off-white */
}

#testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for testimonials */
    z-index: 1;
}

#testimonials .container {
    position: relative;
    z-index: 2;
}

#testimonials h2, #testimonials .testimonial-item p, #testimonials .testimonial-item h4 {
    color: #fff; /* Ensure all key text is white or very light */
}

#testimonials h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
}

.testimonial-item {
    background: rgba(255, 255, 255, 0.1); /* Lighter, semi-transparent background for items */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.testimonial-item p {
    font-style: italic;
    margin-bottom: 10px;
}

.testimonial-item h4 {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1rem;
    font-style: italic;
    color: #e0e0e0; /* Lighter color for author */
    font-weight: 400; /* Normal weight for italicized author */
    margin-top: 10px; /* Space above author name */
    text-align: right;
}

/* Request Quote Section */
#request-quote {
    background: #004080;
    color: #fff;
    text-align: center;
    padding: 50px 20px;
}

#request-quote h2 {
    font-size: 2.2rem; /* Maintained */
    margin-bottom: 15px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
}

#request-quote p {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

#request-quote .phone-number {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 25px;
}

/* Page Hero (General) */
.page-hero {
    position: relative;
    padding: 80px 20px; /* Added horizontal padding */
    background-size: cover;
    background-position: center center;
    text-align: center;
    color: #fff;
    background-repeat: no-repeat; /* Ensure no repeat */
}

.page-hero .hero-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Standard overlay */
    z-index: 1;
}

.page-hero .hero-content {
    position: relative;
    z-index: 2;
}

.page-hero .hero-content h1 {
    font-size: 2.8rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.page-hero .hero-content .subtitle {
    font-size: 1.3rem;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto 20px auto;
    line-height: 1.6;
}

/* Services Page Specific Hero */
#services-hero {
    background-image: url('assets/images/bg-services-banner.jpg');
}

/* Special styling for services hero heading to improve visibility */
#services-hero h1 {
    font-size: 2.8rem;
    font-weight: 800; /* Extra bold */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0px 0px 10px rgba(0,0,0,0.7); /* Stronger shadow */
    color: #ffffff; /* Pure white for better contrast */
    background-color: rgba(0, 51, 102, 0.6); /* Semi-transparent dark blue background */
    padding: 15px 25px;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 20px;
    letter-spacing: 0.5px; /* Slightly increased letter spacing */
}

/* Services Content Section */
#services-content {
    padding: 50px 0;
    background-color: #f9f9f9; /* Light background for the services section */
}

#services-content h2 {
    text-align: center;
    font-size: 2.2rem;
    color: #003366; /* Dark blue */
    margin-bottom: 40px;
    font-family: 'Montserrat', Arial, sans-serif;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Responsive grid */
    gap: 30px;
}

/* Overriding/enhancing previous .service-item styles specifically within .services-grid */
.services-grid .service-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    padding: 0; /* Reset padding, will control internally */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* To contain image border-radius */
}

.services-grid .service-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.services-grid .service-item .service-image {
    width: 100%;
    height: 220px; /* Fixed height for uniform card appearance */
    object-fit: cover; /* Ensures image covers the area, may crop */
    /* border-radius: 8px 8px 0 0; No longer needed due to overflow:hidden and padding:0 on parent */
}

.services-grid .service-item h3 {
    font-size: 1.4rem;
    color: #00509e; /* Primary blue from theme */
    margin: 20px 20px 10px 20px;
    font-family: 'Montserrat', Arial, sans-serif;
}

.services-grid .service-item p {
    font-size: 0.95rem;
    color: #444; /* Darker grey for better readability */
    line-height: 1.7;
    margin: 0 20px 20px 20px;
    flex-grow: 1; /* Allows paragraphs to take up space, helping align items if cards have buttons later */
    font-family: 'Roboto', Arial, sans-serif;
}

/* Contact Page Specific Hero */
#contact-hero {
    background-image: url('assets/images/bg-contact-hero.jpg');
}

/* Special styling for contact hero heading to improve visibility */
#contact-hero h1 {
    font-size: 2.8rem;
    font-weight: 800; /* Extra bold */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0px 0px 10px rgba(0,0,0,0.7); /* Stronger shadow */
    color: #ffffff; /* Pure white for better contrast */
    background-color: rgba(0, 51, 102, 0.6); /* Semi-transparent dark blue background */
    padding: 15px 25px;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 20px;
    letter-spacing: 0.5px; /* Slightly increased letter spacing */
}

/* Contact Page Content Section */
#contact-content {
    padding: 50px 0;
    background-color: #fff; /* Clean white background for contact section */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 40px;
    align-items: flex-start; /* Align items to the top of their grid cell */
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Single column */
    }
    .contact-info-column,
    .contact-form-column {
        margin-bottom: 30px;
    }
}

/* Contact Info Column */
.contact-info-column h2,
.contact-form-column h2 {
    font-size: 1.8rem;
    color: #003366; /* Dark blue */
    margin-bottom: 20px;
    font-family: 'Montserrat', Arial, sans-serif;
}

.contact-info-column p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
    font-family: 'Roboto', Arial, sans-serif;
}

.contact-details-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.contact-details-list li {
    display: flex;
    align-items: flex-start; /* Align icon with the start of the text block */
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #333;
    font-family: 'Roboto', Arial, sans-serif;
}

.contact-details-list .icon {
    margin-right: 15px;
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 24px; /* Explicit width for icon container */
    height: 24px; /* Explicit height for icon container */
    display: inline-flex; /* Helps with alignment */
    align-items: center;
    justify-content: center;
}

.contact-details-list .icon img {
    max-width: 100%;
    max-height: 100%;
}

.contact-details-list strong {
    color: #00509e; /* Primary blue */
    margin-right: 5px;
}

.contact-info-column h3 {
    font-size: 1.2rem;
    color: #003366;
    margin-top: 25px;
    margin-bottom: 10px;
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Contact Form Column & Form Styling */
.contact-form-column {
    background-color: #f9f9f9; /* Light grey background for form area */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
    font-size: 0.9rem;
    font-family: 'Roboto', Arial, sans-serif;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: 'Roboto', Arial, sans-serif;
    box-sizing: border-box; /* Important for width and padding */
    transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: #00509E; /* Primary blue on focus */
    outline: none;
    box-shadow: 0 0 5px rgba(0, 80, 158, 0.2);
}

.form-group textarea {
    height: 150px;
    resize: vertical;
}

/* Button is already styled by .cta-button, but if specific overrides were needed:
#contact-form button.cta-button { ... } 
*/

#form-submission-status {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    font-family: 'Roboto', Arial, sans-serif;
}

#form-submission-status.success {
    background-color: #d4edda; /* Green for success */
    color: #155724;
    border: 1px solid #c3e6cb;
}

#form-submission-status.error {
    background-color: #f8d7da; /* Red for error */
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* Tracking Page Specific Styles */
#tracking-interface.container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.tracking-form-container {
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.tracking-form-container h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #003366;
    font-family: 'Montserrat', Arial, sans-serif;
}

#tracking-form {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    align-items: center;
    gap: 15px;
}

#tracking-form .form-group {
    flex-grow: 1;
    margin-bottom: 0; /* Reset margin as gap is used */
}

#tracking-form input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: 'Roboto', Arial, sans-serif;
    box-sizing: border-box;
}

#tracking-form .cta-button {
    padding: 12px 25px;
    font-size: 1rem;
    white-space: nowrap; /* Prevent button text from wrapping */
}

#map-section {
    margin-bottom: 30px;
}

#shipment-map {
    width: 100%;
    height: 450px; /* Adjust height as needed */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#tracking-details-container {
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#tracking-details-container h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8rem;
    color: #003366;
    font-family: 'Montserrat', Arial, sans-serif;
}

#shipment-details p {
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.6;
    font-family: 'Roboto', Arial, sans-serif;
    color: #333;
}

#shipment-details p strong {
    color: #00509E;
    margin-right: 5px;
}

#sms-notification-section label {
    font-weight: bold;
    margin-right: 10px;
    font-family: 'Roboto', Arial, sans-serif;
}

#sms-notification-section input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

#sms-notification-section small {
    font-size: 0.85rem;
    color: #555;
}


/* Ensure specific styling for images previously used as icons is not broadly applied */
img.service-icon { 
    /* Styles for very small icons, if they were ever used elsewhere */
    width: 60px; 
    height: 60px; 
    margin-bottom: 10px; 
}


/* Footer */
footer {
    background: #333;
    color: #bbb;
    padding: 30px 0 10px;
    font-size: 0.9rem;
}

.footer-columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.footer-column {
    flex-basis: 30%;
}

.footer-column h3 {
    color: #fff;
    margin-bottom: 10px;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li a {
    color: #bbb;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #0779e4; /* Accent color on hover */
}

.social-media {
    text-align: center;
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px solid #444;
}

.social-media a {
    color: #bbb;
    margin: 0 10px;
    text-decoration: none;
}

.social-media a:hover {
    color: #fff;
}

.copyright {
    text-align: center;
    font-size: 0.8rem;
    padding-top: 10px;
    border-top: 1px solid #444;
}

/* Slider Styles - basic positioning, actual styling in index.html <style> tag or here */
#home-slider {
    padding: 0; /* Remove padding if slider container handles it */
    background-color: #f0f0f0; /* Light background for the slider area */
}

/* Ensure .container inside slider section doesn't constrain slider width if slider-container is 100% */
#home-slider .container {
    width: 100%;
    max-width: 100%; /* Allow slider to be full width if desired */
    padding: 0;
    margin:0;
}

/* Styles for inline placeholder images on Who We Are page */
.content-with-image {
    display: flex;
    align-items: flex-start; /* Align items to the top for better text flow */
    margin-bottom: 40px; /* Increased margin */
    gap: 30px; /* Increased gap */
}

.content-with-image .text-content {
    flex: 1;
}

.inline-placeholder-image {
    max-width: 350px; /* Slightly larger */
    width: 100%; /* Ensure responsiveness within flex item */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-top: 5px; /* Align better if text starts higher */
}

.inline-placeholder-image.right {
    order: 1; /* Moves image to the right in flex container */
}

/* Styling for the 'Our Values' list on who-we-are.html */
.values-list {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
}

.values-list li {
    background-color: #ffffff;
    border-left: 5px solid #00509e; /* Accent border color */
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.values-list li strong {
    color: #003366; /* Darker blue for emphasis */
    display: block;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

/* Styles for service icons on Services page */
#services-content .service-item {
    display: flex;
    align-items: flex-start;
    gap: 25px; /* Increased gap */
    background: #fff;
    padding: 25px; /* Increased padding */
    margin-bottom: 25px; /* Increased margin */
    border-radius: 8px; /* Slightly more rounded */
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#services-content .service-item {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    background: #ffffff;
    padding: 30px; /* Increased padding */
    margin-bottom: 30px;
    border-radius: 10px; /* More pronounced rounding */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-left: 5px solid transparent; /* Prepare for hover accent */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease;
}

#services-content .service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-left-color: #00509e; /* Accent color on hover */
}

.service-icon {
    width: 70px; /* Slightly smaller for a cleaner look */
    height: 70px;
    object-fit: contain;
    margin-top: 5px;
    border-radius: 50%; /* Make icons circular */
    padding: 10px; /* Padding inside the circle */
    background-color: #e9f5ff; /* Light blue background for icons */
    border: 1px solid #cce0ff; /* Subtle border for icons */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

#services-content .service-item h3 {
    margin-top: 0;
    color: #003366; /* Consistent with other h3 */
    font-size: 1.7rem; /* Slightly larger */
    margin-bottom: 10px; /* More space below title */
}

#services-content .service-item p {
    flex: 1;
    line-height: 1.7; /* Improved readability */
    color: #555; /* Slightly lighter than main body text for contrast */
}

/* Style for contact page banner image */
.contact-banner-image {
    width: 100%;
    max-height: 200px; /* Adjust as needed */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 25px;
}

/* General Page Title Styling (if not already present) */
#page-title {
    background: #004080; /* Consistent with hero */
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

#page-title h1 {
    font-size: 2.6rem; /* Increased size for page titles */
    margin:0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #fff; /* Ensure white color on page title background */
}

/* Content sections on inner pages */
#who-we-are-content .container,
#services-content .container,
#track-order-content .container,
#contact-content .container {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* New Hero Section Styles */
#hero-main {
    position: relative;
    width: 100%;
    height: 70vh; /* Adjust height as needed, viewport height is a good option */
    min-height: 500px; /* Minimum height */
    overflow: hidden;
    display: flex;
    align-items: center; /* Vertically center overlay container */
    justify-content: center; /* Horizontally center overlay container */
    color: #fff; /* Default text color for overlays, good for text directly on video */
}

.hero-background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1; /* Behind overlay content */
}

.hero-overlay-container {
    position: relative;
    z-index: 2; /* Above video */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute left and right content */
    width: 90%;
    max-width: 1200px; /* Max width of the content area */
    padding: 20px;
}

.hero-content-left {
    flex-basis: 55%; /* Adjust basis as needed */
    padding-right: 30px;
    /* Text color will be white by default from #hero-main */
}

.hero-accent-text {
    font-size: 1.1rem; /* Increased font size */
    font-weight: 700; /* Bolder text */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: #f0f0f0; /* Slightly off-white for better blend if needed, or keep #fff */
}

.accent-square {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #0779e4; /* Accent color from your palette */
    margin-right: 10px;
}

.hero-main-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem; /* Large, impactful heading */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    color: #fff; /* Explicitly white, helps if a parent has a different color */
}

/* Full-Width Scrolling Text Ticker Styles at the bottom of #hero-main */
.hero-scrolling-text-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background */
    padding: 12px 0; /* Adjusted padding */
    z-index: 3; /* Above video, potentially below main nav if it fixed-scrolls lower */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Optional subtle top border */
}

.hero-scrolling-text {
    display: inline-block;
    padding-left: 100%; /* Start off-screen to the right for scrolling effect */
    animation: scroll-left 25s linear infinite; /* Adjusted speed if needed */
    font-size: 1rem; /* Reset font size */
    color: #f0f0f0; /* Light text color */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.hero-scrolling-text span {
    margin-right: 25px; /* Adjusted spacing */
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%); /* Adjust based on content width if not duplicated */
    }
}

.hero-content-right {
    flex-basis: 40%; /* Adjust basis as needed */
}

.hero-info-box {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
    color: #333; /* Dark text for readability on white background */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.hero-info-box h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #003366; /* Dark blue text */
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.4;
}

.hero-info-box ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.hero-info-box ul li {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #333; /* Ensure list item text is dark */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.checkmark-icon {
    color: #00509e; /* Accent color for checkmarks */
    font-weight: bold;
    margin-right: 10px;
    font-size: 1.2rem;
}

.hero-info-box .cta-button {
    display: block; /* Make button take full width of its container in the box */
    width: 100%;
    text-align: center;
    padding: 15px 0; /* Adjust padding */
    font-size: 1.1rem;
    background-color: #00509e; /* Primary blue from your palette */
    color: #fff; /* Ensure button text is white */
    border: none; /* Remove default border */
}

.hero-info-box .cta-button:hover {
    background-color: #003366; /* Darker blue on hover */
}

/* Responsive (Basic Example) */
@media (max-width: 768px) {
    header .container, #stats .container, .solution-items, .footer-columns {
        flex-direction: column;
        text-align: center;
    }

    header nav ul {
        flex-direction: column;
        margin-top: 10px;
    }

    header nav ul li {
        margin: 5px 0;
    }

    .solution-item, .footer-column {
        margin-bottom: 20px;
    }

    #hero h1 { font-size: 2rem; }
    #hero h2 { font-size: 1.2rem; }
}