/*  ks-text
    Style for page: Home   

*/
/* Celia */
.arrowtext-btn-consultation {
    display: flex;
    align-items: center; /* aligns arrow + text vertically */
    gap: 14px; /* reduce space between arrow and text */
    font-family: 'Caveat', cursive;
    color: #fff;
    padding: 10px 0; /* smaller top/bottom padding */
    font-size: 2rem;
    position: relative; /* in case you want to nudge it with top/left later */
    padding-bottom: 30px;
}
.arrowtext-btn-consultation img {
  width: 44px;   /* slightly smaller arrow */
  height: auto;
      margin-top: 25px;
          opacity: 0.8;
  animation: bounce 1.5s infinite ease-in-out;
}
.arrowtext-btn-consultation .arrowMessage {
    line-height: 1.0; /* tighten spacing between lines */
    margin-top: 0;    /* remove negative margin */
        opacity: 0.8;
}
.arrowtext-btn-consultation .arrowMessage span {
  font-size: 1.4rem; /* reduce slightly */
  opacity: 0.9;
}


@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
 
/*MARK: -Page General   */
body {
  aoverflow-x: hidden;
}

.content-wrapper {
  position: relative;
  z-index: 2;
  top: -2px;
  width: 100%;
}

.content-max-width {
  width: 80vw;
  max-width: 1440px;
  margin: 0 auto;
}

h2.geeks-h2 {
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4em;
  padding: 100px 0 30px 0;
}

p.geeks-text {
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  width: 60%;
  margin: 0 auto;
}

/* Fix appearance of footer only for Home page */
.footerFix {
  width: 100%;
  height: calc(var(--footer-height) - 2px);
  background-color: transparent;
  pointer-events: none;
}

.geeksTextStyle {
}

/* ========   Parallax animation   ======== */
/*MARK: -Parallax */

/* temporarily disable scroll */
.stop-scrolling {
  overflow-y: scroll;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  position: fixed;
}

.parallax-container {
  position: relative;
  z-index: 2;
}

/* SVG Container - this element is used for scrolling */
.parallax {
  --parallaxHeight: 2000px;
  width: 100%;
  height: var(--parallaxHeight);

  /* background-image: linear-gradient(0deg,
      #fcdf6a 20%,
      #fbdd68 11%,
      #f3a82c 40%,
      #eb8424 70%,
      #e4631e 44%,
      #e0501a 80%,
      #df4919 100%); */
  background-color: #fff;
}

svg.svgParallax {
  contain: paint layout;
  width: 100%;
  display: block;
  pointer-events: none;
  will-change: transform;
  transform: translate(0px 0px) !important;

  height: 160vh;
  min-height: 1200px;
  amax-height: calc(var(--parallaxHeight) - 800px);
  /* da bi sprecilo da svg bude duzi od .parallax */
}

/* MARK: -___MQ za Parallax */
/* za manje ekrane - testiraj jos*/
@media screen and (max-width: 1000px) {
  .parallax {
    height: 1800px;
  }

  svg.svgParallax {
    height: 1400px;
  }
}

/* 2K*/
@media screen and (min-width: 2000px) {
  .parallax {
    height: 2300px;
  }
}

/* 4K*/
@media screen and (min-width: 3700px) {
  .parallax {
    height: 3400px;
  }
}

/* solves the rare bug - when the viewport is in a certain dimension (a very high height) - svg doesn't display well */
/* @media screen and (max-width:2600px) and (min-height:1400px) {
  .parallax {
    height: 3600px;
    aopacity: 0.8;
  }

  svg.svgParallax {
    height: 2800px;

  }
} */

svg.svgParallax .sunRay {
  contain: paint;
}

/* MARK: -___absolute-elements */
.introCurtain {
  contain: layout;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100%;
  height: 100vh;
  background-color: var(--color-darkGray);
  will-change: transform;
}

