canvas{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -999999;
}

:root {
  --dark-mode-backgroud: rgb(18, 19, 21);
  --dark-mode-text: rgb(224, 238, 238);
  --dark-button-color: rgb(196, 251, 251);
  --card-hover-dark: rgb(23, 24, 27);
  --light-mode-background: rgb(238, 243, 243);
  --light-mode-text: rgb(63, 65, 68);
  --light-button-color: rgb(63, 65, 68);
  --card-hover-light: rgb(226, 233, 233);
  --icon-background-dark: rgb(38, 39, 41);
  --icon-background-light: rgb(220, 225, 225);
  --watermark-dark: rgb(162, 173, 173);
  --watermark-light: rgb(115, 118, 120);
  --padding-horizontal: 4rem;
  --section-heading-font-size: 10rem;
  --main-heading-font-size: 5.5rem; /*switches areound 640px*/
  --section-line-gap: -3.4rem;
  --main-heading-line-gap: -1.8rem;
  --sm-accounts-padding: 3rem;
  --hamburger-text-size: 4.6rem;
  --section-vertical-padding: 5rem;
  --waw-para1-font-size: 2.4rem;
  --new-main-heading-line-gap: 0.3rem;
  --main-heading-punchline-font-size: 0.65rem;
  --main-button-horizontal-padding: 1.5rem;
  --main-button-font-size: 0.85rem;
  --main-button-vertical-padding: 0.75rem;
  --card-padding-left: 4rem;
  --card-padding-right: 4rem;
  --work-info-text-heading: 3.8rem;
  --review-card-descript-font-size: 1.2rem;
  --review-card-padding: 4rem;
  --icon-background-light: rgb(205, 209, 208);
  --punchline-font-size: 1.7rem;
  --jungle-trek-font-size: 9rem;
}

@media screen and (max-width: 490px) {
  :root {
    --punchline-font-size: 1.2rem;
  }
}

.dark {
  --bg: var(--dark-mode-backgroud);
  --text: var(--dark-mode-text);
  --button: var(--dark-button-color);
  --cardHover: var(--card-hover-dark);
  --iconBg: var(--icon-background-dark);
  --iconBgDark: transparent;
  --watermark: var(--watermark-dark);
  --loaderBg: rgb(23, 24, 26);
  --gradient-text-first: rgb(224, 238, 238);
  --gradient-text-second: rgb(37, 37, 37);
  --line-color: white;
  --button-text: black;
  --iconLightBg: transparent;
}

.light {
  --iconBgDark: var(--icon-background-light);
  --bg: var(--light-mode-backgroud);
  --text: var(--light-mode-text);
  --button: var(--light-button-color);
  --cardHover: var(--card-hover-light);
  --iconBg: var(--icon-background-light);
  --watermark: var(--watermark-light);
  --loaderBg: rgb(238, 243, 243);
  --gradient-text-first: rgb(63, 65, 68);
  --gradient-text-second: rgb(220, 225, 225);
  --line-color: black;
  --button-text: white;
  --iconLightBg: var(--icon-background-light);
}

