/* ===================================================================
   FAANG-LEVEL DESIGN SYSTEM - Portfolio Refinement
   Blessing Mangwiro Portfolio - 2025
   =================================================================== */

/* ===================================================================
   1. TYPOGRAPHY SCALE (FAANG-Style)
   =================================================================== */

/* Display - 48px */
.heading-xl,
.text-display {
    font-size: 48px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
}

/* H1 - 36px */
.heading-lg,
.text-h1 {
    font-size: 36px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
}

/* H2 - 28px */
.heading-md,
.text-h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #fff !important;
}

/* H3 - 22px */
.heading-sm,
.text-h3 {
    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #fff !important;
}

/* H4 - 18px */
.heading-xs,
.text-h4 {
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #fff !important;
}

/* Body Large - 20px */
.text-body-lg {
    font-size: 20px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Body - 18px */
.text-body {
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Body Small - 16px */
.text-body-sm {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Caption - 14px / 60% opacity */
.text-caption {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.60) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Section Title */
.section-title {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #fff !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
}

/* Section Subtitle */
.section-subtitle {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #00ffcc !important;
    margin-bottom: 16px !important;
    opacity: 0.9 !important;
}

/* ===================================================================
   2. SPACING UTILITIES
   =================================================================== */

.space-xxs { margin-bottom: 8px !important; }
.space-xs { margin-bottom: 16px !important; }
.space-sm { margin-bottom: 24px !important; }
.space-md { margin-bottom: 32px !important; }
.space-lg { margin-bottom: 48px !important; }
.space-xl { margin-bottom: 64px !important; }
.space-xxl { margin-bottom: 80px !important; }

.pad-xxs { padding: 8px !important; }
.pad-xs { padding: 16px !important; }
.pad-sm { padding: 24px !important; }
.pad-md { padding: 32px !important; }
.pad-lg { padding: 48px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-sm { margin-top: 16px !important; }
.mt-md { margin-top: 32px !important; }
.mt-lg { margin-top: 48px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: 16px !important; }
.mb-md { margin-bottom: 32px !important; }
.mb-lg { margin-bottom: 48px !important; }

/* ===================================================================
   3. DARK BACKGROUND SYSTEM
   =================================================================== */

/* Clean dark background - removes busy images */
.page-wrapper.faang-dark {
    background: #0e0e0e !important;
    background-image: none !important;
}

.page-wrapper.faang-dark::before {
    display: none !important;
}

/* Subtle gradient option */
.page-wrapper.faang-gradient {
    background: linear-gradient(180deg, #0a0a0a 0%, #121212 50%, #0e0e0e 100%) !important;
    background-image: none !important;
}

.page-wrapper.faang-gradient::before {
    display: none !important;
}

/* Override for image-layer class */
.page-wrapper.image-layer.faang-dark,
.page-wrapper.image-layer.faang-gradient {
    background-image: none !important;
}

.page-wrapper.image-layer.faang-dark::before,
.page-wrapper.image-layer.faang-gradient::before {
    display: none !important;
}

/* Section backgrounds */
.section-dark {
    background: #0e0e0e !important;
}

.section-darker {
    background: #0a0a0a !important;
}

.section-subtle {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ===================================================================
   4. CONTENT CARD COMPONENTS
   =================================================================== */

/* Base Content Card */
.content-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
    transition: all 0.3s ease !important;
}

.content-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) !important;
}

.content-card h3,
.content-card h4 {
    color: #fff !important;
    margin-bottom: 12px !important;
}

.content-card p {
    color: rgba(255, 255, 255, 0.82) !important;
    margin-bottom: 0 !important;
}

.content-card p:not(:last-child) {
    margin-bottom: 12px !important;
}

/* Insight Card - Highlighted findings */
.insight-card {
    background: rgba(0, 255, 204, 0.06) !important;
    border: 1px solid rgba(0, 255, 204, 0.20) !important;
    border-left: 4px solid #00ffcc !important;
    border-radius: 12px !important;
    padding: 24px 28px !important;
    margin-bottom: 24px !important;
}

.insight-card h4 {
    color: #00ffcc !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.insight-card p {
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 0 !important;
}

/* Quote Card */
.quote-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-left: 4px solid #00ffcc !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 28px 32px !important;
    margin: 32px 0 !important;
}

.quote-card p {
    font-size: 20px !important;
    line-height: 1.6 !important;
    font-style: italic !important;
    color: rgba(255, 255, 255, 0.90) !important;
    margin-bottom: 16px !important;
}

.quote-card cite {
    display: block !important;
    font-size: 14px !important;
    font-style: normal !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Metric Card */
.metric-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 32px 24px !important;
    text-align: center !important;
}

.metric-card .metric-value {
    display: block !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #00ffcc !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
}

.metric-card .metric-label {
    display: block !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.70) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Problem Card */
.problem-card {
    background: rgba(255, 82, 82, 0.08) !important;
    border: 1px solid rgba(255, 82, 82, 0.25) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
}

.problem-card h4 {
    color: #ff5252 !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
}

.problem-card p {
    color: rgba(255, 255, 255, 0.82) !important;
    margin: 0 !important;
}

/* Solution Card */
.solution-card {
    background: rgba(0, 255, 204, 0.08) !important;
    border: 1px solid rgba(0, 255, 204, 0.25) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
}

.solution-card h4 {
    color: #00ffcc !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
}

.solution-card p {
    color: rgba(255, 255, 255, 0.82) !important;
    margin: 0 !important;
}

/* Persona Card */
.persona-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
}

.persona-card .persona-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.persona-card .persona-name {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.persona-card .persona-role {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.60) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Tech Stack Card */
.tech-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: flex-start !important;
}

.tech-card .tech-icon {
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 255, 204, 0.15) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
    color: #00ffcc !important;
}

