﻿
/*---------------------------------=========================================  Contact Us Hero  section ============================================================ ------------------------------------*/
/* Contact Us Hero Banner */
.contact-us-page-banner {
    position: relative;
    width: 100%;
    min-height: 400px;
    background-image: url('../images/b2bhero-bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.contact-us-banner-container {
    position: relative;
    z-index: 2;
    min-height: 400px;
    display: flex;
    align-items: center;
    padding: 20px 85px !important;
}

.contact-us-banner-content {
    max-width: 420px;
    padding-bottom: 15px;
}

/* Banner Eyebrow */
.contact-us-banner-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: #0867ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

/* Banner Heading */
.contact-us-banner-title {
    margin: 0 0 8px;
    color: #082b70;
    font-size: 50px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.2px;
}

    .contact-us-banner-title span {
        display: block;
        color: #0867ed;
    }

/* Banner Description */
.contact-us-banner-description {
    max-width: 370px;
    margin: 0;
    color: #365b92;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}








/*---------------------------------=========================================  Support Strip  section ============================================================ ------------------------------------*/


/* Contact Us Support Section */
.contact-us-support-section {
    position: relative;
    z-index: 5;
    margin-top: -38px;
    padding-bottom: 35px;
}

/* Support Strip */
.contact-us-support-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    background: #fff;
    border: 1px solid #e5effc;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(15, 65, 135, .09);
    overflow: hidden;
    padding: 0;
}

/* Individual Support Item */
.contact-us-support-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 22px 28px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: background .35s ease;
}

    /* Divider Between Support Items */
    .contact-us-support-item:not(:last-child)::after {
        content: "";
        position: absolute;
        z-index: 3;
        right: 0;
        top: 25%;
        height: 50%;
        width: 1px;
        background: #dce8fa;
    }

/* Individual Theme Colors */
.contact-support-blue {
    --support-color: #0867ed;
    --support-bg: #e8f3ff;
}

.contact-support-orange {
    --support-color: #f59e0b;
    --support-bg: #fff3e2;
}

.contact-support-green {
    --support-color: #10b981;
    --support-bg: #e6f9f0;
}

.contact-support-purple {
    --support-color: #9333ea;
    --support-bg: #f3e8ff;
}

/* Support Icon */
.contact-us-support-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--support-bg);
    color: var(--support-color);
}

    /* Expanding Background Animation */
    .contact-us-support-icon::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        border-radius: 50%;
        background: var(--support-bg);
        transform: scale(1);
        transform-origin: center;
        transition: transform .7s cubic-bezier(.22, 1, .36, 1);
        pointer-events: none;
    }

    /* Icon Styling */
    .contact-us-support-icon i {
        position: relative;
        z-index: 2;
        font-size: 23px;
        transition: transform .35s ease;
    }

/* Support Content */
.contact-us-support-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

    /* Support Heading */
    .contact-us-support-content h3 {
        margin: 0 0 4px;
        color: #082b70;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        transition: color .3s ease;
    }

    /* Support Description */
    .contact-us-support-content p {
        margin: 0;
        color: #365b92;
        font-size: 10px;
        font-weight: 400;
        line-height: 1.4;
        transition: color .3s ease;
    }

/* Support Item Hover */
.contact-us-support-item:hover {
    background: var(--support-bg);
}

    /* Expanding Circle on Hover */
    .contact-us-support-item:hover .contact-us-support-icon::before {
        transform: scale(20);
    }

    /* Icon Hover */
    .contact-us-support-item:hover .contact-us-support-icon i {
        transform: scale(1.15) rotate(-8deg);
    }

    /* Heading Hover */
    .contact-us-support-item:hover .contact-us-support-content h3 {
        color: var(--support-color);
    }


/* Contact Us Journey Tagline */
.contact-us-journey-tagline {
    position: absolute;
    top: 100px;
    right: 40px;
    z-index: 3;
    width: 194px;
    text-align: center;
    transform: rotate(-10deg);
    pointer-events: none;
}

