/*
 * Target the link (<a>) inside the .lang-item
 * and add a pseudo-element before its content.
 */

.pll-parent-menu-item {
     margin-left: 20px;
}

@media (max-width: 1199px) {
 .pll-parent-menu-item {
     margin: 0 !important;
     margin-left: 17px !important;
 }

  .pll-parent-menu-item a.dropdown-toggle {
     display: none;
  }

  .lang-item a.dropdown-item {
     padding: 0px;
  }

  .lang-item a.dropdown-item::before{

  }

  .pll-parent-menu-item .lang-item {
     background-color: transparent !important;
}

#header ul .dropdown-toggle + ul {
    clip-path: inset(0 0 0 0);
    height: fit-content;
    padding: 0;
  }
}

  .pll-parent-menu-item a.dropdown-toggle {
    font-size: 14px;
    top: 1px;
    position: relative;
  }

.pll-parent-menu-item::before {
  /* * This is the specific Unicode for the 'bi-globe' icon.
   * You can find codes for other icons on the Bootstrap Icons site.
   */
  content: "\F3EE";

font-size: 20px;

  position: absolute;

  bottom: 9px;
  left: -15px;

  /* * This is the most important part!
   * It tells the browser to use the Bootstrap Icons font.
   */
  font-family: "bootstrap-icons";

  /* * This ensures the icon displays correctly, even if the
   * link text is bold.
   */
  font-weight: normal;

  /* Add some spacing between the icon and the text */
  margin-right: 0.5em; /* Adjust this value as needed */

  /* * This helps align the icon vertically with the text.
   * You might also try 'middle' or 'text-bottom'.
   */
  vertical-align: baseline;
}