.tech-card .tech-content h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
}

.tech-card .tech-content p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.70) !important;
    margin: 0 !important;
}

/* ===================================================================
   5. GRID LAYOUTS
   =================================================================== */

.grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
}

.grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

.grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

.metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 20px !important;
    margin: 32px 0 !important;
}

@media (max-width: 991px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===================================================================
   6. LIST STYLES
   =================================================================== */

.list-styled {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
}

.list-styled li {
    position: relative !important;
    padding-left: 24px !important;
    margin-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.7 !important;
}

.list-styled li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 10px !important;
    width: 8px !important;
    height: 8px !important;
    background: #00ffcc !important;
    border-radius: 50% !important;
}

.list-numbered {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    counter-reset: list-counter !important;
}

.list-numbered li {
    position: relative !important;
    padding-left: 40px !important;
    margin-bottom: 16px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.7 !important;
    counter-increment: list-counter !important;
}

.list-numbered li::before {
    content: counter(list-counter) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(0, 255, 204, 0.15) !important;
    color: #00ffcc !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===================================================================
   7. TAGS & BADGES
   =================================================================== */

.tag-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 16px 0 !important;
}

.tag {
    display: inline-block !important;
    background: rgba(0, 255, 204, 0.12) !important;
    color: #00ffcc !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.badge-status {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.badge-complete {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #4caf50 !important;
}

.badge-progress {
    background: rgba(255, 193, 7, 0.15) !important;
    color: #ffc107 !important;
}

.badge-planned {
    background: rgba(33, 150, 243, 0.15) !important;
    color: #2196f3 !important;
}

/* ===================================================================
   8. PROJECT META PANEL
   =================================================================== */

.meta-panel {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 16px !important;
    padding: 32px !important;
}

.meta-panel .meta-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.50) !important;
    margin-bottom: 8px !important;
}

.meta-panel .meta-value {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.90) !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

.meta-panel .meta-value:last-child {
    margin-bottom: 0 !important;
}

