/* --- 1. THE LIFE EFFECT (Floating Animation) --- */
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
/* --- 2. THE SHIMMER EFFECT (Light Swipe) --- */
@keyframes shimmer {
0% { left: -150%; }
100% { left: 150%; }
}
/* --- BASE STYLES --- */
.effect-box {
background: #FFFFFF !important;
transition: all 0.5s ease;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.effect-box .elementor-icon {
background: #FDFDFD;
border: 1px solid #EEEEEE;
position: relative;
overflow: hidden; /* Needed for shimmer */
animation: floating 3s ease-in-out infinite; /* Constant Life Effect */
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
/* Shimmer Layer */
.effect-box .elementor-icon::after {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
transform: skewX(-20deg);
}
.effect-box:hover .elementor-icon::after {
animation: shimmer 0.8s forwards;
}
.effect-box:hover .elementor-icon {
animation: none; /* Stop floating when hovering */
transform: translateY(-12px) scale(1.12);
}
/* --- COLOR THEMES (Apply these classes to your icon boxes) --- */
/* Effect 1: Facebook Blue */
.effect-1:hover { background: radial-gradient(circle, rgba(24,119,242,0.1), #FFF) !important; }
.effect-1:hover .elementor-icon {
background: linear-gradient(180deg, #4b97f5, #1877F2);
border-color: #1877F2;
box-shadow: 0 15px 30px rgba(24,119,242,0.4);
}
/* Effect 2: TikTok Pink */
.effect-2:hover { background: radial-gradient(circle, rgba(254,44,85,0.1), #FFF) !important; }
.effect-2:hover .elementor-icon {
background: linear-gradient(180deg, #ff5e7e, #FE2C55);
border-color: #FE2C55;
box-shadow: 0 15px 30px rgba(254,44,85,0.4);
}
/* Effect 3: Google Blue */
.effect-3:hover { background: radial-gradient(circle, rgba(66,133,244,0.1), #FFF) !important; }
.effect-3:hover .elementor-icon {
background: linear-gradient(180deg, #6ea3f7, #4285F4);
border-color: #4285F4;
box-shadow: 0 15px 30px rgba(66,133,244,0.4);
}
/* Effect 4: Teal/Landing Page */
.effect-4:hover { background: radial-gradient(circle, rgba(0,196,204,0.1), #FFF) !important; }
.effect-4:hover .elementor-icon {
background: linear-gradient(180deg, #33d0d6, #00C4CC);
border-color: #00C4CC;
box-shadow: 0 15px 30px rgba(0,196,204,0.4);
}
/* Effect 5: Purple/Tracking */
.effect-5:hover { background: radial-gradient(circle, rgba(124,58,237,0.1), #FFF) !important; }
.effect-5:hover .elementor-icon {
background: linear-gradient(180deg, #a78bfa, #7C3AED);
border-color: #7C3AED;
box-shadow: 0 15px 30px rgba(124,58,237,0.4);
}
/* Effect 6: Amber/Design */
.effect-6:hover { background: radial-gradient(circle, rgba(245,158,11,0.1), #FFF) !important; }
.effect-6:hover .elementor-icon {
background: linear-gradient(180deg, #fbbf24, #F59E0B);
border-color: #F59E0B;
box-shadow: 0 15px 30px rgba(245,158,11,0.4);
}
/* Effect 7: Red/Video */
.effect-7:hover { background: radial-gradient(circle, rgba(239,68,68,0.1), #FFF) !important; }
.effect-7:hover .elementor-icon {
background: linear-gradient(180deg, #f87171, #EF4444);
border-color: #EF4444;
box-shadow: 0 15px 30px rgba(239,68,68,0.4);
}
/* Effect 8: Green/CRM */
.effect-8:hover { background: radial-gradient(circle, rgba(16,185,129,0.1), #FFF) !important; }
.effect-8:hover .elementor-icon {
background: linear-gradient(180deg, #34d399, #10B981);
border-color: #10B981;
box-shadow: 0 15px 30px rgba(16,185,129,0.4);
}