/* CSS Variables and Base Styles */
:root{
  --bg:#0c1117;
  --card:#111827;
  --muted:#9aa4b2;
  --text:#e5e7eb;
  --brand:#1ea672;
  --brand-600:#158f61;
  --accent:#22c55e;
  --ring:rgba(30,166,114,.35);
  --container:1200px;
  --radius:14px;
  --transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-light:0 10px 40px rgba(0,0,0,.1);
  --shadow-medium:0 20px 60px rgba(0,0,0,.15);
  --shadow-heavy:0 30px 80px rgba(0,0,0,.25);
}
/* Light theme */
[data-theme="light"] {
  --bg: #ffffff;
  --card: #f8fafc;
  --muted: #475569;
  --text: #1e293b;
  --shadow-light: 0 10px 40px rgba(0,0,0,.08);
  --shadow-medium: 0 20px 60px rgba(0,0,0,.12);
  --shadow-heavy: 0 30px 80px rgba(0,0,0,.18);
}

[data-theme="light"] body {
  background: 
    linear-gradient(rgba(248,250,252,.95), rgba(248,250,252,.95)),
    radial-gradient(900px 600px at 70% 22%, rgba(34,197,94,.08), transparent 70%),
    radial-gradient(700px 520px at 18% 80%, rgba(34,197,94,.05), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 60%, #f1f5f9 100%);
  color: var(--text);
}

[data-theme="light"] .site-header {
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

[data-theme="light"] .nav-menu a {
  color: #475569;
}

[data-theme="light"] .nav-menu a:hover {
  color: #1e293b;
}

/* Additional light mode text improvements */
[data-theme="light"] .nav-menu a {
  color: #374151 !important;
}

[data-theme="light"] .contact-details li {
  color: #334155 !important;
}

[data-theme="light"] .contact-details li strong {
  color: #1e293b !important;
}

[data-theme="light"] .about-highlights li {
  color: #475569 !important;
  background: rgba(30,166,114,.08);
  border: 1px solid rgba(30,166,114,.2);
}

[data-theme="light"] .hero-slide .hero-caption p {
  color: #f1f5f9 !important;
}

[data-theme="light"] .nav-menu a.active {
  background: rgba(30,166,114,.1);
  border-color: rgba(30,166,114,.3);
  color: var(--brand);
}

[data-theme="light"] .service-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .contact-form-wrap {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-light);
}

[data-theme="light"] .hero h1,
[data-theme="light"] .section-title,
[data-theme="light"] h2, 
[data-theme="light"] h3, 
[data-theme="light"] h4 {
  color: var(--text);
}

[data-theme="light"] .hero p,
[data-theme="light"] .about-text p,
[data-theme="light"] .service-card p,
[data-theme="light"] .faq-answer p {
  color: #334155 !important;
}

[data-theme="light"] .stat-number {
  color: var(--brand);
}

[data-theme="light"] .stat-label {
  color: #475569 !important;
}

[data-theme="light"] .faq-question {
  color: var(--text);
}

[data-theme="light"] .contact-details li {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.08);
}

[data-theme="light"] .contact-details li strong {
  color: var(--text);
}

[data-theme="light"] .footer-section h3,
[data-theme="light"] .footer-section h4 {
  color: var(--text);
}

[data-theme="light"] .footer-section p,
[data-theme="light"] .footer-section ul li a {
  color: #475569 !important;
}

[data-theme="light"] .site-footer {
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border-top: 1px solid rgba(0,0,0,.08);
}


*,*::before,*::after{box-sizing:border-box;word-wrap:break-word}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100vw}
html{scroll-behavior:smooth}
body{width:100%;max-width:100vw;overflow-wrap:break-word}
img,video,iframe{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.hero-track,.carousel-track{width:100%;overflow:hidden}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;box-sizing:border-box}

