/*this is the css and html for your custom settings/tabs menu/dropdown*/
/* Basic styles for the dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown button */
.dropbtn {
    background-color: #3498db;
    color: white;       /*inside text color*/ 
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1s ease; /* Add transition for smooth animation */
}

.menu-icon {
    width: 24px;
    height: 24px;
    border-radius: 15px;
}

/* Apply transform on hover*/
.dropdown:hover .dropbtn {
    background-color: #2980b9;
    transform: rotate(360deg); /* Apply rotation */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;         /* below the button */
  right: 0;          /* align right edge with parent */
  left: 25%;        /* prevent default left expansion */
  transform: translateX(-60%); /* shift full width to the left */
  background-color: #15248E;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 10px;
  color: white;
}



/* Links inside the dropdown */
.aT {
    color: white !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #f1f1f1;
    border-radius: 10px;
}

/* Show the dropdown menu when hovering over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}