/* ========== SIDITECH CUSTOM v1.0 (2025-08-12) ========== */
/* Header palette flip (top links + dropdown inherit vars) */
#header{
  --nav-fg:#f3f0f0;
  --dropdown-bg:rgba(238, 231, 231, 0.14);
  --dropdown-hover:rgba(222, 210, 210, 0.765);
  background:transparent;
  transition:background-color 2s, box-shadow .2s;
}
#header.header--light{
  --nav-fg:#edeef3;
  --dropdown-bg:rgba(46, 44, 44, 0.98);
  --dropdown-hover:rgba(0,0,0,.06);
  background:#282626;
  box-shadow:0 1px 0 rgba(81, 79, 79, 0.06);
}

/* Top menu typography (uppercase, lighter, 15px) */
#header .navbar > ul > li > a,
#header .navbar > ul > li > a span{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size: inherit; font-weight:400; text-transform:uppercase; letter-spacing:.06em;
  color:var(--nav-fg) !important;
}

/* Dropdown tidy + palette */
#header li.dropdown{ position:relative; }
#header .dropdown > ul{
  position:absolute; left:0; top:calc(100% - 1px); display:block;
  margin:0; padding:2px; min-width:180px;
  background:var(--dropdown-bg) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  z-index:99; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
#header li.dropdown:hover > ul,
#header li.dropdown.open > ul{ opacity:1; visibility:visible; transform:translateY(0); }

#header .dropdown > ul a:hover{ background:var(--dropdown-hover) !important; color:var(--nav-fg) !important; border-radius:6px; }




/* Remove dropdown side arrows */
#header .dropdown > a .dropdown-indicator,
#header .dropdown > a i.bi-chevron-down {
  display: none !important;
}


#navbar .dropdown {
    padding-bottom: 15px; /* keeps hover alive in the gap */
}

/* Dropdown text color */
#navbar .dropdown ul li a {
    color: #fff; /* white text */
}

/* Hover background + hover text */
#navbar .dropdown ul li:hover > a {
    background-color: rgba(255, 255, 255, 0.15); /* light transparent hover */
    color: #00c3ff; /* highlight color */
}

html {
  scroll-behavior: smooth;
}



/* keep text left-aligned */
#header .navbar > ul > li:nth-child(1).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(1).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul a:hover .desc {
  text-align: left !important;
}




/* Text block hugs icon; consistent headings & copy */
#header .navbar > ul > li:nth-child(1).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
#header .navbar > ul > li:nth-child(1).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul {
  margin: 2px 0 2px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
#header .navbar > ul > li:nth-child(1).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul {
  line-height: 1.2 !important;
  white-space: normal !important;  /* allow multi-line */
}



/* Bold only the card titles; everything else normal */
#header .navbar > ul > li:nth-child(1).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul {
  font-weight: 400 !important;         /* reset default bold from theme */
}

#header .navbar > ul > li:nth-child(1).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul {
  font-weight: 700 !important;         /* keep headers bold */
}

#header .navbar > ul > li:nth-child(1).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul {
  font-weight: 400 !important;         /* ensure body text stays regular */
}




/* Hover: make card text blue so it stays readable on white highlight */
:root { --v6-link-blue: #0d6efd; } /* tweak if you want a different blue */

#header .navbar > ul > li:nth-child(1).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(1).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul a:hover .desc,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul a:hover .title,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul a:hover .desc {
  color: var(--v6-link-blue) !important;
}

/* if any plain text (not wrapped in .title/.desc) exists inside the link */
#header .navbar > ul > li:nth-child(1).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul {
  color: var(--v6-link-blue) !important;
}


/* SERVICES: 4 equal columns, wraps cleanly when you add a card */
#header .navbar > ul > li:nth-child(1).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(2).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(3).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(4).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(5).dropdown.mega > ul,
#header .navbar > ul > li:nth-child(6).dropdown.mega > ul {
  display: grid !important;
  grid-auto-flow: row !important;                          /* fill left→right, then wrap */
  grid-template-columns: repeat(4, minmax(260px, 1fr)) !important; /* 4 equal columns */
  grid-template-rows: none !important;                     /* let rows auto-size */
  gap: 12px !important;
  align-items: stretch !important;                         /* equal card heights per row */
}


