/* style.css */

/* CSS Variables */
:root {
    /* Color Palette - Complementary Scheme */
    --primary-color: #00D1FF; /* Bright Cyan/Teal */
    --primary-color-rgb: 0, 209, 255;
    --primary-darker: #00A8CC; 

    --secondary-color: #FF6B00; /* Vibrant Orange - Accent */
    --secondary-color-rgb: 255, 107, 0;
    --secondary-darker: #D95A00;

    --background-main: #121212; 
    --background-surface: #1E1E1E; 
    --background-surface-light: #2a2a2a; 
    --border-color: rgba(var(--primary-color-rgb), 0.3);
    --border-hover-color: rgba(var(--secondary-color-rgb), 0.7);

    /* Text Colors */
    --text-light: #E0E0E0;      
    --text-extra-light: #FFFFFF; 
    --text-medium: #A0A0A0;     
    --text-dark: #222222;       
    --text-primary-heading: var(--primary-color);
    --text-secondary-heading: var(--secondary-color);

    /* Fonts */
    --font-main: 'Nunito', sans-serif;
    --font-heading: 'Oswald', sans-serif;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-primary-alt: linear-gradient(135deg, var(--primary-darker) 0%, var(--secondary-darker) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.08), rgba(var(--secondary-color-rgb), 0.03)); /* More subtle for glass */
    --gradient-dark-overlay: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)); /* Slightly darker overlay */

    /* Animations & Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.4s;
    --transition-speed-slow: 0.6s;
    --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); /* Elastic bounce */
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

    /* Spacing & Sizing */
    --navbar-height: 65px; 
    --section-padding-vertical: 4.5rem;
    --section-padding-horizontal: 1.5rem;
    --card-border-radius: 10px;
    --button-border-radius: 30px; /* Slightly less rounded for a sharper futuristic look */
}

/* Global Styles */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    background-color: var(--background-main);
    color: var(--text-light);
    line-height: 1.75;
    font-size: 16px; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.title, .subtitle { 
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary-heading);
    margin-bottom: 1.25rem; 
    line-height: 1.3;
}

.title { 
    color: var(--text-primary-heading) !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.subtitle { 
    color: var(--text-medium) !important;
    font-family: var(--font-main); 
    font-weight: 400;
    line-height: 1.6;
}

.section-title { 
    font-size: clamp(2.2rem, 5vw, 3rem); 
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem !important;
    text-align: center;
}

.section-subtitle { 
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.5rem !important;
    text-align: center;
}


/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed-normal) var(--ease-out-quad), 
                transform var(--transition-speed-fast) var(--ease-elastic);
}
a:hover {
    color: var(--secondary-color);
    text-decoration: none; /* Ensure no underline unless specified */
}

.futuristic-link, .read-more-link {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding-bottom: 4px;
    border-bottom: 2.5px solid var(--primary-color);
    transition: border-color var(--transition-speed-normal) var(--ease-out-quad), 
                color var(--transition-speed-normal) var(--ease-out-quad),
                transform 0.2s ease-out;
    display: inline-block; /* So transform works */
}
.futuristic-link:hover, .read-more-link:hover {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
    transform: translateY(-2px);
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-heading);
    font-weight: 600; /* Slightly less bold for Oswald to maintain clarity */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: var(--button-border-radius);
    padding: 0.8em 2.2em; /* Adjusted padding */
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-speed-normal) var(--ease-elastic);
    box-shadow: 0 5px 12px rgba(0,0,0,0.25);
    outline: none;
    line-height: 1.5; /* Ensure text is vertically centered */
    text-align: center;
}

.button.is-primary,
.futuristic-button { 
    background-image: var(--gradient-primary);
    color: var(--text-extra-light) !important; 
    border: none; /* Remove border for gradient buttons */
    box-shadow: 0 7px 22px rgba(var(--primary-color-rgb), 0.35);
}
.button.is-primary:hover,
.futuristic-button:hover {
    background-image: var(--gradient-primary-alt);
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 28px rgba(var(--secondary-color-rgb), 0.45);
}
.button.is-primary:active,
.futuristic-button:active {
    transform: translateY(-2px) scale(0.97);
    box-shadow: 0 5px 18px rgba(var(--secondary-color-rgb), 0.35);
}

/* Sections global styling */
.section {
    padding: var(--section-padding-vertical) var(--section-padding-horizontal);
}

