/* style.css */

:root {
    /* Monochromatic Dark Theme with Neon Accent */
    --color-primary-darkest: #0a0a0a; /* Deepest background, e.g., footer */
    --color-primary-dark: #1a1a1a;    /* Main background for dark sections */
    --color-primary-medium: #2c2c2c;  /* Card backgrounds on dark theme */
    --color-primary-light: #3f3f3f;   /* Lighter elements on dark theme, or hover states */
    
    --color-secondary-lightest: #f8f9fa; /* Main background for light sections */
    --color-secondary-light: #e9ecef;   /* Card backgrounds on light theme */
    --color-secondary-medium: #ced4da;  /* Borders or subtle elements on light theme */

    --color-accent: #00bfff;          /* Neon Cyan/Blue - Main Accent */
    --color-accent-darker: #009acd;   /* Darker accent for gradients, hovers */
    --color-accent-glow: rgba(0, 191, 255, 0.3); /* Glow effect for accent */

    --color-text-light: #f5f5f5;      /* Text on dark backgrounds */
    --color-text-light-muted: #b0b0b0;/* Muted text on dark backgrounds */
    --color-text-dark: #212529;       /* Text on light backgrounds (Bootstrap's default dark) */
    --color-text-dark-muted: #6c757d; /* Muted text on light backgrounds (Bootstrap's default muted) */

    /* Fonts */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Merriweather', serif;

    /* Volumetric Shadows */
    --shadow-volumetric-dark-strong: 
        5px 5px 15px rgba(0,0,0,0.5), 
        -3px -3px 10px rgba(50,50,50,0.15),
        inset 1px 1px 2px rgba(50,50,50,0.2), 
        inset -1px -1px 2px rgba(0,0,0,0.3);
    --shadow-volumetric-dark-soft: 
        3px 3px 10px rgba(0,0,0,0.3), 
        -2px -2px 8px rgba(45,45,45,0.1);
    
    --shadow-volumetric-light-strong: 
        5px 5px 15px rgba(0,0,0,0.15), 
        -3px -3px 10px rgba(255,255,255,0.8),
        inset 1px 1px 2px rgba(255,255,255,0.5), 
        inset -1px -1px 2px rgba(0,0,0,0.05);
    --shadow-volumetric-light-soft: 
        3px 3px 10px rgba(0,0,0,0.1), 
        -2px -2px 8px rgba(255,255,255,0.6);

    --shadow-inset-input: 
        inset 2px 2px 5px rgba(0,0,0,0.5), 
        inset -2px -2px 5px rgba(50,50,50,0.15);
    
    --header-height: 80px;
    --border-radius-main: 12px;
    --border-radius-small: 8px;
}

/* GLOBAL STYLES & RESETS */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
    line-height: 1.7;
    padding-top: var(--header-height); /* Account for fixed header */
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.75rem; /* Default bottom margin for headings */
}

h1 { font-size: 2.8rem; margin-bottom: 1.5rem; }
h2 { font-size: 2.2rem; margin-bottom: 1.25rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
a:hover {
    color: var(--color-accent-darker);
    text-shadow: 0 0 5px var(--color-accent-glow);
}

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

/* Basic section styling */
section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    position: relative;
}

.container, .container-fluid {
    position: relative; /* For z-indexing content above pseudo-elements if needed */
    z-index: 1;
}

/* Text on light backgrounds */
.futuristic-section-alt {
    background-color: var(--color-secondary-lightest);
    color: var(--color-text-dark);
}
.futuristic-section-alt h1, 
.futuristic-section-alt h2, 
.futuristic-section-alt h3,
.futuristic-section-alt h4,
.futuristic-section-alt h5,
.futuristic-section-alt h6 {
    color: var(--color-text-dark); /* Ensure headings are dark */
    text-shadow: none; /* Remove dark shadows on light bg */
}
.futuristic-section-alt p,
.futuristic-section-alt li {
    color: #333333; /* Slightly darker for better readability */
}
.futuristic-section-alt a {
    color: var(--color-accent-darker);
}
.futuristic-section-alt a:hover {
    color: var(--color-accent);
}

