/* =========================================================
   SOURCINGMART HERO
   PREMIUM TEXTILE SOURCING
   DESKTOP + CREATIVE MOBILE
========================================================= */


/* =========================================================
   1. GLOBAL HERO NORMALIZATION
========================================================= */

.sm-hero,
.sm-hero *,
.sm-hero *::before,
.sm-hero *::after {
    box-sizing: border-box;
}


/* =========================================================
   2. HEADER SAFETY
========================================================= */

.site-header,
#site-header,
#masthead,
header.site-header,
.site-header-wrapper,
.site-header-inner,
body > header,
#page > header {
    position: relative !important;
    z-index: 99999 !important;
}


/* =========================================================
   3. HERO
========================================================= */

.sm-hero {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 680px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #123f35 !important;

    color: #ffffff !important;

    isolation: isolate !important;
}


/* =========================================================
   4. BACKGROUND IMAGE
========================================================= */

.sm-hero > .sm-hero-background {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    object-position: center center !important;

    border: 0 !important;

    z-index: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   5. DARK GREEN OVERLAY
========================================================= */

.sm-hero > .sm-hero-overlay {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(6,42,34,.97) 0%,
            rgba(8,48,39,.91) 34%,
            rgba(8,48,39,.70) 62%,
            rgba(8,48,39,.45) 100%
        ) !important;
}


/* =========================================================
   6. MAIN HERO GRID
========================================================= */

.sm-hero > .sm-hero-inner {
    position: relative !important;

    z-index: 3 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(390px, .88fr) !important;

    align-items: center !important;

    gap: 65px !important;

    width: min(1400px, calc(100% - 70px)) !important;

    min-height: 680px !important;

    margin: 0 auto !important;

    padding: 55px 0 !important;
}


/* =========================================================
   7. LEFT CONTENT
========================================================= */

.sm-hero-content {
    position: relative !important;

    z-index: 5 !important;

    width: 100% !important;

    max-width: 760px !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* =========================================================
   8. MOBILE BRAND
========================================================= */

.sm-mobile-brand {
    display: none !important;
}


/* =========================================================
   9. EYEBROW
========================================================= */

.sm-hero-eyebrow {
    display: inline-block !important;

    margin: 0 0 21px !important;

    padding: 0 !important;

    color: #d4b078 !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    line-height: 1.4 !important;

    letter-spacing: 3px !important;
}


/* =========================================================
   10. MAIN HEADING
========================================================= */

.sm-hero h1 {
    display: block !important;

    width: 100% !important;

    margin: 0 0 25px !important;

    padding: 0 !important;

    color: #ffffff !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: clamp(44px, 5vw, 70px) !important;

    font-weight: 400 !important;

    line-height: 1.04 !important;

    letter-spacing: -1.5px !important;
}


.sm-hero h1 span {
    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #d4b078 !important;
}


/* =========================================================
   11. DESCRIPTION
========================================================= */

.sm-hero-content > p {
    display: block !important;

    width: 100% !important;

    max-width: 680px !important;

    margin: 0 0 32px !important;

    padding: 0 !important;

    color: rgba(255,255,255,.86) !important;

    font-size: 16px !important;

    line-height: 1.7 !important;
}


/* =========================================================
   12. BUTTONS
========================================================= */

.sm-hero-buttons {
    display: flex !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 12px !important;

    margin: 0 0 40px !important;

    padding: 0 !important;
}


.sm-hero .sm-btn {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 150px !important;

    min-height: 50px !important;

    margin: 0 !important;

    padding: 0 25px !important;

    border-radius: 0 !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease !important;
}


.sm-hero .sm-btn:hover {
    transform: translateY(-2px) !important;
}


/* Primary */

.sm-hero .sm-btn-primary {
    background: #c59a62 !important;

    border: 1px solid #c59a62 !important;

    color: #ffffff !important;
}


.sm-hero .sm-btn-primary:hover {
    background: #a77b47 !important;

    border-color: #a77b47 !important;

    color: #ffffff !important;
}


/* Outline */

.sm-hero .sm-btn-outline {
    background: rgba(255,255,255,.04) !important;

    border: 1px solid rgba(255,255,255,.65) !important;

    color: #ffffff !important;
}


.sm-hero .sm-btn-outline:hover {
    background: #ffffff !important;

    border-color: #ffffff !important;

    color: #123f35 !important;
}


/* =========================================================
   13. TRUST
========================================================= */

.sm-hero-trust {
    display: flex !important;

    align-items: stretch !important;

    width: 100% !important;

    max-width: 700px !important;

    margin: 0 !important;

    padding: 20px 0 0 !important;

    border-top: 1px solid rgba(255,255,255,.23) !important;
}


.sm-hero-trust-item {
    min-width: 145px !important;

    margin: 0 28px 0 0 !important;

    padding: 0 28px 0 0 !important;

    border-right: 1px solid rgba(255,255,255,.20) !important;
}


.sm-hero-trust-item:last-child {
    margin-right: 0 !important;

    padding-right: 0 !important;

    border-right: 0 !important;
}


.sm-hero-trust-item strong {
    display: block !important;

    margin: 0 0 5px !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 700 !important;
}


.sm-hero-trust-item span {
    display: block !important;

    color: rgba(255,255,255,.62) !important;

    font-size: 11px !important;

    letter-spacing: .4px !important;
}


/* =========================================================
   14. RIGHT VIDEO AREA
========================================================= */

.sm-hero-side {
    position: relative !important;

    z-index: 5 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    width: 100% !important;

    max-width: 520px !important;

    margin: 0 0 0 auto !important;

    padding: 0 !important;
}


/* =========================================================
   15. VIDEO CARD
========================================================= */

.sm-hero-video-card {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    max-width: 500px !important;

    margin: 0 !important;

    padding: 10px !important;

    overflow: hidden !important;

    background:
        rgba(7,43,35,.88) !important;

    border:
        1px solid rgba(212,176,120,.48) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.42) !important;

    backdrop-filter: blur(8px) !important;

    -webkit-backdrop-filter: blur(8px) !important;
}


