/**
 * ============================================================================
 * ULTRA-PREMIUM 3D ICONS - GLOBAL STYLESHEET
 * ============================================================================
 *
 * Applies stunning 3D effects to ALL icons across the entire website
 * - Font Awesome icons
 * - SVG icons
 * - Icon buttons
 * - Social media icons
 * - Navigation icons
 * - Service icons
 * - Feature icons
 *
 * Design Level: PREMIUM 3D with depth, shadows, and animations
 * Generated: 2025-11-15
 * ============================================================================
 */

/* ==========================================================================
   GLOBAL 3D ICON BASE STYLES
   ========================================================================== */

/* Target ALL Font Awesome icons */
i[class*="fa-"],
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
    /* 3D Transform properties */
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layered shadow for depth */
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.1),
        0 2px 0 rgba(0, 0, 0, 0.09),
        0 3px 0 rgba(0, 0, 0, 0.08),
        0 4px 0 rgba(0, 0, 0, 0.07),
        0 5px 0 rgba(0, 0, 0, 0.06),
        0 6px 1px rgba(0, 0, 0, 0.05),
        0 8px 12px rgba(0, 0, 0, 0.15);

    /* Gradient color for richness */
    background: linear-gradient(135deg, #3e2723 0%, #6d4c41 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Enhance rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hover state - lift and rotate */
i[class*="fa-"]:hover,
.fa:hover,
.fas:hover,
.far:hover,
.fal:hover,
.fad:hover,
.fab:hover {
    transform: translateY(-4px) translateZ(30px) scale(1.15) rotate(5deg);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.12),
        0 4px 0 rgba(0, 0, 0, 0.11),
        0 6px 0 rgba(0, 0, 0, 0.10),
        0 8px 0 rgba(0, 0, 0, 0.09),
        0 10px 0 rgba(0, 0, 0, 0.08),
        0 12px 2px rgba(0, 0, 0, 0.07),
        0 16px 24px rgba(0, 0, 0, 0.25);

    background: linear-gradient(135deg, #6d4c41 0%, #8d6e63 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   SVG ICONS - 3D Effects
   ========================================================================== */

svg,
svg path,
svg circle,
svg rect,
svg polygon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.10));
}

svg:hover {
    transform: translateY(-6px) translateZ(40px) scale(1.2) rotate(-5deg);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15))
            drop-shadow(0 12px 32px rgba(62, 39, 35, 0.20));
}

/* ==========================================================================
   ICON BUTTONS - Premium 3D Buttons
   ========================================================================== */

.icon-button,
button i,
a i,
.btn i,
[class*="icon-"] {
    display: inline-block;
    position: relative;
}

