/* ═══════════════════════════════════════════════════════════════════
   HIRE DEVELOPER RESOURCES — Premium Theme
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────── */
.hdr-hero-section {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0e2b5c 0%, #1a4a9f 50%, #0d3b8e 100%);
    overflow: hidden;
    padding: 100px 0 60px;
    width: 100%;
}
.hdr-hero-section::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.hdr-hero-section::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: -60px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(3,169,244,0.08);
    pointer-events: none;
}
.hdr-hero-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 80% 20%, rgba(3,169,244,0.15) 0%, transparent 60%);
}
.hdr-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 15px;
}
.hdr-hero-badge {
    display: inline-block;
    background: rgba(3,169,244,0.2);
    border: 1px solid rgba(3,169,244,0.5);
    color: #03d8f5;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 30px;
    margin-bottom: 22px;
}
.hdr-hero-title {
    font-size: 46px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hdr-hero-desc {
    font-size: 17px;
    color: rgba(255,255,255,0.80);
    line-height: 1.7;
    margin-bottom: 34px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.hdr-hero-btns {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 52px;
}
.hdr-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #03a9f4;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 6px 24px rgba(3,169,244,0.40);
}
.hdr-btn-primary:hover {
    background: #0288d1;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(3,169,244,0.50);
}
.hdr-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 30px;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.5);
    text-decoration: none !important;
    transition: all 0.3s ease;
}
.hdr-btn-outline:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    transform: translateY(-2px);
}
.hdr-hero-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 24px 30px;
    backdrop-filter: blur(10px);
}
.hdr-stat {
    text-align: center;
    padding: 0 32px;
}
.hdr-stat-num {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #03d8f5;
    line-height: 1;
    margin-bottom: 6px;
}
.hdr-stat-lbl {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.70);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}
.hdr-stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,0.20);
}

/* ── Shared Section Styles ─────────────────────────────────────────── */
.hdr-section {
    padding: 80px 0;
}
.hdr-section-dark {
    background: #12213d;
}
.hdr-section-light {
    background: #f5f7fc;
}
.hdr-section-gradient {
    background: linear-gradient(135deg, #0e2b5c 0%, #1565c0 100%);
}
.hdr-process-section {
    background: #fff;
}
.hdr-section-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px;
}
.hdr-section-title {
    font-size: 34px;
    font-weight: 800;
    color: #0e2b5c;
    margin: 10px 0 14px;
    line-height: 1.2;
}
.hdr-section-dark .hdr-section-title {
    color: #ffffff;
}
.hdr-section-light .hdr-section-title {
    color: #0e2b5c;
}
.hdr-section-dark .hdr-section-sub {
    color: #e0e7f1;
}
.hdr-section-light .hdr-section-sub {
    color: #5a6a85;
}
.hdr-text-white { color: #fff !important; }
.hdr-text-white70 { color: rgba(255,255,255,0.75) !important; }
.hdr-section-sub {
    font-size: 16px;
    color: #5a6a85;
    line-height: 1.7;
}
.hdr-tag {
    display: inline-block;
    background: rgba(3,169,244,0.15);
    color: #03a9f4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.hdr-section-dark .hdr-tag {
    background: rgba(255,255,255,0.15);
    color: #64b5f6;
    border: 1px solid rgba(100,181,246,0.3);
}
.hdr-tag-blue { background: rgba(14,43,92,0.1); color: #0e2b5c; }
.hdr-tag-white { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }

/* ── Cards Grid ────────────────────────────────────────────────────── */
.hdr-cards-grid {
    display: grid;
    gap: 24px;
}
.hdr-cards-2 { grid-template-columns: repeat(2, 1fr); }
.hdr-cards-3 { grid-template-columns: repeat(3, 1fr); }
.hdr-cards-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Dark Cards (Mobile section) ───────────────────────────────────── */
.hdr-card {
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-block-start: 24px;
}
.hdr-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.30);
}
.hdr-card-dark {
    background: #1a3060;
    border: 1px solid rgba(255,255,255,0.08);
}
.hdr-card-img {
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.hdr-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.hdr-card:hover .hdr-card-img img {
    transform: scale(1.06);
}
.hdr-card-icon-plain {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d3b8e, #1a6cf5);
}
.hdr-card-icon-plain .fa {
    font-size: 64px;
    color: rgba(255,255,255,0.80);
}
.hdr-card-body {
    padding: 0px 24px 26px;
}
.hdr-card-dark .hdr-card-body h3 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.hdr-card-dark .hdr-card-body p {
    font-size: 14px;
    color: rgba(255,255,255,0.68);
    line-height: 22px;
    margin-bottom: 16px;
}
.hdr-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #03d8f5 !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    transition: gap 0.2s ease, color 0.2s ease;
}
/* .hdr-card-link:hover { gap: 10px; color: #fff !important; } */