/* Handwritten Text */
.contact-us-journey-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.8px;
    font-style: italic;
}

    /* Individual Text Lines */
    .contact-us-journey-text span {
        display: block;
        white-space: nowrap;
        padding: 2px 5px;
        background: linear-gradient( 110deg, #072d72 0%, #072d72 40%, #ffffff 48%, #5faaff 52%, #072d72 60%, #072d72 100% );
        background-size: 250% 100%;
        background-position: 100% center;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: contactJourneyShine 3.5s linear infinite;
    }

        /* Slight Handwritten Line Variation */
        .contact-us-journey-text span:first-child {
            transform: translateX(-12px) rotate(-3deg);
        }

        .contact-us-journey-text span:last-child {
            transform: translateX(10px) rotate(2deg);
        }

/* Handwritten Curved Underline */
.contact-us-journey-underline {
    display: block;
    width: 195px;
    height: 15px;
    margin: 1px auto 0;
    border-bottom: 4px solid #072d72;
    border-radius: 0 0 65% 50%;
    transform: rotate(-7deg) skewX(-15deg);
    box-shadow: 0 2px 2px rgba(7, 45, 114, .08);
}

/* Continuous Smooth Text Shine */
@keyframes contactJourneyShine {
    0% {
        background-position: 100% center;
    }

    100% {
        background-position: -150% center;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .contact-us-journey-text span {
        animation: none;
        background: none;
        -webkit-text-fill-color: #072d72;
    }
}





/*---------------------------------=========================================  Contact Us Main  section ============================================================ ------------------------------------*/


/* Contact Us Main Section */
.contact-us-main-section {
    position: relative;
    padding: 0 0 55px;
    background: #f4f9ff;
}

/* Main Two Column Grid */
.contact-us-main-grid {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    align-items: start;
    gap: 16px;
}

/* Common Card Style */
.contact-us-message-card,
.contact-us-office-card {
    background: #fff;
    border: 1px solid #e5effc;
    border-radius: 12px;
    box-shadow: 0 5px 22px rgba(15, 65, 135, .05);
    transition: box-shadow .35s ease;
}

    .contact-us-message-card:hover,
    .contact-us-office-card:hover {
        box-shadow: 0 9px 28px rgba(15, 65, 135, .09);
    }

/* Message Card */
.contact-us-message-card {
    padding: 18px;
}

/* Common Card Header */
.contact-us-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

/* Header Icon */
.contact-us-card-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 43px;
    height: 43px;
    border-radius: 10px;
    background: #e8f3ff;
    color: #0867ed;
    font-size: 21px;
}

/* Header Title */
.contact-us-card-header h2 {
    margin: 0 0 4px;
    color: #082b70;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

/* Header Description */
.contact-us-card-header p {
    margin: 0;
    color: #52709e;
    font-size: 11px;
    line-height: 1.4;
}

/* Contact Form */
.contact-us-form {
    width: 100%;
}

/* Two Column Form Grid */
.contact-us-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 14px;
}

/* Form Group */
.contact-us-form-group {
    min-width: 0;
}

/* Full Width Form Group */
.contact-us-form-full {
    grid-column: 1 / -1;
}

/* Form Label */
.contact-us-form-group label {
    display: block;
    margin-bottom: 6px;
    color: #082b70;
    font-size: 11px;
    font-weight: 700;
}

    /* Required Indicator */
    .contact-us-form-group label span {
        color: #ed3d50;
    }

/* Input Wrapper */
.contact-us-input-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 37px;
    border: 1px solid #d5e4fa;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

    /* Input Focus */
    .contact-us-input-wrapper:focus-within {
        border-color: #0867ed;
        box-shadow: 0 0 0 3px rgba(8, 103, 237, .09);
    }

/* Input Icon */
.contact-us-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 37px;
    background: #f7faff;
    border-right: 1px solid #e0eafa;
    color: #5276ae;
    font-size: 14px;
}

/* Inputs and Select */
.contact-us-input-wrapper input,
.contact-us-input-wrapper select,
.contact-us-input-wrapper textarea {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #183d77;
    font-family: inherit;
    font-size: 11px;
    padding: 9px 11px;
}

    /* Input Placeholder */
    .contact-us-input-wrapper input::placeholder,
    .contact-us-input-wrapper textarea::placeholder {
        color: #8a9dbb;
    }

