/* Hero With Overlap - Full Fluid Implementation */
/* Baseline: 1440px Artboard */

.hero-overlap-outer {
    width: 96.94%; /* Explicitly matching standard Hero wrapper width */
    height: 30.416vw; /* (438 / 1440 * 100) */
    position: relative;
    /* margin-top: 8vw is for visual balance from fixed-top nav */
    margin: 8vw auto 0 auto; 
    background-color: #fff;
    z-index: 5;
}

.hero-overlap-main {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #4a6741;
    background-image: url('https://images.pexels.com/photos/1732414/pexels-photo-1732414.jpeg?auto=compress&cs=tinysrgb&w=1920');
    background-size: cover;
    background-position: center;
    border-radius: 0.555vw; /* (8 / 1440 * 100) */
    overflow: visible;
    transition: all 0.3s ease;
}

/* 1. TOP-LEFT TAG ("30 GODINA S VAMA!")
   Figma 1440: width 575, height 69, top 211px, left 27px
*/
.hero-tag-box {
    position: absolute;
    top: -1.319vw; /* (-19 / 1440 * 100) -> Overlap between 211 and 230 baseline */
    left: 1.875vw; /* (27 / 1440 * 100) */
    width: 39.93vw; /* (575 / 1440 * 100) */
    height: 4.791vw; /* (69 / 1440 * 100) */
    background: #FFFFFF;
    box-shadow: none;
    display: flex;
    align-items: center;
    padding: 0 2.777vw;
    z-index: 20;
}

.hero-tag-box span {
    font-family: 'Open Sans', sans-serif;
    font-size: 2.916vw; /* (42 / 1440 * 100) */
    font-weight: 300;
    color: #424242;
    line-height: 4.722vw; /* (68 / 1440 * 100) */
    letter-spacing: -0.01em; 
    white-space: nowrap;
}

/* 2. BOTTOM DECORATIVE BAR
   Figma 1440: 939x80, overlaps from 628px
*/
.hero-overlap-bottom {
    position: absolute;
    bottom: -2.777vw; /* (-40 / 1440 * 100) */
    left: 8.819vw; /* (127 / 1440 * 100) */
    width: 65.208vw; /* (939 / 1440 * 100) */
    height: 5.555vw; /* (80 / 1440 * 100) */
    background: #FFFFFF;
    border-radius: 0.555vw;
    box-shadow: none;
    z-index: 15;
}

/* 3. BOTTOM TEXT
   Figma 1440: width 868, top 668px, left 198px
*/
#hero-overlap-bottom-text {
    position: absolute;
    top: 30.416vw; /* Exact bottom edge of hero (668 baseline) */
    left: 13.75vw; /* (198 / 1440 * 100) */
    width: 60.277vw; /* (868 / 1440 * 100) */
    height: auto;
    text-align: left;
    z-index: 25;
}

#hero-overlap-bottom-text h2,
#hero-overlap-bottom-text p {
    font-family: 'Open Sans', sans-serif;
    font-size: 3.194vw; /* (46 / 1440 * 100) */
    font-weight: 300;
    color: #424242;
    line-height: 3.611vw; /* (52 / 1440 * 100) */
    letter-spacing: -0.01em;
    margin: 0;
}

/* Mobile title element - hidden on desktop, shown on mobile */
.hero-overlap-mobile-title {
    display: none;
}

/* --- RESPONSIVE STATE: BELOW 1200px (Why Choose Us Mode) --- */
@media (max-width: 1200px) {
    .hero-overlap-outer { height: 500px; margin-top: 120px; width: 95.5%; }

    .hero-overlap-main {
        background-blend-mode: overlay;
        background-color: rgba(0,0,0,0.6); /* Slightly darker for readability */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px;
    }

    /* Hide Overlap Boxes but keep text visible in the bottom container */
    .hero-tag-box, .hero-overlap-bottom { display: none !important; }

    #hero-overlap-bottom-text {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 850px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Show the dynamic title above the line */
    .hero-overlap-mobile-title {
        display: block;
        font-family: 'Open Sans', sans-serif;
        font-size: 20px;
        font-weight: 300;
        color: #FFFFFF;
        margin-bottom: 25px;
        letter-spacing: 2px;
        order: 1;
    }

    #hero-overlap-bottom-text h2,
    #hero-overlap-bottom-text p {
        color: #FFFFFF !important;
        font-size: clamp(24px, 4.5vw, 36px) !important;
        line-height: 1.3 !important;
        font-weight: 300;
        order: 3;
    }

    /* The Separator Line */
    #hero-overlap-bottom-text .separator-line {
        display: block;
        width: 80px;
        height: 1px;
        background-color: #FFFFFF;
        margin-bottom: 30px;
        order: 2;
    }
}

/* Mobile Tweak (Tall Hero like Homepage) */
@media (max-width: 768px) {
    .hero-overlap-outer { height: 500px; margin-top: 100px; width: 92.5%; }
    .hero-overlap-main { padding: 40px 20px; }

    /* Match Homepage Hero Card font sizes for mobile (INVERTED) */
    #hero-overlap-bottom-text h2,
    #hero-overlap-bottom-text p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        order: 3;
    }
    .hero-overlap-mobile-title {
        font-size: 32px;
        margin-bottom: 15px;
        letter-spacing: 0;
        font-weight: 400;
        line-height: 1.1;
    }
}