:root {
    --primary-color: #1C4D8D;
    --primary-dark: #10305a;
    --secondary-color: #f4f4f4;
    --text-dark: #333333;
    --text-light: #ffffff;
    --text-gray: #666666;
    --border-radius: 8px;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition-speed: 0.3s;
    --container-width: 1200px;
}

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

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-speed);
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 3.5rem;
    line-height: 1.1;
}

.highlight {
    color: var(--primary-color);
    /* Fallback or specific override */
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    /* Prevent text wrapping */
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: 2px solid var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-outline:hover {
    background-color: white;
    color: var(--text-dark);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.1rem;
}

/* Header Buttons Specific Style */
.nav-wrapper .btn {
    padding: 8px 20px;
    font-size: 0.9rem;
}

/* Header */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.nav-wrapper {
    display: flex;
    justify-content: flex-start;
    /* Changed from space-between */
    align-items: center;
}

.logo {
    margin-right: auto;
    padding-right: 130px;
    /* Added explicit spacing */
}

/* ... logo text styles remain ... */
.logo-text {
    font-family: var(--font-heading);
    color: var(--primary-color);
    letter-spacing: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    text-decoration: none;
}

.logo-text:hover {
    opacity: 0.9;
    color: var(--primary-color);
}

.logo-main {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-sub {
    font-size: 0.85rem;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    margin-top: 4px;
    margin-left: 2px;
}

.pipe {
    font-weight: 300;
    color: var(--primary-color);
    font-size: 2.6rem;
    opacity: 0.8;
}

nav {
    margin-right: 30px;
    /* Increased gap before buttons */
}

.nav-links {
    display: flex;
    gap: 25px;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-dark);
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s;
}

/* Hover Effect - Underline slide */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Active State */
.nav-links a.active {
    color: var(--primary-color);
    font-weight: 700;
}

.nav-links a.active::after {
    width: 100%;
}

/* Hero Section */
#hero {
    height: 100vh;
    background-image: url('../img/hero_bg.png');
    /* Will generate this */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-content h1 .highlight {
    color: #4da6ff;
    /* Lighter blue for dark bg */
}

.hero-btns {
    margin-top: 2rem;
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* Common Section Styles */
.section-padding {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--secondary-color);
}

.section-header {
    margin-bottom: 50px;
    max-width: 800px;
    /* Removed auto margins for left alignment */
}

/* Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

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

/* About Section */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 1.5rem;
}

.about-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

.card:nth-child(3) {
    grid-column: span 2;
    max-width: 50%;
    /* Make the 3rd card centered */
    margin: 0 auto;
}

.card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    object-fit: contain;
}

.card h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.card p {
    font-size: 0.9rem;
    color: var(--text-gray);
}

/* Capabilities Section */
.capabilities-tabs {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.tab-buttons {
    display: flex;
    background: #e9ecef;
}

.tab-btn {
    flex: 1;
    padding: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-gray);
    transition: 0.3s;
}

.tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--primary-color);
}

.tab-btn.active {
    background: white;
    color: var(--primary-color);
    border-top: 3px solid var(--primary-color);
}

.tab-content {
    display: none;
    padding: 50px;
    animation: fadeIn 0.5s;
}

.tab-content.active {
    display: block;
}

.tab-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Placeholder for now, can be split 1fr 1fr if image added */
    gap: 40px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-cards {
        grid-template-columns: 1fr;
    }

    .card:nth-child(3) {
        grid-column: span 1;
        max-width: 100%;
    }

    .nav-links {
        display: none;
    }
}

.z-pattern {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}

.z-pattern.reverse {
    flex-direction: row-reverse;
}

.z-text {
    flex: 1;
}

.z-img {
    flex: 1;
    height: 300px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: none;
}

.z-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.z-img:hover img {
    transform: scale(1.05);
}

/* Markets Carousel */
.carousel-container {
    position: relative;
    max-width: 100%;
}

.carousel-viewport {
    overflow: hidden;
    width: 100%;
    /* Add padding to show box-shadow of cards without clipping if needed, 
       but typically internal padding in container helps */
    padding: 20px 0;
}

.carousel-track {
    display: flex;
    gap: 30px;
    width: fit-content;
    /* Transition will be handled by JS or here */
}

/* Override animate-on-scroll for the container instead of individual cards to avoid issues */
.carousel-container.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.carousel-container.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.carousel-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: -25px;
    /* Pull slightly outside or align to edge */
}

.next-btn {
    right: -25px;
}

@media (max-width: 768px) {
    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }
}

.market-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    /* Carousel Item Sizing: 3 items per view with 30px gap */
    /* calc((100% - (2 * 30px)) / 3) is tricky in a flex container that scrolls.
       Instead, we will set the width via JS or hardcode a width that allows 3 items.
       Let's assume the container is 100% of parent.
       A flex-basis strategy is better. */
    flex: 0 0 320px;
    /* Fallback */
    min-width: 300px;
    /* Prevent squishing */
}

.market-card:hover {
    transform: translateY(-5px);
}

.market-img {
    height: 200px;
    overflow: hidden;
    background: none;
}

