/* General Styles */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
    color: #293e4c;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, p, a, button, input, textarea {
    font-family: 'Poppins', sans-serif;
    font-weight: lighter;
}

h2 {
    font-size: 2.5em;
}

h1 {
    font-size: 3em;
}

/* Skip to content link for accessibility */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #488C9A;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #293E4C;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000;
}

.header_logo img {
    height: 120px;
}


nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}


nav li {
    margin: 0 20px;
}


nav a {
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 1.4em;
}

nav a:hover {
    color: #fbb040;
}

.portal-login {
    background-color: #488C9A;
    color: white;
    font-weight: bold;
    font-size: 1.4em;
}

.portal-login:hover {
    color: white; /* Keep white color on hover */
    background-color:#37626b;
}

/* Default Navigation Menu */


.menu-toggle {
    display: none;
    background-color: transparent;
    border: none;
    font-size: 2em;
    color: white;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2;
}



/* Footer Section */
footer {
    position: relative;
    text-align: left;
    padding-top: 10%; /* Adjust padding for the blue bar */
    padding-bottom: 2%;
    background-color: white;
}

.footer-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%; /* Set height to 20% of the screen */
    background-color: #293E4C; /* Primary blue color */
    z-index: 1;
}

.footer-content {
    position: relative;
    z-index: 2;
    padding: 110px 150px; /* Adjust padding */
}

/* Adjust Footer Layout */
.footer-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

.footer-logo {
    height: 125px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    margin-left: 25px;
}

.footer-left, .footer-right {
    width: 45%;
}

.footer-left, .footer-right ul {
    margin: 10px 0;
    font-size: 1.25em;
}

.social-icon {
    height: 50px;
    margin-bottom: 10px;
}

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

.footer-right ul li {
    margin-bottom: 10px;
    margin-left: 30px;
}

.footer-right ul li a {
    color: #293E4C; /* Link color in primary blue */
    text-decoration: none;
}

.footer-right ul li a:hover {
    text-decoration: underline;
}

.footer-left a {
    color: #293E4C; /* Set email link color to primary blue */
    text-decoration: none; /* Remove underline */
}

.footer-left a:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
}


/* Hero Section */
.hero {
    position: relative;
    text-align: center;
    color: white;
    height: 70vh; /* Set the hero section height */
    overflow: hidden;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the hero section without distortion */
    position: absolute;
    top: 0;
    left: 0;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 40px 60px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.hero-text h1 {

    margin-bottom: 10px;
    font-weight: bold;
    font-size: 3em;
}

.hero-text p {
    font-size: 1.3em;
    max-width: 900px;
    margin: 0 auto 30px;
    line-height: 1.5;
}

/* Hero CTAs container */
.hero-ctas {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.hero-text .btn {
    background-color: #488C9A;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    font-size: 1.2em;
    transition: all 0.3s ease;
    display: inline-block;
}

.hero-text .btn:hover {
    background-color: #37626b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.hero-text .btn.secondary {
    background-color: transparent;
    border: 2px solid white;
}

.hero-text .btn.secondary:hover {
    background-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

/* Value Proposition */
.value-proposition {
    background-color: #293E4C;
    color: white;
    padding: 60px 24px;
    text-align: center;
    margin-top: -5px;
}

.value-proposition h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: lighter;
    margin-top: 0px;
}

.value-proposition p {
    font-size: 1.2em;
    margin-bottom: 40px;
}

.value-proposition-icons {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    max-width: 1800px;
    margin: 0 auto;
}

.icon-box {
    flex: 1;
    margin: 0 20px;
    text-align: center;
}

.icon-box img {
    max-width: 175px;
    margin-bottom: 20px;
}

.icon-box h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: lighter;
}

.icon-box p {
    font-size: 1.1em;
    line-height: 1.6;
}

/* Platform Section */
.platform {
    background-color: white;
    padding: 80px 20px;
    text-align: center;
}

.platform h2 {
    font-size: 2.5em;
    color: #293E4C;
    margin-bottom: 40px;
}

.platform-demo-embed {
    max-width: 900px;
    margin: 0 auto 60px;
}

.video-placeholder {
    background: #f8f9fa;
    border: 2px dashed #488C9A;
    border-radius: 8px;
    padding: 100px 40px;
    color: #293E4C;
}

/* Responsive video for Platform Demo */
.platform-demo-embed video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    background: #000; /* subtle letterbox background */
}

.video-placeholder p {
    font-size: 1.3em;
    margin: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
    max-width: 1500px;
    margin: 0 auto;
    justify-items: stretch;
}

.feature-card {
    background: #f8f9fa;
    padding: 24px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    border-top: 4px solid #488C9A;
    grid-column: span 3;
}

/* Center the last 3 cards in the second row */
.feature-card:nth-child(5) {
    grid-column: 2 / 5;
}

.feature-card:nth-child(6) {
    grid-column: 5 / 8;
}

.feature-card:nth-child(7) {
    grid-column: 8 / 11;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-top-color: #fbb040;
}

/* Desktop-only: precisely center the bottom row of 3 cards
   by shifting them right by half a grid column (1/6 of their width). */
@media (min-width: 1101px) {
    .features-grid .feature-card:nth-child(5),
    .features-grid .feature-card:nth-child(6),
    .features-grid .feature-card:nth-child(7) {
        transform: translateX(16.6667%);
    }

    /* Preserve hover lift while keeping the horizontal offset */
    .features-grid .feature-card:nth-child(5):hover,
    .features-grid .feature-card:nth-child(6):hover,
    .features-grid .feature-card:nth-child(7):hover {
        transform: translateX(16.6667%) translateY(-5px);
    }
}

.feature-card h3 {
    font-size: 1.4em;
    color: #293E4C;
    margin-bottom: 12px;
    font-weight: 500;
}

.feature-card p {
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
}

/* Testimonial Section */
.testimonial {
    background: linear-gradient(135deg, #293E4C 0%, #488C9A 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
}

.testimonial blockquote {
    font-size: 1.5em;
    font-style: italic;
    max-width: 900px;
    margin: 0 auto 20px;
    line-height: 1.7;
    font-weight: 300;
    quotes: """ """ "'" "'";
}

.testimonial blockquote::before {
    content: open-quote;
    font-size: 2em;
    color: #fbb040;
    margin-right: 10px;
}

.testimonial blockquote::after {
    content: close-quote;
    font-size: 2em;
    color: #fbb040;
    margin-left: 10px;
}

.testimonial .attribution {
    font-size: 1.2em;
    font-weight: 500;
    color: #fbb040;
}

/* About Us Section */
.about-us {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 80px 40px;
}

.about-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.about-content h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #293E4C;
    margin-bottom: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.about-content p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #4f6672;
    margin-bottom: 24px;
}

