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

html, body {
  height: 100%;
  width: 100%;
  font-family: 'ClashDisplay-Variable', serif;
}

::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  display: none;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--gradient-bg-scroll);   
}

::-webkit-scrollbar-thumb:hover {
  border-radius: 10px;
  background: var(--gradient-bg-scroll);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:root {
  --bg: #ffffff;
  --fg: #f2f2f2f2;
  --text: #111111;
  --color-primary: #7A097D;
  --color-secondary: #EB69EB;
  --product-card-bg: #F28C38;
  --career-card-bg: #1F5565;
  --gradient-bg: linear-gradient(94deg, rgba(89,179,255,1) 0%, rgba(250,72,255,1) 100%);
  --gradient-bg-scroll: linear-gradient(0deg, rgba(0,138,255,1) 0%, rgba(186,117,255,1) 39%, rgba(249,36,255,1) 87%, rgba(249,36,255,1) 87%, rgba(0,255,233,1) 100%);
  --testimonials-bg: linear-gradient(90deg, rgba(183,111,255,1) 0%, rgba(122,9,125,1) 100%);
  --font-secondary: "Raleway", serif;
}

/* ###FONTS### */

@font-face {
  font-family: 'ClashDisplay-Variable';
  src: url('../fonts/ClashDisplay-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

/* ###LENIS### */

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

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

.lenis.lenis-smooth [data-lenis-prevent] {
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}

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

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

/* ###COMMON### */

a {
  text-decoration: none;
}

.custom-container {
  padding: 1rem 1.5rem;
}

.tzi-btn {
  padding: .5rem 1.5rem;
  font-size: 1rem;
  border-radius: 50vw;
  min-width: 10rem;
  background: transparent;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gradient-btn {
  color: var(--bg);
  background: var(--gradient-bg);
  font-weight: 600;
  font-style: italic;
}

.text-bg {
  background: var(--gradient-bg);
  background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.underline-animation {
  position: relative;
}

.underline-animation::after {
  content: '';
  background: var(--gradient-bg);
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: -webkit-transform 0.25s ease-out;
  -o-transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

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

.page-container {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  -o-border-image: fill 0 -o-linear-gradient(rgba(255, 255, 255, 0.067) 60%, #ffffff);
     border-image: fill 0 -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(255, 255, 255, 0.067)), to(#ffffff));
     border-image: fill 0 linear-gradient(rgba(255, 255, 255, 0.067) 60%, #ffffff);
}

.auto-show {
  -webkit-animation: autoShowAnimation both;
          animation: autoShowAnimation both;
  animation-timeline: view(70% 5%);
}

.summer-container * {
  color: var(--text) !important;
}

.summer-container img {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ###LOADER### */

.preloader {
  position: fixed;
  height: 100dvh;
  width: 100%;
  background-color: var(--fg);
  z-index: 5;
}

.count {
  position: absolute;
  bottom: 5%;
  right: 5%;
  pointer-events: none;
}

.count p {
  font-size: 1.5rem;
  color: var(--color-primary);
}

.loader-fg {
  height: 100%;
  width: 100%;
  background-color: var(--bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  overflow: hidden;
  pointer-events: none;
}

.title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  width: 3.1vw;
  font-size: 5vw;
  font-weight: 500;
  color: var(--color-primary);
}

.title span:last-child{
  opacity: 0;
}

.loader-bg {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: var(--color-primary);
  height: 0;
  z-index: 4;
}

/* ###LANDING PAGE### */

.landing {
  position: fixed;
  height: 100dvh;
  width: 100%;
  z-index: 3;
  bottom: 0;
  overflow: hidden;
}

.sees-container {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  -o-border-image: fill 0 -o-linear-gradient(rgba(0, 0, 0, 0), #00000076);
     border-image: fill 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#00000076));
     border-image: fill 0 linear-gradient(rgba(0, 0, 0, 0), #00000076);
}

.sees-container span {
  font-size: 5vw;
  font-weight: 500;
  color: var(--bg);
  pointer-events: none;
}

.langing-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: -1;
}

.landing-btn {
  position: absolute;
  bottom: 10%;
  z-index: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  border: 1px solid var(--bg);
  color: var(--bg);
  font-size: 1.2rem;
  cursor: pointer;
}

.dot {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 1rem;
  width: 1rem;
  overflow: hidden;
  padding: .2rem;
  background-color: var(--bg);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  -webkit-transition: all ease .1s;
  -o-transition: all ease .1s;
  transition: all ease .1s;
  pointer-events: none;
}

/* ###NAVIGATION### */

.tzi-navbar {
  overflow-x: hidden;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.web-logo img {
  height: 3.5rem;
  width: 10.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.nav-toggle {
  height: 1.8rem;
  width: 1.8rem;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.index-sidebar-open img {
  mix-blend-mode: color-dodge;
}

.nav-btn {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  padding: 0;
  cursor: pointer;
}

.sidebar {
  position: fixed;
  height: 100dvh;
  width: 100%;
  background-color: var(--bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: .5rem;
  top: 0;
  right: -100%;
  z-index: 9;
  opacity: 0;
  -webkit-transition: right .5s ease;
  -o-transition: right .5s ease;
  transition: right .5s ease;
  overflow-y: scroll;
}

#sideNavToggle:checked ~ .sidebar {
  right: 0;
}

.sidebar-close {
  position: absolute;
  top: 3%;
  right: 1.3%;
}

.tzi-sidebar-body::-webkit-scrollbar {
  display: block;
}

.tzi-sidebar-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow-y: scroll;
  width: 100%;
  padding: 1rem;
}

.tzi-sidebar-body a {
  color: var(--color-secondary);
  font-size: 2rem;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.tzi-sidebar-body a:last-child {
  font-weight: 600;
}

.tzi-navbar label {
  cursor: pointer;
}

/* ###INDEX### */

.hero {
  opacity: 0;
  min-height: 100vh;
  width: 100%;
  background-image: url(../images/home-bg.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  -o-border-image: fill 0 -o-linear-gradient(#0001, #ffffff);
     border-image: fill 0 -webkit-gradient(linear, left top, left bottom, from(#0001), to(#ffffff));
     border-image: fill 0 linear-gradient(#0001, #ffffff);
  position: relative;
}

.scroll-down {
  position: absolute;
  pointer-events: none;
  bottom: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  font-weight: 600;
}

.hero-title {
  height: calc(100vh - 5rem);
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero-title h1 {
  font-size: 4vw;
  text-align: center;
  font-weight: 400;
}


.hero-subtitle {
  min-height: 100vh;
  width: 90%;
  margin: auto;
  padding-block: 4rem;
}

.hero-sub-data,
.subtitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8rem;
}

.sub-text h4 {
  font-size: 3rem;
  font-weight: 500;
  color: var(--color-primary);
}

.subtitle>.sub-text:first-child{
  text-align: start;
}

.subtitle>.sub-text:last-child {
  text-align: end;
}

.sub-text p {
  font-size: 1.5rem;
  color: var(--color-primary);
}

@supports (animation-timeline: view()) {
  .auto-blur {
    animation: autoBlurAnimation both;
    animation-timeline: view();
  }

  /* .summer-container img {
    animation: autoShowAnimation both;
    animation-timeline: view(70% 5%);
  } */
}

.brands {
  min-height: 80vh;
  width: 100%;
  background-color: var(--bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2.5rem;
  padding: 2rem 0;
  overflow-x: hidden;
  padding-block: 4rem;
}

.slider {
  width: 100%;
  height: var(--heigth-slider);
}

.slider-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  width: 100%;
  min-width: calc(var(--width-slider) * var(--slider-quant));
  position: relative;
}

.slider-item {
  height: var(--heigth-slider);
  width: var(--width-slider);
  position: absolute;
  left: 100%;
  -webkit-animation: autoRun 20s linear infinite;
          animation: autoRun 20s linear infinite;
  -webkit-animation-delay: calc( (20s / var(--slider-quant)) * (var(--item-position) - 1) - 20s) !important;
          animation-delay: calc( (20s / var(--slider-quant)) * (var(--item-position) - 1) - 20s) !important;
}

.slider-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.slider:hover .slider-item {
  -webkit-animation-play-state: paused !important;
          animation-play-state: paused !important;
}

.slider[reverse=true] .slider-item {
  -webkit-animation: reverseRun 20s linear infinite;
          animation: reverseRun 20s linear infinite;
}

.process-section {
  min-height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  padding-top: 5rem;
  padding-bottom: 10rem;
}

.process-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.process-top h2 {
  font-weight: 400;
  font-size: 4vw;
}

.process-top p {
  font-size: 1.5rem;
  font-weight: 400;
}

.process-top a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.process-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-bottom: 1px solid var(--text);
}

.process-body-card {
  padding-block: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--text);
}

.process-card-data {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.process-step {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 1rem;
}

.process-card-data h3 {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .3rem;
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--text);
}

.process-card-data h3 span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.process-card-data h3 span img {
  height: 3rem;
  width: 3rem;
}

.process-card-data p {
  font-size: .9rem;
  font-family: var(--font-secondary);
}

.process-card-image {
  width: 70%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.process-img {
  height: 11rem;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  border-radius: 50vw;
}

.process-img video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.process-img video:hover {
  opacity: 1;
}

.services-section {
  height: 100vh;
  width: 100%;
  margin-top: 4rem;
}

.services-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  overflow: hidden;
}

.service-card {
  height: 100%;
  width: 25%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -o-border-image: fill 0 -o-linear-gradient(rgba(0, 0, 0, 0), #000);
     border-image: fill 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000));
     border-image: fill 0 linear-gradient(rgba(0, 0, 0, 0), #000);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  padding-inline: .5rem;
  padding-bottom: 2rem;
  color: var(--bg);
  -webkit-transition: width 1.5s ease;
  -o-transition: width 1.5s ease;
  transition: width 1.5s ease;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.service-card:hover {
  width: 100%;
  -webkit-filter: unset;
          filter: unset;
}

.services-wrapper:hover .service-card:not(:hover) > .service-text {
  opacity: 0;
}

.service-text {
  min-height: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  opacity: 1;
  -webkit-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.service-text h6 {
  font-family: "ClashDisplay-Medium", "Raleway", serif;
  font-size: 1.5rem;
  margin: 0;
}

.service-text p {
  font-size: 1rem;
  margin: 0;
  font-family: var(--font-secondary);
}

.testimonials-section {
  height: 100vh;
  width: 100%;
  /* background: var(--testimonials-bg); */
  background: var(--gradient-bg);
  overflow-x: hidden;
}

.testimonials-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  height: 100%;
  width: 200vw;
  -webkit-transform: translateX(5%);
      -ms-transform: translateX(5%);
          transform: translateX(5%);
}

.testimonial-card {
  height: 80%;
  width: 500px;
  background-color: var(--bg);
  border-radius: 20px;
  color: var(--text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
}

.testimonial-card h2 {
  padding: 2rem;
  font-size: 6rem;
  font-weight: 400;
}

.testimonial-card h4 {
  padding: 1rem;
  font-size: 2.5rem;
  font-weight: 400;
}

.testimonial-card p {
  padding-inline: 1rem;
  font-size: 1.2rem;
  font-weight: 400;
  font-family: var(--font-secondary);
}

.testimonial-card img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.blog-section {
  min-height: 100vh;
  margin-block: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.blog-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.blog-top span {
  font-size: 2rem;
  color: var(--text);
}

.blog-top h3 {
  font-size: 5rem;
  font-weight: 400;
}

.blog-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.blog-body > div {
  height: 20rem;
  border-top-right-radius: 100px;
  overflow: hidden;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.blog-body > div img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  -webkit-transition: scale .5s ease;
  -o-transition: scale .5s ease;
  transition: scale .5s ease;
}

/* .blog-thumb-lg {
  width: 95%;
} */

/* .blog-thumb-md {
  width: 55%;
} */

/* .blog-thumb-sm {
  width: 35%;
} */

.blog-thumb:nth-child(1),
.blog-thumb:nth-child(4) {
  width: 95%;
}

.blog-thumb:nth-child(2),
.blog-thumb:nth-child(5) {
  width: 55%;
}

.blog-thumb:nth-child(3),
.blog-thumb:nth-child(6) {
  width: 35%;
}

.blog-desc {
  position: absolute;
  color: var(--bg);
  bottom: -50%;
  padding: 1rem;
  -o-border-image: fill 0 -o-linear-gradient(rgba(0, 0, 0, 0), #000);
     border-image: fill 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000));
     border-image: fill 0 linear-gradient(rgba(0, 0, 0, 0), #000);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  -webkit-transition: bottom .5s ease;
  -o-transition: bottom .5s ease;
  transition: bottom .5s ease;
  min-height: 50%;
  width: 100%;
}

.blog-desc h5 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 1.2rem;
  opacity: 0;
  -webkit-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
  transition: opacity 2s ease;
}

.blog-desc p {
  opacity: 0;
  -webkit-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
  transition: opacity 2s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.blog-body > div:hover img {
  scale: 1.1;
}

.blog-body > div:hover .blog-desc {
  bottom: 0;
}

.blog-body > div:hover .blog-desc h5 {
  opacity: 1;
}

.blog-body > div:hover .blog-desc p {
  opacity: 1;
}

.blog-foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 2rem;
  padding-top: 2rem;
}

.tzi-promise-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 5rem;
  padding-bottom: 10rem;
  overflow-x: hidden;
}

.tzi-promise-section h4 {
  font-size: 3vw;
  text-align: center;
  text-wrap: pretty;
  font-weight: 400;
  width: 80%;
  margin-bottom: 3rem;
}

.promise-slider {
  margin-block: 1rem;
}

.promise-slider-item img{
  border-radius: 50vw;
  overflow: hidden;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ###SERVICES### */

.services-container-section {
  position: sticky;
  top: 0;
  background-position:center -5vh;
  background-image: url(../images/page-bg/services-bg.jpg);
}

.service-page-heading {
  position: absolute;
  left: 50%;
  top: 15%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.service-page-heading h1,
.about-page-heading h1 {
  font-size: 3.5rem;
  font-weight: 600;
  font-style: italic;
  padding-right: .5rem;
}

.service-page-heading h2,
.about-page-heading h2 {
  font-size: 2rem;
  font-weight: 400;
  font-family: var(--font-secondary);
  color: var(--color-primary);
}

.service-page-heading p,
.about-page-heading p {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text);
}

.services-data-section {
  width: 100%;
  position: sticky;
  top: 0;
  background-color: var(--bg);
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15rem, var(--bg)));
  -webkit-mask: linear-gradient(transparent, var(--bg) 15rem);
          mask: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15rem, var(--bg)));
          mask: linear-gradient(transparent, var(--bg) 15rem);
  padding-top: 20rem;
}

.service-card-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  width: 80%;
  margin: auto;
  margin-bottom: 2rem;
}

.service-card-container h3 {
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: 2rem;
  font-weight: 500;
}

.service-card-container p,
.service-card-container ul li,
.about-data-wrapper p,
.about-data-wrapper ul li {
  font-size: 1.1rem;
  font-weight: 400;
  font-family: var(--font-secondary);
  color: var(--text);
}

.about-data-wrapper > ul > li {
  margin-left: 20px;
  list-style-type: disc;
}

.service-card-container ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.service-card-container img {
  height: 15rem;
  width: 100%;
  border-radius: 50vw;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ###EVENTS### */

.event-body {
  gap: 2rem !important;
}

.event-body,
.event-container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.event-thumb {
  height: 20rem;
  border-top-right-radius: 100px;
  overflow: hidden;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.event-thumb img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  -webkit-transition: scale .5s ease;
  -o-transition: scale .5s ease;
  transition: scale .5s ease;
}

.event-thumb:hover img {
  scale: 1.1;
}

.event-thumb:hover .blog-desc {
  bottom: 0;
}

.event-thumb:hover .blog-desc h5 {
  opacity: 1;
}

.event-thumb:hover .blog-desc p {
  opacity: 1;
}

.event-img-arr {
  height: 10rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.event-img-arr img {
  height: 100%;
  width: 23%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  cursor: pointer;
}

.event-img-arr img:hover {
  outline: 1px solid var(--color-primary);
  outline-offset: .2rem;
}

.event-desc h5 {
  font-family: var(--font-secondary);
  font-size: 2rem;
}

.event-desc p {
  font-family: var(--font-secondary);
}

/* ###STACKHOLDERS### */

.stackholder-container {
  padding: 2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.stackholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.stackholder-img {
  height: 30rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  border-radius: 20px;
}

.stackholder-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 20px;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  -webkit-transition: -webkit-filter .8s ease;
  transition: -webkit-filter .8s ease;
  -o-transition: filter .8s ease;
  transition: filter .8s ease;
  transition: filter .8s ease, -webkit-filter .8s ease;
}

.stackholder-img img:hover {
  -webkit-filter: unset;
          filter: unset;
}

.stackholder-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}

/* ###ABOUT### */

.about-container-section {
  background-position: center -20vh;
  background-attachment: fixed;
  background-image: url(../images/page-bg/about-bg.jpg);
}

.about-page-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 60%;
  margin: auto;
  padding: 2rem 0;
  min-height: 40vh;
  gap: 2rem;
}

.about-data-wrapper {
  min-height: 100dvh;
  width: 60%;
  margin: auto;
  gap: 1rem;
  margin-bottom: 2rem;
}

.about-data-wrapper h2 {
  font-style: italic;
  font-weight: 800;
  color: var(--color-primary);
  font-size: 1.5rem;
}

.about-data-wrapper h3 {
  font-weight: 600;
  font-family: var(--font-secondary);
  font-size: 1.8rem;
  color: var(--color-primary);
}

.about-data-wrapper h4 {
  font-weight: 400;
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--text);
}

.about-team-section {
  padding: 2rem 0;
}

.about-team-section h1 {
  font-style: italic;
  font-weight: 700;
  font-size: 2.5rem;
}

.team-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  gap: 2rem;
}

.team-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  height: 30rem;
  width: calc(32% - 1rem);
  border-radius: 5px;
  overflow: hidden;
}

.team-card img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  margin: 0;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  -webkit-transition: -webkit-filter .5s ease;
  transition: -webkit-filter .5s ease;
  -o-transition: filter .5s ease;
  transition: filter .5s ease;
  transition: filter .5s ease, -webkit-filter .5s ease;;
}

.team-card img:hover {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

.team-text {
  pointer-events: none;
  position: absolute;
  bottom: -100%;
  left: 0;
  height: 90%;
  width: 100%;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  justify-content: end;
  gap: 1rem;
  -o-border-image: fill 0 -o-linear-gradient(rgba(0, 0, 0, 0), #000);
     border-image: fill 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000));
     border-image: fill 0 linear-gradient(rgba(0, 0, 0, 0), #000);
  transition: .5s bottom ease;
}

.team-card:hover .team-text {
  bottom: 0;
}

.team-text h4 {
  color: var(--bg);
  font-weight: 600;
  font-size: 1.5rem;
  font-style: italic;
}

.team-text p {
  color: var(--bg);
  font-weight: 500;
  font-size: 1rem;
  font-family: var(--font-secondary);
}

.team-text p > * {
  color: var(--bg);
  font-weight: 500;
  font-size: 1rem;
  font-family: var(--font-secondary);
}

.blog-page-heading {
  width: 100%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}

/* ###BLOGS### */

.article-page-container {
  -o-border-image: unset;
     border-image: unset;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.article-page-top {
  margin: 2rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  width: 60%;
}

.article-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
}

.article-title {
  width: 60%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.article-title h1 {
  font-family: var(--font-secondary);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  word-wrap: break-word;
}

.article-title h3 {
  font-family: var(--font-secondary);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  margin-top: 1rem;
  word-wrap: break-word;
}

.blog-share-btn {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  padding: .5rem;
  height: 3.5rem;
  width: 3.5rem;
  cursor: pointer;
}

.blog-share-btn svg {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.article-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 1rem;
}

.article-info span {
  font-size: 1rem;
  color: var(--text);
  font-family: var(--font-secondary);
  font-weight: 600;
}

.article-banner {
  height: 25rem;
  width: 100%;
  overflow: hidden;
  border-top-right-radius: 100px;
}

.article-banner img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  -webkit-transition: scale .5s ease;
  -o-transition: scale .5s ease;
  transition: scale .5s ease;
}

.article-banner:hover > img {
  scale: 1.1;
}

.article-body {
  width: 60%;
  margin: 0 auto;
  font-size: 1.2rem;
  color: var(--text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  word-wrap: break-word;
}

.article-body > ol > ul {
  margin-left: 20px;
  list-style-type: disc;
}

.article-body > ol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: .5rem;
}

.about-author {
  width: 60%;
  margin: 2rem auto 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  font-family: var(--font-secondary);
  color: var(--text);
}

.about-author h2 {
  font-size: 2rem;
}

.about-author p {
  font-size: 1.2rem;
}

/* ###PRODUCTS### */

.product-page-top {
  margin: 2rem auto 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  width: 80%;
}

.product-page-top h1 {
  font-style: italic;
  font-weight: 600;
  font-size: 2.5rem;
}

.product-page-top p {
  font-size: 1.2rem;
  color: var(--text);
}

.products-categories {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1.5rem;
}

.product-cat-card {
  height: 12rem;
  width: 15%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--product-card-bg);
  color: var(--bg);
  gap: 1rem;
  border-radius: 25px;
  -webkit-transition: background-color .5s ease;
  -o-transition: background-color .5s ease;
  transition: background-color .5s ease;
}

.product-cat-card:hover {
  background-color: var(--color-primary);
}

.product-card-active {
  background-color: var(--color-primary);
}

.product-cat-card svg {
  height: 50%;
  width: 50%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.product-desc-body {
  margin: 2rem auto 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  width: 80%;
}

.product-desc-body h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 2rem;
}

.product-desc-body h3 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 1.5rem;
}

.product-desc-body p,
.product-desc-body ul li {
  font-size: 1.2rem;
  color: var(--text);
}

.product-desc-body > ul {
  margin-left: 20px;
  list-style-type: disc;
}

/* ###CONTACT### */

.contact-page-container {
  height: 100dvh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.contact-graphics {
  width: 50%;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.contact-vid {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.contact-vid video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.contact-info {
  padding: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  width: 100%;
  -o-border-image: fill 0 -o-linear-gradient(rgba(0, 0, 0, 0), #000);
     border-image: fill 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000));
     border-image: fill 0 linear-gradient(rgba(0, 0, 0, 0), #000);
}

.contact-socials {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.contact-social-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .5rem;
}

.contact-social-link svg {
  height: 1.5rem;
  width: 1.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.contact-social-link span {
  color: var(--bg);
  font-size: 1rem;
  font-weight: 500;
}

.contact-text {
  padding: 2rem;
  width: 50%;
  height: 100dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  overflow-y: scroll;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.contact-text::-webkit-scrollbar {
  display: block;
}

.contact-text h1 {
  font-size: 2.5rem;
  font-weight: 600;
  font-style: italic;
}

.contact-text p {
  color: var(--text);
  font-size: 1.2rem;
}

.contact-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}

.tzi-form-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: .5rem;
}

.tzi-form-information label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

.tzi-form-information input,
.tzi-form-information textarea {
  border: 1px solid var(--text);
  border-radius: 50vw;
  padding: .5rem 1.5rem;
  font-size: 1rem;
  color: var(--text);
}

.tzi-form-information textarea {
  height: 5rem;
  border-radius: 5px;
  resize: vertical;
  font-family: var(--font-secondary), serif;
  font-weight: 500;
}

.tzi-form-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .5rem;
}

.tzi-form-check input[type=checkbox] {
  height: 1.5rem;
  width: 1.5rem;
  accent-color: var(--color-primary);
}

.tzi-form-information button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/* ###CAREERS### */

.career-card-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2rem 0;
}

.careers-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.careers-heading h2 {
  font-weight: 600;
  font-size: 1.5rem;
  font-family: var(--font-secondary);
}

.careers-heading p {
  font-size: 1.2rem;
  color: var(--text);
}

.career-cards-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.career-card {
  background-color: var(--career-card-bg);
  padding: 1rem;
  color: var(--bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  border-radius: 20px;
  height: 15rem;
  width: 25%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-family: var(--font-secondary);
}

.career-card-title {
  font-weight: 700 !important;
  font-size: 1.2rem !important;
}

.career-card * {
  font-weight: 400;
  font-size: .9rem;
  color: var(--bg) !important;
}

.career-card ul li,
.career-card ol li {
  margin-left: 2rem;
  list-style-type: disc;
  font-size: 1rem !important;
  font-weight: 400;
}

.career-from-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  width: 60%;
  margin: auto;
  padding: 2rem 0 0;
}

.careers-form-wrapper {
  padding: 2rem 0 0;
}

.careers-from {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}

.careers-from-infromation {
  width: 45%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.careers-from-infromation label,
.careers-from-infromation span {
  width: 35%;
  font-weight: 600;
  font-family: var(--font-secondary);
  font-size: 1rem;
}

.careers-from-infromation input,
.careers-from-infromation select {
  width: 55%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-weight: 600;
  font-family: var(--font-secondary);
  font-size: 1rem;
  padding: .2rem 1rem;
  border-radius: 20px;
  border: 1px solid var(--text);
}

.careers-from-submit {
  width: 100%;
  padding: 2rem 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.file-upload-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-weight: 600;
  font-family: var(--font-secondary);
  font-size: 1rem;
  border-radius: 20px;
  border: 1px solid var(--text);
  overflow: hidden;
  gap: .5rem;
}

.applicant_resume-upload {
  padding: .2rem 1rem;
  background-color: var(--text);
  color: var(--bg);
  border-radius: 20px;
}

.file_name_class {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  width: 70%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/* ###SUPPORTING_PAGES### */

.supporting-page-container {
  -o-border-image: unset;
     border-image: unset;
}

.supporting-wrapper {
  margin: 2rem auto 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  width: 80%;
}

.supporting-wrapper h1 {
  font-style: italic;
  font-weight: 600;
  font-size: 2.5rem;
}

.supporting-wrapper h2 {
  font-weight: 600;
  font-size: 1.5rem;
  font-family: var(--font-secondary);
}

.supporting-wrapper p,
.supporting-wrapper ul li,
.supporting-wrapper ol li,
.supporting-wrapper a {
  font-size: 1.2rem;
  color: var(--text);
}

.supporting-wrapper ul li,
.supporting-wrapper ol li {
  margin-left: 20px;
  list-style-type: disc;
}

.supporting-wrapper p b {
  font-weight: 500;
}

.csr-page-heading {
  text-align: center;
  min-height: 100vh;
}

.csr-page-heading h1 {
  font-style: italic;
  font-weight: 600;
  font-size: 2.5rem;
}

.csr-page-heading h2 {
  font-weight: 600;
  font-size: 1.5rem;
  font-family: var(--font-secondary);
  color: var(--text);
}

.csr-wrapper {
  width: 60%;
}

/* ###PROCESS### */

.process-wrapper,
.process-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.process-content {
  width: 60%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.process-content h2 {
  font-weight: 700;
  font-family: var(--font-secondary);
  font-size: 1.5rem;
}

.process-content h3 {
  font-weight: 400;
  font-size: 1.8rem;
}

.process-testimonial {
  padding: 1.5rem;
  color: var(--bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  border-radius: 0 50px 50px 50px;
}

.process-container:nth-child(1) > .process-testimonial {
  background-color: #1F5565;
}

.process-container:nth-child(2) > .process-testimonial {
  background-color: #F28C38;
}

.process-container:nth-child(3) > .process-testimonial {
  background-color: #7A097D;
}

.process-container:nth-child(4) > .process-testimonial {
  background-color: #1F5565;
}

.process-testimonial h3 {
  font-size: 1.2rem;
  color: var(--bg) !important;
  font-family: var(--font-secondary);
}

.process-testimonial p {
  font-size: 1rem;
  color: var(--bg) !important;
}

/* ###FOOTER### */

.tzi-footer {
  min-height: 30dvh;
  background: var(--gradient-bg);
  margin-top: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 50px 50px 0 0;
  color: var(--bg);
}

.foot-top {
  padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}

.foot-top p {
  font-size: 1.1rem;
  font-weight: 400;
}

.foot-mid {
  padding: 1rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem
}

.foot-nav {
  width: 60%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.foot-nav-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.foot-nav-title {
  width: 8%;
}

.foot-nav-links {
  width: 90%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.foot-nav-links a {
  color: var(--bg);
  font-size: 1.1rem;
  font-weight: 300;
}

.foot-addr {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.addr-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.addr-img {
  width: 5%;
}

.addr-text {
  width: 90%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.addr-text a{
  color: var(--bg);
  font-weight: 300;
}

.foot-bot {
  border-top: 1px solid var(--bg);
  padding: 1rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.foot-socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
}

/* ###POPUP_IMAGE_SLIDER### */

.popup-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
}

.popup-slider.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.popup-slider .slider-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100dvh;
  width: 100%;
}

.popup-slider .slider-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  opacity: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.popup-slider .close-btn,
.popup-slider .prev-btn,
.popup-slider .next-btn {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: var(--bg);
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  z-index: 1001;
  height: 2.5rem;
  width: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.popup-slider .close-btn {
  top: 2%;
  right: 2%;
}

.popup-slider .prev-btn {
  left: 2%;
}

.popup-slider .next-btn {
  right: 2%;
}

.slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ###MOBILE_ELEMENTS### */

.mobile-bottom-bar {
  display: none;
}

/* ###ANIMATIONS### */

@-webkit-keyframes autoBlurAnimation {
  0%{
    -webkit-filter: blur(40px);
            filter: blur(40px);
  }45%,55%{
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }100%{
    -webkit-filter: blur(40px);
            filter: blur(40px);
  }
}

@keyframes autoBlurAnimation {
  0%{
    -webkit-filter: blur(40px);
            filter: blur(40px);
  }45%,55%{
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }100%{
    -webkit-filter: blur(40px);
            filter: blur(40px);
  }
}

@-webkit-keyframes autoRun {
  from {
    left: 100%;
  }to {
    left: calc(var(--width-slider) * -1);
  }
}

@keyframes autoRun {
  from {
    left: 100%;
  }to {
    left: calc(var(--width-slider) * -1);
  }
}

@-webkit-keyframes reverseRun {
  from {
    left: calc( var(--width-slider) * -1)
  }to {
    left: 100%;
  }
}

@keyframes reverseRun {
  from {
    left: calc( var(--width-slider) * -1)
  }to {
    left: 100%;
  }
}

@-webkit-keyframes autoShowAnimation {
  from {
    opacity: 0;
    -webkit-transform: translateY(200px) scale(.3);
            transform: translateY(200px) scale(.3);
  }to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}

@keyframes autoShowAnimation {
  from {
    opacity: 0;
    -webkit-transform: translateY(200px) scale(.3);
            transform: translateY(200px) scale(.3);
  }to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}

@media only screen and (max-width: 991px) and (min-width: 280px) {
  .dot {
    display: none;
  }

  .loader-fg, .sees-container {
    gap: .5rem;
  }

  .landing-btn {
    text-wrap: nowrap;
  }

  .tzi-footer {
    display: none;
  }

  .custom-container {
    padding: 1rem;
  }

  .preloader, .landing {
    width: 100vw;
  }

  .hero {
    background-image: url(../images/home-page-mob-bg.jpg);
  }

  .web-logo img {
    height: 2.5rem;
    width: 7.5rem;
  }

  .hero-title h1 {
    font-size: 2rem;
  }

  .scroll-down {
    display: none;
  }

  .sub-text h4 {
    font-size: 1.5rem;
  }

  .sub-text p, .process-top p {
    font-size: 1rem;
  }

  .process-top h2 {
    font-size: 2rem;
  }

  .process-body-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .process-card-data, .process-card-image {
    width: 100%;
  }

  .services-section {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }

  .services-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-radius: 0;
  }

  .service-card {
    width: 100%;
    height: 25rem;
    -webkit-filter: unset;
            filter: unset;
  }

  .service-text p {
    opacity: 1;
  }

  .testimonials-container {
    width: 600vw;
  }

  .testimonial-card h2 {
    padding: 1rem;
    font-size: 4rem;
  }

  .testimonial-card h4 {
    font-size: 1.8rem;
  }

  .testimonial-card p {
    font-size: 1rem;
  }

  .blog-thumb {
    width: 100% !important;
  }

  .blog-desc {
    bottom: 0;
  }

  .blog-desc h5, .blog-desc p {
    opacity: 1;
  }

  .process-top a, .blog-foot a,
  .careers-from-submit button {
    width: 100%;
  }

  .tzi-promise-section h4 {
    font-size: 1.5rem;
    width: 100%;
  }

  .mobile-bottom-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: sticky;
    bottom: 0;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1rem;
    background: var(--gradient-bg);
    padding: 1rem .5rem;
  }

  .mobile-bottom-bar a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: .5rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--color-primary);
  }

  .mobile-bottom-bar a svg {
    height: 1.5rem;
    width: 1.5rem;
    -o-object-fit: contain;
       object-fit: contain;
  }

  .mobile-bottom-bar a span {
    font-size: .8rem;
  }

  .mob-op-active svg path {
    stroke: var(--bg);
  }

  .mob-op-active span {
    color: var(--bg);
  }

  .about-page-heading,
  .about-data-wrapper {
    width: 100%;
  }

  .team-card,
  .contact-text,
  .tzi-form-information button,
  .product-page-top,
  .product-desc-body,
  .article-page-top,
  .article-body,
  .about-author,
  .supporting-wrapper,
  .process-content,
  .career-from-container,
  .careers-from-infromation {
    width: 100%;
  }

  .contact-text,
  .about-team-section {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 1rem;
  }

  .contact-graphics {
    width: 100%;
    height: 90dvh;
  }

  .contact-page-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    gap: 1rem;
  }

  .contact-info {
    padding: 1rem;
  }

  .products-categories,
  .career-cards-wrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .product-cat-card {
    width: 45%;
  }

  .service-page-heading h1, .about-page-heading h1 {
    font-size: 2.5rem;
  }

  .service-page-heading h2, 
  .about-page-heading h2,
  .article-title h1,
  .about-author h2 {
    font-size: 1.5rem;
  }

  .service-page-heading p, 
  .about-page-heading p,
  .service-card-container p, 
  .service-card-container ul li, 
  .about-data-wrapper p, 
  .about-data-wrapper ul li,
  .supporting-wrapper p, 
  .supporting-wrapper ul li, 
  .supporting-wrapper ol li, 
  .supporting-wrapper a {
    font-size: 1rem;
  }

  .service-page-heading,
  .service-card-container {
    width: 95%;
  }

  .services-data-section {
    padding-top: 20rem;
  }
  
  .service-card-container ul {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }

  .service-card-container img {
    border-radius: 20px;
  }

  .event-img-arr {
    overflow-x: scroll;
    padding-bottom: .5rem;
  }

  .event-img-arr::-webkit-scrollbar {
    height: 5px;
    display: block;
  }

  .event-img-arr::-webkit-scrollbar-thumb {
    background: var(--gradient-bg);   
  }
  
  .event-img-arr::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-bg);
  }

  .event-img-arr img {
    width: 34%;
  }

  .csr-page-heading {
    min-height: 70dvh;
  }

  .career-card {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
  }
  
  .process-img video {
    display: none;
  }

  .about-data-wrapper img {
    width: 100% !important;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .team-card img {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
}

@media only screen and (max-width: 767px) and (min-width: 551px) {

  .testimonial-card img,
  .team-card img {
    -o-object-position: top;
       object-position: top;
  }

  .team-card {
    width: 45%;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }

  .team-container {
    gap: 1rem;
  }

  .mobile-bottom-bar {
    padding: .5rem 1.5rem;
  }

}

@media only screen and (max-width: 991px) and (min-width: 768px) {

  .hero-title h1 {
    font-size: 3rem;
  }

  .sub-text h4 {
    font-size: 2rem;
  }

  .sub-text p, .process-top p {
    font-size: 1.2rem;
  }

  .process-top a, .blog-foot a, .careers-from-submit button {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .services-section {
    height: 50dvh;
  }

  .services-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .service-card {
    height: 100%;
    width: 25%;
  }

  .service-text { 
    min-height: 90%;
  }

  .testimonial-card h2 {
    font-size: 8rem;
  }

  .testimonial-card h4 {
    font-size: 2.5rem;
  }

  .testimonial-card p {
    font-size: 1.5rem;
  }

  .blog-thumb-md {
    width: 55%;
  }

  .blog-thumb-sm {
    width: 35%;
  }

  .tzi-promise-section h4 {
    font-size: 2rem;
    width: 90%;
  }

  .mobile-bottom-bar {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 5rem;
  }

  .product-cat-card {
    width: 30%;
  }

  .team-card {
    width: 47%;
  }

  .contact-page-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }

  .career-card {
    height: 15rem;
    width: 48%;
  }

}

@media only screen and (max-width: 1199px) and (min-width: 992px) {

  .dot {
    display: none;
  }

  .testimonials-container {
    width: 230vw;
  }

  .testimonial-card h2 {
    padding: 1rem;
    font-size: 4rem;
  }

  .testimonial-card h4 {
    font-size: 1.5rem;
  }

  .testimonial-card p {
    font-size: 1rem;
  }

  .foot-nav-title {
    width: 10%;
  }

  .foot-nav-links a {
    font-size: 1rem;
  }

  .about-page-heading,
  .about-data-wrapper,
  .career-from-container,
  .product-cat-card,
  .article-page-top,
  .article-body,
  .about-author,
  .csr-wrapper {
    width: 80%;
  }

  .process-content {
    width: 100%;
  }

  .career-cards-wrapper,
  .products-categories {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .career-card {
    width: 45%;
  }

  .product-cat-card {
    width: 30%;
  }
}

@media only screen and (max-width: 1450px) and (min-width: 1200px) {}

@media only screen and (max-width: 1950px) and (min-width: 1851px) {}

@media only screen and (min-width: 1951px) {}

.about-team-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-team-card {
  min-height: 15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.about-team-card:nth-child(even) {
  flex-direction: row-reverse;
}

.about-team-image {
  width: 40% !important;
  height: 30rem !important;
  object-fit: contain;
  filter: grayscale(1);
  transition: all .3s ease;
}

.about-team-card:hover .about-team-image {
  filter: unset;
}

.about-team-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text) !important;
}

.about-team-text h4 {
  font-weight: 800;
}

.clip-show {
  animation: clipShowAnimation both;
  animation-timeline: view(70% 5%);
}

@keyframes clipShowAnimation {
  from {
    clip-path: polygon(0 100%, 100% 100%, 100% 50%, 1% 50%);
  }to {
    clip-path: polygon(0 0, 100% 0%, 100% 99%, 0% 100%);
  }
}

@media only screen and (max-width: 551px) and (min-width: 280px) {
  .about-team-card {
    flex-direction: column !important;
    height: fit-content;
  }
  .about-team-image {
    width: 100% !important;
    filter: unset;
  }
}

@media only screen and (max-width: 767px) and (min-width: 551px) {
  .about-team-image {
    height: 20rem !important;
    filter: unset;
  }
}