:root {
    --primary-color: #008080; /* Teal */
    --secondary-color: #333333; /* Dark gray */
    --tertiary-color: #ffffff; /* White */
    --highlight-color: #00b0d7; /* Light blue */
    --neutral-color: #f0f0f0; /* Light gray */
}

/* General Styles */
body {
    background-color: var(--tertiary-color); /* White background */
    color: var(--secondary-color); /* Dark gray text */
}

/* Navbar */
.logo {
    height: 40px; /* Adjust height as needed */
    width: auto;  /* Ensure the aspect ratio is preserved */
}

.navbar {
    background-color: var(--secondary-color); /* Dark gray background */
}

.navbar-light .navbar-brand,
.navbar-light .nav-link {
    color: var(--tertiary-color) !important; /* White text */
}

.navbar-light .nav-link:hover {
    color: var(--highlight-color) !important; /* Light blue on hover */
}

.navbar-toggler-icon {
    color: var(--tertiary-color); /* White toggler icon for small screens */
}

/* Hero Section */
.jumbotron {
    background-color: var(--tertiary-color); /* White background */
    color: var(--secondary-color); /* Dark gray text */
}

.jumbotron h1 {
    color: var(--secondary-color); /* Dark gray */
}

.jumbotron .btn-primary {
    background-color: var(--primary-color); /* Teal button background */
    color: var(--tertiary-color); /* White text */
    border: none;
}

.jumbotron .btn-primary:hover {
    background-color: #006666; /* Darker teal on hover */
}

.jumbotron .btn-secondary {
    background-color: var(--secondary-color); /* Dark gray background */
    color: var(--tertiary-color); /* White text */
}

.jumbotron .btn-secondary:hover {
    background-color: #1f1f1f; /* Darker gray on hover */
}

/* Cards */
.card {
    background-color: var(--tertiary-color); /* White */
    border: 1px solid var(--neutral-color); /* Light gray border */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-top: 20px;
}

.card h3, .card h5 {
    color: var(--secondary-color); /* Dark gray for titles */
}

.card .icon i {
    color: var(--primary-color); /* Teal for icons */
}

.card-footer .btn {
    background-color: var(--tertiary-color); /* White button */
    color: var(--primary-color); /* Teal text */
}

.card-footer .btn:hover {
    background-color: var(--highlight-color); /* Light blue on hover */
    color: var(--tertiary-color); /* White text */
}

/* Call to Action */
.call-to-action {
    background-color: var(--primary-color) !important; /* Teal background */
    color: var(--tertiary-color); /* White text */
}

.call-to-action h2, .call-to-action p {
    color: var(--tertiary-color); /* White text */
}

.call-to-action .btn {
    background-color: var(--tertiary-color); /* White button */
    color: var(--primary-color); /* Teal text */
    border: none;
}

.call-to-action .btn:hover {
    background-color: var(--highlight-color); /* Light blue on hover */
    color: var(--tertiary-color); /* White text */
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .navbar {
        background-color: var(--primary-color); /* Change to teal on smaller screens */
    }
    
    .navbar-light .navbar-brand,
    .navbar-light .nav-link {
        color: var(--tertiary-color) !important; /* White text */
    }
    
    .navbar-light .nav-link:hover {
        color: var(--highlight-color) !important; /* Light blue on hover */
    }
}

/* Accessibility: Ensure adequate contrast */
@media (prefers-contrast: high) {
    body {
        color: #000000; /* Ensure dark text for better readability */
    }
    
    .navbar-light .nav-link:hover {
        color: #ffffff; /* High contrast text for hover */
    }
}

.parallax {
        background-image: url('/static/images/veroa-tech-hero.webp');
        height: 400px;
        background-attachment: scroll;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
}

/* Add fade-in animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Button hover with slight scale effect */
.btn {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* How We Work section background image */
.how-we-work {
    background-image: url('/static/images/veroa-tech-progress.png');
    background-size: cover; /* Ensure the image covers the whole section */
    background-position: top; /* Center the image */
    background-repeat: no-repeat; /* Avoid repeating the image */
    color: #ffffff; /* White text for readability */
}

.how-we-work-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Optional dark overlay for better text contrast */
    padding: 50px;
}

.how-we-work h2,
.how-we-work h5,
.how-we-work p {
    color: #ffffff; /* Ensure the text is white */
}

.network-wired-icon {
    width: 3em; /* Matches fa-3x size */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align similar to Font Awesome */
    fill: currentColor; /* Ensure the SVG adopts the color from CSS */
    color: var(--primary-color); /* Use the primary color */
    display: inline-block; /* Keep similar inline behavior to Font Awesome */
    margin-bottom: 10px; /* Consistent spacing with other icons */
}

/* Footer Styles */
footer {
    width: 100%; /* Ensure the footer spans the entire width */
    background-color: #343a40; /* Matches the dark background */
    color: #ffffff; /* White text */
}

footer .container {
    max-width: 1140px; /* Matches the default Bootstrap container width */
    margin: auto; /* Center the container */
}

/* Flexbox Layout for Footer Content */
footer .row {
    display: flex;
    flex-wrap: wrap; /* Ensure content wraps on smaller screens */
    justify-content: space-between; /* Space out items evenly */
    gap: 20px; /* Add spacing between columns */
}

/* Quick Links, Contact Info, and Follow Us Sections */
footer .col-md-3 {
    flex: 1 1 calc(33.333% - 20px); /* Each section takes up 1/3 of the width */
    min-width: 200px; /* Prevent sections from becoming too narrow */
}

footer h5 {
    font-size: 1.2em;
    margin-bottom: 15px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 10px;
}

footer ul li a {
    color: #ffffff; /* White text for links */
    text-decoration: none;
}

footer ul li a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Address Section */
footer .footer-address {
    display: flex;
    align-items: flex-start; /* Align the text with the top of the icon */
    gap: 10px; /* Space between the icon and text */
}

footer .footer-address i {
    font-size: 1.2em; /* Adjust icon size */
    margin: 0; /* Reset global margins */
    margin-top: 3px; /* Fine-tune vertical alignment */
}

footer .footer-address .address-text {
    line-height: 1.5; /* Ensure proper spacing between lines in the text */
}

/* Follow Us Section */
footer ul li i {
    margin-right: 8px; /* Add spacing between icon and text */
}

/* Certification Images Grid */
.footer-certification {
    max-width: 70px; /* Ensures consistent size for images */
    height: auto; /* Maintain aspect ratio */
    margin: 5px; /* Add spacing around each image */
}

/* Responsive Adjustments for Footer Certifications */
@media (max-width: 768px) {
    footer .col-md-3 {
        flex: 1 1 100%; /* Ensure full-width columns */
        margin-bottom: 20px; /* Maintain spacing */
    }

    footer .d-flex.flex-wrap {
        justify-content: center; /* Center images */
    }

    .footer-certification {
        max-width: 50px; /* Reduce size of images on smaller screens */
        margin: 3px; /* Adjust spacing for smaller devices */
    }
}