/* ===========================
   VARIABLES & BASE STYLES
   =========================== */

:root {
  --primary: #FF6B35;
  --primary-dark: #E85A1F;
  --primary-light: #FFE8DC;
  
  --white: #FFFFFF;
  --black: #0F172A;
  --text: #1E293B;
  --text-light: #64748B;
  --bg-light: #F8FAFC;
  
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 20px 60px rgba(255, 107, 53, 0.15);
  
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===========================
   BUTTONS
   =========================== */

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.btn-secondary {
  background: var(--white);
  color: var(--text);
  border: 1px solid #E2E8F0;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--bg-light);
  border-color: var(--text-light);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 11px 23px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-outline:hover {
  background: var(--primary-light);
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1rem;
  border-radius: 8px;
}

.btn-block {
  width: 100%;
  display: block;
}



/* ==========================================
   NAVBAR
   ========================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 107, 53, 0.08);
  transition: all 0.35s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 40px rgba(255, 107, 53, 0.08);
  border-bottom-color: rgba(255, 107, 53, 0.12);
}

/* ==========================================
   NAVBAR CONTAINER
   ========================================== */

/* =========================
   NAVBAR WRAPPER
   ========================= */
/* ==========================================
   NAVBAR CONTAINER - PRONTO STYLE FINAL
   ========================================== */

.nav-wrapper {
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 48px;
  height: 84px;
  min-height: 84px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
}

.logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

.logo img {
  display: block !important;
  width: auto !important;
  height: 40px !important;
  max-height: 40px !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;
  transform: none !important;
  vertical-align: middle !important;
  align-self: center !important;
  flex-shrink: 0;
}

/* Large Desktop */
@media (min-width: 1600px) {
  .nav-wrapper {
    max-width: 1600px;
    padding: 0 56px;
    height: 88px;
    min-height: 88px;
  }

  .logo img {
    height: 42px !important;
    max-height: 42px !important;
  }
}

/* Tablet / Small Desktop */
@media (max-width: 992px) {
  .nav-wrapper {
    padding: 0 24px;
    height: 78px;
    min-height: 78px;
  }

  .logo img {
    height: 36px !important;
    max-height: 36px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nav-wrapper {
    padding: 0 20px;
    height: 72px;
    min-height: 72px;
  }

  .logo img {
    height: 32px !important;
    max-height: 32px !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .nav-wrapper {
    padding: 0 16px;
    height: 68px;
    min-height: 68px;
  }

  .logo img {
    height: 30px !important;
    max-height: 30px !important;
  }
}

/* ==========================================
   NAVIGATION MENU
   ========================================== */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 52px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
  padding: 10px 0;
  transition: all 0.3s ease;
}

/* Hover color */
.nav-menu a:hover {
  color: #FF6B35;
}

/* Animated underline */
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF6B35, #ff8c5a);
  transition: width 0.35s ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  width: 100%;
}

/* ==========================================
   HAMBURGER BUTTON
   ========================================== */
.hamburger {
  display: none;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 107, 53, 0.12);
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s ease;
}

.hamburger:hover {
  border-color: rgba(255, 107, 53, 0.25);
  box-shadow: 0 10px 25px rgba(255, 107, 53, 0.08);
}

.hamburger span {
  width: 22px;
  height: 2.5px;
  border-radius: 999px;
  background: #111827;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background: #FF6B35;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background: #FF6B35;
}

/* ==========================================
   DESKTOP LARGE SCREENS
   ========================================== */
@media (min-width: 1800px) {
  .nav-wrapper {
    max-width: 1800px;
    padding: 0 60px;
    min-height: 112px;
  }

  .logo-text {
    font-size: 4rem;
  }

  .nav-menu {
    gap: 64px;
  }

  .nav-menu a {
    font-size: 1.65rem;
  }
}

/* ==========================================
   TABLET / SMALL DESKTOP
   ========================================== */
@media (max-width: 1200px) {
  .nav-wrapper {
    padding: 0 32px;
    min-height: 92px;
  }

  .logo-text {
    font-size: 3rem;
  }

  .nav-menu {
    gap: 34px;
  }

  .nav-menu a {
    font-size: 1.25rem;
  }
}

/* ==========================================
   MOBILE NAVIGATION
   ========================================== */
@media (max-width: 992px) {
  .nav-wrapper {
    padding: 0 24px;
    min-height: 82px;
  }

  .logo-text {
    font-size: 2.4rem;
  }

  .hamburger {
    display: inline-flex;
  }

  .nav-menu {
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    margin-left: 0;
    padding: 32px 24px 40px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 107, 53, 0.08);
    box-shadow: 0 24px 60px rgba(255, 107, 53, 0.08);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;

    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
  }

  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu a {
    font-size: 1.35rem;
    width: 100%;
    padding: 8px 0;
  }
}

/* ==========================================
   SMALL MOBILE
   ========================================== */
@media (max-width: 768px) {
  .nav-wrapper {
    padding: 0 20px;
    min-height: 76px;
  }

  .logo-icon {
    font-size: 1.45rem;
  }

  .logo-text {
    font-size: 2rem;
  }

  .hamburger {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .nav-menu {
    top: 76px;
    padding: 28px 20px 36px;
  }

  .nav-menu a {
    font-size: 1.2rem;
  }
}

/* ==========================================
   EXTRA SMALL DEVICES
   ========================================== */
@media (max-width: 480px) {
  .logo-text {
    font-size: 1.7rem;
  }

  .nav-wrapper {
    padding: 0 16px;
  }

  .nav-menu {
    padding: 24px 16px 32px;
  }
}

/* ===========================
   HERO
   =========================== */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 100px 0;
  min-height: 90vh;
  overflow: hidden;
}

.hero-content {
  animation: fadeInUp 0.8s ease-out;
}

.hero-badge {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 20px;
}

