:root {
  --brutalist-bg: #ffffff;
  --brutalist-bg-alt: #f8fafc;
  --brutalist-border: #e2e8f0;
  --brutalist-text: #222222;
  --brutalist-text-muted: #3d3d3d;
  --brutalist-icon-sq-bg: #222222;
  --brutalist-icon-sq-color: #ffffff;
}

body.dark-mode {
  --brutalist-bg: #000000;
  --brutalist-bg-alt: #111111;
  --brutalist-border: #333333;
  --brutalist-text: #ffffff;
  --brutalist-text-muted: #a3a3a3;
  --brutalist-icon-sq-bg: #ffffff;
  --brutalist-icon-sq-color: #000000;
}

/* Brutalist Component Overrides for Index.html */
/* Unified Brutalist Sections Background Override */
.dedicated-about-section,
.stats-section,
.project-detail-section,
.about-section,
.projects-section,
.skills-section,
.timeline-section {
  background-color: var(--brutalist-bg) !important;
}

.project-card {
  background-color: var(--brutalist-bg) !important;
  border-color: var(--brutalist-border) !important;
}

.projects-section h2,
.skills-section h2,
.timeline-section h2,
.project-card h4,
.timeline-item h4 {
  color: var(--brutalist-text) !important;
}

.projects-section p,
.skills-section p,
.project-card p,
.timeline-item p,
.timeline-date {
  color: var(--brutalist-text-muted) !important;
}

.project-card span {
  background-color: var(--brutalist-bg-alt) !important;
  color: var(--brutalist-text) !important;
}

/* WakaTime logo logic */
.skills-section svg {
  fill: var(--brutalist-text) !important;
}

/* Hero Section Dark Mode Fallback */
body.dark-mode .hero-btn-light {
  border: 2px solid #ffffff !important;
  background: transparent !important;
  color: #ffffff !important;
}

body.dark-mode .hero-btn-light:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body.dark-mode .hero-section {
  background-color: var(--brutalist-bg);
  background-image:
    linear-gradient(var(--brutalist-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--brutalist-border) 1px, transparent 1px);
}

body.dark-mode .hero-text-large {
  color: var(--brutalist-text) !important;
}

body.dark-mode .hero-desc {
  color: var(--brutalist-text-muted) !important;
}

body.dark-mode .hero-btn-dark {
  background: var(--brutalist-text);
  color: var(--brutalist-bg) !important;
}

body.dark-mode .hero-btn-dark:hover {
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 2px #ffffff !important;
}

/* Force override of any inline brutalist styles */
.layout-card-bg {
  background-color: var(--brutalist-bg) !important;
  border-color: var(--brutalist-border) !important;
  color: var(--brutalist-text) !important;
}

.layout-heading {
  color: var(--brutalist-text) !important;
}

.layout-desc {
  color: var(--brutalist-text-muted) !important;
}

.icon-sq {
  background-color: var(--brutalist-icon-sq-bg) !important;
  color: var(--brutalist-icon-sq-color) !important;
}

.testimonial-card-wrap .flex-shrink-0 {
  background-color: var(--brutalist-icon-sq-bg) !important;
  color: var(--brutalist-icon-sq-color) !important;
}

/* Extracted from contact.html */
/* Contact Page - Adaptive Mockup Style */

