/* Parent */
.sp-megamenu-parent > li.sp-has-child{
    position: relative;
}

/* Dropdown */
.sp-dropdown{
    min-width:220px !important;
    width:auto !important;

    padding:10px 0 !important;

    border:none !important;
    border-radius:0 0 12px 12px;

    background:#fff;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    overflow:hidden;

    margin-top:10px;

    animation:fadeDown .25s ease;
}

/* Remove default padding */
.sp-dropdown-inner{
    padding:0 !important;
}

/* List */
.sp-dropdown-items{
    margin:0;
    padding:0;
    list-style:none;
}

/* Items */
.sp-dropdown-items > li{
    margin:0;
}

/* Links */
.sp-dropdown-items > li > a{
    display:block;

    padding:14px 24px !important;

    color:#555 !important;

    font-size:16px;

    text-decoration:none;

    transition:.25s;
}

/* Hover */
.sp-dropdown-items > li > a:hover{
    background:#F3F8FC;
    color:#4A7A9B !important;
    padding-left:30px !important;
}

/* Animation */
@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/*000000----0000*/
.sp-menu-item:hover::after {
  content: ''; 
  position: absolute; 
  left: 0;
  bottom: 0; /* Align to bottom of the text container */
  width: 100%;
  height: 3px; /* Underline thickness */
  background-color: white;
}
/* =============================== Base Dropdown =============================== */
.student_resource_badge .sp-dropdown {
  background-color: rgba(34, 34, 34, 0.5); /* Dark background for contrast */
  color: #fff; /* White text for readability */
  border-radius: 6px;
 /* padding: 20px;*/
  padding-right: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  z-index: 1000;
  width: 600px; /* Adjustable width */
  min-width: 300px;
  top: 100%;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two-column layout */
  gap: 15px;
}

/* =============================== Hover Effect =============================== */
.student_resource_badge:hover .sp-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =============================== Dropdown Links =============================== */
.student_resource_badge .sp-dropdown-inner ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.student_resource_badge .sp-dropdown-inner li a {
  display: block;
  padding: 10px 15px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.student_resource_badge .sp-dropdown-inner {
  background: rgba(34, 34, 34, 0.5) !important;
}


.student_resource_badge .sp-dropdown-inner li a:hover {
  color: #00baff; /* Bright accent color */
  background-color: rgba(255, 255, 255, 0.1); /* Light hover effect */
  border-radius: 4px;
}

/* =============================== Dropdown Header =============================== */
.student_resource_badge .sp-dropdown-inner .item-header > a {
  font-weight: 600;
  color: #ffcc00; /* Highlighted header */
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 2px solid #ffcc00;
  text-transform: uppercase;
}

/* =============================== Badge Icon (Optional) =============================== */
.student_resource_badge > a::after {
  content: '📘'; /* Add an icon to indicate "student resources" */
  margin-left: 6px;
  font-size: 0.9em;
  opacity: 0.8;
}

/* =============================== Mega Dropdown Layout =============================== */
.student_resource_badge .sp-dropdown-mega {
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: 600px;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px);
}

.student_resource_badge:hover .sp-dropdown-mega {
  transform: translateX(-50%) translateY(0);
}

/* =============================== Mobile Responsive =============================== */
@media (max-width: 991.98px) {
  .student_resource_badge .sp-dropdown,
  .student_resource_badge .sp-dropdown-mega {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: block;
    width: 100%;
    grid-template-columns: 1fr; /* Single column for mobile */
  }

  .student_resource_badge .sp-dropdown-inner li a {
    padding: 12px 20px;
  }
}