/* Basic Reset & Global Styles */
:root {
    --primary-color: #01122e; /* Dark Blue from Logo Background (SVG #01122e) */
    --secondary-color: #0095a9; /* Teal from Logo Bars (SVG #0095a9) */
    --accent-color: #ace7b6; /* Light Green from Logo Text (SVG #ace7b6) */
    --text-color: #333;
    --link-hover-color: #00788a; /* Darker Teal from Logo Glasses (SVG #00788a) */
    --background-color: #f4f4f4;
    --light-gray: #ecf0f1;
    --dark-gray: #7f8c8d;
    --font-family-body: 'Inter', sans-serif;
    --font-family-headings: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-family-body);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--primary-color); /* Cleaner than light gray for main background */
    -webkit-font-smoothing: antialiased; /* Smoother font rendering */
    -moz-osx-font-smoothing: grayscale; /* Smoother font rendering */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

h1, h2, h3 {
    font-family: var(--font-family-headings);
    margin-bottom: 0.75em;
    color: var(--primary-color); /* Default heading color for light backgrounds */
    font-weight: 700; /* Bolder headings */
    line-height: 1.3;
}

p {
    font-weight: 400;
    margin-bottom: 1em;
}

a {
    text-decoration: none;
    color: var(--secondary-color); /* Links can use secondary color for emphasis */
}

a:hover {
    color: var(--link-hover-color); 
}

/* Navigation */
header {
    background: var(--primary-color); /* Use dark blue for header background */
    padding: 1.5rem 0; /* Increased padding */
    border-bottom: 1px solid var(--secondary-color); /* Teal border for header */
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    max-width: 1200px; /* Slightly wider container */
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .logo a {
    /* Text logo styling removed as we're using SVG */
    display: flex; /* Helps with vertical alignment if needed */
    align-items: center;
}

nav .logo img#nav-logo {
    max-height: 35px; /* Slightly larger logo */
    width: auto;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

nav ul li {
    margin-left: 2rem; /* Increased spacing between nav items */
}

nav ul li a {
    color: var(--accent-color); /* Nav links in beige */
    font-weight: 500;
    font-size: 1.4rem;
    text-transform: uppercase;
    text-shadow: 0 0 5px var(--accent-color); */ /* Optional: subtle glow effect */
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: var(--secondary-color); /* Hover to teal */
}

/* Buttons */
.btn, .contact-btn {
    display: inline-block;
    background: var(--secondary-color); /* Buttons in teal */
    color: var(--accent-color); /* Button text in light green for better contrast */
    padding: 0.85rem 1.8rem; /* Slightly larger padding */
    border: none;
    border-radius: 6px; /* Slightly more rounded */
    cursor: pointer;
    font-size: 1.4rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: bold; /* Make button text slightly bolder */
}

.btn:hover, .contact-btn:hover {
    background: var(--link-hover-color); /* Darker teal on hover */
    color: #fff; /* White text on hover */
}
.btn:active, .contact-btn:active {
    transform: translateY(1px); /* Subtle press effect */
}

/* This is the outline button style */
.contact-btn { 
    background: transparent;
    color: var(--secondary-color); /* Teal border for outline button */
    border: 1px solid var(--secondary-color);
}

nav .contact-btn { /* Specific for nav contact button */
    padding: 0.6rem 1.2rem; /* Adjusted padding */
    font-size: 1.3rem;
    text-transform: uppercase; /* Consistent with other nav links */
    font-weight: 500; /* Consistent font weight with nav links */
}

nav .contact-btn:hover {
    background: var(--secondary-color);
    color: var(--accent-color); /* Consistent light green text on teal bg */
    /* color: var(--primary-color); /* Or dark blue text for high contrast */
}

/* Hero Section */
#hero {
    background: var(--primary-color); /* Use dark blue for hero background */
    padding: 6rem 2rem; /* More vertical padding */
    text-align: center;
    color: var(--accent-color); /* Default text in hero to light green */
    min-height: 40vh; /* Make hero taller */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#hero .hero-content h1 {
    font-size: 3.5rem; /* Larger heading */
    margin-bottom: 0.6em;
    font-weight: 700;
    color: #fff; /* White for hero heading for max contrast on dark blue */
    line-height: 1.2; /* Adjust line height for large headings */
}

#hero .hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2em; /* More space before buttons */
    color: var(--light-gray); /* Lighter text for readability on dark blue */
    font-weight: 400;
    max-width: 600px; /* Constrain width of tagline */
    margin-left: auto;
    margin-right: auto;
}

#hero .btn {
    margin: 0.75rem; /* More margin around hero buttons */
    padding: 1rem 2.2rem; /* Larger hero buttons */
    font-size: 1.1rem;
}

/* Hero Logo Styling */
#hero .hero-content img.hero-logo {
    max-width: 450px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 1.5rem; /* Space between logo and heading */
}

