@import url("whatsapp-widget.css");

/* =========================================================
   HIGH REACH — QUART WEB FONTS
   ========================================================= */
@font-face {
    font-family: "Quart";
    src:
        url("../../Web%20Fonts/Quart-Regular.woff2") format("woff2"),
        url("../../Web%20Fonts/Quart-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Quart Outline";
    src:
        url("../../Web%20Fonts/Quart-Outline.woff2") format("woff2"),
        url("../../Web%20Fonts/Quart-Outline.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html,
body,
button,
input,
textarea,
select {
    font-family: "Quart", Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li {
    font-family: "Quart", Arial, sans-serif;
}

.footer-outline-text,
.quart-outline,
.outline-text {
    font-family: "Quart Outline", "Quart", sans-serif !important;
}


/* =========================================================
   HIGH REACH — BRAND DESIGN SYSTEM
   ========================================================= */

:root {

    /* =========================
       BRAND COLOURS
       ========================= */

    --hr-blue: #0062F3;
    --hr-teal: #36C2B0;
    --hr-green: #A6EC6A;
    --hr-yellow: #FFD60A;

    --hr-white: #FFFFFF;
    --hr-black: #000000;


    /* =========================
       RGB COLOURS
       ========================= */

    --hr-blue-rgb: 0, 98, 243;
    --hr-teal-rgb: 54, 194, 176;
    --hr-green-rgb: 166, 236, 106;
    --hr-yellow-rgb: 255, 214, 10;

    --hr-white-rgb: 255, 255, 255;
    --hr-black-rgb: 0, 0, 0;


    /* =========================
       HIGH REACH TYPOGRAPHY
       ========================= */

    --hr-font-regular: "Quart", Arial, sans-serif;
    --hr-font-outline: "Quart Outline", "Quart", Arial, sans-serif;


    /* =========================
       AMOXI THEME OVERRIDES
       ========================= */

    --amoxi-font: var(--hr-font-regular);
    --amoxi-heading-font: var(--hr-font-regular);

    --amoxi-base: var(--hr-blue);
    --amoxi-base-rgb: var(--hr-blue-rgb);

    --amoxi-white: var(--hr-white);
    --amoxi-white-rgb: var(--hr-white-rgb);

    --amoxi-black: var(--hr-black);
    --amoxi-black-rgb: var(--hr-black-rgb);
}



/* =========================================================
   GLOBAL WEBSITE TYPOGRAPHY
   ========================================================= */

html,
body {
    font-family: var(--hr-font-regular) !important;
}


/* Body / navigation / UI text */
body,
p,
a,
li,
button,
input,
textarea,
select,
label {
    font-family: var(--hr-font-regular) !important;
}


/* All headings use Quart Regular by default */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--hr-font-regular) !important;
}


/* Prevent browser fake bold / fake italic */
body {
    font-synthesis: none;
}



/* =========================================================
   AMOXI COMPONENT FONT OVERRIDES
   ========================================================= */

.main-menu__list>li>a,
.main-header__phone__number,

.hero-one__title,
.hero-one__title__box,
.hero-one__text,

.sec-title__title,
.sec-title__tagline,

.amoxi-btn,
.amoxi-btn__text,

.service-card__title,
.portfolio-one__card__title,

.team-card__name,
.team-card__designation,

.blog-card__title,

.main-footer,
.main-footer__bottom__title {
    font-family: var(--hr-font-regular) !important;
}



/* =========================================================
   QUART FONT UTILITY CLASSES
   ========================================================= */


/* Quart Regular */
.quart-regular {
    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;
}


/* Quart Outline */
.quart-outline {
    font-family: var(--hr-font-outline) !important;
    font-weight: 400 !important;
}



/* =========================================================
   HIGH REACH HERO TYPOGRAPHY
   ========================================================= */

.hero-one__title,
.hero-one__title__box {
    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;
}


/* Each hero line */
.hr-hero-line {
    display: block;
    font-weight: 400 !important;
}


/* NOT JUST BUILDING */
.hr-hero-not-just {
    font-family: var(--hr-font-outline) !important;
    font-weight: 400 !important;
}


/* BRANDS */
.hr-hero-brands {
    font-family: var(--hr-font-outline) !important;
    font-weight: 400 !important;
}


/* WE MAKE THEM */
.hr-hero-we-make {
    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;
}


/* REACH HIGHER */
.hr-hero-reach-higher {
    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;
}



/* =========================================================
   HIGH REACH PRIMARY COLOUR OVERRIDES
   ========================================================= */


/* Active navigation */
.main-menu .main-menu__list>li.current>a,
.main-menu .main-menu__list>li:hover>a {
    color: var(--hr-blue);
}


/* Main button */
.amoxi-btn__text {
    background-color: var(--hr-blue);
}


/* Header menu button */
.sidebar-btn__toggler {
    background-color: var(--hr-blue);
}


/* Scroll indicator */
.scroll-btn__dot {
    background-color: var(--hr-blue);
}

/* =========================================================
   HERO — ARROW + REACH HIGHER SPACING
   ========================================================= */

.hr-reach-row {
    display: inline-flex;
    align-items: center;

    /* Space between arrow and text */
    gap: 24px;

    white-space: nowrap;
    vertical-align: middle;
}


/* Moving arrow */
.hr-reach-row .hero-one__title__shape-2 {
    flex-shrink: 0;

    margin: 0 !important;
}


/* REACH HIGHER text */
.hr-reach-row .hr-reach-text {
    display: inline-block;

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

    white-space: nowrap;

    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;

    line-height: 0.95;
}

/* =========================================================
   HIGH REACH — SVG RADIAL GRADIENT TITLE
   ========================================================= */

.hr-high-reach-svg {
    display: block;

    width: 126%;
    max-width: 620px;

    height: auto;

    overflow: visible;

    margin: 0 0 24px 0;
}


/* Quart Outline Typeface */

.hr-high-reach-svg text {
    font-family: var(--hr-font-outline) !important;

    font-size: 42px;

    font-weight: 400;

    letter-spacing: 0;
}

/* =========================================================
   HIGH REACH — HEADER PHONE BUTTON
   SAME EFFECT AS SPECIFIED IN "OUR CLIENTS" SECTION (.hr-client-card)
   ========================================================= */

.main-header__phone {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 28px !important;
    border-radius: 100px !important;

    /* Same glassmorphic base as .hr-client-card */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    text-decoration: none !important;
    transition: all 0.4s ease !important;
}

/* Same subtle gradient overlay as .hr-client-card::before */
.main-header__phone::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg,
            rgba(0, 98, 243, 0.15),
            rgba(54, 194, 176, 0.10),
            rgba(166, 236, 106, 0.10),
            rgba(255, 214, 10, 0.10)) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Phone icon & number sit cleanly on top */
.main-header__phone__icon,
.main-header__phone__number {
    position: relative !important;
    z-index: 2 !important;
}

.main-header__phone__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
    transition: all 0.4s ease !important;
}

.main-header__phone__icon svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    stroke: currentColor !important;
}

.main-header__phone__icon i {
    color: #FFFFFF !important;
}

.main-header__phone__number {
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    transition: all 0.4s ease !important;
}

/* Same hover effect as .hr-client-card:hover */
.main-header__phone:hover {
    transform: translateY(-3px) scale(1.02) !important;
    border-color: rgba(0, 98, 243, 0.35) !important;
    box-shadow: 0 15px 35px rgba(0, 98, 243, 0.16) !important;
}

.main-header__phone:hover::before {
    opacity: 1 !important;
}

.main-header__phone:hover .main-header__phone__icon i,
.main-header__phone:hover .main-header__phone__number {
    color: #FFFFFF !important;
}

/* Hide SVG overlay */
.main-header__phone .hr-phone-gradient {
    display: none !important;
}

/* =========================================================
   HIGH REACH — ALWAYS VISIBLE HEADER
   ========================================================= */

