﻿.contact-page-redesign {
        background: #f6f8fb;
        color: #102033;
    }

    .contact-page-redesign .contact-hero {
        position: relative;
        overflow: hidden;
        padding: 78px 0 92px;
        background:
            linear-gradient(90deg, rgba(9, 18, 34, 0.92), rgba(15, 31, 57, 0.72)),
            url("../../uploads/demo/general/bg-contact.jpg") center/cover no-repeat;
        color: #fff;
    }

    .contact-page-redesign .contact-kicker,
    .contact-page-redesign .contact-section-label {
        display: inline-flex;
        align-items: center;
        margin-bottom: 14px;
        color: #93c5fd;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .contact-page-redesign .contact-hero h1 {
        max-width: 760px;
        margin: 0;
        color: #fff;
        font-size: 48px;
        font-weight: 750;
        line-height: 1.1;
    }

    .contact-page-redesign .contact-hero p {
        max-width: 640px;
        margin: 18px 0 0;
        color: #dbe7f8;
        font-size: 17px;
        line-height: 1.7;
    }

    .contact-page-redesign .contact-quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 26px;
    }

    .contact-page-redesign .contact-quick-actions a,
    .contact-page-redesign .contact-submit {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-radius: 999px;
        text-decoration: none;
    }

    .contact-page-redesign .contact-quick-actions a {
        min-height: 46px;
        padding: 11px 16px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-weight: 650;
        backdrop-filter: blur(12px);
    }

    .contact-page-redesign .contact-quick-actions a:hover {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        text-decoration: none;
    }

    .contact-page-redesign .contact-hero-card,
    .contact-page-redesign .contact-info-panel,
    .contact-page-redesign .contact-form-panel {
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    }

    .contact-page-redesign .contact-hero-card {
        padding: 30px;
        background: rgba(255, 255, 255, 0.11);
        color: #fff;
        backdrop-filter: blur(18px);
    }

    .contact-page-redesign .contact-card-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        margin-bottom: 18px;
        border-radius: 16px;
        background: linear-gradient(135deg, #ef4444, #f97316);
        box-shadow: 0 18px 34px rgba(249, 115, 22, 0.24);
    }

    .contact-page-redesign .contact-hero-card h3 {
        margin: 0 0 16px;
        color: #fff;
        font-size: 24px;
        font-weight: 750;
    }

    .contact-page-redesign .contact-hero-card ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .contact-page-redesign .contact-hero-card li {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
        color: #eef5ff;
        font-size: 15px;
        line-height: 1.5;
    }

    .contact-page-redesign .contact-hero-card li:last-child {
        margin-bottom: 0;
    }

    .contact-page-redesign .contact-hero-card li i {
        margin-top: 4px;
        color: #fca5a5;
    }

    .contact-page-redesign .contact-main-wrap {
        margin-top: -48px;
        padding-bottom: 72px;
        position: relative;
        z-index: 2;
    }

    .contact-page-redesign .contact-info-panel,
    .contact-page-redesign .contact-form-panel {
        height: 100%;
        padding: 34px;
    }

    .contact-page-redesign .contact-info-panel h2,
    .contact-page-redesign .contact-form-heading h2 {
        margin: 0;
        color: #0f172a;
        font-size: 30px;
        font-weight: 750;
        line-height: 1.2;
    }

    .contact-page-redesign .contact-muted,
    .contact-page-redesign .contact-form-heading p {
        margin: 12px 0 0;
        color: #607086;
        font-size: 15px;
        line-height: 1.7;
    }

    .contact-page-redesign .contact-info-list {
        display: grid;
        gap: 12px;
        margin-top: 26px;
    }

    .contact-page-redesign .contact-info-item {
        display: flex;
        gap: 14px;
        align-items: center;
        padding: 14px;
        border: 1px solid #e6ecf4;
        border-radius: 14px;
        background: #f8fafc;
        color: #0f172a;
        text-decoration: none;
    }

    .contact-page-redesign a.contact-info-item:hover {
        border-color: #bfd7ff;
        color: #0f172a;
        text-decoration: none;
    }

    .contact-page-redesign .contact-info-item > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        min-width: 42px;
        height: 42px;
        border-radius: 13px;
        background: #eaf3ff;
        color: #2563eb;
    }

    .contact-page-redesign .contact-info-item strong,
    .contact-page-redesign .contact-info-item small {
        display: block;
    }

    .contact-page-redesign .contact-info-item small {
        margin-top: 3px;
        color: #607086;
        font-size: 13px;
        line-height: 1.45;
    }

    .contact-page-redesign .contact-promise {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 24px;
    }

    .contact-page-redesign .contact-promise div {
        padding: 14px;
        border-radius: 14px;
        background: linear-gradient(135deg, #fff7ed, #eff6ff);
    }

    .contact-page-redesign .contact-promise strong,
    .contact-page-redesign .contact-promise span {
        display: block;
    }

    .contact-page-redesign .contact-promise strong {
        color: #0f172a;
        font-size: 14px;
    }

    .contact-page-redesign .contact-promise span {
        margin-top: 5px;
        color: #64748b;
        font-size: 12px;
        line-height: 1.4;
    }

    .contact-page-redesign .contact-form-heading {
        margin-bottom: 24px;
    }

    .contact-page-redesign .form-group {
        margin-bottom: 18px;
    }

    .contact-page-redesign label {
        margin-bottom: 8px;
        color: #26364a;
        font-size: 13px;
        font-weight: 700;
    }

    .contact-page-redesign .form-control {
        min-height: 52px;
        border: 1px solid #dde5ef;
        border-radius: 14px;
        background: #f8fafc;
        box-shadow: none;
        color: #0f172a;
        font-size: 15px;
        padding: 12px 15px;
    }

    .contact-page-redesign textarea.form-control {
        min-height: 150px;
        resize: vertical;
    }

    .contact-page-redesign .form-control:focus {
        border-color: #5191fa;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(81, 145, 250, 0.12);
    }

    .contact-page-redesign .contact-submit {
        min-height: 52px;
        border: 0;
        background: linear-gradient(135deg, #ef4444, #f97316);
        box-shadow: 0 16px 32px rgba(249, 115, 22, 0.22);
        color: #fff;
        font-weight: 750;
        padding: 13px 22px;
        text-transform: none;
    }

    .contact-page-redesign .contact-submit:hover {
        color: #fff;
        transform: translateY(-1px);
    }

    .contact-page-redesign .contact-submit .fa-spinner {
        display: none;
    }

    @media (max-width: 991px) {
        .contact-page-redesign .contact-hero {
            padding: 58px 0 82px;
        }

        .contact-page-redesign .contact-hero h1 {
            font-size: 38px;
        }

        .contact-page-redesign .contact-hero-card {
            margin-top: 26px;
        }

        .contact-page-redesign .contact-info-panel {
            margin-bottom: 18px;
        }
    }

    @media (max-width: 767px) {
        .contact-page-redesign .contact-hero {
            padding: 42px 0 70px;
        }

        .contact-page-redesign .contact-hero h1 {
            font-size: 30px;
        }

        .contact-page-redesign .contact-hero p {
            font-size: 15px;
        }

        .contact-page-redesign .contact-info-panel,
        .contact-page-redesign .contact-form-panel,
        .contact-page-redesign .contact-hero-card {
            padding: 24px 20px;
        }

        .contact-page-redesign .contact-info-panel h2,
        .contact-page-redesign .contact-form-heading h2 {
            font-size: 24px;
        }

        .contact-page-redesign .contact-promise {
            grid-template-columns: 1fr;
        }
    }

