/* ============================================
   3D 4K PREMIUM SERVICE ICONS
   Ultra-high quality 3D icons for HVAC247PRO
   ============================================ */

/* Service Icon Container - 3D Base */
.service-card .service-icon {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;

    /* 3D Platform Effect */
    background: linear-gradient(145deg, #0d3251 0%, #1a4a6e 50%, #0a2540 100%);
    border-radius: 24px;

    /* Multiple 3D Shadows for Depth */
    box-shadow:
        /* Inner highlight - top light */
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        /* Outer shadows - 3D depth */
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 16px 32px rgba(0, 0, 0, 0.1),
        0 32px 64px rgba(0, 0, 0, 0.08),
        /* Glow effect */
        0 0 40px rgba(78, 205, 196, 0.2);

    /* 3D Transform */
    transform: perspective(1000px) rotateX(5deg) translateZ(0);
    transform-style: preserve-3d;

    /* Smooth transitions for all properties */
    transition:
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.6s ease-out,
        background 0.6s ease;
}

/* Glossy overlay for glass effect */
.service-card .service-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%);
    border-radius: 24px 24px 0 0;
    pointer-events: none;
}

/* Animated glow ring */
.service-card .service-icon::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg,
        #4ecdc4, #44a08d, #3b82f6, #8b5cf6, #4ecdc4);
    background-size: 400% 400%;
    border-radius: 27px;
    z-index: -1;
    opacity: 0;
    animation: iconGlowRotate 3s linear infinite;
    transition: opacity 0.4s ease;
}

.service-card:hover .service-icon::after {
    opacity: 1;
}

@keyframes iconGlowRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 3D Icon Styling - BRIGHT SOLID COLORS */
/* Override coolair-complete.css which sets color: white */
.service-card .service-icon i,
.service-card.style-one .service-icon i,
.rts-service-area .service-card .service-icon i,
.service-icon i.fas,
.service-icon i.fa,
.service-icon i {
    font-size: 46px !important;
    position: relative;
    z-index: 2;

    /* Bright solid color - OVERRIDE white */
    color: #4ecdc4 !important;
    -webkit-text-fill-color: #4ecdc4 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;

    /* 3D Text Shadow (creates depth + glow) */
    text-shadow:
        0 0 10px rgba(78, 205, 196, 0.8),
        0 0 20px rgba(78, 205, 196, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.4) !important;

    transition:
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        text-shadow 0.6s ease-out;
}

/* Hover - Lift up 3D effect */
.service-card:hover .service-icon {
    transform: perspective(1000px) rotateX(0deg) translateY(-10px) translateZ(20px);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.25),
        0 16px 32px rgba(0, 0, 0, 0.2),
        0 32px 64px rgba(0, 0, 0, 0.15),
        0 0 60px rgba(78, 205, 196, 0.4);
}

