/* =========================================================
   WEBARTY TEMPLATES — HOMEPAGE HERO
   FULL CSS FOR REPLACEMENT
   VERSION: 2026-08-28 10:07

   DOM namespace: .wa-tpl-hero
   - Desktop 1208px–1536px: full visible viewport height
   - Mobile layout preserved and balanced
   - No global page selectors
   ========================================================= */


/* =========================================================
   LOCAL RESET
   ========================================================= */

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

.wa-tpl-hero h1,
.wa-tpl-hero p,
.wa-tpl-hero form {
    margin: 0;
    padding: 0;
}

.wa-tpl-hero a,
.wa-tpl-hero a:hover,
.wa-tpl-hero a:focus,
.wa-tpl-hero a:visited {
    text-decoration: none !important;
}


/* =========================================================
   SECTION
   ========================================================= */

.wa-tpl-hero {
    --wa-tpl-hero-dark: #172238;
    --wa-tpl-hero-dark-soft: #283550;
    --wa-tpl-hero-teal: #00a78e;
    --wa-tpl-hero-teal-hover: #008f7a;
    --wa-tpl-hero-green: #36c88a;
    --wa-tpl-hero-white: #ffffff;
    --wa-tpl-hero-text: rgba(255, 255, 255, .82);

    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    max-width: 100%;
    min-height: 650px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color: var(--wa-tpl-hero-white);

    background:
        radial-gradient(
            circle at 86% 26%,
            rgba(0, 167, 142, .26) 0%,
            rgba(0, 167, 142, 0) 42%
        ),
        radial-gradient(
            circle at 22% 104%,
            rgba(54, 200, 138, .07) 0%,
            rgba(54, 200, 138, 0) 35%
        ),
        linear-gradient(
            118deg,
            #111b31 0%,
            #243451 52%,
            #10515a 100%
        );

    font-family:
        var(--e-global-typography-text-font-family, "Roboto"),
        Arial,
        sans-serif;
}


/* =========================================================
   DECOR
   ========================================================= */

.wa-tpl-hero__decor {
    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;
}

.wa-tpl-hero__decor--top {
    top: -530px;
    right: -310px;

    width: 900px;
    height: 900px;

    border: 1px solid rgba(255, 255, 255, .045);
}

.wa-tpl-hero__decor--bottom {
    bottom: -525px;
    left: 17%;

    width: 690px;
    height: 690px;

    border: 1px solid rgba(54, 200, 138, .06);
}


/* =========================================================
   INNER
   ========================================================= */

.wa-tpl-hero__inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: min(calc(100% - 128px), 1380px);
    max-width: 1380px;
    min-height: 650px;

    margin: 0 auto;

    padding:
        calc(var(--wa-header-height, 88px) + 52px)
        0
        58px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.wa-tpl-hero__content {
    width: min(100%, 1040px);

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wa-tpl-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    margin: 0 0 20px;

    color: #78e0ce;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: .085em;
    text-transform: uppercase;
}

.wa-tpl-hero__eyebrow-line {
    display: block;
    flex: 0 0 35px;

    width: 35px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--wa-tpl-hero-teal),
            var(--wa-tpl-hero-green)
        );
}


/* =========================================================
   TITLE
   ========================================================= */

.wa-tpl-hero__title {
    width: 100%;
    max-width: 1040px;

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

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: clamp(58px, 4.55vw, 72px) !important;
    font-weight: 800 !important;
    line-height: 1.06 !important;

    letter-spacing: -.042em !important;
    text-align: center !important;
    text-transform: none !important;
}

