/*==============================================================================
    ROOT & GLOBAL STYLES
==============================================================================*/
:root {
    --fc-primary: #003366;
    /* Deep Blue */
    --fc-secondary: #9fe300;
    /* Orange Accent */
    --fc-accent-blue: #0077b6;
    /* Sky Blue */
    --fc-accent-green: #42b300;
    --fc-white: #FFFFFF;
    --fc-bg-light: #F8F9FA;
    --fc-text-main: #333333;
    --fc-transition: all 0.3s ease-in-out;
    --fc-font-main: 'Inter', sans-serif;
}

body {
    font-family: var(--fc-font-main);
    color: var(--fc-text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    font-family: var(--fc-font-heading);
}

.fc-btn-primary {
    background-color: var(--fc-secondary);
    border: none;
    color: var(--fc-text-main);
    padding: 0.8rem 2.2rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: var(--fc-transition);
}

.fc-btn-primary:hover {
    background-color: var(--fc-primary);
    color: white;
}

.fc-btn-primary .fc-btn {
    background-color: var(--fc-accent-blue);
}

/*==============================================================================
    NAVIGATION & HERO (CORE UI)
==============================================================================*/
.fc-navbar {
    background-color: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-logo {
    height: 70px;
    padding: 12px 0;
    transition: var(--fc-transition);
}

.top-info-bar {
    padding: 10px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.fc-top-bar-btn {
    border: none;
    background: transparent;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    display: flex;
    align-items: center;
    transition: var(--fc-transition);
}

.fc-top-bar-btn:hover,
.fc-top-bar-btn:focus {
    color: var(--fc-secondary);
    background: transparent;
}

.fc-region-dropdown {
    background: rgba(0, 51, 102, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    margin-top: 10px !important;
}

.fc-region-dropdown .dropdown-item {
    color: white;
    font-size: 12px;
    padding: 10px 20px;
}

.fc-region-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--fc-secondary);
}

.top-info-bar i {
    color: var(--fc-secondary);
    /* Small pop of color for icons */
}

.divider {
    height: 16px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin-left: 10px;
}

.social-icon {
    color: #ffffff !important;
    /* Forces white visibility */
    font-size: 15px;
    transition: var(--fc-transition);
    opacity: 0.8;
}

.social-icon:hover {
    opacity: 1;
    transform: translateY(-2px);
    color: var(--fc-secondary) !important;
}

.navbar-nav .nav-link.fc-nav-link {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 15px 20px !important;
    border-top: 3px solid transparent;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.navbar-nav .nav-link.fc-nav-link:hover,
.navbar-nav .nav-link.fc-nav-link.active {
    border-top-color: #00adef; /* Your blue accent color */
    background: rgba(255, 255, 255, 0.05); /* Very subtle highlight */
    color: #ffffff !important;
}
/* --- Region Alert Text Style --- */
.fc-region-alert-text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: var(--fc-secondary);
    opacity: 0.9;
    animation: subtle-glow 3s ease-in-out infinite;
    display: inline-block; /* Ensure visibility on mobile within the menu */
}

@keyframes subtle-glow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}


/* Ensure the top-info-bar has clean spacing */
.top-info-bar {
    padding: 12px 0;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-info i {
    font-size: 13px;
    vertical-align: middle;
}

/* Adjust the dropdown button to align with the alert text */
.fc-top-bar-btn {
    font-size: 11px !important;
    letter-spacing: 0.5px;
}

/* Add a vertical separator specifically for the region area if needed */
.region-selector {
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fix for mobile - hide alert text to save space */
@media (max-width: 991px) {
    .fc-region-alert-text {
        display: none;
    }
}

@media (max-width: 991px) {
    .fc-navbar {
        background-color: rgba(0, 0, 0, 0.95) !important;
        position: relative;
    }
    
    .navbar-collapse {
        align-items: flex-start !important;
        padding: 0 20px 20px; /* Reduced top padding to accommodate region selector */
    }

    /* Ensure dropdown menu doesn't overflow screen on mobile */
    .fc-region-dropdown {
        position: absolute;
        right: 0;
        left: 5;
        min-width: 160px;
    }

    .navbar-nav .nav-link.fc-nav-link {
        padding: 12px 0 !important;
        border-top: none;
        border-left: 3px solid transparent;
        width: 100%;
    }

    .navbar-nav .nav-link.fc-nav-link.active {
        border-left-color: #00adef;
        padding-left: 15px !important;
    }

}

/*==============================================================================
    HERO SYSTEM (GLOBAL & MACRO SPECIFIC)
==============================================================================*/

.fc-hero {
    background-color: var(--fc-primary);
    color: var(--fc-white);
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: cover;
    background-position: center top;
    text-align: left;
    overflow: visible;
    /* Allows cards to rise above section boundary */
    z-index: 1;
}

/* Stable background for Zoom control */
.fc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 20, 40, 0.85), rgba(0, 10, 20, 0.4));
    z-index: 1;
}