.service-card:hover .service-icon i {
    transform: scale(1.15) rotateY(10deg);
    text-shadow:
        0 0 15px currentColor,
        0 0 30px currentColor,
        0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Individual Icon Color Themes - BRIGHT SOLID COLORS */
/* ONLY apply to .service-icon containers on homepage */

/* AC Repair - Bright Ice Blue */
.service-card:nth-child(1) .service-icon i,
.service-card .service-icon i.fa-snowflake {
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
    text-shadow:
        0 0 15px rgba(0, 212, 255, 1),
        0 0 30px rgba(0, 212, 255, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* HVAC Installation - Bright Teal */
.service-card:nth-child(2) .service-icon i,
.service-card .service-icon i.fa-fan {
    color: #4ecdc4 !important;
    -webkit-text-fill-color: #4ecdc4 !important;
    text-shadow:
        0 0 15px rgba(78, 205, 196, 1),
        0 0 30px rgba(78, 205, 196, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Maintenance - Bright Orange/Gold */
.service-card:nth-child(3) .service-icon i,
.service-card .service-icon i.fa-tools {
    color: #ffc107 !important;
    -webkit-text-fill-color: #ffc107 !important;
    text-shadow:
        0 0 15px rgba(255, 193, 7, 1),
        0 0 30px rgba(255, 193, 7, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Emergency - Bright Red */
.service-card:nth-child(4) .service-icon i,
.service-card .service-icon i.fa-bolt {
    color: #ff4757 !important;
    -webkit-text-fill-color: #ff4757 !important;
    text-shadow:
        0 0 15px rgba(255, 71, 87, 1),
        0 0 30px rgba(255, 71, 87, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4) !important;
    animation: boltPulse 2s ease-in-out infinite;
}

@keyframes boltPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; text-shadow: 0 0 20px rgba(255, 71, 87, 1), 0 0 40px rgba(255, 71, 87, 0.8), 0 4px 8px rgba(0, 0, 0, 0.4) !important; }
}

/* Commercial - Bright Blue */
.service-card:nth-child(5) .service-icon i,
.service-card .service-icon i.fa-building {
    color: #3b82f6 !important;
    -webkit-text-fill-color: #3b82f6 !important;
    text-shadow:
        0 0 15px rgba(59, 130, 246, 1),
        0 0 30px rgba(59, 130, 246, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Air Quality - Bright Purple */
.service-card:nth-child(6) .service-icon i,
.service-card .service-icon i.fa-wind {
    color: #a855f7 !important;
    -webkit-text-fill-color: #a855f7 !important;
    text-shadow:
        0 0 15px rgba(168, 85, 247, 1),
        0 0 30px rgba(168, 85, 247, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Service Card Enhancement */
.service-card.style-one {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 35px 30px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    /* CENTER ICON ON DESKTOP */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Center icon on all screen sizes */
.service-card.style-one .service-icon {
    margin-left: auto;
    margin-right: auto;
}

.service-card.style-one::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent);
    transition: left 0.6s ease;
}

.service-card.style-one:hover::before {
    left: 100%;
}

.service-card.style-one:hover {
    transform: translateY(-10px);
    border-color: rgba(78, 205, 196, 0.3);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(78, 205, 196, 0.15);
}

/* Floating Animation for Icons */
@keyframes iconFloat {
    0%, 100% { transform: perspective(1000px) rotateX(5deg) translateY(0) translateZ(0); }
    50% { transform: perspective(1000px) rotateX(5deg) translateY(-5px) translateZ(5px); }
}

.service-card .service-icon {
    animation: iconFloat 4s ease-in-out infinite;
}

.service-card:hover .service-icon {
    animation: none;
}

/* Responsive */
@media (max-width: 991px) {
    .service-card .service-icon {
        width: 90px;
        height: 90px;
        border-radius: 20px;
    }

    .service-card .service-icon i {
        font-size: 38px;
    }
}

@media (max-width: 767px) {
    /* Force icon on TOP CENTER of card */
    .service-card.style-one {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
    }

    .service-card .service-icon {
        width: 110px !important;
        height: 110px !important;
        border-radius: 24px;
        margin: 0 auto 25px auto !important;
        order: -1 !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        animation: none !important;

        /* Better colors for mobile */
        background: linear-gradient(145deg, #1a4a6e 0%, #0d3251 100%) !important;
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.3),
            0 0 30px rgba(78, 205, 196, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.1) !important;
    }

    .service-card .service-icon i {
        font-size: 50px !important;

        /* Bright solid colors for mobile - easier to see */
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #4ecdc4 !important;
        color: #4ecdc4 !important;
        filter: drop-shadow(0 4px 8px rgba(78, 205, 196, 0.5)) !important;
    }

    /* Individual icon colors on mobile */
    .service-icon .fa-snowflake {
        -webkit-text-fill-color: #00d4ff !important;
        color: #00d4ff !important;
        filter: drop-shadow(0 4px 8px rgba(0, 212, 255, 0.5)) !important;
    }

    .service-icon .fa-fan {
        -webkit-text-fill-color: #4ecdc4 !important;
        color: #4ecdc4 !important;
        filter: drop-shadow(0 4px 8px rgba(78, 205, 196, 0.5)) !important;
    }

    .service-icon .fa-tools {
        -webkit-text-fill-color: #ffc107 !important;
        color: #ffc107 !important;
        filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.5)) !important;
    }

    .service-icon .fa-bolt {
        -webkit-text-fill-color: #ff4757 !important;
        color: #ff4757 !important;
        filter: drop-shadow(0 4px 8px rgba(255, 71, 87, 0.5)) !important;
    }

    .service-icon .fa-building {
        -webkit-text-fill-color: #3b82f6 !important;
        color: #3b82f6 !important;
        filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.5)) !important;
    }

    .service-icon .fa-wind {
        -webkit-text-fill-color: #a855f7 !important;
        color: #a855f7 !important;
        filter: drop-shadow(0 4px 8px rgba(168, 85, 247, 0.5)) !important;
    }

    .service-card .service-content {
        width: 100%;
        text-align: center !important;
    }

    .service-card .service-content h3,
    .service-card .service-content p,
    .service-card .service-content a {
        text-align: center !important;
    }

    .service-card.style-one {
        padding: 30px 25px;
    }
}

@media (max-width: 480px) {
    .service-card .service-icon {
        width: 75px;
        height: 75px;
    }

    .service-card .service-icon i {
        font-size: 30px;
    }
}

/* High DPI / 4K Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .service-card .service-icon {
        /* Sharper edges on high-DPI displays */
        image-rendering: -webkit-optimize-contrast;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .service-card .service-icon i {
        /* Crisp text rendering */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
}

/* 4K Ultra HD Enhancement */
@media (min-width: 2560px) {
    .service-card .service-icon {
        width: 140px;
        height: 140px;
        border-radius: 32px;
    }

    .service-card .service-icon i {
        font-size: 60px;
    }

    .service-card.style-one {
        padding: 50px 45px;
        border-radius: 28px;
    }
}