/* style.css - Colorful Vibrant Final Version */
:root {
  --primary:#5e60ce; /* purple */
  --secondary:#4361ee; /* blue */
  --accent1:#f72585; /* pink */
  --accent2:#4cc9f0; /* cyan */
  --accent3:#ffb703; /* yellow */
  --accent4:#06d6a0; /* green */
  --dark:#0b0b0b;
  font-family: 'Poppins', sans-serif;
}

body { 
  background:#fff; 
  color:#222; 
  line-height:1.6; 
  font-family:'Poppins', sans-serif;
  scroll-behavior:smooth;
}

/* ===================== NAV ===================== */
.navbar { 
  background:linear-gradient(90deg, var(--primary), var(--secondary)); 
}
.navbar .nav-link { 
  color:#fff !important; 
  font-weight:500; 
  transition:.3s;
}
.navbar .nav-link:hover {
  color:var(--accent2) !important;
}

/* ===================== HERO ===================== */
.hero-section {
  position:relative;
  min-height:100vh; /* full screen */
  background:url('../img/hero.jpg') no-repeat center center/cover;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero-section::after {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(94,96,206,0.8), rgba(67,97,238,0.8));
}
.hero-section .container {
  position:relative;
  z-index:1;
}
.hero-section h1 {
  font-weight:700; 
  color:#fff; 
  font-size:2.5rem;
}
.hero-section p.lead {
  color:#f3f4f9; 
  font-size:1.2rem;
}
.btn-gradient {
  background:linear-gradient(90deg, var(--accent1), var(--accent2));
  border:none;
  color:#fff;
  transition:.3s;
}
.btn-gradient:hover { 
  opacity:0.9; 
  transform:translateY(-2px);
}
.btn-outline-light:hover {
  background:#fff; 
  color:var(--primary) !important;
}

/* ===================== SECTION BACKGROUNDS ===================== */
#about { background:#fff4ec; }
#services { background:#e8f7ff; }
#process { background:#f3ecff; }
#testimonials { background:#fffbea; }
#contact { background: linear-gradient(135deg, var(--secondary), var(--primary)); }

/* ===================== SERVICES ===================== */
.service-card {
  border:none;
  transition:all .3s ease;
  background:#fff;
  border-radius:14px;
  padding:25px;
}
.service-card i {
  color:var(--primary); 
  font-size:2rem;
}
.service-card:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 14px 32px rgba(94,96,206,0.25);
  border-top:4px solid var(--accent2);
}

/* ===================== PORTFOLIO ===================== */
.portfolio-card { 
  border:none; 
  border-radius:14px; 
  overflow:hidden; 
  position:relative; 
  transition:.3s;
}
.portfolio-card img { 
  height:240px; 
  object-fit:cover; 
  transition:transform .4s ease; 
}
.portfolio-card::after {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(94,96,206,0.3), rgba(247,37,133,0.3));
  opacity:0; 
  transition:.3s ease;
}
.portfolio-card:hover img { transform:scale(1.08); }
.portfolio-card:hover::after { opacity:1; }

/* ===================== PROCESS ===================== */
.small-step { 
  border:none; 
  background:#fff; 
  border-radius:14px; 
  box-shadow:0 10px 25px rgba(0,0,0,0.08); 
  transition:.3s;
}
.small-step:hover { 
  transform:translateY(-6px); 
}
.step-num {
  background:linear-gradient(135deg, var(--accent1), var(--secondary));
  width:60px;height:60px;border-radius:50%;
  color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;
  font-size:1.3rem;
  margin-bottom:10px;
}

/* ===================== TESTIMONIALS ===================== */
#testimonials .card { 
  border:none; 
  border-radius:14px; 
  box-shadow:0 8px 30px rgba(0,0,0,0.08); 
  background:#fff; 
  transition:.3s;
}
#testimonials .card:hover {
  transform:scale(1.03);
}

/* ===================== CONTACT ===================== */
#contact .bg-white { 
  border-radius:14px; 
  box-shadow:0 14px 32px rgba(0,0,0,0.15); 
}
#contact h4 { 
  color:#fff; 
  font-weight:700; 
}

/* ===================== FOOTER ===================== */
footer { background:var(--dark); color:#ddd; }
footer h5, footer h6 { color:#fff; }
footer a { color:#ccc; transition:.3s; }
footer a:hover { color:#fff; }

/* ===================== Responsive ===================== */
@media (max-width:992px) {
  .hero-section h1 { font-size:2rem; }
  .hero-section p.lead { font-size:1rem; }
}
@media (max-width:576px) {
  .hero-section h1 { font-size:1.6rem; }
  .portfolio-card img { height:180px; }
}