.fc-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: auto;

}

/* Typography Scale */
.fc-hero h1 {
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1.1;
    max-width: 1200px;
    /* Spread out laterally */
}

.fc-hero-text {
    border-left: 3px solid var(--fc-secondary);
    padding-left: 1.2rem;
    margin-top: 2rem;
    max-width: 1000px;
    /* Spread out laterally */
}

.fc-hero-text p {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
}

/* --- MACRO: hero_index (100vh) --- */
.fc-hero.is-index {
    min-height: 100vh;
    padding-top: 150px;
    padding-bottom: 150px;
    /* Balanced for perfect centering */
}

/* --- MACRO: hero_sub (70vh) --- */
.fc-hero .is-sub {
    min-height: 70vh;
    padding-top: 100px;
    padding-bottom: 100px;
    /* Balanced for sub-page hero centering */
}

/*==============================================================================
    COMPONENT: Rising Cards (Used in hero_index)
==============================================================================*/

.fc-hero-cards-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    margin: auto;
    z-index: 10;
}

.fc-hero-cards-row>.row {
    align-items: flex-end;
    /* Key for independent rising */
}

.fc-rising-card {
    width: 100%;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    height: 80px;
    /* Base height */
    padding: 20px 25px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.24, 1, 0.32, 1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.fc-rising-card .fc-card-header {
    font-size: 12px;
}

/* Independent Rising Logic */
.fc-rising-card:hover {
    height: 150px;
    padding: 10px 25px 30px;
    /* Expanded height to fit text comfortably */
    background: rgba(0, 51, 102, 0.98);
    /* Solid dark brand blue */
    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.5);
    z-index: 20;
    margin-top: -120px;
    /* Optional: adds a visual "shift" up if height growth isn't enough */
}

.fc-rising-card.border-x {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.fc-card-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 40px;
}

.fc-rising-card .fc-card-header h3 {
    font-size: 13px !important;
    text-transform: uppercase;
    font-weight: 500;
}

.fc-icon-circle {
    width: 30px;
    height: 30px;
    background: var(--fc-accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--fc-white);
    transition: all 0.4s ease;
}

.fc-card-body {
    opacity: 0;
    transition: opacity 0.4s ease;
    color: rgba(255, 255, 255, 0.8);
    padding-top: 15px;
}

.fc-rising-card:hover .fc-card-body {
    opacity: 1;
}

.fc-rising-card:hover .fc-icon-circle {
    background: var(--fc-secondary);
    color: var(--fc-text-main);
    transform: rotate(90deg);
}

