/*
 * APERTH.COM - Custom CSS
 * Matches the Pixel Glume App Development page layout exactly.
 * Add this file to your WordPress theme via Appearance > Customize > Additional CSS
 * OR enqueue it in your child theme's functions.php
 * 
 * IMAGE LOCATIONS (upload to WordPress Media Library at these paths):
 * ------------------------------------------------------------------
 * HERO SECTION (right side phone graphic):
 *   Path: /wp-content/uploads/aperth/hero-phone-mockup.png
 *   Size: 820x791px (same as original Group-3246.png)
 *
 * SERVICES SECTION (middle phone between two service columns):
 *   Path: /wp-content/uploads/aperth/services-phone-center.png
 *   Size: 348x714px (Artboard-4-2.png equivalent)
 *
 * DARK BANNER SECTION (phone mockup on right):
 *   Path: /wp-content/uploads/aperth/dark-banner-phone.png
 *   Size: ~400x700px (transparent PNG, app screenshot on phone)
 *
 * PORTFOLIO SECTION (left side project image):
 *   Path: /wp-content/uploads/aperth/portfolio-project.jpg
 *   Size: ~760x400px (your featured project screenshot)
 *
 * CTA FORM SECTION (left side office/team image):
 *   Path: /wp-content/uploads/aperth/journey-team-photo.jpg
 *   Size: ~760x500px (professional team or office photo)
 *
 * FAQ SECTION (right side illustration):
 *   Path: /wp-content/uploads/aperth/faq-illustration.png
 *   Size: ~201x334px (same as original Union021651320136.png)
 *
 * LOGO (header):
 *   Path: /wp-content/uploads/aperth/aperth-logo.svg
 *   Size: ~148x56px SVG
 *
 * FOOTER LOGO:
 *   Path: /wp-content/uploads/aperth/aperth-footer-logo.png
 *   Size: ~214x81px
 *
 * PARTNER LOGOS (marquee strip):
 *   Path: /wp-content/uploads/aperth/partner-hotjar.svg etc.
 *   Size: ~120x40px each
 * ------------------------------------------------------------------
 */

/* =============================================
   GLOBAL RESET & BASE
   ============================================= */
:root {
  --red: #DB0000;
  --dark: #1a1a1a;
  --mid-dark: #343434;
  --gray-bg: #F6F6F6;
  --white: #ffffff;
  --text: #555;
  --light-text: #666;
  --border: #e5e5e5;
  --font: 'Inter', 'Roboto', sans-serif;
  --font-display: 'Epilogue', 'Inter', sans-serif;
  --transition: 0.3s ease;
  --shadow: 0 4px 20px rgba(0,0,0,0.07);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.13);
  --max-width: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pulseCta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(219,0,0,0.35); }
  50%       { box-shadow: 0 0 0 10px rgba(219,0,0,0); }
}
@keyframes processHover {
  0%   { color: #ddd; }
  100% { color: var(--red); }
}
@keyframes scaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* =============================================
   ELEMENTOR CONTAINER RESETS
   ============================================= */
.elementor .e-con-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

/* =============================================
   SECTION 1: HERO - "Custom Dynamic Mobile App"
   Layout: Left text + checklist | Right phone image
   ============================================= */
.elementor-element-580fc67 {
  background: #ffffff;
  padding: 70px 0 60px;
}

/* Left column - text */
.elementor-element-fc76771 > .e-con-inner {
  max-width: 520px;
}

.elementor-element-5193262 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.18;
  color: #1a1a1a;
  margin-bottom: 20px;
  animation: fadeInLeft 0.8s ease both;
}

.elementor-element-f88097c .elementor-widget-container p {
  font-size: 0.95rem;
  color: var(--light-text);
  line-height: 1.72;
  margin-bottom: 22px;
  animation: fadeInLeft 0.8s 0.15s ease both;
}

/* Checkmark list */
.elementor-element-73f9254 .elementor-icon-list-items {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  animation: fadeInLeft 0.8s 0.25s ease both;
}
.elementor-element-73f9254 .elementor-icon-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: var(--text);
}
.elementor-element-73f9254 .elementor-icon-list-icon svg {
  width: 26px;
  height: auto;
  flex-shrink: 0;
}