/* =========================================================
   16. VIDEO TOP
========================================================= */

.sm-hero-video-top {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 15px !important;

    width: 100% !important;

    min-height: 44px !important;

    margin: 0 !important;

    padding: 7px 9px 12px !important;
}


.sm-video-title {
    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;
}


.sm-video-title span {
    color: #d4b078 !important;

    font-size: 9px !important;

    font-weight: 700 !important;

    letter-spacing: 2.5px !important;
}


.sm-video-title strong {
    color: rgba(255,255,255,.68) !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    letter-spacing: 1px !important;
}


.sm-video-live {
    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    color: rgba(255,255,255,.55) !important;

    font-size: 8px !important;

    font-weight: 700 !important;

    letter-spacing: 1.2px !important;
}


.sm-video-live i {
    display: block !important;

    width: 6px !important;

    height: 6px !important;

    border-radius: 50% !important;

    background: #d4b078 !important;

    box-shadow: 0 0 0 4px rgba(212,176,120,.12) !important;
}


/* =========================================================
   17. VIDEO WRAPPER
========================================================= */

.sm-hero-video-wrapper {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    aspect-ratio: 16 / 10 !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: #102f29 !important;
}


/* =========================================================
   18. ACTUAL VIDEO
========================================================= */

.sm-hero-video-wrapper > .sm-hero-video {
    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    min-width: 0 !important;

    min-height: 0 !important;

    max-width: none !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    object-fit: cover !important;

    object-position: center center !important;

    border: 0 !important;

    outline: 0 !important;

    background: #102f29 !important;

    z-index: 1 !important;
}


/* =========================================================
   19. INDIA → WORLD ROUTE
========================================================= */

.sm-video-route {
    display: grid !important;

    grid-template-columns: auto 1fr auto !important;

    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 15px 10px 13px !important;

    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}


.sm-video-route-location {
    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;
}