/* Styles for the Hero Section Tagline */
#hero .hero-content .hero-tagline {
    font-family: 'Space Grotesk', sans-serif; /* Using the more distinct 'Space Grotesk' font */
    font-size: 2.5rem;                       /* Significantly larger for impact */
    font-weight: 500;                        /* A good weight for Space Grotesk headlines */
    line-height: 1.4;                        /* Improves readability if the text wraps */
    letter-spacing: 0.04em;                  /* Adds a "splashy" and refined feel */
    text-align: center;                      /* Ensures it's centered within its container */
    margin: 1.5rem auto 2.5rem;              /* Adds space above and more space below before the buttons.
                                                'auto' on left/right helps with centering if it's narrower than its container. */
    max-width: 700px;                        /* Prevents the tagline from becoming too wide on large screens, aiding readability. */
    padding: 0 1rem;                         /* Adds a little horizontal space on smaller screens if text gets close to edges. */
    color: var(--light-gray);                             /* A common dark gray for text. 
                                                Feel free to change this to better match your site's color palette.
                                                For example, you might use a specific brand color or a darker/lighter shade. */
}


/* About Section */
.content-section { /* New class for shared content section styles */
    max-width: 1200px; /* Match header/footer content width */
    /* Ensure at least 2rem (32px assuming 1rem=16px) horizontal space outside this section */
    width: calc(100% - 4rem); /* 2rem space on left + 2rem space on right */
    margin-left: auto;
    margin-right: auto;
    margin-top: .5rem; /* Existing vertical margin */
    margin-bottom: .5rem; /* Existing vertical margin */
    padding: 4rem 2rem; /* Internal padding within the white box */
    text-align: center;
    /* background-color: #fff; Removed as per request */
    /* border-radius: 8px; Removed as it's not visible without background/border */
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.05); Removed as background is gone */
}

/* 
   The empty rule below is not strictly necessary. Sections like #about, #services 
   should have the 'content-section' class applied directly in their HTML if they 
   need this styling. #portfolio-gallery is intentionally styled differently.
*/
#about, #services, #portfolio-gallery {
    /* This rule is empty and can be removed or left as a placeholder if needed. */
    /* For #portfolio-gallery, specific styles are defined below. */
    /* For #about and #services, ensure class="content-section" is in HTML if that style is desired. */
}

/* Apply the shared styles to the new project container */
.project-container {
    max-width: 1200px; /* Or your preferred max width */
    margin: 40px auto; /* Center the container */
    padding: 0 20px; /* Add some padding */
}

.project-container h1 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--accent-color);
}

/* Portfolio Section Specifics (when not using .content-section) */
#portfolio-gallery {
    /* This section will take the body's dark blue background */
    max-width: 1100px; /* Adjust as needed */
    margin: 2rem auto; /* Controls space above/below the section */
    padding: 1rem auto; /* Reduced padding inside the section */
    text-align: center;
}

/* Make main titles in content sections more vibrant */
#about h2,
#services h2, /* This ID selector is for a potential page with id="services" */
.content-section h1, /* Apply to h1 in any content section */
.content-section h2 { /* Apply to h2 in any content section */
    font-size: 2.5rem; /* Larger section titles */
    color: var(--secondary-color); /* Teal for section titles */
    font-weight: 700;
    margin-bottom: 1.5rem; /* More space after title */
}

/* Ensure paragraphs directly inside .content-section are readable on dark background */
.content-section > p {
    color: var(--light-gray); /* Or var(--accent-color) if preferred */
}

/* Styles for Services Page and similar components */
.content-section .section-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2.5rem; /* Approx 40px */
    color: var(--dark-gray);
    max-width: 700px; /* Constrain width for readability */
    margin-left: auto; /* Center if max-width is applied */
    margin-right: auto; /* Center if max-width is applied */
}

.service-item {
    background-color: #f9f9f9; /* Light background for each item */
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    padding: 1.5rem; /* Approx 24px */
    margin-bottom: 1.5rem; /* Approx 24px */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: left; /* Override text-align: center from .content-section for item content */
}

.service-item h2 {
    font-size: 1.6rem; /* Custom size for service item titles */
    color: var(--primary-color); /* Dark blue for item titles */
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.service-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 0.75rem; /* Default margin for paragraphs within service items */
}
.service-item p:last-child {
    margin-bottom: 0; /* No margin for the last paragraph in a service item */
}

/* Specific styling for H1 in the portfolio gallery (dark background) */
#portfolio-gallery h1 {
    font-size: 2.5rem;          /* Consistent with other section titles */
    color: var(--accent-color); /* Light green for visibility on dark blue background */
    margin-bottom: 1.5rem;      /* Space below title */
}

