:root{
  --gradient: linear-gradient(135deg,#ff8a00,#e52e71);
  --bg: #1e1e1e;
  --panel: #2a2a2a;
  --muted: #bdbdbd;
}
*{box-sizing:border-box}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: #eaeaea;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:"Poppins",sans-serif;color:#fff}
a{color:inherit}
.logo-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--gradient)}
.text-gradient{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.bg-panel{background:var(--panel)}
.text-secondary{color:var(--muted)!important}

/* NAV hover with icons */
.nav-animated .nav-link{display:flex;align-items:center;gap:.6rem;position:relative;padding:.35rem .6rem;border-radius:.375rem;transition:color .18s, background .18s}
.nav-animated .nav-link span{position:relative}
.nav-animated .nav-link::after{content:"";position:absolute;left:10%;right:10%;bottom:.25rem;height:2px;background:var(--gradient);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-animated .nav-link:hover{color:#fff;background:rgba(255,255,255,0.02)}
.nav-animated .nav-link:hover::after{transform:scaleX(1)}
#navCollapse a.btn.btn-gradient.px-3 { background: var(--gradient);color: #fff;}

/* Marquee */
.marquee-wrap{background:#151515;border-bottom:1px solid rgba(255,255,255,.04)}
.marquee{white-space:nowrap;overflow:hidden}
.marquee span{display:inline-block;padding-right:2rem;animation:scroll 20s linear infinite}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* HERO */
.premium-slideshow .hero-img{height:600px;object-fit:cover}
.caption-glass{background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); padding:1rem 1.25rem;border-radius:.75rem;display:inline-block;text-align:left}
.bg-panel {background-color: var(--panel);background-image: url(../images/bg1.png);background-size: cover;}

/* Cards */
.feature-card,.portfolio-card,.team-card,.service-card{border-radius:1rem;padding:1.25rem;background:var(--panel);border:1px solid rgba(255,255,255,.03);transition:transform .18s,box-shadow .18s}
.feature-card:hover,.portfolio-card:hover,.team-card:hover,.service-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.service-card , .servicesProcess {color: #fff;}
.servicesProcess img {width: 400px;}
.aboutWrapper{background:var(--panel);padding:3rem 0}

/* Services gradient badge */
.badge.bg-gradient{background:var(--gradient);color:#fff}

/* Footer */
footer{background:#141414;color:var(--muted)}

/* Blog masonry */
.blog-post{break-inside:avoid;margin-bottom:1rem}
.blog-post img{width:100%;display:block;border-radius:.5rem;}

/* Post hero */
.post-hero{height:50vh;overflow:hidden;position:relative}
.post-hero img{width:100%;height:100%;object-fit:cover}
.post-hero-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:2rem;background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0))}

/* Loader (bouncing dots) */
#page-loader{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:9999;transition:opacity .4s ease;
}
.loader-dots span{display:inline-block;width:12px;height:12px;margin:0 8px;background:#d9d9d9;border-radius:50%;animation:bounce .6s infinite alternate}
.loader-dots span:nth-child(2){animation-delay:.15s}
.loader-dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{to{transform:translateY(-12px)}}

/* responsive */
@media (max-width:768px){ .premium-slideshow .hero-img{height:45vh} .caption-glass{padding:.8rem} }