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

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  background: #f8f9fa;
  line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0;
}

/* === Modern Header === */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 8%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

/* Logo */
header .logo {
  font-size: 1.8rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.5px;
}

/* Nav Links */
header .nav-links {
  display: flex;
  list-style: none;
  gap: 28px;
}

header .nav-links a {
  text-decoration: none;
  color: #374151;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.3s ease;
}

header .nav-links a:hover {
  color: #4f46e5; /* violet accent */
}

/* Call-to-action button */
header .btn-primary {
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

header .btn-primary:hover {
  background: linear-gradient(90deg, #4338ca, #2563eb);
  transform: translateY(-2px);
}


/* CTA Button */
.btn-primary {
  background: #007BFF;
  color: white;
  padding: 14px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
  font-size: 1.2rem;
}

.btn-primary:hover {
  background: #005bb5;
  transform: scale(1.05);
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 100px 5%;
  background: #f9f9f9;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.highlight {
  color: #007BFF;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

/* Services Section */
.services {
  background: #f9f9f9;
  padding: 80px 0;
  text-align: center;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #222;
  font-weight: 700;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
  padding: 10px 0;
}

.service-box {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  text-align: center;
}

.service-box:hover {
  transform: translateY(-5px);
}

.service-box h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #222;
  font-weight: 600;
}

.service-box p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 15px;
}

/* Learn More Button */
.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background: #007BFF;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  margin-top: 10px;
}

.btn-secondary:hover {
  background: #005bb5;
}

/* Testimonials */
.testimonials {
  background: #f9f9f9;
  text-align: center;
}

.testimonials h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.testimonial-slider {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.testimonial {
  max-width: 600px;
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.testimonial p {
  font-size: 1rem;
  color: #333;
}

.testimonial .author {
  font-weight: bold;
  margin-top: 10px;
  color: #007BFF;
}

/* Footer */
footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 1rem;
}

footer p {
  margin: 5px 0;
}

/* Consultation Form */
.consultation-form {
  padding: 80px 0;
  background: #f9f9f9;
}

.consultation-form h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
  color: #222;
}

form {
  max-width: 700px;
  margin: 0 auto;
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 20px;
}

input, textarea {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-top: 8px;
  font-family: 'Poppins', sans-serif;
}

input:focus,
textarea:focus {
  border-color: #007BFF;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: #333;
}

.btn-container {
  text-align: center;
  margin-top: 30px;
}

/* Responsive */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .hero-content h1 {
    font-size: 2.2rem;
  }

  .btn-primary {
    font-size: 1rem;
    padding: 12px 20px;
  }

  form {
    padding: 25px;
  }

  .consultation-form h2 {
    font-size: 1.5rem;
  }
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px 30px;
  margin-top: 10px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #333;
  gap: 10px;
  white-space: nowrap; /* Prevent text from breaking */
  background: #f1f1f1;
  padding: 12px 15px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: background 0.3s ease;
}

.checkbox-grid label:hover {
  background: #e7e7e7;
}

.checkbox-grid input[type="checkbox"] {
  accent-color: #007BFF;
  width: 18px;
  height: 18px;
}

.service-detail h1 {
  font-size: 2.8rem;
  text-align: center;
  font-weight: 700;
  margin-bottom: 10px;
  color: #222;
}

.service-detail .intro {
  text-align: center;
  font-size: 1.2rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
}

.service-benefits {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.benefit-box {
  flex: 1;
  min-width: 250px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  text-align: center;
}

.benefit-box h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  color: #007BFF;
}

.benefit-box p {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

.service-offers {
  text-align: center;
}

.service-offers h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #222;
}

.service-list {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.service-list li {
  background: #f1f1f1;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 500;
  width: 100%;
  max-width: 450px;
  color: #333;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
  text-align: center;
}

/* ABOUT US SECTION */
.about-hero {
  padding: 60px 20px;
  background-color: #f9f9f9;
}

.about-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.about-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.about-text {
  flex: 1;
  min-width: 300px;
}

.about-text h2 {
  font-size: 2.5em;
  margin-bottom: 10px;
  color: #1e1e1e;
}

.about-text h3 {
  font-size: 1.6em;
  margin-bottom: 20px;
  color: #007bff;
}

.about-text p {
  font-size: 1em;
  margin-bottom: 20px;
  line-height: 1.6;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056cc;
}

/* Stats */
.about-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 60px 20px;
  background: #ffffff;
  flex-wrap: wrap;
}