.about-content a:not(.btn) {
    color: #488C9A;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.about-content a:not(.btn):hover {
    color: #3a7080;
    text-decoration: underline;
}

.about-btn {
    background-color: #488C9A;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 50px;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.4em;
}

.about-btn:hover {
    background-color: #293E4C;
}

/* Services Overview */
.services-overview {
    padding: 60px 20px;
    background-color: white;
    text-align: left;
    height: auto;
    min-height: 500px;
}

/* Services Header with Compare Link */
.services-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.services-overview h2 {
    font-size: 2.5em;
    margin: 0;
    color: #293E4C;
    text-align: left;
}

.services-compare-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #488C9A;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 24px;
    border: 2px solid #488C9A;
    border-radius: 30px;
    transition: all 0.3s ease;
    background: transparent;
    white-space: nowrap;
}

.services-compare-link:hover {
    background: #488C9A;
    color: #ffffff;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(72, 140, 154, 0.3);
}

.services-compare-link .arrow-icon {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.services-compare-link:hover .arrow-icon {
    transform: translateX(4px);
}

.tabs {
    overflow: hidden;
    background-color: #293E4C;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.tabs .tablinks {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    color: white;
    font-size: 1.2em;
    flex: 1;
    text-align: center;
}

.tabs .tablinks.active {
    background-color: #488C9A;
    color: white;
    font-weight: bold;
}

.tabcontent {
    display: none;
    padding: 80px 60px;
    background-color: #293E4C;
    color: white;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 600px;
}

.tabcontent[style*="display:block"], .tabcontent[style*="display: block"] {
    display: flex !important;
}

.service-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.service-description {
    flex: 1;
    padding: 0 40px;
    max-width: 50%;
}

.service-description h3 {
    font-size: 2.5em;
    color: white;
    margin-bottom: 20px;

    margin-top: 0px;
}

.service-description p {
    font-size: 1.6em;
}

.service-image {
    flex: 1;
    text-align: center;
    max-width: 50%;
}

.service-image img {
    max-width: 100%;
    max-height: 400px;
    object-fit: cover;
    margin-top: 50px;
}

/* Projects Section */
.our-projects {
    padding: 0;
    background-color: white;
}

.projects-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    margin: 0 auto;
    background-color: #293E4C;
}