.hero-title span {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8A50 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 30px;
  max-width: 500px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 50px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat strong {
  font-size: 1.5rem;
  color: var(--black);
}

.stat span {
  font-size: 0.9rem;
  color: var(--text-light);
}

.hero-visual {
  position: relative;
  animation: fadeInRight 0.8s ease-out;
}

.dashboard-mockup {
  background: linear-gradient(135deg, #F8FAFC 0%, var(--white) 100%);
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.dashboard-header {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.dashboard-header div {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E2E8F0;
}

.dashboard-header div:first-child {
  background: var(--primary);
}

.dashboard-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 200px;
  gap: 10px;
}

.chart-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--primary) 0%, #FFB380 100%);
  border-radius: 8px 8px 0 0;
  animation: chartGrow 1s ease-out;
  min-height: 20px;
}

.chart-bar.active {
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

@keyframes chartGrow {
  from {
    height: 0;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===========================
   TRUST SECTION
   =========================== */

.trust-section {
  padding: 60px 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

.trust-label {
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.trust-logos {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  align-items: center;
}

.trust-logo {
  font-weight: 700;
  color: var(--text-light);
  font-size: 1rem;
}

/* ===========================
   FEATURES
   =========================== */
/* ======================================================
   WHY US SECTION - FULL WIDTH PRONTO LAYOUT
   Replace ONLY these selectors in your existing styles.css
   This moves:
   - Heading/Subheading to the LEFT
   - Stats cards to the RIGHT
   - Uses full screen width
   - Brand colors:
     Primary: #FF6B35
     Secondary: #FFFFFF
   ====================================================== */

.why-us-section {
  padding: 140px 0 120px;
  background: #ffffff;
}

.why-us-section .container {
  max-width: 1700px;      /* Use nearly full screen width */
  margin: 0 auto;
  padding: 0 72px;
}

/* MAIN TWO COLUMN LAYOUT */
.why-us-section .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}

/* LEFT CONTENT */
.why-us-header {
  max-width: 760px;
  margin-bottom: 0;
}

.why-us-label {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: #FF6B35;
}

.why-us-title {
  margin: 0 0 32px;
  font-size: clamp(4.8rem, 7vw, 8.2rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.07em;
  color: #000000;
  max-width: 900px;
}

.why-us-subtitle {
  margin: 0;
  max-width: 700px;
  font-size: 1.45rem;
  line-height: 1.7;
  color: #6b7280;
}

/* RIGHT SIDE STATS */
.why-us-stats {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 0;
}

/* STAT CARD */
.why-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 34px 36px;
  border-radius: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf7 100%);
  border: 1px solid rgba(255, 107, 53, 0.12);
  box-shadow: 0 20px 50px rgba(255, 107, 53, 0.06);
  overflow: hidden;
}

.why-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 107, 53, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
  pointer-events: none;
}

/* ICON */
.why-stat-icon {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff7f3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

/* TEXT */
.why-stat-content {
  position: relative;
  z-index: 2;
}

.why-stat-content h3 {
  margin: 0 0 8px;
  font-size: clamp(2.8rem, 4vw, 4.8rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #000000;
}

.why-stat-content p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #6b7280;
  font-weight: 500;
}

/* LARGE DESKTOP */
@media (min-width: 1700px) {
  .why-us-section .container {
    max-width: 1800px;
    padding: 0 90px;
  }

  .why-us-title {
    font-size: 9rem;
  }
}

/* LAPTOP */
@media (max-width: 1200px) {
  .why-us-section .container {
    padding: 0 40px;
    gap: 60px;
  }

  .why-us-title {
    font-size: clamp(3.8rem, 8vw, 6rem);
  }
}

/* TABLET */
@media (max-width: 992px) {
  .why-us-section {
    padding: 100px 0;
  }

  .why-us-section .container {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 0 24px;
  }

  .why-us-title {
    font-size: clamp(2.8rem, 10vw, 5rem);
  }

  .why-us-subtitle {
    font-size: 1.15rem;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .why-us-section {
    padding: 90px 0;
  }

  .why-us-section .container {
    padding: 0 20px;
    gap: 40px;
  }

  .why-us-title {
    font-size: 2.7rem;
    line-height: 1;
  }

  .why-us-subtitle {
    font-size: 1.05rem;
  }

  .why-stat-card {
    padding: 26px 24px;
    border-radius: 24px;
  }

  .why-stat-icon {
    width: 58px;
    height: 58px;
    font-size: 1.6rem;
  }

  .why-stat-content h3 {
    font-size: 2.3rem;
  }

  .why-stat-content p {
    font-size: 1rem;
  }
}


/* ===========================
   STATS
   =========================== */

.stats-section {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--primary) 0%, #FF8A50 100%);
  color: var(--white);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.stat-card {
  text-align: center;
}

.stat-card h3 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.stat-card p {
  font-size: 1.05rem;
  opacity: 0.95;
}


/* ===========================
   TESTIMONIALS
   =========================== */

.testimonials {
  padding: 100px 0;
  background: var(--bg-light);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.testimonial-card {
  background: var(--white);
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.stars {
  font-size: 1rem;
  margin-bottom: 16px;
}

.testimonial-card p {
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonial-author strong {
  color: var(--black);
  font-size: 0.95rem;
}

.testimonial-author span {
  color: var(--text-light);
  font-size: 0.85rem;
}

/* ===========================
   FAQ
   =========================== */

.faq {
  padding: 100px 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
}

.faq-item h3 {
  color: var(--black);
  font-size: 1.1rem;
  margin-bottom: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.faq-item h3:hover {
  color: var(--primary);
}

.faq-item p {
  color: var(--text-light);
  line-height: 1.8;
  font-size: 0.95rem;
}

/* ===========================
   CTA
   =========================== */

.cta {
  background: linear-gradient(135deg, var(--primary) 0%, #FF8A50 100%);
  color: var(--white);
  padding: 100px 0;
  text-align: center;
}

.cta h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 12px;
}

.cta p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  opacity: 0.95;
}

.cta .btn-primary {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta .btn-primary:hover {
  background: var(--bg-light);
}

/* ===========================
   FOOTER
   =========================== */
/* ======================================================
   PREMIUM PRONTO-STYLE FOOTER CSS
   Orange & White Theme (#FF6B35 / #FFFFFF)
   Replace your COMPLETE existing FOOTER CSS section
   in styles.css with this code.
   ====================================================== */

.footer {
  position: relative;
  background: #000000;
  color: #ffffff;
  padding: 110px 0 40px;
  overflow: hidden;
}

/* Soft orange glow effects */
.footer::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 107, 53, 0.12) 0%,
    rgba(255, 107, 53, 0) 72%
  );
  pointer-events: none;
}

.footer::after {
  content: "";
  position: absolute;
  bottom: -220px;
  left: -140px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 107, 53, 0.08) 0%,
    rgba(255, 107, 53, 0) 72%
  );
  pointer-events: none;
}

/* Container */
.footer .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ======================================================
   TOP FOOTER GRID
   ====================================================== */
.footer-content {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  gap: 70px;
  margin-bottom: 60px;
}

/* Brand Title */
.footer-col:first-child h4 {
  margin: 0 0 34px;
  font-size: 4.25rem;
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: #ffffff;
}

/* Contact Text */
.footer-col:first-child p {
  margin: 0 0 16px;
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.72);
}

/* Links */
.footer a {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  transition: all 0.35s ease;
}

.footer a:hover {
  color: #ff6b35;
  transform: translateX(3px);
}

/* Highlight Emails */
.footer-col:first-child a,
.footer-col:last-child a[href^="mailto:"] {
  color: #ff6b35;
  font-weight: 700;
}

/* Column Titles */
.footer-col h5,
.footer-bottom-column h5 {
  margin: 0 0 28px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Lists */
.footer-col ul,
.footer-links-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col ul li,
.footer-links-grid ul li {
  margin-bottom: 16px;
}

.footer-col ul a,
.footer-links-grid ul a {
  font-size: 1.02rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
}

/* Divider */
.footer-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 0 70px;
}

/* ======================================================
   BOTTOM GRID
   ====================================================== */
.footer-bottom-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
}

/* Internal link columns */
.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.footer-cities-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* ======================================================
   COPYRIGHT
   ====================================================== */
.footer-copyright {
  margin-top: 70px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.footer-copyright p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ======================================================
   HOVER EFFECTS
   ====================================================== */
.footer-col ul a:hover,
.footer-links-grid ul a:hover {
  color: #ff6b35;
  transform: translateX(4px);
}

/* ======================================================
   LARGE DESKTOP
   ====================================================== */
@media (min-width: 1800px) {
  .footer .container {
    max-width: 1800px;
    padding: 0 60px;
  }
}

/* ======================================================
   TABLET
   ====================================================== */
@media (max-width: 1200px) {
  .footer-content {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }

  .footer-col:first-child {
    grid-column: 1 / -1;
  }

  .footer-bottom-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .footer-col:first-child h4 {
    font-size: 3.4rem;
  }
}

/* ======================================================
   SMALL TABLET
   ====================================================== */
@media (max-width: 992px) {
  .footer {
    padding: 90px 0 30px;
  }

  .footer .container {
    padding: 0 24px;
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 42px;
    margin-bottom: 50px;
  }

  .footer-links-grid {
    gap: 32px;
  }

  .footer-cities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ======================================================
   MOBILE
   ====================================================== */
@media (max-width: 768px) {
  .footer {
    padding: 80px 0 30px;
  }

  .footer .container {
    padding: 0 20px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 40px;
  }

  .footer-col:first-child h4 {
    font-size: 2.8rem;
  }

  .footer-links-grid,
  .footer-cities-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-col h5,
  .footer-bottom-column h5 {
    margin-bottom: 18px;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
  }

  .footer-col ul li,
  .footer-links-grid ul li {
    margin-bottom: 12px;
  }

  .footer-col ul a,
  .footer-links-grid ul a {
    font-size: 0.95rem;
  }

  .footer-divider {
    margin-bottom: 45px;
  }

  .footer-copyright {
    margin-top: 45px;
  }
}

/* ======================================================
   SMALL MOBILE
   ====================================================== */
@media (max-width: 480px) {
  .footer .container {
    padding: 0 16px;
  }

  .footer-col:first-child h4 {
    font-size: 2.3rem;
  }
}


/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 60px 0;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid #E2E8F0;
    padding: 20px 0;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu li {
    padding: 12px 20px;
    border-bottom: 1px solid #E2E8F0;
  }

  .nav-actions {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-stats {
    flex-direction: column;
    gap: 30px;
  }

  .pricing-card.featured {
    transform: scale(1);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .features-grid,
  .pricing-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    gap: 20px;
  }
}
/* ======================================================
   PRONTO-INSPIRED HERO SECTION
   Brand Colors:
   Primary: #FF6B35
   Secondary: #FFFFFF
   Add this at the END of styles.css
   ====================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  padding: 180px 0 80px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf7 100%);
  overflow: hidden;
}

.hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    radial-gradient(circle, rgba(255, 107, 53, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 18%,
    rgba(0, 0, 0, 0.9) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 18%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}

.hero-content {
  max-width: 760px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  margin-bottom: 28px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  color: #111827;
  font-size: 0.95rem;
  font-weight: 600;
}

.hero-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF6B35;
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
}

.hero-title {
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #000000;
  margin-bottom: 28px;
  max-width: 900px;
}

.hero-subtitle {
  max-width: 700px;
  font-size: 1.55rem;
  line-height: 1.7;
  color: #6b7280;
  margin-bottom: 50px;
}

.hero-actions {
  margin-bottom: 28px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;

  border: 2px solid #FF6B35 !important;
  color: #FF6B35 !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 18px 34px !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 30px rgba(255, 107, 53, 0.08);
  text-decoration: none;
  margin-bottom: 30px !important;
}

.hero-cta:hover {
  background: #FF6B35 !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 22px 45px rgba(255, 107, 53, 0.22);
}
/* ======================================================
   APP DOWNLOAD BUTTONS WITH LOGOS
   ====================================================== */

.app-downloads {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 250px;
  padding: 12px 22px;
  border-radius: 14px;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
  transition: all 0.35s ease;
}

.store-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.22);
}

.store-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

.apple-logo {
  font-size: 2.4rem;
  line-height: 1;
}

.store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.store-small {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.store-name {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Mobile */
@media (max-width: 768px) {
  .app-downloads {
    flex-direction: column;
  }

  .store-badge {
    min-width: 100%;
  }

  .store-name {
    font-size: 1.25rem;
  }
}


.hero-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 34px;
  color: #6b7280;
}

.rating-stars {
  color: #FF6B35;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}

.hero-cities {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cities-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #9ca3af;
}

.city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.city-tag {
  padding: 12px 22px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.city-tag:hover,
.city-tag.active {
  border-color: #FF6B35;
  background: #fff7f3;
  color: #FF6B35;
  box-shadow: 0 10px 24px rgba(255, 107, 53, 0.12);
}

.city-tag.more {
  color: #FF6B35;
  font-weight: 700;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hero-image-wrapper {
  width: 100%;
  max-width: 620px;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 30px 80px rgba(15, 23, 42, 0.12));
}

/* ==========================
   RESPONSIVE
   ========================== */

@media (max-width: 992px) {
  .hero {
    min-height: auto;
    padding: 110px 0 70px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .hero-visual {
    order: -1;
  }

  .hero-image-wrapper {
    max-width: 460px;
    margin: 0 auto;
  }

  .hero-title {
    font-size: clamp(2.8rem, 10vw, 5rem);
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 100px 0 60px;
  }

  .hero-title {
    font-size: 2.7rem;
    line-height: 1;
  }

  .hero-subtitle {
    font-size: 1.05rem;
    margin-bottom: 28px;
  }

  .hero-cta {
    width: 100%;
    text-align: center;
  }

  .app-downloads {
    flex-direction: column;
  }

  .store-badge {
    min-width: 100%;
  }

  .city-tag {
    padding: 10px 18px;
    font-size: 0.92rem;
  }
}

@media (max-width: 480px) {
  .hero-badge {
    font-size: 0.82rem;
    padding: 8px 14px;
  }

  .hero-title {
    font-size: 2.3rem;
  }

  .store-name {
    font-size: 1.1rem;
  }
}
/* ======================================================
   HERO SCREEN SIZE OVERRIDE ONLY
   Add this at the VERY END of styles.css
   This changes only layout dimensions.
   All existing colors, effects, and animations remain.
   ====================================================== */


.hero-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 72px;
  gap: 24px;
  grid-template-columns: 1.02fr 0.98fr;
}

.hero-content {
  max-width: 900px;
}

.hero-image-wrapper {
  max-width: 760px;
}

.hero-image {
  max-width: 720px;
  width: 100%;
  height: auto;
}

/* Large Desktop */
@media (min-width: 1700px) {
  .hero-grid {
    max-width: 1750px;
    padding: 0 90px;
  }

  .hero-image-wrapper {
    max-width: 820px;
  }

  .hero-image {
    max-width: 780px;
  }
}

/* Laptop */
@media (max-width: 1200px) {
  .hero-grid {
    padding: 0 40px;
    gap: 50px;
  }

  .hero-image-wrapper {
    max-width: 600px;
  }

  .hero-image {
    max-width: 560px;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 0 24px;
  }

  .hero-image-wrapper {
    max-width: 460px;
    margin: 0 auto;
  }

  .hero-image {
    max-width: 420px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    padding: 90px 0 60px;
  }

  .hero-grid {
    padding: 0 20px;
    gap: 40px;
  }

  .hero-image-wrapper {
    max-width: 340px;
  }

  .hero-image {
    max-width: 320px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero-grid {
    padding: 0 16px;
  }

  .hero-image-wrapper {
    max-width: 300px;
  }

  .hero-image {
    max-width: 280px;
  }
}
/* ======================================================
   OUR SERVICES - FULL WIDTH LAYOUT OVERRIDE
   Add this at the VERY END of styles.css
   This only improves:
   - Full screen width usage
   - Larger premium heading typography
   - Better spacing
   - Uses all available horizontal space
   - Keeps all existing colors and interactions
   ====================================================== */

/* ======================================================
   FULL-WIDTH SERVICES SECTION LAYOUT
   ------------------------------------------------------
   Replace ONLY the following CSS rules in your existing
   styles.css to make the Services section start from the
   left side and use the full width of the screen exactly
   like the design you shared.
   ------------------------------------------------------
   SEARCH these classes in your styles.css and REPLACE
   their existing code with the code below.
   ====================================================== */

/* ==========================================
   SERVICES SECTION
   ========================================== */
.services-section {
  position: relative;
  padding: 140px 0 120px;
  background: #ffffff;
  overflow: hidden;
}

/* ==========================================
   FULL WIDTH CONTAINER INSIDE SERVICES
   ========================================== */
.services-section .container {
  width: 100%;
  max-width: 1680px;      /* Use almost entire screen width */
  margin: 0 auto;
  padding: 0 48px;        /* Small left/right spacing */
}

/* ==========================================
   HEADER
   ========================================== */
.services-header {
  max-width: 980px;       /* Wide text area like Pronto */
  margin-bottom: 72px;
}

/* Small orange label */
.services-label {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FF6B35;
}

/* Huge bold heading */
.services-title {
  margin: 0 0 28px;
  font-size: clamp(4.8rem, 9vw, 8.6rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.07em;
  color: #000000;
  max-width: 1100px;
}

/* Subtitle */
.services-subtitle {
  margin: 0;
  max-width: 860px;
  font-size: 1.65rem;
  line-height: 1.8;
  color: #6b7280;
}

/* ==========================================
   GRID - USE FULL SCREEN WIDTH
   ========================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

/* ==========================================
   CARD SIZE - LARGE PREMIUM CARDS
   ========================================== */
.service-card {
  min-height: 360px;
}

/* Image area */
.service-image {
  height: 230px;
}

/* ==========================================
   LARGE DESKTOP (1800px+)
   ========================================== */
@media (min-width: 1800px) {
  .services-section .container {
    max-width: 1800px;
    padding: 0 60px;
  }

  .services-title {
    font-size: 9rem;
  }

  .services-grid {
    gap: 32px;
  }

  .service-card {
    min-height: 380px;
  }

  .service-image {
    height: 250px;
  }
}

/* ==========================================
   TABLET
   ========================================== */
@media (max-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .services-title {
    font-size: clamp(3.6rem, 8vw, 6rem);
  }

  .services-subtitle {
    font-size: 1.3rem;
  }
}

/* ==========================================
   SMALL TABLET
   ========================================== */
@media (max-width: 992px) {
  .services-section {
    padding: 100px 0 80px;
  }

  .services-section .container {
    padding: 0 24px;
  }

  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .services-header {
    margin-bottom: 56px;
  }

  .services-title {
    font-size: clamp(3rem, 9vw, 5rem);
  }

  .services-subtitle {
    font-size: 1.15rem;
    line-height: 1.8;
  }
}

/* ==========================================
   MOBILE
   ========================================== */
@media (max-width: 768px) {
  .services-section {
    padding: 80px 0 60px;
  }

  .services-section .container {
    padding: 0 20px;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .services-title {
    font-size: 2.9rem;
    line-height: 0.95;
  }

  .services-subtitle {
    font-size: 1rem;
    line-height: 1.8;
  }

  .service-card {
    min-height: 300px;
  }

  .service-image {
    height: 180px;
  }
}

/* ==========================================
   SMALL MOBILE
   ========================================== */
@media (max-width: 480px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .services-title {
    font-size: 2.4rem;
  }

  .services-section .container {
    padding: 0 16px;
  }
}
/* Large Desktop */
@media (min-width: 1700px) {
  .services-section .container {
    max-width: 1800px;
    padding: 0 90px;
  }

  .services-title {
    font-size: 10rem;
  }
}

/* Laptop */
@media (max-width: 1400px) {
  .services-section .container {
    padding: 0 48px;
  }

  .services-title {
    font-size: clamp(4.5rem, 8vw, 7rem);
  }

  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet */
@media (max-width: 992px) {
  .services-section {
    padding: 100px 0;
  }

  .services-section .container {
    padding: 0 24px;
  }

  .services-title {
    font-size: clamp(3rem, 10vw, 5rem);
    line-height: 0.95;
  }

  .services-subtitle {
    font-size: 1.15rem;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 60px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .services-section {
    padding: 90px 0;
  }

  .services-section .container {
    padding: 0 20px;
  }

  .services-title {
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: -0.05em;
  }

  .services-subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 50px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .services-section .container {
    padding: 0 16px;
  }

  .services-title {
    font-size: 2.4rem;
  }
}
/* ======================================================
   SERVICE CARD FOOTER - SHOW MORE BUTTON
   Add this at the END of styles.css
   ====================================================== */

.service-footer {
  margin-top: auto;
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.service-footer h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}

.service-show-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FF6B35;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.service-show-more:hover {
  transform: translateX(4px);
  color: #e85d2d;
}

/* Hide old arrow if still present */
.service-arrow {
  display: none !important;
}

/* Ensure image placeholder area always has proper space */
.service-image {
  height: 230px;
  margin: 16px;
  border-radius: 24px;
  background: #f7f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* ======================================================
   HOW IT WORKS SECTION - FINAL PREMIUM ORANGE THEME
   Add this at the VERY END of styles.css
   Primary Color: #FF6B35
   Secondary Color: #FFFFFF
   ====================================================== */

.how-it-works-section {
  position: relative;
  padding: 140px 0 140px;
  background: #000000;
  overflow: hidden;
}

.how-it-works-section .container {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ==========================================
   HEADER
   ========================================== */
.how-works-header {
  max-width: 900px;
  margin-bottom: 80px;
}

.how-works-label {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FF6B35;
}

.how-works-title {
  margin: 0 0 28px;
  font-size: clamp(4.8rem, 9vw, 8rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.07em;
  color: #FFFFFF;
  max-width: 1100px;
}

.how-works-subtitle {
  margin: 0;
  max-width: 760px;
  font-size: 1.55rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================
   STEPS GRID
   ========================================== */
.how-works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  align-items: start;
}

/* ==========================================
   STEP CARD
   ========================================== */
.how-works-card {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  padding: 22px;
  background: linear-gradient(135deg, #FF6B35 0%, #ff875d 100%);
  transition: all 0.45s ease;
  box-shadow: 0 30px 80px rgba(255, 107, 53, 0.28);
}

/* Dot Pattern Overlay */
.how-works-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.22) 1.2px,
    transparent 1.2px
  );
  background-size: 22px 22px;
  pointer-events: none;
}

.how-works-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 40px 100px rgba(255, 107, 53, 0.38);
}

/* ==========================================
   IMAGE AREA
   ========================================== */
/* ==========================================
   HOW IT WORKS IMAGE AREA - FINAL PERFECT FIT
   Desktop/Laptop: Full image visible (no crop)
   Mobile: Top always visible; slight bottom crop allowed
   ========================================== */

/* IMAGE CONTAINER */
.how-works-image {
  position: relative;
  z-index: 2;
  width: 100%;

  /* Responsive height instead of fixed 720px */
  aspect-ratio: 3 / 4;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  overflow: hidden;
  margin-bottom: 36px;
  border-radius: 28px;
  background: transparent;
}

/* IMAGE */
.how-works-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: top center;

  margin: 0 auto;
  transform: none;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.18));
}

/* Large Desktop */
@media (min-width: 1600px) {
  .how-works-image {
    aspect-ratio: 3 / 4.2;
  }
}

/* Laptop */
@media (max-width: 1400px) {
  .how-works-image {
    aspect-ratio: 3 / 4;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .how-works-image {
    aspect-ratio: 3 / 4.2;
    margin-bottom: 30px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .how-works-image {
    aspect-ratio: 3 / 4.6;
    margin-bottom: 24px;
    border-radius: 24px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .how-works-image {
    aspect-ratio: 3 / 4.8;
    margin-bottom: 20px;
    border-radius: 20px;
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .how-works-image {
    aspect-ratio: 3 / 5;
  }
}
/* ==========================================
   CONTENT
   ========================================== */
.how-works-content {
  position: relative;
  z-index: 2;
  padding: 26px 8px 8px;
  color: #FFFFFF;
}

.step-number {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.how-works-content h3 {
  margin: 0 0 12px;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.how-works-content p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
/* ======================================================
   HOW IT WORKS - RESPONSIVE MEDIA QUERIES
   Replace your existing responsive media query section
   (the block you shared) with this complete code.
   This version removes all fixed heights from
   .how-works-image so the full mobile screenshot
   is visible on desktop, laptop, tablet and mobile.
   ====================================================== */

/* ==========================================
   TABLET / SMALL DESKTOP
   ========================================== */
@media (max-width: 1200px) {
  .how-works-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ==========================================
   TABLET
   ========================================== */
@media (max-width: 992px) {
  .how-it-works-section {
    padding: 100px 0;
  }

  .how-it-works-section .container {
    padding: 0 24px;
  }

  .how-works-title {
    font-size: clamp(3rem, 10vw, 5rem);
  }

  .how-works-subtitle {
    font-size: 1.15rem;
  }
}

/* ==========================================
   MOBILE
   ========================================== */
@media (max-width: 768px) {
  .how-it-works-section {
    padding: 80px 0;
  }

  .how-it-works-section .container {
    padding: 0 20px;
  }

  .how-works-title {
    font-size: 2.9rem;
    line-height: 0.95;
  }

  .how-works-subtitle {
    font-size: 1rem;
  }

  .how-works-header {
    margin-bottom: 56px;
  }

  .how-works-content h3 {
    font-size: 1.5rem;
  }
}

/* ==========================================
   SMALL MOBILE
   ========================================== */
@media (max-width: 480px) {
  .how-it-works-section .container {
    padding: 0 16px;
  }

  .how-works-title {
    font-size: 2.4rem;
  }
}

/* ======================================================
   FINAL OVERRIDE - PASTE THIS AT THE VERY END OF styles.css
   ====================================================== */

.how-works-card {
  display: flex;
  flex-direction: column;
}

.how-works-image {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  overflow: hidden;
  margin-bottom: 36px;
  border-radius: 28px;
  background: transparent;
}

.how-works-image img {
  display: block;
  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain !important;
  object-position: top center !important;

  margin: 0 auto;
  transform: none !important;

  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.18));
}

/* Force same behavior on all screen sizes */
@media (max-width: 1200px),
       (max-width: 992px),
       (max-width: 768px),
       (max-width: 480px) {
  .how-works-image {
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .how-works-image {
    margin-bottom: 30px;
    border-radius: 24px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .how-works-image {
    margin-bottom: 24px;
    border-radius: 22px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .how-works-image {
    margin-bottom: 20px;
    border-radius: 20px;
  }
}
/* ======================================================
   TESTIMONIALS SECTION
   ====================================================== */
/* ======================================================
   TESTIMONIALS SECTION - COMPLETE UPDATED VERSION
   Primary Color: #FF6B35
   Secondary Color: #FFFFFF
   ------------------------------------------------------
   Replace your ENTIRE existing testimonials CSS code
   (from .testimonials-section to the last media query)
   with this code.
   ====================================================== */

/* ==========================================
   TESTIMONIALS SECTION
   ========================================== */
.testimonials-section {
  position: relative;
  padding: 140px 0 120px;
  background: #ffffff;
  overflow: hidden;
}

.testimonials-section .container {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ==========================================
   HEADER
   ========================================== */
.testimonials-header {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 980px;
  margin-bottom: 90px;
}

.testimonials-label {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FF6B35;
}

.testimonials-title {
  display: block;
  position: relative;
  z-index: 20;
  margin: 0 0 28px;
  max-width: 1100px;

  font-size: clamp(4.8rem, 8vw, 8rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.07em;
  color: #000000;

  word-break: normal;
  overflow-wrap: break-word;
}

.testimonials-subtitle {
  margin: 0;
  max-width: 760px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #6b7280;
}

/* ==========================================
   SLIDER WRAPPER
   ========================================== */
.testimonials-slider {
  position: relative;
  z-index: 2;
  clear: both;

  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
}

/* ==========================================
   TRACK
   ========================================== */
.testimonial-track {
  display: flex;
  gap: 32px;
  width: max-content;
  will-change: transform;
}

.testimonial-track .testimonial-card {
  width: 440px;
  flex-shrink: 0;
}

/* ==========================================
   AUTO SCROLL
   ========================================== */

/* Top Row: Left → Right */
.top-track {
  animation: scrollLeftToRight 45s linear infinite;
}

/* Bottom Row: Right → Left */
.bottom-track {
  animation: scrollRightToLeft 45s linear infinite;
}

/* Pause on hover */
.testimonial-track:hover {
  animation-play-state: paused;
}

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes scrollLeftToRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes scrollRightToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================
   TESTIMONIAL CARD
   ========================================== */
.testimonial-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(255, 107, 53, 0.14);
  border-radius: 32px;
  padding: 34px;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.04);
  transition: all 0.4s ease;
  overflow: hidden;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(255, 107, 53, 0.12);
  border-color: rgba(255, 107, 53, 0.35);
}

.testimonial-card::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 120px;
  height: 80px;
  background-image: radial-gradient(
    rgba(255, 107, 53, 0.12) 1.2px,
    transparent 1.2px
  );
  background-size: 12px 12px;
  pointer-events: none;
}

/* ==========================================
   STARS
   ========================================== */
.testimonial-stars {
  color: #FF6B35;
  font-size: 1.35rem;
  letter-spacing: 4px;
  margin-bottom: 22px;
}

/* ==========================================
   REVIEW TEXT
   ========================================== */
.testimonial-text {
  position: relative;
  z-index: 2;
  margin: 0 0 32px;
  font-size: 1.35rem;
  line-height: 1.9;
  color: #374151;
}

/* ==========================================
   USER INFO
   ========================================== */
.testimonial-user {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 107, 53, 0.10);
  color: #FF6B35;
  border: 1px solid rgba(255, 107, 53, 0.18);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.2rem;
  font-weight: 800;
  flex-shrink: 0;
}

.testimonial-user h4 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.testimonial-user span {
  display: block;
  font-size: 1rem;
  color: #6b7280;
}

/* ==========================================
   LARGE DESKTOP
   ========================================== */
@media (min-width: 1800px) {
  .testimonials-section .container {
    max-width: 1800px;
    padding: 0 60px;
  }

  .testimonials-title {
    font-size: 9rem;
  }

  .testimonial-track .testimonial-card {
    width: 480px;
  }
}

/* ==========================================
   TABLET
   ========================================== */
@media (max-width: 992px) {
  .testimonials-section {
    padding: 100px 0 80px;
  }

  .testimonials-section .container {
    padding: 0 24px;
  }

  .testimonials-header {
    margin-bottom: 64px;
  }

  .testimonials-title {
    font-size: clamp(3.2rem, 10vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
  }

  .testimonials-subtitle {
    font-size: 1.15rem;
  }

  .testimonial-track .testimonial-card {
    width: 360px;
  }
}

/* ==========================================
   MOBILE
   ========================================== */
@media (max-width: 768px) {
  .testimonials-section {
    padding: 80px 0 60px;
  }

  .testimonials-section .container {
    padding: 0 20px;
  }

  .testimonials-header {
    margin-bottom: 48px;
  }

  .testimonials-title {
    font-size: 2.9rem;
    line-height: 0.95;
    letter-spacing: -0.04em;
  }

  .testimonials-subtitle {
    font-size: 1rem;
    line-height: 1.8;
  }

  .testimonials-slider {
    gap: 24px;
  }

  .testimonial-track {
    gap: 24px;
  }

  .testimonial-track .testimonial-card {
    width: 320px;
  }

  .testimonial-card {
    padding: 28px;
    border-radius: 24px;
  }

  .testimonial-text {
    font-size: 1.05rem;
    line-height: 1.8;
  }

  .testimonial-user h4 {
    font-size: 1.1rem;
  }

  .testimonial-user span {
    font-size: 0.95rem;
  }
}

/* ==========================================
   SMALL MOBILE
   ========================================== */
@media (max-width: 480px) {
  .testimonials-section .container {
    padding: 0 16px;
  }

  .testimonials-title {
    font-size: 2.4rem;
  }

  .testimonial-track .testimonial-card {
    width: 280px;
  }

  .testimonial-avatar {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
}
/* ======================================================
   TESTIMONIAL HEADER FIX
   ------------------------------------------------------
   Add this code at the VERY END of your styles.css file.
   Do NOT replace anything else.
   This will:
   - Force the heading to appear above the slider
   - Add enough spacing between heading and cards
   - Prevent cards from overlapping the title
   - Keep your orange (#FF6B35) + white theme
   ====================================================== */

/* ==========================================
   TESTIMONIALS SECTION
   ========================================== */
.testimonials-section {
  position: relative;
  padding: 140px 0 120px;
  background: #ffffff;
  overflow: hidden;
}

/* ==========================================
   CONTAINER
   ========================================== */
.testimonials-section .container {
  position: relative;
  z-index: 10;
}

/* ==========================================
   HEADER (FORCE TO SHOW ABOVE CARDS)
   ========================================== */
.testimonials-header {
  position: relative;
  z-index: 100;
  display: block;
  width: 100%;
  max-width: 980px;
  margin-bottom: 110px; /* Large space below heading */
  pointer-events: auto;
}

/* Small label */
.testimonials-label {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FF6B35;
}

/* Main title */
.testimonials-title {
  display: block;
  position: relative;
  z-index: 101;

  margin: 0 0 28px;
  max-width: 1100px;

  font-size: clamp(4.8rem, 8vw, 8rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.07em;
  color: #000000;

  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Subtitle */
.testimonials-subtitle {
  display: block;
  margin: 0;
  max-width: 760px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #6b7280;
}

/* ==========================================
   SLIDER POSITION
   ========================================== */
.testimonials-slider {
  position: relative;
  z-index: 1; /* Lower than header */
  margin-top: 0;
  overflow: hidden;
}

/* ==========================================
   TABLET
   ========================================== */
@media (max-width: 992px) {
  .testimonials-header {
    margin-bottom: 72px;
  }

  .testimonials-title {
    font-size: clamp(3.2rem, 10vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
  }

  .testimonials-subtitle {
    font-size: 1.15rem;
  }
}

/* ==========================================
   MOBILE
   ========================================== */
@media (max-width: 768px) {
  .testimonials-header {
    margin-bottom: 56px;
  }

  .testimonials-title {
    font-size: 2.9rem;
    line-height: 0.95;
    letter-spacing: -0.04em;
  }

  .testimonials-subtitle {
    font-size: 1rem;
    line-height: 1.8;
  }
}

/* ==========================================
   SMALL MOBILE
   ========================================== */
@media (max-width: 480px) {
  .testimonials-title {
    font-size: 2.4rem;
  }
}
/* ======================================================
   FAQ SECTION
   Add this code at the VERY END of styles.css
   ====================================================== */

.faq-section {
  position: relative;
  padding: 140px 0 120px;
  background: #ffffff;
  overflow: hidden;
}

/* Soft background glow */
.faq-section::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(255, 107, 53, 0.08) 0%,
    rgba(255, 107, 53, 0) 70%
  );
  border-radius: 50%;
  pointer-events: none;
}

.faq-section .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ==========================================
   HEADER
   ========================================== */
.faq-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 80px;
}

.faq-label {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FF6B35;
}

.faq-title {
  margin: 0;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: #000000;
}

/* ==========================================
   FAQ LIST
   ========================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ==========================================
   FAQ ITEM
   ========================================== */
.faq-item {
  background: #ffffff;
  border: 1px solid rgba(255, 107, 53, 0.12);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.04);
  overflow: hidden;
  transition: all 0.4s ease;
}

.faq-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(255, 107, 53, 0.10);
  border-color: rgba(255, 107, 53, 0.25);
}

/* Active item */
.faq-item[open] {
  border-color: rgba(255, 107, 53, 0.30);
  box-shadow: 0 25px 60px rgba(255, 107, 53, 0.12);
}

/* ==========================================
   QUESTION
   ========================================== */
.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 34px 42px;
  font-size: 1.75rem;
  font-weight: 700;
  color: #111827;
}

.faq-question::-webkit-details-marker {
  display: none;
}

/* Icon */
.faq-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 107, 53, 0.08);
  color: #FF6B35;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 600;
  transition: all 0.35s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  background: #FF6B35;
  color: #ffffff;
}

/* ==========================================
   ANSWER
   ========================================== */
.faq-answer {
  padding: 0 42px 38px;
  font-size: 1.18rem;
  line-height: 2;
  color: #6b7280;
  max-width: 92%;
  animation: fadeInFAQ 0.35s ease;
}

@keyframes fadeInFAQ {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   TABLET
   ========================================== */
@media (max-width: 992px) {
  .faq-section {
    padding: 100px 0 80px;
  }

  .faq-section .container {
    padding: 0 24px;
  }

  .faq-title {
    font-size: clamp(3rem, 10vw, 5rem);
  }

  .faq-question {
    padding: 28px 28px;
    font-size: 1.35rem;
  }

  .faq-answer {
    padding: 0 28px 28px;
    font-size: 1rem;
    line-height: 1.9;
    max-width: 100%;
  }

  .faq-icon {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
}

/* ==========================================
   MOBILE
   ========================================== */
@media (max-width: 768px) {
  .faq-section {
    padding: 80px 0 60px;
  }

  .faq-section .container {
    padding: 0 20px;
  }

  .faq-header {
    margin-bottom: 56px;
  }

  .faq-title {
    font-size: 2.8rem;
    line-height: 0.95;
  }

  .faq-question {
    padding: 22px 22px;
    font-size: 1.05rem;
    gap: 16px;
  }

  .faq-answer {
    padding: 0 22px 24px;
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .faq-item {
    border-radius: 22px;
  }

  .faq-icon {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }
}
/* ======================================================
   DOWNLOAD APP SECTION
   Add this code at the END of styles.css
====================================================== */

.download-app-section {
  position: relative;
  padding: 120px 0 140px;
  background: #ffffff;
  overflow: hidden;
}

.download-app-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 107, 53, 0.05), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(255, 107, 53, 0.06), transparent 30%);
  pointer-events: none;
}

.download-app-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 48px;
}

.download-app-image-wrapper {
  position: relative;
  margin-bottom: -40px;
  border-radius: 48px 48px 0 0;
  background: linear-gradient(135deg, #fff7f2 0%, #fff1ea 100%);
  overflow: hidden;
  text-align: center;
  padding: 60px 40px 0;
  box-shadow:
    0 30px 80px rgba(255, 107, 53, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.download-app-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 107, 53, 0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.35;
  pointer-events: none;
}

.download-app-image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 35px 80px rgba(0, 0, 0, 0.15));
  animation: floatPhones 6s ease-in-out infinite;
}

@keyframes floatPhones {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

.download-app-content {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  max-width: 1400px;
  text-align: center;
  padding: 90px 40px 0;
}

.download-app-title {
  margin: 0 0 28px;
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.07em;
  color: #000000;
}

.download-app-subtitle {
  margin: 0 auto 48px;
  max-width: 900px;
  font-size: 1.65rem;
  line-height: 1.8;
  color: #6b7280;
}

.download-app-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  background: #FF6B35;
  color: #ffffff;
  text-decoration: none;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(255, 107, 53, 0.25);
  transition: all 0.35s ease;
}

.store-btn:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 28px 60px rgba(255, 107, 53, 0.35);
}

.store-icon {
  font-size: 2rem;
  line-height: 1;
}

.store-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.store-text small {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.85;
  line-height: 1;
  margin-bottom: 4px;
}

.store-text strong {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

/* ==========================================
   TABLET
========================================== */
@media (max-width: 992px) {
  .download-app-container {
    padding: 0 24px;
  }

  .download-app-image-wrapper {
    border-radius: 36px 36px 0 0;
    padding: 40px 20px 0;
  }

  .download-app-content {
    padding: 70px 20px 0;
  }

  .download-app-title {
    font-size: clamp(3rem, 10vw, 5.5rem);
  }

  .download-app-subtitle {
    font-size: 1.15rem;
  }
}

/* ==========================================
   MOBILE
========================================== */
@media (max-width: 768px) {
  .download-app-section {
    padding: 80px 0 100px;
  }

  .download-app-container {
    padding: 0 20px;
  }

  .download-app-image-wrapper {
    border-radius: 28px 28px 0 0;
    padding: 30px 12px 0;
    margin-bottom: -20px;
  }

  .download-app-content {
    padding: 50px 10px 0;
  }

  .download-app-title {
    font-size: 2.7rem;
    line-height: 0.95;
  }

  .download-app-subtitle {
    font-size: 1rem;
    margin-bottom: 32px;
  }

  .download-app-buttons {
    flex-direction: column;
    gap: 16px;
  }

  .store-btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .store-text {
    align-items: center;
    text-align: center;
  }
}
/* ======================================================
   SERVICE CARD IMAGE FULL FIT FIX
   ------------------------------------------------------
   Paste this code at the VERY END of styles.css
   This will ensure all service images are fully visible
   inside the card on Desktop, Tablet, and Mobile.
   ====================================================== */

/* ==========================================
   SERVICE CARD
   ========================================== */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ==========================================
   IMAGE CONTAINER
   ========================================== */
.service-image {
  position: relative;
  width: calc(100% - 32px);
  margin: 16px;
  height: 230px;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px;
}

/* ==========================================
   IMAGE
   ========================================== */
.service-image img {
  width: 100%;
  height: 100%;
  display: block;

  /* Show the complete image without cropping */
  object-fit: contain;
  object-position: center center;

  transition: transform 0.6s ease;
}

/* ==========================================
   HOVER EFFECT
   ========================================== */
.service-card:hover .service-image img {
  transform: scale(1.05);
}

/* ==========================================
   FOOTER
   ========================================== */
.service-footer {
  margin-top: auto;
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.service-footer h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}

.service-show-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FF6B35;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.service-show-more:hover {
  transform: translateX(4px);
  color: #E85A1F;
}

/* ==========================================
   LARGE DESKTOP
   ========================================== */
@media (min-width: 1800px) {
  .service-image {
    height: 260px;
    padding: 16px;
  }
}

/* ==========================================
   LAPTOP
   ========================================== */
@media (max-width: 1200px) {
  .service-image {
    height: 210px;
    padding: 12px;
  }
}

/* ==========================================
   TABLET
   ========================================== */
@media (max-width: 992px) {
  .service-image {
    height: 190px;
    padding: 10px;
    border-radius: 22px;
  }

  .service-footer {
    padding: 0 18px 18px;
  }

  .service-footer h3 {
    font-size: 1rem;
  }

  .service-show-more {
    font-size: 0.9rem;
  }
}

/* ==========================================
   MOBILE
   ========================================== */
@media (max-width: 768px) {
  .service-image {
    height: 180px;
    margin: 12px;
    width: calc(100% - 24px);
    padding: 10px;
    border-radius: 20px;
  }

  .service-footer {
    padding: 0 16px 16px;
    gap: 10px;
  }

  .service-footer h3 {
    font-size: 0.95rem;
    line-height: 1.3;
  }

  .service-show-more {
    font-size: 0.85rem;
  }
}

/* ==========================================
   SMALL MOBILE
   ========================================== */
@media (max-width: 480px) {
  .service-image {
    height: 200px;
    margin: 10px;
    width: calc(100% - 20px);
    padding: 12px;
    border-radius: 18px;
  }

  .service-footer {
    padding: 0 14px 14px;
  }

  .service-footer h3 {
    font-size: 1rem;
  }

  .service-show-more {
    font-size: 0.9rem;
  }
}
/* ==========================================
   HOW WORKS IMAGE AUTO SLIDER - FULL UPDATED CODE
   Replace your COMPLETE existing
   .how-works-image / .how-works-slider /
   .how-works-slide CSS with this code.
   ========================================== */

.how-works-image {
  position: relative;
  width: 100%;
  height: 620px; /* Large image area like your design */
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 42px;
  background: transparent;
  z-index: 2;
}

/* ==========================================
   SLIDER WRAPPER
   ========================================== */
.how-works-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Add this class in HTML:
   <div class="how-works-slider auto-slide">
*/
.how-works-slider.auto-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ==========================================
   EACH SLIDE
   ========================================== */
.how-works-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;

  /* Smooth zoom effect */
  transform: scale(0.98);

  /* Prevent flicker */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity, transform;
}

/* First image visible if auto-slide class is not used */
.how-works-slide:first-child {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* ==========================================
   IMAGE SETTINGS
   ========================================== */
.how-works-slide img {
  width: 100%;
  height: 100%;
  display: block;

  /* Show full screenshot without cropping */
  object-fit: contain;
  object-position: center center;

  /* Premium shadow */
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.18));

  /* Better rendering */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ==========================================
   FADE ANIMATION
   ========================================== */
@keyframes howWorksFade {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
  }

  5% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  45% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
  }

  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
  }
}

/* ==========================================
   TWO IMAGES (8 SECONDS TOTAL)
   Use:
   <div class="how-works-slider auto-slide">
   ========================================== */
.how-works-slider.auto-slide .how-works-slide {
  opacity: 0 !important;
  visibility: hidden !important;
}

.how-works-slider.auto-slide .how-works-slide:nth-child(1) {
  animation: howWorksFade 8s infinite;
}

.how-works-slider.auto-slide .how-works-slide:nth-child(2) {
  animation: howWorksFade 8s infinite 4s;
}

/* ==========================================
   THREE IMAGES (12 SECONDS TOTAL)
   Use:
   <div class="how-works-slider auto-slide three-slides">
   ========================================== */
.how-works-slider.auto-slide.three-slides .how-works-slide:nth-child(1) {
  animation: howWorksFade 12s infinite;
}

.how-works-slider.auto-slide.three-slides .how-works-slide:nth-child(2) {
  animation: howWorksFade 12s infinite 4s;
}

.how-works-slider.auto-slide.three-slides .how-works-slide:nth-child(3) {
  animation: howWorksFade 12s infinite 8s;
}

/* ==========================================
   FOUR IMAGES (16 SECONDS TOTAL)
   Use:
   <div class="how-works-slider auto-slide four-slides">
   ========================================== */
.how-works-slider.auto-slide.four-slides .how-works-slide:nth-child(1) {
  animation: howWorksFade 16s infinite;
}

.how-works-slider.auto-slide.four-slides .how-works-slide:nth-child(2) {
  animation: howWorksFade 16s infinite 4s;
}

.how-works-slider.auto-slide.four-slides .how-works-slide:nth-child(3) {
  animation: howWorksFade 16s infinite 8s;
}

.how-works-slider.auto-slide.four-slides .how-works-slide:nth-child(4) {
  animation: howWorksFade 16s infinite 12s;
}

/* ==========================================
   PAUSE ANIMATION ON HOVER
   ========================================== */
.how-works-card:hover .how-works-slide {
  animation-play-state: paused;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1200px) {
  .how-works-image {
    height: 520px;
  }
}

@media (max-width: 992px) {
  .how-works-image {
    height: 460px;
    margin-bottom: 32px;
  }
}

@media (max-width: 768px) {
  .how-works-image {
    height: 380px;
    border-radius: 20px;
    margin-bottom: 28px;
  }
}

@media (max-width: 480px) {
  .how-works-image {
    height: 300px;
    border-radius: 18px;
    margin-bottom: 24px;
  }
}
/* ======================================================
   HOW IT WORKS IMAGE SLIDER - FINAL WORKING CSS
   Add this at the VERY END of styles.css
   ====================================================== */

/* Image container */
.how-works-image {
  position: relative;
  width: 100%;
  height: 620px;
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
  z-index: 2;
}

/* Slider wrapper */
.how-works-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Each slide */
.how-works-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none; /* Hidden by default */
}

/* First slide visible initially */
.how-works-slide:first-child {
  display: block;
}

/* Images */
.how-works-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
}

/* Responsive */
@media (max-width: 1200px) {
  .how-works-image {
    height: 520px;
  }
}

@media (max-width: 992px) {
  .how-works-image {
    height: 460px;
  }
}

@media (max-width: 768px) {
  .how-works-image {
    height: 380px;
    border-radius: 20px;
  }
}

@media (max-width: 480px) {
  .how-works-image {
    height: 300px;
    border-radius: 18px;
  }
}
/* ==========================================
   COLLABLY PREMIUM NAVBAR LOGO
   Add this code to styles.css
   Replace any old .logo styles with this
   ========================================== */

.logo.collably-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  position: relative;
  z-index: 1001;
}

/* Icon Container */
.collably-logo-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: collablyFloat 4s ease-in-out infinite;
}
.collably-logo-icon img {
  display: block;
  width: auto;
  height: 220px;       /* Increase logo height */
  max-width: 900px;    /* Increase maximum width */
  object-fit: contain;
  transition: transform 0.35s ease;
}


/* Text Container */
.collably-logo-text {
  display: flex;
  align-items: center;
}

.collably-logo-text img {
  height: 46px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: all 0.4s ease;
}

/* Hover Effects */
.logo.collably-logo:hover .collably-logo-text img {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 8px 20px rgba(255, 107, 53, 0.15));
}

