/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1786730532
Updated: 2026-08-14 18:02:12

*/

/* Header */
.header .contact-btn-resp {
    display: none !important;
}
.header {
    position: sticky;
    top: 0;
    z-index: 99999;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.header.header-hidden {
    transform: translateY(-101%);
}
.header.header-visible {
    transform: translateY(0);
}

/* header menu */
/* =========================================================
   BUILTDRY MEGA MENU
========================================================= */

:root {
    --bd-navy: #002251;
    --bd-dark: #06232d;
    --bd-teal: #0d969a;
    --bd-teal-hover: #07868e;
    --bd-light: #f2f8f8;
    --bd-light-hover: #edf7f7;
    --bd-title: #082632;
    --bd-copy: #6e8188;
    --bd-border: #dde7e8;
}


/* =========================================================
   HEADER OVERFLOW
========================================================= */

.header,
.header > .e-con,
.header .elementor-widget-nav-menu,
.header .elementor-widget-container,
.header .elementor-nav-menu--main {
    overflow: visible !important;
}


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

@media (min-width: 1025px) {


    /* =====================================================
       HIDE ELEMENTOR DEFAULT SERVICES SUBMENU
    ===================================================== */

    .elementor-nav-menu--main
    .bd-services-trigger
    > .sub-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /* =====================================================
       SERVICES NAV STATE
    ===================================================== */

    .bd-services-trigger > .elementor-item {
        position: relative;
    }


    .bd-services-trigger.mega-active > .elementor-item {
        color: var(--bd-teal) !important;
    }


    /* =====================================================
       MEGA MENU OUTER
    ===================================================== */

    .bd-mega-menu {
        position: absolute;

        top: calc(100% + 12px);
        left: 50%;

        width: min(1180px, calc(100vw - 60px));

        z-index: 9999999;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform:
            translateX(-50%)
            translateY(16px)
            scale(.985);

        transform-origin: top center;

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .4s cubic-bezier(.2, .75, .2, 1);
    }


    /* Hover bridge */

    .bd-mega-menu::before {
        content: "";

        position: absolute;

        top: -24px;
        left: 0;

        width: 100%;
        height: 30px;

        background: transparent;
    }


    /* Open state */

    .bd-mega-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }


    /* =====================================================
       MAIN WHITE CARD
    ===================================================== */

    .bd-mega-inner {
        position: relative;

        display: grid;

        grid-template-columns:
            minmax(250px, .86fr)
            minmax(390px, 1.34fr)
            minmax(315px, 1fr);

        gap: 20px;

        padding: 18px;

        background: #ffffff;

        border: 1px solid rgba(0, 34, 81, .08);
        border-radius: 25px;

        box-shadow:
            0 35px 80px rgba(0, 28, 43, .16),
            0 8px 25px rgba(0, 28, 43, .08);

        overflow: hidden;
    }


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

    .bd-mega-intro {
        position: relative;

        min-height: 390px;

        padding: 31px 28px 28px;

        display: flex;
        flex-direction: column;

        overflow: hidden;

        background:
            linear-gradient(
                145deg,
                #f3f9f9 0%,
                #edf6f6 100%
            );

        border-radius: 18px;
    }


    .bd-mega-label {
        position: relative;
        z-index: 2;

        display: block;

        margin-bottom: 19px;

        color: var(--bd-teal);

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

        font-weight: 700;

        letter-spacing: .13em;

        text-transform: uppercase;
    }


    .bd-mega-intro h3 {
        position: relative;
        z-index: 2;

        margin: 0 0 18px !important;

        color: var(--bd-title) !important;

        font-size: clamp(28px, 2vw, 34px) !important;
        line-height: 1.04 !important;

        letter-spacing: -.045em !important;

        font-weight: 700 !important;
    }


    .bd-mega-intro h3 span {
        display: block;

        color: var(--bd-teal);
    }


    .bd-mega-intro p {
        position: relative;
        z-index: 2;

        max-width: 250px;

        margin: 0 0 28px !important;

        color: var(--bd-copy);

        font-size: 13px;
        line-height: 1.65;
    }


    /* =====================================================
       EXPLORE BUTTON
       SAME HOVER STYLE AS WEBSITE .btn
    ===================================================== */

    .bd-mega-view {
        position: relative;
        z-index: 3;

        width: fit-content;

        margin-top: auto;

        padding: 15px 20px;

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

        gap: 15px;

        overflow: hidden;
        isolation: isolate;

        background: var(--bd-teal);

        color: #ffffff !important;

        border-radius: 4px;

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

        font-weight: 600;

        text-decoration: none !important;
    }


    .bd-mega-view::before,
    .bd-mega-view::after {
        content: "";

        position: absolute;

        width: 70%;
        height: 160%;

        background: #002251;

        z-index: 0;

        transition:
            transform .45s cubic-bezier(.65, 0, .2, 1);

        backface-visibility: hidden;
        will-change: transform;

        pointer-events: none;
    }


    /* Left hover shape */

    .bd-mega-view::before {
        top: -30%;
        left: -20%;

        transform:
            translateX(-110%)
            skewX(-15deg);
    }


    /* Right hover shape */

    .bd-mega-view::after {
        right: -20%;
        bottom: -30%;

        transform:
            translateX(110%)
            skewX(-15deg);
    }


    .bd-mega-view:hover::before {
        transform:
            translateX(3px)
            skewX(-15deg);
    }


    .bd-mega-view:hover::after {
        transform:
            translateX(-3px)
            skewX(-15deg);
    }


    .bd-mega-view:hover {
        color: #ffffff !important;
    }


    .bd-mega-view-text,
    .bd-mega-view-arrow {
        position: relative;
        z-index: 2;

        color: #ffffff !important;
    }


    .bd-mega-view-arrow {
        display: inline-block;

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

        transition:
            transform .35s cubic-bezier(.65, 0, .2, 1);
    }


    .bd-mega-view:hover .bd-mega-view-arrow {
        transform: translate(4px, -4px);
    }


    /* =====================================================
       LEFT DECORATION
    ===================================================== */

    .bd-mega-decoration {
        position: absolute;

        right: -67px;
        bottom: -72px;

        width: 155px;
        height: 155px;

        border:
            20px solid
            rgba(13, 150, 154, .08);

        border-radius:
            60% 44% 65% 41%
            /
            45% 62% 42% 60%;

        transform: rotate(27deg);

        pointer-events: none;
    }


    /* =====================================================
       SERVICES COLUMN
    ===================================================== */

    .bd-mega-services {
        min-width: 0;

        display: flex;
        flex-direction: column;

        justify-content: center;
    }


    /* =====================================================
       SERVICE ROW
    ===================================================== */

    .bd-mega-service {
        position: relative;

        flex: 1;

        min-height: 115px;

        padding: 18px 15px;

        display: flex;
        align-items: center;

        gap: 17px;

        border-bottom:
            1px solid
            var(--bd-border);

        background: transparent;

        color: var(--bd-title) !important;

        text-decoration: none !important;

        transition:
            background .32s ease,
            padding-left .32s ease,
            border-radius .32s ease;
    }


    .bd-mega-service:last-child {
        border-bottom: 0;
    }


    .bd-mega-service:hover,
    .bd-mega-service.is-active {
        padding-left: 21px;

        background: var(--bd-light-hover);

        border-radius: 14px;
    }


    /* =====================================================
       SERVICE NUMBER
    ===================================================== */

    .bd-mega-number {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;

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

        border-radius: 9px;

        background: #e8f5f5;

        color: var(--bd-teal);

        font-size: 10px;

        font-weight: 700;

        letter-spacing: .04em;

        transition:
            background .3s ease,
            color .3s ease,
            transform .3s ease;
    }


    .bd-mega-service:hover .bd-mega-number,
    .bd-mega-service.is-active .bd-mega-number {
        background: var(--bd-teal);

        color: #ffffff;

        transform: translateY(-1px);
    }


    /* =====================================================
       SERVICE TEXT
    ===================================================== */

    .bd-mega-service-content {
        min-width: 0;

        flex: 1;

        display: flex;
        flex-direction: column;

        gap: 5px;
    }


    .bd-mega-service-title {
        display: block;

        color: var(--bd-title);

        font-size: 15px;
        line-height: 1.35;

        font-weight: 650;
    }


    .bd-mega-service-description {
        display: block;

        max-width: 315px;

        color: var(--bd-copy);

        font-size: 11px;
        line-height: 1.55;

        font-weight: 400;
    }


    /* =====================================================
       SERVICE ARROW
    ===================================================== */

    .bd-mega-arrow {
        width: 39px;
        height: 39px;

        flex: 0 0 39px;

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

        border-radius: 50%;

        background: #e8f5f5;

        color: var(--bd-teal);

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

        transition:
            background .32s ease,
            color .32s ease,
            transform .35s cubic-bezier(.2, .8, .2, 1);
    }


    .bd-mega-service:hover .bd-mega-arrow,
    .bd-mega-service.is-active .bd-mega-arrow {
        background: var(--bd-teal);

        color: #ffffff;

        transform: translate(3px, -3px);
    }


    /* =====================================================
       RIGHT FEATURE CARD
    ===================================================== */

    .bd-mega-feature {
        min-width: 0;
        min-height: 390px;

        display: flex;
        flex-direction: column;

        gap: 0;

        overflow: hidden;

        background: var(--bd-dark);

        border-radius: 18px;
    }


    /* =====================================================
       DYNAMIC SERVICE IMAGE
    ===================================================== */

    .bd-mega-image {
        position: relative;

        flex: 1;

        min-height: 285px;

        overflow: hidden;

        background: var(--bd-dark);

        line-height: 0;

        font-size: 0;
    }


    .bd-mega-dynamic-image {
        position: absolute;

        top: -18px;
        right: -18px;
        bottom: -18px;
        left: -18px;

        width: calc(100% + 36px) !important;
        height: calc(100% + 36px) !important;

        max-width: none !important;

        display: block;

        object-fit: cover;

        /* Requested image position */
        object-position: center right;

        opacity: 1;

        transform: scale(1.035);

        transition:
            opacity .18s ease,
            transform .5s cubic-bezier(.2, .8, .2, 1);
    }


    .bd-mega-dynamic-image.is-changing {
        opacity: 0;

        transform: scale(1.09);
    }


    .bd-mega-feature:hover
    .bd-mega-dynamic-image:not(.is-changing) {
        transform: scale(1.07);
    }


    /* =====================================================
       FEATURE BOTTOM
    ===================================================== */

    .bd-mega-feature-bottom {
        position: relative;
        z-index: 3;

        min-height: 92px;

        margin: 0;

        padding: 17px 17px 17px 20px;

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

        gap: 14px;

        background: var(--bd-dark);
    }


    .bd-mega-feature-copy {
        min-width: 0;

        display: flex;
        flex-direction: column;

        gap: 4px;
    }


    .bd-mega-feature-copy strong {
        color: #ffffff;

        font-size: 14px;
        line-height: 1.3;

        font-weight: 700;
    }


    .bd-mega-feature-copy span {
        color: rgba(255, 255, 255, .65);

        font-size: 10px;
        line-height: 1.4;
    }


    /* =====================================================
       RIGHT CTA
       SAME TWO-SIDED BUTTON HOVER
    ===================================================== */

    .bd-mega-cta {
        position: relative;

        width: 49px;
        height: 49px;

        flex: 0 0 49px;

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

        overflow: hidden;
        isolation: isolate;

        border-radius: 8px;

        background: var(--bd-teal);

        color: #ffffff !important;

        text-decoration: none !important;
    }


    .bd-mega-cta::before,
    .bd-mega-cta::after {
        content: "";

        position: absolute;

        width: 70%;
        height: 160%;

        background: #002251;

        z-index: 0;

        transition:
            transform .45s cubic-bezier(.65, 0, .2, 1);

        backface-visibility: hidden;
        will-change: transform;

        pointer-events: none;
    }


    .bd-mega-cta::before {
        top: -30%;
        left: -20%;

        transform:
            translateX(-110%)
            skewX(-15deg);
    }


    .bd-mega-cta::after {
        right: -20%;
        bottom: -30%;

        transform:
            translateX(110%)
            skewX(-15deg);
    }


    .bd-mega-cta:hover::before {
        transform:
            translateX(3px)
            skewX(-15deg);
    }


    .bd-mega-cta:hover::after {
        transform:
            translateX(-3px)
            skewX(-15deg);
    }


    .bd-mega-cta span {
        position: relative;
        z-index: 2;

        color: #ffffff !important;

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

        transition:
            transform .35s cubic-bezier(.65, 0, .2, 1);
    }


    .bd-mega-cta:hover span {
        transform: translate(3px, -3px);
    }

}