/* Loading Screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-spinner {
  text-align: center;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(30,166,114,.2);
  border-top: 3px solid var(--brand);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner p {
  color: var(--muted);
  margin: 0;
}


body {
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';
  background:
    linear-gradient(rgba(8,12,20,.84), rgba(8,12,20,.84)),
    radial-gradient(900px 600px at 70% 22%, rgba(34,197,94,.16), transparent 70%),
    radial-gradient(700px 520px at 18% 80%, rgba(34,197,94,.10), transparent 70%),
    linear-gradient(180deg,#0b1220 0%,#0d1421 60%,#0f1623 100%);
  color:var(--text);
  line-height:1.6;
  transition: var(--transition);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  word-wrap: break-word;
  hyphens: auto;
}

p, span, li, a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,17,23,.6);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.logo span{font-size:clamp(16px,2.2vw,22px);letter-spacing:.2px}
.logo img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

/* Theme Toggle */
.theme-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 15px;
  cursor: pointer;
  transition: var(--transition);
  margin-left: 16px;
}

.theme-toggle i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  transition: var(--transition);
}

.theme-toggle .fa-moon {
  left: 8px;
  opacity: 1;
}

.theme-toggle .fa-sun {
  right: 8px;
  opacity: 0;
}

[data-theme="light"] .theme-toggle .fa-moon {
  opacity: 0;
}

[data-theme="light"] .theme-toggle .fa-sun {
  opacity: 1;
  color: #f59e0b;
}

.theme-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

[data-theme="light"] .theme-toggle::before {
  transform: translateX(30px);
  background: #fbbf24;
}
/* Navigation - Desktop and Mobile */
.desktop-nav {
  display: block;
}

.mobile-nav {
  display: none;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: #cbd5e1;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.nav-menu a:hover {
  color: #fff;
}

.nav-menu a.active {
  background: rgba(255,255,255,.06);
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 0 0 1px rgba(34,197,94,.25), 0 6px 18px rgba(30,166,114,.22);
  color: #fff;
}

/* Mobile Navigation */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  transition: background 0.3s ease;
  z-index: 1001;
  position: relative;
}

.mobile-nav-toggle:hover {
  background: rgba(255,255,255,.1);
}

.mobile-nav-toggle span {
  width: 25px;
  height: 3px;
  background: #cbd5e1;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.mobile-nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

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

.mobile-nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
}

.mobile-nav-menu.active {
  visibility: visible;
  opacity: 1;
}

.mobile-nav-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
}

.mobile-nav-content {
  position: absolute;
  top: 64px;
  right: 20px;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  min-width: 200px;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.mobile-nav-menu.active .mobile-nav-content {
  transform: translateY(0);
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 12px;
}

.mobile-nav-link {
  display: block;
  padding: 12px 16px;
  color: #cbd5e1;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}

.mobile-nav-link:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  transform: translateX(4px);
}

.mobile-nav-link:active {
  background: rgba(30,166,114,.2);
}

/* Light theme mobile nav */
[data-theme="light"] .mobile-nav-content {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}

[data-theme="light"] .mobile-nav-link {
  color: #475569;
}

[data-theme="light"] .mobile-nav-link:hover {
  background: rgba(30,166,114,.1);
  color: #1e293b;
}
/* Mobile responsiveness for smaller devices */
@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }
  
  .mobile-nav {
    display: block;
  }
  
  .mobile-nav-toggle {
    display: flex;
  }
}

