@media (min-width:769px){
/* ===== NAVBAR ===== */

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}

.menu{
  display:flex;
  align-items:center;
  gap:28px;
}

/* ===== MENU BUTTON ===== */

.drop-btn{
  background:none;
  border:none;
  font-weight:600;
  font-size:15px;
  color:#333;
  cursor:pointer;
  position:relative;
  padding:10px 4px;
  transition:0.25s;
}

.drop-btn:hover{
  color:#d90429;
}

/* underline hover */
.drop-btn::after{
  content:"";
  width:8px;
  height:8px;
  margin-left:6px;
  display:inline-block;
  border-right:2px solid #666;
  border-bottom:2px solid #666;
  transform:rotate(45deg);
  transition:0.25s;
  position:relative;
  top:-2px;
}

.dropdown:hover .drop-btn::after{
  transform:rotate(-135deg);
}

.dropdown:hover .drop-btn{
  color:#d90429;
}

.dropdown:hover .drop-btn::after{
  border-color:#d90429;
}

/* ===== DROPDOWN ===== */

.dropdown{
  position:relative;
}

.dropdown-content{
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  width:420px;
  border-radius:12px;
  padding:20px;
  box-shadow:0 15px 45px rgba(0,0,0,0.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:0.25s;
  z-index:999;
}

.dropdown:hover .dropdown-content{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}


.menu .dropdown:nth-last-child(-n+3) .dropdown-content{
  left:auto;
  right:0;
}
/* ===== MEGA GRID ===== */

.mega-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* ===== ITEM ===== */

.mega-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border-radius:10px;
  text-decoration:none;
  transition:0.25s;
}

.mega-item:hover{
  background:#f6f7fb;
  transform:translateY(-2px);
}

/* ===== ICON ===== */

.icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1f3f7;
  border-radius:10px;
}

.icon img{
  width:22px;
}

/* ===== TEXT ===== */

.text .title{
  font-size:14px;
  font-weight:600;
  color:#222;
}

.text .desc{
  font-size:12px;
  color:#777;
  margin-top:2px;
}

/* ===== BADGE ===== */

.badge-top{
  font-size:10px;
  padding:3px 6px;
  border-radius:6px;
  margin-left:6px;
  font-weight:600;
}

.badge-discount{
  background:#ffe6ea;
  color:#d90429;
}

.badge-ddos{
  background:#e6f3ff;
  color:#0066cc;
}

/* ===== ACTION BUTTONS ===== */

.actions{
  display:flex;
  gap:10px;
  margin-left:10px;
}

.btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
}