/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ============================================================
   SMARTPOWER ELECTRICAL - CHILD THEME STYLES
   Mobile Optimisation + Popup + Front-end Redesign
   ============================================================ */

/* ---- POPUP OVERLAY ---- */
#spe-contact-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: speFadeIn 0.3s ease;
}
@keyframes speFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#spe-contact-popup {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  animation: speSlideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}
@keyframes speSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#spe-popup-inner {
  padding: 40px 36px 32px;
}

.spe-popup-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #e8f5e9;
  padding-bottom: 16px;
}
.spe-popup-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0d2b1e;
  margin: 0 0 6px;
  line-height: 1.2;
}
.spe-popup-header p {
  font-size: 0.95rem;
  color: #555;
  margin: 0;
}

#spe-popup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: #f0f4f0;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  z-index: 2;
  padding: 0;
}
#spe-popup-close:hover {
  background: #1a6b3c;
  color: #fff;
}

/* Style CF7 inside popup */
#spe-popup-inner .wpcf7-form input[type="text"],
#spe-popup-inner .wpcf7-form input[type="email"],
#spe-popup-inner .wpcf7-form input[type="tel"],
#spe-popup-inner .wpcf7-form textarea {
  width: 100% !important;
  border: 1.5px solid #d0e8d8 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 0.95rem !important;
  background: #f9fdf9 !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
  outline: none !important;
}
#spe-popup-inner .wpcf7-form input:focus,
#spe-popup-inner .wpcf7-form textarea:focus {
  border-color: #1a6b3c !important;
  background: #fff !important;
}
#spe-popup-inner .wpcf7-form input[type="submit"] {
  background: #1a6b3c !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 0.2s, transform 0.1s !important;
  margin-top: 4px !important;
}
#spe-popup-inner .wpcf7-form input[type="submit"]:hover {
  background: #0d4f2b !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 480px) {
  #spe-popup-inner { padding: 32px 20px 24px; }
  .spe-popup-header h3 { font-size: 1.25rem; }
}

/* ---- MOBILE HEADER FIXES ---- */