/* Seagull Sprite Animation */
.seagullSprite {
  height: 250px;
  width: 250px;
  background: url('../../assets/img/home/parallax/sprite250.min.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  position: fixed;
  z-index: 10;
  left: -250px;
  bottom: 50%;
  adisplay: none;
  opacity: 0;
  overflow: hidden;
}

.glassBig {
  contain: layout;
  width: 60vw;
  max-width: 1400px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  bottom: -100%;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

/* .ipadTop {
  --iPadTop-height: 8.3vw;
  background-color: initial;
  background-color: transparent;
  background-image: url('../../assets/img/home/parallax/iPadTop.svg');
  background-origin: border-box;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100vw var(--iPadTop-height);
  height: var(--iPadTop-height);
  position: absolute;
  z-index: 2;
  atop: calc(var(--iPadTop-height) * -1);
  bottom: calc(var(--iPadTop-height) * -1);
  width: 100%;
  overflow: hidden;
} */

/* Arrow down with text "Scroll down" */
.arrowDown {
  opacity: 0.9;
  position: fixed;
  z-index: 2;
  left: 48%;
  bottom: 5%;
  transform: translateX(-50%);
  color: #ffffff;
  opacity: 0;
}

.arrowDown .text {
    font-size: 2rem;
    font-family: 'Caveat', Helvetica, Arial, Lucida, sans-serif;
    font-weight: bold;
    position: relative;
      top: -38px;
    right: -120px;
    line-height: 1em;
    display: block;
    width: 150px;
  letter-spacing: 1.5px;
  text-align: center;
}

.arrowDown .arrow {
  width: 50px;
  position: relative;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

/* MARK: -Typing  */
/* this image is under svg Parallax - serves as a "transition" */
.typing-section {
  background-color: #fff;
  margin-top: 8vw;
      border-radius: 40px 40px 0px 0px;
}

.typing-section .typing-container {
  display: flex;
  justify-content: center;
  font-weight: bold;
}

.typing-section .typing {
  width: 100%;
  text-align: center;
  font-family: 'Geeks On The Beach Font Medium', Helvetica, Arial, Lucida,
    sans-serif;
        line-height: 1.3em;
  color: var(--global-palette1);
  letter-spacing: 1px;
  font-size: 3.9rem;
  white-space: nowrap;
  font-weight:normal;
  padding-top: 60px;
  position: relative;
  --typeCursorOpacity: 1;
  text-transform: uppercase;
}

.typing-section .typing .serious-business {
  display: inline;
}

.typing-section .typing .blink {
  position: relative;
  left: -0.1em;
  height: 100%;
  acolor: var(--color-lightGray);
  color: #383939;
  opacity: var(--typeCursorOpacity);
}

/*.typing-section .typing .new-line {
  display: none;
}

.typing-section .intro-text {
  margin-top: 200px;
}

.typing-section .intro-text p.geeks-text:nth-child(1) {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 40px;
}

.typing-section .intro-text p.geeks-text:nth-child(2) {
  font-size: 1.4rem;
}

.typing-section .work-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 70px;
}

.typing-section .geeks-btn {
  font-size: 18px;
  margin-bottom: 180px;
}

/* MARK: -logo-work-section */
.logo-work-section {
  position: relative;
  height: 160vh;
  overflow: hidden;
  background-color: #ffffff;
}

.logo-work-section .arrowText {
  position: relative;
  left: 0px;
  top: 80px;
  display: flex;
  justify-content: flex-start;
}

.logo-work-section .arrowText .text {
  font-size: 1.7rem;
  font-family: 'Caveat', cursive;
  font-weight: bold;
  line-height: 1.2;
  width: 180px;
  text-align: center;
  color: #f3ab2f;
}

.logo-work-section .arrowText .arrow {
  width: 60px;
  position: relative;
  transform: scaleX(-1) translateX(-120px) translateY(-30px);
  left: 50px;
}

.logo-work-section .intro {
  width: 60%;
  font-size: 2.5rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: 'Anton', sans-serif;
  letter-spacing: 1px;
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: bold;
  color: #f3ab2f;
}

.logo-work-section .logo-container {
}

.logo-work-section .logo-item img {
  display: block;
  width: 8vw;
  min-width: 110px;
  filter: grayscale(100%);
  transition: transform 0.3s, filter 0.3s;
}

.logo-work-section .logo-item {
  position: absolute;
}

.logo-work-section .up .logo-item {
}

.logo-work-section .logo-item img:hover {
  filter: grayscale(0%);
  transform: scale(1.1);
}

.logo-work-section .up .logo-item:nth-of-type(1) {
  left: 2vw;
  top: 25vh;
}

.logo-work-section .up .logo-item:nth-of-type(2) {
  left: 7vw;
  top: 55vh;
}

.logo-work-section .up .logo-item:nth-of-type(3) {
  left: 20vw;
  top: 33vh;
}

.logo-work-section .up .logo-item:nth-of-type(4) {
  left: 29vw;
  top: 50vh;
}

.logo-work-section .up .logo-item:nth-of-type(5) {
  left: 38vw;
  top: 42vh;
}

.logo-work-section .up .logo-item:nth-of-type(6) {
  left: 47vw;
  top: 25vh;
}

.logo-work-section .up .logo-item:nth-of-type(7) {
  right: 44vw;
  top: 55vh;
}

.logo-work-section .up .logo-item:nth-of-type(8) {
  right: 35vw;
  top: 45vh;
}

.logo-work-section .up .logo-item:nth-of-type(9) {
  right: 29vw;
  top: 25vh;
}

.logo-work-section .up .logo-item:nth-of-type(10) {
  right: 20vw;
  top: 45vh;
}

.logo-work-section .up .logo-item:nth-of-type(11) {
  right: 11vw;
  top: 35vh;
}

.logo-work-section .up .logo-item:nth-of-type(12) {
  right: 2vw;
  top: 55vh;
}

.logo-work-section .down .logo-item {
}

.logo-work-section .down .logo-item:nth-of-type(1) {
  left: 2vw;
  bottom: 25vh;
}

.logo-work-section .down .logo-item:nth-of-type(2) {
  left: 11vw;
  bottom: 55vh;
}

.logo-work-section .down .logo-item:nth-of-type(3) {
  left: 20vw;
  bottom: 33vh;
}

.logo-work-section .down .logo-item:nth-of-type(4) {
  left: 29vw;
  bottom: 55vh;
}

.logo-work-section .down .logo-item:nth-of-type(5) {
  left: 38vw;
  bottom: 45vh;
}

.logo-work-section .down .logo-item:nth-of-type(6) {
  left: 44vw;
  bottom: 25vh;
}

.logo-work-section .down .logo-item:nth-of-type(7) {
  right: 38vw;
  bottom: 45vh;
}

.logo-work-section .down .logo-item:nth-of-type(8) {
  right: 29vw;
  bottom: 35vh;
}

.logo-work-section .down .logo-item:nth-of-type(9) {
  right: 20vw;
  bottom: 55vh;
}

.logo-work-section .down .logo-item:nth-of-type(10) {
  right: 11vw;
  bottom: 35vh;
}

.logo-work-section .down .logo-item:nth-of-type(11) {
  right: 2vw;
  bottom: 43vh;
}

/* MARK: -geeks-work-section */
.geeks-work-section {
  position: relative;
  z-index: 2;
  background-color: var(--color-darkGray);
}

.geeks-work {
  padding-bottom: 300px;
}

/* intro text */
.geeks-work .intro {
  color: #fff;
  text-align: center;
}

.geeks-work .intro h2 {
}

.geeks-work .intro p {
}

/* Cards */
.geeks-work .cards-section {
  width: 100%;
  margin-top: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.geeks-work .cards-section .card {
  position: relative;
  aflex: 0 1 15vw;
  width: 15vw;
  max-width: 330px;
  min-width: 250px;
  text-align: center;
  color: #fff;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s;
}

.geeks-work .cards-section .card:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.geeks-work .cards-section .card:nth-child(1) {
  background: linear-gradient(
    112.38deg,
    rgba(196, 43, 39, 1) 0%,
    rgba(211, 96, 39, 1) 53.38%,
    rgba(222, 129, 38, 1) 97.13%
  );
}

.geeks-work .cards-section .card:nth-child(2) {
  background: linear-gradient(
    114.26deg,
    rgba(211, 96, 39, 1) 0%,
    rgba(222, 129, 38, 1) 22.49%,
    rgba(236, 168, 33, 1) 52.3%,
    rgba(244, 185, 26, 1) 69.69%,
    rgba(255, 210, 16, 1) 99.98%
  );
}

.geeks-work .cards-section .card:nth-child(3) {
  background: linear-gradient(
    114.26deg,
    rgba(243, 186, 26, 1) 0%,
    rgba(170, 187, 71, 1) 16.73%,
    rgba(89, 189, 121, 1) 35.97%,
    rgba(58, 177, 157, 1) 56.94%,
    rgba(32, 167, 187, 1) 78.06%,
    rgba(22, 163, 198, 1) 90.03%
  );
}

.geeks-work .cards-section .card:nth-child(4) {
  background: linear-gradient(
    116.07deg,
    rgba(21, 171, 181, 1) 0.78%,
    rgba(22, 163, 198, 1) 36.6%,
    rgba(26, 160, 197, 1) 38.57%,
    rgba(74, 127, 183, 1) 66.56%,
    rgba(104, 107, 175, 1) 87.93%,
    rgba(115, 99, 172, 1) 100%
  );
}

.geeks-work .cards-section .card h3 {
  font-size: 1.2rem;
  text-transform: uppercase;
  height: 70px;
}

.geeks-work .cards-section .card img {
  display: block;
  width: 80%;
  margin: 0 auto;
  -webkit-filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4)) grayscale(100%);
  transition: filter 0.3s;
}

.geeks-work .cards-section .card:hover img {
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4)) grayscale(0%);
}