/* CTA Button in hero */
.elementor-element-580fc67 .elementor-button {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 13px 30px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border: 2px solid var(--red);
  cursor: pointer;
  transition: all var(--transition);
  animation: pulseCta 2.5s infinite;
  letter-spacing: 0.01em;
}
.elementor-element-580fc67 .elementor-button:hover {
  background: #b80000;
  border-color: #b80000;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(219,0,0,0.3);
  animation: none;
}

/* Right column - hero image */
.elementor-element-12541c8 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.elementor-element-12541c8 .elementor-widget-image img {
  max-width: 100%;
  height: auto;
  animation: floatUp 4s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));
}

/* Third column - iOS/Android icons */
.elementor-element-03507d4 .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  transition: all var(--transition);
}
.elementor-element-03507d4 .elementor-icon-box-wrapper:last-child { border-bottom: none; }
.elementor-element-03507d4 .elementor-icon-box-wrapper:hover {
  transform: translateX(4px);
}
.elementor-element-03507d4 .elementor-icon-box-icon .elementor-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}
.elementor-element-03507d4 .elementor-icon-box-icon svg {
  width: 40px;
  height: auto;
}
.elementor-element-03507d4 .elementor-icon-box-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.elementor-element-03507d4 .elementor-icon-box-description {
  font-size: 0.82rem;
  color: var(--light-text);
  line-height: 1.6;
}

/* =============================================
   SECTION: PARTNER LOGOS MARQUEE STRIP
   ============================================= */
/* The logos section with hotjar, afterpay, ghost etc */
.elementor-element-580fc67 + .e-con,
[data-id="8b0159a"] ~ .e-con:first-of-type {
  overflow: hidden;
}

/* Partner logos scrolling strip - target the image carousel */
.e-n-carousel.swiper:not(.elementor-element-f219956 .swiper) {
  overflow: hidden;
}

/* Logo marquee strip styling */
.elementor-widget-image img[src*="hotjar"],
.elementor-widget-image img[src*="afterpay"],
.elementor-widget-image img[src*="ghost"],
.elementor-widget-image img[src*="nimble"],
.elementor-widget-image img[src*="open"],
.elementor-widget-image img[src*="dext"],
.elementor-widget-image img[src*="pro"],
.elementor-widget-image img[src*="travel"] {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--transition);
  max-height: 35px;
  width: auto;
}
.elementor-widget-image img[src*="hotjar"]:hover,
.elementor-widget-image img[src*="afterpay"]:hover {
  filter: none;
  opacity: 1;
}

/* =============================================
   SECTION 2: "Aperth.com Custom-Built Mobile App Services"
   Layout: Gray background, text left + tabs right + center phone
   ============================================= */
.elementor-element-8b0159a {
  background: var(--gray-bg) !important;
  padding: 75px 0;
}

.elementor-element-8b0159a .elementor-element-b8e2eb2 h5.elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 14px;
  line-height: 1.25;
}

.elementor-element-8b0159a .elementor-element-16b6444 p {
  font-size: 0.92rem;
  color: var(--light-text);
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: 480px;
}

/* Contact Us button in this section */
.elementor-element-59fbbdf .elementor-button {
  display: inline-block;
  background: var(--red) !important;
  color: #fff !important;
  padding: 12px 28px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all var(--transition);
  border: 2px solid var(--red);
}
.elementor-element-59fbbdf .elementor-button:hover {
  background: #b80000 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(219,0,0,0.28);
}

/* Tab buttons (Game Development, Prototyping etc.) */
.e-n-tabs-heading {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.e-n-tab-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--light-text);
  border-left: 3px solid transparent;
  transition: all var(--transition);
  border-bottom: 1px solid var(--border);
}
.e-n-tab-title:hover,
.e-n-tab-title[aria-selected="true"] {
  border-left-color: var(--red);
  background: rgba(219,0,0,0.03);
  color: #1a1a1a;
}
.e-n-tab-title .e-n-tab-title-text {
  font-weight: 600;
}
.e-n-tab-icon svg {
  width: 12px;
  height: auto;
  fill: var(--red);
}