/* =========================================================
   TABLET & MOBILE

   Custom desktop mega menu is disabled.
   Elementor's original mobile submenu remains active.
========================================================= */

@media (max-width: 1024px) {

    .bd-mega-menu {
        display: none !important;
    }

}

/* footer */
.footer-menu .menu-item a {
	position: relative;
	display: inline-block;
}
.footer-menu .menu-item a:before {
	content: "";
	background: transparent !important;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0 !important;
	opacity: 1 !important;
	transition: .2s all ease-in-out;
}
.footer-menu .menu-item a:hover::before, .footer-menu .menu-item.current-menu-item a:before {
	width: 100%;
	background: #fff !important;
	transition: .2s all ease-in-out;
}
.footer-menu .elementor-nav-menu > .menu-item > ul {
	display: none !important;
}

/* button hover */
.btn .elementor-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn .elementor-button::before,
.btn .elementor-button::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 160%;
    background: #002251;
    z-index: 0;
    transition: transform .45s cubic-bezier(.65, 0, .2, 1);
	backface-visibility: hidden;
    will-change: transform;
}
.btn .elementor-button::before {
    top: -30%;
    left: -20%;
    transform: translateX(-110%) skewX(-15deg);
}
.btn .elementor-button::after {
    right: -20%;
    bottom: -30%;
    transform: translateX(110%) skewX(-15deg);
}
.btn .elementor-button:hover::before,
.btn .elementor-button:hover::after {
    transform: translateX(0) skewX(-15deg);
}
.btn .elementor-button:hover::before {
    transform: translateX(3px) skewX(-15deg);
}
.btn .elementor-button:hover::after {
    transform: translateX(-3px) skewX(-15deg);
}
.btn .elementor-button-content-wrapper {
    position: relative;
    z-index: 2;
    transition: transform .35s cubic-bezier(.65, 0, .2, 1);
}
.btn .elementor-button:hover {
    color: #fff !important;
}