.meta-panel .meta-value a {
    color: #00ffcc !important;
    text-decoration: none !important;
}

.meta-panel .meta-value a:hover {
    text-decoration: underline !important;
}

/* ===================================================================
   9. SECTION DIVIDERS
   =================================================================== */

.section-divider {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
    margin: 48px 0 !important;
}

.section-divider-sm {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    margin: 32px 0 !important;
}

/* ===================================================================
   10. MOBILE HAMBURGER FIX
   =================================================================== */

/* Fix hamburger alignment with logo */
.main-header .header-lower .inner-container {
    display: flex !important;
    align-items: center !important;
    min-height: 70px !important;
}

.main-header .header-lower .inner-container > .d-flex {
    align-items: center !important;
    width: 100% !important;
}

/* Mobile nav toggler positioning */
.main-header .mobile-nav-toggler {
    display: none;
    position: relative !important;
    z-index: 100 !important;
    padding: 8px !important;
    margin-left: auto !important;
}

.main-header .mobile-nav-toggler svg {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
}

/* Mobile menu improvements */
.mobile-menu .menu-box {
    background: #0e0e0e !important;
    padding-top: 80px !important;
}

.mobile-menu .nav-logo {
    padding: 24px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.mobile-menu .navigation {
    padding: 0 !important;
    border-top: none !important;
}

.mobile-menu .navigation li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mobile-menu .navigation li > a {
    padding: 16px 24px !important;
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.90) !important;
    display: block !important;
}

.mobile-menu .navigation li > a:hover,
.mobile-menu .navigation li.current > a {
    color: #00ffcc !important;
    background: rgba(0, 255, 204, 0.05) !important;
}