/* Fix header full-width on mobile */
@media (max-width: 921px) {
  .ast-header-break-point .main-header-bar {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Fix header container */
  .ast-header-break-point .site-header .ast-container,
  .ast-header-break-point .main-header-bar .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Hide the top info bar on mobile to reduce clutter */
  .ast-above-header-bar,
  .above-header-bar {
    display: none !important;
  }

  /* Ensure header logo and toggle are spaced properly */
  .ast-header-break-point .site-logo-img,
  .ast-header-break-point .custom-logo-link img,
  .ast-header-break-point .site-branding img {
    max-width: 160px !important;
    height: auto !important;
  }

  /* Mobile menu toggle button */
  .ast-header-break-point .menu-toggle,
  .ast-header-break-point button.menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1a6b3c !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    margin-left: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .ast-header-break-point .menu-toggle .menu-toggle-inner,
  .ast-header-break-point .menu-toggle span {
    background: #fff !important;
  }

  /* Mobile nav full width */
  .ast-header-break-point #ast-desktop-header .main-navigation .menu {
    width: 100% !important;
  }

  .ast-header-break-point .ast-mobile-header-content {
    width: 100% !important;
  }

  /* Mobile header logo alignment */
  .ast-header-break-point .site-branding,
  .ast-header-break-point .ast-site-identity {
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Fix above header on mobile */
  .ast-above-header,
  .ast-header-sections-background {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* Full width body/content on all sizes */
body,
.entry-content,
.ast-container,
.site-content .ast-container {
  box-sizing: border-box !important;
}

@media (max-width: 921px) {
  body {
    overflow-x: hidden !important;
  }

  /* Content sections full width */
  .elementor-section.elementor-section-boxed > .elementor-container,
  .e-con-inner,
  .ast-container,
  .site-content .ast-container,
  .entry-content > .alignwide,
  .entry-content > .alignfull {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Elementor sections full width */
  .elementor-section > .elementor-container {
    max-width: 100% !important;
  }

  /* Fix horizontal scroll */
  .site,
  #page,
  .site-content,
  main {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Fix hero section font sizes */
  .elementor-heading-title {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Fix button stacking on mobile */
  .elementor-widget-button {
    width: 100% !important;
  }

  /* Fix images */
  .elementor-widget-image img,
  .elementor-image img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Padding fix for sections */
  .elementor-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Footer full width */
  .site-footer,
  .footer-bar,
  .ast-footer-content-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ---- FRONT-END PAGE REDESIGN ENHANCEMENTS ---- */

/* Global Typography Improvements */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Service cards hover effect */
.elementor-widget-icon-box:hover,
.elementor-widget-icon-list:hover {
  transform: translateY(-4px);
  transition: transform 0.25s ease;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Button hover polish */
.elementor-button {
  transition: all 0.25s ease !important;
}
.elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(26, 107, 60, 0.3) !important;
}

/* Stats/counter section spacing */
.elementor-counter .elementor-counter-number-wrapper {
  font-weight: 800;
}

/* FAQ accordion improvements */
.elementor-accordion .elementor-tab-title {
  transition: background 0.2s ease;
}
.elementor-accordion .elementor-tab-title:hover {
  background: #f0f9f4;
}

/* Review cards */
.elementor-testimonial-wrapper {
  border-radius: 12px;
}

/* Section heading styling */
.elementor-heading-title {
  letter-spacing: -0.01em;
}

/* Green CTA button polish */
.elementor-button.elementor-button-link {
  letter-spacing: 0.01em;
}

/* Focus visible accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #1a6b3c;
  outline-offset: 3px;
}

/* Mobile - reduce hero font size for better fit */
@media (max-width: 768px) {
  .elementor-widget-heading h1.elementor-heading-title,
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(1.8rem, 6vw, 3rem) !important;
    line-height: 1.15 !important;
  }

  .elementor-widget-text-editor p,
  .elementor-widget-text-editor {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Tighten section padding on mobile - EXCLUDE header */
  section.elementor-section,
  .site-content .e-con,
  #sp-home .e-con {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* Ensure header e-con is NOT affected by above rule */
  header .e-con,
  .elementor-location-header .e-con {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Stack service cards */
  .elementor-widget-icon-box .elementor-icon-box-wrapper {
    flex-direction: column;
    text-align: center;
  }

  /* Fix navigation buttons on mobile hero */
  .elementor-widget-button .elementor-button {
    width: auto !important;
    min-width: 44px !important;
    white-space: nowrap !important;
  }

  /* Contact page form */
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  /* About page image */
  .elementor-widget-image {
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* Extra small phones */
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  /* Phone CTA bar */
  .ast-above-header-section,
  .ast-above-header-wrap {
    display: none !important;
  }

  /* Service grid single column */
  .elementor-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Print fixes */
@media print {
  #spe-contact-popup-overlay { display: none !important; }
}


/* ---- HEADER NAV FIXES ---- */
/* Hide the home page menu item (site title link in nav) */
.elementor-nav-menu > .menu-item-home,
.elementor-nav-menu--main > .menu-item-home {
  display: none !important;
}

/* ---- CONTENT FULL WIDTH ON DESKTOP ---- */
/* Ensure the main content area is full width of the page */
.elementor-section.elementor-section-full_width,
.elementor-section.elementor-section-full_width > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
}

/* Fix the boxed content width for readability */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
}

/* Ensure header is 100% width */
header.elementor-location-header,
header.elementor-location-header .elementor-section,
header.elementor-location-header .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- MOBILE NAV IMPROVEMENTS ---- */
@media (max-width: 767px) {
  /* Mobile nav hamburger/toggle */
  .elementor-nav-menu--toggle .elementor-nav-menu--indicator,
  .elementor-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
  }

  /* Dropdown menu full width on mobile - FIXED: position:fixed prevents off-screen on right-aligned menus */
  .elementor-nav-menu--dropdown .elementor-nav-menu__container,
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    border-radius: 0 0 12px 12px !important;
    z-index: 9999 !important;
  }

  /* Mobile header padding */
  header.elementor-location-header .e-con-inner,
  header.elementor-location-header .elementor-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ---- BODY BACKGROUND FIX - Remove gray side bars ---- */
/* The gray side bars come from the Astra theme page background setting */
/* Set body and all wrappers to white */
html, body, #page, .site, .site-content {
  background-color: #ffffff !important;
}

/* Ensure Elementor sections that don't have explicit backgrounds 
   inherit the white background properly */
.elementor-section:not([style*="background"]),
.e-con:not([style*="background"]) {
  background-color: transparent;
}


/* ============================================================
   MOBILE HEADER FIX - Single row logo + hamburger
   Container IDs: 8465e8a (outer), 1a6f725 (logo), 897bb02 (nav)
   ============================================================ */

@media (max-width: 767px) {

  /* Outer container: ensure it's full width */
  .elementor-element-8465e8a {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Inner box (the .e-con inside boxed container): force row layout */
  .elementor-element-8465e8a > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 8px 15px !important;
  }

  /* Logo container: grow to fill available space */
  .elementor-element-1a6f725 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Nav container: shrink to content */
  .elementor-element-897bb02 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Logo image: size for mobile */
  .elementor-element-1a6f725 img {
    max-height: 50px !important;
    width: auto !important;
  }

  /* Hide phone button on mobile - keep header clean (logo + hamburger only) */
  .elementor-element-897bb02 .elementor-widget-button {
    display: none !important;
  }

  /* Nav menu hamburger container */
  .elementor-element-897bb02 .elementor-widget-nav-menu {
    display: flex !important;
    align-items: center !important;
  }

  /* Hamburger toggle button */
  .elementor-element-897bb02 .elementor-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* General header: ensure no overflow */
  .elementor-location-header {
    overflow: visible !important;
    width: 100% !important;
  }

}

/* ============================================================
   FRONT-END REDESIGN - All 7 Pages
   Enhanced visual design, typography, spacing, interactions
   ============================================================ */

/* ---- GLOBAL IMPROVEMENTS ---- */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Better font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #ffffff !important;
}

/* Page wrapper full width */
#page,
.ast-site-wrap,
.ast-container,
.site {
  background: #ffffff !important;
  max-width: 100% !important;
}

/* ---- TYPOGRAPHY IMPROVEMENTS ---- */

/* Headings: tighter line height, better weight */
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4 {
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
}

/* Body text: better readability */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  line-height: 1.75 !important;
}

/* ---- SECTION/CONTAINER IMPROVEMENTS ---- */

/* White background sections */
.e-con[style*="background-color: rgb(255, 255, 255)"],
.elementor-section.elementor-section-boxed {
  background: #ffffff;
}

/* Full width layout fix */
.elementor-section-full_width .elementor-container,
.e-con-full {
  max-width: 100% !important;
}

/* ---- BUTTON IMPROVEMENTS ---- */

/* Primary (green) buttons: better hover effect */
.elementor-button.elementor-button-link,
.elementor-widget-button .elementor-button,
a.elementor-button {
  transition: all 0.25s ease !important;
  border-radius: 6px !important;
}

.elementor-widget-button .elementor-button:hover,
a.elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ---- NAV/HEADER IMPROVEMENTS ---- */

/* Sticky header shadow */
.elementor-location-header.ast-header-sticked,
.elementor-location-header[class*="sticky"] {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Nav links hover */
.elementor-location-header .elementor-nav-menu > li > a {
  transition: color 0.2s ease !important;
  position: relative;
}

.elementor-location-header .elementor-nav-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: #00b050;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.elementor-location-header .elementor-nav-menu > li:hover > a::after,
.elementor-location-header .elementor-nav-menu > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* ---- HERO SECTION IMPROVEMENTS ---- */

/* Hero section: better overlay */
.elementor-section.elementor-section-full_width:first-of-type,
.e-con:first-child {
  position: relative;
}

/* ---- STATS/COUNTER SECTION ---- */

/* Stats numbers: bigger on desktop */
@media (min-width: 768px) {
  .elementor-widget-counter .elementor-counter-number-wrapper {
    font-size: 2.8em !important;
  }
}

/* ---- SERVICES/CARDS IMPROVEMENTS ---- */

/* Card hover effect */
.elementor-widget-image-box,
.elementor-widget-icon-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  border-radius: 8px !important;
}

.elementor-widget-image-box:hover,
.elementor-widget-icon-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1) !important;
}

/* ---- ICON LIST IMPROVEMENTS ---- */
.elementor-widget-icon-list .elementor-icon-list-item {
  padding: 4px 0 !important;
  transition: transform 0.2s ease;
}

.elementor-widget-icon-list .elementor-icon-list-item:hover {
  transform: translateX(4px);
}

/* ---- IMAGE IMPROVEMENTS ---- */
.elementor-widget-image img {
  border-radius: 8px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.elementor-widget-image:hover img {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* ---- CONTACT FORM IMPROVEMENTS ---- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  border-radius: 6px !important;
  border: 2px solid #e5e7eb !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  padding: 12px 16px !important;
  width: 100% !important;
  font-size: 15px !important;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: #00b050 !important;
  box-shadow: 0 0 0 3px rgba(0, 176, 80, 0.15) !important;
  outline: none !important;
}

.wpcf7-form input[type="submit"] {
  background: #00b050 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
}

.wpcf7-form input[type="submit"]:hover {
  background: #008c40 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 176, 80, 0.3) !important;
}

/* ---- TESTIMONIALS/REVIEWS ---- */
.elementor-widget-testimonial .elementor-testimonial-wrapper {
  background: #f8faf8 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  border-left: 4px solid #00b050 !important;
}

/* ---- ACCORDION/TABS ---- */
.elementor-accordion .elementor-accordion-item {
  border-radius: 6px !important;
  overflow: hidden;
  margin-bottom: 8px !important;
  transition: box-shadow 0.2s ease;
}

.elementor-accordion .elementor-accordion-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* ---- MOBILE IMPROVEMENTS ---- */

@media (max-width: 767px) {
  /* Better padding on mobile sections */
  .e-con {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Larger tap targets */
  .elementor-widget-button .elementor-button {
    padding: 14px 24px !important;
    font-size: 16px !important;
    min-height: 50px !important;
  }
  
  /* Full width buttons on mobile */
  .elementor-widget-button {
    width: 100% !important;
  }
  
  .elementor-widget-button .elementor-button-wrapper {
    width: 100% !important;
  }
  
  /* Better heading sizes on mobile */
  .elementor-widget-heading h1 {
    font-size: clamp(28px, 8vw, 48px) !important;
  }
  
  .elementor-widget-heading h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  
  /* Better image display on mobile */
  .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
  }
  
  /* Stack columns on mobile */
  .elementor-column.elementor-col-50,
  .elementor-column.elementor-col-33 {
    width: 100% !important;
  }
  
  /* Better form on mobile */
  .wpcf7-form {
    padding: 0 !important;
  }
}

/* ---- TABLET IMPROVEMENTS ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-content .e-con-inner,
  #sp-home .e-con-inner {
    padding: 40px 30px !important;
  }
  /* Ensure outer page wrapper e-con-inner stays padding-free */
  .elementor.elementor-12 > .e-con > .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Ensure header e-con-inner stays compact */
  header .e-con-inner,
  .elementor-location-header .e-con-inner {
    padding: 8px 15px !important;
  }
}

/* ---- SCROLL ANIMATIONS (CSS only) ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.elementor-widget {
  animation: fadeInUp 0.5s ease both;
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .elementor-widget {
    animation: none;
  }
}

/* ---- TRUST SIGNALS / BADGES ---- */
.elementor-icon-box-wrapper {
  transition: all 0.3s ease !important;
}

/* ---- FOOTER IMPROVEMENTS ---- */
.elementor-location-footer {
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ---- GREEN COLOR CONSISTENCY ---- */
/* Main brand green: #00b050 */
.elementor-widget-heading .elementor-heading-title strong {
  color: #00b050;
}

/* ---- PAGE-SPECIFIC IMPROVEMENTS ---- */

/* About Us page */
.page-id-about-us .elementor-widget-image img,
.page-slug-about-us .elementor-widget-image img {
  border-radius: 12px !important;
}

/* Services page - better card layout */
.page-id-services .elementor-widget-icon-box,
.page-slug-services .elementor-widget-icon-box {
  padding: 30px !important;
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
  transition: all 0.3s ease !important;
}

.page-id-services .elementor-widget-icon-box:hover,
.page-slug-services .elementor-widget-icon-box:hover {
  border-color: #00b050 !important;
  box-shadow: 0 8px 30px rgba(0, 176, 80, 0.15) !important;
  transform: translateY(-6px) !important;
}

/* Contact page - enhanced form */
.page-id-contact .wpcf7-form,
.page-slug-contact-us .wpcf7-form {
  background: #fff !important;
  padding: 40px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important;
}

/* ---- PERFORMANCE: remove animation on mobile for speed ---- */
@media (max-width: 767px) {
  .elementor-widget {
    animation: none !important;
  }
}


/* ============================================================
   LAYOUT FIX - Full-width sections + Grey background removal
   ============================================================ */

/* Override Elementor container max-width that causes grey gutters.
   The Elementor Default Kit sets --container-max-width:1140px but the
   page body is wider, causing grey sidebars. */
.e-con {
  --container-max-width: 100% !important;
}

/* Force e-con-inner to be full width */
.e-con > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
}

/* Ensure sp-home custom sections stretch edge-to-edge */
#sp-home section,
#sp-home .hero,
#sp-home .stats,
#sp-home .feature,
#sp-home .sec,
#sp-home .cta-stripe,
#sp-home .ctab {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Remove any grey background from page structural elements */
html, body, #page, .site, .site-content, .entry-content, #primary, .content-area, main, #main {
  background-color: #ffffff !important;
}

/* ============================================================
   MOBILE MENU FIX - Compact, properly-sized menu
   ============================================================ */

@media (max-width: 767px) {
  /* Fix oversized menu toggle button */
  .elementor-menu-toggle,
  .elementor-nav-menu--toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }

  /* Mobile dropdown inner list: scrollable if very long */
  .elementor-nav-menu--dropdown .elementor-nav-menu {
    overflow-y: auto;
    max-height: 70vh;
  }

  /* Compact menu items */
  .elementor-nav-menu--dropdown .elementor-nav-menu a,
  .elementor-nav-menu--dropdown .elementor-item {
    padding: 10px 18px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* Header inner - full width */
  .elementor-location-header .e-con-inner,
  header .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================
   PATCH: Remove default Elementor container padding that causes
   grey gap at top/bottom of page content
   ============================================================ */

/* The outer e-con (page content wrapper) has 60px padding from Elementor Kit.
   This causes a grey gap. We remove it. */
.elementor.elementor-12 > .e-con > .e-con-inner,
.entry-content > .elementor > .e-con > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Also ensure the outer e-con itself has no padding */
.elementor.elementor-12 > .e-con {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ============================================================
   PATCH: Remove default Elementor container padding that causes
   grey gap at top/bottom of page content
   ============================================================ */

/* The outer e-con (page content wrapper) has 60px padding from Elementor Kit.
   This causes a grey gap between header and content. Remove it. */
.elementor.elementor-12 > .e-con > .e-con-inner,
.entry-content > .elementor > .e-con > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.elementor.elementor-12 > .e-con {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ============================================================
   CRITICAL MOBILE FIX - Override Elementor Kit mobile breakpoints
   Elementor post-6.css sets --container-max-width at mobile breakpoints.
   We override both --container-max-width AND --content-width directly.
   --content-width = min(100%, --container-max-width) in frontend.min.css
   ============================================================ */

@media(max-width: 1024px) {
  .e-con {
    --container-max-width: 100% !important;
    --content-width: 100% !important;
  }
  .e-con > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media(max-width: 767px) {
  .e-con {
    --container-max-width: 100% !important;
    --content-width: 100% !important;
  }
  .e-con > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
  }
}