/* Tab content panel */
.e-n-tabs-content {
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--shadow);
  min-height: 280px;
  animation: scaleIn 0.35s ease;
}
.e-n-tab-content .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.e-n-tab-content .elementor-icon-box-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
}
.e-n-tab-content .elementor-icon-box-description {
  font-size: 0.85rem;
  color: var(--light-text);
  line-height: 1.65;
}
.e-n-tab-content .elementor-icon-box-icon svg {
  width: 44px;
  height: auto;
}

/* Center phone image */
.elementor-element-8b0159a .elementor-widget-image img {
  max-width: 100%;
  height: auto;
  animation: floatUp 4s 0.5s ease-in-out infinite;
  border-radius: 8px;
}

/* =============================================
   SECTION 3: DARK BANNER - "Custom App Solutions"
   Background: dark/black with red accents
   Layout: Left text | Right phone mockup
   ============================================= */
.elementor-element-8b0159a + .e-con,
[data-id="580fc67"] ~ [data-dce-background-color="#1a1a1a"],
[style*="background-color: rgb(0, 0, 0)"],
[style*="background-color:#000"],
[data-id="b64eed7"] {
  /* handled below via direct targeting */
}

/* Target the dark CTA section (dark background with "Custom App Solutions") */
.elementor-section.elementor-section-boxed.elementor-section-height-default:has(.elementor-heading-title:first-line) + section,
/* Fallback - target by content pattern */
.e-con[style*="background"]:has(.elementor-heading-title) {
  padding: 70px 0;
}

/* Dark sections generally */
.e-con[data-dce-background-color="#1a1a1a"],
.e-con[data-dce-background-color="#0d0d0d"],
.e-con[data-dce-background-color="#111"] {
  padding: 75px 0;
}

/* The actual dark hero banner - "Custom App Solutions delivering unparalleled quality" */
/* Identified by structure: has "Custom App Solutions" text + app store buttons */
.elementor-element-580fc67 ~ .e-con.e-parent:nth-of-type(3) {
  padding: 75px 0;
}

/* Dark section heading */
[data-elementor-id="1062"] .e-parent:nth-child(3) .elementor-heading-title,
.elementor-element-b8e2eb2 ~ .e-con .elementor-heading-title {
  font-family: var(--font-display);
}

/* App store buttons */
.elementor-button-wrapper a[href*="apple"],
.elementor-button-wrapper a[href*="play"],
.elementor-button-wrapper a[href*="app-store"],
.elementor-button-wrapper a[href*="google-play"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #000;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}
.elementor-button-wrapper a[href*="apple"]:hover,
.elementor-button-wrapper a[href*="play"]:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* Technology logos chips in dark section */
.elementor-icon-list-items .elementor-icon-list-text {
  font-size: 0.85rem;
}

/* =============================================
   SECTION 4: PLATFORMS - "Custom Built Mobile Applications"
   Layout: White bg, 3 icon-box cards in a row
   ============================================= */
/* Platform section icon boxes */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  transition: all var(--transition);
  cursor: default;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
  transform: translateY(-4px);
}
.elementor-widget-icon-box .elementor-icon-box-icon {
  margin-bottom: 14px;
}
.elementor-widget-icon-box .elementor-icon-box-icon svg {
  width: 48px;
  height: auto;
}
.elementor-widget-icon-box .elementor-icon-box-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.elementor-widget-icon-box .elementor-icon-box-description {
  font-size: 0.84rem;
  color: var(--light-text);
  line-height: 1.65;
}

/* The 3-column platforms grid section */
[data-elementor-id="1062"] .e-parent:nth-of-type(4) {
  padding: 70px 0;
  background: #fff;
}
[data-elementor-id="1062"] .e-parent:nth-of-type(4) .e-con-inner {
  display: grid;
  gap: 30px;
}

/* Swiper/carousel for tech capabilities */
.elementor-widget-n-carousel .swiper-slide .elementor-icon-box-wrapper {
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  transition: all var(--transition);
  height: 100%;
}
.elementor-widget-n-carousel .swiper-slide .elementor-icon-box-wrapper:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