/* Text on dark backgrounds (default) */
.futuristic-section {
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
}
.futuristic-section h1, 
.futuristic-section h2, 
.futuristic-section h3,
.futuristic-section h4,
.futuristic-section h5,
.futuristic-section h6 {
    color: var(--color-text-light);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.futuristic-section p,
.futuristic-section li {
    color: var(--color-text-light-muted);
}
.futuristic-section .lead {
    color: #E0E0E0; /* Slightly brighter lead text */
}

/* Section title global styling */
section h2.display-4 {
    text-align: center;
    margin-bottom: 3rem !important; /* Bootstrap's .display-4 has large margin, more consistent here */
}


/* HEADER / NAVIGATION */
.futuristic-navbar {
    background-color: rgba(10, 10, 10, 0.75); /* Darker, more opaque glassmorphism */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid rgba(var(--r), var(--g), var(--b), 0.1) !important; /* Accent color dynamic*/
    --r: 0; --g: 191; --b: 255; /* Default to --color-accent */
    border-bottom: 1px solid rgba(0, 191, 255, 0.2); /* Fallback if CSS vars in rgba() not fully supported in some contexts */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition: background-color 0.3s ease;
    z-index: 1030; /* Bootstrap's fixed-top z-index */
}
.futuristic-navbar .navbar-brand {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-accent) !important;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.futuristic-navbar .navbar-brand:hover {
    color: var(--color-text-light) !important;
    text-shadow: 0 0 8px var(--color-accent-glow);
}
.futuristic-navbar .nav-link {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: var(--color-text-light-muted) !important;
    margin: 0 0.5rem;
    padding: 0.5rem 0.75rem !important;
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}
.futuristic-navbar .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease-in-out;
}
.futuristic-navbar .nav-link:hover,
.futuristic-navbar .nav-link.active {
    color: var(--color-accent) !important;
    transform: translateY(-2px);
}
.futuristic-navbar .nav-link:hover::before,
.futuristic-navbar .nav-link.active::before {
    width: 70%;
}
.navbar-toggler {
    border-color: rgba(0, 191, 255, 0.4);
    box-shadow: 0 0 10px var(--color-accent-glow);
}
.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(0, 191, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
    .futuristic-navbar .navbar-collapse {
        background-color: rgba(20, 20, 20, 0.95);
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: var(--border-radius-small);
        border: 1px solid rgba(0, 191, 255, 0.1);
    }
    .futuristic-navbar .nav-link {
        margin: 0.5rem 0;
    }
    .futuristic-navbar .nav-link::before {
        left: 0;
        transform: translateX(0%);
    }
    .futuristic-navbar .nav-link:hover::before,
    .futuristic-navbar .nav-link.active::before {
        width: 30%;
    }
}

/* HERO SECTION */
#hero {
    min-height: calc(100vh - var(--header-height)); /* Adjust if body padding-top covers header space */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Parallax effect */
    color: #FFFFFF; /* Strictly white text for hero */
    text-align: center;
}
#hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #FFFFFF; /* Strictly white text for hero */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* Stronger shadow for readability */
}
#hero p.lead {
    font-size: 1.3rem;
    color: #FFFFFF; /* Strictly white text for hero */
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
}
@media (max-width: 768px) {
    #hero h1 {
        font-size: 2.5rem;
    }
    #hero p.lead {
        font-size: 1.1rem;
    }
}

/* BUTTONS (Global) */
.btn, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.75rem 1.75rem; /* 12px 30px */
    border-radius: var(--border-radius-small);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d; /* For 3D effects */
    perspective: 1000px;
    font-weight: 600;
}
.btn:focus, button:focus, input[type="submit"]:focus, input[type="button"]:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--color-accent-glow);
}