.wa-tpl-hero__title > span {
    display: block;

    margin-top: 1px;

    color: transparent !important;

    background:
        linear-gradient(
            90deg,
            #55dcc8 0%,
            #36c88a 100%
        );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.wa-tpl-hero__description {
    width: min(100%, 720px);

    margin: 25px auto 0 !important;
    padding: 0 !important;

    color: var(--wa-tpl-hero-text) !important;

    font-size: 17px;
    font-weight: 400;
    line-height: 1.72;

    text-align: center;
}


/* =========================================================
   SEARCH
   ========================================================= */

.wa-tpl-hero__search-wrap {
    position: relative;

    width: min(100%, 940px);

    margin: 34px auto 0;
}

.wa-tpl-hero__search {
    position: relative;

    width: 100%;

    margin: 0;
}

.wa-tpl-hero__search-control {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 64px;

    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;

    background: #ffffff;

    box-shadow:
        0 14px 34px rgba(13, 29, 48, .14);
}

.wa-tpl-hero__search-icon {
    position: absolute;
    top: 50%;
    left: 24px;

    width: 21px;
    height: 21px;

    color: #72829d;

    transform: translateY(-50%);

    pointer-events: none;
}

.wa-tpl-hero__search input[type="search"] {
    display: block;

    width: 100%;
    min-width: 0;
    height: 62px;

    margin: 0 !important;

    padding:
        0
        58px
        0
        58px !important;

    border: 0 !important;
    border-radius: 999px !important;
    outline: 0 !important;

    color: #283550 !important;
    background: transparent !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;

    -webkit-appearance: none;
    appearance: none;
}

.wa-tpl-hero__search input[type="search"]::placeholder {
    color: #8190a8 !important;
    opacity: 1;
}

.wa-tpl-hero__search input[type="search"]::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}

.wa-tpl-hero__search-control:focus-within {
    border-color: rgba(85, 220, 200, .75);

    box-shadow:
        0 0 0 4px rgba(0, 167, 142, .13),
        0 14px 34px rgba(13, 29, 48, .14);
}


/* =========================================================
   SEARCH CLEAR
   ========================================================= */

.wa-tpl-hero__search-clear {
    position: absolute;
    top: 50%;
    right: 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #64748d;
    background: #eef3f4;

    cursor: pointer;

    transform: translateY(-50%);

    box-shadow: none;
}

.wa-tpl-hero__search-clear[hidden] {
    display: none !important;
}

.wa-tpl-hero__search-clear svg {
    width: 18px;
    height: 18px;
}

.wa-tpl-hero__search-clear:hover,
.wa-tpl-hero__search-clear:focus-visible {
    color: #283550;
    background: #e3ecec;
}


/* =========================================================
   SEARCH RESULTS DROPDOWN
   ========================================================= */

.wa-tpl-hero__results {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    z-index: 20;

    width: 100%;
    max-height: 390px;

    padding: 9px;

    overflow-x: hidden;
    overflow-y: auto;

    border: 1px solid #dce6e8;
    border-radius: 20px;

    color: #283550;
    background: #ffffff;

    box-shadow:
        0 22px 50px rgba(20, 39, 59, .18);

    text-align: left;
}

.wa-tpl-hero__results[hidden] {
    display: none !important;
}

.wa-tpl-hero__results a,
.wa-tpl-hero__results button {
    font-family: inherit;
}


/* =========================================================
   BROWSE LINK
   ========================================================= */

.wa-tpl-hero__browse,
.wa-tpl-hero__browse:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 17px;

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

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;

    transition: color .2s ease;
}

.wa-tpl-hero__browse > span {
    color: #46d3bd;

    font-size: 17px;
    line-height: 1;

    transition: color .2s ease;
}

.wa-tpl-hero__browse:hover,
.wa-tpl-hero__browse:focus-visible {
    color: #ffffff !important;
}

.wa-tpl-hero__browse:hover > span,
.wa-tpl-hero__browse:focus-visible > span {
    color: #6ee2cf;
}


/* =========================================================
   DESKTOP — FULL VISIBLE VIEWPORT
   1208px–1536px
   ========================================================= */

