@import url("https://use.typekit.net/xjp7rtu.css");
/*
Let's get the font minimum and preferred font-sizes and screen widths in pixels
We know that we want the font size at the root level to be 10px for the design screen size of 430px.
We will use rem units in the individual elements to scale this size.
By trial and error, we find that for the minimum supported screen size (320px) to be 7.6px
*/
/*
Consider a graph with screen size as the x axis, and the font size as the y axis.
We can plot a line with the two points (min-screen-width, min-font-size), (preferred-screen-width, preferred-font-size)
Note that formula for a line is:
y = mx + b
where
m is the slope of the line
    m = (y2 - y1)/(x2 - x1)
b is the y intercept
    y - y1 = m(x - x1)
    at the y intercept, x = 0, y = b
    b - y1 = m(0 - x1)
    b = -m(x1) + y1
Calculate those values
*/
:root {
  /*
  First, we clamp the font size by making sure it never goes below the minimum (47.5% of 16px)
  and above the maximum (72.5% of 16px)
  Next, we calculate the font size - note that we have calculated the slope and intercept of the graph above
  As specified, the graph takes the screen width on the x axis, and font size for the y axis. Solving for y
  y = mx + b
  = (slope * screen width) + intercept
  = (slope * 100vw) + intercept
  Finally, plugging in this final equation into the clamp preferred option
  */
  font-size: clamp(47.5%, 2.1818181818vw + 0.6181818182px, 72.5%);
}

body {
  background: black;
}

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

@font-face {
  font-family: "futura";
  src: url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}