/* Primary Button Style */
.btn-primary,
button[type="submit"]:not([class*="btn-"]), /* Default submit buttons */
.futuristic-button { /* Specific class from HTML */
    background: linear-gradient(145deg, var(--color-accent), var(--color-accent-darker));
    color: var(--color-primary-darkest); /* Dark text on bright button */
    box-shadow: var(--shadow-volumetric-dark-soft), 0 0 10px var(--color-accent-glow);
}
.btn-primary:hover,
button[type="submit"]:not([class*="btn-"]):hover,
.futuristic-button:hover {
    background: linear-gradient(145deg, var(--color-accent-darker), var(--color-accent));
    color: #FFFFFF; /* White text on hover */
    transform: translateY(-3px) translateZ(10px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 191, 255, 0.4), 
                inset 0 -2px 3px rgba(0,0,0,0.2),
                inset 0 2px 3px rgba(255,255,255,0.1);
}

/* Outline Button Style (for dark backgrounds) */
.btn-outline-light,
.futuristic-button-outline { /* Specific class from HTML */
    background-color: transparent;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    padding: calc(0.75rem - 2px) calc(1.75rem - 2px); /* Adjust padding for border */
}
.btn-outline-light:hover,
.futuristic-button-outline:hover {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    border-color: var(--color-accent);
    box-shadow: 0 0 15px var(--color-accent-glow);
    transform: translateY(-2px) scale(1.01);
}

/* Dark Button Style (for light backgrounds) */
.futuristic-button-dark {
    background: linear-gradient(145deg, #404040, var(--color-primary-medium));
    color: var(--color-text-light);
    box-shadow: var(--shadow-volumetric-light-soft);
}
.futuristic-button-dark:hover {
    background: linear-gradient(145deg, var(--color-primary-medium), #404040);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* Outline Dark Button Style (for light backgrounds) */
.btn-outline-dark,
.futuristic-button-outline-dark {
    background-color: transparent;
    border: 2px solid var(--color-text-dark);
    color: var(--color-text-dark);
    padding: calc(0.75rem - 2px) calc(1.75rem - 2px);
}
.btn-outline-dark:hover,
.futuristic-button-outline-dark:hover {
    background-color: var(--color-text-dark);
    color: var(--color-secondary-lightest);
    border-color: var(--color-text-dark);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

/* "Read More" Link Styles */
.read-more-link {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-accent);
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 0;
    position: relative;
}
.read-more-link::after {
    content: ' →';
    transition: transform 0.3s ease;
    display: inline-block;
}
.read-more-link:hover {
    color: var(--color-accent-darker);
    text-shadow: 0 0 5px var(--color-accent-glow);
}
.read-more-link:hover::after {
    transform: translateX(5px);
}


/* CARDS */
.card {
    border: none; /* Remove Bootstrap default border */
    border-radius: var(--border-radius-main);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    /* align-items: center; /* STROGO requirement - applies to content *within* the card */
    text-align: center; /* STROGO requirement */
    height: 100%; /* For consistent height in rows/grids */
}
.card:hover {
    transform: translateY(-8px) scale(1.03) rotateX(2deg) rotateY(-1deg);
    perspective: 1000px;
}

/* Dark Theme Cards */
.futuristic-card,
.testimonial-card { /* Includes testimonial specific styling if any */
    background-color: var(--color-primary-medium);
    box-shadow: var(--shadow-volumetric-dark-strong);
    color: var(--color-text-light-muted);
}
.futuristic-card:hover {
     box-shadow: 0 15px 35px rgba(0, 191, 255, 0.15), 
                -5px -5px 20px rgba(60,60,60,0.2),
                var(--shadow-volumetric-dark-strong);
}
.futuristic-card .card-title,
.testimonial-card .card-title { /* Assuming card-title is h5 from HTML */
    color: var(--color-accent);
    font-family: var(--font-heading);
}
.futuristic-card .card-text,
.testimonial-card .card-text {
    color: var(--color-text-light-muted);
    font-size: 0.95rem;
}

/* Light Theme Cards */
.futuristic-card-light,
.futuristic-award-card { /* Includes award specific styling if any */
    background-color: var(--color-secondary-light);
    box-shadow: var(--shadow-volumetric-light-strong);
    color: var(--color-text-dark-muted);
}
.futuristic-card-light:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), 
                -5px -5px 20px rgba(255,255,255,0.7),
                var(--shadow-volumetric-light-strong);
}
.futuristic-card-light .card-title,
.futuristic-award-card h5 {
    color: var(--color-text-dark);
    font-family: var(--font-heading);
}
.futuristic-card-light .card-text,
.futuristic-award-card p {
    color: var(--color-text-dark-muted);
    font-size: 0.95rem;
}

/* Card Image Container & Image Styling */
.card .card-image { /* Generic image container in card */
    width: 100%;
    /* height: 200px; Fixed height for consistency in grids */
    /* For product carousel cards (mx-auto, max-width: 500px), aspect ratio might be better */
    aspect-ratio: 16 / 10; /* Adjust as needed, e.g., 3/2, 4/3, 16/9 */
    overflow: hidden;
    margin-bottom: 1rem; /* Space between image and content */
    display: flex; /* STROGO requirement if image is direct child */
    justify-content: center; /* STROGO requirement */
    align-items: center; /* STROGO requirement */
    margin-left: auto; /* STROGO requirement for centering block element */
    margin-right: auto; /* STROGO requirement */
}
.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGO requirement */
    transition: transform 0.5s ease;
    display: block; /* Remove extra space below image */
}
.card:hover .card-image img {
    transform: scale(1.1) rotate(1deg);
}
/* Specific for testimonial avatars */
.testimonial-card .card-image { /* Override general card image styles for avatars */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    border: 3px solid var(--color-accent);
    padding: 3px; /* Creates a gap for the border */
    background-color: var(--color-primary-light); /* BG for the avatar padding */
}
.testimonial-card .card-image img {
    border-radius: 50%; /* Ensure image itself is round */
}
/* Specific for award icons */
.futuristic-award-card img {
    width: 80px; /* Fixed size for award icons */
    height: 80px;
    object-fit: contain; /* Use contain if icons have transparent backgrounds or specific shapes */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}
