:root {
            --primary: #038C65;
            --primary-dark: #026347;
            --orange: #F27B13;
            --orange-dark: #D95204;
            --maroon: #730909;
            --bg: #F6F8F7;
            --text: #263238;
            --muted: #6c757d;
            --white: #ffffff;
            --border: #e9eeee;
            --shadow: 0 22px 60px rgba(15, 23, 42, 0.10);
            --shadow-soft: 0 14px 38px rgba(15, 23, 42, 0.07);
            --radius-xl: 32px;
            --radius-lg: 24px;
            --radius-md: 18px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Vazirmatn', sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 10% 10%, rgba(242, 123, 19, 0.11), transparent 28%),
                radial-gradient(circle at 90% 5%, rgba(3, 140, 101, 0.13), transparent 30%),
                linear-gradient(180deg, #ffffff 0%, var(--bg) 45%, #ffffff 100%);
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
        }

        .contact-page {
            position: relative;
            overflow: hidden;
        }

        .contact-hero {
            position: relative;
            padding: 110px 0 145px;
            color: var(--white);
            background:
                linear-gradient(135deg, rgba(3, 140, 101, 0.97), rgba(2, 99, 71, 0.95)),
                url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1600&q=80") center/cover;
        }

        .contact-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 18% 25%, rgba(242, 123, 19, 0.36), transparent 26%),
                radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.16), transparent 28%);
            z-index: 1;
        }

        .contact-hero::after {
            content: "";
            position: absolute;
            left: -10%;
            right: -10%;
            bottom: -75px;
            height: 150px;
            background: var(--bg);
            border-radius: 50% 50% 0 0;
            z-index: 2;
        }

        .hero-inner {
            position: relative;
            z-index: 3;
            max-width: 820px;
            margin: 0 auto;
            text-align: center;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 10px 18px;
            margin-bottom: 22px;
            border-radius: 999px;
            color: #fff;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(9px);
            font-weight: 700;
        }

        .hero-title {
            margin-bottom: 18px;
            font-size: clamp(2.1rem, 5vw, 4rem);
            font-weight: 950;
            line-height: 1.45;
            letter-spacing: -1px;
            text-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
        }

        .hero-desc {
            max-width: 710px;
            margin: 0 auto;
            font-size: 1.08rem;
            line-height: 2.15;
            opacity: 0.95;
        }

        .hero-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 32px;
        }

        .hero-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 52px;
            padding: 12px 22px;
            border-radius: 17px;
            font-weight: 900;
            transition: 0.3s ease;
        }

        .hero-btn-primary {
            color: var(--white);
            background: linear-gradient(135deg, var(--orange-dark), var(--orange));
            box-shadow: 0 16px 32px rgba(242, 123, 19, 0.32);
        }

        .hero-btn-primary:hover {
            color: var(--white);
            transform: translateY(-4px);
        }

        .hero-btn-light {
            color: var(--white);
            border: 1px solid rgba(255, 255, 255, 0.38);
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(8px);
        }

        .hero-btn-light:hover {
            color: var(--primary-dark);
            background: var(--white);
            transform: translateY(-4px);
        }

        .quick-contact {
            position: relative;
            z-index: 5;
            margin-top: -72px;
        }

        .quick-card {
            height: 100%;
            padding: 28px;
            border-radius: var(--radius-xl);
            background: rgba(255, 255, 255, 0.93);
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(12px);
            transition: 0.35s ease;
        }

        .quick-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow);
        }

        .quick-icon {
            width: 70px;
            height: 70px;
            display: grid;
            place-items: center;
            margin-bottom: 18px;
            border-radius: 24px;
            color: var(--white);
            font-size: 1.8rem;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            box-shadow: 0 15px 28px rgba(3, 140, 101, 0.25);
        }

        .quick-card.orange .quick-icon {
            background: linear-gradient(135deg, var(--orange), var(--orange-dark));
            box-shadow: 0 15px 28px rgba(242, 123, 19, 0.25);
        }

        .quick-card.maroon .quick-icon {
            background: linear-gradient(135deg, #9b1111, var(--maroon));
            box-shadow: 0 15px 28px rgba(115, 9, 9, 0.22);
        }

        .quick-title {
            margin-bottom: 10px;
            color: var(--maroon);
            font-weight: 950;
            font-size: 1.18rem;
        }

        .quick-text {
            min-height: 58px;
            margin-bottom: 14px;
            color: var(--muted);
            line-height: 1.9;
        }

        .quick-value {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--primary);
            font-weight: 950;
        }

        .main-contact {
            padding: 82px 0 55px;
        }

        .contact-panel {
            height: 100%;
            overflow: hidden;
            border-radius: var(--radius-xl);
            background: var(--white);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-soft);
        }

        .panel-padding {
            padding: 36px;
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 15px;
            margin-bottom: 15px;
            border-radius: 999px;
            color: var(--primary);
            background: rgba(3, 140, 101, 0.09);
            font-size: 0.92rem;
            font-weight: 900;
        }

        .section-title {
            margin-bottom: 12px;
            color: var(--maroon);
            font-size: 1.8rem;
            font-weight: 950;
            line-height: 1.65;
        }

        .section-desc {
            margin-bottom: 30px;
            color: var(--muted);
            line-height: 2;
        }

        .form-label {
            margin-bottom: 9px;
            color: #3f4b53;
            font-weight: 900;
        }

        .input-group-modern {
            position: relative;
        }

        .input-icon {
            position: absolute;
            top: 50%;
            right: 17px;
            z-index: 3;
            transform: translateY(-50%);
            color: var(--primary);
            font-size: 1.15rem;
        }

        .textarea-icon {
            top: 27px;
            transform: none;
        }

        .form-control,
        .form-select {
            min-height: 56px;
            padding: 14px 48px 14px 18px;
            border: 1.5px solid #e6ecea;
            border-radius: 17px;
            color: var(--text);
            background-color: #fbfcfc;
            transition: 0.25s ease;
        }

        .form-select {
            background-position: left 1rem center;
        }

        textarea.form-control {
            min-height: 150px;
            resize: vertical;
            line-height: 2;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary);
            background-color: var(--white);
            box-shadow: 0 0 0 5px rgba(3, 140, 101, 0.10);
        }

        .submit-btn {
            width: 100%;
            min-height: 60px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: none;
            border-radius: 19px;
            color: var(--white);
            font-size: 1.05rem;
            font-weight: 950;
            background: linear-gradient(135deg, var(--orange-dark), var(--orange));
            box-shadow: 0 18px 34px rgba(242, 123, 19, 0.28);
            transition: 0.3s ease;
        }

        .submit-btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 22px 42px rgba(217, 82, 4, 0.34);
        }

        .support-note {
            display: flex;
            gap: 14px;
            margin-top: 22px;
            padding: 18px;
            border-radius: 18px;
            background: rgba(3, 140, 101, 0.07);
            color: #4c5c64;
            line-height: 1.9;
        }

        .support-note i {
            color: var(--primary);
            font-size: 1.35rem;
        }

        .map-panel {
            display: flex;
            flex-direction: column;
        }

        .map-header {
            padding: 32px 32px 22px;
        }

        .map-frame {
            position: relative;
            min-height: 390px;
            overflow: hidden;
            background: #eef3f1;
        }

        .map-frame iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .map-badge {
            position: absolute;
            top: 18px;
            right: 18px;
            z-index: 4;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 16px;
            border-radius: 999px;
            color: var(--primary-dark);
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
            font-weight: 950;
            backdrop-filter: blur(8px);
        }

        .routing-box {
            padding: 25px;
            border-top: 1px solid var(--border);
            background: linear-gradient(180deg, #fff, #fbfcfc);
        }

        .routing-title {
            margin-bottom: 16px;
            color: var(--maroon);
            font-weight: 950;
            text-align: center;
        }

        .route-btn {
            flex: 1 1 130px;
            min-height: 50px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 16px;
            border-radius: 16px;
            font-weight: 950;
            transition: 0.28s ease;
        }

        .route-btn:hover {
            transform: translateY(-3px);
        }

        .route-neshan {
            color: var(--primary);
            background: rgba(3, 140, 101, 0.10);
            border: 1px solid rgba(3, 140, 101, 0.18);
        }

        .route-neshan:hover {
            color: var(--white);
            background: var(--primary);
        }

        .route-balad {
            color: var(--orange-dark);
            background: rgba(242, 123, 19, 0.11);
            border: 1px solid rgba(242, 123, 19, 0.20);
        }

        .route-balad:hover {
            color: var(--white);
            background: var(--orange-dark);
        }

        .route-google {
            color: #3c4043;
            background: #f4f6f8;
            border: 1px solid #e4e7ea;
        }

        .route-google:hover {
            color: var(--white);
            background: #4285F4;
        }

        .info-strip {
            padding: 18px 24px;
            border-top: 1px solid var(--border);
            background: #fff;
        }

        .info-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 10px 0;
            color: #53616a;
            line-height: 1.9;
        }

        .info-row i {
            color: var(--primary);
            font-size: 1.25rem;
        }

        .faq-section {
            padding: 35px 0 90px;
        }

        .faq-card {
            padding: 44px;
            border-radius: var(--radius-xl);
            background: var(--white);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-soft);
        }

        .accordion-item {
            margin-bottom: 15px;
            border: 1px solid #e9eeee;
            border-radius: 19px !important;
            overflow: hidden;
            background: #fff;
        }

        .accordion-button {
            padding: 20px 24px;
            color: var(--text);
            background: #fff;
            font-weight: 950;
            line-height: 1.9;
        }

        .accordion-button i {
            color: var(--primary);
            font-size: 1.25rem;
            margin-left: 9px;
        }

        .accordion-button:not(.collapsed) {
            color: var(--primary);
            background: rgba(3, 140, 101, 0.065);
            box-shadow: none;
        }

        .accordion-button:focus {
            box-shadow: none;
            border-color: transparent;
        }

        .accordion-button::after {
            margin-right: auto;
            margin-left: 0;
        }

        .accordion-body {
            padding: 22px 26px;
            color: #5f6b73;
            line-height: 2.15;
            border-top: 1px solid #e9eeee;
        }

        @media (max-width: 991px) {
            .contact-hero {
                padding: 90px 0 130px;
            }

            .main-contact {
                padding-top: 65px;
            }

            .panel-padding,
            .faq-card {
                padding: 28px;
            }

            .map-frame {
                min-height: 330px;
            }
        }

        @media (max-width: 575px) {
            .contact-hero {
                padding: 72px 0 112px;
            }

            .quick-contact {
                margin-top: -58px;
            }

            .quick-card,
            .contact-panel,
            .faq-card {
                border-radius: 23px;
            }

            .panel-padding,
            .faq-card {
                padding: 22px;
            }

            .section-title {
                font-size: 1.45rem;
            }

            .hero-desc {
                font-size: 0.98rem;
            }

            .hero-btn {
                width: 100%;
            }

            .map-frame {
                min-height: 280px;
            }
        }