/* Header & Navigation */
.header-main .navbar.is-fixed-top {
    background-color: rgba(12, 12, 12, 0.75); /* Darker, more opaque glassmorphism base */
    backdrop-filter: blur(15px) saturate(150%); /* Enhanced glassmorphism */
    -webkit-backdrop-filter: blur(15px) saturate(150%); 
    box-shadow: 0 3px 20px rgba(var(--primary-color-rgb), 0.12);
    height: var(--navbar-height);
    transition: background-color var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
}
.navbar-item, .navbar-link {
    color: var(--text-light);
    font-family: var(--font-main); 
    font-weight: 600; 
    text-transform: uppercase;
    letter-spacing: 1px; /* Increased spacing */
    padding: 0 1.3rem; 
    display: flex;
    align-items: center;
    height: 100%;
    transition: color var(--transition-speed-fast) ease, background-color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) var(--ease-elastic);
}
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
    background-color: transparent !important; 
    color: var(--primary-color) !important;
    transform: scale(1.05); /* Subtle scale on hover */
}
.navbar-burger {
    color: var(--text-light);
    height: var(--navbar-height);
    width: var(--navbar-height);
}
.navbar-burger:hover {
    background-color: rgba(var(--primary-color-rgb), 0.15);
    color: var(--primary-color);
}
.logo-text {
    font-family: var(--font-heading);
    font-size: 2rem; /* Slightly larger */
    font-weight: 700;
    color: var(--primary-color) !important;
    letter-spacing: 1.2px;
    transition: color var(--transition-speed-normal) ease, transform var(--transition-speed-normal) var(--ease-elastic);
}
.logo-text:hover {
    color: var(--secondary-color) !important;
    transform: scale(1.03);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--background-surface); 
        box-shadow: 0 12px 25px rgba(0,0,0,0.45);
        padding: 0.5rem 0;
    }
    .navbar-item {
        padding: 0.8rem 1.6rem;
        border-bottom: 1px solid rgba(var(--text-light-rgb, 224, 224, 224), 0.08);
    }
}

/* Hero Section */
.hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; 
}
.hero::before { 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-dark-overlay); /* Using defined overlay */
    z-index: 1;
}
.hero .hero-body {
    position: relative;
    z-index: 2; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: var(--navbar-height); /* Ensure content below navbar */
}
.hero.is-fullheight .hero-body {
     min-height: calc(100vh - var(--navbar-height)); /* Adjust fullheight to be below navbar */
}
.hero-title {
    font-size: clamp(2.8rem, 7vw, 5rem); 
    color: var(--text-extra-light) !important;
    text-shadow: 3px 3px 12px rgba(0,0,0,0.75);
    margin-bottom: 1.2rem;
    line-height: 1.15;
}
.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.75rem);
    color: var(--text-extra-light) !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.65);
    max-width: 850px;
    margin-bottom: 2.8rem;
    font-family: var(--font-main);
    line-height: 1.7;
}

/* Card Styles */
.card, .futuristic-card { 
    background-image: var(--gradient-glass); /* Subtle glassmorphism background */
    background-color: var(--background-surface); /* Fallback */
    border: 1px solid var(--border-color); /* Futuristic border */
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0, 0.25), 0 0 2px rgba(var(--primary-color-rgb),0.35); 
    transition: transform var(--transition-speed-normal) var(--ease-elastic),
                box-shadow var(--transition-speed-normal) var(--ease-out-quad),
                border-color var(--transition-speed-normal) var(--ease-out-quad);
    height: 100%; 
    display: flex;
    flex-direction: column;
    text-align: center; 
}
.card:hover, .futuristic-card:hover {
    transform: translateY(-10px) scale(1.025);
    box-shadow: 0 15px 40px rgba(var(--primary-color-rgb), 0.3), 0 0 20px rgba(var(--primary-color-rgb),0.25);
    border-color: rgba(var(--primary-color-rgb), 0.6);
}

.card .card-image, .futuristic-card .card-image { 
    margin: 0 auto; 
    width: 100%; 
    overflow: hidden; 
    height: 220px; /* Consistent image container height */
    display: flex; 
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.2); /* Placeholder bg for images */
}
.card .card-image img, .futuristic-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform var(--transition-speed-slow) var(--ease-out-quad), filter 0.4s ease;
    display: block; 
    filter: saturate(1.1) contrast(1.05); /* Slight image enhancement */
}
.card:hover .card-image img, .futuristic-card:hover .card-image img {
    transform: scale(1.12);
    filter: saturate(1.2) contrast(1.1);
}

