/* ==========================================================================
   GLOBAL CONFIGURATION & COLOR ROOTS (OUTFIT FONT INTEGRATION)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* Brand Colors */
    --contact-primary-blue: #1d72f2;
    --contact-hover-blue: #0b5ed7;
    
    /* Background Gradients (Precise mapping from screenshot) */
    --contact-gradient-start: #02112e;
    --contact-gradient-mid-1: #052a6e;
    --contact-gradient-mid-2: #0c59cc;
    --contact-gradient-end: #1d72f2;
    
    /* Neutral Fills & Text Colors */
    --contact-bg-white: #ffffff;
    --contact-input-bg: #f8fafc;
    --contact-border-light: #f1f5f9;
    --contact-text-dark: #1e293b;
    --contact-text-muted: #64748b;
    --contact-text-placeholder: #cbd5e1;
}

/* ==========================================================================
   CONTACT PAGE HERO & MODULAR SEARCH BAR
   ========================================================================== */

.contact-hero-search-section {
    width: 100%;
    /* Gradient configured using color roots */
    background: linear-gradient(90deg, 
       rgba(2, 15, 43, 1) 0%, 
        rgba(4, 30, 76, 1) 35%, 
        rgba(6, 52, 123, 1) 75%, 
        rgba(10, 82, 188, 1) 100%
    );
    padding: 60px 0 80px 0;
    color: var(--contact-bg-white);
    box-sizing: border-box;
   font-family: "Outfit", sans-serif;
}

.contact-hero-search-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Breadcrumb Navigation */
.contact-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
}

.contact-breadcrumb-home {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.contact-breadcrumb-home:hover {
    color: var(--contact-bg-white);
}

.contact-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    display: inline-flex;
    align-items: center;
}

.contact-breadcrumb-current {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Typography Main Headings */
.contact-hero-main-title {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--contact-bg-white);
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.contact-hero-sub-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 35px 0;
    font-weight: 400;
}

/* White Modular Search Bar Base Wrapper */
.contact-search-bar-wrapper {
    width: 100%;
    background: var(--contact-bg-white);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 15px 35px rgba(2, 17, 46, 0.15);
    box-sizing: border-box;
}

.contact-search-bar-form {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    width: 100%;
}

/* Input Fields Geometry configuration */
.contact-search-input-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-search-input-field label {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--contact-text-dark);
    margin-bottom: 8px;
    text-transform: capitalize;
}

.contact-select-custom-wrapper,
.contact-input-custom-wrapper {
    position: relative;
    width: 100%;
}

/* Form Controls Root Variables Integration */
.contact-select-custom-wrapper select,
.contact-input-custom-wrapper input {
    width: 100%;
    background: var(--contact-input-bg);
    border: 1px solid var(--contact-border-light);
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: var(--contact-text-muted);
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.contact-select-custom-wrapper select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2.5 5.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
}

.contact-input-custom-wrapper input::placeholder {
    color: var(--contact-text-placeholder);
}

.contact-input-chevron-indicator {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--contact-text-placeholder);
    font-size: 12px;
    pointer-events: none;
    display: inline-flex;
}

/* Primary Action Search Trigger Button */
.contact-search-submit-action {
    flex-shrink: 0;
}

.contact-search-btn-trigger {
    background: var(--contact-primary-blue);
    color: var(--contact-bg-white);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 28px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.contact-search-btn-trigger:hover {
    background: var(--contact-hover-blue);
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM MEDIA QUERIES
   ========================================================================== */
@media (max-width: 991px) {
    .contact-search-bar-form {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .contact-search-submit-action,
    .contact-search-btn-trigger {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .contact-hero-search-section {
        padding: 40px 0 60px 0;
    }
    .contact-hero-main-title {
        font-size: 24px;
    }
    .contact-search-bar-wrapper {
        padding: 16px;
    }
}
/* ==========================================================================
   COLOR ROOTS & GLOBAL STRUCTURE SETTING (OUTFIT CORE CONFIGURATION)
   ========================================================================== */
:root {
    /* Brand Accent Sync */
    --contact-form-primary: #1d72f2;
    --contact-form-btn-hover: #0b5ed7;
    
    /* Structural Fills & Boarders mapped from image_943da3.png */
    --contact-card-bg: #ffffff;
    --contact-body-bg: #f8fafc;
    --contact-border-soft: #f1f5f9;
    --contact-border-card: #e2e8f0;
    --contact-field-bg: #f8fafc;
    
    /* Precise Typography Mappings */
    --contact-title-color: #0f172a;
    --contact-desc-color: #64748b;
    --contact-label-color: #1e293b;
    --contact-placeholder-color: #cbd5e1;
    
    /* Icon Decorative Fills */
    --contact-icon-blue-bg: #eff6ff;
    --contact-icon-blue-text: #1d72f2;
}

/* ==========================================================================
   LAYOUT STRUCTURE SECTION RULES
   ========================================================================== */
.contact-details-form-section {
    width: 100%;
    background-color: var(--contact-body-bg);
    padding: 60px 0 100px 0;
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
}

.contact-details-form-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 30px; /* Precise visual gap distribution between column assets */
    align-items: flex-start;
}

/* LEFT SIDEBAR AREA CONFIGURATIONS */
.contact-sidebar-column {
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

.contact-sidebar-card {
    background: var(--contact-card-bg);
    border: 1px solid var(--contact-border-card);
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
}

.contact-card-main-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--contact-title-color);
    margin: 0 0 24px 0;
    letter-spacing: -0.2px;
}

/* Card 01: Information Items Layout Rules */
.contact-info-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info-item-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-info-icon-shape {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    margin-top: 2px;
}

.icon-bg-blue {
    background: var(--contact-icon-blue-bg);
    color: var(--contact-icon-blue-text);
}

.contact-info-text-block {
    display: flex;
    flex-direction: column;
}

.contact-info-text-block label {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--contact-desc-color);
    margin-bottom: 2px;
}

.contact-info-text-block p {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--contact-title-color);
    line-height: 1.5;
    margin: 0;
}

