/* Dynamic Services Section Styles - Controlled from Admin Panel */

/* ========================================
   SERVICES SECTION BACKGROUND
   ======================================== */

html body:not(.dark-mode):not([data-theme="dark"]) .services,
html body:not(.dark-mode):not([data-theme="dark"]) section.services,
html body:not(.dark-mode):not([data-theme="dark"]) #services,
body:not(.dark-mode):not([data-theme="dark"]) .services,
body:not(.dark-mode):not([data-theme="dark"]) section.services,
body:not(.dark-mode):not([data-theme="dark"]) #services,
.services,
section.services,
#services {
    background: #fafafa !important;
}

/* ========================================
   SERVICE CARDS
   ======================================== */

/* Service card background */
html body:not(.dark-mode):not([data-theme="dark"]) .service-card,
body:not(.dark-mode):not([data-theme="dark"]) .service-card,
.service-card {
    background: #f1f1ea !important;
}

/* Service card icon background */
html body:not(.dark-mode):not([data-theme="dark"]) .service-card .service-icon,
html body:not(.dark-mode):not([data-theme="dark"]) .service-icon,
body:not(.dark-mode):not([data-theme="dark"]) .service-card .service-icon,
body:not(.dark-mode):not([data-theme="dark"]) .service-icon,
.service-card .service-icon,
.service-icon {
    background: #eaeadc !important;
}

/* Service card icon color */
html body:not(.dark-mode):not([data-theme="dark"]) .service-card .service-icon i,
html body:not(.dark-mode):not([data-theme="dark"]) .service-icon i,
body:not(.dark-mode):not([data-theme="dark"]) .service-card .service-icon i,
body:not(.dark-mode):not([data-theme="dark"]) .service-icon i,
.service-card .service-icon i,
.service-icon i {
    color: #c79e66 !important;
}

/* Service card title */
html body:not(.dark-mode):not([data-theme="dark"]) .service-card h3,
body:not(.dark-mode):not([data-theme="dark"]) .service-card h3,
.service-card h3 {
    color: #100f0f !important;
}

/* Service card description */
html body:not(.dark-mode):not([data-theme="dark"]) .service-card p,
body:not(.dark-mode):not([data-theme="dark"]) .service-card p,
.service-card p {
    color: #1a1919 !important;
}

/* ========================================
   HOVER STATES - MAINTAIN FUNCTIONALITY
   ======================================== */

/* Keep hover icon color change with smooth zoom effect */
.service-card:hover .service-icon {
    transform: scale(1.15) !important;
}

/* Smooth and fast transition for icon */
.service-icon {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}