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

        :root {
            --dawini-blue: #10366d;
            --dawini-blue-dark: #092d5c;
            --dawini-turquoise: #13aaa9;
            --dawini-turquoise-dark: #079594;
            --dawini-light: #eef9fb;
            --dawini-text: #173b70;
            --dawini-text-light: #627895;
            --dawini-border: #dcebef;
            --white: #ffffff;
        }


        /* =========================================================
           HERO CONTACT
        ========================================================= */

        .contact-hero {
            position: relative;
            overflow: hidden;

            min-height: 400px;

            display: flex;
            align-items: center;

            background:
                radial-gradient(
                    circle at 85% 40%,
                    rgba(19,170,169,.16),
                    transparent 28%
                ),
                linear-gradient(
                    120deg,
                    #eefafd 0%,
                    #f9fcfd 55%,
                    #e7f6fa 100%
                );
        }


        .contact-hero::before {
            content: "";

            position: absolute;

            width: 430px;
            height: 430px;

            border-radius: 50%;

            right: -170px;
            top: -130px;

            border: 1px solid rgba(19,170,169,.12);
        }


        .contact-hero::after {
            content: "";

            position: absolute;

            width: 280px;
            height: 280px;

            border-radius: 50%;

            right: 120px;
            bottom: -180px;

            background: rgba(19,170,169,.05);
        }


        .contact-hero-inner {

            width: min(
                1380px,
                calc(100% - 80px)
            );

            margin: auto;

            min-height: 400px;

            display: grid;

            grid-template-columns: 1.1fr .9fr;

            align-items: center;

            gap: 70px;

            position: relative;

            z-index: 2;
        }


        /* Breadcrumb */

        .contact-breadcrumb {

            display: flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 20px;

            color: #6d84a0;

            font-size: 12px;
        }


        .contact-breadcrumb a:hover {
            color: var(--dawini-turquoise);
        }


        .contact-breadcrumb span {
            color: var(--dawini-turquoise);
        }


        /* H1 */

        .contact-hero h1 {

            margin: 0;

            max-width: 720px;

            font-family: "Manrope", sans-serif;

            font-size: clamp(
                42px,
                5vw,
                64px
            );

            line-height: 1.08;

            letter-spacing: -2px;

            color: var(--dawini-blue);

            font-weight: 800;
        }


        .contact-hero h1 span {
            color: var(--dawini-turquoise);
        }


        .contact-hero-text {

            max-width: 620px;

            margin-top: 22px;

            color: #58708d;

            font-size: 15px;

            line-height: 1.8;
        }


        /* Hero illustration */

        .contact-hero-visual {

            min-height: 300px;

            display: flex;

            align-items: center;

            justify-content: center;

            position: relative;
        }


        .contact-circle {

            width: 230px;
            height: 230px;

            border-radius: 50%;

            background:
                linear-gradient(
                    145deg,
                    #e2f8f8,
                    #ffffff
                );

            border: 1px solid #cdecef;

            box-shadow:
                0 25px 60px rgba(17,76,108,.12),
                inset 0 0 35px rgba(19,170,169,.08);

            display: flex;

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

            position: relative;
        }


        .contact-circle::before {

            content: "";

            position: absolute;

            width: 175px;
            height: 175px;

            border-radius: 50%;

            border: 1px dashed #9dd9dc;
        }


        .contact-circle-icon {

            width: 85px;
            height: 85px;

            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    #0e949e,
                    #18b5ae
                );

            color: white;

            display: flex;

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

            font-size: 34px;

            box-shadow:
                0 15px 35px rgba(13,151,158,.28);

            position: relative;

            z-index: 2;
        }


        .contact-floating {

            position: absolute;

            background: rgba(
                255,
                255,
                255,
                .96
            );

            border: 1px solid #dcecf1;

            box-shadow:
                0 15px 35px rgba(
                    21,
                    75,
                    110,
                    .12
                );

            border-radius: 14px;

            padding: 12px 16px;

            display: flex;

            align-items: center;

            gap: 9px;

            color: var(--dawini-blue);

            font-size: 12px;

            font-weight: 700;
        }


        .contact-floating i {

            width: 34px;
            height: 34px;

            border-radius: 50%;

            display: flex;

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

            background: #e3f8f8;

            color: var(--dawini-turquoise);
        }


        .contact-floating.one {
            left: 5px;
            top: 35px;
        }


        .contact-floating.two {
            right: 0;
            top: 110px;
        }


        .contact-floating.three {
            left: 30px;
            bottom: 25px;
        }


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

        .contact-section {

            padding: 85px 0;

            background: white;
        }


        .contact-container {

            width: min(
                1100px,
                calc(100% - 40px)
            );

            margin: auto;

            display: grid;

            grid-template-columns: .75fr 1.25fr;

            gap: 55px;

            align-items: start;
        }


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

        .contact-info-label {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            color: var(--dawini-turquoise);

            font-size: 11px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 14px;
        }


        .contact-info-label::before {

            content: "";

            width: 25px;
            height: 2px;

            background: var(--dawini-turquoise);
        }


        .contact-info h2 {

            margin: 0;

            font-family: "Manrope", sans-serif;

            color: var(--dawini-blue);

            font-size: 34px;

            line-height: 1.2;

            letter-spacing: -.8px;
        }


        .contact-info h2 span {
            color: var(--dawini-turquoise);
        }


        .contact-info > p {

            margin-top: 18px;

            color: var(--dawini-text-light);

            font-size: 14px;

            line-height: 1.8;
        }


        .contact-details {

            margin-top: 30px;

            display: grid;

            gap: 14px;
        }


        .contact-detail {

            display: flex;

            align-items: center;

            gap: 13px;

            padding: 14px;

            background: #f7fcfd;

            border: 1px solid #e3eff3;

            border-radius: 13px;
        }


        .contact-detail-icon {

            width: 42px;
            height: 42px;

            flex-shrink: 0;

            border-radius: 11px;

            display: flex;

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

            background: #e5f8f8;

            color: var(--dawini-turquoise);

            font-size: 16px;
        }


        .contact-detail strong {

            display: block;

            color: var(--dawini-blue);

            font-size: 12px;

            margin-bottom: 2px;
        }


        .contact-detail span {

            color: #7188a0;

            font-size: 12px;
        }


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

        .contact-form-box {

            background: #f7fcfd;

            border: 1px solid #dceff3;

            border-radius: 22px;

            padding: 32px;

            box-shadow:
                0 15px 40px
                rgba(18,55,95,.05);
        }


        .contact-form-box h3 {

            margin: 0 0 7px;

            color: var(--dawini-blue);

            font-family: "Manrope", sans-serif;

            font-size: 22px;
        }


        .contact-form-box > p {

            margin-bottom: 25px;

            color: #7288a0;

            font-size: 12px;
        }


        .contact-form-grid {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 16px;
        }


        .contact-field {

            margin-bottom: 16px;
        }


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


        .contact-field label {

            display: block;

            margin-bottom: 7px;

            color: #12375f;

            font-size: 12px;

            font-weight: 700;
        }


        .contact-input {

            position: relative;
        }


        .contact-input i {

            position: absolute;

            left: 14px;
            top: 50%;

            transform: translateY(-50%);

            color: var(--dawini-turquoise);

            font-size: 14px;

            pointer-events: none;
        }


        .contact-input input,
        .contact-input textarea,
        .contact-input select {

            width: 100%;

            border: 1px solid #d6e8ee;

            border-radius: 10px;

            background: white;

            color: #12375f;

            outline: none;

            font-family: inherit;

            font-size: 13px;

            transition: .2s ease;
        }


        .contact-input input,
        .contact-input select {

            height: 47px;

            padding:
                0
                13px
                0
                40px;
        }


        .contact-input textarea {

            min-height: 125px;

            padding: 13px;

            resize: vertical;
        }


        .contact-input input:focus,
        .contact-input textarea:focus,
        .contact-input select:focus {

            border-color: #16aaa9;

            box-shadow:
                0 0 0 3px
                rgba(22,170,169,.08);
        }


        /* =========================================================
           RECAPTCHA
        ========================================================= */

        .contact-recaptcha {

            margin-top: 5px;

            padding: 5px 0;

            overflow: hidden;
        }


        /* =========================================================
           CONSENT
        ========================================================= */

        .contact-consent {

            margin-top: 16px;

            padding: 12px 14px;

            border-radius: 10px;

            background: #edf9fa;
        }


        .contact-consent label {

            display: flex;

            align-items: flex-start;

            gap: 8px;

            color: #607891;

            font-size: 10px;

            line-height: 1.5;

            cursor: pointer;
        }


        .contact-consent input {

            margin-top: 2px;

            accent-color: var(--dawini-turquoise);
        }


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

        .contact-submit {

            margin-top: 20px;

            display: flex;

            justify-content: flex-end;
        }


        .contact-submit button {

            min-width: 190px;

            height: 48px;

            border: none;

            border-radius: 25px;

            background:
                linear-gradient(
                    135deg,
                    #18aaa7,
                    #13a09f
                );

            color: white;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 9px;

            font-family: inherit;

            font-size: 12px;

            font-weight: 700;

            cursor: pointer;

            box-shadow:
                0 10px 25px
                rgba(19,170,169,.18);

            transition: .2s ease;
        }


        .contact-submit button:hover {

            transform: translateY(-2px);

            box-shadow:
                0 14px 30px
                rgba(19,170,169,.25);
        }


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

        .contact-cta {

            padding: 0 0 80px;
        }


        .contact-cta-box {

            width: min(
                1100px,
                calc(100% - 40px)
            );

            margin: auto;

            padding: 38px 45px;

            border-radius: 22px;

            background:
                linear-gradient(
                    135deg,
                    #0d9fa1,
                    #16b3af
                );

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 25px;
        }


        .contact-cta-box h2 {

            margin: 0 0 7px;

            color: white;

            font-family: "Manrope", sans-serif;

            font-size: 25px;
        }


        .contact-cta-box p {

            margin: 0;

            color: rgba(
                255,
                255,
                255,
                .78
            );

            font-size: 12px;
        }


        .contact-cta-button {

            flex-shrink: 0;

            padding: 13px 21px;

            border-radius: 25px;

            background: white;

            color: #087f88;

            font-size: 12px;

            font-weight: 800;
        }


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

        @media(max-width: 950px) {

            .contact-hero-inner {

                width: calc(100% - 40px);

                grid-template-columns: 1fr;

                padding: 65px 0;

                gap: 20px;
            }


            .contact-hero-visual {

                min-height: 280px;
            }


            .contact-container {

                grid-template-columns: 1fr;

                gap: 40px;
            }

        }


        @media(max-width: 650px) {

            .contact-hero-inner {

                width: calc(100% - 30px);

                padding: 50px 0;
            }


            .contact-hero h1 {

                font-size: 40px;

                letter-spacing: -1.5px;
            }


            .contact-hero-text {

                font-size: 14px;
            }


            .contact-hero-visual {

                transform: scale(.85);

                margin: -25px 0;
            }


            .contact-section {

                padding: 60px 0;
            }


            .contact-container {

                width: calc(100% - 30px);
            }


            .contact-form-box {

                padding: 21px;

                border-radius: 17px;
            }


            .contact-form-grid {

                grid-template-columns: 1fr;

                gap: 0;
            }


            .contact-field.full {

                grid-column: auto;
            }


            .contact-submit {

                justify-content: stretch;
            }


            .contact-submit button {

                width: 100%;
            }


            .contact-cta {

                padding-bottom: 60px;
            }


            .contact-cta-box {

                width: calc(100% - 30px);

                padding: 30px 23px;

                flex-direction: column;

                align-items: flex-start;
            }


            .contact-cta-button {

                width: 100%;

                text-align: center;
            }

        }


        @media(max-width: 430px) {

            .contact-floating {

                transform: scale(.85);
            }


            .contact-floating.one {

                left: -20px;
            }


            .contact-floating.two {

                right: -20px;
            }


            .contact-floating.three {

                left: -10px;
            }

        }
/* =========================================================
   CONTACT ALERT
========================================================= */

.contact-alert {
    width: min(1100px, calc(100% - 40px));
    margin: 25px auto 0;

    padding: 15px 18px;

    border-radius: 12px;

    display: flex;
    align-items: center;

    gap: 13px;

    font-size: 13px;
}

.contact-alert > i {
    font-size: 22px;
    flex-shrink: 0;
}

.contact-alert strong {
    display: block;
    margin-bottom: 3px;
}

.contact-alert span {
    display: block;
    font-size: 12px;
}

.contact-alert-success {
    background: #eaf9f5;
    border: 1px solid #bde8dc;
    color: #176b58;
}

.contact-alert-success > i {
    color: #159579;
}

.contact-alert-error {
    background: #fff1f1;
    border: 1px solid #f0cccc;
    color: #9b3030;
}

.contact-alert-error > i {
    color: #c33c3c;
}

@media(max-width:650px) {

    .contact-alert {
        width: calc(100% - 30px);
        align-items: flex-start;
    }

}