/* ============================================================
   DENEXA CONTACT PAGE
============================================================ */

.dx-contact-hero {

    position: relative;

    overflow: hidden;

    padding: 75px 0 70px;

    background:
        linear-gradient(
            135deg,
            #f5fbff 0%,
            #ffffff 48%,
            #edfaff 100%
        );
}


.dx-contact-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.dx-contact-glow-1 {

    width: 500px;
    height: 500px;

    top: -300px;
    right: -150px;

    border: 1px solid rgba(0, 160, 255, .13);
}


.dx-contact-glow-2 {

    width: 350px;
    height: 350px;

    bottom: -270px;
    left: -150px;

    background:
        radial-gradient(
            circle,
            rgba(0, 190, 255, .10),
            transparent 70%
        );
}


/* ============================================================
   HERO TEXT
============================================================ */

.dx-contact-eyebrow {

    margin-bottom: 14px;

    color: #087cff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.dx-contact-title {

    margin: 0 auto 18px;

    max-width: 800px;

    color: #082d5b;

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 800;

    line-height: 1.03;

    letter-spacing: -2px;
}


.dx-contact-title span {

    color: #087cff;
}


.dx-contact-intro {

    max-width: 650px;

    margin: auto;

    color: #617d9b;

    font-size: 12px;

    line-height: 1.7;
}


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

.dx-contact-section {

    padding: 65px 0;

    background: #ffffff;
}


/* ============================================================
   CONTACT INFO
============================================================ */

.dx-contact-info {

    height: 100%;

    padding: 38px;

    border-radius: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #063b7d,
            #032553
        );

    box-shadow:
        0 20px 50px rgba(0, 50, 100, .12);

    position: relative;

    overflow: hidden;
}


.dx-contact-info::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -170px;
    bottom: -180px;

    border-radius: 50%;

    border: 1px solid
        rgba(0, 201, 255, .16);
}


.dx-contact-label {

    margin-bottom: 10px;

    color: #16caff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.dx-contact-info h2 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 30px;

    font-weight: 800;

    line-height: 1.1;
}


.dx-contact-info h2 span {

    display: block;

    color: #17caff;
}


.dx-contact-info-text {

    max-width: 400px;

    margin-bottom: 32px;

    color: #b7cbe0;

    font-size: 10px;

    line-height: 1.7;
}


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

.dx-contact-detail {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 22px;
}


.dx-contact-detail-icon {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid
        rgba(0, 200, 255, .30);

    border-radius: 10px;

    color: #18caff;

    background:
        rgba(0, 200, 255, .08);

    font-size: 15px;
}


.dx-contact-detail small {

    display: block;

    margin-bottom: 5px;

    color: #6f91b1;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}


.dx-contact-detail a {

    display: block;

    color: #e4eff8;

    font-size: 11px;

    line-height: 1.7;

    text-decoration: none;

    transition: .2s ease;
}


.dx-contact-detail a:hover {

    color: #19caff;
}


.dx-contact-detail p {

    margin: 0;

    color: #d6e3ef;

    font-size: 10px;

    line-height: 1.6;
}


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

.dx-contact-social {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 35px;

    padding-top: 22px;

    border-top:
        1px solid rgba(255,255,255,.12);
}


.dx-contact-social > span {

    color: #7898b6;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


.dx-contact-social div {

    display: flex;

    gap: 7px;
}


.dx-contact-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 31px;
    height: 31px;

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

    border-radius: 50%;

    color: #b9ccde;

    text-decoration: none;

    transition: .25s ease;
}


.dx-contact-social a:hover {

    color: #ffffff;

    border-color: #15caff;

    background:
        rgba(0,200,255,.10);

    transform: translateY(-2px);
}


/* ============================================================
   FORM CARD
============================================================ */

.dx-contact-form-card {

    height: 100%;

    padding: 38px;

    border: 1px solid #e5eef6;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 20px 50px rgba(0, 60, 120, .08);
}


.dx-form-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.dx-form-header h2 {

    margin: 0;

    color: #092f5d;

    font-size: 26px;

    font-weight: 800;

    line-height: 1.1;
}


.dx-form-header h2 span {

    color: #087cff;
}


.dx-form-icon {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 13px;

    color: #087cff;

    background:
        linear-gradient(
            145deg,
            #e5f8ff,
            #edf4ff
        );

    font-size: 19px;
}


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

.dx-contact-form-card label {

    display: block;

    margin-bottom: 7px;

    color: #27496d;

    font-size: 9px;

    font-weight: 700;
}


.dx-contact-form-card label span {

    color: #087cff;
}


.dx-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 43px;

    border: 1px solid #dce8f2;

    border-radius: 8px;

    background: #fbfdff;

    transition: .2s ease;
}