.mobile-menu .close-btn {
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

/* Dropdown in mobile */
.mobile-menu .navigation li > ul {
    background: rgba(0, 0, 0, 0.3) !important;
}

.mobile-menu .navigation li > ul > li > a {
    padding-left: 40px !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.mobile-menu .navigation li.dropdown .dropdown-btn {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    color: rgba(255, 255, 255, 0.60) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mobile-menu .navigation li.dropdown .dropdown-btn::after {
    display: none !important;
}

/* Fix for main header mobile display */
@media (max-width: 1023px) {
    .main-header .mobile-nav-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .main-header .nav-outer {
        display: none !important;
    }
    
    .main-header .header-lower .logo-box .logo {
        padding: 12px 0 !important;
    }
    
    .main-header .header-lower .logo-box .logo img {
        max-height: 45px !important;
        width: auto !important;
    }
}

/* ===================================================================
   11. RESPONSIVE TYPOGRAPHY
   =================================================================== */

@media (max-width: 991px) {
    .heading-xl, .text-display {
        font-size: 40px !important;
    }
    
    .heading-lg, .text-h1 {
        font-size: 32px !important;
    }
    
    .heading-md, .text-h2, .section-title {
        font-size: 24px !important;
    }
    
    .heading-sm, .text-h3 {
        font-size: 20px !important;
    }
    
    .text-body-lg {
        font-size: 18px !important;
    }
    
    .single-work_title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 767px) {
    .heading-xl, .text-display {
        font-size: 32px !important;
    }
    
    .heading-lg, .text-h1 {
        font-size: 28px !important;
    }
    
    .heading-md, .text-h2, .section-title {
        font-size: 22px !important;
    }
    
    .heading-sm, .text-h3 {
        font-size: 18px !important;
    }
    
    .text-body-lg {
        font-size: 17px !important;
    }
    
    .text-body {
        font-size: 16px !important;
    }
    
    .single-work_title {
        font-size: 28px !important;
    }
    
    .content-card,
    .insight-card,
    .persona-card {
        padding: 20px !important;
    }
    
    .quote-card {
        padding: 20px 24px !important;
    }
    
    .quote-card p {
        font-size: 17px !important;
    }
    
    .metric-card .metric-value {
        font-size: 36px !important;
    }
}

@media (max-width: 479px) {
    .heading-xl, .text-display {
        font-size: 26px !important;
    }
    
    .heading-lg, .text-h1 {
        font-size: 24px !important;
    }
    
    .single-work_title {
        font-size: 24px !important;
    }
    
    .banner-one_heading {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    
    .banner-one_text {
        font-size: 16px !important;
        line-height: 1.6 !important;
        padding-right: 0 !important;
    }
}

/* ===================================================================
   12. PAGE SECTION REFINEMENTS
   =================================================================== */

/* Hero Section Refinement */
.single-work {
    padding: 140px 0 60px !important;
}

.single-work_title {
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin-bottom: 24px !important;
    color: #fff !important;
}

.single-work p {
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 20px !important;
}

/* Project list refinement */
.single-work_list {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    list-style: none !important;
    margin: 0 !important;
}

.single-work_list li {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.50) !important;
}

.single-work_list li:first-child {
    padding-top: 0 !important;
}

.single-work_list li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.single-work_list li span {
    display: block !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: rgba(255, 255, 255, 0.90) !important;
    margin-top: 6px !important;
}

.single-work_list li span a {
    color: #00ffcc !important;
}

/* Section Title Refinement */
.sec-title {
    margin-bottom: 32px !important;
}

.sec-title_heading {
    font-size: 28px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.sec-title_icon {
    display: none !important;
}

/* Services/Work sections */
.services-one,
.work-one {
    padding: 80px 0 60px !important;
}

.services-one p,
.work-one p {
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 20px !important;
}

/* Strong text emphasis */
.services-one strong,
.work-one strong {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Gallery block refinements */
.gallery-block_one-inner {
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.gallery-block_one-inner:hover {
    transform: translateY(-4px) !important;
}

.gallery-block_one-content {
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
}

.gallery-block_one-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin-bottom: 8px !important;
}

.gallery-block_one-heading {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
}

/* ===================================================================
   13. CONTACT PAGE REFINEMENTS
   =================================================================== */

.contact-one_heading {
    font-size: 28px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

.contact-one_list {
    margin-top: 32px !important;
}

.contact-one_list li {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.contact-one_socials {
    margin-top: 40px !important;
}

.contact-one_socials li {
    margin-bottom: 12px !important;
}

.contact-one_socials li a {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.90) !important;
    transition: all 0.3s ease !important;
}

.contact-one_socials li a:hover {
    color: #00ffcc !important;
}

/* Form styling */
.contact-form input,
.contact-form textarea,
.contact-form select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    color: #fff !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: rgba(0, 255, 204, 0.40) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    outline: none !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.40) !important;
}

.contact-form .theme-btn,
.contact-form .submit-btn {
    background: linear-gradient(135deg, var(--main-color), var(--color-two)) !important;
    border: none !important;
    padding: 16px 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.contact-form .theme-btn:hover,
.contact-form .submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(186, 2, 74, 0.30) !important;
}

/* ===================================================================
   14. FOOTER REFINEMENTS
   =================================================================== */

.main-footer {
    background: #0a0a0a !important;
}

.main-footer h2 {
    font-size: 32px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

.main-footer h2 a {
    border-bottom-color: rgba(255, 255, 255, 0.30) !important;
}

.footer-bottom {
    background: #050505 !important;
    padding: 24px 0 !important;
}

.footer_copyright {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ===================================================================
   15. ABOUT PAGE SPECIFIC
   =================================================================== */

/* Skills grid */
.skills-section .skill-item {
    margin-bottom: 24px !important;
}

.skills-section h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 12px !important;
}

.skills-section p {
    font-size: 15px !important;
    line-height: 2 !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Experience cards */
.experience-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    padding: 28px !important;
    margin-bottom: 20px !important;
}

.experience-card .exp-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
}

.experience-card .exp-company {
    font-size: 16px !important;
    color: #00ffcc !important;
    margin-bottom: 4px !important;
}

.experience-card .exp-date {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.50) !important;
    margin-bottom: 16px !important;
}

.experience-card .exp-description {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.80) !important;
}

.experience-card ul {
    margin-top: 12px !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.experience-card ul li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.experience-card ul li::before {
    content: '→' !important;
    position: absolute !important;
    left: 0 !important;
    color: #00ffcc !important;
}

/* Education card */
.education-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
}

.education-card .edu-degree {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
}

.education-card .edu-school {
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 4px !important;
}

.education-card .edu-date {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.50) !important;
}

/* Certifications list */
.certifications-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.certifications-list li {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.certifications-list li:last-child {
    border-bottom: none !important;
}

/* ===================================================================
   16. IMAGE HANDLING
   =================================================================== */

.project-image {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    margin: 24px 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.image-caption {
    text-align: center !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin-top: -16px !important;
    margin-bottom: 24px !important;
}

/* ===================================================================
   17. SCROLL & ANIMATIONS
   =================================================================== */

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth hover transitions */
a, button, .content-card, .gallery-block_one-inner {
    transition: all 0.3s ease !important;
}

/* ===================================================================
   18. BANNER/HERO REFINEMENTS
   =================================================================== */

.banner-one {
    background-size: cover !important;
    background-position: center !important;
}

.banner-one::before {
    background: linear-gradient(180deg, rgba(14, 14, 14, 0.92) 0%, rgba(14, 14, 14, 0.96) 100%) !important;
}

.banner-one_heading {
    font-size: 72px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
}

.banner-one_text {
    font-size: 18px !important;
    line-height: 1.7 !important;
    border-top-color: rgba(255, 255, 255, 0.15) !important;
    padding-right: 0 !important;
    max-width: 700px !important;
}

@media (max-width: 991px) {
    .banner-one_heading {
        font-size: 48px !important;
    }
}

@media (max-width: 767px) {
    .banner-one_heading {
        font-size: 36px !important;
    }
    
    .banner-one {
        padding: 180px 0 60px !important;
    }
}

/* ===================================================================
   19. SERVICE BLOCKS
   =================================================================== */

.service-block_one-inner {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    padding: 32px !important;
}

.service-block_one-inner::before {
    border-radius: 12px !important;
}

.service-block_one-heading {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.service-block_one-heading br {
    display: none !important;
}

/* ===================================================================
   20. PODCAST PAGE
   =================================================================== */

.podcast-section p {
    font-size: 18px !important;
    line-height: 1.75 !important;
}

.episode-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
}

.episode-card h3 {
    font-size: 20px !important;
    color: #00ffcc !important;
    margin-bottom: 12px !important;
}

.episode-card p {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.80) !important;
}

/* ===================================================================
   21. UTILITY OVERRIDES
   =================================================================== */

/* Remove default margins on last elements */
.content-card > *:last-child,
.insight-card > *:last-child,
.quote-card > *:last-child {
    margin-bottom: 0 !important;
}

/* Ensure proper box model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent horizontal overflow */
.page-wrapper {
    overflow-x: hidden !important;
}

/* Hide decorative elements that clutter design */
.sec-title_icon {
    display: none !important;
}

/* Clean up stats section */
.stats-one {
    background-image: none !important;
    background: #0a0a0a !important;
}

.stats-one::before {
    display: none !important;
}

.counter-block_one-counter {
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #00ffcc !important;
}

.counter-block_one-text {
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.counter-block_one-inner {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    padding: 32px 24px !important;
}

/* Journal/Blog blocks */
.journal-block_one-inner {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
}

.journal-block_one-title {
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.50) !important;
}

.journal-block_one-heading {
    font-size: 17px !important;
    font-weight: 500 !important;
}

.journal-block_one-heading a {
    color: rgba(255, 255, 255, 0.90) !important;
}