/* =====================================================
   NALEKO THEME 2026
   Load AFTER StylesFinal.css
   ===================================================== */

:root {

    /* =================================================
       NEW BRAND PALETTE
       ================================================= */

    --naleko-navy: #120C4E;
    --naleko-sky: #6EC6F5;
    --naleko-violet: #A78BFA;
    --naleko-purple: #C450E8;
    --naleko-magenta: #D020D0;
    --naleko-deep-magenta: #B800B8;

    --text-light: #FFFFFF;
    --text-dark: #120C4E;

    /* =================================================
       SEMANTIC COLORS
       ================================================= */

    --color-primary: var(--naleko-navy);
    --color-secondary: var(--naleko-magenta);

    --color-heading: var(--naleko-navy);
    --color-subheading: var(--naleko-purple);

    --color-card-border: var(--naleko-deep-magenta);

    /* =================================================
       GRADIENTS
       ================================================= */

    --gradient-header:
        linear-gradient(
            90deg,
            #120C4E 0%,
            #6EC6F5 45%,
            #B800B8 80%,
            #D020D0 100%
        );

    --gradient-hero:
        linear-gradient(
            90deg,
            #6EC6F5 0%,
            #A78BFA 35%,
            #C450E8 70%,
            #D020D0 100%
        );

    --gradient-card:
        linear-gradient(
            135deg,
            #120C4E 0%,
            #6EC6F5 50%,
            #B800B8 100%
        );

    --gradient-button:
        linear-gradient(
            90deg,
            #D020D0 0%,
            #B800B8 100%
        );
}


/* =====================================================
   HEADER
   ===================================================== */

header,
.site-header,
.navbar,
.navigation,
.bg-naleko-dark-blue {

    background: var(--gradient-header) !important;
}

header a,
.navbar a,
.navigation a {

    color: #FFFFFF !important;
}

header a:hover,
.navbar a:hover {

    color: #6EC6F5 !important;
}


/* =====================================================
   FOOTER
   ===================================================== */

footer,
.site-footer {

    background: var(--gradient-header) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5 {

    color: #FFFFFF !important;
}

footer p,
footer a,
footer span,
footer li {

    color: rgba(255,255,255,0.95) !important;
}

footer a:hover {

    color: #6EC6F5 !important;
}


/* =====================================================
   HERO HEADINGS
   ===================================================== */

.hero-section h1,
.hero-title,
.page-title {

    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-section p,
.hero-subtitle,
.hero-description {

    color: var(--naleko-purple) !important;
}


/* =====================================================
   GENERAL HEADINGS
   ===================================================== */

h1,
h2,
h3,
.section-title,
.text-naleko-dark-blue {

    color: var(--naleko-navy);
}


/* =====================================================
   BUTTONS
   ===================================================== */

.btn-primary,
.btn-primary-demo,
.call-to-action-button,
.submit-btn {

    background: var(--gradient-button) !important;
    border: none !important;
    color: white !important;

    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary-demo:hover,
.call-to-action-button:hover,
.submit-btn:hover {

    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(184,0,184,.35);
}

.btn-primary:active,
.btn-primary-demo:active {

    transform: translateY(0);
}


/* =====================================================
   APP CARDS
   ===================================================== */

.app-card,
.offer-card {

    border: 2px solid var(--color-card-border);
}

.app-card:hover {

    border-color: var(--naleko-magenta);
    box-shadow:
        0 8px 25px rgba(208,32,208,.20);
}

.app-card h3 {

    color: var(--naleko-navy);
}

.app-card .demo-link {

    color: var(--naleko-magenta);
}

.app-card:hover .demo-link {

    border-bottom-color: var(--naleko-magenta);
}


/* =====================================================
   SERVICE BOXES
   ===================================================== */

.service-box {

    border: 2px solid var(--naleko-deep-magenta);
}

.service-box:hover {

    border-color: var(--naleko-magenta);
}


/* =====================================================
   FLIP CARDS
   ===================================================== */

.flip-card-front {

    background: #FFFFFF;
    border: 2px solid var(--naleko-deep-magenta);
}

.flip-card-front h3 {

    color: var(--naleko-navy);
}

.flip-card-back {

    background: var(--gradient-card);
    color: white;
}

.flip-card-back h3,
.flip-card-back p {

    color: white;
}


/* =====================================================
   ICONS
   ===================================================== */

.card-icon {

    background: var(--gradient-button);
}


/* =====================================================
   SECTION HEADERS
   ===================================================== */

.offer-section .section-title,
.result-section .section-title,
.infrastructure h2,
.apps-header h2 {

    color: var(--naleko-navy) !important;
}

.apps-header p,
.infrastructure p {

    color: var(--naleko-purple);
}


/* =====================================================
   FORM CONTROLS
   ===================================================== */

input:focus,
textarea:focus,
select:focus {

    outline: none;

    border-color: var(--naleko-magenta);

    box-shadow:
        0 0 0 3px rgba(208,32,208,.20);
}


/* =====================================================
   LINKS
   ===================================================== */

a {

    transition: color .3s ease;
}

a:hover {

    color: var(--naleko-magenta);
}


/* =====================================================
   LOGO ROW
   ===================================================== */

.logo-row img:hover {

    filter:
        drop-shadow(0 0 8px rgba(208,32,208,.35));
}


/* =====================================================
   CUSTOM UTILITIES
   ===================================================== */

.theme-gradient-text {

    background: var(--gradient-hero);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.theme-gradient-bg {

    background: var(--gradient-header);
}

.theme-card-gradient {

    background: var(--gradient-card);
}

.theme-button-gradient {

    background: var(--gradient-button);
}

a.bg-naleko-dark-blue,
button.bg-naleko-dark-blue{

    background:#D020D0 !important;

    border-color:#D020D0 !important;
}

a.bg-naleko-dark-blue:hover,
button.bg-naleko-dark-blue:hover{

    background-color: #1a237e;

    border-color:#FFFFFF !important;

    color: white !important;
}


/* Main section titles */

h1,
h2,
.section-title,
.page-title,
.hero-title,
.text-naleko-dark-blue {

    background: linear-gradient(
        90deg,
        #6EC6F5 0%,
        #A78BFA 35%,
        #C450E8 65%,
        #D020D0 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}