.card .card-content, .futuristic-card .card-content {
    padding: 2rem 1.5rem; /* Increased padding */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes content and potential actions apart */
}
.card .card-content .title, .futuristic-card .card-content .title { 
    color: var(--text-primary-heading) !important;
    font-size: 1.7rem;
    margin-bottom: 0.8rem;
    line-height: 1.2;
}
.card .card-content .subtitle, .futuristic-card .card-content .subtitle { 
    color: var(--text-medium) !important;
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1rem; /* Spacing for description */
}
.card .card-content .content, .futuristic-card .card-content .content { 
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.2rem; /* Space before any "read more" links */
}
.card .read-more-link, .futuristic-card .read-more-link {
    margin-top: auto; /* Push "read more" to the bottom if using flex for content */
    align-self: center; /* Center the link */
}

/* Team Member cards image styling */
.team-members .card-image {
    padding: 1.2rem; 
    height: 200px; /* Specific height for profile pics */
}
.team-members .card-image img.is-rounded {
    border: 4px solid var(--primary-color);
    box-shadow: 0 0 18px rgba(var(--primary-color-rgb), 0.35);
}

/* Partners Section */
.partners-section img {
    max-height: 65px; 
    width: auto;
    filter: grayscale(100%) brightness(2) contrast(0.8) opacity(0.6); /* More stylized filter */
    transition: all var(--transition-speed-normal) var(--ease-out-quad);
}
.partners-section img:hover {
    filter: grayscale(0%) brightness(1) contrast(1) opacity(1);
    transform: scale(1.15) rotate(2deg); /* Playful hover */
}
.custom-slider-container {
    background-color: var(--background-surface-light);
    padding: 1.8rem;
    border-radius: var(--card-border-radius);
    text-align: center;
    border: 1.5px dashed var(--border-color);
    margin-top: 2.5rem;
    color: var(--text-medium);
}

/* Events Section (Timeline) */
.timeline .timeline-header .tag.is-primary, .futuristic-tag {
    background-image: var(--gradient-primary);
    color: var(--text-extra-light);
    font-size: 1.4rem;
    padding: 0.6em 1.2em;
    border-radius: var(--button-border-radius);
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.35);
    border: none;
}
.timeline .timeline-item .timeline-marker {
    transition: transform var(--transition-speed-normal) var(--ease-elastic), box-shadow var(--transition-speed-normal) ease;
    z-index: 1;
}
.timeline .timeline-item:hover .timeline-marker {
    transform: scale(1.25);
    box-shadow: 0 0 18px rgba(var(--primary-color-rgb), 0.8);
}
/* Marker colors from Bulma - ensure they fit the theme */
.timeline .timeline-item .timeline-content {
    background-color: var(--background-surface-light);
    padding: 2rem;
    border-radius: var(--card-border-radius);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    border-left: 5px solid var(--primary-color);
    transition: border-color var(--transition-speed-normal) ease, transform 0.3s var(--ease-out-quad);
    position: relative; /* For potential pseudo-elements or advanced styling */
}
.timeline .timeline-item:hover .timeline-content {
    border-left-color: var(--secondary-color);
    transform: translateX(5px); /* Slight shift on hover */
}
.timeline .timeline-item .timeline-content .heading { 
    color: var(--text-medium);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.6rem;
}
.timeline .timeline-item .timeline-content p.is-size-5 { 
    color: var(--text-primary-heading);
    font-family: var(--font-heading);
    margin-bottom: 0.8rem;
    font-size: 1.5rem; /* Larger event titles */
    line-height: 1.3;
}
.timeline .timeline-item .timeline-content p:not(.is-size-5):not(.heading) { 
    color: var(--text-light);
    font-size: 1rem;
}

/* Press Section (Testimonials) */
.futuristic-box.testimonial {
    background-color: var(--background-surface);
    border-left: 7px solid var(--primary-color);
    padding: 2.2rem;
    border-radius: var(--card-border-radius);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    transition: border-color var(--transition-speed-normal) ease, transform 0.3s var(--ease-out-quad);
}
.futuristic-box.testimonial:hover {
    border-left-color: var(--secondary-color);
    transform: translateY(-5px);
}
.testimonial .media-content strong {
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-size: 1.1em;
}
.testimonial .media-content small {
    color: var(--text-medium);
    font-size: 0.9em;
    margin-left: 0.5em;
}
.testimonial .content p {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--text-light);
    font-style: italic; /* Common for quotes */
}