.icon-button::before,
button i::before,
a i::before,
.btn i::before {
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(62, 39, 35, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.icon-button:hover::before,
button:hover i::before,
a:hover i::before,
.btn:hover i::before {
    opacity: 1;
}

/* ==========================================================================
   SPECIFIC ICON SIZES - Enhanced 3D per size
   ========================================================================== */

/* Small icons */
.fa-sm,
.fa-xs {
    transform: translateZ(10px);
}

.fa-sm:hover,
.fa-xs:hover {
    transform: translateY(-2px) translateZ(20px) scale(1.1) rotate(3deg);
}

/* Large icons */
.fa-lg,
.fa-2x,
.fa-3x,
.fa-4x,
.fa-5x {
    transform: translateZ(20px);
}

.fa-lg:hover,
.fa-2x:hover,
.fa-3x:hover,
.fa-4x:hover,
.fa-5x:hover {
    transform: translateY(-8px) translateZ(50px) scale(1.2) rotate(8deg);
    text-shadow:
        0 4px 0 rgba(0, 0, 0, 0.15),
        0 8px 0 rgba(0, 0, 0, 0.13),
        0 12px 0 rgba(0, 0, 0, 0.11),
        0 16px 0 rgba(0, 0, 0, 0.09),
        0 20px 4px rgba(0, 0, 0, 0.07),
        0 24px 40px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   SOCIAL MEDIA ICONS - Brand Colors with 3D
   ========================================================================== */

.fa-facebook,
.fa-facebook-f,
.fa-facebook-square {
    background: linear-gradient(135deg, #1877f2 0%, #0d5dbf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fa-twitter,
.fa-twitter-square {
    background: linear-gradient(135deg, #1da1f2 0%, #0c85d0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fa-instagram,
.fa-instagram-square {
    background: linear-gradient(135deg, #e1306c 0%, #c13584 50%, #833ab4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fa-linkedin,
.fa-linkedin-in {
    background: linear-gradient(135deg, #0077b5 0%, #005582 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fa-youtube,
.fa-youtube-square {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fa-pinterest,
.fa-pinterest-p {
    background: linear-gradient(135deg, #e60023 0%, #b8001c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   SERVICE ICONS - Brown theme with 3D depth
   ========================================================================== */

/* Icons in service sections */
.service-icon,
.feature-icon,
.benefit-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3e2723 0%, #6d4c41 100%);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.service-icon::before,
.feature-icon::before,
.benefit-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, #3e2723 0%, #6d4c41 50%, #8d6e63 100%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    animation: iconRotate 6s linear infinite;
}

@keyframes iconRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.service-icon:hover,
.feature-icon:hover,
.benefit-icon:hover {
    transform: translateY(-12px) translateZ(60px) scale(1.15);
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.25),
        0 8px 16px rgba(0, 0, 0, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        0 0 0 4px rgba(62, 39, 35, 0.1);
}

.service-icon:hover::before,
.feature-icon:hover::before,
.benefit-icon:hover::before {
    opacity: 1;
}

.service-icon i,
.feature-icon i,
.benefit-icon i {
    font-size: 32px;
    color: white;
    background: none;
    -webkit-text-fill-color: white;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   NAVIGATION ICONS - Menu & UI Icons
   ========================================================================== */

/* Hamburger menu icon */
.hamburger-icon,
.menu-icon,
.nav-icon {
    display: inline-block;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-style: preserve-3d;
}

.hamburger-icon:hover,
.menu-icon:hover,
.nav-icon:hover {
    transform: translateY(-4px) translateZ(30px) scale(1.2) rotate(90deg);
}

/* Search icon */
.fa-search,
.fa-magnifying-glass {
    position: relative;
}

.fa-search:hover,
.fa-magnifying-glass:hover {
    animation: searchPulse 0.6s ease-in-out;
}

@keyframes searchPulse {
    0%, 100% { transform: translateZ(20px) scale(1); }
    50% { transform: translateZ(40px) scale(1.3); }
}

/* Close/X icon */
.fa-times,
.fa-xmark,
.fa-close {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fa-times:hover,
.fa-xmark:hover,
.fa-close:hover {
    transform: translateZ(40px) rotate(180deg) scale(1.3);
}

/* ==========================================================================
   ANIMATED ICONS - Special effects
   ========================================================================== */

/* Spinning icons */
.fa-spinner,
.fa-circle-notch,
.fa-sync {
    animation: iconSpin 1.5s linear infinite;
}

@keyframes iconSpin {
    0% { transform: translateZ(20px) rotate(0deg); }
    100% { transform: translateZ(20px) rotate(360deg); }
}

/* Bouncing icons */
.fa-arrow-down,
.fa-chevron-down,
.fa-angle-down {
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0) translateZ(20px); }
    50% { transform: translateY(10px) translateZ(30px); }
}

/* Pulsing icons */
.fa-heart,
.fa-star {
    animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: translateZ(20px) scale(1); }
    50% { transform: translateZ(40px) scale(1.2); }
}

/* ==========================================================================
   CONTACT & PHONE ICONS - Call to action emphasis
   ========================================================================== */

.fa-phone,
.fa-phone-alt,
.fa-mobile,
.fa-envelope,
.fa-envelope-open {
    background: linear-gradient(135deg, #3e2723 0%, #6d4c41 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fa-phone:hover,
.fa-phone-alt:hover,
.fa-mobile:hover {
    animation: phoneRing 0.5s ease-in-out;
}

@keyframes phoneRing {
    0%, 100% { transform: translateZ(30px) rotate(0deg); }
    25% { transform: translateZ(40px) rotate(-15deg); }
    75% { transform: translateZ(40px) rotate(15deg); }
}

/* ==========================================================================
   QUOTE & RATING ICONS - Enhanced visibility
   ========================================================================== */

.fa-quote-left,
.fa-quote-right {
    opacity: 0.3;
    transition: all 0.4s ease;
}

.fa-quote-left:hover,
.fa-quote-right:hover {
    opacity: 0.8;
    transform: translateZ(40px) scale(1.5) rotate(10deg);
}

.fa-star {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.4));
}

.fa-star:hover {
    filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.6))
            drop-shadow(0 2px 12px rgba(255, 215, 0, 0.4));
}

/* ==========================================================================
   ACCORDION & FAQ ICONS - Interactive indicators
   ========================================================================== */

.accordion-icon,
.faq-icon,
.toggle-icon,
.fa-chevron-down,
.fa-chevron-up,
.fa-plus,
.fa-minus {
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-style: preserve-3d;
}

.accordion-icon.active,
.faq-icon.active,
[aria-expanded="true"] .fa-chevron-down,
[aria-expanded="true"] .fa-plus {
    transform: translateZ(30px) rotate(180deg);
}

/* ==========================================================================
   RESPONSIVE - Adjust 3D effects for mobile
   ========================================================================== */

@media (max-width: 768px) {
    /* Reduce intensity on mobile for performance */
    i[class*="fa-"],
    .fa, .fas, .far, .fal, .fad, .fab {
        text-shadow:
            0 1px 0 rgba(0, 0, 0, 0.08),
            0 2px 0 rgba(0, 0, 0, 0.07),
            0 3px 0 rgba(0, 0, 0, 0.06),
            0 4px 6px rgba(0, 0, 0, 0.12);
    }

    i[class*="fa-"]:hover,
    .fa:hover, .fas:hover, .far:hover, .fal:hover, .fad:hover, .fab:hover {
        transform: translateY(-2px) translateZ(20px) scale(1.1) rotate(3deg);
    }

    svg:hover {
        transform: translateY(-3px) translateZ(25px) scale(1.15) rotate(-3deg);
    }
}

/* ==========================================================================
   ACCESSIBILITY - Reduced motion support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    i[class*="fa-"],
    .fa, .fas, .far, .fal, .fad, .fab,
    svg,
    .service-icon,
    .feature-icon,
    .benefit-icon {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }

    i[class*="fa-"]:hover,
    svg:hover,
    .service-icon:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   PRINT - Remove 3D effects for print
   ========================================================================== */

@media print {
    i[class*="fa-"],
    .fa, .fas, .far, .fal, .fad, .fab,
    svg {
        text-shadow: none !important;
        filter: none !important;
        transform: none !important;
        background: none !important;
        -webkit-text-fill-color: #000 !important;
    }
}

/* ==========================================================================
   END OF 3D ICONS STYLESHEET
   ========================================================================== */