.card-body {
    flex-grow: 1; /* Allows card body to fill space, pushing cta to bottom if card has fixed height */
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes CTA to bottom if used in flex context */
}
.card-body > *:last-child {
    margin-bottom: 0; /* Remove bottom margin from last element in card-body */
}

/* FORMS */
.futuristic-form-container, 
.futuristic-contact-details, 
.futuristic-success-box,
.futuristic-value-card {
    background-color: rgba(var(--r-dark), var(--g-dark), var(--b-dark), 0.6); /* Darker semi-transparent */
    --r-dark: 20; --g-dark: 20; --b-dark: 20; /* Fallback values for primary dark */
    backdrop-filter: blur(10px) brightness(0.8);
    -webkit-backdrop-filter: blur(10px) brightness(0.8);
    padding: 2.5rem;
    border-radius: var(--border-radius-main);
    border: 1px solid rgba(0, 191, 255, 0.2);
    box-shadow: var(--shadow-volumetric-dark-strong);
}
.futuristic-form-container h3,
.futuristic-contact-details h3,
.futuristic-value-card h4 {
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: 2rem;
}
.futuristic-input, .form-control { /* Target Bootstrap's .form-control as well */
    background-color: rgba(10,10,10,0.5);
    border: 1px solid var(--color-primary-light);
    color: var(--color-text-light);
    padding: 0.8rem 1rem;
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-inset-input);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    font-family: var(--font-body);
    font-size: 1rem;
}
.futuristic-input:focus, .form-control:focus {
    background-color: rgba(0,0,0,0.7);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem var(--color-accent-glow), var(--shadow-inset-input);
    color: var(--color-text-light);
}
.form-label {
    color: var(--color-text-light-muted);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}