.market-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.market-card:hover .market-img img {
    transform: scale(1.05);
}

.market-info {
    padding: 20px;
}

/* Tab Images */
.tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.tab-img-placeholder {
    height: 300px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: none;
}

.tab-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.market-info h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
}

/* Plant Stats */
.bg-dark {
    background-color: var(--primary-dark);
}

.text-white {
    color: white;
}

.text-white h2,
.text-white p {
    color: white;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.stat-item .counter {
    font-size: 3rem;
    font-weight: 800;
    color: #4da6ff;
}

.stat-item p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Contact Section */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-dark);
}

.required {
    color: red;
    margin-left: 2px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 1rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.map-container {
    width: 100%;
    height: 300px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    width: 100%;
    height: 100%;
}

.cert-badge {
    background: var(--secondary-color);
    padding: 15px;
    text-align: center;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-color);
}

#form-response {
    padding: 10px;
    border-radius: 4px;
    background: #f9f9f9;
    border: 1px solid #eee;
    font-weight: 500;
}

/* Quote Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    justify-content: center;
    align-items: flex-start;
    /* Start from top to allow scrolling */
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(5px);
}

.modal-container {
    background: white;
    width: 100%;
    max-width: 800px;
    padding: 40px;
    border-radius: var(--border-radius);
    position: relative;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    color: #888;
}

.close-modal:hover {
    color: var(--text-dark);
}

.modal-header h2 {
    color: var(--primary-color);
}

.modal-header p {
    font-size: 0.95rem;
    color: var(--text-gray);
    margin-bottom: 15px;
}

.file-instruction-box {
    background: #f0f7ff;
    padding: 15px;
    border-left: 4px solid var(--primary-color);
    margin: 20px 0;
    font-size: 0.9rem;
}

.small-text {
    font-size: 0.85rem;
    margin-top: 5px;
    color: #666;
}

.form-section-title {
    margin: 30px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    font-size: 1.2rem;
    color: var(--primary-dark);
}

.form-row {
    display: flex;
    gap: 20px;
}

.half {
    flex: 1;
}

.quote-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Ensure placeholder image style is preserved or moved if needed, 
   but just appending modal styles here */
.placeholder-img {
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 1.2rem;
    font-weight: 600;
    border: 2px dashed #ccc;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .modal-container {
        padding: 20px;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-branding {
        align-items: center;
    }
}

/* Materials Grid */
.materials-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Force 5 columns on one row */
    gap: 15px;
    /* Reduced gap to save space */
    margin-top: 30px;
    /* Reduced top margin */
}

.material-card {
    background: white;
    padding: 15px;
    /* Reduced to fit 5 columns */
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    border-top: 3px solid var(--primary-color);
}

.material-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.material-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
}

.material-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.material-card h3 {
    margin-bottom: 15px;
    color: var(--primary-dark);
    font-size: 1.1rem;
}

.material-list {
    list-style: none;
    padding: 0;
    text-align: left;
    display: inline-block;
    /* Centers the list block itself but left aligns text */
}

.material-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
    color: var(--text-dark);
    font-weight: 500;
}

.material-list li::before {
    content: '✓';
    /* Checkmark */
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Quality & Corporate Responsibility */
.quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 40px;
    align-items: start;
}

.quality-col h3 {
    font-size: 1.8rem;
    color: #4da6ff;
    /* Changed to match Facility counters color */
    margin-bottom: 0;
}

.quality-header-with-icon {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.section-icon-small {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.quality-list {
    list-style: none;
    padding: 0;
}

.quality-list li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.quality-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233498db' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.value-item {
    margin-bottom: 25px;
}

.value-item h4 {
    color: white;
    /* Or primary color if preferred */
    font-size: 1.2rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.value-item p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
}

.mb-20 {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .quality-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Responsive Materials Grid */
@media (max-width: 1024px) {
    .materials-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols on tablet */
    }
}

@media (max-width: 600px) {
    .materials-grid {
        grid-template-columns: 1fr;
        /* 1 col on mobile */
    }
}

/* Footer */
footer {
    background: #111;
    color: #aaa;
    padding: 40px 0;
}

.footer-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
}

.footer-branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Strictly align left */
    gap: 0;
    /* Remove gap to keep them close, title has margin-top */
}

.footer-logo-box {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: white;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    /* Ensure no padding shifting it right */
}

.footer-logo-box .pipe {
    color: white;
    opacity: 0.6;
}

.footer-company-name {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    /* Significantly Increased size */
    font-weight: 700;
    color: white;
    margin-top: 5px;
    line-height: 1.1;
    /* Tighter line height for large text */
}



.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a:hover {
    color: white;
}

/* Responsive Adaptation for Navbar (Tablet/Laptop) */
@media (max-width: 1350px) {
    .nav-wrapper {
        padding: 0 20px !important;
        /* Override inline style */
    }

    .nav-links {
        gap: 15px;
        /* Tighter gap */
    }

    nav {
        margin-right: 20px;
        /* Tighter gap to buttons */
    }

    .nav-links a {
        font-size: 0.9rem;
        /* Smaller font */
    }

    .btn {
        padding: 10px 15px;
        /* Smaller buttons */
        font-size: 0.9rem;
    }

    .logo-text {
        font-size: 1.5rem;
        /* Smaller logo */
    }
}

