/*
    Theme Name: Bluemonkeys Wordpress
    Theme URI: https://bluemonkeys.at
    Author: Bluemonkeys
    Author URI: https://bluemonkeys.at
    Description: Theme for Bluemonkeys website.
    Version: 1.4.37
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: bluemonkeys
*/

/* FONTS STYLE */
@font-face {
  font-family: "Poppins Regular";
  src: url("./assets/fonts/Poppins/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Poppins Bold 800";
    src: url("./assets/fonts/Poppins/Poppins-Black.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins SemiBold";
    src: url("./assets/fonts/Poppins/Poppins-SemiBold.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins Light";
    src: url("./assets/fonts/Poppins/Poppins-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins ExtraLight";
    src: url("./assets/fonts/Poppins/Poppins-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Signika Regular";
    src: url("./assets/fonts/Signika/Signika-Regular.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Signika SemiBold";
    src: url("./assets/fonts/Signika/Signika-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



/* GLOBALS STYLE */
:root {
  --primary-blue: #14285c;
  --secondary-blue: #c4def9;
  --blocks-blue: #2e6bbf;
  --berry-primary: #924fa6;
  --berry-secondary: #a7b5fe;
  --banana: #e4b704;
  --off-white: #f4f1eb;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--off-white);
  line-height: 1;
  overflow-x: hidden;
  cursor: url("./assets/icons/default-cursor.svg") 0 0, auto !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  overflow-x: clip;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

ul,
ol,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

h1 {
  overflow: visible;

  span {
    will-change: transform, opacity;
  }
}

.container {
  max-width: 1280px;
}

a:hover,
button:hover
li:hover {
  cursor: url("./assets/icons/banana-cursor.svg"), auto;
}

.elementor-button:hover {
  cursor: url("./assets/icons/banana-cursor.svg"), auto;
}

.section-main-heading {
  font-size: 38px;
  font-family: "Poppins Bold 800", sans-serif;
  line-height: 1;
  font-weight: 500;
  margin-top: 10px;
}

.section-main-heading-white {
  font-size: 38px !important;
  font-family: "Poppins Bold 800", sans-serif !important;
  line-height: 1;
  font-weight: 500;
  margin-top: 10px;
  color: #fff;
}

.section-sub-heading {
  font-size: 24px;
  font-family: "Poppins Regular", sans-serif;
  line-height: 1;
  color: var(--berry-primary);
  font-weight: 400;
}

.section-sub-heading-white {
  font-size: 24px;
  font-family: "Poppins Regular", sans-serif;
  line-height: 1;
  color: var(--secondary-blue);
  font-weight: 400;
}

.hero-main-heading {
  font-size: 64px !important;
  font-family: "Poppins Bold 800", sans-serif;
  line-height: 1.3;
  color: var(--primary-blue);
  font-weight: 900;
}

.sh-reg {
  font-family: "Poppins SemiBold", sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #000;
  line-height: 1;
}

.btn-primary {
  border: 2px solid var(--blocks-blue);
  padding: 8px 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: transparent !important;
  width: fit-content;
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  &::after {
    background-color: var(--blocks-blue);
    content: "";
    display: block;
    height: 110%;
    width: 120%;
    position: absolute;
    left: -10%;
    top: -5%;
    border-radius: 5rem;
    transform: translate(-100%, 0) rotate(5deg);
    transform-origin: top center;
    transition: 0.3s transform ease-out;
    will-change: transform;
    z-index: 0;
  }

  &:hover {

    span {
      color: #fff;
    }

    &::after {
      transform: translate(0, 0);
    }

    svg {
      path {
        stroke: #fff;
      }
    }
  }

  span {
    font-size: 16px;
    font-family: "Poppins Bold 800", sans-serif;
    color: var(--blocks-blue);
    line-height: 1.5;
    font-weight: 800;
    z-index: 1;
    transition: color 0.3s ease;
  }

  svg {
    width: 27px;
    height: 30px;
    z-index: 1;

    path {
      transition: stroke 0.3s ease;
    }
  }
}

.secondary-blue-btn {
  border: 2px solid var(--secondary-blue);

  span {
    color: var(--secondary-blue);
  }

  &::after {
    background-color: var(--secondary-blue);
  }

  &:hover {
    span {
      color: var(--primary-blue);
    }

    svg {
      path {
        stroke: var(--primary-blue);
      }
    }
  }
}

.alternative-blue-btn {
  border: 2px solid var(--secondary-blue);
  background-color: var(--secondary-blue)!important;

  span {
    color: var(--primary-blue);
  }

  &::after {
    background-color: var(--off-white);
  }

  &:hover {
    border: 2px solid var(--off-white);

    span {
      color: var(--primary-blue);
    }

    svg {
      path {
        stroke: var(--primary-blue);
      }
    }
  }
}

.banana-btn {
  border: 2px solid var(--banana);
  background-color: var(--banana)!important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);

  span {
    color: var(--off-white);
  }

  &::after {
    background-color: var(--off-white);
  }

  &:hover {
    border: 2px solid var(--off-white);

    span {
      color: var(--primary-blue);
    }

    svg {
      path {
        stroke: var(--primary-blue);
      }
    }
  }
}

.dark-blue-btn {
  border: 2px solid var(--primary-blue);
  background: var(--primary-blue)!important;

  span {
    color: var(--off-white);
  }

  .elementor-button-text {
    font-size: 16px;
  }

  &::after {
    background: var(--off-white)!important;

  }

  &:hover {
    border: 2px solid var(--primary-blue);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;

    span {
      color: var(--primary-blue);

      svg {
        fill: var(--off-white);
      }
    }
  }
}

.divider {
  position: absolute;
  top: -150px;
  width: 100%;
  height: auto;
  z-index: 10;
}

.swiper-navigation {
  button:hover {
    cursor: url("./assets/icons/banana-cursor.svg"), auto;
  }
}

.text-blocks-blue {
  color: var(--blocks-blue);
}

.contact-w-icon {
  background: var(--blocks-blue);
  padding: 0 !important;
  border-radius: 8px;

  &:hover {
    cursor: url("./assets/icons/banana-cursor.svg"), auto;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  
  a {
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 24px !important;
    font-weight: 800;
    font-family: "Poppins Bold 800", sans-serif !important;
    font-size: 18px;
    width: 100%;
    margin-left: -7px;

    &:before {
      content: url("./assets/icons/phone-icon.svg");
      width: 24px;
      height: 24px;
    }
  }
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 8px;
  bottom: 0;
  left: 0;
  background-color: var(--banana);
  transition: transform 0.25s ease-out;
  transform-origin: bottom right;
  z-index: -1;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


.quadrant-container {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  z-index: -1;
  transition: opacity 1s ease, transform 1s ease;
  max-width: 660px;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  justify-content: center;

  .quadrant {
    width: 90px;
    height: 90px;
    background: var(--blocks-blue);

    &.white {
      background: var(--off-white);
    }
  }
}

@keyframes flickerOn {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0.2;
  }
  25% {
    opacity: 0;
  }
  40% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.2;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.5;
  }
}

.quadrant-container.visible {
  opacity: 1;
}

.not-found-page {
  position: relative;
  height: 115vh;
  background-image: url("../../assets/images/404-bg.svg");
  background-size: 100%;

  .content {
    flex-direction: column;
    gap: 34px;
    margin-top: -190px;

    h1 {
      font-size: 250px;
      font-family: "Poppins Bold 800", sans-serif;
      color: var(--primary-blue);
      font-weight: 800;
      line-height: 0.8;
    }

    p {
      font-size: 20px;
      font-family: "Poppins Light", sans-serif;
      color: var(--primary-blue);
      font-weight: 300;
      line-height: 1.5;
      max-width: 536px;
      width: 100%;
      text-align: center;
    }
  }

  .illustration-left {
    position: absolute;
    left: 0;
    bottom: 7%;
    pointer-events: none;
  }

  .table-illustration {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
  }

  .bs-illustration-1 {
    position: absolute;
    bottom: 20%;
    right: 23%;
    z-index: 3;
    pointer-events: none;
  }

  .bs-illustration-2 {
    position: absolute;
    bottom: 20%;
    right: 43%;
    z-index: 3;
    pointer-events: none;
  }

  .m-illustration-1 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }

  .m-illustration-2 {
    position: absolute;
    right: 10%;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
  }

  .circle-illustration {
    position: absolute;
    bottom: 19%;
    right: 7%;
    z-index: 5;
    mix-blend-mode: color;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: var(--blocks-blue);
  }

  .vertical-line-left,
  .vertical-line-right {
    width: 1px;
    height: 480px;
    background: #000;
    position: absolute;
  }

  .vertical-line-left {
    top: 10%;
    left: 12%;
  }

  .vertical-line-right {
    top: 10%;
    right: 8%;
  }

  .rotated-line-left,
  .rotated-line-right {
    width: 1px;
    height: 150px;
    background: #000;
    position: absolute;
  }

  .rotated-line-left {
    top: -2.8%;
    left: 8.35%;
    transform: rotate(-45deg);
  }

  .rotated-line-right {
    transform: rotate(45deg);
    top: -2.8%;
    right: 4.35%;
  }
}

.p2 {
  font-size: 20px;
  font-family: "Poppins Light", sans-serif;
  color: var(--primary-blue);
  font-weight: 300;
  line-height: 1.5;
  margin: 20px 0;
}

.p2-white {
  font-size: 20px;
  font-family: "Poppins Light", sans-serif;
  color: #fff;
  font-weight: 300;
  line-height: 1.5;
}

.p1 {
  font-size: 20px;
  font-family: "Poppins Light", sans-serif;
  color: #fff;
  font-weight: 300;
  line-height: 1.5;
  margin: 40px 0;
}

.h1-bold {
  font-size: 64px;
  font-family: "Poppins Bold 800", sans-serif;
  line-height: 1.2;
  font-weight: 800;
}

.sh2 {
  font-size: 36px;
  font-family: "Poppins Bold 800", sans-serif;
  font-weight: 400;
  line-height: 1;
}

.sh3 {
  font-size: 24px;
  font-family: "Poppins Bold 800", sans-serif;
  font-weight: 600;
  line-height: 1;
}

.blue {
  color: var(--primary-blue);
}

.white {
  color: #fff;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.m-0 {
  margin: 0;
}

.text-center {
  text-align: center;
}

.blocks-blue {
  background: var(--blocks-blue);
}

.cta-contact {
  padding: 120px 0;
  position: relative;

  .container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
    gap: 180px;

    .col {
      h3 {
        font-weight: 400;
        font-family: "Poppins Regular", sans-serif;

        span {
          background: var(--berry-secondary);
        }
      }

      .contact-info {
        display: grid;
        grid-template-columns: 1fr 0.8fr;
        align-items: end;
        gap: 35px;
        margin-bottom: 20px;

        figure {
          width: 100%;
          height: 224px;
          position: relative;

          .img-bg {
            width: 110%;
            height: 180px;
            background: #c4def9;
            bottom: 0;
            left: 0;
            position: absolute;
            z-index: -1;
          }

          img {
            margin-left: 5%;
            object-fit: contain;
          }
        }

        .contact {
          h4 {
            font-size: 28px;
            font-family: "Poppins Bold 800", sans-serif;
            font-weight: 600;
            color: var(--primary-blue);
            line-height: 1;
            margin-bottom: 24px;
            max-width: 144px;
          }

          a {
            color: var(--blocks-blue);
            font-size: 16px;
            font-family: "Poppins SemiBold", sans-serif;
          }

          a:hover {
            color: var(--blocks-blue);
          }
        }
      }

      a {
        width: 100%;
      }
    }
  }

  &.cta-default {
    padding: 200px 0 250px 0;

    .container {
      .col {
        position: relative;
        height: 100%;

        .sm-paper {
          position: absolute;
          width: 70px;
          height: 70px;
          z-index: 2;

          &.first {
            bottom: 10%;
            left: 40%;
            transform: translateX(-50%) rotate(-33deg);
            width: 90px;
            height: 90px;
          }

          &.second {
            right: 0;
            bottom: 10%;
            width: 140px;
            height: 140px;
            transform: rotate(90deg);
          }

          &.third {
            left: 10%;
            top: -10%;
            width: 130px;
            height: 130px;
            transform: rotate(-70deg);
          }
        }

        .cta-main {
          position: absolute;
          right: 10%;
          z-index: 1;
        }

        .typewriter {
          position: absolute;
          left: -28%;
          bottom: 10%;
          z-index: 1;
        }

        .cta-vector {
          position: absolute;
          z-index: 0;
          top: 7%;
          left: -15%;
          height: 70%;
        }

        .circle {
          position: absolute;
          left: 0;
          bottom: 10%;
          width: 180px;
          height: 180px;
          border-radius: 50%;
          background: #2e6bbf;
          mix-blend-mode: hard-light;
          z-index: 3;
        }

        .drawing {
          position: absolute;
          z-index: 0;

          &.first {
            top: -7%;
            left: 0;
            z-index: -2;
            width: 90%;
          }

          &.second {
            top: 30%;
            right: 20%;
            width: 100%;
            transform: rotate(-20deg);
          }
        }

        .dark-blue-btn {
          width: fit-content;
          margin-top: 48px;
        }

        &:nth-child(2) {
          margin-top: 50px;
        }
      }
    }
  }
}

.single-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 959px;
  overflow: hidden;

  .container {
    display: grid;
    grid-template-columns: 0.68fr 1fr;
    align-items: center;
    gap: 24px;

    .projects {
      display: flex;
      gap: 40px;
      width: 120%;
    }
  }
}

.services-section {
  background-color: var(--primary-blue);
  flex-direction: column;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  position: relative;

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-bottom: 88px;

    .services-heading {
      h2 {
        color: var(--off-white);
      }

      h3 {
        color: var(--secondary-blue);
      }
    }

    hr {
      background-color: var(--secondary-blue);
      height: 2px;
      width: 100%;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .services {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 40px;

      .service-item {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .item-heading {
          display: grid;
          grid-template-columns: 0.1fr 1fr 0.1fr;
          gap: 12px;
          align-items: center;

          .service-icon {
            width: 24px;
            height: 24px;
          }

          .service-action {
            width: 24px;
            height: 24px;
            padding: 3px;
            transition: transform 0.3s ease;

            img {
              transition: transform 0.3s ease;
            }

            &:hover {
              img {
                transform: translate(5px, -5px);
              }
            }
          }

          h3 {
            font-family: "Poppins Bold 800", sans-serif;
            font-weight: 600;
            color: #fff;
            font-size: 24px;
            line-height: 1;
          }
        }

        p {
          font-size: 16px;
          color: #fff;
          line-height: 1.5;
          font-family: "Poppins Regular", sans-serif;
          font-weight: 400;
        }
      }
      .service-item:hover .service-action {
        transform: translate(5px, -5px);
      }
      .service-item:hover h3 {
        color: var(--banana);
      }
    }
  }

  &.single-project {
    padding-top: 80px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  &.glossaries-services {
    background: var(--secondary-blue);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-top: 160px;
    margin-top: -80px;

    .container {
      .services-heading {
        h3 {
          color: #1F3A93;
        }

        h2 {
          color: var(--primary-blue);
        }
      }

      .service-item {
        .item-heading {
          h3 {
            color: #1F3A93;
          }

          svg {
            transition: all .2s ease;
          }

          &:hover {
            svg {
              transform: translate(5px, -5px);
            }
          }
        }

        p {
          color: var(--primary-blue);
        }

      }
    }
  }
}

.single-process {
  padding: 80px 0;

  .container {
    width: 100%;

    .heading {
      .section-sub-heading.blue {
        margin-top: 15px;
      }
    }

    .the-process {
      margin-top: 75px;

      .process-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 85px;
        padding: 0 100px;
        gap: 50px;

        .process-illustration {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;

          .shape {
            position: absolute;
            top: 10%;
            left: 0;
            width: 100%;
            height: auto;
            z-index: 1;
          }

          .drawing {
            position: absolute;
            top: 40%;
            left: -10%;
            width: 105%;
            z-index: 0;
          }

          .process-img {
            width: 100%;
            height: auto !important;
            position: relative;
            z-index: 5;
            top: 10%;
            left: 0;
          }

          .blue-circle {
            width: 250px;
            height: 250px;
            background: #3e6ab9;
            opacity: 2;
            mix-blend-mode: hard-light;
            position: absolute;
            z-index: 6;
            bottom: -10%;
            left: 10%;
            border-radius: 50%;
          }

          .yellow-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            left: -5%;
            background: var(--banana);
            z-index: 7;
          }
        }

        .process-content {
          display: grid;
          grid-template-columns: 0.2fr 1fr;
          align-items: center;

          .icon {
            width: 90px;
            height: 65px;
            display: flex;
            padding-right: 40px;
          }

          .process-content__inner {
            border-left: 1px solid var(--primary-blue);
            padding-left: 30px;
            padding-top: 40px;
          }
        }

        &:nth-child(2) {
          .process-illustration {
            .process-img {
              width: 65%;
            }
          }
        }

        &:nth-child(4) {
          margin-bottom: 0px;
          .process-illustration {
            .shape {
              transform: rotate(140deg);
              left: 10%;
              top: 30%;
            }

            .yellow-circle {
              right: 4%;
              left: auto;
              top: 10%;
              z-index: 4;
            }

            .drawing {
              top: 14%;
              left: -2%;
              transform: rotate(4deg);
            }
          }
        }

        &:nth-child(6) {
          .process-illustration {
            .blue-circle {
              top: 10%;
              bottom: auto;
              right: -5%;
              left: auto;
            }

            .shape {
              transform: rotate(-90deg);
              left: -25%;
              bottom: 0;
            }

            .drawing {
              z-index: 4;
              top: 20%;
              right: -5%;
              left: auto;
              transform: rotate(190deg);
            }

            .yellow-circle {
              left: 12%;
              z-index: 4;
            }
          }
        }
      }
    }
  }
}

.hero-container {
  flex-direction: column;
  position: relative;
  height: 959px;
  width: 100%;

  .container {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    width: 100%;

    .yellow-bg {
      position: absolute;
      top: -20px;
      right: 0;
      width: 429px;
      height: 110vh;
      z-index: -1;

      img {
        object-fit: cover;
      }
    }

    .bm-pencil {
      position: absolute;
      right: 0;
      top: 17%;
      z-index: 4;
    }

    .bm-books {
      position: absolute;
      right: 0;
      top: 30%;
      z-index: 4;
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 20px;

      h1 {
        font-size: 60px;
        font-family: "Poppins Bold 800", sans-serif;
        color: var(--primary-blue);
        line-height: 1;
      }

      p {
        font-size: 18px;
        font-family: "Poppins Regular", sans-serif;
        color: var(--primary-blue);
        line-height: 1.5;
        max-width: 530px;
      }

      .btn-primary {
        background-color: var(--banana) !important;
        border: 2px solid var(--banana);
        
        span {
          color: var(--off-white);
        }

        &:hover {
          span {
            color: var(--blocks-blue);
          }
        }

        &::after {
          background-color: var(--off-white) !important;
        }
      }
    }

    .drawings-imgs {
      position: relative;

      .big-circle {
        width: 400px;
        height: 400px;
        background: var(--berry-secondary);
        border-radius: 50%;
        mix-blend-mode: hue;
        position: absolute;
        bottom: -30px;
        left: 100px;
      }

      .small-circle {
        width: 104px;
        height: 104px;
        background: var(--berry-secondary);
        border-radius: 50%;
        mix-blend-mode: hue;
        position: absolute;
        top: -10px;
        right: 135px;
      }

      .drawing {
        position: absolute;
        z-index: 0;
        top: -130px;
        right: 0;
      }

      .bm-typewriter {
        width: 80%;
        position: absolute;
        bottom: -130px;
        left: -50px;
      }

      .bm-globe {
        position: relative;
        left: -50px;
        top: -40px;
      }
    }
  }

  &.agentur-hero {
    .agentur-img-one {
        right: 10%;
    }

    .agentur-hero-form {
        z-index: -3;
    }

    .content {
        .a-heading {
            font-size: 64px;
            line-height: 1.2;
        }
    }

    .drawings-imgs {
        .a-big-circle {
            bottom: auto;
            left: 2%;
            top: -40%;
            mix-blend-mode: multiply;
            z-index: -1;
        }

        .agentur-d {
            top: 0;
            right: 45%;
        }

        .dw {
            bottom: -60%;
            top: auto;
            right: 0;
            z-index: -2;
        }

        .notebook {
            z-index: -1;
            width: 60%;
            left: 5%;
            bottom: -160px;
        }

        .open-banana {
            position: absolute;
            bottom: -70%;
            right: -5%;
        }
    }

    &.reference-hero {
        .bm-pencil {
            top: 17%;
            right: 15%;
        }

        .notebook {
          bottom: -80px;
        }

        .agentur-d {
          top: 17%;
          right: 50%;
        }

        .open-banana {
          bottom: -80px;
          z-index: -2;
        }
    }

  }
  &.glossary-hero {

    .big-circle {
      background: var(--banana) !important;
      mix-blend-mode: unset !important;
      left: 38% !important;
      bottom: -40% !important;
    }

    .small-circle {
      background: var(--primary-blue) !important;
      mix-blend-mode: color !important;
      right: auto !important;
      left: 30% !important;
      width: 180px !important;
      height: 180px !important;
      z-index: 4 !important;
    }

    .drawing {
      top: 70% !important;
      right: auto !important;
    }

    .a, .c, .e {
      font-size: 350px;
      color: var(--berry-secondary);
      font-family: "Poppins Regular", sans-serif;
      position: absolute;
      z-index: -1;
    }

    .a {
      top: -50%;
    }

    .c {
      left: 20%;
      bottom: -100%;
    }

    .e {
      right: 0;
      top: -70%;
    }
  }

}

.hero-services {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;

  a {
    font-size: 16px;
    font-family: "Poppins SemiBold", sans-serif;
    color: var(--primary-blue);
    font-weight: 600;
    line-height: 1.2;
    padding: 8px 20px;
    background: #fff;
    border-radius: 8px;
  }
  a:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
}

.hero-home-mobile {
  display: none;
}

.pb-1 {
  padding-bottom: 250px;
}

.pb-2 {
  padding-bottom: 100px;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
}

.cta-beige {
  background: var(--off-white);
  padding: 120px 0 !important;
  border-radius: 30px;
  margin-top: 80px;

  .container {
    padding: 0 30px;
  }
}

.border-b-blue {
  padding-bottom: 80px;
  margin-bottom: 80px;
  border-bottom: 4px solid var(--secondary-blue);
}

.mt-40 {
  margin-top: 40px;
}

.sm-gap {
  gap: 10px !important;
}

.relative {
  position: relative;
}

  .feat-project {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    background-color: var(--secondary-blue);
    padding: 42px 40px;
    border-radius: 12px;
    overflow: hidden;

    .project-content {
      display: flex;
      flex-direction: column;
      justify-content: center;

      h3 {
        font-size: 38px;
        font-family: "Poppins Bold 800", sans-serif;
        line-height: 1;
        color: var(--primary-blue);
        margin-bottom: 12px;
      }

      h4 {
        font-size: 22px;
        font-family: "Poppins SemiBold", sans-serif;
        line-height: 1;
        color: var(--primary-blue);
      }

      p {
        font-family: "Poppins Light", sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: var(--primary-blue);
        margin: 16px 0;
      }
    }
    
    .project-img-wrapper {
      position: relative;

      .project-featured-img {
        position: relative;
        z-index: 2;
        max-width: 450px;
        width: 100%;
        height: 100%;
      }

      .project-img-attr {

        .big-circle {
          width: 300px;
          height: 300px;
          background: var(--berry-secondary);
          border-radius: 50%;
          position: absolute;
          top: 30%;
          right: 35%;
          z-index: 0;
        }

        .small-circle {
          width: 85px;
          height: 85px;
          background: var(--berry-secondary);
          border-radius: 50%;
          position: absolute;
          top: 2%;
          right: 40%;
          z-index: 0;
        }

        .drawing {
          position: absolute;
          top: -23%;
          right: 10%;
          z-index: 1;
          height: 150%;
        }
      }
    }

    &:nth-child(2n) {
      .project-content {
        order: 2;
      }

      .project-img-wrapper {
        order: 1;
      }
    }
  }

.contact-form {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 0 200px 0 !important;

  &.h-1200 {
    padding: 100px 0 120px 0 !important;
  }

  .container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: start;
    gap: 24px;

    .content {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      h2 {
        color: var(--primary-blue);
        margin-bottom: 10px;
        text-align: left;
      }

      p {
        font-size: 32px;
        font-family: "Poppins Regular", sans-serif;
        font-weight: 400;
        line-height: 1;
        color: var(--primary-blue);
        margin-bottom: 50px;
        text-align: left;
      }

      .col {
        height: 307px;
        width: 100%;

        .cta-vector {
          left: 0;
          width: 100%;
          height: 80%;

          img {
            width: 100%;
          }
        }

        .typewriter {
          left: 0;
          bottom:0;
        }

        .drawing.first {
          top:0;
        }

        .drawing.second {
          right: 0;
          top: 15%;
        }

        .circle {
          left: 20%;
          bottom: 0;
        }
      }
    }

    .contact-form {
      margin: 0;
      padding: 0 !important;

      .elementor-form {
        input {
          padding: 8px 12px;

          &::placeholder, &::-webkit-input-placeholder {
            color: var(--primary-blue);
            opacity: 1;
          }

          &[type="checkbox"] {
            color: var(--primary-blue);
            accent-color: var(--primary-blue);
            cursor: url("./assets/icons/banana-cursor.svg"), auto;
            padding: 0 10px;
            width: 30px;
          }
        }

        textarea {
          resize: vertical;

          &::placeholder {
            opacity: 1;
          }
        }

        .elementor-field-option {
          display: flex;
          gap: 14px;
          margin: 10px 0;

          label {
            line-height: 1.5;
            font-size: 14px;
            cursor: url(./assets/icons/banana-cursor.svg), auto;
          }
          label:hover {
            color: var(--banana);
          }
        }
      }
    }
  }
}

.contact-map {
  background: var(--primary-blue);
  padding: 80px 0;
  position: relative;

  .container {
    width: 100%;
    display: grid;
    grid-template-columns: .6fr 1fr;
    justify-content: center;
    gap: 10px;
    border-bottom: 4px solid var(--secondary-blue);
    border-radius: 2px;
    padding-bottom: 80px;

    .contact-info-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 60px;

      .heading {
        position: relative;

        h2 {
          font-family: "Poppins Bold 800", sans-serif;
          font-size: 64px;
          color: var(--secondary-blue);
          font-weight: 800;
          line-height: 1.2;
        }

        .drawing {
          position: absolute;
          width: 70%;
          top: 40%;
          left: -10%;
          transform: rotate(-10deg);
        }
      }

      .contact-info {
        display: flex;
        flex-direction: column;
        margin-top: 80px;

        .item {
          color: var(--off-white);
          font-size:20px;
          line-height: 1.5;
          font-family: "Poppins Regular", sans-serif;
          font-weight: 400;
          width: fit-content;
        }

        .btn-primary {
          margin-top: 40px;
          border: 2px solid var(--secondary-blue);

          span {
            color: var(--secondary-blue);
          }

          &::after {
            background-color: var(--secondary-blue);
          }

          &:hover {
            svg {
              path {
                fill: var(--primary-blue);
                stroke: var(--primary-blue);
              }
            }

            span {
              color: var(--primary-blue);
            }
          }
        }
      }
    }

    .map {
      position: relative;
      margin-right: 60px;

      .map-img {
        max-height: 611px;
        height: 100%;
        width: 100%;
      }

      .location-icon-contact {
        position: absolute;
        top: 35%;
        left: 37%;
        width: 70px;
        height: 90px;
      }

      .address {
        padding: 12px;
        border-radius: 12px;
        background: var(--off-white);
        color: var(--primary-blue);
        position: absolute;
        top: 48%;
        left: 43%;
        max-width: 300px;
        box-shadow: 0 4px 4px -4px #0C0C0D;
        opacity: 1;
      }
    }
  }
}

.single-service-faq {
    background: var(--secondary-blue);
    padding: 80px 0;

    .container {
        width: 100%;

        .faq-heading-wrapper {
            display: grid;
            grid-template-columns: .2fr 1fr .3fr;
            align-items: center;
            column-gap: 24px;
            margin-bottom: 60px;

            svg {
                margin-left: 35px;
            }

            .headline {
                h4 {
                    color: #1F3A93;
                }

                h2 {
                    color: var(--primary-blue);
                }
            }
        }

        .faq-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 24px;
            justify-content: center;
            grid-auto-flow: dense;

            .faq-item {
                padding: 48px 40px;
                border-bottom: 1px solid var(--primary-blue);

                .faq-item__header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .faq-question {
                        font-size: 20px;
                        font-family: "Poppins SemiBold", sans-serif;
                        color: var(--primary-blue);
                        line-height:1.2;
                        font-weight: 600;
                        max-width: 80%;
                    }

                    .minus {
                        display: none;
                    }

                    &.active {
                       .plus {
                            display: none;
                        }
                        .minus {
                            display: block;
                        }
                    }
                }

                .faq-answer {
                    font-size: 16px;
                    font-weight: 300;
                    font-family: "Poppins Light", sans-serif;
                    line-height: 1.3;
                    color: var(--primary-blue);
                    padding-top: 0;
                    max-height: 0;
                    overflow: hidden;
                    transition: all .3s ease;

                    &.active {
                        max-height: 100%;
                        padding-top: 20px;
                    }
                }

                &.active {
                    grid-column: 1 / -1;
                }
            }
        }
    }
}

