/* Global Styles */
:root {
    --primary-color: #0e5f76;
    --secondary-color: #17a2b8;
    --accent-color: #fca311;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --white: #ffffff;
    --max-width: 1200px;
    --transition: all 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-light);
}

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

img {
    max-width: 100%;
    display: block;
}

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

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
}

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

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

.btn-secondary {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    margin-left: 15px;
}

.btn-secondary:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

/* Navbar */
.navbar {
    background-color: var(--white);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 10px 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    /* Ensure it spans full width if needed, or stick to --max-width but with space-between */
    padding: 0;
    /* Align with global container padding (20px) */
    /* Add more padding on sides for "extreme" look */
}

/* Ensure container max-width doesn't constrain it too much if "extreme" edges are desired. 
   If user wants it really wide, we can override .container locally or globally. 
   For now, keeping .container but ensuring space-between pushes them apart. */
.navbar .container {
    max-width: 100%;
    padding: 0 40px;
    /* Wider nav container */
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 40px;
    /* Smaller icon size */
    width: auto;
}

.logo span {
    color: var(--secondary-color);
    /* Or keep it same color if desired, assuming secondary for contrast based on earlier design */
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
    /* More space between links */
}

.nav-links a:not(.btn-primary) {
    font-weight: 500;
    color: var(--text-dark);
    position: relative;
}

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

.nav-links a:not(.btn-primary):hover::after {
    width: 100%;
}

.hamburger {
    display: none;
    font-size: 1.5rem;
    color: var(--text-dark);
    cursor: pointer;
}

/* Hero Section */
.hero {
    height: 90vh;
    /* Slightly smaller than full viewport for better fold visibility */
    min-height: 600px;
    background: url('hero-bg.png') no-repeat center center/cover;
    background-image: linear-gradient(rgba(14, 95, 118, 0.7), rgba(14, 95, 118, 0.5)), url('hero-bg.png');
    position: relative;
    display: flex;
    align-items: center;
    color: var(--white);
    text-align: center;
}

.hero-content {
    width: 100%;
    max-width: 800px;
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Services Section */
.section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

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

.card-image {
    height: 250px;
    overflow: hidden;
    background-color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.brace-img {
    object-position: top center;
}

.compression-img {
    object-position: center 75%;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--white);
}

.gradient-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-2 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    color: #fff;
}

.card-content {
    padding: 30px;
}

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

.card-content p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* About Section */
.about {
    background-color: #fff;
}

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

.about-text h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.features-list {
    list-style: none;
}

.features-list li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
}

.features-list li i {
    color: var(--secondary-color);
    font-size: 1.2rem;
}

.about-image img {
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Process Section */
.process {
    background-color: #f0f4f8;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    text-align: center;
}

.process-step {
    padding: 30px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

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

.step-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
    height: 80px;
    width: 80px;
    background: rgba(23, 162, 184, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.process-step h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

/* About Section Enhancements */
.section-desc {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
}

/* Contact Section & Form */
.contact {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 80px 0;
}

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

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    /* More space for form */
    gap: 50px;
    background-color: var(--white);
    /* White card for contact area */
    border-radius: 30px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.contact-info {
    background-color: rgba(14, 95, 118, 0.05);
    /* Very light tint */
    padding: 50px;
    color: var(--text-dark);
}

.contact-info h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.icon-box {
    width: 50px;
    height: 50px;
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.icon-box i {
    font-size: 1.2rem;
    color: var(--primary-color);
}

.info-item span {
    display: block;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item a,
.info-item p {
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 500;
}

.info-item p {
    line-height: 1.4;
}

.contact-form-container {
    padding: 50px;
    color: var(--text-dark);
}

.contact-form-container h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 30px;
}

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

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

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

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(14, 95, 118, 0.1);
}

.full-width {
    width: 100%;
    text-align: center;
}



/* Animations */
/* Improved flow-in for services */
.service-card {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.service-card.show {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger these more explicitly in CSS if needed, or rely on JS delays */
.process-step {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.process-step.show {
    opacity: 1;
    transform: translateY(0);
}

/* Footer */
footer {
    background-color: #083c4b;
    color: rgba(255, 255, 255, 0.6);
    padding: 30px 0;
    text-align: center;
    font-size: 0.9rem;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.hidden-modal {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background-color: var(--white);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(1);
    transition: transform 0.3s ease;
}

.hidden-modal .modal-content {
    transform: scale(0.9);
}

.modal-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

/* Success State */
.modal-success .modal-icon {
    color: #4ade80;
    /* Green */
}

/* Error State */
.modal-error .modal-icon {
    color: #f87171;
    /* Red */
}

.modal-content h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: var(--text-dark);
}

.modal-content p {
    color: var(--text-light);
    margin-bottom: 25px;
}

/* Responsive */
@media (max-width: 968px) {
    .hero h1 {
        font-size: 3rem;
    }

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

    .card-image {
        height: 200px;
    }
}

@media (max-width: 768px) {

    /* Hide About Section on Mobile */
    .about {
        display: none;
    }

    .navbar .container {
        padding: 0 20px;
        /* Reduce container padding for mobile */
    }

    .nav-links {
        display: none;
        /* Mobile menu needed */
        position: fixed;
        /* Fixed to sit on top of everything */
        top: 60px;
        /* Adjusted down slightly as nav is smaller now */
        left: 0;
        width: 100%;
        background-color: var(--white);
        flex-direction: column;
        padding: 20px 0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 2000;
    }

    .logo-container {
        padding-left: 0;
    }

    .nav-right {
        padding-right: 0;
        /* Remove extra padding to push hamburger to right */
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .hero-content {
        padding: 0 20px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    /* Fix Contact Alignment on Mobile */
    .contact-wrapper {
        padding: 0;
        /* Reset wrapper padding if any, relies on internal containers */
        display: flex;
        /* Use flex column to stack nicely */
        flex-direction: column;
    }

    .contact-info,
    .contact-form-container {
        padding: 30px 20px;
        /* Reduced padding for mobile screens */
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px;
        /* Prevent zoom on iOS */
    }
}

/* Desktop Only Overrides to ensure regression prevention */
@media (min-width: 769px) {
    .nav-links {
        display: flex;
        position: static;
        flex-direction: row;
        width: auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .hamburger {
        display: none;
    }

    .navbar .container {
        padding: 0 40px;
    }

    .nav-right {
        padding-right: 0;
        /* Ensure no weird padding if it was set globally */
    }
}