/* ========================================
   HERO SECTION
======================================== */
    /*
     * All <main> elements get a negative top margin to kiss the fixed header.
     * header height: desktop=100px → body padding-top=100px, pull=-25px
     *                tablet=84px  → body padding-top=84px,  pull=-3px
     *                mobile=65px  → body padding-top=65px,  pull=-18px
     */

    /* Desktop (≥992px) */
    @media (min-width: 992px) {
      main.main,
      main.services-page-main,
      main.about-main,
      body.contact-page-body > main,
      body.policy-page-body > main,
      body.sa-page > main,
      main.job-portal-main { margin-top: -25px !important; }
    }
    /* Tablet (576–991px) */
    @media (min-width: 576px) and (max-width: 991px) {
      main.main,
      main.services-page-main,
      main.about-main,
      body.contact-page-body > main,
      body.policy-page-body > main,
      body.sa-page > main,
      main.job-portal-main { margin-top: -3px !important; }
    }
    /* Mobile (<576px) */
    @media (max-width: 575px) {
      main.main,
      main.services-page-main,
      main.about-main,
      body.contact-page-body > main,
      body.policy-page-body > main,
      body.sa-page > main,
      main.job-portal-main { margin-top: -18px !important; }
    }

#hero-primary-section {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    min-height: clamp(420px, 82vh, 800px) !important;
    height: auto !important;
    max-height: none !important;
    max-width: 1920px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    color: white !important;
    background:
        linear-gradient(105deg,
            rgba(4, 20, 45, 0.97) 0%,
            rgba(5, 28, 58, 0.93) 35%,
            rgba(6, 36, 70, 0.78) 60%,
            rgba(6, 36, 70, 0.05) 100%),
        url("../img/hero-banner.png") !important;
    background-size: cover !important;
    background-position: center right !important;
    background-attachment: scroll !important;
    overflow: visible !important;
    opacity: 0;
    animation: heroFadeIn 0.8s ease-out forwards;
    transform: translateZ(0);
    will-change: opacity;
}

@keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes heroSlideUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------
   INNER WRAPPER
---------------------------------------- */
#hero-text-content,
.hero-text-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 !important;
    min-height: clamp(420px, 82vh, 800px) !important;
    padding: 60px 8% 120px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------
   CONTENT BLOCK
---------------------------------------- */
#hero-content-container {
    max-width: 680px !important;
    z-index: 2 !important;
    position: relative !important;
    opacity: 0;
    transform: translateY(28px);
    animation: heroSlideUp 1s ease-out 0.3s forwards;
}

/* Headline ? 3 lines on desktop:
   Line 1: Connecting Top Talent With
   Line 2: Global Opportunities in the
   Line 3: USA & UK
*/
#hero-headline-title {
    font-size: 41px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 16px rgba(0,0,0,0.45) !important;
    max-width: 700px !important;
    white-space: normal !important;
    word-break: normal !important;
    opacity: 0;
    animation: heroSlideUp 0.8s ease-out 0.5s forwards;
}
.hero-trusted-highlight,
.hero-highlight {
    color: #ffffff !important;
}

#hero-subtitle-text {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    color: rgba(220, 235, 255, 0.90) !important;
    font-weight: 400 !important;
    max-width: 600px !important;
    opacity: 0;
    animation: heroSlideUp 0.8s ease-out 0.7s forwards;
}

/* ----------------------------------------
   BUTTONS
---------------------------------------- */
#hero-button-group,
.hero-action-buttons {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    animation: heroSlideUp 0.8s ease-out 0.9s forwards;
}

.hero-btn {
    padding: 16px 36px !important;
    border-radius: 6px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-align: center !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}

.hero-btn-primary,
#hero-primary-cta {
    background: #0C3365 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(12, 51, 101,0.45) !important;
}

.hero-btn-primary:hover,
#hero-primary-cta:hover {
    background: #0C3365 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(12, 51, 101,0.55) !important;
    color: #ffffff !important;
}

.hero-btn-secondary,
#hero-secondary-cta {
    border: 2px solid rgba(255,255,255,0.85) !important;
    color: #ffffff !important;
    background: transparent !important;
    padding: 13px 26px !important;
}