@media screen and (max-width: 850px) {
  :root {
    --review-card-descript-font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  :root {
    --review-card-descript-font-size: 0.9rem;
  }
}
@media screen and (max-width: 450px) {
  :root {
    --review-card-descript-font-size: 0.7rem;
  }
}
/* @media screen and (max-width:850px) {
  :root{
    --review-card-descript-font-size:1rem;
  }
  
} */

@media screen and (max-width: 440px) {
  :root {
    --work-info-text-heading: 3rem;
  }
}

/*WAW PARA 1*/
@media screen and (max-width: 770px) {
  :root {
    --waw-para1-font-size: 2rem;
  }
}
@media screen and (max-width: 607px) {
  :root {
    --waw-para1-font-size: 1.7rem;
  }
}
@media screen and (max-width: 518px) {
  :root {
    --waw-para1-font-size: 1.5rem;
  }
}
@media screen and (max-width: 478px) {
  :root {
    --waw-para1-font-size: 1.2rem;
  }
}

/*padding*/
@media screen and (max-width: 960px) {
  :root {
    --padding-horizontal: 3rem;
    --card-padding-left: 1.1rem;
    --card-padding-right: 2.5rem;
  }
}
@media screen and (max-width: 640px) {
  :root {
    --padding-horizontal: 2rem;
    --card-padding-left: 0.4rem;
    --card-padding-right: 2rem;
  }
}

/*hamburger text*/

@media screen and (max-width: 512px) {
  :root {
    --hamburger-text-size: 4rem;
  }
}

@media screen and (max-width: 427px) {
  :root {
    --hamburger-text-size: 3.5rem;
  }
}

/* main heading font size */
@media screen and (max-width: 1117px) {
  :root {
    --main-heading-font-size: 4.5rem;
    --main-heading-line-gap: -1.5rem;
  }
}
@media screen and (max-width: 948px) {
  :root {
    --main-heading-font-size: 4rem;
    --main-heading-line-gap: -1.2rem;
  }
}

@media screen and (max-width: 856px) {
  :root {
    --main-heading-font-size: 3.5rem;
    --main-heading-line-gap: -1.2rem;
  }
}
@media screen and (max-width: 778px) {
  :root {
    --main-heading-font-size: 2.8rem; /*2.8*/
    --main-heading-line-gap: -0.9rem;
  }
}

@media screen and (max-width: 500px) {
  :root {
    --main-heading-font-size: 2.4rem;
    --new-main-heading-line-gap: 0.3rem;
  }
}
@media screen and (max-width: 435px) {
  :root {
    --main-heading-font-size: 2.1rem;
    --new-main-heading-line-gap: 0.3rem;
  }
}

/* button responsiveness */

@media screen and (max-width: 530px) {
  :root {
    --main-button-horizontal-padding: 1.1rem;
    --main-button-font-size: 0.75rem;
    --main-button-vertical-padding: 0.75rem;
  }
}

/* punchline fontsize */

@media screen and (max-width: 433px) {
  :root {
    --main-heading-punchline-font-size: 0.54rem;
  }
}

/*Font Size*/
@media screen and (max-width: 850px) {
  :root {
    --jungle-trek-font-size: 8.5rem !important;
  }
}

@media screen and (max-width: 1060px) {
  :root {
    --section-heading-font-size: 9rem;
    --jungle-trek-font-size: 9rem;
  }
}
@media screen and (max-width: 805px) {
  :root {
    --section-heading-font-size: 8rem;
    --section-line-gap: -3rem;
    --jungle-trek-font-size: 7.3rem !important;
  }
}
@media screen and (max-width: 710px) {
  :root {
    --section-heading-font-size: 6rem; /*5*/
    --section-line-gap: -1.8rem;
    --jungle-trek-font-size: 5rem !important;
  }
}
@media screen and (max-width: 600px) {
  :root {
    --section-heading-font-size: 5rem; /*5*/
    --section-line-gap: -1.5rem;
    --jungle-trek-font-size: 4.5rem !important;
  }
}

@media screen and (max-width: 460px) {
  :root {
    --jungle-trek-font-size: 3.8rem !important;
    --section-heading-font-size: 4.5rem;
  }
}

@media screen and (max-width: 403px) {
  :root {
    --jungle-trek-font-size: 3.5rem;
  }
}
@media screen and (max-width: 388px) {
  :root {
    --jungle-trek-font-size: 3rem;
  }
}
@media screen and (max-width: 420px) {
  :root {
    --section-heading-font-size: 4.4rem; /*5*/
    --section-line-gap: -1.2rem;
  }
}
@media screen and (max-width: 400px) {
  :root {
    --section-heading-font-size: 4rem;
    --section-line-gap: -1.2rem;
  }
}

@font-face {
  font-family: "MyFont";
  src: url("./public/Dirtyline36Daysoftype2022-Reg.woff2") format("opentype");
}

@font-face {
  font-family: "Syne";
  src: url("./public/8vIH7w4qzmVxm2BL9A.woff2") format("opentype");
}

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

::selection {
  background-color: transparent;
  color: rgb(197, 252, 252);
}

::-webkit-scrollbar {
  background-color: transparent;
  width: 15px;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(113, 134, 138);
}

img {
  z-index: 99999;
}

body {
  background-color: var(--bg);
  color: var(--text);
  /* height: 100vh; */
  /* scroll-behavior: smooth; */
  max-width: 100%;
  overflow-x: hidden;

  /* z-index: -999999; */
}

@keyframes initialLoadAnimation {
  0% {
    clip-path: ellipse(68% 87% at 50% 42%);
  }
  50% {
    clip-path: ellipse(60% 41% at 49% 21%);
  }
  90% {
    clip-path: ellipse(49% 14% at 50% 1%);
  }
  100% {
    clip-path: ellipse(54% 0% at 53% 0%);
  }
}

.initial-loader {
  position: fixed;
  top: 0;
  opacity: 1;
  min-width: 100vw;
  height: 100vh;
  background-color: var(--loaderBg);
  z-index: 909999;
  pointer-events: none;
  clip-path: ellipse(65% 0% at 48% 99%);
  animation: initialLoadAnimation 1s linear forwards;
}

.loader {
  position: fixed;
  top: 0;
  opacity: 1;
  min-width: 100vw;
  height: 100vh;
  background-color: var(--loaderBg);
  z-index: 9099999;
  pointer-events: none;
  clip-path: ellipse(65% 0% at 48% 99%);
}
.loader2 {
  position: fixed;
  top: 0;
  opacity: 1;
  min-width: 100vw;
  height: 100vh;
  background-color: var(--loaderBg);
  z-index: 909999;
  pointer-events: none;
  clip-path: ellipse(65% 0% at 48% 99%);
}

.animate {
  animation: slide 1.5s linear forwards;
}

.animate-2 {
  animation: slide 1.5s linear reverse;
}

@keyframes slide {
  0% {
    clip-path: ellipse(65% 0% at 48% 99%);
  }
  10% {
    clip-path: ellipse(64% 12% at 48% 99%);
  }
  50% {
    clip-path: ellipse(64% 99% at 48% 51%);
  }
  90% {
    clip-path: ellipse(59% 20% at 49% 0%);
  }
  100% {
    clip-path: ellipse(59% 0% at 51% 0%);
  }
}

html {
  overflow-x: hidden;
}

.main-page-container {
  overflow-x: hidden;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.main-navbar {
  color: var(--text);
  display: flex;
  justify-content: space-between;
  padding: 1.5rem var(--padding-horizontal);
  background-color: transparent;
  max-width: 100%;
  align-items: center;
}

.main-navbar-container {
  position: fixed;
  width: 100%;
  z-index: 99999;
}

.toggle-options {
  display: flex;
  gap: 0.5rem;
}
.light-mode-option {
  z-index: 99;
  background-color: var(--iconBgDark);
  border-radius: 50%;
  height: 30px;
}

.sound-option {
  background-color: var(--iconBg);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  z-index: 99;
}

.menu-container {
  font-family: "SYNE";
  font-size: 0.9rem;
  display: flex;
  letter-spacing: -0.1rem;
  align-items: center;
  gap: 0.8rem;
}
.hamburger-menu {
  background-color: var(--iconBg);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  position: relative;
}
.menu-line1 {
  height: 2px;
  background-color: var(--text);
  width: 20px;
  position: absolute;
  z-index: 1;
  top: 40%;
  left: 25%;
}
.menu-line2 {
  height: 2px;
  background-color: var(--text);
  width: 12px;
  position: absolute;
  z-index: 1;
  top: 55%;
  left: 45%;
}

.first-section-content-container {
  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin-bottom: 3rem;
  align-items: center;
  min-height: 100vh;
}

.first-section-content {
  display: flex;
  flex-direction: column;
}

.main-title-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  color: var(--text);
}
.colorBlack {
  color: var(--text);
}

.first-line-content {
  font-size: var(--main-heading-font-size);
  text-align: center;
  font-family: "MyFont";
  margin-bottom: var(--main-heading-line-gap);
  margin-top: -0.2rem;
}

.mobile-fl-content {
  font-size: var(--main-heading-font-size);
  text-align: center;
  font-family: "MyFont";
  margin-bottom: var(--main-heading-line-gap);
  display: none;
}
.mobile-sl-content {
  font-size: var(--main-heading-font-size);
  text-align: center;
  font-family: "MyFont";
  margin-bottom: var(--main-heading-line-gap);
  margin-top: var(--new-main-heading-line-gap);
  display: none;
}
.mobile-tl-content {
  font-size: var(--main-heading-font-size);
  text-align: center;
  font-family: "MyFont";
  margin-bottom: var(--main-heading-line-gap);
  margin-top: var(--new-main-heading-line-gap);
  display: none;
}
.second-line-content {
  font-size: var(--main-heading-font-size);
  text-align: center;
  font-family: "MyFont";
}

@media screen and (max-width: 645px) {
  .first-line-content {
    display: none;
  }
  .second-line-content {
    display: none;
  }
  .mobile-fl-content {
    display: block;
  }
  .mobile-sl-content {
    display: block;
  }
  .mobile-tl-content {
    display: block;
    padding-bottom: 2rem;
  }
}
.punch-line-container {
  display: flex;
  flex-direction: column;

  text-align: center;
  font-family: "SYNE";
  font-size: var(--main-heading-punchline-font-size);
}
.video-down-arrow {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  z-index: 99999999999;
}
.first-section-button {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 83%;
  width: 100%;
  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);
}