/* Hero */
.hero{position:relative;isolation:isolate;min-height:72vh;display:grid;place-items:center;text-align:center}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 0%,rgba(30,166,114,.25),transparent);z-index:-1}
.hero-content{padding:80px 0}
.hero h1{font-size:clamp(26px,4vw,44px);line-height:1.2;margin:0}
.hero p{max-width:900px;margin:14px auto 26px;color:var(--muted)}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(46,204,139,.25),rgba(46,204,139,.15));color:#ecfff7;font-weight:600;box-shadow:0 8px 24px rgba(30,166,114,.22);transition:transform .15s ease,box-shadow .15s ease,background .2s ease;text-decoration:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(30,166,114,.3)}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-600));border-color:transparent;color:#ffffff}
.btn-text{color:inherit}
/* Boxed style for hero CTA (same vibe as contact card) */
.hero .btn.btn-primary{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:0 0 0 1px rgba(34,197,94,.35),0 10px 28px rgba(30,166,114,.25);color:var(--brand)}
.hero .btn.btn-primary:hover{box-shadow:0 0 0 1px rgba(34,197,94,.5),0 14px 36px rgba(30,166,114,.32)}
.hero .btn.btn-primary .btn-text{color:var(--brand);font-weight:600}

/* Light mode button fixes */
[data-theme="light"] .hero .btn.btn-primary{background:rgba(255,255,255,.9);border:1px solid rgba(30,166,114,.3);color:var(--brand)}
[data-theme="light"] .hero .btn.btn-primary .btn-text{color:var(--brand) !important}
[data-theme="light"] .hero .btn.btn-primary:hover{background:rgba(255,255,255,1);border-color:var(--brand)}

/* Hero slider */
.hero-slider{position:relative;margin-top:28px;display:flex;align-items:center;gap:10px}
.hero-track{overflow:hidden;display:grid;grid-auto-flow:column;grid-auto-columns:100%;border:1px solid rgba(255,255,255,.08);border-radius:16px}
.hero-slide{position:relative;height:clamp(220px,40vh,420px);overflow:hidden}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(1.1)}
.hero-slide .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,197,94,.25),rgba(0,0,0,.45))}
.hero-slide .hero-caption{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;right:auto;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;max-width:820px;padding:0 12px}
.hero-slide .hero-caption h3{margin:0;font-size:20px}
.hero-slide .hero-caption p{margin:0;color:#cbd5e1}

/* Sections */
.section{padding:80px 0}
.section-title{font-size:28px;margin:0 0 24px;text-align:center}

/* About */
.about-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;justify-items:center}
.about-text{max-width:820px;margin:0 auto;text-align:center}
.about-text h2{font-size:clamp(24px,3.2vw,36px)}
.about-text p{color:var(--muted);font-size:clamp(15px,1.6vw,18px)}
.about-highlights{list-style:none;padding:0;margin:16px 0 0;display:flex;gap:16px;flex-wrap:wrap}
.about-highlights li{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.about-media img{border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 40px rgba(0,0,0,.35)}

/* Services */
.services{position:relative}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;text-align:center;backdrop-filter:blur(10px)}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-heavy);border-color:rgba(46,204,139,.35)}
.service-card h3{margin:12px 0 6px}
.service-card p{color:var(--muted);margin:0}
.icon-wrap{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:rgba(46,204,139,.08);border:1px solid rgba(46,204,139,.25);margin:0 auto}

/* Statistics */
.statistics {
  position: relative;
}

.statistics::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(30,166,114,.08), transparent);
  z-index: -1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: var(--transition);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-light);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
  border-color: rgba(46,204,139,.35);
}

.stat-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(30,166,114,.3);
}

.stat-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 8px;
  line-height: 1;
}

.stat-label {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}



/* FAQ */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: var(--transition);
}

.faq-item:hover {
  border-color: rgba(46,204,139,.35);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  transition: var(--transition);
}

.faq-question:hover {
  color: var(--brand);
}

.faq-question i {
  transition: var(--transition);
  color: var(--brand);
}