/* Responsive & Zoom Handling */
@media (max-width: 991px) {
    .fc-hero {
        display: block;
        min-height: auto;
    }

    .fc-hero.is-index {
        padding-bottom: 0;
    }

    .fc-hero-cards-row {
        position: relative;
        width: 100%;
        display: block !important;
        margin-top: 40px;
    }

    .fc-rising-card {
        height: auto !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .fc-card-body {
        opacity: 1;
        padding-bottom: 10px;
    }
}

@media (max-aspect-ratio: 1/1) {
    .fc-hero {
        background-position: 20% center;
    }
}



/*==============================================================================
    MACRO 1 & 2: about-r-img | about-l-img
==============================================================================*/
.fc-section-blue {
    background-color: var(--fc-accent-blue) !important;
    color: var(--fc-white);
}

.fc-overlap-img {
    object-fit: cover;
    position: relative;
    z-index: 2;
    border: 2px solid var(--fc-secondary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@media (min-width: 992px) {

    /* Create the visual overlap effect on desktop */
    .fc-overlap-img {
        margin-right: -80px;
    }

    .row.g-0 .col-md-6:last-child .fc-overlap-img {
        margin-right: 0;
        margin-left: -80px;
    }

    /* Prevent text overlap by calculating required padding */
    .fc-text-push-right {
        padding-left: calc(3rem + 80px) !important;
        /* 3rem base padding + 80px overlap */
    }

    .fc-text-push-left {
        padding-right: calc(3rem + 80px) !important;
        /* 3rem base padding + 80px overlap */
    }
}

/*==============================================================================
    MACRO 3 & 4: info-bg-img-l-txt-r-list | info-bg-img-r-txt-l-list
==============================================================================*/
.fc-bg-image-strategic {
    position: relative;
    background-size: cover;
    background-position: center;

}

.fc-bg-image-strategic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1;
}

.fc-bg-image-strategic .container {
    position: relative;
    z-index: 2;

}


/*==============================================================================
    MACRO 5: info-bg-img-l-txt-r-list-icon
==============================================================================*/
.fc-why-choose-us {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
}

.fc-why-choose-us::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.fc-feature-item {
    display: flex;
    align-items: flex-start;
}

.fc-dot-icon {
    width: 40px;
    height: 40px;
    background: var(--fc-accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

/*==============================================================================
    MACRO 5: hr_l_img
==============================================================================*/

.fc-staff-card {
    background: #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.1);
    position: relative;
    overflow: hidden;
}

/* The Image with a subtle oblique cut */
.fc-staff-img-container {
    height: 100%;
    overflow: hidden;
}

.fc-staff-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    /* Slight oblique tilt */
}

/* The Internal Dashed "Cut-out" Frame */
.fc-card-content-border {
    border: 1px dashed rgba(0, 51, 102, 0.2);
    padding: 2.5rem;
    height: 100%;
    position: relative;
}

/* Small accent corner piece */
.fc-card-content-border::before {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 30px;
    height: 30px;
    border-top: 4px solid var(--fc-accent-green);
    border-right: 4px solid var(--fc-accent-green);
}

.fc-primary-text {
    color: var(--fc-primary);
    letter-spacing: -1px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .fc-staff-img-container img {
        clip-path: none;
        min-height: 300px;
    }

    .fc-card-content-border {
        padding: 1.5rem;
        border: none;
        /* Simplify on mobile */
    }
}

/*==============================================================================
    MACRO: service_card
==============================================================================*/
.fc-service-card-main {
    transition: var(--fc-transition);
    border: 1px solid rgba(0, 51, 102, 0.05) !important;
    position: relative;
    border-radius: 12px !important;
}

.fc-service-card-main:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.fc-service-img-container {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.fc-service-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.fc-service-card-main:hover .fc-service-img-container img {
    transform: scale(1.1);
}

.fc-service-icon-floating {
    position: absolute;
    bottom: 0;
    left: 25px;
    width: 40px;
    height: 40px;
    background: var(--fc-secondary);
    color: var(--fc-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 2;
    transition: all 0.4s ease;
}

.fc-service-card-main:hover .fc-service-icon-floating {
    background: var(--fc-primary);
    color: white;
    transform: rotate(360deg);
}

/*==============================================================================
    MACRO: article_card
==============================================================================*/
.fc-article-card {
    transition: var(--fc-transition);
    border: 1px solid rgba(0, 51, 102, 0.05) !important;
}

.fc-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.fc-btn-outline {
    border: 2px solid var(--fc-primary);
    color: var(--fc-primary);
    background: transparent;
    transition: var(--fc-transition);
}

.fc-btn-outline:hover {
    background: var(--fc-primary);
    color: white;
}

/*==============================================================================
    UTILITIES
==============================================================================*/
.fc-primary-text {
    color: var(--fc-primary);
}

.fc-card-blue {
    background-color: var(--fc-accent-blue);
    color: var(--fc-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--fc-transition);
}

.fc-card-inner-border {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    margin: 10px;
    transition: all 0.4s ease;
}

.fc-card-icon {
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px dashed rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: var(--fc-transition);
}

.fc-card-blue:hover {
    background-color: var(--fc-primary);
    transform: translateY(-8px);
}

.fc-card-blue:hover .fc-card-inner-border {
    border-color: var(--fc-secondary);
}

.fc-card-blue:hover .fc-card-icon {
    background: var(--fc-secondary);
    transform: rotate(-10deg) scale(1.1);
}

/*==============================================================================
    MACRO 7: card-plain-anim-bounce (Service Grid)
==============================================================================*/
.fc-service-box-sleek {
    background: var(--fc-accent-blue);
    padding: 3rem 1.5rem;
    position: relative;
    transition: var(--fc-transition);
}

.fc-service-box-sleek:hover {
    background: var(--fc-primary);
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.fc-box-top-line {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-top: 3px solid white;
    border-right: 3px solid white;
}

/*==============================================================================
    MACRO: cta_appointment_bar
==============================================================================*/

.fc-appointment-bar {
    position: relative;
    padding: 50px 0; /* Generous vertical padding as per image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax-like effect */
    overflow: hidden;
}

/* Blue Overlay to match the image exactly */
.fc-appointment-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 85, 153, 0.85); /* Vibrant corporate blue overlay */
    z-index: 1;
}

/* Form Styling */
.fc-cta-form .form-control {
    height: 55px;
    padding: 0 25px;
    font-size: 1rem;
    color: #666;
    width: 70%; /* Input takes more space */
}

/* Specific "REACH US" button style */
.btn-reach-us {
    background-color: #0077c6; /* Brighter blue from the image */
    color: white;
    border: none;
    border-radius: 0;
    padding: 0 30px;
    height: 55px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: var(--fc-transition);
    white-space: nowrap;
}

.btn-reach-us:hover {
    background-color: var(--fc-primary);
    color: white;
}

@media (max-width: 991px) {
    .fc-appointment-bar { padding: 50px 0; }
    .fc-appointment-bar h2 { font-size: 2rem; text-align: center; margin-bottom: 20px; }
    .fc-cta-form { flex-direction: column; }
    .fc-cta-form .form-control { width: 100%; margin-bottom: 10px; }
}

/*==============================================================================
    FOOTER STYLES
==============================================================================*/
.fc-footer {
    background-color: #000000;
    color: #ffffff;
}

.fc-footer-title {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    text-transform: capitalize;
    color: var(--fc-accent-green);
}

.fc-footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--fc-transition);
}

.fc-footer-links a:hover {
    color: var(--fc-secondary);
    padding-left: 5px;
}

.fc-footer-hr {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.fc-policy-links .border-start {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.fc-policy-links a {
    color: rgba(215, 215, 215, 0.7);
    text-decoration: none;
    font-size: 0.75rem;
    margin-top: 0;
}

.fc-footer-links li {
    margin-bottom: 0.75rem;
}


/*==============================================================================
    MACRO: contact_oblique_card (Impressive Sleek Card)
==============================================================================*/

.fc-contact-info-card {
    position: relative;
    min-height: 650px;
    border-radius: 15px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 3rem;
    z-index: 1;
    background-image: url('https://images.unsplash.com/photo-1523966211575-eb4a01e7dd51?auto=format&fit=crop&w=1200&q=80');
}

/* Gradient Overlay for Text Readability */
.fc-contact-info-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 51, 102, 0.95) 20%, rgba(0, 0, 0, 0.4));
    z-index: 2;
}

/* Oblique Vector Shape (Orange Accent) */
.fc-oblique-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--fc-secondary);
    opacity: 0.15;
    clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 45% 100%);
    z-index: 3;
}