/* ── Light Cards (Web section) ─────────────────────────────────────── */
.hdr-card-light {
    background: #fff;
    border: 1px solid #e4eaf5;
    box-shadow: 0 4px 16px rgba(14,43,92,0.06);
    text-align: center;
    padding: 0;
}
.hdr-card-light:hover {
    box-shadow: 0 16px 40px rgba(14,43,92,0.14);
    border-color: #03a9f4;
}
.hdr-card-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f4fd, #d0eaf9);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto 16px;
    transition: background 0.3s ease;
}
.hdr-card-icon-wrap .fa {
    font-size: 28px;
    color: #0e2b5c;
    transition: color 0.3s ease;
}
.hdr-card-light:hover .hdr-card-icon-wrap {
    background: linear-gradient(135deg, #03a9f4, #0e2b5c);
}
.hdr-card-light:hover .hdr-card-icon-wrap .fa { color: #fff; }
.hdr-card-light .hdr-card-body { padding: 0 22px 26px; }
.hdr-card-light .hdr-card-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0e2b5c;
    margin-bottom: 8px;
}
.hdr-card-light .hdr-card-body p {
    font-size: 13px;
    color: #5a6a85;
    line-height: 1.6;
    margin-bottom: 14px;
}
.hdr-card-link-dark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #03a9f4 !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    transition: gap 0.2s ease;
}
.hdr-card-link-dark:hover { gap: 10px; color: #0e2b5c !important; }

/* ── Trend Cards (Mobile App Trends) ───────────────────────────────── */
.hdr-card-trend {
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    padding: 40px 28px 36px;
    text-align: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(14,43,92,0.06);
}
.hdr-card-trend-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f4fd, #d0eaf8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: #03a9f4;
    transition: transform 0.3s ease, background 0.3s ease;
}
.hdr-card-trend:hover .hdr-card-trend-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #03a9f4, #0e2b5c);
    color: #fff;
}
.hdr-card-trend h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0e2b5c;
    margin-bottom: 12px;
}
.hdr-card-trend p {
    font-size: 14px;
    color: #555;
    line-height: 1.65;
    margin: 0;
}
.hdr-card-trend::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: height 0.3s ease;
}
.hdr-card-trend:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(14,43,92,0.12);
}
.hdr-card-trend-blue::before { background: linear-gradient(90deg, #03a9f4, #0e2b5c); }
.hdr-card-trend-blue:hover { box-shadow: 0 16px 40px rgba(3,169,244,0.25); }
.hdr-card-trend-purple::before { background: linear-gradient(90deg, #9c27b0, #6a1b9a); }
.hdr-card-trend-purple:hover { box-shadow: 0 16px 40px rgba(156,39,176,0.25); }
.hdr-card-trend-cyan::before { background: linear-gradient(90deg, #00bcd4, #0097a7); }
.hdr-card-trend-cyan:hover { box-shadow: 0 16px 40px rgba(0,188,212,0.25); }
.hdr-card-trend-green::before { background: linear-gradient(90deg, #4caf50, #2e7d32); }
.hdr-card-trend-green:hover { box-shadow: 0 16px 40px rgba(76,175,80,0.25); }
.hdr-card-trend-orange::before { background: linear-gradient(90deg, #ff9800, #e65100); }
.hdr-card-trend-orange:hover { box-shadow: 0 16px 40px rgba(255,152,0,0.25); }
.hdr-card-trend-red::before { background: linear-gradient(90deg, #f44336, #c62828); }
.hdr-card-trend-red:hover { box-shadow: 0 16px 40px rgba(244,67,54,0.25); }

/* ── Monetize Cards (Revenue Models) ───────────────────────────────── */

.hdr-card-monetize {
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(14,43,92,0.06);
}
.monetization-section .hdr-card-monetize {
    padding: 0;
}
.hdr-card-monetize h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0e2b5c;
    margin: 0 0 12px 0;
}
.hdr-card-monetize > p {
    font-size: 14px;
    color: #5a6a85;
    line-height: 1.6;
    margin: 0 0 20px 0;
}
.hdr-card-monetize::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 12px;
}
.hdr-card-monetize:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 40px rgba(14,43,92,0.12);
}
.hdr-card-monetize-gold {
    border-left: 5px solid #ffc107;
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
}
.hdr-card-monetize-gold:hover { box-shadow: 0 16px 40px rgba(255,193,7,0.35); }
.hdr-card-monetize-blue {
    border-left: 5px solid #2196f3;
    background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
}
.hdr-card-monetize-blue:hover { box-shadow: 0 16px 40px rgba(33,150,243,0.35); }
.hdr-card-monetize-green {
    border-left: 5px solid #4caf50;
    background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
}
.hdr-card-monetize-green:hover { box-shadow: 0 16px 40px rgba(76,175,80,0.35); }
.hdr-card-monetize-orange {
    border-left: 5px solid #ff9800;
    background: linear-gradient(135deg, #fff3e0 0%, #fff 100%);
}
.hdr-card-monetize-orange:hover { box-shadow: 0 16px 40px rgba(255,152,0,0.35); }
.hdr-card-monetize-red {
    border-left: 5px solid #f44336;
    background: linear-gradient(135deg, #ffebee 0%, #fff 100%);
}
.hdr-card-monetize-red:hover { box-shadow: 0 16px 40px rgba(244,67,54,0.35); }

/* ── Why Choose Us Cards ───────────────────────────────────────────── */

.hdr-card-why {
    background: #fff;
    border: 1px solid #e4eaf5;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.why-choose-us-section .hdr-card-why {
    padding: 0;
}
.hdr-card-why .hdr-why-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
}
.hdr-card-why h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0e2b5c;
    margin: 0 0 12px 0;
}
.hdr-card-why p {
    font-size: 13px;
    color: #5a6a85;
    line-height: 1.6;
    margin: 0;
}
.hdr-card-why::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    transition: height 0.3s ease;
}
.hdr-card-why:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(14,43,92,0.15);
}
.hdr-card-why-blue::after { background: linear-gradient(90deg, #03a9f4, #0e2b5c); }
.hdr-card-why-blue:hover::after { height: 4px; }
.hdr-card-why-blue .hdr-why-icon { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); color: #03a9f4; }

.hdr-card-why-purple::after { background: linear-gradient(90deg, #9c27b0, #6a1b9a); }
.hdr-card-why-purple:hover::after { height: 4px; }
.hdr-card-why-purple .hdr-why-icon { background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); color: #9c27b0; }

.hdr-card-why-green::after { background: linear-gradient(90deg, #4caf50, #2e7d32); }
.hdr-card-why-green:hover::after { height: 4px; }
.hdr-card-why-green .hdr-why-icon { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); color: #4caf50; }

.hdr-card-why-orange::after { background: linear-gradient(90deg, #ff9800, #e65100); }
.hdr-card-why-orange:hover::after { height: 4px; }
.hdr-card-why-orange .hdr-why-icon { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); color: #ff9800; }

.hdr-card-why-red::after { background: linear-gradient(90deg, #f44336, #c62828); }
.hdr-card-why-red:hover::after { height: 4px; }
.hdr-card-why-red .hdr-why-icon { background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); color: #f44336; }

.hdr-card-why-cyan::after { background: linear-gradient(90deg, #00bcd4, #0097a7); }
.hdr-card-why-cyan:hover::after { height: 4px; }
.hdr-card-why-cyan .hdr-why-icon { background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%); color: #00bcd4; }

.hdr-card-why-teal::after { background: linear-gradient(90deg, #009688, #00695c); }
.hdr-card-why-teal:hover::after { height: 4px; }

.hdr-icon-why-blue { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
.hdr-icon-why-blue .fa { color: #03a9f4; }
.hdr-card-why-blue:hover .hdr-icon-why-blue { background: linear-gradient(135deg, #03a9f4, #0e2b5c); }
.hdr-card-why-blue:hover .hdr-icon-why-blue .fa { color: #fff; }

.hdr-icon-why-purple { background: linear-gradient(135deg, #f3e5f5, #e1bee7); }
.hdr-icon-why-purple .fa { color: #9c27b0; }
.hdr-card-why-purple:hover .hdr-icon-why-purple { background: linear-gradient(135deg, #9c27b0, #6a1b9a); }
.hdr-card-why-purple:hover .hdr-icon-why-purple .fa { color: #fff; }

.hdr-icon-why-cyan { background: linear-gradient(135deg, #e0f2f1, #b2dfdb); }
.hdr-icon-why-cyan .fa { color: #00bcd4; }
.hdr-card-why-cyan:hover .hdr-icon-why-cyan { background: linear-gradient(135deg, #00bcd4, #0097a7); }
.hdr-card-why-cyan:hover .hdr-icon-why-cyan .fa { color: #fff; }

.hdr-icon-why-green { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }
.hdr-icon-why-green .fa { color: #4caf50; }
.hdr-card-why-green:hover .hdr-icon-why-green { background: linear-gradient(135deg, #4caf50, #2e7d32); }
.hdr-card-why-green:hover .hdr-icon-why-green .fa { color: #fff; }

.hdr-icon-why-orange { background: linear-gradient(135deg, #fff3e0, #ffe0b2); }
.hdr-icon-why-orange .fa { color: #ff9800; }
.hdr-card-why-orange:hover .hdr-icon-why-orange { background: linear-gradient(135deg, #ff9800, #e65100); }
.hdr-card-why-orange:hover .hdr-icon-why-orange .fa { color: #fff; }

.hdr-icon-why-red { background: linear-gradient(135deg, #ffebee, #ffcdd2); }
.hdr-icon-why-red .fa { color: #f44336; }
.hdr-card-why-red:hover .hdr-icon-why-red { background: linear-gradient(135deg, #f44336, #c62828); }
.hdr-card-why-red:hover .hdr-icon-why-red .fa { color: #fff; }

.hdr-icon-why-teal { background: linear-gradient(135deg, #e0f2f1, #b2dfdb); }
.hdr-icon-why-teal .fa { color: #009688; }
.hdr-card-why-teal:hover .hdr-icon-why-teal { background: linear-gradient(135deg, #009688, #00695c); }
.hdr-card-why-teal:hover .hdr-icon-why-teal .fa { color: #fff; }

/* ── Glass Cards (Specialized section) ─────────────────────────────── */
.hdr-card-glass {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    text-align: center;
    padding: 0 25px;
    border-radius: 16px;
}
.hdr-card-glass:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(3,216,245,0.5);
    box-shadow: 0 16px 40px rgba(0,0,0,0.30);
}
.hdr-icon-glow {
    background: rgba(3,169,244,0.20) !important;
    border: 1px solid rgba(3,216,245,0.30) !important;
    width: 80px !important;
    height: 80px !important;
}
.hdr-card-body p {
    margin-block-end: 0;
}
.hdr-icon-glow .fa {
    font-size: 32px !important;
    color: #03d8f5 !important;
}
.hdr-card-glass .hdr-card-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 16px 0 10px;
}
.hdr-card-glass .hdr-card-body p {
    font-size: 14px;
    color: rgba(255,255,255,0.68);
    line-height: 1.65;
}

/* ── Content Grid (Image + Text) ───────────────────────────────────── */
.hdr-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 50px;
}
.hdr-content-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hdr-content-col img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.hdr-heading {
    font-size: 24px;
    font-weight: 700;
    color: #0e2b5c;
    margin-bottom: 16px;
    line-height: 1.3;
}
.hdr-section-light .hdr-text {
    color: #5a6a85;
    font-size: 16px;
    line-height: 1.7;
}

/* ── Feature List ───────────────────────────────────────────────────── */
.hdr-feature-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 10px;
}
.hdr-feature-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.hdr-feature-number {
    font-size: 28px;
    font-weight: 700;
    color: #03a9f4;
    min-width: 50px;
    text-align: center;
}
.hdr-feature-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0e2b5c;
    margin: 0 0 8px 0;
}
.hdr-feature-body p {
    font-size: 14px;
    color: #5a6a85;
    margin: 0;
    line-height: 1.6;
}

/* ── Mistake Grid (numbered warning cards on light bg) ─────────────── */
.hdr-mistake-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}
.hdr-mistake-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    border-left: 4px solid #03a9f4;
    box-shadow: 0 2px 16px rgba(14,43,92,0.07);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.hdr-mistake-card:hover {
    box-shadow: 0 8px 30px rgba(14,43,92,0.12);
    transform: translateY(-2px);
}
.hdr-mistake-num {
    font-size: 32px;
    font-weight: 800;
    color: #03a9f4;
    min-width: 52px;
    line-height: 1;
    padding-top: 2px;
}
.hdr-mistake-body h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0e2b5c;
    margin: 0 0 8px 0;
}
.hdr-mistake-body p {
    font-size: 14px;
    color: #5a6a85;
    margin: 0;
    line-height: 1.7;
}
@media (max-width: 600px) {
    .hdr-mistake-card { flex-direction: column; gap: 10px; padding: 18px; }
    .hdr-mistake-num { font-size: 24px; min-width: auto; }
}

/* ── Process Grid (6-step lifecycle) ───────────────────────────────── */
.hdr-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 50px;
}
.hdr-process-card {
    background: #fff;
    border-left: 4px solid #03a9f4;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.hdr-process-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(3,169,244,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hdr-process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(14,43,92,0.12);
    border-left-width: 6px;
}
.hdr-process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #03a9f4, #0e2b5c);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(3,169,244,0.3);
    position: relative;
    z-index: 1;
}
.hdr-process-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0e2b5c;
    margin: 0 0 10px 0;
}
.hdr-process-card p {
    font-size: 14px;
    color: #5a6a85;
    margin: 0;
    line-height: 1.6;
}

/* ── Technology Grid ───────────────────────────────────────────────── */
.hdr-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 50px;
}
.hdr-tech-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 24px;
    backdrop-filter: blur(8px);
}
.hdr-tech-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px 0;
}
.hdr-tech-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hdr-tech-list li {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    line-height: 1.5;
}
.hdr-tech-list li:last-child { border-bottom: none; }

/* ── CTA Section (Premium) ─────────────────────────────────────────── */
.hdr-cta-premium {
    background: linear-gradient(135deg, #0e2b5c 0%, #1a4a9f 50%, #0d3b8e 100%);
    padding: 0;
    position: relative;
    overflow: hidden;
}
.hdr-cta-premium::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.hdr-cta-premium::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(3,169,244,0.08);
    pointer-events: none;
}

.hdr-cta-premium > .container {
    position: relative;
    z-index: 1;
}

.hdr-cta-head {
    padding: 70px 0 50px;
    text-align: center;
}
.hdr-cta-tag {
    background: rgba(3,169,244,0.15);
    color: #03d8f5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 30px;
    display: inline-block;
    margin-bottom: 12px;
}
.hdr-cta-title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.2;
}
.hdr-cta-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    margin: 0 auto 32px;
    line-height: 1.7;
    max-width: 600px;
}
.hdr-cta-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.hdr-cta-btn-primary,
.hdr-cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.hdr-cta-btn-primary {
    background: linear-gradient(135deg, #03a9f4, #0e2b5c);
    color: #fff;
}
.hdr-cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(3,169,244,0.35);
    gap: 12px;
}
.hdr-cta-btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.3);
}
.hdr-cta-btn-secondary:hover {
    background: rgba(255,255,255,0.20);
    border-color: rgba(3,216,245,0.6);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* ── Stats Bar (Full Width Background) ─────────────────────────────── */
.hdr-stats-bar {
    background: rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.15);
    margin: 0;
    position: relative;
    z-index: 2;
}
.hdr-stats-bar-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
}
.hdr-stat-bar-item {
    background: rgba(255,255,255,0.03);
    padding: 30px 20px;
    text-align: center;
    backdrop-filter: blur(8px);
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background 0.3s ease;
}
.hdr-stat-bar-item:hover {
    background: rgba(255,255,255,0.08);
}
.hdr-stat-bar-item:last-child {
    border-right: none;
}
.hdr-stat-bar-num {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #03d8f5;
    margin-bottom: 6px;
}
.hdr-stat-bar-num sup {
    font-size: 18px;
}
.hdr-stat-bar-lbl {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.5px;
}

/* ── Why Hire Grid ──────────────────────────────────────────────────── */
.hdr-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.hdr-why-card {
    background: #fff;
    border: 1px solid #e4eaf5;
    border-radius: 14px;
    padding: 30px 22px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(14,43,92,0.05);
}
.hdr-why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(14,43,92,0.12);
    border-color: #03a9f4;
}
.hdr-why-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f4fd, #d0eaf9);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 30px;
}
.hdr-why-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}
.hdr-why-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0e2b5c;
    margin-bottom: 10px;
    line-height: 1.3;
}
.hdr-why-card p {
    font-size: 13px;
    color: #5a6a85;
    line-height: 1.6;
    margin: 0;
}

/* ── Hiring Process ──────────────────────────────────────────────────── */
.hdr-process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.hdr-process-step {
    flex: 1;
    min-width: 180px;
    max-width: 240px;
    text-align: center;
    padding: 0 16px;
    position: relative;
}
.hdr-step-num {
    font-size: 48px;
    font-weight: 900;
    color: #e8f4fd;
    line-height: 1;
    margin-bottom: -10px;
}
.hdr-step-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #03a9f4, #0e2b5c);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 8px 24px rgba(3,169,244,0.30);
}
.hdr-step-icon .fa {
    font-size: 28px;
    color: #fff;
}
.hdr-process-step h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0e2b5c;
    margin-bottom: 10px;
}
.hdr-process-step p {
    font-size: 13px;
    color: #5a6a85;
    line-height: 1.6;
}
.hdr-process-arrow {
    display: flex;
    align-items: center;
    padding-top: 50px;
    color: #c0d0e8;
    font-size: 22px;
}

/* ── Contact Section ─────────────────────────────────────────────────── */
.hdr-contact-section {
    background: linear-gradient(135deg, #0e2b5c 0%, #1a4a9f 100%);
    padding: 80px 0;
}
.hdr-contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: start;
}
.hdr-contact-title {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 12px 0 16px;
}
.hdr-contact-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    margin-bottom: 36px;
}
.hdr-contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.hdr-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    line-height: 1.6;
}
.hdr-contact-info-item .fa {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(3,169,244,0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #03d8f5;
    flex-shrink: 0;
    margin-top: 2px;
}
.hdr-contact-info-item strong {
    display: block;
    color: #fff;
    font-weight: 700;
    margin-bottom: 2px;
}
.hdr-contact-info-item a {
    color: #03d8f5;
    text-decoration: none;
}
.hdr-contact-info-item a:hover { text-decoration: underline; }

/* ── Form Card ───────────────────────────────────────────────────────── */
.hdr-form-card {
    background: #fff;
    border-radius: 18px;
    padding: 40px 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.hdr-form-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: #0e2b5c;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 2px solid #e8f0fc;
}
.hdr-form { display: flex; flex-direction: column; gap: 16px; }
.hdr-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.hdr-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hdr-form-full { grid-column: 1 / -1; }
.hdr-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #3a4a6b;
}
.hdr-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d8e2f4;
    border-radius: 8px;
    font-size: 14px;
    color: #2c3e6a;
    background: #f8faff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}
.hdr-input:focus {
    border-color: #03a9f4;
    box-shadow: 0 0 0 3px rgba(3,169,244,0.12);
    background: #fff;
}
.hdr-select {
    cursor: pointer;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    display: block !important;
    opacity: 1 !important;
    position: relative !important;
    pointer-events: auto !important;
    height: auto !important;
}
.hdr-textarea { resize: vertical; min-height: 110px; }
.hdr-submit-btn {
    background: linear-gradient(135deg, #03a9f4, #0e2b5c);
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(3,169,244,0.35);
    align-self: flex-start;
    letter-spacing: 0.3px;
}
.hdr-submit-btn:hover {
    background: linear-gradient(135deg, #0288d1, #0a2050);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(3,169,244,0.45);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hdr-why-grid { grid-template-columns: repeat(3, 1fr); }
    .hdr-cards-4 { grid-template-columns: repeat(2, 1fr); }
    .hdr-contact-wrap { grid-template-columns: 1fr; gap: 40px; }
    .hdr-process-grid { grid-template-columns: repeat(2, 1fr); }
    .hdr-tech-grid { grid-template-columns: repeat(2, 1fr); }
    .hdr-content-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
    .hdr-cards-2 { grid-template-columns: 1fr; }
    .hdr-cards-3 { grid-template-columns: repeat(2, 1fr); }
    .hdr-cards-4 { grid-template-columns: repeat(2, 1fr); }
    .hdr-why-grid { grid-template-columns: repeat(2, 1fr); }
    .hdr-process-steps { gap: 0; }
    .hdr-process-arrow { display: none; }
    .hdr-process-step { min-width: 140px; }
}
@media (max-width: 768px) {
    .hdr-hero-title { font-size: 30px; }
    .hdr-hero-section, .hdr-contact-section { padding: 40px 0; }
    .hdr-hero-stats { padding: 18px 20px; gap: 0; }
    .hdr-stat { padding: 10px 16px; }
    .hdr-stat-num { font-size: 24px; }
    .hdr-stat-divider { display: none; }
    .hdr-section { padding: 40px 0; }
    .hdr-section-title { font-size: 26px; }
    .hdr-cards-3 { grid-template-columns: 1fr; }
    .hdr-cards-4 { grid-template-columns: repeat(2, 1fr); }
    .hdr-cards-2 { grid-template-columns: 1fr; }
    .hdr-cards-3 { grid-template-columns: 1fr; }
    .hdr-cards-4 { grid-template-columns: 1fr; }
    .hdr-why-grid { grid-template-columns: 1fr; }
    .hdr-form-row { grid-template-columns: 1fr; }
    .hdr-form-card { padding: 28px 22px; }
    /* .hdr-hero-btns { flex-direction: column; align-items: center; } */
    .hdr-contact-title { font-size: 26px; }
    .hdr-process-steps { flex-direction: column; align-items: center; gap: 24px; }
    .hdr-section-head { margin-bottom: 36px; }
    .hdr-process-grid { grid-template-columns: 1fr; }
    .hdr-tech-grid { grid-template-columns: 1fr; }
    .hdr-cta-title { font-size: 32px; }
    .hdr-cta-head { padding: 50px 0 40px; }
    .hdr-stats-bar-inner { grid-template-columns: repeat(3, 1fr); }
    .hdr-stat-bar-item { padding: 24px 16px; }
}
@media (max-width: 480px) {
    .hdr-cards-2 { grid-template-columns: 1fr; }
    .hdr-cards-3 { grid-template-columns: 1fr; }
    .hdr-cards-4 { grid-template-columns: 1fr; }
    .hdr-why-grid { grid-template-columns: 1fr; }
    .hdr-hero-stats { flex-direction: column; gap: 16px; }
    .hdr-tech-grid { grid-template-columns: 1fr; }
    .hdr-process-grid { grid-template-columns: 1fr; }
    .hdr-cta-title { font-size: 24px; }
    .hdr-cta-desc { font-size: 14px; }
    .hdr-cta-btns { flex-direction: column; }
    .hdr-cta-btn-primary,
    .hdr-cta-btn-secondary { width: 100%; justify-content: center; }
    .hdr-stats-bar-inner { grid-template-columns: repeat(2, 1fr); }
}
/* ─── End Hire Developer Resources ──────────────────────────────── */

/* ── Developer Level Cards ─────────────────────────────────────────── */
.hdr-card-level {
    background: #fff;
    border: 2px solid #e4eaf5;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}
.hdr-card-level::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    transition: height 0.3s ease;
}
.hdr-card-level:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(14,43,92,0.15);
    border-color: #03a9f4;
}
.hdr-card-level-junior::before { background: linear-gradient(90deg, #66bb6a, #43a047); }
.hdr-card-level-junior:hover { box-shadow: 0 16px 40px rgba(102,187,106,0.25); }
.hdr-card-level-mid::before { background: linear-gradient(90deg, #29b6f6, #0288d1); }
.hdr-card-level-mid:hover { box-shadow: 0 16px 40px rgba(41,182,246,0.25); }
.hdr-card-level-senior::before { background: linear-gradient(90deg, #ffa726, #f57c00); }
.hdr-card-level-senior:hover { box-shadow: 0 16px 40px rgba(255,167,38,0.25); }
.hdr-card-level-lead::before { background: linear-gradient(90deg, #ec407a, #c2185b); }
.hdr-card-level-lead:hover { box-shadow: 0 16px 40px rgba(236,64,122,0.25); }
.hdr-card-level:hover::before { height: 6px; }

.hdr-level-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(3,169,244,0.15);
    color: #03a9f4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
    margin-bottom: 12px;
}
.hdr-card-level h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0e2b5c;
    margin: 0 0 20px 0;
}
.hdr-level-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.hdr-level-list li {
    font-size: 14px;
    color: #5a6a85;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}
.hdr-level-list li:last-child { border-bottom: none; }
.hdr-level-list li .fa {
    color: #03a9f4;
    font-size: 12px;
}

/* ──────────── Compact Timeline ───────────────────────────────────── */
.hdr-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    margin-top: 50px;
    flex-wrap: wrap;
}

.hdr-timeline::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #03a9f4, #0288d1);
    z-index: 0;
}

.hdr-timeline-item {
    flex: 1;
    min-width: 120px;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 8px;
}

.hdr-timeline-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #03a9f4, #0288d1);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50%;
    margin: 0 auto 12px;
    box-shadow: 0 4px 12px rgba(3, 169, 244, 0.3);
    background-color: #fff;
    border: 3px solid #03a9f4;
}

.hdr-timeline-item h4 {
    font-size: 13px;
    font-weight: 600;
    color: #0e2b5c;
    margin: 0;
    line-height: 1.4;
}

/* Responsive Timeline */
@media (max-width: 1100px) {
    .hdr-timeline {
        gap: 12px;
    }

    .hdr-timeline-item {
        min-width: 110px;
    }

    .hdr-timeline-number {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .hdr-timeline-item h4 {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .hdr-timeline {
        gap: 12px;
        margin-top: 40px;
    }

    .hdr-timeline::before {
        display: none;
    }

    .hdr-timeline-item {
        min-width: 100px;
        padding: 0 4px;
    }

    .hdr-timeline-number {
        width: 36px;
        height: 36px;
        font-size: 12px;
        margin-bottom: 8px;
    }

    .hdr-timeline-item h4 {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .hdr-timeline {
        gap: 6px;
        margin-top: 30px;
    }

    .hdr-timeline-item {
        min-width: 80px;
        padding: 0 2px;
    }

    .hdr-timeline-number {
        width: 32px;
        height: 32px;
        font-size: 11px;
        margin-bottom: 6px;
    }

    .hdr-timeline-item h4 {
        font-size: 10px;
    }
}

/* ──────────── Platform Cards ─────────────────────────────────────── */
.hdr-card-platform {
    background: #ffffff;
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    padding: 32px 28px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hdr-card-platform::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #03a9f4, #0288d1);
}

.hdr-card-platform:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(3, 169, 244, 0.15);
}

.hdr-card-platform-iphone::before {
    background: linear-gradient(90deg, #03a9f4, #0288d1);
}

.hdr-card-platform-ipad::before {
    background: linear-gradient(90deg, #4caf50, #388e3c);
}

.hdr-platform-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
    color: #03a9f4;
}

.hdr-card-platform-ipad .hdr-platform-icon {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #4caf50;
}

.hdr-card-platform h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0e2b5c;
    margin: 0 0 12px 0;
}

.hdr-card-platform > p {
    font-size: 13px;
    color: #5a6a85;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.hdr-platform-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.hdr-platform-features li {
    font-size: 13px;
    color: #5a6a85;
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
}

.hdr-platform-features li i {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #03a9f4;
    font-weight: 700;
}

.hdr-card-platform-ipad .hdr-platform-features li i {
    color: #4caf50;
}

/* Responsive Platform Cards */
@media (max-width: 768px) {
    .hdr-card-platform {
        padding: 24px 20px;
    }

    .hdr-platform-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .hdr-card-platform h3 {
        font-size: 18px;
    }

    .hdr-platform-features li {
        font-size: 12px;
    }
}

/* ──────────── Pricing Cards ───────────────────────────────────────── */
.hdr-card-pricing {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hdr-card-pricing h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0e2b5c;
    margin: 0 0 4px 0;
}

.hdr-card-pricing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #03a9f4, #0288d1);
}

.hdr-card-pricing:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(3, 169, 244, 0.15);
}

.hdr-card-pricing-full::before {
    background: linear-gradient(90deg, #03a9f4, #0288d1);
}

.hdr-card-pricing-part::before {
    background: linear-gradient(90deg, #4caf50, #388e3c);
}

.hdr-card-pricing-hour::before {
    background: linear-gradient(90deg, #ff9800, #f57c00);
}

.hdr-pricing-header {
    margin-bottom: 12px;
}

.hdr-pricing-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0e2b5c;
    margin: 0 0 4px 0;
}

.hdr-pricing-tag {
    font-size: 11px;
    font-weight: 600;
    color: #5a6a85;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hdr-pricing-price {
    margin: 16px 0 20px;
    padding: 16px 0;
    border-top: 1px solid #e8ecf1;
    border-bottom: 1px solid #e8ecf1;
}

.hdr-pricing-price-compact {
    margin: 12px 0 16px;
    padding: 12px 0;
    border-top: 1px solid #e8ecf1;
    border-bottom: 1px solid #e8ecf1;
}

.hdr-price-amount {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #0e2b5c;
}

.hdr-price-amount-compact {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #0e2b5c;
}

.hdr-price-period {
    display: block;
    font-size: 12px;
    color: #5a6a85;
    margin-top: 4px;
}

.hdr-price-period-compact {
    display: block;
    font-size: 11px;
    color: #5a6a85;
    margin-top: 3px;
}

.hdr-pricing-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex-grow: 1;
}

.hdr-pricing-features li {
    font-size: 13px;
    color: #5a6a85;
    padding: 8px 0;
    border-bottom: 1px solid #f5f7fa;
}

.hdr-pricing-features li:last-child {
    border-bottom: none;
}

.hdr-pricing-features i {
    color: #4caf50;
    margin-right: 8px;
    font-weight: 700;
}

.hdr-pricing-features-compact {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    flex-grow: 1;
}

.hdr-pricing-features-compact li {
    font-size: 12px;
    color: #5a6a85;
    padding: 6px 0;
    border-bottom: none;
}

.hdr-pricing-features-compact i {
    color: #4caf50;
    margin-right: 6px;
    font-weight: 700;
}

.hdr-pricing-local {
    font-size: 13px;
    color: #5a6a85;
    margin: 20px 0 24px;
    font-style: italic;
}

.hdr-btn {
    display: inline-block;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.hdr-btn-small {
    padding: 10px 24px;
    font-size: 12px;
}

.hdr-btn-primary {
    background: linear-gradient(135deg, #03a9f4, #0288d1);
    color: #ffffff;
}

.hdr-btn-primary:hover {
    background: linear-gradient(135deg, #0288d1, #0277bd);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(3, 169, 244, 0.3);
}

.hdr-btn-secondary {
    background: linear-gradient(135deg, #4caf50, #388e3c);
    color: #ffffff;
}

.hdr-btn-secondary:hover {
    background: linear-gradient(135deg, #388e3c, #2e7d32);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(76, 175, 80, 0.3);
}

.hdr-btn-tertiary {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: #ffffff;
}

.hdr-btn-tertiary:hover {
    background: linear-gradient(135deg, #f57c00, #e65100);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 152, 0, 0.3);
}

/* Responsive Pricing Cards */
@media (max-width: 1100px) {
    .hdr-card-pricing {
        padding: 32px 24px;
    }

    .hdr-price-amount {
        font-size: 40px;
    }

    .hdr-pricing-header h3 {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .hdr-card-pricing {
        padding: 28px 20px;
    }

    .hdr-price-amount {
        font-size: 32px;
    }

    .hdr-pricing-header h3 {
        font-size: 18px;
    }

    .hdr-pricing-features li {
        font-size: 13px;
        padding: 8px 0;
    }
}

@media (max-width: 480px) {
    .hdr-card-pricing {
        padding: 24px 16px;
    }

    .hdr-price-amount {
        font-size: 28px;
    }

    .hdr-pricing-header h3 {
        font-size: 16px;
    }

    .hdr-pricing-features li {
        font-size: 12px;
        padding: 6px 0;
    }

    .hdr-btn {
        padding: 12px 24px;
        font-size: 12px;
    }
}
/* ──────────── End Pricing Cards ───────────────────────────────────── */

/* ─── Expertise Skills Grid ────────────────────────────────────────── */
.hdr-expertise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 50px;
}

.hdr-expertise-column {
    display: flex;
    flex-direction: column;
}

.hdr-expertise-column-header {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 2px solid #03a9f4;
}

.hdr-expertise-icon {
    background: #f0f8ff;
    border-radius: 12px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.hdr-expertise-icon.hdr-expertise-dev {
    background: linear-gradient(135deg, rgba(0,92,230,0.15) 0%, rgba(0,65,184,0.1) 100%);
}

.hdr-expertise-icon.hdr-expertise-dev .fa {
    color: #005ce6;
    font-size: 28px;
}

.hdr-expertise-icon.hdr-expertise-quality {
    background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(5,150,105,0.1) 100%);
}

.hdr-expertise-icon.hdr-expertise-quality .fa {
    color: #10b981;
    font-size: 28px;
}

.hdr-expertise-column-header h3 {
    margin: 0;
    color: #0e2b5c;
    font-size: 20px;
    font-weight: 700;
}

.hdr-expertise-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hdr-expertise-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 18px;
    background: #f8fafb;
    border-radius: 10px;
    border-left: 3px solid #03a9f4;
    transition: all 0.3s ease;
}

.hdr-expertise-item:hover {
    background: #f0f5ff;
    border-left-color: #005ce6;
    transform: translateX(4px);
}

.hdr-expertise-item .hdr-item-arrow {
    color: #005ce6;
    font-weight: 700;
    margin-right: 12px;
    min-width: 12px;
    flex-shrink: 0;
}

.hdr-expertise-item span {
    color: #3a4a63;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
}

/* ─── Tech Stack Cards ──────────────────────────────────────────────── */
.hdr-stack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 50px;
}

.hdr-stack-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 32px 28px 28px;
    transition: all 0.3s ease;
}

.hdr-stack-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

.hdr-stack-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hdr-stack-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hdr-stack-icon .fa {
    font-size: 22px;
    color: #fff;
}

.hdr-stack-icon-blue  { background: linear-gradient(135deg, #005ce6, #0041b8); }
.hdr-stack-icon-purple { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.hdr-stack-icon-green  { background: linear-gradient(135deg, #10b981, #059669); }

.hdr-stack-card-header h3 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.hdr-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hdr-tech-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.hdr-tech-tag:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(3, 169, 244, 0.5);
    color: #fff;
}

.hdr-tech-tag .fa {
    font-size: 11px;
    opacity: 0.7;
}

.hdr-stack-card-blue  .hdr-tech-tag:hover { border-color: rgba(0, 92, 230, 0.6); }
.hdr-stack-card-purple .hdr-tech-tag:hover { border-color: rgba(124, 58, 237, 0.6); }
.hdr-stack-card-green  .hdr-tech-tag:hover { border-color: rgba(16, 185, 129, 0.6); }

@media (max-width: 991px) {
    .hdr-stack-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .hdr-stack-grid { grid-template-columns: 1fr; }
}
/* ─── End Tech Stack Cards ──────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   HIRE UI/UX DESIGNER PAGE — Page-specific classes
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared text helpers ───────────────────────────────────────────── */
.uiux-section-title-left {
    text-align: left;
    font-size: 32px;
}
.uiux-body-text {
    color: #555;
    line-height: 1.8;
    font-size: 16px;
}
.uiux-body-text-mb {
    color: #555;
    font-size: 16px;
    margin-bottom: 24px;
}
.uiux-img-rounded {
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(3,169,244,0.12);
}


/* ── Industry cards ────────────────────────────────────────────────── */
.uiux-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.uiux-ind-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 4px 24px rgba(14,43,92,0.08);
}
.uiux-ind-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0e2b5c;
    margin-bottom: 14px;
}
.uiux-ind-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.uiux-ind-icon i {
    font-size: 22px;
}
.uiux-ind-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.uiux-ind-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
}
.uiux-ind-list li i {
    font-size: 13px;
    flex-shrink: 0;
}
/* colour variants */
.uiux-ind-card--blue  { border-top: 4px solid #03a9f4; }
.uiux-ind-card--cyan  { border-top: 4px solid #00bcd4; }
.uiux-ind-card--green { border-top: 4px solid #4caf50; }
.uiux-ind-card--purple{ border-top: 4px solid #9c27b0; }
.uiux-ind-card--orange{ border-top: 4px solid #ff9800; }
.uiux-ind-card--red   { border-top: 4px solid #f44336; }

.uiux-ind-icon--blue  { background: #e8f7ff; color: #03a9f4; }
.uiux-ind-icon--cyan  { background: #e0f7fa; color: #00bcd4; }
.uiux-ind-icon--green { background: #e8f5e9; color: #4caf50; }
.uiux-ind-icon--purple{ background: #f3e5f5; color: #9c27b0; }
.uiux-ind-icon--orange{ background: #fff3e0; color: #ff9800; }
.uiux-ind-icon--red   { background: #fde8e7; color: #f44336; }

.uiux-ind-icon--blue i  { color: #03a9f4; }
.uiux-ind-icon--cyan i  { color: #00bcd4; }
.uiux-ind-icon--green i { color: #4caf50; }
.uiux-ind-icon--purple i{ color: #9c27b0; }
.uiux-ind-icon--orange i{ color: #ff9800; }
.uiux-ind-icon--red i   { color: #f44336; }

.uiux-check--blue  { color: #03a9f4; }
.uiux-check--cyan  { color: #00bcd4; }
.uiux-check--green { color: #4caf50; }
.uiux-check--purple{ color: #9c27b0; }
.uiux-check--orange{ color: #ff9800; }
.uiux-check--red   { color: #f44336; }

/* ── Case study cards ──────────────────────────────────────────────── */
.uiux-case-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
}
.uiux-case-card h3 {
    color: #fff;
}
.uiux-process-num--red    { background: rgba(255,87,87,0.3);   color: #ff7070; }
.uiux-process-num--blue   { background: rgba(3,169,244,0.3);   color: #03d8f5; }
.uiux-process-num--green  { background: rgba(76,175,80,0.3);   color: #69f077; }

/* ── Best practices / What is UI/UX section bg ─────────────────────── */
.uiux-practices-bg {
    background: #f8fafc;
}

@media (max-width: 991px) {
    .uiux-industry-grid { grid-template-columns: repeat(2, 1fr); }
    .uiux-feature-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .uiux-industry-grid { grid-template-columns: 1fr; }
}
/* ─── End Hire UI/UX Designer Page ──────────────────────────────────── */