/* Select */
.contact-us-input-wrapper select {
    cursor: pointer;
}

/* Textarea Wrapper */
.contact-us-textarea-wrapper {
    align-items: stretch;
}

    /* Textarea Icon Alignment */
    .contact-us-textarea-wrapper .contact-us-input-icon {
        align-items: flex-start;
        padding-top: 11px;
    }

/* Textarea */
.contact-us-input-wrapper textarea {
    min-height: 85px;
    resize: vertical;
    line-height: 1.5;
}

/* Submit Button */
.contact-us-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 39px;
    margin-top: 16px;
    padding: 0 19px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(110deg, #0867ed, #1489ff);
    box-shadow: 0 5px 13px rgba(8, 103, 237, .2);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
}

    /* Submit Hover */
    .contact-us-submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(8, 103, 237, .3);
    }

    /* Submit Arrow */
    .contact-us-submit-btn .fa-arrow-right {
        transition: transform .3s ease;
    }

    .contact-us-submit-btn:hover .fa-arrow-right {
        transform: translateX(4px);
    }

/* Office Card */
.contact-us-office-card {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 18px;
    padding: 12px;
    min-height: 100%;
}

/* Office Image */
.contact-us-office-image {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 9px;
    background: #e8f3ff;
}

    /* Office Image Element */
    .contact-us-office-image img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 260px;
        object-fit: cover;
        transition: transform .6s cubic-bezier(.22, 1, .36, 1);
    }

/* Office Image Hover */
.contact-us-office-card:hover .contact-us-office-image img {
    transform: scale(1.04);
}

/* Office Details */
.contact-us-office-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 8px 5px 8px 0;
}

/* Office Header */
.contact-us-office-header {
    margin-bottom: 16px;
}

/* Office Info List */
.contact-us-office-info {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* Office Info Item */
.contact-us-office-info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* Office Info Icon */
.contact-us-office-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e8f3ff;
    color: #0867ed;
    font-size: 13px;
}

/* Office Info Text */
.contact-us-office-info-item p,
.contact-us-office-info-item a {
    margin: 0;
    color: #365b92;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    /* Office Link Hover */
    .contact-us-office-info-item a:hover {
        color: #0867ed;
    }

/* Directions Button */
.contact-us-directions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    align-self: flex-start;
    min-height: 39px;
    margin-top: auto;
    padding: 0 19px;
    border-radius: 6px;
    background: linear-gradient(110deg, #0867ed, #1489ff);
    box-shadow: 0 5px 13px rgba(8, 103, 237, .2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

    /* Directions Hover */
    .contact-us-directions-btn:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(8, 103, 237, .3);
    }

    /* Directions Arrow */
    .contact-us-directions-btn i {
        transition: transform .3s ease;
    }

    .contact-us-directions-btn:hover i {
        transform: translateX(4px);
    }



/*---------------------------------=========================================  contact us extra  section ============================================================ ------------------------------------*/

/* Contact Us Extra Section */
.contact-us-extra-section {
    position: relative;
    padding: 0 0 55px;
    background: #f4f9ff;
}

/* Main Two Column Grid */
.contact-us-extra-grid {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    align-items: stretch;
    gap: 16px;
}

/* Left Column */
.contact-us-extra-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Common Cards */
.contact-us-channels-card,
.contact-us-faq-card,
.contact-us-map-card {
    background: #fff;
    border: 1px solid #e5effc;
    border-radius: 12px;
    box-shadow: 0 5px 22px rgba(15, 65, 135, .05);
}

/* Support Channels Card */
.contact-us-channels-card {
    padding: 12px;
}

/* Common Section Heading */
.contact-us-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Heading Icon */
.contact-us-section-heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 9px;
    background: #e8f3ff;
    color: #0867ed;
    font-size: 17px;
}

/* Heading Text */
.contact-us-section-heading-text {
    min-width: 0;
}

    .contact-us-section-heading-text h2 {
        margin: 0 0 3px;
        color: #082b70;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.25;
    }

    .contact-us-section-heading-text p {
        margin: 0;
        color: #52709e;
        font-size: 10px;
        line-height: 1.35;
    }

/* Support Channels Grid */
.contact-us-channels-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

/* Individual Support Channel */
.contact-us-channel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 100px;
    padding: 10px 5px;
    border: 1px solid #e4edfb;
    border-radius: 9px;
    background: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

    /* Channel Hover */
    .contact-us-channel-item:hover {
        transform: translateY(-3px);
        border-color: #b8d5ff;
        background: #f7fbff;
        box-shadow: 0 7px 18px rgba(8, 103, 237, .09);
        text-decoration: none;
    }

/* Channel Icon */
.contact-us-channel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 5px;
    border-radius: 50%;
    background: #e8f3ff;
    color: #0867ed;
    font-size: 18px;
    transition: transform .3s ease, background .3s ease;
}