.hero-btn-secondary:hover,
#hero-secondary-cta:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* ----------------------------------------
   TRUSTED SECTION ? bottom of hero
---------------------------------------- */
#hero-trusted-companies-section,
.hero-trusted-section {
    margin-top: 10px !important;
    padding: 10px 0 30px !important;
    text-align: center !important;
    opacity: 0;
    animation: heroSlideUp 0.8s ease-out 1.1s forwards;
}

#hero-trusted-main-title,
.hero-trusted-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-shadow: 1px 1px 8px rgba(0,0,0,0.4) !important;
    letter-spacing: 0.3px !important;
}

#hero-trusted-main-subtitle,
.hero-trusted-subtitle {
    font-size: 15px !important;
    color: rgba(210,228,255,0.88) !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

/* ----------------------------------------
   LOGO STRIP
   Direction: right scroll (reverse)
---------------------------------------- */
#hero-trusted-logos-container,
.hero-trusted-logos-wrapper {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

/* Scroll track */
#hero-trusted-logos-scroll-track,
.hero-trusted-logos-track {
    display: flex !important;
    gap: 20px !important;
    width: max-content !important;
    will-change: transform !important;
    animation: logoScroll 45s linear infinite !important;
}

/* Reverse: right scroll � starts at -33.33% (middle set visible), scrolls right to 0, loops */
@keyframes logoScroll {
    0%   { transform: translateX(-33.333%); }
    100% { transform: translateX(0); }
}
.trusted-logo-item {
    flex-shrink: 0 !important;
    width: 180px !important;
    height: 100px !important;
    padding: 12px 18px !important;
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.trusted-logo-item img {
    max-width: 110px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ----------------------------------------
   BOTTOM CURVE ? desktop
---------------------------------------- */
#hero-bottom-curve {
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 100px !important;
    overflow: hidden !important;
    line-height: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
}

#hero-bottom-curve svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

/* ----------------------------------------
   RESPONSIVE ? Tablet (=1024px)
   4 logos visible
   TABLET ONLY ? do not touch mobile
---------------------------------------- */

/* Line break visibility */
.hero-tablet-br,
.hero-tablet-br2 { display: none; }
.hero-mobile-br,
.hero-mobile-br2 { display: none; }

@media (max-width: 1024px) and (min-width: 769px) {
    .hero-tablet-br,
    .hero-tablet-br2 { display: block; }

    #hero-primary-section {
        margin-top: 0 !important;
        min-height: clamp(420px, 82vh, 800px) !important;
    }

    /* Inner wrapper */
    #hero-text-content, .hero-text-content {
        padding: 50px 6% 120px !important;
        justify-content: flex-start !important;
        min-height: clamp(420px, 82vh, 800px) !important;
    }

    /* Content block ? vertically centered, full width */
    #hero-content-container {
        max-width: 100% !important;
    }

    /* Headline */
    #hero-headline-title {
        font-size: 38px !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
        line-height: 1.22 !important;
    }

    /* Subtitle */
    #hero-subtitle-text {
        font-size: 15px !important;
        margin-bottom: 36px !important;
        max-width: 580px !important;
    }

    /* Buttons ? more gap */
    #hero-button-group, .hero-action-buttons {
        gap: 16px !important;
        margin-bottom: 0 !important;
    }

    /* Trusted section — breathing space above, bottom clears the curve */
    #hero-trusted-companies-section,
    .hero-trusted-section {
        margin-top: 40px !important;
        padding-bottom: 110px !important;
    }

    #hero-trusted-main-title, .hero-trusted-title {
        font-size: 28px !important;
        margin-bottom: 12px !important;
    }

    #hero-trusted-main-subtitle, .hero-trusted-subtitle {
        font-size: 14px !important;
        margin-bottom: 22px !important;
    }

    /* 4 logos */
    .trusted-logo-item {
        width: 136px !important;
        height: 76px !important;
        padding: 8px 12px !important;
    }
    .trusted-logo-item img {
        max-width: 80px !important;
        max-height: 44px !important;
    }
    #hero-trusted-logos-scroll-track,
    .hero-trusted-logos-track {
        gap: 18px !important;
    }

    #hero-bottom-curve {
        height: 70px !important;
    }
    #hero-bottom-curve svg { height: 70px !important; }
}

