/* --- GLOBAL STYLES --- */
body, h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif;
}
body, html {
    height: 100%;
    line-height: 1.8;
}
.w3-button {
    text-transform: uppercase;
}

/* --- NAVBAR & LOGO --- */
#myNavbar {
    background-color: #1a2b48; /* Dark Navy Blue background */
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
}
.navbar-logo {
    height: 35px; /* Adjust logo height as needed */
    vertical-align: middle;
}
#myNavbar .w3-bar-item {
    color: #ffffff; /* White text for navbar links */
    padding: 16px;
}
#myNavbar .w3-button:hover {
    background-color: #f1f1f1 !important; /* Light Gray hover background */
    color: #1a2b48 !important; /* Dark Navy text on hover for contrast */
}

/* --- HEADER --- */
.bg-header {
    background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
    min-height: 100%;
    background-position: center;
    background-size: cover;
}
.bg-header .w3-button {
    background-color: #1a2b48; /* Dark Navy Blue button */
    color: #ffffff;
    opacity: 0.9;
}
.bg-header .w3-button:hover {
    opacity: 1;
}

/* --- COMPANY INFO SECTION (NEW) --- */
.company-logo-large {
    width: 333px;
    height: 300px;
    border-radius: 10%; /* Makes the logo circular */
    /*object-fit: cover;  Ensures the image fits well */
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
}

/* --- ABOUT SECTION --- */
#about {
    background-color: #1a2b48; /* Dark Navy Blue background */
    color: #f1f1f1; /* Light gray/white text for readability */
}
#about h3, #about p {
    color: #ffffff; /* Ensure all text is white */
}
#about i {
    color: #ffffff; /* White icons */
}

/* --- CONTACT SECTION --- */
#contact i {
    color: #1a2b48; /* Dark Navy Blue icons */
}

/* --- PRODUCT CARDS (EQUAL HEIGHT) --- */
#products {
    background-color: #f1f1f1; /* Light gray background for contrast */
}
#products .w3-row-padding {
    display: flex;
    flex-wrap: wrap;
}
#products .w3-card {
   height: 100%;
   background-color: #ffffff;
}

/* --- FOOTER & MOBILE SIDEBAR --- */
footer, #mySidebar {
    background-color: #1a2b48; /* Dark Navy Blue footer and sidebar */
    color: #ffffff;
}
footer p, footer a, #mySidebar a {
    color: #ffffff;
}
footer .w3-button {
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #1a2b48 !important; /* Dark navy text on button */
}