/* Swiper nav buttons */
.elementor-swiper-button {
  width: 40px;
  height: 40px;
  background: var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.elementor-swiper-button svg {
  width: 16px;
  height: auto;
  fill: #fff;
}
.elementor-swiper-button:hover {
  background: #b80000;
  transform: translateY(-50%) scale(1.08);
}
.elementor-swiper-button-prev { left: -20px; }
.elementor-swiper-button-next { right: -20px; }

/* Swiper pagination bullets */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 50%;
  transition: all var(--transition);
  cursor: pointer;
  display: inline-block;
  margin: 0 4px;
}
.swiper-pagination-bullet-active {
  background: var(--red);
  width: 20px;
  border-radius: 4px;
}

/* =============================================
   SECTION 5: APERTH MOBILE APP SERVICES (tab section)
   Layout: Gray bg, left text+tabs | right image
   ============================================= */
/* (Already styled in section 2 tab styles above - same widget) */

/* Mobile App Services section gray bg */
.elementor-element-8b0159a {
  background: var(--gray-bg) !important;
}

/* The floating phone image in the services section */
.elementor-element-8b0159a .e-child:nth-child(2) .elementor-widget-image img {
  max-width: 320px;
  animation: floatUp 4s ease-in-out infinite;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.15);
}

/* =============================================
   SECTION 6: PORTFOLIO - "Our Exceptional Portfolio"
   Layout: White bg, left photo | right text + app details
   ============================================= */
.elementor-element-65b0967 ~ .e-parent:has(.elementor-heading-title) {
  padding: 70px 0;
}

/* Portfolio image */
.portfolio-image,
[data-id="1d52d1d"] .elementor-widget-image img {
  border-radius: 12px;
  width: 100%;
  height: 360px;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

/* Portfolio heading */
[data-id="0b20cf3"] .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 14px;
}

/* Technology tags */
.elementor-widget-taxonomy-list .elementor-taxonomy-list-item,
.tech-tag {
  display: inline-block;
  background: var(--gray-bg);
  color: var(--dark);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-right: 6px;
  margin-bottom: 6px;
}

/* App store download buttons in portfolio */
[data-id="ec3b3c5"] .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a1a1a;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
  margin-right: 10px;
}
[data-id="ec3b3c5"] .elementor-button:hover {
  background: var(--red);
  transform: translateY(-2px);
}

/* =============================================
   SECTION 7: PROCESS - "Our Mobile App Development Process"
   Layout: Gray bg, 8 numbered step boxes in 4+4 grid
   ============================================= */
/* Process section */
[data-elementor-id="1062"] .e-parent:has(.processHover11) {
  background: var(--gray-bg);
  padding: 75px 0;
}

/* Each process step container */
.processHover11 {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 900;
  color: #ddd;
  display: block;
  line-height: 1;
  margin-bottom: 10px;
  transition: color var(--transition);
}

/* Process item box */
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child {
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 28px 22px;
  position: relative;
  transition: all var(--transition);
  cursor: default;
}

[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:hover {
  background: var(--red);
  border-color: var(--red);
}
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:hover .processHover11 {
  color: rgba(255,255,255,0.3);
}
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:hover .elementor-heading-title {
  color: #fff !important;
}
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:hover p,
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:hover .elementor-widget-text-editor p {
  color: rgba(255,255,255,0.85) !important;
}
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:hover svg path {
  fill: #fff;
}

/* Process step titles */
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child .elementor-heading-title:not(:first-child) {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
  transition: color var(--transition);
}

/* Process step text */
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child .elementor-widget-text-editor p {
  font-size: 0.82rem;
  color: var(--light-text);
  line-height: 1.6;
  transition: color var(--transition);
}

/* Arrow icon between steps */
.elementor-widget-icon .elementor-icon svg {
  width: 12px;
  height: auto;
}
.elementor-widget-icon .elementor-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

/* Process section heading */
[data-elementor-id="1062"] .e-parent:has(.processHover11) > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
}
[data-elementor-id="1062"] .e-parent:has(.processHover11) > .e-con-inner > .elementor-widget-text-editor p {
  text-align: center;
  font-size: 0.85rem;
  color: var(--red);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =============================================
   SECTION 8: TESTIMONIALS - "Why Our Clients Love Aperth.com"
   Layout: White bg, heading + star-rating review cards carousel
   ============================================= */
.elementor-element-65b0967 {
  background: #fff;
  padding: 75px 0;
}

.elementor-element-65b0967 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
}