.reference-item {
    background: var(--secondary-blue);
    padding: 40px 24px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;

    svg {
        margin-top: -100px;

      path {
        fill: var(--banana);
      }
    }

    .logo {
        width: 100px;
        height: 50px;

        img {
            mix-blend-mode: difference;
        }
    }

    h3 {
        font-size: 20px;
        line-height: 1.2;
        font-family: "Poppins Light", sans-serif;
        font-weight: 400;
        color: var(--primary-blue);
      font-style: italic;
    }

    h4 {
        font-size: 24px;
        font-family: "Poppins Semibold", sans-serif;
        font-weight: 600;
        color: var(--primary-blue);
        line-height: 1.2;
    }

    .thumbnail {
      max-height: 563px;
      height: 100%;
      width: 100%;

      img {
        border-radius: 24px;
      }
    }

    &:nth-child(2) {
        background: var(--off-white);

        svg {
            path {
                fill: var(--banana);
            }
        }

        .logo {
            img {
                mix-blend-mode: luminosity;
            }
        }
    }
}

.references-section {
  background: var(--primary-blue);
  padding: 80px 0;

  .container {
    width: 100%;
    
    .masonry-inner {
      position: relative;
      height: 100%;
    }

    .reference-item {
      position: absolute;
      /* width: calc(48% - 10px); */
      margin-bottom: 20px;

      &:nth-child(2n) {
        background: var(--berry-secondary);

        svg {
            path {
                fill: var(--secondary-blue);
            }
        }

        .logo {
            img {
                mix-blend-mode: luminosity;
            }
        }
      }
    }
  }
}

