@import url(./root.css);

* {
  list-style-type: none !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

body {
  background: black !important;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

main {
  overflow: clip;
  -webkit-overflow: clip;
}
.position_absolute {
  position: absolute;
}
/* ================ COMMON CLASS ============== */

.cursor_pointer {
  cursor: pointer;
}

.transition_all {
  transition: all 0.3s linear;
}

/* ============ SCROLLBAR CSS ============ */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: black !important;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-yellow) !important;
  border-radius: 10px;
}

.container {
  padding-left: 24px !important;
  padding-right: 24px !important;
  max-width: 1528px !important;
}

.position_relative {
  position: relative;
}

#branding-agency h2 {
  font-weight: 700;
  max-width: 1185px;
  line-height: 90%;
}

#branding-agency .container {
  padding: 100px 0;
}

#branding-agency .row_parent {
  padding-top: 80px;
}

#branding-agency .image_star_logo {
  width: 100%;
}

#branding-agency p {
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 128%;
}

#branding-agency h3 {
  font-weight: 700;
  line-height: 100%;
  padding-top: 146px;
}

#branding-agency h3 span {
  color: white;
}

#branding-agency h3 {
  padding-top: 28px;
}

/*====== Hero ======= */

.nav_bar {
  height: 132px;
  z-index: 100;
}

.hero_height {
  height: 100vh;
}

.logo {
  width: 133px;
  height: 70px;
}

.diamond_image {
  width: 22px;
  height: 19px;
}

.nav_diamond,
.nav_diamond_circle {
  width: 49px;
  height: 49px;
  transition: all 0.3s linear;
}

.nav_diamond_star {
  width: 0;
  height: 0;
  transform: translate(50%, -50%);
  transition: all 0.3s linear;
}

.nav_diamond_circle {
  transform: translate(50%, -50%);
}

.start_project_text {
  transition: all 0.2s linear;
  width: 208px;
  white-space: nowrap;
  right: -50px;
  transform: translateY(-50%);
}

.start_project:hover .start_project_text {
  opacity: 1 !important;
  right: 35px;
}

.start_project:hover .nav_diamond_star {
  width: 73px;
  height: 73px;
}

.start_project:hover .nav_diamond_circle {
  width: 49px;
  height: 49px;
  opacity: 0;
}

.cross_icon span svg {
  width: 0 !important;
  height: 0 !important;
}

.nav_links {
  position: relative;
  color: black;
  text-shadow: -1px -1px 0 #e8ff00, 1px -1px 0 #e8ff00, -1px 1px 0 #e8ff00,
    1px 1px 0 #e8ff00;
  line-height: 100%;
}

.nav_links::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #e8ff00;
  overflow: hidden;
  width: 0%;
  transition: all 0.3s;
}

.nav_links:hover::before {
  width: 110%;
}

/*====== kernkompetenz======= */

#kernkompetenz {
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: hidden;
}

#kernkompetenz .sec_head {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  color: white;
  mix-blend-mode: multiply;
  line-height: 100%;
}

#kernkompetenz .sec_head::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #000;
  overflow: hidden;
  width: 0%;
  transition: all 0.3s;
}

#kernkompetenz .fill_shadow::before {
  width: 110%;
}

#kernkompetenz .max_content {
  max-width: 1013px;
  margin: auto;
}

#kernkompetenz .karwall_bg_poster {
  width: 100%;
}

.vh_50 {
  height: 30vh;
}

/* ==== footer ====== */

.max_w_1920 {
  max-width: 1920px;
}

.win_section {
  padding-top: 100px;
}

.win_heading {
  line-height: 90%;
  font-size: 40px;
  margin-left: 0;
  max-width: 754px;
  top: 20%;
  border-radius: 4px;
  padding-bottom: 3px;
  padding-top: 3px;
}

.contact_btn {
  background-color: #e8ff00;
  padding: 10px 30px;
  border-radius: 50px;
  border: 2px solid transparent;
  transition: all 300ms linear;
}

.contact_btn:hover {
  border: 2px solid #e8ff00;
  background-color: transparent;
  color: #e8ff00;
}

.star_box .star_image {
  width: 268px;
  height: 268px;
}

.star_box p {
  line-height: 128%;
}

.star_box .talk_box {
  padding-top: 50px;
}

.man_with_mask {
  max-width: 547px;
}

.star_box {
  max-width: 653px;
}