#header .navbar > ul > li:nth-child(3).dropdown.mega > ul a .icon{
  flex: 0 0 36px !important; width:36px !important; height:36px !important;
  display:grid !important; place-items:center !important; margin:0 !important;
}


#header .navbar > ul > li:nth-child(3).dropdown.mega > ul a .txt{
  flex: 1 1 auto !important; min-width:0 !important; margin:0 !important; text-align:left !important;
}

/* === ABOUT  (single column, centered, no right-drift) === */
/* Targets ABOUT by its position: the 2nd <li> in the navbar */
#header .navbar > ul > li:nth-child(2).dropdown.mega { 
  position: static !important; 
}


/* === ABOUT — SERVICES (single column, centered, no right-drift) === */
/* Targets ABOUT by its position: the 2nd <li> in the navbar */
#header .navbar > ul > li:nth-child(3).dropdown.mega { 
  position: static !important; 
}

/* === ABOUT — PROJECTS (single column, centered, no right-drift) === */
/* Targets ABOUT by its position: the 2nd <li> in the navbar */
#header .navbar > ul > li:nth-child(5).dropdown.mega { 
  position: static !important; 
}

/* === ABOUT — INDUSTRY (single column, centered, no right-drift) === */
/* Targets ABOUT by its position: the 2nd <li> in the navbar */
#header .navbar > ul > li:nth-child(4).dropdown.mega { 
  position: static !important; 
}





/* Card fills its grid cell (ABOUT only) */
#header .navbar > ul > li.dropdown.mega.about-menu > ul[data-v6="panel"] a.v6-item{
  height:100%;
  display:flex;              /* keep your existing look */
  flex-direction:row;
  gap:10px;
}

/* Text column stacks title + desc and stretches desc to fill */
#header .navbar > ul > li.dropdown.mega.about-menu > ul[data-v6="panel"] .txt{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* Title stays compact (no weird wrapping growth) */
#header .navbar > ul > li.dropdown.mega.about-menu > ul[data-v6="panel"] .title{
  flex:0 0 auto;
  line-height:1.2;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap; /* 1 line title for consistent height */
}

/* Description takes the remaining height, clamped to 4 lines */
#header .navbar > ul > li.dropdown.mega.about-menu > ul[data-v6="panel"] .desc{
  flex:1 1 auto;
  margin-top:4px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:11; /* adjust if you want taller/shorter cards */
  overflow:hidden;
}


/* Fallback when -webkit-line-clamp isn't supported */
@supports not (-webkit-line-clamp:1){
  #header .navbar > ul > li.dropdown.mega.about-menu > ul[data-v6="panel"] .desc{
    max-height: calc(1.35em * 11);
    overflow:hidden;
  }
}


/* Mobile: let desc show a bit more text (ABOUT only) */
@media (max-width: 991.98px){
  #header .navbar > ul > li.dropdown.mega.about-menu > ul[data-v6="panel"] .desc{
    -webkit-line-clamp:6;
  }
  @supports not (-webkit-line-clamp:1){
    #header .navbar > ul > li.dropdown.mega.about-menu > ul[data-v6="panel"] .desc{
      max-height: calc(1.35em * 6);
    }
  }
}

#header .navbar > ul > li > a{
  border-radius:10px;
  padding:8px 12px;
  transition:background-color .18s, outline-color .18s, color .18s;
}

/* Open dropdown = keep highlight while menu is open */
#header .navbar > ul > li.show > a{
  background:var(--link-active-bg);
  outline:1px solid var(--link-active-outline);
}

/* Clicked/active state */
#header .navbar > ul > li > a.active{
  background:var(--link-active-bg);
  outline:1px solid var(--link-active-outline);
}

/* Keyboard focus ring for accessibility */
#header .navbar > ul > li > a:focus-visible{
  outline:2px solid var(--link-active-outline);
  outline-offset:2px;
}