.main-header {
    position: fixed !important;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 9999;

    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Prevent sticky-header hide animation */

.sticky-header,
.sticky-header--normal,
.main-header.sticky-header {
    transform: translateY(0) !important;
    top: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* Keep header visible even when theme JS adds classes */

.main-header.active,
.main-header.fixed-header,
.main-header.sticky-header--cloned,
.main-header.sticky-header--active,
.sticky-header--active,
.sticky-header--cloned {
    transform: translateY(0) !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* =========================================================
   PAGE OFFSET
   Prevent hero from going behind fixed header
   ========================================================= */

#smooth-wrapper {
    padding-top: 130px;
}

/* =========================================================
   HIGH REACH — HEADER LOGO ALIGNMENT
   ========================================================= */

.main-header__container {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}


/* Keep header content vertically centred (original desktop alignment) */
.main-header__inner {
    min-height: 130px;

    display: flex;
    align-items: center;
}


/* Logo block (original desktop alignment) */
.main-header__logo {
    display: flex;
    align-items: center;

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


/* High Reach logo (original desktop alignment) */
.main-header__logo .hr-header-logo {
    display: block;

    width: 250px !important;
    height: auto !important;

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


/* =========================================================
   RESPONSIVE HEADER LOGO
   ========================================================= */

@media (max-width: 1199px) {

    .main-header__container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .main-header__logo .hr-header-logo {
        width: 220px !important;
    }

}

/* =========================================================
   MOBILE & TABLET VIEW: CENTRE HIGH REACH LOGO & TITLE
   (Applies strictly on mobile <= 991px, desktop 100% untouched)
   ========================================================= */

@media (max-width: 991px) {
    .main-header__inner {
        min-height: 90px !important;
        padding: 14px 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .main-header__logo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .main-header__logo a {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .main-header__logo img,
    .main-header__logo .hr-header-logo {
        display: block !important;
        margin: 0 auto !important;
        width: 200px !important;
        max-width: 75vw !important;
        height: auto !important;
    }

    .main-header__right {
        display: none !important;
    }

    #smooth-wrapper {
        padding-top: 90px !important;
    }
}

@media (max-width: 767px) {
    .main-header__container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .main-header__inner {
        min-height: 80px !important;
        padding: 12px 0 !important;
    }

    .main-header__logo img,
    .main-header__logo .hr-header-logo {
        width: 180px !important;
        max-width: 72vw !important;
    }

    #smooth-wrapper {
        padding-top: 80px !important;
    }
}

/* =========================================================
   HIGH REACH — HERO WITHOUT IMAGE / VIDEO
   ========================================================= */

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

.hero-one__row {
    align-items: flex-start;
}

.hero-one__left,
.hero-one__right {
    padding-bottom: 60px;
}

/* =========================================================
   HIGH REACH — HERO TOP SPACING FIX
   ========================================================= */

.hero-one {
    padding-top: 70px !important;

    min-height: calc(100vh - 130px) !important;
}


/* Keep hero content aligned toward the top */
.hero-one__row {
    align-items: flex-start !important;
}


/* Remove old theme spacing */
.hero-one__left,
.hero-one__right {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove extra heading offset */
.hero-one__title {
    margin-top: 0 !important;
}

/* =========================================================
   HIGH REACH — SEE / SHAPE / SEND / SCALE
   ========================================================= */

.hr-process-section .funfact-one__item__count {
    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    color: #FFFFFF;
}

.hr-process-section .funfact-one__item__text {
    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.65);
}


/* SEE — BLUE */

.hr-process-see::before {
    background: #0062F3 !important;
}


/* SHAPE — TEAL */

.hr-process-shape::before {
    background: #36C2B0 !important;
}


/* SEND — GREEN */

.hr-process-send::before {
    background: #A6EC6A !important;
}


/* SCALE — YELLOW */

.hr-process-scale::before {
    background: #FFD60A !important;
}


/* BLUE hover */

.hr-process-see:hover .funfact-one__item__count,
.hr-process-see:hover .funfact-one__item__text {
    color: #000000 !important;
}

.hr-process-see:hover .funfact-one__item__count::after {
    background: #000000 !important;
}


/* TEAL hover */

.hr-process-shape:hover .funfact-one__item__count,
.hr-process-shape:hover .funfact-one__item__text {
    color: #000000 !important;
}

.hr-process-shape:hover .funfact-one__item__count::after {
    background: #000000 !important;
}


/* GREEN hover */

.hr-process-send:hover .funfact-one__item__count,
.hr-process-send:hover .funfact-one__item__text {
    color: #000000 !important;
}

.hr-process-send:hover .funfact-one__item__count::after {
    background: #000000 !important;
}


/* YELLOW hover */

.hr-process-scale:hover .funfact-one__item__count,
.hr-process-scale:hover .funfact-one__item__text {
    color: #000000 !important;
}

.hr-process-scale:hover .funfact-one__item__count::after {
    background: #000000 !important;
}

/* =========================================================
   HIGH REACH — PURE PROCESS CARD COLOURS
   Remove original theme opacity blending
   ========================================================= */

.hr-process-section .funfact-one__item::before {

    /* Keep colour at full strength */
    opacity: 1 !important;

    /* No colour manipulation */
    filter: none !important;
    mix-blend-mode: normal !important;
    background-blend-mode: normal !important;

    /* Keep original flip, but animate ONLY transform */
    transform: rotateY(-90deg);

    transition:
        transform 0.5s ease !important;
}


/* Hover */
.hr-process-section .funfact-one__item:hover::before {

    opacity: 1 !important;

    transform: rotateY(0deg);

    transition:
        transform 0.5s ease !important;
}

/* =========================================================
   HIGH REACH PROCESS — UNDERLINE MATCH WORD WIDTH
   ========================================================= */

.hr-process-section .funfact-one__item__count {
    display: inline-block !important;
    width: fit-content !important;
    max-width: max-content !important;

    position: relative;
}

/* Override original Amoxi fixed 97px underline */
.hr-process-section .funfact-one__item__count::after {
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
}

/* =========================================================
   HIGH REACH PROCESS — MOBILE SCROLL ACTIVE STATE
   ========================================================= */

@media (max-width: 767px) {

    /* Prevent touch-hover from getting stuck */
    .hr-process-section .hr-process-card:hover::before {
        transform: rotateY(-90deg) !important;
        opacity: 1 !important;
    }


    /* Scroll active card */
    .hr-process-section .hr-process-card.is-active::before {
        transform: rotateY(0deg) !important;
        opacity: 1 !important;
    }


    /* =========================================
       SEE — BLUE
       ========================================= */

    .hr-process-see.is-active .funfact-one__item__count,
    .hr-process-see.is-active .funfact-one__item__text {
        color: #FFFFFF !important;
    }

    .hr-process-see.is-active .funfact-one__item__count::after {
        background-color: #FFFFFF !important;
    }


    /* =========================================
       SHAPE — TEAL
       ========================================= */

    .hr-process-shape.is-active .funfact-one__item__count,
    .hr-process-shape.is-active .funfact-one__item__text {
        color: #000000 !important;
    }

    .hr-process-shape.is-active .funfact-one__item__count::after {
        background-color: #000000 !important;
    }


    /* =========================================
       SEND — GREEN
       ========================================= */

    .hr-process-send.is-active .funfact-one__item__count,
    .hr-process-send.is-active .funfact-one__item__text {
        color: #000000 !important;
    }

    .hr-process-send.is-active .funfact-one__item__count::after {
        background-color: #000000 !important;
    }


    /* =========================================
       SCALE — YELLOW
       ========================================= */

    .hr-process-scale.is-active .funfact-one__item__count,
    .hr-process-scale.is-active .funfact-one__item__text {
        color: #000000 !important;
    }

    .hr-process-scale.is-active .funfact-one__item__count::after {
        background-color: #000000 !important;
    }


    /* Smooth text transition */
    .hr-process-section .funfact-one__item__count,
    .hr-process-section .funfact-one__item__text,
    .hr-process-section .funfact-one__item__count::after {
        transition:
            color 0.35s ease,
            background-color 0.35s ease !important;
    }

}

/* =========================================================
   HIGH REACH — HERO CENTERED LAYOUT
   ========================================================= */


/* Main hero spacing */
.hero-one {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
    min-height: auto !important;
}


/* Stack left + right hero areas vertically */
.hero-one__row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100%;
    margin: 0 !important;
}


/* Override Bootstrap 8/4 columns */
.hero-one__row>.col-xl-8,
.hero-one__row>.col-xl-4 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   MAIN HERO CONTENT
   ========================================================= */

.hero-one__left {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center !important;

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


/* Main heading - Fluid typography that fits all device widths */
.hero-one__title {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 0 28px 0 !important;
    font-size: clamp(31px, 8.8vw, 75px) !important;
    line-height: 1.15 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    box-sizing: border-box !important;
}


/* Heading inner wrapper - Line 1: We Make Brands */
.hero-one__title__box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
}


/* =========================================================
   ARROW + REACH HIGHER - Line 2
   ========================================================= */

.hr-reach-row {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
    gap: clamp(10px, 2.2vw, 24px) !important;
    margin-top: clamp(8px, 1.4vw, 16px) !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.hr-reach-row .hero-one__title__shape-2 {
    display: inline-block !important;
    width: clamp(26px, 6vw, 68px) !important;
    height: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}


/* Don't let text overflow; keep it fluidly scaled */
.hr-reach-text {
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 0 !important;
    font-size: 1em !important;
    line-height: 1 !important;
    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;
}

@media (max-width: 767px) {
    .hero-one {
        padding-top: 70px !important;
        padding-bottom: 50px !important;
    }

    .hero-one__title {
        font-size: clamp(29px, 8.4vw, 42px) !important;
        margin-bottom: 18px !important;
    }

    .hr-reach-row {
        gap: clamp(8px, 2vw, 14px) !important;
        margin-top: 6px !important;
    }

    .hr-reach-row .hero-one__title__shape-2 {
        width: clamp(24px, 6.2vw, 36px) !important;
    }

    /* Supporting copy centered cleanly on mobile without off-center hanging line */
    .hero-one__desc--1 {
        margin: 16px auto 26px !important;
        max-width: 92% !important;
    }

    .hero-one__desc--1 .hero-one__text {
        font-size: clamp(14px, 4vw, 16px) !important;
        line-height: 1.5 !important;
        padding-left: 0 !important;
        text-align: center !important;
    }

    .hero-one__desc--1 .hero-one__text::before {
        display: none !important;
    }
}

@media (max-width: 360px) {
    .hero-one__title {
        font-size: 27px !important;
    }

    .hr-reach-row .hero-one__title__shape-2 {
        width: 22px !important;
    }
}


/* =========================================================
   SMALL SUPPORTING COPY
   ========================================================= */

.hero-one__desc--1 {
    width: 100% !important;
    max-width: 100% !important;

    display: flex;
    justify-content: center;

    text-align: center !important;

    margin: 20px auto 35px !important;
}


/* Supporting text */
.hero-one__desc--1 .hero-one__text {
    display: inline-block;

    width: auto;

    padding-left: 16px;

    text-align: center;

    white-space: normal;
}


/* High Reach blue vertical line */
.hero-one__desc--1 .hero-one__text::before {
    background-color: #0062F3 !important;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

/* Center button wrapper */
.hero-one__left .hr-hero-cta-wrapper,
.hero-one__left>div[data-aos] {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 10px auto 0 !important;
}

.hero-one__left .amoxi-btn {
    margin: 0 !important;
}

/* =========================================================
   HIGH REACH — DYNAMIC MOVING CTA BUTTON
   Continuous floating, shimmer sheen & arrow micro-movement.
   ========================================================= */

.hr-hero-cta-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, box-shadow;
}

/* Hover & Active States (Desktop & touch) */
.hr-hero-cta-btn:hover,
.hr-hero-cta-btn:active {
    transform: translateY(-4px) scale(1.03) !important;
}

.hr-hero-cta-btn:hover .amoxi-btn__text,
.hr-hero-cta-btn:active .amoxi-btn__text {
    box-shadow:
        0 14px 32px rgba(0, 98, 243, 0.5),
        0 0 24px rgba(54, 194, 176, 0.35) !important;
}

.hr-hero-cta-btn:hover .amoxi-btn__icon i,
.hr-hero-cta-btn:active .amoxi-btn__icon i {
    transform: translateX(6px) !important;
}

/* =========================================================
   HIGH REACH — ACTION BUTTONS (CALL & WHATSAPP)
   Default: Original official icons.
   Touch / Hover: Radiant gradient effect appears smoothly!
   ========================================================= */

.hr-hero-action-buttons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.hr-hero-icon-btn {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4) !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
}

/* Gradient layer (opacity 0 by default, reveals on touch / hover) */
.hr-hero-icon-btn__gradient-bg {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.hr-hero-icon-btn__icon {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
    line-height: 1 !important;
}

/* --- WHATSAPP BUTTON --- */
/* Default: Original official WhatsApp look */
.hr-hero-icon-btn--wa {
    background-color: #25D366 !important;
    /* Original official WhatsApp green */
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow:
        0 8px 22px rgba(37, 211, 102, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.hr-hero-icon-btn--wa .hr-hero-icon-btn__icon i {
    color: #FFFFFF !important;
    font-size: 28px !important;
}

/* The gradient effect that shows upon touch/hover */
.hr-hero-icon-btn--wa .hr-hero-icon-btn__gradient-bg {
    background: linear-gradient(135deg,
            #FFD60A 0%,
            #A6EC6A 28%,
            #36C2B0 60%,
            #0062F3 100%) !important;
    background-size: 200% 200% !important;
    animation: hrGradientShift 4s ease infinite !important;
}

@keyframes hrGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Touch / Hover State: Reveal Gradient Effect */
.hr-hero-icon-btn--wa:hover,
.hr-hero-icon-btn--wa:active,
.hr-hero-icon-btn--wa:focus {
    transform: translateY(-4px) scale(1.1) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        0 14px 30px rgba(54, 194, 176, 0.5),
        0 0 25px rgba(255, 214, 10, 0.4) !important;
}

.hr-hero-icon-btn--wa:hover .hr-hero-icon-btn__gradient-bg,
.hr-hero-icon-btn--wa:active .hr-hero-icon-btn__gradient-bg,
.hr-hero-icon-btn--wa:focus .hr-hero-icon-btn__gradient-bg {
    opacity: 1 !important;
}

.hr-hero-icon-btn--wa:hover .hr-hero-icon-btn__icon,
.hr-hero-icon-btn--wa:active .hr-hero-icon-btn__icon,
.hr-hero-icon-btn--wa:focus .hr-hero-icon-btn__icon {
    transform: scale(1.14) rotate(6deg) !important;
}

/* --- CALL BUTTON --- */
/* Default: Original High Reach blue */
.hr-hero-icon-btn--call {
    background-color: #0062F3 !important;
    /* Original High Reach blue */
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow:
        0 8px 22px rgba(0, 98, 243, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.hr-hero-icon-btn--call .hr-hero-icon-btn__icon svg {
    display: block !important;
    stroke: #FFFFFF !important;
    width: 22px !important;
    height: 22px !important;
}

/* The gradient effect that shows upon touch/hover */
.hr-hero-icon-btn--call .hr-hero-icon-btn__gradient-bg {
    background: linear-gradient(135deg,
            #0062F3 0%,
            #36C2B0 50%,
            #A6EC6A 100%) !important;
}

/* Touch / Hover State: Reveal Gradient Effect */
.hr-hero-icon-btn--call:hover,
.hr-hero-icon-btn--call:active,
.hr-hero-icon-btn--call:focus {
    transform: translateY(-4px) scale(1.1) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        0 14px 30px rgba(0, 98, 243, 0.55),
        0 0 20px rgba(54, 194, 176, 0.45) !important;
}

.hr-hero-icon-btn--call:hover .hr-hero-icon-btn__gradient-bg,
.hr-hero-icon-btn--call:active .hr-hero-icon-btn__gradient-bg,
.hr-hero-icon-btn--call:focus .hr-hero-icon-btn__gradient-bg {
    opacity: 1 !important;
}

.hr-hero-icon-btn--call:hover .hr-hero-icon-btn__icon,
.hr-hero-icon-btn--call:active .hr-hero-icon-btn__icon,
.hr-hero-icon-btn--call:focus .hr-hero-icon-btn__icon {
    transform: scale(1.14) rotate(-8deg) !important;
}

/* Responsive adjustment for Mobile screens */
@media (max-width: 767px) {
    .hero-one__left .hr-hero-cta-wrapper {
        gap: 8px !important;
        flex-wrap: wrap !important;
        margin-top: 14px !important;
    }

    /* Dynamic top-to-bottom movement ONLY for mobile CTA button; WhatsApp and Call buttons remain completely static */
    .hr-hero-cta-btn {
        animation: hrMobileTopBottom 2.6s ease-in-out infinite !important;
        will-change: transform;
    }

    .hr-hero-action-buttons {
        animation: none !important;
        transform: none !important;
    }

    .hr-hero-icon-btn {
        width: 52px !important;
        height: 52px !important;
    }

    .hr-hero-icon-btn--wa .hr-hero-icon-btn__icon i {
        font-size: 26px !important;
    }

    .hr-hero-icon-btn--call .hr-hero-icon-btn__icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@keyframes hrMobileTopBottom {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(14px);
    }
}

@media (max-width: 420px) {
    .hr-hero-icon-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .hr-hero-icon-btn--wa .hr-hero-icon-btn__icon i {
        font-size: 24px !important;
    }

    .hr-hero-icon-btn--call .hr-hero-icon-btn__icon svg {
        width: 18px !important;
        height: 18px !important;
    }
}


/* =========================================================
   SECOND HIGH REACH GRADIENT SECTION
   ========================================================= */

.hero-one__right {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center !important;

    margin-top: 110px !important;

    overflow: visible !important;
}


/* Gradient High Reach container */
.hero-one__desc--2 {
    width: 100% !important;
    max-width: 500px !important;

    margin: 0 auto !important;

    padding-top: 28px;

    text-align: center !important;
}


/* Animated High Reach SVG */
.hero-one__desc--2 .hr-high-reach-svg {
    display: block;

    width: 100%;
    max-width: 500px;

    margin: 0 auto 25px !important;
}


/* Supporting text beneath gradient heading */
.hero-one__desc--2 .hero-one__text {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .hero-one {
        padding-top: 70px !important;
        padding-bottom: 75px !important;
    }

    .hero-one__right {
        margin-top: 80px !important;
    }

}


@media (max-width: 767px) {

    .hero-one {
        padding-top: 55px !important;
        padding-bottom: 65px !important;
    }

    .hero-one__desc--1 {
        margin-top: 15px !important;
        margin-bottom: 28px !important;
    }

    .hero-one__right {
        margin-top: 65px !important;
    }

    .hero-one__desc--2 {
        max-width: 90% !important;
    }

}


/* =========================================================
   HIGH REACH HERO — REMOVE OLD AMOXI DECORATIVE SHAPES
   ========================================================= */

/* Vertical scroll pill */
.hero-one .scroll-btn {
    display: none !important;
}


/* Small decorative star beside description */
.hero-one__desc__shape {
    display: none !important;
}


/* Large rotating orange shape */
.hero-one__shape {
    display: none !important;
}

/* =========================================================
   HIGH REACH — VISION STATEMENT ROW
   COPY LEFT / GRADIENT TITLE RIGHT
   ========================================================= */

.hero-one__desc--2.hr-vision-row {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;

    margin: 0 auto !important;

    padding-top: 35px !important;

    display: grid !important;

    /* copy left / title right */
    grid-template-columns: minmax(0, 1fr) auto;

    align-items: center !important;

    column-gap: clamp(60px, 8vw, 140px);

    text-align: left !important;
}

/* =========================================================
   HIGH REACH — VISION ROW FINAL ALIGNMENT
   HIGH REACH LEFT / COPY RIGHT
   ========================================================= */

.hero-one__right {
    width: 100% !important;

    margin-top: 45px !important;
    padding-top: 0 !important;
    padding-bottom: 35px !important;
}


/* Main row */
.hero-one__desc--2.hr-vision-row {
    width: min(1180px, 88%) !important;
    max-width: 1180px !important;

    margin: 0 auto !important;

    /* Reduce excessive vertical spacing */
    padding: 28px 0 30px !important;

    display: grid !important;

    grid-template-columns:
        minmax(430px, 560px) minmax(0, 1fr);

    align-items: center !important;

    column-gap: clamp(60px, 7vw, 110px);

    text-align: left !important;
}


/* =========================================================
   LEFT — HIGH REACH
   ========================================================= */

.hero-one__desc--2 .hr-high-reach-svg {
    grid-column: 1;

    display: block !important;

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

    height: auto !important;

    margin: 0 !important;

    justify-self: start !important;
}


/* =========================================================
   RIGHT — SENTENCE
   ========================================================= */

.hero-one__desc--2 .hr-vision-copy {
    grid-column: 2;

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

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

    text-align: left !important;

    line-height: 1.5 !important;
}

/* =========================================================
   REDUCE GAP BETWEEN VISION ROW & PROCESS CARDS
   ========================================================= */

.hero-one {
    padding-bottom: 60px !important;
    min-height: auto !important;
}

.hr-process-section,
.funfact-one.hr-process-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

@media (max-width: 991px) {

    .hero-one__desc--2.hr-vision-row {
        width: 88% !important;

        grid-template-columns: 1fr !important;

        row-gap: 28px;

        padding: 25px 0 30px !important;
    }

    .hero-one__desc--2 .hr-high-reach-svg {
        grid-column: 1;

        width: min(500px, 100%) !important;

        margin: 0 auto !important;

        justify-self: center !important;
    }

    .hero-one__desc--2 .hr-vision-copy {
        grid-column: 1;

        max-width: 600px !important;

        margin: 0 auto !important;

        text-align: center !important;
    }

}

/* =========================================================
   HIDE HERO SERVICE TAGS
   Branding / Technology / Design / Marketing / Production / Growth
   ========================================================= */

.hero-one__tags {
    display: none !important;
}

/* =========================================================
   HIGH REACH — EQUAL VERTICAL SPACING
   Top line ↔ Vision content ↔ SEE/SHAPE section
   ========================================================= */

:root {
    --hr-vision-space: 65px;
}


/* Remove extra spacing coming from parent containers */
.hero-one__right {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.hero-one {
    padding-bottom: 0 !important;
    min-height: auto !important;
}


/* Vision section */
.hero-one__desc--2.hr-vision-row {
    width: min(1180px, 88%) !important;
    max-width: 1180px !important;

    margin: 0 auto !important;

    /*
       SAME SPACE ABOVE AND BELOW
    */
    padding-top: var(--hr-vision-space) !important;
    padding-bottom: var(--hr-vision-space) !important;

    box-sizing: border-box;
}


/* Remove extra gap before SEE / SHAPE / SEND / SCALE */
.funfact-one.hr-process-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   HIGH REACH — HERO EQUAL TOP / BOTTOM SPACING
   ========================================================= */

:root {
    --hr-hero-edge-space: 110px;
}


/* Header → We Make Brands */
.hero-one {
    padding-top: var(--hr-hero-edge-space) !important;
}


/* CTA → horizontal line / next hero block */
.hero-one__left {
    padding-bottom: var(--hr-hero-edge-space) !important;
}


/* Remove old extra gap values that interfere */
.hero-one__right {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Keep vision row from adding another large top gap */
.hero-one__desc--2.hr-vision-row {
    padding-top: 0 !important;
}


/* =========================================================
   HIGH REACH — VISION SECTION EQUAL VERTICAL SPACING
   ========================================================= */

:root {
    --hr-vision-equal-space: 55px;
}


/* Vision row */
.hero-one__desc--2.hr-vision-row {
    width: min(1180px, 88%) !important;
    max-width: 1180px !important;

    margin: 0 auto !important;

    /* SAME SPACE ABOVE AND BELOW */
    padding-top: var(--hr-vision-equal-space) !important;
    padding-bottom: var(--hr-vision-equal-space) !important;

    box-sizing: border-box;
}

/* Remove extra spacing from parent */
.hero-one__right {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove extra hero bottom spacing */
.hero-one {
    padding-bottom: 0 !important;
}

/* SEE / SHAPE section should start immediately after
   the equal bottom spacing */
.funfact-one.hr-process-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   HIGH REACH — ▜ SHAPED SECTION ICON
   ========================================================= */

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text)::before {

    content: "" !important;

    display: inline-block !important;
    flex: 0 90 auto;

    width: 18px !important;
    height: 18px !important;

    background-color: #0062F3 !important;

    /* exact ▜-style block shape */
    clip-path: polygon(0 0,
            100% 0,
            100% 65%,
            65% 65%,
            65% 100%,
            0 100%);

    border: none !important;
    border-radius: 0 !important;

    margin: 0 10px 0 0 !important;

    transform: none !important;
}

/* =========================================================
   HIGH REACH — FINAL SECTION TITLE SYMBOL
   ========================================================= */


/* ---------------------------------------------------------
   REMOVE ORIGINAL AMOXI SECTION-TITLE SHAPES
   --------------------------------------------------------- */

/* Original images used around section titles */
img[alt*="section title shape" i],
img[alt*="title shape" i],
img[src*="section-title-shape" i],
img[src*="section_title_shape" i],
img[src*="section-title" i] {
    display: none !important;
}


/* Original decorative shape elements */
:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) [class*="shape"] {
    display: none !important;
}


/* Remove old pseudo-decoration */
:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text)::after {
    content: none !important;
    display: none !important;
}


/* ---------------------------------------------------------
   SECTION LABEL ALIGNMENT
   --------------------------------------------------------- */

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) {
    display: inline-flex !important;
    align-items: center !important;

    gap: 10px !important;

    position: relative !important;
}


/* ---------------------------------------------------------
   HIGH REACH ▜ / CHEVRON SYMBOL
   Geometry matched to your supplied reference
   --------------------------------------------------------- */

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text)::before {

    content: "" !important;

    display: inline-block !important;
    flex: 0 0 auto !important;

    width: 15px !important;
    height: 20px !important;

    background-color: #0062F3 !important;

    /*
       Exact proportion of the reference shape:
              ╲
               ╲
                >
               ╱
              ╱
    */

    clip-path: polygon(29.44% 0%,
            0% 26.85%,
            35.03% 49.81%,
            5.08% 77.04%,
            40.10% 100%,
            100% 45.91%) !important;

    border: none !important;
    border-radius: 0 !important;

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

    transform: none !important;

    opacity: 1 !important;
}

/* =========================================================
   REMOVE ORIGINAL AMOXI TRIANGLE / DOTS
   Keep only our new High Reach symbol
   ========================================================= */

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) [class*="shape"],

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) [class*="dot"],

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) [class*="triangle"],

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) [class*="icon"],

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) img,

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) svg,

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) i {
    display: none !important;
}


/* Remove pseudo-elements attached to those old decorative pieces */
:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) [class*="shape"]::before,

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) [class*="shape"]::after,

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) [class*="dot"]::before,