.logo.collably-logo:hover .collably-logo-icon {
  transform: rotate(-4deg) scale(1.05);
}

/* Floating Animation */
@keyframes collablyFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Tablet */
@media (max-width: 992px) {
  .collably-logo-icon {
    width: 48px;
    height: 48px;
  }

  .collably-logo-text img {
    height: 40px;
  }

  .logo.collably-logo {
    gap: 10px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .collably-logo-icon {
    width: 42px;
    height: 42px;
  }

  .collably-logo-text img {
    height: 34px;
  }

  .logo.collably-logo {
    gap: 8px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .collably-logo-icon {
    width: 38px;
    height: 38px;
  }

  .collably-logo-text img {
    height: 30px;
  }
}
/* ==========================================
   HOW IT WORKS - FULL IMAGE FIT
   Paste this at the VERY END of styles.css
   Ensures each screenshot fills the orange card
   properly without appearing too small.
   ========================================== */

/* Image container inside each orange step card */
.how-works-image {
  position: relative;
  width: 100%;
  height: 620px;              /* Large display area */
  margin-bottom: 42px;
  border-radius: 24px;
  overflow: hidden;
  background: transparent;
}

/* Slider wrapper */
.how-works-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Each slide */
.how-works-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

/* IMPORTANT: Make image occupy most of the card */
.how-works-slide img {
  display: block;
  width: 100%;
  height: 100%;

  /* Scale image to occupy maximum available space */
  object-fit: contain;
  object-position: center top;

  /* Slight upscale so screenshots look larger */
  transform: scale(1.15);

  /* Nice shadow */
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.18));
}

