/* Full CSS extracted from the original template's <style> block */
:root{
  /* Approximate palette inspired by elca.ch */
  --brand-red:#e30613;           /* accent */
  --brand-black:#111111;         /* headings */
  --brand-text:#2b2b2b;          /* body */
  --brand-muted:#6b7280;         /* muted */
  --bg:#ffffff;                  /* page bg */
  --section:#f5f7fb;             /* light gray section */
  --maxw:1200px;                 /* content width */
  --radius:18px;                 /* card radius */
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --transition:all .25s ease;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Instrument Sans",Sans-serif;color:var(--brand-text);background:var(--bg);}

/* About Page Styles */
.about-hero {
  height: 70vh;
  min-height: 500px;
}

/* New About Hero Section */
.about-hero-unique {
  position: relative;
  height: 85vh;
  min-height: 600px;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}

.about-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/about-us.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
}

.about-hero-unique::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.65) 100%);
  z-index: -1;
}

/* Services Page Hero Section */
.services-hero-unique {
  position: relative;
  height: 85vh;
  min-height: 600px;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}

.services-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/44.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
}

.services-hero-unique::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.65) 100%);
  z-index: -1;
}

/* Contact Page Hero Section */
.contact-hero-unique {
  position: relative;
  height: 85vh;
  min-height: 600px;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}

.contact-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/contact.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
}

.contact-hero-unique::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.65) 100%);
  z-index: -1;
}

/* Contact Hero Text Colors */
.contact-hero-unique h1 {
  color: #3f8d94;
}

.contact-hero-unique p {
  color: #3f8d94;
}

/* Keep spans with original styling */
.contact-hero-unique .eyebrow {
  color: #3f8d94;
}

.contact-hero-unique .eyebrow2 {
  color: #fe8e00;
}

.nav .active {
  color: #fe8e00;
}

/* What We Do Section */
.what-we-do {
  padding: 100px 0;
  background: var(--section);
}

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

.feature-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow);
  border-color: var(--brand-red);
}

.feature-icon {
  font-size: 40px;
  margin-bottom: 20px;
}

.feature-card h3 {
  color: var(--brand-black);
  margin-bottom: 15px;
  font-size: 20px;
}

.feature-card p {
  color: var(--brand-text);
  line-height: 1.6;
}

/* Contact Page Styles */
.contact-hero {
  height: 60vh;
  min-height: 450px;
}

.contact-section {
  padding: 100px 0;
  background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
}

.offices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 60px 0;
}

.office-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
  position: relative;
}

.office-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

.office-header {
  position: relative;
  height: 240px;
}

.office-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.office-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  z-index: 2;
}

.headquarters .office-badge {
  background: var(--brand-red);
  color: #fff;
}

.development .office-badge {
  background: #3f8d94;
  color: #fff;
}

.office-content {
  padding: 30px;
}

.office-content h3 {
  font-size: 24px;
  color: var(--brand-black);
  margin: 0 0 20px;
}

.office-details {
  display: grid;
  gap: 20px;
}

.detail-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.detail-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.detail-item p {
  margin: 0;
  color: var(--brand-text);
  line-height: 1.5;
}

.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.channel-card {
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.channel-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand-red);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.channel-icon {
  font-size: 36px;
  margin-bottom: 15px;
}

.channel-card h4 {
  color: var(--brand-black);
  font-size: 18px;
  margin: 0 0 10px;
}

.channel-card p {
  color: var(--brand-text);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .offices-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-channels {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .contact-channels {
    grid-template-columns: 1fr;
  }
}

.info-card {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.info-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.info-card h3 {
  color: var(--brand-black);
  margin: 0 0 8px;
  font-size: 18px;
}

.info-card p {
  color: var(--brand-text);
  margin: 0;
  line-height: 1.6;
}

.contact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #e5e7eb;
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--brand-red);
  margin-bottom: 8px;
}

.stat-text {
  color: var(--brand-text);
  font-size: 14px;
}

/* Contact Form Styles */
.contact-form-wrapper {
  background: #fff;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.form-header {
  margin-bottom: 30px;
}

.form-header h3 {
  color: var(--brand-black);
  font-size: 24px;
  margin: 0 0 8px;
}

.form-header p {
  color: var(--brand-text);
  margin: 0;
}

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-black);
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(227,6,19,0.1);
}

.form-group textarea {
  height: 120px;
  resize: vertical;
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: var(--brand-red);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(227,6,19,0.2);
}

.map-section {
  padding: 0 0 100px;
}

.maps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.map-wrapper {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  position: relative;
}

.map-label {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--brand-black);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index: 2;
}

@media (max-width: 1024px) {
  .maps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-info {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Services Page Styles */
.services-hero {
  height: 70vh;
  min-height: 500px;
}

.services-showcase {
  padding: 100px 0;
  background: linear-gradient(to bottom, #f8fafc, #fff);
}

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

.service-item {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}

.service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.service-icon {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.service-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-item:hover .service-icon img {
  transform: scale(1.1);
}

.service-content {
  padding: 30px;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.service-content h3 {
  color: var(--brand-black);
  font-size: 24px;
  margin: 0;
  position: relative;
  padding-bottom: 15px;
}

.service-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--brand-red);
  border-radius: 2px;
}

.service-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.service-features li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--brand-text);
}

.service-features li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--brand-red);
}

.service-content p {
  color: var(--brand-text);
  line-height: 1.6;
  margin: 0;
}

.service-cta {
  margin-top: auto;
  color: var(--brand-red);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.3s ease;
}

.service-cta:hover {
  gap: 10px;
}

@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* Journey Features Section */
.journey-features { 
  background: #f8fafc;
}

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

.journey-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journey-card::before {
  content: "";
  position: absolute;
  top: 24px;
  right: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3f8d94;
}