.glossaries-list-wrapper {
  margin-top: 40px;

  .glossary-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .letters {
      display: flex;
      align-items: center;
      gap: 23px;
    }

    .nav-letter {
      font-size: 24px;
      font-family: "Poppins Light", sans-serif;
      color: var(--secondary-blue);
      line-height: 1;
      font-weight: 400;

      &.active {
        color: var(--banana);
        font-family: "Poppins SemiBold", sans-serif;
      }
    }

    a[data-letter="all"] {
      text-decoration: underline;
    }
  }

  .glossaries-no-results {
    font-size: 24px;
    color: var(--secondary-blue);
    font-family: "Poppins Regular", sans-serif;
    font-weight: 400;
    line-height: 1;
    margin-top: 80px;
  }

  .letter-group {
    margin-top: 80px;
    padding: 24px;

    .letter-heading {
      color: var(--banana);
      font-size: 24px;
      font-family: "Poppins Regular", sans-serif;
      font-weight: 400;
      line-height: 1;
      margin-bottom: 40px;
    }

    .group {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 40px;

      .item {
        .item-heading {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          h3 {
            color: #fff;
          }

          svg {
            transition: all .2s ease;
          }

          &:hover {
            svg {
              transform: translate(5px, -5px);
            }
          }
        }

        p {
          margin-top: 8px;
          font-family: "Poppins Regular", sans-serif;
          font-size: 16px;
          font-weight: 400;
          line-height: 1.2;
          color: #fff;
        }
      }

    }
    &:nth-child(2n) {
      background: var(--off-white);
      border-radius: 12px;

      .letter-heading {
        color: var(--berry-primary);
      }

      .group {
        .item {
          h3 {
            font-family: "Poppins Bold 800", sans-serif;
            color: var(--primary-blue);
          }
          p {
            color: var(--primary-blue);
          }

          svg {
            path {
              stroke: var(--berry-primary);
            }
          }
        }
      }
    }
  }
}

.policies-page {
  padding: 150px 0 300px 0;

  .container {
    p {
      font-size: 24px;
      font-family: "Poppins Light", sans-serif;
      font-weight: 400;
      line-height: 1.5;
      color: var(--primary-blue);

      .line {
        display: block;
      }

      a {
        color: var(--primary-blue);
        text-decoration: underline;

        &:hover {
          text-decoration: none;
        }
      }
    }

    ul {
      li {
        font-weight: 700;
        font-family: "Poppins SemiBold", sans-serif;
        font-size: 24px;
        color: var(--primary-blue);
        line-height: 1.5;
      }
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 36px;
      font-family: "Signika Regular", sans-serif;
      color: var(--primary-blue);
      font-weight: 500;
      line-height: 1.2;
      margin: 24px 0;
    }

    img {
      border-radius: 24px;
      margin: 20px 0;
    }

    iframe {
      border-radius: 24px;
      margin: 20px 0;
    }

    video {
      border-radius: 24px;
      margin: 20px 0;
    }
  }
}

mark {
  color: var(--banana);
  background: transparent;
}

#barba-loader {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: var(--off-white); /* or white, depending on your design */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.3s ease;

  img {
    width: 400px;
    height: 300px;
  }
}

#barba-loader.hide {
  opacity: 0;
  pointer-events: none;
}



@media screen and (min-width: 2260px) {
  .divider {
    top: -55% !important;
  }
}

@media screen and (min-width: 1921px) {
  .hero-container {
    .hero-container-inner {
      .container {
        .yellow-bg {
          height: 956px;
        }
      }
    }
  }

  .single-hero {
    height: 956px;
  }

  .divider {
    top: -45%;
  }
}

@media screen and (max-width: 1440px) {
  .divider {
    top: -140px;
  }

  .hero-container, .single-hero {
    height: 100vh;
  }
}

@media screen and (max-width: 1366px) {
  header {
    padding: 0 20px;
  }
}

@media screen and (max-width: 1307px) {
  .divider {
    top: -130px;
  }
}



