/* style.css */

/* CSS Variables */
:root {
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Nunito', sans-serif;

    /* Analogous Color Scheme (Teal/Blue Base) */
    --color-bg-main-light: #EFF3F6; /* Very light cool gray for neuromorphic base */
    --color-bg-main-dark: #0B132B;  /* Very dark navy blue */
    --color-bg-tint: #F7FAFC;      /* Slightly off-white tint, different from main light */

    --color-primary: #5BC0BE;       /* Medium Teal - main action color */
    --color-primary-darker: #3A8D91; /* Darker Teal */
    --color-primary-lighter: #82DBD8; /* Lighter Teal */

    --color-secondary-accent: #1C2541; /* Dark Blue, analogous to teal */
    --color-tertiary-accent: #6D97A3; /* Dusty Blue */

    --color-text-light: #FFFFFF;
    --color-text-dark: #222831;     /* Almost black for strong contrast */
    --color-text-medium: #4F5B67;   /* Medium gray for less emphasis */
    --color-text-muted: #6c757d;

    /* Neuromorphic Shadows for Light Background (--color-bg-main-light) */
    --neu-light-highlight: rgba(255, 255, 255, 0.9);
    --neu-light-shadow-color: rgba(209, 217, 224, 0.7); /* Derived from --color-bg-main-light */
    --neu-convex-shadow-light: -6px -6px 12px var(--neu-light-highlight), 6px 6px 12px var(--neu-light-shadow-color);
    --neu-concave-shadow-light: inset -4px -4px 8px var(--neu-light-highlight), inset 4px 4px 8px var(--neu-light-shadow-color);
    --neu-flat-shadow-light: 0px 0px 0px var(--neu-light-highlight), 0px 0px 0px var(--neu-light-shadow-color), -6px -6px 12px var(--neu-light-highlight) inset, 6px 6px 12px var(--neu-light-shadow-color) inset;


    /* Neuromorphic Shadows for Dark Background (--color-bg-main-dark) */
    --neu-dark-highlight: rgba(28, 37, 65, 0.5); /* Highlight color for dark theme elements */
    --neu-dark-shadow-color: rgba(0, 0, 0, 0.4);  /* Shadow color for dark theme elements */
    --neu-convex-shadow-dark: -6px -6px 12px var(--neu-dark-highlight), 6px 6px 12px var(--neu-dark-shadow-color);
    --neu-concave-shadow-dark: inset -4px -4px 8px var(--neu-dark-highlight), inset 4px 4px 8px var(--neu-dark-shadow-color);
    --neu-flat-shadow-dark: 0px 0px 0px var(--neu-dark-highlight), 0px 0px 0px var(--neu-dark-shadow-color), -6px -6px 12px var(--neu-dark-highlight) inset, 6px 6px 12px var(--neu-dark-shadow-color) inset;


    --border-radius-soft: 15px; /* Biomorphic soft curves */
    --border-radius-medium: 25px;
    --transition-smooth: all 0.3s cubic-bezier(0.65, 0, 0.35, 1); /* Non-linear */
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Global Styles */
body {
    font-family: var(--font-body);
    background-color: var(--color-bg-main-light);
    color: var(--color-text-dark);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--color-text-dark); /* Default dark for light backgrounds */
    margin-bottom: 1rem;
    line-height: 1.3;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem !important;
    color: var(--color-secondary-accent); /* Distinct color for section titles */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.text-white .section-title,
.section-bg-dark .section-title {
    color: var(--color-text-light);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}


p {
    margin-bottom: 1rem;
    color: var(--color-text-medium);
}

.section-bg-dark p, .section-bg-dark .lead {
    color: var(--color-text-light) !important;
    opacity: 0.9;
}
.section-bg-dark .card-text {
    color: var(--color-text-medium) !important; /* Keep card text readable if card is light */
}
.section-bg-dark .neuro-widget p,
.section-bg-dark .neuro-widget h3,
.section-bg-dark .neuro-widget h5,
.section-bg-dark .neuro-widget .small {
    color: var(--color-text-light) !important;
}


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

a:hover {
    color: var(--color-primary-darker);
    text-decoration: none;
}

/* Global Button Styles */
.btn, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-heading);
    font-weight: 500;
    padding: 0.75rem 1.8rem;
    border-radius: var(--border-radius-medium);
    transition: var(--transition-bounce);
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.neuro-button {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    box-shadow: var(--neu-convex-shadow-light);
}
.neuro-button:hover, .neuro-button:focus {
    background-color: var(--color-primary-darker);
    color: var(--color-text-light);
    box-shadow: var(--neu-concave-shadow-light);
    transform: translateY(-2px);
}
.section-bg-dark .neuro-button {
    box-shadow: var(--neu-convex-shadow-dark);
}
.section-bg-dark .neuro-button:hover, .section-bg-dark .neuro-button:focus {
    box-shadow: var(--neu-concave-shadow-dark);
}