.form-check-input.futuristic-checkbox {
    background-color: var(--color-primary-medium);
    border: 1px solid var(--color-primary-light);
    border-radius: 4px;
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15em;
    box-shadow: var(--shadow-inset-input);
}
.form-check-input.futuristic-checkbox:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a0a0a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-label {
    color: var(--color-text-light-muted);
    font-size: 0.9rem;
}
.form-check-label a {
    color: var(--color-accent) !important; /* Ensure links are visible */
}

/* ACCORDION */
.futuristic-accordion .accordion-item {
    background-color: var(--color-primary-medium);
    border: 1px solid rgba(0, 191, 255, 0.15);
    margin-bottom: 0.75rem;
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-volumetric-dark-soft);
}
.futuristic-accordion .accordion-header { /* Ensure h3 has no bottom margin to mess with button */
    margin-bottom: 0;
}
.futuristic-accordion .accordion-button {
    background-color: var(--color-primary-medium);
    color: var(--color-text-light);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-small); /* Match item radius */
    box-shadow: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.futuristic-accordion .accordion-button:not(.collapsed) {
    color: var(--color-accent);
    background-color: var(--color-primary-light);
    box-shadow: inset 0 -2px 0 rgba(0, 191, 255, 0.2);
}
.futuristic-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem var(--color-accent-glow);
    z-index: 3; /* Ensure focus outline is visible over other elements */
}
/* Custom accordion icon */
.futuristic-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300bfff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform .3s ease-in-out;
}
.futuristic-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}
.futuristic-accordion .accordion-body {
    background-color: var(--color-primary-dark); /* Slightly darker body */
    padding: 1.25rem;
    color: var(--color-text-light-muted);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

/* CAROUSEL STYLES */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 191, 255, 0.4);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    background-size: 50% 50%;
    transition: background-color 0.3s ease;
}
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: rgba(0, 191, 255, 0.7);
}
.carousel-indicators [data-bs-target] {
    background-color: var(--color-accent);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    opacity: 0.4;
    border: 0; /* Remove default border */
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.carousel-indicators .active {
    opacity: 1;
    transform: scale(1.2);
}


/* FOOTER */
.futuristic-footer {
    background-color: var(--color-primary-darkest);
    color: var(--color-text-light-muted);
    padding: 3rem 0 2rem;
    border-top: 3px solid var(--color-accent);
    text-align: center; /* Center footer content by default */
}
.futuristic-footer .row > div { /* Columns in footer */
    margin-bottom: 2rem;
}
@media (min-width: 992px) { /* lg and up */
    .futuristic-footer .row > div {
        text-align: left; /* Align left on larger screens if preferred for columns */
    }
    .futuristic-footer .col-lg-4:last-child { /* Center last column (social links) if desired */
       /* text-align: center; */
    }
}
.futuristic-footer h5 {
    color: var(--color-accent);
    font-family: var(--font-heading);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
}
.futuristic-footer p {
    font-size: 0.9rem;
    color: var(--color-text-light-muted);
}
.futuristic-footer .list-unstyled {
    padding-left: 0;
    list-style: none;
}
.futuristic-footer .list-unstyled li {
    margin-bottom: 0.5rem;
}
.futuristic-footer .footer-link { /* For general links and social text links */
    color: var(--color-text-light-muted);
    text-decoration: none;
    transition: color 0.3s ease, letter-spacing 0.3s ease;
    font-size: 0.95rem;
}
.futuristic-footer .footer-link:hover {
    color: var(--color-accent);
    letter-spacing: 0.5px;
}
.futuristic-footer hr {
    border-color: rgba(0, 191, 255, 0.2);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
.futuristic-footer .mt-4.mb-0 { /* Copyright text */
    font-size: 0.85rem;
}


/* PAGE SPECIFIC STYLES */

/* Success Page */
/* Assuming success.html has a main section with class .d-flex and styles as per HTML provided */
body.success-page main > section { /* More specific selector for success page section */
    min-height: calc(100vh - var(--header-height) - 158px); /* 158px is approx footer height, adjust if needed */
    /* If footer is not fixed height, this approach can be tricky. Better to make footer non-sticky or adjust. */
    /* For simplicity, assuming the HTML structure for success.html main section handles this */
    display: flex;
    align-items: center;
    justify-content: center;
}
.futuristic-success-box {
    max-width: 600px;
    text-align: center;
}
.futuristic-success-box svg { /* Checkmark icon */
    width: 80px;
    height: 80px;
    stroke: var(--color-accent); /* If SVG has stroke */
    fill: var(--color-accent); /* If SVG has fill */
    margin-bottom: 1.5rem;
}

/* Privacy & Terms Pages - Ensure content doesn't overlap with header */
body.privacy-page main > section:first-of-type,
body.terms-page main > section:first-of-type {
    padding-top: calc(4rem + 20px); /* Original section padding + extra 20px, so 100px from header */
    margin-top: 0; /* Body already has padding-top for header */
}
.text-content-light-bg { /* Wrapper for text content on light background pages */
    background-color: #FFFFFF; /* Explicit white for text area */
    padding: 2rem;
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-volumetric-light-soft);
}
.text-content-light-bg h1,
.text-content-light-bg h2,
.text-content-light-bg h3 {
    color: var(--color-text-dark); /* Dark text */
    text-shadow: none;
}
.text-content-light-bg p,
.text-content-light-bg li,
.text-content-light-bg .lead {
    color: #333333;
}
.text-content-light-bg a {
    color: var(--color-accent-darker);
}


/* UTILITY CLASSES */
.text-accent {
    color: var(--color-accent) !important;
}
.bg-primary-medium {
    background-color: var(--color-primary-medium) !important;
}
.futuristic-image-shadow {
    box-shadow: 0 8px 20px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.15);
    border: 1px solid rgba(0, 191, 255, 0.1);
    border-radius: var(--border-radius-small);
}