@media screen and (max-width: 700px) {
  .first-section-button {
    top: 90%;
  }
}

.mgp {
  transition: transform 0.2s ease;
}
.mgb {
  transition: transform 0.2s ease;
}
.magnetic-text {
  transition: transform 0.15s ease;
}

.magnetic-buttons {
  transition: transform 0.15s ease;
}

button.s1 {
  padding: var(--main-button-vertical-padding)
    var(--main-button-horizontal-padding);
  font-size: var(--main-button-font-size);
  color: var(--button);
  border: solid var(--button) 2px;
  background-color: transparent;
  border-radius: 9999px;
  font-family: "SYNE";
}

.video-animation {
  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);

  max-width: 100%;
  display: flex;
  justify-content: center;
  border-radius: 1.5rem;
}

.video-animation-video {
  border-radius: 1.5rem;
  width: 100%;
  z-index: -1;
}

.cursor-normal {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  mix-blend-mode: difference;
  position: fixed;
  background-color: rgb(179, 233, 231);
  z-index: 9999999;
  pointer-events: none;
}
@media screen and (max-width:768px) {
  .cursor-normal{
    visibility: hidden !important;
  }
  
}

.cursor-title {
  width: 300px;
  height: 300px;
  filter: blur(40px);
  background-color: rgb(179, 233, 231);
  z-index: 999;
  position: absolute;
  border-radius: 999px;
  mix-blend-mode: difference;
  pointer-events: none;
}