/* Desktop Large Screens */
@media (min-width: 1400px) {
  .how-works-image {
    height: 700px;
  }

  .how-works-slide img {
    transform: scale(1.22);
  }
}

/* Laptop */
@media (max-width: 1200px) {
  .how-works-image {
    height: 560px;
  }

  .how-works-slide img {
    transform: scale(1.12);
  }
}

/* Tablet */
@media (max-width: 992px) {
  .how-works-image {
    height: 500px;
    margin-bottom: 34px;
  }

  .how-works-slide img {
    transform: scale(1.08);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .how-works-image {
    height: 420px;
    margin-bottom: 28px;
    border-radius: 20px;
  }

  .how-works-slide img {
    transform: scale(1.05);
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .how-works-image {
    height: 340px;
    margin-bottom: 24px;
    border-radius: 18px;
  }

  .how-works-slide img {
    transform: scale(1.02);
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .how-works-image {
    height: 300px;
  }

  .how-works-slide img {
    transform: scale(1);
  }
}

/* ======================================================
   FINAL PERFECT PHONE MOCKUP SPACING
   Paste this at the VERY END of styles.css
   This makes:
   - Equal top and bottom spacing
   - Equal left and right spacing
   - Same margin on all cards
   - Same phone size in every card
   - Full image visible without distortion
   ====================================================== */

/* Card container */
.how-works-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
}

/* Phone image wrapper */
.how-works-image {
  position: relative;
  z-index: 2;

  width: 100%;

  /* Same phone proportion as your reference image */
  aspect-ratio: 9 / 16 !important;

  /* Equal spacing on all sides */
  padding: 18px !important;

  /* Equal top and bottom margin */
  margin: 0 0 36px 0 !important;

  border-radius: 28px;
  overflow: hidden;
  background: transparent;

  display: flex;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;
}

/* Actual phone image */
.how-works-image img {
  display: block;

  /* Keep same phone size */
  width: 100%;
  height: 100%;

  /* Show complete phone */
  object-fit: contain !important;

  /* Perfect center alignment */
  object-position: center center !important;

  /* Remove any old transforms */
  transform: none !important;
  margin: 0 auto;

  max-width: 100%;
  max-height: 100%;

  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.18));
}