/* ----------------------------------------
   RESPONSIVE ? Mobile (=768px)
   STRICT ? no conflicts with tablet
---------------------------------------- */
@media (max-width: 768px) {
    /* Show mobile line breaks, hide tablet ones */
    .hero-mobile-br,
    .hero-mobile-br2 { display: block; }
    .hero-tablet-br,
    .hero-tablet-br2 { display: none; }

    #hero-primary-section {
        margin-top: 0 !important;
        background-attachment: scroll !important;
        background-position: 65% center !important;
        background-image:
            linear-gradient(105deg,
                rgba(4,20,45,0.97) 0%,
                rgba(5,28,58,0.93) 35%,
                rgba(6,36,70,0.78) 60%,
                rgba(6,36,70,0.38) 82%,
                rgba(6,36,70,0.10) 100%),
            url("../img/hero-banner.png") !important;
        min-height: 85vh !important;
        overflow: visible !important;
    }

    /* padding-top: 50px — 10px more breathing room below header on mobile */
    #hero-text-content, .hero-text-content {
        padding: 50px 20px 120px !important;
        min-height: unset !important;
    }

    #hero-headline-title {
        font-size: 26px !important;
        max-width: 100% !important;
        line-height: 1.25 !important;
    }
    #hero-subtitle-text { font-size: 13px !important; }

    #hero-button-group, .hero-action-buttons {
        justify-content: center !important;
    }

    /* Bottom padding on trusted section clears the curve */
    #hero-trusted-companies-section,
    .hero-trusted-section {
        margin-top: 50px !important;
        padding: 10px 0 90px !important;
    }

    #hero-trusted-main-title, .hero-trusted-title {
        font-size: 18px !important;
    }
    #hero-trusted-main-subtitle, .hero-trusted-subtitle {
        font-size: 14px !important;
        margin-bottom: 18px !important;
    }

    .trusted-logo-item {
        width: 140px !important;
        height: 80px !important;
        padding: 8px 10px !important;
    }
    .trusted-logo-item img {
        max-width: 90px !important;
        max-height: 52px !important;
    }
    #hero-trusted-logos-scroll-track,
    .hero-trusted-logos-track {
        gap: 14px !important;
        animation-duration: 40s !important;
    }

    /* Curve ? bottom: -2px to seal subpixel gap */
    #hero-bottom-curve {
        display: block !important;
        position: absolute !important;
        bottom: -2px !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        z-index: 2 !important;
    }
    #hero-bottom-curve svg {
        height: 100% !important;
        transform: none !important;
    }
}

/* ----------------------------------------
   RESPONSIVE ? Small mobile (=575px)
   3 logos visible
---------------------------------------- */
@media (max-width: 575px) {
    /* padding-top: 85px = 65px header + 20px breathing room */
    #hero-primary-section {
        margin-top: 0 !important;
    }

    #hero-text-content, .hero-text-content {
        padding: 40px 16px 110px !important;
    }
    #hero-headline-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    #hero-button-group, .hero-action-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .hero-btn {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 11px 22px !important;
        font-size: 13px !important;
    }

    #hero-trusted-companies-section,
    .hero-trusted-section {
        margin-top: 20px !important;
        padding: 8px 0 70px !important;
    }

    .trusted-logo-item {
        width: 100px !important;
        height: 60px !important;
        padding: 6px 8px !important;
    }
    .trusted-logo-item img {
        max-width: 62px !important;
        max-height: 36px !important;
    }
    #hero-trusted-logos-scroll-track,
    .hero-trusted-logos-track {
        gap: 12px !important;
        animation-duration: 35s !important;
    }

    #hero-bottom-curve {
        display: block !important;
        position: absolute !important;
        bottom: -2px !important;
        left: 0 !important;
        width: 100% !important;
        height: 50px !important;
        z-index: 2 !important;
    }
    #hero-bottom-curve svg {
        height: 100% !important;
        transform: none !important;
    }
}

/* ----------------------------------------
   MOBILE HEADLINE ? dedicated override
   Uses .hero-headline-mobile class
---------------------------------------- */
@media (max-width: 768px) {
    .hero-headline-mobile {
        font-size: 22px !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
        font-weight: 800 !important;
    }
}

@media (max-width: 575px) {
    .hero-headline-mobile {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
}