@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* Express Roofing – all custom CSS
   Active theme: Hello Elementor

   Header topbar:
   .er-topbar
     ├── .er-topbar-left      (email / phone / location)
     ├── .er-topbar-contact   (social icons)
     └── .er-topbar-right     (Trusted Roofing Experts badge)
*/

.elementor .er-topbar {
    --er-topbar-bg: #000000;
    --er-topbar-text: #ffffff;
    --er-topbar-icon: #2f80ff;
    --er-topbar-divider: rgba(255, 255, 255, 0.22);
    --er-topbar-badge: #1a66ff;

    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px;
    padding: 0 0 0 28px !important;
    margin: 0 !important;
    background-color: var(--er-topbar-bg) !important;
    color: var(--er-topbar-text);
    overflow: hidden;
}

.elementor .er-topbar > .e-con,
.elementor .er-topbar > .e-flexbox-base {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

.elementor .er-topbar .er-topbar-left,
.elementor .er-topbar .er-topbar-contact,
.elementor .er-topbar .er-topbar-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Left: contact info */
.elementor .er-topbar .er-topbar-left {
    flex: 1 1 auto !important;
    min-width: 0;
}

.elementor .er-topbar .er-topbar-left .elementor-widget,
.elementor .er-topbar .er-topbar-left .elementor-widget-container,
.elementor .er-topbar .er-topbar-left .elementor-icon-list-items {
    width: 100%;
    margin: 0;
    padding: 0;
}

.elementor .er-topbar .er-topbar-left .elementor-icon-list-items,
.elementor .er-topbar .er-topbar-left .elementor-inline-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.elementor .er-topbar .er-topbar-left .elementor-icon-list-item {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 16px !important;
    margin: 0 !important;
    border-right: 1px solid var(--er-topbar-divider);
    width: auto !important;
}

.elementor .er-topbar .er-topbar-left .elementor-icon-list-item:first-child {
    padding-left: 0 !important;
}

.elementor .er-topbar .er-topbar-left .elementor-icon-list-item:last-child {
    border-right: 0;
}

.elementor .er-topbar .er-topbar-left .elementor-icon-list-icon {
    display: inline-flex;
    align-items: center;
}

.elementor .er-topbar .er-topbar-left .elementor-icon-list-icon i,
.elementor .er-topbar .er-topbar-left .elementor-icon-list-icon svg {
    color: var(--er-topbar-icon) !important;
    fill: var(--er-topbar-icon) !important;
    font-size: 14px !important;
    width: 14px;
    height: 14px;
}

.elementor .er-topbar .er-topbar-left .elementor-icon-list-text {
    color: var(--er-topbar-text) !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

/* Middle: social icons */
.elementor .er-topbar .er-topbar-contact {
    margin-left: auto !important;
    padding-right: 16px !important;
    margin-right: 4px !important;
    border-right: 1px solid var(--er-topbar-divider);
}

.elementor .er-topbar .er-topbar-contact .elementor-widget,
.elementor .er-topbar .er-topbar-contact .elementor-social-icons-wrapper,
.elementor .er-topbar .er-topbar-contact .elementor-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end;
    grid-template-columns: none !important;
    gap: 12px !important;
    width: auto !important;
    margin: 0;
    padding: 0;
}

.elementor .er-topbar .er-topbar-contact .elementor-grid-item {
    width: auto !important;
    display: flex;
    align-items: center;
}

.elementor .er-topbar .er-topbar-contact .elementor-social-icon {
    width: 18px !important;
    height: 18px !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.elementor .er-topbar .er-topbar-contact .elementor-social-icon i,
.elementor .er-topbar .er-topbar-contact .elementor-social-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 14px !important;
    width: 14px;
    height: 14px;
    line-height: 1;
}

.elementor .er-topbar .er-topbar-contact .elementor-social-icon:hover i,
.elementor .er-topbar .er-topbar-contact .elementor-social-icon:hover svg {
    color: var(--er-topbar-icon) !important;
    fill: var(--er-topbar-icon) !important;
}

/* Right: slanted blue badge */
.elementor .er-topbar .er-topbar-right {
    align-self: stretch !important;
    justify-content: center !important;
    min-height: 42px;
    padding: 0 28px 0 36px !important;
    background-color: var(--er-topbar-badge) !important;
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}

.elementor .er-topbar .er-topbar-right .elementor-widget,
.elementor .er-topbar .er-topbar-right .elementor-widget-container,
.elementor .er-topbar .er-topbar-right p {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .elementor .er-topbar,
    .elementor .er-topbar > .e-con,
    .elementor .er-topbar > .e-flexbox-base {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        min-height: 42px;
        padding: 0 0 0 16px !important;
        overflow: hidden;
    }

    .elementor .er-topbar .er-topbar-left {
        flex: 1 1 auto !important;
        min-width: 0;
        overflow: hidden;
    }

    .elementor .er-topbar .er-topbar-left .elementor-icon-list-items,
    .elementor .er-topbar .er-topbar-left .elementor-inline-items {
        flex-wrap: nowrap !important;
        width: auto !important;
        max-width: 100%;
    }

    /* Location + hours wrap on tablet – keep email / phone only in left */
    .elementor .er-topbar .er-topbar-left .elementor-icon-list-item:nth-child(n+3) {
        display: none !important;
    }

    .elementor .er-topbar .er-topbar-left .elementor-icon-list-item {
        padding: 0 12px !important;
        flex-shrink: 0;
    }

    .elementor .er-topbar .er-topbar-left .elementor-icon-list-item:first-child {
        padding-left: 0 !important;
    }

    .elementor .er-topbar .er-topbar-left .elementor-icon-list-text {
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .elementor .er-topbar .er-topbar-contact {
        flex-shrink: 0 !important;
        padding-right: 12px !important;
        margin-right: 0 !important;
    }

    .elementor .er-topbar .er-topbar-contact .elementor-grid {
        gap: 8px !important;
    }

    .elementor .er-topbar .er-topbar-right {
        flex-shrink: 0 !important;
        min-height: 42px;
        padding: 0 18px 0 28px !important;
    }

    .elementor .er-topbar .er-topbar-right p {
        font-size: 12px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-topbar,
    .elementor .er-topbar > .e-con,
    .elementor .er-topbar > .e-flexbox-base {
        flex-wrap: nowrap;
        min-height: 40px;
        overflow: hidden;
        padding: 8px 12px !important;
    }

    /* Hide socials, hours, location, badge */
    .elementor .er-topbar .er-topbar-contact,
    .elementor .er-topbar .er-topbar-right,
    .elementor .er-topbar > .e-con > .elementor-widget-icon-list,
    .elementor .er-topbar .er-topbar-left .elementor-icon-list-item:nth-child(n+3) {
        display: none !important;
    }

    .elementor .er-topbar .er-topbar-left {
        width: 100% !important;
        flex: 1 1 100% !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .elementor .er-topbar .er-topbar-left .elementor-icon-list-items,
    .elementor .er-topbar .er-topbar-left .elementor-inline-items {
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
    }

    .elementor .er-topbar .er-topbar-left .elementor-icon-list-item {
        padding: 0 10px !important;
    }

    .elementor .er-topbar .er-topbar-left .elementor-icon-list-item:nth-child(2) {
        border-right: 0;
    }

    .elementor .er-topbar .er-topbar-left .elementor-icon-list-text {
        font-size: 12px !important;
    }
}

/* Header sticks only after topbar scrolls away. Class .er-is-sticky is added by JS. */
html,
body {
    overflow-x: visible !important;
}

.er-header-sticky-spacer {
    display: none;
    width: 100%;
    pointer-events: none;
}

.elementor .er-header.er-is-sticky,
.elementor .er-header.e-flexbox-base.er-is-sticky,
.elementor .er-header.e-con.er-is-sticky,
.elementor .mobile-header.er-is-sticky,
.elementor .mobile-header.e-flexbox-base.er-is-sticky,
.elementor .mobile-header.e-con.er-is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    animation: erHeaderStickIn 0.4s ease;
}

.admin-bar .elementor .er-header.er-is-sticky,
.admin-bar .elementor .mobile-header.er-is-sticky {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .elementor .er-header.er-is-sticky,
    .admin-bar .elementor .mobile-header.er-is-sticky {
        top: 46px !important;
    }
}

@keyframes erHeaderStickIn {
    from {
        transform: translateY(-100%);
        opacity: 0.88;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =========================================================
   Header
   .er-header
     ├── .er-header-logo
     ├── .er-header-menu
     └── .er-header-cta
   ========================================================= */

.elementor .er-header,
.elementor .er-header.e-flexbox-base {
    --er-header-text: #111111;
    --er-header-active: #1a66ff;
    --er-header-cta: #000000;

    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 82px !important;
    height: auto !important;
    padding: 0 0 0 30px !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    overflow: visible !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

@media (min-width: 1025px) {
    .elementor .er-header,
    .elementor .er-header.e-flexbox-base,
    .elementor .er-header.e-con {
        display: flex !important;
    }

    .elementor .mobile-header,
    .elementor .mobile-header.e-flexbox-base,
    .elementor .mobile-header.e-con {
        display: none !important;
    }
}

.elementor .er-header > .e-con,
.elementor .er-header > .e-flexbox-base {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 82px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
}

.elementor .er-header .er-header-logo,
.elementor .er-header .er-header-menu,
.elementor .er-header .er-header-cta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Logo */
.elementor .er-header .er-header-logo {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    padding-right: 22px !important;
}

.elementor .er-header .er-header-logo .elementor-widget,
.elementor .er-header .er-header-logo .elementor-widget-container {
    width: auto !important;
    margin: 0;
    padding: 0;
}

.elementor .er-header .er-header-logo img {
    max-height: 62px;
    width: auto !important;
    max-width: 200px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Menu – centered */
.elementor .er-header .er-header-menu {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0;
    position: relative;
    z-index: 1001;
}

.elementor .er-header .er-header-menu .elementor-widget,
.elementor .er-header .er-header-menu .elementor-widget-container,
.elementor .er-header .er-header-menu .hfe-nav-menu,
.elementor .er-header .er-header-menu nav {
    width: 100%;
    margin: 0;
    padding: 0;
}

.elementor .er-header .er-header-menu ul.hfe-nav-menu {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.elementor .er-header .er-header-menu ul.hfe-nav-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

.elementor .er-header .er-header-menu ul.hfe-nav-menu > li > a,
.elementor .er-header .er-header-menu ul.hfe-nav-menu > li > .hfe-has-submenu-container > a,
.elementor .er-header .er-header-menu .hfe-menu-item {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    color: var(--er-header-text) !important;
    font-size: 14.5px !important;
    font-weight: 500;
    line-height: 1;
    padding: 8px 11px !important;
    white-space: nowrap;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    box-shadow: none !important;
}

.elementor .er-header .er-header-menu ul.hfe-nav-menu > li:first-child > a,
.elementor .er-header .er-header-menu ul.hfe-nav-menu > li:first-child > .hfe-has-submenu-container > a {
    padding-left: 4px !important;
}

.elementor .er-header .er-header-menu ul.hfe-nav-menu > li:hover > a,
.elementor .er-header .er-header-menu ul.hfe-nav-menu > li:hover > .hfe-has-submenu-container > a,
.elementor .er-header .er-header-menu ul.hfe-nav-menu > li.current-menu-item > a,
.elementor .er-header .er-header-menu ul.hfe-nav-menu > li.current-menu-item > .hfe-has-submenu-container > a,
.elementor .er-header .er-header-menu ul.hfe-nav-menu > li.current-menu-ancestor > a,
.elementor .er-header .er-header-menu ul.hfe-nav-menu > li.current-menu-ancestor > .hfe-has-submenu-container > a {
    color: var(--er-header-active) !important;
    border-bottom-color: var(--er-header-active) !important;
}

.elementor .er-header .er-header-menu .hfe-menu-toggle,
.elementor .er-header .er-header-menu .sub-arrow {
    color: inherit !important;
    font-size: 8px !important;
    margin-left: 2px;
}

.elementor .er-header .er-header-menu .sub-menu,
.elementor .er-header .er-header-menu ul.sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    border-radius: 0;
    padding: 8px 0 !important;
    min-width: 200px;
}

.elementor .er-header .er-header-menu .sub-menu a {
    color: var(--er-header-text) !important;
    font-size: 14px !important;
    padding: 9px 18px !important;
}

.elementor .er-header .er-header-menu .sub-menu a:hover {
    color: var(--er-header-active) !important;
    background: #f5f8ff !important;
}

/* CTA wrapper – only alignment, no black fill */
.elementor .er-header .er-header-cta {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 82px !important;
    margin-left: auto !important;
    padding: 14px 24px 14px 12px !important;
    overflow: visible;
    background: transparent !important;
    background-color: transparent !important;
}

.elementor .er-header .er-header-cta,
.elementor .er-header .er-header-btn,
.elementor .er-header .er-header-btn .elementor-button {
    overflow: visible !important;
}

.elementor .er-header .er-header-cta .elementor-widget,
.elementor .er-header .er-header-cta .elementor-widget-container,
.elementor .er-header .er-header-cta .elementor-button-wrapper {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

/* Button class: er-header-btn – blue slant + black rounded body */
.elementor .er-header .er-header-btn {
    position: relative;
    display: inline-flex !important;
    align-items: stretch;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    isolation: isolate;
}

.elementor .er-header .er-header-btn::before {
    content: none;
}

.elementor .er-header .er-header-btn .elementor-button,
.elementor .er-header-btn.elementor-button {
    position: relative;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 52px !important;
    padding: 0 30px 0 28px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transform: skewX(-22deg);
    clip-path: none !important;
}

.elementor .er-header .er-header-btn .elementor-button::before,
.elementor .er-header-btn.elementor-button::before {
    content: "" !important;
    position: absolute !important;
    left: -20px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 12px !important;
    height: auto !important;
    background: #2f80ff !important;
    background-color: #2f80ff !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;
    z-index: 0 !important;
}

.elementor .er-header .er-header-btn .elementor-button-content-wrapper {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent !important;
    transform: skewX(22deg);
}

.elementor .er-header .er-header-btn .elementor-button-icon {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
}

.elementor .er-header .er-header-btn .elementor-button-icon svg,
.elementor .er-header .er-header-btn i {
    width: 17px !important;
    height: 17px !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.elementor .er-header .er-header-btn .elementor-button-text {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.elementor .er-header .er-header-btn .elementor-button-text::after {
    content: "\2192";
    display: inline-block;
    margin-left: 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.elementor .er-header .er-header-btn .elementor-button:hover,
.elementor .er-header-btn.elementor-button:hover,
.elementor .er-header .er-header-btn .elementor-button:hover .elementor-button-text {
    color: #ffffff !important;
    background: #0a0a0a !important;
}

@media (max-width: 1199px) {
    .elementor .er-header .er-header-menu ul.hfe-nav-menu > li > a,
    .elementor .er-header .er-header-menu ul.hfe-nav-menu > li > .hfe-has-submenu-container > a,
    .elementor .er-header .er-header-menu .hfe-menu-item {
        font-size: 13px !important;
        padding: 8px 8px !important;
    }

    .elementor .er-header .er-header-cta {
        padding: 12px 16px 12px 8px !important;
    }

    .elementor .er-header .er-header-btn .elementor-button,
    .elementor .er-header-btn.elementor-button {
        min-height: 46px !important;
        padding: 0 24px 0 22px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 1024px) {
    .elementor .er-header,
    .elementor .er-header.e-flexbox-base,
    .elementor .er-header.e-con,
    .elementor .er-header.e-atomic-element {
        display: none !important;
    }
}

/* =========================================================
   Mobile / Tablet header – parent show/hide only
   .mobile-header
     ├── .mobile-header-logo
     └── .mobile-header-menu
   ========================================================= */

.elementor .mobile-header,
.elementor .mobile-header.e-flexbox-base,
.elementor .mobile-header.e-con {
    display: none !important;
}

@media (max-width: 1024px) {
    .elementor .mobile-header,
    .elementor .mobile-header.e-flexbox-base,
    .elementor .mobile-header.e-con,
    .elementor .mobile-header.e-atomic-element {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 64px !important;
        padding: 8px 20px 8px 16px !important;
        margin: 0 !important;
        background: #ffffff !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        position: relative !important;
        z-index: 2;
        overflow: visible !important;
    }

    .elementor .mobile-header.er-is-sticky,
    .elementor .mobile-header.e-flexbox-base.er-is-sticky,
    .elementor .mobile-header.e-con.er-is-sticky {
        padding-top: 16px !important;
        padding-bottom: 14px !important;
        min-height: 76px !important;
        align-items: center !important;
    }

    .elementor .mobile-header.er-is-sticky .mobile-header-logo,
    .elementor .mobile-header.er-is-sticky > .e-con:first-child,
    .elementor .mobile-header.er-is-sticky .hfe-nav-menu__toggle {
        margin-top: 4px !important;
    }

    .elementor .mobile-header .mobile-header-logo,
    .elementor .mobile-header > .e-con:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .elementor .mobile-header .mobile-header-logo img,
    .elementor .mobile-header > .e-con:first-child img {
        max-height: 44px;
        width: auto !important;
        max-width: 150px;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .elementor .mobile-header .mobile-header-menu,
    .elementor .mobile-header > .e-con:last-child,
    .elementor .mobile-header .elementor-widget-navigation-menu,
    .elementor .mobile-header .elementor-widget-container,
    .elementor .mobile-header .hfe-nav-menu {
        position: static !important;
    }

    .elementor .mobile-header .mobile-header-menu,
    .elementor .mobile-header > .e-con:last-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: 6px !important;
        justify-content: flex-end !important;
        padding: 0 !important;
    }

    .elementor .mobile-header .hfe-nav-menu__toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin: 0 !important;
        border: 1px solid #e8e8e8 !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #111 !important;
        position: relative;
        z-index: 2;
    }

    .elementor .mobile-header .hfe-nav-menu-icon i {
        color: #111111 !important;
        font-size: 18px !important;
    }

    .elementor .mobile-header nav.hfe-nav-menu__layout-horizontal,
    .elementor .mobile-header nav.hfe-nav-menu__layout-vertical {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
        z-index: 9999 !important;
        box-sizing: border-box !important;
    }

    .elementor .mobile-header .hfe-active-menu + nav {
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    .elementor .mobile-header ul.hfe-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .elementor .mobile-header ul.hfe-nav-menu > li {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        line-height: 1.3 !important;
    }

    .elementor .mobile-header ul.hfe-nav-menu > li > .hfe-has-submenu-container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .elementor .mobile-header ul.hfe-nav-menu > li > a,
    .elementor .mobile-header ul.hfe-nav-menu > li > .hfe-has-submenu-container > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        border: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        color: #111111 !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .elementor .mobile-header ul.hfe-nav-menu > li > .hfe-has-submenu-container > a {
        border-bottom: 0 !important;
        padding-right: 40px !important;
    }

    .elementor .mobile-header .hfe-menu-toggle {
        margin: 0 12px 0 0 !important;
        padding: 0 !important;
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
    }

    .elementor .mobile-header .sub-menu {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        background: #f7f7f7 !important;
    }

    .elementor .mobile-header .sub-menu li {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .elementor .mobile-header .sub-menu a {
        padding: 10px 16px 10px 28px !important;
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        line-height: 1.3 !important;
        border-bottom: 1px solid #ececec !important;
    }
}

@media (max-width: 767px) {
    .elementor .mobile-header,
    .elementor .mobile-header.e-flexbox-base {
        min-height: 60px !important;
        padding: 8px 12px !important;
    }

    .elementor .mobile-header .mobile-header-logo img,
    .elementor .mobile-header > .e-con:first-child img {
        max-height: 40px;
        max-width: 136px;
    }
}

/* =========================================================
   Smart Slider hero
   Left content class:  .er-slider-content-left
   Right content class: .er-slider-content-right
   Button layer class:  .er-slider-btn
   ========================================================= */

.n2-ss-slider {
    --er-slider-font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.n2-ss-slider .n2-ss-slide-background-image img,
.n2-ss-slider .n2-ss-slide-background img {
    opacity: 1 !important;
}

.n2-ss-slider .n2-ss-slide-background,
.n2-ss-slider .n2-ss-slide-background-image {
    position: relative;
}

.n2-ss-slider .n2-ss-slide-background::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(6, 10, 18, 0.28);
}

.n2-ss-slider .n2-ss-slide:has(.er-slider-content-left) .n2-ss-slide-background::after {
    background: linear-gradient(90deg, rgba(6, 10, 18, 0.82) 0%, rgba(6, 10, 18, 0.46) 38%, rgba(6, 10, 18, 0.1) 72%, rgba(6, 10, 18, 0.06) 100%);
}

.n2-ss-slider .n2-ss-slide:has(.er-slider-content-right) .n2-ss-slide-background::after {
    background: linear-gradient(270deg, rgba(6, 10, 18, 0.82) 0%, rgba(6, 10, 18, 0.46) 38%, rgba(6, 10, 18, 0.1) 72%, rgba(6, 10, 18, 0.06) 100%);
}

.n2-ss-slider .n2-ss-layers-container,
.n2-ss-slider .n2-ss-layer-content,
.n2-ss-slider .n2-ss-section-main-content {
    z-index: 2;
}

/* Slide 1 — er-slider-content-right
   Smart Slider content is a full-width flex column (not absolute).
   Unique n-uc-* classes change on save, so do not target them.
   Put the whole text stack + CTA on the right. */
.n2-ss-slider .n2-ss-layer[data-sstype="content"]:has(.er-slider-content-right),
.n2-ss-slider .n2-ss-section-main-content:has(.er-slider-content-right),
.n2-ss-slider .n2-ss-layer-content:has(.er-slider-content-right),
.n2-ss-slider .n-uc-4dl9LSxRmWrQ-inner {
    align-items: flex-end !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding-right: 40px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.n2-ss-slider .n2-ss-section-main-content:has(.er-slider-content-right) > .n2-ss-layer,
.n2-ss-slider .n-uc-4dl9LSxRmWrQ-inner > .n2-ss-layer {
    align-self: flex-end !important;
    --ssselfalign: flex-end;
    width: 46% !important;
    max-width: 640px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* Same CSS as Slide 1 text box — do not change Slide 1 yet */
.n2-ss-slider .n-uc-gr0na8lQUl8,
.n2-ss-slider .n2-ss-section-main-content:has(.er-slider-content-left),
.n2-ss-slider .n2-ss-layer-content:has(.er-slider-content-left) {
    left: auto !important;
    right: 6% !important;
    top: 50% !important;
    width: 42% !important;
    max-width: 560px !important;
    margin-left: 0 !important;
    transform: translate3d(0, -50%, 0) !important;
}

.n2-ss-slider .n2-ss-slide:has(.er-slider-content-right) .n2-ss-layer.er-slider-btn {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 46% !important;
    max-width: 640px !important;
    align-self: flex-end !important;
}

.n2-ss-slider .n2-ss-slide:has(.er-slider-content-left) .n2-ss-layer.er-slider-btn {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
    --ssselfalign: flex-start;
}

.n2-ss-slider .n2-ss-layer.er-slider-content-left,
.n2-ss-slider .n2-ss-layer.er-slider-content-left *,
.n2-ss-slider .n2-ss-layer.er-slider-content-right,
.n2-ss-slider .n2-ss-layer.er-slider-content-right * {
    text-align: left !important;
}

.n2-ss-slider .n2-ss-layer.er-slider-subheading,
.n2-ss-slider .n2-ss-layer.er-slider-subheading *,
.n2-ss-slider .n2-ss-layer.er-slider-subheading [class*="n2-font"] {
    font-family: var(--er-slider-font) !important;
    color: #6eb5ff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55) !important;
}

.n2-ss-slider .n2-ss-layer.er-slider-heading,
.n2-ss-slider .n2-ss-layer.er-slider-heading *,
.n2-ss-slider .n2-ss-layer.er-slider-heading [class*="n2-font"] {
    font-family: var(--er-slider-font) !important;
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 12px !important;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}

.n2-ss-slider .n2-ss-layer.er-slider-paragraph,
.n2-ss-slider .n2-ss-layer.er-slider-paragraph *,
.n2-ss-slider .n2-ss-layer.er-slider-paragraph [class*="n2-font"] {
    font-family: var(--er-slider-font) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    max-width: 520px;
    margin: 0 !important;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.n2-ss-slider .n2-ss-slide:has(.er-slider-content-left) .n2-ss-layer.er-slider-btn {
    left: auto !important;
    right: auto !important;
    align-self: flex-start !important;
    --ssselfalign: flex-start;
}

.n2-ss-slider .n2-ss-slide:has(.er-slider-content-right) .n2-ss-layer.er-slider-btn {
    left: auto !important;
    right: auto !important;
    width: 46% !important;
    max-width: 640px !important;
    align-self: flex-end !important;
}

.n2-ss-slider .n2-ss-layer.er-slider-btn {
    transform: none !important;
    background: transparent !important;
    overflow: visible !important;
    margin-top: 28px !important;
}

@keyframes er-slider-btn-pulse {
    0%,
    100% {
        box-shadow: 0 10px 24px rgba(47, 128, 255, 0.32);
    }
    50% {
        box-shadow: 0 14px 34px rgba(47, 128, 255, 0.7);
    }
}

.n2-ss-slider .n2-ss-layer.er-slider-btn .n2-ss-button-container {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    isolation: isolate;
}

.n2-ss-slider .n2-ss-layer.er-slider-btn .n2-ss-button-container a {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 52px !important;
    padding: 0 30px 0 28px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #2f80ff !important;
    background-color: #2f80ff !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: var(--er-slider-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: 0 10px 24px rgba(47, 128, 255, 0.4) !important;
    transform: skewX(-22deg) !important;
    clip-path: none !important;
    overflow: visible !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
    animation: er-slider-btn-pulse 2.4s ease-in-out infinite;
}

.n2-ss-slider .n2-ss-layer.er-slider-btn .n2-ss-button-container a::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -20px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 12px !important;
    height: auto !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;
    z-index: 0 !important;
    transition: background-color 0.3s ease !important;
}

.n2-ss-slider .n2-ss-layer.er-slider-btn .n2-ss-button-container a > div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #ffffff !important;
    transform: skewX(22deg) !important;
}

.n2-ss-slider .n2-ss-layer.er-slider-btn .n2-ss-button-container a > div > div {
    display: inline-flex !important;
    align-items: center !important;
    color: #ffffff !important;
    font-family: var(--er-slider-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: transparent !important;
    text-shadow: none !important;
    transform: none !important;
}

.n2-ss-slider .n2-ss-layer.er-slider-btn .n2-ss-button-container a > div > div::after {
    content: "\2192" !important;
    display: inline-block !important;
    margin-left: 10px !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    transition: transform 0.3s ease !important;
}

.n2-ss-slider .n2-ss-layer.er-slider-btn .n2-ss-button-container a:hover {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    transform: skewX(-22deg) translateY(-3px) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45) !important;
    animation: none;
}

.n2-ss-slider .n2-ss-layer.er-slider-btn .n2-ss-button-container a:hover::before {
    background: #2f80ff !important;
    background-color: #2f80ff !important;
}

.n2-ss-slider .n2-ss-layer.er-slider-btn .n2-ss-button-container a:hover > div > div::after {
    transform: translateX(4px) !important;
}

@media (max-width: 1024px) {
    .n2-ss-slider .n2-ss-section-main-content:has(.er-slider-content-right) > .n2-ss-layer,
    .n2-ss-slider .n2-ss-slide:has(.er-slider-content-right) .n2-ss-layer.er-slider-btn {
        width: 58% !important;
        max-width: 560px !important;
    }

    .n2-ss-slider .n-uc-gr0na8lQUl8,
    .n2-ss-slider .n2-ss-section-main-content:has(.er-slider-content-left),
    .n2-ss-slider .n2-ss-layer-content:has(.er-slider-content-left) {
        width: 52% !important;
    }

    .n2-ss-slider .n2-ss-layer.er-slider-heading,
    .n2-ss-slider .n2-ss-layer.er-slider-heading * {
        font-size: 30px !important;
    }

    .n2-ss-slider .n2-ss-layer.er-slider-paragraph,
    .n2-ss-slider .n2-ss-layer.er-slider-paragraph * {
        font-size: 15px !important;
    }

    .n2-ss-slider .n2-ss-layer.er-slider-btn a {
        min-height: 46px !important;
        padding: 0 22px 0 18px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {
    .n2-ss-slider .n2-ss-section-main-content:has(.er-slider-content-right),
    .n2-ss-slider .n2-ss-layer-content:has(.er-slider-content-right) {
        padding-right: 5% !important;
        padding-left: 5% !important;
        width: 100% !important;
        transform: none !important;
    }

    .n2-ss-slider .n2-ss-section-main-content:has(.er-slider-content-right) > .n2-ss-layer,
    .n2-ss-slider .n2-ss-slide:has(.er-slider-content-right) .n2-ss-layer.er-slider-btn {
        width: 100% !important;
        max-width: none !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .n2-ss-slider .n-uc-gr0na8lQUl8,
    .n2-ss-slider .n2-ss-section-main-content:has(.er-slider-content-left),
    .n2-ss-slider .n2-ss-layer-content:has(.er-slider-content-left) {
        left: 5% !important;
        right: 5% !important;
        width: 90% !important;
        max-width: none !important;
        transform: translate3d(0, -50%, 0) !important;
    }

    .n2-ss-slider .n2-ss-slide:has(.er-slider-content-left) .n2-ss-layer.er-slider-btn {
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        align-self: flex-start !important;
    }

    .n2-ss-slider .n2-ss-slide:has(.er-slider-content-left) .n2-ss-slide-background::after,
    .n2-ss-slider .n2-ss-slide:has(.er-slider-content-right) .n2-ss-slide-background::after {
        background: rgba(6, 10, 18, 0.62);
    }

    .n2-ss-slider .n2-ss-layer.er-slider-heading,
    .n2-ss-slider .n2-ss-layer.er-slider-heading * {
        font-size: 24px !important;
    }

    .n2-ss-slider .n2-ss-layer.er-slider-subheading,
    .n2-ss-slider .n2-ss-layer.er-slider-subheading * {
        font-size: 11px !important;
    }

    .n2-ss-slider .n2-ss-layer.er-slider-paragraph,
    .n2-ss-slider .n2-ss-layer.er-slider-paragraph * {
        font-size: 14px !important;
    }
}

/* Desktop - Default */
.desktop {
    display: flex !important;
}

.mobile {
    display: none !important;
}


/* Tablet + Mobile */
@media (max-width: 767px) {

    .desktop {
        display: none !important;
    }

    .mobile {
        display: flex !important;
    }

}

/* =========================================================
   Banner sliders – parent show/hide only
   .banner-desktop  → desktop only (1025px+)
   .banner-mobile   → tablet + mobile only (max 1024px)
   ========================================================= */
.banner-desktop,
.elementor .banner-desktop,
.n2-section-smartslider.banner-desktop {
    display: block !important;
}

.banner-mobile,
.elementor .banner-mobile,
.n2-section-smartslider.banner-mobile {
    display: none !important;
}

@media (max-width: 1024px) {
    .banner-desktop,
    .elementor .banner-desktop,
    .n2-section-smartslider.banner-desktop {
        display: none !important;
    }

    .banner-mobile,
    .elementor .banner-mobile,
    .n2-section-smartslider.banner-mobile {
        display: block !important;
    }

    .elementor .banner-mobile.e-flexbox-base,
    .elementor .banner-mobile.e-con,
    .elementor .banner-mobile.e-atomic-element {
        display: flex !important;
    }

    .banner-mobile .n2-ss-slider-3,
    .elementor .banner-mobile .n2-ss-slider-3 {
        position: relative !important;
    }

    .banner-mobile .n2-ss-slider-3::after,
    .elementor .banner-mobile .n2-ss-slider-3::after {
        content: "" !important;
        grid-area: cover;
        position: absolute !important;
        inset: 0 !important;
        z-index: 15 !important;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.58) !important;
    }

    .banner-mobile .n2-ss-slide-background-color,
    .elementor .banner-mobile .n2-ss-slide-background-color {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }

    .banner-mobile .n2-ss-slide-background-image img,
    .elementor .banner-mobile .n2-ss-slide-background-image img {
        filter: brightness(0.42) !important;
    }

    .banner-mobile .n2-ss-slider-4,
    .banner-mobile .n2-ss-slide,
    .banner-mobile .n2-ss-layers-container,
    .banner-mobile .n2-ss-section-main-content,
    .elementor .banner-mobile .n2-ss-slider-4 {
        z-index: 20 !important;
        position: relative;
    }

    .banner-mobile .n2-ss-layer.er-slider-heading,
    .banner-mobile .n2-ss-layer.er-slider-heading *,
    .banner-mobile .n2-ss-layer.er-slider-heading [class*="n2-font"],
    .banner-mobile .n2-ss-layer.er-slider-paragraph,
    .banner-mobile .n2-ss-layer.er-slider-paragraph *,
    .banner-mobile .n2-ss-layer.er-slider-paragraph p,
    .banner-mobile .n2-ss-layer.er-slider-paragraph [class*="n2-font"] {
        color: #ffffff !important;
        opacity: 1 !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
    }
}

/* =========================================
   EXPRESS ROOFING - SERVICES HEADING
========================================= */

.er-services-heading {
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Small Eyebrow */
.er-services-heading .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 14px;
    color: #004EA1;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Lines beside eyebrow */
.er-services-heading .section-eyebrow::before,
.er-services-heading .section-eyebrow::after {
    content: "";
    width: 38px;
    height: 2px;
    background: #004EA1;
    display: inline-block;
}

/* Main Heading */
.er-services-heading .section-title {
    margin: 0;
    color: #07133D;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

/* Blue highlighted word */
.er-services-heading .section-title span {
    color: #0057D9;
}

/* Reusable heading – no parent class needed.
   .er-eyebrow  = sub heading + side lines
   .er-title    = main heading
   text-align, font-family, color: Elementor only */
.elementor .er-eyebrow .elementor-heading-title,
.elementor .er-eyebrow.elementor-heading-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.3;
    text-transform: uppercase;
}

.elementor .er-eyebrow .elementor-heading-title::before,
.elementor .er-eyebrow .elementor-heading-title::after,
.elementor .er-eyebrow.elementor-heading-title::before,
.elementor .er-eyebrow.elementor-heading-title::after {
    content: "";
    width: 38px;
    height: 2px;
    background: #2f80ff;
    display: inline-block;
    flex-shrink: 0;
}

.elementor .er-title .elementor-heading-title,
.elementor .er-title.elementor-heading-title {
    margin: 0;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.elementor .er-title .elementor-heading-title span,
.elementor .er-title.elementor-heading-title span {
    color: #2f80ff;
}

/* =====================================================
   EXPRESS ROOFING - SERVICE CARDS
   .er-services-grid
     └── .er-service-card  (Image Box inside)
   Do not override Elementor Image Box margin/padding.
===================================================== */

.elementor .er-services-grid,
.elementor .er-services-grid.e-flexbox-base,
.elementor .er-services-grid.e-con {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    counter-reset: er-card;
}

.elementor .er-service-card,
.elementor .er-service-card.e-flexbox-base,
.elementor .er-service-card.e-con {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: 0 1 30% !important;
    width: 30% !important;
    max-width: 30% !important;
    min-width: 0 !important;
    min-height: 420px !important;
    margin: 0 10px !important;
    padding: 56px 36px 40px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04), 0 18px 45px rgba(15, 23, 42, 0.1) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.elementor .er-services-grid:has(.er-service-card ~ .er-service-card ~ .er-service-card ~ .er-service-card) .er-service-card,
.elementor .er-services-grid:has(.er-service-card ~ .er-service-card ~ .er-service-card ~ .er-service-card) .er-service-card.e-con {
    flex: 0 1 22% !important;
    width: 22% !important;
    max-width: 22% !important;
    margin: 0 8px !important;
    min-height: 380px !important;
    padding: 52px 24px 32px !important;
}

.elementor .er-services-grid:has(.er-service-card ~ .er-service-card ~ .er-service-card ~ .er-service-card) .er-service-card::before,
.elementor .er-services-grid:has(.er-service-card ~ .er-service-card ~ .er-service-card ~ .er-service-card) .er-service-card::after {
    left: 24px !important;
}

.elementor .er-services-grid:has(.er-service-card ~ .er-service-card ~ .er-service-card ~ .er-service-card) .er-service-card .elementor-image-box-title {
    font-size: 20px !important;
}

/* Reference: short blue accent on each card top — not a full-width bar */
.elementor .er-service-card::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 36px !important;
    right: auto !important;
    width: 72px !important;
    height: 3px !important;
    background: #2f80ff !important;
    border-radius: 0 0 3px 3px !important;
}

.elementor .er-service-card::before,
.elementor .er-service-card.e-con::before,
.elementor .er-service-card.e-flexbox-base::before {
    counter-increment: er-card;
    content: counter(er-card, decimal-leading-zero) !important;
    display: block !important;
    position: absolute !important;
    top: 24px !important;
    left: 36px !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    color: #c5ccd6 !important;
    z-index: 3 !important;
}

.elementor .er-service-card .elementor-image-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
}

.elementor .er-service-card .elementor-image-box-img,
.elementor .er-service-card.elementor-position-top .elementor-image-box-img,
.elementor .er-service-card .elementor-image-box-wrapper .elementor-image-box-img {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 8px !important;
    margin-bottom: 24px !important;
    text-align: left !important;
}

.elementor .er-service-card .elementor-image-box-img img {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.elementor .er-service-card .elementor-image-box-content {
    width: 100% !important;
    text-align: left !important;
}

.elementor .er-service-card .elementor-image-box-title,
.elementor .er-service-card .elementor-image-box-title a {
    margin: 0 0 14px !important;
    color: #0b1220 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
}

.elementor .er-service-card .elementor-image-box-description {
    margin: 0 !important;
    color: #6b7280 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    text-align: left !important;
}

.elementor .er-service-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06), 0 22px 50px rgba(15, 23, 42, 0.14) !important;
}

@media (max-width: 1199px) {
    .elementor .er-services-grid:has(.er-service-card ~ .er-service-card ~ .er-service-card ~ .er-service-card) .er-service-card,
    .elementor .er-services-grid:has(.er-service-card ~ .er-service-card ~ .er-service-card ~ .er-service-card) .er-service-card.e-con {
        flex: 1 1 calc(50% - 14px) !important;
        max-width: calc(50% - 14px) !important;
    }
}

@media (max-width: 1024px) {
    .elementor .er-services-grid,
    .elementor .er-services-grid.e-flexbox-base,
    .elementor .er-services-grid.e-con {
        gap: 28px !important;
        padding: 0 20px !important;
    }

    .elementor .er-service-card,
    .elementor .er-service-card.e-flexbox-base,
    .elementor .er-service-card.e-con {
        flex: 0 1 calc(50% - 24px) !important;
        width: calc(50% - 24px) !important;
        max-width: calc(50% - 24px) !important;
        margin: 0 10px 16px !important;
    }

    .elementor .er-service-card .elementor-image-box-title {
        font-size: 20px !important;
    }

    .elementor .er-service-card .elementor-image-box-description {
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-services-grid,
    .elementor .er-services-grid.e-flexbox-base,
    .elementor .er-services-grid.e-con {
        gap: 16px !important;
        padding: 0 16px !important;
    }

    .elementor .er-service-card,
    .elementor .er-service-card.e-flexbox-base,
    .elementor .er-service-card.e-con {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 16px !important;
    }
}

/* =====================================================
   About left icon boxes
   Parent:  .er-iconbox-grid
   Child:   .er-iconbox  (Elementor Icon Box)
   Do not style CTA or right side.
===================================================== */

.elementor .er-iconbox-grid,
.elementor .er-iconbox-grid.e-flexbox-base,
.elementor .er-iconbox-grid.e-con {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
}

.elementor .er-iconbox-grid > .er-iconbox,
.elementor .er-iconbox-grid .er-iconbox {
    padding: 20px 16px 18px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04), 0 14px 32px rgba(15, 23, 42, 0.1) !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

@media (min-width: 1025px) {
    .elementor .er-iconbox-grid,
    .elementor .er-iconbox-grid.e-flexbox-base,
    .elementor .er-iconbox-grid.e-con {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 24px 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .elementor .er-iconbox-grid > .e-con,
    .elementor .er-iconbox-grid > .e-flexbox-base {
        align-self: stretch !important;
        display: flex !important;
        height: auto !important;
    }

    .elementor .er-iconbox-grid > .er-iconbox,
    .elementor .er-iconbox-grid .elementor-widget-icon-box.er-iconbox,
    .elementor .er-iconbox-grid .er-iconbox {
        flex: 1 1 calc(25% - 12px) !important;
        align-self: stretch !important;
        width: calc(25% - 12px) !important;
        max-width: calc(25% - 12px) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100% !important;
        margin: 0 !important;
    }
}

.elementor .er-iconbox-grid .er-iconbox .elementor-widget-container {
    height: 100% !important;
}

.elementor .er-iconbox .elementor-icon-box-wrapper,
.elementor .er-iconbox .elementor-widget-container .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    height: 100% !important;
}

.elementor .er-iconbox .elementor-icon-box-icon {
    margin: 0 0 14px !important;
}

.elementor .er-iconbox .elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    background: #eef5ff !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

.elementor .er-iconbox .elementor-icon i,
.elementor .er-iconbox .elementor-icon svg {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    color: #2f80ff !important;
    fill: #2f80ff !important;
    transition: color 0.3s ease, fill 0.3s ease !important;
}

.elementor .er-iconbox .elementor-icon-box-content {
    width: 100% !important;
    text-align: left !important;
}

.elementor .er-iconbox .elementor-icon-box-title,
.elementor .er-iconbox .elementor-icon-box-title a {
    margin: 0 0 6px !important;
    color: #0b1220 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    transition: color 0.3s ease !important;
}

.elementor .er-iconbox .elementor-icon-box-description {
    margin: 0 !important;
    color: #6b7280 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

.elementor .er-iconbox:hover,
.elementor .er-iconbox-grid .elementor-widget-icon-box.er-iconbox:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08), 0 22px 44px rgba(47, 128, 255, 0.16) !important;
}

.elementor .er-iconbox:hover .elementor-icon {
    background: #2f80ff !important;
    transform: scale(1.06);
}

.elementor .er-iconbox:hover .elementor-icon i,
.elementor .er-iconbox:hover .elementor-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.elementor .er-iconbox:hover .elementor-icon-box-title,
.elementor .er-iconbox:hover .elementor-icon-box-title a {
    color: #2f80ff !important;
}

.elementor .er-iconbox:has(.er-cta),
.elementor .er-iconbox:has(.er-cta-black),
.elementor .er-iconbox:has(.er-cta-blue),
.elementor .er-iconbox:has(.er-cta):hover,
.elementor .er-iconbox:has(.er-cta-black):hover,
.elementor .er-iconbox:has(.er-cta-blue):hover {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 0 !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .elementor .er-iconbox-grid,
    .elementor .er-iconbox-grid.e-flexbox-base,
    .elementor .er-iconbox-grid.e-con {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .elementor .er-iconbox-grid > .er-iconbox,
    .elementor .er-iconbox-grid .er-iconbox {
        flex: 1 1 calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        min-height: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-iconbox-grid,
    .elementor .er-iconbox-grid.e-flexbox-base,
    .elementor .er-iconbox-grid.e-con {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 16px !important;
    }

    .elementor .er-iconbox-grid > .e-con,
    .elementor .er-iconbox-grid > .e-flexbox-base,
    .elementor .er-iconbox-grid > .er-iconbox,
    .elementor .er-iconbox-grid .er-iconbox {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 0 0 0 !important;
    }
}

/* =====================================================
   Reusable CTAs – no parent class required
   .er-cta / .er-cta-black = header design (black + blue slant)
   .er-cta-blue            = slider design (blue + pulse, hover black)
===================================================== */

.elementor .er-cta,
.elementor .er-cta-black,
.elementor .er-cta-blue {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.elementor .er-cta .elementor-widget-container,
.elementor .er-cta-black .elementor-widget-container,
.elementor .er-cta-blue .elementor-widget-container,
.elementor .er-cta .elementor-button-wrapper,
.elementor .er-cta-black .elementor-button-wrapper,
.elementor .er-cta-blue .elementor-button-wrapper {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.elementor .er-cta .elementor-button,
.elementor .er-cta-black .elementor-button,
.elementor .er-cta-blue .elementor-button,
.elementor .er-cta.elementor-button,
.elementor .er-cta-black.elementor-button,
.elementor .er-cta-blue.elementor-button {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 52px !important;
    padding: 0 30px 0 28px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-transform: none !important;
    transform: skewX(-22deg) !important;
    clip-path: none !important;
    overflow: visible !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

.elementor .er-cta .elementor-button,
.elementor .er-cta-black .elementor-button,
.elementor .er-cta.elementor-button,
.elementor .er-cta-black.elementor-button {
    background: #0a0a0a !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

.elementor .er-cta-blue .elementor-button,
.elementor .er-cta-blue.elementor-button {
    background: #2f80ff !important;
    box-shadow: 0 10px 24px rgba(47, 128, 255, 0.4) !important;
    animation: er-slider-btn-pulse 2.4s ease-in-out infinite;
}

.elementor .er-cta .elementor-button::before,
.elementor .er-cta-black .elementor-button::before,
.elementor .er-cta-blue .elementor-button::before,
.elementor .er-cta.elementor-button::before,
.elementor .er-cta-black.elementor-button::before,
.elementor .er-cta-blue.elementor-button::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -20px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 12px !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;
    z-index: 0 !important;
    transition: background-color 0.3s ease !important;
}

.elementor .er-cta .elementor-button::before,
.elementor .er-cta-black .elementor-button::before,
.elementor .er-cta.elementor-button::before,
.elementor .er-cta-black.elementor-button::before {
    background: #2f80ff !important;
}

.elementor .er-cta-blue .elementor-button::before,
.elementor .er-cta-blue.elementor-button::before {
    background: #0a0a0a !important;
}

.elementor .er-cta .elementor-button-content-wrapper,
.elementor .er-cta-black .elementor-button-content-wrapper,
.elementor .er-cta-blue .elementor-button-content-wrapper {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: transparent !important;
    transform: skewX(22deg) !important;
}

.elementor .er-cta .elementor-button-icon,
.elementor .er-cta-black .elementor-button-icon,
.elementor .er-cta-blue .elementor-button-icon {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.elementor .er-cta .elementor-button-icon svg,
.elementor .er-cta .elementor-button-icon i,
.elementor .er-cta-black .elementor-button-icon svg,
.elementor .er-cta-black .elementor-button-icon i,
.elementor .er-cta-blue .elementor-button-icon svg,
.elementor .er-cta-blue .elementor-button-icon i {
    width: 17px !important;
    height: 17px !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.elementor .er-cta .elementor-button-text,
.elementor .er-cta-black .elementor-button-text,
.elementor .er-cta-blue .elementor-button-text {
    display: inline-flex !important;
    align-items: center !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.elementor .er-cta .elementor-button-text::after,
.elementor .er-cta-black .elementor-button-text::after,
.elementor .er-cta-blue .elementor-button-text::after {
    content: "\2192";
    display: inline-block;
    margin-left: 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}

.elementor .er-cta:hover,
.elementor .er-cta-black:hover,
.elementor .er-cta-blue:hover,
.elementor .er-cta:hover .elementor-widget-container,
.elementor .er-cta-black:hover .elementor-widget-container,
.elementor .er-cta-blue:hover .elementor-widget-container,
.elementor .er-cta:hover .elementor-button-wrapper,
.elementor .er-cta-black:hover .elementor-button-wrapper,
.elementor .er-cta-blue:hover .elementor-button-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.elementor .er-cta .elementor-button:hover,
.elementor .er-cta-black .elementor-button:hover,
.elementor .er-cta.elementor-button:hover,
.elementor .er-cta-black.elementor-button:hover {
    background: #2f80ff !important;
    background-color: #2f80ff !important;
    color: #ffffff !important;
    transform: skewX(-22deg) !important;
    box-shadow: none !important;
}

.elementor .er-cta .elementor-button:hover span,
.elementor .er-cta-black .elementor-button:hover span {
    color: #ffffff !important;
}

.elementor .er-cta .elementor-button:hover::before,
.elementor .er-cta-black .elementor-button:hover::before,
.elementor .er-cta.elementor-button:hover::before,
.elementor .er-cta-black.elementor-button:hover::before {
    background: #0a0a0a !important;
}

.elementor .er-cta-blue .elementor-button:hover,
.elementor .er-cta-blue.elementor-button:hover {
    background: #0a0a0a !important;
    color: #ffffff !important;
    transform: skewX(-22deg) !important;
    box-shadow: none !important;
    animation: none;
}

.elementor .er-cta-blue .elementor-button:hover::before,
.elementor .er-cta-blue.elementor-button:hover::before {
    background: #2f80ff !important;
}

/* =====================================================
   Reusable section layouts – no parent required
   .er-fullwidth  = edge-to-edge full width
   .er-boxed      = centered boxed width
===================================================== */

.elementor .er-fullwidth,
.elementor .er-fullwidth.e-con,
.elementor .er-fullwidth.e-flexbox-base {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
}

.elementor .er-boxed,
.elementor .er-boxed.e-con,
.elementor .er-boxed.e-flexbox-base {
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .elementor .er-fullwidth,
    .elementor .er-fullwidth.e-con,
    .elementor .er-fullwidth.e-flexbox-base,
    .elementor .er-boxed,
    .elementor .er-boxed.e-con,
    .elementor .er-boxed.e-flexbox-base {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-fullwidth,
    .elementor .er-fullwidth.e-con,
    .elementor .er-fullwidth.e-flexbox-base,
    .elementor .er-boxed,
    .elementor .er-boxed.e-con,
    .elementor .er-boxed.e-flexbox-base {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* =====================================================
   Location / icon-list bar – no parent required
   Class: .er-locbar
   CTA corners. One-line list. No text color/font. No blue line.
   Margin / padding stay with Elementor.
===================================================== */

.elementor .er-locbar,
.elementor .er-locbar.e-con,
.elementor .er-locbar.e-flexbox-base,
.elementor .er-locbar.elementor-widget-icon-list {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    background: #0a0a0a !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: visible;
    box-sizing: border-box;
    transform: skewX(-22deg);
}

.elementor .er-locbar::before {
    content: none !important;
}

.elementor .er-locbar > .e-con,
.elementor .er-locbar > .elementor-element,
.elementor .er-locbar .elementor-widget-container {
    transform: skewX(22deg);
    width: 100%;
}

.elementor .er-locbar .elementor-icon-list-items,
.elementor .er-locbar ul.elementor-icon-list-items,
.elementor .er-locbar .elementor-icon-list-items.elementor-inline-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    white-space: nowrap !important;
}

.elementor .er-locbar .elementor-icon-list-item,
.elementor .er-locbar .elementor-icon-list-items .elementor-icon-list-item,
.elementor .er-locbar .elementor-inline-item {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    white-space: nowrap !important;
}

@media (max-width: 1024px) {
    .elementor .er-locbar,
    .elementor .er-locbar.e-con,
    .elementor .er-locbar.e-flexbox-base,
    .elementor .er-locbar.elementor-widget-icon-list {
        transform: skewX(-12deg) !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }

    .elementor .er-locbar > .e-con,
    .elementor .er-locbar > .elementor-element,
    .elementor .er-locbar .elementor-widget-container {
        transform: skewX(12deg) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor .er-locbar .elementor-icon-list-items,
    .elementor .er-locbar ul.elementor-icon-list-items,
    .elementor .er-locbar .elementor-icon-list-items.elementor-inline-items {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        gap: 6px !important;
    }

    .elementor .er-locbar .elementor-icon-list-item,
    .elementor .er-locbar .elementor-icon-list-items .elementor-icon-list-item,
    .elementor .er-locbar .elementor-inline-item {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .elementor .er-locbar .elementor-icon-list-icon {
        margin-right: 4px !important;
    }

    .elementor .er-locbar .elementor-icon-list-icon i,
    .elementor .er-locbar .elementor-icon-list-icon svg {
        font-size: 11px !important;
        width: 11px !important;
        height: 11px !important;
    }

    .elementor .er-locbar .elementor-icon-list-text {
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-locbar,
    .elementor .er-locbar.e-con,
    .elementor .er-locbar.e-flexbox-base,
    .elementor .er-locbar.elementor-widget-icon-list {
        align-self: stretch !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        transform: skewX(-10deg) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .elementor .er-locbar > .e-con,
    .elementor .er-locbar > .elementor-element,
    .elementor .er-locbar .elementor-widget-container {
        transform: skewX(10deg) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .elementor .er-locbar .elementor-icon-list-items,
    .elementor .er-locbar ul.elementor-icon-list-items,
    .elementor .er-locbar .elementor-icon-list-items.elementor-inline-items {
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        gap: 10px !important;
        padding: 0 2px 10px !important;
        scrollbar-width: thin;
        scrollbar-color: #2f80ff #2a2a2a;
    }

    .elementor .er-locbar .elementor-icon-list-items::-webkit-scrollbar {
        height: 4px;
        display: block;
    }

    .elementor .er-locbar .elementor-icon-list-items::-webkit-scrollbar-track {
        background: #2a2a2a;
        border-radius: 99px;
    }

    .elementor .er-locbar .elementor-icon-list-items::-webkit-scrollbar-thumb {
        background: #2f80ff;
        border-radius: 99px;
    }
}

/* =========================================================
   EXPRESS ROOFING - COUNTER SECTION
   Heading/Subheading are NOT styled here
========================================================= */


/* =========================================================
   COUNTER SECTION
   Parent: .er-counter-section
   Grid:   .er-counter-grid
   Box:    .er-counter-box
   Desc:   .er-counter-desc  (optional, also works on icon-box description)
========================================================= */

.elementor .er-counter-section,
.elementor .er-counter-section.e-con,
.elementor .er-counter-section.e-flexbox-base {
    position: relative;
    isolation: isolate;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 520px;
    margin: 0 !important;
    padding: 100px 80px 110px !important;
    overflow: hidden !important;
    background-color: #f4f8ff !important;
    background-image: none !important;
    box-sizing: border-box !important;
}

.elementor .er-counter-section > .elementor-element {
    position: relative;
    z-index: 3;
}

.elementor .er-counter-section::before,
.elementor .er-counter-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 220px;
    z-index: 1;
    pointer-events: none;
}

.elementor .er-counter-section::before {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background-image:
        linear-gradient(135deg, transparent 0 54%, #2f80ff 54% 84%, #f4a024 84% 100%),
        radial-gradient(circle, rgba(255, 255, 255, 0.42) 1.15px, transparent 1.35px),
        linear-gradient(#071b3a, #071b3a);
    background-size: 100% 100%, 18px 18px, 100% 100%;
    background-repeat: no-repeat, repeat, no-repeat;
}

.elementor .er-counter-section::after {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background-image:
        linear-gradient(315deg, transparent 0 54%, #2f80ff 54% 84%, #f4a024 84% 100%),
        radial-gradient(circle, rgba(255, 255, 255, 0.42) 1.15px, transparent 1.35px),
        linear-gradient(#071b3a, #071b3a);
    background-size: 100% 100%, 18px 18px, 100% 100%;
    background-repeat: no-repeat, repeat, no-repeat;
}

@media (max-width: 1024px) {
    .elementor .er-counter-section,
    .elementor .er-counter-section.e-con,
    .elementor .er-counter-section.e-flexbox-base {
        min-height: 0;
        padding: 70px 36px 80px !important;
    }

    .elementor .er-counter-section::before,
    .elementor .er-counter-section::after {
        width: 220px;
        height: 150px;
    }
}

@media (max-width: 767px) {
    .elementor .er-counter-section,
    .elementor .er-counter-section.e-con,
    .elementor .er-counter-section.e-flexbox-base {
        padding: 56px 20px 64px !important;
    }

    .elementor .er-counter-section::before,
    .elementor .er-counter-section::after {
        width: 150px;
        height: 104px;
    }
}

.elementor .er-counter-section .er-counter-grid,
.elementor .er-counter-section .er-counter-grid.e-con,
.elementor .er-counter-section .er-counter-grid.e-flexbox-base {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 20px !important;
}

.elementor .er-counter-section > .er-counter-grid > .e-con,
.elementor .er-counter-section > .er-counter-grid > .er-counter-grid,
.elementor .er-counter-section > .er-counter-grid > .er-counter-box {
    flex: 1 1 25% !important;
    align-self: stretch !important;
    display: flex !important;
    width: 25% !important;
    max-width: 25% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.elementor .er-counter-grid .er-counter-grid,
.elementor .er-counter-grid .er-counter-grid.e-con {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
}

.elementor .er-counter-box,
.elementor .er-counter-box.elementor-widget-icon-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 22px 18px 20px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04), 0 14px 32px rgba(15, 23, 42, 0.08) !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.elementor .er-counter-box .elementor-widget-container {
    height: 100% !important;
}

.elementor .er-counter-box.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor .er-counter-box.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper,
.elementor .er-counter-box.elementor-widget-icon-box.elementor-position-top .elementor-icon-box-wrapper,
.elementor .er-counter-box.elementor-widget-icon-box.elementor-mobile-position-block-start .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    height: auto !important;
    text-align: left !important;
}

.elementor .er-counter-box.elementor-widget-icon-box .elementor-icon-box-icon,
.elementor .er-counter-box.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-icon {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    margin: 6px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e8f2ff !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

.elementor .er-counter-box .elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #2f80ff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    transition: color 0.3s ease !important;
}

.elementor .er-counter-box .elementor-icon i {
    color: #2f80ff !important;
    font-size: 22px !important;
    transition: color 0.3s ease !important;
}

.elementor .er-counter-box .elementor-icon svg {
    width: 22px !important;
    height: 22px !important;
    fill: #2f80ff !important;
    transition: fill 0.3s ease !important;
}

.elementor .er-counter-box.elementor-widget-icon-box .elementor-icon-box-content {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    text-align: left !important;
}

.elementor .er-counter-box .elementor-icon-box-title,
.elementor .er-counter-box .elementor-icon-box-title span {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #071b3a !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
    text-align: left !important;
    transition: color 0.3s ease !important;
}

.elementor .er-counter-box .ercounterh {
    display: block !important;
    margin: 0 0 6px !important;
    color: #071b3a !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    transition: color 0.3s ease !important;
}

.elementor .er-counter-box .elementor-icon-box-description,
.elementor .er-counter-box .er-counter-desc,
.elementor .er-counter-desc {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #6b7c93 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

.elementor .er-counter-box:hover,
.elementor .er-counter-box.elementor-widget-icon-box:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08), 0 22px 44px rgba(47, 128, 255, 0.16) !important;
}

.elementor .er-counter-box:hover .elementor-icon-box-icon {
    background: #2f80ff !important;
    transform: scale(1.06);
}

.elementor .er-counter-box:hover .elementor-icon,
.elementor .er-counter-box:hover .elementor-icon i {
    color: #0a0a0a !important;
}

.elementor .er-counter-box:hover .elementor-icon svg {
    fill: #0a0a0a !important;
}

.elementor .er-counter-box:hover .elementor-icon-box-title,
.elementor .er-counter-box:hover .elementor-icon-box-title span,
.elementor .er-counter-box:hover .ercounterh {
    color: #2f80ff !important;
}

@media (max-width: 1024px) {
    .elementor .er-counter-section > .er-counter-grid {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .elementor .er-counter-section > .er-counter-grid > .e-con,
    .elementor .er-counter-section > .er-counter-grid > .er-counter-grid,
    .elementor .er-counter-section > .er-counter-grid > .er-counter-box {
        flex: 1 1 calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        border: 0 !important;
    }

    .elementor .er-counter-box .elementor-icon-box-title,
    .elementor .er-counter-box .elementor-icon-box-title span {
        font-size: 34px !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-counter-section > .er-counter-grid,
    .elementor .er-counter-section > .er-counter-grid.e-con,
    .elementor .er-counter-section > .er-counter-grid.e-flexbox-base {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        overscroll-behavior-x: contain;
        padding: 4px 2px 22px !important;
        scrollbar-width: thin;
        scrollbar-color: #2f80ff #e4ecf7;
    }

    .elementor .er-counter-section > .er-counter-grid::-webkit-scrollbar {
        display: block;
        height: 5px;
    }

    .elementor .er-counter-section > .er-counter-grid::-webkit-scrollbar-track {
        background: #e4ecf7;
        border-radius: 99px;
    }

    .elementor .er-counter-section > .er-counter-grid::-webkit-scrollbar-thumb {
        background: #2f80ff;
        border-radius: 99px;
    }

    .elementor .er-counter-section > .er-counter-grid > .e-con,
    .elementor .er-counter-section > .er-counter-grid > .er-counter-grid,
    .elementor .er-counter-section > .er-counter-grid > .er-counter-box {
        flex: 0 0 78% !important;
        width: 78% !important;
        min-width: 78% !important;
        max-width: 78% !important;
        border: 0 !important;
        padding: 0 !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .elementor .er-counter-section > .er-counter-grid .er-counter-grid,
    .elementor .er-counter-section > .er-counter-grid .er-counter-grid.e-con {
        overflow: visible !important;
        flex-wrap: nowrap !important;
    }

    .elementor .er-counter-box .elementor-icon-box-title,
    .elementor .er-counter-box .elementor-icon-box-title span {
        font-size: 28px !important;
    }
}

/* =====================================================
   SOLUTIONS / SERVICE LIST  (NEW — do not mix with old)
   Parent:    .er-solutions-grid   ← ONE wrapper around all 4 columns
   Image Box: .er-solutions-card   ← Image Box widget ONLY (not CTA)
   Old classes .er-services-grid / .er-service-card stay untouched.
===================================================== */

.elementor .er-solutions-grid,
.elementor .er-solutions-grid.e-con,
.elementor .er-solutions-grid.e-flexbox-base {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
}

.elementor .er-solutions-grid:has(> .er-solutions-card.elementor-widget-image-box) {
    position: relative !important;
    height: 100% !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05), 0 18px 40px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.elementor .er-solutions-grid:has(> .er-solutions-card.elementor-widget-image-box)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #2f80ff;
    pointer-events: none;
    z-index: 2;
}

.elementor .er-solutions-grid:has(> .er-solutions-card.elementor-widget-image-box):hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08), 0 26px 50px rgba(47, 128, 255, 0.14) !important;
}

.elementor .er-solutions-grid:has(> .er-solutions-card.elementor-widget-image-box):hover .elementor-image-box-img img {
    transform: scale(1.06) !important;
}

.elementor .er-solutions-grid:has(> .er-solutions-card.elementor-widget-image-box):hover .elementor-image-box-title,
.elementor .er-solutions-grid:has(> .er-solutions-card.elementor-widget-image-box):hover .elementor-image-box-title a {
    color: #2f80ff !important;
}

.elementor .er-solutions-grid:has(> .er-solutions-grid),
.elementor .er-solutions-grid:has(> .e-con > .er-solutions-card.elementor-widget-image-box) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 24px !important;
    max-width: 1180px !important;
    margin-left: auto;
    margin-right: auto;
}

.elementor .er-solutions-grid:has(> .e-con > .er-solutions-card.elementor-widget-image-box) > .e-con,
.elementor .er-solutions-grid:has(> .er-solutions-grid) > .er-solutions-grid {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    align-self: stretch !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05), 0 18px 40px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
}

.elementor .er-solutions-grid > .er-iconbox,
.elementor .er-solutions-grid .er-iconbox:has(.er-cta),
.elementor .er-solutions-grid .er-iconbox:has(.er-cta-blue),
.elementor .er-solutions-grid .er-iconbox:has(.er-cta-black),
.elementor .er-solutions-card:has(.er-cta),
.elementor .er-solutions-card:has(.er-cta-blue),
.elementor .er-solutions-card:has(.er-cta-black) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: auto !important;
    padding: 8px 22px 24px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    text-align: center !important;
}

.elementor .er-solutions-card.elementor-widget-image-box {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor .er-solutions-card.elementor-widget-image-box.elementor-position-top .elementor-image-box-wrapper,
.elementor .er-solutions-card.elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    width: 100% !important;
    height: auto !important;
    gap: 0 !important;
}

.elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-img,
.elementor .er-solutions-card.elementor-widget-image-box.elementor-position-top .elementor-image-box-img,
.elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 210px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    transition: transform 0.5s ease !important;
}

.elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-content {
    display: block !important;
    width: 100% !important;
    padding: 22px 22px 10px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-title,
.elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-title a {
    margin: 0 0 10px !important;
    color: #0b1220 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    transition: color 0.3s ease !important;
}

.elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-description {
    margin: 0 !important;
    color: #6b7280 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

@media (max-width: 1024px) {
    .elementor .er-solutions-grid:has(> .e-con > .er-solutions-card.elementor-widget-image-box) > .e-con,
    .elementor .er-solutions-grid:has(> .er-solutions-grid) > .er-solutions-grid {
        flex: 1 1 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }

    .elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-img img {
        height: 190px !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-solutions-grid:has(> .e-con > .er-solutions-card.elementor-widget-image-box),
    .elementor .er-solutions-grid:has(> .er-solutions-grid) {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 18px !important;
    }

    .elementor .er-solutions-grid:has(> .e-con > .er-solutions-card.elementor-widget-image-box) > .e-con,
    .elementor .er-solutions-grid:has(> .er-solutions-grid) > .er-solutions-grid {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor .er-solutions-card.elementor-widget-image-box .elementor-image-box-img img {
        height: 200px !important;
    }
}

/* =====================================================
   WHY / SPLIT SECTION
   Parent:  .er-why-section  (also auto-detects a row that has both children)
   Left:    .er-why-media
   Right:   .er-why-content
   Margin / padding: Elementor only — not locked here.
===================================================== */

.elementor .er-why-section,
.elementor .er-why-section.e-con,
.elementor .er-why-section.e-flexbox-base,
.elementor .e-con:has(> .er-why-media):has(> .er-why-content),
.elementor .e-flexbox-base:has(> .er-why-media):has(> .er-why-content) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 36px;
    box-sizing: border-box;
}

.elementor .er-why-media,
.elementor .er-why-media.e-con,
.elementor .er-why-media.e-flexbox-base,
.elementor .er-why-media.elementor-widget-image {
    position: relative !important;
    display: block !important;
    align-self: stretch !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    border: 8px solid #ffffff;
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 14px 30px rgba(15, 23, 42, 0.1),
        0 32px 60px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
}

.elementor .er-why-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.06) 30%,
        transparent 52%
    );
}

.elementor .er-why-media > .elementor-widget-image,
.elementor .er-why-media .elementor-widget-image,
.elementor .er-why-media .elementor-widget-container,
.elementor .er-why-media .elementor-image,
.elementor .er-why-media figure,
.elementor .er-why-media img,
.elementor .er-why-media .elementor-widget-image img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.elementor .er-why-content,
.elementor .er-why-content.e-con,
.elementor .er-why-content.e-flexbox-base {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.elementor .er-why-content .elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.elementor .er-why-content .elementor-icon-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.elementor .er-why-content .elementor-icon-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #e8f2ff;
    border-radius: 50%;
    flex-shrink: 0;
}

.elementor .er-why-content .elementor-icon-list-icon i,
.elementor .er-why-content .elementor-icon-list-icon svg {
    color: #2f80ff;
    fill: #2f80ff;
    font-size: 13px;
}

.elementor .er-why-content .elementor-icon-list-text {
    color: #3d4a5c;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
}

.elementor .er-why-content .er-iconbox,
.elementor .er-why-content .er-iconbox:has(.er-cta),
.elementor .er-why-content .er-iconbox:has(.er-cta-blue),
.elementor .er-why-content .er-iconbox:has(.er-cta-black) {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 0 !important;
}

@media (max-width: 1024px) {
    .elementor .er-why-section,
    .elementor .er-why-section.e-con,
    .elementor .e-con:has(> .er-why-media):has(> .er-why-content) {
        flex-direction: column !important;
    }

    .elementor .er-why-media,
    .elementor .er-why-media.e-con,
    .elementor .er-why-media.elementor-widget-image {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 340px !important;
        border-radius: 16px;
    }

    .elementor .er-why-content,
    .elementor .er-why-content.e-con {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-why-media,
    .elementor .er-why-media.e-con,
    .elementor .er-why-media.elementor-widget-image {
        min-height: 260px !important;
        border-radius: 14px;
    }
}

/* =====================================================
   TESTIMONIALS  (ElementsKit) — match reference cards
   Section: .er-reviews-section   (boxed parent)
   Widget:  .er-reviews
===================================================== */

.elementor .er-reviews-section,
.elementor .er-reviews-section.e-con,
.elementor .er-reviews-section.e-flexbox-base {
    position: relative;
    isolation: isolate;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-bottom: 140px;
    box-sizing: border-box;
    overflow: visible !important;
}

.elementor .er-reviews-section > .elementor-element,
.elementor .er-reviews-section > .er-eyebrow,
.elementor .er-reviews-section > .er-title,
.elementor .er-reviews-section > .er-reviews {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
}

.elementor .er-reviews-section > .elementor-widget-heading,
.elementor .er-reviews-section > .er-eyebrow,
.elementor .er-reviews-section > .er-title {
    text-align: center !important;
}

.elementor .er-reviews-section::before {
    content: "";
    position: absolute;
    top: 8px;
    right: -20px;
    width: 260px;
    height: 200px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.14;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='none' stroke='%232f80ff' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M18 72 L100 18 L182 72'/%3E%3Cpath d='M38 68 V122 H162 V68'/%3E%3Cpath d='M86 122 V86 H114 V122'/%3E%3C/svg%3E");
}

.elementor .er-reviews-section::after {
    content: "Happy Clients.\\A Stronger Communities.";
    white-space: pre-line;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 0;
    width: 100vw;
    height: 118px;
    transform: translateX(-50%);
    background: #071b3a;
    clip-path: polygon(0 62%, 100% 0, 100% 100%, 0 100%);
    color: #ffffff;
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
    padding: 48px 8vw 16px 0;
    box-sizing: border-box;
    pointer-events: none;
}

.elementor .er-reviews,
.elementor .elementor-widget-elementskit-testimonial {
    width: 100%;
    max-width: 100%;
}

.elementor .er-reviews .ekit-main-swiper.swiper,
.elementor .elementor-widget-elementskit-testimonial .ekit-main-swiper.swiper {
    overflow: hidden;
    min-height: 300px;
}

.elementor .er-reviews .swiper-wrapper,
.elementor .elementor-widget-elementskit-testimonial .swiper-wrapper {
    align-items: stretch;
}

.elementor .er-reviews .swiper-slide,
.elementor .elementor-widget-elementskit-testimonial .swiper-slide,
.elementor .er-reviews .swiper-slide-inner,
.elementor .elementor-widget-elementskit-testimonial .swiper-slide-inner {
    height: auto;
}

.elementor .er-reviews .ekit-testimonia-style-4 .elementskit-single-testimonial-slider,
.elementor .elementor-widget-elementskit-testimonial .ekit-testimonia-style-4 .elementskit-single-testimonial-slider,
.elementor .er-reviews .elementskit-single-testimonial-slider,
.elementor .elementor-widget-elementskit-testimonial .elementskit-single-testimonial-slider {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 280px;
    margin-bottom: 0 !important;
    padding: 28px 28px 26px 24px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07) !important;
    text-align: left !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.elementor .er-reviews .elementskit-single-testimonial-slider::before,
.elementor .elementor-widget-elementskit-testimonial .elementskit-single-testimonial-slider::before {
    display: none !important;
}

.elementor .er-reviews .swiper-slide-active .elementskit-single-testimonial-slider,
.elementor .elementor-widget-elementskit-testimonial .swiper-slide-active .elementskit-single-testimonial-slider,
.elementor .er-reviews .elementskit-single-testimonial-slider:hover,
.elementor .elementor-widget-elementskit-testimonial .elementskit-single-testimonial-slider:hover {
    box-shadow: 0 12px 36px rgba(47, 128, 255, 0.14) !important;
}

.elementor .er-reviews .swiper-slide-active .elementskit-single-testimonial-slider,
.elementor .elementor-widget-elementskit-testimonial .swiper-slide-active .elementskit-single-testimonial-slider {
    box-shadow: 0 12px 36px rgba(47, 128, 255, 0.16) !important;
}

.elementor .er-reviews .swiper-slide-active .elementskit-single-testimonial-slider::after,
.elementor .elementor-widget-elementskit-testimonial .swiper-slide-active .elementskit-single-testimonial-slider::after,
.elementor .er-reviews .swiper-slide:nth-child(2) .elementskit-single-testimonial-slider::after,
.elementor .elementor-widget-elementskit-testimonial .swiper-slide:nth-child(2) .elementskit-single-testimonial-slider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #2f80ff;
    border-radius: 16px 0 0 16px;
    z-index: 3;
}

.elementor .er-reviews .elementskit-commentor-content,
.elementor .elementor-widget-elementskit-testimonial .elementskit-commentor-content {
    display: flex !important;
    flex-direction: column !important;
    order: 2;
    padding: 0 !important;
    margin: 0 !important;
}

.elementor .er-reviews .ekit-wid-con .elementskit-commentor-bio,
.elementor .elementor-widget-elementskit-testimonial .ekit-wid-con .elementskit-commentor-bio {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    order: 1;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: calc(100% - 42px) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
}

.elementor .er-reviews .elementskit-commentor-bio::before,
.elementor .elementor-widget-elementskit-testimonial .elementskit-commentor-bio:not(:has(.elementskit-commentor-image))::before {
    content: "";
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e8f2ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232f80ff'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E") center 10px / 28px no-repeat;
}

.elementor .er-reviews .elementskit-commentor-image,
.elementor .elementor-widget-elementskit-testimonial .elementskit-commentor-image {
    flex: 0 0 52px;
}

.elementor .er-reviews .elementskit-commentor-image img,
.elementor .elementor-widget-elementskit-testimonial .elementskit-commentor-image img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.elementor .er-reviews .elementskit-profile-info,
.elementor .elementor-widget-elementskit-testimonial .elementskit-profile-info {
    display: block !important;
    min-width: 0;
}

.elementor .er-reviews .elementskit-author-name,
.elementor .elementor-widget-elementskit-testimonial .elementskit-author-name {
    display: block !important;
    color: #0b1220 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.elementor .er-reviews .elementskit-author-des,
.elementor .elementor-widget-elementskit-testimonial .elementskit-author-des {
    display: block !important;
    margin-top: 3px !important;
    color: #6b7c93 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.elementor .er-reviews .elementskit-stars,
.elementor .elementor-widget-elementskit-testimonial .elementskit-stars {
    order: 2;
    margin: 0 0 14px 66px !important;
}

.elementor .er-reviews .elementskit-commentor-content > p,
.elementor .elementor-widget-elementskit-testimonial .elementskit-commentor-content > p {
    order: 3;
    margin: 0 !important;
    color: #4b5568 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

.elementor .er-reviews .elementskit-watermark-icon,
.elementor .elementor-widget-elementskit-testimonial .elementskit-watermark-icon,
.elementor .er-reviews .ekit_watermark_icon_custom_position,
.elementor .elementor-widget-elementskit-testimonial .ekit_watermark_icon_custom_position {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    left: auto !important;
    display: inline-flex !important;
    margin: 0 !important;
    color: #c5d4ea !important;
    z-index: 2;
}

.elementor .er-reviews .elementskit-watermark-icon svg,
.elementor .elementor-widget-elementskit-testimonial .elementskit-watermark-icon svg {
    width: 28px !important;
    height: 28px !important;
    fill: #c5d4ea !important;
}

@media (max-width: 767px) {
    .elementor .er-reviews .elementskit-single-testimonial-slider,
    .elementor .elementor-widget-elementskit-testimonial .elementskit-single-testimonial-slider {
        padding: 24px 20px 22px !important;
        min-height: 0;
    }

    .elementor .er-reviews .elementskit-stars,
    .elementor .elementor-widget-elementskit-testimonial .elementskit-stars {
        margin-left: 66px !important;
    }

    .elementor .er-reviews-section {
        padding-bottom: 150px;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .elementor .er-reviews-section::before {
        width: 160px;
        height: 120px;
        right: 0;
        opacity: 0.1;
    }

    .elementor .er-reviews-section::after {
        left: 0;
        transform: none;
        width: 100%;
        height: auto;
        min-height: 128px;
        font-size: 13px;
        line-height: 1.25;
        padding: 54px 16px 18px;
        text-align: center;
        overflow: hidden;
        clip-path: polygon(0 40%, 100% 16%, 100% 100%, 0 100%);
        word-break: break-word;
    }
}

/* =====================================================
   FAQ  — match reference
   Section: .er-faq-section
   Left:    .er-faq-content
   Right:   .er-faq-list
   Image:   .er-faq-media  (on the Image widget)
   CTA / heading design stay with Elementor + existing classes
===================================================== */

.elementor .er-faq-section,
.elementor .er-faq-section.e-con,
.elementor .er-faq-section.e-flexbox-base {
    width: 100%;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.elementor .er-faq-section:has(> .er-faq-content):has(> .er-faq-list),
.elementor .er-faq-section > .e-con:has(> .er-faq-content):has(> .er-faq-list),
.elementor .er-faq-section > .e-flexbox-base:has(> .er-faq-content):has(> .er-faq-list) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 48px;
    width: 100%;
}

.elementor .er-faq-content,
.elementor .er-faq-content.e-con,
.elementor .er-faq-content.e-flexbox-base {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 48% !important;
    min-width: 0;
    align-self: stretch !important;
}

.elementor .er-faq-list,
.elementor .er-faq-list.e-con,
.elementor .er-faq-list.e-flexbox-base {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 52% !important;
    min-width: 0;
}

.elementor .er-faq-content > .elementor-element:not(.elementor-widget-button):not(.er-cta):not(.er-cta-blue):not(.er-cta-black) {
    margin-top: 0 !important;
}

.elementor .er-faq-content > .elementor-widget-heading,
.elementor .er-faq-content > .er-eyebrow,
.elementor .er-faq-content > .er-title {
    width: 100%;
    text-align: left !important;
}

.elementor .er-faq-content > .er-eyebrow {
    margin-bottom: 10px !important;
}

.elementor .er-faq-content > .er-title {
    margin-bottom: 14px !important;
}

.elementor .er-faq-content > .er-title .elementor-heading-title,
.elementor .er-faq-content .er-title .elementor-heading-title {
    font-size: 48px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -1.2px !important;
}

.elementor .er-faq-content > .elementor-widget-text-editor {
    width: 100%;
    max-width: 480px;
    margin-bottom: 20px !important;
}

.elementor .er-faq-content > .elementor-widget-text-editor p {
    margin: 0;
    color: #4b5568;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

.elementor .er-faq-content > .elementor-widget-button,
.elementor .er-faq-content > .er-cta,
.elementor .er-faq-content > .er-cta-blue,
.elementor .er-faq-content > .er-cta-black {
    width: 100% !important;
    max-width: 100% !important;
}

.elementor .er-faq-content > .e-con:has(.er-iconbox),
.elementor .er-faq-content > .e-flexbox-base:has(.er-iconbox) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
}

.elementor .er-faq-content .er-iconbox,
.elementor .er-faq-content .er-iconbox.e-con,
.elementor .er-faq-content .er-iconbox:hover {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.elementor .er-faq-content .er-iconbox .elementor-icon-box-wrapper {
    align-items: center !important;
    text-align: center !important;
}

.elementor .er-faq-content .er-iconbox .elementor-icon {
    width: 48px !important;
    height: 48px !important;
    background: #eef5ff !important;
}

.elementor .er-faq-content .er-iconbox:hover .elementor-icon {
    background: #eef5ff !important;
    transform: none;
}

.elementor .er-faq-content .er-iconbox:hover .elementor-icon i,
.elementor .er-faq-content .er-iconbox:hover .elementor-icon svg {
    color: #2f80ff !important;
    fill: #2f80ff !important;
}

.elementor .er-faq-content .er-iconbox .elementor-icon-box-content,
.elementor .er-faq-content .er-iconbox .elementor-icon-box-title,
.elementor .er-faq-content .er-iconbox .elementor-icon-box-title a,
.elementor .er-faq-content .er-iconbox .elementor-icon-box-description {
    text-align: center !important;
}

.elementor .er-faq-content .er-iconbox:hover .elementor-icon-box-title,
.elementor .er-faq-content .er-iconbox:hover .elementor-icon-box-title a {
    color: #0b1220 !important;
}

.elementor .er-faq-content > .e-con:has(.er-faq-media),
.elementor .er-faq-content > .e-con:has(.elementor-widget-image),
.elementor .er-faq-content > .e-flexbox-base:has(.er-faq-media),
.elementor .er-faq-content > .e-flexbox-base:has(.elementor-widget-image) {
    position: relative;
    display: flex !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 380px;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

.elementor .er-faq-content .er-faq-media,
.elementor .er-faq-content .er-faq-media .elementor-widget-container,
.elementor .er-faq-content > .e-con:has(.elementor-widget-image) .elementor-widget-image,
.elementor .er-faq-content > .e-con:has(.elementor-widget-image) .elementor-widget-container {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    min-height: 380px;
    margin: 0 !important;
}

.elementor .er-faq-content .er-faq-media img,
.elementor .er-faq-content .elementor-widget-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 380px;
    object-fit: cover !important;
    object-position: 0% 100% !important;
}

.elementor .er-faq-list .elementor-widget-n-accordion,
.elementor .er-faq-list .e-n-accordion {
    width: 100%;
    --n-accordion-border-width: 0px;
    --n-accordion-border-color: transparent;
    --n-accordion-border-style: none;
    --n-accordion-border-radius: 16px;
    --n-accordion-padding: 0px;
    --n-accordion-title-icon-order: 3;
    --n-accordion-item-title-space-between: 0px;
    --n-accordion-item-title-distance-from-content: 0px;
}

.elementor .er-faq-list .e-n-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: er-faq;
}

.elementor .er-faq-list .e-n-accordion-item {
    counter-increment: er-faq;
    margin: 0 !important;
    background: #ffffff;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.elementor .er-faq-list .e-n-accordion-item[open] {
    background: #eef6ff;
    box-shadow: 0 8px 24px rgba(47, 128, 255, 0.1);
}

.elementor .er-faq-list .e-n-accordion-item-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px;
    padding: 16px 18px !important;
    cursor: pointer;
    list-style: none;
}

.elementor .er-faq-list .e-n-accordion-item-title::-webkit-details-marker {
    display: none;
}

.elementor .er-faq-list .e-n-accordion-item-title::before {
    content: counter(er-faq, decimal-leading-zero);
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #e8f2ff;
    border-radius: 50%;
    color: #2f80ff;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.elementor .er-faq-list .e-n-accordion-item[open] .e-n-accordion-item-title::before {
    background: #dcecff;
}

.elementor .er-faq-list .e-n-accordion-item-title-header {
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
}

.elementor .er-faq-list .e-n-accordion-item-title-text {
    color: #0b1220;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.elementor .er-faq-list .e-n-accordion-item-title-icon {
    position: relative;
    order: 3;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-left: auto;
}

.elementor .er-faq-list .e-n-accordion-item-title-icon .e-opened,
.elementor .er-faq-list .e-n-accordion-item-title-icon .e-closed,
.elementor .er-faq-list .e-n-accordion-item-title-icon i,
.elementor .er-faq-list .e-n-accordion-item-title-icon svg {
    display: none !important;
}

.elementor .er-faq-list .e-n-accordion-item-title-icon::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #0b1220;
    border-bottom: 2px solid #0b1220;
    transform: rotate(45deg);
    transition: transform 0.25s ease, top 0.25s ease;
}

.elementor .er-faq-list .e-n-accordion-item[open] .e-n-accordion-item-title-icon::after {
    top: 7px;
    transform: rotate(-135deg);
}

.elementor .er-faq-list .e-n-accordion-item > .e-con {
    padding: 0 20px 18px 68px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.elementor .er-faq-list .e-n-accordion-item .elementor-widget-text-editor p {
    margin: 0;
    color: #5b6573;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
}

@media (max-width: 1024px) {
    .elementor .er-faq-section:has(> .er-faq-content):has(> .er-faq-list),
    .elementor .er-faq-section > .e-con:has(> .er-faq-content):has(> .er-faq-list),
    .elementor .er-faq-section > .e-flexbox-base:has(> .er-faq-content):has(> .er-faq-list) {
        flex-direction: column !important;
        gap: 32px;
    }

    .elementor .er-faq-content,
    .elementor .er-faq-content.e-con,
    .elementor .er-faq-list,
    .elementor .er-faq-list.e-con {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-faq-content > .e-con:has(.er-iconbox) {
        gap: 10px;
    }

    .elementor .er-faq-content .er-iconbox .elementor-icon {
        width: 42px !important;
        height: 42px !important;
    }

    .elementor .er-faq-content .er-iconbox .elementor-icon-box-title,
    .elementor .er-faq-content .er-iconbox .elementor-icon-box-title a {
        font-size: 13px !important;
    }

    .elementor .er-faq-content > .er-title .elementor-heading-title,
    .elementor .er-faq-content .er-title .elementor-heading-title {
        font-size: 34px !important;
    }

    .elementor .er-faq-content > .e-con:has(.elementor-widget-image),
    .elementor .er-faq-content .er-faq-media,
    .elementor .er-faq-content .er-faq-media .elementor-widget-container,
    .elementor .er-faq-content > .e-con:has(.elementor-widget-image) .elementor-widget-image,
    .elementor .er-faq-content > .e-con:has(.elementor-widget-image) .elementor-widget-container,
    .elementor .er-faq-content .er-faq-media img,
    .elementor .er-faq-content .elementor-widget-image img {
        min-height: 240px;
    }

    .elementor .er-faq-list .e-n-accordion-item-title {
        padding: 14px 14px !important;
        gap: 10px;
    }

    .elementor .er-faq-list .e-n-accordion-item-title-text {
        font-size: 14px;
    }

    .elementor .er-faq-list .e-n-accordion-item > .e-con {
        padding: 0 16px 16px 60px !important;
    }
}

/* =====================================================
   FOOTER
   Class: .er-footer  → outermost black Flexbox (parent)
===================================================== */

.ekit-template-content-footer:has(.er-footer),
.elementor-77:has(.er-footer) {
    background: #030101 !important;
}

.elementor .er-footer,
.elementor .er-footer.e-con,
.elementor .er-footer.e-flexbox-base {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #030101 !important;
    background-color: #030101 !important;
    background-image: none !important;
    color: #ffffff;
}

.elementor .er-footer > .e-con,
.elementor .er-footer > .e-flexbox-base {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 36px;
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding: 72px 40px 56px;
    box-sizing: border-box;
}

.elementor .er-footer > .e-con > .e-con,
.elementor .er-footer > .e-con > .e-flexbox-base {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
}

.elementor .er-footer > .e-con > .e-con:first-child {
    flex: 1.2 1 0 !important;
    max-width: 320px;
}

.elementor .er-footer .elementor-widget-image img {
    display: block;
    max-width: 176px;
    width: 100%;
    height: auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.elementor .er-footer .elementor-widget-text-editor,
.elementor .er-footer .elementor-widget-text-editor p {
    margin: 0;
    color: #c5cbd4 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

.elementor .er-footer .elementor-heading-title {
    margin: 0 0 6px !important;
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
}

.elementor .er-footer .elementor-widget-divider {
    width: 100%;
}

.elementor .er-footer .elementor-divider {
    padding: 0 0 16px !important;
    text-align: left;
}

.elementor .er-footer .elementor-divider-separator {
    display: block;
    width: 36px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 3px solid #2f80ff !important;
}

.elementor .er-footer .elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.elementor .er-footer .elementor-icon-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
}

.elementor .er-footer .elementor-icon-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
}

.elementor .er-footer .elementor-icon-list-icon i,
.elementor .er-footer .elementor-icon-list-icon svg {
    width: 12px !important;
    height: 12px !important;
    color: #2f80ff !important;
    fill: #2f80ff !important;
}

.elementor .er-footer .elementor-icon-list-text,
.elementor .er-footer .elementor-icon-list-item > a {
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.elementor .er-footer .elementor-icon-list-item:hover .elementor-icon-list-text,
.elementor .er-footer .elementor-icon-list-item:hover > a {
    color: #2f80ff !important;
}

.elementor .er-footer .elementor-widget-icon-box {
    width: 100%;
    margin: 0 0 16px !important;
}

.elementor .er-footer .elementor-widget-icon-box:last-child {
    margin-bottom: 0 !important;
}

.elementor .er-footer .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: left !important;
}

.elementor .er-footer .elementor-icon-box-icon {
    flex: 0 0 auto;
}

.elementor .er-footer .elementor-icon-box-icon .elementor-icon,
.elementor .er-footer .elementor-widget-icon-box .elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: #2f80ff !important;
    border: 0 !important;
    border-radius: 50% !important;
}

.elementor .er-footer .elementor-icon i,
.elementor .er-footer .elementor-icon svg {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.elementor .er-footer .elementor-icon-box-title,
.elementor .er-footer .elementor-icon-box-title a,
.elementor .er-footer .elementor-icon-box-title span {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.elementor .er-footer .elementor-icon-box-description {
    margin: 0 !important;
    color: #c5cbd4 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

@media (max-width: 1024px) {
    .elementor .er-footer > .e-con,
    .elementor .er-footer > .e-flexbox-base {
        flex-wrap: wrap !important;
        gap: 32px 24px;
        padding: 56px 24px 40px;
    }

    .elementor .er-footer > .e-con > .e-con,
    .elementor .er-footer > .e-con > .e-con:first-child {
        flex: 1 1 calc(50% - 16px) !important;
        max-width: calc(50% - 16px);
    }
}

@media (max-width: 767px) {
    .elementor .er-footer > .e-con,
    .elementor .er-footer > .e-flexbox-base {
        flex-direction: column !important;
        gap: 28px;
        padding: 40px 16px 32px;
    }

    .elementor .er-footer > .e-con > .e-con,
    .elementor .er-footer > .e-con > .e-con:first-child {
        flex: 1 1 auto !important;
        max-width: 100%;
        width: 100% !important;
    }
}

/* =====================================================
   PAGE HERO / BREADCRUMB  (service + inner pages)
   Parent: .er-pagehero   (section with Heading + HFE Breadcrumbs)
===================================================== */

.elementor .er-pagehero,
.elementor .er-pagehero.e-con,
.elementor .er-pagehero.e-flexbox-base {
    position: relative;
    isolation: isolate;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 26px 80px !important;
    box-sizing: border-box;
    overflow: hidden;
    background:
        linear-gradient(105deg, rgba(47, 128, 255, 0.42) 0%, rgba(47, 128, 255, 0.08) 38%, transparent 62%),
        linear-gradient(135deg, #071428 0%, #0a1a33 48%, #030101 100%) !important;
    background-color: #071428 !important;
}

.elementor .er-pagehero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #2f80ff;
    z-index: 1;
}

.elementor .er-pagehero::after {
    content: "";
    position: absolute;
    right: 32px;
    top: 50%;
    width: 140px;
    height: 100px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.1;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M18 72 L100 18 L182 72'/%3E%3Cpath d='M38 68 V122 H162 V68'/%3E%3Cpath d='M86 122 V86 H114 V122'/%3E%3C/svg%3E");
}

.elementor .er-pagehero > .elementor-element {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1140px;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 8px;
}

.elementor .er-pagehero > .elementor-widget-heading {
    margin-bottom: 6px !important;
}

.elementor .er-pagehero .elementor-heading-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.6px !important;
}

.elementor .er-pagehero .elementor-widget-hfe-breadcrumbs-widget,
.elementor .er-pagehero .hfe-breadcrumbs {
    width: 100%;
}

.elementor .er-pagehero ul.hfe-breadcrumbs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.elementor .er-pagehero ul.hfe-breadcrumbs li {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
}

.elementor .er-pagehero .hfe-breadcrumbs-home-icon,
.elementor .er-pagehero .hfe-breadcrumbs-home-icon i,
.elementor .er-pagehero .hfe-breadcrumbs-home-icon svg {
    color: #7eb3ff !important;
    fill: #7eb3ff !important;
    font-size: 14px !important;
}

.elementor .er-pagehero .hfe-breadcrumbs-text,
.elementor .er-pagehero .hfe-breadcrumbs a,
.elementor .er-pagehero .hfe-breadcrumbs a .hfe-breadcrumbs-text {
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.elementor .er-pagehero .hfe-breadcrumbs a:hover,
.elementor .er-pagehero .hfe-breadcrumbs a:hover .hfe-breadcrumbs-text {
    color: #ffffff !important;
}

.elementor .er-pagehero .hfe-breadcrumbs-separator,
.elementor .er-pagehero .hfe-breadcrumbs-separator-text {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 14px !important;
}

.elementor .er-pagehero .hfe-breadcrumbs-last .hfe-breadcrumbs-text {
    color: #ffffff !important;
    font-weight: 600 !important;
}

@media (max-width: 1024px) {
    .elementor .er-pagehero,
    .elementor .er-pagehero.e-con,
    .elementor .er-pagehero.e-flexbox-base {
        padding: 24px 40px !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-pagehero,
    .elementor .er-pagehero.e-con,
    .elementor .er-pagehero.e-flexbox-base {
        padding: 20px 20px 20px 24px !important;
    }

    .elementor .er-pagehero .elementor-heading-title {
        font-size: 26px !important;
    }
}

/* =========================================
   EXPRESS ROOFING
   CONTACT FORM
   ========================================= */

   .er-contact-form {
    width: 100%;
    padding: 70px 20px;
    background: #f5f8fc;
    box-sizing: border-box;
}

.er-contact-form *,
.er-contact-form *::before,
.er-contact-form *::after {
    box-sizing: border-box;
}


/* =========================================
   MAIN WRAPPER
   ========================================= */

.er-form-wrapper {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 38% 62%;

    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;

    box-shadow: 0 20px 60px rgba(7, 12, 14, 0.10);
}


/* =========================================
   LEFT CONTACT PANEL
   ========================================= */

.er-form-info {
    position: relative;
    padding: 55px 42px;

    background: #07172f;
    color: #ffffff;

    overflow: hidden;
}


/* DECORATIVE BLUE SHAPES */

.er-form-info::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -115px;
    top: -110px;

    background: #2f80ff;

    transform: rotate(45deg);

    opacity: 0.95;
}

.er-form-info::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: -125px;
    bottom: -120px;

    border: 35px solid #2f80ff;

    transform: rotate(45deg);

    opacity: 0.15;
}


/* CONTENT ABOVE DECORATION */

.er-form-info > * {
    position: relative;
    z-index: 2;
}


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

.er-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #69a7ff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 24px;
}

.er-form-eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    background: #2f80ff;
}


/* =========================================
   LEFT HEADING
   ========================================= */

.er-form-info h2 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: 40px;
    line-height: 1.12;

    font-weight: 700;
}

.er-form-info h2 span {
    color: #2f80ff;
}


/* =========================================
   LEFT INTRO
   ========================================= */

.er-form-intro {
    margin: 0 0 32px;

    color: #c7d3e4;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   CONTACT DETAILS
   ========================================= */

.er-contact-detail {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px;
    width: 100%;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    text-align: left !important;
}

.er-contact-detail:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.er-contact-detail > p,
.er-contact-detail-text > p,
.er-contact-detail p {
    display: contents;
}

.er-contact-detail p:empty {
    display: none !important;
}

.er-contact-detail-icon {
    flex: 0 0 44px !important;
    align-self: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50%;
    background: rgba(47, 128, 255, 0.14);
    border: 1px solid rgba(47, 128, 255, 0.45);
    color: #2f80ff;
    font-size: 15px;
    line-height: 1;
    text-align: center;
}

.er-contact-detail-icon i,
.er-contact-detail-icon svg {
    display: block;
    width: 15px;
    height: 15px;
    font-size: 15px;
    line-height: 1;
    color: #2f80ff;
    fill: #2f80ff;
}

.er-contact-detail-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.er-contact-detail-text span {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    color: #8fa5bf;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: left !important;
}

.er-contact-detail-text a,
.er-contact-detail-text strong {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    text-align: left !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}


/* HOVER */

.er-contact-detail-text a:hover {
    color: #69a7ff;
}


/* =========================================
   SOCIAL MEDIA
   ========================================= */

.er-social-area {
    margin-top: 28px;
}

.er-social-title {

    display: block;

    margin: 0 0 13px;

    color: #8fa5bf;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}

.er-social-icons {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 9px;
}

.er-social-icons a {

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(255,255,255,0.07);

    border: 1px solid rgba(255,255,255,0.14);

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.er-social-icons a:hover {

    background: #2f80ff;

    border-color: #2f80ff;

    color: #ffffff;

    transform: translateY(-3px);
}


/* =========================================
   LEFT CTA
   ========================================= */

.er-form-contact {

    margin-top: 30px;

    padding: 17px 18px;

    background: rgba(255,255,255,0.045);

    border-left: 3px solid #2f80ff;

    border-radius: 0 7px 7px 0;
}

.er-form-contact span {

    display: block;

    margin: 0 0 5px;

    color: #8fa5bf;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;
}

.er-form-contact strong {

    display: block;

    margin: 0;

    color: #ffffff;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================
   RIGHT FORM
   ========================================= */

.er-form-content {

    padding: 50px 52px;

    background: #ffffff;
}


/* =========================================
   FORM HEADING
   ========================================= */

.er-form-heading {
    margin: 0 0 30px;
}

.er-form-heading > span {

    display: block;

    margin: 0 0 8px;

    color: #2f80ff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.er-form-heading h3 {

    margin: 0 0 7px;

    color: #07172f;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 700;
}

.er-form-heading p {

    margin: 0;

    color: #728096;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================
   FIELD GRID
   ========================================= */

.er-field-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.er-field-full {
    grid-column: 1 / -1;
}


/* =========================================
   LABEL
   ========================================= */

.er-field label {

    display: block;

    margin: 0 0 8px;

    color: #07172f;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================
   INPUTS
   ========================================= */

.er-field input[type="text"],
.er-field input[type="email"],
.er-field input[type="tel"],
.er-field select,
.er-field textarea {

    width: 100%;

    border: 1px solid #dbe3ed;

    background: #f8fafc;

    border-radius: 9px;

    padding: 14px 16px;

    color: #07172f;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* SELECT */

.er-field select {

    height: 50px;

    cursor: pointer;
}


/* TEXTAREA */

.er-field textarea {

    min-height: 135px;

    resize: vertical;
}


/* PLACEHOLDER */

.er-field input::placeholder,
.er-field textarea::placeholder {

    color: #9aa7b8;
}


/* FOCUS */

.er-field input:focus,
.er-field select:focus,
.er-field textarea:focus {

    border-color: #2f80ff;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(47,128,255,0.10);
}


/* =========================================
   SUBMIT ROW
   ========================================= */

.er-submit-row {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.er-submit-row > p {
    margin: 0;
    padding: 0;
}

.er-submit-row > p:has(input[type="submit"]) {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    margin: 0;
    padding: 0 0 0 22px;
    background: transparent;
    overflow: visible;
}

.er-submit-row > p:has(input[type="submit"])::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    background: #2f80ff;
    border-radius: 5px;
    transform: skewX(-22deg);
    pointer-events: none;
    transition: background-color 0.3s ease;
}

.er-submit-row > p:has(input[type="submit"]:hover)::before {
    background: #0a0a0a;
}


/* SUBMIT NOTE */

.er-submit-note {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #78869a;

    font-size: 12px;

    line-height: 1.4;
}

.er-check {

    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    display: inline-flex;

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

    border-radius: 50%;

    background: #eaf2ff;

    color: #2f80ff;

    font-weight: 700;
}


/* =========================================
   SUBMIT BUTTON
   ========================================= */

.er-submit-row input[type="submit"],
.er-submit-row .wpcf7-submit {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 52px;
    margin: 0;
    padding: 0 30px 0 28px;
    border: 0;
    border-radius: 10px;
    background: #0a0a0a;
    color: #ffffff;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transform: skewX(-22deg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.er-submit-row > input[type="submit"] {
    margin-left: 22px;
}

.er-submit-row input[type="submit"]:hover,
.er-submit-row .wpcf7-submit:hover {
    background: #2f80ff;
    color: #ffffff;
    transform: skewX(-22deg);
    box-shadow: 0 10px 24px rgba(47, 128, 255, 0.35);
}

.er-submit-row > input[type="submit"]:hover {
    box-shadow: 0 10px 24px rgba(47, 128, 255, 0.35);
}


/* =========================================
   CF7 VALIDATION
   ========================================= */

.er-contact-form .wpcf7-not-valid {

    border-color: #e5484d !important;
}

.er-contact-form .wpcf7-not-valid-tip {

    margin-top: 5px;

    font-size: 11px;

    color: #e5484d;
}

.er-contact-form .wpcf7-response-output {

    margin: 20px 0 0 !important;

    padding: 12px 15px !important;

    border-radius: 7px;

    font-size: 13px;
}


/* =========================================
   CF7 AUTO PARAGRAPH RESET
   ========================================= */

.er-contact-form p {

    margin-top: 0;
}

.er-contact-form .wpcf7-form > p {

    margin-bottom: 0;
}


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

@media (max-width: 1000px) {

    .er-form-wrapper {

        grid-template-columns: 1fr;
    }

    .er-form-info {

        padding: 45px 40px;
    }

    .er-form-content {

        padding: 45px 40px;
    }
}


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

@media (max-width: 700px) {

    .er-contact-form {

        padding: 45px 15px;
    }

    .er-form-info {

        padding: 40px 28px;
    }

    .er-form-content {

        padding: 40px 28px;
    }

    .er-form-info h2 {

        font-size: 34px;
    }

    .er-field-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .er-field-full {

        grid-column: auto;
    }

    .er-submit-row {

        align-items: flex-start;

        flex-direction: column;
    }

    .er-submit-row input[type="submit"],
    .er-submit-row .wpcf7-submit {
        width: 100%;
    }
}


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

@media (max-width: 480px) {

    .er-contact-form {

        padding: 30px 10px;
    }

    .er-form-wrapper {

        border-radius: 12px;
    }

    .er-form-info {

        padding: 35px 22px;
    }

    .er-form-content {

        padding: 32px 20px;
    }

    .er-form-info h2 {

        font-size: 29px;

        line-height: 1.15;
    }

    .er-form-intro {

        font-size: 14px;

        line-height: 1.65;
    }


    /* CONTACT ROW MOBILE */

    .er-contact-detail {

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        gap: 12px;

        padding: 15px 0;

        text-align: left !important;
    }


    .er-contact-detail-icon {

        flex: 0 0 38px !important;

        width: 38px !important;

        height: 38px !important;

        min-width: 38px;
    }


    .er-contact-detail-text {

        flex: 1;

        width: auto;

        text-align: left !important;
    }


    .er-contact-detail-text span {

        font-size: 9px;

        margin-bottom: 4px !important;

        text-align: left !important;
    }


    .er-contact-detail-text a,
    .er-contact-detail-text strong {

        font-size: 13px;

        text-align: left !important;
    }


    .er-contact-detail-text p {
        display: contents;
    }


    /* FORM */

    .er-form-heading {

        margin-bottom: 25px;
    }

    .er-form-heading h3 {

        font-size: 26px;
    }

    .er-form-heading p {

        font-size: 13px;
    }

    .er-field input[type="text"],
    .er-field input[type="email"],
    .er-field input[type="tel"],
    .er-field select,
    .er-field textarea {

        font-size: 14px;
    }

    .er-field textarea {

        min-height: 120px;
    }


    /* SUBMIT */

    .er-submit-note {

        font-size: 11px;
    }

    .er-submit-row input[type="submit"],
    .er-submit-row .wpcf7-submit {
        width: 100%;
        padding: 0 22px;
    }


    /* SOCIAL */

    .er-social-icons a {

        width: 36px;

        height: 36px;
    }
}
/* =========================================================
   HERO QUOTE FORM  — .er-quote-form
   ========================================================= */

.er-quote-form {
    width: 100%;
    max-width: 520px;
    margin: 0;
    padding: 36px 32px 28px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
    box-sizing: border-box;
}

.er-quote-form *,
.er-quote-form *::before,
.er-quote-form *::after {
    box-sizing: border-box;
}

.er-quote-form > p,
.er-quote-form .er-form-grid > p {
    display: contents;
}

.er-quote-form .er-form-field > p {
    position: static;
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.er-quote-form .er-form-field > p:not(:has(.wpcf7-form-control-wrap)) {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 44px;
    height: 100%;
    pointer-events: none;
}

.er-quote-form .er-form-field br {
    display: none !important;
}

.er-quote-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    row-gap: 8px;
    text-align: center;
    margin: 0 0 26px;
}

.er-quote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    color: #2f80ff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f80ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 L12 4 l9 7.5'/%3E%3Cpath d='M5.5 10.5 V20 h13 V10.5'/%3E%3Cpath d='M10 20 V14.5 h4 V20'/%3E%3C/svg%3E");
}

.er-quote-icon i,
.er-quote-icon svg {
    display: none;
}

.er-quote-header h2 {
    margin: 0;
    color: #0b1220;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.4px;
}

.er-quote-header p {
    flex: 1 0 100%;
    width: 100%;
    margin: 0;
    color: #6b7280;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.er-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 12px;
}

.er-form-field {
    position: relative;
    width: 100%;
    min-width: 0;
}

.er-form-field i {
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 3;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.er-quote-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.er-form-field input,
.er-form-field select,
.er-form-field textarea,
.er-quote-form .wpcf7-form-control {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 16px 0 44px !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 10px !important;
    background: #f7f9fc !important;
    color: #0b1220 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    outline: none !important;
    box-shadow: none !important;
}

.er-form-field input,
.er-form-field select,
.er-quote-form input.wpcf7-text,
.er-quote-form input.wpcf7-email,
.er-quote-form input.wpcf7-tel,
.er-quote-form select.wpcf7-select {
    height: 50px !important;
}

.er-form-field input::placeholder,
.er-form-field textarea::placeholder {
    color: #9aa3b2;
    opacity: 1;
}

.er-form-field input:focus,
.er-form-field select:focus,
.er-form-field textarea:focus {
    border-color: #2f80ff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.12) !important;
}

.er-form-field select,
.er-select-field select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-color: #f7f9fc !important;
    color: #9aa3b2 !important;
}

.er-message-field {
    grid-column: 1 / -1;
}

.er-message-field i {
    top: 18px;
    transform: none;
}

.er-form-field textarea,
.er-quote-form textarea.wpcf7-textarea {
    height: 110px !important;
    min-height: 110px !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
    line-height: 1.5;
    resize: vertical;
}

.er-submit-wrap {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.er-submit-wrap > p {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: auto;
    margin: 0 !important;
    padding: 0 0 0 22px !important;
    background: transparent;
    overflow: visible;
}

.er-submit-wrap > p:has(input[type="submit"])::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    background: #2f80ff;
    border-radius: 5px;
    transform: skewX(-22deg);
    pointer-events: none;
    transition: background-color 0.3s ease;
}

.er-submit-wrap > p:has(input[type="submit"]:hover)::before {
    background: #0a0a0a;
}

.er-submit-wrap input[type="submit"],
.er-submit-wrap .wpcf7-submit {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 0 30px 0 28px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-transform: none;
    transform: skewX(-22deg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.er-submit-wrap input[type="submit"]:hover,
.er-submit-wrap .wpcf7-submit:hover {
    background: #2f80ff !important;
    color: #ffffff !important;
    transform: skewX(-22deg);
    box-shadow: 0 10px 24px rgba(47, 128, 255, 0.35);
}

.er-form-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eef1f6;
}

.er-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    color: #334155;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.er-trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #2f80ff;
    font-size: 16px;
}

.er-trust-icon i,
.er-trust-icon svg {
    color: #2f80ff;
    fill: #2f80ff;
}

.er-trust-divider {
    flex: 0 0 1px;
    width: 1px;
    height: 22px;
    margin: 0;
    background: #e2e8f0;
}

.er-quote-form .wpcf7-not-valid {
    border-color: #e5484d !important;
}

.er-quote-form .wpcf7-not-valid-tip {
    margin-top: 5px;
    font-size: 11px;
    color: #e5484d;
}

.er-quote-form .wpcf7-response-output {
    margin: 14px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px;
    font-size: 13px;
}

@media (max-width: 767px) {
    .er-quote-form {
        max-width: 100%;
        padding: 28px 18px 22px;
        border-radius: 16px;
    }

    .er-quote-header h2 {
        font-size: 24px;
    }

    .er-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .er-message-field {
        grid-column: auto;
    }

    .er-form-trust {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 10px;
    }

    .er-trust-divider {
        display: none;
    }

    .er-trust-item {
        flex: 0 1 auto;
    }

    .er-quote-form .er-submit-wrap {
        justify-content: center;
        width: 100%;
        padding: 0 14px 0 20px;
        box-sizing: border-box;
    }

    .er-quote-form .er-submit-wrap > p,
    .er-quote-form .er-submit-wrap > p:has(input[type="submit"]) {
        max-width: 100%;
        padding-left: 26px !important;
    }

    .er-quote-form .er-submit-wrap > p:has(input[type="submit"])::before {
        left: 8px;
    }

    .er-quote-form .er-submit-wrap input[type="submit"],
    .er-quote-form .er-submit-wrap .wpcf7-submit {
        max-width: 100%;
    }
}

/* =====================================================
   LOCATION HERO SPLIT
   Outer bg:       .er-hero-split
   Inner row:      .er-hero-left  (contains left copy + .er-hero-right)
   Form column:    .er-hero-right
   3-box parent:   .er-hero-features
   Each icon box:  .er-hero-feature
   Do not change .er-iconbox / .er-iconbox-grid
===================================================== */

.elementor .er-hero-split,
.elementor .er-hero-split.e-con,
.elementor .er-hero-split.e-flexbox-base {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    box-sizing: border-box;
}

.elementor .er-hero-split > .er-hero-left,
.elementor .er-hero-left:has(> .er-hero-right),
.elementor .er-hero-split:has(> .er-hero-left):has(> .er-hero-right) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 40px !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    box-sizing: border-box;
}

.elementor .er-hero-left:has(> .er-hero-right) > .e-con:not(.er-hero-right),
.elementor .er-hero-left:has(> .er-hero-right) > .e-flexbox-base:not(.er-hero-right),
.elementor .er-hero-split > .er-hero-left:not(:has(> .er-hero-right)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
}

.elementor .er-hero-right,
.elementor .er-hero-right.e-con,
.elementor .er-hero-right.e-flexbox-base {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 480px !important;
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    align-self: flex-start !important;
}

@media (min-width: 1025px) {
    .elementor .er-hero-right,
    .elementor .er-hero-right.e-con,
    .elementor .er-hero-right.e-flexbox-base {
        flex: 0 0 480px !important;
        width: 480px !important;
    }
}

.elementor .er-hero-features,
.elementor .er-hero-features.e-con,
.elementor .er-hero-features.e-flexbox-base,
.elementor .er-hero-features.er-iconbox-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.elementor .er-hero-features > .er-hero-feature,
.elementor .er-hero-features > .er-iconbox,
.elementor .er-hero-features.er-iconbox-grid > .er-iconbox,
.elementor .er-hero-features .er-hero-feature {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 22px 16px 18px !important;
    background: #f4f7fb !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.elementor .er-hero-features > .er-hero-feature:hover,
.elementor .er-hero-features > .er-iconbox:hover,
.elementor .er-hero-features.er-iconbox-grid > .er-iconbox:hover {
    transform: none !important;
    box-shadow: none !important;
}

.elementor .er-hero-features .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100%;
    height: 100%;
    gap: 10px !important;
}

.elementor .er-hero-features .elementor-icon-box-icon {
    margin: 0 !important;
}

.elementor .er-hero-features .elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    background: #e8f2ff !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

.elementor .er-hero-features .elementor-icon i,
.elementor .er-hero-features .elementor-icon svg {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    color: #2f80ff !important;
    fill: #2f80ff !important;
}

.elementor .er-hero-features .elementor-icon-box-title,
.elementor .er-hero-features .elementor-icon-box-title a {
    margin: 0 0 6px !important;
    color: #0b1220 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.elementor .er-hero-features .elementor-icon-box-description {
    margin: 0 !important;
    color: #64748b !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

@media (max-width: 1024px) {
    .elementor .er-hero-split,
    .elementor .er-hero-split.e-con,
    .elementor .er-hero-split.e-flexbox-base {
        --flex-direction: column;
        overflow-x: hidden !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .elementor .er-hero-split > .er-hero-left,
    .elementor .er-hero-left:has(> .er-hero-right),
    .elementor .er-hero-split:has(> .er-hero-left):has(> .er-hero-right),
    .elementor .er-hero-left.e-con:has(> .er-hero-right),
    .elementor .er-hero-left.e-flexbox-base:has(> .er-hero-right) {
        --flex-direction: column;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .elementor .er-hero-left:has(> .er-hero-right) > .e-con:not(.er-hero-right),
    .elementor .er-hero-left:has(> .er-hero-right) > .e-flexbox-base:not(.er-hero-right),
    .elementor .er-hero-split > .er-hero-left:not(:has(> .er-hero-right)) {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .elementor .er-hero-right,
    .elementor .er-hero-right.e-con,
    .elementor .er-hero-right.e-flexbox-base {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .elementor .er-hero-features,
    .elementor .er-hero-features.e-con,
    .elementor .er-hero-features.e-flexbox-base,
    .elementor .er-hero-features.er-iconbox-grid {
        --flex-direction: column;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
    }

    .elementor .er-hero-features > .er-hero-feature,
    .elementor .er-hero-features > .er-iconbox,
    .elementor .er-hero-features.er-iconbox-grid > .er-iconbox,
    .elementor .er-hero-features .er-hero-feature {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .elementor .er-hero-split .er-eyebrow .elementor-heading-title,
    .elementor .er-hero-left .er-eyebrow .elementor-heading-title {
        max-width: 100%;
        font-size: 12px;
        letter-spacing: 1.4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .elementor .er-hero-split .er-title .elementor-heading-title,
    .elementor .er-hero-left .er-title .elementor-heading-title,
    .elementor .er-hero-split .elementor-heading-title,
    .elementor .er-hero-left .elementor-widget-text-editor,
    .elementor .er-hero-left .elementor-widget-text-editor p {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .elementor .er-hero-split .er-title .elementor-heading-title,
    .elementor .er-hero-left .er-title .elementor-heading-title {
        font-size: 28px;
        letter-spacing: -0.4px;
        line-height: 1.2;
    }
}