:is(.sec-title__tagline,
    .section-title__tagline,
    .section-title__sub-title,
    .section-title__subtitle,
    .section-title__tagline-text) [class*="dot"]::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   REMOVE ORIGINAL AMOXI SECTION TITLE SHAPES
   Triangle + dots
   ========================================================= */

.sec-title__shape,
.sec-title__shape__inner {
    display: none !important;
}

/* =========================================================
   HIGH REACH SECTION TITLE ALIGNMENT
   ========================================================= */

.sec-title__top {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.sec-title__tagline {
    margin: 0 !important;
}

/* =========================================================
   HIGH REACH SECTION TITLE SYMBOL
   ========================================================= */

.sec-title__tagline::before {
    content: "" !important;

    display: inline-block !important;
    flex: 0 0 auto !important;

    width: 15px !important;
    height: 20px !important;

    background-color: #0062F3 !important;

    clip-path: polygon(29.44% 0%,
            0% 26.85%,
            35.03% 49.81%,
            5.08% 77.04%,
            40.10% 100%,
            100% 45.91%) !important;

    border: none !important;
    border-radius: 0 !important;

    margin-right: 10px !important;

    vertical-align: middle !important;
}

/* =========================================================
   HIGH REACH — ABOUT SECTION CLEAN LAYOUT
   ========================================================= */


/* Remove spacing that belonged to the deleted icon */
.about-one__item {
    display: block !important;
    padding: 0 !important;
}


/* Paragraph now uses the full available width */
.about-one__item__text {
    width: 100% !important;
    max-width: 100% !important;

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

    text-align: left !important;
}


/* Clean spacing underneath main About heading */
.about-one__content .sec-title {
    margin-bottom: 32px !important;
}


/* Space between description and 84% block */
.about-one__item {
    margin-bottom: 38px !important;
}


/* Keep 84% block cleanly aligned */
.about-one__funfact {
    width: 100% !important;

    margin-top: 0 !important;
}


/* Remove any leftover experience positioning */
.about-one__image {
    padding-bottom: 0 !important;
}


/* About More button spacing */
.about-one__content .amoxi-btn {
    margin-top: 28px !important;
}


/* =========================================================
   HIGH REACH — ABOUT SECTION BRAND SHAPE
   Smaller + right aligned
   ========================================================= */

.about-one {
    position: relative !important;
    overflow: hidden !important;
}


/* Shape wrapper */
.about-one__shape {
    position: absolute !important;

    /* Align to right side of About section */
    right: 60px !important;
    left: auto !important;

    /* Vertically centre with About content */
    top: calc(50% - 65px) !important;
    bottom: auto !important;

    /* Smaller controlled size */
    width: 260px !important;
    height: 260px !important;

    z-index: 1 !important;

    pointer-events: none !important;
}


/* Actual PNG */
.about-one__shape img {
    display: block !important;

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

    object-fit: contain !important;

    max-width: none !important;
}

/* =========================================================
   HIGH REACH — 360° CARD FINAL
   Clean / Stable / Premium
   ========================================================= */

.about-one__funfact {
    width: 100% !important;
    min-height: 175px !important;

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

    align-items: center !important;

    /* Space around center divider */
    column-gap: 72px !important;

    padding: 34px 44px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    position: relative !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;

    background: transparent !important;

    overflow: hidden !important;

    transform: none !important;
    opacity: 1 !important;
}


/* =========================================================
   CENTER DIVIDER
   ========================================================= */

.about-one__funfact::before {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 1px !important;
    height: 88px !important;

    background: rgba(255, 255, 255, 0.16) !important;

    display: block !important;

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

    border: 0 !important;

    z-index: 1 !important;
}


/* Kill any old theme/card pseudo element */
.about-one__funfact::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   LEFT — 360°
   ========================================================= */

.about-one__funfact__count {
    width: 100% !important;
    min-width: 0 !important;

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

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    position: relative !important;
    z-index: 2 !important;

    border: 0 !important;

    color: #FFFFFF !important;

    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;

    font-size: clamp(62px, 4.5vw, 78px) !important;

    letter-spacing: -0.04em !important;

    white-space: nowrap !important;

    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;

    overflow: visible !important;
}


/* Animated counter digits */
.about-one__funfact__count .count-text {
    display: inline-block !important;

    position: static !important;

    width: auto !important;
    min-width: 3ch !important;

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

    color: #FFFFFF !important;

    font: inherit !important;

    text-align: right !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    overflow: visible !important;

    font-variant-numeric: tabular-nums !important;
}


/* =========================================================
   RIGHT — DESCRIPTION
   ========================================================= */

.about-one__funfact__text {
    width: 100% !important;
    max-width: 270px !important;

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

    justify-self: center !important;
    align-self: center !important;

    position: relative !important;
    z-index: 2 !important;

    text-align: left !important;

    font-family: var(--hr-font-regular) !important;
    font-weight: 400 !important;

    line-height: 1.42 !important;
}


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

@media (max-width: 991px) {

    .about-one__funfact {
        column-gap: 52px !important;

        padding: 30px 34px !important;
    }

    .about-one__funfact::before {
        height: 78px !important;
    }

    .about-one__funfact__count {
        font-size: 64px !important;
    }

}


/* =========================================================
   MOBILE
   Stack cleanly
   ========================================================= */

@media (max-width: 767px) {

    .about-one__funfact {
        grid-template-columns: 1fr !important;

        row-gap: 24px !important;

        padding: 30px 26px !important;

        min-height: auto !important;
    }


    .about-one__funfact::before {
        left: 50% !important;
        top: 50% !important;

        width: 90px !important;
        height: 1px !important;

        transform: translate(-50%, -50%) !important;
    }


    .about-one__funfact__count {
        justify-content: center !important;

        padding-bottom: 24px !important;

        font-size: 58px !important;
    }


    .about-one__funfact__text {
        max-width: 320px !important;

        justify-self: center !important;

        padding-top: 24px !important;

        text-align: center !important;
    }
}

/* =========================================================
   HIGH REACH — ABOUT IMAGES
   FINAL TRIANGLE VERSION
   IMPORTANT: clip ONLY the images, not reveal wrappers
   ========================================================= */


/* ---------------------------------------------------------
   RESET THE REVEAL WRAPPERS
   Do not interfere with Amoxi/BW reveal animation
   --------------------------------------------------------- */

.about-one .about-one__image_one .bw-reveal-left,
.about-one .about-one__image_two .bw-reveal-right {
    -webkit-clip-path: none !important;
    clip-path: none !important;

    border-radius: 0 !important;

    width: auto !important;
    height: auto !important;
}


/* ---------------------------------------------------------
   RESET ORIGINAL ROUND IMAGE STYLING
   --------------------------------------------------------- */

.about-one .about-one__image_one,
.about-one .about-one__image_two {
    border-radius: 0 !important;
}


/* ---------------------------------------------------------
   IMAGE 01 — TOP / RIGHT IMAGE
   Triangle points LEFT toward centre
   --------------------------------------------------------- */

.about-one .about-one__image_one .bw-reveal-left>img {
    display: block !important;

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

    max-width: 100% !important;

    object-fit: cover !important;

    border-radius: 0 !important;

    -webkit-clip-path: polygon(100% 0%,
            0% 50%,
            100% 100%) !important;

    clip-path: polygon(100% 0%,
            0% 50%,
            100% 100%) !important;
}


/* ---------------------------------------------------------
   IMAGE 02 — BOTTOM / LEFT IMAGE
   Triangle points RIGHT toward centre
   --------------------------------------------------------- */

.about-one .about-one__image_two .bw-reveal-right>img {
    display: block !important;

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

    max-width: 100% !important;

    object-fit: cover !important;

    border-radius: 0 !important;

    -webkit-clip-path: polygon(0% 0%,
            100% 50%,
            0% 100%) !important;

    clip-path: polygon(0% 0%,
            100% 50%,
            0% 100%) !important;
}


/* =========================================================
   HIGH REACH — SERVICES PORTFOLIO TEXT CASE
   ========================================================= */

.portfolio-two .sec-title__tagline,
.portfolio-two .sec-title__title,
.portfolio-two .amoxi-btn__text {
    text-transform: none !important;
}

/* ==========================================
   HIGH REACH — SERVICES SECTION BACKGROUND
   ========================================== */

.portfolio-two {
    background: #000000 !important;
    background-image: none !important;
}

.portfolio-two .section-bg {
    display: none !important;
    background: none !important;
    background-image: none !important;
}

@media (min-width: 1200px) {

    .portfolio-two {
        zoom: 0.67;

        width: 149.2537% !important;

        margin-left: -24.62685% !important;

        max-width: none !important;
    }
}

/* =========================================================
   HIGH REACH — SERVICES / PORTFOLIO CAROUSEL
   Preserve original Home Two composition
   Scale ONLY the visual carousel
   ========================================================= */


/* Reset any previous scaling */
.portfolio-two {
    zoom: 1 !important;
    width: 100% !important;
    margin-left: 0 !important;
    max-width: none !important;

    background: #000000 !important;
    background-image: none !important;
}


/* Remove original textured background */
.portfolio-two .section-bg {
    display: none !important;
    background: none !important;
    background-image: none !important;
}


/* Keep carousel wrapper free */
.portfolio-two__container {
    width: 100% !important;
    max-width: none !important;

    overflow: visible !important;
}


/* =========================================================
   DESKTOP
   Visually reproduce the zoomed-out composition
   without breaking Swiper / AOS
   ========================================================= */

@media (min-width: 1200px) {

    .portfolio-two__carousel {
        width: 149.2537% !important;

        margin-left: -24.62685% !important;

        transform: scale(0.67) !important;
        transform-origin: top center !important;
    }

}


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

@media (min-width: 768px) and (max-width: 1199px) {

    .portfolio-two__carousel {
        width: 125% !important;

        margin-left: -12.5% !important;

        transform: scale(0.80) !important;
        transform-origin: top center !important;
    }

}

/* =========================================================
   MOBILE
   Let original Swiper responsive layout work
   ========================================================= */

@media (max-width: 767px) {

    .portfolio-two__carousel {
        width: 100% !important;

        margin-left: 0 !important;

        transform: none !important;
    }

}

/* Prevent page-level horizontal scrollbar */
html,
body {
    overflow-x: hidden !important;
}

/* =========================================================
   HIGH REACH — SERVICES HEADING
   FIX DESCENDERS / TEXT MASK CLIPPING
   ========================================================= */

.portfolio-two .sec-title__title {
    line-height: 1.12 !important;

    overflow: visible !important;

    padding-top: 0.04em !important;
    padding-bottom: 0.14em !important;

    height: auto !important;
}


/* BW split-text creates nested spans.
   Do not allow them to crop g / y / p / j letters. */

.portfolio-two .sec-title__title.bw-split-text,
.portfolio-two .sec-title__title.bw-split-text span,
.portfolio-two .sec-title__title.bw-split-text .word,
.portfolio-two .sec-title__title.bw-split-text .char {
    overflow: visible !important;
}


/* Keep each animated line tall enough */
.portfolio-two .sec-title__title span {
    line-height: inherit !important;
}


/* =========================================================
   HIGH REACH — GLOBAL HEADING DESCENDER FIX
   Prevents g / y / p / j from being clipped
   ========================================================= */


/* Give headings enough vertical room */
h1,
h2,
h3,
h4,
h5,
h6,
.sec-title__title {
    line-height: 1.15 !important;

    overflow: visible !important;

    padding-bottom: 0.12em !important;

    box-sizing: content-box !important;
}


/* ---------------------------------------------------------
   BW split/reveal typography
   --------------------------------------------------------- */

.bw-split-text,
.bw-title-anim {
    line-height: 1.15 !important;

    overflow: visible !important;
}


/* Generated animation wrappers */
.bw-split-text>span,
.bw-split-text>div,
.bw-title-anim>span,
.bw-title-anim>div,

.bw-split-text .line,
.bw-split-text .word,
.bw-split-text .char,

.bw-title-anim .line,
.bw-title-anim .word,
.bw-title-anim .char {
    line-height: 1.15 !important;

    padding-bottom: 0.14em !important;
    margin-bottom: -0.14em !important;

    box-sizing: content-box !important;
}


/* Parent title containers must not crop the font */
.sec-title,
.sec-title__top,
.sec-title__title,
.about-one__content,
.hero-one__title,
.hero-one__title__box {
    overflow: visible !important;
}

/* =========================================================
   HIGH REACH — SERVICES CTA FINAL
   Original Home Two shape + animation
   High Reach brand colours
   ========================================================= */

.portfolio-two .hr-services-cta {
    background: #0062F3 !important;
    background-color: #0062F3 !important;
}

/* Normal text */
.portfolio-two .hr-services-cta .amoxi-btn__text {
    color: #FFFFFF !important;
}

/* Normal arrow circle */
.portfolio-two .hr-services-cta .amoxi-btn__icon {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Normal arrow */
.portfolio-two .hr-services-cta .amoxi-btn__icon i {
    color: #0062F3 !important;
}

/* Hover text */
.portfolio-two .hr-services-cta:hover .amoxi-btn__text {
    color: #000000 !important;
}

/* Hover arrow circle */
.portfolio-two .hr-services-cta:hover .amoxi-btn__icon {
    background: #0062F3 !important;
    background-color: #0062F3 !important;
}

/* Hover arrow */
.portfolio-two .hr-services-cta:hover .amoxi-btn__icon i {
    color: #FFFFFF !important;
}

/* =========================================================
   HIGH REACH — GLOBAL BUTTON BRAND SYSTEM
   All Amoxi buttons use High Reach blue
   ========================================================= */

:root {
    --amoxi-base: #0062F3;
}


/* =========================================================
   STANDARD BUTTON
   ========================================================= */

.amoxi-btn .amoxi-btn__text {
    background: #0062F3 !important;
    background-image: none !important;
    color: #FFFFFF !important;
}


/* Normal arrow circle */
.amoxi-btn .amoxi-btn__icon-box {
    background: #FFFFFF !important;
}


/* Normal arrow */
.amoxi-btn .amoxi-btn__icon {
    color: #0062F3 !important;
}


/* =========================================================
   AMOXI BUTTON TWO
   Remove original orange gradient everywhere
   ========================================================= */

.amoxi-btn--two .amoxi-btn__text {
    background: #0062F3 !important;
    background-image: none !important;
}


/* Animated layer inside icon circle */
.amoxi-btn--two .amoxi-btn__icon-box::after {
    background: #0062F3 !important;
    background-image: none !important;
}


/* =========================================================
   HOVER STATE
   Same behaviour as More About Us / Let's Reach Higher
   ========================================================= */

.amoxi-btn:hover .amoxi-btn__text {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #000000 !important;
}


/* Hover arrow circle */
.amoxi-btn:hover .amoxi-btn__icon-box {
    background: #0062F3 !important;
}


/* Hover arrow */
.amoxi-btn:hover .amoxi-btn__icon {
    color: #FFFFFF !important;
}


/* Keep variant-two animated layer High Reach blue */
.amoxi-btn--two:hover .amoxi-btn__icon-box::after {
    background: #0062F3 !important;
    background-image: none !important;
}

/* =========================================================
   HIGH REACH — SERVICES CAROUSEL BRAND COLOURS
   ========================================================= */


/* ---------------------------------------------------------
   1. SERVICE CARD BOTTOM PANEL
   Orange → High Reach gradient
   --------------------------------------------------------- */

/* =========================================================
   HIGH REACH — SERVICES CARD FROSTED GLASS
   ========================================================= */

.portfolio-two__card__content {
    /* Frosted glass surface */
    background: rgba(255, 255, 255, 0.58) !important;
    background-image: linear-gradient(135deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.48) 100%) !important;

    /* Glass blur */
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);

    /* Premium glass edge */
    border-top: 1px solid rgba(255, 255, 255, 0.65);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 12px 35px rgba(0, 0, 0, 0.12);

    /* Keep existing rounded lower corners */
    color: #000000 !important;
}