.faq-question[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer p {
  padding: 0 24px 20px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.faq-item.active .faq-answer {
  max-height: 200px;
}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.contact-form-wrap{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:22px;display:flex;flex-direction:column}
.contact{scroll-margin-top:76px}
.contact-details ul{list-style:none;margin:16px 0 0;padding:0;color:#cbd5e1;display:grid;gap:10px}
.contact-details li{margin:0;padding:10px 12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:12px;display:flex;gap:10px;align-items:flex-start}
.contact-details li strong{color:#e5e7eb;min-width:110px;display:inline-block}
.contact-details a{color:var(--brand);text-decoration:none;transition:color .2s ease}
.contact-details a:hover{color:#22c55e;text-decoration:underline}
/* Clients Carousel */
.clients-carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  overflow: hidden;
}

.clients-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease;
  width: 100%;
}

.client-item {
  flex: 0 0 calc(25% - 15px);
  min-width: calc(25% - 15px);
  height: 140px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: var(--transition);
  padding: 16px;
}

.client-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
  border-color: rgba(30,166,114,.35);
}

.client-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: var(--transition);
  filter: grayscale(100%) opacity(0.7);
}

.client-item:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

/* Clients Carousel Navigation */
.clients-carousel-container .carousel-btn {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  color: #e5e7eb;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: var(--transition);
  z-index: 10;
  flex-shrink: 0;
}

.clients-carousel-container .carousel-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  transform: scale(1.1);
}

.clients-carousel-container .carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.clients-carousel-container .carousel-btn:disabled:hover {
  background: var(--card);
  border-color: rgba(255,255,255,.12);
  color: #e5e7eb;
}

/* Projects & Products Section */
.projects {
  position: relative;
  background: transparent;
}

.projects::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(30,166,114,.08), transparent);
  z-index: -1;
}

.projects .section-title {
  margin-bottom: 32px;
  color: var(--text);
}

/* Tab Navigation */
.project-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.tab-btn {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  padding: 12px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  min-width: 120px;
}

.tab-btn:hover {
  border-color: rgba(30,166,114,.35);
  color: var(--text);
  background: rgba(255,255,255,.08);
}

.tab-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  box-shadow: 0 4px 12px rgba(30,166,114,.3);
}

/* Tab Content */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Projects Carousel Container */
.projects-carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  overflow: hidden;
}

.projects-carousel-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  transition: transform 0.3s ease;
  width: 100%;
  height: auto;
  /* Ensure only intended items are visible */
  overflow: hidden;
}

.projects-carousel-track .project-item {
  width: 100%;
  height: 250px;
  position: relative;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  /* Initially hidden, shown by JavaScript */
  display: none;
  visibility: hidden;
}

.projects-carousel-track .project-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-heavy);
  border-color: rgba(30,166,114,.35);
}

.projects-carousel-track .project-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--transition);
}

.projects-carousel-track .project-item:hover img {
  transform: scale(1.05);
}

/* Carousel Navigation Buttons */
.projects-carousel-container .carousel-btn {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  color: #e5e7eb;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: var(--transition);
  z-index: 10;
  flex-shrink: 0;
}

.projects-carousel-container .carousel-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  transform: scale(1.1);
}

.projects-carousel-container .carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.projects-carousel-container .carousel-btn:disabled:hover {
  background: var(--card);
  border-color: rgba(255,255,255,.12);
  color: #e5e7eb;
}

.project-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  padding: 16px;
  color: white;
  transform: translateY(10px);
  opacity: 0;
  transition: var(--transition);
}

.project-item:hover .project-overlay {
  transform: translateY(0);
  opacity: 1;
}

.project-overlay h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.project-overlay p {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.9);
  line-height: 1.3;
}



/* Light theme adjustments */
[data-theme="light"] .projects {
  background: transparent;
}

[data-theme="light"] .projects::before {
  background: radial-gradient(60% 60% at 50% 50%, rgba(30,166,114,.06), transparent);
}

[data-theme="light"] .tab-btn {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.15);
  color: #475569;
}

[data-theme="light"] .tab-btn:hover {
  border-color: rgba(30,166,114,.3);
  color: #1e293b;
  background: rgba(255,255,255,1);
}

[data-theme="light"] .project-item {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-light);
}

[data-theme="light"] .project-item:hover {
  box-shadow: var(--shadow-heavy);
  border-color: rgba(30,166,114,.3);
}

