/* ============================================================
   MIKE JR. AGOLA — Modern Portfolio CSS
   Theme: Original dark purple (#8750f7) with popup fix
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Fira+Code:wght@400;500&display=swap');

:root {
  --tj-theme-primary:   #8750f7 !important;
  --tj-theme-secondary: #2a1454 !important;
  --tj-theme-accent-1:  #0f0715 !important;
  --tj-theme-accent-2:  #140c1c !important;
  --tj-black-2:         #050709 !important;
  --tj-body:            #dddddd !important;
  --inter: 'Inter', sans-serif;
  --mono:  'Fira Code', monospace;
}

html, body { font-family: var(--inter) !important; }

/* ── PRELOADER ── */
.preloader { background: #0f0715 !important; }
.load-text span { font-family: var(--inter) !important; font-weight: 800 !important; }

/* ── HEADER ── */
.tj-header-area {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
.header-menu nav ul li a {
  font-family: var(--inter) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.header-button .btn.tj-btn-primary {
  font-family: var(--inter) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(135,80,247,.4) !important;
  transition: all .3s ease !important;
}
.header-button .btn.tj-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(135,80,247,.55) !important;
}

/* ── HERO ── */
.hero-section .hero-content-box .hero-sub-title {
  font-family: var(--mono) !important;
  font-size: 13px !important;
}
.hero-section .hero-content-box .hero-title {
  font-family: var(--inter) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
}
.hero-section .hero-content-box .lead {
  font-family: var(--inter) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

/* Sector badges */
.sector-badges { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 20px !important; }
.sector-badge {
  font-family: var(--inter) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  background: rgba(135,80,247,.1) !important;
  border: 1px solid rgba(135,80,247,.25) !important;
  border-radius: 4px !important;
  color: #c4a8ff !important;
  transition: all .25s !important;
}
.sector-badge:hover {
  background: rgba(135,80,247,.2) !important;
  transform: translateY(-1px) !important;
}

/* Stats */
.hero-section .funfact-item .number {
  font-family: var(--inter) !important;
  font-weight: 900 !important;
}
.hero-section .funfact-item .text {
  font-family: var(--inter) !important;
  font-size: 13px !important;
}

/* ── SECTION TITLES ── */
.section-title {
  font-family: var(--inter) !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
}
.section-header p {
  font-family: var(--inter) !important;
  font-size: 15px !important;
}

/* ── SERVICES ── */
.services-widget .service-item {
  transition: all .35s ease !important;
  position: relative !important;
}
.services-widget .service-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, #8750f7, #c084fc) !important;
  opacity: 0 !important;
  transition: opacity .35s !important;
}
.services-widget .service-item:hover::before,
.services-widget .service-item.current::before { opacity: 1 !important; }
.services-widget .service-item .left-box .service-title {
  font-family: var(--inter) !important;
  font-weight: 700 !important;
  letter-spacing: -.3px !important;
}
.services-widget .service-item .right-box p {
  font-family: var(--inter) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}
.services-widget .service-item .right-box p a {
  color: #c4a8ff !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(135,80,247,.35) !important;
}
.services-widget .service-item .right-box p a:hover {
  color: #e0c8ff !important;
}

/* ── PORTFOLIO ── */
.portfolio-box .portfolio-item {
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all .4s cubic-bezier(.25,.46,.45,.94) !important;
}
.portfolio-box .portfolio-item:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(135,80,247,.2) !important;
}
.portfolio-box .portfolio-item .image-box img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .5s ease !important;
}
.portfolio-box .portfolio-item:hover .image-box img { transform: scale(1.05) !important; }
.portfolio-box .portfolio-item .content-box .portfolio-title {
  font-family: var(--inter) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.portfolio-box .portfolio-item .content-box p {
  font-family: var(--inter) !important;
  font-size: 13px !important;
}
.live-badge {
  font-family: var(--inter) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  background: rgba(34,197,94,.12) !important;
  border: 1px solid rgba(34,197,94,.3) !important;
  border-radius: 20px !important;
  color: #22c55e !important;
}

/* ── MAGNIFIC POPUP ── */
.mfp-bg {
  background: rgba(15,7,21,.96) !important;
  backdrop-filter: blur(16px) !important;
}
.mfp-close {
  color: rgba(255,255,255,.4) !important;
  font-size: 28px !important;
  transition: color .2s !important;
}
.mfp-close:hover { color: #c4a8ff !important; }

/* ── POPUP INFO CARD (right side — Client, Role, Technology, Period) ── */
.portfolio_info_items {
  background: #f5f0ff !important;
  border: 1.5px solid #c4b5fd !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin-top: 0 !important;
  gap: 20px !important;
}
/* KEY labels */
.portfolio_info_items .info_item .key {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #7c3aed !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 6px !important;
  display: block !important;
}
/* VALUE text */
.portfolio_info_items .info_item .value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e1b4b !important;
  display: block !important;
  line-height: 1.55 !important;
}
.portfolio_info_items .info_item .value a {
  color: #1e1b4b !important;
  text-decoration: none !important;
}
.portfolio_info_items .info_item .value a:hover { color: #7c3aed !important; }

/* Tech pills inside the card */
.tech-pill {
  display: inline-block !important;
  background: #ede9fe !important;
  border: 1px solid #c4b5fd !important;
  color: #5b21b6 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  margin: 3px 3px 3px 0 !important;
}
/* Metric chips (below description) */
.metric-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ede9fe !important;
  border: 1px solid #c4b5fd !important;
  color: #5b21b6 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  margin: 3px 3px 3px 0 !important;
}
.metric-chip i { color: #7c3aed !important; }
  transition: all .3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.resume-section .resume-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, #8750f7, transparent) !important;
  opacity: 0 !important;
  transition: opacity .3s !important;
  border-radius: 3px 0 0 3px !important;
}
.resume-section .resume-item:hover::before { opacity: 1 !important; }
.resume-section .resume-item .time {
  font-family: var(--mono) !important;
  font-size: 11px !important;
}
.resume-section .resume-item .resume-title {
  font-family: var(--inter) !important;
  font-weight: 700 !important;
  letter-spacing: -.3px !important;
}
.resume-section .resume-item .institute {
  font-family: var(--inter) !important;
  font-size: 13px !important;
}

/* ── SKILLS ── */
.skills-widget .skill-item {
  transition: all .3s cubic-bezier(.25,.46,.45,.94) !important;
  border-radius: 12px !important;
}
.skills-widget .skill-item:hover {
  transform: translateY(-6px) scale(1.04) !important;
  box-shadow: 0 14px 30px rgba(135,80,247,.18) !important;
}
.skills-widget .skill-item p {
  font-family: var(--inter) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ── TESTIMONIALS ── */
.testimonial-section .testimonial-item .quote {
  font-family: var(--inter) !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  font-style: italic !important;
}
.testimonial-section .testimonial-item h4.name {
  font-family: var(--inter) !important;
  font-weight: 700 !important;
}
.testimonial-section .testimonial-item .designation {
  font-family: var(--mono) !important;
  font-size: 11px !important;
}
.t-avatar {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #8750f7, #c084fc) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--inter) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #fff !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 16px rgba(135,80,247,.35) !important;
}

/* ── CONTACT ── */
.contact-section .contact-form-box {
  border-radius: 18px !important;
}
.contact-section .form_group input,
.contact-section .form_group textarea,
.contact-section .form_group .nice-select {
  font-family: var(--inter) !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  transition: all .3s !important;
  outline: none !important;
}
.contact-section .form_group input:focus,
.contact-section .form_group textarea:focus {
  border-color: rgba(135,80,247,.5) !important;
  box-shadow: 0 0 0 3px rgba(135,80,247,.1) !important;
}
.contact-section .contact-info-list .text-box p {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
.contact-section .contact-info-list .text-box a {
  font-family: var(--inter) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color .2s !important;
}

/* ── MAGNIFIC POPUP ── */
.mfp-bg {
  background: rgba(15,7,21,.96) !important;
  backdrop-filter: blur(16px) !important;
}
.mfp-close {
  color: rgba(255,255,255,.4) !important;
  font-size: 28px !important;
  transition: color .2s !important;
}
.mfp-close:hover { color: #c4a8ff !important; }

/* ── OWL DOTS ── */
.owl-dot span {
  background: rgba(135,80,247,.25) !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  transition: all .3s !important;
}
.owl-dot.active span {
  background: #8750f7 !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* ── SCROLL PROGRESS ── */
.progress-wrap path { stroke: #8750f7 !important; }

/* ── RESPONSIVE ── */
@media (max-width: 767px) {
  .portfolio-box .portfolio-item .image-box img { height: 180px !important; }
}