.cursor-button {
  width: 60px;
  height: 60px;
  filter: blur(8px);
  background-color: rgb(255, 255, 255);
  z-index: 99999;
  border-radius: 999px;
  color: white;
  mix-blend-mode: difference;
}

.hoverstate:hover {
  background-color: rgb(196, 251, 251);
  color: black;
}

.recent-work-section {
  display: flex;

  margin-top: 5rem;

  padding-top: var(--section-vertical-padding);
  padding-bottom: var(--section-vertical-padding);
  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);

  width: 100%;
}

.recent-work-text {
  width: 100%;
}

.b-rw {
  padding: 0.9rem 1.75rem;
  font-size: 0.75rem;
  color: var(--button);
  border: solid var(--button) 2px;
  background-color: transparent;
  border-radius: 9999px;
  font-family: "SYNE";
}
.recent-work-punchline {
  display: flex;
  flex-direction: column;
  font-size: 1.4rem;
  font-family: "SYNE";
}

.recent-work-puncline-text {
  overflow: hidden;
}

.recent-work-title {
  font-size: var(--section-heading-font-size);
  margin-bottom: 0.5rem;
  font-family: "MyFont";
}
.recent-work-button {
  margin-left: auto;
  margin-top: auto;
}
@media screen and (max-width: 1080px) {
  .recent-work-button {
    visibility: hidden;
  }
}

.recent-text-recent {
  margin-bottom: var(--section-line-gap);
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;
  display: block;
}

.recent-text-work {
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;
  display: inline-block;
}

.work-display {
  display: flex;
  flex-direction: column;
  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);
  max-width: 100%;
  gap: 15vh;
}

