/* ── Scrollbar & Layout Fixes ───────────────────────────── */
html {
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #FF6B1E #111;
}
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: #111; }
html::-webkit-scrollbar-thumb { background: #FF6B1E; border-radius: 3px; }

body {
  overflow-x: hidden;
}

/* Prevent double scrollbar from GSAP smooth scroll */
#smooth-wrapper {
  overflow: hidden !important;
}
/* =============================================
   Social On Table – Mega Menu CSS
   ============================================= */

/* Hide old default dropdown for the mega parent */
.sot-mega-parent > ul { display: none !important; }

/* Trigger container — must be relative so the panel anchors to THIS item */
.sot-mega-parent {
  position: static !important;
}

/* Anchor point for the panel: the full header row, NOT the individual
   "Services" link. Anchoring to the link caused the panel to be centered
   on wherever that link happened to sit, which pushed it off the right
   edge of the screen on real layouts. Anchoring to the header row keeps
   it safely within the page at all times. */
.header-lower {
  position: relative;
}

/* The mega panel — anchored to the header row, centered within it */
.sot-mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  margin: 0 auto;
  background: #0e0e0e;
  border-top: 2px solid #FF6B1E;
  box-shadow: 0 25px 55px rgba(0,0,0,0.55);
  z-index: 999;
  padding: 0;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

/* Small caret pointing up to the trigger link */
.sot-mega-menu:before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #0e0e0e;
  border-left: 2px solid #FF6B1E;
  border-top: 2px solid #FF6B1E;
  border-radius: 3px 0 0 0;
}

/* Show on hover */
.sot-mega-parent:hover .sot-mega-menu,
.sot-mega-menu:hover {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Inner layout */
.sot-mega-inner {
  display: flex;
  gap: 0;
  padding: 32px 40px 36px;
  margin: 0 auto;
}

/* Each column */
.sot-mega-col {
  flex: 1;
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.sot-mega-col:first-child { padding-left: 0; }
.sot-mega-col:last-child  { padding-right: 0; border-right: none; }

/* Column heading */
.sot-mega-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #FF6B1E;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,107,30,0.25);
}

.sot-mega-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255,107,30,0.12);
  border-radius: 8px;
  color: #FF6B1E;
  flex-shrink: 0;
}

/* Links list */
.sot-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sot-mega-list li {
  border-bottom: none !important;
  width: 100%;
}

.sot-mega-list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 500;
  color: #ccc !important;
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
  margin: 0 !important;
  line-height: 1.5 !important;
  border: none !important;
  background: none !important;
  white-space: nowrap;
}

.sot-mega-list li a i {
  color: #FF6B1E;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.sot-mega-list li a:hover {
  color: #FF6B1E !important;
  gap: 10px;
}

.sot-mega-list li a:hover i {
  opacity: 1;
}

/* Hide mega menu on mobile (below 992px) */
@media (max-width: 991px) {
  .sot-mega-menu { display: none !important; }
}

/* ── Logo Styles ─────────────────────────────────────────── */
.main-header .logo img,
.sticky-header .logo img,
.mobile-menu .nav-logo img {
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  transition: opacity 0.2s ease;
}
.sticky-header .logo img {
  height: 42px;
}
.mobile-menu .nav-logo img {
  height: 40px;
}
.main-header .logo img:hover,
.sticky-header .logo img:hover {
  opacity: 0.85;
}
/* Footer logo */
.footer-logo img {
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 8px;
}