/* ============================= */
/*  Global / Base               */
/* ============================= */
body {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
  background-color: #111;
  color: #fff;
  overflow-x: hidden;
}

html {
  scroll-padding-top: 70px; /* height of your navbar */
}

a {
  text-decoration: none;
}

section {
  padding-top: 100px;
  padding-bottom: 80px;
}

/* ============================= */
/*  Navbar                      */
/* ============================= */
.navbar {
  padding: 1rem 0;
}
.navbar-brand img {
  margin-right: 10px;
}

/* ============================= */
/*  Hero                        */
/* ============================= */
#hero {
  background: linear-gradient(135deg, #111, #222);
  position: relative;
  text-align: center;
  overflow: hidden;
}

/* Decorative hero lines */
.hero-lines::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, #14b8a6, #9333ea);
  bottom: 50px;
  left: 10%;
  opacity: 0.5;
  animation: slideLine 2s infinite alternate;
}

/* Hero Orbs & Particles */
.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-orbs span {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.7;
  background: radial-gradient(circle, #0d6efd, transparent 70%);
}
.hero-orbs span:nth-child(1) {
  top: -200px;
  left: -200px;
}
.hero-orbs span:nth-child(2) {
  bottom: -200px;
  right: -200px;
  background: radial-gradient(circle, #14b8a6, transparent 70%);
}
.hero-orbs span:nth-child(3) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  opacity: 0.5;
}

/* Particle Dots */
.hero-particles span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

/* Hero animations */
.hero-title {
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(-30px);
  animation: fadeInUp 1s forwards;
  animation-delay: 0.3s;
}

.hero-subtitle {
  font-weight: 500;
  color: #ccc;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInUp 1s forwards;
  animation-delay: 0.6s;
}

/* Keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLine {
  0% {
    transform: translateX(-20%);
    opacity: 0.3;
  }
  100% {
    transform: translateX(20%);
    opacity: 0.6;
  }
}

/* ============================= */
/*  Buttons & Accent             */
/* ============================= */
.btn-gradient {
  background: linear-gradient(90deg, #14b8a6, #9333ea);
  color: #fff;
  border: none;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.btn-gradient:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 20px #14b8a6,
    0 0 20px #9333ea;
  color: #fff;
}

/* Accent icons (single merged rules) */
.accent {
  color: #14b8a6;
  transition:
    transform 0.5s,
    color 0.3s;
}
.identity-card .accent {
  transition:
    transform 0.5s,
    color 0.3s;
}
.identity-card:hover .accent {
  transform: rotate(15deg) scale(1.3);
  color: #9333ea;
}

/* ============================= */
/*  Template / Project Cards     */
/* ============================= */
.template-card {
  overflow: hidden;
  border-radius: 0.5rem;
  transition: transform 0.3s;
}
.template-card img {
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s;
}

.hover-up:hover {
  transform: translateY(-10px);
}
.hover-up:hover img {
  transform: scale(1.05);
}

/* gentle hover glow for general cards */
.card:hover {
  transform: translateY(-10px) scale(1.03);
  transition: all 0.4s ease;
  box-shadow:
    0 0 25px rgba(20, 184, 166, 0.5),
    0 0 25px rgba(147, 51, 234, 0.5);
}

/* Custom systems */
.bg-gradient-custom {
  background: linear-gradient(135deg, #14b8a6, #9333ea);
}
.bg-gradient-custom-1 {
  background:
    linear-gradient(157deg, #32ddca, #a953f7),
    radial-gradient(circle at top left, rgba(255,255,255,0.2), transparent 40%);
  border: none;
}

.hover-glow:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 20px #14b8a6,
    0 0 20px #9333ea;
}

/* ============================= */
/*  Contact / Footer / Sections  */
/* ============================= */
#contact input,
#contact textarea {
  border-radius: 0.375rem;
}

.bg-gray {
  background-color: #1a1a1a;
}
.bg-dark {
  background-color: #111;
}

footer a:hover {
  color: #14b8a6;
}

.section-title {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.section-subtitle, .text-muted-1 {
  color: #ccc;
}

/* Decorative section underline */
.section-line {
  width: 120px;
  height: 3px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, #14b8a6, #9333ea);
  border-radius: 50px;
  animation: pulseLine 3s infinite alternate;
}
@keyframes pulseLine {
  from {
    opacity: 0.5;
    transform: scaleX(0.9);
  }
  to {
    opacity: 1;
    transform: scaleX(1.1);
  }
}

/* ============================= */
/*  Projects Section Enhanced    */
/* ============================= */
.projects-section {
  background: linear-gradient(135deg, #141414, #1c1c1c);
  /* padding: 120px 0; */
  overflow: hidden;
  position: relative;
}

/* Decorative glow background */
.projects-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(20, 184, 166, 0.15),
    transparent 70%
  );
  top: -200px;
  right: -200px;
  filter: blur(120px);
  z-index: 0;
}

/* Project Card */
.project-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
}

.project-card:hover {
  transform: translateY(-12px);
  box-shadow:
    0 0 30px rgba(20, 184, 166, 0.4),
    0 0 30px rgba(147, 51, 234, 0.4);
  border: 1px solid rgba(20, 184, 166, 0.4);
}

/* Image */
.project-img {
  position: relative;
  overflow: hidden;
}

.project-img img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

@media (max-width: 475px) {
  .project-img img {
    height: 220px !important;
  }
}

.project-card:hover .project-img img {
  transform: scale(1.08);
}

/* Overlay */
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: end;
  justify-content: center;
  padding-bottom: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-overlay span {
  background: linear-gradient(90deg, #14b8a6, #9333ea);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
}

/* Content */
.project-content {
  padding: 20px;
  text-align: center;
}

.project-content h6 {
  font-weight: 600;
  margin-bottom: 10px;
}

.project-content p {
  font-size: 14px;
  color: #aaa;
  margin: 0;
}

.btn-contact-send {
  translate: none;
  rotate: none;
  scale: none;
  transform: none !important;
  opacity: 1;
}