html { scroll-behavior: smooth; }
#services { scroll-margin-top: 96px; }     /* adjust to your header height */
@media (max-width: 991.98px){
  #services { scroll-margin-top: 120px; }
}

/* === NAV TYPOGRAPHY: single source of truth === */
:root{
  /* Header menu base size (top-level + dropdown inherit this) */
  --nav-link-size: 18px; /* change once to resize everything */
}

/* Set the base size on the navbar container */
#header .navbar{
  font-size: 1rem;
}

/* Force all links (including dropdown items) to inherit that size.
   This overrides styles.css where .navbar a = 12px/15px */
#header .navbar a,
#header .navbar a:focus{
  font-size: inherit !important;
  line-height: 1.25;
}

/* OPTIONAL: Card titles inside mega dropdowns = 25px */
:root{
  --dd-title-size: 14px;
}

/* Your mega panels use #header .dropdown > ul … (not .dropdown-menu) */
#header .dropdown > ul a .title{
  font-size: var(--dd-title-size) !important;
  line-height: 1.2;
  font-weight: 600;
}

/* Keep body/description text near the base size (inherits 18px by default) */
#header .dropdown > ul a .desc{
  font-size: .95em;
  opacity: .9;
}

/* Make all dropdown content inherit the navbar base size (not the theme’s 12px) */
#header .dropdown > ul a .txt,
#header .dropdown > ul a .desc,
#header .dropdown > ul a p,
#header .dropdown > ul a span:not(.icon) {
  font-size: inherit !important;
}

/* Kill “small” downsizing inside mega panels */
#header .dropdown > ul small,
#header .dropdown > ul .small,
#header .dropdown > ul .fs-6,
#header .dropdown > ul .fs-7 {
  font-size: inherit !important;
}





#header .navbar {
  flex: 1;
  display: flex;
  justify-content: center;
}
#header .navbar > ul {
  display: flex;
  gap: 24px; /* spacing between menu items */
}

/* ——— Top menu: tighten item spacing ——— */
#header .navbar > ul { 
  gap: 4px !important;            /* was larger; try 8–12px to taste */
}

#header .navbar > ul > li { 
  margin: 0 !important;            /* kill any leftover margins */
}

#header .navbar > ul > li > a {
  padding: .35rem .6rem !important; /* shrink horizontal padding */
  line-height: 1.2;                 
  font-size: 0.95rem;               /* optional: nudge smaller */
}

#header .navbar > ul > li > a .dropdown-indicator{
  margin-left: .35rem;              /* keep chevron tight to label */
}

#header .navbar > ul > li.dropdown.mega > ul[data-v6="panel"]{
  grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;  /* was 240px */
  gap: 10px !important;   /* tighten gaps between cards */
}

/* --- Mega menu tighter card sizing --- */
#header .navbar > ul > li.dropdown.mega > ul[data-v6="panel"]{
  max-width: 900px !important;   /* was 1100px – adjust smaller until it feels right */
  grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
  gap: 50px !important;
}





/* === CENTROX-style dropdowns === */

/* Panel itself: slim dark background */
#header .navbar > ul > li.dropdown.mega > ul[data-v6="panel"] {
  background: #1111119d !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  gap: 16px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* 2 cols */
  max-width: 700px !important;
  width: min(700px, calc(100vw - 48px)) !important;
}

/* Items: remove card background, just text + icon */
#header .navbar > ul > li.dropdown.mega > ul[data-v6="panel"] a.v6-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 8px 4px !important;
  background: none !important;
  border: none !important;
  color: #eaeaea !important;
  text-decoration: none !important;
}



/* Title bold */
#header .navbar > ul > li.dropdown.mega > ul[data-v6="panel"] .title {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #fff !important;
  margin-bottom: 2px !important;
}

/* Description lighter */
#header .navbar > ul > li.dropdown.mega > ul[data-v6="panel"] .desc {
  font-size: 13px !important;
  color: #646161 !important;
  line-height: 1.4 !important;
}

/* Hover: blue text */
#header .navbar > ul > li.dropdown.mega > ul[data-v6="panel"] a.v6-item:hover .title {
  color: #0d6efd !important;
}