/* Styling for list items in services (if uncommented) */
#services ul {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, .4fr));
    gap: 1.5rem;
    margin-top: 1rem; /* Reduced space above grid */
    margin-bottom: 1rem; /* Reduced space below grid */
    /* Center the grid within the section */
    justify-content: center;
}

.project-card {
    background: #fff;
    border: 1px solid var(--light-gray);
    border-radius: 10px; /* More rounded cards */
    padding: 2rem; /* More padding in cards */
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Softer, more modern shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* Enhanced shadow on hover */
}

.project-card img {
    width: 100%;
    height: auto;
    border-radius: 6px; /* Match card rounding */
    margin-bottom: 1rem;
}

.project-card h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color); /* Dark blue for card titles */
    font-size: 1.4rem;
    font-weight: 500; /* Slightly less bold than main section titles */
}

/* Center the button within the project card */
.project-card .btn {
    display: block; /* Make the button a block element */
    width: fit-content; /* Make the block element only as wide as its content */
    margin: 1.5rem auto 0 auto; /* Center horizontally and add space above */
}

/* Specific adjustment for project container on mobile if needed */
@media (max-width: 768px) {
    .project-container { /* Inherits mobile padding from .content-section */ }
}
/* Footer */

/* Specific styles for the project description text */
.project-description h2 {
    color: var(--accent-color); /* Use light green for the heading */
    /* Keep font size and weight as inherited or defined by .content-section h2 */
}

.project-description p {
    color: var(--accent-color); /* Use light green for the paragraph text */
    /* Keep font size and style as inherited */
}

.project-description p a {
    color: var(--secondary-color); /* Keep links in teal for contrast against light green text */
}

footer {
    text-align: center;
    padding: 2rem;
    background: #000b1c; /* Even darker blue for footer, almost black */
    color: var(--accent-color); /* Footer text in beige */
    margin-top: auto; /* Pushes footer to bottom */
}

/* Contact Modal (Popup) */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1001; /* Above header */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Dim background */
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 30px; /* More padding in modal */
    border: none;
    width: 80%;
    max-width: 500px;
    border-radius: 10px; /* Consistent rounding */
    position: relative;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#contact-form label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--light-gray);
    border-radius: 4px;
}

#contact-form button {
    width: 100%;
    margin-top: 10px;
    /* Uses .btn styles, so background and color are already set */
    /* background: var(--secondary-color); */ /* Form button in teal */
    /* color: var(--accent-color); */ /* Form button text in light green */
}

#contact-form button:hover {
    /* Uses .btn:hover styles */
}

/* Styling for the Taque Fullscreen Button */
#taque-fullscreen-btn {
    margin-top: 10px; /* Add some space above the button */
    /* It will inherit .btn styles, you can add specific overrides here if needed */
}

/* Responsive Design */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }
    nav ul {
        margin-top: 1rem;
        flex-direction: column;
        width: 100%;
    }
    nav ul li {
        margin: 0.5rem 0;
        text-align: center;
    }
    #hero .hero-content h1 {
        font-size: 2.5rem; /* Adjusted for mobile */
    }
    #hero .hero-content p {
        font-size: 1.1rem;
    }
    #hero .hero-content img.hero-logo {
        width: 70%; /* Shrink logo relative to container */
        max-width: 320px; /* Cap the size on tablets/larger mobiles */
    }
    #hero .hero-content .hero-tagline {
        font-size: 1.8rem; /* Reduce tagline font size */
    }
    /* Adjust padding for sections using .content-section on mobile */
    .content-section, #about, #services { /* Assuming #about and #services use .content-section or similar padding needs */
        padding: 2.5rem 1.5rem; /* Adjust padding for mobile */
    }
    /* Adjust section titles for mobile for .content-section and similar */
    #about h2, #services h2, .content-section h1, .content-section h2 {
        font-size: 2rem; /* Adjust section titles for mobile */
    }

    .project-container {
        margin: 20px auto;
    }

    /* Responsive adjustments for portfolio section */
    #portfolio-gallery {
        padding: 1rem 1rem; /* Further reduce padding on mobile */
        margin: 1.5rem auto; /* Adjust margin on mobile */
    }
    #portfolio-gallery h1 {
        font-size: 2rem; /* Adjust portfolio title for mobile */
        margin-bottom: 1rem; /* Adjust margin for portfolio title on mobile */
    }
    .portfolio-grid {
        gap: 1rem; /* Tighter gap on mobile */
    }
}
/* Additional adjustments for very small screens */
@media (max-width: 480px) {
    #hero .hero-content img.hero-logo {
        width: 80%; /* Allow slightly larger percentage of very small screen */
        max-width: 280px; /* Further cap the size */
    }
    #hero .hero-content .hero-tagline {
        font-size: 1.4rem; /* Further reduce tagline font size */
    }
}