.sm-video-route-location span {
    color: #d4b078 !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: 1.5px !important;
}


.sm-video-route-location small {
    color: rgba(255,255,255,.50) !important;

    font-size: 7px !important;

    letter-spacing: 1px !important;
}


.sm-route-right {
    text-align: right !important;

    align-items: flex-end !important;
}


.sm-video-route-line {
    display: flex !important;

    align-items: center !important;

    gap: 7px !important;
}


.sm-video-route-line span {
    display: block !important;

    height: 1px !important;

    flex: 1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(212,176,120,.15),
            rgba(212,176,120,.70),
            rgba(212,176,120,.15)
        ) !important;
}


.sm-video-route-line b {
    color: #d4b078 !important;

    font-size: 15px !important;

    font-weight: 400 !important;
}


/* =========================================================
   20. VIDEO BOTTOM
========================================================= */

.sm-hero-video-bottom {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 20px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 13px 10px 5px !important;
}


.sm-hero-video-text {
    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;
}


.sm-hero-video-text strong {
    color: #ffffff !important;

    font-size: 12px !important;

    font-weight: 700 !important;
}


.sm-hero-video-text span {
    color: rgba(255,255,255,.56) !important;

    font-size: 10px !important;
}


.sm-video-arrow {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 32px !important;

    height: 32px !important;

    flex: 0 0 32px !important;

    border: 1px solid rgba(212,176,120,.50) !important;

    border-radius: 50% !important;

    color: #d4b078 !important;

    font-size: 15px !important;
}


/* =========================================================
   21. HOVER
========================================================= */

.sm-hero-video-card {
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease !important;
}


.sm-hero-video-card:hover {
    transform: translateY(-4px) !important;

    border-color: rgba(212,176,120,.72) !important;

    box-shadow:
        0 38px 90px rgba(0,0,0,.48) !important;
}


/* =========================================================
   22. TABLET
========================================================= */

@media (max-width: 1000px) {

    .sm-hero {
        min-height: auto !important;
    }


    .sm-hero-inner {
        width: calc(100% - 50px) !important;

        min-height: auto !important;

        grid-template-columns: 1fr !important;

        gap: 48px !important;

        padding: 70px 0 !important;
    }


    .sm-hero-content {
        max-width: 850px !important;
    }


    .sm-hero-side {
        justify-content: flex-start !important;

        max-width: 650px !important;

        margin: 0 !important;
    }


    .sm-hero-video-card {
        max-width: 650px !important;
    }

}