/* Channel Icon Hover */
.contact-us-channel-item:hover .contact-us-channel-icon {
    transform: scale(1.12);
    background: #dcecff;
}

/* Channel Title */
.contact-us-channel-item h3 {
    margin: 0 0 4px;
    color: #082b70;
    font-size: 15px;
    font-weight: 800;
}

/* Channel Main Text */
.contact-us-channel-item strong {
    display: block;
    color: #0867ed;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Channel Description */
.contact-us-channel-item p {
    margin: 4px 0 0;
    color: #52709e;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

/* FAQ Card */
.contact-us-faq-card {
    padding: 12px;
}

/* FAQ Header */
.contact-us-faq-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* View All FAQ Button */
.contact-us-faq-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid #cfe1ff;
    border-radius: 7px;
    background: #fff;
    color: #0867ed;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease;
}

    /* FAQ Button Hover */
    .contact-us-faq-view-all:hover {
        background: #e8f3ff;
        border-color: #9bc6ff;
        color: #0867ed;
    }

/* FAQ Grid */
.contact-us-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
}

/* FAQ Item */
.contact-us-faq-item {
    min-width: 0;
    border: 1px solid #e1eafa;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
    transition: border-color .25s ease, background .25s ease;
}

    /* FAQ Question */
    .contact-us-faq-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 11px;
        color: #234d8b;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
        list-style: none;
    }

        .contact-us-faq-item summary::-webkit-details-marker {
            display: none;
        }

        /* FAQ Arrow */
        .contact-us-faq-item summary i {
            flex-shrink: 0;
            color: #0867ed;
            font-size: 13px;
            transition: transform .25s ease;
        }

    /* FAQ Open State */
    .contact-us-faq-item[open] {
        border-color: #bdd8ff;
        background: #f7fbff;
    }

        /* FAQ Arrow Rotation */
        .contact-us-faq-item[open] summary i {
            transform: rotate(180deg);
        }

/* FAQ Answer */
.contact-us-faq-answer {
    padding: 0 11px 11px;
    color: #52709e;
    font-size: 10px;
    line-height: 1.6;
}

/* Map Card */
.contact-us-map-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
}

/* Map Header */
.contact-us-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* View Google Maps Button */
.contact-us-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 7px 11px;
    border: 1px solid #cfe1ff;
    border-radius: 7px;
    background: #fff;
    color: #0867ed;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease;
}

    /* Google Maps Button Hover */
    .contact-us-map-link:hover {
        background: #e8f3ff;
        border-color: #9bc6ff;
        color: #0867ed;
    }

/* Map Frame */
.contact-us-map-frame {
    position: relative;
    flex: 1;
    min-height: 235px;
    overflow: hidden;
    border: 1px solid #e1eafa;
    border-radius: 9px;
    background: #e8f3ff;
}

    /* Embedded Map */
    .contact-us-map-frame iframe {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 235px;
        border: 0;
    }




/*---------------------------------=========================================  Departmental Contacts  section ============================================================ ------------------------------------*/

/* Departmental Contacts Section */
.contact-us-department-section {
    position: relative;
    padding: 0 0 45px;
    background: #f4f9ff;
}

/* Department Wrapper */
.contact-us-department-wrapper {
    background: #fff;
    border: 1px solid #e5effc;
    border-radius: 12px;
    box-shadow: 0 5px 22px rgba(15, 65, 135, .05);
    padding: 14px;
}