[data-theme="light"] .projects-carousel-container .carousel-btn {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.15);
  color: #475569;
}

[data-theme="light"] .projects-carousel-container .carousel-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

/* Light theme clients carousel */
[data-theme="light"] .client-item {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-light);
}

[data-theme="light"] .client-item:hover {
  box-shadow: var(--shadow-heavy);
  border-color: rgba(30,166,114,.3);
}

[data-theme="light"] .clients-carousel-container .carousel-btn {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.15);
  color: #475569;
}

[data-theme="light"] .clients-carousel-container .carousel-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}


.map-wrap{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06);display:flex}
.map-embed{position:relative;flex:1;min-height:300px;height:100%;width:100%}
.map-embed iframe{position:absolute;inset:0;border:0;width:100%;height:100%;display:block}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  box-shadow: var(--shadow-light);
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

[data-theme="light"] .scroll-to-top {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.15);
  color: #475569;
  box-shadow: var(--shadow-light);
}

[data-theme="light"] .scroll-to-top:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

/* Footer Enhancements */
.site-footer {
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(135deg, #0a111b, #0c1420);
  padding: 60px 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
  align-items: start;
}

.footer-section h3 {
  color: var(--text);
  margin: 0 0 16px;
  font-size: 20px;
}

.footer-section h4 {
  color: var(--text);
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
}



.footer-section p {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 4px;
}

.footer-section ul li a {
  color: var(--muted);
  text-decoration: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.3;
}

.footer-section ul li a:hover {
  color: var(--brand);
  transform: translateX(3px);
}

.footer-section ul li i {
  width: 14px;
  color: var(--brand);
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
}

.company-info {
  max-width: 300px;
}

.company-info p {
  font-size: 15px;
  line-height: 1.7;
}

.quick-links ul,
.services-links ul {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--brand);
}

.social {
  display: flex;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
  transition: var(--transition);
}

.social-link:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  transform: translateY(-2px);
}

/* Mobile responsive improvements */
@media (max-width: 1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .carousel-track{grid-auto-columns:calc((100% - 30px)/3)}
  .footer-content{grid-template-columns:1fr 1fr}
  
  /* Adjust projects carousel for tablet */
  .projects-carousel-track {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 15px;
  }
  
  .project-item {
    height: 220px;
  }
  
  /* Adjust clients carousel for tablet */
  .client-item {
    flex: 0 0 calc(33.333% - 14px);
    min-width: calc(33.333% - 14px);
    height: 120px;
  }
}

@media (max-width: 768px){
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .footer-content{grid-template-columns:1fr;text-align:center}
  .container{padding:0 12px}
  
  /* Show mobile nav, hide desktop nav */
  .desktop-nav {display: none;}
  .mobile-nav {display: block;}
  .mobile-nav-toggle {display: flex;}
  
  .carousel-track{grid-auto-columns:calc((100% - 20px)/2)}
  
  /* Mobile projects carousel - consolidated */
  .projects-carousel-container {
    gap: 10px;
  }
  
  .projects-carousel-container .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  /* Projects tab mobile: 1 column, 2 rows */
  #projects-tab .projects-carousel-track {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
    /* Ensure only 2 items are shown */
    max-height: calc(2 * 200px + 15px);
  }
  
  #projects-tab .project-item {
    height: 200px;
  }
  
  /* Products tab mobile: 2 columns, 2 rows with smaller images */
  #products-tab .projects-carousel-track {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    /* Ensure only 4 items are shown */
    max-height: calc(2 * 160px + 10px);
  }
  
  #products-tab .project-item {
    height: 160px; /* Smaller size for products on mobile */
  }
  
