.contact-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 60vh;
  padding: 2.5rem 0 2rem 0;
}
.contact-card {
  background: linear-gradient(120deg, var(--bg) 80%, var(--card) 100%);
  border-radius: 22px;
  box-shadow: 0 10px 40px 0 rgba(0,0,0,0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding: 2.5rem 2rem 2rem 2rem;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}
.contact-info {
  flex: 1 1 220px;
  min-width: 220px;
  max-width: 320px;
  color: #e6eef5;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.contact-info h1 {
  font-size: 2rem;
  margin-bottom: .5rem;
}
.contact-info p {
  color: var(--muted);
  font-size: 1.08rem;
}
.contact-details {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #b6c2d1;
  font-size: 1.04rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.contact-details i {
  color: var(--accent);
  margin-right: .7em;
}
.contact-form {
  flex: 2 1 320px;
  min-width: 260px;
  background: rgba(31,40,51,0.72);
  border-radius: 16px;
  box-shadow: 0 4px 18px 0 rgba(0,0,0,0.13);
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.contact-form label {
  font-weight: 500;
  color: #b6c2d1;
  font-size: 1.04rem;
  display: flex;
  align-items: center;
  gap: .7em;
}
.contact-form input,
.contact-form textarea {
  background: #181e27;
  border: 1.5px solid var(--accent);
  color: #e6eef5;
  border-radius: 8px;
  padding: .7rem 1rem;
  font-size: 1.08rem;
  margin-top: .3rem;
  margin-bottom: .1rem;
  width: 100%;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  transition: border .18s, box-shadow .18s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #4fd6a4;
  outline: none;
  box-shadow: 0 0 0 2px #4fd6a455;
}
.contact-form textarea {
  min-height: 110px;
  resize: vertical;
}
.contact-form .btn {
  margin-top: .7rem;
  font-size: 1.08rem;
  padding: .7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .7em;
}
.form-success, .form-error {
  font-size: 1.08rem;
  margin-top: .7rem;
}
@media (max-width: 900px) {
  .contact-card {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1rem 1rem 1rem;
  }
  .contact-info, .contact-form {
    max-width: 100%;
    min-width: 0;
  }
}
/* Hero image / slide container (applies to slider and subpage hero sections) */
.hero-image-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 0 1.5rem 0;
  height: 70vh;
  min-height: 420px;
  max-height: 720px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--bg) 60%, var(--card) 100%);
  position: relative;
}