/* Department Header */
.contact-us-department-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Header Icon */
.contact-us-department-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #e8f3ff;
    color: #0867ed;
    font-size: 18px;
}

/* Header Text */
.contact-us-department-header-text h2 {
    margin: 0 0 3px;
    color: #082b70;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.contact-us-department-header-text p {
    margin: 0;
    color: #52709e;
    font-size: 10px;
    line-height: 1.4;
}

/* Department Grid */
.contact-us-department-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

/* Individual Department Card */
.contact-us-department-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 70px;
    padding: 12px 9px;
    border: 1px solid #e4edfb;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition: border-color .3s ease, box-shadow .3s ease;
}

/* Individual Theme Colors */
.department-flight {
    --department-color: #0867ed;
    --department-bg: #e8f3ff;
}

.department-bus {
    --department-color: #16a34a;
    --department-bg: #e7f8ef;
}

.department-train {
    --department-color: #ef4444;
    --department-bg: #ffebeb;
}

.department-visa {
    --department-color: #9333ea;
    --department-bg: #f3e8ff;
}

.department-holiday {
    --department-color: #f59e0b;
    --department-bg: #fff3e2;
}

.department-support {
    --department-color: #0891b2;
    --department-bg: #e2faff;
}

/* Department Icon */
.contact-us-department-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--department-bg);
    color: var(--department-color);
}

    /* Expanding Circle Background */
    .contact-us-department-icon::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        border-radius: 50%;
        background: var(--department-bg);
        transform: scale(1);
        transform-origin: center;
        transition: transform .7s cubic-bezier(.22, 1, .36, 1);
        pointer-events: none;
    }

    /* Icon */
    .contact-us-department-icon i {
        position: relative;
        z-index: 2;
        font-size: 20px;
        transition: transform .35s ease;
    }

/* Department Content */
.contact-us-department-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

    /* Department Title */
    .contact-us-department-content h3 {
        margin: 0;
        color: #082b70;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
        transition: color .3s ease;
    }

    /* Department Links */
    .contact-us-department-content a {
        color: #365b92;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.35;
        text-decoration: none;
        overflow-wrap: anywhere;
        transition: color .3s ease;
    }

        /* Department Links */
        .contact-us-department-content a:nth-of-type(2) {
            color: #365b92;
            font-size: 9px;
            font-weight: 600;
            line-height: 1.35;
            text-decoration: none;
            overflow-wrap: anywhere;
            transition: color .3s ease;
        }

        /* Department Link Hover */
        .contact-us-department-content a:hover {
            color: var(--department-color);
            text-decoration: underline;
        }

/* Department Card Hover */
.contact-us-department-item:hover {
    border-color: var(--department-color);
    box-shadow: 0 6px 18px rgba(15, 65, 135, .08);
}

    /* Expanding Circle Hover */
    .contact-us-department-item:hover .contact-us-department-icon::before {
        transform: scale(20);
    }

    /* Icon Hover */
    .contact-us-department-item:hover .contact-us-department-icon i {
        transform: scale(1.15) rotate(-8deg);
    }

    /* Title Hover */
    .contact-us-department-item:hover .contact-us-department-content h3 {
        color: var(--department-color);
    }









/* Responsive overrides for the Contact Us page */
/* Load after ContactUs.css or append to its end. */

/* Responsive safety */
.contact-us-page-banner,
.contact-us-support-section,
.contact-us-main-section,
.contact-us-extra-section,
.contact-us-department-section {
    max-width: 100%;
}

.contact-us-main-grid > *,
.contact-us-extra-grid > *,
.contact-us-department-grid > *,
.contact-us-channels-grid > *,
.contact-us-support-strip > * {
    min-width: 0;
}

.contact-us-department-content a,
.contact-us-channel-item strong {
    overflow-wrap: anywhere;
}