.burger_img {
  padding-top: 50px;
  padding-bottom: 50px;
  max-width: 645px;
}

.water_pull_img {
  max-width: 620px;
}

.horse_img {
  margin-left: 0;
  margin-top: 50px;
  padding-bottom: 100px;
  max-width: 573px;
}

.girl_with_heart {
  margin-bottom: -100px;
  max-width: 1427px;
}

.partners_logo {
  max-width: 295px;
}

.min_vh_70 {
  min-height: 70vh;
}

.leading_90 {
  line-height: 90%;
}

.translate_x_first_text {
  transform: translateX(-70px);
}

.karwall_uno_img {
  height: 40px;
  width: 3027px;
  transform: translateX(-130px);
}

.first_line_section {
  transform: rotate(-2.44deg) translate(100px, 24px);
}

.second_line_section {
  transform: rotate(0.57deg) translate(-10px, 35px);
}

.third_line_section {
  transform: rotate(-1.06deg) translate(180px, 100px);
  border-top: 1px solid var(--color-yellow);
  border-bottom: 1px solid var(--color-yellow);
}

.third_line_section_text {
  transform: translateX(-10px);
  padding-left: 50px;
}

.fourth_line_section {
  transform: rotate(1.51deg) translate(-30px, 146px);
}

.fifth_line_section {
  transform: rotate(-3deg) translate(-10px, 146px);
}

.six_line_section {
  transform: translateY(120px);
  border-top: 1px solid var(--color-yellow);
  border-bottom: 1px solid var(--color-yellow);
}

.max_w_1920 {
  max-width: 1920px;
}

.py_2 {
  padding: 8px 0;
}

/* =================Berlin CSS ================ */
.in_image {
  height: 100px;
  width: 100px;
  top: -100px;
}

.berlin_text {
  font-size: 50px;
}

/* =================HEART CSS ================ */
.heart_image {
  height: 100px;
  width: 100px;
  top: -82px;
  right: 4px;
}

/* ============= DIAMOND CSS ============ */
.diamond_img {
  width: 570px;
  height: 590px;
  margin-bottom: 12px;
}

.diamond_box h2 {
  margin: 20px 0 71px;
}

.diamond_box button,
.apply_now_btn {
  background-color: var(--color-yellow);
  padding: 19px 72.1px;
  border-radius: 50px;
  border: 2px solid transparent;
  transition: all 300ms linear;
}

.kontakt_button {
  padding: 19px 88.2px;
}

.diamond_box button::after,
.apply_now_btn::after {
  content: "";
  position: absolute;
  background: white;
  top: 0;
  left: 50%;
  width: 0;
  border-radius: 20px;
  height: 100%;
  z-index: 1;
  transition: all 200ms linear;
}

.diamond_box button:hover::after,
.apply_now_btn:hover::after {
  width: 100%;
  left: 0;
}

/* ============= FOOTER CSS ============ */
.footer_line {
  background: var(--color-yellow);
  height: 1px;
  margin: 166px 0;
}

.footer_barline_paragraph {
  max-width: 250px;
}

.footer_solothurn_paragraph {
  max-width: 230px;
}

.footer_logo {
  width: 411px;
  height: 254px;
}

.footer_mail:hover {
  opacity: 0.7;
}

.footer_copyright {
  margin-top: 175px;
  background-color: black;
  z-index: 2;
}

.back_to_top {
  top: -110px;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  width: 158px;
  height: 182px;
}

.footer_copyright h2 {
  height: 84px;
}