/* Oblique Accent Line */
.fc-contact-info-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-right: 8px solid var(--fc-secondary);
    clip-path: polygon(85% 0%, 86% 0%, 56% 100%, 55% 100%);
    z-index: 3;
}

.fc-contact-content {
    position: relative;
    z-index: 4;
    max-width: 90%;
}

/* Glassmorphic Icon Box */
.fc-contact-icon-box {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--fc-secondary);
    font-size: 1.4rem;
    transition: var(--fc-transition);
}

.fc-contact-info-card:hover .fc-contact-icon-box {
    background: var(--fc-secondary);
    color: white;
    transform: scale(1.1);
}

/* Mobile Responsiveness for Contact Card */
@media (max-width: 768px) {
    .fc-contact-info-card {
        min-height: auto;
        padding: 2rem;
    }

    .fc-oblique-overlay,
    .fc-contact-info-card::after {
        display: none;
        /* Clean look for mobile */
    }
}

/*================================================================================================================

NoN NAV STYLES
=================================================================================================================*/

/*==============================================================================
    NEW MACRO STYLES: Overview & Image Grid
==============================================================================*/

/* 80/20 Highlight Box */
.fc-highlight-box-blue {
    background-color: #0077c6; /* Vibrant Blue from the image */
    position: relative;
    border-top: 5px solid var(--fc-secondary); /* Accent top border */
    box-shadow: 0 10px 30px rgba(0, 85, 153, 0.15);
}

/* Image Highlight Card (Grid) */
.fc-img-highlight-card {
    transition: var(--fc-transition);
    padding: 10px;
}

.fc-card-img-wrapper {
    width: 100%;
    height: 220px; /* Fixed height for uniformity */
    overflow: hidden;
    margin-bottom: 1rem;
}

.fc-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.fc-img-highlight-card:hover .fc-card-img-wrapper img {
    transform: scale(1.05);
}

.fc-img-highlight-card h4 {
    letter-spacing: -0.5px;
}