.work-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.work-row {
  display: flex;
}
.work-row-text {
  width: 40%;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.work-row-text-left {
  width: 40%;
  justify-content: center;
  display: flex;
  flex-direction: column;
  text-align: right;
}
.work-row-title {
  font-family: "MyFont";
  font-size: var(--work-info-text-heading);
}
.work-row-image {
  width: 60%;
  z-index: -1;
}
.skill-types {
  margin-bottom: 3rem;
  font-family: "SYNE";
}
.work-row-images {
  max-width: 100%;
  border-radius: 1.5rem;
}

@media screen and (max-width: 1080px) {
  .work-display {
    gap: 1rem;
  }
  .work-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .work-row-reverse {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .work-row-image {
    width: 100%;
  }
  .work-row-text-left {
    justify-content: center;
    width: 100%;
    text-align: center;
    align-items: center;
  }
  .work-row-text {
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .view-project-button {
    visibility: hidden;
    height: 0px;
  }

  .view-all-work {
    visibility: visible !important;
  }
}

.view-all-work {
  margin-left: auto;
  margin-right: auto;
  visibility: hidden;
}

.vaw-button {
  padding: var(--main-button-vertical-padding)
    var(--main-button-horizontal-padding);
  font-size: var(--main-button-font-size);
  color: var(--button);
  border: solid var(--button) 2px;
  background-color: transparent;
  border-radius: 9999px;
  font-family: "SYNE";
}

.who-are-we {
  display: flex;
  flex-direction: column;
  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);
  max-width: 100%;
  padding-top: 10rem;
  padding-bottom: 4rem;
}
.who-are-we-title {
  font-family: "MyFont";
  font-size: var(--section-heading-font-size);
  display: flex;
  flex-direction: column;
}

.waw-first-line {
  margin-bottom: var(--section-line-gap);
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;
  width: max-content;
}
.waw-second-line {
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;
  display: inline-block;
  width: max-content;
}

.waw-overflow-line {
  overflow: hidden;
}
.waw-p1 {
  display: flex;
  flex-direction: column;
  font-family: "SYNE";
  font-size: var(--waw-para1-font-size);
}

.waw-p2 {
  margin-top: 1rem;

  font-family: "SYNE";
  display: flex;
  flex-direction: column;
}

.waw-p2-text {
  margin-left: auto;
  margin-bottom: 3rem;
  font-size: 1rem;
  width: 42%;
  line-height: 1.5rem;
  word-wrap: none;
}

@media screen and (min-width: 1500px) {
  .waw-p2-text {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 500px) {
  .waw-p2-text {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 760px) {
  .waw-p2-text {
    margin-left: 0px;
    width: 100%;
  }
}
.waw-button {
  margin-top: 3rem;
}
.waw-button-text {
  padding: 0.9rem 1.75rem;
  font-size: 0.75rem;
  color: var(--button);
  border: solid var(--button) 2px;
  background-color: transparent;
  border-radius: 9999px;
  font-family: "SYNE";
}
.cards {
  display: flex;
  flex-direction: row;
  padding-left: var(--card-padding-left);
  padding-right: var(--card-padding-right);
  max-width: 100%;
  overflow-x: hidden;

  padding-bottom: 10rem;
}

.two-card-section {
  width: 50%;
}
.card-cardsection {
  background-color: var(--cardHover);
  height: 350px;
  border-radius: 1.5rem;
  margin-left: 1rem;
  margin-right: 0.3rem;
  margin-bottom: 1.2rem;
  padding: 3.5rem;
  padding-top: 2rem;
  transition: background-color 0.2s linear;
  /* height: clamp(350px,55vh,); */
}
.card3-cardsection {
  background-color: var(--cardHover);
  height: 350px;
  border-radius: 1.5rem;
  margin-left: 1rem;
  margin-right: 0.3rem;
  margin-bottom: 1.2rem;
  margin-top: 25vh;
  padding: 3.5rem;
  padding-top: 2rem;
  transition: background-color 0.2s linear;
}
.card-number {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.card1:hover {
  background-color: #c93202;
}
.card2:hover {
  background-color: #a1c9b8;
  color: rgb(18, 19, 21);
}
.card3:hover {
  background-color: #c8d1d1;
  color: rgb(18, 19, 21);
}

.card4:hover {
  background-color: #decf3e;
  color: rgb(18, 19, 21);
}

.card-text {
  font-family: "MyFont";
  font-size: 1.8rem;
  text-align: right;
  display: flex;
  flex-direction: column;
}
.card-section-description {
  margin-bottom: -0.5rem;
}

@media screen and (max-width: 960px) {
  .cards {
    display: flex;
    flex-direction: column;
  }
  .card-cardsection {
    width: 100%;
    height: 35vh;
  }
  .two-card-section {
    width: 100%;
  }
  .card3-cardsection {
    width: 100%;
    height: 35vh;
    margin-top: 0px;
  }

  .card1 {
    background-color: #c93202;
    min-height: 300px;
  }
  .card2 {
    background-color: #a1c9b8;
    color: rgb(18, 19, 21);
    min-height: 300px;
  }
  .card3 {
    background-color: #c8d1d1;
    color: rgb(18, 19, 21);
    min-height: 300px;
  }

  .card4 {
    background-color: #decf3e;
    color: rgb(18, 19, 21);
    min-height: 300px;
  }
}
.partner-love-introduction {
  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);
  display: flex;
}
@media screen and (max-width: 1230px) {
  .partner-love-introduction {
    display: block;
  }
}
.pl-title {
  font-family: "MyFont";
  font-size: var(--section-heading-font-size);
}
.partner-love-punchline {
  margin-top: auto;
  margin-left: auto;
  font-family: "SYNE";
  font-size: var(--punchline-font-size);
}
.pl-puncline-text {
  overflow: hidden;
}
.pl-title-first-line {
  margin-bottom: var(--section-line-gap);
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;
  display: block;
}

.pl-title-second-line {
  margin-bottom: -1.9rem;
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;
  display: inline-block;
}

.card-reviews::-webkit-scrollbar {
  display: none;
}

.card-reviews {
  margin-top: 6rem;
  overflow: scroll;
  overflow-y: hidden;

  touch-action: pan-y pan-x;
  display: flex;
  gap: 1rem;
  cursor: grab;
}

.dragging {
  cursor: grab;
  user-select: none;
}

@media screen and (max-width: 1170px) {
  .review-card {
    height: 80vh !important;
    width: 60vw !important;
  }
  .review-card2 {
    height: 80vh !important;
    width: 60vw !important;
  }
}
@media screen and (max-width: 800px) {
  .review-card {
    height: 60vh !important;
    width: 70vw !important;
  }
  .review-card2 {
    height: 60vh !important;
    width: 70vw !important;
  }
}

@media screen and (max-width: 612px) {
  .review-card {
    height: 70vh !important;
    width: 90vw !important;
  }
  .review-card2 {
    height: 70vh !important;
    width: 90vw !important;
  }
}
@media screen and (max-width: 447px) {
  .review-card {
    height: 60vh !important;
    width: 90vw !important;
  }
  .review-card2 {
    height: 60vh !important;
    width: 90vw !important;
  }
}

.review-card {
  height: 95vh;
  border-radius: 1.5rem;
  border: solid var(--line-color) 3px;
  width: 44vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  touch-action: auto;
  min-height: 420px;
  max-height: 800px;
  max-width: 700px;
}

.review-elements {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.review-img {
  border-radius: 50%;
  height: 7.5rem;
  margin-bottom: 2rem;
  z-index: 1;
}
.person-name {
  font-family: "SYNE";
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.designation {
  font-size: 0.8rem;
  font-family: "SYNE";
  margin-bottom: 2rem;
}

.review-card2 {
  height: 95vh;
  border-radius: 1.5rem;
  border: solid var(--line-color) 3px;
  width: 44vw;

  display: flex;
  touch-action: auto;
  flex-shrink: 0;
  justify-content: center;
  padding: 3rem 3rem;
  min-height: 420px;
  max-height: 800px;
  max-width: 700px;
}

@media screen and (max-width: 800px) {
  .review-card2 {
    padding: 1rem 2rem 1rem 2rem !important;
  }
}
.review-card2:hover {
  background-color: var(--cardHover);
  border: none;
}
.review-elements2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.quote-img {
  margin-bottom: 2rem;
}
.review-card-2-description {
  font-family: "SYNE";
  font-size: var(--review-card-descript-font-size);
  text-align: center;
}
.rc2-person {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "SYNE";
  text-align: center;
  gap: 1rem;
}
.rc2-name {
  font-size: 1.1rem;
  margin-bottom: -0.8rem;
}
.rc2-designation {
  font-size: 0.8rem;
}
.rc2-image {
  width: 60px;
  border-radius: 50%;
  z-index: 1;
}
.rc-button {
  background-color: rgb(235, 0, 0);
  padding: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 1.5rem;
  color: white;
  font-family: "SYNE";
  border: none;
}

.review-card:hover {
  background-color: var(--cardHover);
  border: none;
}
.dive-in-section {
  max-width: 100%;
}

.dive-in-section {
  margin-top: 13rem;
}
.dive-in-container-reverse {
  overflow: hidden;
  display: flex;
  gap: 80px;
}
.dive-in-container {
  overflow: hidden;
  display: flex;
  gap: 80px;
}

@media screen and (min-width: 1200px) {
  .dive-in-container {
    gap: 140px;
  }
  .dive-in-container-reverse {
    gap: 140px;
  }
}

@media screen and (max-width: 768px) {
  .dive-in-container {
    gap: 40px;
  }
  .dive-in-container-reverse {
    gap: 40px;
  }
}

.di-first-text {
  font-family: "MyFont";
  font-size: var(--section-heading-font-size);
  display: inline-block;
  flex-shrink: 0;
  align-items: center;
  /* gap: 3rem; */
}

.dribble-container {
  margin-top: 10rem;
  width: 100%;
  /* overflow: hidden; */

  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);
  position: relative;
  justify-content: center;
  display: flex;
  align-items: center;
}

.dribble-overlay-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  z-index: -1;
  position: relative;
  justify-content: center;
  /* overflow-x: hidden; */
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .dribble-overlay-images {
    display: flex;
    flex-direction: column;
  }
  .dribble-image {
    width: 100% !important;
  }
  .i5 {
    display: none;
  }
  .i6 {
    display: none;
  }
}

.dribble-image {
  border-radius: 1.5rem;
  width: 40vw;
}

.dribble-pop-up {
  position: absolute;
  top: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: -3;
  opacity: 0;
}
.dribble-logo {
  display: flex;
  justify-content: center;
  width: auto;
  margin-bottom: 1.7rem;
}

.db-logo {
  width: 10rem;
}

.dl-logo-text {
  overflow: hidden;
}

.dribble-logo-text {
  text-align: center;
  font-family: "SYNE";
  font-size: 1.4rem;
  margin-bottom: 2.5rem;
}

@media screen and (max-width: 480px) {
  .dribble-logo-text {
    font-size: 1.2rem;
  }
}

.db-button {
  padding: 0.9rem 1.75rem;
  font-size: 0.75rem;
  color: var(--button);
  border: solid var(--button) 2px;
  background-color: transparent;
  border-radius: 9999px;
  font-family: "SYNE";
  z-index: 99;
}

.dribble-button {
  display: flex;
  justify-content: center;
}

.social-media-section {
  max-width: 100%;
  padding: 10rem var(--padding-horizontal) 0rem var(--padding-horizontal);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sm-title {
  font-family: "MyFont";
  font-size: var(--jungle-trek-font-size);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.sm-title-line1 {
  margin-bottom: var(--section-line-gap);
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;

  text-align: center;
}

.sm-title-line2 {
  margin-bottom: var(--section-line-gap);
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;
}

.sm-title-line3 {
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;

  display: block;
}

.sm-accounts {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  padding: 0rem 16vw 0rem 16vw;
}

@media screen and (max-width: 1024px) {
  .sm-accounts {
    padding: 0rem var(--sm-accounts-padding) 0rem var(--sm-accounts-padding);
  }
  :root {
    --sm-accounts-padding: 4rem;
  }
}

@media screen and (max-width: 550px) {
  :root {
    --sm-accounts-padding: 2rem;
  }
}
@media screen and (max-width: 470px) {
  :root {
    --sm-accounts-padding: 2rem;
  }
}

.sm-account-text {
  display: flex;
  padding-bottom: 2rem;
  margin-top: 2rem;
}
.sm-name {
  font-family: "SYNE";
  font-size: 2.5rem;
  text-align: left;
}
@media screen and (max-width: 620px) {
  .sm-name {
    font-size: 2rem;
  }
  .sm-image {
    width: 2.5rem;
  }
}
@media screen and (max-width: 450px) {
  .sm-name {
    font-size: 1.8rem;
  }
  .sm-image {
    width: 2.3rem;
  }
}
.sm-image-container {
  margin-left: auto;
}
.sm-image {
  width: 3rem;
}
.sm-image-container {
  display: flex;
}

.sm-arrow {
  display: flex;
  position: relative;
}

.sm-line {
  height: 0.01rem;
  background-color: var(--line-color);
  width: 100%;
  display: inline-block;
}

.footer {
  margin-top: 10rem;
  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);
  margin-bottom: 8rem;
}

.footer-title {
  display: flex;
  margin-bottom: 4rem;
}
@media screen and (max-width: 1000px) {
  .footer-title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .ft-button {
    margin-top: 0px;
    margin-left: 0px !important;
  }
}
.ft-lines {
  font-family: "MyFont";
  font-size: var(--section-heading-font-size);
}

.ft-button {
  margin-top: auto;
  margin-left: auto;
}

.footer-button {
  padding: 0.9rem 2.75rem;
  color: black;
  border: solid var(--button) 2px;
  background-color: var(--button);

  border-radius: 9999px;
  font-family: "SYNE";
  font-size: 1rem;
}

.ft-line1 {
  margin-bottom: var(--section-line-gap);
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;
  display: block;
}
.ft-line2 {
  margin-bottom: -3.3rem;
  background: linear-gradient(
    90deg,
    var(--gradient-text-first) 50%,
    var(--gradient-text-second) 0
  );
  background-repeat: no-repeat;
  color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position-x: 100%;
  position: relative;
  display: inline-block;
}

.contact-info {
  margin-bottom: 2rem;
  margin-top: 2rem;
  display: flex;
  font-family: "SYNE";
}

.ci-value {
  font-size: 1.75rem;
}

.skype {
  margin-left: auto;
}

.skype-title {
  text-align: right;
}

.call {
  margin-left: 7vw;
}

@media screen and (max-width: 960px) {
  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .skype-title {
    text-align: left;
  }
  .skype {
    margin-left: 0px;
  }
  .call {
    margin-left: 0px;
  }
}

.watermark {
  margin-top: 6rem;
  font-family: "SYNE";
  color: --var(watermark);
  font-size: 1.3rem;
  display: flex;
}
.scrollup {
  margin-left: auto;
}
.circular-lion {
  position: fixed;
  z-index: 99;
  width: 6.5rem;
  top: 74%;
  left: 88%;
}

.hamburger-section-container {
  height: 100vh;
  max-width: 100%;
  padding-left: var(--padding-horizontal);
  padding-right: var(--padding-horizontal);
  padding-bottom: 4rem;
  display: flex;
  visibility: hidden;
}
@media screen and (max-width: 800px) {
  .hamburger-section-container {
    display: flex;
    flex-direction: column;
  }
  .hs-social-contact {
    margin-left: 0px !important;
  }
  .hs-email-phone {
    text-align: left !important;
  }
}
.hs-list {
  font-family: "MyFont";
  font-size: var(--hamburger-text-size);
  margin-top: auto;
}

.hs-social-contact {
  margin-top: auto;
  margin-left: auto;
  font-family: "SYNE";
}

.hs-work {
  margin-bottom: -1rem;
}

.hs-about {
  margin-bottom: -1rem;
}

.hs-services {
  margin-bottom: -1rem;
}
.hs-team {
  margin-bottom: -1rem;
}
.hs-contact {
  margin-bottom: -1rem;
}

.hs-email-phone {
  text-align: right;
  margin-bottom: 2rem;
}

.hs-email {
  margin-bottom: 0.5rem;
}

.hamburger-hide-class{
  display: none;
}

.hamburger-show-class{
  display: block;
}