/* why it matter card hover */
.service-why-it-matter-card {
    transition: .2s all ease-in-out;
}
.service-why-it-matter-card:hover {
    border-color: #002251 !important;
    transition: .2s all ease-in-out;
    transform: scale(1.05);
}
.service-why-it-matter-card:hover .elementor-widget-heading h6,
.service-why-it-matter-card:hover .elementor-widget-heading {
    color: #002251 !important;
    transition: .2s all ease-in-out;
}

/* home card animation */
.home-card .home-card-para {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}
.home-card .home-card-para > * {
    min-height: 0;
    overflow: hidden;
    margin: 0;
}
.home-card:hover .home-card-para {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
	transition: all 0.2s ease-in-out;
}

/* service card hover */
.service-this-is-for-card-gradient {
	position: relative;
}
.service-this-is-for-card-gradient:before,
.service-this-is-for-card-gradient:after {
	content: "" !important;
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
	inset: 0;
	transition: .2s all ease-in-out;
}
.service-this-is-for-card-gradient:before {
	background: linear-gradient(180deg, #50545A00 40%,#002251 100%) !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.service-this-is-for-card-gradient:after {
	background: linear-gradient(0deg, #FFFFFF 10%, rgba(255, 255, 255, 0) 60%);
	visibility: hidden !important;
	opacity: 0 !important;
}
.service-this-is-for-card-wrap:hover .service-this-is-for-card-gradient:before {
	visibility: hidden !important;
	opacity: 0 !important;
}
.service-this-is-for-card-wrap:hover .service-this-is-for-card-gradient:after {
	visibility: visible !important;
	opacity: 1 !important;
}

.service-this-is-for-card-wrap:after {
    content: "";
    background-color: #089194;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    transition: .2s all ease-in-out;
    transform: translate(0, 0);
    border-radius: 20px;
}
.service-this-is-for-card-wrap:hover::after {
	transition: .2s all ease-in-out;
    transform: translate(10px, 10px);
}
.service-this-is-for-card-wrap .elementor-widget-heading {
	transition: .2s all ease-in-out;
}
.service-this-is-for-card-wrap:hover .elementor-widget-heading {
	position: relative;
	z-index: 2;
}
.service-this-is-for-card-wrap:hover .elementor-widget-heading p {
	color: #002251 !important;
}
.service-this-is-for-card-wrap:hover .elementor-widget-image {
    transform: scale(1.05);
	transition: .2s all ease-in-out;
}

/* home service card hover */
.home-service-cards {
    overflow: visible !important;
}
.home-service-card {
    position: relative;
    overflow: visible !important;
    transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
	border: 2px solid #fff;
}
.home-service-card h4,
.home-service-card p {
    transition: color .3s ease;
}
.home-service-card .home-service-card-price {
    height: 0;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    margin-top: 0 !important;
    transform: translateY(8px);
    overflow: hidden;
    transition: height .35s ease, margin-top .35s ease, opacity .25s ease, transform .35s ease, visibility 0s linear .35s;
}
.home-service-card .home-service-card-price > * {
    margin: 0 !important;
    overflow: visible !important;
}
.home-service-card .home-service-card-price p {
    line-height: 1.1 !important;
    white-space: nowrap;
}
.home-service-card .home-service-card-price span {
    line-height: 1 !important;
}
.home-service-card:hover {
    background-color: #01A9AA !important;
    box-shadow: 0 18px 35px rgba(0, 0, 0, .16);
	transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
	border: 2px solid #002251;
}
.home-service-card:hover h4,
.home-service-card:hover p {
    color: #ffffff !important;
}
.home-service-card:hover .home-service-card-price {
    height: 42px;
    opacity: 1;
    visibility: visible;
    margin-top: 15px !important;
    transform: translateY(0);
    transition: height .35s ease, margin-top .35s ease, opacity .3s ease .08s, transform .35s ease, visibility 0s;
}
.home-service-card .elementor-button {
    transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.home-service-card:hover .elementor-button {
    background-color: #ffffff !important;
    color: #01A9AA !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 15px rgba(0, 0, 0, .12);
}
.home-service-card .home-service-card-img-wrap {
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.home-service-card:hover .home-service-card-img-wrap {
    background-color: #01A9AA !important;
    border-color: #002251 !important;
}
.home-service-card svg {
    transition: filter .3s ease, transform .3s ease;
}
.home-service-card:hover svg {
    filter: brightness(0) invert(1);
}

/* contact form */
.contact-form .wpcf7 {
    width: 100%;
}
.contact-form .wpcf7-form {
    width: 100%;
    margin: 0;
}
.contact-form .wpcf7-form p {
    margin: 0;
    padding: 0;
}
.contact-form .wpcf7-form label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 113.99999999999999%;
    color: #000000;
}
.contact-form .row1 br,
.contact-form .row2 br,
.contact-form .row3 br,
.contact-form .row4 br,
.contact-form .row5 br,
.contact-form .row6 br {
    display: none;
}
.contact-form .row1,
.contact-form .row2,
.contact-form .row3 {
    display: grid;
    width: 100%;
    gap: 24px;
    margin-bottom: 20px;
}
.contact-form .row1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contact-form .row2 {
    grid-template-columns: 1.5fr 1fr;
}
.contact-form .row3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-form .row4,
.contact-form .row5,
.contact-form .row6 {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}
.contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin-top: 8px;
}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
	display: block;
    width: 100%;
    max-width: 100%;
    background: #FAFCFF;
    border: 1px solid #00225180;
    border-radius: 4.42px;
    color: #111827;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form select {
	min-height: 50px;
    padding: 10px 14px;
}
.contact-form select {
    cursor: pointer;
    appearance: auto;
}
.contact-form textarea {
    height: 105px;
    min-height: 105px;
    resize: vertical;
    padding: 13px 14px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}
.contact-form select:invalid {
    color: #9ca3af;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form input[type="email"]:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    background: #ffffff;
    border-color: #06366d;
    box-shadow: 0 0 0 1px #06366d;
}
.contact-form .row6 .wpcf7-form-control-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 92px;
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #a9b9ca;
    border-radius: 2px;
    box-sizing: border-box;
}
.contact-form .row6 input[type="file"] {
    width: auto;
    max-width: 100%;
    font-size: 11px;
    color: #8b939e;
}
.contact-form .row6 input[type="file"]::file-selector-button {
    border: 0;
    background: transparent;
    color: #7b8490;
    font-size: 11px;
    cursor: pointer;
    margin-right: 10px;
}
.contact-form .row7 {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin-top: 28px;
}
.contact-form .row7 p {
    position: relative;
}
.contact-form input[type="submit"] {
    background-color: #002251 !important;
	display: block;
	margin-bottom: 5px;
}
.contact-form input[type="submit"]:hover {
    transform: translateY(-1px);
}
.contact-form .wpcf7-spinner {
	margin: auto;
	display: block;
}
.contact-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 5px;

    font-size: 11px;
    line-height: 1.3;
}
.contact-form .wpcf7-response-output {
    margin: 20px 0 0 !important;
    font-size: 12px;
}

