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

:root {
    --fed-gradient-navy: #02112e;
    --fed-gradient-blue-mid: #052c73;
    --fed-gradient-blue-vivid: #0c5bcc;
    --fed-gradient-blue-bright: #1d72f2;
    
    --fed-btn-primary: #1d72f2;
    --fed-btn-hover: #0b5ed7;
    
    --fed-color-white: #ffffff;
    --fed-input-bg: #f8fafc;
    --fed-border-light: #f1f5f9;
    --fed-text-dark: #1e293b;
    --fed-text-placeholder: #cbd5e1;
}

/* ==========================================================================
   MAIN HERO SECTIONS GEOMETRY
   ========================================================================== */
.fed-hero-section {
    width: 100%;
    position: relative;
    background: linear-gradient(90deg, 
        rgba(2, 17, 46, 0.96) 0%, 
        rgba(5, 44, 115, 0.94) 35%, 
        rgba(12, 91, 204, 0.90) 75%, 
        rgba(29, 114, 242, 0.92) 100%
    ), 
    url('./images/card 10.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 90px 0 110px 0;
    font-family: 'Outfit', sans-serif;
    color: var(--fed-color-white);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.fed-hero-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

/* LEFT TRACK COMPONENT */
.fed-hero-content-left {
    flex: 1;
    max-width: 580px;
}

.fed-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.fed-breadcrumb-home {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

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

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

.fed-hero-main-title {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: var(--fed-color-white);
    margin: 0 0 16px 0;
    letter-spacing: -0.6px;
    line-height: 1.25;
}

.fed-hero-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* ==========================================================================
   RIGHT TRACK SEARCH COMPONENT (EXACT SAME-LINE ROW STRUCTURE)
   ========================================================================== */
.fed-hero-search-right {
    flex: 1;
    max-width: 540px;
}

.fed-search-box-wrapper {
    width: 100%;
    background: var(--fed-color-white);
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 20px 40px rgba(2, 17, 46, 0.25);
    box-sizing: border-box;
}

.fed-search-box-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #031533;
    margin: 0 0 24px 0;
    letter-spacing: -0.3px;
    line-height: 1.35;
}

.fed-search-box-form {
    width: 100%;
}

/* Inline Flex Grid Row Alignment */
.fed-search-inline-row {
    display: flex;
    align-items: flex-end; /* Labels ke neechay content vertically perfect lagay ga */
    gap: 16px;
    width: 100%;
}

.fed-search-input-group {
    flex: 1; /* Input field complete dynamic remaining container stretch space ly gi */
    display: flex;
    flex-direction: column;
}

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

.fed-input-field-wrapper {
    width: 100%;
}

.fed-input-field-wrapper input {
    width: 100%;
    background: var(--fed-input-bg);
    border: 1px solid var(--fed-border-light);
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    color: var(--fed-text-dark);
    outline: none;
    box-sizing: border-box;
}

/* Button Track Fixed Width Behavior */
.fed-search-action-group {
    flex-shrink: 0;
}

.fed-search-btn-submit {
    background: var(--fed-btn-primary);
    color: var(--fed-color-white);
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 14px 26px; /* Symmetrical padding layout height dynamic configuration */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.fed-search-btn-submit:hover {
    background: var(--fed-btn-hover);
}

/* ==========================================================================
   RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */
@media (max-width: 991px) {
    .fed-hero-container {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }
}

@media (max-width: 576px) {
    /* Mobile standard shift to single row tracking */
    .fed-search-inline-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .fed-search-btn-submit {
        width: 100%;
        justify-content: center;
    }
}
/* ==========================================================================
   COLOR ROOTS & SPECIFICATIONS (PIXEL PERFECT DIRECTIVES)
   ========================================================================== */
:root {
    /* Section Main Structural Canvas Colors */
    --us-code-section-bg: #ffffff;
    
    /* Left Card Theme Gradient (Exact Match to Hero Base Transition) */
    --us-code-grad-start: #031c4d;
    --us-code-grad-end: #0c57c9;
    
    /* Right Card Theme Solid Tone */
    --us-code-dark-navy: #0e1624;
    
    /* Typography Directives Mapped from image_936fa1.png */
    --us-code-heading-color: #0c1829;
    --us-code-text-white: #ffffff;
    --us-code-desc-muted: #cbd5e1;
    --us-code-btn-text-blue: #1d72f2;
}

/* ==========================================================================
   SECTION CANVAS & GRID STRUCTURE
   ========================================================================== */
.us-code-cards-section {
    width: 100%;
    background-color: var(--us-code-section-bg);
    padding: 60px 0 0px 0;
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
}

.us-code-cards-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Text Rules */
.us-code-section-header {
    margin-bottom: 32px;
}

.us-code-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--us-code-heading-color);
    margin: 0;
    letter-spacing: -0.4px;
}

/* Grid Matrix Distribution Setup */
.us-code-grid-wrapper {
    display: flex;
    gap: 24px;
    width: 100%;
}

/* ==========================================================================
   INDIVIDUAL DECORATIVE CARDS ARCHITECTURE
   ========================================================================== */
.us-code-card-item {
    flex: 1;
    border-radius: 20px; /* Fluid rounded corners matching image_936fa1.png */
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Card Variation 01: Left Gradient Panel */
.card-gradient-royal-blue {
    background: linear-gradient(135deg, rgba(4, 22, 57, 1) 0%, rgba(13, 78, 179, 1) 100%);
    box-shadow: 0 10px 30px rgba(12, 87, 201, 0.12);
}

/* Card Variation 02: Right Solid Dark Panel */
.card-solid-dark-navy {
    background-color: var(--us-code-dark-navy);
    box-shadow: 0 10px 30px rgba(14, 22, 36, 0.08);
}

/* Inner Text & Paragraph Alignments */
.us-code-card-inner-body {
    width: 100%;
}

.us-code-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--us-code-text-white);
    margin: 0 0 12px 0;
    letter-spacing: -0.2px;
}