.neuro-button-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}
.neuro-button-outline:hover, .neuro-button-outline:focus {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
    box-shadow: var(--neu-convex-shadow-light); /* Add subtle shadow on hover */
    transform: translateY(-2px);
}
.section-bg-dark .neuro-button-outline {
    color: var(--color-primary-lighter);
    border-color: var(--color-primary-lighter);
}
.section-bg-dark .neuro-button-outline:hover, .section-bg-dark .neuro-button-outline:focus {
    background-color: var(--color-primary-lighter);
    color: var(--color-text-dark);
    border-color: var(--color-primary-lighter);
    box-shadow: var(--neu-convex-shadow-dark);
}


/* Global Form Input Styles */
.neuro-input {
    background-color: var(--color-bg-main-light);
    border: none;
    border-radius: var(--border-radius-soft);
    padding: 0.75rem 1rem;
    box-shadow: var(--neu-concave-shadow-light);
    color: var(--color-text-dark);
    width: 100%;
    transition: var(--transition-smooth);
}
.neuro-input:focus {
    outline: none;
    box-shadow: var(--neu-concave-shadow-light), 0 0 0 2px var(--color-primary-lighter); /* Focus ring */
    background-color: var(--color-bg-main-light); /* Keep background color on focus */
}
.neuro-input::placeholder {
    color: var(--color-text-muted);
}

.section-bg-dark .neuro-input {
    background-color: var(--color-secondary-accent);
    box-shadow: var(--neu-concave-shadow-dark);
    color: var(--color-text-light);
}
.section-bg-dark .neuro-input:focus {
    box-shadow: var(--neu-concave-shadow-dark), 0 0 0 2px var(--color-primary-lighter);
    background-color: var(--color-secondary-accent);
}
.section-bg-dark .neuro-input::placeholder {
    color: rgba(255,255,255,0.6);
}
.section-bg-dark .form-label {
    color: var(--color-text-light) !important;
}


/* Utility Classes */
.section-bg-light {
    background-color: var(--color-bg-main-light);
    color: var(--color-text-dark);
}
.section-bg-dark {
    background-color: var(--color-bg-main-dark);
    color: var(--color-text-light);
}
.section-bg-tint {
    background-color: var(--color-bg-tint);
    color: var(--color-text-dark);
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0; /* Behind content if section's container has z-index:1 */
}
/* Overlay for parallax backgrounds to ensure text readability */
.parallax-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    z-index: 1; /* On top of image, below text */
}