/* =========================================================
   23. MOBILE — CREATIVE VERSION
========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------
       Hero
    ----------------------------------------- */

    .sm-hero {
        min-height: auto !important;

        background: #082d25 !important;
    }


    /* -----------------------------------------
       Background image becomes subtle
    ----------------------------------------- */

    .sm-hero > .sm-hero-background {
        opacity: .32 !important;

        object-position: 60% center !important;
    }


    /* -----------------------------------------
       Mobile overlay
    ----------------------------------------- */

    .sm-hero > .sm-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5,39,32,.96) 0%,
                rgba(5,39,32,.90) 35%,
                rgba(5,39,32,.94) 100%
            ) !important;
    }


    /* -----------------------------------------
       Main mobile layout
    ----------------------------------------- */

    .sm-hero > .sm-hero-inner {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 25px !important;

        width: calc(100% - 28px) !important;

        min-height: auto !important;

        margin: 0 auto !important;

        padding: 28px 0 42px !important;
    }


    /* -----------------------------------------
       LEFT CONTENT
       Video will visually appear first
       because of order below
    ----------------------------------------- */

    .sm-hero-content {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 0 !important;

        order: 2 !important;
    }


    /* -----------------------------------------
       RIGHT VIDEO
       Move video FIRST on mobile
    ----------------------------------------- */

    .sm-hero-side {
        display: block !important;

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 0 !important;

        order: 1 !important;
    }


    /* -----------------------------------------
       Mobile brand
    ----------------------------------------- */

    .sm-mobile-brand {
        display: flex !important;

        align-items: baseline !important;

        justify-content: space-between !important;

        gap: 10px !important;

        width: 100% !important;

        margin: 0 0 20px !important;

        padding: 0 2px !important;
    }


    .sm-mobile-brand span {
        color: #ffffff !important;

        font-size: 13px !important;

        font-weight: 800 !important;

        letter-spacing: 1.5px !important;
    }


    .sm-mobile-brand small {
        color: #d4b078 !important;

        font-size: 7px !important;

        font-weight: 700 !important;

        letter-spacing: 1px !important;
    }


    /* -----------------------------------------
       Video card
    ----------------------------------------- */

    .sm-hero-video-card {
        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 7px !important;

        background:
            rgba(5,39,32,.94) !important;

        border:
            1px solid rgba(212,176,120,.48) !important;

        box-shadow:
            0 25px 60px rgba(0,0,0,.38) !important;
    }


    /* -----------------------------------------
       Video top
    ----------------------------------------- */

    .sm-hero-video-top {
        min-height: 36px !important;

        padding: 6px 7px 9px !important;
    }


    .sm-video-title span {
        font-size: 8px !important;

        letter-spacing: 2px !important;
    }


    .sm-video-title strong {
        font-size: 8px !important;

        letter-spacing: .8px !important;
    }


    .sm-video-live {
        font-size: 7px !important;
    }


    /* -----------------------------------------
       Video
    ----------------------------------------- */

    .sm-hero-video-wrapper {
        width: 100% !important;

        aspect-ratio: 16 / 10 !important;

        border-radius: 1px !important;
    }


    .sm-hero-video-wrapper > .sm-hero-video {
        width: 100% !important;

        height: 100% !important;

        object-fit: cover !important;
    }


    /* -----------------------------------------
       Route
    ----------------------------------------- */

    .sm-video-route {
        gap: 8px !important;

        padding: 12px 7px 11px !important;
    }


    .sm-video-route-location span {
        font-size: 9px !important;

        letter-spacing: 1.2px !important;
    }


    .sm-video-route-location small {
        font-size: 6px !important;
    }


    .sm-video-route-line {
        gap: 5px !important;
    }


    .sm-video-route-line b {
        font-size: 13px !important;
    }


    /* -----------------------------------------
       Video bottom
    ----------------------------------------- */

    .sm-hero-video-bottom {
        padding: 11px 7px 5px !important;
    }


    .sm-hero-video-text strong {
        font-size: 10px !important;
    }


    .sm-hero-video-text span {
        font-size: 8px !important;
    }


    .sm-video-arrow {
        width: 28px !important;

        height: 28px !important;

        min-width: 28px !important;

        font-size: 13px !important;
    }


    /* -----------------------------------------
       Eyebrow
    ----------------------------------------- */

    .sm-hero-eyebrow {
        margin: 0 0 12px !important;

        font-size: 8px !important;

        letter-spacing: 2px !important;

        line-height: 1.5 !important;
    }


    /* -----------------------------------------
       Heading
    ----------------------------------------- */

    .sm-hero h1 {
        margin: 0 0 17px !important;

        font-size: clamp(38px, 11.5vw, 53px) !important;

        line-height: .99 !important;

        letter-spacing: -1.2px !important;
    }


    .sm-hero h1 span {
        margin-top: 5px !important;
    }


    /* -----------------------------------------
       Description
    ----------------------------------------- */

    .sm-hero-content > p {
        max-width: none !important;

        margin: 0 0 22px !important;

        color: rgba(255,255,255,.76) !important;

        font-size: 13px !important;

        line-height: 1.6 !important;
    }


    /* -----------------------------------------
       Buttons
    ----------------------------------------- */

    .sm-hero-buttons {
        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 8px !important;

        width: 100% !important;

        margin: 0 0 25px !important;
    }


    .sm-hero .sm-btn {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 49px !important;

        padding: 0 8px !important;

        font-size: 10px !important;

        letter-spacing: .2px !important;
    }


    /* -----------------------------------------
       Trust becomes horizontal chips
    ----------------------------------------- */

    .sm-hero-trust {
        display: grid !important;

        grid-template-columns: repeat(3, 1fr) !important;

        gap: 6px !important;

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 13px 0 0 !important;

        border-top:
            1px solid rgba(255,255,255,.16) !important;
    }


    .sm-hero-trust-item {
        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        text-align: left !important;
    }


    .sm-hero-trust-item strong {
        margin-bottom: 3px !important;

        font-size: 9px !important;
    }


    .sm-hero-trust-item span {
        font-size: 7px !important;

        line-height: 1.3 !important;
    }

}


