/*
 * ================================================
 
/* 2. ─── Token overrides ─────────────────────── */
:root {
  /* Fonts: original Sora kept — no override */

  /* Palette – pure monochrome */
  --tj-body: #888888;
  /* body-copy text           */
  --tj-white: #ffffff;
  --tj-off-white: #f0f0f0;
  --tj-black: #000000;
  --tj-black-2: #000000;

  /* Theme primary: white instead of purple */
  --tj-theme-primary: #ffffff;
  --tj-theme-primary-1: #e0e0e0;
  --tj-theme-primary-2: #cccccc;
  --tj-theme-primary-3: #aaaaaa;
  --tj-theme-h3-primary-1: #888888;

  /* Theme secondary: near-black panel */
  --tj-theme-secondary: #111111;
  --tj-theme-h3-primary: #ffffff;

  /* Accent backgrounds */
  --tj-theme-accent-1: #000000;
  /* page background          */
  --tj-theme-accent-2: #0a0a0a;
  /* card / panel surface     */
  --tj-theme-h4-primary-1: #0a0a0a;

  /* Greys */
  --tj-grey-1: #888888;
  --tj-grey-2: #444444;
  --tj-grey-3: #aaaaaa;
  --tj-grey-4: #111111;
  --tj-grey-5: #555555;
  --tj-grey-6: #0d0d0d;

  /* Backgrounds */
  --tj-bg: #000000;
  --tj-bg-2: #050505;
  --tj-bg-3: #0d0d0d;
  --tj-bg-4: #111111;
  --tj-bg-5: #000000;
  --tj-h3-bg: #000000;
  --tj-h3-black: #050505;

  /* Borders */
  --tj-border: #1a1a1a;
  --tj-border1: #262626;
}

/* 3. ─── Base body & page background ─────────── */
body {
  background-color: #000000;
  color: #888888;
}