.back_top_hover:hover h2 {
  color: var(--color-yellow) !important;
}
.back_top_hover:hover .back_to_top {
  top: -176px;
  transform: translateX(-50%) scale(1);
}
.card_3_diamond {
  border-top: 1px solid var(--color-yellow);
  border-bottom: 1px solid var(--color-yellow);
}
.backdrop_blur_light {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
.animate_hero {
  transform: translateY(0) !important;
}

.footer_height {
  height: 100vh;
  min-height: 768px;
  max-height: 1024px;
}
@media (min-width: 576px) {
  #branding-agency .container {
    padding: 150px 0;
  }
  .wir_black_sect {
    padding-top: 132px !important;
  }
  .diamond_image {
    width: 29px;
    height: 25px;
  }
  .win_heading {
    top: 28%;
  }

  .star_box .talk_box {
    padding-top: 100px;
  }

  .star_box .star_image {
    width: 340px;
    height: 340px;
  }

  .burger_img {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .horse_img {
    margin-top: 100px;
    padding-bottom: 200px;
  }

  .contact_btn {
    padding: 12px 40px;
  }

  .star_box {
    margin-top: 100px;
  }

  .second_line_section {
    transform: rotate(0.57deg) translate(-10px, 20px);
  }

  .third_line_section {
    transform: rotate(-1.06deg) translate(-10px, 30px);
  }

  .fourth_line_section {
    transform: rotate(1.51deg) translate(50px, 10px);
  }

  .fifth_line_section {
    transform: rotate(-3deg) translate(-10px, 0px);
  }

  .six_line_section {
    transform: translateY(30px);
  }

  .karwall_uno_img {
    height: 46px;
    width: 3127px;
  }

  .berlin_text {
    font-size: 80px;
  }
}

@media (min-width: 768px) {
  #branding-agency .container {
    padding: 175px 0;
  }
  .position_md_sticky {
    position: sticky;
  }

  #kernkompetenz .karwall_bg_poster {
    height: 440px;
    width: unset;
  }

  #branding-agency .image_star_logo {
    width: 75%;
  }

  #branding-agency h3 {
    padding-top: 48px;
  }

  #branding-agency .row_parent {
    padding-top: 120px;
  }

  #kernkompetenz {
    padding-top: 150px;
    padding-bottom: 150px;
  }

  .win_heading {
    left: 20px;
    font-size: 70px;
  }

  .star_box .star_image {
    width: 468px;
    height: 468px;
  }

  .girl_with_heart {
    margin-bottom: -150px;
    max-width: 1427px;
  }
  .first_line_section {
    transform: rotate(0.57deg) translate(-10px, 196px);
  }
  .second_line_section {
    transform: rotate(0.57deg) translate(-10px, 260px);
  }

  .third_line_section {
    transform: rotate(-2.06deg) translate(110px, 350px);
  }

  .fourth_line_section {
    transform: rotate(1.51deg) translate(50px, 370px);
  }

  .fifth_line_section {
    transform: rotate(-3deg) translate(-10px, 400px);
  }

  .six_line_section {
    transform: translateY(80px);
  }

  .karwall_uno_img {
    height: 52px;
    width: 3327px;
  }

  .in_image {
    height: 200px;
    width: 200px;
    top: -160px;
  }

  .heart_image {
    height: 160px;
    width: 160px;
    top: -120px;
    right: -2px;
  }

  .berlin_text {
    font-size: 100px;
  }
}

@media (min-width: 992px) {
  #branding-agency .row_parent {
    padding-top: 140px;
  }

  #branding-agency h3 {
    padding-top: 64px;
  }

  #kernkompetenz {
    padding-top: 180px;
    padding-bottom: 180px;
  }

  .contact_btn {
    padding: 15px 81px;
  }

  .first_line_section {
    transform: rotate(-2.44deg) translate(100px, 235px);
  }

  .second_line_section {
    transform: rotate(0.57deg) translate(-10px, 209px);
  }

  .third_line_section {
    transform: rotate(-1.06deg) translate(230px, 220px);
  }

  .fourth_line_section {
    transform: rotate(1.51deg) translate(-150px, 240px);
  }

  .fifth_line_section {
    transform: rotate(-3deg) translate(-10px, 230px);
  }

  .six_line_section {
    transform: translateY(400px);
  }

  .gap_y_lg_3 {
    gap: 16px 0px;
  }

  .karwall_uno_img {
    height: 60px;
    width: 3427px;
  }

  .berlin_text {
    font-size: 120px;
  }

  .heart_image {
    top: -90px;
    right: 70px;
  }

  .translate_x_first_text {
    transform: translateX(-32px);
  }
}

@media (min-width: 1024px) {
  #kernkompetenz .karwall_bg_poster {
    height: 555px;
  }

  #branding-agency .row_parent {
    padding-top: 160px;
  }
}

