/* ======================================================== */
/* HOW WE DELIVER EXCELLENCE SECTION - CSS STYLING */
/* Database stores only TEXT, CSS stores all COLORS/STYLING */
/* ======================================================== */

/* ============================================================ */
/* CAPABILITY NUMBER COLORS */
/* ============================================================ */

.deliver-number-01 {
    color: #667eea !important;
    font-family: 'Poppins', sans-serif;
}

.deliver-number-02 {
    color: #c9a227 !important;
    font-family: 'Poppins', sans-serif;
}

.deliver-number-03 {
    color: #6B1423 !important;
    font-family: 'Poppins', sans-serif;
}

.deliver-number-04 {
    color: #667eea !important;
    font-family: 'Poppins', sans-serif;
}

/* ============================================================ */
/* GRADIENT BOXES FOR EACH CAPABILITY */
/* ============================================================ */

.deliver-gradient-box {
    border-radius: 12px;
    padding: 3rem;
    color: white;
    text-align: center;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
}

.deliver-gradient-box:hover {
    transform: scale(1.02);
}

.deliver-gradient-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    z-index: 1;
}

.deliver-gradient-box > * {
    position: relative;
    z-index: 2;
}

/* Capability 01 - Custom Development */
.deliver-gradient-01 {
    background-image: url('../img/welcome/CODE.jpg') !important;
}

/* Capability 02 - End-to-End Integration */
.deliver-gradient-02 {
    background-image: url('../img/welcome/as_photography-laptop-5603790_1920.jpg') !important;
}

/* Capability 03 - Performance Optimization */
.deliver-gradient-03 {
    background-image: url('../img/welcome/mr-panda-devops-3155972_1920.jpg') !important;
}

/* Capability 04 - Ongoing Support */
.deliver-gradient-04 {
    background-image: url('../img/welcome/Developer-sitting-down-to-code-2048x1152.jpg') !important;
}

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

.deliver-gradient-box i {
    opacity: 0.3;
    font-size: 5rem;
    margin: 0 auto;
    display: block;
}

/* ============================================================ */
/* CAPABILITY TEXT STYLING */
/* ============================================================ */

.capability-number {
    font-size: 3rem !important;
    font-weight: 900 !important;
    margin-bottom: 1rem !important;
    font-family: 'Poppins', sans-serif;
}

.capability-content h3 {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 1rem !important;
    font-family: 'Poppins', sans-serif;
}

.capability-content p {
    font-size: 1rem !important;
    color: #666 !important;
    line-height: 1.8 !important;
    margin-bottom: 1rem !important;
    font-family: 'Poppins', sans-serif;
}

/* ============================================================ */
/* CAPABILITY FEATURES LIST */
/* ============================================================ */

.capability-features {
    list-style: none !important;
    padding: 0 !important;
}

.capability-features li {
    margin-bottom: 0.5rem !important;
    font-size: 0.95rem !important;
    color: #555 !important;
    font-family: 'Poppins', sans-serif;
}

.capability-features li:last-child {
    margin-bottom: 0 !important;
}

.capability-features li i {
    color: #c9a227 !important;
    margin-right: 0.5rem !important;
    font-weight: 900;
}

/* ============================================================ */
/* ALTERNATING LAYOUT */
/* ============================================================ */

.capabilities-grid .row {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

.capabilities-grid .row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ============================================================ */
/* RESPONSIVE DESIGN */
/* ============================================================ */

@media (max-width: 991px) {
    .deliver-gradient-box {
        min-height: 250px;
        padding: 2rem;
    }

    .capability-number {
        font-size: 2.5rem !important;
    }

    .capability-content h3 {
        font-size: 1.5rem !important;
    }

    .deliver-gradient-box i {
        font-size: 4rem;
    }
}

@media (max-width: 575px) {
    .deliver-gradient-box {
        min-height: 200px;
        padding: 1.5rem;
    }

    .capability-number {
        font-size: 2rem !important;
    }

    .capability-content h3 {
        font-size: 1.3rem !important;
    }

    .capability-content p {
        font-size: 0.9rem !important;
    }

    .deliver-gradient-box i {
        font-size: 3rem;
    }

    .capability-features li {
        font-size: 0.85rem !important;
    }
}

/* ============================================================ */
/* HOVER EFFECTS */
/* ============================================================ */

.capability-content {
    transition: all 0.3s ease;
}

.capabilities-grid .row:hover .capability-content {
    transform: translateY(-5px);
}

/* ============================================================ */
/* COLORS ARE PERMANENT IN CSS - NOT IN DATABASE */
/* Database stores only: number, title, description, features, icon */
/* CSS stores: all gradient colors, styling, animations */
/* This ensures styling survives database backups/cleanups */
/* ============================================================ */