@media (max-width: 768px) {

    .z-pattern,
    .z-pattern.reverse {
        flex-direction: column;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    /* Ensure buttons stack or fit on mobile if nav links are hidden */
    .nav-wrapper {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .logo {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Show buttons on mobile since we hid the menu */
    .btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}

/* ISO Badge Positioning */
.iso-badge {
    position: absolute;
    top: 0;
    right: 20px;
    width: 120px;
    /* Optimal size visibility */
    height: auto;
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s;
}

.iso-badge:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .iso-badge {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: 0 auto 20px;
        width: 100px;
    }
}



/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.modal-container {
    background: white;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--border-radius);
    padding: 40px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-out;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-gray);
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}

.close-modal:hover {
    color: var(--primary-color);
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.modal-header h2 {
    color: var(--primary-color);
    font-size: 2rem;
}

.modal-header p {
    color: var(--text-gray);
    margin-top: 10px;
    font-size: 0.95rem;
}

.file-instruction-box {
    background: #eef7ff;
    padding: 15px;
    border-radius: var(--border-radius);
    margin-top: 20px;
    border: 1px solid var(--primary-color);
    font-size: 0.9rem;
}

.file-instruction-box a {
    color: var(--primary-color);
    text-decoration: underline;
}

.small-text {
    font-size: 0.8rem;
    margin-top: 5px;
    color: #666;
}

.quote-form .form-section-title {
    font-size: 1.2rem;
    border-left: 4px solid var(--primary-color);
    padding-left: 10px;
    margin: 30px 0 20px;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 0 4px 4px 0;
}

.quote-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.quote-form .form-group.half {
    flex: 1;
}

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

.quote-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    resize: vertical;
}

.quote-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
}

@media (max-width: 768px) {
    .quote-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .modal-container {
        padding: 20px;
    }
}

/* Header Logo Image */
.header-logo {
    height: 50px;
    width: auto;
    display: block;
    background-color: #ffffff;
    padding: 5px 10px;
    border-radius: 4px;
}

/* Custom G Letter Styles */
.g-letter {
    height: 0.8em;
    width: auto;
    vertical-align: baseline;
    display: inline-block;
    position: relative;
    top: 2px;
    /* Fine-tune alignment */
}

.g-letter-small {
    height: 0.8em;
    width: auto;
    vertical-align: baseline;
    display: inline-block;
    position: relative;
    top: 1px;
    margin-right: 1px;
}

/* Product Carousel Specifics */
.product-card {
    background: transparent;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: none;
    /* Override default card border if any */
}

.product-img {
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #f0f0f0;
    position: relative;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.product-card:hover .product-img img {
    transform: scale(1.05);
}

.product-info {
    padding: 15px 10px;
    background: white;
    text-align: center;
}

.product-info h3 {
    font-size: 1rem;
    margin-bottom: 0;
    color: var(--primary-dark);
    font-weight: 600;
}

/* Mobile Navigation Styles */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 2001;
    /* Above mobile menu overlay */
    position: relative;
    /* Ensure it's not hidden by other elements */
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Mobile Menu Active State (Hamburger Animation) */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 992px) {

    /* Tablet and Mobile */
    .nav-wrapper {
        justify-content: space-between;
    }

    .hamburger-menu {
        display: flex;
        margin-right: 20px;
        order: 2;
        /* Place after logo */
    }

    .logo {
        margin-right: auto;
        padding-right: 0;
        order: 1;
    }

    /* Move Get a Quote button to be visible or hidden depending on preference. 
       Usually on mobile we might want it in the menu or kept visible. 
       Let's keep it visible but maybe smaller or just icon if space is tight.
       For now, let's keep it. */
    .nav-wrapper .btn {
        display: none;
        /* Hide button in header on mobile, put in menu if needed, or keep. 
                        Let's hide it for now to save space and maybe add to menu? 
                        The user asked for responsive. 
                        Actually, let's keep it but make it small or hide on very small. */
        order: 3;
    }

    #nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden by default */
        width: 100%;
        /* Fullscreen on mobile */
        height: 100vh;
        background-color: white;
        z-index: 2000;
        transition: right 0.4s ease-in-out;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 60px;
        /* Space for close button if we had one separate */
    }

    #nav-menu.active {
        right: 0;
    }

    #nav-menu .nav-links {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        width: 100%;
    }

    .nav-links a {
        font-size: 1.5rem;
        font-weight: 600;
        opacity: 0;
        /* Animate in */
        animation: slideIn 0.5s forwards;
        animation-delay: 0.2s;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Ensure Logo text scales down on very small screens */
@media (max-width: 480px) {
    .logo-main {
        font-size: 2rem;
    }

    .pipe {
        font-size: 2rem;
    }

    .logo-sub {
        font-size: 0.75rem;
    }

    .nav-wrapper {
        padding: 0 15px !important;
    }
}