/* Content spacing */
.how-works-content {
  position: relative;
  z-index: 2;
  padding: 0 8px 8px;
}

/* ======================================================
   LARGE DESKTOP
   ====================================================== */
@media (min-width: 1700px) {
  .how-works-image {
    padding: 22px !important;
    margin-bottom: 40px !important;
  }
}

/* ======================================================
   LAPTOP
   ====================================================== */
@media (max-width: 1400px) {
  .how-works-image {
    padding: 18px !important;
    margin-bottom: 34px !important;
  }
}

/* ======================================================
   TABLET
   ====================================================== */
@media (max-width: 992px) {
  .how-works-image {
    padding: 16px !important;
    margin-bottom: 30px !important;
    border-radius: 24px;
  }
}

/* ======================================================
   MOBILE
   ====================================================== */
@media (max-width: 768px) {
  .how-works-image {
    padding: 14px !important;
    margin-bottom: 24px !important;
    border-radius: 22px;
  }
}

/* ======================================================
   SMALL MOBILE
   ====================================================== */
@media (max-width: 480px) {
  .how-works-image {
    padding: 12px !important;
    margin-bottom: 20px !important;
    border-radius: 20px;
  }
}
/* ======================================================
 /* ======================================================
   MOBILE APP DOWNLOAD BUTTONS - COMPACT PERFECT WIDTH
   Replace your existing mobile CSS for .app-downloads
   and .store-badge with this code.
   ====================================================== */

@media (max-width: 768px) {
  /* Wrapper */
  .app-downloads {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;

    width: 100% !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Store Buttons */
  .store-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    /* Compact width based on content */
    width: fit-content !important;
    min-width: 340px !important;
    max-width: 380px !important;

    margin: 0 auto !important;
    padding: 14px 34px !important;

    box-sizing: border-box !important;
    border-radius: 18px !important;
  }

  /* Text Container */
  .store-text,
  .store-badge-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* Small Text */
  .store-small,
  .store-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  /* Main Store Name */
  .store-name {
    font-size: 1.18rem !important;
    line-height: 1.1 !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .store-badge {
    min-width: 300px !important;
    max-width: 330px !important;
    padding: 13px 28px !important;
    border-radius: 16px !important;
  }

  .store-name {
    font-size: 1.08rem !important;
  }

  .store-small,
  .store-subtitle {
    font-size: 0.72rem !important;
  }
}
/* ======================================================
   WHY US ICON IMAGES
   Paste this at the VERY END of styles.css
   ====================================================== */

/* Circular Icon Background */
.why-stat-icon {
  position: relative;
  z-index: 2;

  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;

  border-radius: 50%;
  background: #fff7f3;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
  overflow: hidden;
}

/* Image Inside Icon */
.why-stat-icon img {
  display: block;

  width: 42px;
  height: 42px;

  object-fit: contain;
  object-position: center;

  max-width: 100%;
  max-height: 100%;
}

/* Tablet */
@media (max-width: 768px) {
  .why-stat-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
  }

  .why-stat-icon img {
    width: 34px;
    height: 34px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .why-stat-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
  }

  .why-stat-icon img {
    width: 30px;
    height: 30px;
  }
}
/* ==========================================
   FINAL COLLABLY LOGO FIX
   Works perfectly on Desktop, Tablet, Mobile
   ========================================== */

/* Logo container */
.logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

/* Logo image */
.logo img {
  display: block !important;
  width: auto !important;

  /* Balanced height */
  height: 38px !important;
  max-height: 38px !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;

  /* Reset all previous offsets */
  position: relative !important;
  top: 2px !important;              /* Move image slightly downward */

  transform: none !important;
  vertical-align: middle !important;
  align-self: center !important;
  flex-shrink: 0;
}


/* Hide any old text-based logo */
.logo-icon,
.logo-text {
  display: none !important;
}

/* =========================
   Desktop Large
   ========================= */
@media (min-width: 1600px) {
  .logo img {
    height: 42px !important;
    max-height: 42px !important;
    top: 2px !important;
  }
}
/* =========================
   Laptop
   ========================= */
@media (max-width: 1200px) {
  .logo {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }
}

/* =========================
   Tablet
   ========================= *//* Tablet */
