/*
Theme Name: Agentur77
Theme URI: https://agentur77.de
Description: Agentur-77 Theme
Author: Alex
Author URI: https://agentur77.de
Version: 1.0
Screenshot: screenshot.jpg
Template: hello-elementor
*/
.elementor-editor-active {
  .swipe-animation {
    display: none !important;
  }
}
/* ------------------------- Kontaktformular Messages ------------------------- */
/* Succss Message */
.kontaktformular
  .elementor-message.elementor-message-success.elementor-message-svg {
  background: #f3f3f3;
  width: 100%;
  height: auto;
  padding: 20px 25px;
  font-weight: 600;
}
.kontaktformular .elementor-message-svg:before {
  height: 1.25em;
  width: 1.25em;
  background-size: contain;
}

/* Error Message */
.kontaktformular .elementor-message.elementor-message-danger {
  background: #f3f3f3;
  width: 100%;
  height: auto;
  padding: 0px 25px;
  font-weight: 600;
}
.kontaktformular .elementor-message.elementor-message-danger:before {
  height: 1.25em;
  width: 1.25em;
  background-size: contain;
}

/* --------------------------- ANCHOR CUSTOM STYLE -------------------------- */
/* ------------------------- ANCHOR Language  SWITCH ------------------------ */
ul.lang-switch {
  display: flex !important;
  justify-content: flex-end !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.lang-switch li.lang-active {
  color: #f4da58 !important;
  font-family: "Urbanist", Sans-serif;
  font-size: 18px;
  line-height: 24px !important;
}
ul.lang-switch li {
  margin-left: 10px !important;
  list-style-type: none;
}
ul.lang-switch li a {
  color: #fff !important;
}
ul.lang-switch li a:hover {
  color: #f4da58 !important;
}
/* ---------------------------- ANCHOR Allgemein ---------------------------- */
.overflow-hidden {
  overflow: hidden !important;
}

/* WhatsApp */
.ht-ctc svg {
  width: 30px !important;
  height: 30px !important;
}
.ht-ctc .ctc_nb {
  border-radius: 50px !important;
}

/* ---------------------------- ANCHOR Offcanvas ---------------------------- */
/* .offcanvas-btn {
  background: rgb(255 255 255 / 50%);
} */
.header.sticky .offcanvas-btn {
  filter: none !important;
  background: none !important;
}
.header.sticky .offcanvas-btn svg path {
  fill: #fff !important;
}

.offcanvas-menu ul li a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 35px !important;
  padding: 0 15px !important;
  text-align: right !important;
}

.offcanvas-menu ul li a:focus,
.offcanvas-menu ul li a:hover,
.offcanvas-menu ul li a:active {
  color: #000 !important;
  background-color: #f3f3f3 !important;
}

.offcanvas-menu ul li a.elementor-item-active {
  color: #000 !important;
  background-color: #f3f3f3 !important;
}

.offcanvas-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: top;
  transition: max-height 0.3s, transform 0.3s;
  min-height: 750px;
}

.offcanvas-menu ul li ul {
  background: #f3f3f3;
  padding: 10px !important;
}
.offcanvas-menu ul li ul .elementor-sub-item {
  margin: 0 0 0 !important;
}
.offcanvas-menu ul li.menu-item-has-children ul {
  margin-top: -5px !important;
}

/* ------------------------------ ANCHOR Navbar ----------------------------- */
.nav-overflow {
  overflow: hidden !important;
}
/*Topbar*/
.topbar-infos {
  .e-con-full {
    display: flex !important;
    flex-direction: row-reverse !important;
    /*    .elementor-icon-list-item {
     a {
        flex-direction: row-reverse !important;
        svg {
          margin-right: 8px;
        }
      } 
    } */
  }

  .elementor-swiper-button-prev {
    left: -18px !important;
    top: auto !important;
    bottom: 14px !important;
    font-size: 15px !important;
    z-index: 2 !important;
    cursor: pointer !important;
    width: fit-content !important;
    svg {
      fill: rgb(237 237 237 / 30%) !important;
      background: rgb(255 255 255 / 30%);
    }
    &:hover svg {
      fill: rgb(237 237 237 / 75%) !important;
      transition: all 0.3s linear;
    }
  }
  .elementor-swiper-button-next {
    left: -18px !important;
    top: auto !important;
    bottom: -4px !important;
    font-size: 15px !important;
    z-index: 2 !important;
    cursor: pointer !important;
    width: fit-content !important;
    svg {
      fill: rgb(237 237 237 / 30%) !important;
      background: rgb(255 255 255 / 30%);
    }
    &:hover svg {
      fill: rgb(237 237 237 / 75%) !important;
      transition: all 0.3s linear;
    }
  }
}

