:root {
    /* Font Variables */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Work Sans', sans-serif;

    /* Color Palette - Gradient Scheme */
    /* Main Theme Colors (Bold & Vibrant) */
    --color-primary-start: #6a11cb; /* Deep Purple */
    --color-primary-end: #2575fc;   /* Bright Blue */
    --color-primary-hover-start: #5a0fb3;
    --color-primary-hover-end: #1e63d4;

    /* Accent Colors */
    --color-accent-start: #f39c12; /* Bright Orange */
    --color-accent-end: #e74c3c;   /* Bright Red/Coral */
    --color-accent-hover-start: #e08e0b;
    --color-accent-hover-end: #c0392b;

    /* Text Colors */
    --color-text-light: #ffffff;
    --color-text-light-secondary: #f0f0f0;
    --color-text-dark: #343a40; /* Bootstrap's default dark, good for body */
    --color-text-dark-headings: #212529; /* Bootstrap's default darker, for headings */
    --color-text-muted: #6c757d;

    /* Backgrounds */
    --color-bg-light: #f8f9fa; /* Off-white for general page background */
    --color-bg-card: #ffffff;
    --gradient-section-light: linear-gradient(135deg, #e9f0ff 0%, #d4e0ff 100%); /* Subtle light blueish */
    --gradient-section-alt: linear-gradient(135deg, #f5f7fa 0%, #e0e7ef 100%); /* Alternative very light */
    --gradient-header-footer: linear-gradient(to right, var(--color-primary-start), var(--color-primary-end));

    /* Shadows & Borders */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --border-radius-sm: 0.3rem;      /* Subtle rounding */
    --border-radius-md: 0.6rem;      /* Biomorphic touch */
    --border-radius-lg: 1.2rem;      /* More pronounced biomorphic */

    /* Transitions */
    --transition-fast: all 0.2s ease-in-out;
    --transition-smooth: all 0.3s ease-in-out;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Glassmorphism (optional use) */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-blur: blur(10px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Global Styles & Resets */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 0px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-dark-headings);
    margin-bottom: var(--spacing-md);
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.5rem; }

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-dark); /* Ensure good contrast for paragraph text */
}

a {
    color: var(--color-primary-end);
    text-decoration: none;
    transition: var(--transition-smooth);
}
a:hover {
    color: var(--color-primary-start);
    text-decoration: none; /* Often preferred in modern designs */
}

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

ul, ol {
    list-style: none;
    padding-left: 0;
}

/* Global Button Styles */
.btn, button, input[type='submit'], input[type='button'] {
    font-family: var(--font-primary);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md); /* Biomorphic touch */
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
}

/* Primary Button Style (Gradient) */
.btn-primary,
button[type='submit'] { /* Assuming submit buttons are primary */
    background: linear-gradient(to right, var(--color-primary-start), var(--color-primary-end));
    color: var(--color-text-light);
}
.btn-primary:hover,
button[type='submit']:hover {
    background: linear-gradient(to right, var(--color-primary-hover-start), var(--color-primary-hover-end));
    color: var(--color-text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Accent Button Style (Gradient) - for "Read More" or special CTAs */
.btn-accent {
    background: linear-gradient(to right, var(--color-accent-start), var(--color-accent-end));
    color: var(--color-text-light);
}
.btn-accent:hover {
    background: linear-gradient(to right, var(--color-accent-hover-start), var(--color-accent-hover-end));
    color: var(--color-text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Outline Button Style */
.btn-outline-primary {
    background-color: transparent;
    border: 2px solid var(--color-primary-end);
    color: var(--color-primary-end);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary-end);
    color: var(--color-text-light);
    border-color: var(--color-primary-end);
}

/* General Section Styling */
section {
    padding: var(--spacing-xxl) 0; /* Natural height based on content */
    overflow: hidden; /* For AOS animations */
}
.section-bg-gradient {
    background: var(--gradient-section-light);
}
.section-bg-gradient-alt {
    background: var(--gradient-section-alt);
}
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xl) !important;
    color: var(--color-text-dark-headings);
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.section-title-subpage { /* For internal pages */
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-dark-headings);
    text-align: left; /* Default for subpage titles within content flow */
}

/* Header (Fixed Navigation) */
header.sticky-top .navbar {
    background: var(--gradient-header-footer);
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow-md);
}
header .navbar-brand {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-light) !important;
}
header .nav-link {
    font-family: var(--font-primary);
    color: var(--color-text-light-secondary) !important;
    margin-left: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}