/* Gradients */
.purple-gradient-text {
  background: linear-gradient(to right, #b46bfa, #8b3ef7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-btn {
  background: linear-gradient(to right, #b46bfa, #8b3ef7);
}

.gradient-btn:hover {
  opacity: 0.9;
}

/* Input Fields styling matching mockup */
.classic-input {
  background-color: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #111827;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.3s;
}

.classic-input:focus {
  border-color: #b46bfa;
  box-shadow: 0 0 0 3px rgba(180, 107, 250, 0.15);
  outline: none;
}

/* Shadows & Borders */
.custom-shadow {
  background: #ffffff;
  border: 1.5px solid #f3f4f6;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.icon-circle {
  background: #f9fafb;
}

.icon-color {
  color: #4b5563;
}

.stat-icon-bg {
  background: #f9fafb;
}

.stat-icon-color {
  color: #4b5563;
}

/* Light Theme Text Colors */
.layout-heading {
  color: #111827;
}

.layout-title {
  color: #111827;
}

.layout-desc {
  color: #6b7280;
}

.layout-label {
  color: #4b5563;
}

.stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Additional Minimalist Modifiers */
.brutalist-contact-section {
  background: #ffffff;
}

.social-icon-brutalist:hover {
  background: #0a1128;
  border-color: #0a1128 !important;
  color: #ffffff !important;
}

.brutalist-contact-section .header-subtitle {
  color: #64748b;
}

.solid-input {
  background-color: #f8fafc;
  border: 1px solid #f8fafc;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  color: #0a1128;
  font-size: 0.9rem;
  transition: all 0.2s ease-in-out;
}

.solid-input::placeholder {
  color: #94a3b8;
}

.solid-input:focus {
  background-color: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(203, 213, 225, 0.2) !important;
  outline: none;
}

.button-brutalist {
  background: #0a1128;
}

.button-brutalist:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(10, 17, 40, 0.2);
}

.btn-hire-me {
  border: 2px solid #0a1128 !important;
  color: #0a1128 !important;
  background: transparent;
  border-radius: 8px;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-hire-me:hover {
  background: #0a1128 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.bento-info-grid .layout-card-bg {
  transition: all 0.2s;
}

.bento-info-grid .layout-card-bg:hover {
  border-color: #e2e8f0;
  background: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Soft Blur Shadow Hover */
.hover-soft-shadow {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.hover-soft-shadow:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08) !important;
}

/* =========================================
       Dark Mode Adaptation (Matches Minimalist Mockup)
       ========================================= */
body.dark-mode .brutalist-contact-section {
  background-color: #0a0a0a;
}

body.dark-mode .site-veil-wrapper {
  background-color: #0a0a0a !important;
}

body.dark-mode .contact-content-area {
  background-color: #0c0c0c;
}

body.dark-mode .lower-contact-section {
  background-color: #0f0f0f;
  border-color: #1f1f1f !important;
}

body.dark-mode .layout-heading {
  color: #ffffff !important;
}

body.dark-mode .layout-title {
  color: #ffffff !important;
}

body.dark-mode .layout-desc {
  color: #a1a1aa;
}

body.dark-mode .layout-label {
  color: #94a3b8;
}

body.dark-mode .hover-soft-shadow:hover {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .btn-hire-me {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.dark-mode .btn-hire-me:hover {
  background: #ffffff !important;
  color: #0a0a0a !important;
}

body.dark-mode .header-subtitle {
  color: #64748b;
}

body.dark-mode .custom-shadow {
  background: rgba(23, 23, 23, 0.85);
  /* Matches card in mockup */
  border: 1.5px solid #262626;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

body.dark-mode .icon-circle {
  background: #262626;
  box-shadow: none;
}

body.dark-mode .icon-color {
  color: #9ca3af;
}

body.dark-mode .layout-card-bg {
  background-color: #171717 !important;
  border-color: #262626 !important;
}

body.dark-mode .layout-card-bg:hover {
  background-color: #262626 !important;
  border-color: #404040 !important;
}

body.dark-mode .layout-card-bg i.bi {
  color: #ffffff;
}

body.dark-mode .layout-form-card {
  background-color: #111111 !important;
  border-color: #262626 !important;
}

body.dark-mode .social-icon-brutalist {
  border-color: #404040 !important;
  color: #cbd5e1 !important;
}

body.dark-mode .social-icon-brutalist:hover {
  background: #ffffff !important;
  color: #0a0a0a !important;
}

body.dark-mode .solid-input {
  background-color: #171717;
  border-color: #171717;
  color: #ffffff;
}

body.dark-mode .solid-input::placeholder {
  color: #52525b;
}

body.dark-mode .solid-input:focus {
  background-color: #1f1f1f;
  border-color: #404040;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .button-brutalist {
  background: #ffffff;
  color: #0a0a0a !important;
}

body.dark-mode .button-brutalist:hover {
  box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1);
}

body.dark-mode .badge-outline-dynamic {
  border-color: #ffffff;
  color: #ffffff;
}

body.dark-mode .btn-outline-dynamic {
  border-color: #262626;
  color: #ffffff;
}

body.dark-mode .btn-outline-dynamic:hover {
  background: #262626;
  border-color: #404040;
}

body.dark-mode .stat-icon-bg {
  background: #262626;
}

body.dark-mode .stat-icon-color {
  color: #9ca3af;
}

.testimonial-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
}

.track-left {
  animation: scroll-left 35s linear infinite;
}

.track-right {
  animation: scroll-right 40s linear infinite;
}

.testimonial-track:hover {
  animation-play-state: paused;
}

.testimonial-card-wrap {
  width: 400px;
  flex-shrink: 0;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(calc(-50% - 0.75rem));
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(calc(-50% - 0.75rem));
  }

  100% {
    transform: translateX(0%);
  }
}

@media (max-width: 768px) {
  .testimonial-card-wrap {
    width: 320px;
  }
}

/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

:root {
  --dark: #000000;
  --darkgray: #343a40;
  --light: #ffffff;
  --lightgray: #b3b3b3;
}

html,
body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  background-color: var(--dark);
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: var(--light);
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: var(--light);
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  background: var(--light);
  font-family: "Roboto", sans-serif;
}

::selection {
  background: var(--lightgray);
  color: var(--light);
}

::-moz-selection {
  background: var(--lightgray);
  color: var(--light);
}

.border-button a {
  font-size: 14px;
  color: var(--light);
  background-color: transparent;
  border: 1px solid var(--light);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.border-button a:hover {
  background-color: var(--light);
  color: var(--dark);
}

.main-button a {
  font-size: 14px;
  color: var(--dark);
  background-color: var(--light);
  border: 1px solid var(--dark);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.main-button a:hover {
  background-color: var(--dark);
  color: var(--light);
  border: 1px solid var(--light);
}

section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  margin-bottom: 80px;
  text-align: center;
}

.section-heading .line-dec {
  width: 100px;
  height: 2px;
  background-color: var(--light);
  margin: 0 auto 30px auto;
}

.section-heading h2 {
  margin-top: 10px;
  line-height: 36px;
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  color: -var(--light);
}

.section-heading h2 em {
  color: -var(--light);
  font-style: normal;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 999999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Radio Rhythm Preloader */
.preloader-radio-rhythm {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  gap: 6px;
}

.preloader-radio-rhythm .bar {
  width: 6px;
  height: 10px;
  background-color: #111827;
  /* Dark black bars for light background */
  border-radius: 10px;
  animation: radioWave 1.2s cubic-bezier(0.85, 0.25, 0.37, 0.85) infinite;
}

.preloader-radio-rhythm .bar:nth-child(1) {
  animation-delay: 0s;
}

.preloader-radio-rhythm .bar:nth-child(2) {
  animation-delay: 0.15s;
}

.preloader-radio-rhythm .bar:nth-child(3) {
  animation-delay: 0.3s;
}

.preloader-radio-rhythm .bar:nth-child(4) {
  animation-delay: 0.45s;
}

.preloader-radio-rhythm .bar:nth-child(5) {
  animation-delay: 0.6s;
}

@keyframes radioWave {

  0%,
  100% {
    height: 10px;
    opacity: 0.5;
  }

  50% {
    height: 40px;
    opacity: 1;
  }
}

/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: transparent !important;
  height: 70px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  box-shadow: none !important;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.header-area {
  background-color: transparent;
  position: absolute;
  height: 70px;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.header-area .main-nav {
  min-height: 70px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
}

.background-header .main-nav {
  padding: 0px;
  background-color: transparent;
}

.header-area .main-nav .logo {
  flex-basis: auto;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .text-logo {
  font-weight: 600;
  font-size: 22px;
  color: var(--dark);
  display: flex;
  align-items: center;
}

.header-area .main-nav .nav-wrapper {
  background-color: #f3f4f6;
  border-radius: 50px;
  padding: 5px;
  display: flex;
  align-items: center;
}

.header-area .main-nav .nav {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 2px;
  padding-right: 2px;
  display: inline-block;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: capitalize;
  color: var(--dark);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  border: transparent;
  padding: 8px 20px;
  border-radius: 50px;
  letter-spacing: 0.5px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 25px !important;
}

.header-area .main-nav .nav li a.active,
.header-area .main-nav .nav li:hover a {
  color: var(--dark) !important;
  background-color: var(--light) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.background-header .main-nav .nav li a.active,
.background-header .main-nav .nav li:hover a {
  color: var(--dark) !important;
  opacity: 1;
}

.header-area .main-nav .action-icons {
  display: flex;
  align-items: center;
  gap: 15px;
  align-self: center;
}

.header-area .main-nav .action-icons a {
  color: var(--dark);
  font-size: 18px;
  transition: all 0.3s ease;
}

/* Language Dropdown Styling */
.lang-switch-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-menu {
  position: absolute;
  top: 180%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 100;
}

.lang-switch-container:hover .lang-menu,
.lang-switch-container:focus-within .lang-menu {
  top: 130%;
  opacity: 1;
  visibility: visible;
}

.header-area .main-nav .action-icons .lang-menu li {
  padding: 0;
}

.header-area .main-nav .action-icons .lang-menu li a {
  display: flex !important;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px !important;
  font-weight: 600;
  color: #4b5563 !important;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    padding-left 0.2s ease;
}

.header-area .main-nav .action-icons .lang-menu li a:hover {
  background-color: #f3f4f6;
  color: #111827 !important;
  opacity: 1 !important;
  padding-left: 22px;
}

.header-area .main-nav .action-icons a:hover {
  opacity: 0.7;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 17px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: var(--dark);
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: var(--dark);
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: var(--dark);
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: var(--dark);
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: var(--dark);
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: var(--dark);
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: var(--dark);
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: var(--darkgray);
}

.header-area.header-sticky {
  min-height: 70px;
}

.header-area.header-sticky .nav li a.active {
  color: var(--light);
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area {
    top: 0;
  }

  .header-area .main-nav {
    background-color: transparent;
    border-radius: 0px;
  }

  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }

  .header-area .main-nav .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 38px;
  }

  .background-header .main-nav .logo {
    top: 22px;
  }

  .background-header .main-nav .border-button {
    top: 0px !important;
  }

  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }

  .header-area.header-sticky .nav li a:hover {
    color: var(--dark) !important;
    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area {
    background-color: none;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 0px;
  }

  .header-area .menu-trigger {
    display: none !important;
  }

  .header-area .main-nav .action-icons {
    display: none !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .nav-wrapper {
    width: 100%;
    background-color: transparent;
    padding: 0;
  }

  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area.header-sticky .nav {
    margin-top: 85px !important;
    text-align: center;
  }

  .background-header.header-sticky .nav {
    margin-top: 70px !important;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid var(--light);
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: var(--light);
    border-bottom: 1px solid var(--light);
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: var(--light) !important;
    color: #1e1e1e !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: var(--light) !important;
    color: var(--lightgray) important;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }

  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }

  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }

  .header-area .main-nav .nav li.has-sub:after {
    color: var(--darkgray);
    right: 30px;
    font-size: 14px;
    top: 15px;
  }

  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

/* 
---------------------------------------------
Main Banner Style
--------------------------------------------- 
*/

.hero-section {
  background-color: #ffffff;
  background-image:
    linear-gradient(#f0f0f0 1px, transparent 1px),
    linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center center;
  padding-top: 200px;
  padding-bottom: 120px;
  position: relative;
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom, transparent, var(--brutalist-bg));
  pointer-events: none;
}

.hero-typography {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  line-height: 0.9;
}

.hero-text-large {
  font-size: 3.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0;
  letter-spacing: -2px;
}

.hero-text-small {
  font-size: 1.2rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  color: var(--dark);
  margin: -10px 0;
}

.hero-role-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.hero-role-wrapper .line-left,
.hero-role-wrapper .line-right {
  display: inline-block;
  width: 50px;
  height: 1px;
  background-color: #ddd;
  margin: 0 15px;
}

.hero-role {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--dark);
  margin: 0;
}

.hero-role .wrap {
  border-right: 0.08em solid #111827;
  animation: blink-caret 0.75s step-end infinite;
  display: inline-block;
  padding-right: 5px;
}

@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: #111827;
  }
}

.hero-desc {
  max-width: 600px;
  margin: 0 auto 35px auto;
  font-size: 14px;
  color: var(--darkgray) !important;
  font-weight: 400;
}

.hero-action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 40px;
}