/* Contact Section & Form */
.futuristic-label {
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 0.9rem;
    display: block;
    letter-spacing: 0.5px;
}
.futuristic-input, .futuristic-textarea {
    background-color: rgba(var(--text-extra-light-rgb, 255, 255, 255), 0.04) !important; 
    border: 2px solid var(--border-color) !important;
    color: var(--text-light) !important;
    border-radius: var(--button-border-radius) !important; 
    padding: 1em 1.6em !important; /* Generous padding */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.25), 0 0 12px rgba(var(--primary-color-rgb), 0.25);
    transition: border-color var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
    font-family: var(--font-main);
    font-size: 1.05rem;
}
.futuristic-input::placeholder, .futuristic-textarea::placeholder {
    color: var(--text-medium) !important;
    opacity: 0.7;
}
.futuristic-input:focus, .futuristic-textarea:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.35), 0 0 18px rgba(var(--secondary-color-rgb), 0.5) !important;
    outline: none !important;
}
.contact-info p, .contact-details-box p {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}
.contact-details-box {
    border: 1.5px solid var(--border-color);
    background-color: var(--background-surface-light);
    padding: 2rem;
    border-radius: var(--card-border-radius);
}
.futuristic-text-highlight {
    color: var(--primary-color);
    font-weight: 600;
}
.map-container figure {
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.map-container img { 
    filter: grayscale(60%) contrast(1.15) brightness(0.85);
}

/* Switches (Checkboxes) */
.futuristic-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-light);
    font-size: 1rem;
    margin-top: 0.75rem; 
}
.switch-input { 
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.switch-slider {
    position: relative;
    display: inline-block;
    width: 52px; 
    height: 30px; 
    background-color: var(--background-surface); /* Darker base for switch */
    border: 1.5px solid var(--border-color);
    border-radius: 30px;
    transition: background-color var(--transition-speed-fast) ease, border-color var(--transition-speed-fast) ease;
    margin-right: 14px;
}
.switch-slider::before { 
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--text-medium);
    top: 2.5px; /* Adjusted for border */
    left: 3px;
    transition: transform var(--transition-speed-normal) var(--ease-elastic), background-color var(--transition-speed-fast) ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
.switch-input:checked + .switch-slider {
    background-color: var(--primary-color);
    border-color: var(--primary-darker);
}
.switch-input:checked + .switch-slider::before {
    transform: translateX(22px);
    background-color: var(--text-extra-light);
}

/* Footer */
.futuristic-footer {
    background-color: var(--background-surface);
    color: var(--text-medium);
    padding: 4.5rem var(--section-padding-horizontal) 2.5rem;
    border-top: 4px solid var(--primary-color);
    box-shadow: 0 -6px 25px rgba(var(--primary-color-rgb), 0.15);
}
.footer-logo-text {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.2rem;
}
.futuristic-footer .footer-title {
    color: var(--text-primary-heading);
    font-size: 1.35rem;
    margin-bottom: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.futuristic-footer ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.futuristic-footer ul li {
    margin-bottom: 0.7rem;
}
.futuristic-footer ul li a,
.futuristic-footer p a { /* For social media text links */
    color: var(--text-medium);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease, padding-left var(--transition-speed-fast) ease, transform var(--transition-speed-fast) var(--ease-elastic);
    display: inline-block; 
    font-size: 0.95rem;
}
.futuristic-footer ul li a:hover,
.futuristic-footer p a:hover {
    color: var(--primary-color);
    padding-left: 6px; 
    transform: translateX(2px);
}
/* Social media text links specific styling for better visual hierarchy if needed */
.futuristic-footer .column .footer-title + p a { /* Targets 'p a' directly after a social title */
    font-size: 1rem; /* Slightly larger for social links */
    padding: 0.2rem 0; /* More space around social links */
}

.futuristic-footer .footer-hr {
    background-image: linear-gradient(to right, transparent, rgba(var(--primary-color-rgb), 0.3), transparent); /* Gradient HR */
    height: 1.5px;
    border: none;
    margin: 2.5rem 0;
}
.futuristic-footer .content p {
    color: var(--text-medium);
    font-size: 0.95rem;
}
.futuristic-footer .content a { 
    color: var(--primary-color);
    font-weight: 600;
}


/* Page Specific Styles */
.page-content-section { 
    padding-top: calc(var(--navbar-height) + 50px); /* Increased top padding */
    padding-bottom: var(--section-padding-vertical);
    min-height: calc(100vh - var(--navbar-height) - 200px); /* Approx footer height: 150px + some margin */
}
.page-content-section .content p,
.page-content-section .content ul,
.page-content-section .content ol {
    font-size: 1.1rem; /* Slightly larger text for content pages */
    line-height: 1.9;
    margin-bottom: 1.4rem;
    max-width: 820px; 
    margin-left: auto;
    margin-right: auto;
}
.page-content-section .content strong {
    color: var(--primary-color);
    font-weight: 600;
}
.page-content-section .content ul,
.page-content-section .content ol {
    padding-left: 1.8em;
}
.page-content-section .content li {
    margin-bottom: 0.6em;
}

.success-page-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; 
    text-align: center;
    padding: var(--section-padding-horizontal);
    padding-top: var(--navbar-height); 
}
.success-icon {
    font-size: 7rem; 
    color: var(--primary-color);
    margin-bottom: 1.8rem;
    animation: successPulse 1.5s infinite alternate var(--ease-elastic);
}
@keyframes successPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 1; }
}