/* Large laptops: 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .contact-us-banner-container {
        padding-left: 55px !important;
        padding-right: 55px !important;
    }

    .contact-us-support-item {
        padding: 19px 17px;
        gap: 10px;
    }

    .contact-us-office-card {
        gap: 12px;
    }

    .contact-us-office-info {
        gap: 10px;
    }

    .contact-us-department-item {
        padding: 11px 7px;
        gap: 7px;
    }

    .contact-us-department-icon {
        width: 34px;
        height: 34px;
    }

        .contact-us-department-icon i {
            font-size: 17px;
        }
}

/* Small laptops: 992–1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .contact-us-banner-container {
        padding: 20px 42px !important;
    }

    .contact-us-banner-title {
        font-size: 44px;
    }

    .contact-us-journey-tagline {
        right: 25px;
    }

    .contact-us-support-item {
        padding: 18px 12px;
        gap: 9px;
    }

    .contact-us-support-icon {
        width: 42px;
        height: 42px;
    }

        .contact-us-support-icon i {
            font-size: 20px;
        }

    .contact-us-main-grid, .contact-us-extra-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
    }

    .contact-us-message-card {
        padding: 14px;
    }

    .contact-us-office-card {
        grid-template-columns: 1fr;
    }

    .contact-us-office-image img {
        height: 190px;
        min-height: 190px;
    }

    .contact-us-office-details {
        padding: 5px;
    }

    .contact-us-office-info {
        gap: 9px;
    }

    .contact-us-directions-btn {
        margin-top: 16px;
    }

    .contact-us-channels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-us-map-header {
        align-items: flex-start;
    }

    .contact-us-department-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contact-us-department-item {
        min-height: 72px;
    }
}

/* Tablets and smaller: up to 991px */
@media (max-width: 991.98px) {
    .contact-us-page-banner, .contact-us-banner-container {
        min-height: 350px;
    }

    .contact-us-banner-container {
        padding: 25px 35px !important;
    }

    .contact-us-banner-content {
        max-width: 370px;
    }

    .contact-us-banner-title {
        font-size: 42px;
    }

    .contact-us-banner-description {
        font-size: 13px;
    }

    .contact-us-journey-tagline {
        right: 22px;
        top: 92px;
        transform: rotate(-10deg) scale(.88);
        transform-origin: top right;
    }

    .contact-us-support-section {
        margin-top: -30px;
        padding-bottom: 25px;
    }

    .contact-us-support-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-us-support-item {
        padding: 16px 22px;
    }

        .contact-us-support-item:nth-child(2)::after {
            display: none;
        }

        .contact-us-support-item:nth-child(-n+2) {
            border-bottom: 1px solid #e5effc;
        }

    .contact-us-main-section {
        padding-bottom: 14px;
    }

    .contact-us-main-grid, .contact-us-extra-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .contact-us-message-card {
        padding: 18px;
    }

    .contact-us-office-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .contact-us-office-image img {
        min-height: 260px;
    }

    .contact-us-directions-btn {
        margin-top: 18px;
    }

    .contact-us-extra-section {
        padding-bottom: 14px;
    }

    .contact-us-channels-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .contact-us-map-frame, .contact-us-map-frame iframe {
        min-height: 300px;
    }

    .contact-us-department-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .contact-us-department-item {
        padding: 12px;
    }
}

/* Small tablets / large phones: up to 767px */
@media (max-width: 767.98px) {
    .contact-us-page-banner {
        min-height: 330px;
        background-position: center center;
    }

    .contact-us-banner-container {
        min-height: 330px;
        padding: 22px 24px !important;
        align-items: center;
    }

    .contact-us-banner-content {
        max-width: 300px;
        padding-bottom: 5px;
    }

    .contact-us-banner-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .contact-us-banner-title {
        font-size: 36px;
        letter-spacing: -.7px;
    }

    .contact-us-banner-description {
        max-width: 270px;
        font-size: 12px;
        line-height: 1.5;
    }

    .contact-us-journey-tagline {
        right: 10px;
        top: 75px;
        transform: rotate(-10deg) scale(.7);
    }

    .contact-us-support-section {
        margin-top: -24px;
        padding-bottom: 20px;
    }

    .contact-us-support-item {
        padding: 15px;
        gap: 10px;
    }

    .contact-us-support-icon {
        width: 42px;
        height: 42px;
    }

        .contact-us-support-icon i {
            font-size: 20px;
        }

    .contact-us-support-content h3 {
        font-size: 11px;
    }

    .contact-us-support-content p {
        font-size: 9px;
    }

    .contact-us-office-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .contact-us-office-image img {
        width: 100%;
        height: 260px;
        min-height: 0;
    }

    .contact-us-office-details {
        padding: 4px;
    }

    .contact-us-office-header {
        margin-bottom: 12px;
    }

    .contact-us-office-info {
        gap: 10px;
    }

    .contact-us-directions-btn {
        margin-top: 16px;
    }

    .contact-us-channels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-us-faq-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-us-map-header {
        align-items: flex-start;
    }

    .contact-us-map-frame, .contact-us-map-frame iframe {
        min-height: 260px;
    }

    .contact-us-department-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-us-department-section {
        padding-bottom: 30px;
    }
}