.geeks-work .cards-section .card:nth-child(2) img {
  width: 86.5%;
}

.geeks-work .cards-section .card p {
  width: 80%;
  margin: 0 auto;
  margin-top: 25px;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* arrow above */
.geeks-work .cards-section .card .arrowText {
  position: absolute;
  top: -80px;
  left: 0;
  display: flex;
  opacity: 0;
}

.geeks-work .cards-section .card .arrowText img {
  width: 50px;
  fill: #fff;
}

.geeks-work .cards-section .card .arrowText span {
  margin-left: 12px;
  position: relative;
  top: -20px;
  font-size: 1.7rem;
  font-family: 'Caveat', cursive;
  afont-weight: bold;
  line-height: 1.2;
}

/* this represents part of the title for the testimonial (for the section below) */
.geeks-work-section .testimonials-prequel {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.geeks-work-section .testimonials-prequel .dekstop-headline {
  font-size: 7vw;
  text-align: center;
  font-family: 'Anton', sans-serif;
  letter-spacing: 8px;
  text-transform: uppercase;
  padding: 0px 0;
  margin: 0;
  line-height: 1;
  position: relative;
  bottom: -0.53vw;
  background-image: linear-gradient(90deg, #6b52c7 0%, #1f9dc8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* MARK: -testimonials */
.testimonials-section {
  position: relative;
  z-index: 1;
  height: 180vh;
  background-image: var(--gradient-BlueGreenPurple);
}

/* Headlines */
/* .testimonials-section .central-part {
  width: fit-content;
  margin: auto;
  apadding: 25px 50px;

  height: 310px;
  width: 340px;

  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: normal;

  position: relative;
  top: calc(180vh / 2 - 180px);
  z-index: 15;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;

  color: #020202;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 8px;
}

.testimonials-section .central-part h3 {
  position: relative;
  top:-15px;
}

.testimonials-section .central-part img {
  aheight: 200px;
  fill: none;
}
.laurel {
  width: 300px;
  position: absolute;
  aleft: -150px;
} */

/* different Headlines */
/* .testimonials-section .big-text-container {
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  position: absolute;
  top: 40vh;
  left: 0;
  z-index: 14;
}

.testimonials-section .big-text {
  width: 100%;
  text-transform: uppercase;
  font-size: 8vw;
  font-weight: bold;
  white-space: nowrap;
  font-family: 'Geeks On The Beach Font Medium', Helvetica, Arial, Lucida, sans-serif;
  color: #000000;
}

.testimonials-section .big-text2 {
  position: absolute;
  z-index: 5;
  bottom: 0;
  width: 100%;
  text-transform: uppercase;
  font-size: 8vw;
  font-weight: bold;
  white-space: nowrap;
  font-family: 'Geeks On The Beach Font Medium', Helvetica, Arial, Lucida, sans-serif;
  color: var(--color-darkGray);
  line-height: 0.5;
} */

/* Elements only for mobile view */
.testimonials-section .mobile-headline {
  display: none;
}

.testimonials-section .arrow-container {
  display: none;
}

/* Testimonial General (both Mobile and Dekstop) */
.testimonials-section .testimonial {
  display: none;
  position: absolute;
  padding: 20px;
  box-shadow: 0px 5px 6px 5px rgba(0, 0, 0, 0.24) !important;
  border-radius: 7px;
  background-color: #fff;
}

.testimonials-section .testimonial .text {
  line-height: 1.4;
}

.testimonials-section .testimonial .testimonial-footer {
  display: flex;
  margin-top: 15px;
}

.testimonials-section .testimonial .increditation {
  margin-right: auto;
  font-weight: bold;
}

.testimonials-section .testimonial .increditation .name {
  font-size: 0.9rem;
  font-family: 'Geeks On The Beach Font Medium', Helvetica, Arial, Lucida,
    sans-serif;
}

.testimonials-section .testimonial .increditation .title {
  font-size: 0.9rem;
}

.testimonials-section .testimonial .img-rating {
  align-self: flex-end;
  position: relative;
  top: -4px;
}

/* Big */
.testimonials-section .testimonial.big {
  width: 430px;
  font-size: 1.1rem;
  z-index: 13;
  background-color: rgb(255, 255, 255);
}

.testimonials-section .testimonial.big .increditation .name,
.testimonials-section .testimonial.big .increditation .title {
  font-size: 1rem;
}

.testimonials-section .testimonial.big .img-rating {
  width: 145px;
}

/* Medium */
.testimonials-section .testimonial.medium {
  width: 360px;
  font-size: 1rem;
  padding: 15px;
  z-index: 12;
  background-color: rgb(226, 226, 226);
}

.testimonials-section .testimonial.medium .increditation .name,
.testimonials-section .testimonial.medium .increditation .title {
  font-size: 0.9rem;
}

.testimonials-section .testimonial.medium .img-rating {
  width: 110px;
}

/* Small */
.testimonials-section .testimonial.small {
  width: 320px;
  font-size: 0.9rem;
  padding: 10px;
  z-index: 11;
  background-color: rgb(235, 245, 226);
}

.testimonials-section .testimonial.small .increditation .name,
.testimonials-section .testimonial.small .increditation .title {
  font-size: 0.8rem;
}

.testimonials-section .testimonial.small .img-rating {
  width: 90px;
}

/* MARK: -Section4 */
.section4 {
  position: relative;
  z-index: 2;
  background-color: var(--color-darkGray);
  background-color: #000;
}

/* intro text */
.section4 .intro {
  width: 100%;
  color: #fff;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translate(-50%, 0);
}

.section4 .h2Container {
  position: relative;
}

.section4 .intro h2 {
  text-align: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: #fff;
  transition: background-color 0.3s;
}

.section4 .intro.activ h2 {
  background-color: #aa8ae6;
}

.section4 .intro p {
  awidth: 45%;
}

/* arrow */
.section4 .arrowText {
  position: absolute;
  top: -80px;
  right: -140px;
  display: flex;
  opacity: 0.7;
}

.section4 .arrowText img {
  width: 50px;
}

.section4 .arrowText {
  margin-left: 12px;
  position: relative;
  top: -20px;
  font-size: 1.7rem;
  font-family: 'Caveat', cursive;
  color: rgb(255, 255, 255);
  line-height: 1.2;
}

.section4 .arrowText .text {
  position: relative;
  left: 10px;
  top: -20px;
  scale: 1;
  transition: scale 0.3s;
}

/* container: contains sparkle btn and arow text */
.sparkle-button-inner {
  position: relative;
  z-index: 1;
}

/* MARK: -__sparkle-button */
.sparkle-button-container {
  --transition: 0.25s;
  --spark: 1.8s;
  --active: 0;

  --cut: 0.1em;
  --active: 0;
  --bg: radial-gradient(
      40% 50% at center 100%,
      hsl(270 calc(var(--active) * 97%) 72% / var(--active)),
      transparent
    ),
    radial-gradient(
      80% 100% at center 120%,
      hsl(260 calc(var(--active) * 97%) 70% / var(--active)),
      transparent
    ),
    hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));

  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Geeks On The Beach Font Regular', Helvetica, Arial, Lucida,
    sans-serif;
  overflow: hidden;
  transition: background var(--transition);
  min-height: 450px;
  padding: 520px 0 280px 0;
}

.sparkle-button {
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  font-size: 2rem;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  padding: 0.9em 1.5em;
  display: flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
  border-radius: 100px;
  position: relative;
  box-shadow: 0 0 calc(var(--active) * 6em) calc(var(--active) * 3em)
      hsl(260 97% 61% / 0.75),
    0 0.05em 0 0
      hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
    0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;
  transition: box-shadow var(--transition), scale var(--transition),
    background var(--transition);
  scale: calc(1 + (var(--active) * 0.1));
}

.sparkle-button:active {
  scale: 1;
}

.sparkle-button-container svg {
  overflow: visible !important;
}

.sparkle-button .sparkle path {
  color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
  transform-box: fill-box;
  transform-origin: center;
  fill: currentColor;
  stroke: currentColor;
  animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
  animation-duration: 0.6s;
  transition: color var(--transition);
}

.sparkle-button:is(:hover, :focus-visible) path {
  animation-name: bounce;
}

@keyframes bounce {
  35%,
  65% {
    scale: var(--scale);
  }
}

.sparkle-button .sparkle path:nth-of-type(1) {
  --scale: 0.5;
  --delay: 0.1;
  --base: 40%;
}

.sparkle-button .sparkle path:nth-of-type(2) {
  --scale: 1.5;
  --delay: 0.2;
  --base: 20%;
}

.sparkle-button .sparkle path:nth-of-type(3) {
  --scale: 2.5;
  --delay: 0.35;
  --base: 30%;
}

.sparkle-button:before {
  content: '';
  position: absolute;
  inset: -0.25em;
  z-index: -1;
  aborder: 0.25em solid hsl(260 97% 50% / 0.5);
  border: 0.25em solid rgba(172, 172, 172, 0.1);
  border-radius: 100px;
  opacity: var(--active, 0);
  transition: opacity var(--transition);
}

.sparkle-button .spark {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  rotate: 0deg;
  overflow: hidden;
  mask: linear-gradient(white, transparent 50%);
  animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

@keyframes flip {
  to {
    rotate: 360deg;
  }
}

.sparkle-button .spark:before {
  content: '';
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 0%;
  left: 50%;
  z-index: -1;
  translate: -50% -15%;
  rotate: 0;
  transform: rotate(-90deg);
  opacity: calc((var(--active)) + 0.4);
  background: conic-gradient(
    from 0deg,
    transparent 0 340deg,
    rgb(255, 255, 255) 360deg
  );

  transition: opacity var(--transition);
  animation: rotate var(--spark) linear infinite both;
}

.sparkle-button .spark:after {
  content: '';
  position: absolute;
  inset: var(--cut);
  border-radius: 100px;
}

.sparkle-button .text {
  translate: 2% -6%;
  margin-left: -10px;
  letter-spacing: 0.01ch;
  background: linear-gradient(
    90deg,
    hsl(0 0% calc((var(--active) * 100%) + 65%)),
    hsl(0 0% calc((var(--active) * 100%) + 26%))
  );
  -webkit-background-clip: text;
  color: transparent;
  transition: background var(--transition);
}

.sparkle-button svg {
  inline-size: 1.25em;
  translate: -25% -5%;
}

.sparkle-button-container .backdrop {
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: 100px;
  transition: background var(--transition);
}

@keyframes rotate {
  to {
    transform: rotate(90deg);
  }
}

@supports (selector(:has(:is(+ *)))) {
  body:has(.sparkle-button:is(:hover, :focus-visible)) {
    --active: 1;
    --play-state: running;
  }

  .sparkle-button-container .bodydrop {
    display: none;
  }
}

.sparkle-button:is(:hover, :focus-visible)
  ~ :is(
    .sparkle-button-container .bodydrop,
    .sparkle-button-container .particle-pen
  ) {
  --active: 1;
  --play-state: running;
}

.sparkle-button:is(:hover, :focus-visible) {
  --active: 1;
  --play-state: running;
}

.sparkle-button-container .particle-pen.activ {
  --active: 1;
  --play-state: running;
}

.sparkle-button-container .particle-pen {
  awidth: 350px;
  aheight: 350px;
  position: absolute;
  top: calc(50% + 200px);
  left: 50%;
  translate: -50% -50%;
  outline: 1px solid greenyellow;

  z-index: -1;
  opacity: var(--active, 0);
  transition: opacity var(--transition);
}

.sparkle-button-container .particle {
  fill: white;
  width: calc(var(--size, 0.25) * 1rem);
  aspect-ratio: 1;
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  opacity: var(--alpha, 1);
  animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s)
    infinite linear;
  transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
  z-index: -1;
  animation-play-state: var(--play-state, paused);
}

.sparkle-button-container .particle path {
  fill: hsl(0 0% 90%);
  stroke: none;
}

.sparkle-button-container .particle:nth-of-type(even) {
  animation-direction: reverse;
}

@keyframes float-out {
  to {
    rotate: 360deg;
  }
}

/* MARK: -Section5 */
/* .section5 {
  min-height: 100vh;
  position: relative;
  z-index: 2;
  background-color: #000;
}*/

/* ========   Mq   ======== */
/*MARK: -MQ  PAGE */

/*MARK: ---0-980 */
@media only screen and (max-width: 979px) {
  .typing-section .typing {
    font-size: 2rem !important;
  }

  /* geeks-work */
  .geeks-work .cards-section {
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .geeks-work .cards-section .card:nth-child(1),
  .geeks-work .cards-section .card:nth-child(3) {
    margin-left: 6vw;
  }

  .geeks-work .cards-section .card:nth-child(2),
  .geeks-work .cards-section .card:nth-child(4) {
    margin-right: 6vw;
  }

  .geeks-work .cards-section .card:nth-child(3),
  .geeks-work .cards-section .card:nth-child(4) {
    margin-top: 10vw;
  }
}

@media screen and (max-width: 800px) {
  /* geeks-work */
  .geeks-work .cards-section {
    justify-content: unset;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  .geeks-work .cards-section .card {
    width: 60vw;
    max-width: unset;
  }

  .geeks-work .cards-section .card:nth-child(1),
  .geeks-work .cards-section .card:nth-child(3) {
    margin-left: 0;
  }

  .geeks-work .cards-section .card:nth-child(2),
  .geeks-work .cards-section .card:nth-child(4) {
    margin-right: 0;
  }

  .geeks-work .cards-section .card:nth-child(3),
  .geeks-work .cards-section .card:nth-child(4) {
    margin-top: 0;
  }
}

/*MARK: ---0-1100 */
@media only screen and (max-width: 1200px) {
  .typing-section.typing {
    font-size: 2.5rem;
  }

  .section4 .intro {
    width: 80%;
  }

  .geeks-h2 {
    font-size: 1.8rem;
  }

  .geeks-work .intro p,
  .section4 .intro p {
    width: 100%;
  }
}

/*MARK: ---2K+ Display*/
@media screen and (min-width: 2300px) {
  /* .content-max-width {
    max-width: unset;
    outline: 1px solid #fff;
  } */
}

/*MARK: ---0-576- */
@media only screen and (max-width: 576px) {
  .geeks-h2 {
    font-size: 1.5rem !important;
    padding: 60px 0 30px 0 !important;
  }

  p.geeks-text {
    line-height: 1.5em;
    font-size: 1.1rem;
  }

  .testimonials-section .testimonial:is(.big, .medium, .small) .img-rating {
    width: 100px;
  }

  .typing-section.logo-item {
    height: 180px;
  }

  .testimonials-section .testimonial .text {
    line-height: 1.5em !important;
    font-size: 1.1rem !important;
  }

  .sparkle-button-container {
    padding-top: 650px;
  }

  .sparkle-button {
    padding: 0.9em 1.5em;
    font-size: 1.5rem;
  }

  .section4 .arrowText {
    left: 8px;
  }
}

@media only screen and (max-width: 457px) {
  .testimonials-container {
    margin-bottom: 20px;
  }
}

/* fixing bugs */
/*MARK: ---fixing bugs */
@media only screen and (max-width: 801px) {
}

@media only screen and (max-width: 900px) and (min-width: 800px) {
}

/*MARK: -__ MQ Typing */
/* for narrower screens the text should be in two lines */
@media only screen and (max-width: 1320px) {
  .typing-section .typing {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .typing-section .typing .new-line {
    display: block;
  }

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

@media only screen and (max-width: 800px) {
  .typing-section .typing {
    letter-spacing: 1px;
    font-size: 2.1rem;
  }
}

/*MARK: -__MQ for geeks-work */
@media screen and (min-width: 980px) and (max-width: 1320px) {
  .geeks-work .cards-section {
    justify-content: space-around;
    flex-wrap: wrap;
    row-gap: 50px;
  }

  .geeks-work .cards-section .card {
    width: 25vw;
    max-width: 430px;
  }

  .geeks-work .cards-section .card:nth-child(1),
  .geeks-work .cards-section .card:nth-child(3) {
    margin-left: 10vw;
  }

  .geeks-work .cards-section .card:nth-child(2),
  .geeks-work .cards-section .card:nth-child(4) {
    margin-right: 10vw;
  }

  .geeks-work .cards-section .card:nth-child(3),
  .geeks-work .cards-section .card:nth-child(4) {
    margin-top: 10vw;
  }
}

@media screen and (max-width: 1000px) {
  .geeks-work {
    padding-bottom: 100px;
  }

  .geeks-work .cards-section .card .arrowText {
    display: none;
  }

  .geeks-work .cards-section {
    row-gap: 0px;
    margin-top: 100px;
  }
}

@media screen and (max-width: 800px) {
  .geeks-work .cards-section {
    row-gap: 50px;
  }
}

/* MARK: -__MQ for Testemoials */
/* for Tablet and Mobile View */
@media screen and (max-width: 1200px) {
  .testimonials-section {
    height: initial;
  }

  .testimonials-container {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dekstop-headline {
    display: none;
  }

  .testimonials-section .mobile-headline {
    display: block;
    width: 80vw;
    margin: 0 auto;
    color: #fff;
    padding: 40px 0;
    text-align: center;
  }

  .testimonials-section .testimonial:is(.big, .medium, .small) {
    width: 80vw;
    max-width: 630px;
    font-size: 1.2rem;
    padding: 25px;
    display: none;
  }

  .testimonials-section .testimonial .text {
    max-height: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 13;
    -webkit-box-orient: vertical;
    white-space: normal;
  }

  .testimonials-section .testimonial:is(.big, .medium, .small) .img-rating {
    width: 130px;
  }

  .testimonials-section .testimonial.active {
    display: block;
  }

  .testimonials-section .testimonial .testimonial-footer {
    margin-top: 40px;
  }

  .testimonials-section .testimonial .increditation .name {
    margin-bottom: 5px;
  }

  .testimonials-section
    .testimonial:is(.big, .medium, .small)
    .increditation
    .name,
  .testimonials-section
    .testimonial:is(.big, .medium, .small)
    .increditation
    .title {
    font-size: 1rem;
  }

  .testimonials-section .arrow-container {
    margin: 0 20%;
    padding: 55px 0;
    display: flex;
  }

  .testimonials-section .arrow-container .arhw1 {
    margin-right: auto;
  }

  .testimonials-section .arrow-container .arrows {
    width: 100px;
    fill: #fff;
    transition: transform 0.3s;
  }

  .testimonials-section .arrow-container .arrow-left {
    transform: scaleX(-1);
  }
}