header .nav-link:hover,
header .nav-link.active {
    color: var(--color-text-light) !important;
    background-color: rgba(255, 255, 255, 0.1);
}
.navbar-toggler {
    border-color: rgba(255,255,255,0.3);
}
.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(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.dropdown-menu {
    background-color: var(--color-primary-end); /* Consistent with header */
    border: none;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
}
.dropdown-item {
    color: var(--color-text-light-secondary);
    font-family: var(--font-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
}
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
    background-color: var(--color-primary-start);
    color: var(--color-text-light);
}


/* Hero Section */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 0; /* Adjust padding instead of min-height */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Parallax effect */
    position: relative;
    color: var(--color-text-light); /* Enforced white text */
}
/* Overlay is applied inline via style attribute in HTML */
.hero-section h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-text-light);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    margin-bottom: var(--spacing-lg);
}
.hero-section .lead {
    font-size: 1.5rem;
    color: var(--color-text-light-secondary);
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.hero-btn { /* Specific if different from .btn-primary */
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.2rem;
    border-radius: 50px; /* More biomorphic */
}

/* Card Component (Services, Case Studies, News, Behind the Scenes, External Resources) */
.card {
    background-color: var(--color-bg-card);
    border: none;
    border-radius: var(--border-radius-lg); /* Biomorphic curves */
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    overflow: hidden;
    height: 100%; /* For Bootstrap column equal height */
    display: flex; /* STROGO: */
    flex-direction: column; /* STROGO: */
    align-items: center; /* STROGO: Centers .card-image and .card-content */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.card .card-image {
    width: 100%;
    height: 250px; /* STROGO: Fixed height for image container, adjust as needed */
    overflow: hidden;
    /* margin-bottom: var(--spacing-md); Implicitly centered by align-items: center on .card */
}
.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGO: */
    transition: transform 0.4s ease;
}
.card:hover .card-image img {
    transform: scale(1.05);
}
.card-content.card-body {
    padding: var(--spacing-lg);
    width: 100%; /* To allow text alignment within */
    text-align: left; /* Default for card text */
    flex-grow: 1; /* Allows footer elements in card (like button) to stick to bottom */
    display: flex;
    flex-direction: column;
}
.card-title {
    font-size: 1.4rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-dark-headings);
    text-align: center; /* Titles in cards often look good centered */
}
.card-text {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    flex-grow: 1; /* Pushes button to bottom if card-body is flex */
}
.card .btn { /* Button at the bottom of a card */
    margin-top: auto; /* Pushes button to the bottom */
    align-self: center; /* Center button if card-body is flex */
}

/* Specific Card types if needed, e.g., resource card needs button at bottom */
.resource-card .card-body {
    justify-content: space-between; /* To push button to bottom */
}