@media screen and (max-width: 1280px) {
  .container {
    padding: 0 20px;
  }

  .divider {
    top: -100px;
  }

  .hero-container {
    .hero-container-inner {
      .container {
        .content {
          .h1-home {
            font-size: 76px;
          }
        }
      }
    }
  }

  .cta-contact {
    .container {
      grid-template-columns: 1fr;
      gap: 40px;

      .col {
        text-align: center;

        .contact-info {
          grid-template-columns: 1fr;
          justify-self: center;
          
          figure {
            width: 180px;
            justify-self: center;
          }

          .contact {
            h4 {
              max-width: 100%;
            }

            .address-contact {
              display: flex;
              flex-direction: column;
              
              a {
                margin: 5px 0;
              }
            }
          }
        }

        .btn-primary {
          width: fit-content;
          justify-self: center;
          margin: 0 auto;
        }
      }
    }

    &.cta-default {
      .container {
        .col:nth-child(2) {
          max-width: 70%;
          width: 100%;
          justify-self: center;
          margin-bottom: 150px;

          .typewriter {
            left: 10%;
            bottom: -80%;
          }

          .cta-main {
            top: 25%;
          }

          .cta-vector {
            width: 100%;
            height: 130%;
            left: 0;
            top: 20%;
          }

          .circle {
            left: 30%;
            bottom: -80%;
          }

          .sm-paper {
            &.first {
              bottom: -80%;
              left: 50%;
            }

            &.second {
              right: 5%;
              bottom: 30%;
            }

            &.third {
              left: 20%;
              top: 0;
            }
          }

          .drawing {
            &.first {
              top: 80%;
              left: 35%;
              width: 50%;
            }

            &.second {
              width: 60%;
              top: 40%;

              svg {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }

  .contact-form {
    .container {
      .content {
        h2 {
          text-align: center;
        }

        p {
          text-align: center;
        }

        .col {
          max-width: 50%;
          margin: 0 auto;
        }
      }
      .elementor {
        padding: 0 300px;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .glossary-hero {
    .container {
      .bm-books {
        width: 50%;
      }

      .drawings-imgs {
        .big-circle {
          width: 350px;
          height: 350px;
          bottom: -20% !important;
        }

        .drawing {
          right: 10% !important;
          width: 50%;

          svg {
            width: 100%;
            height: 100%;
          }
        }

        .a, .c, .e {
          font-size: 250px;
        }

        .a {
          top: -30%;
          left: 15%;
        }

        .e {
          top: -50%;
        }

        .c {
          bottom: -70%;
          left: 40%;
        }
      }
    }
  }
}



@media screen and (max-width: 1159px) {
  .hero-container {
    .hero-container-inner {
      .container {
        .content {
          .h1-home {
            font-size: 65px;
          }

        }

        .drawings-imgs {
          .big-circle {
            width: 300px;
            height: 300px;
          }

          .small-circle {
            right: 30%;
          }
        }
      }
    }
  }

  .feat-project {
    .project-img-wrapper {
      .project-img-attr {
        .drawing {
          height: 150%;
        }
        .big-circle {
          right: 30%;
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  div[data-barba="container"] {
    overflow-x: hidden;
  }

  .hero-container {
    height: 790px;
    .hero-container-inner {
      width: 100%;
      height: 100%;
      .container {
        grid-template-columns: 1fr;
        height: 100%;

        .content {
          order: 2;
          justify-self: center;
          align-items: center;
          text-align: center;
          max-width: 50%;
          margin-top: 0;

          .h1-home {
            font-size: 65px;
          }

          .mt-40 {
            margin-top: 10px;
          }

          p {
            font-size: 18px;
          }
        }

        .sm-gap {
          margin-top: -200px;
        }

        .yellow-bg {
          width: 250px;
          height: 60vh;
          top: 0;
        }

        .bm-pencil {
          width: 28%;
          top: 15%;
        }

        .bm-books {
          right: 0;
          top: 20%;
          width: 35%;
        }

        .drawings-imgs {
          .bm-typewriter {
            width: 40%;
            top: 50%;
            bottom: auto;
          }

          .big-circle {
            top: 80%;
            bottom: auto;
            mix-blend-mode: color;
          }

          .small-circle {
            top: 50%;
            mix-blend-mode: color;
            right: 25%;
          }

          .bm-globe {
            width: 40%;
            left: 55%;
            top: 25%;
          }

          .drawing {
            width: 20%;
            top: 30%;
            right: 10%;
            
            svg {
              width: 100%;
              height: 100%;

            }
          }
        }
      }
    }

    &.agentur-hero {
      .agentur-img-one {
        width: 35% !important;
        right: 0;
      }

      .drawings-imgs {
        .dw {
          top: auto !important;
          bottom: -140%;
          right: 0 !important;
        }

        .big-circle {
          top: 50% !important;
          left: 15%;
        }

        .open-banana {
          bottom: -157%;
          right: -5%;
          width: 20%;
        }

        .notebook {
          width: 35% !important;
          left: -5%;
        }

        .agentur-d {
          width: 17% !important;
          top: 70% !important;
          left: 7%;
          right: auto;
        }
      }
    }

    &.glossary-hero {
      .container {
        grid-template-columns: 1fr;
        height: 100%;
        align-items: center;

        .bm-books {
          right: 50%;
          transform: translateX(50%);
          width: 50%;
          top: 20%;
        }

        .content {
          order: 2;
          text-align: center;
          align-items: center;

          p {
            max-width: 70%;
            margin-top: 20px;
          }
        }

        .drawings-imgs {
          height: 100%;

          .big-circle {
            width: 250px;
            height: 250px;
            top: 60%;
            bottom: auto !important;
            left: 50% !important; 
          }

          .drawing {
            top: 100% !important;
            width: 30%;
            right: 30% !important;
          }

          .small-circle {
            top: 70%;
          }

          .a, .e, .c {
            font-size: 300px;
          }

          .a {
            top: 40%;
            left: 20%;
          }

          .e {
            top: 40%;
            right: 15%;
          }

          .c {
            top: 50%;
            bottom: auto;
          }
        }
      }
    }

    &.reference-hero {
      .hero-container-inner {
        .container {
          .bm-pencil {
            width: 25% !important;
            right: 10%;
          }

          .drawings-imgs {
            .agentur-d {
              top: 75% !important;
              left: 5%;
              width: 15% !important;
            }

            .notebook {
              width: 25% !important;
              left: 0;

            }

            .dw {
              bottom: -30%;
            }

            .open-banana {
              bottom: -32%;
              right: 3%;
            }
          }
        }
      }
    }
  }

  .services-section {
     .container {
      hr {
        margin-bottom: 40px;
      }
      .services {
          grid-template-columns: 1fr 1fr;
          gap: 40px;
      }
    }
  }

  .quadrant-container {
    max-width: 400px;
  }

  .sub-heading {
    font-size: 20px;
  }

  .section-main-heading {
    font-size: 44px;
  }

  .p1 {
    font-size: 18px;
  }

  .section-sub-heading {
    font-size: 20px;
  }

  .section-sub-heading-white {
    font-size: 20px;
  }

  .section-main-heading-white {
    font-size: 40px !important;
  }

  .h1-bold {
    font-size: 50px;
  }

  .p2 {
    font-size: 17px;
  }

  .p2-white {
    font-size: 17px;
  }

  .hero-main-heading {
    font-size: 50px !important;
  }

  .single-service-faq {
    .container {
      .faq-heading-wrapper {
        grid-template-columns: 0.2fr 1fr 0.4fr;
      }
    }
  }

  .cta-contact {
    &.cta-default {
      padding: 100px 0 250px 0;
      .container {
        gap: 80px;
        .col:nth-child(2) {
          max-width: 80%;
        }
      }
    }
  }

  .contact-form {
    height: fit-content;
    .container {
      .content {
        align-items: center;

        .col {
          max-width: 65%;
        }
      }

      .elementor {
        padding: 0 200px;
      }
    }

    &.h-1200 {
      height: 1200px;

      .container {
        .content {
          margin-top: 150px;
        }
      }
    }
  }

  .contact-map {
    .container {
      grid-template-columns: 1fr;
      gap: 80px;
      border: none;
      height: 100%;

      .map {
        margin-right: 0;
        border-bottom: 4px solid var(--secondary-blue);
        border-radius: 2px;
        padding-bottom: 80px;
        
        .map-img {
          justify-self: center;
          width: 65%;
          max-height: 531px;
        }

        .location-icon-contact {
          left: 41%;
        }
      }

      .contact-info-wrapper {
        align-items: center;
        margin-left: 0;

        .heading {
          .drawing {
            width: 200%;
            left: -50%;
            top: 50%;
          }
        }

        .contact-info {
          align-items: center;
        }
      }
    }
  }

  .policies-page {
    .container {
      h2,h3,h4,h5,h6 {
        font-size: 28px;
      }

      p {
        font-size: 18px;
      }

      ul {
        li {
          font-size: 18px;
        }
      }
    }
  }
}

@media screen and (max-width: 932px) {
  .divider {
    top: -90px;
  }
}

@media screen and (max-width: 839px) {
  .divider {
    top: -80px;
  }

  .hero-container {
    .hero-container-inner {
      .container {
        .content {
          max-width: 70%;
          position: relative;
          z-index: 7;
        }
      }
    }
  }

  .cta-contact {
    &.cta-default {
      .container {
        .col:nth-child(2) {
          max-width: 90%;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .divider {
    top: -50px;
  }

  .hero-container {
    .hero-container-inner {
      .container {
        .yellow-bg {
          width: 200px;
          height: 400px;
        }

        .bm-pencil {
          top: 10%;
        }

        .bm-books {
          width: 40%;
        }

        .drawings-imgs {
          .big-circle {
            width: 200px;
            height: 200px;
          }

          .bm-globe {
            left: 55%;
            top: 28% !important;
          }

          .bm-typewriter {
            top: 50%;
          }
        }
      }
    }

    &.glossary-hero {
      .container {
        grid-template-columns: 1fr;
        height: 100%;
        align-items: center;

        .bm-books {
          right: 50%;
          transform: translateX(50%);
          width: 70%;
          top: 20%;
        }

        .content {
          order: 2;
          text-align: center;
          align-items: center;

          p {
            max-width: 70%;
            font-size: 16px;
            margin-top: 20px;
          }
        }

        .drawings-imgs {
          height: 100%;

          .big-circle {
            top: 60%;
            bottom: auto !important;
          }

          .small-circle {
            top: 70%;
          }

          .a,.e,.c {
            font-size: 250px;
          }

          .a {
            top: 50%;
            left: 12%;
          }

          .e {
            top: 40%;
            right: 10%;
          }

          .c {
            top: 70%;
            bottom: auto;
          }
        }
      }
    }

    &.agentur-hero {
      .drawings-imgs {
        .agentur-d {
          top: 75% !important;
        }

        .dw {
          bottom: -80% !important;
        }

        .open-banana {
          bottom: -87% !important;
        }
      }
    }

    &.reference-hero {
      .hero-container-inner {
        .container {
          .bm-pencil {
            width: 30% !important;
          }

          .drawings-imgs {
            .notebook {
              width: 25% !important;
              left: -5%;
            }

            .agentur-d {
              width: 15% !important;
              left: 0;
              top: 70% !important;
            }

            .dw {
              bottom: -30% !important;
            }

            .open-banana {
              bottom: -30% !important;
            }
          }
        }
      }
    }
  }

  .cta-contact {
    &.cta-default {
      .container {
        .col:nth-child(2) {
          max-width: 100%;
        }
      }
    }
  }

  .section-sub-heading {
    font-size: 24px;
  }

  .h1-bold {
    font-size: 55px;
  }

  .single-hero {
    height: 790px;
    .container {
      grid-template-columns: 1fr;

      .content {
        text-align: center;
        padding: 0 20px;

        .btn-primary {
          justify-self: center;
          margin: 0 auto;
        }
      }

      .projects {
        display: none;
      }
    }
  }

  .single-process {
    .container {
      .the-process {
        .process-item {
          grid-template-columns: 1fr;
          row-gap: 120px;
        }
      }
    }
  }

  .single-service-faq {
    .container {
      .faq-heading-wrapper {
        grid-template-columns: 1fr;
        row-gap: 20px;
        text-align: center;
        margin-bottom: 40px;

        .heading-icon {
          max-width: 20%;
          justify-self: center;
        }

        .btn-primary {
          justify-self: center;
          margin: 0 auto;
        }
      }

      .faq-list {
        grid-template-columns: 1fr;
      }
    }
  }

  .contact-form {
    height: fit-content;
    .container {
      .content {
        margin-top: 0;

        .h1-bold {
          text-align: center;
        }

        .col {
          max-width: 80%;

          .btn-primary {
            margin: 0 auto;
            justify-self: center;
          }
        }
      }

      .elementor {
        padding: 0 100px;
      }
    }

    &.h-1200 {
      height: 1200px;

      .container {
        .content {
          margin-top: 150px;
        }
      }
    }
  }

  .references-section {
    .container {
      .masonry-inner {
        .reference-item {
          margin-bottom: 80px;

          .thumbnail {
            height: 473px;
            max-height: 473px;

            img {
              object-fit: cover;
            }
          }
        }
      }
    }
  }

  .mobile-projects {
    display: block;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0 auto;
    padding: 0;
    position: relative;
    height: 260px;
  }

  .mobile-projects .swiper-container {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    overflow: visible;
    position: relative;
  }

  .mobile-projects .swiper-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
  }

  .mobile-projects .swiper-slide {
    width: 75vw !important;
    max-width: 320px;
    min-width: 220px;
    margin-right: 16px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 220px;
    overflow: hidden;
    transition: box-shadow 0.2s;
  }

  .mobile-projects .swiper-slide:last-child {
    margin-right: 0;
  }

  .mobile-projects .project-img {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .mobile-projects .project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .mobile-projects .project-name {
    font-size: 16px;
    font-family: "Poppins SemiBold", sans-serif;
    font-weight: 700;
    color: var(--primary-blue);
    text-align: center;
    margin: 12px 0 0 0;
    padding: 0 8px;
    line-height: 1.2;
    flex: 1 1 auto;
    background: none;
  }
}

@media screen and (max-width: 500px) {
  div[data-barba="container"] {
    overflow-x: hidden;
  }

  .quadrant-container {
    max-width: 100%;

    .quadrant {
      width: 81px;
      height: 81px;
    }
  }

  .container {
    padding: 0 20px;
  }

  .divider {
    width: 170%;
    left: -50%;
  }

  .hero-main-heading {
    font-size: 35px !important;
  }

  .section-sub-heading {
    font-size: 16px;
    line-height: 1.5;
  }

  .section-main-heading {
    font-size: 36px;
    line-height: 1.3;
  }

  .hero-services {
    justify-content: center;
    gap: 8px;

    a {
      font-size: 16px;
      padding: 6px 12px;
    }

  }

  .hero-container {
    
    .hero-container-inner {
      .container {

        .yellow-bg {
          width: 220px;
        }

        .bm-pencil {
          width: 45%;
          top: 10%;
        }

        .bm-books {
          width: 90%;
          right: 0;
        }

        .content {
          max-width: 100%;
          gap: 20px;

          .h1-home {
            font-size: 32px;
          }

          p {
            font-size: 16px;
          }
        }

        .sm-gap {
          margin-top: -200px;
        }

        .drawings-imgs {
          padding-top: 200px;

          .bm-typewriter {
            width: 80%;
            top: 34%;
            left: -25%;
          }

          .drawing {
            width: 75%;
            top: 7%;
            right: 5%;
          }

          .big-circle {
            width: 230px;
            height: 230px;
            left: -5%;
            top: 34%;
            mix-blend-mode: color;
          }
          
          .small-circle {
            width: 58px;
            height: 58px;
            top: 27%;
            right: 25%;
            mix-blend-mode: color;
          }

          .bm-globe {
            width: 110%;
            left: -20%;
            top: -10% !important;
          }
        }
      }
    }

    &.agentur-hero {
      .content {
        .a-heading {
          font-size: 32px;
        }
      }

      .agentur-img-one {
       top: 14% !important;
       width: 65% !important;
     }
      .drawings-imgs {
        .agentur-d {
          width: 45% !important;
          top: 30% !important;
          left: -1%;
        }

        .notebook {
          width: 80% !important;
          top: 20% !important;
        }

        .dw {
          bottom: -15% !important;
          right: -10% !important;
        }

        .open-banana {
          bottom: -20% !important;
          right: -25%;
          width: 50%;
        }
      }
    }

    &.glossary-hero {
      .container {
        .bm-books {
          top: 25%;
        }
        .drawings-imgs {
          .big-circle {
            width: 150px;
            height: 150px;
            top: 80%;
          }

          .small-circle {
            width: 90px !important;
            height: 90px !important;
            top: 80%;
            left: 25% !important;
          }

          .drawing {
            top: 95% !important;
            width: 70%;
            right: 20% !important;
          }


          .a, .c, .e {
            font-size: 200px;
          }

          .c {
            top: 70%;
            left: 30%;
          }

        }
      }
    }

    &.reference-hero {
      .hero-container-inner {
        .container {
          .bm-pencil {
            width:60% !important;
            right: 0;
            top: 10% !important;
          }

          .drawings-imgs {
            .notebook {
              width: 45% !important;
              left: 0;
              top: 30% !important;
            }

            .agentur-d {
              width: 25% !important;
              top: 40% !important;
              left: 10%;
            }

            .dw {
              bottom: 15% !important;
              width: 45%;
            }

            .open-banana {
              right: -15% !important;
              width: 45%;
              bottom: 15% !important;
            }
          }
        }
      }
    }

    &.hero-home {
      display: none;
    }
  }

  .hero-home-mobile {
    display: flex;
    height: 550px;

    .container {

      .content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 8px;
        text-align: center;

        .brand-mark {
          width: 108px;
          height: 72px;
        }

        h1 {
          font-size: 40px;
          line-height: 1.2;
          font-family: "Poppins Bold 800", sans-serif;
          font-weight: 800;
          color: var(--primary-blue);
        }

        p {
          color: var(--primary-blue);
          margin: 0;
          font-size: 15px;
        }

        .btn-primary {
          background-color: var(--banana) !important;
          border: 2px solid var(--banana);
          margin-top: 10px;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
          
          span {
            color: var(--off-white);
          }
        }

        .hero-mobile-services {
          display: flex;
          align-items: center;
          gap: 10px;

          a {
            font-size: 16px;
            font-family: "Poppins SemiBold", sans-serif;
            font-weight: 800;
            background: #fff;
            padding: 6px 12px;
            border-radius: 8px;
            color: var(--primary-blue);
          }
        }
      }
    }
  }

  .services-section {
     .container {
       gap: 40px;

      hr {
        margin-bottom: 40px;
      }
      .services {
          grid-template-columns: 1fr;
          gap: 40px;

          .service-item {
            .item-heading {
              h3 {
                font-size: 20px;
              }
            }
          }
      }

      .btn-primary {
        width: 100%;
      }
    }
  }

  .h1-bold {
    font-size: 40px;
  }

  .p2-white {
    font-size: 16px;
  }

  .sub-heading {
    font-size: 16px !important;
  }

  .p1 {
    font-size: 16px;
    margin: 20px 0;
  }

  .sh2 {
    font-size: 30px;
  }

  .pb-1 {
    padding-bottom: 150px;
  }

  .single-process {
    .container {
      .the-process {
        .process-item {
          padding: 0;

          .process-content {
            .process-content__inner {
              padding-top: 20px;
            }

          }
          .process-illustration {
            .blue-circle {
              width: 150px;
              height: 150px;
            }
          }
        }
      }
    }
  }

  .reference-item {
    h3 {
      font-size: 20px;
    }

    h4 {
      font-size: 20px;
    }

    svg {
      width: 100px;
      height: 70px;
      margin-top: -80px;
    }

    .thumbnail {
      height: 300px !important;
      max-height: 300px !important;
    }
  }

  .single-service-faq {
    .container {
      .faq-list {
        grid-template-columns: 1fr;

        .faq-item {
          padding: 32px 0;

          .faq-item__header {
            .faq-question {
              font-size: 18px;
            }
          }
        }
      }
    }
  }

  .featured-posts {
    grid-template-columns: 1fr !important;
  }

  .cta-contact {
    &.cta-default {
      padding: 100px 0 180px 0;
      .container {

        .col:nth-child(2) {
          .cta-main {
            right: -5%;
            width: 49%;
            top: 45%;
          }

          .typewriter {
            width: 65%;
            left: -7%;
            bottom: -55%;
          }

          .circle {
            width: 140px;
            height: 140px;
            left: 15%;
            bottom: -50%;
          }

          .drawing {
            &.first {
              left: 20%;
              width: 85%;
            }

            &.second {
              width: 85%;
              top: 55%;
              right: 5%;
            }
          }

          .sm-paper {
            &.first {
              bottom: -45%;
              left: 55%;
              width: 70px;
              height: 70px;
            }

            &.second {
              width: 100px;
              height: 100px;
              right: -5%;
              bottom: 35%;
            }

            &.third {
              left: 0;
              top: 20%;
              width: 90px;
              height: 90px;
            }
          }
        }
      }
    }

    &.h-790 {
      height: fit-content !important;
      padding: 100px 0 0 0 !important;
    }
  }

  .contact-form {
    height: 750px;
    .container {
      .content {
        align-items: center;
        margin-top: 0;

        p {
          font-size: 18px;
        }

        .col {
          max-width: 100%;

          .cta-main {
            width: 45%;
            top: 25%;
            right: 0;
          }

          .typewriter {
            width: 50%;
            left: -8%;
            bottom: 15%;
          }
          
          .circle {
            width: 140px;
            height: 140px;
            bottom: 10%;
          }

          .drawing {
            &.first {
              width: 100%;
              top: 40%;
            }
            &.second {
              width: 70%;
              top: 30%;
              right: 10%;

              svg {
                width: 100%;
                height: 100%;
              }
            }
          }

          .sm-paper {
            &.first {
              width: 50px;
              height: 50px;
              bottom: 20%;
            }

            &.second {
              width: 80px;
              height: 80px;
              right: -10%;
              bottom: 20%;
            }

            &.third {
              width: 70px;
              height: 70px;
              top: 10%;
            }
          }
        }
      }

      .elementor {
        padding: 0;
      }
    }

    &.h-1200 {
      height: 1200px;
      .container {
        .content {
          margin-top: 100px;
        }
      }

    }
  }

  .contact-map {
    .container {
      .map {
        .map-img {
          width: 100%;
        }

        .location-icon-contact {
          left: 35%;
          top: 27%;
          width: 50px;
          height: 60px;
        }

        .address {
          top: 37%;
        }
      }
    }
  }

  .policies-page {
    padding: 100px 0 200px 0;
  }

  .mobile-projects {
    height: 180px;
  }
  .mobile-projects .swiper-slide {
    width: 35vw !important;
    height: 140px;
  }
  .mobile-projects .project-img {
    height: 80px;
  }
  .mobile-projects .project-name {
    font-size: 13px;
    margin-top: 2px;
    padding: 10px 4px;
  }
}

@media screen and (max-width: 390px) {
  .quadrant-container {
    .quadrant {
      width: 74px;
      height: 74px;
    }
  }

  .cta-contact {
    &.cta-default {
      .container {
        .col:nth-child(2) {
          .typewriter {
            width: 55%;
            bottom: -45%;
          }

          .cta-main {
            top: 50%;
          }
        }
      }
    }
  }

  .contact-form {
    &.h-1200 {
      .container {
        .elementor {
          margin-top: -100px;
        }
      }
    }
  }
}


/* HEADER STYLE */
header {
  width: 100%;
  position: fixed;
  top: 40px;
  left: 0;
  z-index: 100;
  transition: top 0.3s ease;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1360px;
    padding: 16px 40px;
    border-radius: 8px;
    backdrop-filter: blur(24px);
    background-color: #f9f9f9cc;

    .logo-wrapper {
      margin-top: 15px;
      width: 200px;
    }

    nav {
      ul {
        display: flex;
        align-items: center;
        gap: 30px;

        li {
          a {
            padding: 10px;
            font-size: 18px;
            color: var(--primary-blue);
            font-family: "Poppins Bold 800", sans-serif;
          }
          a:hover {
          }
        }
      }
    }
  }
}

.header-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 10px;
  z-index: 999;
  left: 0;
  width: 100%;
  padding: 0 20px;
  
  .container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px;
    border-radius: 8px;
    backdrop-filter: blur(24px);
    background-color: #f9f9f9cc;
    box-shadow: 0 4px 20px 0 #0000000D;

    .logo-wrapper {
      margin-top: 15px;
      width: 240px;
    }
  }
}
.mobile-menu {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  background: #ffffff90;
  backdrop-filter: blur(24px);
  transform: translateX(100%);
  transition: all 0.7s ease-in-out;
  padding-top: 20px;

  &.active {
    transform: translateX(0);
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 40px;

    .logo-wrapper {
      margin-top: 30px;
      width: 240px;
    }
  }

  .nav-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 40px;
    gap: 40px;

    a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid var(--primary-blue);

      span {
        font-size: 30px;
        font-family: "Poppins Regular", sans-serif;
        font-weight: 400;
        line-height: 1;
        color: var(--primary-blue);
      }

      svg {
        width: 30px;
        height: 30px;
        transform: translate(0, 0);
        transition: transform 0.3s ease;
      }

      &:hover {
        svg {
          transform: translate(5px, -5px);
        }
      }
    }
  }

  .mobile-menu-footer {
    background: var(--primary-blue);
    padding: 30px 20px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;

    p {
      color: #fff;
      font-size: 20px;
      font-family: "Poppins Regular", sans-serif;
      line-height: 1;
      font-weight: 400;
    }

    a {
      width: fit-content;
    }
  }
}

.hamburger-menu-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 99999;

  span {
    height: 2px;
    width: 100%;
    background: var(--primary-blue);
    opacity: 1;
    transform: translate(0, 0);
    transition: all 0.3s ease;
  }

  &.active {
    span:nth-child(2) {
      opacity: 0;
    }
    span:nth-child(1) {
      transform: translate(0px, 13px) rotate(-45deg);
    }
    span:nth-child(3) {
      transform: translate(0px, -11px) rotate(45deg);
    }
  }
}

@media screen and (max-width: 1024px) {
  .header-mobile {
    display: flex;
  }

  header {
    display: none !important;
  }
}

@media screen and (max-width: 500px) {
  .header-mobile {
    padding: 0 20px;

    .container {
      padding: 12px;

      .logo-wrapper {
        width: 130px;
        margin-top: 8px;
      }

      .hamburger-menu-btn {
        width: 24px;
        height: 24px;
        gap: 5px;

        &.active {
          span:nth-child(1) {
            transform: translate(0px, 7px) rotate(-45deg);
          }

          span:nth-child(3) {
            transform: translate(0px, -7px) rotate(45deg);
          }
        }
      }
    }

    .mobile-menu {
      .mobile-menu-header {
        padding: 10px 20px;

        .logo-wrapper {
          width: 130px;
          margin-top: 8px;
        }

        .hamburger-menu-btn {
          width: 24px;
          height: 24px;
          gap: 5px;

          &.active {
            span:nth-child(1) {
              transform: translate(0px, 7px) rotate(-45deg);
            }

            span:nth-child(3) {
              transform: translate(0px, -7px) rotate(45deg);
            }
          }
        }
      }

      .nav-menu {
        padding: 10px 20px;

        a {
          padding: 10px 20px;
          span {
            font-size: 16px;
          }

          svg {
            width: 18px;
            height: 18px;
          }
        }
      }

      .mobile-menu-footer {
        padding: 40px;
        
        li {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;

          a {
            font-size: 18px;
          }
        }
      }
    }
  }
}

/* FOOTER STYLE */
footer {
    padding: 30px 0 60px 0;
    background: var(--primary-blue);
    position: relative;
  
    .container {
      width: 100%;
      display: grid;
      grid-template-columns: .7fr 1fr;
      align-items: end;
      z-index: 10;
  
      .col {
        h2 {
          color: #fff;
          font-size: 28px;
          font-family: "Poppins Bold 800", sans-serif;
          line-height: 1.3;
          font-weight: 400;
  
          span {
            color: var(--secondary-blue);
          }

          a {
            color: var(--secondary-blue);
            text-decoration: none;
          }
          a:hover {
            color: var(--banana);
          }
        }
  
        nav {
          margin: 20px 0;
  
          ul {
            display: flex;
            align-items: center;
            gap: 24px;
  
            li {
              a {
                font-family: "Poppins Light", sans-serif;
                font-size: 18px;
                font-weight: 400;
                line-height: 1.5;
                color: var(--secondary-blue);
              }
            }
          }
        }
  
        .socials {
          display: flex;
          align-items: center;
          gap: 10px;
  
          a {
            width: 40px;
            height: 40px;
            background: var(--secondary-blue);
            border-radius: 10px;
            padding: 10px;
          }
        }
      }
  
      .col-contact-address {
        .contact-address-wrapper {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
          align-items: center;
          border-bottom: 2px solid var(--secondary-blue);
          padding-bottom: 20px;
  
          .contact-info {
            display: flex;
            align-items: center;
            gap: 17px;
  
            .phone-icon {
              width: 37px;
              height: 37px;
            }
  
            .contact {
              display: flex;
              flex-direction: column;
              gap: 10px;
  
              a {
                font-family: "Poppins Bold 800", sans-serif;
                font-size: 18px;
                color: var(--off-white);
                line-height: 1;
                font-weight: 300;
              }
            }
          }
  
          .address-info {
            display: flex;
            align-items: center;
            gap: 17px;
  
            .location-icon {
              width: 37px;
              height: 37px;
            }
  
            a {
              font-family: "Poppins Bold 800", sans-serif;
              font-size: 18px;
              color: var(--off-white);
              line-height: 1.5;
              font-weight: 300;
            }
          }
        }
  
        nav {
          margin-top: 20px;
  
          ul {
            display: flex;
            align-items: center;
            gap: 24px;
  
            li {
              a {
                font-family: "Poppins Light", sans-serif;
                font-size: 18px;
                font-weight: 400;
                line-height: 1.5;
                color: var(--secondary-blue);
              }
            }
          }
        }
      }
  
    }
  }

  @media screen and (min-width: 2407px) {
    footer {
      .dynamic-divider {
        top: -85% !important;
      }
    }
  }

  @media screen and (min-width: 2128px) and (max-width:2406px ){
    footer {
      .dynamic-divider {
        top: -75% !important;
      }
    }
  }

@media screen and (min-width: 2015px) and (max-width: 2127px) {
  footer {
    .dynamic-divider {
      top: -65% !important;
    }
  }
}


@media screen and (min-width: 1818px) and (max-width: 2014px) {
  footer {
    .dynamic-divider {
      top: -60%;
    }
  }
}

@media screen and (min-width: 1644px) and (max-width: 1817px) {
  footer {
    .dynamic-divider {
      top: -55%;
    }
  }
}

@media screen and (max-width: 1081px) {
  footer {
    .container {
      grid-template-columns: 1fr;
      gap: 40px;

      .col {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        padding-bottom: 40px;
      }

      .col-contact-address {
        .contact-info, .address-info {
          justify-content: center;
        }
      }

      nav {
        justify-self: center;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  footer {
    padding: 80px 0 60px 0;

    .container {
      .col-contact-address {
        .contact-address-wrapper {
          grid-template-columns: 1fr;
        }
      }
    
    }
  }
}

@media screen and (max-width: 500px) {
  footer {
    .container {
      .col {
        border-bottom: 2px solid var(--secondary-blue);
        padding-bottom: 0;

        h2 {
          font-size: 20px;
        }

        nav {
          order: 2;
          ul {

            li {
              a {
                font-size: 16px;
              }
            }
          }
        }

        .socials {
          margin-top: 40px;
          a {
            width: 41px;
            height: 41px;
          }
        }
      }
      .col-contact-address {
        .contact-address-wrapper {

          .contact, .location {
            align-items: center;
          }

          .contact-info, .address-info {
            display: flex;
            flex-direction: column;

            figure {
              width: 24px !important;
              height: 24px !important;
            }

            a {
              font-size: 16px !important;
              display: flex;
              text-align: center;
            }
          }
        }

        nav {
          ul {
            justify-content: center;
            li {
              a {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
}

/* HOMEPAGE */
 .project-section-home {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
  
    .container {
      width: 100%;
  
      .section-heading {
        .section-main-heading {
          color: var(--primary-blue);
        }
      }

      .featured-projects {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-top: 40px;

        img {
          border-radius: 24px;
        }
      }
    }
  }
  
  .about-section-home {
    padding: 187px 0;
    background:rgba(249, 249, 249, 0.5);
    position: relative;
    overflow: hidden;
  
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
  
      .about-content {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .section-main-heading {
          margin-top: 10px;
          line-height: 1.3;
          color: var(--primary-blue);
        }
  
        .about-desc {
          font-size: 16px;
          margin: 10px 0;
          font-family: "Poppins Regular", sans-serif;
          line-height: 1.5;
          color: var(--primary-blue);
        }
      }
  
      .about-feat-img {
        position: relative;
  
        .about-circle {
          width: 318px;
          height: 318px;
          background: var(--blocks-blue);
          mix-blend-mode: color;
          border-radius: 50%;
          position: absolute;
          top: 10%;
          right: 10%;
        }
      }
    }
  }
  
  .cta-home {
    flex-direction: column;
    position: relative;
    background: var(--berry-secondary);
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    padding: 80px 0;
    overflow: hidden;
  
    .container {
      width: 100%;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
  
      .cta-content {
        margin-bottom: 150px;
        max-width: 500px;

        h2 {
          font-family: "Poppins Bold 800", sans-serif;
          font-size: 38px;
          font-weight: 900;
          line-height: 1.3;
          color: var(--primary-blue);
        }
  
        p {
          font-family: "Poppins Regular", sans-serif;
          font-size: 16px;
          font-weight: 400;
          line-height: 1.5;
          color: var(--primary-blue);
          margin: 0 0 20px 0;
        }
      }
  
      .cta-illustration {
        position: relative;
  
        .bm-speaking {
          position: absolute;
          bottom: -15%;
          right: -15%;
          z-index: 1;
          width: 110%;
          height: 100%;
        }
  
        .lamp {
          position: absolute;
          bottom: -15%;
          left: -42%;
          z-index: 1;
          max-width: 500px;
          width: 100%;
          height: 100%;
        }
  
        .lamp-light {
          position: absolute;
          max-width: 523px;
          width: 100%;
          height: 100%;
          bottom: -47.5%;
          left: -7.5%;
          z-index: 2;
          opacity: 0;
        }
  
        .lamp-light.lamp-flicker {
            animation: flickerOn 1.8s ease infinite;
        }
  
        .yellow-circle {
          width: 800px;
          height: 800px;
          border-radius: 50%;
          background: var(--banana);
          position: absolute;
          bottom: -90%;
          left: -20%;
          z-index: 0;
        }
      }
    }
  }

@media screen and (max-width: 1280px) {
  .cta-home {
    .container {
      .cta-illustration {
        .lamp-light {
          left: -2%;
        }
      }
    }
  }
}

@media screen and (max-width: 1159px) {
  .cta-home {
    .container {
      .content {
        h2 {
          font-size: 50px;
        }
      }

      .cta-illustration {

        .bm-speaking {
          height: 75%;
        }

        .lamp {
          height: 80%;
        }

        .lamp-light {
          bottom: -23.6%;
          height: 60%;
          left: -11%;
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .project-section-home {
    .container {
      .featured-projects {
        .feat-project {
          grid-template-columns: 1fr;

          .project-content {
            order: 2;
          }

          .project-img-wrapper {
            justify-self: center;

            .project-img-attr {
              .drawing {
                right: -10%;
                top: -30%;
              }

              .big-circle {
                right: 35%;
              }

              .small-circle {
                right: 30%;
              }
            }
          }
        }
      }
    }
  }

  .about-section-home {
    background: #fff;
    padding: 100px 0;

    .container {
      grid-template-columns: 1fr;

      .about-feat-img {
        display: none;
      }
    }
  }

  .cta-home {
    height: 790px;
    padding: 80px 0 0 0;

    .container {
      grid-template-columns: 1fr;
      height: 100%;

      .cta-content {
        text-align: center;
        max-width: 70%;
        justify-self: center;

        h2 {
          font-size: 64px;
        }

        p {
          font-size: 22px;
        }

        .btn-primary {
          justify-self: center;
          margin: 0 auto;
        }
      }

      .cta-illustration {
        .bm-speaking {
          right: 14%;
          width: 45%;
          height: 300px;
        }

        .lamp {
          left: 23%;
          max-width: 350px;
          height: 300px;
        }

        .lamp-light {
          left: 38.6%;
          bottom: -20.2%;
          max-width: 350px;
          height: 200px;
        }

        .yellow-circle {
          width: 500px;
          height: 500px;
          bottom: -170%;
          left: 35%;
        }
      }
    }
  }
}

@media screen and (max-width: 978px) {
  .cta-home {
    .container {
      .cta-illustration {
        .lamp-light {
          left: 39.2%;
        }
      }
    }
  }
}

@media screen and (max-width: 954px) {
    .cta-home {
      .container {
        .cta-content {
          max-width: 90%;
        }
      }
    }
}

@media screen and (max-width: 768px) {
  .project-section-home {
    .container {
      .featured-projects {
        .feat-project {
          .project-content {
            h3 {
              font-size: 38px;
            }
            h4 {
              font-size: 22px;
            }

            p {
              font-size: 18px;
            }
          }

          .project-img-wrapper {
            .project-featured-img {
              max-width: 350px;
            }
            .project-img-attr {
              .big-circle {
                width: 200px;
                height: 200px;
              }

              .small-circle {
                width: 65px;
                height: 65px;                
              }

              .drawing {
                svg {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }

  .cta-home {
    height: 900px;

    .container {
      .cta-content {
        margin-bottom: 50px;
      }

      .cta-illustration {
        .bm-speaking {
          width: 80%;
          right: -5%;
          height: 400px;
        }

        .lamp {
          max-width: 450px;
          left: -5%;
          height: 400px;
        }

        .lamp-light {
          max-width: 450px;
          left: 23%;
          bottom: -28.2%;
          height: 300px;
        }

        .yellow-circle {
          width: 100%;
          height: 700px;
          bottom: -150%;
          left: 0;
        }
      }
    }
  }
}

@media screen and (max-width: 500px) {
  .project-section-home {
    padding: 40px 0;

    .quadrant-container {
      margin-top: 150px;
    }

    .container {
      text-align: center;

      .featured-projects {
        .feat-project {
          padding: 40px 20px;

          .project-content {
            h3 {
              font-size: 24px;
            }

            h4 {
              font-size: 20px;
            }

            p {
              font-size: 14px;
              margin: 24px 0;
              display: none;
            }

            .btn-primary {
              width: 100%;
              margin-top: 20px;

              span {
                font-size: 15px;
              }
            }
          }
        }
      }
    }
  }

  .about-section-home {
    .container {
      .about-content {
        .section-main-heading {
          margin-top: 10px;
        }

        .about-desc {
          font-size: 14px;
          margin: 20px 0;
        }
      }
    }
  }

  .cta-home {
    height: 520px;
    padding: 50px 0 0 0;

    .container {
      .cta-content {
        margin-bottom: 0;

        h2 {
          font-size: 24px;
        }

        p {
          font-size: 16px;
          margin: 10px 0;
        }
      }

      .cta-illustration {
        .bm-speaking {
          right: -15%;
          bottom: -5%;
          width: 100%;
          height: 270px;
        }

        .yellow-circle {
          width: 110%;
          height: 400px;
          bottom: -100%;
          left: -5%;
        }

        .lamp {
          max-width: 300px;
          left: -23%;
          height: 270px;
        }

        .lamp-light {
          max-width: 285px;
          left: 13.5%;
          bottom: -13.2%;
          height: 170px;
        }
      }
    }
  }
}

@media screen and (max-width: 390px) {
  .cta-home {

    .container {
      .cta-illustration {
        .yellow-circle {
          height: 340px;
          bottom: -90%;
        }

        .bm-speaking {
          height: 240px;
        }

        .lamp {
          height: 250px;
          left: -30%;
        }

        .lamp-light {
          left: 7%;
          bottom: -8%;
          height: 150px;
        }
      }
    }
  }
}

/* SERVICES TEMPLATE */
.services-page-hero {
    position: relative;
    height: 100vh;
    overflow: hidden;

    .container {
        display: grid;
        grid-template-columns: .68fr 1fr;
        align-items: center;
        gap: 24px;

        .projects {
            display: flex;
            gap: 40px;
            width: 120%;
        }
    }
}

.all-services {
    background: var(--primary-blue);
    padding: 80px 0;
    position: relative;

    .container {
        width: 100%;

        .services-actions {
            display: grid;
            grid-template-columns: 1fr .8fr;
            align-items: center;

            .search-action-services {
                border: 2px solid var(--secondary-blue);
                border-radius: 12px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 20px;

                button {
                    outline: none;
                    border: none;
                    background: transparent;
                }

                input {
                    background: transparent;
                    color: var(--secondary-blue);
                    font-size: 18px;
                    font-family: "Poppins Bold 800", sans-serif;
                    font-weight: 800;
                    line-height: 1;
                    outline: none;
                    border: none;
                    text-align: right;
                    width: 100%;
                    
                    &::placeholder {
                        color: var(--secondary-blue);

                    }
                }
            }
        }

        .services-list {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            row-gap: 100px;
            column-gap: 52px;
            margin-top: 120px;

            .service-item {
                background: #fff;
                padding: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                .service-icon {
                    width: 100%;
                    height: 145px;
                    margin-top: -100px;
                }

                .service-content {
                    margin-top: 40px;

                    .service-heading {
                        display: grid;
                        grid-template-columns: 1fr .1fr;
                        margin-bottom: 8px;

                        h4 {
                            font-size: 24px;
                            font-family: "Poppins Bold 800", sans-serif;
                            font-weight: 600;
                            color: var(--primary-blue);
                            line-height: 1;
                        }

                        a {
                            width: 20px;
                            height: 100%;
                            display: block;
                            
                            img {
                                transition: transform .2s ease;
                            }

                            &:hover {

                                img {
                                    transform: translate(5px, -5px);
                                }
                            }
                        }
                    }

                    p {
                        font-size: 16px;
                        font-family: "Poppins Regular", sans-serif;
                        color: var(--primary-blue);
                        line-height: 1.5;
                        font-weight: 300;
                    }
                }
            }
        }
    }

    &.glossaries {
        border-bottom-left-radius: 80px;
        border-bottom-right-radius: 80px;
        position: relative;
        z-index: 2;
    }
}

@media screen and (min-width: 2376px) {
    .all-services {
        .divider {
            top: -25% !important;
        }

        &.glossaries {
            .divider {
                top: -20% !important;
            }
        }
    }

    .glossary-hero {
        height: 959px !important;
    }

    .contact-map {
        .divider {
            top: -18% !important;
        }
    }

    .h-1200 {
        height: 959px !important;

        .container {
            height: 100% !important;
        }
    }
}
@media screen and (min-width: 1921px) and (max-width: 2375px) {
    .all-services {
        .divider {
            top: -20% !important;
        }
        &.glossaries {
            .divider {
                top: -15% !important;
            }
        }
    }

    .glossary-hero {
        height: 959px !important;
    }

    .contact-map {
        .divider {
            top: -13% !important;
        }
    }

    .h-1200 {
        height: 959px !important;

        .container {
            height: 100% !important;
        }
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .all-services {
        .divider {
            top: -15%;
        }

        &.glossaries {
            .divider {
                top: -12%;
            }
        }
    }
}

@media screen and (max-width: 1100px) {
    .all-services {
        &.glossaries {
            .container {
                .glossaries-list-wrapper {
                    .glossary-nav {
                        .nav-letter {
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    .all-services {
        .container {
            .services-list {
                grid-template-columns: 1fr 1fr;
            }
        }

        &.glossaries {
            .container {
                .glossaries-list-wrapper {
                    .glossaries-list {
                        .letter-group {
                            .group {
                                grid-template-columns: 1fr 1fr;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 978px) {
    .all-services {
        &.glossaries {
            .container {
                .glossaries-list-wrapper {
                    .glossary-nav {
                        flex-direction: column;
                        gap: 30px;

                        .letters {
                            flex-wrap: wrap;
                            justify-content: center;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .all-services {
        &.glossaries {
            .container {
                .services-actions {
                    grid-template-columns: 1fr;
                    gap: 30px;

                    .heading {
                        text-align: center;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 500px) {
    .all-services {
        .container {
            .services-actions {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .services-list {
                grid-template-columns: 1fr;
            }
        }

        &.glossaries {
            .container {
                .glossaries-list-wrapper {
                    .glossaries-list {
                        
                        .letter-group {
                            .group {
                                grid-template-columns: 1fr;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* SERVICE SINGLE */
.single-service-info {
  background: var(--primary-blue);
  position: relative;

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 94px 0;
    align-items: center;

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;

      h2 {
        color: #fff;
        line-height: 1.4;

        span {
          line-height: 1.3;
        }
      }
    }

    .img-wrapper {
      width: 100%;
      height: 592px;

      img {
        border-radius: 20px;
        object-fit: cover;
      }
    }
  }
}

.single-service-accessibility {
  background: var(--primary-blue);
  padding: 80px 0;

  .container {
    width: 100%;
    background: var(--off-white);
    border-radius: 24px;
    padding: 80px;

    .accessibility-items {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      column-gap: 24px;
      margin-top: 80px;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 24px;

        .icon {
          background: var(--berry-secondary);
          padding: 30px;
          border-radius: 20px;
          width: 145px;
          height: 145px;

          img {
            height: 90px;
            width: 100%;
          }
        }

        .title {
          font-family: "Signika SemiBold", sans-serif;
          font-weight: 500;
          font-size: 36px;
          line-height: 1;
          color: var(--primary-blue);
          text-align: center;
        }

        .description {
          text-align: center;
        }
      }
    }
  }
}

.single-service-accessibility-wyntk {
  background: var(--primary-blue);
  padding-bottom: 80px;

  .container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;

    .col-left {
      h2 {
        font-family: "Poppins Bold 800", sans-serif;
        font-weight: 900;
        color: var(--off-white);
        font-size: 64px;
        line-height: 1.2;
        margin-bottom: 24px;
      }

      h3 {
        font-family: "Poppins Regular", sans-serif;
        font-weight: 400;
        color: var(--off-white);
        font-size: 32px;
        line-height: 1.3;
        max-width: 470px;
        width: 100%;
        margin-bottom: 48px;
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: 17px;

        li {
          display: flex;
          align-items: center;
          gap: 40px;
        }
      }
    }

    .col-right {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 40px;
      background: var(--banana);
      border-radius: 24px;

      .info-warning {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        figure {
          width: 128px;
          height: 128px;
        }

        h4 {
          font-family: "Signika SemiBold", sans-serif;
          font-size: 32px;
          color: var(--primary-blue);
          line-height: 1;
          font-weight: 600;
        }
      }

      .info-items {
        display: flex;
        flex-direction: column;
        gap: 24px;

        .item {
          border: 2px solid var(--primary-blue);
          border-radius: 12px;
          width: 100%;
          padding: 24px;

          p {
            font-size: 24px;
            font-family: "Poppins Regular", sans-serif;
            line-height: 1.5;
            color: var(--primary-blue);
            font-weight: 400;
            text-align: center;
          }
        }
      }
    }
  }
}

.single-service-wcag {
  background: var(--primary-blue);
  padding-bottom: 80px;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  position: relative;

  .container {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    width: 100%;

    h2 {
      font-family: "Poppins Regular", sans-serif;
      font-size: 32px;
      color: var(--primary-blue);
      font-weight: 400;
      line-height: 1;
      text-align: center;
    }

    .wcag-items {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 24px;
      margin-top: 40px;

      .item {
        padding: 24px 24px 42px 24px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        text-align: center;

        .title {
          font-size: 96px;
          font-family: "Poppins Bold 800", sans-serif;
          font-weight: 900;
          line-height: 1.2;
          color: var(--primary-blue);
          margin-bottom: 14px;
        }

        h4 {
          font-family: "Signika Regular", sans-serif;
          font-size: 32px;
          font-weight: 500;
          color: var(--primary-blue);
          line-height: 1;
        }
      }
    }
  }
}

.single-service-accessibility-cta {
  background: var(--secondary-blue);
  padding: 160px 0 80px 0;
  margin-top: -80px;

  .container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .col-info {
      max-width: 70%;
      .p1 {
        color: #1f3a93;
      }

      h2 {
        font-family: "Poppins SemiBold", sans-serif;
        font-size: 48px;
        color: var(--primary-blue);
        font-weight: 700;
        line-height: 1.2;
      }

      p {
        font-size: 32px;
        color: var(--primary-blue);
        font-family: "Poppins Regular", sans-serif;
        font-weight: 400;
        line-height: 1;
        margin-top: 10px;
      }
    }
  }
}

.single-service-services {
  padding: 80px 0;
  background: var(--primary-blue);
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;

  .container {
    width: 100%;

    .services-list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      margin-top: 80px;
      row-gap: 80px;
      column-gap: 24px;

      .service-item {
        border-left: 2px solid #fff;
        padding-left: 28px;

        .icon-wrapper {
          background: var(--secondary-blue);
          width: 85px;
          height: 85px;
          border-radius: 50%;
          padding: 20px;
        }

        h3 {
          font-size: 26px;
          font-family: "Poppins Bold 800", sans-serif;
          line-height: 1;
          font-weight: 500;
          color: #fff;
          margin-top: 16px;
        }

        p {
          margin-top: 16px;
        }
      }
    }
  }
}

.service-action {
  transition: transform 0.3s ease;
}

.service-item:hover .service-action {
  transform: translate(5px, -5px);
}

.service-item:hover h4 {
  color: var(--banana)!important;
}

.service-item.kompetenzen:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

.single-service-references {
  background: var(--primary-blue);
  padding: 80px 0;

  .container {
    width: 100%;

    .refs-header {
      h4 {
        font-family: "Poppins Light", sans-serif;
        font-size: 20px;
        font-weight: 300;
        line-height: 1;
        color: var(--secondary-blue);
      }

      h2 {
        color: #fff;
      }

      p {
        color: var(--secondary-blue);
      }
    }

    .references {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: 80px;
      margin-top: 80px;
    }
  }
}

.single-service-projects {
  padding: 80px 0 180px 0;
  background: var(--primary-blue);
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  overflow: hidden;

  .container {
    width: 100%;

    .heading {
      h2 {
        color: #fff;
        margin-bottom: 80px;
      }
    }

    .swiper-container {
      position: relative;

      .swiper-navigation {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: center;
        width: 140px;
        pointer-events: auto;

        button {
          outline: none;
          border: none;
          background: transparent;
          position: relative;
          z-index: 9999;
        }
      }

      .swiper-pagination {
        position: absolute;
        bottom: -80px;
        width: fit-content;
        left: 50%;
        transform: translateX(-50%);

        span {
          width: 11px;
          height: 11px;
          background: #fff;

          button {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: none;
            outline: none;
          }
          &.swiper-pagination-bullet-active {
            background: var(--secondary-blue);
          }
        }
      }
      .swiper-wrapper {
        overflow: visible;
        transition-timing-function: linear;

        .swiper-slide {
          .project-img {
            width: 100%;
            height: 404px;

            img {
              border-top-left-radius: 24px;
              border-top-right-radius: 24px;
              object-fit: cover;
            }
          }

          .project-info {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding: 40px;
            background: var(--off-white);
            border-bottom-left-radius: 24px;
            border-bottom-right-radius: 24px;

            .project-name {
              font-family: "Poppins SemiBold", sans-serif;
              font-weight: 700;
              color: #1c1d1f;
              line-height: 1;
              font-size: 20px;
            }

            p {
              font-size: 16px;
              font-weight: 400;
              font-family: "Poppins Light", sans-serif;
              color: #1c1d1f;
              line-height: 1.5;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }

          &[data-swiper-slide-index="2"],
          &[data-swiper-slide-index="4"] {
            .project-info {
              background: var(--banana);

              .project-name {
                color: #fff;
              }

              p {
                color: #fff;
              }
            }
          }

          &[data-swiper-slide-index="1"],
          &[data-swiper-slide-index="3"],
          &[data-swiper-slide-index="5"] {
            .project-info {
              background: var(--secondary-blue);

              .project-name {
                color: var(--primary-blue);
              }

              p {
                color: var(--primary-blue);
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 2376px) {
    .single-service-info  {
        .divider {
            top: -25% !important;
        }
    }
}
@media screen and (min-width: 1921px) and (max-width: 2375px) {
    .single-service-info  {
        .divider {
            top: -20% !important;
        }
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .single-service-info  {
        .divider {
            top: -15%;
        }
    }
}

@media screen and (max-width: 1280px) {
  .single-service-info {
    .container {
      padding: 94px 20px;
    }
  }
}

@media screen and (max-width: 1024px) {
  .single-service-references {
    .container {
      .references {
        grid-template-columns: 1fr;
        row-gap: 80px;
      }
    }
  }

  .single-service-info {
    .container {
        .img-wrapper {
            height: 452px;
        }
    }
  }

  .single-service-services {
    .container {
        .services-list {
            grid-template-columns: 1fr 1fr;
            
            .service-item {
                .icon-wrapper {
                    width: 65px;
                    height: 65px;
                }

                h3 {
                    font-size: 28px;
                }
            }
        }
    }
  }
}

@media screen and (max-width: 768px) {
    .single-service-info {
        .container {
            grid-template-columns: 1fr;
            text-align: center;
        }
    }

    .single-service-accessibility {
        .container {
            .accessibility-items {
                grid-template-columns: 1fr 1fr 1fr;
                row-gap:40px;
            }
        }
    }

    .single-service-accessibility-wyntk {
        .container {
            grid-template-columns: 1fr;

            .col-left {
                h3 {
                    max-width: 100%;
                }
            }

            .col-right {
                padding: 50px 0;
            }
        }
    }

    .single-service-accessibility-cta {
        .container {
            flex-direction: column;
            gap: 40px;
            text-align: center;
        }
    }
}

@media screen and (max-width: 500px) {
    .single-service-info {
        .container {
          padding: 50px 20px;
          .img-wrapper {
                height: 390px;
            }
        }
    }

    .single-service-services {
      padding: 10px 0 40px 0;
    .container {
        .services-list {
          margin-top: 40px;
            grid-template-columns: 1fr;
            
            .service-item {
                .icon-wrapper {
                    width: 45px;
                    height: 45px;
                    padding: 10px;
                }

                h3 {
                    font-size: 25px;
                }
            }
        }
    }
  }

  .single-service-accessibility {
        .container {
            padding: 40px;
            text-align: center;

            .accessibility-items {
                grid-template-columns: 1fr;
                row-gap:40px;

                .item {
                    .title {
                        font-size: 27px;
                    }
                }

            }
        }
    }

    .single-service-accessibility-wyntk {
        .container {
            grid-template-columns: 1fr;

            .col-left {
                h2 {
                    font-size: 35px;
                }

                h3 {
                    font-size: 23px;
                }
            }

            .col-right {
                padding: 50px 0;

                .info-warning {
                    figure {
                        width: 108px;
                        height: 108px;
                    }

                    h4 {
                        font-size: 24px;
                    }
                }

                .info-items {
                    .item {
                        p {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }

    .single-service-wcag {
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;

        .container {
            h2 {
                font-size: 27px;
            }

            .wcag-items {
                grid-template-columns: 1fr;

                .item {
                    .title {
                        font-size: 80px;
                    }

                    h4 {
                        font-size: 25px;
                    }
                }
            }
        }
    }

    .single-service-accessibility-cta {
        .container {
            .col-info {
                max-width: 100%;

                h2 {
                    font-size: 27px;
                    margin: 20px 0;
                }

                p {
                    font-size: 17px;
                }
            }
        }
    }

    .single-service-projects {
      .container {
        .swiper-container {
          .swiper-wrapper {
            .swiper-slide {
              width: 33%;

              .project-img {
                height: 314px;
              }
            }
          }
        }
      }
    }
}

/* PROJECT SINGLE */
.single-project-gallery-slider {
  background: var(--primary-blue);
  padding: 80px 0 120px 0;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;

  h2 {
    font-family: "Poppins SemiBold", sans-serif;
    text-align: center;
    margin-bottom: 40px;
  }

  .splide__arrows {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;

    button {
      background: none;
      outline: none;
      border: none;

      svg {
        transform: scale(1);
        transition: all 0.2s ease;
      }

      &:hover {
        svg {
          transform: scale(1.05);
        }
      }
    }
  }
}

.single-project-gallery {
  background: #fff;
  padding: 100px 0 110px 0;
  border-radius: 80px;

  .container {
    width: 100%;

    h2 {
      margin-bottom: 60px;
      font-family: "Poppins Bold 800", sans-serif;
      color: var(--primary-blue);
    }

    .gallery {
      display: grid;
      gap: 24px;

      figure {
        max-height: 619px;
        height: 100%;

        img {
          border-radius: 32px;
          object-fit: cover;
        }
      }

      figure:nth-child(1) {
        grid-column: 1 / span 3;
      }

      figure:nth-child(2) {
        grid-column: 1 / span 1;
      }

      figure:nth-child(3) {
        grid-column: 2 / span 2;
      }

      figure:nth-child(4) {
        grid-column: 1 / span 2;
      }
      figure:nth-child(5) {
        grid-column: 3 / span 1;
      }
      figure:nth-child(6) {
        grid-column: 1 / span 1;
      }
      figure:nth-child(7) {
        grid-column: 2 / span 2;
      }
      figure:nth-child(8) {
        grid-column: 1 / span 1;
      }
      figure:nth-child(9) {
        grid-column: 2 / span 1;
      }
      figure:nth-child(10) {
        grid-column: 3 / span 1;
      }
      figure:nth-child(11) {
        grid-column: 1 / span 3;
      }
    }
  }
}

/* BLOGS */
.blog-overview {
  background: #fff;
  padding: 80px 0;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  position: relative;
  margin-top: 300px;

  .container {
    width: 100%;

    .feat-post-wrapper {
      padding: 80px 0;

      .feat-post-info {
        display: grid;
        grid-template-columns: 0.5fr 1fr;
        gap: 24px;

        .feat-post-content {
          padding: 40px;
          background: var(--primary-blue);
          border-radius: 24px;
          display: flex;
          justify-content: space-between;
          flex-direction: column;

          .post-category {
            font-size: 20px;
            color: var(--secondary-blue);
            font-family: "Poppins Regular", sans-serif;
            line-height: 1;
            font-weight: 400;
          }

          .post-info {
            h3 {
              font-family: "Signika SemiBold", sans-serif;
              font-size: 24px;
              font-weight: 600;
              color: #fff;
              line-height: 1.1;
              margin-bottom: 18px;
            }

            .post-date {
              color: var(--off-white);
              font-size: 16px;
              font-family: "Poppins Regular", sans-serif;
              line-height: 1;
              font-weight: 400;
            }
          }
        }

        .thumbnail-wrapper {
          height: 426px;
          width: 100%;

          img {
            border-radius: 24px;
            object-fit: cover;
          }
        }
      }

      .feat-post-cta {
        background: var(--secondary-blue);
        padding: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 24px;
        border-radius: 24px;

        .feat-post-cta-info {
          h2 {
            font-family: "Poppins SemiBold", sans-serif;
            font-weight: 600;
            font-size: 32px;
            line-height: 1.3;
            color: var(--primary-blue);
          }

          h3 {
            font-family: "Poppins Regular", sans-serif;
            font-weight: 400;
            font-size: 32px;
            line-height: 1.3;
            color: var(--primary-blue);
          }

          p {
            font-size: 16px;
            font-family: "Poppins Bold 800", sans-serif;
            font-weight: 700;
            line-height: 1;
            color: var(--primary-blue);
            margin-top: 24px;
          }
        }
      }
    }

    .blog-latest-posts {
      padding-bottom: 80px;
      border-bottom: 4px solid var(--secondary-blue);

      h2 {
        margin-bottom: 40px;
      }

      .latest-posts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
      }
    }

    .blog-featured-posts {
      padding-top: 0px;

      .heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;

        .reset-filter {
          display: flex;
          align-items: center;
          gap: 14px;

          span {
            font-size: 18px;
            font-family: "Poppins Light", sans-serif;
            font-weight: 400;
            color: var(--primary-blue);
            line-height: 1.5;
          }

          svg {
            width: 24px;
            height: 24px;
          }
        }

        .btn-see-all {
          display: flex;
          align-items: center;
          gap: 24px;

          span {
            font-size: 24px;
            font-family: "Poppins Light", sans-serif;
            font-weight: 400;
            color: #1a1a1a;
            line-height: 1;
          }

          svg {
            width: 17px;
            height: 17px;
            transition: transform 0.2s ease;
          }

          &:hover {
            svg {
              transform: translate(5px, -5px);
            }
          }
        }
      }

      .post-filters-wrapper {
        margin-bottom: 40px;

        ul {
          display: flex;
          align-items: center;
          gap: 40px;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          width: 100%;
          scrollbar-width: none; /* For Firefox */
          -ms-overflow-style: none; /* For Internet Explorer and Edge */

          &::-webkit-scrollbar {
            display: none; /* For Chrome, Safari, and Opera */
          }

          a {
            background: var(--off-white);
            padding: 8px 12px;
            border-radius: 12px;
            min-width: 224px; /* Changed from width to min-width */
            text-align: center;
            color: #000;
            font-family: "Poppins Regular", sans-serif;
            font-size: 20px;
            line-height: 1.5;
            font-weight: 400;
            cursor: url("./assets/icons/banana-cursor.svg"), auto;
            transition: color 0.2s ease;

            &:hover {
              background: var(--secondary-blue);
              color: var(--primary-blue);
            }

            &.active {
              background: var(--secondary-blue);
              color: var(--primary-blue);
            }
          }
        }
      }
    }
  }
}

.featured-posts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;

  .post-item {
    .post-thumbnail {
      height: 196px;
    }
  }
}

.breadcrumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 20px;
  font-family: "Poppins Regular", sans-serif;
  color: var(--primary-blue);
  line-height: 1.5;
  font-weight: 400;
  flex-wrap: wrap;

  a {
    color: var(--primary-blue);
  }
}

.post-item {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .post-thumbnail {
    height: 300px;
    width: 100%;
    display: flex;

    img {
      object-fit: cover;
      border-radius: 24px;
    }
  }

  .post-content {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .post-title {
      font-size: 20px;
      font-family: "Poppins Bold 800", sans-serif;
      color: #1c1d1f;
      line-height: 1.2;
      font-weight: 600;
    }

    .post-date {
      font-family: "Poppins Regular", sans-serif;
      font-size: 16px;
      color: var(--secondary-blue);
      line-height: 1;
      font-weight: 400;
    }

    .post-excerpt {
      font-size: 16px;
      font-family: "Poppins Regular", sans-serif;
      color: #2b3036;
      line-height: 1.4;
      font-weight: 400;
    }
  }
}

.single-cat-project {
  position: relative;
  overflow: hidden;
  padding: 90px 0;

  .container {
    width: 100%;

    h2 {
      margin-bottom: 40px;
      color: var(--primary-blue);
    }

    .single-cat-projects {
      .swiper-navigation {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;

        button {
          background: transparent;
          outline: none;
          border: none;

          svg {
            transform: scale(1);
            transition: all 0.2s ease;
          }

          &:hover {
            svg {
              transform: scale(1.05);
            }
          }
        }
      }

      .swiper-wrapper {
        align-items: center;

        .swiper-slide {
          transform: scale(0.9);
          will-change: transform;
          transition: transform 0.1s ease;
          gap: 24px;
          padding-top: 90px;
          padding-bottom: 90px;
          display: grid;
          grid-template-columns: 1fr 1fr;

          .project-img-wrapper {
            height: 367px;
            width: 100%;

            img {
              object-fit: cover;
              border-radius: 24px;
            }

            .project-img-attr {
              .drawing {
                height: 180%;
                top: -40%;
                left: -10%;

                svg {
                  height: 100%;
                }
              }

              .drawing-mobile {
                display: none;
              }
            }
          }

          &.swiper-slide-active {
            transform: scale(1);
          }

          &.even {
            .project-img-wrapper {
              order: 1;
            }

            .project-content {
              order: 2;
            }
          }

          &.odd {
            .project-img-wrapper {
              order: 2;
            }

            .project-content {
              order: 1;
            }
          }
        }
      }
    }
  }
}

.single-post-hero {
  height: auto !important;
  margin: 200px 0 60px 0;

  .container {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    gap: 24px;

    .post-info-wrapper {
      height: auto;
      background: var(--primary-blue);
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 40px;

      .back-btn {
        display: flex;
        gap: 10px;
        align-items: center;

        span {
          color: var(--secondary-blue);
          font-size: 20px;
          font-family: "Poppins Regular", sans-serif;
          font-weight: 400;
          line-height: 1;
        }

        svg {
          width: 24px;
          height: 24px;
        }
      }

      .post-info {
        h1 {
          color: #fff;
          font-size: 32px;
          font-family: "Poppins Bold 800", sans-serif;
          font-weight: 600;
          line-height: 1.2;
          margin: 18px 0;
        }

        .post-date {
          font-size: 18px;
          color: var(--secondary-blue);
        }

        p {
          color: #fff;
          font-size: 18px;
          font-family: "Poppins Light", sans-serif;
          font-weight: 400;
          line-height: 1.5;
        }
      }
    }

    .post-thumbnail {
      height: auto;
      width: 100%;

      img {
        border-radius: 24px;
        object-fit: cover;
      }
    }
  }
}

.post-content-section {
  position: relative;
  background: #fff;
  padding: 80px 0 80px 0;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;

  .container {
    width: 100%;
    position: relative;

    .breadcrumbs {
      margin-bottom: 80px;
      flex-wrap: wrap;
    }

    .post-content__inner {
      display: grid;
      grid-template-columns: 0.4fr 1fr;
      gap: 40px;
      position: relative;
      overflow: visible;

      .sticky-content {
        position: sticky;
        top: 150px;
        height: fit-content;

        .table-of-contents-wrapper {
          background: var(--primary-blue);
          padding: 30px;
          border-radius: 24px;
          margin-bottom: 30px;
          max-height: 444px;

          h3 {
            color: var(--secondary-blue);
            font-size: 24px;
            font-family: "Poppins Bold 800", sans-serif;
            line-height: 1;
            font-weight: 400;
            margin-bottom: 14px;
          }

          .table-of-contents {
            overflow-y: scroll;
            max-height: 300px;
            padding-right: 14px;

            &::-webkit-scrollbar {
              width: 4px;
            }

            &::-webkit-scrollbar-track {
              background: transparent;
            }

            &::-webkit-scrollbar-thumb {
              background-color: white;
              border-radius: 4px;
            }

            &::-webkit-scrollbar-thumb:hover {
              background-color: rgba(255, 255, 255, 0.8);
            }

            /* Firefox Scrollbar (modern support) */
            scrollbar-width: thin;
            scrollbar-color: white transparent;

            ul {
              display: flex;
              flex-direction: column;
              gap: 20px;

              li {
                a {
                  font-size: 16px;
                  color: var(--off-white);
                  font-family: "Poppins Light", sans-serif;
                  font-weight: 400;
                  line-height: 1.5;
                }
                a:hover {
                  color: var(--banana);
                }
              }
            }
          }
        }

        .contact {
          background: var(--off-white);
          padding: 30px;
          border-radius: 24px;

          h3,
          h4 {
            font-size: 24px;
            line-height: 1.5;
            color: var(--primary-blue);
          }

          h3 {
            font-family: "Poppins Bold 800", sans-serif;
            margin-bottom: 0px;
          }

          h4 {
            font-family: "Poppins Regular", sans-serif;
            font-weight: 400;
            margin-bottom: 20px;

            span {
              background: var(--berry-secondary);
            }
          }
        }
      }

      .the_content {
        p {
          font-size: 18px;
          font-family: "Poppins Regular", sans-serif;
          font-weight: 400;
          line-height: 1.5;
          color: var(--primary-blue);

          .line {
            display: block;
          }

          a {
            color: var(--primary-blue);
            text-decoration: underline;

            &:hover {
              text-decoration: none;
            }
          }
        }

        ol {
          li {
            list-style: decimal!important;
          }
        }

        ul, ol {
          margin: 10px 0 10px 30px;

          li {
            font-weight: 700;
            font-family: "Poppins SemiBold", sans-serif;
            font-size: 18px;
            color: var(--primary-blue);
            line-height: 1.5;
            list-style: disc;
          }
        }

        h2,
        h3,
        h4,
        h5,
        h6 {
          font-size: 36px;
          font-family: "Poppins SemiBold", sans-serif;
          color: var(--primary-blue);
          font-weight: 500;
          line-height: 1.2;
          margin: 24px 0;
        }

        img {
          border-radius: 24px;
          margin: 20px 0;
        }

        iframe {
          border-radius: 24px;
          margin: 20px 0;
        }

        video {
          border-radius: 24px;
          margin: 20px 0;
        }
      }
    }
  }
}

@media screen and (min-width: 2376px) {
    .blog-overview {
        .divider {
            top: -10% !important;
        }
    }
}
@media screen and (min-width: 1921px) and (max-width: 2375px) {
    .blog-overview {
        .divider {
            top: -8% !important;
        }
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .blog-overview {
        .divider {
            top: -8%;
        }
    }
}

@media screen and (max-width: 1275px) {
  .single-cat-project {
    height: 120vh;
  }
}

@media screen and (max-width: 1155px) {
  .single-cat-project {
    .container {
      .single-cat-projects {
        .swiper-wrapper {
          .swiper-slide {
            .project-img-wrapper {
              .project-img-attr {
                .drawing {
                  height: 140%;
                  top: -30%;
                }
              }
            }
          }
        }

        .swiper-navigation {
          button {
            svg {
              width: 350px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1090px) {
  .single-cat-project {
    .container {
      .single-cat-projects {
        .swiper-wrapper {
          .swiper-slide {
            .project-img-wrapper {
              .project-img-attr {
                .drawing {
                  height: 110%;
                  top: -30%;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .featured-posts {
    grid-template-columns: 1fr 1fr;

    .post-item {
      .post-content {
        .post-title {
          font-size: 24px;
        }
      }
    }
  }

  .single-cat-project {
    height: 60dvh;

    .container {
      .single-cat-projects {
        .swiper-wrapper {
          .swiper-slide {

            .project-content {
              h3 {
                font-size: 35px;
              }

              h4 {
                font-size: 22px;
              }

              p {
                font-size: 17px;
              }
            }

            .project-img-wrapper {
              height: 307px;
              .project-featured-img {
                max-width: 370px;
              }

              .project-img-attr {
                .big-circle {
                  width: 250px;
                  height: 250px;
                }

                .small-circle {
                  top: -15%;
                  right: 30%;
                }

                .drawing {
                  height: 130%;
                }
              }
            }
          }
        }
      }
    }
  }

  .post-content-section {
    .container {
      .post-content__inner {
        .sticky-content {
          .table-of-contents-wrapper {
            padding: 25px;

            h3 {
              font-size: 28px;
            }
          }

          .contact {
            padding: 25px;

            .btn-primary {
              span {
                font-size: 16px;
              }
            }
          }
        }

        .the_content {
          h2,h3,h4,h5,h6 {
            font-size: 28px;
          }

          p {
            font-size: 18px;
          }

          ul {
            li {
              font-size: 18px;
            }
          }
        }
      }
    }
  }

  .single-post-hero {
    height: 790px;
    .container {
      .post-info-wrapper {
        margin-top: 30px;

        .back-btn {
          gap: 30px;

          svg {
            width: 20px;
            height: 20px;
          }

          span {
            font-size: 18px;
          }
        }

        .post-info {
          h1 {
            font-size: 28px;
          }

          .post-date {
            font-size: 20px;
          }

          p {
            font-size: 16px;
          }
        }
      }

      .post-thumbnail {
        margin-top: 30px;
      }
    }
  }

  .breadcrumbs {
    font-size: 16px;
    line-height: 1;
  }
}

@media screen and (max-width: 978px) {
  .single-cat-project {
    height: 130vh;
    .container {
      .single-cat-projects {
        .swiper-navigation {
          padding-bottom: 80px;
          bottom: -100px;
        }

        .swiper-wrapper {
          .swiper-slide {
            grid-template-columns: 1fr;

            &.even {
              .project-img-wrapper {

                .project-featured-img {
                  margin-top: -30px;
                }

                .project-img-attr {

                  .big-circle {
                    right: 40%;
                    top: 20%;
                  }

                  .small-circle {
                    right: 40%;
                  }

                  .drawing-mobile {
                    top: -20%;
                    left: 49%;
                  }
                }
              }
            }

            &.odd {
              .project-img-wrapper {
                .project-featured-img {
                  margin-top: 20px;
                }

                .project-img-attr {
                  .big-circle {
                    right: 40%;
                    top: 35%;
                  }

                  .small-circle {
                    top: 0;
                    right: 40%;
                  }

                  .drawing-mobile {
                    top: 0;
                    left: 49%;
                  }
                }
              }
            }

            .project-content {
              h3 {
                text-align: center;
              }

              h4 {
                text-align: center;
              }

              p {
                text-align: center;
              }

              .btn-primary {
                justify-self: center;
                margin: 0 auto;
              }
            }

            .project-img-wrapper {
              .project-featured-img {
                justify-self: center;
                margin: 0 auto;
              }

              .project-img-attr {
                .drawing {
                  display: none;
                }

                .drawing-mobile {
                  display: flex;
                  position: absolute;
                  height: 120%;
                  transform: translateX(-50%);

                  svg {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 817px) {
  .blog-overview {
    margin-top: 120px;
    padding: 40px 0;

    .container {
      .feat-post-wrapper {
        .feat-post-info {
          grid-template-columns: 1fr;

          .feat-post-content {
            gap: 30px;
          }
        }

        .feat-post-cta {
          flex-direction: column;
          gap: 40px;

          .feat-post-cta-info {
            text-align: center;
          }
        }
      }

      .blog-featured-posts {
        padding-top: 20px;

        .post-filters-wrapper {
          ul {
            gap: 20px;

            a {
              font-size: 17px;
              min-width: 200px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .single-cat-project {
    height: 100dvh;
    .container {
      .single-cat-projects {

        .swiper-navigation {
          bottom: -110px;
        }
      }
    }
  }

  .single-post-hero {
    height: 790px;
    .container {
      grid-template-columns: 1fr;
      height: 100%;
      gap: 0;

      .post-info-wrapper {
        min-height: 350px;
        height: auto;
        margin-top: 150px;

        .post-info {
          h1 {
            font-size: 30px;
          }

          p {
            font-size: 16px;
          }
        }
      }

      .post-thumbnail {
        height: 300px;
      }
    }
  }

  .post-content-section {
    .container {
      .breadcrumbs {
        margin-bottom: 20px;
      }

      .post-content__inner {
        grid-template-columns: 1fr;

        .sticky-content {
          display: none;

          .contact {
            h4 {
              margin-bottom: 40px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 500px) {
  .single-cat-project {
    height: 900px;

    .container {
      .section-main-heading {
        font-size: 32px;
        text-align: center;
      }
      .section-sub-heading {
        text-align: center;
      }

      .single-cat-projects {
        .swiper-navigation {
          button {
            svg {
              width: 170px;
            }
          }
        }

        .swiper-wrapper {
          .swiper-slide {
            padding: 40px 20px;

            .project-content {
              h3 {
                font-size: 30px;
              }
              h4 {
                font-size: 19px;
              }

              p {
                font-size: 14px;
                margin: 20px 0;
              }

              .btn-primary {
                span {
                  font-size: 16px;
                }
              }
            }

            .project-img-wrapper {
              height: 247px;

              .project-img-attr {
                .big-circle {
                  width: 150px;
                  height: 150px;
                  top: 30% !important;
                }

                .small-circle {
                  width: 45px;
                  height: 45px;
                  top: 5% !important;
                  right: 30% !important;
                }

                .drawing-mobile {
                  height: 120%;
                  width: 100%;
                  top: -5% !important;
                }
              }
            }
          }
        }
      }
    }
  }

  .blog-overview {


    .container {
      .breadcrumbs {
        font-size: 16px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .feat-post-wrapper {
        .feat-post-info {
          .thumbnail-wrapper {
            height: 200px;
          }
        }

        .feat-post-cta {
          .feat-post-cta-info {
            h2, h3 {
              font-size: 25px;
            }
          }
        }
      }

      .blog-latest-posts {
        .section-main-heading {
          text-align: center;
        }

        .latest-posts {
          grid-template-columns: 1fr;
        }
      }

      .blog-featured-posts {
        padding-top: 0;

        .heading {
          flex-direction: column;
          gap: 20px;

          .reset-filter {
            display: none;

            span {
              font-size: 19px;
            }

            svg {
              width: 16px;
              height: 16px;
            }
          }

          .btn-see-all {
            span {
              font-size: 19px;
            }

            svg {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
  }

  .post-item {
    .post-content {
      .post-title {
        font-size: 20px;
      }
    }
  }

  .featured-posts {
    .post-item {
      .post-content {
        .post-title {
          font-size: 20px;
        }
      }
    }
  }

  .single-post-hero {

    .container {

      .post-info-wrapper {
        height: fit-content;
        margin-top: 100px;
        padding: 20px;
        gap: 20px;

        .back-btn {
          span {
            font-size: 16px;
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }

        .post-info {
          h1 {
            font-size: 25px;
          }

          .post-date {
            font-size: 16px;
          }
        }
      }

      .post-thumbnail {
        height: 200px;
        margin-top: -50px;
        display: none;
      }
    }
  }

  .post-content-section {
    padding: 40px 0 80px 0;

    .container {
      .post-content__inner {
        .sticky-content {
          .table-of-contents-wrapper {
            padding: 20px;

            h3 {
              font-size: 25px;
            }
          }

          .contact {
            padding: 20px;

            .btn-primary {
              span {
                font-size: 16px;
              }
            }
          }
        }

        .the_content {
          h2,h3,h4,h5,h6 {
            font-size: 25px;
          }

          p {
            font-size: 16px;
          }

          ul {
            li {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}

/* SLIDERS */
.overview-logos {
  background-color: var(--primary-blue);
  padding-top: 0;
  padding-bottom: 40px;
  flex-direction: column;
  gap: 0;
  position: relative;

  .container {
    width: 100%;

      h2 {
        color: #fff;
        font-family: "Poppins Bold 800", sans-serif;
        font-size: 32px;
        line-height: 1;
        font-weight: 300;
        margin: 10px 0 10px 0;
      }

      h3 {
        color: var(--secondary-blue);
      }

      p {
        color: var(--secondary-blue);
      }
  }

  

  .swiper-container {
    width: 100%;
    height: 100%;
    z-index: 99;

    .swiper-wrapper {
      -webkit-transition-timing-function:linear!important;    
      transition-timing-function:linear!important; 
      position: relative;

      .swiper-slide {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        position: relative;
        overflow: hidden;
        height: 135px;
      }
    }
  }

}

.hero-projects {
  width: 50%;
  height: 100vh;

  .swiper-wrapper {
    display: flex;
    flex-direction: column;
    transition-timing-function: linear !important;

      .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: auto !important;

        .project-img {
          height: 302px;
          width: 100%;
          
          img {
            object-fit: cover;
            border-top-left-radius: 24px;
            border-top-right-radius: 24px;
          }
        }

        h3 {
          padding: 30px 0;
          width: 100%;
          text-align: center;
          font-family: "Poppins SemiBold", sans-serif;
          font-weight: 700;
          border-bottom-left-radius: 24px;
          border-bottom-right-radius: 24px;
        }

        &.odd {
          h3 {
            background: var(--secondary-blue) !important;
            color: var(--primary-blue) !important;
          }
        }

        &.even {
          h3 {
            background: var(--primary-blue) !important;
            color: #fff !important;
          }
        }
      }   
  }

  &.single-project {
    img {
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
    }
  }

  &.hero-projects-down {
    margin-top: -50%;
  }
}

.mobile-projects{
  display: none;
}

.project-gallery {

  .swiper-wrapper {
    overflow: visible;
    padding-bottom: 24px;
    align-items: center;

      .swiper-slide {
        filter: blur(4px);
        will-change: transform;
        transition: all 1s ease;

        .project-img {
          height: 440px;
          width: 100%;

          img {
            border-radius: 24px;
          }
        }
        
        .slide-info {
          opacity: 0;
          margin-top: 32px;
          flex-direction: column;
          gap: 20px;
          
          h3 {
            color: var(--secondary-blue);
            margin-bottom: 10px;
          }
          
          p {
            font-family: "Poppins Light", sans-serif;
            font-weight: 400;
            font-size: 16px;
            line-height: 1.4;
            color: var(--off-white);
          }
        }
        
        &.swiper-slide-active {
          filter: blur(0);

          .project-img {
            height: 525px;
            
            img {
              border-radius: 24px;
            }
          }

          .slide-info {
            opacity: 1;
            
          }
        }
      }
    
  }

  & > .splide__arrows {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
}

@media screen and (max-width: 1280px) {
  .single-project-gallery-slider {
    .splide__arrows {
      button {
        svg {
          width: 450px;
        }
      }
    }
  }
}

@media screen and (max-width: 1123px) {
  .single-project-gallery-slider {
    .splide__arrows {
      button {
        svg {
          width: 400px;
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .single-project-gallery-slider {
    .splide__arrows {
      button {
        svg {
          width: 320px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .overview-logos {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .single-project-gallery-slider {
    .splide__arrows {
      button {
        svg {
          width: 280px;
        }
      }
    }
  }
  
}

@media screen and (max-width: 500px) {
  .hero-projects {
    width: 30%;
    height: 30vh;
  }
  .mobile-projects{
    display: block;

      .swiper-wrapper {
        flex-direction: row;
    }
    .swiper-slide {
      width: 33%;

      .project-img {
        height: auto!important
      }
    }
  }

  .overview-logos {
    .container {
      h2 {
        font-size: 20px;
      }
    }

    &.logos-home {
      padding-bottom: 10px;
      .container {
        h2 {
          display: none;
        }
      }
      .swiper-container {
        margin-top: -50px;
      }
    }
  }

  .single-project-gallery-slider {
    .splide__arrows {
      button {
        svg {
          width: 150px;
        }
      }
    }
  }

  .project-gallery {
    .swiper-wrapper {
      .swiper-slide {
        .project-img {
          height: 230px;
        }

        &.swiper-slide-active {
          .project-img {
            height: 305px;
          }
        }
      }
    }
  }
}

/* AGENTUR */
.agentur-about {
    padding: 80px 0;
    background: var(--primary-blue);
    position: relative;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;

    .container {
        width: 100%;

        h2 {
            font-size: 32px;
            font-weight: 400;
            font-family: "Poppins Regular", sans-serif;
            color: var(--off-white);
            line-height: 1.5;
            text-align: center;
          font-style: italic;
        }

        .counters {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            padding: 80px 0;

            .item {
                flex-direction: column;
                gap:5px;

                h3 {
                    font-family: "Poppins Bold 800", sans-serif;
                    font-size: 64px;
                    color: var(--off-white);
                    line-height: 1.2;
                    font-weight: 800;
                }

                h4 {
                    font-family: "Poppins SemiBold", sans-serif;
                    font-size: 20px;
                    color: var(--off-white);
                    line-height: 1.2;
                    font-weight: 600;
                }

                p {
                    text-align: center;
                    font-size: 20px;
                    font-family: "Poppins Light", sans-serif;
                    color: var(--off-white);
                    line-height: 1.5;
                }
            }
        }

        .about {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;

            .info {
                .p1 {
                  margin-top: 18px;
                  font-size: 20px;
                }
            }

            .process-items {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;

                .item {
                    padding: 18px;
                    border-radius: 12px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    .icon {
                        width: 24px;
                        height: 24px;
                    }

                    .arrow {
                        width: 24px;
                        height: 24px;
                    }

                    h4 {
                        font-size: 20px;
                        font-family: "Poppins SemiBold", sans-serif;
                        color: var(--primary-blue);
                        font-weight: 600;
                        line-height: 1;
                    }

                    p {
                        font-family: "Poppins Regular", sans-serif;
                        font-size: 16px;
                        color: var(--primary-blue);
                        line-height: 1.2;
                        font-weight: 300;
                    }
                }
            }
        }
    }
}

.agentur-blog {
    padding: 80px 0;

    .container {
        h2 {
            color: var(--primary-blue);
        }

        .featured-posts {
            margin-top: 80px;
        }
    }
}

.agentur-team {
    margin: 80px 0 80px 0;

    .container {
        width: 100%;
        background: #fff;
        border-radius: 24px;
        padding: 80px;
        flex-direction: column;
        gap: 40px;

        .heading {
            flex-direction: column;

            p {
                color: var(--primary-blue);
                max-width: 80%;
                text-align: center;
            }
        }

        .members {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 80px;

            .member {
                max-width: 320px;
                width: 100%;

                .image {
                    position: relative;
                    display: flex;
                    align-items: center;

                    img {
                        width: fit-content;
                        height: 345px;
                        z-index: 1;
                        position: relative;
                        margin-left: 10px;
                    }

                    .bg {
                        position: absolute;
                        width: 288px;
                        height: 288px;
                        bottom: 0;
                        left: 0;
                        z-index: 0;
                      transition: border-radius 0.5s ease;
                    }
                }

                h3 {
                    font-family: "Poppins Bold 800", sans-serif;
                    font-weight: 600;
                    font-size:24px;
                    color: var(--primary-blue);
                    line-height: 1;
                    margin-top: 8px;
                }

                p {
                    font-family: "Poppins Light", sans-serif;
                    font-weight: 400;
                    font-size:16px;
                    color: var(--primary-blue);
                    line-height: 1;
                    margin-top: 8px;
                }
            }
        }

      .member:hover .bg {
        border-radius: 80px 80px 0 0;
      }
    }
}

.agentur-projects {
    padding-bottom: 80px !important;
}

.agentur-awards {
    padding: 120px 0 200px 0;

    .container {
        width: 100%;

        h2 {
            font-family: "Poppins Bold 800", sans-serif;
            font-weight: 400;
            font-size: 32px;
            color: var(--primary-blue);
            line-height: 1;
            text-align: center;
        }

        .awards {
            margin-top: 40px;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            gap: 70px;

            .item {
                max-width: 200px;
                width: 100%;
                text-align: center;
                display: grid;
                grid-template-rows: 1fr 1fr;

                h3 {
                    font-size: 20px;
                    font-family: "Poppins SemiBold", sans-serif;
                    color: var(--primary-blue);
                    line-height: 1.2;
                    font-weight: 400;
                }

                p {
                    font-size: 16px;
                    font-family: "Poppins Light", sans-serif;
                    color: var(--primary-blue);
                    line-height: 1.2;
                    font-weight: 400;
                }

                figure {
                    margin-top: 10px;
                    max-width: 132px;
                    width: 100%;
                    justify-self: center;
                }
            }
        }
    }
}

@media screen and (min-width: 2376px) {
    .agentur-about {
        .divider {
            top: -21% !important;
        }
    }
}
@media screen and (min-width: 1921px) and (max-width: 2375px) {
    .agentur-about {
        .divider {
            top: -17% !important;
        }
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .agentur-about {
        .divider {
            top: -12%;
        }
    }
}

@media screen and (max-width: 1024px) {
    .agentur-about {
        .container {
            h2 {
                font-size: 27px;
            }

            .counters {
                align-items: start;
                grid-template-columns: repeat(2, 1fr);
                gap: 80px;
            }

            .about {
                grid-template-columns: 1fr;
                
                .info {
                    text-align: center;
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .agentur-team {
        .container {
            .heading {
                .hero-main-heading {
                    text-align: center;
                }
            }
        }
    }
}

@media screen and (max-width: 500px) {
    .agentur-about {
        .container {
            h2 {
                font-size: 20px;
            }

            .counters {
                grid-template-columns: 1fr;

                .item {
                    h3 {
                        font-size: 37px;
                    }

                    h4 {
                        font-size: 18px;
                    }

                    p {
                        font-size: 16px;
                    }
                }
            }

            .about {
                .info {
                    .section-main-heading-white {
                        font-size: 32px !important;
                    }
                }

                .process-items {
                    grid-template-columns: 1fr;
                }
            }
        }
    }
}

.hero-container[data-initial-hidden] {
  opacity: 0;
}