/* Animate on Scroll Placeholders */
.animate-on-scroll {
    /*opacity: 0;*/
    transform: translateY(30px);
    transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Header Styles */
.navbar.bg-light-neuro { /* Custom class from HTML */
    background-color: var(--color-bg-main-light) !important; /* Override Bootstrap */
    box-shadow: var(--neu-convex-shadow-light);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.navbar-brand img {
    transition: transform 0.3s ease;
}
.navbar-brand:hover img {
    transform: scale(1.05);
}
.navbar .nav-link {
    font-family: var(--font-heading);
    color: var(--color-text-medium) !important;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem 1rem !important;
    border-radius: var(--border-radius-soft);
    transition: var(--transition-bounce);
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--color-primary) !important;
    background-color: transparent; /* Remove Bootstrap hover background */
    transform: translateY(-2px) scale(1.05);
}
.navbar-toggler {
    border: none;
    box-shadow: var(--neu-convex-shadow-light);
}
.navbar-toggler:focus {
    box-shadow: var(--neu-concave-shadow-light);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(var(--color-primary-rgb), 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e".replace('var(--color-primary-rgb)', '91,192,190'));
}


/* Hero Section */
.hero-section {
    position: relative;
    color: var(--color-text-light);
    padding: 8rem 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 80vh; /* Ensure it's substantial but not excessively tall */
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-section::before { /* Dark overlay for background image */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
    z-index: 1;
}
.hero-section .container {
    position: relative;
    z-index: 2;
}
.hero-title, .hero-subtitle {
    color: var(--color-text-light) !important; /* Explicitly white */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
}
.hero-subtitle {
    font-size: 1.3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.hero-section .neuro-button { /* Ensure hero button stands out */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2), -3px -3px 8px rgba(255,255,255,0.05) inset, 3px 3px 8px rgba(0,0,0,0.3) inset;
}
.hero-section .neuro-button:hover {
    background-color: var(--color-primary-lighter);
    color: var(--color-text-dark);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    transform: translateY(-3px);
}


/* Card Styles (General for Services, Media, News, etc.) */
.neuro-card {
    background-color: var(--color-bg-main-light);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--neu-convex-shadow-light);
    padding: 1.5rem;
    transition: var(--transition-bounce);
    height: 100%; /* For Bootstrap column alignment */
    display: flex;
    flex-direction: column;
    text-align: center; /* Center text content within card */
}
.neuro-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: -8px -8px 16px var(--neu-light-highlight), 8px 8px 16px var(--neu-light-shadow-color);
}
.section-bg-dark .neuro-card {
    background-color: var(--color-secondary-accent); /* Darker card bg on dark section */
    box-shadow: var(--neu-convex-shadow-dark);
    color: var(--color-text-light); /* Default text in dark card */
}
.section-bg-dark .neuro-card:hover {
     box-shadow: -8px -8px 16px var(--neu-dark-highlight), 8px 8px 16px var(--neu-dark-shadow-color);
}
.section-bg-dark .neuro-card .card-title, .section-bg-dark .neuro-card .card-text {
    color: var(--color-text-light);
}
.section-bg-dark .neuro-card .neuro-button-outline {
    color: var(--color-primary-lighter);
    border-color: var(--color-primary-lighter);
}
.section-bg-dark .neuro-card .neuro-button-outline:hover {
    background-color: var(--color-primary-lighter);
    color: var(--color-text-dark);
}


.neuro-card .card-title {
    font-size: 1.4rem;
    color: var(--color-secondary-accent);
    margin-bottom: 0.75rem;
}
.neuro-card .card-text {
    color: var(--color-text-medium);
    font-size: 0.95rem;
    flex-grow: 1; /* Allow text to take space, pushing button down */
    margin-bottom: 1rem;
}
.neuro-card .card-image.image-container {
    width: 100%;
    height: 200px; /* Fixed height for uniform card images */
    overflow: hidden;
    border-radius: calc(var(--border-radius-soft) - 5px); /* Slightly smaller radius for inner element */
    margin-bottom: 1rem;
    margin-left: auto; /* Center block element if not full width */
    margin-right: auto;
}
.neuro-card .card-image.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
}
.neuro-card:hover .card-image.image-container img {
    transform: scale(1.08);
}
.neuro-card .btn, .neuro-card .neuro-button-outline {
    margin-top: auto; /* Pushes button to the bottom if card is flex-column */
    align-self: center; /* Center button */
}

/* Neuromorphic Concave Card (for less prominent elements, e.g., external resources) */
.neuro-card-concave {
    background-color: var(--color-bg-main-light);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--neu-concave-shadow-light);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.section-bg-tint .neuro-card-concave {
    background-color: var(--color-bg-tint);
}
.section-bg-dark .neuro-card-concave {
    background-color: var(--color-bg-main-dark);
    box-shadow: var(--neu-concave-shadow-dark);
}
.section-bg-dark .neuro-card-concave .card-title a,
.section-bg-dark .neuro-card-concave .card-text {
    color: var(--color-text-light);
}
.section-bg-dark .neuro-card-concave .card-title a:hover {
    color: var(--color-primary-lighter);
}


.neuro-card-concave .card-title a {
    color: var(--color-secondary-accent);
    font-weight: bold;
}
.neuro-card-concave .card-title a:hover {
    color: var(--color-primary);
}
.neuro-card-concave .card-text {
    font-size: 0.9rem;
    color: var(--color-text-medium);
}
.card-image-icon img {
    max-width: 60px; /* For icons in cards like Sustainability */
    margin-bottom: 1rem;
}


/* Research Section Specifics */
#research .stat-widget {
    background-color: rgba(255,255,255, 0.05); /* Subtle glassmorphism on dark bg */
    backdrop-filter: blur(5px);
    border-radius: var(--border-radius-soft);
    padding: 1.5rem !important;
    box-shadow: var(--neu-convex-shadow-dark); /* Use dark theme shadows */
    color: var(--color-text-light);
    text-align: center;
}
#research .stat-widget h3 {
    color: var(--color-primary-lighter);
    font-size: 3rem;
}
#research .stat-widget p {
    color: var(--color-text-light);
    opacity: 0.9;
    font-size: 0.9rem;
}


/* Innovation Section */
.neuro-image {
    border-radius: var(--border-radius-soft);
    box-shadow: var(--neu-convex-shadow-light);
}