/* Card 02: Quick Help Interaction Lines */
.contact-quick-links-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-quick-link-row {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 4px 0;
    transition: opacity 0.2s ease;
}

.contact-quick-link-row:hover {
    opacity: 0.85;
}

.icon-bg-light-blue {
    background: #f0fdf4; /* Eco soft green/light shades adaptive to custom directories icons */
    color: #16a34a;
}

/* Mapped specifically from custom icon styles in screenshot */
.contact-quick-links-wrapper .contact-quick-link-row:nth-child(1) .contact-quick-icon-shape { background: #eff6ff; color: #1d72f2; }
.contact-quick-links-wrapper .contact-quick-link-row:nth-child(2) .contact-quick-icon-shape { background: #f0fdf4; color: #16a34a; }
.contact-quick-links-wrapper .contact-quick-link-row:nth-child(3) .contact-quick-icon-shape { background: #fff7ed; color: #ea580c; }

.contact-quick-icon-shape {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.contact-quick-text-block h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--contact-title-color);
    margin: 0 0 1px 0;
}

.contact-quick-text-block p {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    color: var(--contact-desc-color);
    margin: 0;
}

/* ==========================================================================
   RIGHT SIDEBAR AREA CONFIGURATIONS (MESSAGE CONTROL DEVIATIONS)
   ========================================================================== */
.contact-form-main-column {
    flex: 1;
    width: 100%;
}

.contact-msg-form-card {
    background: var(--contact-card-bg);
    border: 1px solid var(--contact-border-card);
    border-radius: 16px;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
}

.contact-form-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--contact-title-color);
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
}

.contact-form-card-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    color: var(--contact-desc-color);
    margin: 0 0 35px 0;
    font-weight: 400;
}

/* Form Controls Matrix Geometry Configuration */
.contact-form-flex-row {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}

.contact-form-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-full-width-group {
    margin-bottom: 20px;
}

.contact-form-input-group label {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--contact-label-color);
    margin-bottom: 8px;
}

.contact-form-input-group input,
.contact-form-input-group textarea {
    width: 100%;
    background: var(--contact-field-bg);
    border: 1px solid var(--contact-border-soft);
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    color: var(--contact-title-color);
    outline: none;
    box-sizing: border-box;
}

.contact-form-input-group textarea {
    resize: none; /* Disables standard manual text resizing handles */
}

.contact-form-input-group input::placeholder,
.contact-form-input-group textarea::placeholder {
    color: var(--contact-placeholder-color);
}

/* Focus Interaction States rules */
.contact-form-input-group input:focus,
.contact-form-input-group textarea:focus {
    border-color: #cbd5e1;
}

/* Submission Primary Button Box */
.contact-form-submit-action-wrapper {
    width: 100%;
    margin-top: 24px;
}

.contact-form-btn-submit {
    width: 100%;
    background: var(--contact-form-primary);
    color: var(--contact-card-bg);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.contact-form-btn-submit:hover {
    background: var(--contact-form-btn-hover);
}

/* ==========================================================================
   RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */
@media (max-width: 991px) {
    .contact-details-form-container {
        flex-direction: column-reverse; /* Form stays high priority on small screen structures */
        gap: 35px;
    }
    .contact-sidebar-column {
        width: 100%;
    }
    .contact-msg-form-card {
        padding: 30px 20px;
    }
}

@media (max-width: 600px) {
    .contact-form-flex-row {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0;
    }
    .contact-form-flex-row .contact-form-input-group {
        margin-bottom: 20px;
    }
}