/* =========================================================
   SERVICES CARD — BLACK TYPOGRAPHY
   ========================================================= */

.portfolio-two__card__content,
.portfolio-two__card__content a,
.portfolio-two__card__content p,
.portfolio-two__card__content span,
.portfolio-two__card__content h1,
.portfolio-two__card__content h2,
.portfolio-two__card__content h3,
.portfolio-two__card__content h4,
.portfolio-two__card__content h5,
.portfolio-two__card__content h6 {
    color: #000000 !important;
}

/* Keep content readable over the gradient */
.portfolio-two .portfolio-two__content,
.portfolio-two .portfolio-two__content a,
.portfolio-two .portfolio-two__content p,
.portfolio-two .portfolio-two__content span,
.portfolio-two .portfolio-two__content h1,
.portfolio-two .portfolio-two__content h2,
.portfolio-two .portfolio-two__content h3,
.portfolio-two .portfolio-two__content h4,
.portfolio-two .portfolio-two__content h5 {
    color: #FFFFFF !important;
}

.portfolio-two__card__year,
.portfolio-two__card__number {
    color: #000000 !important;
    -webkit-text-stroke: 0 !important;
}

/* ---------------------------------------------------------
   2. CAROUSEL PREVIOUS / NEXT BUTTONS
   --------------------------------------------------------- */