header .header {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  transition: all 0.3s linear;
}
/* .sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.07);
  -webkit-animation: sticky 1s;
  animation: sticky 1s;
  margin: 0 !important;
} */
header .header.sticky {
  background: #121e47 !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.07);
  -webkit-animation: sticky 1s;
  animation: sticky 1s;
  margin: 0 !important;
}

@-webkit-keyframes sticky {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes sticky {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
/* ------------------------------ ANCHOR Boxen ------------------------------ */
.services-wrapper .service-single-box {
  position: relative;
  max-width: 350px !important;
  width: 100%;
  height: 400px;
}
.services-wrapper .service-single-box:hover::before {
  left: 0;
  top: 0;
  transform: rotate(0deg);
}
.services-wrapper .service-single-box::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0px;
  max-width: 350px !important;
  width: 100%;
  height: calc(100% + 0px);
  transform: rotate(4deg);
  transition: all 0.3s linear;
  z-index: -1;
}

.services-wrapper .service-single-box::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: auto;
  right: -12px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid rgb(18 30 71 / 20%);
  z-index: 2;
  transform: rotate(315deg);
  transition: 0.3s ease-in-out;
}
.services-wrapper .service-single-box:hover::after {
  border-top: 20px solid rgb(18 30 71 / 50%);
  transition: 0.3s ease-in-out;
}
.services-wrapper .service-single-box.box-color-1::before {
  background-color: #cae5f8;
}
.services-wrapper .service-single-box.box-color-2::before {
  background-color: #ddddec;
}
.services-wrapper .service-single-box.box-color-3::before {
  background-color: #feedd1;
}
.services-wrapper .service-single-box.box-color-4::before {
  background-color: #e4ffe7;
}

/* --------------------------- ANCHOR Sprachkurse --------------------------- */
.sprachkurse-slider
  .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background-color: #555;
}

.sprachkurse-slider .sprachkurs-hover:hover h3 {
  color: #f4da58 !important;
  transition: 0.3s ease-in-out;
}

/* ----------------------------- ANCHOR Formular ---------------------------- */
.formular {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    position: relative;
    top: 4px;
    margin-right: 5px;
  }
  .elementor-field-type-acceptance a:hover {
    text-decoration: underline;
  }
}

.kontaktformular label a {
  line-height: 1.5em !important;
}

/* ------------------------------ ANCHOR Button ----------------------------- */
/* CSS - Tada Animation */
@keyframes tada {
  0% {
    transform: none;
  }
  2%,
  4% {
    transform: scale(1) rotate(-3deg);
  }
  6%,
  10%,
  14%,
  18% {
    transform: scale(1.05) rotate(3deg);
  }
  8%,
  12%,
  16% {
    transform: scale(1.05) rotate(-3deg);
  }
  20% {
    transform: none;
  }
  100% {
    transform: none; /* Pause bis der Zyklus wieder von vorne startet */
  }
}

.btn-tada .elementor-button {
  transform-origin: center;
  animation: tada 4.5s ease-in-out infinite;
}
.btn-tada .elementor-button * {
  transition: 0.3s ease-in-out;
}

.btn-tada .elementor-button:hover {
  transition: 0.3s ease-in-out;
  background-color: #121e47 !important;
  color: #fff !important;
  fill: #fff !important;
}
/* ------------------------------ ANCHOR Table ------------------------------ */
.table-wrapper {
  p {
    margin-bottom: 0px !important;
  }
}

/* ------------------------------ ANCHOR Popup ------------------------------ */
.elementor-popup-modal .dialog-close-button svg {
  fill: #1f2124;
  height: 1.5em !important;
  width: 1.5em !important;
}