.hero-btn-dark {
  background-color: var(--dark);
  color: var(--light) !important;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
  border: 2px solid var(--dark);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-btn-dark:hover {
  background-color: transparent;
  color: var(--dark) !important;
  transform: translateY(-3px);
}

.hero-btn-light {
  background-color: transparent;
  color: #111827 !important;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
  border: 2px solid #111827;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-btn-light:hover {
  background-color: #111827;
  color: #ffffff !important;
  transform: translateY(-3px);
}

.hero-social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.hero-social-links li {
  list-style: none;
}

.hero-social-links a {
  display: inline-block;
  color: var(--darkgray) !important;
  font-size: 20px;
  margin: 0 10px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-social-links a:hover {
  background-color: transparent;
  color: #111827 !important;
  transform: translateY(-4px);
}

body.dark-mode .hero-social-links a:hover {
  color: #f9fafb !important;
}

/* Mouse Scroll Indicator */
.scroll-down-mouse {
  width: 100%;
  text-align: center;
}

.mouse-icon {
  display: inline-block;
  width: 26px;
  height: 42px;
  border: 2px solid #111827;
  border-radius: 20px;
  position: relative;
  transition: border-color 0.3s ease;
  opacity: 0.6;
}

.mouse-icon:hover {
  opacity: 1;
}

.mouse-wheel {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 6px;
  background-color: #111827;
  border-radius: 4px;
  animation: scrollWheel 2s infinite cubic-bezier(0.15, 0.41, 0.69, 0.94);
}

@keyframes scrollWheel {
  0% {
    top: 6px;
    opacity: 1;
    height: 6px;
  }

  40% {
    top: 16px;
    opacity: 0.2;
    height: 12px;
  }

  100% {
    top: 6px;
    opacity: 0;
    height: 6px;
  }
}

@media (max-width: 768px) {
  .hero-text-large {
    font-size: 2rem;
  }
}

.hero-section h6 {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.hero-section h2 {
  color: var(--light);
  font-size: 50px;
  font-weight: 700;
  line-height: 66px;
  text-transform: uppercase;
}

.hero-section p {
  margin-top: 20px;
}

.hero-section .buttons {
  margin-top: 30px;
  display: flex;
  justify-content: start;
}

.hero-section .border-button {
  margin-right: 15px;
}

.hero-section .owl-banner {
  margin-top: -40px;
}

.hero-section .owl-nav {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom: -76px;
  text-align: center;
}

.hero-section .owl-nav .owl-prev {
  margin-right: 7.5px;
}

.hero-section .owl-nav .owl-next {
  margin-left: 7.5px;
}

.hero-section .owl-nav .owl-prev span,
.hero-section .owl-nav .owl-next span {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
  display: inline-block;
  color: var(--dark);
  background-color: var(--light);
  border-radius: 50%;
  opacity: 1;
  transition: all 0.3s;
}

.hero-section .owl-nav .owl-prev span:hover,
.hero-section .owl-nav .owl-next span:hover {
  opacity: 0.8;
}

@media (max-width: 992px) {
  .hero-section {
    padding-top: 200px;
    padding-bottom: 150px;
  }

  .hero-section h2 {
    font-size: 30px;
    line-height: 46px;
  }
}

/* 
---------------------------------------------
About Section Style
--------------------------------------------- 
*/

.about-section {
  background-color: #ffffff;
  height: 300vh;
  position: relative;
}

.about-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.reveal-text {
  font-family: "Poppins", sans-serif;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.5px;
  text-align: center;
  margin: 0;
}

/* Skills Orbital Layout */
.orbital-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.orbital-center {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 8px;
  background: white;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  z-index: 10;
  opacity: 0;
  transform: scale(0);
}

.skills-section.in-view .orbital-center {
  animation: nodePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.orbital-center img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.orbital-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.orbital-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.orbit-node {
  position: absolute;
  top: 50%;
  left: 50%;
  /* We will transform this via JS to sit on the orbit */
  width: 76px;
  height: 76px;
  margin-top: -38px;
  margin-left: -38px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.node-icon {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  /* Devicon size */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
  opacity: 0;
  transform: scale(0);
}

.skills-section.in-view .node-icon {
  animation: nodePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.skills-section.in-view .node-icon:hover {
  transform: scale(1.15) translateY(-5px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

@keyframes nodePop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Timeline Section Layout */
.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.timeline::after {
  content: "";
  position: absolute;
  width: 2px;
  background-color: #e5e7eb;
  /* Sangat pudar (faint gray) */
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.timeline-item {
  padding: 10px 0px;
  position: relative;
  background-color: inherit;
  width: 50%;
  margin-bottom: 60px;
  z-index: 10;
}

.timeline-item::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: #e5e7eb;
  /* Warna pudar saat tidak di-scroll */
  border: 11px solid #ffffff;
  /* Border putih tebal (total ruang gap) diukur murni dengan box-sizing */
  border-radius: 50%;
  top: 30px;
  z-index: 5;
  box-sizing: border-box;
  transition: background-color 0.5s ease;
}

.timeline-item.left {
  left: 0;
  text-align: right;
}

.timeline-item.right {
  left: 50%;
  text-align: left;
}

.timeline-item.left::after {
  right: -16px;
}

.timeline-item.right::after {
  left: -16px;
}

/* Timeline Typography */
.display-title {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  letter-spacing: -1px;
  word-spacing: 4px;
  font-size: 2rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: #242424;
  margin: 0;
}

/* Cross-Axis Editorial Title Placement (Desktop Only) */
@media screen and (min-width: 769px) {
  .timeline-item.left .dflex {
    /* removed position: relative to allow badge positioning relative to item container */
  }

  .timeline-item.left .timeline-badge {
    position: absolute;
    left: 100%;
    top: 35px;
    /* centers perfectly with the timeline dot */
    margin-left: 50px !important;
    white-space: nowrap;
    text-align: left;
  }

  .timeline-item.right .dflex {
    /* removed position: relative to allow badge positioning relative to item container */
  }

  .timeline-item.right .timeline-badge {
    position: absolute;
    right: 100%;
    top: 35px;
    /* centers perfectly with the timeline dot */
    margin-right: 50px !important;
    white-space: nowrap;
    text-align: right;
  }
}

.timeline-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  border-radius: 2px;
  color: #4b5563;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  white-space: nowrap;
}

.role-title {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.timeline-meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.timeline-meta i {
  margin-right: 4px;
}

/* For dflex utility which fixes responsive alignment */
.dflex {
  display: flex;
}

/* Responsive Timeline */
@media screen and (max-width: 768px) {
  .timeline::after {
    left: 20px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 50px;
    padding-right: 15px;
    margin-bottom: 40px;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0;
    text-align: left !important;
  }

  .timeline-item.left::after,
  .timeline-item.right::after {
    left: 9px;
  }

  .timeline-item.left .dflex {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .timeline-item.left .text-end {
    text-align: left !important;
  }

  .timeline-content p {
    margin-left: 0 !important;
  }

  .display-title {
    font-size: 1.6rem;
  }
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

/* Timeline Scroll Animations */
.timeline {
  --line-fill: 0%;
}

.timeline::before {
  content: "";
  position: absolute;
  width: 2px;
  background-color: #252525;
  top: 0;
  height: var(--line-fill);
  left: 50%;
  margin-left: -1px;
  z-index: 1;
  transition: height 0.1s ease-out;
}

.timeline-item {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.timeline-item.left {
  transform: translateX(-50px);
}

.timeline-item.right {
  transform: translateX(50px);
}

.timeline-item.show-me {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up the timeline dots with a delay */
.timeline-item.show-me::after {
  background-color: #111827;
  /* Berubah menjadi hitam pekat saat di scroll */
}

@media screen and (max-width: 768px) {
  .timeline::before {
    left: 20px;
  }

  .timeline-item.right {
    transform: translateX(-50px);
  }
}

/* OnyxCode CTA Section */
.cta-glow {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.cta-heading {
  font-family: "Poppins", sans-serif;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -3.5px;
  text-transform: uppercase;
  color: #111827;
}

.cta-grid {
  border-top: 1px solid #e5e7eb;
  padding-top: 40px;
}

.cta-col {
  border-right: 1px solid #f3f4f6;
}

.cta-col:last-child {
  border-right: none;
}

.cta-col-inner {
  padding-right: 30px;
}

.cta-subtitle {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #9ca3af;
  text-transform: uppercase;
}

.cta-content {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  margin-bottom: 0;
}

.cta-button {
  background-color: #252525;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 14px 40px;
  border-radius: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid #111827;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background-color: #ffffff;
  color: #111827;
}

/* CTA Responsive */
@media screen and (max-width: 992px) {
  .cta-heading {
    font-size: 3.5rem;
    letter-spacing: -2px;
  }
}

@media screen and (max-width: 768px) {
  .cta-heading {
    font-size: 2.5rem;
    letter-spacing: -1.5px;
  }

  .cta-grid {
    padding-top: 20px;
  }

  .cta-col {
    border-right: none;
    border-bottom: 1px solid #f3f4f6;
    padding: 20px 0;
  }

  .cta-col:last-child {
    border-bottom: none;
  }

  .cta-col-inner {
    padding-right: 0;
  }

  .cta-col-inner.ps-md-4 {
    padding-left: 0 !important;
  }

  .d-flex.justify-content-end.mt-5.pt-3 {
    justify-content: flex-start !important;
    margin-top: 30px !important;
  }
}

/* Curtain Footer Layout */
body {
  background-color: #1a1a1a;
  /* Exposes the dark background when overscrolled */
}

.site-veil-wrapper {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  /* Adds a sharp drop shadow to the curtain tearing edge */
}

/* Footer Reveal Header Inversion */
.header-area.header-sticky.footer-overlap {
  background-color: transparent !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
}

.header-area.header-sticky.footer-overlap .main-nav .nav-wrapper {
  background-color: #ffffff !important;
}

.header-area.header-sticky.footer-overlap .main-nav .logo.text-logo {
  color: #ffffff !important;
}

.header-area.header-sticky.footer-overlap .main-nav .nav li a {
  color: #111827 !important;
}

.header-area.header-sticky.footer-overlap .main-nav .nav li a:hover,
.header-area.header-sticky.footer-overlap .main-nav .nav li a.active {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

.header-area.header-sticky.footer-overlap .main-nav .action-icons a {
  color: #ffffff !important;
}

/* Footer Inverse for Lang Menu */
.header-area.header-sticky.footer-overlap .lang-menu {
  background-color: #111827;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-area.header-sticky.footer-overlap .main-nav .action-icons .lang-menu li a {
  color: rgba(255, 255, 255, 0.7) !important;
}

.header-area.header-sticky.footer-overlap .main-nav .action-icons .lang-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
}

.header-area.header-sticky.footer-overlap .main-nav .menu-trigger span,
.header-area.header-sticky.footer-overlap .main-nav .menu-trigger span:before,
.header-area.header-sticky.footer-overlap .main-nav .menu-trigger span:after {
  background-color: #ffffff !important;
}

/* -------------------------------------
   GLOBAL DARK MODE OVERRIDES
-------------------------------------- */
body.dark-mode .btn-light {
  background-color: #414141 !important;
  color: #f9fafb !important;
  border-color: #414141 !important;
}

body.dark-mode .btn-light:hover {
  background-color: #414141 !important;
}

body.dark-mode .line-left,
body.dark-mode .line-right {
  background-color: #f9fafb !important;
}

body.dark-mode,
body.dark-mode p,
body.dark-mode span:not(.badge):not(.timeline-badge),
body.dark-mode .text-muted {
  color: #9ca3af !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .hero-role,
body.dark-mode .display-title,
body.dark-mode strong {
  color: #f9fafb !important;
}

body.dark-mode .header-area.background-header {
  background-color: transparent !important;
  box-shadow: none !important;
}

body.dark-mode .lang-menu,
body.dark-mode .services-section .item,
body.dark-mode .project-card,
body.dark-mode .bg-light {
  background-color: #374151 !important;
}

body.dark-mode .text-dark {
  color: #f9fafb !important;
}

body.dark-mode input,
body.dark-mode textarea {
  background-color: #545555 !important;
  color: #f9fafb !important;
  border-color: #626262 !important;
}

body.dark-mode .node-label {
  color: #d1d5db !important;
}

body.dark-mode .timeline-badge {
  color: #d1d5db !important;
}

body.dark-mode .header-area.header-sticky .main-nav .nav li a.active,
body.dark-mode .header-area.header-sticky.footer-overlap .main-nav .nav li a.active {
  color: #000000 !important;
  background-color: transparent !important;
}

body.dark-mode .header-area .main-nav .logo .logo-text,
body.dark-mode .header-area.header-sticky .main-nav .nav li a.active,
body.dark-mode .header-area.header-sticky.footer-overlap .main-nav .nav li a.active {
  color: #000000 !important;
  background-color: transparent !important;
}

body.dark-mode .header-area .main-nav .logo h1 {
  color: #ffffff !important;
}

body.dark-mode .header-area .main-nav a.logo.text-logo {
  color: #ffffff !important;
}

body.dark-mode .header-area .main-nav .nav-wrapper a {
  color: #000000 !important;
}

body.dark-mode .header-area .main-nav .nav-wrapper a:hover,
body.dark-mode .header-area .main-nav .nav-wrapper a.active {
  color: #000000 !important;
}

body.dark-mode .header-area .main-nav a.logo.text-logo {
  color: #ffffff !important;
}

body.dark-mode .header-area .main-nav .nav-wrapper a:hover,
body.dark-mode .header-area .main-nav a.logo.text-logo {
  color: #ffffff !important;
}

body.dark-mode .header-area .main-nav .nav-wrapper a.active {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.dark-mode .header-area .main-nav .action-icons a:not(.theme-switch) {
  color: #ffffff !important;
}

body.dark-mode .header-area .main-nav .action-icons .theme-switch {
  color: #ffffff !important;
}

body.dark-mode .orbital-svg path {
  stroke: #5c5c5c !important;
}

body.dark-mode .hero-role .wrap {
  border-right-color: #f9fafb !important;
}

body.dark-mode .mouse-icon {
  border-color: #f9fafb !important;
}

body.dark-mode .mouse-wheel {
  background-color: #f9fafb !important;
}

body.dark-mode .js-preloader {
  background-color: #222222 !important;
}

body.dark-mode .preloader-radio-rhythm .bar {
  background-color: #f9fafb !important;
}

body.dark-mode .timeline-item::after {
  /* Center dot in timeline */
  background-color: #535353 !important;
  border-color: #222222 !important;
}

body.dark-mode .timeline::before {
  background-color: #535353 !important;
}

body.dark-mode .img-badges .badge,
body.dark-mode .tech-stack .badge {
  background-color: #535353 !important;
  color: #e5e7eb !important;
}

/* -------------------------------------
   MOBILE/TABLET TIMELINE RESPONSIVENESS
-------------------------------------- */
@media screen and (max-width: 768px) {

  /* Shift vertical track to the far left side */
  .timeline::after,
  .timeline::before {
    left: 20px;
    margin-left: 0;
  }

  /* Expand items to 100% width and add padding to clear the line */
  .timeline-item {
    width: 100%;
    padding-left: 65px;
    padding-right: 0;
  }

  /* Reset right items which had a 50% left margin offset */
  .timeline-item.right {
    left: 0%;
  }

  /* Sync the dots to physically mount the left track */
  .timeline-item.left::after,
  .timeline-item.right::after {
    left: 4px;
    /* (20px line - 16px dot radius) */
    right: auto;
  }

  /* Completely kill horizontal transforms which caused massive X-axis bleeding */
  .timeline-item.left,
  .timeline-item.right {
    transform: translateY(20px) !important;
    left: 0 !important;
    width: 100% !important;
    padding-left: 65px !important;
    text-align: left !important;
  }

  .timeline-item.show-me {
    transform: translateY(0) !important;
  }

  /* Override text alignment for originally mirrored left items */
  .timeline-item.left .timeline-content,
  .timeline-item.right .timeline-content {
    text-align: left !important;
    padding: 0 !important;
  }

  /* Force headers and badges to stack nicely */
  .timeline-item.left .dflex,
  .timeline-item.right .dflex {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  /* Reorder right items so the badge falls below the title */
  .timeline-item.right .display-title {
    order: 1;
  }

  .timeline-item.right .timeline-badge {
    order: 2;
    margin-top: 10px !important;
  }

  .timeline-item.left .display-title,
  .timeline-item.left .role-title,
  .timeline-item.left .timeline-meta,
  .timeline-item.left p {
    text-align: left !important;
    margin-left: 0 !important;
  }

  .timeline-item.left .timeline-badge,
  .timeline-item.right .timeline-badge {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 15px !important;
    align-self: flex-start;
  }
}

/* -------------------------------------
   MOBILE/TABLET NAVBAR OVERRIDES
-------------------------------------- */
@media (max-width: 992px) {
  .header-area .main-nav .action-icons {
    position: absolute;
    right: 80px;
    top: 38px;
    /* Aligns with default tall hamburger center */
    gap: 15px;
    transition: all 0.4s;
  }

  .background-header .main-nav .action-icons {
    top: 22px;
    /* Aligns with shrunken scrolled hamburger center */
  }

  .header-area .main-nav .action-icons>a[href="#contact"] {
    display: none;
    /* Hide 'Get in touch' to preserve space */
  }

  .lang-menu {
    left: auto;
    right: 0;
    transform: translateX(20%);
    /* Adjust dropdown bounding box on mobile */
  }
}

/* -------------------------------------
   MOBILE/TABLET BOTTOM NAVBAR
-------------------------------------- */
.mobile-nav-wrapper {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 450px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 998;
  animation: mobileNavEntrance 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.5s both;
}

.mobile-bottom-nav {
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 50px;
  padding: 6px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-settings-fab {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b7280;
  font-size: 26px;
  position: relative;
  transition: all 0.3s ease;
}

.mobile-settings-fab:hover,
.mobile-settings-fab.active {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.06);
}

/* FAB Settings Dropdown/Popup */
.mobile-fab-menu {
  position: absolute;
  bottom: 70px;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom right;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mobile-fab-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.mobile-fab-menu .fab-menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  width: 160px;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  color: #535353;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}

.mobile-fab-menu .fab-menu-btn img {
  width: 20px;
}

@keyframes mobileNavEntrance {
  0% {
    transform: translate(-50%, 100px);
    opacity: 0;
    pointer-events: none;
  }

  100% {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }
}

.mobile-bottom-nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.mobile-bottom-nav ul li {
  flex: 1;
  display: flex;
  justify-content: center;
}

.mobile-bottom-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #858585;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-bottom-nav ul li a i {
  font-size: 22px;
  /* Slightly larger icons to fill void */
  margin-bottom: 0px;
  /* No space needed at bottom */
}

.mobile-bottom-nav ul li a:hover,
.mobile-bottom-nav ul li a.active {
  color: #000000;
  /* Dark black */
  background-color: rgba(0, 0, 0, 0.06);
  /* Soft dark white/grey wrapper */
  transform: scale(1.15);
  /* Pop out effect */
}

/* Dark mode bottom nav logic */
body.dark-mode .mobile-bottom-nav,
body.dark-mode .mobile-settings-fab {
  background-color: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .mobile-bottom-nav ul li a,
body.dark-mode .mobile-settings-fab {
  color: #b6b6b6;
}

body.dark-mode .mobile-bottom-nav ul li a:hover,
body.dark-mode .mobile-bottom-nav ul li a.active,
body.dark-mode .mobile-settings-fab:hover,
body.dark-mode .mobile-settings-fab.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .mobile-fab-menu {
  background: #000000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .mobile-fab-menu .fab-menu-btn {
  background: #363636;
  color: #e5e7eb;
}

.curtain-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* Full viewport height */
  min-height: 600px;
  background-color: #222222;
  /* Matches the dark photo bg */
  color: #ffffff;
  z-index: 1;
  /* Renders under the wrapper */
  font-family: "Inter", "Poppins", sans-serif;
  overflow: hidden;
}

/* Internal Layout details */
.footer-profile-pic {
  width: 45px;
  height: 45px;
  background-color: #000;
  overflow: hidden;
  filter: grayscale(100%) contrast(1.2);
}

.footer-profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-small-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #737373;
  /* Subtle slightly gray lettering */
  text-transform: uppercase;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-list li {
  margin-bottom: 8px;
}

.footer-nav-list li a {
  color: #e5e5e5;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav-list li a:hover {
  color: #ffffff;
}

.footer-big-pic {
  width: 280px;
  /* Matching size ratio to the large image */
  height: 280px;
  background-color: #111;
  overflow: hidden;
  filter: grayscale(100%) contrast(1.2) brightness(0.8);
  display: inline-block;
}

.footer-big-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-back-to-top {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #a3a3a3;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.footer-back-to-top:hover {
  color: #ffffff;
}

.footer-bottom-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 15px;
}

.footer-meta-text {
  font-size: 11px;
  letter-spacing: 1px;
  color: #d4d4d4;
  font-family: monospace;
  /* For digital clock feel */
}

.footer-massive-text {
  font-family: "Poppins", sans-serif;
  font-size: 12vw;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -5px;
  color: #e5e5e5;
  margin: 0;
  padding-top: 20px;
  text-transform: uppercase;
}

@media screen and (min-width: 1400px) {
  .footer-massive-text {
    font-size: 170px;
  }
}

@media screen and (max-width: 768px) {
  .site-veil-wrapper {
    margin-bottom: auto;
    /* Fallback */
  }

  .curtain-footer {
    position: relative;
    /* Disable reveal on mobile for better UX flow */
    height: auto;
    z-index: 10;
  }

  .footer-big-pic {
    width: 200px;
    height: 200px;
  }

  .footer-massive-text {
    font-size: 15vw;
    letter-spacing: -2px;
    padding-bottom: 70px;
    /* Push text upward to escape the bottom nav collision */
  }
}

@media (max-width: 768px) {
  .orbital-container {
    height: 400px;
  }

  .orbital-center {
    width: 90px;
    height: 90px;
  }

  .orbit-node {
    width: 46px;
    height: 46px;
    margin-top: -23px;
    margin-left: -23px;
  }

  .node-icon {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .reveal-text {
    font-size: 1.6rem;
  }
}

.about-section .left-image {
  margin-right: 30px;
}

.about-section h4 {
  font-size: 20px;
  margin-bottom: 25px;
}

.about-section span.author {
  display: flex;
  margin-bottom: 30px;
}

.about-section span.author img {
  margin-right: 15px;
}

.about-section span.author h6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
}

.about-section span.author a {
  color: var(--lightgray);
  font-weight: 700;
  margin-top: 5px;
}

.about-section p {
  margin-bottom: 30px;
}

.about-section span {
  color: var(--light);
  display: inline-block;
  font-size: 15px;
}

.about-section p {
  position: relative;
  z-index: 2;
}

.about-section span.bid {
  line-height: 20px;
  position: relative;
  z-index: 2;
}

@media (max-width: 992px) {
  .about-section .left-image {
    margin-bottom: 30px;
    margin-right: 0px;
  }

  .about-section h4 {
    text-align: left;
    font-size: 24px;
  }

  .about-section .right-content {
    text-align: center;
  }

  .about-section .right-content .main-button {
    text-align: center;
  }

  .about-section span.bid {
    margin-bottom: 15px;
  }

  .about-section span.bid h1 {
    font-size: 40px;
  }
}

/* 
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {}

@media (max-width: 992px) {
  .hero-section .owl-banner {
    margin-top: 80px;
  }
}

@media (max-width: 1200px) {}

/* Filtering Tabs for Skills */
.skills-filter li a.filter-btn {
  background: #fff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.skills-filter li a.filter-btn .badge {
  background: #f3f4f6;
  color: #9ca3af;
  border-radius: 50px;
  font-size: 0.7rem;
  padding: 4px 8px;
  transition: all 0.3s ease;
}

.skills-filter li a.filter-btn:hover {
  background: #f9fafb;
  color: #111827;
  border-color: #d1d5db;
}

.skills-filter li a.filter-btn.active {
  background: #111111 !important;
  color: #fff !important;
  border-color: #111111 !important;
}

.skills-filter li a.filter-btn.active .badge {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* ==========================================================
   ----------------------------------------------------------
         7. ULTIMATE REFACTOR: BRUTALIST OVERRIDES
   ----------------------------------------------------------
   ========================================================== */

/* --- 7.1. Project Card Structural Dark Mode --- */
/* (Memberikan warna abu tua yang elegan agar tombol tidak menyatu dengan background hitam pitch) */
body.dark-mode .project-card {
  background-color: #222222 !important;
}

/* --- 7.2. Project Card Badges & Inner Elements --- */
/* (Menyamakan warna badge tech-stack dengan warna kartu project-card) */
body.dark-mode .project-card .badge.bg-light,
body.dark-mode .project-card .tech-stack .badge,
body.dark-mode .project-card .btn-project {
  background-color: #222222 !important;
  color: #ffffff !important;
  border-color: #333333 !important;
}

body.dark-mode .project-card .btn-project:hover {
  background-color: #333333 !important;
}

/* --- 7.3. Refactored "View Project" Button Classes --- */
/* (Class bersih untuk tombol "View Project" agar HTML tidak kotor dengan inline CSS style) */
.btn-project {
  font-weight: 600;
  text-align: left;
  position: relative;
  transition: all 0.3s ease;
}

.btn-project i {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* --- 7.4. JS GSAP Scroll Scrub Animation (About Section) --- */
/* Mode Terang (Default) */
.reveal-text .word {
  color: #e2e8f0 !important;
}

.reveal-text .word.highlighted {
  color: #000000 !important;
}

/* Mode Gelap (Pure White High Contrast) */
body.dark-mode .reveal-text .word {
  color: #333333 !important;
}

body.dark-mode .reveal-text .word.highlighted {
  color: #ffffff !important;
}

/* --- 7.5. View All Projects Button (Index) --- */
body.dark-mode .projects-section .btn-outline-dark {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.dark-mode .projects-section .btn-outline-dark:hover {
  background-color: #222222 !important;
  color: #ffffff !important;
}

/* --- 7.6. About Page Lanyard UI --- */
body.dark-mode .lanyard-head-anchor {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

body.dark-mode .lanyard-hole-bg {
  background-color: #ffffff !important;
}

body.dark-mode .about-id-badge {
  background-color: #ffffff !important;
}

body.dark-mode .header-area.header-sticky .main-nav .nav li a:hover {
  color: #000000 !important;
}

/* --- 7.7. About Page Quick Stats Buttons --- */
body.dark-mode .dedicated-about-section .bg-light {
  background-color: #111111 !important;
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.05) !important;
  border: 1px solid #333333;
}

body.dark-mode .dedicated-about-section .bg-light .fw-bold {
  color: #ffffff !important;
}

body.dark-mode .dedicated-about-section .btn-dark {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

body.dark-mode .dedicated-about-section .btn-dark:hover {
  background-color: transparent !important;
  color: #ffffff !important;
}

body.dark-mode .dedicated-about-section .btn-outline-dark {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.dark-mode .dedicated-about-section .btn-outline-dark:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* --- 7.8. Stats Section Dark Mode --- */
body.dark-mode .stats-section .card {
  background-color: #111111 !important;
  border-color: #333333 !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .stats-section .card .border-bottom,
body.dark-mode .stats-section .card .border-end {
  border-color: #333333 !important;
}

body.dark-mode .stats-section .card .fw-bold {
  color: #ffffff !important;
}

body.dark-mode .stats-section .card .text-muted {
  color: #a3a3a3 !important;
}

body.dark-mode .stats-section .card .progress {
  background-color: #333333 !important;
}

body.dark-mode .stats-section .card .progress-bar {
  background-color: #ffffff !important;
}

body.dark-mode .stats-section .card img[alt="GitHub Contributions"] {
  filter: grayscale(100%) invert(1) !important;
  mix-blend-mode: screen !important;
  opacity: 1 !important;
}

/* --- 7.9. Projects Section Dark Mode --- */
body.dark-mode .projects-section {
  background-color: #000000 !important;
}

body.dark-mode .projects-section .card {
  background-color: #111111 !important;
  border: 1px solid #333333 !important;
}

body.dark-mode .projects-section .card h5 {
  color: #ffffff !important;
}

body.dark-mode .projects-section .card p.text-muted,
body.dark-mode .projects-section .filter-item .text-muted,
body.dark-mode .projects-section h1+p.text-muted {
  color: #a3a3a3 !important;
}

body.dark-mode .projects-section .card .position-relative {
  background: #222222 !important;
}

body.dark-mode .projects-section .card .badge[style*="rgba(255,255,255"] {
  background: rgba(17, 17, 17, 0.9) !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

body.dark-mode .projects-section .card .badge.bg-light.text-dark {
  background-color: #1a1a1a !important;
  color: #e5e5e5 !important;
  border-color: #333333 !important;
}

body.dark-mode .projects-section .card-footer .btn-outline-dark,
body.dark-mode .projects-section .btn-outline-dark {
  color: #ffffff !important;
  border-color: #333333 !important;
}

body.dark-mode .projects-section .card-footer .btn-outline-dark:hover,
body.dark-mode .projects-section .btn-outline-dark:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.dark-mode .projects-section .filter-item .badge,
body.dark-mode .projects-section .sidebar .badge.bg-light.text-dark,
body.dark-mode .projects-section .sidebar .badge.border.border-secondary {
  background-color: #1a1a1a !important;
  color: #e5e5e5 !important;
  border-color: #333333 !important;
}

body.dark-mode .projects-section .filter-item.active {
  background-color: #1a1a1a !important;
}

body.dark-mode .projects-section .sidebar .badge.bg-dark {
  background-color: #a3a3a3 !important;
  color: #111111 !important;
}

body.dark-mode .projects-section input[type="text"],
body.dark-mode .projects-section select.form-select {
  background-color: #111111 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

body.dark-mode .projects-section input[type="text"]::placeholder {
  color: #a3a3a3 !important;
}

body.dark-mode .projects-section .fw-bold {
  color: #ffffff !important;
}

/* H1 Header Fix for Projects Page Light Mode */
.projects-section h1 {
  color: #111111 !important;
}

body.dark-mode .projects-section h1 {
  color: #ffffff !important;
}

/* View Toggler Dark Mode Fix */
body.dark-mode .projects-section #viewToggler {
  background-color: #111111 !important;
}

body.dark-mode .projects-section #viewToggler .btn-light {
  background-color: transparent !important;
  color: #a3a3a3 !important;
  border-color: transparent !important;
}

body.dark-mode .projects-section #viewToggler .btn-dark {
  background-color: #333333 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* --- 7.10. Project Details Section Dark Mode --- */
body.dark-mode .project-detail-section [style*="background: #f9fafb"],
body.dark-mode .project-detail-section [style*="background:#f9fafb"] {
  background-color: #111111 !important;
  border-color: #333333 !important;
}

body.dark-mode .project-detail-section .rounded-4.p-4,
body.dark-mode .project-detail-section .bg-white,
body.dark-mode .project-detail-section .bg-light,
body.dark-mode .project-detail-section .gallery-thumb {
  background-color: #111111 !important;
  border-color: #333333 !important;
}

body.dark-mode .project-detail-section .border-top {
  border-color: #333333 !important;
}

body.dark-mode .project-detail-section .rounded-4 h5,
body.dark-mode .project-detail-section .rounded-4 h6 {
  color: #ffffff !important;
}

body.dark-mode .project-detail-section .btn-light {
  background-color: #1a1a1a !important;
  color: #e5e5e5 !important;
  border-color: #333333 !important;
}

body.dark-mode .project-detail-section .btn-light:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}

body.dark-mode .project-detail-section .rounded-4[style*="border: 1px solid"] {
  border-color: #333333 !important;
}

body.dark-mode .project-detail-section .badge.bg-white,
body.dark-mode .project-detail-section .badge.bg-light {
  background-color: #1a1a1a !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

body.dark-mode .project-detail-section .badge.text-dark {
  color: #e5e5e5 !important;
}

/* Previous / Next pagination cards if any */
body.dark-mode .project-detail-section a[style*="background: #f9fafb"] {
  background-color: #111111 !important;
  border-color: #333333 !important;
}

body.dark-mode .project-detail-section a[style*="background: #f9fafb"] span {
  color: #a3a3a3 !important;
}

body.dark-mode .project-detail-section a[style*="background: #f9fafb"] h6 {
  color: #ffffff !important;
}

/* Prev / Next Navigation Better Dark Mode Selector */
body.dark-mode .project-detail-section .d-flex.justify-content-between.align-items-center.mt-4.gap-3 a {
  background-color: #111111 !important;
  border-color: #333333 !important;
}

body.dark-mode .project-detail-section .d-flex.justify-content-between.align-items-center.mt-4.gap-3 a span.text-muted {
  color: #a3a3a3 !important;
}

body.dark-mode .project-detail-section .d-flex.justify-content-between.align-items-center.mt-4.gap-3 a span.fw-bold {
  color: #ffffff !important;
}

body.dark-mode .project-detail-section hr {
  border-color: #333333 !important;
}

/* Project Details Page Light Mode Fixes */
.project-detail-section .badge.border {
  color: #111111 !important;
  border-color: #dee2e6 !important;
}

.project-detail-section .d-flex.justify-content-between.align-items-center.mt-4.gap-3 a span.fw-bold {
  color: #111111 !important;
}

/* Ensure these remain pristine in dark mode */
body.dark-mode .project-detail-section .badge.border {
  color: #ffffff !important;
  border-color: #333333 !important;
}

body.dark-mode .project-detail-section .d-flex.justify-content-between.align-items-center.mt-4.gap-3 a span.fw-bold {
  color: #ffffff !important;
}

/* Fix Light Mode Project Details Prev/Next Navigation Border */
.project-detail-section .d-flex.justify-content-between.align-items-center.mt-4.gap-3 a {
  border-color: #dee2e6 !important;
}

/* --- 7.11. Certifications Section Dark Mode --- */
body.dark-mode #certifications .cert-img-wrapper,
body.dark-mode #certifications [style*="background:#f9fafb"],
body.dark-mode #certifications [style*="background: #f9fafb"] {
  background-color: #111111 !important;
  border-color: #333333 !important;
}

body.dark-mode #certifications .btn-light.filter-btn {
  background-color: #1a1a1a !important;
  color: #a3a3a3 !important;
  border-color: #333333 !important;
}

body.dark-mode #certifications .btn-light.filter-btn:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}

body.dark-mode #certifications .btn-light.filter-btn.active {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
}

/* Fix faded Certification header span in dark mode */
body.dark-mode #certifications h1 span {
  color: #ffffff !important;
}

/* Certification Page Light Mode Fixes */
#certifications .card h5 {
  color: #111111 !important;
}

#certifications button:not(.filter-btn) {
  color: #111111 !important;
}

/* Re-apply pure white in dark mode just to be safe */
body.dark-mode #certifications .card h5 {
  color: #ffffff !important;
}

body.dark-mode #certifications button:not(.filter-btn) {
  color: #ffffff !important;
}

/* Exact Override for Certification Filter Buttons (Both Modes) */
#certifications .cert-filter-btn {
  background-color: transparent !important;
  color: #6b7280 !important;
  border-color: #d1d5db !important;
}

#certifications .cert-filter-btn.active {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

body.dark-mode #certifications .cert-filter-btn {
  background-color: #1a1a1a !important;
  color: #a3a3a3 !important;
  border-color: #333333 !important;
}

body.dark-mode #certifications .cert-filter-btn.active {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
}

/* Fix "Muat Lebih Banyak" Button Inline JS Override in Dark Mode */
body.dark-mode #certifications button:not(.cert-filter-btn) {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-color: #333333 !important;
}

body.dark-mode #certifications button:not(.cert-filter-btn):hover {
  background-color: #333333 !important;
}

/* --- 7.12. Contact Page Dark Mode Overrides --- */

/* Solid Input fields */
body.dark-mode .solid-input {
  background-color: #111111 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

body.dark-mode .solid-input:focus {
  background-color: #1a1a1a !important;
  border-color: #555555 !important;
  color: #ffffff !important;
}

/* Contact Cards (Email, WA, Lokasi) */
body.dark-mode .layout-card-bg {
  background-color: #111111 !important;
  border-color: #333333 !important;
}

body.dark-mode .layout-card-bg p.layout-title {
  color: #ffffff !important;
}

/* Ensure the icon box in contact cards overrides the #0a1128 background */
body.dark-mode .layout-card-bg div[style*="background: #0a1128"] {
  background-color: #1a1a1a !important;
}

/* Stat Icon Boxes (50+ Projects) */
body.dark-mode .lower-contact-section .bg-white.text-dark {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-color: #333333 !important;
  border: 1px solid #333333;
}

body.dark-mode .lower-contact-section .bg-white.text-dark i {
  color: #ffffff !important;
}

/* Stat text */
body.dark-mode .lower-contact-section .layout-heading {
  color: #ffffff !important;
}

body.dark-mode .lower-contact-section .layout-desc {
  color: #a3a3a3 !important;
}

/* Guestbook Section Fixes */
body.dark-mode .guestbook-section .card {
  background-color: #111111 !important;
  border: 1px solid #333333 !important;
}

body.dark-mode .guestbook-section .card p {
  color: #a3a3a3 !important;
}

body.dark-mode .guestbook-section .card h6 {
  color: #ffffff !important;
}

body.dark-mode .guestbook-section .btn-outline-dark {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.dark-mode .guestbook-section .btn-outline-dark:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Fix "Hire Me Now" Cards in Lower Contact Section */
body.dark-mode .lower-contact-section .border-secondary {
  border-color: #333333 !important;
}

body.dark-mode .lower-contact-section .btn-outline-dark {
  color: #ffffff !important;
  border-color: #a3a3a3 !important;
}

body.dark-mode .lower-contact-section .btn-outline-dark:hover {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* Ensure brutalist buttons are fully brutalist in dark mode and legible */
body.dark-mode .button-brutalist {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
}

body.dark-mode .button-brutalist i {
  color: #111111 !important;
}

/* Ensure Stats Pill Row Icons are visible in Dark Mode */
body.dark-mode .icon-sq {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #333333 !important;
}

body.dark-mode .icon-sq i {
  color: #ffffff !important;
}

/* --- 7.13. Contact Page Testimonial Modal Dark Mode --- */
body.dark-mode #testimonialModal .modal-content {
  background-color: #111111 !important;
  border: 1px solid #333333 !important;
}

body.dark-mode #testimonialModal h5#modalName {
  color: #ffffff !important;
}

body.dark-mode #testimonialModal p#modalText {
  color: #a3a3a3 !important;
}

body.dark-mode #testimonialModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- 7.15. Project Card Category Badges --- */
.badge-category {
  bottom: 15px; 
  left: 15px; 
  font-size: 0.7rem; 
  border: 1px solid rgba(0, 0, 0, 0.1); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: #111111 !important;
}

body.dark-mode .badge-category {
  background: #1f2937;
  color: #f9fafb !important;
  border-color: rgba(255, 255, 255, 0.1);
}


/* Certification Page CSS */

/* Cert Filter Pills */
.cert-filter-btn {
    border: 1px solid;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 6px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.cert-filter-btn:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.cert-filter-btn.active {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    font-weight: 600;
}

/* Rounded cert cards */
#certContainer .card {
    border-radius: 12px !important;
    overflow: hidden;
}

/* Rounded image preview inside card */
#certContainer .position-relative[style*="aspect-ratio"] {
    border-radius: 8px !important;
    overflow: hidden;
}

/* Slightly rounded verify button */
#certContainer .btn.btn-dark {
    border-radius: 8px !important;
}

/* Card hide/show animation */
#certContainer .col.cert-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#certContainer .col.cert-item.cert-hidden {
    display: none;
}


            body.lb-open #certLightbox {
                opacity: 1 !important;
                visibility: visible !important;
            }

            /* Hide mobile bottom nav & settings FAB while lightbox is open */
            body.lb-open .mobile-nav-wrapper {
                display: none !important;
            }
        

/* =======================================================
   Project Detail Specific Styles
   ======================================================= */
#galleryLightbox.open {
  display: flex !important;
}

.gallery-strip-no-scrollbar::-webkit-scrollbar {
  height: 4px;
}

.gallery-strip-no-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.gallery-strip-no-scrollbar::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 4px;
}

#lbFilmstrip img {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.4;
  border: 2px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

#lbFilmstrip img.lb-active {
  opacity: 1;
  border-color: #fff;
}

/* Light Mode Headers Override */
@media (prefers-color-scheme: light) {
  body:not(.dark-mode) h2,
  body:not(.dark-mode) h3,
  body:not(.dark-mode) h6 {
    color: #111827 !important;
  }
}