/* SPK Landing Navigation Styles - Modern Update */

.spk-landing-nav-section {
    position: relative;
    width: 100%;
    min-height: 80vh;
    /* Ensure significant height */
    display: flex;
    flex-direction: column;
    /* Changed to column to stack cards and quote */
    justify-content: center;
    align-items: center;
    background-image: url('../images/house2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 100px 20px;
    gap: 40px;
    /* Space between cards and quote */
}

/* Green Glassmorphism Overlay */
.spk-landing-nav-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(20, 120, 80, 0.55);
    /* Greenish tint */
    backdrop-filter: blur(12px);
    z-index: 1;
}

.spk-landing-nav-container {
    position: relative;
    z-index: 2;
    /* Above overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    /* Equal spacing */
    max-width: 1400px;
    width: 100%;
    flex-wrap: wrap;
}

/* Base Card Styles */
.spk-nav-card {
    position: relative;
    width: 350px;
    height: 400px;
    /* Premium dark charcoal → deep indigo (luxury real estate feel) */
    background: linear-gradient(145deg, #0d0d1f 0%, #131030 50%, #1a1045 100%);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Brand green glow border pops against the dark indigo */
    border: 1px solid rgba(113, 177, 0, 0.4);
    outline: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-center{
display: flex;
    justify-content:  center !important;


}

 .nav-left{
    display: flex;
    justify-content: end;


}
 .nav-right{
    display: flex;
    justify-content: start;


}


.spk-nav-card img {
    max-width: 65%;
    max-height: 160px;
    object-fit: contain;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) brightness(1.0);
    pointer-events: none;
}

.spk-nav-card:hover img {
    filter: drop-shadow(0 6px 22px rgba(113, 177, 0, 0.6)) brightness(1.18);
}

/* Hover Effects — deeper violet with green glow pulse */
.spk-nav-card:hover {
    background: linear-gradient(145deg, #100d25 0%, #1e1560 50%, #120e40 100%);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(113, 177, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border-color: rgba(113, 177, 0, 0.70);
}

/* Left Triangle Card — uses SVG clip-path from header.php for soft edges */
.nav-left {
    clip-path: url(#spk-clip-left);
    /* Subtle tilt: darker charcoal → midnight indigo */
    background: linear-gradient(160deg, #0a0a18 0%, #160f3a 100%);
    padding-right: 30px;
}

/* Right Triangle Card — uses SVG clip-path from header.php for soft edges */
.nav-right {
    clip-path: url(#spk-clip-right);
    /* Mirrored tilt */
    background: linear-gradient(200deg, #160f3a 0%, #0a0a18 100%);
    padding-left: 30px;
}

/* Center Rounded Card — slightly brighter indigo for focal emphasis */
.nav-center {
    border-radius: 40px;
    width: 380px;
    height: 350px;
    z-index: 5;
    background: linear-gradient(135deg, #0f0f28 0%, #1c1555 50%, #130e3a 100%);
    border: 1px solid rgba(113, 177, 0, 0.55);
    box-shadow:
        0 14px 45px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(113, 177, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Quote Wrapper Styles */
.spk-quote-wrapper {
    position: relative;
    z-index: 2;
    /* Matching the card palette: dark charcoal → deep indigo */
    background: linear-gradient(135deg, #0d0d1f 0%, #16124a 50%, #0f0f2a 100%);
    padding: 18px 45px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    /* Brand green glow border — same as cards */
    border: 1px solid rgba(113, 177, 0, 0.45);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(113, 177, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 900px;
    width: 90%;
    margin-top: 20px;
}

.spk-quote-text-content {
    text-align: right;
    font-family: 'Playfair Display SC', serif;
}

.spk-quote-main {
    display: block;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    /* White text on dark indigo background */
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.5px;
}

.spk-quote-author {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    /* Brand green for the author name */
    color: #71B100;
    margin-top: 5px;
    font-family: 'Libre Franklin', sans-serif;
    letter-spacing: 0.5px;
}

.spk-quote-image {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    /* Green border matching the card/wrapper border theme */
    border: 2px solid rgba(113, 177, 0, 0.7);
    box-shadow: 0 0 12px rgba(113, 177, 0, 0.25);
}


/* Responsive Adjustments */
@media (max-width: 991px) {
    .spk-landing-nav-container {
        flex-direction: column;
        gap: 30px;
    }

    .spk-nav-card {
        width: 100%;
        max-width: 320px;
        height: 200px;
        /* Reset clip-paths for mobile ease of use, or keep them if they fit. 
           User didn't explicitly say remove shapes on mobile, but typical landing navs stack.
           Let's keep shapes but adjust orientation? No, stacking triangles vertically is weird.
           Let's simplify to rounded rectangles for mobile for better UX as per previous CSS.
        */
        clip-path: none !important;
        border-radius: 20px !important;
        background-color: rgba(15, 43, 70, 0.9);
    }

    .nav-left,
    .nav-right {
        padding: 0;
    }

    .spk-quote-wrapper {
        flex-direction: column-reverse;
        /* Text on bottom, image on top, or standard */
        /* Actually image right usually means author face. Let's keep flex row but allow stacking if very narrow */
        padding: 20px;
        text-align: center;
        border-radius: 20px;
        gap: 15px;
    }

    .spk-quote-text-content {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .spk-quote-main {
        font-size: 1.1rem;
    }

    .spk-quote-wrapper {
        flex-direction: column;
    }
}

/* Bottom Right Logo Unit */
.spk-unit-of-container {
    position: absolute;
    bottom: 30px;
    right: 40px;
    display: flex;
    flex-direction: column;
    /* Stack text above logo? Or side by side? "A Unit of [Logo]" usually side-by-side or text above. Let's try row. */
    align-items: flex-end;
    /* Align to right */
    gap: 5px;
    z-index: 10;
}

.spk-unit-text {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: capitalize;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.spk-unit-logo {
    height: 60px;
    /* Adjust size as needed */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    background: rgba(255, 255, 255, 0.9);
    /* slight background if logo is transparent and needs contrast against dark overly */
    padding: 5px 10px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .spk-unit-of-container {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 20px;
        align-items: center;
    }

    .spk-unit-text {
        color: #333;
        /* On mobile it might flow below, if background is white/light. But section bg is image with overlay. So keep white? */
        /* Wait, if position is relative, it will be in flow. The section has flex column. */
        /* If in flow, it's inside .spk-landing-nav-section which has overlay. So text should be white or dark depending on overlay. Overlay is dark green? No, rgba(20, 120, 80, 0.55). */
        color: #fff;
    }
}