.projects-text {
    background-color: #293E4C;
    color: white;
    padding: 40px;
    width: 35%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.our-projects h2 {
    margin-left: 20px;
}

.projects-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.projects-info .experience-box {
    background: linear-gradient(135deg, rgba(72, 140, 154, 0.15) 0%, rgba(72, 140, 154, 0.05) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 20px 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.projects-info .experience-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    opacity: 0.8;
    transition: width 0.4s ease;
}

.projects-info .experience-box:hover {
    transform: translateX(8px);
    background: linear-gradient(135deg, rgba(72, 140, 154, 0.25) 0%, rgba(72, 140, 154, 0.1) 100%);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 40px rgba(72, 140, 154, 0.2);
}

.projects-info .experience-box:hover::before {
    width: 6px;
}

.projects-info h3 {
    color: white;
    font-size: 1.5em;
    font-weight: 600;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.projects-info h3::after {
    content: '';
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #488C9A 0%, transparent 100%);
}

.projects-info p {
    margin: 0;
    line-height: 1.6;
    font-size: 1.4em;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
}

.projects-btn {
    background-color: #488C9A;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    display: inline-block;
    margin-top: 20px;
    font-size: 1.4em;
    margin-left: 125px;


}

.projects-btn:hover {
    background-color: #293E4C;
}

.projects-map {
    width: 55%;
    height: auto;
    display: flex;
    align-items: center;
}

.projects-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ========== MODERN CONTACT FORM STYLING ========== */
.contact-section {
    padding: 80px 20px;
    background-color: white;
}

.contact-container {
    max-width: 1100px;
    margin: 0 auto;
}

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

.contact-header h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #293E4C;
    margin: 0 0 16px 0;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.contact-header p {
    font-size: 1.15rem;
    color: #6b7c8a;
    margin: 0;
    line-height: 1.6;
}

/* Modern Form Layout */
.contact-form.modern-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.form-row.full-width {
    grid-template-columns: 1fr;
}

.form-row-button {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.contact-form label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: #293E4C;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

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

/* Form Inputs */
.contact-form input,
.contact-form textarea,
.contact-form select {
    padding: 12px 14px;
    border: 1px solid #d0d8dd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #293E4C;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: #488C9A;
    box-shadow: 0 0 0 3px rgba(72, 140, 154, 0.1);
    background-color: #ffffff;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #a8b4bc;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23488C9A' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
    cursor: pointer;
}

/* Submit Button */
.btn-submit {
    background-color: #488C9A;
    color: white;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
}

.btn-submit:hover {
    background-color: #3a7080;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(72, 140, 154, 0.3);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Form Message - Success/Error */
.form-message {
    margin-top: 24px;
    padding: 24px;
    border-radius: 12px;
    animation: slideDown 0.4s ease;
    position: relative;
    order: -1;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-message-success {
    background: linear-gradient(135deg, #f1f9f7 0%, #e8f5f1 100%);
    border-left: 6px solid #0b8f5c;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(11, 143, 92, 0.15);
}

.form-message-error {
    background: linear-gradient(135deg, #fef4f3 0%, #fce8e6 100%);
    border-left: 6px solid #d32f2f;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(211, 47, 47, 0.15);
}

.message-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.message-content svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.form-message-success svg {
    color: #0b8f5c;
}

.form-message-error svg {
    color: #d32f2f;
}

.message-text h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #293E4C;
}

.form-message-success .message-text h3 {
    color: #0b8f5c;
}

.form-message-error .message-text h3 {
    color: #d32f2f;
}

.message-text p {
    font-size: 0.95rem;
    margin: 0;
    color: #6b7c8a;
}

/* Contact Note */
.contact-note {
    text-align: center;
    margin-top: 40px;
    font-size: 0.95rem;
    color: #6b7c8a;
}

.contact-note a {
    color: #488C9A;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-note a:hover {
    color: #3a7080;
    text-decoration: underline;
}

/* Short Form Variation */
.short-form {
    max-width: 700px;
    margin: 0 auto;
}

/* Short form uses 2-column grid for name/email */
.short-form .form-row {
    grid-template-columns: 1fr 1fr;
}

/* Responsive Forms */
@media (max-width: 768px) {
    .contact-section {
        padding: 60px 20px;
    }
    
    .contact-header {
        margin-bottom: 40px;
    }
    
    .contact-header h2 {
        font-size: 1.8rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Ensure any grid-spanned groups reset on mobile to avoid overflow
       (overrides inline grid-column like `grid-column: 2 / -1`) */
    .form-row > .form-group {
        grid-column: 1 / -1 !important;
    }
    
    .form-row.full-width {
        grid-template-columns: 1fr;
    }
    
    .form-row-button {
        justify-content: center;
    }
    
    .btn-submit {
        width: auto;
    }
}

/* Tablet breakpoint for 2-column layout */
@media (max-width: 1024px) and (min-width: 769px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

/* Adjusting placeholder colors if desired */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #bbb; /* something more subtle than white, if you prefer */
}
/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Improved button focus states for accessibility */
button:focus, a:focus {
    outline: 3px solid #fbb040;
    outline-offset: 2px;
}

/* Responsive Navbar */
@media only screen and (max-width: 1170px) {
    nav ul.menu {
        display: none; /* Hide the original menu */
    }

    .menu-toggle {
        display: block; /* Show the menu toggle button */
    }

    .menu.show, .menu.open {
        display: flex; /* Show the dropdown menu when active */
        flex-direction: column;
        position: absolute;
        top: 130px;
        right: 0;
        left: 0;
        background-color: #293E4C; /* Primary blue background */
        width: 100%;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .menu li {
        border-bottom: 1px solid white; /* White line separating each option */
    }

    .menu li:last-child {
        border-bottom: none;
    }

    .menu li a {
        color: white;
        padding: 15px 20px;
        text-decoration: none;
        text-align: right;
        width: 100%; /* Make the links take up the full width */
    }

    .menu .portal-login{
        display: flex; /* Show the dropdown menu when active */
        flex-direction: column;
        text-align: center;
        width: 92%;
        font-size: 1.2em;
        border-radius: 15px;
        padding: 10px 15px
    }

    h2 {
        font-size: 2em;
    }

    .hero-text {
        width: 95%;
        height: 85%;
        padding: 30px 40px;
    }
    
    .hero-text h1 {
        font-size: 2.5em;
    }

    .hero-text p {
        font-size: 1.2em;
    }

    .hero-ctas {
        flex-direction: column;
        gap: 15px;
    }

    .hero-text .btn {
        font-size: 1.1em;
        padding: 10px 20px;
    }

    /* Value proposition / OFE Reality */
    .value-proposition-icons {
        flex-direction: column;
    }

    .icon-box {
        margin-bottom: 30px;
    }

    /* Platform section mobile */
    .platform h2 {
        font-size: 2em;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Reset to normal layout on mobile */
    .feature-card {
        grid-column: span 1;
    }
    
    .feature-card:nth-child(5),
    .feature-card:nth-child(6),
    .feature-card:nth-child(7) {
        grid-column: auto;
    }

    .video-placeholder {
        padding: 60px 20px;
    }
}

/* Ensure compact footer links across all sub-desktop widths */
@media only screen and (max-width: 1170px) {
    .footer-right ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px;
        padding: 0;
        margin: 0;
    }

    .footer-right ul li {
        margin: 0;
        flex: 0 1 calc(50% - 16px); /* force 2x2 layout */
        text-align: center;
    }
}

/* Hide service images on mobile and tablet */
@media (max-width: 768px) {
    .service-image {
        display: none;
    }
    
    .service-description {
        max-width: 100%;
    }
    
    /* Hide map on mobile/tablet */
    .projects-map {
        display: none !important;
    }
    
    .projects-container {
        flex-direction: column;
    }
    
    .projects-text {
        width: 100%;
        padding: 20px;
    }
}

/* Tablet breakpoint for features grid */
@media (max-width: 1100px) and (min-width: 769px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* Reset to normal layout on tablet */
    .feature-card {
        grid-column: span 1;
    }
    
    .feature-card:nth-child(5),
    .feature-card:nth-child(6),
    .feature-card:nth-child(7) {
        grid-column: auto;
    }

    /* Testimonial mobile */
    .testimonial blockquote {
        font-size: 1.2em;
    }

    .testimonial .attribution {
        font-size: 1.1em;
    }
    
    /* Hide map on tablet too */
    .projects-map {
        display: none !important;
    }
    
    .projects-container {
        flex-direction: column;
    }
    
    .projects-text {
        width: 100%;
    }

    /* About Us Section */
    .about-us {
        padding: 60px 20px;
    }

    .about-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .about-content h2 {
        font-size: 1.8rem;
        margin-bottom: 24px;
    }

    .about-content p {
        font-size: 1rem;
        margin-bottom: 20px;
        line-height: 1.7;
    }
    
    /* Services Overview */
    .services-overview {
        padding: 5px 5px;
    }
    
    .services-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        margin-bottom: 20px;
    }
    
    .services-overview h2 {
        font-size: 1.8em;
    }
    
    .services-compare-link {
        font-size: 0.95rem;
        padding: 10px 20px;
    }

    .tabcontent {
        padding: 30px 10px;
        min-height: auto;
    }

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

    .service-description {
        padding: 0 15px;
        max-width: 100%;
        text-align: center;
    }

    .service-image {
        max-width: 100%;
        text-align: center;
    }

    .service-image img {
        display: none; 
    }

    .service-description h3 {
        font-size: 2em;
    }

    .service-description p {
        font-size: 1.3em;
    }


    /* Projects Section */
    .projects-container {
        flex-direction: column;
    }

    .projects-text, .projects-map {
        width: 100%; /* Make sections full width */
    }

    .projects-map {
        display: none;
    }
    .projects-text {
        padding: 20px;
    }

    .projects-btn {
        margin-left: 1px;
    
    
    }
    /* Contact Section */
    .contact-section {
        padding: 40px 20px; /* Adjust padding for mobile */
    }

    .contact-form {
        padding: 0 20px;
    }

    .form-row {
        flex-direction: column; /* Stack each column on mobile */
    }
    .form-column {
        width: 100%;
    }

    .footer-content {
        padding: 200px 20px; /* Reduce padding for mobile */
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        margin-left: 0;
        padding: 0 20px;
    }

    .footer-left, .footer-right {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    .footer-left {
        order: 2;
    }

    .footer-right {
        order: 1;
    }

    .footer-right ul {
        margin: 0;
        display: flex;               /* inline-style list on mobile */
        flex-wrap: wrap;             /* allow wrapping to second row */
        justify-content: center;     /* center items */
        gap: 8px 16px;               /* compact spacing */
    }

    .footer-right ul li {
        margin-left: 0;              /* reset desktop margin */
        /* no fixed width so items size to content */
    }

    .news-grid {
        grid-template-columns: 1fr; /* Stack news items vertically */
        padding: 0;
    }
}

/* Additional adjustments for very small screens */
@media only screen and (max-width: 480px) {

    .header_logo img {
        height: 110px;
        margin-left: -20px;
    }

    h2 {
        font-size: 1.8em;
    }

    .hero-text {
        padding: 20px 30px;
    }

    .hero-text h1 {
        font-size: 2em;
    }

    .hero-text p {
        font-size: 1.1em;
    }

    /* Value proposition small */
    .value-proposition h2 {
        font-size: 1.8em;
    }

    .value-proposition p {
        font-size: 1.05em;
    }

    /* Platform/Feature cards small */
    .feature-card {
        padding: 20px;
    }

    .feature-card h3 {
        font-size: 1.3em;
    }

    .feature-card p {
        font-size: 1em;
    }

    /* Platform small */
    .video-placeholder {
        padding: 50px 20px;
    }

    .video-placeholder p {
        font-size: 1.1em;
    }

    /* Testimonial small */
    .testimonial {
        padding: 60px 15px;
    }

    .testimonial blockquote {
        font-size: 1.1em;
    }

    .testimonial .attribution {
        font-size: 1em;
    }

    .about-us {
        padding: 60px 20px;
    }

    .about-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .about-content h2 {
        font-size: 1.8rem;
        margin-bottom: 24px;
    }

    .about-content p {
        font-size: 1rem;
        margin-bottom: 20px;
        line-height: 1.7;
        text-align: center;
    }

    .about-content .btn {
        font-size: 1.2em;  
    }

    .tabs .tablinks {
        font-size: 1.05em;
    }
    
    .tabcontent {
        padding: 20px 5px;
    }
    
    .service-description {
        padding: 0 10px;
        text-align: center;
        margin-top: 20px;
    }
    
    .service-description h3 {
        font-size: 1.7em;
        margin-top: -5px;
    }

    .service-description p {
        font-size: 1.1em;
    }

    .projects-info {
        gap: 16px;
    }
    
    .projects-info .experience-box {
        padding: 20px;
        border-radius: 14px;
    }
    
    .projects-info h3 {
        font-size: 1.3em;
        margin: 0 0 10px 0;
    }
    
    .projects-info h3::after {
        width: 30px;
    }

    .projects-info p {
        font-size: 1.1em;
        line-height: 1.5;
    }

    .footer-content {
        padding: 225px 20px;
    }

    .footer-logo {
        height: 150px; /* Adjust logo size for small screens */
    }

    .footer-bottom {
        text-align: center;
    }

}

@media only screen and (max-width: 415px) {
    .menu li a {
        color: white;
        padding: 15px 20px;
        text-decoration: none;
        text-align: right;
        width: 100%; /* Make the links take up the full width */
        font-size: 1.2em;
    }

    .menu .portal-login{
        display: flex; /* Show the dropdown menu when active */
        flex-direction: column;
        text-align: center;
        width: 92%;
        font-size: 1.1em;
        border-radius: 15px;
        padding: 10px 15px
    }
}

/* Project Page*/


.hero-proj {
    position: relative;
    text-align: center;
    color: white;
    overflow: hidden; /* Ensure video doesn't overflow */
    height: 50vh; /* Take up half the screen */
}

/* --- Mobile footer hardening (stack + centered logo) --- */
@media only screen and (max-width: 700px) {
  .footer-top { justify-content: center; }
  .footer-top .footer-logo { display: block; margin: 0 auto; }

  .footer-bottom {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 0 !important;
    gap: 16px;
  }

  .footer-right, .footer-left {
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 20px !important;
  }

  .footer-right { order: 1; }
  .footer-left { order: 2; }
}

.hero-video-proj {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the video covers the area without distortion */

}


.content {
    padding: 40px 20px;
    text-align: center;
}

.content h1 {
    font-size: 2.5em;
    color: #293E4C;
    margin-bottom: 20px;
}

.content p {
    font-size: 1.6em;
    color: #293E4C;
    max-width: 1250px;
    margin: 0 auto;
}

.map {
    text-align: center; /* Center the map container */
    margin-top: 5px;
}

.map-container {
    margin: 0 auto;
    max-width: 65%; /* Adjust as needed to control the margins */
}

@media only screen and (max-width: 480px) {
    .content h1 {
        font-size: 2em;
        color: #293E4C;
        margin-bottom: 20px;
    }
    
    .content p {
        font-size: 1.2em;
        color: #293E4C;
        max-width: 1250px;
        margin: 0 auto;
    }
    .map-container {
        margin: 0 auto;
        max-width: 85%; /* Adjust as needed to control the margins */
    }

}

/* ========== ABOUT PAGE STYLING ========== */

/* Leadership Team Section */
.leadership-section {
    background: #ffffff;
    padding: 80px 40px;
}

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

.leadership-header h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #293E4C;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.02em;
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 50px;
    max-width: 1600px;
    margin: 0 auto;
}

.leader-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 40px 32px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.leader-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.leader-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.leader-photo-container {
    position: relative;
    margin-bottom: 20px;
}

.leader-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #488C9A;
    display: block;
}

.linkedin-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.linkedin-badge img {
    width: 22px;
    height: 22px;
}

.linkedin-badge:hover {
    transform: scale(1.1);
}

.leader-title-section {
    text-align: center;
    position: relative;
}

.leader-title-section h2 {
    font-size: 1.8rem;
    color: #293E4C;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.leader-title {
    font-size: 1.1rem;
    color: #488C9A;
    font-weight: 600;
    margin: 0;
}

.leader-bio {
    text-align: left;
}

.leader-bio p {
    font-size: 1rem;
    line-height: 1.8;
    color: #4f6672;
    margin: 0;
    text-align: center;
}

/* Company Origin Story - Centered */
.origin-story-centered {
    background: #f9f9f9;
    padding: 80px 40px;
}

.origin-content-centered {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.origin-content-centered h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #293E4C;
    margin-bottom: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.origin-content-centered p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #4f6672;
    margin-bottom: 24px;
}

.origin-content-centered a {
    color: #488C9A;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.origin-content-centered a:hover {
    color: #3a7080;
    text-decoration: underline;
}

/* Mission Statement */
.mission-statement {
    background-color: #293E4C;
    padding: 80px 40px;
    text-align: center;
}

.mission-statement h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #ffffff;
    font-weight: 600;
    margin: 0 0 32px 0;
    letter-spacing: -0.02em;
}

.mission-statement p {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #ffffff;
    max-width: 1100px;
    margin: 0 auto;
}

/* Responsive Design for About Page */
@media (max-width: 768px) {
    .leadership-section,
    .origin-story-centered,
    .mission-statement {
        padding: 60px 20px;
    }
    
    .origin-content-centered h2 {
        font-size: 1.8rem;
        margin-bottom: 24px;
    }
    
    .origin-content-centered p {
        font-size: 1rem;
    }
    
    .leadership-header h1 {
        font-size: 2rem;
    }
    
    .leadership-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .leader-card {
        padding: 32px 24px;
    }
    
    .leader-photo {
        width: 100px;
        height: 100px;
    }
    
    .linkedin-badge {
        width: 28px;
        height: 28px;
    }
    
    .linkedin-badge img {
        width: 18px;
        height: 18px;
    }
    
    .leader-title-section h2 {
        font-size: 1.5rem;
    }
    
    .leader-bio p {
        text-align: left;
    }
    
    .mission-statement h2 {
        font-size: 1.8rem;
        margin-bottom: 24px;
    }
    
    .mission-statement p {
        font-size: 1.1rem;
    }
    
    .about-hero {
        height: 50vh;
    }
}

/* About Page (Old styling - keeping for compatibility) */

/* Hero Section */
.about-hero {
    position: relative;
    background-image: url('pictures/hero_about.jpg'); /* Replace with your hero image path */
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    align-items: left;
    justify-content: left;
}

/* Owner Equipment Problem — Animated Diagram (scoped) */
.value-proposition .ofe { max-width: 1400px; margin: 48px auto 0; color: #0b2b3b; }
.ofe { --ink:#0b2b3b; --teal:#1e8da3; --dashed:#d9534f; --sol:#0b8f5c; --bg:#f6fafb; --muted:#4f6672; --ring:#0b2b3b; --panel:#ffffff; --shadow:0 16px 48px rgba(0,0,0,.08); }
.ofe * { box-sizing: border-box; }
.ofe .card{background:var(--panel);border-radius:20px;box-shadow:var(--shadow);padding:32px 28px 20px;transition:box-shadow 0.3s ease}
.ofe .header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 20px 0}
.ofe .header h3{font-size:clamp(1.25rem,2.5vw,1.75rem);letter-spacing:-.02em;margin:0;color:var(--ink);font-weight:700;line-height:1.2}
.ofe .header .sub{font-weight:700;color:#1e8da3;margin-left:auto;font-size:1rem}
.ofe .grid{display:grid;grid-template-columns: 1.5fr 1fr;gap:32px;align-items:start}
@media (max-width:980px){.ofe .grid{grid-template-columns:1fr}}

.ofe .panel{border-radius:16px;padding:24px;position:relative;transition:transform 0.2s ease}
.ofe .legend{display:flex;align-items:center;gap:18px;margin-top:8px;color:var(--muted);font-size:.9rem}
.ofe .legend .key{display:flex;align-items:center;gap:8px}
.ofe .key .solid{width:60px;height:0;border-top:3px solid var(--teal)}
.ofe .key .dash{width:60px;height:0;border-top:3px dashed var(--dashed)}
.ofe .key .guide{width:60px;height:0;border-top:3px dashed var(--sol)}

.ofe .copy{padding:24px 20px}
.ofe .copy h2{font-size:1.35rem;margin:0 0 1rem 0;color:var(--ink);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.ofe .copy .intro-text{font-size:1.05rem;line-height:1.65;color:var(--ink);margin:0 0 1.5rem 0;opacity:1}
.ofe .copy ul{margin:0; text-align: left; padding:0;list-style:none}
.ofe .copy li{margin:0 0 1.2rem 0;padding-left:1.5rem;position:relative;font-size:1rem;line-height:1.6;color:var(--ink)}
.ofe .copy li::before{content:"•";position:absolute;left:0;color:#1e8da3;font-size:1.4rem;line-height:1.3;font-weight:700}
.ofe .copy .fade{opacity:1}
.ofe .copy .strong{font-weight:700;color:var(--ink)}

.ofe .controls{position:absolute;top:12px;right:12px;display:flex;gap:10px;z-index:4}
.ofe button{cursor:pointer;border:0;border-radius:12px;background:var(--ink);color:#fff;padding:.65rem 1rem;font-weight:700;font-size:.9rem;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ofe button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.ofe button:active{transform:translateY(0)}
.ofe button.secondary{background:#1e8da3}
.ofe button.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}

/* Subtle icon-only replay button */
.ofe #ofe-replay.icon-only{
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(41,62,76,0.08);
  color: var(--ink);
  font-size: 18px; line-height: 1;
  box-shadow: none;
}
.ofe #ofe-replay.icon-only:hover{
  background: rgba(41,62,76,0.16);
  transform: none;
}

.ofe .figure{position:relative}
.ofe .svg{width:100%;height:auto;display:block}

/* Node styling */
.ofe .node circle{fill:#fff;stroke:var(--ring);stroke-width:3}
.ofe .node text{fill:var(--ink);text-anchor:middle}
.ofe .node .title{font-weight:800;font-size:16px}
.ofe .node .sub{font-weight:600;font-size:16px}
.ofe .node .star{fill:#fff;stroke:var(--sol);stroke-width:4;stroke-linejoin:round}

/* Edge styling */
.ofe .edge line,.ofe .edge path{fill:none;stroke-width:3}
.ofe .edge--solid line,.ofe .edge--solid path{stroke:var(--teal)}
.ofe .edge--dashed line,.ofe .edge--dashed path{stroke:var(--dashed);stroke-dasharray:8 8}
.ofe .edge--guided path{stroke:var(--sol);stroke-dasharray:5 10}

/* Callouts */
.ofe .callout circle{fill:#fff;stroke:#1e8da3;stroke-width:3}
.ofe .callout text{fill:#1e8da3;font-weight:800;text-anchor:middle;dominant-baseline:middle}
.ofe .tooltip{position:absolute;min-width:280px;max-width:330px;padding:.6rem .7rem;border-radius:10px;background:#fff;border:1px solid #d8e2e7;box-shadow:var(--shadow);font-size:.92rem;color:var(--ink);transform:translate(-50%, -8px);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:3}
.ofe .tooltip.show{opacity:1;transform:translate(-50%, 0)}
.ofe .tooltip b{font-weight:800}

/* Stage visibility */
.ofe .solterra{opacity:0;transform-origin:450px 320px}
.ofe #guided{opacity:0}
.ofe #chaos{opacity:1}

/* Animation sequencing */
.ofe .play #solid line{stroke-dasharray:400;stroke-dashoffset:400;animation:ofe-draw 1000ms ease-out forwards}
.ofe .play #solid line:nth-child(2){animation-delay:150ms}
.ofe .play #solid line:nth-child(3){animation-delay:300ms}
.ofe .play #solid line:nth-child(4){animation-delay:450ms}
/* Make the new Owner↔Solterra contractual line appear in Stage 2 */
.ofe .play #solid line.owner-sol {
    animation: none !important;            /* don't draw during Stage 1 */
    stroke-dasharray: 240;
    stroke-dashoffset: 240;                /* hidden until Stage 2 */
  }
  .ofe .stage2 #solid line.owner-sol {
    animation: ofe-draw 900ms ease-out forwards 200ms !important;
  }

.ofe .play #chaos path{opacity:.2;animation:ofe-chatter 2200ms ease-in-out infinite}
.ofe .play #chaos path:nth-child(1){animation-delay:300ms}
.ofe .play #chaos path:nth-child(2){animation-delay:600ms}
.ofe .play #chaos path:nth-child(3){animation-delay:900ms}
.ofe .play #chaos path:nth-child(4){animation-delay:1200ms}

.ofe .stage2 #chaos{opacity:0;transition:opacity 350ms ease}
.ofe .stage2 .solterra{opacity:1;animation:ofe-pop 520ms ease-out forwards;filter:url(#glow)}
.ofe .stage2 #guided{opacity:1}
.ofe .stage2 #guided path{animation:ofe-flow 1500ms linear infinite}

.ofe .play .c1,.ofe .play .c2,.ofe .play .c3,.ofe .play .c4{opacity:0}
.ofe .play .c1{animation:ofe-fadeIn 400ms ease-out 1400ms forwards}
.ofe .play .c2{animation:ofe-fadeIn 400ms ease-out 2200ms forwards}
.ofe .play .c3{animation:ofe-fadeIn 400ms ease-out 3000ms forwards}
.ofe .stage2 .c4{animation:ofe-fadeIn 400ms ease-out 400ms forwards}

/* Copy panel animation */
.ofe .play .p1,.ofe .play .p2,.ofe .play .p3,.ofe .play .p4,.ofe .play .p5{opacity:0;transform:translateY(6px)}
.ofe .play .p1{animation:ofe-fadeUp 400ms ease-out 1200ms forwards}
.ofe .play .p2{animation:ofe-fadeUp 400ms ease-out 1600ms forwards}
.ofe .play .p3{animation:ofe-fadeUp 400ms ease-out 2000ms forwards}
.ofe .play .p4{animation:ofe-fadeUp 400ms ease-out 2400ms forwards}
.ofe .play .p5{animation:ofe-fadeUp 400ms ease-out 2800ms forwards}
.ofe .stage2 .before{opacity:1;transition:opacity 300ms ease}
.ofe .stage2 .after{opacity:1;transform:translateY(0)}
.ofe .stage2 .solterra { filter: none; }
/* Keyframes (scoped names to avoid collisions) */
@keyframes ofe-draw{to{stroke-dashoffset:0}}
@keyframes ofe-chatter{0%,100%{opacity:.15}50%{opacity:.75}}
@keyframes ofe-pop{0%{transform:scale(.8)}100%{transform:scale(1)}}
@keyframes ofe-flow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-120}}
@keyframes ofe-fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes ofe-fadeUp{to{opacity:1;transform:translateY(0)}}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .ofe .play *,.ofe .stage2 *{animation:none !important;transition:none !important}
  .ofe #chaos{opacity:.35}
  .ofe .solterra{opacity:1}
  .ofe #guided{opacity:1}
}

/* Mobile sizing: fill viewport height without extra panel height */
@media (max-width: 700px){
  .ofe .card { padding: 16px 12px; }
  .ofe #ofe-figure{
    padding: 0;
    border-radius: 10px;
    aspect-ratio: auto;
    height: 55svh; /* Reduced from 100svh for better mobile display */
  }
  .ofe #ofe-figure .svg{
    width: 100%;
    height: 85%;
    transform: scale(1.65); /* Increased from 0.92 to make content more readable */
    transform-origin: center;
  }
  /* Make node text larger and more readable on mobile */
  .ofe .node .title { font-size: 22px; }
  .ofe .node .sub { font-size: 22px; }
}

/* Larger-screen comfort adjustments */
@media (min-width: 1200px){
  .value-proposition{ padding: 90px 48px; }
  .ofe .grid{ grid-template-columns: 1.7fr 1fr; gap: 32px; }
  .ofe .panel{ padding: 24px; }
}

.about-hero-overlay {
    position: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(41, 62, 76, 0.8) 0%,
        rgba(41, 62, 76, 0.8) 50%,
        rgba(72, 140, 154, 0.8) 50%,
        rgba(72, 140, 154, 0.8) 100%
    );
    clip-path: polygon(0 0, 50% 0, 0 100%);
}

.about-hero-text {
    position: relative;
    z-index: 2;
    text-align: left;
    color: white;
    padding: 20px;
}

.about-hero-text h1 {
    font-size: 3em;
    font-weight: bold;
    margin: 0;
}

.about-hero-text p {
    font-size: 1.2em;
    margin-top: 10px;
}

/* Company Origin Story */
.origin-story {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 150px 20px;
    background-color: #f9f9f9;
}
 
.origin-content {
    display: flex;
    max-width: 1500px;
    margin: 0 auto;
}
 
.origin-text {
    flex: 1;
    padding-right: 20px;
}
 
.origin-text h2 {
    font-size: 2em;
    margin-bottom: 20px;
}
 
.origin-text p {
    font-size: 1.3em;
    line-height: 1.6;
}
 
.origin-image {
    flex: 1;
}
 
.origin-image img {
    width: 100%;
    height: 575px;
    border-radius: 10px;
    margin-top: 50px;
    margin-left: 50px;
}
 
/* Mission Statement */
.mission-statement {
    text-align: center;
    padding: 30px 20px;
    background-color: #293E4C;
    color: white;
}

.mission-statement h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    margin-top: 125px;
}

.mission-statement p {
    font-size: 1.5em;
    line-height: 1.6;
    max-width: 1000px;
    margin: 0 auto;
}


@media only screen and (max-width: 700px) {
   
    .about-hero {

        background-image: url('pictures/hero_about_small.jpg'); /* Replace with your hero image path */
    }
    .about-hero {
        height: 40vh; /* Adjust hero section height for smaller screens */
    }
    .about-hero-text h1 {
        font-size: 2em;
        font-weight: bold;
        margin: 0;
        margin-right: 600px;
    }
    
    .about-hero-text p {
        display: none;
    }

    .origin-story {
        flex-direction: column; /* Stack the text and image vertically */
        padding: 20px; /* Adjust padding for smaller screens */
      }
    
      .origin-text {
        width: 100%; /* Make the text container take full width */
        padding-right: 0; /* Remove right padding */
        text-align: center; /* Center the text */
      }
    
      .origin-image {
        display: none; /* Hide the image on smaller screens */
      }
}

@media only screen and (max-width: 480px) {

    .about-hero-text h1 {
        font-size: 1.85em;
        font-weight: bold;
        margin: 0;
        margin-right: 300px;
        margin-left: -15px;
    }
    
}

/* Contact Page*/

/* Hero Section for Contact Page */

.contact-hero {
    position: relative;
    background-image: url('pictures/career_hero.jpg'); /* Replace with your hero image path */
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    align-items: left;
    justify-content: left;
}

.contact-hero-overlay {
    position: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(41, 62, 76, 0.8) 0%,
        rgba(41, 62, 76, 0.8) 50%,
        rgba(72, 140, 154, 0.8) 50%,
        rgba(72, 140, 154, 0.8) 100%
    );
    clip-path: polygon(0 0, 50% 0, 0 100%);
}

.contact-hero-text {
    position: relative;
    z-index: 2;
    text-align: left;
    color: white;
    padding: 20px;
}

.contact-hero-text h1 {
    font-size: 3em;
    font-weight: bold;
    margin: 0;
}

.required {
    color: red;
  }

@media only screen and (max-width: 700px) {
    .contact-hero {
        height: 40vh; /* Adjust hero section height for smaller screens */
    }

    .contact-hero {
        position: relative;
        background-image: url('pictures/career_hero_small.jpg'); /* Replace with your hero image path */
    }

    .contact-hero-text h1 {
        font-size: 2em;
        font-weight: bold;
        margin-right: 300px;
        text-align: center;
    }

}


/* Contact section form same as home page*/


/* Careers Page */

.careers-hero {
    position: relative;
    background-image: url('pictures/hero_image_7.jpg'); /* Replace with your hero image path */
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    align-items: left;
    justify-content: left;
}

.careers-hero-overlay {
    position: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(41, 62, 76, 0.8) 0%,
        rgba(41, 62, 76, 0.8) 50%,
        rgba(72, 140, 154, 0.8) 50%,
        rgba(72, 140, 154, 0.8) 100%
    );
    clip-path: polygon(0 0, 50% 0, 0 100%);
}

.careers-hero-text {
    position: relative;
    z-index: 2;
    text-align: left;
    color: white;
    padding: 20px;
}

.careers-hero-text h1 {
    font-size: 3em;
    font-weight: bold;
    margin: 0;
}

.careers-section {
    padding: 50px 20px;
    text-align: center;
}

.careers-section h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #293E4C;
}

/* Search Box */
.job-search {
    margin-bottom: 40px;
}

.search-box {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    font-size: 1.2rem;
    border: 1px solid #488C9A;
    border-radius: 5px;
}

/* Job Results */
.job-results {
    margin-top: 30px;
    color: #293E4C;
}

.job-results h3 {
    font-size: 1.8rem;
}

.job-results p {
    font-size: 1.2rem;
}


@media only screen and (max-width: 700px) {
    .careers-hero {
        height: 40vh; /* Adjust hero section height for smaller screens */
    }
    .careers-hero-text h1 {
        font-size: 1.9em;
        font-weight: bold;
        margin-right: 300px;
        text-align: left;
    }
    
    .careers-hero-text p {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    .careers-hero-text h1 {
        font-size: 1.8em;
        margin-left:-15px;
    }

    .search-box {
        margin-left: -10px;
        width: 100%;
    }  

}


/* === OFE diagram fixes (spacing, layering, tooltips) — 2025‑10‑13 === */
.value-proposition .ofe { max-width: 1600px; }              /* wider card */
.ofe .grid { grid-template-columns: 1.95fr 1fr; gap: 36px; } /* more space for SVG */
.ofe .figure.panel { min-height: 720px; }                    /* taller canvas */
.ofe .svg { overflow: visible; }                             /* keep arrowheads visible */
.ofe .node .title { font-size: 18px; }                       /* slightly larger node labels */
.ofe .solterra { transform-origin: 450px 332px; }            /* new star center */
@media (max-width: 980px){
  .ofe .grid{ grid-template-columns: 1fr; }
  .ofe .panel{ min-height: 640px; }
}

/* ========== SERVICES PAGE STYLING ========== */

/* Services Simple Section */
.services-simple {
    padding: 80px 40px;
    background: linear-gradient(to bottom, #f6fafb 0%, #ffffff 100%);
}

.services-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px;
}

.services-intro h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #293E4C;
    margin-bottom: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.services-intro p {
    font-size: 1.2rem;
    color: #6b7c8a;
    font-weight: 400;
}

/* Services Grid */
.services-grid-simple {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Services Note */
.services-note {
    text-align: center;
    margin-top: 40px;
    font-size: 1rem;
    color: #6b7c8a;
    font-style: italic;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Service Cards */
.service-card-simple {
    background: #ffffff;
    border-radius: 20px;
    padding: 48px 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 2px solid transparent;
}

.service-card-simple:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Featured Card (Most Popular) */
.service-card-simple.featured {
    border: 3px solid #488C9A;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f8fa 100%);
}

/* Premium Card (Complete Protection) */
.service-card-simple.premium {
    border: 3px solid #F5A623;
    background: linear-gradient(to bottom, #ffffff 0%, #fffbf5 100%);
}

/* Badges */
.featured-badge,
.premium-badge {
    position: absolute;
    top: -12px;
    right: 32px;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.featured-badge {
    background: #488C9A;
    color: #ffffff;
}

.premium-badge {
    background: #F5A623;
    color: #ffffff;
}

/* Service Icons */
.service-icon-large {
    font-size: 3.5rem;
    color: #488C9A;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card-simple.premium .service-icon-large {
    color: #F5A623;
}

/* Service Card Content */
.service-card-simple h3 {
    font-size: 1.75rem;
    color: #293E4C;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
}

.service-card-simple .service-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #4f6672;
    margin-bottom: 28px;
    flex-grow: 1;
    text-align: left;
}

/* Service Features List */
.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    flex-grow: 1;
}

.service-features li {
    font-size: 1rem;
    line-height: 1.6;
    color: #4f6672;
    padding: 10px 0 10px 32px;
    position: relative;
    text-align: left;
}

.service-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #488C9A;
    font-weight: 700;
    font-size: 1.2rem;
}

.service-card-simple.premium .service-features li::before {
    color: #F5A623;
}

/* Service Highlights */
.service-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    justify-content: center;
}

.service-highlights .highlight {
    background: #e8f4f7;
    color: #488C9A;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #d0e8ed;
}

.service-card-simple.premium .service-highlights .highlight {
    background: #fff8ed;
    color: #d48f1f;
    border: 1px solid #fde4c3;
}

/* Service Buttons */
.service-btn-simple {
    background: #488C9A;
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(72, 140, 154, 0.3);
    align-self: center;
}

.service-btn-simple:hover {
    background: #3a7080;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(72, 140, 154, 0.4);
}

.service-btn-simple.premium-btn {
    background: #F5A623;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}

.service-btn-simple.premium-btn:hover {
    background: #d48f1f;
    box-shadow: 0 6px 20px rgba(245, 166, 35, 0.4);
}

/* Services Benefits Section (Solterra Advantage) */
.services-benefits {
    background: linear-gradient(135deg, #2c4a5a 0%, #3d5f71 100%);
    padding: 80px 40px;
    color: #ffffff;
}

.benefits-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.benefits-content h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 60px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    align-items: center;
}

.benefit-item {
    text-align: center;
}

.benefit-stat {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #F5A623;
    margin-bottom: 16px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.benefit-item p {
    font-size: 1.1rem;
    color: #e8f4f7;
    line-height: 1.5;
    margin: 0;
}

/* Services CTA Section */
.services-cta {
    padding: 100px 40px;
    background: linear-gradient(to bottom, #ffffff 0%, #f6fafb 100%);
}

.cta-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.cta-content h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #293E4C;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.cta-content p {
    font-size: 1.2rem;
    color: #6b7c8a;
    margin-bottom: 40px;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn-primary {
    background: #488C9A;
    color: #ffffff;
    padding: 18px 42px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(72, 140, 154, 0.3);
}

.cta-btn-primary:hover {
    background: #3a7080;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(72, 140, 154, 0.4);
}

.cta-btn-secondary {
    background: transparent;
    color: #293E4C;
    padding: 18px 42px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    border: 3px solid #293E4C;
    transition: all 0.3s ease;
}

.cta-btn-secondary:hover {
    background: #293E4C;
    color: #ffffff;
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .services-grid-simple {
        grid-template-columns: 1fr;
        max-width: 600px;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .services-simple,
    .services-benefits,
    .services-cta {
        padding: 60px 20px;
    }
    
    .services-intro {
        margin-bottom: 40px;
    }
    
    .service-card-simple {
        padding: 40px 24px;
    }
    
    .benefits-content h2 {
        margin-bottom: 40px;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%;
    }
}

/* === OFE Diagram: Responsive scaling (2025-10-15) === */
/* Keep the SVG canvas at a consistent ratio and let it scale */
.ofe .figure.panel {
    aspect-ratio: 900 / 560;
    min-height: unset;
    height: auto;
    width: 100%;
}

/* Fill the container’s aspect box */
.ofe .svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Scale text inside the SVG for readability on small screens (desktop/tablet only) */
@media (min-width: 701px) {
  .ofe .node .title { font-size: clamp(10px, 2.4vw, 18px); }
  .ofe .node .sub   { font-size: clamp(10px, 2.4vw, 18px); }
  .ofe .callout text{ font-size: clamp(10px, 2.2vw, 14px); }
}

/* Adapt stroke widths so lines remain visible as things shrink */
.ofe .edge line,
.ofe .edge path { stroke-width: clamp(1.5px, 0.35vw, 3px); }
.ofe .node circle,
.ofe .callout circle { stroke-width: clamp(2px, 0.4vw, 3px); }

/* Tooltips: slightly tighter on very small screens */
@media (max-width: 480px) {
  .ofe .tooltip {
    min-width: 170px;
    max-width: min(86vw, 300px);
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
  }
}

/* Prevent any horizontal overflow of the OFE card/grid */
.ofe { width: 100%; max-width: 100%; overflow-x: hidden; }
.ofe .card { width: 100%; max-width: 100%; padding-inline: clamp(16px, 4vw, 28px); }
.ofe .grid { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); gap: clamp(16px, 3.5vw, 36px); }
.ofe .panel { min-width: 0; }

@media (max-width: 980px) {
  .ofe .grid { grid-template-columns: 1fr; }
}

/* Controls: keep small and out of the way on mobile */
.ofe .controls { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; z-index: 4; }
.ofe .controls button { padding: .5rem .75rem; font-size: .9rem; border-radius: 10px; }
@media (max-width: 640px) {
  .ofe .controls { top: 6px; right: 6px; gap: 6px; }
  .ofe .controls button { width: 36px; height: 36px; padding: 0; border-radius: 9999px; }
}

/* Legend: ensure it wraps and stays inside screen */
.ofe .legend { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 12px; background: rgba(255,255,255,0.92); padding: 6px 10px; border-radius: 10px; z-index: 2; }
@media (max-width: 640px) {
  .ofe .legend { font-size: 0.88rem; gap: 8px; padding: 6px 8px; left: 8px; right: 8px; bottom: 8px; }
  .ofe .key .solid, .ofe .key .dash, .ofe .key .guide { width: 42px; }
}

/* Spacing for reCAPTCHA widget */
.g-recaptcha {
    margin: 10px 0 20px;
}