@media (min-width: 1200px) {
  #branding-agency .container {
    padding: 235px 0;
  }

  #branding-agency .row_parent {
    padding-top: 180px;
  }

  #branding-agency h3 {
    padding-top: 100px;
  }

  #kernkompetenz .karwall_bg_poster {
    height: 680px;
  }

  #kernkompetenz {
    padding-top: 200px;
    padding-bottom: 200px;
  }

  .burger_img {
    padding-top: 427px;
    padding-bottom: 475px;
    margin-left: 358px;
    max-width: 645px;
  }

  .star_box {
    max-width: 653px;
    float: right;
    margin-top: -1000px;
  }

  .star_box .talk_box {
    padding-top: 300px;
  }

  .win_heading {
    line-height: 90%;
    margin-left: 246px;
    max-width: 640px;
  }

  .girl_with_heart {
    margin-bottom: -200px;
    max-width: 1427px;
  }

  .win_section {
    padding-top: 311px;
  }

  .first_line_section {
    transform: rotate(-2deg) translate(97px, 55px);
  }

  .second_line_section {
    transform: rotate(0.57deg) translate(-10px, 37px);
  }

  .third_line_section {
    transform: rotate(-1.06deg) translate(232px, 60px);
  }

  .fourth_line_section {
    transform: rotate(1.51deg) translate(50px, 35px);
  }

  .fifth_line_section {
    transform: rotate(-3deg) translate(-10px, 30px);
  }

  .six_line_section {
    transform: translateY(65px);
  }

  .karwall_uno_img {
    height: 55px;
    width: 3427px;
  }

  .in_image {
    height: 328px;
    width: 328px;
    top: -230px;
  }

  .heart_image {
    height: 216px;
    width: 216px;
    top: -111px;
    right: 20px;
  }

  .berlin_text {
    font-size: 200px;
  }

  .py_xl_3 {
    padding: 16px 0;
  }
}

@media (min-width: 1400px) {
  #branding-agency .row_parent {
    padding-top: 220px;
  }

  #branding-agency h3 {
    padding-top: 120px;
  }

  #branding-agency .image_star_logo {
    width: 580px;
  }

  #kernkompetenz .karwall_bg_poster {
    height: 750px;
  }

  #kernkompetenz {
    padding-top: 300px;
    padding-bottom: 300px;
  }
}

@media (min-width: 1536px) {
  .win_heading {
    max-width: 719px;
  }

  #kernkompetenz .karwall_bg_poster {
    height: 863px;
  }

  #branding-agency .image_star_logo {
    width: 650px;
  }

  #branding-agency .row_parent {
    padding-top: 241px;
  }

  #branding-agency h3 {
    padding-top: 146px;
  }

  #branding-agency .image_star_logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  #kernkompetenz {
    padding-top: 314px;
    padding-bottom: 314px;
  }

  .horse_img {
    margin-left: 278px;
    margin-top: -100px;
    padding-bottom: 630px;
  }

  .star_box {
    max-width: 653px;
    float: right;
    margin-top: -1000px;
  }

  .win_heading {
    font-size: 100px;
  }

  .first_line_section {
    transform: rotate(-1.44deg) translate(100px, 40px);
  }

  .second_line_section {
    transform: rotate(0.57deg) translate(-10px, 55px);
  }

  .third_line_section {
    transform: rotate(-1.06deg) translate(232px, 50px);
  }

  .fourth_line_section {
    transform: rotate(1.51deg) translate(50px, 25px);
  }

  .fifth_line_section {
    transform: rotate(-2deg) translate(-10px, 10px);
  }

  .six_line_section {
    transform: translateY(30px);
  }

  .karwall_uno_img {
    height: 70px;
    width: 3727px;
  }

  .mt_2xl_22 {
    margin-top: 22px !important;
  }

  .gap_y_2xl_5 {
    gap: 46px 0px;
  }

  .heart_image {
    right: 52px !important;
  }
}

@media (min-width: 1700px) {
  .max_w_2560 {
    max-width: 2560px;
    overflow: hidden;
  }

  .py_3xl_4 {
    padding: 24px 0 !important;
  }

  .mt_3xl_1 {
    margin-top: 4px;
  }

  .mb_3xl_2 {
    margin-bottom: 8px;
  }

  .first_line_section {
    transform: rotate(-2deg) translate(-320px, 100px);
  }

  .second_line_section {
    transform: rotate(0.57deg) translate(-320px, 125px);
  }

  .third_line_section {
    transform: rotate(-1.06deg) translate(-320px, 70px);
  }

  .fourth_line_section {
    transform: rotate(1.51deg) translate(320px, 70px);
  }

  .fifth_line_section {
    transform: rotate(-3deg) translate(-320px, 50px);
  }

  .six_line_section {
    transform: translateY(-100px);
  }
}