/* Testimonials Section */
#testimonials .testimonial-card {
    background-color: rgba(255,255,255, 0.08);
    backdrop-filter: blur(8px);
    border-radius: var(--border-radius-medium);
    padding: 2rem !important;
    box-shadow: var(--neu-convex-shadow-dark);
    color: var(--color-text-light);
    text-align: center;
}
.testimonial-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 3px solid var(--color-primary-lighter);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb, 91,192,190), 0.5);
}
#testimonials .carousel-indicators button {
    background-color: var(--color-primary-lighter);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0.6;
}
#testimonials .carousel-indicators button.active {
    opacity: 1;
    background-color: var(--color-primary);
}
#testimonials .carousel-control-prev-icon,
#testimonials .carousel-control-next-icon {
    background-color: rgba(var(--color-primary-rgb, 91,192,190),0.5);
    border-radius: 50%;
    padding: 1.2rem; /* Increase clickable area */
    background-size: 50% 50%;
}


/* Contact Section */
#contact .neuro-form {
    background-color: rgba(var(--color-secondary-accent-rgb, 28,37,65), 0.7); /* Darker form background for contrast */
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neu-convex-shadow-dark);
}
#contact .form-label {
    color: var(--color-text-light) !important;
    font-weight: 600;
}
#contact .neuro-input {
    background-color: rgba(var(--color-bg-main-dark-rgb, 11,19,43), 0.8); /* Input slightly darker than form */
    box-shadow: var(--neu-concave-shadow-dark);
    color: var(--color-text-light);
}
#contact .neuro-input:focus {
    background-color: rgba(var(--color-bg-main-dark-rgb, 11,19,43), 0.9);
    box-shadow: var(--neu-concave-shadow-dark), 0 0 0 2px var(--color-primary-lighter);
}


/* Footer */
.footer-neuro {
    background-color: var(--color-bg-main-dark);
    color: var(--color-text-light);
    padding: 3rem 0;
}
.footer-neuro .footer-heading {
    font-family: var(--font-heading);
    color: var(--color-primary-lighter);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.footer-neuro .footer-link {
    color: rgba(255,255,255,0.7);
    display: inline-block;
    padding: 0.3rem 0;
    transition: var(--transition-smooth);
}
.footer-neuro .footer-link:hover {
    color: var(--color-text-light);
    transform: translateX(5px);
}
.footer-neuro hr {
    border-color: rgba(255,255,255,0.15) !important;
}
.footer-neuro .small {
    color: rgba(255,255,255,0.6);
}


/* Page Specific Styles */
/* success.html */
.success-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background-color: var(--color-bg-main-light);
}
.success-content {
    background-color: var(--color-bg-main-light);
    padding: 3rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neu-convex-shadow-light);
    max-width: 600px;
}
.success-content h1 {
    color: var(--color-primary);
    font-size: 2.5rem;
}
.success-content p {
    color: var(--color-text-medium);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* privacy.html & terms.html */
.privacy-page-container,
.terms-page-container {
    padding-top: 120px; /* Account for fixed header */
    padding-bottom: 4rem;
    background-color: var(--color-bg-main-light);
}
.privacy-page-container .container,
.terms-page-container .container {
    background-color: var(--color-text-light);
    padding: 2rem;
    border-radius: var(--border-radius-soft);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.privacy-page-container h1,
.terms-page-container h1 {
    color: var(--color-secondary-accent);
    margin-bottom: 2rem;
}
.privacy-page-container h2, .privacy-page-container h3,
.terms-page-container h2, .terms-page-container h3 {
    color: var(--color-primary-darker);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.privacy-page-container p, .privacy-page-container li,
.terms-page-container p, .terms-page-container li {
    color: var(--color-text-dark);
    line-height: 1.8;
}


/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .hero-title {
        font-size: 2.8rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .section-title {
        font-size: 2rem;
    }
    .navbar .nav-link {
        margin-left: 0;
        margin-right: 0;
        padding: 0.8rem 1rem !important;
        text-align: center;
    }
    .navbar-collapse {
        margin-top: 1rem;
        border-top: 1px solid rgba(var(--color-primary-rgb, 91,192,190),0.2);
        padding-top: 1rem;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        padding: 6rem 0;
        min-height: 60vh;
    }
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .btn, button, input[type="submit"], input[type="button"] {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
    }
    #research .stat-widget h3 {
        font-size: 2.2rem;
    }
    .footer-neuro {
        text-align: center;
    }
    .footer-neuro .col-md-4 {
        margin-bottom: 2rem;
    }
}