html[data-theme-color="skin-1"]{

    /* ==================== PRIMARY BRAND COLORS ==================== */
    --primary: #0047AB;
    --primary-dark: #003380;
    --primary-light: #6BA5E8;
    --secondary: #2B6BCC;
    --accent: #5CD1FF;
    
    /* ==================== TEXT COLORS ==================== */
    --text-black: #000000;
    --text-dark: #1A1A1A;
    --text-gray: #4B5563;
    --text-light-gray: #6B7280;
    --text-white: #FFFFFF;
    --bodytext: #1A1A1A;
    
    /* ==================== BUTTON & UI ==================== */
    --button-text: #FFFFFF;
    --border-color: #E5E7EB;
    --border-light: #F3F4F6;
    
    /* ==================== ALL BACKGROUNDS = WHITE ==================== */
    --bodybg: #FFFFFF;
    --card-bg: #FFFFFF;
    --card: #FFFFFF;
    --section-white: #FFFFFF;
    --section-light: #FFFFFF;
    --section-gray: #FFFFFF;
    --hero-gradient: #FFFFFF;
    --footer-bg: #FFFFFF;
    
    /* ==================== CARD SHADOWS ==================== */
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    
    /* ==================== BUTTON GRADIENTS ==================== */
    --btn-gradient: linear-gradient(135deg, #0047AB 0%, #2B6BCC 100%);
    --btn-hover-gradient: linear-gradient(135deg, #003380 0%, #0047AB 100%);
    
    /* ==================== BANNER GRADIENTS ==================== */
    --banner-gradient: linear-gradient(135deg, #0047AB 0%, #2B6BCC 50%, #5CD1FF 100%);
    
    /* ==================== BODY BACKGROUND ==================== */
    body, .page-wraper {
        background: var(--bodybg);
    }
    
    /* ==================== SERVICE CARD STYLES ==================== */
    .service-card-box {
        background: var(--card-bg);
        border: 1px solid var(--border-light);
        border-radius: 16px;
        box-shadow: var(--card-shadow);
        transition: all 0.3s ease;
    }
    
    .service-card-box:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
        border-color: rgba(0, 71, 171, 0.2);
    }
    
    .service-card-box .service-title {
        color: var(--text-black) !important;
    }
    
    .service-card-box .service-description {
        color: var(--text-gray) !important;
        line-height: 1.6;
    }
    
    /* ==================== SECTION STYLES ==================== */
    .white-section,
    .light-section,
    .gray-section,
    .dark-section,
    .darker-section,
    section {
        background: #FFFFFF;
    }
    
    /* ==================== HERO SECTION ==================== */
    .hero-section {
        background: #FFFFFF;
    }
    
    .hero-section h1, 
    .hero-section h2 {
        color: var(--text-black) !important;
    }
    
    .hero-section p {
        color: var(--text-dark) !important;
        line-height: 1.6;
    }
    
    /* ==================== CTA SECTION ==================== */
    .cta-section {
        background: var(--btn-gradient);
        border-radius: 24px;
    }
    
    .cta-section h2,
    .cta-section h3,
    .cta-section p {
        color: var(--text-white) !important;
    }
    
    /* ==================== FOOTER ==================== */
    footer {
        background: #FFFFFF;
        color: var(--text-gray);
        border-top: 1px solid var(--border-light);
    }
    
    footer a {
        color: var(--text-light-gray);
        transition: color 0.2s ease;
    }
    
    footer a:hover {
        color: var(--primary);
    }
    
    /* ==================== BUTTON STYLES ==================== */
    .btn-primary {
        background: var(--btn-gradient);
        color: var(--text-white) !important;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .btn-primary:hover {
        background: var(--btn-hover-gradient);
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 71, 171, 0.2);
        color: var(--text-white) !important;
    }
    
    .btn-outline {
        background: transparent;
        border: 1.5px solid var(--primary);
        color: var(--primary) !important;
        padding: 10px 22px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .btn-outline:hover {
        background: var(--btn-gradient);
        color: var(--text-white) !important;
        border-color: transparent;
        transform: translateY(-2px);
    }
    
    /* ==================== CARD STYLES ==================== */
    .card {
        background: #FFFFFF;
        border-radius: 16px;
        border: 1px solid var(--border-light);
        box-shadow: var(--card-shadow);
        transition: all 0.3s ease;
    }
    
    .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }
    
    .card h3, 
    .card h4 {
        color: var(--text-black) !important;
    }
    
    .card p {
        color: var(--text-dark) !important;
        line-height: 1.5;
    }
    
    /* ==================== NAVIGATION LINKS ==================== */
    .nav-link {
        color: var(--text-gray) !important;
        transition: color 0.2s ease;
    }
    
    .nav-link:hover,
    .nav-link.active {
        color: var(--primary) !important;
    }
    
    /* ==================== LINKS ==================== */
    a:not(.btn):not(.nav-link) {
        color: var(--primary);
    }
    
    a:not(.btn):not(.nav-link):hover {
        color: var(--primary-dark);
    }
    
    /* ==================== HEADINGS ==================== */
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-black) !important;
    }
    
    /* ==================== PARAGRAPHS ==================== */
    p {
        color: var(--text-dark) !important;
    }
    
    /* ==================== ACCESSIBILITY ==================== */
    *:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        border-radius: 4px;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    button, .btn, a, [role="button"] {
        cursor: pointer;
    }
}