:root{
  --bg:#0b0b0f; --panel:#111118; --text:#f4f6fb; --muted:#b8bcc9;
  --line:rgba(255,255,255,0.08); --accent:#e11d48; --accent2:#ff3b57; --radius:16px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

section {
  padding:40px 0 !important; /* reduced margin */
}

.container{width:min(1200px,92vw);margin:0 auto}

/* Header */
header.site{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(9,9,11,.6);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:900}
.brand img{height:44px;width:auto;border-radius:10px;background:#000}
.nav .links a{padding:8px 10px;border-radius:10px;font-weight:700}
.nav .links a:hover{color:var(--accent)}
.theme{border:1px solid var(--line);padding:8px 12px;border-radius:999px;cursor:pointer}

/* Buttons */
.btn{display:inline-block;padding:12px 16px;border-radius:999px;font-weight:800}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  box-shadow:0 10px 28px rgba(225,29,72,.24)
}
.btn-ghost{border:1px solid var(--line)}

/* Hero with video */
.hero{position:relative;padding:0}
.hero video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.5)
}
.hero .inner{
  position:relative;
  min-height:70vh;
  display:grid;
  place-items:center;
  padding:120px 0
}
.hero .copy{text-align:center}
.hero h1{
  font-size:clamp(36px,6vw,72px);
  line-height:1.05;
  margin:0 0 12px
}
.lead{color:var(--muted);font-size:18px}
.badge{
  display:inline-block;
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  color:var(--accent);
  font-weight:900
}

/* Grid & cards */
.grid{display:grid;gap:26px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border:1px solid var(--line);
  padding:24px;
  border-radius:var(--radius);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(225,29,72,.35);
  box-shadow:0 32px 60px rgba(225,29,72,.10)
}
.service-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900
}

/* Slider */
.slider{position:relative;overflow:hidden}
.track{display:flex;gap:24px;scroll-behavior:smooth;overflow-x:auto;padding-bottom:6px}
.slide{min-width:320px}
.project-media{
  height:160px;
  border-radius:12px;
  background:linear-gradient(135deg,#1f2937,#0f172a);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900
}
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.5);
  border:1px solid var(--line);
  padding:10px;
  border-radius:999px;
  cursor:pointer
}
.arrow.prev{left:10px} 
.arrow.next{right:10px}

/* Counters */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.counter{
  background:#0f0f14;
  border:1px solid var(--line);
  padding:20px;
  border-radius:12px;
  text-align:center
}
.counter h3{
  margin:0;
  font-size:clamp(24px,3.6vw,40px);
  color:var(--accent)
}

/* Contact */
.contact-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
input,textarea,select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0e0e12;
  color:var(--text);
  outline:none
}
textarea{min-height:130px;resize:vertical}

.social {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

/* Social media icons fix */
.social-icons a {
  display: inline-block;
  margin: 0 8px;
  color: #fff; /* white icons */
  font-size: 22px; /* size of icons */
  text-decoration: none;
}

.social-icons a i {
  background: none !important; /* remove green background */
  padding: 0 !important;
  border-radius: 0 !important;
}


.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  background: var(--accent);
  color: #fff;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #c11a42; /* darker accent */
}

.btn i {
  font-size: 18px;
}


/* Footer & floating actions */
.footer{
  padding:28px 0;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--line)
}



/* Responsive */
@media (max-width: 980px){
  .cols-3,.cols-2{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(2,1fr)}
  section{padding:40px 0 !important;} /* same reduced padding for mobile */
  .fab{width:52px;height:52px}

  /* Burger + mobile nav */
  .burger {
    display:block;
    cursor:pointer;
    width:28px;
    height:22px;
    position:relative;
  }
  .burger span {
    position:absolute;
    height:3px;
    width:100%;
    background:var(--text);
    left:0;
    transition:0.3s;
  }
  .burger span:nth-child(1){top:0}
  .burger span:nth-child(2){top:9px}
  .burger span:nth-child(3){bottom:0}

  .nav .links {
    display:none;
    position:absolute;
    top:60px;
    right:20px;
    background:var(--panel);
    flex-direction:column;
    padding:16px;
    border-radius:12px;
    gap:12px;
  }
  .nav .links.active {
    display:flex;
  }
}