.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--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-5 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){--kit-widget-spacing: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 *//* ============================================================ GLOBAL STYLES — Used Auto Parts UAE Paste this in: Elementor → Site Settings → Custom CSS OR in your theme's Customizer → Additional CSS ============================================================ */ /* Google Fonts (add to if not already loaded) */ /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Oswald:wght@400;500;600;700&display=swap'); */ /* ============================================ COLOR & FONT VARIABLES ============================================ */ :root { --uap-primary: #c8102e; --uap-primary-dark: #9b0a22; --uap-primary-light: #e63648; --uap-secondary: #ffd700; --uap-bg: #ffffff; --uap-bg-soft: #f7f7f5; --uap-bg-gray: #ededeb; --uap-bg-dark: #0e0e0e; --uap-text: #161616; --uap-text-muted: #555555; --uap-text-light: #888888; --uap-border: #e5e5e5; --uap-border-dark: #d0d0d0; --uap-whatsapp: #25D366; --uap-shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --uap-shadow-md: 0 8px 24px rgba(0,0,0,0.10); --uap-shadow-lg: 0 20px 50px rgba(0,0,0,0.15); --uap-shadow-red: 0 15px 40px rgba(200,16,46,0.30); --uap-font-sans: 'Inter', -apple-system, sans-serif; --uap-font-display: 'Oswald', 'Inter', sans-serif; } /* ============================================ COMMON RESET (only inside .uap-section) ============================================ */ .uap-section *, .uap-section *::before, .uap-section *::after { box-sizing: border-box; } .uap-section { font-family: var(--uap-font-sans); color: var(--uap-text); line-height: 1.6; -webkit-font-smoothing: antialiased; } .uap-section img { max-width: 100%; display: block; } .uap-section a { color: inherit; text-decoration: none; } .uap-section ul { list-style: none; padding: 0; margin: 0; } .uap-section button { font-family: inherit; cursor: pointer; border: none; background: none; } .uap-container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; } ::selection { background: var(--uap-primary); color: #fff; } /* ============================================ COMMON SECTION HEADERS ============================================ */ .uap-section-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; letter-spacing: 0.2em; font-weight: 700; color: var(--uap-primary); text-transform: uppercase; margin-bottom: 1rem; } .uap-section-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--uap-primary); } .uap-section-title { font-family: var(--uap-font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--uap-text); margin-bottom: 1rem; } .uap-section-title .accent { color: var(--uap-primary); } .uap-section-desc { font-size: 1.02rem; color: var(--uap-text-muted); max-width: 640px; line-height: 1.7; } .uap-section-head { margin-bottom: 3.5rem; } .uap-section-head.center { text-align: center; } .uap-section-head.center .uap-section-eyebrow { justify-content: center; } .uap-section-head.center .uap-section-desc { margin-left: auto; margin-right: auto; } /* ============================================ COMMON BUTTONS ============================================ */ .uap-btn-primary { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--uap-primary); color: #fff !important; padding: 1rem 1.8rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; text-decoration: none; border: none; cursor: pointer; } .uap-btn-primary:hover { background: var(--uap-primary-dark); transform: translateY(-2px); box-shadow: var(--uap-shadow-red); color: #fff !important; } .uap-btn-primary svg { width: 18px; height: 18px; transition: transform 0.3s; } .uap-btn-primary:hover svg { transform: translateX(4px); } .uap-btn-outline { display: inline-flex; align-items: center; gap: 0.6rem; background: transparent; color: var(--uap-text) !important; padding: 1rem 1.8rem; border: 1.5px solid var(--uap-border-dark); border-radius: 8px; font-weight: 600; font-size: 0.95rem; transition: border-color 0.2s, color 0.2s, transform 0.2s; text-decoration: none; } .uap-btn-outline:hover { border-color: var(--uap-primary); color: var(--uap-primary) !important; transform: translateY(-2px); } .uap-btn-outline svg { width: 18px; height: 18px; } /* ============================================ FLOATING WHATSAPP (use anywhere on page) ============================================ */ .uap-fab-whatsapp { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 56px; height: 56px; border-radius: 50%; background: var(--uap-whatsapp); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(37,211,102,0.4); z-index: 998; transition: transform 0.2s; animation: uap-fab-pulse 2.5s infinite; } .uap-fab-whatsapp:hover { transform: scale(1.1); } .uap-fab-whatsapp svg { width: 30px; height: 30px; color: #fff; } @keyframes uap-fab-pulse { 0%, 100% { box-shadow: 0 10px 30px rgba(37,211,102,0.4); } 50% { box-shadow: 0 10px 30px rgba(37,211,102,0.7), 0 0 0 12px rgba(37,211,102,0.15); } } /* ============================================ SCROLL REVEAL ANIMATIONS ============================================ */ .uap-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .uap-reveal.in { opacity: 1; transform: translateY(0); } .uap-reveal.delay-1 { transition-delay: 0.1s; } .uap-reveal.delay-2 { transition-delay: 0.2s; } .uap-reveal.delay-3 { transition-delay: 0.3s; }/* End custom CSS */