.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-ae5f389:#00B2FF;--e-global-color-a8db939:#E00000;--e-global-color-6cb86c2:#012D85;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================================= BRAVO'S CARPET & FLOOR CLEANING GLOBAL CSS — ELEMENTOR PRO Primary Red: #E00000 ========================================================= */ /* ========================================================= 1. VARIABLES GLOBALES ========================================================= */ :root { --bravo-red: #E00000; --bravo-red-dark: #8F0000; --bravo-red-deep: #5C0000; --bravo-red-light: #FF3030; --bravo-red-highlight: #FF6666; --bravo-white: #FFFFFF; } /* ========================================================= 2. RED METALLIC CONTAINERS Elementor Class: red-metallic ========================================================= */ .red-metallic { position: relative; overflow: hidden; background: linear-gradient( 135deg, #5C0000 0%, #A80000 15%, #E00000 35%, #FF3030 48%, #E00000 60%, #990000 80%, #5C0000 100% ); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -8px 20px rgba(70, 0, 0, 0.35), 0 12px 35px rgba(224, 0, 0, 0.20); background-size: 250% 250%; animation: redMetallicMove 8s ease-in-out infinite; } /* Metallic movement */ @keyframes redMetallicMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================================= 3. METALLIC SHINE OVER CONTAINERS ========================================================= */ .red-metallic::after { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.08), rgba(255,255,255,0.45), rgba(255,255,255,0.08), transparent ); transform: skewX(-25deg); animation: redMetallicShine 5s ease-in-out infinite; pointer-events: none; } @keyframes redMetallicShine { 0% { left: -120%; } 45% { left: 140%; } 100% { left: 140%; } } /* ========================================================= 4. RED METALLIC CONTAINER — HOVER ========================================================= */ .red-metallic:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -8px 20px rgba(70,0,0,0.35), 0 18px 45px rgba(224,0,0,0.35); transition: transform 0.4s ease, box-shadow 0.4s ease; } /* ========================================================= 5. STATIC RED METALLIC If you DON'T want movement Elementor Class: red-metallic-static ========================================================= */ .red-metallic-static { background: linear-gradient( 135deg, #5C0000 0%, #A80000 20%, #E00000 42%, #FF3030 50%, #E00000 58%, #A80000 80%, #5C0000 100% ); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -8px 20px rgba(70,0,0,0.35), 0 10px 30px rgba(224,0,0,0.20); } /* ========================================================= 6. RED METALLIC TEXT Elementor Class: red-metallic-text ========================================================= */ .red-metallic-text { background: linear-gradient( 90deg, #700000 0%, #E00000 20%, #FF6666 35%, #E00000 50%, #FF3030 65%, #A00000 80%, #700000 100% ); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: redTextMetallic 4s linear infinite; } /* ========================================================= 7. ANIMATED RED GRADIENT TEXT Elementor Class: red-gradient-text ========================================================= */ .red-gradient-text { background: linear-gradient( 90deg, #8F0000, #E00000, #FF4444, #FFFFFF, #FF4444, #E00000, #8F0000 ); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: redGradientText 4s ease-in-out infinite; } /* Text gradient movement */ @keyframes redGradientText { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================================= 8. RED METALLIC TEXT SHINE Elementor Class: red-shine-text ========================================================= */ .red-shine-text { background: linear-gradient( 110deg, #700000 0%, #E00000 30%, #FF3030 42%, #FFFFFF 50%, #FF3030 58%, #E00000 70%, #700000 100% ); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: redTextShine 3.5s linear infinite; } @keyframes redTextShine { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } } /* ========================================================= 9. RED GLOW TEXT Elementor Class: red-glow-text ========================================================= */ .red-glow-text { color: #E00000; text-shadow: 0 0 5px rgba(224,0,0,0.4), 0 0 15px rgba(224,0,0,0.35), 0 0 30px rgba(224,0,0,0.25); animation: redGlow 2.5s ease-in-out infinite alternate; } @keyframes redGlow { from { text-shadow: 0 0 5px rgba(224,0,0,0.25), 0 0 15px rgba(224,0,0,0.20); } to { text-shadow: 0 0 10px rgba(224,0,0,0.55), 0 0 25px rgba(224,0,0,0.45), 0 0 40px rgba(224,0,0,0.25); } } /* ========================================================= 10. RED METALLIC BUTTON Elementor Class: red-metallic-button ========================================================= */ .red-metallic-button .elementor-button { position: relative; overflow: hidden; background: linear-gradient( 135deg, #650000, #A80000, #E00000, #FF3B3B, #E00000, #920000, #650000 ); background-size: 250% 250%; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 8px 20px rgba(224,0,0,0.25); animation: buttonMetallicMove 5s ease infinite; transition: transform 0.3s ease, box-shadow 0.3s ease; } @keyframes buttonMetallicMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Button shine */ .red-metallic-button .elementor-button::after { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.10), rgba(255,255,255,0.60), rgba(255,255,255,0.10), transparent ); transform: skewX(-25deg); animation: buttonShine 3.5s infinite; } @keyframes buttonShine { 0% { left: -120%; } 45% { left: 140%; } 100% { left: 140%; } } /* Button hover */ .red-metallic-button .elementor-button:hover { transform: translateY(-3px) scale(1.03); box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 12px 30px rgba(224,0,0,0.45); } /* ========================================================= 11. RED BORDER Elementor Class: red-border ========================================================= */ .red-border { border: 2px solid #E00000; box-shadow: 0 0 0 1px rgba(224,0,0,0.15), 0 0 20px rgba(224,0,0,0.15); } /* ========================================================= 12. RED GLOW CONTAINER Elementor Class: red-glow ========================================================= */ .red-glow { box-shadow: 0 0 10px rgba(224,0,0,0.20), 0 0 25px rgba(224,0,0,0.15), 0 0 50px rgba(224,0,0,0.10); } /* ========================================================= 13. RED HOVER EFFECT Elementor Class: red-hover ========================================================= */ .red-hover { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .red-hover:hover { transform: translateY(-6px); border-color: #E00000; box-shadow: 0 15px 35px rgba(224,0,0,0.25); } /* ========================================================= 14. RED DIVIDER Elementor Class: red-divider ========================================================= */ .red-divider { width: 100%; height: 3px; background: linear-gradient( 90deg, transparent, #8F0000, #E00000, #FF5555, #E00000, #8F0000, transparent ); background-size: 200% 100%; animation: dividerMove 3s linear infinite; } @keyframes dividerMove { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* ========================================================= 15. ACCESSIBILITY / REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .red-metallic, .red-metallic::after, .red-metallic-text, .red-gradient-text, .red-shine-text, .red-glow-text, .red-metallic-button .elementor-button, .red-metallic-button .elementor-button::after, .red-divider { animation: none !important; } }/* End custom CSS */