/* Gallery (Carousel) */
#imageGallery .carousel-item {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}
#imageGallery .carousel-item img {
    max-height: 65vh; /* Responsive height */
    object-fit: cover;
    width: 100%;
}
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.65) !important;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md) !important;
    bottom: var(--spacing-lg); /* Adjust caption position */
}
.carousel-caption h5 {
    color: var(--color-text-light);
    text-shadow: 1px 1px 2px #000;
    margin-bottom: var(--spacing-xs);
}
.carousel-caption p {
    color: var(--color-text-light-secondary);
    text-shadow: 1px 1px 2px #000;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Vision, Innovation, Sustainability Sections (often 2-col with image) */
.vision-section img, .innovation-section img, .sustainability-section img { /* Assuming these classes for parent divs */
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

/* Events Calendar (Table) */
.events-table {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-top: var(--spacing-md);
}
.events-table thead {
    background: linear-gradient(to right, var(--color-accent-start), var(--color-accent-end));
    color: var(--color-text-light);
}
.events-table th, .events-table td {
    padding: var(--spacing-md);
    vertical-align: middle;
    border-top: 1px solid #dee2e6; /* Bootstrap's default border */
}
.events-table th {
    font-family: var(--font-primary);
    font-weight: 600;
}
.events-table tbody tr:hover {
    background-color: var(--gradient-section-alt); /* Using a light gradient for hover */
}

/* Contact Section */
#contactForm label, #contactPageForm label {
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-xs);
}
.form-control {
    border-radius: var(--border-radius-md); /* Biomorphic */
    border: 1px solid #ced4da;
    padding: var(--spacing-sm) var(--spacing-md);
    transition: var(--transition-smooth);
    background-color: var(--color-bg-card); /* Ensure contrast if page bg is dark */
    color: var(--color-text-dark);
}
.form-control:focus {
    border-color: var(--color-primary-end);
    box-shadow: 0 0 0 0.2rem rgba(37, 117, 252, 0.25); /* Using primary-end for focus */
}
.contact-details {
    padding-left: var(--spacing-md); /* If it's next to the form */
}
.contact-details p {
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
}
.contact-details i.fas { /* Assuming FontAwesome */
    color: var(--color-primary-end);
    margin-right: var(--spacing-sm);
    width: 20px; /* Fixed width for alignment */
    text-align: center;
}
.contact-details a {
    color: var(--color-text-dark);
}
.contact-details a:hover {
    color: var(--color-primary-start);
}

/* Footer */
footer {
    background: var(--gradient-header-footer);
    color: var(--color-text-light-secondary);
    padding: var(--spacing-xxl) 0 var(--spacing-md) 0;
}
footer .footer-title {
    color: var(--color-text-light);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    font-size: 1.25rem;
}
footer p {
    color: var(--color-text-light-secondary);
    font-size: 0.9rem;
}
footer .list-unstyled li {
    margin-bottom: var(--spacing-sm);
}
footer .footer-link { /* Text-based social links */
    color: var(--color-text-light-secondary);
    transition: var(--transition-fast);
    display: inline-block; /* For better hover interaction */
    padding: var(--spacing-xs) 0;
}
footer .footer-link:hover {
    color: var(--color-accent-start); /* Accent color for footer links */
    text-decoration: none;
    transform: translateX(3px);
}
footer hr {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}
footer .text-center.pb-4 { /* Copyright text */
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}


/* Page Specific Styles */

/* Hero on sub-pages (About, Contact, Privacy, Terms) */
.page-title-section {
    padding: 5rem 0; /* Natural height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text-light);
    text-align: center;
    /* Overlay is applied inline via style attribute in HTML */
}
.page-title-section h1 {
    color: var(--color-text-light);
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    font-size: 2.8rem;
}
.page-title-section .lead {
    color: var(--color-text-light-secondary);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    font-size: 1.3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Content pages like Privacy & Terms */
.content-page {
    padding-top: 100px; /* VAZHNO: Avoid header overlap */
}
.content-page p, .content-page li {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-dark);
}
.content-page ul {
    list-style: disc;
    padding-left: var(--spacing-lg);
}
.content-page ul li {
    margin-bottom: var(--spacing-sm);
}
.content-page h3 {
    color: var(--color-text-dark-headings);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
    font-size: 1.6rem;
}

/* Success Page */
.success-page-container { /* Applied to main container in success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* VAZHNO: */
    text-align: center;
    padding: var(--spacing-lg);
    /* background: linear-gradient(135deg, var(--color-primary-start), var(--color-primary-end)); Provided inline */
    color: var(--color-text-light);
}
.success-icon {
    font-size: 6rem; /* Large icon */
    /* color: #2ecc71;  Provided inline or via SVG fill */
    margin-bottom: var(--spacing-lg);
}
.success-message h1 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-text-light);
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}
.success-message p {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xl);
    color: var(--color-text-light-secondary);
}
.btn-home { /* Specific style for success page button if needed */
    /* background-color: var(--color-accent-start); Provided inline */
    /* border-color: var(--color-accent-start); */
    font-size: 1.1rem;
}
/* .btn-home:hover provided inline */

