.elementor-30758 .elementor-element.elementor-element-4620d06{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-36f4725 *//* =======================================================
   PouyaWeb DevLab – Mega Menu (Best UI in Europe Edition)
   Hybrid: Minimal + Glass + Soft Neon + Pro Hover
   ======================================================= */

/* === MAIN CONTAINER === */
.pw-mega-devlab {
  width: 660px;
  padding: 34px 40px;
  border-radius: 26px;

  /* Glass base */
  background: rgba(18, 22, 35, 0.78);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);

  border: 1px solid rgba(120, 128, 255, 0.35);
  box-shadow: 0 30px 60px rgba(0,0,0,0.45); /* softer, no black block */

  position: relative;
  overflow: hidden;
  animation: pwFadeInDev 0.45s ease;
}

/* === FABRIC + SOFT BACKGROUND TEXTURE === */
.pw-mega-devlab::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    /* wave/fabric style */
    radial-gradient(circle at 0% 0%, rgba(119,127,255,0.20), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(72,82,190,0.18), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
  opacity: 0.45;
  filter: blur(32px);
  pointer-events: none;
}

/* === NEON EDGE RING (very subtle) === */
.pw-mega-devlab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(130deg,
    rgba(119,127,255,0.65),
    rgba(119,127,255,0.0),
    rgba(119,127,255,0.45));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.55;
  animation: pwNeonEdge 9s linear infinite;
  pointer-events: none;
}

/* === GRID LAYOUT === */
.pw-devlab-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* === PER-COLUMN AMBIENT LIGHT (very soft) === */
.pw-devlab-col {
  position: relative;
  animation: pwColumnRise 0.45s ease forwards;
  opacity: 0; /* animated in */
}

.pw-devlab-col::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle,
    rgba(119,127,255,0.16),
    transparent 60%);
  opacity: 0.25;
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}

/* different delay for parallax feel */
.pw-devlab-col:nth-child(1) { animation-delay: 0.05s; }
.pw-devlab-col:nth-child(2) { animation-delay: 0.12s; }
.pw-devlab-col:nth-child(3) { animation-delay: 0.18s; }

/* === COLUMN TITLES === */
.pw-devlab-col h4 {
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #c8d0ff;
  position: relative;
  padding-bottom: 4px;
}

/* Underline (static base) */
.pw-devlab-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 38px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #777FFF, rgba(119,127,255,0));
  opacity: 0.85;
}

/* === LINKS / ITEMS === */
.pw-devlab-col a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 7px 0;
  padding-right: 6px;

  font-size: 14px;
  color: #dfe4ff;
  text-decoration: none;

  border-radius: 9px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Minimal icon style */
.pw-devlab-col a span {
  font-size: 16px;
  color: #8ea4ff;
  transition: transform 0.25s ease, color 0.25s ease, filter 0.25s ease;
}

/* Divider between links (super soft) */
.pw-devlab-col a + a {
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.03);
  padding-top: 9px;
}

/* === HOVER EFFECTS (no ugly horizontal jump) === */
.pw-devlab-col a:hover {
  background: rgba(119,127,255,0.10);     /* soft tint */
  color: #ffffff;
  transform: translateY(-1px);            /* tiny lift, no slide */
}

/* Icon hover (magnetic-like, but CSS only) */
.pw-devlab-col a:hover span {
  transform: scale(1.12);
  color: #c5ccff;
  filter: drop-shadow(0 0 8px rgba(119,127,255,0.7));
}

/* Underline glow animation under each item */
.pw-devlab-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 0%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #777FFF, #b1b8ff);
  opacity: 0;
  transition: width 0.35s ease, opacity 0.35s ease;
}

.pw-devlab-col a:hover::after {
  width: 100%;
  opacity: 0.9;
}

/* ====== KEYFRAMES ====== */

/* container fade */
@keyframes pwFadeInDev {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* subtle animated border glow */
@keyframes pwNeonEdge {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

/* column parallax rise */
@keyframes pwColumnRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ----------------------------------------------
   Hover Style #2B – Underline Wave Animation
   ---------------------------------------------- */

.pw-devlab-col a {
  position: relative;
  overflow: hidden;
}

.pw-devlab-col a:hover {
  background: transparent !important;
  color: #ffffff;
}

/* underline base */
.pw-devlab-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg,#777FFF,#B9C0FF);
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity .25s ease;
}

/* animated wave */
.pw-devlab-col a:hover::after {
  opacity: 1;
  animation: pwLineWave .45s ease forwards;
}

@keyframes pwLineWave {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { transform: translateX(5%); opacity: .8; }
  100% { transform: translateX(0); opacity: 1; }
}
/* Remove the old menu icon ONLY for Border Radius */
a[href*="border-radius"]::before {
    display: none !important;
}/* End custom CSS */