@media (max-width: 992px) {
  .logo img {
    height: 36px !important;
    max-height: 36px !important;
    top: 2px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .logo img {
    height: 32px !important;
    max-height: 32px !important;
    top: 1px !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .logo img {
    height: 30px !important;
    max-height: 30px !important;
    top: 1px !important;
  }
}
/* =========================
   Extra Small Mobile
   ========================= */
@media (max-width: 360px) {
  .logo {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }
}
/* ======================================================
   PERFECT NAVBAR + HERO OVERLAP FIX
   Desktop and Mobile both work correctly
   Paste this at the VERY END of styles.css
   ====================================================== */

/* Desktop */
.hero {
  margin-top: 0 !important;
  padding-top: 150px !important;
  padding-bottom: 80px !important;
}

/* Tablet */
@media (max-width: 992px) {
  .hero {
    margin-top: 0 !important;
    padding-top: 140px !important;
    padding-bottom: 70px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    margin-top: 0 !important;
    padding-top: 170px !important; /* Increased to prevent navbar collision */
    padding-bottom: 60px !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero {
    margin-top: 0 !important;
    padding-top: 190px !important; /* Extra space for logo + hamburger */
    padding-bottom: 50px !important;
  }
}

/* Very Small Devices */
@media (max-width: 360px) {
  .hero {
    padding-top: 210px !important;
  }
}

/* Remove any extra top margins from hero children */
.hero-grid,
.hero-content,
.hero-visual,
.hero-image-wrapper {
  margin-top: 0 !important;
}
/* ======================================================
   DESKTOP ONLY FIX FOR NAVBAR + HERO COLLISION
   ------------------------------------------------------
   IMPORTANT:
   1. Keep all your current mobile/tablet fixes as they are.
   2. Paste ONLY this code at the VERY END of styles.css.
   3. This affects desktop screens only (993px and above).
   ====================================================== */

@media (min-width: 993px) {
  /* Fixed navbar height on desktop */
  .nav-wrapper,
  .navbar {
    min-height: 104px !important;
  }

  /* Push hero section exactly below navbar */
  .hero {
    margin-top: 104px !important;   /* Navbar ke niche start */
    padding-top: 40px !important;   /* Hero content ke liye internal spacing */
    min-height: calc(100vh - 104px) !important;
  }

  /* Prevent any child elements from moving upward */
  .hero-grid,
  .hero-content,
  .hero-visual,
  .hero-image-wrapper,
  .hero-image {
    margin-top: 0 !important;
    top: auto !important;
    transform: none !important;
  }
}
/* ======================================================
   FINAL HERO + NAVBAR SPACING FIX
   Prevents navbar and hero overlap on all screen sizes
   ====================================================== */

.hero {
  position: relative;
  min-height: calc(100vh - 104px);
  margin-top: 104px;
  padding: 40px 0 80px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf7 100%);
  overflow: hidden;
}

/* Large Desktop */
@media (min-width: 1700px) {
  .hero {
    margin-top: 112px;
    min-height: calc(100vh - 112px);
  }
}

/* Laptop */
@media (max-width: 1200px) {
  .hero {
    margin-top: 92px;
    min-height: calc(100vh - 92px);
    padding: 40px 0 70px;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .hero {
    margin-top: 82px;
    min-height: calc(100vh - 82px);
    padding: 30px 0 60px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    margin-top: 76px;
    min-height: calc(100vh - 76px);
    padding: 24px 0 50px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero {
    margin-top: 76px;
    min-height: calc(100vh - 76px);
    padding: 20px 0 40px;
  }
}/* ==========================================
   FINAL NAVBAR + HERO SPACING FIX
   ========================================== */

/* Desktop */
@media (min-width: 993px) {
  .hero {
    padding-top: 180px !important;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .hero {
    padding-top: 130px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    padding-top: 110px !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero {
    padding-top: 100px !important;
  }
}
/* ==========================================
   STOP HERO IMAGE FLOATING ANIMATION
   ========================================== */
.hero-image-wrapper,
.hero-image {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
/* ==========================================
   MOBILE HERO TOP SPACING FIX
   ------------------------------------------------
   Navbar aur Home Hero image ke beech extra space
   dene ke liye ye code styles.css ke bilkul END
   (last line) par paste karein.
   ========================================== */

@media (max-width: 768px) {
  /* Home section ko thoda neeche push kare */
  .hero {
    padding-top: 130px !important;   /* Increase top spacing */
    margin-top: 0 !important;
  }

  /* Hero image ko bhi thoda neeche move kare */
  .hero-visual {
    margin-top: 24px !important;
  }

  .hero-image-wrapper {
    margin-top: 24px !important;
    transform: none !important;
  }

  /* Ensure image is fully visible */
  .hero-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: top center !important;
    transform: none !important;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .hero {
    padding-top: 145px !important;   /* Extra spacing for smaller screens */
  }

  .hero-visual,
  .hero-image-wrapper {
    margin-top: 28px !important;
  }
}
/* ==========================================================
   PRONTO EXACT NAVBAR MATCH
   ----------------------------------------------------------
   Paste this COMPLETE code at the VERY END of styles.css
   ========================================================== */

/* NAVBAR OUTER BAR */
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;

  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;

  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* INNER CONTAINER */
.nav-wrapper {
  width: 100% !important;
  max-width: 1536px !important;      /* Same wide layout feel as Pronto */
  margin: 0 auto !important;
  padding: 0 32px !important;

  /* Exact compact navbar height */
  height: 64px !important;
  min-height: 64px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

/* LOGO CONTAINER */
.logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;

  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* LOGO IMAGE */
.logo img {
  display: block !important;
  width: auto !important;

  /* Balanced size for 64px navbar */
  height: 30px !important;
  max-height: 30px !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;
  transform: none !important;
  align-self: center !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* NAVIGATION MENU */
.nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;

  list-style: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}

.nav-menu li {
  margin: 0 !important;
  padding: 0 !important;
}

.nav-menu a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 64px !important;
  padding: 0 !important;

  font-size: 1rem !important;       /* Very close to Pronto */
  font-weight: 700 !important;
  line-height: 1 !important;

  color: #0f172a !important;
  text-decoration: none !important;
}

/* =========================
   LARGE DESKTOP (1600px+)
   ========================= */
@media (min-width: 1600px) {
  .nav-wrapper {
    max-width: 1600px !important;
    padding: 0 40px !important;
    height: 66px !important;
    min-height: 66px !important;
  }

  .logo {
    height: 66px !important;
  }

  .logo img {
    height: 31px !important;
    max-height: 31px !important;
  }

  .nav-menu a {
    height: 66px !important;
  }
}

/* =========================
   TABLET
   ========================= */
@media (max-width: 992px) {
  .nav-wrapper {
    padding: 0 24px !important;
    height: 60px !important;
    min-height: 60px !important;
  }

  .logo {
    height: 60px !important;
  }

  .logo img {
    height: 28px !important;
    max-height: 28px !important;
  }

  .nav-menu {
    top: 60px !important;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {
  .nav-wrapper {
    padding: 0 20px !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  .logo {
    height: 56px !important;
  }

  .logo img {
    height: 26px !important;
    max-height: 26px !important;
  }

  .nav-menu {
    top: 56px !important;
  }
}

/* =========================
   SMALL MOBILE
   ========================= */
@media (max-width: 480px) {
  .nav-wrapper {
    padding: 0 16px !important;
    height: 54px !important;
    min-height: 54px !important;
  }

  .logo {
    height: 54px !important;
  }

  .logo img {
    height: 24px !important;
    max-height: 24px !important;
  }

  .nav-menu {
    top: 54px !important;
  }
}
/* ==========================================================
   DESKTOP NAVBAR HEIGHT - PREMIUM SIZE
   ----------------------------------------------------------
   Paste this code at the VERY END of styles.css.
   Slightly taller than before for a more balanced look.
   Mobile navbar remains unchanged.
   ========================================================== */

/* Desktop & Laptop */
@media (min-width: 769px) {
  .navbar {
    height: 68px !important;
    min-height: 68px !important;
  }

  .nav-wrapper {
    max-width: 1536px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;

    height: 68px !important;
    min-height: 68px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .logo {
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
  }

  .logo img {
    height: 30px !important;
    max-height: 30px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-menu a {
    height: 68px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
}

/* Very Large Screens */
@media (min-width: 1600px) {
  .navbar {
    height: 70px !important;
    min-height: 70px !important;
  }

  .nav-wrapper {
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 40px !important;
  }

  .logo {
    height: 70px !important;
  }

  .logo img {
    height: 31px !important;
    max-height: 31px !important;
  }

  .nav-menu a {
    height: 70px !important;
  }
}
/* ==========================================================
   INCREASE NAVBAR CONTAINER WIDTH
   ----------------------------------------------------------
   Paste this code at the VERY END of styles.css.
   This moves the logo slightly left and the menu slightly
   right so the navbar aligns better with the page layout.
   ========================================================== */

/* Desktop & Laptop */
@media (min-width: 769px) {
  .nav-wrapper {
    /* Increase usable width */
    max-width: 1720px !important;

    /* Reduce side padding so content spreads outward */
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* Large Desktop */
@media (min-width: 1600px) {
  .nav-wrapper {
    max-width: 1840px !important;
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .nav-wrapper {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nav-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .nav-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* ==========================================================
   SMALL GAP BETWEEN NAVBAR AND HERO
   ----------------------------------------------------------
   Paste this code at the VERY END of styles.css.
   Adds a subtle premium gap between the navbar and the
   "Trusted by 500,000+ homes" badge.
   ========================================================== */

/* Desktop & Laptop */
@media (min-width: 769px) {
  .hero {
    margin-top: 84px !important; /* 68px navbar + 16px elegant gap */
    padding-top: 0 !important;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .hero {
    margin-top: 76px !important; /* 60px navbar + 16px gap */
    padding-top: 0 !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    margin-top: 72px !important; /* 56px navbar + 16px gap */
    padding-top: 0 !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero {
    margin-top: 70px !important; /* 54px navbar + 16px gap */
    padding-top: 0 !important;
  }
}

/* Remove any extra top spacing from inner hero elements */
.hero-container,
.hero-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ==========================================================
   REMOVE EMPTY SPACE BELOW NAVBAR ON MOBILE
   ----------------------------------------------------------
   Paste this code at the VERY END of styles.css.
   This removes the blank area between the navbar and the
   hero image so the image starts immediately below navbar.
   ========================================================== */

@media (max-width: 768px) {
  /* Hero section starts exactly below navbar */
  .hero,
  .hero-section {
    margin-top: 56px !important;     /* Same as mobile navbar height */
    padding-top: 0 !important;
    min-height: auto !important;
  }

  /* Remove top spacing from all hero wrappers */
  .hero-container,
  .hero-image-wrapper,
  .hero-image-container,
  .hero-image,
  .hero-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Show image first */
  .hero-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    row-gap: 0 !important;
    align-items: stretch !important;
  }

  .hero-image {
    order: 1 !important;
    min-height: auto !important;
    height: auto !important;
  }

  .hero-content {
    order: 2 !important;
  }

  /* Remove spacing above the image itself */
  .hero-image img {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero,
  .hero-section {
    margin-top: 54px !important;
    padding-top: 0 !important;
  }

  .hero-image img {
    max-width: 360px !important;
  }
}
/* ==========================================================
   MOBILE ONLY HERO LAYOUT (COMPLETE FIX)
   ----------------------------------------------------------
   Features:
   1. Navbar ke niche Pronto jaisa small gap
   2. "Trusted by..." badge sabse pehle
   3. Heading, text, buttons uske baad
   4. Hero image sab content ke baad sabse niche
   5. Mobile screens (768px and below) only
   ----------------------------------------------------------
   Paste this COMPLETE code at the VERY END of styles.css
   ========================================================== */

@media (max-width: 768px) {
  /* --------------------------------------
     Hero Section Spacing
  -------------------------------------- */
  .hero,
  .home-hero,
  .hero-section {
    padding-top: 24px !important;   /* Navbar ke niche Pronto jaisa gap */
    padding-bottom: 40px !important;
    margin-top: 0 !important;
    min-height: auto !important;
  }

  /* --------------------------------------
     Main Hero Container
  -------------------------------------- */
  .hero .container,
  .hero-container,
  .hero-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* --------------------------------------
     Content Section First
  -------------------------------------- */
  .hero-content,
  .hero-text,
  .hero-left {
    order: 1 !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Remove top margin from first child */
  .hero-content > :first-child,
  .hero-text > :first-child,
  .hero-left > :first-child {
    margin-top: 0 !important;
  }

  /* --------------------------------------
     Trusted Badge Spacing
  -------------------------------------- */
  .hero-badge,
  .trust-badge,
  .trusted-badge {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  /* --------------------------------------
     CTA Button Full Width Style
  -------------------------------------- */
  .hero-cta,
  .hero-content .btn-primary,
  .hero-content .btn-outline {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 72px !important;
    border-radius: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 32px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  /* --------------------------------------
     App Store Buttons
  -------------------------------------- */
  .app-buttons,
  .store-buttons {
    width: 100% !important;
    margin-top: 24px !important;
  }

  /* --------------------------------------
     Hero Image Last
  -------------------------------------- */
  .hero-image,
  .hero-visual,
  .hero-right {
    order: 999 !important;          /* Sabse niche */
    width: 100% !important;
    margin-top: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Image Size */
  .hero-image img,
  .hero-visual img,
  .hero-right img {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* ==========================================================
   SMALL MOBILE (480px and below)
   ========================================================== */
@media (max-width: 480px) {
  .hero,
  .home-hero,
  .hero-section {
    padding-top: 20px !important;   /* Slightly tighter spacing */
    padding-bottom: 32px !important;
  }

  .hero-image,
  .hero-visual,
  .hero-right {
    margin-top: 32px !important;
  }

  .hero-image img,
  .hero-visual img,
  .hero-right img {
    max-width: 360px !important;
  }

  .hero-cta,
  .hero-content .btn-primary,
  .hero-content .btn-outline {
    min-height: 68px !important;
    border-radius: 34px !important;
    font-size: 1rem !important;
  }
}
/* ==========================================================
   MOBILE HERO FIX
   ----------------------------------------------------------
   Paste this code at the VERY END of your styles.css file.
   This will:
   1. Keep navbar height exactly the same
   2. Add a small clean gap below navbar (like desktop)
   3. Prevent collision between navbar and hero content
   4. Move hero image AFTER all content on mobile
   5. Keep image centered and properly sized
   ========================================================== */

@media (max-width: 768px) {

  /* Hero section spacing below fixed navbar */
  .hero {
    min-height: auto !important;
    padding-top: 96px !important;   /* 76px navbar + 20px clean gap */
    padding-bottom: 60px !important;
  }

  /* Mobile layout: content first, image last */
  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    padding: 0 20px !important;
  }

  /* Content always appears first */
  .hero-content {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Image appears after all hero content */
  .hero-visual {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 20px !important;
  }

  /* Proper image size */
  .hero-image-wrapper {
    max-width: 340px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .hero-image {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Trusted badge spacing */
  .hero-badge {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  /* Full-width CTA button */
  .hero-cta {
    width: 100% !important;
    text-align: center !important;
  }

  /* App buttons stacked and equal width */
  .app-downloads {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .store-badge {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .hero {
    padding-top: 88px !important;   /* 68px navbar + 20px gap */
  }

  .hero-grid {
    padding: 0 16px !important;
  }

  .hero-image-wrapper {
    max-width: 300px !important;
  }

  .hero-image {
    max-width: 280px !important;
  }
}
/* ==========================================================
   MOBILE SERVICES SLIDER - 2 CARDS PER VIEW
   ----------------------------------------------------------
   Mobile screen (<= 768px):
   1. Shows exactly 2 service cards in one row.
   2. Card text is centered.
   3. Maintains your orange + white theme.
   4. Cards have premium rounded design.
   ----------------------------------------------------------
   Paste this COMPLETE code at the VERY END of styles.css
   ========================================================== */

@media (max-width: 768px) {

  /* Slider container */
  .services-slider,
  .services-grid,
  .services-track {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 cards per row */
    gap: 14px !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Individual service card */
  .service-card {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 2px solid rgba(255, 111, 46, 0.12) !important;
    box-shadow: 0 10px 30px rgba(255, 111, 46, 0.06) !important;
  }

  /* Image section */
  .service-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fffaf7 !important;
    padding: 18px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .service-image img {
    width: 82% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Footer section */
  .service-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 12px 18px !important;
    gap: 10px !important;
  }

  /* Title */
  .service-footer h3 {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-align: center !important;
  }

  /* Arrow button */
  .service-footer a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #fff7f2 !important;
    color: #ff6f2e !important;
    border: 1px solid rgba(255, 111, 46, 0.15) !important;
    font-size: 22px !important;
    text-decoration: none !important;
  }
}

/* ==========================================================
   SMALL MOBILE DEVICES (<= 480px)
   ========================================================== */
@media (max-width: 480px) {
  .services-slider,
  .services-grid,
  .services-track {
    gap: 12px !important;
    padding: 0 12px !important;
  }

  .service-card {
    border-radius: 24px !important;
  }

  .service-footer h3 {
    font-size: 14px !important;
  }

  .service-footer {
    padding: 14px 10px 16px !important;
  }
}
/* ==========================================================
   DESKTOP SERVICE CARDS - SAME DESIGN AS MOBILE
   ----------------------------------------------------------
   Makes desktop cards look exactly like the premium mobile cards:
   - Large rounded corners
   - Orange/white theme
   - Soft border and shadow
   - Centered title text
   - Equal card height
   - Premium spacing
   ----------------------------------------------------------
   Paste this COMPLETE code at the VERY END of styles.css
   ========================================================== */

@media (min-width: 769px) {

  /* Services grid layout */
  .services-grid,
  .services-slider,
  .services-track {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 32px !important;
    width: 100% !important;
  }

  /* Premium service card */
  .service-card {
    background: #ffffff !important;
    border: 2px solid rgba(255, 111, 46, 0.10) !important;
    border-radius: 36px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 50px rgba(255, 111, 46, 0.06) !important;
    transition: all 0.35s ease !important;
    height: 100% !important;
  }

  .service-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 28px 70px rgba(255, 111, 46, 0.10) !important;
    border-color: rgba(255, 111, 46, 0.18) !important;
  }

  /* Image area */
  .service-image {
    background: #fffaf7 !important;
    padding: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
  }

  .service-image img {
    width: 84% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Footer area */
  .service-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 28px 24px 32px !important;
    gap: 16px !important;
    min-height: 150px !important;
  }

  /* Title text */
  .service-footer h3 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-align: center !important;
  }

  /* Arrow button */
  .service-footer a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #fff7f2 !important;
    color: #ff6f2e !important;
    border: 1px solid rgba(255, 111, 46, 0.15) !important;
    font-size: 28px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .service-footer a:hover {
    background: #ff6f2e !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
  }
}
/* ==========================================================
   HOW IT WORKS TITLE - FINAL FIX
   ----------------------------------------------------------
   Fixes the issue where:
   "Simple steps to"
   "a"
   "cleaner home."
   
   becomes:
   "Simple steps to a"
   "cleaner home."
   ----------------------------------------------------------
   Paste this code at the VERY END of styles.css
   ========================================================== */

.how-works-title {
  margin: 0 0 28px !important;

  /* Limit width so text wraps correctly into exactly 2 lines */
  max-width: 12ch !important;

  /* Premium large typography */
  font-size: clamp(4.8rem, 9vw, 8rem) !important;
  line-height: 0.92 !important;
  font-weight: 900 !important;
  letter-spacing: -0.07em !important;
  color: #FFFFFF !important;

  /* Smart text wrapping */
  text-wrap: balance !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Large Desktop */
@media (min-width: 1700px) {
  .how-works-title {
    max-width: 12ch !important;
    font-size: 9rem !important;
  }
}

/* Laptop */
@media (max-width: 1400px) {
  .how-works-title {
    max-width: 12ch !important;
    font-size: clamp(4rem, 8vw, 6.8rem) !important;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .how-works-title {
    max-width: 11ch !important;
    font-size: clamp(3rem, 10vw, 5rem) !important;
    line-height: 0.94 !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .how-works-title {
    max-width: 10ch !important;
    font-size: 2.9rem !important;
    line-height: 0.95 !important;
    letter-spacing: -0.05em !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .how-works-title {
    max-width: 10ch !important;
    font-size: 2.4rem !important;
    line-height: 0.96 !important;
  }
}
/* ==========================================================
   REFINED SECTION SPACING
   ----------------------------------------------------------
   Hero section:
   - Top spacing unchanged
   - Bottom spacing reduced slightly (not too much)

   All other sections:
   - Top and bottom spacing reduced a little more
   - Maintains a clean premium layout

   Paste this code at the VERY END of styles.css
   ========================================================== */


/* ==========================================================
   HERO SECTION (HOME PAGE)
   Only reduce bottom spacing slightly
   ========================================================== */
.hero {
  padding-bottom: 65px !important;
  margin-bottom: 0 !important;
}


/* ==========================================================
   ALL OTHER SECTIONS
   Slightly tighter spacing
   ========================================================== */
.services-section,
.why-us-section,
.how-it-works-section,
.testimonials-section,
.faq-section,
.cta-section,
footer {
  margin: 0 !important;
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}


/* Remove any automatic section gaps */
.hero + section,
section + section {
  margin-top: 0 !important;
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */
@media (min-width: 1200px) {
  .hero {
    padding-bottom: 72px !important;
  }

  .services-section,
  .why-us-section,
  .how-it-works-section,
  .testimonials-section,
  .faq-section,
  .cta-section,
  footer {
    padding-top: 62px !important;
    padding-bottom: 62px !important;
  }
}


/* ==========================================================
   TABLET
   ========================================================== */
@media (max-width: 992px) {
  .hero {
    padding-bottom: 56px !important;
  }

  .services-section,
  .why-us-section,
  .how-it-works-section,
  .testimonials-section,
  .faq-section,
  .cta-section,
  footer {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width: 768px) {
  .hero {
    padding-bottom: 48px !important;
  }

  .services-section,
  .why-us-section,
  .how-it-works-section,
  .testimonials-section,
  .faq-section,
  .cta-section,
  footer {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */
@media (max-width: 480px) {
  .hero {
    padding-bottom: 42px !important;
  }

  .services-section,
  .why-us-section,
  .how-it-works-section,
  .testimonials-section,
  .faq-section,
  .cta-section,
  footer {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}
/* ==========================================================
   PERFECT FOOTER SPACING MATCH
   ----------------------------------------------------------
   Makes the gap between the LAST SECTION and the FOOTER
   exactly the same as the spacing used between all other
   sections on the website.
   ----------------------------------------------------------
   Paste this code at the VERY END of styles.css
   ========================================================== */

/* ==========================================================
   MATCH FOOTER SPACING WITH OTHER SECTIONS
   ========================================================== */
.footer,
footer {
  /* Same top spacing as your other sections */
  padding-top: 58px !important;

  /* Keep existing bottom spacing */
  padding-bottom: 40px !important;

  /* Remove any extra margin */
  margin-top: 0 !important;
}

/* Remove bottom spacing from the section before footer */
section:last-of-type,
.services-section:last-of-type,
.why-us-section:last-of-type,
.how-it-works-section:last-of-type,
.testimonials-section:last-of-type,
.faq-section:last-of-type,
.cta-section:last-of-type,
.trust-section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 58px !important;
}

/* Desktop / Large Screens */
@media (min-width: 1200px) {
  .footer,
  footer {
    padding-top: 62px !important;
    padding-bottom: 40px !important;
  }

  section:last-of-type,
  .services-section:last-of-type,
  .why-us-section:last-of-type,
  .how-it-works-section:last-of-type,
  .testimonials-section:last-of-type,
  .faq-section:last-of-type,
  .cta-section:last-of-type,
  .trust-section:last-of-type {
    padding-bottom: 62px !important;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .footer,
  footer {
    padding-top: 52px !important;
    padding-bottom: 30px !important;
  }

  section:last-of-type,
  .services-section:last-of-type,
  .why-us-section:last-of-type,
  .how-it-works-section:last-of-type,
  .testimonials-section:last-of-type,
  .faq-section:last-of-type,
  .cta-section:last-of-type,
  .trust-section:last-of-type {
    padding-bottom: 52px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .footer,
  footer {
    padding-top: 46px !important;
    padding-bottom: 30px !important;
  }

  section:last-of-type,
  .services-section:last-of-type,
  .why-us-section:last-of-type,
  .how-it-works-section:last-of-type,
  .testimonials-section:last-of-type,
  .faq-section:last-of-type,
  .cta-section:last-of-type,
  .trust-section:last-of-type {
    padding-bottom: 46px !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .footer,
  footer {
    padding-top: 40px !important;
    padding-bottom: 30px !important;
  }

  section:last-of-type,
  .services-section:last-of-type,
  .why-us-section:last-of-type,
  .how-it-works-section:last-of-type,
  .testimonials-section:last-of-type,
  .faq-section:last-of-type,
  .cta-section:last-of-type,
  .trust-section:last-of-type {
    padding-bottom: 40px !important;
  }
}
/* ==========================================================
   TESTIMONIAL / REVIEW CARDS - TOP CUT FIX
   ----------------------------------------------------------
   Fixes review cards being cut from the top.
   Adds proper top padding and ensures slider overflow
   is visible so cards display fully.
   ----------------------------------------------------------
   Paste this code at the VERY END of styles.css
   ========================================================== */

/* Testimonials section */
.testimonials,
.reviews-section,
.testimonial-section {
    padding-top: 40px !important;   /* Add space above cards */
    overflow: visible !important;
}

/* Slider wrapper */
.testimonials-slider,
.reviews-slider,
.testimonial-slider,
.swiper,
.swiper-wrapper {
    padding-top: 20px !important;   /* Prevent top clipping */
    overflow: visible !important;
}

/* Individual review cards */
.testimonial-card,
.review-card,
.testimonials .card,
.swiper-slide {
    overflow: visible !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure cards themselves are fully visible */
.testimonial-card,
.review-card {
    position: relative;
    z-index: 1;
}

/* Mobile */
@media (max-width: 768px) {
    .testimonials,
    .reviews-section,
    .testimonial-section {
        padding-top: 30px !important;
    }

    .testimonials-slider,
    .reviews-slider,
    .testimonial-slider,
    .swiper,
    .swiper-wrapper {
        padding-top: 15px !important;
    }
}
/* ==========================================================
   GLOBAL SECTION CONTAINER ALIGNMENT
   ----------------------------------------------------------
   Makes ALL sections have equal left and right spacing
   on Desktop, Tablet, and Mobile.
   Paste this code at the VERY END of styles.css
   ========================================================== */

/* Global container alignment */
.container,
.section-container,
.hero-container,
.nav-container,
.services-container,
.why-us-container,
.how-it-works-container,
.testimonials-container,
.reviews-container,
.app-showcase-container,
.faq-container,
.cta-container,
.footer-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
}

/* Large Desktop */
@media (max-width: 1440px) {
    .container,
    .section-container,
    .hero-container,
    .nav-container,
    .services-container,
    .why-us-container,
    .how-it-works-container,
    .testimonials-container,
    .reviews-container,
    .app-showcase-container,
    .faq-container,
    .cta-container,
    .footer-container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .container,
    .section-container,
    .hero-container,
    .nav-container,
    .services-container,
    .why-us-container,
    .how-it-works-container,
    .testimonials-container,
    .reviews-container,
    .app-showcase-container,
    .faq-container,
    .cta-container,
    .footer-container {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .container,
    .section-container,
    .hero-container,
    .nav-container,
    .services-container,
    .why-us-container,
    .how-it-works-container,
    .testimonials-container,
    .reviews-container,
    .app-showcase-container,
    .faq-container,
    .cta-container,
    .footer-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container,
    .section-container,
    .hero-container,
    .nav-container,
    .services-container,
    .why-us-container,
    .how-it-works-container,
    .testimonials-container,
    .reviews-container,
    .app-showcase-container,
    .faq-container,
    .cta-container,
    .footer-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
/* ==========================================================
   GLOBAL PERFECT CONTAINER ALIGNMENT
   Paste at the VERY END of styles.css
   ========================================================== */

/* Desktop */
:root {
  --site-max-width: 1680px;
  --site-padding: 48px;
}

/* Large Desktop */
@media (min-width: 1700px) {
  :root {
    --site-max-width: 1800px;
    --site-padding: 90px;
  }
}

/* Laptop */
@media (max-width: 1400px) {
  :root {
    --site-max-width: 1680px;
    --site-padding: 48px;
  }
}

/* Tablet */
@media (max-width: 992px) {
  :root {
    --site-padding: 24px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --site-padding: 20px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  :root {
    --site-padding: 16px;
  }
}

/* ==========================================================
   GLOBAL CONTAINER
   ========================================================== */
.container,
.nav-wrapper,
.hero-grid,
.why-us-section .container,
.services-section .container,
.how-it-works-section .container,
.testimonials-section .container,
.footer .container {
  width: 100%;
  max-width: var(--site-max-width) !important;
  margin: 0 auto !important;
  padding-left: var(--site-padding) !important;
  padding-right: var(--site-padding) !important;
  box-sizing: border-box;
}

/* ==========================================================
   HERO GRID FIX
   ========================================================== */
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 24px;
  align-items: center;
}

/* Tablet */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero-grid {
    gap: 40px;
  }
}
/* ==========================================================
   HOW IT WORKS - PREMIUM RESPONSIVE CARD FIT
   ----------------------------------------------------------
   ✓ Keeps your existing orange/white theme and design
   ✓ Reduces excessive side margins inside cards
   ✓ Makes the phone screenshot larger and better fitted
   ✓ Ensures full card looks balanced on Desktop, Tablet, Mobile
   ✓ Mobile shows one complete premium card
   ----------------------------------------------------------
   Paste this code at the VERY END of styles.css
   ========================================================== */

/* =========================
   GRID LAYOUT
   ========================= */
.how-works-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
}

/* =========================
   CARD
   ========================= */
.how-works-card {
    /* Preserve existing colors/background/shadows */
    width: 100%;
    max-width: 100%;
    padding: 14px !important;          /* Reduced side spacing */
    border-radius: 36px !important;
    box-sizing: border-box;
    overflow: hidden;
}

/* =========================
   IMAGE WRAPPER
   ========================= */
.how-works-image {
    width: 100%;
    height: 460px !important;
    margin-bottom: 18px !important;
    border-radius: 28px !important;
    overflow: hidden;
    aspect-ratio: auto !important;
}

/* Screenshot Image */
.how-works-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain !important;     /* Show full screenshot */
    object-position: top center !important;
    border-radius: inherit;
}

/* =========================
   CONTENT SPACING
   ========================= */
.how-works-content {
    padding: 8px 4px 4px !important;
}

.step-number {
    font-size: 0.74rem !important;
    margin-bottom: 6px !important;
}

.how-works-content h3 {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
}

.how-works-content p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* =========================
   LARGE DESKTOP
   ========================= */
@media (min-width: 1700px) {
    .how-works-grid {
        gap: 34px;
    }

    .how-works-image {
        height: 520px !important;
    }
}

/* =========================
   LAPTOP
   ========================= */
@media (max-width: 1400px) {
    .how-works-grid {
        gap: 24px;
    }

    .how-works-image {
        height: 420px !important;
    }

    .how-works-content h3 {
        font-size: 1.3rem !important;
    }

    .how-works-content p {
        font-size: 0.88rem !important;
    }
}

/* =========================
   TABLET
   ========================= */
@media (max-width: 992px) {
    .how-works-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 620px;
        margin: 0 auto;
    }

    .how-works-card {
        padding: 12px !important;
        border-radius: 28px !important;
    }

    .how-works-image {
        height: 520px !important;
        border-radius: 22px !important;
    }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {
    .how-works-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 100%;
    }

    .how-works-card {
        width: 100%;
        padding: 10px !important;       /* Very small side margins */
        border-radius: 24px !important;
    }

    .how-works-image {
        height: 340px !important;
        margin-bottom: 14px !important;
        border-radius: 18px !important;
    }

    .how-works-content {
        padding: 6px 2px 2px !important;
    }

    .step-number {
        font-size: 0.64rem !important;
        margin-bottom: 4px !important;
    }

    .how-works-content h3 {
        font-size: 1.12rem !important;
        margin-bottom: 6px !important;
    }

    .how-works-content p {
        font-size: 0.80rem !important;
        line-height: 1.45 !important;
    }
}

/* =========================
   SMALL MOBILE
   ========================= */
@media (max-width: 480px) {
    .how-works-card {
        padding: 8px !important;
        border-radius: 20px !important;
    }

    .how-works-image {
        height: 300px !important;
        border-radius: 16px !important;
    }

    .how-works-content h3 {
        font-size: 1rem !important;
    }

    .how-works-content p {
        font-size: 0.76rem !important;
        line-height: 1.4 !important;
    }
}
/* ==========================================
   MOBILE APP DOWNLOAD BUTTONS - FINAL FIX
   Put this at the VERY END of styles.css
   This overrides all previous mobile styles.
   Makes Google Play and App Store buttons
   appear in ONE ROW with equal width.
   ========================================== */

@media (max-width: 768px) {

  /* Buttons container */
  .app-downloads {
    display: flex !important;
    flex-direction: row !important;   /* same line */
    align-items: stretch !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;     /* prevent wrapping */
    gap: 12px !important;
    width: 100% !important;
    margin: 20px 0 24px !important;
  }

  /* Individual buttons */
  .store-badge {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;

    padding: 10px 12px !important;
    height: 72px !important;

    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    background: #000000 !important;
    overflow: hidden !important;
  }

  /* Icon */
  .store-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 1.6rem !important;
    flex-shrink: 0 !important;
  }

  .apple-logo {
    font-size: 1.9rem !important;
  }

  /* Text wrapper */
  .store-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.05 !important;
    min-width: 0 !important;
  }

  /* Small text */
  .store-small {
    font-size: 0.52rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  /* Main text */
  .store-name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .app-downloads {
    gap: 10px !important;
  }

  .store-badge {
    height: 64px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }

  .store-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 1.35rem !important;
  }

  .apple-logo {
    font-size: 1.65rem !important;
  }

  .store-small {
    font-size: 0.46rem !important;
  }

  .store-name {
    font-size: 0.88rem !important;
  }
}
/* ======================================================
   FOOTER - DISABLE ALL LINK/BUTTON INTERACTIONS
   Paste this at the VERY END of styles.css
   ------------------------------------------------------
   This will:
   - Disable all footer links
   - Disable all footer buttons
   - Remove hover effects
   - Prevent clicking
   - Keep the same visual design
   ====================================================== */

.footer a,
.footer button,
.footer .btn,
.footer .social-links a,
.footer .footer-col a,
.footer .footer-links-grid a,
.footer .footer-bottom-column a,
.footer input[type="submit"],
.footer .newsletter button {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
}

/* Remove hover movement and color changes */
.footer a:hover,
.footer button:hover,
.footer .btn:hover,
.footer .social-links a:hover,
.footer .footer-col a:hover,
.footer .footer-links-grid a:hover,
.footer .footer-bottom-column a:hover {
  transform: none !important;
  color: inherit !important;
  background: inherit !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* Remove focus outline */
.footer a:focus,
.footer button:focus,
.footer .btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Optional: slightly dim disabled interactive elements */
.footer a,
.footer button,
.footer .btn {
  opacity: 0.95 !important;
}
/* ==========================================
   BACK TO TOP BUTTON STYLES
   Paste at the VERY END of styles.css
========================================== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border: none;
  outline: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6a2b, #ff8c42);
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);

  /* Premium effects */
  box-shadow:
    0 12px 30px rgba(255, 106, 43, 0.35),
    0 4px 12px rgba(255, 106, 43, 0.2);

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* Visible state */
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hover effect */
.back-to-top:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 18px 40px rgba(255, 106, 43, 0.45),
    0 8px 18px rgba(255, 106, 43, 0.25);
}

/* Click effect */
.back-to-top:active {
  transform: scale(0.96);
}

/* Mobile optimization */
@media (max-width: 768px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}
/* ==========================================
   MOBILE FOOTER LAYOUT (PRONTO STYLE)
   Keep Collably Colors/Theme
   Paste this at the END of styles.css
========================================== */

@media (max-width: 768px) {
  /* Main Footer */
  .footer {
    padding: 48px 0 28px;
    border-radius: 0 0 32px 32px;
    overflow: hidden;
  }

  /* Container */
  .footer .container {
    width: 100%;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
  }

  /* ----------------------------------
     TOP FOOTER GRID
     Brand = Full Width
     Other Columns = 2 Columns
  ---------------------------------- */
  .footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px 36px;
    align-items: start;
  }

  /* Brand Section Full Width */
  .footer-content .footer-col:first-child {
    grid-column: 1 / -1;
    margin-bottom: 12px;
  }

  /* Brand Title */
  .footer-content .footer-col:first-child h4 {
    font-size: 3.25rem;
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0 0 32px;
  }

  /* Section Headings */
  .footer-col h5 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 24px;
    color: #ffffff;
  }

  /* Intro Text */
  .footer-col p {
    font-size: 1rem;
    line-height: 1.8;
    margin: 0 0 14px;
  }

  /* Email Links */
  .footer-col p a {
    font-size: 1rem;
    font-weight: 700;
  }

  /* Footer Lists */
  .footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-col ul li {
    margin-bottom: 18px;
  }

  .footer-col ul li:last-child {
    margin-bottom: 0;
  }

  /* Footer Links */
  .footer-col ul li a {
    font-size: 1rem;
    line-height: 1.75;
    display: inline-block;
  }

  /* Divider */
  .footer-divider {
    margin: 52px 0 40px;
  }

  /* ----------------------------------
     BOTTOM FOOTER SECTIONS
     Stack Vertically on Mobile
  ---------------------------------- */
  .footer-bottom-grid {
    display: flex;
    flex-direction: column;
    gap: 42px;
  }

  /* Section Titles */
  .footer-bottom-column h5 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 22px;
    color: #ffffff;
  }

  /* Links Grid */
  .footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
  }

  /* Cities Grid = 3 Columns */
  .footer-cities-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 20px;
  }

  /* Bottom Links */
  .footer-links-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-links-grid ul li {
    margin-bottom: 14px;
  }

  .footer-links-grid ul li a {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  /* Copyright */
  .footer-copyright {
    margin-top: 42px;
    padding-top: 24px;
    text-align: center;
  }

  .footer-copyright p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
  }
}

/* ==========================================
   SMALL MOBILE DEVICES
========================================== */
@media (max-width: 480px) {
  .footer .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Slightly Smaller Brand Logo */
  .footer-content .footer-col:first-child h4 {
    font-size: 3rem;
  }

  /* Compact Gaps */
  .footer-content {
    gap: 40px 28px;
  }

  /* Two-column links remain */
  .footer-links-grid {
    gap: 0 20px;
  }

  /* Cities become 2 columns for readability */
  .footer-cities-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }

  /* Smaller Text */
  .footer-col ul li a,
  .footer-links-grid ul li a {
    font-size: 0.92rem;
  }

  .footer-col h5,
  .footer-bottom-column h5 {
    font-size: 1rem;
    letter-spacing: 0.2em;
  }
}

.download-app-buttons {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
}

.download-app-buttons .store-btn {
  width: 260px;
  height: 96px;
  min-width: 260px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.download-app-buttons .store-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.download-app-buttons .store-icon {
  flex-shrink: 0;
}

/* MOBILE */
@media (max-width: 768px) {
  .download-app-buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .download-app-buttons .store-btn {
    width: 100%;
    min-width: 0;
    max-width: 320px;
    height: 84px;
  }
}