/* Dark overlay on hero subpage images (60% opacity black) */
.hero-image-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 6;
  pointer-events: none;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
  box-shadow: var(--shadow-img);
  transition: box-shadow .25s, transform .25s;
  position: absolute;
  top: 0;
  left: 0;
}
.hero-img:hover {
  transform: none;
}
.hero-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#fff;
  z-index:10;
  width:90%;
  max-width:800px;
}
.hero-content h1{
  font-size:3.5rem;
  font-weight:700;
  margin-bottom:1rem;
  letter-spacing:-1px;
  color:#ffffff;
  overflow:hidden;
  white-space:nowrap;
  animation:typing 2.5s steps(40,end) 0.5s 1 normal both,blink-cursor 0.7s infinite 3s;
  border-right:3px solid #6EE7B7;
  display:inline-block;
}
.hero-content p{
  font-size:1.4rem;
  color:#ffffff;
  animation:fadeInUp .8s ease-out .2s both;
}
@keyframes typing{
  0%{width:0}
  100%{width:100%}
}
@keyframes blink-cursor{
  0%,49%{border-right:3px solid #6EE7B7}
  50%,100%{border-right:3px solid transparent}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
  box-shadow: 0 12px 40px 0 rgba(0,0,0,0.45);
}

@media (max-width: 900px) {
  .hero-image-section { height: 50vh; min-height: 260px; }
  .hero-content h1 { font-size: 2.8rem; }
  .hero-content p { font-size: 1.1rem; }
}

@media (max-width: 640px) {
  .hero-image-section { height: 45vh; min-height: 250px; padding-top: 72px; }
  .hero-content { width: 95%; padding: 1rem; }
  .hero-content h1 { font-size: 2rem; margin-bottom: 0.8rem; }
  .hero-content p { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  .hero-image-section { height: 40vh; min-height: 220px; padding-top: 72px; }
  .hero-content { width: 95%; padding: 0.8rem; }
  .hero-content h1 { font-size: 1.5rem; margin-bottom: 0.6rem; letter-spacing: 0; }
  .hero-content p { font-size: 0.85rem; }
}

/* Ensure main content never overlaps hero image */
.page-body, .container.page-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure subpage hero sits below fixed header to avoid overlap */
.hero-image-section {
  padding-top: 72px; /* height of .site-header */
  box-sizing: border-box;
}

/* Keep page body content clear of fixed header when no hero is present */
.container.page-body {
  padding-top: 1rem; /* small offset for spacing */
}

section, .cards, .jobs-dashboard, .contact-section {
  margin-bottom: 2.5rem;
}

/* Vision & Mission split section */
.vision-mission-section{background:#121212;padding:3rem 0}
.vision-mission{display:flex;gap:2rem;align-items:stretch;justify-content:space-between;background:#1E1E1E;padding:28px;border-radius:14px}
.vm-left{flex:1 1 46%;display:flex;align-items:center}
.vm-right{flex:1 1 52%;display:flex;align-items:center;justify-content:center}
.vm-card{width:100%;display:flex;flex-direction:column;gap:20px;padding:20px;border-radius:12px;background:#2C3E50;background-color:rgba(44,62,80,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.04)}
.vm-item{display:flex;gap:18px;align-items:flex-start}
.vm-lottie{width:44px;height:44px;flex:0 0 auto;border-radius:10px;overflow:hidden;background:transparent}
/* RGB glow tweaks for each icon variant */
.vm-lottie--r{filter:drop-shadow(0 8px 20px rgba(255,59,59,0.14));}
.vm-lottie--g{filter:drop-shadow(0 8px 20px rgba(0,255,153,0.12));}
.vm-lottie--b{filter:drop-shadow(0 8px 20px rgba(77,139,255,0.12));}
.vm-lottie svg{display:block}
.vm-content h3{margin:0;color:#ffffff;font-size:1.25rem}
.vm-content p{margin:0;color:#c6cACE;line-height:1.6}
.vm-content h3{margin:0;color:#ffffff;font-size:1.25rem}
.vm-content p{margin:0;color:#c6cACE;line-height:1.6}
.glass-sculpture{width:100%;height:100%;max-height:520px;border-radius:10px;display:block}

@media (max-width:980px){
  .vision-mission{flex-direction:column}
  .vm-left,.vm-right{flex:1 1 100%}
  .glass-sculpture{max-height:360px}
}
:root{
  /* Background tokens: Rich Black background and Deep Navy card tone */
  --bg:#121212; /* Main background (updated per request) */
  --card:#1F2833; /* Deep Navy / Gray for content containers */
  --muted:#9aa4ad;--accent:#6EE7B7;--glass:rgba(255,255,255,0.03);
  --max-width:1100px;--gap:1.25rem;
  --shadow-3d:0 8px 32px 0 rgba(0,0,0,0.35),0 1.5px 4px 0 rgba(0,0,0,0.18);
  --shadow-card:0 4px 18px 0 rgba(0,0,0,0.22),0 1.5px 4px 0 rgba(0,0,0,0.12);
  --shadow-img:0 8px 32px 0 rgba(0,0,0,0.45),0 1.5px 4px 0 rgba(0,0,0,0.18);
  --font-main:'Poppins', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body,html{font-family:var(--font-main)!important;}
*{box-sizing:border-box}
html,body{height:100%}

/* Universal icon color matching logo accent */
i,fa,.fas,.fab,.far,.fal{color:var(--accent)!important}
i:hover,fa:hover,.fas:hover,.fab:hover,.far:hover,.fal:hover{color:#4fd6a4!important}

body.dark {
  background: var(--bg);
  color: #e6eef5;
  margin: 0;
}

/* Beautiful centered headings for all pages */
h2{
  text-align:center;
  font-size:2.5rem;
  font-weight:700;
  letter-spacing:-0.5px;
  background:linear-gradient(135deg,#6EE7B7 0%,#4fd6a4 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:0 0 1.5rem 0;
  text-transform:capitalize;
  position:relative;
  padding-bottom:1rem;
}
h2::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:3px;
  background:linear-gradient(90deg,rgba(110,231,183,0.3) 0%,#6EE7B7 50%,rgba(110,231,183,0.3) 100%);
  border-radius:2px;
}

.container, .page-body, main {
  /* slightly lighter container to create depth against the page background */
  background: var(--card);
}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1rem}

/* 3D tilt and zoom effect for cards and images */
  /* ...existing code for .card, .job-card, .overview-image img, .clients-track img... */
/* removed redundant small .slide block (consolidated below) */
  /* ...existing code for .card:hover, .job-card:hover, .overview-image img:hover, .clients-track img:hover... */
.slide:hover {
  /* No zoom/3D effect */
}
  /* ...existing code for .card:active, .job-card:active, .overview-image img:active, .clients-track img:active... */
.slide:active {
  /* No zoom/3D effect */
}

/* Zoom in/out animation on hover */
  /* ...existing code for .card, .job-card, .overview-image img, .clients-track img... */
/* removed redundant no-op .slide block */
@keyframes popIn{
  0%{transform:scale(.92) rotate3d(0,0,0,0deg);opacity:0.7;}
  100%{transform:scale(1) rotate3d(0,0,0,0deg);opacity:1;}
}

/* Stronger shadow for 3D look */
.card,.job-card{box-shadow:var(--shadow-3d);}
.overview-image img{box-shadow:var(--shadow-img);}

/* Header */
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 60;
  transition: transform .28s ease, background-color .28s ease;
     background: #181e27;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  margin: 0;
  padding: 0;
}
.site-header.scrolled {
  background: rgba(16, 21, 28, 0.96);
  backdrop-filter: blur(10px);
}
    background: #181e27;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
    backdrop-filter: none;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
}
.site-header.modern-navbar.scrolled {
  background: #181e27;
  backdrop-filter: none;
}
.site-header .container.header-inner {
  background: transparent !important;
}
.site-header.hidden{transform:translateY(-110%)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.85rem 0}
.brand img{height:40px}
.nav-list{list-style:none;display:flex;gap:1rem;margin:0;padding:0;align-items:center}
.nav-list li{position:relative}
.nav-list a{color:var(--muted);text-decoration:none;position:relative;padding:.35rem 0;display:inline-block;transition:color .18s ease}

/* Neon underline: hidden by default, expands on hover or when link has .active */
.nav-list a::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  bottom: -4px;
  height: 2.6px;
  width: 58%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, #4fd6a4 45%, #4fd6ff 100%);
  box-shadow: 0 8px 26px rgba(79,214,164,0.12), 0 0 38px rgba(79,214,164,0.04);
  opacity: 0;
  transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.9,.25,1), opacity .22s ease;
}
.nav-list a:hover::after, .nav-list a.active::after{
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}
.nav-list a.active{color:#e6eef5;text-shadow:0 2px 12px rgba(79,214,164,0.08)}

/* Social Icons - Match Logo Color */
.social-icons{display:flex;gap:1rem;align-items:center}
.social-icons a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(110,231,183,0.08);transition:all .28s;border:1px solid rgba(110,231,183,0.1)}
.social-icons a i{color:var(--accent)!important;font-size:1.1rem}
.social-icons a:hover{background:rgba(110,231,183,0.15);border-color:rgba(110,231,183,0.3);transform:translateY(-2px)}
.social-icons a:hover i{color:#4fd6a4!important}
.footer-social{display:flex;gap:1rem}
.footer-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(110,231,183,0.08);transition:all .28s;border:1px solid rgba(110,231,183,0.1)}
.footer-social a i{color:var(--accent)!important;font-size:1.2rem}
.footer-social a:hover{background:rgba(110,231,183,0.15);border-color:rgba(110,231,183,0.3);transform:translateY(-2px)}
.footer-social a:hover i{color:#4fd6a4!important}

.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:.4rem .6rem;border-radius:6px}

/* Hero */
.hero{padding-top:72px}
.slider{
  position: relative;
  height: 70vh;
  min-height: 420px;
  max-height: 720px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.25,1);
  will-change: opacity, transform;
  z-index: 0;
  box-shadow: var(--shadow-card);
}

/* Dark overlay on slider slides (60% opacity black) */
.slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
  pointer-events: none;
}
.slide.active{opacity:1; transform: scale(1); z-index: 2; pointer-events: auto;}
.slide:not(.active){pointer-events: none}
.slide-content{
  position: absolute;
  left: 5%;
  top: 50%;
  /* start slightly offset horizontally and invisible; animate into place when slide becomes active */
  transform: translateY(-50%) translateX(-36px);
  opacity: 0;
  max-width: 48ch;
  color: white;
  text-shadow: 0 6px 28px rgba(0,0,0,0.6);
  z-index: 2;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.25,1);
}

/* Right-aligned variant for specific slides */
.slide--right .slide-content{
  left: auto;
  right: 5%;
  text-align: right;
  /* right-aligned slides should animate from the right */
  transform: translateY(-50%) translateX(36px);
}
.slide-content h1,.slide-content p{filter:drop-shadow(0 2px 8px #000a);}
.slide-content h1{font-size:clamp(1.4rem,3.2vw,2.6rem);margin:0 0 .5rem}
.slide-content p{color:var(--muted);margin:0}

/* When a slide becomes active, bring its content into place */
.slide.active .slide-content{
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* Overview */
.overview{display:flex;gap:var(--gap);align-items:center;padding:3rem 0}
.overview-image img {
  width: 320px;
  max-width: 40vw;
  border-radius: 8px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.6);
  transition: box-shadow .25s;
}
.overview-image img:hover {
  /* No zoom/3D effect */
  box-shadow: 0 12px 40px 0 rgba(0,0,0,0.45);
}
.overview-content h2{margin-top:0}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(90deg,var(--accent),#4fd6a4);color:#061017;padding:.6rem 1rem;border-radius:8px;text-decoration:none;gap:.6rem}
.btn i{color:#061017;transition:color .28s}
.btn,.job-actions .btn{box-shadow:0 2px 8px 0 rgba(0,0,0,0.18);transition:transform .18s,box-shadow .18s;}
.btn:hover{transform:scale(1.07) translateY(-2px);box-shadow:0 6px 18px 0 rgba(0,0,0,0.22)}
.btn:hover i{color:#FF8C00!important}

/* Steps */
.steps{padding:3rem 0}
.section-subtitle{color:var(--muted);font-size:1.1rem;margin:-1rem auto 2.5rem;max-width:700px;text-align:center;line-height:1.6}
.steps-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.step{background: rgba(44,62,80,0.72); padding:1rem; border-radius:10px; opacity:.3; transform:translateY(12px); transition:all .6s cubic-bezier(.2,.9,.3,1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,0.04); color: #e6eef5}
.step.visible{opacity:1;transform:none}
.step .num{font-weight:700;color:var(--accent);margin-bottom:.5rem}

/* New Steps Grid with Cards */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-top:2.5rem}
.step-card{background:linear-gradient(135deg,rgba(44,62,80,0.5) 0%,rgba(31,40,51,0.7) 100%);padding:2rem;border-radius:14px;border:1px solid rgba(110,231,183,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .28s cubic-bezier(.22,1.2,.36,1);opacity:.3;transform:translateY(12px)}
.step-card.visible{opacity:1;transform:none}
.step-card:hover{border-color:rgba(110,231,183,0.3);box-shadow:0 8px 32px rgba(110,231,183,0.1);transform:translateY(-4px)}
.step-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(110,231,183,0.15) 0%,rgba(110,231,183,0.05) 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--accent);margin-bottom:1.5rem;border:1px solid rgba(110,231,183,0.2)}
.step-card h3{margin:.5rem 0 1rem 0;color:#ffffff;font-size:1.2rem;font-weight:700}
.step-card > p{color:var(--muted);line-height:1.6;margin-bottom:1.5rem;font-size:.95rem}
.step-benefits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.8rem}
.step-benefits li{color:var(--muted);font-size:.9rem;display:flex;align-items:flex-start;gap:.7rem;line-height:1.5}
.step-benefits i{color:var(--accent);margin-top:0.2rem;flex-shrink:0;font-size:.85rem}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:2rem 0}
.card{background: rgba(44,62,80,0.72); padding:1.25rem; border-radius:10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,0.04); color: #e6eef5}

/* Services Grid Layout */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-top:2.5rem}
.service-category{background:linear-gradient(135deg,rgba(44,62,80,0.5) 0%,rgba(31,40,51,0.7) 100%);padding:2rem;border-radius:14px;border:1px solid rgba(110,231,183,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .28s cubic-bezier(.22,1.2,.36,1)}
.service-category:hover{border-color:rgba(110,231,183,0.3);box-shadow:0 8px 32px rgba(110,231,183,0.1);transform:translateY(-4px)}
.category-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.category-header i{font-size:2.2rem;color:var(--accent);min-width:50px}
.category-header h3{margin:0;color:#ffffff;font-size:1.25rem;font-weight:700}
.service-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.service-list li{color:var(--muted);font-size:1rem;display:flex;align-items:flex-start;gap:.8rem;line-height:1.5}
.service-list i{color:var(--accent);margin-top:0.15rem;flex-shrink:0}

@media(max-width:900px){
  .services-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .steps-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .benefits-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .competencies-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .approach-cards{grid-template-columns:repeat(2,1fr);gap:1.5rem}
}
@media(max-width:640px){
  .services-grid{grid-template-columns:1fr}
  .service-category{padding:1.5rem}
  .category-header{gap:.8rem}
  .category-header i{font-size:1.8rem}
  .service-list li{font-size:.95rem}
  .steps-grid{grid-template-columns:1fr}
  .step-card{padding:1.5rem}
  .step-icon{width:50px;height:50px;font-size:1.4rem}
  .step-card h3{font-size:1.1rem}
  .step-benefits li{font-size:.85rem}
  .benefits-grid{grid-template-columns:1fr}
  .benefit-card{padding:1.5rem}
  .benefit-icon{width:50px;height:50px;font-size:1.4rem}
  .stat-card{padding:1.5rem}
  .stat-number{font-size:2.2rem}
  .competencies-grid{grid-template-columns:1fr}
  .approach-cards{grid-template-columns:1fr}
  .approach-card{padding:1.5rem}
  .approach-icon{width:50px;height:50px;font-size:1.4rem}
}

/* Home overview content uses glass card style to match About section */
.overview-content{background: rgba(44,62,80,0.72); padding:1.25rem; border-radius:10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,0.04); color: #e6eef5}

/* Clients */
.clients{padding:2rem 0}
.clients-track {
  display: flex;
  gap: 2rem;
  align-items: center;
  overflow: visible; /* allow natural wrapping if needed */
  justify-content: center;
  animation: none !important;
  transform: none !important;
  will-change: auto;
}
.clients-track img {
  height: 48px;
  opacity: .9;
  filter: grayscale(60%);
  transition: box-shadow .18s;
}

/* Services Page Styles */
.services-hero{text-align:center;margin-bottom:3rem;padding:2rem 0}
.featured-services,.why-choose-us{padding:2rem 0;margin-bottom:2rem}

/* Service Description */
.service-description{color:var(--muted);font-size:.95rem;margin-bottom:1.5rem;line-height:1.6}

/* Benefits Grid */
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2.5rem}
.benefit-card{background:linear-gradient(135deg,rgba(44,62,80,0.5) 0%,rgba(31,40,51,0.7) 100%);padding:2rem;border-radius:14px;border:1px solid rgba(110,231,183,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .28s cubic-bezier(.22,1.2,.36,1);opacity:.3;transform:translateY(12px)}
.benefit-card.visible{opacity:1;transform:none}
.benefit-card:hover{border-color:rgba(110,231,183,0.3);box-shadow:0 8px 32px rgba(110,231,183,0.1);transform:translateY(-4px)}
.benefit-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(110,231,183,0.15) 0%,rgba(110,231,183,0.05) 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--accent);margin-bottom:1.5rem;border:1px solid rgba(110,231,183,0.2)}
.benefit-card h3{margin:0 0 1rem 0;color:#ffffff;font-size:1.1rem;font-weight:700}
.benefit-card p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0}

/* CTA Section */
.services-cta{text-align:center;padding:3rem 0;border-top:1px solid rgba(110,231,183,0.1);border-bottom:1px solid rgba(110,231,183,0.1);display:flex;flex-direction:column;align-items:center;justify-content:center}
.services-cta h2{margin-bottom:1rem}
.services-cta p{color:var(--muted);margin-bottom:2rem;font-size:1.1rem}
.services-cta .btn{text-align:center}

/* About Page Styles */
.company-stats{padding:3rem 0;margin:2rem 0;background:linear-gradient(135deg,rgba(110,231,183,0.02) 0%,rgba(110,231,183,0.01) 100%);border-radius:16px;border:1px solid rgba(110,231,183,0.05)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-top:2.5rem}
.stat-card{text-align:center;padding:2rem;background:rgba(31,40,51,0.4);border-radius:12px;border:1px solid rgba(110,231,183,0.08);transition:all .28s;opacity:.3;transform:translateY(12px)}
.stat-card.visible{opacity:1;transform:none}
.stat-card:hover{border-color:rgba(110,231,183,0.2);background:rgba(31,40,51,0.6);transform:translateY(-2px)}
.stat-number{font-size:2.8rem;font-weight:700;color:#ffffff;margin-bottom:.5rem}
.stat-label{color:#ffffff;font-size:1.1rem;font-weight:600;margin-bottom:.8rem}
.stat-description{color:#ffffff;font-size:.9rem;margin:0}

/* Competencies Grid */
.competencies{padding:2rem 0;margin:2rem 0}
.competencies-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2.5rem}
.competency-item{padding:2rem;background:rgba(44,62,80,0.3);border-radius:12px;border-left:4px solid var(--accent);transition:all .28s;opacity:.3;transform:translateX(-20px)}
.competency-item.visible{opacity:1;transform:none}
.competency-item:hover{background:rgba(44,62,80,0.5);border-left-color:#4fd6a4;transform:translateX(4px)}
.competency-item i{font-size:2.2rem;color:var(--accent);margin-bottom:1rem;display:block}
.competency-item h3{color:#ffffff;font-size:1.15rem;font-weight:700;margin:0 0 .8rem 0}
.competency-item p{color:var(--muted);font-size:.9rem;margin:0;line-height:1.6}

/* Approach Cards */
.our-approach{padding:2rem 0;margin:2rem 0}
.approach-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:2.5rem}
.approach-card{padding:2rem;background:linear-gradient(135deg,rgba(44,62,80,0.5) 0%,rgba(31,40,51,0.7) 100%);border-radius:14px;border:1px solid rgba(110,231,183,0.1);backdrop-filter:blur(10px);transition:all .28s cubic-bezier(.22,1.2,.36,1);opacity:.3;transform:translateY(12px)}
.approach-card.visible{opacity:1;transform:none}
.approach-card:hover{border-color:rgba(110,231,183,0.3);box-shadow:0 8px 32px rgba(110,231,183,0.1);transform:translateY(-4px)}
.approach-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(110,231,183,0.15) 0%,rgba(110,231,183,0.05) 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--accent);margin-bottom:1.5rem;border:1px solid rgba(110,231,183,0.2)}
.approach-card h3{color:#ffffff;font-size:1.2rem;font-weight:700;margin:0 0 1rem 0}
.approach-card p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0}

/* Footer */
.site-footer{
  background:linear-gradient(180deg,rgba(18,18,18,0.8),rgba(18,18,18,0.95));
  color:#cfd8dc;
  border-top:1px solid rgba(110,231,183,0.1);
  padding:2.5rem 0 0;
  margin-top:4rem;
  backdrop-filter:blur(10px);
}
.footer-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;align-items:start;padding:2rem 2rem 1.5rem}
.footer-left{grid-column:1}
.footer-section{display:flex;flex-direction:column;gap:0.8rem}
.footer-left img{height:45px;margin-bottom:0.8rem}
.company-info{margin:1rem 0 0}
.company-info h4{margin:0 0 0.4rem;font-size:0.92rem;color:#fff}
.company-info p{margin:0;font-size:0.88rem;line-height:1.4;color:var(--muted)}
.footer-section h4{font-size:0.95rem;font-weight:600;margin:0 0 0.8rem;color:#fff;position:relative;padding-bottom:0.4rem;border-bottom:2px solid rgba(110,231,183,0.2)}
.footer-section ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.5rem}
.footer-section li a{color:var(--muted);text-decoration:none;font-size:0.88rem;transition:all .28s cubic-bezier(.4,.0,.2,1);display:flex;align-items:center;gap:0.4rem}
.footer-section li a:hover{color:var(--accent);padding-left:0.2rem}
.footer-section address{font-style:normal;color:var(--muted);font-size:0.88rem;display:flex;flex-direction:column;gap:0.7rem;max-width:280px}
.footer-section address p{margin:0;display:flex;align-items:flex-start;gap:0.6rem;line-height:1.5;word-wrap:break-word}
.footer-section address i{color:var(--accent);width:16px;flex-shrink:0;text-align:center;font-size:0.9rem;margin-top:0.15rem}
.footer-section address a{color:var(--muted);text-decoration:none;transition:all .28s;display:inline-block}
.footer-section address a:hover{color:var(--accent);text-decoration:underline}
.site-footer a{color:var(--muted);text-decoration:none;transition:color .28s}
.site-footer a i{color:var(--accent)!important}
.site-footer a:hover i{color:#4fd6a4!important}
.site-footer .tagline{color:var(--muted)}
.tagline{color:var(--muted);margin:0}
.footer-social{display:flex;gap:0.6rem;margin-top:1rem}
.footer-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(110,231,183,0.08);transition:all .28s;border:1px solid rgba(110,231,183,0.15)}
.footer-social a i{color:var(--accent)!important;font-size:1rem}
.footer-social a:hover{background:linear-gradient(135deg,rgba(110,231,183,0.15),rgba(79,214,164,0.1));border-color:rgba(110,231,183,0.3);transform:translateY(-2px)}
.footer-social a:hover i{color:#4fd6a4!important}

/* Copyright bar: matches main background, centered and full-width */
.copyright{
  background:rgba(18,18,18,0.6);
  color:var(--muted);
  text-align:center;
  padding:1rem 2rem;
  font-size:0.85rem;
  margin-top:0;
  border-top:1px solid rgba(110,231,183,0.08);
  line-height:1.5;
}
.site-footer .copyright{border-top:1px solid rgba(110,231,183,0.08)}

@media(max-width:900px){
  .footer-inner{grid-template-columns:repeat(2,1fr);gap:2rem;padding:1.5rem 1.5rem 1rem}
  .footer-left{grid-column:1}
  .footer-section{gap:0.6rem}
}
@media(max-width:640px){
  .footer-inner{grid-template-columns:1fr;gap:1.5rem;padding:1.2rem 1.2rem 0.8rem}
  .footer-left{grid-column:auto}
  .footer-section h4{font-size:0.9rem}
  .site-footer{padding:1.5rem 0 0}
  .copyright{padding:0.8rem 1rem;font-size:0.8rem}
}

/* Jobs dashboard */

/* Career dashboard improved layout */
.jobs-dashboard {
  padding: 2.5rem 0 2.5rem 0;
  margin-top: 0;
  background: linear-gradient(90deg, var(--bg) 80%, var(--card) 100%);
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18);
  position: relative;
  z-index: 1;
}
/* Constrain inner elements so they never escape the page container */
.jobs-dashboard, .jobs-dashboard * {
  box-sizing: border-box;
}
.jobs-dashboard { max-width: 100%; width: 100%; }
.jobs-header h1 {
  margin: 0 0 .25rem;
  font-size: 2.1rem;
  font-weight: 700;
}
.jobs-controls {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  margin: 1.5rem 0 2rem 0;
  flex-wrap: wrap;
}
.search input {
  background: var(--bg);
  border: 1.5px solid var(--accent);
  padding: .7rem 1rem;
  border-radius: 10px;
  color: #e6eef5;
  min-width: 220px;
  font-size: 1.08rem;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
}
.filters select {
  background: var(--bg);
  border: 1.5px solid var(--accent);
  padding: .6rem .9rem;
  border-radius: 10px;
  color: #e6eef5;
  margin-left: .5rem;
  font-size: 1.08rem;
}
.jobs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
/* Make sure grid respects container padding and doesn't overflow */
.jobs-list { width: 100%; }
.job-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.5rem 1.2rem 1.2rem 1.2rem;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow-3d);
  min-height: 170px;
  position: relative;
  transition: transform .32s, box-shadow .22s;
}
/* Prevent long text from overflowing the card */
.job-card { overflow: hidden; word-wrap: break-word; }
.job-card:hover {
  transform: scale(1.04) rotate3d(1,-1,0,6deg);
  box-shadow: 0 12px 40px 0 rgba(0,0,0,0.32);
  z-index: 2;
}
.job-card .job-title:before {
  content: "\f2b5 ";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--accent);
  margin-right: .5em;
}
.job-title {
  margin: .1rem 0 .3rem 0;
  font-size: 1.13rem;
  font-weight: 600;
}
.job-meta {
  color: var(--muted);
  font-size: .98rem;
  margin-bottom: .7rem;
}
.job-actions {
  margin-top: auto;
  display: flex;
  gap: .7rem;
}
.job-actions .btn {
  margin-left: 0;
}
@media (max-width: 900px) {
  .jobs-list {
    grid-template-columns: 1fr 1fr;
  }
  .steps-list{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .overview{flex-direction:column;gap:1.5rem}
  .overview-image img{max-width:100%;width:100%}
  .services-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .hero-image-section { height: 50vh; min-height: 260px; }
  .slide-content{max-width:40ch;left:3%}
  .slide-content h1{font-size:clamp(1.2rem,2.5vw,2rem)}
  .slide-content p{font-size:.95rem}

  /* keep right variant readable on smaller screens by reverting to left alignment */
  .slide--right .slide-content{left:3%;right:auto;text-align:left}
}

@media (max-width: 640px) {
  :root{--gap:1rem}
  body,html{font-size:15px}
  
  /* Navigation */
  .nav-list{display:none}
  .nav-toggle{display:inline-block;padding:.5rem .7rem}
  .nav-toggle[aria-expanded="true"] + .nav-list{display:flex}
  
  /* Header */
  .header-inner{padding:0.6rem 0}
  .brand img{height:32px}
  .social-icons{display:none}
  
  /* Hero & Sections */
  .hero-image-section{height:45vh;min-height:280px;padding-top:0}
  .slide-content{top:25%;left:5%;max-width:38ch}
  .slide-content h1{font-size:clamp(1rem,2.2vw,1.4rem);margin:0 0 .3rem}
  .slide-content p{font-size:.85rem;margin:0}
  .slider{height:45vh;min-height:280px}
  
  /* Typography & Spacing */
  h1{font-size:1.6rem}
  h2{font-size:1.8rem;margin-bottom:1.5rem}
  h3{font-size:1.1rem}
  p{font-size:.95rem;line-height:1.5}
  
  /* Sections */
  section{margin-bottom:1.8rem}
  .container{padding:0 0.8rem}
  
  /* Overview */
  .overview{padding:1.5rem 0}
  .overview-image{display:none}
  .overview-content{padding:1.5rem}
  .overview-vm{margin-top:1rem}
  .vm-item{margin-bottom:.6rem}
  
  /* Steps */
  .steps{padding:1.5rem 0}
  .steps-list{grid-template-columns:1fr;gap:.8rem}
  .step{padding:.9rem;border-radius:8px;font-size:.9rem}
  .step .num{font-size:1rem;margin-bottom:.4rem}
  .step h3{font-size:1rem;margin:.5rem 0 .3rem}
  .step p{font-size:.85rem;margin:0}
  
  /* Cards & Services */
  .cards{grid-template-columns:1fr}
  .card{padding:1rem;border-radius:8px;font-size:.9rem}
  .card h3{font-size:1rem;margin:.5rem 0 .3rem}
  .card p{font-size:.85rem;margin:0}
  
  .services-grid{grid-template-columns:1fr;gap:1.2rem}
  .service-category{padding:1.2rem;border-radius:10px}
  .category-header{gap:.6rem;margin-bottom:1rem}
  .category-header i{font-size:1.6rem;min-width:40px}
  .category-header h3{font-size:1rem;margin:0}
  .service-list{gap:.7rem}
  .service-list li{font-size:.85rem;gap:.6rem}
  .service-description{font-size:.85rem;margin-bottom:1rem}
  
  .benefits-grid{grid-template-columns:1fr;gap:1rem}
  .benefit-card{padding:1rem}
  .benefit-icon{width:45px;height:45px;font-size:1.2rem;margin-bottom:1rem}
  .benefit-card h3{font-size:1rem;margin:0 0 .5rem 0}
  .benefit-card p{font-size:.8rem}
  
  .stats-grid{grid-template-columns:1fr;gap:1rem}
  .stat-card{padding:1.2rem}
  .stat-number{font-size:2rem}
  .stat-label{font-size:1rem}
  .stat-description{font-size:.8rem}
  
  .competencies-grid{grid-template-columns:1fr}
  .competency-item{padding:1.5rem;border-left:3px solid var(--accent)}
  .competency-item i{font-size:1.8rem;margin-bottom:.8rem}
  .competency-item h3{font-size:1rem;margin:0 0 .5rem 0}
  .competency-item p{font-size:.8rem}
  
  .approach-cards{grid-template-columns:1fr;gap:1rem}
  .approach-card{padding:1.2rem}
  .approach-icon{width:45px;height:45px;font-size:1.2rem}
  .approach-card h3{font-size:1rem;margin:0 0 .8rem 0}
  .approach-card p{font-size:.8rem}
  
  /* Contact Form */
  .contact-card{flex-direction:column;gap:1.2rem;padding:1.2rem 0.8rem}
  .contact-info{max-width:100%;padding:0}
  .contact-form{padding:1.2rem;border-radius:12px}
  .contact-form input,.contact-form textarea{padding:.6rem .8rem;font-size:1rem}
  .contact-details{font-size:.9rem}
  
  /* Jobs Dashboard */
  .jobs-dashboard{padding:1rem 0}
  .jobs-list{grid-template-columns:1fr}
  .job-card{min-height:140px;padding:1rem}
  .job-title{font-size:1rem;margin:.1rem 0 .2rem}
  .job-meta{font-size:.8rem;margin-bottom:.5rem}
  
  /* Footer */
  .footer-inner{flex-direction:column;gap:1.5rem;padding:1.5rem 0}
  .footer-left img{height:32px}
  .footer-nav h4,.footer-contact h4{font-size:1rem;margin-bottom:.8rem}
  .footer-nav ul li,.footer-contact address{font-size:.85rem}
  .copyright{padding:.6rem 0;font-size:.8rem}
  .site-footer{padding:1rem 0;margin-top:1rem}
  
  /* Buttons */
  .btn{padding:.5rem .9rem;font-size:.9rem;border-radius:6px}
  .btn i{font-size:.85rem}
  
  /* Modals & Forms */
  .modal-panel{width:92%;padding:1rem;border-radius:8px}
  .modal-close{right:.8rem;top:.8rem;font-size:1.3rem}
  .apply-form{gap:.4rem}
  .apply-form input,.apply-form textarea{padding:.5rem;font-size:.9rem}
  
  /* Clients carousel */
  .clients{padding:1.5rem 0}
  .clients-track{gap:1.2rem;justify-content:center}
  .clients-track img{height:32px;opacity:0.8}
  
  /* Search & Filter */
  .search input,.filters select{min-width:100%;padding:.6rem;font-size:.9rem;margin-bottom:.5rem}
  .jobs-controls{flex-direction:column}
  
  /* Upload progress */
  .upload-progress{height:8px;margin-top:.4rem}
  
  /* Scroll animation adjustments for mobile */
  .scroll-anim{transform:translateX(-30px) scale(.98)}
  .scroll-anim.right{transform:translateX(30px) scale(.98)}
}

@media (max-width: 480px) {
  :root{--gap:0.8rem}
  body,html{font-size:14px}
  
  .container{padding:0 0.6rem}
  h1{font-size:1.4rem}
  h2{font-size:1.4rem;margin-bottom:1rem}
  h3{font-size:1rem}
  p{font-size:.9rem}
  
  .slide-content{top:30%;left:4%;max-width:34ch}
  .slide-content h1{font-size:1rem}
  .slide-content p{font-size:.75rem}
  
  .hero-image-section{height:40vh;min-height:240px;margin:0 0 1rem}
  .slider{height:40vh}
  
  .overview-content{padding:1rem}
  .services-grid{grid-template-columns:1fr;gap:1rem}
  .service-category{padding:1rem}
  .service-list li{font-size:.8rem}
  .steps-grid{grid-template-columns:1fr;gap:1rem}
  .step-card{padding:1rem}
  .step-icon{width:45px;height:45px;font-size:1.2rem}
  .step-card h3{font-size:1rem;margin:.3rem 0 .8rem 0}
  .step-card > p{font-size:.85rem;margin-bottom:1rem}
  .step-benefits li{font-size:.75rem;gap:.5rem}
  .section-subtitle{font-size:.95rem;margin:-0.8rem auto 2rem}
  
  .btn{padding:.45rem .8rem;font-size:.85rem}
  .contact-form{padding:1rem}
  .card,.step{padding:.8rem}
  .job-card{min-height:120px;padding:.8rem}
}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,8,0.6);z-index:200}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:var(--card);max-width:720px;width:94%;padding:1.25rem;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,0.6)}
.modal-close{position:absolute;right:1rem;top:1rem;background:transparent;border:0;color:var(--muted);font-size:1.5rem}
.apply-form{margin-top:1rem;display:grid;gap:.5rem}
.apply-form input,.apply-form textarea{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:.5rem;border-radius:6px;color:inherit}

/* Scroll text animation (for .scroll-anim) */
.scroll-anim{opacity:0;transform:translateX(-60px) scale(.98);transition:opacity .7s cubic-bezier(.22,1.2,.36,1),transform .7s cubic-bezier(.22,1.2,.36,1);}
.scroll-anim.visible{opacity:1;transform:translateX(0) scale(1);}
.scroll-anim.right{transform:translateX(60px) scale(.98);}
.scroll-anim.right.visible{transform:translateX(0) scale(1);}

@media (max-width:900px){
  .jobs-list{grid-template-columns:1fr}
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Responsive */
@media (max-width:900px){
  .steps-list{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .overview{flex-direction:column}
  .overview-image img{max-width:100%}
}
@media (max-width:640px){
  .nav-list{display:none}
  .nav-toggle{display:inline-block}
  .cards{grid-template-columns:1fr}
  .steps-list{grid-template-columns:1fr}
  .slide-content{top:20%;left:6%}

  /* Mobile dropdown styles for accessible toggle */
  .nav{position:relative}
  .nav-list{
    position:fixed;
    /* place directly below the fixed header (adjust if your header height differs) */
    top:72px;
    right:12px;
    left:12px;
    flex-direction:column;
    gap:0;
    /* Force a fully opaque dark background to prevent hero bleed-through */
    background: #121212;
    border-radius:10px;
    padding:.5rem .6rem;
    box-shadow:0 12px 40px rgba(0,0,0,0.45);
    z-index:1600;
    border:1px solid rgba(255,255,255,0.04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-clip: padding-box;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  .nav-list li{margin:0}
  .nav-list a{padding:.6rem 1rem}
  .nav-toggle[aria-expanded="true"] + .nav-list{display:flex}
}

/* Upload progress UI inside forms */
.upload-progress{width:100%;background:rgba(255,255,255,0.04);border-radius:8px;overflow:hidden;height:10px;margin-top:.6rem}
.upload-progress .bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#4fd6a4);transition:width .18s linear}
.form-status{color:var(--muted);margin-top:.45rem}

/* Contact Page Styling */
.contact-hero{text-align:center;padding:3rem 0 2rem;margin-bottom:1.5rem}
.contact-hero h1{font-size:2.8rem;margin-bottom:1rem;background:linear-gradient(135deg,var(--accent),#4fd6a4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.contact-hero p{color:var(--muted);font-size:1.15rem;max-width:600px;margin:0 auto}
.contact-section{padding:2rem 0}
.contact-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-info-section h2{font-size:2rem;margin-bottom:2rem;color:#fff;text-align:center;position:relative;padding-bottom:1rem}
.contact-info-section h2::after{content:'';display:block;width:60px;height:4px;background:linear-gradient(90deg,var(--accent),#4fd6a4);border-radius:2px;margin:1rem auto 0}
.info-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.info-card{background:rgba(31,40,51,0.6);border:1px solid rgba(110,231,183,0.1);border-radius:12px;padding:1.8rem;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s cubic-bezier(.4,.0,.2,1)}
.info-card:hover{border-color:rgba(110,231,183,0.3);transform:translateY(-4px);box-shadow:0 12px 30px rgba(110,231,183,0.1)}
.info-icon{display:inline-flex;width:50px;height:50px;border-radius:50%;background:rgba(110,231,183,0.1);align-items:center;justify-content:center;margin-bottom:1rem}
.info-icon i{font-size:1.8rem;color:var(--accent)}
.info-card h3{font-size:1.2rem;margin-bottom:.8rem;color:#fff}
.info-card p{color:var(--muted);font-size:.95rem;line-height:1.6}
.info-card a{color:var(--accent);text-decoration:none;transition:color .28s}
.info-card a:hover{color:#4fd6a4}
.contact-form-section{display:flex;align-items:center;justify-content:center}
.form-card{width:100%;background:rgba(31,40,51,0.7);border:1px solid rgba(110,231,183,0.15);border-radius:16px;padding:2.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.form-card h2{font-size:1.8rem;margin-bottom:.5rem;color:#fff}
.form-subtitle{color:var(--muted);margin-bottom:1.8rem;font-size:.95rem}
.contact-form{display:flex;flex-direction:column;gap:1.2rem}
.form-row{display:flex;flex-direction:column;gap:.6rem}
.form-row label{color:#fff;font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.form-row label i{color:var(--accent);font-size:1rem}
.form-row input,.form-row textarea{background:rgba(18,18,18,0.6);border:1px solid rgba(110,231,183,0.2);border-radius:8px;color:#fff;padding:0.9rem 1rem;font-family:Poppins,sans-serif;font-size:.95rem;transition:all .28s cubic-bezier(.4,.0,.2,1)}
.form-row input::placeholder,.form-row textarea::placeholder{color:rgba(154,164,173,0.6)}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--accent);background:rgba(18,18,18,0.9);box-shadow:0 0 0 3px rgba(110,231,183,0.15)}
.btn-submit{margin-top:1rem;background:linear-gradient(135deg,var(--accent),#4fd6a4);color:#061017;font-weight:700;padding:0.95rem 1.8rem;border-radius:8px;border:none;cursor:pointer;transition:all .28s cubic-bezier(.4,.0,.2,1);width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(110,231,183,0.3)}
.btn-submit:active{transform:translateY(0)}
.form-success,.form-error{border-radius:8px}
.why-contact{text-align:center;padding:4rem 0 3rem}
.why-contact h2{font-size:2.2rem;margin-bottom:3rem;color:#fff;position:relative;padding-bottom:1rem}
.why-contact h2::after{content:'';display:block;width:60px;height:4px;background:linear-gradient(90deg,var(--accent),#4fd6a4);border-radius:2px;margin:1rem auto 0}
.benefits-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:1rem}
.benefit-item{background:rgba(31,40,51,0.5);border:1px solid rgba(110,231,183,0.1);border-radius:12px;padding:2rem;text-align:center;transition:all .3s cubic-bezier(.4,.0,.2,1);position:relative;overflow:hidden}
.benefit-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#4fd6a4);opacity:0;transition:opacity .3s}
.benefit-item:hover{border-color:rgba(110,231,183,0.3);transform:translateY(-6px);box-shadow:0 12px 30px rgba(110,231,183,0.1)}
.benefit-item:hover::before{opacity:1}
.benefit-number{font-size:2.5rem;font-weight:700;color:var(--accent);margin-bottom:.5rem}
.benefit-item h3{font-size:1.2rem;margin-bottom:1rem;color:#fff}
.benefit-item p{color:var(--muted);font-size:.95rem;line-height:1.6}
.contact-cta{text-align:center;padding:3rem 2rem;background:rgba(31,40,51,0.4);border-radius:16px;border:1px solid rgba(110,231,183,0.1);margin:3rem 0}
.contact-cta h2{font-size:2rem;margin-bottom:1rem;color:#fff}
.contact-cta p{color:var(--muted);font-size:1rem;max-width:500px;margin:0 auto 2rem}
.cta-buttons{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.btn-secondary{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.btn-secondary:hover{background:rgba(110,231,183,0.1);border-color:#4fd6a4;color:#fff}

@media(max-width:900px){
  .contact-wrapper{grid-template-columns:1fr;gap:2rem}
  .contact-hero h1{font-size:2.2rem}
  .benefits-list{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .form-card{padding:2rem}
  .info-cards-grid{grid-template-columns:1fr}
  .cta-buttons{flex-direction:column}
  .cta-buttons .btn{width:100%}
}
@media(max-width:640px){
  .contact-hero h1{font-size:1.8rem}
  .contact-hero p{font-size:1rem}
  .contact-info-section h2{font-size:1.5rem}
  .form-card h2{font-size:1.4rem}
  .benefits-list{grid-template-columns:1fr;gap:1rem}
  .benefit-number{font-size:2rem}
  .benefit-item{padding:1.5rem}
  .why-contact{padding:2.5rem 0}
  .why-contact h2{font-size:1.6rem;margin-bottom:1.5rem}
  .contact-cta{padding:2rem 1rem;margin:2rem 0}
  .contact-cta h2{font-size:1.5rem}
  .form-row input,.form-row textarea{padding:0.8rem}
  .contact-form{gap:1rem}
}
@media(max-width:480px){
  .contact-hero{padding:2rem 0 1.5rem}
  .contact-hero h1{font-size:1.5rem}
  .contact-hero p{font-size:.95rem}
  .info-card{padding:1.5rem}
  .info-icon{width:45px;height:45px}
  .info-icon i{font-size:1.5rem}
  .info-card h3{font-size:1rem}
  .info-card p{font-size:.9rem}
  .form-card{padding:1.5rem;border-radius:12px}
  .form-card h2{font-size:1.2rem}
  .form-subtitle{font-size:.85rem;margin-bottom:1rem}
  .form-row label{font-size:.85rem}
  .form-row input,.form-row textarea{padding:0.75rem;font-size:.9rem}
  .benefits-list{gap:.8rem}
  .benefit-item{padding:1.2rem}
  .benefit-number{font-size:1.8rem}
  .benefit-item h3{font-size:1rem;margin-bottom:.8rem}
  .benefit-item p{font-size:.85rem}
  .contact-cta{padding:1.5rem 1rem;margin:1.5rem 0}
  .contact-cta h2{font-size:1.3rem}
  .contact-cta p{font-size:.9rem;margin-bottom:1rem}
  .cta-buttons{gap:.8rem}
  .btn{padding:0.8rem 1rem}
}

/* Admin Panel Styles */
.admin-panel {
  background: linear-gradient(135deg, rgba(44,62,80,0.7) 0%, rgba(31,40,51,0.7) 100%);
  border: 1px solid rgba(110,231,183,0.2);
  border-radius: 12px;
  padding: 2rem;
  margin-top: 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.admin-panel h2 {
  margin-top: 0;
  color: #6EE7B7;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.admin-panel h3 {
  color: #fff;
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid rgba(110,231,183,0.2);
  padding-bottom: 0.5rem;
}

.admin-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
}

.admin-section {
  margin-bottom: 2rem;
}

.admin-section form {
  background: rgba(31,40,51,0.5);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(110,231,183,0.1);
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #e6eef5;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.7rem;
  background: rgba(18,18,18,0.8);
  border: 1px solid rgba(110,231,183,0.2);
  border-radius: 6px;
  color: #e6eef5;
  font-family: var(--font-main);
  font-size: 0.9rem;
  transition: border-color 0.28s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #6EE7B7;
  box-shadow: 0 0 0 2px rgba(110,231,183,0.1);
}

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

.form-status {
  margin-top: 0.8rem;
  padding: 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #6EE7B7;
  background: rgba(110,231,183,0.1);
}

.admin-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-job-item {
  background: rgba(31,40,51,0.5);
  border: 1px solid rgba(110,231,183,0.1);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.28s;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-job-item:hover {
  border-color: rgba(110,231,183,0.3);
  background: rgba(31,40,51,0.7);
}

.admin-job-info {
  flex: 1;
  min-width: 200px;
}

.admin-job-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.3rem 0;
}

.admin-job-meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.admin-job-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-secondary {
  background: rgba(110,231,183,0.1);
  color: #6EE7B7;
  border: 1px solid #6EE7B7;
  padding: 0.7rem 1.2rem;
  font-size: 0.9rem;
  transition: all 0.28s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary:hover {
  background: rgba(110,231,183,0.2);
  transform: translateY(-1px);
}

.btn-danger {
  background: rgba(255,85,85,0.1);
  color: #ff5555;
  border: 1px solid #ff5555;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  transition: all 0.28s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-danger:hover {
  background: rgba(255,85,85,0.2);
  transform: translateY(-1px);
}

.btn-danger:hover {
  background: rgba(255,85,85,0.2);
}

/* Admin Login Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--card);
  border: 1px solid rgba(110,231,183,0.2);
  border-radius: 12px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.modal-content h2 {
  color: #6EE7B7;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.28s;
}

.modal-close:hover {
  color: #6EE7B7;
}