.elementor-element-65b0967 .elementor-widget-text-editor p {
  text-align: center;
  color: var(--light-text);
  font-size: 0.92rem;
  max-width: 580px;
  margin: 0 auto 40px;
}

/* Testimonial carousel slides */
.elementor-element-f219956 .swiper-slide {
  height: auto;
}

.elementor-element-f219956 .e-child {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 22px;
  height: 100%;
  transition: all var(--transition);
  position: relative;
}
.elementor-element-f219956 .e-child::before {
  content: '\201C';
  position: absolute;
  top: 14px;
  left: 18px;
  font-size: 55px;
  font-family: Georgia, serif;
  color: var(--red);
  opacity: 0.12;
  line-height: 1;
}
.elementor-element-f219956 .e-child:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

/* Review text */
.elementor-element-f219956 .elementor-widget-text-editor p {
  font-size: 0.87rem;
  color: var(--light-text);
  line-height: 1.72;
  margin-bottom: 18px;
}

/* Divider line in testimonial */
.elementor-widget-divider .elementor-divider-separator {
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* Star ratings */
.e-rating-wrapper {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}
.e-rating-wrapper .e-icon-wrapper.e-icon-marked svg {
  fill: #f0ad4e !important;
}
.e-rating-wrapper .e-icon-wrapper.e-icon-unmarked svg {
  fill: #e0e0e0 !important;
}
.e-rating-wrapper svg {
  width: 16px;
  height: 16px;
}

/* Reviewer name */
.elementor-element-f219956 .elementor-heading-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 3px;
}
/* Reviewer title */
.elementor-element-f219956 .elementor-widget-text-editor:last-child p {
  font-size: 0.78rem;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 0;
}

/* =============================================
   SECTION 9: CTA FORM - "Let's Start A New Journey"
   Layout: Gray bg, left photo | right contact form
   ============================================= */
[data-elementor-id="1062"] .e-parent:has(.elementor-form) {
  background: var(--gray-bg);
  padding: 75px 0;
}

/* Form container */
.elementor-form-fields-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Form fields */
.elementor-field-textual,
.elementor-field-textual.elementor-size-sm,
input.elementor-field,
textarea.elementor-field,
select.elementor-field {
  width: 100%;
  padding: 13px 16px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
  font-size: 0.88rem !important;
  color: #1a1a1a !important;
  background: #fff !important;
  outline: none !important;
  transition: border-color var(--transition) !important;
  appearance: none;
}
.elementor-field-textual:focus,
input.elementor-field:focus,
textarea.elementor-field:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(219,0,0,0.08) !important;
}
textarea.elementor-field {
  min-height: 90px;
  resize: vertical;
}

/* Full-width form fields */
.elementor-col-100 {
  grid-column: 1 / -1;
}
.elementor-col-50 {
  grid-column: span 1;
}

/* Submit button */
.elementor-form .elementor-button,
.e-form__buttons .elementor-button {
  width: 100%;
  padding: 14px !important;
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all var(--transition) !important;
  text-align: center !important;
}
.elementor-form .elementor-button:hover,
.e-form__buttons .elementor-button:hover {
  background: #b80000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(219,0,0,0.3) !important;
}

/* Checkbox styling */
.elementor-field-subgroup label {
  font-size: 0.78rem;
  color: var(--light-text);
  line-height: 1.5;
  cursor: pointer;
}
.elementor-field-subgroup input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--red);
  flex-shrink: 0;
}

/* CTA section left image */
[data-elementor-id="1062"] .e-parent:has(.elementor-form) .e-child:first-child .elementor-widget-image img {
  border-radius: 16px;
  width: 100%;
  height: 420px;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

/* CTA form section heading */
[data-elementor-id="1062"] .e-parent:has(.elementor-form) .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 12px;
}
[data-elementor-id="1062"] .e-parent:has(.elementor-form) .elementor-widget-text-editor p {
  color: var(--light-text);
  font-size: 0.92rem;
  margin-bottom: 22px;
}