/* 10 year warranty */
.ten-year-warranty-card-item:hover {
    background-color: #089194 !important;
    border-color: #032555 !important;
/*     transition: .2s all ease-in-out !important; */
	color: #fff !important;
}
.ten-year-warranty-card-item * {
	transition: .2s all ease-in-out !important;
}
.ten-year-warranty-card-item:hover * {
	color: #fff !important;
	transition: .2s all ease-in-out !important;
}
.ten-year-warranty-card-item-count:before {
    content: "";
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 106.25%);
    width: 80%;
    height: 80%;
    position: absolute;
    inset: 0;
    top: unset;
    margin: auto;
	transition: .2s all ease-in-out !important;
}
.ten-year-warranty-card-item:hover .ten-year-warranty-card-item-count:before {
	background: linear-gradient(180deg, rgba(8, 145, 148, 0) 0%, #089194 106.25%) !important;
	transition: .2s all ease-in-out !important;
}

/* media query */
@media (max-width: 1024px) {
    .contact-form .row1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .contact-form .row1 > p:last-child {
        grid-column: 1 / -1;
    }
	.header .elementor-nav-menu--dropdown.elementor-nav-menu__container > ul {
		margin: 20px!important;
		background-color: #fff !important;
		border-radius: 0 0 6px 6px !important;
		box-shadow: 0px 10px 25px 0px rgb(0 34 81 / 10%) !important;
	}

	html body .header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		background-color: transparent !important !important;
		border: none !important !important;
	}
	.other-her-section:before {
		background: linear-gradient(90deg, var(--e-global-color-secondary) 40%, var(--e-global-color-secondary) 70%) !important;
		opacity: .9 !important;
	}
}
@media (max-width: 767px) {
    .contact-form .row1,
    .contact-form .row2,
    .contact-form .row3 {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 18px;
    }
    .contact-form .row1 > p:last-child {
        grid-column: auto;
    }
    .contact-form .row4,
    .contact-form .row5,
    .contact-form .row6 {
        margin-bottom: 18px;
    }
    .contact-form input[type="text"],
    .contact-form input[type="tel"],
    .contact-form input[type="email"],
    .contact-form select {
        height: 46px;
    }
    .contact-form textarea {
        height: 120px;
        min-height: 120px;
    }
    .contact-form .row6 .wpcf7-form-control-wrap {
        min-height: 100px;
    }
    .contact-form .row7 {
        margin-top: 22px;
    }
}