.us-code-card-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--us-code-desc-muted);
    max-width: 500px;
    margin: 0 0 30px 0;
    font-weight: 400;
}

/* ==========================================================================
   WHITE ACTION BUTTONS SPECS
   ========================================================================== */
.us-code-card-action-btn-row {
    width: 100%;
    display: flex;
}
.us-code-card-action-btn-row a{
    color:black !important;

}

.us-code-card-primary-btn {
    background-color: var(--us-code-text-white);
    color: var(--us-code-btn-text-blue);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.us-code-card-primary-btn i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

/* Hover Interactive Mechanics */
.us-code-card-primary-btn:hover {
    background-color: #f8fafc;
}

.us-code-card-primary-btn:hover i {
    transform: translateX(3px); /* Subtle forward micro-interaction for arrow font */
}

/* ==========================================================================
   RESPONSIVE LAYOUT MATRIX
   ========================================================================== */
@media (max-width: 991px) {
    .us-code-grid-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    .us-code-card-item {
        padding: 35px 25px;
        min-height: auto;
    }
}

@media (max-width: 576px) {
    .us-code-cards-section {
        padding: 40px 0 60px 0;
    }
    .us-code-section-title {
        font-size: 21px;
    }
    .us-code-card-title {
        font-size: 16.5px;
    }
    .us-code-card-primary-btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}/* ==========================================================================
   COLOR ROOTS & CONFIGURATIONS (OUTFIT ARCHITECTURE INTEGRATION)
   ========================================================================== */
:root {
    --m-cta-bg-canvas: #ffffff;
    
    /* Curved Container Gradient Specs */
    --m-cta-grad-dark: #01102b;
    --m-cta-grad-mid: #053ca6;
    --m-cta-grad-bright: #0c5ce3;
    
    /* Interactive Elements Components */
    --m-cta-btn-blue: #1d72f2;
    --m-cta-btn-hover: #0b5ed7;
    --m-cta-card-white: #ffffff;
    --m-cta-field-fill: #f8fafc;
    --m-cta-border-light: #f1f5f9;
    
    /* Typography Palette */
    --m-cta-text-dark: #1e293b;
    --m-cta-text-muted: #64748b;
    --m-cta-text-holder: #cbd5e1;
}

/* ==========================================================================
   STRUCTURAL CONTAINER CONFIGURATION (CLEAN STANDALONE SPACING)
   ========================================================================== */
.map-cta-search-section {
    width: 100%;
    background-color: var(--m-cta-bg-canvas);
    padding: 60px 0; /* Clean balanced padding since map is removed */
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
}

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

/* ==========================================================================
   CURVED GRADIENT BOX ARCHITECTURE
   ========================================================================== */
.map-cta-card-wrapper {
    width: 100%;
    background: linear-gradient(90deg, 
        rgba(3, 20, 54, 1) 0%, 
        rgba(5, 41, 99, 1) 45%, 
        rgba(12, 92, 227, 1) 100%
    );
    border-radius: 24px;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 15px 40px rgba(1, 16, 43, 0.12);
}

/* Header Text Rules */
.map-cta-header-block {
    margin-bottom: 28px;
    color: var(--m-cta-card-white);
}

.map-cta-main-title {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.4px;
}

.map-cta-sub-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-weight: 400;
}

/* ==========================================================================
   WHITE SEARCH BAR CONTROLS SPECIFICATIONS
   ========================================================================== */
.map-cta-search-bar-inner {
    width: 100%;
    background: var(--m-cta-card-white);
    border-radius: 14px;
    padding: 16px 20px;
    box-sizing: border-box;
}

.map-cta-search-form {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
}

.map-cta-input-group {
    display: flex;
    flex-direction: column;
}

.spec-dropdown-width,
.spec-text-width {
    flex: 1;
}

.map-cta-input-group label {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--m-cta-text-dark);
    margin-bottom: 8px;
}

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

.map-cta-select-custom-wrapper select,
.map-cta-input-custom-wrapper input {
    width: 100%;
    background: var(--m-cta-field-fill);
    border: 1px solid var(--m-cta-border-light);
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    color: var(--m-cta-text-muted);
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.map-cta-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: 11px;
    padding-right: 40px;
}

.map-cta-input-custom-wrapper input::placeholder {
    color: var(--m-cta-text-holder);
}

.map-cta-chevron-indicator {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--m-cta-text-holder);
    font-size: 11px;
    pointer-events: none;
    display: inline-flex;
}

.map-cta-action-group {
    flex-shrink: 0;
}

.map-cta-btn-submit {
    background: var(--m-cta-btn-blue);
    color: var(--m-cta-card-white);
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.map-cta-btn-submit:hover {
    background: var(--m-cta-btn-hover);
}

/* ==========================================================================
   RESPONSIVE DESIGN ADAPTIVE DISPLAYS
   ========================================================================== */
@media (max-width: 991px) {
    .map-cta-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .map-cta-action-group,
    .map-cta-btn-submit {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .map-cta-card-wrapper {
        padding: 24px 20px;
        border-radius: 16px;
    }
    .map-cta-main-title {
        font-size: 20px;
    }
    .map-cta-search-bar-inner {
        padding: 16px;
    }
}