/* Phones: up to 575px */
@media (max-width: 575.98px) {
    .contact-us-page-banner {
        min-height: 345px;
        background-position: center center;
    }

    .contact-us-banner-container {
        min-height: 345px;
        padding: 24px 18px 55px !important;
        align-items: flex-start;
    }

    .contact-us-banner-content {
        max-width: min(100%, 290px);
        padding-bottom: 0;
    }

    .contact-us-banner-eyebrow {
        margin-bottom: 7px;
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .contact-us-banner-title {
        font-size: clamp(29px, 8vw, 36px);
        line-height: 1.08;
    }

    .contact-us-banner-description {
        max-width: 250px;
        font-size: 11px;
    }

    .contact-us-journey-tagline {
        top: auto;
        right: 12px;
        bottom: 47px;
        transform: rotate(-10deg) scale(.65);
        transform-origin: bottom right;
    }

    .contact-us-support-section {
        margin-top: -20px;
        padding-bottom: 15px;
    }

    .contact-us-support-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 10px;
    }

    .contact-us-support-item {
        min-height: 78px;
        padding: 12px 9px;
        gap: 8px;
    }

    .contact-us-support-icon {
        width: 36px;
        height: 36px;
    }

        .contact-us-support-icon i {
            font-size: 17px;
        }

    .contact-us-support-content h3 {
        font-size: 10px;
        line-height: 1.3;
    }

    .contact-us-support-content p {
        font-size: 9px;
        line-height: 1.35;
    }

    .contact-us-support-item:not(:last-child)::after {
        top: 20%;
        height: 60%;
    }

    .contact-us-support-item:nth-child(2)::after {
        display: none;
    }

    .contact-us-main-grid, .contact-us-extra-grid {
        gap: 12px;
    }

    .contact-us-message-card {
        padding: 13px;
    }

    .contact-us-card-header {
        gap: 9px;
        margin-bottom: 14px;
    }

    .contact-us-card-header-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .contact-us-card-header h2 {
        font-size: 14px;
    }

    .contact-us-card-header p {
        font-size: 10px;
    }

    .contact-us-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .contact-us-form-full {
        grid-column: auto;
    }

    .contact-us-form-group label {
        font-size: 11px;
    }

    .contact-us-input-wrapper {
        min-height: 41px;
    }

        .contact-us-input-wrapper input, .contact-us-input-wrapper select, .contact-us-input-wrapper textarea {
            font-size: 12px;
        }

        .contact-us-input-wrapper textarea {
            min-height: 100px;
        }

    .contact-us-submit-btn {
        min-height: 42px;
    }

    .contact-us-office-card {
        padding: 10px;
    }

    .contact-us-office-image img {
        height: 220px;
    }

    .contact-us-office-info-item p, .contact-us-office-info-item a {
        font-size: 11px;
    }

    .contact-us-directions-btn {
        min-height: 40px;
    }

    .contact-us-channels-card, .contact-us-faq-card, .contact-us-map-card {
        padding: 10px;
    }

    .contact-us-section-heading-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .contact-us-section-heading-text h2 {
        font-size: 12px;
    }

    .contact-us-section-heading-text p {
        font-size: 9px;
    }

    .contact-us-channel-item {
        min-height: 105px;
        padding: 10px 6px;
    }

    .contact-us-faq-top, .contact-us-map-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .contact-us-faq-view-all, .contact-us-map-link {
        font-size: 10px;
    }

    .contact-us-map-frame, .contact-us-map-frame iframe {
        min-height: 230px;
    }

    .contact-us-department-wrapper {
        padding: 10px;
    }

    .contact-us-department-header {
        gap: 9px;
    }

    .contact-us-department-header-text h2 {
        font-size: 13px;
    }

    .contact-us-department-grid {
        gap: 8px;
    }

    .contact-us-department-item {
        min-height: 82px;
        padding: 10px 7px;
        gap: 7px;
    }

    .contact-us-department-icon {
        width: 33px;
        height: 33px;
    }

        .contact-us-department-icon i {
            font-size: 17px;
        }

    .contact-us-department-content h3 {
        font-size: 10px;
    }

    .contact-us-department-content a {
        font-size: 9px;
    }
}