.stat-box {
  text-align: center;
  min-width: 150px;
}

.stat-box h4 {
  font-size: 2em;
  color: #007bff;
  margin-bottom: 10px;
}

.stat-box p {
  color: #555;
  font-size: 0.95em;
}

/* === About Us Section === */
.about-section {
  padding: 60px 20px;
  background-color: #f8f8f8;
}

.about-content {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.about-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.about-text {
  flex: 1;
  min-width: 300px;
}

.about-text h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.about-text h3 {
  font-size: 1.6rem;
  color: #007bff;
  margin-bottom: 20px;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.btn-primary {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056cc;
}

/* === Stats Section === */
.about-stats {
  padding: 40px 20px;
  background-color: #ffffff;
}

.stats-grid {
  max-width: 1000px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  text-align: center;
}

.stat h3 {
  font-size: 2rem;
  color: #007bff;
  margin-bottom: 10px;
}

.stat p {
  font-size: 1rem;
  color: #333;
}

.about-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* Story section */
.about-story {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 80px 0;
}

.story-text {
  flex: 1 1 50%;
}

.story-text h3 {
  font-size: 2rem;
  color: #222;
  margin-bottom: 15px;
}

.story-text p {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.7;
}

.story-image {
  flex: 1 1 40%;
  text-align: center;
}

.story-image img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Values Section */
.about-values {
  background: #f2f4f8;
  padding: 80px 0;
  text-align: center;
}

.about-values h3 {
  font-size: 2.2rem;
  margin-bottom: 50px;
  color: #222;
}

.value-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.value-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  width: 280px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
}

.icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.value-card h4 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #007BFF;
}

.value-card p {
  color: #555;
  font-size: 1rem;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .about-story {
    flex-direction: column;
    text-align: center;
  }

  .story-text, .story-image {
    flex: 1 1 100%;
  }

  .value-cards {
    flex-direction: column;
    align-items: center;
  }
}
* {box-sizing: border-box;}
/* Slideshow container */
slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
mySlides {
display: none;
}
/* Next & previous buttons */
prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
next {
right: 0;
border-radius: 3px 0 0 3px;
}
prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}


.service-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 280px; /* Adjust if needed */
  padding: 25px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.service-box p {
  margin-bottom: auto; /* pushes button down */
  color: #555;
  font-size: 1rem;
}

.service-box .btn-secondary {
  margin-top: auto; /* makes button stick to bottom */
  margin-bottom: 10px; /* add some spacing from bottom */
}

nav {
  display: flex;
  justify-content: space-between; /* espaço entre o logo e o menu */
  align-items: center;
  max-width: 1200px;
  margin: 0 auto; /* centraliza horizontalmente */
  padding: 20px;
}

.about-us {
  padding: 80px 40px;
  background-color: #f9f9f9;
}

.about-text {
  max-width: 800px;
  margin: 0 auto 60px auto;
  text-align: center;
}

.about-text h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a1a1a;
}

.about-text h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #0070f3; /* azul de destaque */
}

.about-text p {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}

.about-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.about-card {
  background-color: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 280px;
  text-align: center;
}

.about-card:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.about-card h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.about-card p {
  font-size: 16px;
  color: #555;
}


.about-section {
  background-color: #f9f9f9;
  padding: 80px 20px;
  text-align: center;
}

.about-header h2 {
  font-size: 2.5rem;
  color: #1a1a1a;
  font-weight: 700;
}

.about-header h3 {
  font-size: 1.5rem;
  color: #007bff;
  font-weight: 600;
  margin: 10px 0;
}

.about-header p {
  max-width: 800px;
  margin: 0 auto 40px;
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
}

.about-features {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.feature-card {
  background: white;
  padding: 30px;
  border-radius: 16px;
  width: 280px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.feature-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333;
}

.feature-card p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.5;
}

/* ==== SERVICES — final look like screenshot 2 ==== */

/* Grid layout (4 → 2 → 1) */
.services-grid{
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 980px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .services-grid{ grid-template-columns: 1fr; } }

/* Softer card */
.services .service-box{
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  min-height: 320px; /* keeps height consistent */
}