/* Barba.js Page Transitions (Placeholder classes) */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-primary-start); /* Match a theme color */
    z-index: 10000; /* High z-index */
    transform: translateY(100%);
    pointer-events: none; /* Allow clicks through during animation if it's just visual */
}
/* Example classes for Barba.js (customize as needed in script.js) */
.fade-out {
    animation: fadeOutTransition 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.fade-in {
    animation: fadeInTransition 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@keyframes fadeOutTransition {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-30px); /* Subtle exit up */ }
}
@keyframes fadeInTransition {
    from { opacity: 0; transform: translateY(30px); /* Subtle entry from bottom */ }
    to { opacity: 1; transform: translateY(0); }
}
html.is-animating .page-transition {
    transform: translateY(0);
    pointer-events: auto;
}

/* Cookie Consent Popup (styles from prompt, adapted to variables) */
#cookieConsentPopup {
    /* display: none; Managed by JS */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(33, 37, 41, 0.9); /* Dark semi-transparent */
    color: var(--color-text-light);
    padding: var(--spacing-md) var(--spacing-lg);
    z-index: 9999;
    text-align: center;
    font-family: var(--font-secondary);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookieConsentPopup p {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 0.9rem;
    color: var(--color-text-light-secondary);
}
#cookieConsentPopup button#acceptCookieButton {
    background: var(--color-accent-start);
    color: var(--color-text-light);
    border: none;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
}
#cookieConsentPopup button#acceptCookieButton:hover {
    background: var(--color-accent-hover-start);
}

/* "Read More" Link Styling */
.read-more-link {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-primary-end);
    display: inline-block;
    margin-top: var(--spacing-sm);
    transition: var(--transition-smooth);
    position: relative;
    padding-right: 20px; /* Space for arrow */
}
.read-more-link::after {
    content: '\2192'; /* Right arrow */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: var(--transition-smooth);
    opacity: 0.8;
}
.read-more-link:hover {
    color: var(--color-primary-start);
    text-decoration: none;
}
.read-more-link:hover::after {
    transform: translateY(-50%) translateX(3px);
    opacity: 1;
}


/* Responsive Adjustments */
@media (max-width: 991.98px) {
    h1 { font-size: 2.4rem; }
    .hero-section h1 { font-size: 2.8rem; }
    .hero-section .lead { font-size: 1.3rem; }
    .section-title { font-size: 2rem; }

    header .navbar-nav {
        background-color: rgba(44, 62, 80, 0.98); /* Darker for mobile menu consistency */
        border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
        padding: var(--spacing-sm);
        margin-top: var(--spacing-sm);
        box-shadow: var(--shadow-sm);
    }
    header .nav-link {
        margin-left: 0;
        padding: var(--spacing-sm) var(--spacing-md);
        display: block; /* Full width tap target */
    }
    .content-page {
        padding-top: 80px; /* Adjust for smaller screens if header height changes */
    }
}

@media (max-width: 767.98px) {
    h1 { font-size: 2rem; }
    .hero-section h1 { font-size: 2.2rem; }
    .hero-section .lead { font-size: 1.1rem; }
    .section-title { font-size: 1.8rem; }
    .card .card-image { height: 200px; } /* Maybe reduce image height on smaller screens */

    footer .text-lg-start { /* Bootstrap class for text alignment */
        text-align: center !important;
    }
    footer .col-lg-4, footer .col-md-6 { /* Ensure columns stack and center text */
        margin-bottom: var(--spacing-lg);
    }
    .page-title-section { padding: 3rem 0; }
    .page-title-section h1 { font-size: 2.2rem; }
    .page-title-section .lead { font-size: 1.1rem; }
}

@media (max-width: 575.98px) {
    body { font-size: 0.95rem; }
    h1 { font-size: 1.8rem; }
    .hero-section h1 { font-size: 2rem; }
    .hero-section .lead { font-size: 1rem; }
    .hero-btn { padding: var(--spacing-sm) var(--spacing-lg); font-size: 1rem; }
    .btn, button, input[type='submit'], input[type='button'] {
        padding: calc(var(--spacing-sm) * 0.9) calc(var(--spacing-lg) * 0.9);
        font-size: 0.9rem;
    }
    #cookieConsentPopup p { font-size: 0.8rem; }
    #cookieConsentPopup button#acceptCookieButton { font-size: 0.8rem; }
}