/* Root Variables */
:root {
    --primary-color: #C1272D; /* This is a placeholder color; replace with the exact color from the logo */
    --text-color: #333;
    --background-color: #fff;
}

/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Roboto', sans-serif;
}

body {
    line-height: 1.6;
    color: var(--text-color);
}

/* Header Styles */
header {
    background-color: var(--background-color);
    padding: 1rem 0;
}

.logo-container {
    text-align: center;
    padding-bottom: 1rem; /* space between logo and navigation */
}

.logo {
    width: 100px; /* adjust as needed */
    height: auto;
}

/* Navigation Styles */
nav {
    background-color: var(--primary-color); /* red color for navigation */
}

nav ul {
    list-style: none;
    overflow: hidden;
    text-align: center;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    color: var(--background-color);
    text-decoration: none;
    padding: 1rem;
    display: block;
}

/* Section Styles */
section {
    padding: 20px;
}

/* Heading Styles */
h1, h2, h3 {
    color: var(--primary-color);
}

/* Form Styles */
form {
    max-width: 500px;
    margin: 20px auto;
}

form input, form textarea {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
}

form button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: var(--primary-color);
    color: var(--background-color);
    cursor: pointer;
}

/* Footer Styles */
footer {
    background-color: var(--primary-color);
    color: var(--background-color);
    text-align: center;
    padding: 10px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    nav ul li {
        display: block;
    }

    nav ul li a {
        padding: 0.5rem;
    }

    .logo {
        width: 120px; /* smaller logo for mobile */
    }
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse; /* Collapses border to avoid double lines */
    margin: 20px 0; /* Adds spacing around the table */
}

th, td {
    border: 1px solid #ccc; /* Light grey border */
    text-align: left;
    padding: 8px; /* Adds padding inside each cell */
}

th {
    background-color: #f2f2f2; /* Light grey background for header cells */
}

tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping for rows */
}

tfoot td {
    font-weight: bold; /* Make total row bold */
    background-color: #f2f2f2; /* Consistent with header background */
}

.contact-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
}

.map, form {
    flex: 1; /* Allows each element to grow equally */
    margin: 10px; /* Adds some space around the elements */
    min-width: 300px; /* Ensures elements don't get too small on narrow screens */
}

/* You might need to adjust the iframe width and height explicitly */
iframe {
    width: 100%; /* Makes the iframe responsive */
    height: 200px; /* Adjust height as needed */
}


.contact-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.contact-details, .map {
    flex: 1;
    margin-right: 20px; /* Adjust space between contact details and map */
}

.form-container {
    flex: 1;
}


.image-container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 75%; /* Ensure image does not exceed container width */
}

/* Responsive image resizing */
@media screen and (max-width: 768px) {
    .image-container {
        width: 80%; /* Adjust width for smaller screens */
    }
}

/* Center the image on small screens */
@media screen and (max-width: 480px) {
    .image-container img {
        display: block;
        margin: 0 auto; /* Center the image horizontally */
    }
}

/* Case Studies */
#casestudies {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.case-study {
    width: calc(33.33% - 20px);
    margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
    .case-study {
        width: calc(50% - 20px);
    }
}

@media screen and (max-width: 480px) {
    .case-study {
        width: 100%;
    }
}