.area__padding__top {
  padding-top: 64px;
}
.area__padding__bottom {
  padding-bottom: 64px;
}

/*
~
!* Custom CSS for LANG CHANGE SWITCH 
*/
.switch {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
  margin: 10px 20px;
}

.switch .lang__switch {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .lang__switch + .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7be00;
  transition: 0.4s;
}

.switch .lang__switch + .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #ffffff;
  transition: 0.4s;
}

.switch .lang__switch:focus + .slider {
  box-shadow: 0 0 1px #ffffff;
}

.switch .lang__switch:checked + .slider:before {
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Text inside the slider */
.switch .lang__switch + .slider::after {
  content: "de";
  color: #0f263a;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-family: Arial, sans-serif;
  transition: 0.4s;
}

.switch .lang__switch:checked + .slider::after {
  content: "en";
  left: 8px;
  right: auto;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
  .topbar-left ul li a {
    font-weight: 400;
    padding: 6px 0;
    font-size: 14px;
  }
  .switch {
    margin: 5px 210px 10px 0;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .topbar-left ul li a {
    font-weight: 400;
    padding: 6px 0;
    font-size: 16px;
  }
  .switch {
    margin: 5px 360px 10px 0;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .switch {
    margin: 30px 40px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* styles for desktops */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* styles for large screens */
}