/* =========================================================
   24. SMALL PHONES
========================================================= */

@media (max-width: 430px) {

    .sm-hero > .sm-hero-inner {
        width: calc(100% - 22px) !important;

        padding-top: 22px !important;

        padding-bottom: 34px !important;

        gap: 21px !important;
    }


    .sm-mobile-brand {
        margin-bottom: 16px !important;
    }


    .sm-mobile-brand span {
        font-size: 11px !important;

        letter-spacing: 1.2px !important;
    }


    .sm-mobile-brand small {
        font-size: 6px !important;
    }


    .sm-hero-video-card {
        padding: 5px !important;
    }


    .sm-hero-video-wrapper {
        aspect-ratio: 16 / 10 !important;
    }


    .sm-hero-eyebrow {
        font-size: 7px !important;

        letter-spacing: 1.6px !important;
    }


    .sm-hero h1 {
        font-size: 37px !important;

        line-height: 1 !important;
    }


    .sm-hero-content > p {
        font-size: 12px !important;

        line-height: 1.55 !important;
    }


    .sm-hero .sm-btn {
        min-height: 47px !important;

        font-size: 9px !important;
    }


    .sm-hero-trust-item strong {
        font-size: 8px !important;
    }


    .sm-hero-trust-item span {
        font-size: 6.5px !important;
    }

}


/* =========================================================
   25. VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .sm-hero > .sm-hero-inner {
        width: calc(100% - 18px) !important;
    }


    .sm-mobile-brand small {
        display: none !important;
    }


    .sm-hero h1 {
        font-size: 34px !important;
    }


    .sm-hero-buttons {
        grid-template-columns: 1fr !important;
    }


    .sm-hero-trust {
        grid-template-columns: 1fr 1fr 1fr !important;
    }


    .sm-hero-trust-item strong {
        font-size: 7px !important;
    }


    .sm-hero-trust-item span {
        font-size: 6px !important;
    }

}


/* =========================================================
   26. REMOVE OLD HERO SIDE CARD RULES
   Prevent old CSS from interfering
========================================================= */

.sm-hero .sm-hero-side-card,
.sm-hero .sm-hero-side-label,
.sm-hero .sm-hero-side-line,
.sm-hero .sm-hero-side-card h2,
.sm-hero .sm-hero-side-card p {
    display: none !important;
}


/* =========================================================
   27. VIDEO CONTROL NORMALIZATION
========================================================= */

.sm-hero video {
    -webkit-appearance: none !important;

    appearance: none !important;
}


.sm-hero video::-webkit-media-controls {
    display: none !important;
}


.sm-hero video::-webkit-media-controls-panel {
    display: none !important;
}


.sm-hero video::-webkit-media-controls-play-button {
    display: none !important;
}


.sm-hero video::-webkit-media-controls-start-playback-button {
    display: none !important;
}


/* =========================================================
   28. FINAL LAYER PROTECTION
========================================================= */

.sm-hero-background {
    pointer-events: none !important;
}


.sm-hero-overlay {
    pointer-events: none !important;
}


.sm-hero-inner,
.sm-hero-content,
.sm-hero-side,
.sm-hero-video-card {
    isolation: isolate;
}


/* =========================================================
   END SOURCINGMART HERO
========================================================= */