.journey-card:hover {
  border-color: #3f8d94;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.journey-card h3 {
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.journey-card p {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .journey-grid {
    grid-template-columns: 1fr;
  }
}

/* Why Top Companies Section */
.why-top-companies {
  padding: 100px 0;
  background: #fff;
}

.company-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.company-content h2 {
  font-size: 40px;
  color: var(--brand-black);
  margin-bottom: 40px;
}

.company-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}

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

.stat-number {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--brand-red);
  margin-bottom: 10px;
}

.stat-label {
  color: var(--brand-text);
  font-size: 14px;
  line-height: 1.4;
}

.company-description {
  color: var(--brand-text);
  line-height: 1.8;
  margin-bottom: 30px;
}

.company-image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.company-cta {
  background: var(--brand-red);
  color: #fff;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.company-cta:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(227,6,19,0.2);
}

@media (max-width: 768px) {
  .company-grid {
    grid-template-columns: 1fr;
  }
  
  .company-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .stat-item {
    padding: 20px;
    background: var(--section);
    border-radius: var(--radius);
  }
}

/* NAVBAR */
.navbar{position:fixed;inset:0 0 auto 0;display:flex;align-items:center;justify-content:center;height:76px;z-index:50;transition:var(--transition);background:transparent}
.navbar-inner{width:100%;max-width:var(--maxw);display:flex;align-items:center;gap:24px;padding:0 24px}
.brand{font-weight:800;letter-spacing:.5px;font-size:22px;color:#fff;transition:var(--transition)}
.brand span{color:var(--brand-red)}
.nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.nav a{color:#fff;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.2px;transition:var(--transition)}
.nav a:hover{opacity:.85}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  width: 30px;
  height: 24px;
  cursor: pointer;
  position: relative;
  margin-left: auto;
  z-index: 100;
}

@media (max-width: 640px) {
  .mobile-menu-toggle {
    display: block;
  }
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fe8e00;
  position: absolute;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-toggle span:first-child {
  top: 0;
}

.mobile-menu-toggle span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.mobile-menu-toggle span:last-child {
  bottom: 0;
}

.scrolled .mobile-menu-toggle span {
  background-color: #fe8e00;
}

/* Mobile Menu Toggle Animation */
.mobile-menu-toggle.active span:first-child {
  transform: translateY(11px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:last-child {
  transform: translateY(-11px) rotate(-45deg);
}
.cta{padding:10px 16px;border-radius:999px;border:2px solid #fff;color:#fff}
.navbar.scrolled{background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.navbar.scrolled .brand{color:var(--brand-black)}
.navbar.scrolled .nav a{color:var(--brand-black)}
.navbar.scrolled .cta{border-color:var(--brand-black);color:var(--brand-black)}

/* HERO */
.hero{position:relative;height:94vh;min-height:700px;display:grid;place-items:center;color:#fff;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.55) 100%)}
.hero-content{position:relative;z-index:1;width:100%;max-width:var(--maxw);padding:0 24px;display:grid;gap:22px}
.eyebrow{font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.9}
.hero h1{margin:0;max-width:900px;font-size:clamp(40px,7vw,70px);line-height:1.02;font-weight:900;letter-spacing:-.02em}
.hero p{max-width:820px;font-size:clamp(16px,2.2vw,20px);opacity:.95}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:none;cursor:pointer;font-weight:700;letter-spacing:.2px;background:#fff;color:#111;transition:var(--transition)}
.btn:hover{transform:translateY(-2px)}
.btn.secondary{background:transparent;border:2px solid #fe8e00;color: #fe8e00;}

/* SECTIONS */
section{padding:84px 0}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-header h2{margin:0;font-size:34px;letter-spacing:-.02em;color:var(--brand-black)}
.section-header a{color:var(--brand-red);font-weight:700;text-decoration:none}

/* GRID CARDS (Expertise) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:100%}
.card .thumb{aspect-ratio:16/9;background:#ddd;background-size:cover;background-position:center}
.card .body{padding:22px}
.card h3{margin:0 0 8px;font-size:20px;color:var(--brand-black)}
.card p{margin:0;color:#444}
.card .more{margin-top:auto;padding:18px 22px;border-top:1px solid #eef1f6;display:flex;justify-content:space-between;align-items:center;color:var(--brand-red);font-weight:700;text-decoration:none}

/* Industries (tiles) */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{position:relative;overflow:hidden;border-radius:14px;background:#000;color:#fff;min-height:130px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8;transition:var(--transition)}
.tile span{position:relative;z-index:1;display:block;padding:16px;font-weight:800;text-shadow:0 4px 18px rgba(0,0,0,.4)}
.tile:hover img{transform:scale(1.04)}

/* CTA band */
.cta-band{background:var(--section);padding:56px 0;border-top:1px solid #e9eef7;border-bottom:1px solid #e9eef7}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta-band h3{margin:0;font-size:28px;color:var(--brand-black)}

/* Footer */
footer{background:#0a0a0a;color:#cbd5e1;padding:64px 0 30px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:22px}
.footer-brand{font-weight:900;color:#fff;font-size:22px;margin-bottom:14px}
.foot a{display:block;color:#cbd5e1;text-decoration:none;padding:6px 0;font-size:14px}
.copy{border-top:1px solid #1f2937;margin-top:28px;padding-top:18px;color:#94a3b8;font-size:13px}

/* RESPONSIVE */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  
  /* Better container padding */
  .container {
    padding: 0 20px;
  }
  
  /* Improved spacing */
  section {
    padding: 70px 0;
  }
  
  /* Typography improvements */
  .hero h1 {
    font-size: clamp(36px, 6vw, 55px);
    line-height: 1.1;
  }
  
  .hero p {
    font-size: clamp(16px, 2.5vw, 18px);
  }
  
  .section-title2 {
    font-size: clamp(28px, 4vw, 40px);
  }
  
  .section-description {
    font-size: clamp(16px, 2vw, 18px);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  
  /* Mobile container */
  .container {
    padding: 0 16px;
  }
  
  /* Mobile section spacing */
  section {
    padding: 50px 0;
  }
  
  /* Mobile hero adjustments */
  .hero {
    height: 85vh;
    min-height: 600px;
    padding: 0 16px;
  }
  
  .hero h1 {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.1;
    margin-bottom: 16px;
  }
  
  .hero p {
    font-size: clamp(14px, 3.5vw, 17px);
    line-height: 1.5;
    margin-bottom: 24px;
  }
  
  .hero-actions {
    gap: 12px;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .hero-actions .btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
    padding: 14px 20px;
    font-size: 16px;
  }
  
  /* Mobile typography */
  .section-title2 {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.2;
    margin-bottom: 20px;
  }
  
  .section-description {
    font-size: clamp(14px, 3vw, 16px);
    line-height: 1.6;
    margin-bottom: 40px;
  }
  
  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
  }
  
  /* Mobile navigation improvements */
  .mobile-menu-toggle {
    display: block;
  }

  .nav {
    display: none;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(10px);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 999;
  }

  .nav.active {
    display: flex;
    transform: translateY(0);
    opacity: 1;
  }

  .scrolled .nav {
    background: rgba(255, 255, 255, 0.95);
  }

  .nav a {
    font-size: 18px;
    padding: 12px 24px;
    width: 100%;
    text-align: center;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
    transform: translateX(5px);
  }

  .scrolled .nav a {
    color: var(--brand-black);
  }

  .scrolled .nav a:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  .nav .cta {
    margin-top: 8px;
    width: auto;
    padding: 12px 24px;
  }
  
  /* Mobile card improvements */
  .card {
    margin-bottom: 20px;
  }
  
  .card .body {
    padding: 18px;
  }
  
  .card h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .card p {
    font-size: 14px;
    line-height: 1.5;
  }
  
  /* Mobile CTA improvements */
  .cta-band {
    padding: 40px 0;
    text-align: center;
  }
  
  .cta-band h3 {
    font-size: clamp(20px, 5vw, 24px);
    margin-bottom: 20px;
  }
  
  .cta-band .btn {
    width: 100%;
    max-width: 280px;
  }
  
  /* Mobile footer improvements */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  
  footer {
    padding: 50px 0 20px;
  }
  
  .copy {
    text-align: center;
    font-size: 12px;
  }
}
/* ===== GLOBAL RESPONSIVE IMAGE HANDLING ===== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive image containers */
.service-icon,
.feature-icon,
.office-image,
.company-image img,
.team-hero img {
  max-width: 100%;
  height: 250px;
  object-fit: cover;
}

/* Logo responsive handling */
.brand img.logo {
  height: clamp(32px, 4vw, 40px);
  width: auto;
  display: block;
}

.trusted-item img {
  width: 100%;
  height: 100%;
  max-width: 200px;
  max-height: 180px;
  object-fit: contain;
}

/* Video background responsive */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ===== IMPROVED SPACING FOR ALL DEVICES ===== */

/* Global container improvements */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

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

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

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

/* Section spacing improvements */
section {
  padding: 84px 0;
}

@media (max-width: 1024px) {
  section {
    padding: 70px 0;
  }
}

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

@media (max-width: 640px) {
  section {
    padding: 50px 0;
  }
}

@media (max-width: 480px) {
  section {
    padding: 40px 0;
  }
}

/* ===== HERO SECTION RESPONSIVE IMPROVEMENTS ===== */
.hero {
  position: relative;
  height: 94vh;
  min-height: 700px;
  display: grid;
  place-items: center;
  color: #fff;
  padding: 0 24px;
}

@media (max-width: 1024px) {
  .hero {
    height: 85vh;
    min-height: 650px;
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .hero {
    height: 80vh;
    min-height: 600px;
    padding: 0 16px;
  }
  
  .services-hero-unique,
  .about-hero-unique,
  .contact-hero-unique {
    height: 75vh;
    min-height: 550px;
  }
}

@media (max-width: 640px) {
  .hero {
    height: 75vh;
    min-height: 500px;
    padding: 0 16px;
  }
  
  .services-hero-unique,
  .about-hero-unique,
  .contact-hero-unique {
    height: 70vh;
    min-height: 500px;
  }
}

@media (max-width: 480px) {
  .hero {
    height: 70vh;
    min-height: 450px;
    padding: 0 12px;
  }
  
  .services-hero-unique,
  .about-hero-unique,
  .contact-hero-unique {
    height: 65vh;
    min-height: 450px;
  }
}

/* ===== CARD GRID RESPONSIVE IMPROVEMENTS ===== */

/* Services grid improvements */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 60px;
}

@media (max-width: 1200px) {
  .services-grid {
    gap: 30px;
  }
}

@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .services-grid {
    gap: 25px;
    margin-top: 30px;
  }
}

/* General grid improvements */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 1200px) {
  .grid {
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .grid {
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ===== BUTTON RESPONSIVE IMPROVEMENTS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: #fff;
  color: #111;
  transition: var(--transition);
  text-decoration: none;
  font-size: 16px;
  min-height: 48px;
}

@media (max-width: 768px) {
  .btn {
    padding: 14px 20px;
    font-size: 16px;
    min-height: 50px;
  }
}

@media (max-width: 640px) {
  .btn {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 52px;
    width: 100%;
    max-width: 300px;
  }
}

/* ===== TYPOGRAPHY RESPONSIVE IMPROVEMENTS ===== */

/* Heading responsive scaling */
h1 {
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.3;
  font-weight: 700;
}

h3 {
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.4;
  font-weight: 600;
}

h4 {
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.4;
  font-weight: 600;
}

/* Paragraph responsive scaling */
p {
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
  margin-bottom: 16px;
}

.lead,
.section-description {
  font-size: clamp(16px, 2.5vw, 18px);
  line-height: 1.6;
}

/* ===== NAVBAR RESPONSIVE IMPROVEMENTS ===== */
.navbar {
  height: clamp(70px, 8vw, 76px);
}

@media (max-width: 640px) {
  .navbar {
    height: 70px;
  }
  
  .navbar-inner {
    padding: 0 16px;
  }
  
  .brand {
    font-size: clamp(18px, 4vw, 22px);
  }
}

/* ===== FOOTER RESPONSIVE IMPROVEMENTS ===== */
footer {
  background: #0a0a0a;
  color: #cbd5e1;
  padding: 64px 0 30px;
}

@media (max-width: 1024px) {
  footer {
    padding: 50px 0 25px;
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  footer {
    padding: 40px 0 20px;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  footer {
    padding: 35px 0 15px;
  }
  
  .footer-brand {
    font-size: 20px;
    margin-bottom: 12px;
  }
  
  .foot a {
    font-size: 13px;
    padding: 5px 0;
  }
}

/* ===== TRUSTED BY SECTION RESPONSIVE ===== */
.trustedby {
  width: 100%;
  background: #fff;
  height: 400px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding-top: 70px;
  margin-bottom: 50px;
}

@media (max-width: 1024px) {
  .trustedby {
    height: 350px;
    padding-top: 60px;
    margin-bottom: 40px;
  }
  
  .trusted-item {
    width: 200px;
    height: 150px;
  }
  
  .trusted-item img {
    width: 180px;
    height: 180px;
  }
}

@media (max-width: 768px) {
  .trustedby {
    height: 300px;
    padding-top: 50px;
    margin-bottom: 30px;
  }
  
  .trusted-track {
    gap: 40px;
  }
  
  .trusted-item {
    width: 150px;
    height: 120px;
  }
  
  .trusted-item img {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 640px) {
  .trustedby {
    height: 250px;
    padding-top: 40px;
    margin-bottom: 25px;
  }
  
  .trusted-track {
    gap: 30px;
  }
  
  .trusted-item {
    width: 120px;
    height: 100px;
  }
  
  .trusted-item img {
    width: 120px;
    height: 120px;
  }
  
  .trustedby .title h3 {
    font-size: 16px;
  }
}

/* ===== ENGAGEMENT MODELS RESPONSIVE ===== */
.engagement {
  background: #3f8d94;
  color: #e9e7f5;
  padding: 90px 0 225px;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .engagement {
    padding: 70px 0 150px;
  }
  
  .em-grid {
    gap: 25px;
  }
}

@media (max-width: 768px) {
  .engagement {
    padding: 60px 0 120px;
  }
  
  .em-grid {
    grid-template-columns: 1fr;
    max-width: 450px;
    gap: 20px;
  }
  
  .em-card {
    min-height: 350px;
    padding: 25px 20px 0;
  }
}

@media (max-width: 640px) {
  .engagement {
    padding: 50px 0 80px;
  }
  
  .engagement .eyebrow {
    font-size: 16px;
    margin-bottom: 40px;
    margin-top: 60px;
  }
  
  .engagement .lead {
    margin: 30px auto 60px;
  }
}

/* smooth infinite scroll */
@keyframes scroll-x {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* sepse duplikojmë përmbajtjen */
}

/* ===== TRUSTED BY / LOGO CAROUSEL ===== */
.trustedby {
  width: 100%;
  background: #fff;
  height: 400px; /* increased height for larger logos */
  display: flex;
  align-items: flex-start; /* title should be at the top */
  justify-content: center;
  overflow: hidden;
  padding-top: 70px;
  margin-bottom: 50px;
}
.trustedby .container { max-width: var(--maxw); padding: 0 24px; display:flex; flex-direction:column; align-items:center; }
.trustedby .title { text-align: center; margin-bottom: 20px; }
.trustedby .title h3 { margin: 0; font-size: 18px; color: #3f8d94; font-weight:700; }
.trustedby .marquee-wrap { position: relative; width: 100%; }
.trusted-track {
  display: flex; align-items:center; gap: 60px; padding: 8px 0;
  will-change: transform; animation: scroll-x 25s linear infinite; justify-content:center;
}
.trusted-track.paused { animation-play-state: paused; }
.trusted-item { flex: 0 0 auto; width: 250px; height: 180px; display:flex; align-items:center; justify-content:center; }
.trusted-item a{ display:block; width:200px; height:200px; }
.trusted-item img{ width:200px; height:150px; object-fit:contain; filter: grayscale(100%) contrast(1.05) brightness(.9); opacity:.85; transition: filter .22s ease, transform .18s ease, opacity .18s ease; }
.trusted-item img:hover{ filter: none; opacity: 1; transform: translateY(-6px); }
.trustedby .marquee-mask{ position:absolute; inset:0; pointer-events:none; mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }

.consulting{
  color: #fff;
  padding-bottom: 130px;
  padding-top: 130px;
}
.consulting-cta .btn{
  margin-top: 24px;
  background: #fe8e00;
  color: #fff;
  text-decoration: none;
}
.eyebrow2 {
    color: #fe8e00;
    opacity: .9;
}
/* individual logo “chips” */
.logo {
  flex: 0 0 auto;
  height: 42px;
  /* filter: grayscale(100%) contrast(1.1) brightness(0.45); */
  opacity: .9;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}
/* .logo:hover {
  transform: translateY(-2px);
  filter: grayscale(0%) brightness(1);
  opacity: 1;
} */

/* responsive spacing */
@media (max-width: 640px){
  .logo-track { gap: 28px; }
  .logo { height: 34px; }
}

/* ===== PROCESS / HOW IT WORKS ===== */
.process {
  padding: 80px 0 60px;
  text-align: center;
}
.process .kicker {
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fe8e00;
  font-size: 12px;
  margin-bottom: 35px;
}
.process h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: -0.02em;
  color: #0f172a;
}
.process p.lead {
  margin: 0 auto 36px;
  max-width: 920px;
  color: #475569;
  font-size: clamp(14px, 2.4vw, 18px);
}

/* wrapper i hapave */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
  margin-top: 28px;
  padding: 20px 0 10px;
}

/* vija e animuar – "marching ants" */
.steps::before {
  content: "";
  position: absolute;
  left: min(5vw, 48px);
  right: min(5vw, 48px);
  top: 58px;                /* i kalon mes ikonave */
  height: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    #3f8d94 0 12px,
    transparent 12px 26px
  );
  animation: dash-move 2.2s linear infinite;
  pointer-events: none;
}
@keyframes dash-move {
  from { background-position: 0 0; }
  to   { background-position: 100px 0; }
}

/* karta/ikona e hapit */
.step {
  text-align: center;
}
.icon-box {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(99,102,241,.12);
  border: 1px solid #eef2ff;
  position: relative;
  z-index: 1; /* që të dali mbi vijën */
}
.icon-box svg {
  width: 26px; height: 26px;
  stroke: #fe8e00; fill: none; stroke-width: 2;
}

.step .step-num {
  margin: 30px 0 30px;
  color: #3f8d94;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
}
.step h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.4vw, 22px);
  color: #0f172a;
}
.step p {
  margin: 0 auto;
  max-width: 320px;
  color: #475569;
  font-size: 15px;
}

/* CTA */
.process .cta {
  margin-top: 80px; 
}
.process .btn {
  display:inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  background: #fe8e00;
  color: #fff;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(79,70,229,.25);
  text-decoration: none;
}
.process .btn:hover { transform: translateY(-2px); }

/* mobile */
@media (max-width: 980px){
  .steps { grid-template-columns: repeat(2,1fr); }
  .steps::before { display: none; } /* e fshehim vijën në mobile për saktësi layouti */
}
@media (max-width: 520px){
  .steps { grid-template-columns: 1fr; }
}
/* === TEAM / PEOPLE === */
.team { 
  padding: 72px 0; 
  background:#f4f6fb; 
}

.team-cardwrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; 
  margin-bottom: 150px;
  margin-top: 100px;
}

/* ===== WHY PARTNER WITH US ===== */
.partner { padding: 72px 0; background: #f5f7fb; color: #06264a; }
.partner .container{ max-width: var(--maxw); padding: 0 24px; }
.partner .lead { margin: 12px 0 0; color: #475569; max-width: 500px; }
.partner-grid-top { display: grid; grid-template-columns: 1fr 440px; gap: 36px; align-items: start; }
.partner-grid-top h2{
    color: var(--e-global-color-text);
    font-size: 45px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1.1em;
}
 
.partner-hero-img{ width:75%; border-radius: 8px; box-shadow: 0 18px 40px rgba(15,23,42,.06); }

.partner-grid { margin-top: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.partner-card {padding-bottom: 50px; background:#fff; border-radius: 14px; padding: 22px; border: 2px solid #3f8d94; box-shadow: 0 8px 18px rgba(15,23,42,0.04); min-height: 160px; display:flex; flex-direction:column; justify-content:flex-start; }
.partner-card h4{ 
    color: var(--e-global-color-text);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2em; 
}
.partner-card p{ margin:0; color:#334155; font-size:14px; line-height:1.5 ;    max-width: 285px;
    font-weight: 400;}

.partner-card.image-card { padding:0; overflow:hidden; position:relative; }
.partner-card.image-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.partner-card.image-card .cta { position:absolute; left:18px; bottom:18px; }
.partner-card .btn.small{ padding:10px 16px; border-radius:10px; background:#fe8e00; color:#fff; 
  text-decoration:none; border:none !important }
 
@media (max-width: 980px){
  .partner-grid-top{ grid-template-columns: 1fr; }
  .partner-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .partner-grid{ grid-template-columns: 1fr; }
}


.team h2{
  margin: 0 0 18px;
  font-size: clamp(50px, 4.4vw, 44px);
  color:#0b2a53; letter-spacing:-.02em;
}
.team p.lead{
  margin: 0 0 28px;
  color:#20374d; font-size: clamp(15px, 2.2vw, 18px); line-height:1.7;
  max-width: 440px;             /* textit i japim gjerësi të lexueshme */
}
.team .btn{
    display: inline-block;
    background: #fe8e00;
    color: #ffffff;
    font-weight: 800;
    border-radius: 12px;
    padding: 14px 22px;
    text-decoration: none;
    margin-top: 50px;
}
.team .btn:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(241,179,4,.45); }

/* kontejneri i fotos së vetme */
.team-hero{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 1 foto – rri plotësisht brenda kutisë */
.team-hero img{
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 22px 48px rgba(15,23,42,.12);
}

@media (max-width: 980px){
  .team-cardwrap { 
    grid-template-columns: 1fr; 
    gap: 32px;
    text-align: center;
  }
  .team-hero {
    justify-content: center;
  }
  .team p.lead {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== INDUSTRIES ===== */
/* industries rules removed */

/* ===== ENGAGEMENT MODELS (dark / neon) ===== */
.engagement {
  background: #3f8d94;
  color: #e9e7f5;
  padding: 90px 0 225px;
  overflow: hidden;
}
.engagement .eyebrow {
  text-align: center;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 18px;
  color: #fe8e00;
  margin-bottom: 60px;
  margin-top: 80px;
}
.engagement h2 {
  text-align: center;
  font-size: clamp(28px, 4.8vw, 48px);
  letter-spacing: .03em;
  margin: 0 0 10px;
}
.engagement .lead {
  text-align: center;
  max-width: 880px;
  margin: 50px auto 80px;
  color: #fff;
  font-size: clamp(14px, 2.4vw, 18px);

      
}

.em-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
  max-width: 1000px;
  margin: 0 auto;
}

.em-card {
  position: relative;
  background: radial-gradient(120% 100% at 0% 0%, #151228 0%, #0f0d1b 60%, #0d0b14 100%);
  border: 1px solid #2b2440;
  border-radius: 18px;
  padding: 32px 28px 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 450px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin-bottom: 24px;
}

.em-card:hover {
  transform: translateY(-6px);
  border-color: #fe8e00;
  box-shadow: 0 14px 40px rgb(244 220 77 / 25%);
} 
.em-title {
  text-align: center;
  font-size: clamp(18px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  margin: 6px 0 14px;
}

.em-illus {
  margin: 4px auto 0;
  width: min(360px, 88%);
  height: 160px;
  border-radius: 14px; 
  display: grid;
  place-items: center;
  position: relative;
}

.em-illus img {
  width: 370px;
  margin-top: 15px;
}
.em-illus svg { width: 72px; height: 72px; stroke: #bfa9ff; fill: none; stroke-width: 2; opacity: .9; }

.em-bottom {
     margin-top: 22px; 
    border-radius: 14px;
    padding: 18px 18px 22px;
    color: #ffffff; 
    min-height: 120px;
}
.em-bottom p { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 500;}

/* Responsive */
@media (max-width: 768px) {
  .em-grid { 
    grid-template-columns: 1fr;
    max-width: 450px;
  }
  .em-card { 
    min-height: 380px;
  }
}


.why-choose-section {
  background: radial-gradient(circle at top left, #0f172a, #020617);
  color: #fff;
  padding: 120px 20px 160px 0;
  text-align: center;
  position: relative;
}

.why-choose-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: #fe8e00;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px; 
  color: #0f172a;
  margin-bottom: 60px;
}

.section-title2 {
  font-size: 2.5rem;
  font-weight: 700;
  background: #3f8d94;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px; 
  color: #0f172a;
  margin-bottom: 60px;
  text-align: center;
}

.section-subtitle {
  font-size: 21px;
  color: #cbd5e1;
  max-width: 700px;
  margin: 0 auto 60px;
  line-height: 1.6;
  margin-bottom: 100px;
}
.section-why-subtitle {
  font-size: 21px;
  color: #cbd5e1; 
  margin: 0 auto 60px;
  line-height: 1.6;
  margin-bottom: 100px;
}

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

.benefit-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 30px 20px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 transparent;
}

.benefit-card:hover {
  transform: translateY(-8px);
  border-color: #fe8e00 ;
  box-shadow: 0 10px 30px rgba(254,142,0,.2);
}

.benefit-card .icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  display: inline-block;
  background: linear-gradient(90deg, #7c3aed, #00b8d9);
  -webkit-background-clip: text; 
  background-clip: text;
-webkit-background-clip: text; 
margin-bottom: 20px;
}

.benefit-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #fff;
}

.benefit-card p {
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.6;
}

.cta-section {
  background: linear-gradient(90deg, #3f8d94, #c9c8cc);
  color: #fff;
  text-align: center;
  padding: 100px 20px;
  border-radius: 24px;
  margin: 100px auto;
  max-width: 1200px;
}
.cta-section h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.cta-section p {
  font-size: 1.1rem;
  color: #f1f5f9;
  margin-bottom: 40px;
}
.cta-btn {
  background: #fff;
  color: #111;
  padding: 14px 32px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: 0.3s;
}
.cta-btn:hover {
  background: #0f172a;
  color: #fff;
}
.our-services-section {
  background: #f8fafc;
  padding: 100px 20px;
}

.our-services-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Industries Grid Layout */
.industries-grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.industries-left {
  text-align: left;
}

.industries-title {
  font-size: 3rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  margin-bottom: 24px;
}

/* New centered styles */
.industries-title-centered {
  font-size: 3rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  margin-bottom: 24px;
  text-align: center;
}

.industries-description-centered {
  color: #64748b;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 48px;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.industries-button-wrapper {
  text-align: center;
  margin-top: 48px;
}

.btn-industries-centered {
  background: #3f8d94;
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-industries-centered:hover {
  background: #2d6b73;
  transform: translateY(-2px);
}

.highlight-text {
  color: #3f8d94;
}

.industries-description {
  color: #64748b;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 32px;
}

.btn-industries {
  background: #3f8d94;
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-industries:hover {
  background: #2d6b73;
  transform: translateY(-2px);
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.industry-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.industry-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #3f8d94;
  transition: height 0.3s ease;
  z-index: 1;
}

.industry-item:hover::before {
  height: 4px;
}

.industry-item:hover {
  border-color: #3f8d94;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(63, 141, 148, 0.15);
}

.industry-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.industry-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

.industry-arrow {
  color: #94a3b8;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.industry-item:hover .industry-arrow {
  color: #3f8d94;
  transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .industries-grid-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .industries-left {
    text-align: center;
  }
  
  .industries-title, .industries-title-centered {
    font-size: 2.2rem;
  }
  
  .industries-grid {
    grid-template-columns: 1fr;
  }
}

 

.section-description {
  color: #475569;
  font-size: 1.1rem;
  /* max-width: 700px;  */
  line-height: 1.6;
  text-align: center;
}

.section-ino-description {
  margin: 0 auto 36px;
  max-width: 920px;
  color: #475569;
  font-size: clamp(14px, 2.4vw, 18px);
  text-align: center;
  margin-top: 30px;
  margin-bottom: 60px;
}

.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 30px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 40px 24px;
  flex: 0 0 350px;
  text-align: center;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.icon-wrapper {
  width: 70px;
  height: 70px;
  background: #cac9c8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.icon {
  font-size: 1.8rem;
}

.icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.service-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

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

.carousel-btn {
  background: none;
  border: 2px solid #0f172a;
  color: #0f172a;
  font-size: 1.5rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: 0.3s;
  z-index: 2;
}

.carousel-btn:hover {
  background: #0f172a;
  color: #fff;
}

.prev { left: 0; }
.next { right: 0; }

.carousel-footer {
  margin-top: 40px;
}

.footer-title {
  font-weight: 700;
  font-size: 1.2rem;
  color: #0f172a;
}

/* MISSION SECTION */
.mission {
  background: #f9fafb;
  padding: 100px 20px;
  text-align: center;
}

.mission .container {
  max-width: 1100px;
  margin: 0 auto;
}

.mission .section-title2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #0f172a;
}

.mission .section-description {
  color: #475569;
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 60px auto;
}

/* Mission Grid */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
  justify-content: center;
}

.mission-item {
  background: #fff;
  border-radius: 16px;
  padding: 40px 25px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  text-align: center;
}

.mission-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.mission-item img {
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
}

.mission-item h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 10px;
}

.mission-item p {
  color: #64748b;
  font-size: 1rem;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .mission {
    padding: 70px 20px;
  }

  .mission-item {
    padding: 30px 20px;
  }

  .mission .section-title2 {
    font-size: 1.8rem;
  }
}


  

/* SERVICES SECTION */
.services-showcase {
  background: #ffffff;
  padding: 100px 20px;
}

.services-showcase .container {
  max-width: 1150px;
  margin: 0 auto;
  text-align: center;
}

.services-showcase .section-title2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.services-showcase .section-description {
  color: #475569;
  max-width: 800px;
  margin: 0 auto 60px auto;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* GRID */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 50px;
}

/* SERVICE CARD */
.service-item {
  display: flex;
  align-items: flex-start;
  background: #f9fafb;
  border-radius: 18px;
  padding: 40px 30px;
  gap: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.service-item:hover {
  transform: translateY(-6px);
  background: linear-gradient(135deg, #ffffff 0%, #e6f8f8 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ICON */
.service-icon img { 
  border-radius: 14px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.service-item:hover .service-icon img {
  transform: scale(1.05);
}

/* CONTENT */
.service-content {
  text-align: left;
}

.service-content h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 10px;
}

.service-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
}

.service-content ul li {
  font-size: 1rem;
  color: #475569;
  margin-bottom: 6px;
  position: relative;
  padding-left: 18px;
}

.service-content ul li::before {
  content: "✔";
  color: #00a7a7;
  position: absolute;
  left: 0;
  font-size: 0.9rem;
}

.service-content p {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

.service-cta {
  font-weight: 600;
  color: #00a7a7;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-cta:hover {
  color: #007777;
  text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .service-item {
    flex-direction: column;
    text-align: center;
  }

  .service-icon img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto 20px;
  }

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

/* ===== SERVICE DETAIL PAGES STYLES ===== */
.service-overview {
  padding: 80px 0;
  background: #ffffff;
}

.service-intro {
  text-align: center;
  margin-bottom: 80px;
}

.service-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 60px;
}

.service-feature {
  background: #f8fafc;
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.service-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-feature h3 {
  color: var(--brand-black);
  font-size: 24px;
  margin-bottom: 15px;
}

.service-feature ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  text-align: left;
}

.service-feature ul li {
  padding: 5px 0;
  color: var(--brand-text);
  position: relative;
  padding-left: 20px;
}

.service-feature ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand-red);
  font-weight: bold;
}

.service-feature p {
  color: var(--brand-text);
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Service Benefits */
.service-benefits {
  padding: 80px 0;
  background: #f8fafc;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.benefit-item {
  background: #fff;
  border-radius: 16px;
  padding: 30px 25px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.benefit-item:hover {
  transform: translateY(-5px);
  border-color: var(--brand-red);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.benefit-item h3 {
  color: var(--brand-black);
  font-size: 20px;
  margin-bottom: 15px;
}

.benefit-item p {
  color: var(--brand-text);
  line-height: 1.6;
}

/* Service Process */
.service-process {
  padding: 80px 0;
  background: #ffffff;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.process-step {
  text-align: center;
}

.step-number {
  width: 60px;
  height: 60px;
  background: var(--brand-red);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto 20px;
}

.process-step h3 {
  color: var(--brand-black);
  font-size: 18px;
  margin-bottom: 15px;
}

.process-step p {
  color: var(--brand-text);
  font-size: 14px;
  line-height: 1.6;
}

/* Service CTA Section */
.service-cta-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--brand-red), #c41e3a);
}

.cta-content {
  text-align: center;
  color: #fff;
}

.cta-content h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.cta-content p {
  font-size: 18px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.cta-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn.outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.btn.outline:hover {
  background: #fff;
  color: var(--brand-red);
}

/* Service Technologies */
.service-technologies {
  padding: 80px 0;
  background: #f8fafc;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.tech-category {
  background: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
}

.tech-category h3 {
  color: var(--brand-black);
  font-size: 18px;
  margin-bottom: 20px;
}

.tech-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.tech-items span {
  background: var(--section);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--brand-text);
}

/* Service Expertise */
.service-expertise {
  padding: 80px 0;
  background: #ffffff;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.expertise-category {
  background: #f8fafc;
  border-radius: 16px;
  padding: 30px 20px;
}

.expertise-category h3 {
  color: var(--brand-black);
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
}

.expertise-category ul {
  list-style: none;
  padding: 0;
}

.expertise-category ul li {
  padding: 8px 0;
  color: var(--brand-text);
  border-bottom: 1px solid #e5e7eb;
}

.expertise-category ul li:last-child {
  border-bottom: none;
}

/* Service Solutions */
.service-solutions {
  padding: 80px 0;
  background: #f8fafc;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.solution-item {
  background: #fff;
  border-radius: 16px;
  padding: 40px 30px;
}

.solution-item h3 {
  color: var(--brand-black);
  font-size: 20px;
  margin-bottom: 15px;
}

.solution-item p {
  color: var(--brand-text);
  line-height: 1.6;
  margin-bottom: 20px;
}

.solution-item ul {
  list-style: none;
  padding: 0;
}

.solution-item ul li {
  padding: 5px 0;
  color: var(--brand-text);
  position: relative;
  padding-left: 20px;
}

.solution-item ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--brand-red);
}

/* Service Platforms */
.service-platforms {
  padding: 80px 0;
  background: #ffffff;
}

.platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.platform-item {
  background: #f8fafc;
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
}

.platform-item h3 {
  color: var(--brand-black);
  font-size: 20px;
  margin-bottom: 15px;
}

.platform-item p {
  color: var(--brand-text);
  line-height: 1.6;
  margin-bottom: 20px;
}

.platform-item ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.platform-item ul li {
  padding: 8px 0;
  color: var(--brand-text);
  position: relative;
  padding-left: 20px;
}

.platform-item ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand-red);
  font-weight: bold;
}

/* Service Tools */
.service-tools {
  padding: 80px 0;
  background: #f8fafc;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.tool-category {
  background: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
}

.tool-category h3 {
  color: var(--brand-black);
  font-size: 18px;
  margin-bottom: 20px;
}

.tool-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.tool-items span {
  background: var(--section);
  padding: 6px 10px;
  border-radius: 16px;
  font-size: 11px;
  color: var(--brand-text);
}

/* Service Areas */
.service-areas {
  padding: 80px 0;
  background: #ffffff;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.area-item {
  background: #f8fafc;
  border-radius: 16px;
  padding: 40px 30px;
}

.area-item h3 {
  color: var(--brand-black);
  font-size: 20px;
  margin-bottom: 15px;
}

.area-item p {
  color: var(--brand-text);
  line-height: 1.6;
  margin-bottom: 20px;
}

.area-item ul {
  list-style: none;
  padding: 0;
}

.area-item ul li {
  padding: 5px 0;
  color: var(--brand-text);
  position: relative;
  padding-left: 20px;
}

.area-item ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand-red);
  font-weight: bold;
}

/* Service Framework */
.service-framework {
  padding: 80px 0;
  background: #f8fafc;
}

.framework-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.framework-step {
  background: #fff;
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
}

.step-icon {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.framework-step h3 {
  color: var(--brand-black);
  font-size: 18px;
  margin-bottom: 15px;
}

.framework-step p {
  color: var(--brand-text);
  font-size: 14px;
  line-height: 1.6;
}

/* Service Metrics */
.service-metrics {
  padding: 80px 0;
  background: #ffffff;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.metric-item {
  background: #f8fafc;
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
}

.metric-number {
  font-size: 48px;
  font-weight: bold;
  color: var(--brand-red);
  display: block;
  margin-bottom: 10px;
}

.metric-item h3 {
  color: var(--brand-black);
  font-size: 18px;
  margin-bottom: 10px;
}

.metric-item p {
  color: var(--brand-text);
  font-size: 14px;
  line-height: 1.6;
}

/* ===== RESPONSIVE STYLES FOR SERVICE PAGES ===== */

/* Large Desktop */
@media (max-width: 1200px) {
  .service-details-grid,
  .solutions-grid,
  .areas-grid {
    gap: 30px;
  }
  
  .platforms-grid {
    gap: 30px;
  }
  
  .tech-grid,
  .expertise-grid,
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .framework-steps,
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .service-details-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .platforms-grid,
  .solutions-grid,
  .areas-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .tech-grid,
  .expertise-grid,
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .framework-steps,
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Large */
@media (max-width: 768px) {
  .service-overview,
  .service-benefits,
  .service-process,
  .service-cta-section,
  .service-technologies,
  .service-expertise,
  .service-solutions,
  .service-platforms,
  .service-tools,
  .service-areas,
  .service-framework,
  .service-metrics {
    padding: 60px 0;
  }
  
  .service-intro {
    margin-bottom: 50px;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .process-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-actions .btn {
    width: 100%;
    max-width: 300px;
  }
  
  .tech-grid,
  .expertise-grid,
  .tools-grid,
  .framework-steps,
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .service-feature,
  .benefit-item,
  .solution-item,
  .platform-item,
  .area-item,
  .framework-step,
  .metric-item {
    padding: 30px 20px;
  }
  
  .feature-icon {
    width: 60px;
    height: 60px;
  }
  
  .step-number {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }
  
  .services-hero-unique,
  .about-hero-unique,
  .contact-hero-unique {
    height: 70vh;
    min-height: 500px;
  }
  
  .hero-content h1 {
    font-size: clamp(28px, 8vw, 40px);
  }
  
  .hero-content p {
    font-size: clamp(14px, 4vw, 16px);
  }
  
  .hero-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  .section-title2 {
    font-size: clamp(24px, 6vw, 32px);
  }
  
  .section-description {
    font-size: 16px;
  }
  
  .service-feature h3,
  .benefit-item h3,
  .solution-item h3,
  .platform-item h3,
  .area-item h3 {
    font-size: 20px;
  }
  
  .tech-items span,
  .tool-items span {
    font-size: 10px;
    padding: 4px 8px;
  }
  
  .metric-number {
    font-size: 36px;
  }
  
  .step-icon {
    font-size: 36px;
  }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
  .service-feature,
  .benefit-item,
  .solution-item,
  .platform-item,
  .area-item,
  .framework-step,
  .metric-item {
    padding: 20px 15px;
  }
  
  .cta-content h2 {
    font-size: 28px;
  }
  
  .cta-content p {
    font-size: 16px;
  }
}

/* Improve image responsiveness */
.service-icon img,
.feature-icon img {
  max-width: 100%;
  height: auto;
}

/* Ensure text doesn't overflow */
.service-feature p,
.benefit-item p,
.solution-item p,
.platform-item p,
.area-item p,
.framework-step p,
.metric-item p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Better button spacing on mobile */
@media (max-width: 640px) {
  .hero-actions .btn {
    padding: 14px 20px;
    font-size: 16px;
  }
  
  .cta-actions .btn {
    padding: 16px 24px;
    font-size: 16px;
  }
}