/* Typography inside cards (optional polish) */
.services .service-box h3{
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.services .service-box p{
  color: #6b7280;
  margin-bottom: auto; /* push button down */
}

/* Outlined purple button */
.services .btn-secondary{
  background: transparent !important;
  color: #635bff !important;
  border: 2.5px solid #635bff !important;
  border-radius: 14px;
  font-weight: 800;
  padding: 12px 18px;
  box-shadow: none;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.services .btn-secondary:hover,
.services .btn-secondary:focus{
  background: #635bff !important;
  color: #fff !important;
  transform: translateY(-1px);
  outline: none;
}

/* ===== ABOUT (modern) — scoped to avoid conflicts ===== */
.about-modern{
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
  --ring:#635bff; --ring-2:#8a7bff;
  --card:#ffffff; --bg:#f8fafc;
  background:
    radial-gradient(900px 380px at 85% -120px, #eef2ff 0%, transparent 60%),
    linear-gradient(#f8fafc, #f8fafc);
  padding: clamp(64px, 8vw, 112px) 0;
  color: var(--ink);
}
.about-modern .am-wrap{ width:min(1120px,92vw); margin-inline:auto; }
.about-modern .am-grid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px); align-items:center;
}
@media (max-width: 960px){ .about-modern .am-grid{ grid-template-columns:1fr; } .about-modern .am-media{ order:-1; } }

/* Text side */
.about-modern .am-eyebrow{
  font: 700 14px/1 Poppins,system-ui; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ring); margin:0 0 8px;
}
.about-modern .am-title{
  font: 800 clamp(28px,4.6vw,42px)/1.08 Poppins,system-ui;
  letter-spacing:-.02em; margin:0 0 12px; color:var(--ink);
}
.about-modern .am-title span{ color: var(--ring); }
.about-modern .am-lead{
  font-size: clamp(16px,2.2vw,18px); line-height:1.6; color: var(--ink-2);
  max-width: 52ch; margin: 0 0 18px;
}

.about-modern .am-bullets{ display:grid; gap:12px; margin: 10px 0 20px; padding:0; list-style:none; }
.about-modern .am-bullets li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); }
.about-modern .am-bullets b{ color:var(--ink); }
.about-modern .am-ic{
  width:28px; height:28px; border-radius:10px; display:grid; place-items:center;
  font-weight:900; font-size:16px; color:#0b1020;
}
.about-modern .am-ic-blue{  color:#2563eb; background:#e0edff; }
.about-modern .am-ic-purple{color:#7c3aed; background:#efe7ff; }
.about-modern .am-ic-green{ color:#10b981; background:#e6fbf5; }

.about-modern .am-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 6px; }
.about-modern .am-btn-ghost{
  display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none;
  background:#fff; border:1px solid #e5e7eb; color:#0f172a;
  box-shadow:0 8px 18px rgba(15,23,42,.04); transition:border-color .2s;
}
.about-modern .am-btn-ghost:hover{ border-color:#d1d5db; }

/* Media side */
.about-modern .am-media{ position:relative; }
.about-modern .am-media img{
  width:100%; height:auto; border-radius:20px;
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  object-fit:cover; object-position:center 55%;
  filter:saturate(.98) contrast(1.02);
  aspect-ratio: 16/11;
}
.about-modern .am-media figcaption{
  position:absolute; left:16px; bottom:14px; right:16px;
  color:#fff; font-weight:600; text-shadow:0 2px 10px rgba(0,0,0,.35);
  opacity:.95;
}
.about-modern .am-media::after{
  content:""; position:absolute; inset:0;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(15,23,42,0) 58%, rgba(15,23,42,.55) 100%);
  pointer-events:none;
}

/* ===== HERO (modern) ===== */
.hero-modern{
  position: relative;
  display: grid; place-items: center; text-align: center;
  padding: clamp(84px, 14vh, 140px) 16px 96px;
  background: linear-gradient(to bottom, #ffffff, #f7f9ff);
  overflow: hidden;
}
.hero-modern::before{
  content:""; position:absolute; inset:auto -20% -40% -20%; height:60%;
  background: radial-gradient(55% 65% at 50% 0%, rgba(99,91,255,.18), rgba(99,91,255,0) 60%);
  filter: blur(12px); pointer-events:none;
}
.hero-modern .hm-wrap{ width:min(1050px, 92vw); margin:auto; }

.hero-modern .hm-eyebrow{
  font: 700 13px/1 Poppins,system-ui; letter-spacing:.14em; text-transform:uppercase;
  color:#6366f1; margin-bottom:12px;
}

.hero-modern h1{
  font-family:Poppins,system-ui; font-weight:800;
  font-size: clamp(34px, 6vw, 64px); letter-spacing:-.02em;
  margin:0 0 12px; color:#1f2937;
}
.hero-modern .hm-accent{
  background: linear-gradient(90deg,#6366f1,#22c1fd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-modern .hm-lead{
  font-size: clamp(16px, 2.2vw, 20px);
  color:#4b5563; margin: 0 auto 22px; max-width: 60ch;
}

.hero-modern .hm-ctas{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:18px;
}

.hero-modern .hm-btn-outline{
  display:inline-block; padding:12px 18px; border-radius:14px; font-weight:800;
  border:2.5px solid #635bff; color:#635bff; background:#fff; transition:.2s;
}
.hero-modern .hm-btn-outline:hover{ background:#635bff; color:#fff; }

.hero-modern .hm-trust{
  margin-top:8px; font-size:14px; color:#64748b; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.hero-modern .hm-trust i{ color:#cbd5e1; }

.hero-modern .hm-scroll{
  position:absolute; left:50%; transform:translateX(-50%); bottom:20px;
  display:flex; gap:8px; align-items:center; font-weight:600; color:#6366f1;
  opacity:.85; transition:opacity .2s;
}
.hero-modern .hm-scroll:hover{ opacity:1; }

@media (max-width: 560px){
  .hero-modern{ padding-bottom:110px; }
  .hero-modern .hm-scroll{ bottom:26px; }
}

/* ===== HERO v2 (clean + matching buttons) ===== */
.hero-v2{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(88px,14vh,144px) 16px 110px;
  background: radial-gradient(60% 70% at 50% -10%, #eef2ff 0%, #ffffff 55%) no-repeat;
}
.hero-v2::after{
  content:""; position:absolute; left:-20%; right:-20%; bottom:-38%;
  height:65%; background:radial-gradient(40% 50% at 50% 0%, rgba(99,91,255,.12), rgba(99,91,255,0) 70%);
  filter: blur(14px);
}

.hero-v2 .hv-wrap{ width:min(1040px,92vw); margin:0 auto; }

.hero-v2 .hv-eyebrow{
  font:700 12px/1 Poppins,system-ui; letter-spacing:.16em; text-transform:uppercase;
  color:#7a74ff; margin-bottom:12px;
}

.hero-v2 h1{
  font-family:Poppins,system-ui; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(34px,6vw,64px); color:#0f172a; margin:0 0 12px;
}
.hero-v2 h1 span{
  background:linear-gradient(90deg,#6d73ff,#22c1fd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-v2 .hv-lead{
  font-size:clamp(16px,2.2vw,20px); color:#475569;
  margin:0 auto 22px; max-width:62ch;
}

/* CTAs */
.hero-v2 .hv-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:10px 0 8px; }

.hero-v2 .hv-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 20px; border-radius:14px; font-weight:800;
  font-size:16px; line-height:1; text-decoration:none; transition:.18s ease;
}

/* Primary and Ghost share metrics so they MATCH */
.hero-v2 .hv-btn--primary{
  color:#fff; background:linear-gradient(135deg,#6366f1,#3b82f6);
  box-shadow:0 6px 18px rgba(59,130,246,.30);
}
.hero-v2 .hv-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(59,130,246,.34); }

.hero-v2 .hv-btn--ghost{
  color:#5a52ff; background:#fff; border:2px solid #b9b5ff;
}
.hero-v2 .hv-btn--ghost:hover{ background:#f5f6ff; border-color:#8e86ff; transform:translateY(-1px); }

/* Trust row */
.hero-v2 .hv-trust{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-top:14px; padding:0; list-style:none; color:#64748b; font-weight:600; font-size:14px;
}
.hero-v2 .hv-trust li{ position:relative; padding:0 10px; }
.hero-v2 .hv-trust li+li::before{
  content:"•"; position:absolute; left:-8px; color:#cbd5e1;
}

/* Small screens */
@media (max-width:560px){
  .hero-v2 .hv-btn{ height:46px; padding:0 18px; border-radius:12px; font-size:15px; }
}
/* About: hide old caption and CTA ghost if it exists */
.about-modern .am-media figcaption{ display:none !important; }
.about-modern .am-ctas{ display:none !important; }

/* About: new stats row */
.about-modern .am-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  max-width: 520px;
}
@media (max-width: 560px){ .about-modern .am-stats{ grid-template-columns: 1fr; } }

.about-modern .am-stat{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px 16px;
  display:flex; align-items:baseline; gap:10px;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.about-modern .am-num{
  font-weight:800; font-size:18px; color:#0f172a; letter-spacing:-.01em;
}
.about-modern .am-sub{
  font-size:13px; color:#64748b; line-height:1;
}

/* ===== Footer Modern ===== */
.footer-modern{
  background:#f9fafb;
  border-top:1px solid #e5e7eb;
  padding:40px 20px 30px;
  color:#475569;
  font-size:14px;
}
.footer-modern .fm-wrap{
  max-width:1100px; margin:0 auto;
  display:flex; flex-direction:column; gap:24px;
  align-items:center; text-align:center;
}

/* Top row */
.footer-modern .fm-top{
  display:flex; flex-direction:column; gap:14px;
  align-items:center;
}
.footer-modern .fm-logo{
  font-family:Poppins,system-ui;
  font-size:20px; font-weight:800; color:#111;
}
.footer-modern .fm-nav{
  display:flex; gap:18px; flex-wrap:wrap;
}
.footer-modern .fm-nav a{
  color:#475569; font-weight:600; transition:.2s;
}
.footer-modern .fm-nav a:hover{ color:#635bff; }

/* Contact */
.footer-modern .fm-contact p{
  margin:0; font-size:14px; color:#64748b;
}
.footer-modern .fm-contact a{
  color:#635bff; font-weight:600; text-decoration:none;
}
.footer-modern .fm-contact a:hover{ text-decoration:underline; }

/* Bottom */
.footer-modern .fm-bottom p{
  font-size:13px; color:#94a3b8; margin:0;
}

/* ===== Footer Aesthetic (scoped) ===== */
.footer-ae{
  position: relative;
  background: radial-gradient(70% 90% at 50% -30%, #eef2ff 0%, #ffffff 55%) no-repeat;
  border-top: 1px solid #e5e7eb;
  padding: 48px 20px 40px;
}
.footer-ae::before{
  /* soft glow ring */
  content:""; position:absolute; left:-20%; right:-20%; top:-18px; height:18px;
  background: radial-gradient(50% 80% at 50% 0%, rgba(99,91,255,.18), rgba(99,91,255,0) 70%);
  filter: blur(8px); pointer-events:none;
}
.footer-ae .fa-wrap{
  width:min(1100px,92vw); margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
}

/* brand */
.footer-ae .fa-logo{
  font-family:Poppins, system-ui; font-weight:900; letter-spacing:-.02em;
  font-size:22px; color:#111;
  background: linear-gradient(90deg,#6366f1,#22c1fd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* nav pills */
.footer-ae .fa-nav{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.footer-ae .fa-nav a{
  display:inline-block; padding:10px 14px; font-weight:700; font-size:14px;
  color:#4b5563; background:#fff; border:1px solid #e6e8ee; border-radius:999px;
  transition:.18s ease; box-shadow:0 6px 16px rgba(15,23,42,.06);
}
.footer-ae .fa-nav a:hover{ color:#635bff; border-color:#d3d7ff; transform:translateY(-1px); }

/* socials */
.footer-ae .fa-social{
  display:flex; gap:10px; justify-content:center; margin-top:4px;
}
.footer-ae .fa-social a{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  color:#6366f1; background:#f4f6ff; border:1px solid #e6e8ff;
  transition:.18s ease; box-shadow:0 6px 16px rgba(15,23,42,.06);
}
.footer-ae .fa-social a:hover{ background:#e9ebff; color:#4f46e5; transform:translateY(-1px); }

/* divider */
.footer-ae .fa-divider{
  width:min(760px,86vw); height:1px; background:linear-gradient(90deg,transparent,#e7e9f2,transparent);
  margin:8px 0;
}

/* contact + copy */
.footer-ae .fa-contact{ margin:6px 0 0; color:#6b7280; }
.footer-ae .fa-contact a{ color:#5a52ff; font-weight:700; text-decoration:none; }
.footer-ae .fa-contact a:hover{ text-decoration:underline; }

.footer-ae .fa-copy{
  margin-top:4px; color:#94a3b8; font-size:13px;
}

/* small screens */
@media (max-width:560px){
  .footer-ae{ padding:44px 16px 34px; }
  .footer-ae .fa-nav a{ padding:9px 12px; font-size:13px; }
}

.footer-ae .fa-contact a {
  color: #5a52ff;
  font-weight: 700;
  text-decoration: none;
}
.footer-ae .fa-contact a:hover {
  text-decoration: underline;
}

.footer-ae .fa-contact,
.footer-ae .fa-copy {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 10px;
  color: #6b7280;
  text-align: center;
}
.footer-ae .fa-contact a {
  color: #5a52ff;
  font-weight: 700;
  text-decoration: none;
}
.footer-ae .fa-contact a:hover { text-decoration: underline; }


/* ===== Compact Footer ===== */
.footer-clean {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  padding: 24px 16px;   /* smaller padding */
  text-align: center;
  font-size: 13px;
  color: #475569;
}

.footer-clean .fc-wrap {
  max-width: 900px;     /* narrower max width */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;            /* smaller gaps */
  align-items: center;
}

.footer-clean .fc-logo {
  font-family: Poppins, system-ui;
  font-size: 18px;      /* smaller logo text */
  font-weight: 800;
  background: linear-gradient(90deg, #6366f1, #22c1fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-clean .fc-nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-clean .fc-nav a {
  color: #475569;
  font-weight: 600;
  font-size: 13px;      /* smaller links */
  transition: color 0.2s;
}
.footer-clean .fc-nav a:hover {
  color: #6366f1;
}

.footer-clean .fc-email a {
  color: #5a52ff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.footer-clean .fc-email a:hover {
  text-decoration: underline;
}

.footer-clean .fc-copy {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}



/* === Consultation Form — refined aesthetic === */

.consultation-form form {
  max-width: 820px;
  margin: 0 auto;
  border: none;                /* no border */
  background: transparent;     /* no white background */
  box-shadow: none;            /* no shadow */
  padding: 0;                  /* remove inner padding */
}


.consultation-form h2 {
  text-align: center;
  font-weight: 800;
  font-size: clamp(28px,4.5vw,38px);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: #111827;
}

.consultation-form .cf-lead {
  text-align: center;
  font-size: 15px;
  color: #6b7280;
  margin-bottom: 30px;
}

/* Labels */
.consultation-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

/* Inputs & textarea */
.consultation-form input,
.consultation-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fdfdfd;
  font-size: 15px;
  font-family: 'Poppins', system-ui, sans-serif;
  transition: all 0.2s ease;
}

.consultation-form input::placeholder,
.consultation-form textarea::placeholder {
  color: #9ca3af;
}

.consultation-form input:focus,
.consultation-form textarea:focus {
  outline: none;
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* Textarea */
.consultation-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Checkbox grid */
.consultation-form .checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 12px;
}

.consultation-form .checkbox-grid label {
  background: #f9fafc;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s ease;
  cursor: pointer;
}

.consultation-form .checkbox-grid input[type="checkbox"] {
  accent-color: #6366f1;
  width: 18px;
  height: 18px;
}

.consultation-form .checkbox-grid label:hover {
  border-color: #c7d2fe;
  background: #f3f4ff;
}

/* Submit Button */
.consultation-form .btn-container {
  text-align: center;
  margin-top: 24px;
}

.consultation-form .btn-primary {
  background: linear-gradient(135deg,#6366f1,#3b82f6);
  color: #fff;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.consultation-form .btn-primary:hover {
  background: linear-gradient(135deg,#4f46e5,#2563eb);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(59,130,246,0.35);
}



/* === Service Cards: Auto Height & Balanced === */
.services .service-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  height: auto; /* let the card size adapt naturally */
}

.services .service-box h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111827;
}

.services .service-box p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 12px; /* tighter gap before button */
  line-height: 1.4;
}

.services .service-box .btn-secondary {
  padding: 8px 18px;
  font-size: 0.9rem;
  border-radius: 8px;
}

/* === Service Cards: Compact, Less White Space === */
.services .service-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  height: auto; /* shrink card to content */
  min-height: 180px; /* enough space but no big gap */
}

.services .service-box h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #111827;
}

.services .service-box p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 14px; /* button closer to text */
  line-height: 1.4;
}

.services .service-box .btn-secondary {
  margin-top: 0; /* remove forced spacing */
  padding: 8px 18px;
  font-size: 0.9rem;
  border-radius: 8px;
}


/* === Service Cards: Equal Height & Centered === */
.services .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.services .service-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* evenly spread text & button */
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  min-height: 260px; /* ensures equal card heights */
}

.services .service-box h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111827;
}

.services .service-box p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 16px;
  line-height: 1.4;
  flex-grow: 1; /* makes all text areas expand equally */
  display: flex;
  align-items: center; /* vertically center short text */
  justify-content: center;
}

.services .service-box .btn-secondary {
  padding: 10px 20px;
  font-size: 0.9rem;
  border-radius: 8px;
  margin-top: auto; /* pushes button to same alignment */
}

/* Remove underline from logo link */
.logo {
  text-decoration: none;
  color: #111827; /* keep your original logo color */
  font-size: 1.8rem;
  font-weight: 800;
}



/* ===== Service Detail – modern look ===== */
.service-detail {
  background:#f8fafc;
  padding:clamp(56px,7vw,80px) 0;
  font-family:Poppins,system-ui,sans-serif;
}

/* header */
.service-detail .sd-wrap{width:min(1100px,92vw);margin:0 auto;}
.service-detail .sd-eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-weight:800;
  font-size:12px; color:#7a74ff; margin-bottom:10px;
}
.service-detail h1{
  font-weight:900; letter-spacing:-.02em;
  font-size:clamp(30px,5.5vw,44px); margin:0 0 10px; color:#0f172a;
}
.service-detail .sd-lead{
  color:#64748b; font-size:clamp(15px,2.2vw,18px);
  max-width:70ch; margin:0 0 28px;
}

/* feature cards (top three) */
.service-detail .sd-cards{
  display:grid; gap:18px; grid-template-columns:repeat(3,1fr);
  margin:26px 0 36px;
}
@media (max-width:960px){ .service-detail .sd-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .service-detail .sd-cards{ grid-template-columns:1fr; } }

.service-detail .sd-card{
  background:#fff; border:1px solid #e7e9f2; border-radius:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  padding:18px 18px 16px; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-detail .sd-card:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(15,23,42,.08); }
.service-detail .sd-card h3{
  font-size:18px; font-weight:800; margin:6px 0 8px; color:#1f2937;
}
.service-detail .sd-card p{ color:#6b7280; font-size:15px; margin:0; }

/* “What we offer” list */
.service-detail .sd-offers{
  margin-top:8px; text-align:center;
}
.service-detail .sd-offers h2{
  font-size:clamp(22px,4vw,32px); font-weight:900; color:#0f172a; margin-bottom:16px;
}

.service-detail .sd-list{
  width:min(900px,92vw); margin:0 auto 18px; display:grid; gap:12px;
}
.service-detail .sd-item{
  background:#ffffff;
  border:1px solid #e5e7eb; border-radius:14px;
  padding:14px 18px; font-weight:700; color:#1f2937;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.service-detail .sd-item::before{
  content:"✓"; display:inline-grid; place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:#eef2ff; color:#4f46e5; font-weight:900; font-size:13px;
}

/* CTA */
.service-detail .sd-cta{
  text-align:center; margin-top:20px;
}
.service-detail .sd-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 24px; border-radius:14px;
  background:linear-gradient(135deg,#6366f1,#3b82f6); color:#fff;
  font-weight:800; font-size:16px; text-decoration:none;
  box-shadow:0 8px 22px rgba(59,130,246,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-detail .sd-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(59,130,246,.34); }

/* === Service Detail Professional Look === */
.service-detail {
  background: #f9fafb;
  padding: clamp(60px, 7vw, 90px) 0;
  text-align: center;
}

.service-detail h1 {
  font-size: clamp(32px, 5vw, 42px);
  font-weight: 800;
  color: #111827;
  margin-bottom: 14px;
}

.service-detail .sd-lead {
  font-size: 1.1rem;
  color: #6b7280;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* Feature cards */
.sd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

.sd-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.sd-icon {
  font-size: 34px;
  color: #4f46e5;
  margin-bottom: 14px;
}

.sd-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111827;
}

.sd-card p {
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.5;
}

/* What We Offer */
.sd-offers h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: #111827;
}

.sd-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.sd-item {
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 600;
  color: #111827;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sd-item::before {
  content: "\f00c"; /* check icon from FontAwesome */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #4f46e5;
}