@font-face {
  font-family: "futura";
  src: url("https://use.typekit.net/af/053fc9/00000000000000003b9af1e4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/053fc9/00000000000000003b9af1e4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/053fc9/00000000000000003b9af1e4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../common/fonts/Open_Sans/static/OpenSans-Regular.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../common/fonts/Open_Sans/static/OpenSans-Medium.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../common/fonts/Open_Sans/static/OpenSans-Bold.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
header,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "futura", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.case-studies-holder .case-study:nth-child(odd) .circle:nth-child(1) {
  top: 0;
  left: 0;
  background-color: #E8E8E8;
}
.case-studies-holder .case-study:nth-child(odd) .circle:nth-child(2) {
  bottom: 0;
  right: -11.626vw;
  background-color: #F2F2F2;
}
.case-studies-holder .case-study:nth-child(odd) .circle:nth-child(3) {
  bottom: 4.8441666667vw;
  left: -12.9177777778vw;
  background-color: rgba(160, 109, 150, 0.2431372549);
}
.case-studies-holder .case-study:nth-child(odd) .circle:nth-child(4) {
  display: none;
}
.case-studies-holder .case-study:nth-child(odd) .circle:nth-child(5) {
  bottom: -1.6147222222vw;
  left: 0;
  background-color: rgba(110, 167, 53, 0.2431372549);
}
@media screen and (min-width: 1024px) {
  .case-studies-holder .case-study:nth-child(odd) .circle:nth-child(2) {
    bottom: 0;
    right: -4vw;
  }
  .case-studies-holder .case-study:nth-child(odd) .circle:nth-child(3) {
    bottom: 1.6666666667vw;
    left: -4.4444444444vw;
  }
  .case-studies-holder .case-study:nth-child(odd) .circle:nth-child(5) {
    bottom: -0.5555555556vw;
    left: 0;
  }
}

.case-studies-holder .case-study:nth-child(even) .circle:nth-child(1) {
  top: 0;
  left: 0;
  background-color: #E8E8E8;
}
.case-studies-holder .case-study:nth-child(even) .circle:nth-child(2) {
  bottom: 3.2294444444vw;
  left: -11.626vw;
  background-color: #F2F2F2;
}
.case-studies-holder .case-study:nth-child(even) .circle:nth-child(3) {
  top: -1.6147222222vw;
  right: -6.4588888889vw;
  background-color: rgba(113, 160, 109, 0.2431372549);
}
.case-studies-holder .case-study:nth-child(even) .circle:nth-child(4) {
  bottom: 3.2294444444vw;
  right: -10.899375vw;
  background-color: #F2F2F2;
}
.case-studies-holder .case-study:nth-child(even) .circle:nth-child(5) {
  bottom: 38.7533333333vw;
  right: -11.3030555556vw;
  background-color: rgba(128, 141, 115, 0.2431372549);
}
@media screen and (min-width: 1024px) {
  .case-studies-holder .case-study:nth-child(even) .circle:nth-child(2) {
    bottom: 1.1111111111vw;
    left: -4vw;
  }
  .case-studies-holder .case-study:nth-child(even) .circle:nth-child(3) {
    top: -0.5555555556vw;
    right: -2.2222222222vw;
  }
  .case-studies-holder .case-study:nth-child(even) .circle:nth-child(4) {
    bottom: 1.1111111111vw;
    right: -3.75vw;
  }
  .case-studies-holder .case-study:nth-child(even) .circle:nth-child(5) {
    bottom: 13.3333333333vw;
    right: -3.8888888889vw;
  }
}

.case-studies-holder .case-study .images-container {
  position: relative;
  width: 58.13vw;
  height: 58.13vw;
  margin: 0 auto 5.7rem;
}
.case-studies-holder .case-study .images-container .circle {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-studies-holder .case-study .images-container .circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-studies-holder .case-study .images-container .circle:nth-child(1) {
  position: absolute;
  width: 58.13vw;
  height: 58.13vw;
  border-radius: 50%;
  z-index: 1;
}
.case-studies-holder .case-study .images-container .circle:nth-child(2) {
  position: absolute;
  width: 29.065vw;
  height: 29.065vw;
  border-radius: 50%;
  z-index: 2;
}
.case-studies-holder .case-study .images-container .circle:nth-child(3) {
  position: absolute;
  width: 19.3766666667vw;
  height: 19.3766666667vw;
  border-radius: 50%;
  z-index: 0;
}
.case-studies-holder .case-study .images-container .circle:nth-child(4) {
  position: absolute;
  width: 14.5325vw;
  height: 14.5325vw;
  border-radius: 50%;
  z-index: 0;
}
.case-studies-holder .case-study .images-container .circle:nth-child(5) {
  position: absolute;
  width: 6.4588888889vw;
  height: 6.4588888889vw;
  border-radius: 50%;
  z-index: 0;
}
@media screen and (min-width: 1024px) {
  .case-studies-holder .case-study .images-container {
    width: 20vw;
    height: 20vw;
  }
  .case-studies-holder .case-study .images-container .circle:nth-child(1) {
    position: absolute;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    z-index: 1;
  }
  .case-studies-holder .case-study .images-container .circle:nth-child(2) {
    position: absolute;
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    z-index: 2;
  }
  .case-studies-holder .case-study .images-container .circle:nth-child(3) {
    position: absolute;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-radius: 50%;
    z-index: 0;
  }
  .case-studies-holder .case-study .images-container .circle:nth-child(4) {
    position: absolute;
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    z-index: 0;
  }
  .case-studies-holder .case-study .images-container .circle:nth-child(5) {
    position: absolute;
    width: 2.2222222222vw;
    height: 2.2222222222vw;
    border-radius: 50%;
    z-index: 0;
  }
}
@media screen and (min-width: 1023px) {
  .case-studies-holder .case-study .text-container {
    width: 30vw;
    margin: 0 10vw 0;
  }
  .case-studies-holder .case-study .text-container .title {
    text-align: left;
  }
}
.case-studies-holder .case-study .text-container .title {
  font-family: "futura";
  text-align: center;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 4.5rem;
  color: #3C3C3C;
  margin-bottom: 5rem;
}
.case-studies-holder .case-study .text-container .description {
  text-align: center;
  font-size: 1.8rem;
  line-height: 4rem;
  letter-spacing: 0.0045rem;
  color: #3C3C3C;
  margin-bottom: 5rem;
}
.case-studies-holder .case-study .text-container .know-more-button {
  display: block;
  width: fit-content;
  height: 4.5rem;
  line-height: 4.5rem;
  padding: 0 2.4rem;
  margin: 1.9rem auto 11.4rem;
  color: white;
  text-align: center;
  font-family: "futura";
  font-size: 1.8rem;
  font-weight: 500;
  background-color: #00B7A2;
  border-radius: 2.25rem;
  border: none;
  outline: none;
  cursor: pointer;
}

html {
  scroll-behavior: smooth;
}

.description-text {
  font-size: 1.8rem;
  line-height: 4rem;
  letter-spacing: 0.045rem;
}
@media screen and (min-width: 1023px) {
  .description-text {
    font-size: 1.8rem;
  }
}

.concluding-paragraph {
  font-size: 1.8rem;
  line-height: 4rem;
  letter-spacing: 0.045rem;
  color: #3C3C3C;
  font-weight: 300;
  margin: 0 0 5rem 1rem;
}
.concluding-paragraph a {
  font-weight: bold;
  color: #21BBD0;
  text-decoration: underline;
  cursor: pointer;
}

.sticky-display {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 3;
  bottom: 5vh;
}
.sticky-display .sticky-menu {
  display: flex;
  flex-direction: column;
  background-color: rgba(44, 44, 44, 0.8588235294);
  border-radius: 1.5rem;
  padding: 0.5rem;
  /* Menu header contains selected menu item and toggle */
}
@media screen and (max-width: 1024px) {
  .sticky-display .sticky-menu {
    justify-content: center;
    align-items: center;
  }
}
@media screen and (min-width: 1024px) {
  .sticky-display .sticky-menu {
    flex-direction: row;
  }
}
.sticky-display .sticky-menu .menu-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}
@media screen and (min-width: 1024px) {
  .sticky-display .sticky-menu .menu-header {
    display: none;
  }
}
.sticky-display .sticky-menu .menu-header img {
  width: 2rem;
}
.sticky-display .sticky-menu .menu-header .selected-menu {
  color: white;
  font-size: 1.5rem;
  padding-left: 1rem;
}
.sticky-display .sticky-menu .menu-header .menu-toggle {
  background-color: transparent;
  border: none;
  color: white;
  font-size: 2rem;
  line-height: 1.5rem;
  cursor: pointer;
}
@media screen and (min-width: 1024px) {
  .sticky-display .sticky-menu .menu-header .menu-toggle {
    display: none;
  }
}
.sticky-display .sticky-menu nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 30vw;
  transition: max-height 0.5s, min-width 0.5s 0.5s;
  max-height: 0; /* Collapsed by default */
  overflow: hidden;
}
.sticky-display .sticky-menu nav.active {
  max-height: 100vh; /* Expand on toggle */
  min-width: 90vw;
  transition: max-height 0.5s 0.5s, min-width 0.5s;
}
@media screen and (min-width: 1024px) {
  .sticky-display .sticky-menu nav {
    flex-direction: row;
    max-height: none;
    width: auto;
  }
}
.sticky-display .sticky-menu nav button.active {
  background-color: #737373; /* Highlight active menu item */
  color: white;
  font-weight: 600;
}
.sticky-display .sticky-menu nav button.active .selected-menu {
  font-weight: bold;
}
.sticky-display .sticky-menu nav .home-button {
  padding: 1rem 0.5rem;
  border-radius: 1rem;
  border: none;
  background-color: #2C2C2C;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.sticky-display .sticky-menu nav .home-button span {
  display: none;
}
@media screen and (max-width: 1024px) {
  .sticky-display .sticky-menu nav .home-button span {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  .sticky-display .sticky-menu nav .home-button {
    width: 100%;
  }
}
.sticky-display .sticky-menu nav .home-button img {
  width: 4rem;
}
@media screen and (max-width: 1024px) {
  .sticky-display .sticky-menu nav .home-button img {
    display: none;
  }
}
.sticky-display .sticky-menu nav .nav-container {
  padding: 0.5rem;
  background-color: #474747;
  margin: 0 0.5rem;
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  .sticky-display .sticky-menu nav .nav-container {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .sticky-display .sticky-menu nav .nav-container {
    flex-direction: row;
  }
}
.sticky-display .sticky-menu nav .nav-container button {
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid gray;
  background-color: transparent;
  color: white;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.sticky-display .sticky-menu nav .nav-container button.active {
  background-color: #353535; /* Highlight active menu item */
  color: white;
  font-weight: 600;
}
.sticky-display .sticky-menu nav .nav-container button.active .selected-menu {
  font-weight: bold;
}
@media screen and (min-width: 1024px) {
  .sticky-display .sticky-menu nav .nav-container button {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    margin-bottom: 0;
  }
}
.sticky-display .sticky-menu nav .nav-container button:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.sticky-display .sticky-menu nav .contact-button {
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  font-size: 1.2rem;
  border: none;
}
@media screen and (max-width: 1024px) {
  .sticky-display .sticky-menu nav .contact-button {
    width: 100%;
  }
}

.upfold {
  position: relative;
  background-color: #1F1F1F;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 300;
  padding: 0 30px;
  min-height: calc(100vh - 7rem);
}
@media screen and (min-width: 1023px) {
  .upfold {
    width: 100%;
    justify-content: center;
  }
}
.upfold h1 {
  margin: 0;
  line-height: 5rem;
  color: #E5E5E5;
  font-size: 3.2rem;
  letter-spacing: 0.15rem;
  text-align: left;
  font-style: normal;
  font-weight: 500;
  width: 77vw;
  padding-bottom: 3vh;
}
@media screen and (min-width: 1023px) {
  .upfold h1 {
    text-align: center;
    font-size: 4.2rem;
    width: 55vw;
    margin: 0 auto;
  }
}
.upfold .description {
  position: relative;
  height: 58%;
  display: flex;
  flex-direction: column;
  word-break: break-word;
}
@media screen and (min-width: 1023px) {
  .upfold .description {
    justify-content: center;
    align-items: center;
  }
}
.upfold .description p {
  color: #AAAAAA;
  text-align: left;
  font-weight: 100;
  margin-bottom: 3rem;
}
@media screen and (min-width: 1023px) {
  .upfold .description p {
    text-align: center;
    width: 60vw;
  }
}
.upfold .description p .second-sentence {
  display: none;
}
@media screen and (min-width: 1023px) {
  .upfold .description p .second-sentence {
    display: inline;
  }
}
.upfold .description button {
  color: #FFFFFF;
  border-radius: 2.7rem;
  border: 1rem solid #00B7A2;
  background-color: #00B7A2;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.045rem;
  font-family: "Open Sans";
  padding: 0.6rem 0;
  width: 43vw;
  margin-bottom: 5rem;
}
@media screen and (min-width: 1023px) {
  .upfold .description button {
    width: 18.7rem;
  }
  .upfold .description button a {
    font-size: 1.6rem;
  }
}
.upfold .description button a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: 1.4rem;
}
@media screen and (min-width: 1023px) {
  .upfold .description button a {
    font-size: 1.6rem;
  }
}
.upfold .pentagon {
  position: absolute;
  left: 100vw;
  bottom: 2rem;
}
.upfold .pentagon svg {
  display: block;
  width: 30rem;
  height: 30rem;
  transform: scale(1.3);
}
.upfold .pentagon svg #polygon {
  fill: #9fe05f;
}
@media screen and (min-width: 1023px) {
  .upfold .pentagon {
    left: 100vw;
    bottom: -8rem;
  }
  .upfold .pentagon svg {
    width: 67rem;
    height: 67rem;
  }
}

.case-studies-holder {
  padding: 7rem 2.5rem 1.5rem 2.5rem;
  border: 0.15rem solid rgb(122.8, 122.8, 122.8);
  padding-top: 8rem;
  background: #FFFFFF;
}
@media screen and (min-width: 1023px) {
  .case-studies-holder {
    padding-left: 4%;
    padding-right: 4%;
  }
  .case-studies-holder .concluding-paragraph {
    text-align: center;
    width: 50%;
    margin: 0 auto 5vh;
  }
}
.case-studies-holder h5 {
  color: #21BBD0;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.case-studies-holder h5::before {
  content: "";
  width: 1.5rem;
  height: 2rem;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  padding-right: 1rem;
  background-position: center;
}
@media screen and (min-width: 1024px) {
  .case-studies-holder h5 {
    text-align: center;
    justify-content: center;
  }
}
.case-studies-holder h5::before {
  background-image: url(../images//searchdocument.svg);
}
.case-studies-holder h2 {
  color: #3C3C3C;
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 4.5rem;
  text-align: left;
  margin-top: 0.5rem;
}
@media screen and (min-width: 1023px) {
  .case-studies-holder h2 {
    font-size: 2.9rem;
    text-align: center;
    margin-top: 2rem;
  }
}
.case-studies-holder .case-study-list {
  margin: 5rem 0;
}
@media screen and (min-width: 1023px) {
  .case-studies-holder .case-study-list {
    display: flex;
    justify-content: space-between;
    padding: 0 2%;
  }
}
.case-studies-holder .case-study-list li {
  line-height: 2.5rem;
  color: #3C3C3C;
  list-style: none;
}
.case-studies-holder .case-study-list li:first-child {
  position: relative;
}
.case-studies-holder .case-study-list li:first-child .pentagon {
  position: absolute;
  left: -10.5rem;
  top: -25vh;
  transform: translate(-50%, 0) rotate(25deg);
}
.case-studies-holder .case-study-list li:first-child .pentagon svg {
  fill: #B28D51;
  display: block;
  width: 57rem;
  height: 57rem;
}
@media screen and (min-width: 1023px) {
  .case-studies-holder .case-study-list li {
    width: 28vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .case-studies-holder .case-study-list li:last-child div::before {
    border: transparent;
  }
}
.case-studies-holder .case-study-list li div {
  display: flex;
  column-gap: 1.2rem;
  align-items: center;
  padding: 2rem 0rem;
}
@media screen and (min-width: 1023px) {
  .case-studies-holder .case-study-list li div {
    position: relative;
  }
}
.case-studies-holder .case-study-list li div img {
  width: 2.1rem;
  height: 2.1rem;
}
@media screen and (min-width: 1023px) {
  .case-studies-holder .case-study-list li div {
    flex-direction: column;
    justify-content: space-between;
  }
  .case-studies-holder .case-study-list li div img {
    width: 5rem;
    height: 5rem;
  }
}
.case-studies-holder .case-study-list li div label {
  font-size: 2.1rem;
  font-weight: 700;
  font-family: "Futura", sans-serif;
}
.case-studies-holder .case-study-list li .description {
  border-left: dotted 0.6rem #ebebeb;
  color: #3C3C3C;
  margin-left: 0.7rem;
  padding: 1rem 0rem 3rem 2.2rem;
}
@media screen and (min-width: 1023px) {
  .case-studies-holder .case-study-list li .description {
    padding: 0;
    margin: 0;
    margin-top: 3rem;
    text-align: center;
    border: none;
    max-width: 40rem;
  }
}
.case-studies-holder .case-study-list li:last-child .description {
  border-left: dotted 0.6rem transparent;
}
.case-studies-holder .case-study {
  display: flex;
  flex-direction: column;
  margin: 15vh 0;
}
@media screen and (min-width: 1023px) {
  .case-studies-holder .case-study {
    flex-direction: row;
    margin-bottom: 0;
  }
  .case-studies-holder .case-study:last-child {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1023px) {
  .case-studies-holder .case-study:nth-child(odd) .images-container {
    order: 2;
  }
  .case-studies-holder .case-study:nth-child(odd) .text-containter {
    order: 1;
  }
}
@media screen and (min-width: 1023px) {
  .case-studies-holder .case-study:nth-child(even) .text-containter {
    margin-right: 10vw;
  }
}

.pentagon {
  position: absolute;
  left: -10.5rem;
  top: -25vh;
  transform: translate(-50%, 0) rotate(25deg);
}
.pentagon svg {
  fill: #B28D51;
  display: block;
  width: 57rem;
  height: 57rem;
}

.customer-testimonys {
  background-color: #1F1F1F;
  padding: 0rem 2.25rem;
  padding-bottom: 6rem;
  padding-top: 8rem;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 1023px) {
  .customer-testimonys {
    padding: 8rem 4% 2rem 4%;
    flex-direction: column;
  }
  .customer-testimonys .customer-testimonys-header {
    display: flex;
    align-items: flex-start;
    justify-content: start;
    flex-direction: column;
  }
}
.customer-testimonys .customer-testimonys-header h5 {
  padding: 1.5rem 0 0;
  color: #21BBD0;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.customer-testimonys .customer-testimonys-header h5::before {
  content: "";
  width: 1.5rem;
  height: 2rem;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  padding-right: 1rem;
  background-position: center;
}
@media screen and (min-width: 1024px) {
  .customer-testimonys .customer-testimonys-header h5 {
    text-align: center;
    justify-content: center;
  }
}
.customer-testimonys .customer-testimonys-header h5::before {
  background-image: url(../images//fullstar.svg);
}
.customer-testimonys .customer-testimonys-header h2 {
  padding-bottom: 5rem;
  color: #E5E5E5;
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 4.5rem;
  text-align: left;
  margin-top: 0.5rem;
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .customer-testimonys-header h2 {
    font-size: 2.9rem;
    text-align: center;
    margin-top: 2rem;
  }
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .testimony-holder {
    display: flex;
  }
}
.customer-testimonys .customer-testimonys-container {
  position: relative;
  color: #D9D9D9;
}
.customer-testimonys .customer-testimonys-container .quotes-svg {
  position: absolute;
  width: 5rem;
  height: 4rem;
  top: -0.2rem;
  left: 0.8rem;
  opacity: 0.2;
}
.customer-testimonys .customer-testimonys-container .quotes-svg svg {
  fill: #FFFFFF;
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .customer-testimonys-container .quotes-svg {
    width: 7rem;
    height: 7rem;
    top: -1.8rem;
    left: 1rem;
  }
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .customer-testimonys-container {
    width: 50%;
  }
}
.customer-testimonys .customer-testimonys-container li {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 45rem;
  margin-bottom: 4rem;
  width: 100%;
  padding: 1rem;
  user-select: none;
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .customer-testimonys-container li {
    height: auto;
  }
}
.customer-testimonys .customer-testimonys-container li .customer-details {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-bottom: 4rem;
  width: 92%;
  position: relative;
}
.customer-testimonys .customer-testimonys-container li .customer-details::before {
  content: "";
  position: absolute;
  background-image: url(../images//pentagon-group-filled.svg);
  top: -1.2rem;
  left: -0.7rem;
  width: 12rem;
  height: 12rem;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .customer-testimonys-container li .customer-details {
    justify-content: start;
    margin-top: 6.5rem;
    padding-bottom: 4rem;
    gap: 3rem;
  }
}
.customer-testimonys .customer-testimonys-container li .customer-details img {
  width: 5.5rem;
  height: 5.5rem;
}
.customer-testimonys .customer-testimonys-container li .customer-details .customer {
  font-size: 1.8rem;
  letter-spacing: 0.027rem;
}
.customer-testimonys .customer-testimonys-container li .customer-details .customer h6 {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  font-family: "Poppins", sans-serif;
}
.customer-testimonys .customer-testimonys-container li .customer-details .customer span {
  font-weight: 300;
}
.customer-testimonys .logo-holder {
  margin: auto;
  max-width: 100vw;
  margin-top: 4rem;
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .logo-holder {
    margin: 0;
    max-width: none;
    width: 50%;
    margin-top: -8vh;
  }
}
.customer-testimonys .logo-holder .logo-wrapper {
  display: flex;
  gap: 2rem;
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .logo-holder .logo-wrapper {
    display: block;
    width: 100%;
    gap: 0;
  }
}
.customer-testimonys .logo-holder .logo-wrapper div {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-width: 100%;
  animation: scroll-left 15s linear infinite;
  -moz-animation: scroll-left 15s linear infinite;
  -webkit-animation: scroll-left 15s linear infinite;
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .logo-holder .logo-wrapper div {
    animation: none;
    -moz-animation: none;
    -webkit-animation: none;
    min-width: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: none;
    justify-self: center;
  }
  .customer-testimonys .logo-holder .logo-wrapper div:last-child {
    display: none;
  }
}
.customer-testimonys .logo-holder .logo-wrapper div img {
  width: 20rem;
  height: auto;
  filter: grayscale(100%);
}
.customer-testimonys .logo-holder .logo-wrapper div img:nth-child(6) {
  filter: grayscale(100%) contrast(55%);
}
@media screen and (min-width: 1023px) {
  .customer-testimonys .logo-holder .logo-wrapper div img {
    justify-self: center;
  }
}

.services {
  padding: 6rem 3rem 2.25rem;
  padding-top: 8rem;
  background: #FFFFFF;
  position: relative;
}
.services h5 {
  color: #21BBD0;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.services h5::before {
  content: "";
  width: 1.5rem;
  height: 2rem;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  padding-right: 1rem;
  background-position: center;
}
@media screen and (min-width: 1024px) {
  .services h5 {
    text-align: center;
    justify-content: center;
  }
}
.services h5::before {
  background-image: url(../images//devices.svg);
  background-size: 2rem;
  width: 2rem;
}
.services h2 {
  color: #3C3C3C;
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 4.5rem;
  text-align: left;
  margin-top: 0.5rem;
  width: 80%;
  position: relative;
  margin-bottom: 4rem;
}
@media screen and (min-width: 1023px) {
  .services h2 {
    font-size: 2.9rem;
    text-align: center;
    margin-top: 2rem;
  }
}
@media screen and (min-width: 1023px) {
  .services h2 {
    width: 100%;
  }
}
.services .grouped-pentagons {
  position: absolute;
  top: 8rem;
  right: -2.3rem;
  width: 12rem;
  height: 12rem;
}
.services header + p {
  color: #3C3C3C;
  margin-top: 4rem;
  margin-bottom: 6rem;
}
@media screen and (min-width: 1024px) {
  .services header + p {
    width: 45vw;
    margin-left: 22.5vw;
  }
}
@media screen and (min-width: 1023px) {
  .services {
    text-align: center;
    padding-left: 4%;
    padding-right: 4%;
  }
  .services h2 + p {
    width: 70rem;
    margin: 6rem auto;
  }
}
@media screen and (min-width: 1023px) {
  .services .service-list {
    width: 40%;
    position: relative;
  }
}
.services .service-list > li {
  border-bottom: 1px solid #CECECE;
}
.services .service-list li {
  list-style: none;
  position: relative;
}
@media screen and (min-width: 1023px) {
  .services .service-list li {
    text-align: left;
    position: static;
  }
}
.services .service-list li .header {
  display: flex;
  align-items: center;
  color: #21BBD0;
  justify-content: space-between;
  margin: 2rem 0;
}
@media screen and (min-width: 1023px) {
  .services .service-list li .header {
    margin: 2.5rem 0;
  }
  .services .service-list li .header .plus {
    display: none;
  }
  .services .service-list li .header p {
    margin-left: 22.5vw;
  }
}
.services .service-list li .header label {
  font-size: 2rem;
  font-family: "futura", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.services .service-list li .header .plus {
  font-size: 2.5rem;
}
.services .service-list li .header .dash {
  display: none;
}
.services .service-list li .header img {
  display: none;
}
.services .service-list li .header.active label {
  font-weight: 700;
}
.services .service-list li .header.active .plus {
  display: none;
}
.services .service-list li .header.active .dash {
  display: block;
  font-size: 2.5rem;
}
@media screen and (min-width: 1023px) {
  .services .service-list li .header.active .dash {
    display: none;
  }
}
@media screen and (min-width: 1023px) {
  .services .service-list li .header.active img {
    display: block;
  }
}
.services .service-list li .pentagon {
  position: absolute;
  top: 30rem;
  left: 6rem;
  transform: translate(-65%, -40%) rotate(50deg);
  display: none;
}
.services .service-list li .pentagon svg {
  display: block;
  fill: rgba(122, 155, 48, 0.5);
  width: 60rem;
  height: 60rem;
}
.services .service-list li .pentagon.active {
  display: block;
}
.services .service-list li .service-description {
  display: none;
}
.services .service-list li .service-description img {
  width: 100%;
  height: 21rem;
  border-radius: 2rem;
  margin-bottom: 5rem;
}
@media screen and (min-width: 1023px) {
  .services .service-list li .service-description img {
    width: 36rem;
  }
}
.services .service-list li .service-description.active {
  position: relative;
  display: block;
}
@media screen and (min-width: 1023px) {
  .services .service-list li .service-description.active {
    position: absolute;
    width: 120%;
    right: -50vw;
    top: 0rem;
  }
}
.services .service-list li p {
  color: #3C3C3C;
}
.services .service-list li .tech-stack-list {
  list-style: none;
  margin: 4rem 0;
}
.services .service-list li .tech-stack-list li {
  font-size: 1.8rem;
  color: #3C3C3C;
  margin: 2rem 0;
  padding-left: 3rem;
  position: relative;
}
.services .service-list li .tech-stack-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: #B7B7B7;
}
.services .service-list + p {
  color: #3C3C3C;
  font-weight: 300;
  margin: 6rem 0;
}
@media screen and (min-width: 1023px) {
  .services .service-list + p {
    width: 40%;
    text-align: left;
  }
}
.services .service-list + p a {
  color: #21BBD0;
  font-weight: 600;
  text-decoration: underline;
}

.dots-holder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dots-holder .dot {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: #676767;
  margin-right: 1rem;
}
.dots-holder .dot.active {
  background-color: #21BBD0;
}

.about-us {
  padding: 0 2.25rem;
  background-color: #1F1F1F;
  min-height: calc(100vh - 7rem);
  padding-top: 8rem;
}
.about-us header {
  position: relative;
}
.about-us header .pentagon {
  position: absolute;
  top: -23rem;
  right: -20rem;
}
.about-us header .pentagon svg {
  display: block;
  fill: #BEFCF5;
  width: 45rem;
  height: 45rem;
  transform: rotate(60deg);
}
.about-us .dots-holder {
  position: relative;
}
.about-us .dots-holder .pentagon {
  position: absolute;
  bottom: -30rem;
  left: -18rem;
}
.about-us .dots-holder .pentagon svg {
  display: block;
  fill: #92C423;
  width: 40rem;
  height: 40rem;
  transform: rotate(54deg);
  opacity: 0.3;
}
@media screen and (min-width: 1023px) {
  .about-us {
    padding: 8rem 4%;
  }
}
.about-us h5 {
  color: #21BBD0;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.about-us h5::before {
  content: "";
  width: 1.5rem;
  height: 2rem;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  padding-right: 1rem;
  background-position: center;
}
@media screen and (min-width: 1024px) {
  .about-us h5 {
    text-align: center;
    justify-content: center;
  }
}
.about-us h5::before {
  background-image: url(../images//users-solid.svg);
}
.about-us h2 {
  margin-bottom: 2rem;
  color: #E5E5E5;
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 4.5rem;
  text-align: left;
  margin-top: 0.5rem;
}
@media screen and (min-width: 1023px) {
  .about-us h2 {
    font-size: 2.9rem;
    text-align: center;
    margin-top: 2rem;
  }
}
@media screen and (min-width: 1023px) {
  .about-us {
    text-align: center;
  }
}
.about-us .core-value-pentagon {
  margin: 7rem auto;
  display: block;
  width: 24.7rem;
  height: 23.6rem;
}
@media screen and (min-width: 1023px) {
  .about-us .core-value-pentagon {
    width: 36rem;
    height: 34rem;
    margin-bottom: 4.5rem;
  }
}
.about-us .core-values li {
  margin: 3rem 0;
  width: 100%;
  padding: 1rem;
  list-style: none;
}
.about-us .core-values label {
  color: #E5E5E5;
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  display: block;
  font-family: "futura", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
.about-us .core-values p {
  color: #B1B1B1;
}
@media screen and (min-width: 1023px) {
  .about-us .core-values p {
    max-width: 45vw;
    margin: 2.5rem auto 0;
  }
}

.mission-and-vision {
  background-color: #1F1F1F;
  padding: 4rem 2.25rem;
}
@media screen and (min-width: 1023px) {
  .mission-and-vision {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 4rem 4%;
  }
}
@media screen and (min-width: 1023px) {
  .mission-and-vision .mission-and-vision-card-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    grid-column: 1/4;
  }
}
.mission-and-vision article {
  position: relative;
  border-radius: 2.7rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.8196078431);
  padding: 0 5rem;
  margin: 10rem 0;
  padding-bottom: 4rem;
}
.mission-and-vision article:first-child {
  position: relative;
}
.mission-and-vision article:first-child::before {
  content: "";
  position: absolute;
  background-image: url(../images/pentagon-group-filled.svg);
  background-repeat: no-repeat;
  background-size: contain;
  right: -8rem;
  bottom: -13rem;
  width: 15rem;
  height: 15rem;
}
@media screen and (min-width: 1023px) {
  .mission-and-vision article {
    height: 38rem;
    width: 44%;
    margin-bottom: 8rem;
  }
}
.mission-and-vision article div {
  background-color: #141414;
  width: 10.3rem;
  height: 10.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2.6rem;
  position: absolute;
  top: -5.15rem;
}
.mission-and-vision article h4 {
  color: #E5E5E5;
  font-size: 2.2rem;
  font-weight: 500;
  padding-top: 8rem;
}
.mission-and-vision article p {
  color: #B1B1B1;
  padding-top: 2rem;
}
.mission-and-vision .established {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 1023px) {
  .mission-and-vision .established {
    display: flex;
    grid-column: 1/3;
    justify-content: space-between;
    padding-right: 5rem;
  }
}
.mission-and-vision .established div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30vh;
}
.mission-and-vision .established div:first-child {
  border-bottom: 1px solid #707070;
  border-right: 1px solid #707070;
}
@media screen and (min-width: 1023px) {
  .mission-and-vision .established div:first-child {
    border: none;
    border-right: 1px solid #707070;
  }
}
.mission-and-vision .established div:nth-child(2) {
  border-bottom: 1px solid #707070;
}
@media screen and (min-width: 1023px) {
  .mission-and-vision .established div:nth-child(2) {
    border: none;
    border-right: 1px solid #707070;
  }
}
.mission-and-vision .established div:nth-child(3) {
  border-right: 1px solid #707070;
}
@media screen and (min-width: 1023px) {
  .mission-and-vision .established div:nth-child(3) {
    border: none;
    border-right: 1px solid #707070;
  }
}
@media screen and (min-width: 1023px) {
  .mission-and-vision .established div:nth-child(4) {
    border-right: 1px solid #707070;
  }
}
@media screen and (min-width: 1023px) {
  .mission-and-vision .established div {
    width: 100%;
    height: 25vh;
  }
}
.mission-and-vision .established div span:first-child {
  font-size: 6rem;
  color: #E5E5E5;
  font-family: "futura", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}
.mission-and-vision .established div span:last-child {
  font-size: 1.8rem;
  color: #B1B1B1;
  font-family: "futura", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}
.mission-and-vision .established + div {
  color: #707070;
  border: 1px solid #707070;
  font-size: 3.5rem;
  letter-spacing: 1.2rem;
  padding: 1rem 0;
  text-align: center;
  margin-top: 6rem;
  font-family: "futura", sans-serif;
  font-weight: 500;
  padding-left: 1rem;
}
@media screen and (min-width: 1023px) {
  .mission-and-vision .established + div {
    grid-row: 3/4;
    grid-column: 1/4;
    margin: 2rem 4% 5rem 4%;
  }
}
.mission-and-vision .established + div + p {
  color: #B1B1B1;
  margin-top: 6rem;
}
@media screen and (min-width: 1023px) {
  .mission-and-vision .established + div + p {
    grid-column: 3/4;
    margin: auto;
    padding-right: 15%;
  }
}

.life-at-webtrigon {
  padding: 6rem 2.25rem;
  padding-top: 8rem;
  background: #FFFFFF;
}
@media screen and (min-width: 1023px) {
  .life-at-webtrigon {
    padding-left: 4%;
    padding-right: 4%;
  }
}
.life-at-webtrigon h5 {
  color: #21BBD0;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.life-at-webtrigon h5::before {
  content: "";
  width: 1.5rem;
  height: 2rem;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  padding-right: 1rem;
  background-position: center;
}
@media screen and (min-width: 1024px) {
  .life-at-webtrigon h5 {
    text-align: center;
    justify-content: center;
  }
}
.life-at-webtrigon h5::before {
  background-image: url(../images//heart-sharp.svg);
}
.life-at-webtrigon h2 {
  color: #3C3C3C;
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 4.5rem;
  text-align: left;
  margin-top: 0.5rem;
}
@media screen and (min-width: 1023px) {
  .life-at-webtrigon h2 {
    font-size: 2.9rem;
    text-align: center;
    margin-top: 2rem;
  }
}
.life-at-webtrigon h2 + p {
  color: #3C3C3C;
  margin: 4rem 0;
}
@media screen and (min-width: 1023px) {
  .life-at-webtrigon h2 + p {
    text-align: center;
    width: 45vw;
    margin: 4rem auto;
  }
}
@media screen and (min-width: 1023px) {
  .life-at-webtrigon .benifits-and-quotes-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .life-at-webtrigon .benifits-and-quotes-holder .benifits-container {
    width: 25vw;
  }
  .life-at-webtrigon .benifits-and-quotes-holder .benifits-container .benefits {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    width: 25vw;
    margin: 0 6vw 0 0;
  }
  .life-at-webtrigon .benifits-and-quotes-holder .benifits-container .benefits li {
    justify-self: center;
  }
}
.life-at-webtrigon .benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}
.life-at-webtrigon .benefits li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 15rem;
  height: 15rem;
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1607843137);
  border-radius: 20px;
  padding: 1rem 3rem;
  text-align: center;
  justify-self: center;
}
@media screen and (min-width: 1024px) {
  .life-at-webtrigon .benefits li:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }
  .life-at-webtrigon .benefits li:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .life-at-webtrigon .benefits li:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  .life-at-webtrigon .benefits li:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
}
.life-at-webtrigon .benefits li span {
  font-family: "futura", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #7B7B7B;
  font-size: 1.9rem;
  line-height: 2.7rem;
}
.life-at-webtrigon .contact-us {
  color: #3C3C3C;
  font-size: 1.8rem;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  margin-top: 4rem;
}
.life-at-webtrigon .contact-us a {
  color: #21BBD0;
  text-decoration: underline;
  font-weight: 600;
}
.life-at-webtrigon .quotes {
  padding: 4rem 2.25rem;
  padding-top: 10rem;
}
@media screen and (min-width: 1023px) {
  .life-at-webtrigon .quotes {
    padding-top: 0;
    padding-right: 0;
    width: 50vw;
    margin-left: 10rem;
  }
}
.life-at-webtrigon .quotes .quotes-svg svg {
  width: 3.6rem;
  height: 3rem;
  display: block;
  margin: 0 auto;
}
.life-at-webtrigon .quotes .lines-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
  margin: 4rem 45%;
}
.life-at-webtrigon .quotes .lines-holder .lines {
  width: 4.1rem;
  height: 0rem;
  border: 2px solid #B7B7B7;
  margin: 0 0.4rem;
  flex-grow: 1;
}
.life-at-webtrigon .quotes .lines-holder .lines:first-child {
  margin-left: 0;
}
.life-at-webtrigon .quotes .lines-holder .lines:last-child {
  margin-right: 0;
}
.life-at-webtrigon .quotes .lines-holder .lines.active {
  border: 2px solid #3B3B3B;
}
.life-at-webtrigon .quotes h2 {
  color: #3C3C3C;
  font-size: 2rem;
  margin-top: 6rem;
  font-weight: 500;
}
.life-at-webtrigon .quotes .quotes-list {
  list-style: none;
  font-size: 1.8rem;
  color: #3C3C3C;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  margin-top: 4rem;
}
.life-at-webtrigon .quotes .quotes-list li {
  position: relative;
  width: 100%;
  padding: 1rem;
  padding-bottom: 3rem;
}
.life-at-webtrigon .quotes .quotes-list li::before {
  content: "";
  position: absolute;
  background-image: url(./../images/pentagon-group-filled.svg);
  background-repeat: no-repeat;
  background-size: contain;
  left: 2.5rem;
  width: 14rem;
  height: 13.8rem;
  bottom: -1.4rem;
  z-index: -1;
}
.life-at-webtrigon .quotes .quotes-list li .quote-by {
  display: flex;
  align-items: center;
  margin-top: 4rem;
  text-align: left;
}
.life-at-webtrigon .quotes .quotes-list li .quote-by div {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-left: 2.2rem;
}
.life-at-webtrigon .quotes .quotes-list li .quote-by div span:first-child {
  font-weight: 600;
}
.life-at-webtrigon .quotes .quotes-list li .quote-by img {
  width: 6.7rem;
  height: 6.7rem;
}

.swiper {
  width: 100%;
  padding: 0;
  margin: 0;
  /* Custom Pagination Bullet Colors */
  /* Style navigation buttons */
  /* Adjust the position of the arrows */
}
.swiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
  overflow: hidden;
  margin: 0 !important;
}
.swiper .swiper-slide img, .swiper .swiper-slide video {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  display: block;
}
.swiper .swiper-pagination-bullet {
  background-color: #cccccc; /* Bullet color */
}
.swiper .swiper-pagination-bullet-active {
  background-color: #ffffff; /* Active bullet color */
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  border-radius: 50%; /* Make buttons circular */
  width: 40px;
  height: 40px;
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust position */
}
.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
  color: #ffffff; /* Arrow color */
  font-size: 20px;
}
.swiper .swiper-button-next {
  right: 10px;
}
.swiper .swiper-button-prev {
  left: 10px;
}

.careers {
  background-color: #1F1F1F;
  padding: 4rem 2.25rem;
  padding-top: 8rem;
}
@media screen and (min-width: 1023px) {
  .careers {
    padding-bottom: 8rem;
    padding-left: 4%;
    padding-right: 4%;
  }
}
.careers > h5 {
  color: #21BBD0;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.careers > h5::before {
  content: "";
  width: 1.5rem;
  height: 2rem;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  padding-right: 1rem;
  background-position: center;
}
@media screen and (min-width: 1024px) {
  .careers > h5 {
    text-align: center;
    justify-content: center;
  }
}
.careers > h5::before {
  background-image: url(../images//crop-growth.svg);
}
.careers h2 {
  margin-bottom: 2rem;
  color: #E5E5E5;
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 4.5rem;
  text-align: left;
  margin-top: 0.5rem;
}
@media screen and (min-width: 1023px) {
  .careers h2 {
    font-size: 2.9rem;
    text-align: center;
    margin-top: 2rem;
  }
}
.careers ul {
  list-style: none;
}
@media screen and (min-width: 1023px) {
  .careers ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 80vw;
    margin: 0 auto;
  }
}
.careers ul li {
  width: 100%;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.8196078431);
  border-radius: 2.7rem;
  background-color: #272727;
  margin-top: 5rem;
  padding: 0rem 2rem;
  padding-bottom: 2rem;
}
@media screen and (min-width: 1023px) {
  .careers ul li {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.careers ul li header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 3rem 1rem;
}
@media screen and (min-width: 1023px) {
  .careers ul li header {
    justify-content: start;
    gap: 2rem;
  }
  .careers ul li header h5 {
    text-align: left;
  }
  .careers ul li header span {
    text-align: left;
  }
}
.careers ul li header h5 {
  color: #E5E5E5;
  font-size: 2.2rem;
  line-height: 3rem;
  font-weight: 100;
  margin: 0;
  margin-top: -0.8rem;
  margin-bottom: 1.5rem;
}
.careers ul li header span {
  display: block;
  color: #B1B1B1;
  font-size: 1.8rem;
  margin-bottom: 0.7rem;
}
.careers ul li header span svg {
  fill: silver;
  height: 1.4rem;
  margin-right: 0.5rem;
}
.careers ul li p {
  font-size: 1.8rem;
  color: #B1B1B1;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  font-weight: 100;
  padding: 0 1rem;
  margin-left: 6.5rem;
}
.careers ul li footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.careers ul li .share-icon {
  width: 5rem;
  height: 5rem;
  padding: 1.5rem;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.2);
}
.careers ul li .share-icon svg {
  width: 2rem;
  height: 2rem;
  fill: silver;
  transform: translate(-0.1rem);
}
.careers ul li a {
  font-size: 1.8rem;
  color: #21BBD0;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  font-weight: 600;
  text-decoration: underline;
  display: block;
  padding-left: 1rem;
  margin-right: 2rem;
}