/* Mobile clients carousel - 2 items */
  .clients-carousel-container{gap:10px}
  .clients-carousel-container .carousel-btn{width:35px;height:35px;font-size:14px}
  .client-item{flex:0 0 calc(50% - 5px);min-width:calc(50% - 5px);height:100px;padding:12px}
  .hero h1{font-size:clamp(24px,6vw,36px)}
  .section{padding:60px 0}
  .hero-content{padding:60px 0}
  
  /* Center align footer sections on mobile */
  .footer-section{text-align:center !important;}
  .footer-section ul{align-items:center;justify-content:center;}
  .footer-section ul li a{justify-content:center;}
  .social{justify-content:center;}
}
@media (max-width: 480px){
  .services-grid{grid-template-columns:1fr;gap:14px}
  .stats-grid{grid-template-columns:1fr;gap:12px}
  .carousel-track{grid-auto-columns:100%}
  
  /* Mobile projects carousel for small screens */
  #projects-tab .projects-carousel-track{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr);gap:12px;max-height:calc(2 * 180px + 12px)}
  #projects-tab .project-item{height:180px}
  /* Products tab small mobile - 2 columns, 2 rows with smaller images */
  #products-tab .projects-carousel-track{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:8px;max-height:calc(2 * 140px + 8px)}
  #products-tab .project-item{height:140px}
  .projects-carousel-container{gap:8px}
  /* Mobile clients carousel for small screens - 2 items */
  .client-item{flex:0 0 calc(50% - 4px);min-width:calc(50% - 4px);height:80px;padding:8px}
  .clients-carousel-container{gap:8px}
  .clients-carousel-container .carousel-btn{width:30px;height:30px;font-size:12px}
  .project-tabs{flex-direction:row;gap:8px}
  .tab-btn{padding:8px 16px;font-size:13px;min-width:80px}
  .scroll-to-top{bottom:20px;right:20px;width:45px;height:45px;font-size:16px}
  .hero h1{font-size:clamp(20px,7vw,28px);line-height:1.2;text-align:center;padding:0 10px}
  .section-title{font-size:22px;text-align:center;padding:0 10px}
  .stat-number{font-size:32px}
  .container{padding:0 8px;max-width:100vw;overflow-x:hidden}
  .section{padding:50px 0}
  .hero-content{padding:50px 0;text-align:center}
  .service-card,.stat-card{padding:16px;text-align:center}

  .faq-question{padding:14px 16px;font-size:15px;text-align:left}
  .about-text{text-align:center;padding:0 10px}
  .about-highlights{justify-content:center;flex-wrap:wrap}
  .contact-form-wrap{padding:16px}
  .contact-details li{padding:12px;font-size:13px;flex-direction:column;text-align:left;gap:8px}
  .contact-details li strong{min-width:auto;margin-bottom:4px}
  .map-wrap{min-height:250px}
  .hero-slide .hero-caption{padding:0 8px;bottom:12px}
  .hero-slide .hero-caption h3{font-size:16px}
  .hero-slide .hero-caption p{font-size:13px}
  
  /* Mobile footer center alignment */
  .footer-content,.footer-section,.footer-section h3,.footer-section h4,.company-info,.company-info h3,.company-info p{text-align:center !important}
  .footer-section ul{align-items:center;justify-content:center}
  .footer-section ul li a,.social{justify-content:center;text-align:center}
  .company-info{margin:0 auto}
  .footer-bottom{text-align:center;flex-direction:column;gap:12px}
  .footer-links{justify-content:center}
  
  /* Ensure text is readable in both themes on mobile */
  body{font-size:14px;line-height:1.5}
  h1,h2,h3,h4{word-wrap:break-word;hyphens:auto}
  p{word-wrap:break-word;overflow-wrap:break-word}
  
  /* Light mode mobile fixes */
  [data-theme="light"] .hero h1,
  [data-theme="light"] .section-title,
  [data-theme="light"] .service-card h3,
  [data-theme="light"] .stat-label,
  [data-theme="light"] .about-text h2{
    color:#1e293b !important;
  }
  
  [data-theme="light"] .hero p,
  [data-theme="light"] .about-text p,
  [data-theme="light"] .service-card p{
    color:#64748b !important;
  }
}

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

/* Enhanced accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}