/* Small phones: up to 374px */
@media (max-width: 374.98px) {
    .contact-us-page-banner, .contact-us-banner-container {
        min-height: 355px;
    }

    .contact-us-banner-container {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .contact-us-banner-title {
        font-size: 29px;
    }

    .contact-us-banner-description {
        max-width: 220px;
        font-size: 10px;
    }

    .contact-us-journey-tagline {
        right: 4px;
        bottom: 40px;
        transform: rotate(-10deg) scale(.56);
    }

    .contact-us-support-item {
        padding: 10px 7px;
        gap: 6px;
    }

    .contact-us-support-icon {
        width: 32px;
        height: 32px;
    }

        .contact-us-support-icon i {
            font-size: 15px;
        }

    .contact-us-support-content h3 {
        font-size: 9px;
    }

    .contact-us-support-content p {
        font-size: 8px;
    }

    .contact-us-office-image img {
        height: 185px;
    }

    .contact-us-department-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-us-department-item {
        min-height: 65px;
        padding: 10px 12px;
    }

    .contact-us-department-icon {
        width: 36px;
        height: 36px;
    }

    .contact-us-department-content h3 {
        font-size: 11px;
    }

    .contact-us-department-content a {
        font-size: 10px;
    }
}

/* Accessible reduced motion */
@media (prefers-reduced-motion: reduce) {
    .contact-us-support-icon::before,
    .contact-us-department-icon::before,
    .contact-us-office-image img,
    .contact-us-channel-item,
    .contact-us-channel-icon {
        transition-duration: .01ms;
    }
}




.contact-mobile-fix {
    display: grid !important;
    grid-template-columns: 20px 100px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

    .contact-mobile-fix .contact-us-input-icon {
        grid-column: 1 !important;
        width: 20px !important;
        pointer-events: none !important;
    }

    .contact-mobile-fix select.ddl-countryCode {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100px !important;
        height: 36px !important;
        padding: 0 5px !important;
        border: 1px solid #d1d5db !important;
        border-bottom: 2px solid #3256a8 !important;
        border-radius: 5px !important;
        background: #fff !important;
        color: #334155 !important;
        /* Crucial click-fix properties */
        position: relative !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        opacity: 1 !important;
        /* Force browser native rendering */
        -webkit-appearance: menulist-button !important;
        appearance: menulist-button !important;
    }

    .contact-mobile-fix input[type="tel"] {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 36px !important;
        padding: 0 8px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 5px !important;
        background: #fff !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
    }


/* Full Screen Colorful Loader */
.contact-page-loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.contact-loader-content {
    text-align: center;
    padding: 30px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.15);
}

    .contact-loader-content h3 {
        margin: 18px 0 8px;
        color: #04204d;
        font-size: 21px;
    }

    .contact-loader-content p {
        margin: 0;
        color: #666;
        font-size: 14px;
    }

.contact-color-spinner {
    width: 65px;
    height: 65px;
    margin: 0 auto;
    border: 6px solid #e8eaf0;
    border-top: 6px solid #007bff;
    border-right: 6px solid #e83e8c;
    border-bottom: 6px solid #ffc107;
    border-left: 6px solid #28a745;
    border-radius: 50%;
    animation: contactColorSpin 0.8s linear infinite;
}

@keyframes contactColorSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