.dx-input-wrapper:focus-within {

    border-color: #29aaff;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(0, 155, 255, .07);
}


.dx-input-wrapper > i {

    flex-shrink: 0;

    width: 40px;

    color: #74a0c4;

    text-align: center;

    font-size: 12px;
}


.dx-input-wrapper input,
.dx-input-wrapper select,
.dx-input-wrapper textarea {

    width: 100%;

    border: 0;

    outline: 0;

    color: #24486c;

    background: transparent;

    font-family: inherit;

    font-size: 10px;
}


.dx-input-wrapper input,
.dx-input-wrapper select {

    height: 41px;

    padding-right: 12px;
}


.dx-input-wrapper textarea {

    resize: vertical;

    min-height: 110px;

    padding:
        12px
        12px
        12px
        0;
}


.dx-input-wrapper select {

    cursor: pointer;
}


.dx-input-wrapper input::placeholder,
.dx-input-wrapper textarea::placeholder {

    color: #9bb0c3;
}


/* ============================================================
   ALERT
============================================================ */

.dx-alert {

    border-radius: 8px;

    font-size: 10px;
}


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

.dx-submit-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    width: 100%;

    min-height: 45px;

    margin-top: 5px;

    border: 0;

    border-radius: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #087cff,
            #00c8ff
        );

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(0, 130, 255, .20);

    transition: .25s ease;
}


.dx-submit-btn span {

    font-size: 16px;

    line-height: 1;
}


.dx-submit-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(0, 130, 255, .28);
}


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

.dx-contact-bottom {

    padding: 65px 0;

    background:
        linear-gradient(
            135deg,
            #f5fbff,
            #ffffff
        );
}


.dx-contact-bottom h2 {

    margin-bottom: 12px;

    color: #092f5d;

    font-size: 30px;

    font-weight: 800;
}


.dx-contact-bottom h2 span {

    color: #087cff;
}


.dx-contact-bottom > .container > .row > div > p {

    max-width: 650px;

    margin: auto;

    color: #67829e;

    font-size: 10px;

    line-height: 1.7;
}


/* ============================================================
   FEATURES
============================================================ */

.dx-contact-feature {

    height: 100%;

    padding: 28px 22px;

    border: 1px solid #e4edf5;

    border-radius: 12px;

    text-align: center;

    background: #ffffff;

    transition: .25s ease;
}


.dx-contact-feature:hover {

    transform: translateY(-5px);

    border-color: #cce9f8;

    box-shadow:
        0 15px 35px
        rgba(0, 70, 130, .08);
}


.dx-feature-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 43px;
    height: 43px;

    margin: 0 auto 13px;

    border-radius: 11px;

    color: #087cff;

    background:
        linear-gradient(
            145deg,
            #e4f8ff,
            #edf4ff
        );

    font-size: 17px;
}


.dx-contact-feature h3 {

    margin-bottom: 7px;

    color: #153b65;

    font-size: 12px;

    font-weight: 800;
}


.dx-contact-feature p {

    max-width: 260px;

    margin: auto;

    color: #7189a2;

    font-size: 8px;

    line-height: 1.6;
}


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

@media (max-width: 991px) {

    .dx-contact-hero {

        padding: 60px 0;
    }


    .dx-contact-section {

        padding: 45px 0;
    }


    .dx-contact-info {

        min-height: auto;
    }

}


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

@media (max-width: 767px) {

    .dx-contact-hero {

        padding: 45px 0;
    }


    .dx-contact-title {

        font-size: 38px;

        letter-spacing: -1.3px;
    }


    .dx-contact-intro {

        font-size: 10px;
    }


    .dx-contact-info,
    .dx-contact-form-card {

        padding: 25px;
    }


    .dx-contact-info h2 {

        font-size: 27px;
    }


    .dx-form-header h2 {

        font-size: 23px;
    }


    .dx-contact-social {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    .dx-contact-bottom {

        padding: 45px 0;
    }


    .dx-contact-bottom h2 {

        font-size: 27px;
    }

}


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

@media (max-width: 480px) {

    .dx-contact-title {

        font-size: 33px;
    }


    .dx-contact-info,
    .dx-contact-form-card {

        padding: 20px;
    }


    .dx-form-header {

        margin-bottom: 20px;
    }


    .dx-form-icon {

        width: 40px;
        height: 40px;

        font-size: 15px;
    }


    .dx-contact-detail {

        gap: 10px;
    }

}