/* 4. ─── Headings ────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff;
  letter-spacing: -0.02em;
}

/* 5. ─── Section titles: plain white (cancel background-clip) ─ */
.section-header .section-title {
  /* Cancel the inline-flex + background-clip combo from main.css
     which renders as a solid white/grey box instead of text effect */
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}
.section-header.style-2 .section-title {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

.about-area .about-left-content .title {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* 6. ─── Scrollbar ───────────────────────────── */
* {
  scrollbar-color: #333333 #111111;
}

::-webkit-scrollbar {
  background: #111111;
}

::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 2px;
}

/* 7. ─── Buttons: sharp, white-on-black ──────── */
.tj-btn-primary {
  background-image: none !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border-radius: 0 !important;
  border: 1px solid #ffffff;
  letter-spacing: 0.04em;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.tj-btn-primary:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  background-position: unset;
}

.tj-btn-primary-2 {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 0 !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
}

.tj-btn-primary-2:hover {
  background: #111111 !important;
  color: #ffffff !important;
}

.tj-btn-secondary {
  border-radius: 0 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.tj-btn-secondary:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/* 8. ─── Social icons: square, white border ──── */
.social-icons li a {
  border-radius: 0 !important;
  border-color: #333333 !important;
  color: #888888 !important;
}

.social-icons li a::before {
  border-radius: 0 !important;
  background: #ffffff !important;
}

.social-icons li a:hover {
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* 9. ─── Header ──────────────────────────────── */
.tj-header-area {
  border-bottom: 1px solid #1a1a1a !important;
  background: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: blur(8px);
}

.tj-header-area.sticky-out {
  background: rgba(0, 0, 0, 0.98) !important;
}

.header-menu ul li a::before {
  background-image: none !important;
  background: #ffffff !important;
  height: 1px !important;
}

.header-info-list ul li a {
  color: #888888 !important;
  transition: color 0.2s;
}

.header-info-list ul li a:hover {
  color: #ffffff !important;
}

/* 10. ─── Hero wrapper ───────────────────────── */
.hero-wrrapper {
  border-radius: 0 !important;
  border: 1px solid #1a1a1a !important;
  background: #0a0a0a !important;
}

.hero-section.style-2::before {
  display: none !important;
  /* remove the purple glow */
}

.hero-wrrapper .hero-image-box img {
  border-radius: 0 !important;
  border-color: #333333 !important;
}

.hero-wrrapper:hover .hero-image-box img {
  border-color: #666666 !important;
}

/* 11. ─── Funfact strip ──────────────────────── */
.funfact-area.style-2 {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.funfact-area.style-2 .funfact-item .funfact-icon {
  color: #ffffff !important;
}

/* 12. ─── About cards ────────────────────────── */
.about-area .about-left-content {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.about-area .about-right-content {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

/* 13. ─── Skills ─────────────────────────────── */
.skills-section.style-2 {
  background: #000000 !important;
}

.skills-widget.style-2 .skill-item .skill-inner {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.skills-widget.style-2 .skill-item:hover .skill-inner {
  border-color: #ffffff !important;
  background: #111111 !important;
}

.skills-widget.style-2 .skill-item:hover .skill-inner .number {
  color: #ffffff !important;
}

/* 14. ─── Project cards ──────────────────────── */
.project-section,
.project-section.style-2 {
  background: #000000 !important;
}

.project-section::before {
  display: none !important;
  /* kill purple glow */
}

.project-section.style-2::before {
  display: none !important;
}

.project-content-area {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.project-content-area:hover {
  border-color: #333333 !important;
}

.project-content-area .project-wrapper {
  border-radius: 0 !important;
  background: #111111 !important;
}

.project-content-area.style-2 {
  border-radius: 0 !important;
  background: #0a0a0a !important;
}

.project-left-content .project_content .subtitle {
  color: #888888 !important;
}

.project-left-content .project_content .title a:hover,
.project-left-content .project_content .title button:hover {
  color: #ffffff !important;
}

.project-left-content .project_tags li>a {
  background-color: #111111 !important;
  color: #888888 !important;
  border-radius: 0 !important;
  border: 1px solid #1a1a1a;
}

.project-left-content .project_tags li>a:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff;
}

/* 15. ─── Specialization cards ───────────────── */
.specialization-section {
  background: #000000 !important;
}

.specialization-item {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.specialization-item:hover {
  border-color: #ffffff !important;
  background-color: #0d0d0d !important;
}

.specialization-item .specialization-icon {
  border-radius: 0 !important;
  background: #111111 !important;
}

.specialization-item .specialization-icon span {
  border-radius: 0 !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
}

.specialization-item .specialization-content {
  border-radius: 0 !important;
}

.specialization-item .specialization-content .title button:hover,
.specialization-item .specialization-content .title a:hover {
  color: #ffffff !important;
}

/* 16. ─── Works / Timeline ───────────────────── */
.works-section {
  background: #000000 !important;
}

.works-content-area {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.works-content-item .title {
  color: #ffffff !important;
}

.works-item::before {
  background: #ffffff !important;
  border-radius: 50% !important;
}

.works-content-area .works-content-item .works-content-box::before {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* 17. ─── Testimonials ───────────────────────── */
.testimonial-section.style-2 {
  background: #000000 !important;
}

.testimonial-section.style-2::before {
  display: none !important;
  /* kill purple glow */
}

.testimonial-item.style-2 {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.testimonial-item.style-2 .testimonials-auother .auother-image {
  border-radius: 0 !important;
  border-color: #333333 !important;
}

.testimonial-item.style-2 .testimonials-auother .auother-image img {
  border-radius: 0 !important;
}

.owl-dots .owl-dot.active span {
  background: #ffffff !important;
}

/* 18. ─── Brand section ──────────────────────── */
.brand-section {
  background: #000000 !important;
}

/* 19. ─── Contact section ────────────────────── */
.contact-section.style-2 {
  background: #000000 !important;
}

.contact-content-area {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.tj-contact-form.style-2 .form_group input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.tj-contact-form.style-2 .form_group textarea {
  border-bottom-color: #333333 !important;
  color: #ffffff;
}

.tj-contact-form.style-2 .form_group input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus,
.tj-contact-form.style-2 .form_group textarea:focus {
  border-bottom-color: #ffffff !important;
}

.contact-info-list-3 li>a,
.contact-info-list-3 li>p {
  color: #ffffff !important;
}

.contact-info-list-3 li>a:hover {
  color: #aaaaaa !important;
}

.contact-info-list-2 .text-box a:hover {
  color: #ffffff !important;
}

/* 20. ─── Footer ─────────────────────────────── */
.tj-footer-area.style-2 {
  background: #050505 !important;
  border-top: 1px solid #1a1a1a;
}

.tj-footer-area.style-2::before {
  display: none !important;
  /* remove purple glow */
}

.tj-footer-area.style-2 .footer-menu ul li a::before {
  background-image: none !important;
  background: #ffffff !important;
}

.copy-text.style-2 p {
  color: #555555 !important;
}

.copy-text.style-2 p>a:hover {
  color: #ffffff !important;
}

/* 21. ─── Back to top progress circle (keep circular) ───── */
.progress-wrap svg path {
  stroke: #ffffff !important;
}
.progress-wrap {
  background: #111111 !important;
  border: 1px solid #333333 !important;
  /* border-radius kept circular from backToTop.css */
}
.progress-wrap::after {
  color: #ffffff !important;
}

/* 22. ─── Popup / Modal ──────────────────────── */
.popup_content_area,
.mfp-content .popup_content_area {
  border-radius: 0 !important;
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a;
}

/* 23. ─── OWL carousel dots ─────────────────── */
.owl-dots .owl-dot span {
  background: #333333 !important;
}

/* 24. ─── Preloader ──────────────────────────── */
.preloader {
  background: #000000 !important;
}

.preloader svg {
  fill: #000000 !important;
}

/* 25. ─── Misc: kill all purple glows globally ─────── */
.hero-section.style-2::before,
.project-section::before,
.testimonial-section.style-2::before,
.skills-section.style-3::before,
.project-section.style-2::before,
.tj-footer-area.style-2::before {
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* 26. ─── theme-toggle btn (if present) ─────── */
.theme-toggle-btn {
  border-radius: 0 !important;
  background: #111111 !important;
  border: 1px solid #333333 !important;
  color: #ffffff !important;
}

.theme-toggle-btn:hover {
  background: #222222 !important;
}

/* 27. ─── nav current item underline ────────── */
.header-menu ul li a.current-menu-item {
  color: #ffffff !important;
}

.header-menu ul li a {
  color: #888888;
  transition: color 0.2s;
}

.header-menu ul li a:hover {
  color: #ffffff !important;
}

/* 28. ─── Accordion (FAQ) ────────────────────── */
.accordion-item {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.accordion-item:first-of-type,
.accordion-item:last-of-type {
  border-radius: 0 !important;
}

.accordion-item.active {
  background-color: #111111 !important;
  border-color: #333333 !important;
}

.accordion-item:not(:first-of-type) {
  border-top-color: #1a1a1a !important;
}

/* 29. ─── Service items ──────────────────────── */
.service-item {
  border-radius: 0 !important;
  border-color: #1a1a1a !important;
  background: #0a0a0a !important;
}

.service-item:hover {
  background: #111111 !important;
  border-color: #ffffff !important;
}

.service-item .service-icon {
  color: #ffffff !important;
}

.service-item:hover .service-icon {
  color: #ffffff !important;
}

/* 30. ─── Subtle glow: replace all purple filter blurs with nothing ── */
[style*="filter: blur"],
[style*="filter:blur"] {
  filter: none !important;
}

/* 31. ─── Line below header nav link ─────────── */
.header-menu ul li a::before {
  height: 1px !important;
  background: #ffffff !important;
  background-image: none !important;
}

/* 32. ─── Works icon dot in timeline ─────────── */
.works-inner .works-item .works-icon {
  border-radius: 0 !important;
  background: #111111 !important;
  border: 1px solid #333333;
}

.works-inner .works-item .works-content .number {
  color: #888888 !important;
}

/* 33. ─── Specialization icon top-bar ────────── */
.specialization-item .specialization-icon {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* 34. ─── Skills section 3 bg ────────────────── */
.skills-section.style-3 {
  background-color: #040404 !important;
}

.skills-section.style-3::before {
  display: none !important;
}

.skills-section.style-3 .skills-widget .skill-inner {
  background: #0a0a0a !important;
  border-radius: 0 !important;
}

/* 35. ─── Portfolio page ─────────────────────── */
.portfolio-filter-menu li a.active,
.portfolio-filter-menu li a:hover {
  color: #ffffff !important;
  background-color: #111111 !important;
  border-radius: 0 !important;
}

.portfolio-filter-menu li a {
  border-radius: 0 !important;
  color: #888888;
}

.portfolio-item {
  border-radius: 0 !important;
}

.portfolio-item .portfolio-overlay {
  border-radius: 0 !important;
}

/* 36. ─── Breadcrumb inner page ──────────────── */
/* Kill the JPG background image set by JS via data-bg-image */
.breadcrumb_area,
.breadcrumb-section {
  background-image: none !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #1a1a1a;
}
/* Kill the semi-transparent purple overlay — replace with pure black */
.breadcrumb_area::after {
  background-color: #000000 !important;
  opacity: 1 !important;
}
/* Breadcrumb title H1 */
.breadcrumb_content .title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* cancel any gradient clip */
  background: none !important;
}
/* Breadcrumb nav links */
.breadcrumb_navigation span {
  color: #888888 !important;
}
.breadcrumb_navigation span.current-item {
  color: #ffffff !important;
}
.breadcrumb_navigation span a {
  color: #888888 !important;
}
.breadcrumb_navigation span a:hover {
  color: #ffffff !important;
}
/* legacy class names */
.breadcrumb-section .breadcrumb-item a {
  color: #888888 !important;
}
.breadcrumb-section .breadcrumb-item.active {
  color: #ffffff !important;
}

/* 37. ─── Inner pages (about, services, etc.) ─ */
.inner-page {
  background-color: #000000 !important;
}

/* 38. ─── Contact form input / placeholder ─────── */
input::placeholder,
textarea::placeholder {
  color: #555555 !important;
}
/* allow inputs to inherit colour naturally; only force white inside forms */
.tj-contact-form input,
.tj-contact-form textarea {
  color: #ffffff !important;
}
.tj-contact-form select {
  color: #ffffff !important;
}

/* ─── END vercel-theme.css ──────────────────── */

/* 40. ─── Contact info icon circles: no gradient ─ */
.contact-info-list .icon-box {
  background: #000000 !important;
  background-image: none !important;
  border: 1px solid #333333 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.contact-info-list li:hover .icon-box {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}


/* 39. ─── Secondary ghost button (Projects CTA) ─ */
.tj-btn-secondary-2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 0 !important;
  font-weight: 600;
  font-size: inherit;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  margin-right: 12px;
}

.tj-btn-secondary-2:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

.tj-btn-secondary-2 .icon_box {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  width: 16px;
  height: 16px;
}

.tj-btn-secondary-2 .icon_box .icon_first,
.tj-btn-secondary-2 .icon_box .icon_second {
  position: absolute;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.tj-btn-secondary-2 .icon_box .icon_second {
  transform: translateX(-100%);
  opacity: 0;
}

.tj-btn-secondary-2:hover .icon_box .icon_first {
  transform: translateX(100%);
  opacity: 0;
}

.tj-btn-secondary-2:hover .icon_box .icon_second {
  transform: translateX(0);
  opacity: 1;
}