/* =============================================
   SECTION 10: FAQ - "Have some questions about Aperth.com?"
   Layout: White bg, accordion Q&A + right illustration
   ============================================= */
[data-elementor-id="1062"] .e-parent:has(.elementskit-accordion) {
  background: #fff;
  padding: 75px 0;
}

/* FAQ heading */
[data-elementor-id="1062"] .e-parent:has(.elementskit-accordion) .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 10px;
}
[data-elementor-id="1062"] .e-parent:has(.elementskit-accordion) .elementor-widget-text-editor p {
  color: var(--light-text);
  font-size: 0.92rem;
  margin-bottom: 30px;
}

/* Accordion card */
.elementskit-card {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
  overflow: hidden;
  transition: border-color var(--transition);
}
.elementskit-card:has(.collapse.show) {
  border-color: var(--red) !important;
}

/* Accordion header */
.elementskit-card-header {
  background: #fff !important;
}
.elementskit-btn-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 20px !important;
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  transition: color var(--transition) !important;
}
.elementskit-btn-link:hover {
  color: var(--red) !important;
  text-decoration: none !important;
}
.elementskit-btn-link:not(.collapsed) {
  color: var(--red) !important;
}

/* Accordion plus/minus icons */
.ekit_accordion_icon_group {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}
.elementskit-btn-link:not(.collapsed) .ekit_accordion_icon_group {
  background: var(--red);
  transform: rotate(45deg);
}
.elementskit-btn-link:not(.collapsed) .ekit_accordion_icon_group .icon-open::before,
.elementskit-btn-link:not(.collapsed) .ekit_accordion_icon_group .icon-closed::before {
  color: #fff !important;
}
.icon-open, .icon-closed {
  font-size: 14px;
  color: #1a1a1a;
  transition: color var(--transition);
}

/* Accordion body */
.elementskit-card-body {
  padding: 0 20px 18px !important;
}
.elementskit-card-body .elementor-widget-text-editor p {
  font-size: 0.87rem !important;
  color: var(--light-text) !important;
  line-height: 1.7 !important;
}

/* FAQ right image */
[data-id="1d52d1d"] .elementor-widget-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  animation: floatUp 5s ease-in-out infinite;
}

/* =============================================
   SECTION 11: DARK CONTACT BAND - "How can we help you?"
   Background: #343434 dark gray
   Layout: Left form | Right logo + links
   ============================================= */
.elementor-element-b64eed7 {
  background: var(--mid-dark) !important;
  padding: 70px 0 !important;
}

/* Contact heading */
.elementor-element-950f1dc .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff !important;
  margin-bottom: 22px;
}
.elementor-element-950f1dc .elementor-heading-title span {
  color: #fff !important;
  font-weight: 400 !important;
}