.contact-us-form {
  padding: 8rem 2.25rem;
  background: #FFFFFF;
}
.contact-us-form h5 {
  color: #21BBD0;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.contact-us-form h5::before {
  content: "";
  width: 1.5rem;
  height: 2rem;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  padding-right: 1rem;
  background-position: center;
}
@media screen and (min-width: 1024px) {
  .contact-us-form h5 {
    text-align: center;
    justify-content: center;
  }
}
.contact-us-form h5::before {
  background-image: url(../images//handshake-o.svg);
  width: 2rem;
  background-size: 2rem;
}
.contact-us-form h2 {
  margin-bottom: 2rem;
  color: #3C3C3C;
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 4.5rem;
  text-align: left;
  margin-top: 0.5rem;
}
@media screen and (min-width: 1023px) {
  .contact-us-form h2 {
    font-size: 2.9rem;
    text-align: center;
    margin-top: 2rem;
  }
}
.contact-us-form form {
  margin-top: 6rem;
}
@media screen and (min-width: 1023px) {
  .contact-us-form form {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 1rem;
    margin: 4rem 15vw 0;
  }
  .contact-us-form form .form-textarea {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
.contact-us-form form label {
  font-size: 1.8rem;
  color: #3C3C3C;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  font-weight: 100;
  display: block;
}
.contact-us-form form > div {
  margin-top: 2rem;
}
.contact-us-form form .looking-for-dropdown,
.contact-us-form form .phone-number-dropdown {
  position: relative;
}
.contact-us-form form .full-phone-holder {
  display: flex;
}
.contact-us-form form .full-phone-holder .code-holder {
  width: 30%;
  margin-right: 1rem;
}
.contact-us-form form .full-phone-holder .dropdown {
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  border-radius: 2rem;
}
.contact-us-form form .full-phone-holder .dropdown input {
  width: 80%;
}
.contact-us-form form .full-phone-holder > input {
  flex-grow: 1;
}
.contact-us-form form .phone-number-dropdown .dropdown-list li:first-child {
  padding: 0;
  position: sticky;
  top: 0;
  background-color: inherit;
}
.contact-us-form form .phone-number-dropdown .dropdown-list li:first-child input {
  height: 6rem;
}
.contact-us-form form .phone-number-dropdown .dropdown-list.active {
  height: 40rem;
}
.contact-us-form form .dropdown {
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  border-radius: 2rem;
}
.contact-us-form form .dropdown input {
  width: 94%;
}
.contact-us-form form .dropdown-list {
  display: none;
  position: absolute;
  list-style: none;
}
.contact-us-form form .dropdown-list li {
  padding-left: 2rem;
  padding-top: 2.85rem;
  padding-bottom: 2.85rem;
  border-radius: 2rem;
}
.contact-us-form form .dropdown-list li:hover {
  background-color: #F5F5F5;
}
.contact-us-form form .dropdown-list li.hide {
  display: none;
}
.contact-us-form form .dropdown-list.active {
  display: block;
  width: 100%;
  overflow: auto;
  border-radius: 2rem;
  padding: 1rem;
  top: 12rem;
  z-index: 1;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1607843137);
}
.contact-us-form form input {
  display: block;
  height: 7rem;
  width: 100%;
  background-color: #F5F5F5;
  border-radius: 2rem;
  border: none;
  padding-left: 3rem;
  outline: none;
  font-size: 1.8rem;
  color: #3C3C3C;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  font-weight: 100;
}
.contact-us-form form input::placeholder {
  font-size: 1.8rem;
  color: #989898;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  font-weight: 100;
}
.contact-us-form form input:disabled {
  pointer-events: none;
}
.contact-us-form form .phone-number-input {
  width: 70%;
}
.contact-us-form form textarea {
  display: block;
  height: 19.5rem;
  width: 100%;
  background-color: #F5F5F5;
  border-radius: 2rem;
  border: none;
  padding: 1.5rem 3rem;
  outline: none;
  font-size: 1.8rem;
  color: #3C3C3C;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  font-weight: 100;
}
.contact-us-form form textarea::placeholder {
  font-size: 1.8rem;
  color: #989898;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  font-weight: 100;
}
.contact-us-form form button {
  display: block;
  width: 12.3rem;
  height: 6rem;
  background-color: #00B7A2;
  color: #FFFFFF;
  margin-top: 3rem;
  border-radius: 2.7rem;
  border: none;
}
.contact-us-form form .error-message {
  color: red;
  font-size: 1rem;
}
.contact-us-form .toast-container {
  position: fixed;
  bottom: 12rem;
  z-index: 9999;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-us-form .toast-container .toast {
  padding: 10px 20px;
  color: white;
  border-radius: 5px;
  font-size: 1em;
  opacity: 0.9;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
.contact-us-form .toast-container .toast.success {
  background-color: #28a745; /* Green for success */
}
.contact-us-form .toast-container .toast.error {
  background-color: #ff4d4f; /* Red for error */
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}
@keyframes fadeout {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}

.footer {
  background-color: #1F1F1F;
  padding: 4rem 2.25rem;
}
@media screen and (min-width: 1023px) {
  .footer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (min-width: 1023px) {
  .footer .footer-header {
    justify-self: center;
  }
}
.footer .footer-header .logo-holder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4rem 0;
  margin: 0;
}
.footer .footer-header .logo-holder h5 {
  color: #E8E8E8;
  font-size: 2.2rem;
  letter-spacing: 0.11rem;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}
@media screen and (min-width: 1023px) {
  .footer .footer-header .logo-holder h5 {
    font-size: 3.8rem;
  }
  .footer .footer-header .logo-holder img {
    width: 7rem;
    height: 7rem;
  }
}
.footer nav {
  display: flex;
  flex-direction: column;
  height: 37.5rem;
  justify-content: space-between;
  margin-bottom: 5rem;
}
@media screen and (min-width: 1023px) {
  .footer nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    margin: 0;
  }
}
.footer nav a {
  text-decoration: none;
  font-size: 1.8rem;
  color: #E6E6E6;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  font-weight: 100;
  text-decoration: none;
}
@media screen and (min-width: 1023px) {
  .footer nav a {
    justify-self: center;
    line-height: normal;
  }
}
.footer .location {
  margin-bottom: 2.5rem;
}
@media screen and (min-width: 1023px) {
  .footer .location {
    justify-self: center;
  }
}
.footer .location:last-child {
  margin-bottom: 0;
}
.footer .location h5 {
  color: #919191;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 2rem;
}
.footer .location div {
  color: #B4B4B4;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.copyright {
  background-color: #2C2C2C;
  padding: 0 1rem 10rem;
}
@media screen and (min-width: 1023px) {
  .copyright {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    padding: 0 9% 11rem;
  }
}
.copyright .copyright-content {
  display: flex;
  align-items: center;
  background-color: #2C2C2C;
  height: 5rem;
}
@media screen and (min-width: 1023px) {
  .copyright .copyright-content {
    justify-content: center;
  }
}
.copyright .copyright-content div:first-child {
  font-size: 1.8rem;
  color: #B4B4B4;
  line-height: 4rem;
  letter-spacing: 0.027rem;
  font-weight: 100;
}
.copyright .copyright-content div:nth-child(2) {
  display: flex;
  align-items: center;
  color: #B4B4B4;
  letter-spacing: 0.007rem;
  margin-left: 1rem;
  font-size: 1.4rem;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2rem));
    -moz-transform: translateX(calc(-100% - 2rem));
    -webkit-transform: translateX(calc(-100% - 2rem));
  }
}
.fade-in {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.fade-in.is-visible {
  opacity: 1;
}

.fade-slide-in {
  overflow: hidden;
}
.fade-slide-in > * {
  opacity: 0;
  transform: translateY(2rem);
  transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
}
.fade-slide-in.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.pentagon,
.grouped-pentagons {
  pointer-events: none;
}

.eapps-widget-toolbar-panel {
  display: none;
}

/*# sourceMappingURL=style.css.map */