/* Scroll Animations */
.animate-on-scroll {
    opacity: 1;
    transform: translateY(50px); 
    transition: opacity var(--transition-speed-slow) var(--ease-out-quad),
                transform var(--transition-speed-slow) var(--ease-elastic); 
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Barba.js Page Transitions (enhanced for elasticity) */
.barba-leave-active {
  animation: page-leave var(--transition-speed-normal) var(--ease-in-out-circ) forwards;
}
.barba-enter-active {
  animation: page-enter var(--transition-speed-normal) var(--ease-in-out-circ) forwards;
  animation-delay: 0.1s; /* Slight delay for smoother entry */
}

@keyframes page-leave {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(30px) scale(0.95); }
}
@keyframes page-enter {
  0% { opacity: 0; transform: translateY(-30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cookie Consent Popup */
#cookieConsentPopup {
    font-family: var(--font-main);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3); /* Shadow for popup */
}
#cookieConsentPopup p {
    font-size: 1em; /* Ensure readability */
    line-height: 1.65;
}
#cookieConsentPopup a {
    color: var(--primary-color) !important;
    font-weight: 600;
}
#cookieConsentPopup button#acceptCookieButton {
    background-color: var(--primary-color) !important;
    color: var(--background-main) !important;
    font-family: var(--font-heading);
    text-transform: uppercase;
    border-radius: var(--button-border-radius);
    padding: 0.7em 1.8em;
    transition: background-color var(--transition-speed-fast) ease, transform 0.2s var(--ease-elastic);
    letter-spacing: 1px;
}
#cookieConsentPopup button#acceptCookieButton:hover {
    background-color: var(--primary-darker) !important;
    transform: scale(1.05);
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .section-title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }
    .section-subtitle {
        font-size: clamp(0.9rem, 3.5vw, 1.05rem);
        margin-bottom: 2.5rem !important;
    }
    .hero-title {
        font-size: clamp(2.2rem, 9vw, 4rem);
    }
    .hero-subtitle {
        font-size: clamp(1rem, 4.5vw, 1.4rem);
    }
    .columns.is-multiline .column { 
        margin-bottom: 2rem; /* Increased spacing between stacked cards */
    }
    .futuristic-footer .columns > .column {
        text-align: center; 
        margin-bottom: 2.5rem;
    }
    .futuristic-footer .footer-logo-text {
        text-align: center;
    }
     .page-content-section {
        padding-top: calc(var(--navbar-height) + 30px);
    }
    .futuristic-input, .futuristic-textarea {
        padding: 0.9em 1.4em !important;
    }
    .card .card-image, .futuristic-card .card-image {
        height: 180px; /* Slightly smaller image container on mobile */
    }
}

@media screen and (max-width: 480px) {
    :root { /* Finer adjustments for very small screens */
        --section-padding-vertical: 3.5rem;
    }
    .button, button, input[type="submit"], input[type="button"] {
        padding: 0.7em 1.8em;
        font-size: 0.9rem; /* Slightly smaller buttons */
    }
    .logo-text {
        font-size: 1.7rem;
    }
}

.image.is-4by3 {
  
  width: 100%;
}

.image.is-1by1 {
    width: 100%;
}