.elementor-kit-9{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#1D882B;--e-global-color-0b71b3d:#ffffffff;--e-global-color-e68a41f:#0F3D3E;--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){--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);}@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 *//* Google Fonts - Add to functions.php or */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Source+Sans+3:wght@300;400;500;600;700&display=swap'); /* ============================================ CSS CUSTOM PROPERTIES (ROOT VARIABLES) ============================================ */ :root { /* ───────────────────────────────────────── PRIMARY BRAND COLORS ───────────────────────────────────────── */ /* Deep Teal - Primary Brand Color */ --ecd-teal: hsl(189, 55%, 32%); /* #2b7a8c */ --ecd-teal-light: hsl(189, 45%, 45%); /* #4a9db0 */ --ecd-teal-dark: hsl(189, 60%, 22%); /* #1c5c6b */ --ecd-teal-900: hsl(189, 60%, 18%); /* Darkest teal */ /* Lime Green - Accent Color */ --ecd-lime: hsl(95, 60%, 45%); /* #6ab82e */ --ecd-lime-light: hsl(95, 55%, 55%); /* #8bc653 */ --ecd-lime-dark: hsl(95, 65%, 35%); /* #4f9420 */ /* Gold - CTA Buttons */ --ecd-gold: hsl(43, 72%, 47%); /* #d4a12d */ --ecd-gold-light: hsl(43, 72%, 60%); /* #e5c257 */ /* Navy - Secondary buttons */ --ecd-navy: hsl(220, 56%, 23%); /* #1e3a5f */ --ecd-navy-light: hsl(220, 45%, 35%); /* #3d5a80 */ /* Neutral Colors */ --ecd-silver: hsl(0, 0%, 75%); /* #bfbfbf */ --ecd-cream: hsl(40, 33%, 98%); /* #fcfbf9 */ --ecd-white: hsl(0, 0%, 100%); /* #ffffff */ /* Text Colors */ --ecd-text-primary: hsl(192, 35%, 20%); /* #213d42 */ --ecd-text-muted: hsl(192, 15%, 45%); /* #627278 */ /* ───────────────────────────────────────── SEMANTIC COLORS ───────────────────────────────────────── */ --ecd-background: hsl(0, 0%, 99%); --ecd-foreground: hsl(192, 35%, 20%); --ecd-border: hsl(180, 10%, 88%); --ecd-muted-bg: hsl(180, 10%, 92%); --ecd-secondary-bg: hsla(180, 10%, 92%, 0.3); --ecd-destructive: hsl(0, 84%, 60%); --ecd-whatsapp: #25D366; --ecd-whatsapp-hover: #20BD5A; /* ───────────────────────────────────────── GRADIENTS ───────────────────────────────────────── */ --ecd-gradient-hero: linear-gradient(135deg, hsla(189, 60%, 22%, 0.95) 0%, hsla(189, 55%, 32%, 0.9) 100%); --ecd-gradient-lime: linear-gradient(135deg, hsl(95, 60%, 45%) 0%, hsl(95, 55%, 55%) 100%); --ecd-gradient-gold: linear-gradient(135deg, hsl(43, 72%, 47%) 0%, hsl(43, 72%, 60%) 100%); --ecd-gradient-card: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(180, 10%, 98%) 100%); --ecd-gradient-teal: linear-gradient(135deg, hsl(189, 55%, 32%) 0%, hsl(189, 45%, 45%) 100%); --ecd-gradient-overlay: linear-gradient(to top, hsla(189, 60%, 22%, 0.7), hsla(189, 55%, 32%, 0.3), hsla(189, 55%, 32%, 0.3)); /* ───────────────────────────────────────── SHADOWS ───────────────────────────────────────── */ --ecd-shadow-soft: 0 4px 20px -4px hsla(189, 55%, 32%, 0.08); --ecd-shadow-card: 0 8px 32px -8px hsla(189, 55%, 32%, 0.12); --ecd-shadow-elevated: 0 16px 48px -12px hsla(189, 55%, 32%, 0.18); --ecd-shadow-lime: 0 8px 24px -4px hsla(95, 60%, 45%, 0.3); --ecd-shadow-gold: 0 4px 14px -2px hsla(43, 72%, 47%, 0.4); --ecd-shadow-gold-hover: 0 8px 20px -4px hsla(43, 72%, 47%, 0.5); /* ───────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────── */ --ecd-font-heading: 'Montserrat', system-ui, sans-serif; --ecd-font-body: 'Source Sans 3', system-ui, sans-serif; /* ───────────────────────────────────────── SPACING & SIZING ───────────────────────────────────────── */ --ecd-radius: 0.5rem; /* 8px */ --ecd-radius-lg: 0.75rem; /* 12px */ --ecd-radius-xl: 1rem; /* 16px */ --ecd-radius-2xl: 1.5rem; /* 24px - cards */ --ecd-radius-sm: 0.25rem; /* 4px */ --ecd-radius-full: 9999px; /* pill/circular */ --ecd-container-max: 1400px; --ecd-container-padding: 2rem; } /* ============================================ BASE STYLES ============================================ */ html { scroll-behavior: smooth; } body { font-family: var(--ecd-font-body); background-color: var(--ecd-background); color: var(--ecd-foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--ecd-font-heading); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: var(--ecd-foreground); margin: 0 0 1rem; } /* ============================================ TYPOGRAPHY SCALE ============================================ */ h1 { font-size: clamp(2rem, 5vw, 4.5rem); } /* 32px - 72px responsive */ h2 { font-size: clamp(1.75rem, 4vw, 3rem); } /* 28px - 48px responsive */ h3 { font-size: clamp(1.25rem, 2.5vw, 2rem); } h4 { font-size: 1.25rem; } /* 20px */ h5 { font-size: 1.125rem; } /* 18px */ h6 { font-size: 1rem; } /* 16px */ p { font-size: 1rem; line-height: 1.75; margin: 0 0 1rem; } .lead, .ecd-lead { font-size: 1.125rem; line-height: 1.6; color: var(--ecd-text-muted); } /* ============================================ BUTTON STYLES - ALL VARIANTS ============================================ */ /* ───────────────────────────────────────── Base Button Reset ───────────────────────────────────────── */ .ecd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; font-family: var(--ecd-font-heading); font-weight: 600; font-size: 0.875rem; border-radius: var(--ecd-radius); cursor: pointer; transition: all 0.3s ease; text-decoration: none; border: none; outline: none; } .ecd-btn:focus-visible { outline: 2px solid var(--ecd-lime); outline-offset: 2px; } .ecd-btn:disabled { pointer-events: none; opacity: 0.5; } /* ───────────────────────────────────────── Button Sizes ───────────────────────────────────────── */ .ecd-btn-sm { height: 2.25rem; /* 36px */ padding: 0 0.75rem; font-size: 0.75rem; } .ecd-btn-md { height: 2.5rem; /* 40px */ padding: 0 1rem; font-size: 0.875rem; } .ecd-btn-lg { height: 2.75rem; /* 44px */ padding: 0 2rem; font-size: 0.875rem; } .ecd-btn-xl { height: 3.5rem; /* 56px */ padding: 0 2.5rem; font-size: 1rem; border-radius: 0.5rem; } .ecd-btn-icon { height: 2.5rem; width: 2.5rem; padding: 0; } /* ───────────────────────────────────────── Primary Button - Gold Gradient (Main CTA) ───────────────────────────────────────── */ .btn-primary, .ecd-btn-primary, .ecd-btn-gold, .wp-block-button__link { background: var(--ecd-gradient-gold); color: var(--ecd-navy); font-weight: 600; box-shadow: var(--ecd-shadow-gold); } .btn-primary:hover, .ecd-btn-primary:hover, .ecd-btn-gold:hover, .wp-block-button__link:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--ecd-shadow-gold-hover); } .btn-primary:active, .ecd-btn-primary:active, .ecd-btn-gold:active { transform: scale(0.98); } /* ───────────────────────────────────────── Secondary Button - Teal Outline ───────────────────────────────────────── */ .btn-secondary, .ecd-btn-secondary { background: transparent; color: var(--ecd-teal); border: 2px solid var(--ecd-teal); } .btn-secondary:hover, .ecd-btn-secondary:hover { background: var(--ecd-teal); color: var(--ecd-white); } /* ───────────────────────────────────────── Navy Button - Dark Solid ───────────────────────────────────────── */ .ecd-btn-navy { background: var(--ecd-navy); color: var(--ecd-cream); font-weight: 600; box-shadow: 0 4px 14px -2px hsla(220, 56%, 23%, 0.3); } .ecd-btn-navy:hover { background: var(--ecd-navy-light); box-shadow: 0 8px 20px -4px hsla(220, 56%, 23%, 0.4); } /* ───────────────────────────────────────── Hero Button - Large Primary CTA ───────────────────────────────────────── */ .ecd-btn-hero { background: var(--ecd-gradient-gold); color: var(--ecd-navy); font-weight: 600; font-size: 1rem; padding: 1rem 2rem; height: auto; box-shadow: var(--ecd-shadow-gold); } .ecd-btn-hero:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--ecd-shadow-gold-hover); } /* ───────────────────────────────────────── Hero Outline Button - Transparent with border ───────────────────────────────────────── */ .ecd-btn-hero-outline { background: transparent; color: var(--ecd-cream); font-weight: 600; font-size: 1rem; padding: 1rem 2rem; height: auto; border: 2px solid hsla(40, 33%, 98%, 0.3); backdrop-filter: blur(4px); } .ecd-btn-hero-outline:hover { background: hsla(40, 33%, 98%, 0.1); border-color: hsla(40, 33%, 98%, 0.5); } /* ───────────────────────────────────────── WhatsApp Button ───────────────────────────────────────── */ .ecd-btn-whatsapp { background: var(--ecd-whatsapp); color: white; font-weight: 600; box-shadow: 0 4px 14px -2px rgba(37, 211, 102, 0.4); } .ecd-btn-whatsapp:hover { background: var(--ecd-whatsapp-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px -4px rgba(37, 211, 102, 0.5); } .ecd-btn-whatsapp:active { transform: scale(0.98); } /* ───────────────────────────────────────── Ghost Button - Minimal/Transparent ───────────────────────────────────────── */ .ecd-btn-ghost { background: transparent; color: var(--ecd-foreground); } .ecd-btn-ghost:hover { background: hsla(180, 10%, 92%, 0.8); } /* ───────────────────────────────────────── Link Button - Text only with underline ───────────────────────────────────────── */ .ecd-btn-link { background: transparent; color: var(--ecd-teal); padding: 0; height: auto; text-decoration: underline; text-underline-offset: 4px; } .ecd-btn-link:hover { color: var(--ecd-teal-dark); } /* ============================================ CARD STYLES ============================================ */ .ecd-card { background: var(--ecd-gradient-card); border-radius: var(--ecd-radius-2xl); box-shadow: var(--ecd-shadow-card); padding: 2rem; transition: all 0.3s ease; } .ecd-card:hover { box-shadow: var(--ecd-shadow-elevated); transform: translateY(-4px); } .ecd-card-flat { background: var(--ecd-white); border-radius: var(--ecd-radius-2xl); padding: 2rem; } /* ============================================ BADGE STYLES ============================================ */ .ecd-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: hsla(95, 60%, 45%, 0.2); backdrop-filter: blur(4px); border-radius: var(--ecd-radius-full); font-size: 0.875rem; font-weight: 500; } .ecd-badge-pulse::before { content: ''; width: 0.5rem; height: 0.5rem; background: var(--ecd-lime); border-radius: 50%; animation: pulse 2s infinite; } .ecd-badge-category { padding: 0.25rem 0.75rem; background: hsla(95, 60%, 45%, 0.9); color: var(--ecd-teal-dark); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--ecd-radius-full); } /* ============================================ SECTION STYLES ============================================ */ .ecd-section { padding: 5rem 0; } .ecd-section-alt { background: var(--ecd-secondary-bg); } .ecd-section-teal { background: var(--ecd-teal); color: var(--ecd-white); } .ecd-section-teal-dark { background: var(--ecd-teal-900); color: var(--ecd-white); } .ecd-container { max-width: var(--ecd-container-max); margin: 0 auto; padding: 0 var(--ecd-container-padding); } /* Section Headers */ .ecd-section-header { text-align: center; margin-bottom: 3rem; max-width: 800px; margin-left: auto; margin-right: auto; } .ecd-section-label { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ecd-lime); margin-bottom: 1rem; } .ecd-section-title { font-size: clamp(1.75rem, 4vw, 3rem); margin-bottom: 1rem; } .ecd-section-subtitle { font-size: 1.125rem; color: var(--ecd-text-muted); } /* ============================================ HERO SECTION ============================================ */ .ecd-hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 5rem; /* Account for fixed header */ overflow: hidden; } .ecd-hero-bg { position: absolute; inset: 0; z-index: 0; } .ecd-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .ecd-hero-overlay { position: absolute; inset: 0; background: var(--ecd-gradient-hero); } .ecd-hero-content { position: relative; z-index: 1; max-width: var(--ecd-container-max); margin: 0 auto; padding: 0 var(--ecd-container-padding); } .ecd-hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; color: var(--ecd-white); line-height: 1.1; margin-bottom: 1.5rem; } .ecd-hero-subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: hsla(0, 0%, 100%, 0.8); max-width: 600px; margin-bottom: 2.5rem; } /* ============================================ NAVIGATION / HEADER ============================================ */ .ecd-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: hsla(0, 0%, 100%, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid hsla(180, 10%, 88%, 0.5); height: 5rem; } .ecd-header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--ecd-container-max); margin: 0 auto; padding: 0 var(--ecd-container-padding); } .ecd-logo { height: 3.5rem; width: auto; } .ecd-nav { display: flex; align-items: center; gap: 2rem; } .ecd-nav-link { font-family: var(--ecd-font-heading); font-weight: 500; font-size: 0.875rem; color: var(--ecd-text-muted); text-decoration: none; transition: color 0.2s ease; } .ecd-nav-link:hover { color: var(--ecd-foreground); } .ecd-nav-link.active { color: var(--ecd-lime); } /* ============================================ FOOTER ============================================ */ .ecd-footer { background: var(--ecd-teal); color: var(--ecd-white); padding: 4rem 0 2rem; } .ecd-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; margin-bottom: 3rem; } .ecd-footer-brand h3 { font-size: 1.25rem; color: var(--ecd-white); margin-bottom: 1rem; } .ecd-footer-brand h3 span { color: var(--ecd-lime); } .ecd-footer-brand p { color: hsla(0, 0%, 100%, 0.7); font-size: 0.875rem; } .ecd-footer h4 { font-size: 1rem; font-weight: 600; color: var(--ecd-white); margin-bottom: 1rem; } .ecd-footer-links { list-style: none; padding: 0; margin: 0; } .ecd-footer-links li { margin-bottom: 0.75rem; } .ecd-footer-links a { color: hsla(0, 0%, 100%, 0.7); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; } .ecd-footer-links a:hover { color: var(--ecd-lime); } .ecd-footer-bottom { border-top: 1px solid hsla(0, 0%, 100%, 0.1); padding-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; } .ecd-footer-copyright { font-size: 0.875rem; color: hsla(0, 0%, 100%, 0.6); } /* ============================================ SOCIAL ICONS ============================================ */ .ecd-social-links { display: flex; gap: 0.75rem; } .ecd-social-link { width: 2.5rem; height: 2.5rem; background: hsla(0, 0%, 100%, 0.1); border-radius: var(--ecd-radius-lg); display: flex; align-items: center; justify-content: center; color: var(--ecd-white); transition: all 0.2s ease; } .ecd-social-link:hover { background: hsla(95, 60%, 45%, 0.2); color: var(--ecd-lime); } /* ============================================ PORTFOLIO / PROJECT CARDS ============================================ */ .ecd-project-card { position: relative; overflow: hidden; border-radius: var(--ecd-radius-2xl); } .ecd-project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .ecd-project-card:hover img { transform: scale(1.05); } .ecd-project-overlay { position: absolute; inset: 0; background: var(--ecd-gradient-overlay); opacity: 0.9; transition: opacity 0.3s ease; } .ecd-project-card:hover .ecd-project-overlay { opacity: 0.95; } .ecd-project-content { position: absolute; inset: 0; padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; } .ecd-project-title { font-size: 1.5rem; color: var(--ecd-white); margin-bottom: 0.5rem; } .ecd-project-description { color: hsla(0, 0%, 100%, 0.8); font-size: 0.875rem; margin-bottom: 1rem; } .ecd-project-meta { display: flex; align-items: center; gap: 0.5rem; color: hsla(0, 0%, 100%, 0.7); font-size: 0.875rem; } /* ============================================ TESTIMONIAL CARDS ============================================ */ .ecd-testimonial-card { background: hsla(189, 45%, 45%, 0.2); backdrop-filter: blur(4px); border-radius: var(--ecd-radius-2xl); padding: 2rem; border: 1px solid hsla(0, 0%, 100%, 0.1); transition: border-color 0.3s ease; } .ecd-testimonial-card:hover { border-color: hsla(95, 60%, 45%, 0.3); } .ecd-testimonial-quote { color: var(--ecd-lime-light); width: 2.5rem; height: 2.5rem; margin-bottom: 1.5rem; } .ecd-testimonial-rating { display: flex; gap: 0.25rem; margin-bottom: 1rem; } .ecd-testimonial-star { width: 1.25rem; height: 1.25rem; color: var(--ecd-lime); fill: var(--ecd-lime); } .ecd-testimonial-content { color: hsla(0, 0%, 100%, 0.8); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; } .ecd-testimonial-author { display: flex; align-items: center; gap: 1rem; } .ecd-testimonial-avatar { width: 3rem; height: 3rem; background: var(--ecd-gradient-lime); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ecd-font-heading); font-weight: 700; color: var(--ecd-teal-dark); } .ecd-testimonial-name { font-weight: 600; color: var(--ecd-white); margin-bottom: 0.25rem; } .ecd-testimonial-role { font-size: 0.875rem; color: hsla(0, 0%, 100%, 0.6); } /* ============================================ SERVICE CARDS ============================================ */ .ecd-service-image { position: relative; height: 450px; border-radius: var(--ecd-radius-2xl); overflow: hidden; box-shadow: var(--ecd-shadow-elevated); } .ecd-service-image img { width: 100%; height: 100%; object-fit: cover; } .ecd-service-image-overlay { position: absolute; inset: 0; background: var(--ecd-gradient-overlay); } .ecd-service-icon { position: absolute; bottom: 1.5rem; left: 1.5rem; width: 3.5rem; height: 3.5rem; background: var(--ecd-gradient-lime); border-radius: var(--ecd-radius-xl); display: flex; align-items: center; justify-content: center; box-shadow: var(--ecd-shadow-lime); } .ecd-service-icon svg { width: 1.75rem; height: 1.75rem; color: var(--ecd-teal-dark); } .ecd-feature-list { list-style: none; padding: 0; margin: 0 0 2rem; } .ecd-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; } .ecd-feature-check { width: 1.25rem; height: 1.25rem; color: var(--ecd-lime); flex-shrink: 0; margin-top: 0.125rem; } /* ============================================ CONTACT SECTION ============================================ */ .ecd-contact-box { background: var(--ecd-teal); border-radius: var(--ecd-radius-2xl); padding: 2rem 2.5rem; color: var(--ecd-white); } .ecd-contact-item { display: flex; align-items: flex-start; gap: 1rem; } .ecd-contact-icon { width: 3rem; height: 3rem; background: hsla(95, 60%, 45%, 0.2); border-radius: var(--ecd-radius-xl); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s ease; } .ecd-contact-item:hover .ecd-contact-icon { background: hsla(95, 60%, 45%, 0.3); } .ecd-contact-icon svg { width: 1.25rem; height: 1.25rem; color: var(--ecd-lime); } .ecd-contact-label { font-size: 0.875rem; color: hsla(0, 0%, 100%, 0.6); margin-bottom: 0.25rem; } .ecd-contact-value { font-weight: 500; color: var(--ecd-white); transition: color 0.2s ease; } .ecd-contact-item:hover .ecd-contact-value { color: var(--ecd-lime); } /* ============================================ FORM STYLES ============================================ */ .ecd-input, .ecd-textarea, .ecd-select, input[type="text"], input[type="email"], input[type="tel"], textarea, select { width: 100%; padding: 0.75rem 1rem; font-family: var(--ecd-font-body); font-size: 1rem; background: var(--ecd-white); border: 1px solid var(--ecd-border); border-radius: var(--ecd-radius); transition: all 0.2s ease; } .ecd-input:focus, .ecd-textarea:focus, .ecd-select:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ecd-lime); box-shadow: 0 0 0 3px hsla(95, 60%, 45%, 0.15); } .ecd-label, label { display: block; font-family: var(--ecd-font-heading); font-weight: 500; font-size: 0.875rem; margin-bottom: 0.5rem; color: var(--ecd-foreground); } /* ============================================ TRUSTED BY / LOGO CAROUSEL ============================================ */ .ecd-logo-carousel { overflow: hidden; position: relative; } .ecd-logo-carousel::before, .ecd-logo-carousel::after { content: ''; position: absolute; top: 0; bottom: 0; width: 8rem; z-index: 10; pointer-events: none; } .ecd-logo-carousel::before { left: 0; background: linear-gradient(to right, var(--ecd-teal-900), transparent); } .ecd-logo-carousel::after { right: 0; background: linear-gradient(to left, var(--ecd-teal-900), transparent); } .ecd-logo-track { display: flex; align-items: center; gap: 5rem; animation: scroll 30s linear infinite; width: max-content; } .ecd-logo-track:hover { animation-play-state: paused; } .ecd-client-logo { height: 4rem; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: all 0.3s ease; } .ecd-client-logo:hover { filter: grayscale(0%); opacity: 1; } /* ============================================ FLOATING WHATSAPP BUTTON ============================================ */ .ecd-whatsapp-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; width: 3.5rem; height: 3.5rem; background: var(--ecd-whatsapp); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: all 0.3s ease; color: white; text-decoration: none; } .ecd-whatsapp-float:hover { background: var(--ecd-whatsapp-hover); transform: scale(1.1); box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5); } .ecd-whatsapp-float svg { width: 1.5rem; height: 1.5rem; } /* ============================================ TEXT GRADIENTS ============================================ */ .text-gradient-lime, .ecd-text-gradient-lime { background: var(--ecd-gradient-lime); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-teal { background: var(--ecd-gradient-teal); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ ANIMATIONS ============================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-fade-up { animation: fadeUp 0.6s ease-out forwards; } .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; } .animate-scale-in { animation: scaleIn 0.5s ease-out forwards; } .animate-scroll { animation: scroll 30s linear infinite; } .animate-bounce { animation: bounce 2s infinite; } /* Animation delays for staggered reveals */ .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } /* ============================================ UTILITY CLASSES ============================================ */ .bg-teal { background-color: var(--ecd-teal); } .bg-teal-dark { background-color: var(--ecd-teal-dark); } .bg-teal-900 { background-color: var(--ecd-teal-900); } .bg-lime { background-color: var(--ecd-lime); } .bg-cream { background-color: var(--ecd-cream); } .bg-secondary { background-color: var(--ecd-secondary-bg); } .text-teal { color: var(--ecd-teal); } .text-lime { color: var(--ecd-lime); } .text-muted { color: var(--ecd-text-muted); } .text-white { color: var(--ecd-white); } .shadow-soft { box-shadow: var(--ecd-shadow-soft); } .shadow-card { box-shadow: var(--ecd-shadow-card); } .shadow-elevated { box-shadow: var(--ecd-shadow-elevated); } .shadow-lime { box-shadow: var(--ecd-shadow-lime); } /* ============================================ RESPONSIVE BREAKPOINTS ============================================ */ @media (max-width: 1024px) { .ecd-section { padding: 4rem 0; } .ecd-hero { min-height: 90vh; } } @media (max-width: 768px) { :root { --ecd-container-padding: 1rem; } .ecd-hero { min-height: 85vh; } .ecd-section { padding: 3rem 0; } .ecd-footer-grid { grid-template-columns: 1fr; } .ecd-nav { display: none; /* Show mobile menu instead */ } } @media (max-width: 480px) { .ecd-btn-hero, .ecd-btn-hero-outline { width: 100%; justify-content: center; } } /* ============================================ BUTTON STYLES - ALL VARIANTS ============================================ */ /* ───────────────────────────────────────── Base Button Reset ───────────────────────────────────────── */ .ecd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; font-family: var(--ecd-font-heading); font-weight: 600; font-size: 0.875rem; border-radius: var(--ecd-radius); cursor: pointer; transition: all 0.3s ease; text-decoration: none; border: none; outline: none; } .ecd-btn:focus-visible { outline: 2px solid var(--ecd-lime); outline-offset: 2px; } .ecd-btn:disabled { pointer-events: none; opacity: 0.5; } /* ───────────────────────────────────────── Button Sizes ───────────────────────────────────────── */ .ecd-btn-sm { height: 2.25rem; /* 36px */ padding: 0 0.75rem; font-size: 0.75rem; } .ecd-btn-md { height: 2.5rem; /* 40px */ padding: 0 1rem; font-size: 0.875rem; } .ecd-btn-lg { height: 2.75rem; /* 44px */ padding: 0 2rem; font-size: 0.875rem; } .ecd-btn-xl { height: 3.5rem; /* 56px */ padding: 0 2.5rem; font-size: 1rem; border-radius: 0.5rem; } .ecd-btn-icon { height: 2.5rem; width: 2.5rem; padding: 0; } /* ───────────────────────────────────────── Primary Button - Gold Gradient (Main CTA) ───────────────────────────────────────── */ .btn-primary, .ecd-btn-primary, .ecd-btn-gold, .wp-block-button__link { background: var(--ecd-gradient-gold); color: var(--ecd-navy); font-weight: 600; box-shadow: var(--ecd-shadow-gold); } .btn-primary:hover, .ecd-btn-primary:hover, .ecd-btn-gold:hover, .wp-block-button__link:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--ecd-shadow-gold-hover); } .btn-primary:active, .ecd-btn-primary:active, .ecd-btn-gold:active { transform: scale(0.98); } /* ───────────────────────────────────────── Secondary Button - Teal Outline ───────────────────────────────────────── */ .btn-secondary, .ecd-btn-secondary { background: transparent; color: var(--ecd-teal); border: 2px solid var(--ecd-teal); } .btn-secondary:hover, .ecd-btn-secondary:hover { background: var(--ecd-teal); color: var(--ecd-white); } /* ───────────────────────────────────────── Navy Button - Dark Solid ───────────────────────────────────────── */ .ecd-btn-navy { background: var(--ecd-navy); color: var(--ecd-cream); font-weight: 600; box-shadow: 0 4px 14px -2px hsla(220, 56%, 23%, 0.3); } .ecd-btn-navy:hover { background: var(--ecd-navy-light); box-shadow: 0 8px 20px -4px hsla(220, 56%, 23%, 0.4); } /* ───────────────────────────────────────── Hero Button - Large Primary CTA ───────────────────────────────────────── */ .ecd-btn-hero { background: var(--ecd-gradient-gold); color: var(--ecd-navy); font-weight: 600; font-size: 1rem; padding: 1rem 2rem; height: auto; box-shadow: var(--ecd-shadow-gold); } .ecd-btn-hero:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--ecd-shadow-gold-hover); } /* ───────────────────────────────────────── Hero Outline Button - Transparent with border ───────────────────────────────────────── */ .ecd-btn-hero-outline { background: transparent; color: var(--ecd-cream); font-weight: 600; font-size: 1rem; padding: 1rem 2rem; height: auto; border: 2px solid hsla(40, 33%, 98%, 0.3); backdrop-filter: blur(4px); } .ecd-btn-hero-outline:hover { background: hsla(40, 33%, 98%, 0.1); border-color: hsla(40, 33%, 98%, 0.5); } /* ───────────────────────────────────────── WhatsApp Button ───────────────────────────────────────── */ .ecd-btn-whatsapp { background: var(--ecd-whatsapp); color: white; font-weight: 600; box-shadow: 0 4px 14px -2px rgba(37, 211, 102, 0.4); } .ecd-btn-whatsapp:hover { background: var(--ecd-whatsapp-hover); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px -4px rgba(37, 211, 102, 0.5); } .ecd-btn-whatsapp:active { transform: scale(0.98); } /* ───────────────────────────────────────── Ghost Button - Minimal/Transparent ───────────────────────────────────────── */ .ecd-btn-ghost { background: transparent; color: var(--ecd-foreground); } .ecd-btn-ghost:hover { background: hsla(180, 10%, 92%, 0.8); } /* ───────────────────────────────────────── Link Button - Text only with underline ───────────────────────────────────────── */ .ecd-btn-link { background: transparent; color: var(--ecd-teal); padding: 0; height: auto; text-decoration: underline; text-underline-offset: 4px; } .ecd-btn-link:hover { color: var(--ecd-teal-dark); } #mailChoiceOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9998; } #mailChoiceModal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999; } #mailChoiceModal .mailChoiceBox{ background:#fff; border-radius:14px; padding:16px; width:min(420px, calc(100% - 32px)); box-shadow:0 20px 50px rgba(0,0,0,.25); font-family:inherit; } #mailChoiceModal .mailChoiceTitle{ font-weight:600; font-size:16px; margin-bottom:12px; color:#111; } #mailChoiceModal .mailChoiceBtns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; } #mailChoiceModal .mailChoiceBtn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:10px; text-decoration:none; border:1px solid #e2e2e2; background:#f6f6f6; color:#111; font-weight:500; } #mailChoiceModal .mailChoiceBtn:hover{ background:#ededed; } #mailChoiceModal .mailChoiceClose{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid #e2e2e2; background:#fff; cursor:pointer; font-weight:500; }/* Hero becomes the positioning boundary */ .hero-section { position: relative; overflow: hidden; /* prevents overlay from bleeding upward */ } /* Overlay covers hero exactly */ .hero-section .hero-overlay { position: absolute; inset: 0; /* top/right/bottom/left = 0 */ width: 100%; height: 100%; transform: none !important; /* kills accidental translateY */ margin: 0 !important; /* kills negative margins */ z-index: 1; pointer-events: none; /* overlay never blocks clicks */ } /* Ensure hero content sits above overlay */ .hero-section > .e-con-inner, .hero-section .elementor-container, .hero-section .elementor-widget-wrap { position: relative; z-index: 2; } /* Ensure header/nav sits above hero if overlapping */ header, .site-header, .elementor-location-header { position: relative; z-index: 9999; }/* End custom CSS */