/* Form inputs in dark section */
.elementor-element-b64eed7 .elementor-field-textual,
.elementor-element-b64eed7 input.elementor-field,
.elementor-element-b64eed7 textarea.elementor-field {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
.elementor-element-b64eed7 .elementor-field-textual::placeholder,
.elementor-element-b64eed7 input.elementor-field::placeholder,
.elementor-element-b64eed7 textarea.elementor-field::placeholder {
  color: #888 !important;
}
.elementor-element-b64eed7 .elementor-field-textual:focus,
.elementor-element-b64eed7 input.elementor-field:focus {
  border-color: var(--red) !important;
}

/* Dark section submit button */
.elementor-element-b64eed7 .elementor-button,
.elementor-element-b64eed7 .e-form__buttons .elementor-button {
  background: var(--red) !important;
}

/* Dark section checkbox label */
.elementor-element-b64eed7 .elementor-field-subgroup label {
  color: #aaa;
}

/* Dark section right column - links list */
.elementor-element-a4a54de .elementor-icon-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.elementor-element-a4a54de .elementor-icon-list-item {
  margin-bottom: 6px;
}
.elementor-element-a4a54de .elementor-icon-list-text {
  font-size: 0.85rem;
  color: #bbb;
  transition: color var(--transition);
}
.elementor-element-a4a54de .elementor-icon-list-item a:hover .elementor-icon-list-text {
  color: var(--red);
}

/* Marketing & Support Available label */
.elementor-element-b930c84 .elementor-heading-title {
  color: #aaa !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Calculate Cost dark box */
.elementor-element-19ddd37 {
  background: #262626 !important;
  border-radius: 10px;
  padding: 24px !important;
}
.elementor-element-19ddd37 .elementor-heading-title {
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px;
}
.elementor-element-19ddd37 .elementor-widget-text-editor p {
  color: #aaa;
  font-size: 0.82rem;
  margin-bottom: 16px;
}
.elementor-element-9e2f677 .elementor-button {
  background: var(--red) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: all var(--transition) !important;
}
.elementor-element-9e2f677 .elementor-button:hover {
  background: #b80000 !important;
  transform: translateY(-2px) !important;
}

/* =============================================
   FOOTER BAND (bottom dark bar)
   ============================================= */
.elementor-element-6766160 {
  background: #1a1a1a;
  padding: 30px 0;
}
.elementor-element-6766160 .elementor-icon-list-text {
  color: #999;
  font-size: 0.82rem;
  transition: color var(--transition);
}
.elementor-element-6766160 .elementor-icon-list-item a:hover .elementor-icon-list-text {
  color: var(--red);
}

/* =============================================
   SECTION HEADINGS - Generic
   ============================================= */
.elementor-heading-title.elementor-size-default {
  font-family: var(--font-display);
  line-height: 1.22;
}

/* Section sub-description paragraphs */
.elementor-widget-text-editor p {
  font-family: var(--font);
  font-size: 0.92rem;
  color: var(--light-text);
  line-height: 1.7;
}

/* =============================================
   SCROLL REVEAL ANIMATIONS
   ============================================= */
.e-parent,
.e-child,
.elementor-widget {
  animation-fill-mode: both;
}

/* Fade in section headers on scroll */
.elementor-widget-heading {
  animation: fadeInUp 0.6s ease both;
}

/* Icon boxes stagger */
.elementor-widget-icon-box:nth-child(1) { animation: fadeInUp 0.5s 0.1s ease both; }
.elementor-widget-icon-box:nth-child(2) { animation: fadeInUp 0.5s 0.2s ease both; }
.elementor-widget-icon-box:nth-child(3) { animation: fadeInUp 0.5s 0.3s ease both; }

/* Process items stagger */
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:nth-child(1) { animation: fadeInUp 0.5s 0.05s ease both; }
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:nth-child(2) { animation: fadeInUp 0.5s 0.1s ease both; }
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:nth-child(3) { animation: fadeInUp 0.5s 0.15s ease both; }
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:nth-child(4) { animation: fadeInUp 0.5s 0.2s ease both; }
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:nth-child(5) { animation: fadeInUp 0.5s 0.25s ease both; }
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:nth-child(6) { animation: fadeInUp 0.5s 0.3s ease both; }
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:nth-child(7) { animation: fadeInUp 0.5s 0.35s ease both; }
[data-elementor-id="1062"] .e-parent:has(.processHover11) .e-child:nth-child(8) { animation: fadeInUp 0.5s 0.4s ease both; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .elementor-element-580fc67 .e-con-inner {
    flex-direction: column;
    gap: 40px;
  }
  .elementor-form-fields-wrapper {
    grid-template-columns: 1fr;
  }
  .elementor-col-50 {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .elementor-element-5193262 .elementor-heading-title { font-size: 1.7rem; }
  .elementor-swiper-button { display: none; }
  .processHover11 { font-size: 2rem; }
  .elementor-element-b64eed7 .elementor-form-fields-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .e-n-tabs-heading { flex-direction: column; }
  .elementor-element-580fc67 { padding: 50px 0 40px; }
}

/* =============================================
   SPECIFIC BRAND OVERRIDES
   (Ensures Aperth.com colors appear correctly)
   ============================================= */

/* Any hardcoded Pixel Glume red references — keep as Aperth red */
[style*="color:#DB0000"] { color: var(--red) !important; }
[style*="color: #DB0000"] { color: var(--red) !important; }
[style*="background-color:#DB0000"] { background-color: var(--red) !important; }

/* Remove Google Tag Manager and tracking scripts visibility */
noscript img { display: none; }

/* Hide HTTrack mirror artifacts */
.site-main [style*="display:none"] { display: none !important; }