@media (max-width: 1440.98px) {
  .diamond_box h2 {
    margin: 20px 0 20px;
  }

  .diamond_img {
    width: 350px;
    height: 370px;
  }
}

@media (max-width: 1199.98px) {
  .footer_logo {
    width: 320px;
    height: 190px;
    margin-top: 100px;
  }

  .footer_line {
    margin: 100px 0;
  }

  .diamond_img {
    width: 260px;
    height: 280px;
  }
}

@media (max-width: 991.98px) {
  .footer_copyright h2 {
    height: unset;
  }

  .footer_logo {
    margin-bottom: 48px;
  }

  .footer_line {
    margin-bottom: 40px;
    margin-top: 0 !important;
  }

  .diamond_box button,
  .apply_now_btn {
    padding: 15px 70px;
  }

  .diamond_box h2 {
    margin: 20px 0 40px;
  }

  .footer_logo {
    margin-top: 80px;
  }
}

@media (max-width: 767.98px) {
  .logo {
    width: 90px;
    height: 50px;
  }

  .start_project_text {
    width: 190px;
  }

  .back_to_top {
    width: 130px;
    top: -91px;
    height: 150px;
  }

  .back_top_hover:hover .back_to_top {
    top: -150px;
  }

  .footer_logo {
    width: 330px;
    height: 200px;
    margin: 48px 0;
    margin-bottom: 0;
  }

  .footer_copyright {
    margin-top: 90px;
    padding-top: 20px;
  }

  .diamond_box button,
  .apply_now_btn {
    background-color: var(--color-yellow);
    padding: 12.4px 60.2px;
  }
}

@media (max-width: 575.98px) {
  .wir_black_sect {
    padding-top: 100px !important;
  }
  .wir_blavk_box_spacing {
    margin-top: -400px;
  }
  .mantain_bg_on_mobile {
    height: 0vh !important;
  }
  .diamond_img {
    width: 20px;
    height: 20px;
  }
  .start_project_text {
    width: 150px;
  }
  .nav_diamond,
  .nav_diamond_circle {
    width: 40px;
    height: 40px;
    transition: all 0.3s linear;
  }

  .start_project:hover .nav_diamond_star {
    width: 53px;
    height: 53px;
  }
  .nav_bar {
    height: 95px;
  }
  .hero_height {
    height: 80vh;
  }

  .footer_logo {
    width: 292px;
    height: 162px;
    margin: 48px 0;
  }

  .diamond_box button,
  .apply_now_btn {
    padding: 12px 46px;
  }

  .diamond_img {
    width: 100%;
  }

  .footer_copyright {
    margin-top: 80px;
    padding: 20px 0px 0px 0px !important;
  }

  .back_to_top {
    top: -91px;
  }

  .back_to_top_border {
    top: 0;
  }

  .diamond_img {
    width: 180px;
    height: unset;
  }
}

@media (min-width: 1536px) and (max-height: 1200px) {
  .diamond_img {
    height: 400px;
    width: 420px;
  }
}
@media (width: 1024px) and (max-height: 1199.8px) {
  .first_line_section {
    transform: rotate(-2.44deg) translate(100px, 24px);
  }

  .second_line_section {
    transform: rotate(0.57deg) translate(-10px, 20px);
  }

  .third_line_section {
    transform: rotate(-1.06deg) translate(180px, 18px);
    border-top: 1px solid var(--color-yellow);
    border-bottom: 1px solid var(--color-yellow);
  }

  .third_line_section_text {
    transform: translateX(-10px);
  }

  .fourth_line_section {
    transform: rotate(1.51deg) translate(-30px, 25px);
  }

  .fifth_line_section {
    transform: rotate(-3deg) translate(-10px, 146px);
  }
}
@media (width: 1024px) and (min-height: 1200px) {
  .first_line_section {
    transform: rotate(-2.44deg) translate(100px, 423px);
  }

  .second_line_section {
    transform: rotate(0.57deg) translate(-10px, 430px);
  }

  .third_line_section {
    transform: rotate(-1.06deg) translate(180px, 460px);
    border-top: 1px solid var(--color-yellow);
    border-bottom: 1px solid var(--color-yellow);
  }

  .fourth_line_section {
    transform: rotate(1.51deg) translate(-30px, 470px);
  }

  .fifth_line_section {
    transform: rotate(-3deg) translate(-10px, 500px);
  }
}