@media (min-width: 1208px) and (max-width: 1536px) {

    .wa-tpl-hero,
    .wa-tpl-hero__inner {
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
    }

    .wa-tpl-hero__inner {
        padding-top:
            calc(
                var(--wa-header-height, 88px)
                + 44px
            );

        padding-bottom: 42px;
    }
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1537px) {

    .wa-tpl-hero {
        min-height: 740px;
    }

    .wa-tpl-hero__inner {
        min-height: 740px;
    }

    .wa-tpl-hero__content {
        width: min(100%, 1100px);
    }

    .wa-tpl-hero__title {
        max-width: 1100px;

        font-size: 74px !important;
    }

    .wa-tpl-hero__description {
        max-width: 760px;

        font-size: 17.5px;
    }

    .wa-tpl-hero__search-wrap {
        width: min(100%, 980px);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1207px) {

    .wa-tpl-hero {
        min-height: 650px;
    }

    .wa-tpl-hero__inner {
        width: min(calc(100% - 72px), 1080px);
        min-height: 650px;

        padding:
            calc(var(--wa-header-height, 88px) + 48px)
            0
            54px;
    }

    .wa-tpl-hero__content {
        width: min(100%, 920px);
    }

    .wa-tpl-hero__title {
        font-size: clamp(50px, 6.4vw, 64px) !important;
    }

    .wa-tpl-hero__description {
        max-width: 700px;
    }

    .wa-tpl-hero__search-wrap {
        width: min(100%, 860px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .wa-tpl-hero {
        min-height: 0;
        height: auto;
    }

    .wa-tpl-hero__decor--top {
        top: -360px;
        right: -330px;

        width: 660px;
        height: 660px;
    }

    .wa-tpl-hero__decor--bottom {
        bottom: -430px;
        left: -180px;

        width: 590px;
        height: 590px;
    }

    .wa-tpl-hero__inner {
        width: calc(100% - 44px);
        min-height: 0;
        height: auto;

        padding:
            calc(var(--wa-header-height, 88px) + 48px)
            0
            54px;
    }

    .wa-tpl-hero__content {
        width: 100%;
    }

    .wa-tpl-hero__eyebrow {
        gap: 10px;

        margin-bottom: 17px;

        font-size: 10.5px;
        letter-spacing: .085em;
    }

    .wa-tpl-hero__eyebrow-line {
        flex-basis: 27px;

        width: 27px;
        height: 2px;
    }

    .wa-tpl-hero__title {
        max-width: 100%;

        font-size: clamp(34px, 8.55vw, 42px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.037em !important;
    }

    .wa-tpl-hero__title > span {
        margin-top: 4px;
    }

    .wa-tpl-hero__description {
        max-width: 100%;

        margin-top: 22px !important;

        font-size: 15.5px;
        line-height: 1.67;
    }

    .wa-tpl-hero__search-wrap {
        width: 100%;

        margin-top: 29px;
    }

    .wa-tpl-hero__search-control {
        min-height: 58px;
    }

    .wa-tpl-hero__search-icon {
        left: 20px;

        width: 20px;
        height: 20px;
    }

    .wa-tpl-hero__search input[type="search"] {
        height: 56px;

        padding:
            0
            52px
            0
            54px !important;

        font-size: 14px !important;
    }

    .wa-tpl-hero__search-clear {
        right: 10px;

        width: 36px;
        height: 36px;
    }

    .wa-tpl-hero__results {
        max-height: 330px;

        border-radius: 17px;
    }

    .wa-tpl-hero__browse,
    .wa-tpl-hero__browse:visited {
        margin-top: 18px;

        font-size: 12.5px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .wa-tpl-hero__inner {
        width: calc(100% - 44px);

        padding-top:
            calc(
                var(--wa-header-height, 88px)
                + 48px
            );

        padding-bottom: 46px;
    }

    .wa-tpl-hero__title {
        font-size: clamp(32px, 8.3vw, 36px) !important;
    }

    .wa-tpl-hero__description {
        font-size: 15px;
    }

    .wa-tpl-hero__search-wrap {
        margin-top: 28px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .wa-tpl-hero__inner {
        width: calc(100% - 36px);
    }

    .wa-tpl-hero__title {
        font-size: 31px !important;
    }

    .wa-tpl-hero__description {
        font-size: 14.5px;
    }

    .wa-tpl-hero__search input[type="search"] {
        font-size: 13.5px !important;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wa-tpl-hero *,
    .wa-tpl-hero *::before,
    .wa-tpl-hero *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}