/* Scrollbar (Optional, Webkit only for aesthetics) */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--color-primary-darkest); 
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--color-primary-light), var(--color-accent));
  border-radius: 6px;
  border: 2px solid var(--color-primary-darkest);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--color-accent), var(--color-accent-darker));
}

/* Cookie Consent Popup (Styles from HTML prompt) */
#cookieConsentPopup {
    /* Styles are inline in the HTML as per the prompt */
    /* But if you want to centralize them: */
    /*
    display: none; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(20, 20, 20, 0.95); 
    color: #f1f1f1; 
    padding: 20px; 
    text-align: center; 
    z-index: 9999; 
    border-top: 2px solid var(--color-accent);
    */
}
#cookieConsentPopup p {
    font-family: var(--font-body); /* Match body font */
    margin-bottom: 15px;
    color: var(--color-text-light);
    font-size: 0.9rem;
}
#cookieConsentPopup a {
    color: var(--color-accent) !important; /* Ensure link is bright */
    text-decoration: underline;
}
#acceptCookieButton {
    background-color: var(--color-accent);
    color: var(--color-primary-darkest); /* Dark text for contrast on bright button */
    border: none;
    padding: 10px 25px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,191,255,0.4);
    transition: background-color 0.3s ease, transform 0.2s ease;
}
#acceptCookieButton:hover {
    background-color: var(--color-accent-darker);
    transform: translateY(-1px);
}


/* Background image handling with overlay */
/* Apply to sections that have a background image and text on top */
/* Example usage: <section style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('path/to/image.jpg');"> */
[style*="background-image"][style*="url("] { /* Generic selector for elements with inline background images */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Ensure text on such backgrounds is readable */
/* The linear-gradient overlay is already part of the inline style in the HTML example */
/* If it weren't, you'd add a pseudo-element or a wrapper */

/* Adjusting Bootstrap column padding for tighter designs if needed */
/* .row > * { padding-right: calc(var(--bs-gutter-x) * .4); padding-left: calc(var(--bs-gutter-x) * .4); } */
/* This is optional and depends on desired spacing */

html,body{
    overflow-x: hidden;
}