.portfolio-two__prev,
.portfolio-two__next {
    background: #0062F3 !important;
    background-image: none !important;

    border-color: #0062F3 !important;

    color: #FFFFFF !important;

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


/* Arrow / icon */
.portfolio-two__prev i,
.portfolio-two__next i,
.portfolio-two__prev svg,
.portfolio-two__next svg {
    color: #FFFFFF !important;
    fill: currentColor !important;
}


/* ---------------------------------------------------------
   Navigation hover
   Same High Reach button behaviour
   --------------------------------------------------------- */

.portfolio-two__prev:hover,
.portfolio-two__next:hover {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;

    color: #0062F3 !important;

    transform: translateY(-2px);
}


.portfolio-two__prev:hover i,
.portfolio-two__next:hover i,
.portfolio-two__prev:hover svg,
.portfolio-two__next:hover svg {
    color: #0062F3 !important;
    fill: currentColor !important;
}

/* Remove remaining Amoxi orange layers */

.portfolio-two .portfolio-two__content::before,
.portfolio-two .portfolio-two__content::after {
    background: linear-gradient(90deg,
            #FFD60A 0%,
            #A6EC6A 33.33%,
            #36C2B0 66.66%,
            #0062F3 100%) !important;

    background-image: linear-gradient(90deg,
            #FFD60A 0%,
            #A6EC6A 33.33%,
            #36C2B0 66.66%,
            #0062F3 100%) !important;
}

/* =========================================================
   HIGH REACH — GLOBAL AMOXI BUTTON TWO
   Orange -> High Reach Blue
   ========================================================= */

.amoxi-btn--two .amoxi-btn__text {
    background: #0062F3 !important;
    background-image: none !important;
    color: #FFFFFF !important;
}

.amoxi-btn--two .amoxi-btn__icon-box::after {
    background: #0062F3 !important;
    background-image: none !important;
}

.amoxi-btn--two .amoxi-btn__icon {
    color: #0062F3 !important;
}

.amoxi-btn--two:hover .amoxi-btn__icon {
    color: #FFFFFF !important;
}

/* =========================================================
   HIGH REACH — PORTFOLIO / SERVICES CARD
   Exact override of Home Two orange footer
   ========================================================= */

.portfolio-two__card__content {
    background: linear-gradient(90deg,
            #FFD60A 0%,
            #A6EC6A 30%,
            #36C2B0 62%,
            #0062F3 100%) !important;
}

/* =========================================================
   HIGH REACH — PORTFOLIO CAROUSEL ARROWS
   ========================================================= */

.portfolio-two__prev,
.portfolio-two__next {
    background: #0062F3 !important;
    background-image: none !important;
    border-color: #0062F3 !important;
    color: #FFFFFF !important;
}

.portfolio-two__prev i,
.portfolio-two__next i {
    color: #FFFFFF !important;
}

/* Hover */
.portfolio-two__prev:hover,
.portfolio-two__next:hover {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #0062F3 !important;
}

.portfolio-two__prev:hover i,
.portfolio-two__next:hover i {
    color: #0062F3 !important;
}

/* =========================================================
   HIGH REACH — CAROUSEL NAV FINAL HOVER FIX
   ========================================================= */

/* Normal state */
.portfolio-two .portfolio-two__prev,
.portfolio-two .portfolio-two__next {
    background: #0062F3 !important;
    background-image: none !important;
    border-color: #0062F3 !important;
    color: #FFFFFF !important;
}


/* REMOVE ANY AMOXI ORANGE ANIMATION LAYERS */
.portfolio-two .portfolio-two__prev::before,
.portfolio-two .portfolio-two__prev::after,
.portfolio-two .portfolio-two__next::before,
.portfolio-two .portfolio-two__next::after {
    background: #0062F3 !important;
    background-image: none !important;
}


/* HOVER = WHITE */
.portfolio-two .portfolio-two__prev:hover,
.portfolio-two .portfolio-two__next:hover {
    background: #FFFFFF !important;
    background-image: none !important;
    border-color: #FFFFFF !important;
    color: #0062F3 !important;
}


/* Any animated pseudo-element must also become white */
.portfolio-two .portfolio-two__prev:hover::before,
.portfolio-two .portfolio-two__prev:hover::after,
.portfolio-two .portfolio-two__next:hover::before,
.portfolio-two .portfolio-two__next:hover::after {
    background: #FFFFFF !important;
    background-image: none !important;
}


/* Arrow */
.portfolio-two .portfolio-two__prev i,
.portfolio-two .portfolio-two__next i {
    color: #FFFFFF !important;
}


/* Hover arrow = blue */
.portfolio-two .portfolio-two__prev:hover i,
.portfolio-two .portfolio-two__next:hover i {
    color: #0062F3 !important;
}

/* =========================================================
   HIGH REACH — SERVICES CARD TRUE FROSTED GLASS
   Image visible through the information panel
   ========================================================= */

.portfolio-two__card__content {
    /* REMOVE ALL GRADIENTS */
    background: rgba(255, 255, 255, 0.28) !important;
    background-image: none !important;

    /* TRUE GLASS EFFECT */
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);

    /* Premium glass edge */
    border-top: 1px solid rgba(255, 255, 255, 0.55);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 -8px 30px rgba(0, 0, 0, 0.08);

    color: #000000 !important;
}

/* Text inside frosted panel */

.portfolio-two__card__content,
.portfolio-two__card__content a,
.portfolio-two__card__content p,
.portfolio-two__card__content span,
.portfolio-two__card__content h1,
.portfolio-two__card__content h2,
.portfolio-two__card__content h3,
.portfolio-two__card__content h4,
.portfolio-two__card__content h5,
.portfolio-two__card__content h6 {
    color: #000000 !important;
}


/* =========================================================
   HIGH REACH — SERVICES TO MARQUEE SPACING
   ========================================================= */

/* Reduce only the services carousel bottom space */
.portfolio-two.section-space-b {
    padding-bottom: clamp(30px, 3vw, 55px) !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
}

/* Remove unnecessary internal bottom space */
.portfolio-two__container,
.portfolio-two__carousel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}



/* Carousel navigation spacing */
.portfolio-two__nav,
.portfolio-two__navigation {
    margin-top: 25px !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   HIGH REACH — SERVICES → SLIDE TEXT SPACING
   ========================================================= */

/* Reduce empty space below services carousel */
.portfolio-two.section-space-b {
    padding-bottom: 35px !important;
    margin-bottom: 0 !important;
}

/* Remove extra space before diagonal text section */
.portfolio-two+.slide-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Make sure slide-text itself has no unnecessary vertical gap */
.slide-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* =========================================================
   HIGH REACH — TEAM HEADING
   ========================================================= */

.team-one .sec-title__title,
.team-one .sec-title__title *,
.team-two .sec-title__title,
.team-two .sec-title__title * {
    color: #FFFFFF;
}

.team-one .sec-title__tagline,
.team-one .sec-title__tagline *,
.team-two .sec-title__tagline,
.team-two .sec-title__tagline * {
    color: #0062F3;
}

.team-three .sec-title__title,
.team-three .sec-title__title * {
    color: #FFFFFF;
}

.team-three .sec-title__tagline,
.team-three .sec-title__tagline * {
    color: #0062F3;
}

/* =========================================
   HIGH REACH — TEAM CLEANUP
   ========================================= */

/* Hide social icons completely */
.team-one .social-links {
    display: none !important;
}


/* Keep team member name in one line */
.team-one .team-card__title,
.team-one .team-card__title a {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* Give name enough width */
.team-one .team-card__content {
    width: 100% !important;
}


/* Prevent title from wrapping because of narrow layout */
.team-one .team-card__title {
    width: auto !important;
    max-width: none !important;
}

/* =========================================================
   HIGH REACH — TEAM NAME CLIPPING FIX
   ========================================================= */

.team-one .team-card__title {
    line-height: 1.12 !important;
    padding-bottom: 0.14em !important;

    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

.team-one .team-card__title a {
    display: inline-block !important;

    line-height: 1.12 !important;
    padding-bottom: 0.14em !important;

    overflow: visible !important;
    height: auto !important;

    white-space: nowrap !important;
}

/* Allow descenders such as g, y, p, q to extend normally */
.team-one .team-card__content {
    overflow: visible !important;
}

.team-one .team-card {
    overflow: visible !important;
}


/* =====================================================
   HIGH REACH — TEAM MEMBER NAME
   Fully independent from Amoxi title effects
   ===================================================== */

.team-one .hr-team-name {
    margin: 0 !important;
    padding: 0 0 0.16em 0 !important;

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

    position: relative !important;
    z-index: 20 !important;

    overflow: visible !important;

    font-family: "Quart", sans-serif !important;
    font-size: clamp(58px, 6vw, 110px) !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;

    white-space: nowrap !important;

    color: #ffffff !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    mask: none !important;
    -webkit-mask: none !important;
}


.team-one .hr-team-name a {
    display: inline-block !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 !important;

    line-height: 1.18 !important;

    overflow: visible !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    mask: none !important;
    -webkit-mask: none !important;

    background: none !important;
    background-image: none !important;

    white-space: nowrap !important;
    text-decoration: none !important;
}

.portfolio-one {
    padding-top: 130px !important;
}

.portfolio-one__head {
    margin-bottom: 50px;
}

.portfolio-one__head .sec-title {
    margin-bottom: 0 !important;
}

.portfolio-one__head .sec-title--center .sec-title__top {
    justify-content: center !important;
}

/* Uniform portfolio card box — every image fits the same 550x494 frame */
.portfolio-one__card {
    flex: 0 0 auto;
    width: 550px;
    max-width: 80vw;
}

.portfolio-one__card__image {
    width: 100%;
    aspect-ratio: 550 / 494;
    overflow: hidden;
    background-color: #0b0c10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-one__card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
    display: block;
}

@media (max-width: 991px) {
    .portfolio-one {
        padding-top: 90px !important;
    }

    .portfolio-one__head {
        margin-bottom: 35px;
    }
}

/* =========================================================
   HIGH REACH — HIDE TEAM / VIDEO / AWARDS
   ========================================================= */

.team-one,
.video-one,
.awards-one {
    display: none !important;
}

/* =========================================================
   HIGH REACH — HIDE CLIENT LOGOS
   ========================================================= */

.client-carousel {
    display: none !important;
}

/* =========================================================
   HIGH REACH — FOOTER STROKE TITLE (PORTFOLIO STYLE + AUTO-FIT DEVICE WIDTH)
   ========================================================= */

.main-footer__bottom {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding: 30px 0 60px !important;
    position: relative !important;
}

.main-footer__bottom .container,
.main-footer__bottom .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.main-footer__bottom .stroke-text-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    text-align: center !important;
    overflow: visible !important;
}

.main-footer__bottom .stroke-text-title svg {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    overflow: visible !important;
    height: clamp(40px, 8vw, 140px) !important;
}

.main-footer__bottom .stroke-text-title svg:not(:root) {
    overflow: visible !important;
}

.main-footer__bottom .stroke-text-title svg text {
    margin: 0 !important;
    font-family: var(--hr-font-regular, "Quart", Arial, sans-serif) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    font-size: clamp(28px, 6vw, 110px) !important;
    line-height: 1 !important;
    animation: svgFooterWhiteAnimation 5s ease-in-out infinite alternate !important;
}

@keyframes svgFooterWhiteAnimation {
    0% {
        fill: rgba(255, 255, 255, 0);
        stroke: rgba(255, 255, 255, 1);
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 1.5;
    }

    40% {
        fill: rgba(255, 255, 255, 0);
        stroke: rgba(255, 255, 255, 1);
        stroke-dashoffset: 0%;
        stroke-dasharray: 25% 25%;
        stroke-width: 1.5;
    }

    70% {
        fill: rgba(255, 255, 255, 0);
        stroke: rgba(255, 255, 255, 1);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 1.5;
    }

    85% {
        fill: rgba(255, 255, 255, 0.5);
        stroke: rgba(255, 255, 255, 1);
        stroke-width: 1.5;
    }

    100% {
        fill: rgba(255, 255, 255, 1);
        stroke: rgba(255, 255, 255, 0);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 0;
    }
}

.main-footer__bottom,
.main-footer__bottom .container,
.main-footer__bottom .container-fluid,
.main-footer__bottom__inner {
    overflow: visible !important;
}

/* =========================================================
   HIGH REACH — HIDE UNUSED HOMEPAGE SECTIONS
   ========================================================= */

/* Hide Our Work Process */
.work-process {
    display: none !important;
}

/* Hide Our Blog & News */
.blog-one {
    display: none !important;
}

/* Hide all footer content ABOVE High Reach.Media */
.main-footer__top {
    display: none !important;
}

/* Hide footer copyright below High Reach.Media */
.main-footer__bottom__inner {
    display: none !important;
}

/* Optional: hide footer decorative shapes */
.main-footer__shape-1,
.main-footer__shape-2 {
    display: none !important;
}

/* =========================================================
   HIGH REACH — FOOTER SPACING & CENTERING
   ========================================================= */

@media (min-width: 992px) {
    .main-footer__bottom {
        padding: 30px 0 160px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .main-footer__bottom .container,
    .main-footer__bottom .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .main-footer__bottom__title {
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
}


/* =========================================================
   HIGH REACH — REMOVE SERVICE CARD HOVER OVERLAY + ARROW
   ========================================================= */

/* Remove dark/gray hover overlay */
.portfolio-two__card__image::after {
    display: none !important;
}

/* Remove hover arrow completely */
.portfolio-two__card__link {
    display: none !important;
}

/* Optional: stop image zoom/rotation on hover */
.portfolio-two__carousel .center:hover .portfolio-two__card__image img {
    transform: none !important;
}


/* =========================================================
   HIGH REACH — REMOVE PORTFOLIO HOVER OVERLAY
   ========================================================= */

.portfolio-one__card__content {
    display: none !important;
}



/* =========================================================
   HIGH REACH — HIDE ABOUT + SERVICES CTA BUTTONS
   ========================================================= */

.about-one__btn,
.services-one__btn,
.about-one .amoxi-btn,
.services-one .amoxi-btn {
    display: none !important;
}

/* Hide Explore All Services button */
.portfolio-two__button {
    display: none !important;
}


/* =========================================================
   HIGH REACH — GRAYSCALE IMAGE MASK INSIDE "BRANDS"
   ========================================================= */

.hero-one__title__highlight {
    filter: grayscale(100%) !important;
}

/* =========================================================
   HIGH REACH — HERO "BRANDS" ANIMATED GRADIENT
   ========================================================= */

.hero-one__title__highlight.hr-brand-gradient {
    background: radial-gradient(circle at 0% 50%,
            #FFD60A 0%,
            #A6EC6A 33%,
            #36C2B0 66%,
            #0062F3 100%);

    background-size: 220% 220%;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    animation: hrBrandGradientMove 5s ease-in-out infinite alternate;

    filter: none !important;
}

@keyframes hrBrandGradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* =========================================================
   HIGH REACH — MINIMAL HEADER FOR LAUNCH
   Keep: Logo / Home / Contact / Phone
   Hide: Services / Pages / Shop / Blog
   ========================================================= */
.main-menu .main-menu__list>li:nth-child(2),
.main-menu .main-menu__list>li:nth-child(3),
.main-menu .main-menu__list>li:nth-child(4),
.main-menu .main-menu__list>li:nth-child(5),
.main-menu .main-menu__list>li:nth-child(2),
.main-menu .main-menu__list>li:nth-child(3),
.main-menu .main-menu__list>li:nth-child(4),
.main-menu .main-menu__list>li:nth-child(5),
.main-menu .main-menu__list>li:nth-child(6) {
    display: none !important;
}

/* =========================================================
   HIGH REACH — REMOVE HOME DROPDOWN
   ========================================================= */

/* Hide dropdown menu under Home */
.main-menu .main-menu__list>li:first-child>ul {
    display: none !important;
}

/* Hide Home dropdown arrow/icon */
.main-menu .main-menu__list>li:first-child>a::after {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}

/* CONTACT PAGE — FORCE HIGH REACH BRAND BLUE */

.main-header--inner-page .main-menu__list>li.current>a,
.main-header--inner-page .main-menu__list>li:hover>a {
    color: #0062F3 !important;
}

.main-header--inner-page .main-menu__list>li.current>a::before,
.main-header--inner-page .main-menu__list>li.current>a::after {
    background-color: #0062F3 !important;
}

.main-header__toggler {
    background-color: #0062F3 !important;
}

/* =========================================================
   HIGH REACH — HIDE RIGHT-SIDE MENU BUTTON
   ========================================================= */
.main-header__toggler,
.mobile-nav__toggler,
.main-header__hamburger,
.main-header__menu-btn,
.main-header__menu-icon,
.main-menu__toggler,
.navbar-toggler {
    display: none !important;
}

/* =========================================================
   HIGH REACH — CONTACT HERO CLEANUP
   ========================================================= */

/* Hide decorative left + right images */
.page-header__shape-1,
.page-header__shape-2,
.page-header__shape-one,
.page-header__shape-two {
    display: none !important;
}

/* Reduce Contact Us hero height */
.page-header {
    padding-top: 110px !important;
    padding-bottom: 90px !important;
    min-height: auto !important;
}

/* Keep title area compact */
.page-header__inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Hide only the menu button that comes AFTER the phone */
.main-header__phone+* {
    display: none !important;
}

/* =========================================================
   HIGH REACH — HIDE LARGE "CONTACT NOW" TEXT
   ========================================================= */

.contact-one__bottom {
    display: none !important;
}

/* ==========================================
   HIGH REACH - CLIENT LOGO SECTION
========================================== */

.hr-clients-section {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    padding: 110px 0 100px;
    background: #050608;
    overflow: hidden;
}

.hr-clients-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 500px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
            rgba(0, 98, 243, 0.15) 0%,
            rgba(54, 194, 176, 0.10) 28%,
            rgba(166, 236, 106, 0.10) 48%,
            rgba(255, 214, 10, 0.08) 68%,
            transparent 78%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.hr-clients-section .container {
    position: relative;
    z-index: 1;
}

.hr-clients-head {
    text-align: center;
    margin-bottom: 45px;
}

.hr-clients-head .sec-title {
    margin-bottom: 12px !important;
}

.hr-clients-head .sec-title--center .sec-title__top {
    justify-content: center !important;
}

.hr-clients-subtitle {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.68);
    font-size: 18px;
    line-height: 1.7;
}

/* Full device-width marquee row */
.hr-clients-row {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 26px;
    padding: 14px 0 20px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.hr-clients-track {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    animation: hrClientMarquee 38s linear infinite;
}

.hr-clients-row-reverse .hr-clients-track {
    animation-direction: reverse;
    animation-duration: 42s;
}

.hr-clients-row:hover .hr-clients-track {
    animation-play-state: paused;
}

.hr-client-card {
    position: relative;
    min-width: 240px;
    height: 130px;
    padding: 24px 30px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    overflow: hidden;
}

.hr-client-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 98, 243, 0.15),
            rgba(54, 194, 176, 0.10),
            rgba(166, 236, 106, 0.10),
            rgba(255, 214, 10, 0.10));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.hr-client-card img {
    max-width: 150px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(1.15);
    opacity: 0.85;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.hr-client-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(0, 98, 243, 0.35);
    box-shadow: 0 20px 45px rgba(0, 98, 243, 0.16);
}

.hr-client-card:hover::before {
    opacity: 1;
}

.hr-client-card:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.05);
}

@keyframes hrClientMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* =========================================================
   OUR CLIENTS — DEVICE-RESPONSIVE SIZING
   Scales section, marquee width, and cards dynamically
   based on the device used by the user.
   ========================================================= */

/* Extra Large Screens / Desktops (>= 1400px) */
@media (min-width: 1400px) {
    .hr-clients-section {
        padding: 120px 0 110px;
    }

    .hr-client-card {
        min-width: 270px;
        height: 140px;
        padding: 26px 36px;
        border-radius: 26px;
    }

    .hr-client-card img {
        max-width: 165px;
        max-height: 60px;
    }

    .hr-clients-track {
        gap: 28px;
        animation-duration: 45s;
    }
}

/* Tablets & Small Laptops (768px - 991px) */
@media (max-width: 991px) {
    .hr-clients-section {
        padding: 90px 0 80px;
    }

    .hr-clients-title {
        font-size: 42px;
    }

    .hr-client-card {
        min-width: 210px;
        height: 120px;
        padding: 20px 26px;
        border-radius: 20px;
    }

    .hr-client-card img {
        max-width: 135px;
        max-height: 50px;
    }

    .hr-clients-track {
        gap: 20px;
        animation-duration: 32s;
    }
}

/* Mobile Devices (<= 767px) */
@media (max-width: 767px) {
    .hr-clients-section {
        padding: 70px 0 65px;
    }

    .hr-clients-title {
        font-size: 32px;
    }

    .hr-clients-subtitle {
        font-size: 15.5px;
    }

    .hr-client-card {
        min-width: 185px;
        height: 105px;
        padding: 16px 20px;
        border-radius: 18px;
    }

    .hr-client-card img {
        max-width: 120px;
        max-height: 44px;
    }

    .hr-clients-track {
        gap: 16px;
        animation-duration: 26s;
    }
}

/* Small Mobile Phones (<= 480px) */
@media (max-width: 480px) {
    .hr-clients-section {
        padding: 60px 0 55px;
    }

    .hr-clients-title {
        font-size: 27px;
    }

    .hr-client-card {
        min-width: 155px;
        height: 90px;
        padding: 12px 16px;
        border-radius: 16px;
    }

    .hr-client-card img {
        max-width: 100px;
        max-height: 38px;
    }

    .hr-clients-track {
        gap: 12px;
        animation-duration: 22s;
    }
}

/* =========================================================
   HIGH REACH — CLIENT LOGO HOVER / MASK FIX
   ========================================================= */

.hr-clients-row {

    overflow: hidden !important;
    padding: 14px 0 20px !important;
}

.hr-client-card {
    position: relative;
    overflow: hidden !important;
}

.hr-client-card img {
    position: relative;
    z-index: 5 !important;
}

.hr-client-card::before {
    z-index: 1 !important;
    pointer-events: none !important;
}

.hr-client-card:hover img {
    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   HIGH REACH — REMOVE CLIENT MARQUEE SIDE MASK
   ========================================================= */

.hr-clients-row {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: hidden !important;
}

/* =========================================================
   HIGH REACH — SHOW FOOTER ONLY ON DESKTOP
   ========================================================= */

/* Desktop: footer visible */
.main-footer {
    display: block !important;
}


/* Tablet + Mobile: footer is now shown too (High Reach.Media title).
   Mobile-specific sizing lives in the "MOBILE FOOTER" block at the end of this file. */

/* =========================================================
   HIGH REACH — CONTACT US PAGE MOBILE FULL VIEW & CLARITY
   Applies ONLY on mobile (max-width: 991px)
   Desktop view remains 100% untouched.
   ========================================================= */

@media (max-width: 991px) {

    /* Section padding on mobile */
    .contact-one,
    .contact-one.section-space-t {
        padding-top: 45px !important;
        padding-bottom: 50px !important;
        overflow: visible !important;
    }

    .contact-one .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }

    /* -----------------------------------------------------
       1. CONTACT FORM BOX — Full view, crisp high contrast
       ----------------------------------------------------- */
    .contact-one__form {
        width: 100% !important;
        padding: 30px 18px !important;
        border-radius: 20px !important;
        background-color: #FFFFFF !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Headings inside form */
    .contact-one .sec-title {
        margin-bottom: 22px !important;
        text-align: left !important;
    }

    .contact-one .sec-title__top {
        margin-bottom: 8px !important;
    }

    .contact-one .sec-title__tagline {
        color: #0062F3 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        display: inline-block !important;
    }

    .contact-one .sec-title__title {
        font-size: 24px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: #111111 !important;
        -webkit-text-fill-color: #111111 !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    /* Force text split divs to be fully visible and dark on mobile */
    .contact-one .sec-title__title.bw-split-text>div,
    .contact-one .sec-title__title.bw-split-text span,
    .contact-one .sec-title__title.bw-split-text .word,
    .contact-one .sec-title__title.bw-split-text .char {
        color: #111111 !important;
        -webkit-text-fill-color: #111111 !important;
        background: none !important;
        background-image: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    /* Form controls layout */
    .contact-one .form-one__group {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .contact-one .form-one__control {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Form text inputs */
    .contact-one .form-one input[type=text],
    .contact-one .form-one input[type=email],
    .contact-one .form-one input[type=tel] {
        width: 100% !important;
        height: 52px !important;
        border-radius: 12px !important;
        background-color: #F5F6F8 !important;
        border: 1px solid #E2E4E9 !important;
        font-size: 16px !important;
        color: #111111 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    .contact-one .form-one input[type=text]:focus,
    .contact-one .form-one input[type=email]:focus,
    .contact-one .form-one input[type=tel]:focus,
    .contact-one .form-one textarea:focus {
        border-color: #0062F3 !important;
        background-color: #FFFFFF !important;
        box-shadow: 0 0 0 3px rgba(0, 98, 243, 0.12) !important;
    }

    /* Form textarea */
    .contact-one .form-one textarea {
        width: 100% !important;
        height: 120px !important;
        border-radius: 12px !important;
        background-color: #F5F6F8 !important;
        border: 1px solid #E2E4E9 !important;
        font-size: 16px !important;
        color: #111111 !important;
        padding: 14px 16px !important;
        box-sizing: border-box !important;
        resize: none !important;
    }

    .contact-one .form-one input::placeholder,
    .contact-one .form-one textarea::placeholder {
        color: #888888 !important;
        opacity: 1 !important;
    }

    /* Service select dropdown on mobile */
    .contact-one .form-one .bootstrap-select {
        width: 100% !important;
    }

    .contact-one .form-one .bootstrap-select>.dropdown-toggle {
        width: 100% !important;
        height: 52px !important;
        border-radius: 12px !important;
        background-color: #F5F6F8 !important;
        border: 1px solid #E2E4E9 !important;
        font-size: 15px !important;
        color: #111111 !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    /* Submit button */
    .contact-one .form-one .amoxi-btn-two {
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        border-radius: 999px !important;
        background: #0062F3 !important;
        background-color: #0062F3 !important;
        color: #FFFFFF !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        border: none !important;
        box-shadow: 0 8px 24px rgba(0, 98, 243, 0.3) !important;
        margin-top: 6px !important;
    }

    .contact-one .form-one .amoxi-btn-two span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* -----------------------------------------------------
       2. CONTACT INFO BOX — Full width cards & clear icons
       ----------------------------------------------------- */
    .contact-one__info {
        width: 100% !important;
        border-radius: 20px !important;
        padding: 14px !important;
        background-color: #FFFFFF !important;
        margin-bottom: 24px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28) !important;
        box-sizing: border-box !important;
    }

    .contact-one__info__inner {
        padding: 6px !important;
    }

    .contact-one__info__card {
        width: 100% !important;
        padding: 16px !important;
        gap: 14px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        background-color: #131313 !important;
        box-sizing: border-box !important;
    }

    .contact-one__info__card+.contact-one__info__card {
        margin-top: 12px !important;
    }

    .contact-one__info__icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 10px !important;
        background: rgba(0, 98, 243, 0.18) !important;
        color: #0062F3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .contact-one__info__icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #0062F3 !important;
    }

    .contact-one__info__icon i {
        font-size: 22px !important;
        line-height: 1 !important;
        color: #0062F3 !important;
    }

    .contact-one__info__content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .contact-one__info__content::before {
        display: none !important;
    }

    .contact-one__info__title {
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        color: rgba(255, 255, 255, 0.55) !important;
        margin-bottom: 3px !important;
    }

    .contact-one__info__link {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        display: block !important;
    }

    .google-map.google-map__contact {
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-top: 14px !important;
        height: 200px !important;
    }

    .google-map.google-map__contact iframe {
        height: 200px !important;
        width: 100% !important;
        display: block !important;
    }

    /* -----------------------------------------------------
       3. FOOTER ON CONTACT PAGE (MOBILE) — Identical to Home
       ----------------------------------------------------- */
    .page-header~.contact-one~.main-footer {
        display: block !important;
        background-color: #050608 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .page-header~.contact-one~.main-footer .main-footer__top {
        display: none !important;
    }
}

/* =========================================================
   PRELOADER (Clean static logo, smooth fade, active on every page load)
   Highest priority z-index (99999999) covers everything smoothly
   ========================================================= */
.preloader {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999999 !important;
    background-color: #050608 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* High Reach Logo - Electric Neon Flicker Effect */
.preloader__image {
    width: 80px !important;
    height: 80px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    animation: hrLogoFlicker 1.8s infinite ease-in-out !important;
    -webkit-animation: hrLogoFlicker 1.8s infinite ease-in-out !important;
    will-change: opacity, filter, transform;
}

@keyframes hrLogoFlicker {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 16px rgba(0, 98, 243, 0.75)) drop-shadow(0 0 32px rgba(54, 194, 176, 0.5));
    }
    3% {
        opacity: 0.35;
        transform: scale(0.97);
        filter: drop-shadow(0 0 4px rgba(0, 98, 243, 0.3));
    }
    6% {
        opacity: 1;
        transform: scale(1.03);
        filter: drop-shadow(0 0 24px rgba(0, 98, 243, 0.95)) drop-shadow(0 0 42px rgba(166, 236, 106, 0.65));
    }
    10% {
        opacity: 0.7;
        transform: scale(0.99);
        filter: drop-shadow(0 0 10px rgba(0, 98, 243, 0.45));
    }
    14% {
        opacity: 1;
        transform: scale(1.04);
        filter: drop-shadow(0 0 28px rgba(0, 98, 243, 1)) drop-shadow(0 0 48px rgba(255, 214, 10, 0.55));
    }
    22% {
        opacity: 0.88;
        transform: scale(1);
        filter: drop-shadow(0 0 14px rgba(0, 98, 243, 0.6));
    }
    35% {
        opacity: 1;
        transform: scale(1.01);
        filter: drop-shadow(0 0 18px rgba(0, 98, 243, 0.8)) drop-shadow(0 0 35px rgba(54, 194, 176, 0.5));
    }
    54% {
        opacity: 0.45;
        transform: scale(0.98);
        filter: drop-shadow(0 0 6px rgba(0, 98, 243, 0.35));
    }
    58% {
        opacity: 1;
        transform: scale(1.03);
        filter: drop-shadow(0 0 25px rgba(0, 98, 243, 0.95)) drop-shadow(0 0 44px rgba(54, 194, 176, 0.65));
    }
    74% {
        opacity: 0.9;
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(0, 98, 243, 0.6));
    }
    87% {
        opacity: 0.55;
        transform: scale(0.98);
        filter: drop-shadow(0 0 8px rgba(0, 98, 243, 0.4));
    }
    91% {
        opacity: 1;
        transform: scale(1.02);
        filter: drop-shadow(0 0 22px rgba(0, 98, 243, 0.85)) drop-shadow(0 0 38px rgba(166, 236, 106, 0.55));
    }
}

/* Clean, smooth dismissal state */
.preloader.hr-preloader-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* =========================================================
   WHATSAPP & ACTION BUTTONS STABILITY
   Completely static during preloading / transitions: no jitter,
   no flicker, no delayed bouncing, rock-solid font rendering
   ========================================================= */
.fa-whatsapp,
.fab.fa-whatsapp {
    display: inline-block !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

.hr-hero-icon-btn--wa,
.hr-sticky-icon-btn.hr-hero-icon-btn--wa,
.hr-header-icon-btn.hr-hero-icon-btn--wa,
.main-header__whatsapp,
.hr-contact-whatsapp-card,
.hr-whatsapp-widget,
.hr-hero-action-buttons {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* While preloader is present/visible or page is transitioning, keep WhatsApp & buttons strictly static */
.preloader:not(.hr-preloader-hidden) ~ * .hr-hero-icon-btn--wa,
.preloader:not(.hr-preloader-hidden) ~ * .hr-header-icon-btn,
.preloader:not(.hr-preloader-hidden) ~ * .hr-sticky-icon-btn,
.preloader:not(.hr-preloader-hidden) ~ * .main-header__whatsapp,
.preloader:not(.hr-preloader-hidden) ~ * .hr-contact-whatsapp-card,
.preloader:not(.hr-preloader-hidden) ~ * .hr-whatsapp-widget,
.preloader:not(.hr-preloader-hidden) ~ * .hr-hero-action-buttons,
.preloader:not(.hr-preloader-hidden) ~ * .hr-sticky-scroll-bar,
body.is-page-transitioning .hr-hero-icon-btn--wa,
body.is-page-transitioning .hr-header-icon-btn,
body.is-page-transitioning .hr-sticky-icon-btn,
body.is-page-transitioning .main-header__whatsapp,
body.is-page-transitioning .hr-contact-whatsapp-card,
body.is-page-transitioning .hr-whatsapp-widget,
body.is-page-transitioning .hr-hero-action-buttons,
body.is-page-transitioning .hr-sticky-scroll-bar {
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* =========================================================
   HIGH REACH — MOBILE FOOTER (High Reach.Media)
   Applies ONLY on mobile / tablet (max-width: 991px).
   Desktop footer is untouched.
   ========================================================= */

@media (max-width: 991px) {

    .main-footer {
        display: block !important;
        background-color: #050608 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        overflow: hidden !important;
    }

    /* Clean padding so the title and content are fully visible */
    .main-footer__bottom {
        display: block !important;
        width: 100% !important;
        padding: 34px 16px calc(200px + env(safe-area-inset-bottom, 0px)) !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .main-footer__bottom .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Title container: centred and fully visible across all mobile widths */
    .main-footer__bottom__title {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-top: 0 !important;
        text-align: center !important;
        overflow: visible !important;
    }
}

@media (max-width: 575px) {
    .main-footer__bottom {
        padding: 30px 16px calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 360px) {
    .main-footer__bottom {
        padding: 24px 10px calc(130px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* =========================================================
   FOOTER ARISE-ON-SCROLL CTA & ACTION ICONS
   Continuous floating dynamic motion (not static!)
   ========================================================= */
.hr-footer-cta-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 auto 34px !important;
    padding: 0 15px !important;
    width: 100% !important;
    max-width: 720px !important;
    text-align: center !important;
    z-index: 5 !important;
    position: relative !important;
}

.hr-footer-cta-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    animation: hrFooterFloat 3.2s ease-in-out infinite !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, box-shadow;
}

/* Dynamic floating keyframes for footer */
@keyframes hrFooterFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.hr-footer-cta-btn .amoxi-btn__text {
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 98, 243, 0.35) !important;
}

.hr-footer-cta-btn .amoxi-btn__text::after {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -100% !important;
    width: 60% !important;
    height: 200% !important;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.38),
            transparent) !important;
    transform: rotate(25deg) !important;
    animation: hrFooterShine 3.4s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes hrFooterShine {

    0%,
    35% {
        left: -100%;
    }

    65%,
    100% {
        left: 200%;
    }
}

.hr-footer-cta-btn:hover,
.hr-footer-cta-btn:active {
    transform: translateY(-5px) scale(1.03) !important;
    animation-play-state: paused !important;
}

.hr-footer-cta-btn:hover .amoxi-btn__text,
.hr-footer-cta-btn:active .amoxi-btn__text {
    box-shadow:
        0 14px 32px rgba(0, 98, 243, 0.5),
        0 0 24px rgba(54, 194, 176, 0.35) !important;
}

.hr-footer-cta-btn:hover .amoxi-btn__icon i,
.hr-footer-cta-btn:active .amoxi-btn__icon i {
    transform: translateX(6px) !important;
}

.hr-footer-action-buttons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    animation: hrFooterFloat 3.2s ease-in-out infinite 0.3s !important;
    will-change: transform;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    .hr-footer-cta-wrapper {
        gap: 12px !important;
        flex-wrap: wrap !important;
        margin-bottom: 26px !important;
    }

    .hr-footer-cta-btn {
        animation: hrMobileTopBottom 2.6s ease-in-out infinite !important;
    }

    .hr-footer-action-buttons {
        animation: hrMobileTopBottom 2.6s ease-in-out infinite 0.25s !important;
    }
}

/* =========================================================
   STICKY FLOATING CONTACT BAR (ARISES ACROSS WHOLE PAGE)
   ========================================================= */
.hr-sticky-scroll-bar {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translate(-50%, 120px) !important;
    /* hidden below screen by default */
    z-index: 9990 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease,
        visibility 0.4s ease !important;
}

/* Arise into view across the whole page when scrolling down */
.hr-sticky-scroll-bar.is-visible {
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Desktop view (>= 1200px): Hide the sticky floating button bar */
@media (min-width: 1200px) {

    .hr-sticky-scroll-bar,
    .hr-sticky-scroll-bar.is-visible {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate(-50%, 120px) !important;
    }
}

.hr-sticky-scroll-bar__inner {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px 6px 6px !important;
    background: rgba(10, 15, 29, 0.88) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 98, 243, 0.25),
        0 0 25px rgba(54, 194, 176, 0.2) !important;
    animation: none !important;
}

.hr-sticky-cta-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hr-sticky-cta-btn .amoxi-btn__text {
    padding: 10px 20px !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
}

.hr-sticky-cta-btn .amoxi-btn__icon-box {
    width: 38px !important;
    height: 38px !important;
}

.hr-sticky-action-buttons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.hr-sticky-icon-btn {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
}

.hr-sticky-icon-btn.hr-hero-icon-btn--wa .hr-hero-icon-btn__icon i {
    font-size: 22px !important;
}

.hr-sticky-icon-btn.hr-hero-icon-btn--call .hr-hero-icon-btn__icon svg {
    width: 17px !important;
    height: 17px !important;
}

/* Responsive scaling for sticky floating contact bar across device widths */
@media (max-width: 991px) {
    .hr-sticky-scroll-bar {
        bottom: 18px !important;
        width: auto !important;
        max-width: calc(100% - 28px) !important;
    }

    .hr-sticky-scroll-bar__inner {
        padding: 5px 8px 5px 5px !important;
        gap: 6px !important;
    }

    .hr-sticky-action-buttons {
        gap: 6px !important;
    }
}

@media (max-width: 767px) {
    .hr-sticky-scroll-bar {
        bottom: 16px !important;
        width: auto !important;
        max-width: calc(100% - 20px) !important;
    }

    .hr-sticky-scroll-bar__inner {
        width: auto !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 5px 8px 5px 5px !important;
        animation: none !important;
    }

    .hr-sticky-action-buttons {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .hr-sticky-cta-btn {
        margin: 0 !important;
        flex-shrink: 1 !important;
    }

    .hr-sticky-cta-btn .amoxi-btn__text {
        padding: 8px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .hr-sticky-cta-btn .amoxi-btn__icon-box {
        width: 32px !important;
        height: 32px !important;
    }

    .hr-sticky-icon-btn {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .hr-sticky-icon-btn.hr-hero-icon-btn--wa .hr-hero-icon-btn__icon i {
        font-size: 18px !important;
    }

    .hr-sticky-icon-btn.hr-hero-icon-btn--call .hr-hero-icon-btn__icon svg {
        width: 15px !important;
        height: 15px !important;
    }
}


/* Extra small devices (<= 380px screens like iPhone SE, small Galaxy) */
@media (max-width: 380px) {
    .hr-sticky-scroll-bar {
        bottom: 12px !important;
        max-width: calc(100% - 12px) !important;
    }

    .hr-sticky-scroll-bar__inner {
        gap: 4px !important;
        padding: 4px 6px 4px 4px !important;
    }

    .hr-sticky-action-buttons {
        gap: 4px !important;
    }

    .hr-sticky-cta-btn .amoxi-btn__text {
        padding: 7px 9px !important;
        font-size: 10px !important;
    }

    .hr-sticky-cta-btn .amoxi-btn__icon-box {
        width: 28px !important;
        height: 28px !important;
    }

    .hr-sticky-cta-btn .amoxi-btn__icon {
        font-size: 8px !important;
    }

    .hr-sticky-icon-btn {
        width: 32px !important;
        height: 32px !important;
    }

    .hr-sticky-icon-btn.hr-hero-icon-btn--wa .hr-hero-icon-btn__icon i {
        font-size: 16px !important;
    }

    .hr-sticky-icon-btn.hr-hero-icon-btn--call .hr-hero-icon-btn__icon svg {
        width: 13px !important;
        height: 13px !important;
    }
}

/* =========================================================
   HEADER ACTIONS (PHONE & WHATSAPP ICONS ONLY)
   Desktop: perfectly aligned with nav, comfortable margin/padding
   Mobile/Tablet: hidden completely
   ========================================================= */
.main-header__actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-left: 14px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hr-header-icon-btn {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.hr-header-icon-btn.hr-hero-icon-btn--call .hr-hero-icon-btn__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hr-header-icon-btn.hr-hero-icon-btn--call .hr-hero-icon-btn__icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

.hr-header-icon-btn.hr-hero-icon-btn--wa .hr-hero-icon-btn__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hr-header-icon-btn.hr-hero-icon-btn--wa .hr-hero-icon-btn__icon i {
    font-size: 22px !important;
    display: block !important;
    line-height: 1 !important;
}

/* Hidden in mobile and tablet view */
@media (max-width: 1199px) {
    .main-header__actions {
        display: none !important;
    }
}

/* =========================================================
   HIGH REACH — FOOTER ARISE-ON-SCROLL (Desktop & Mobile)
   Recreates the luxury 3D rotating rise animation on scroll,
   engineered for 60/120fps GPU performance on both desktop & mobile.
   Keeps "High Reach.Media" strictly in a single line with zero
   character breaks, no line wrapping, and no clipped descenders.
   ========================================================= */

.main-footer__bottom {
    perspective: 1000px !important;
    -webkit-perspective: 1000px !important;
    perspective-origin: 50% 50% !important;
    -webkit-perspective-origin: 50% 50% !important;
}

/* Initial pre-arise state when JS animation is active */
.hr-footer-arise-enabled .main-footer__bottom__title {
    opacity: 0;
    transform: translateY(55px) rotateX(-65deg);
    -webkit-transform: translateY(55px) rotateX(-65deg);
    transform-origin: 50% 0% -30px;
    -webkit-transform-origin: 50% 0% -30px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 2.2s cubic-bezier(0.2, 0.9, 0.3, 1) 0.65s,
        opacity 1.8s cubic-bezier(0.2, 0.9, 0.3, 1) 0.65s;
    will-change: transform, opacity;
}

.hr-footer-arise-enabled .main-footer__bottom__inner {
    opacity: 0;
    transform: translateY(24px);
    -webkit-transform: translateY(24px);
    transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) 1.2s,
        opacity 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) 1.2s;
    will-change: transform, opacity;
}

/* Arisen State - Desktop */
.hr-footer-arise-enabled .main-footer__bottom.hr-arisen .main-footer__bottom__title,
.hr-footer-arise-enabled .main-footer__bottom__title.hr-arisen {
    opacity: 1 !important;
    transform: translateY(0) rotateX(0deg) !important;
    -webkit-transform: translateY(0) rotateX(0deg) !important;
    visibility: visible !important;
}

.hr-footer-arise-enabled .main-footer__bottom.hr-arisen .main-footer__bottom__inner,
.hr-footer-arise-enabled .main-footer__bottom__inner.hr-arisen {
    opacity: 1 !important;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    visibility: visible !important;
}

/* Mobile & Tablet view (<= 991px) */
@media (max-width: 991px) {
    .main-footer__bottom {
        perspective: 600px !important;
        -webkit-perspective: 600px !important;
    }

    .hr-footer-arise-enabled .main-footer__bottom__title {
        opacity: 0;
        transform: translateY(35px) rotateX(-45deg);
        -webkit-transform: translateY(35px) rotateX(-45deg);
        transform-origin: 50% 0% -20px;
        -webkit-transform-origin: 50% 0% -20px;
        transition: transform 2.0s cubic-bezier(0.2, 0.9, 0.3, 1) 0.6s,
            opacity 1.6s cubic-bezier(0.2, 0.9, 0.3, 1) 0.6s;
    }

    .hr-footer-arise-enabled .main-footer__bottom__inner {
        opacity: 0;
        transform: translateY(18px);
        -webkit-transform: translateY(18px);
        transition: transform 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) 1.1s,
            opacity 1.0s cubic-bezier(0.2, 0.9, 0.3, 1) 1.1s;
    }

    .hr-footer-arise-enabled .main-footer__bottom.hr-arisen .main-footer__bottom__title,
    .hr-footer-arise-enabled .main-footer__bottom__title.hr-arisen {
        opacity: 1 !important;
        transform: translateY(0) rotateX(0deg) !important;
        -webkit-transform: translateY(0) rotateX(0deg) !important;
        visibility: visible !important;
    }

    .hr-footer-arise-enabled .main-footer__bottom.hr-arisen .main-footer__bottom__inner,
    .hr-footer-arise-enabled .main-footer__bottom__inner.hr-arisen {
        opacity: 1 !important;
        transform: translateY(0) !important;
        -webkit-transform: translateY(0) !important;
        visibility: visible !important;
    }
}

/* Accessibility: respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {

    .hr-footer-arise-enabled .main-footer__bottom__title,
    .hr-footer-arise-enabled .main-footer__bottom__inner {
        opacity: 1 !important;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
    }
}