@media (max-width: 991px) {
    .fc-highlight-box-blue {
        height: auto !important;
        margin-top: 20px;
    }
}

/*==============================================================================
    NEW MACRO STYLES: info_bg_static_img (Stationary Parallax & Luminous Accents)
==============================================================================*/

.fc-stationary-bg-section {
    position: relative;
    background-size: cover;
    background-position: center;
    /* This creates the "stationary" look while scrolling */

}

/* Darker, higher-quality overlay to make the white text pop */
.fc-stationary-bg-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 20%, rgba(0, 6, 68, 0.8) 100%);
    z-index: 1;
}

/* Luminous Left Margin Line for Description */
.fc-luminous-desc-wrapper {
    border-left: 4px solid var(--fc-secondary); /* Your #9fe300 Green */
    position: relative;
}

/* Optional: Add a subtle glow to the margin line */
.fc-luminous-desc-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    height: 100%;
    width: 4px;
    background: var(--fc-secondary);
    filter: blur(8px);
    opacity: 0.4;
}

/* Sleek Bullet Items (Icon + Title Only) */
.fc-bullet-icon-wrap {
    width: 20px;
    height: 20px;
    background: var(--fc-secondary);
    border: 1px solid rgba(159, 227, 0, 0.3); /* Transparent Green border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fc-secondary);
    font-size: 1.2rem;
    transition: var(--fc-transition);
    flex-shrink: 0;
}

.fc-bullet-item:hover .fc-bullet-icon-wrap {
    background: var(--fc-secondary);
    color: var(--fc-primary);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(159, 227, 0, 0.4);

}

.letter-spacing-1 {
    letter-spacing: 1px;
}

/* Mobile Fix: background-attachment: fixed often breaks on iOS/Android */
@media (max-width: 991px) {
    .fc-stationary-bg-section {
        background-attachment: scroll; /* Fallback for mobile performance */
    }
    .fc-luminous-desc-wrapper p {
        font-size: 1rem;
    }
}

/*==============================================================================
    ERROR PAGE: Structural Warning
==============================================================================*/

.fc-error-wrapper {
    background-color: #ffffff;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Massive Faded Background Triangle Icon */
.fc-error-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80vh; /* Scaled to screen height */
    color: rgba(220, 53, 69, 0.04); /* Extremely subtle red */
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}

/* Foreground Content */
.fc-error-content {
    position: relative;
    z-index: 5;
    max-width: 600px;
    padding: 2rem;
}

.fc-error-code-ghost {
    font-family: var(--fc-font-heading);
    font-size: 10rem;
    font-weight: 900;
    line-height: 0.8;
    color: var(--fc-primary);
    opacity: 0.1;
    margin-bottom: -2rem;
    letter-spacing: -5px;
}

.fc-error-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #dc3545; /* Warning Red */
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.fc-error-desc {
    font-size: 1.1rem;
    color: var(--fc-text-muted);
    margin-bottom: 3rem;
    border-left: 4px solid #dc3545;
    padding-left: 1.5rem;
    text-align: left;
}

/* Redirect Button - Luminous Style */
.fc-btn-error-return {
    background-color: #ccff00 !important; /* Luminous Green */
    color: #003366 !important;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1rem 3rem;
    border: none;
    border-radius: 0;
    letter-spacing: 2px;
    box-shadow: 0 10px 30px rgba(204, 255, 0, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
}

.fc-btn-error-return:hover {
    background-color: #003366 !important;
    color: #ccff00 !important;
    transform: translateY(-5px);
}

@media (max-width: 768px) {
    .fc-error-code-ghost { font-size: 6rem; }
    .fc-error-title { font-size: 1.8rem; }
    .fc-error-watermark { font-size: 50vh; }
}


/* =====================================================
Article Sidebar & Body
======================================================== */


.fc-article-rich-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 1.5rem;
}

.fc-article-rich-text img {
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
    border-radius: 4px;
}

.fc-author-box {
    background-color: var(--fc-accent-blue);
    border-top: 4px solid var(--fc-secondary);
}

.fc-sidebar-post-item h6 {
    line-height: 1.4;
    transition: var(--fc-transition);
}

.fc-sidebar-post-item h6:hover {
    color: var(--fc-accent-blue);
}

/* Social Buttons Styling */
.btn-facebook { background: #3b5998; color: white; }
.btn-twitter { background: #000000; color: white; }
.btn-linkedin { background: #0077b5; color: white; }
.btn-pinterest { background: #bd081c; color: white; }

.fc-social-share .btn {
    border-radius: 0;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}