* {
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-family: "Lato", sans-serif;
  letter-spacing: 0.5px;
  font-size: 14px;
  color: #25272E;
}

body, nav, header, section {
  width: 100%;
}

#logo-brand {
  display: none;
}

.trans, .btn, main.world, .overlay-circle, .menu-bg, nav#top .menu, nav#top .menu::before, #mixing .cta, #ph5 .cta, #ph6 .cta, #ph7 .cta, #ph7 .next .cta, #client .overlay, #client .overlay .btn, #idea .cta, #team .grid .member .list, #client-list .list, #client-list .list img, #client-list .list::before, .detail .gallery .list, .contact-form .grid .list-btn input, .contact-form .grid textarea, footer .content .cta, nav#down .menu, nav#down .menu::before {
  -webkit-transition: ease 0.4s;
  transition: ease 0.4s;
}

.grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1280px) {
  .grid {
    padding: 2vw;
    padding: 0 clamp(1em, 6vw, 3em);
  }
}

.full, .img, #ph6 .content .thumb img, #ph7 .content .thumb img, #client img, #team .grid .member .list img, #client-list .list img, .detail .banner .swiper-slide img, .detail .gallery img, .modal, .modal .close, .overlay-circle .menu-btn, .menu-bg .menu-btn, .menu-mobile, #ph2::after, #ph2-new::after, #ph4 .divide.kanan #particles-js, #client-list .list::before, .detail .banner, footer #particles-js2, .swiper-container {
  width: 100%;
  height: 100%;
}

.img, #ph6 .content .thumb img, #ph7 .content .thumb img, #client img, #team .grid .member .list img, #client-list .list img, .detail .banner .swiper-slide img, .detail .gallery img {
  -o-object-fit: cover;
     object-fit: cover;
}

.full-h, #ph3 .grid, #mixing .grid, .about .grid {
  width: 100%;
  height: 100vh;
  min-height: 840px;
}

.row, .modal, .btn, nav#top, nav#top .grid, nav#top .menu, #ph2, #ph2 .photo, #ph5 .thumbnail, #ph6 .content, #ph7 .content, #ph6 .content .thumb img, #ph7 .content .thumb img, #ph6 .next, #ph7 .next, .about .grid, #client-list .list, .detail .display, #contact .sub, .contact-form, .contact-form .grid .list-btn, nav#down .menu {
  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: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.col, .overlay-circle, .menu-bg, .overlay-circle .menu-btn, .menu-bg .menu-btn, .menu-mobile, .menu-mobile .list .menu-drop, header .grid, #ph2 .text, #ph3 .grid, #ph4 .divide, #mixing .grid, #client .swiper-slide, #client .overlay, .detail .points, #contact .grid {
  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;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  z-index: 25;
}

.modal .close {
  content: '';
  cursor: pointer;
  position: absolute;
  z-index: 1;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.modal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@-webkit-keyframes arrow {
  0% {
    -webkit-transform: translateY(-1rem);
            transform: translateY(-1rem);
    opacity: 0;
  }
  25% {
    -webkit-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
  }
  40% {
    -webkit-transform: translateY(0.25rem);
            transform: translateY(0.25rem);
  }
  57% {
    -webkit-transform: translateY(-0.1rem);
            transform: translateY(-0.1rem);
    opacity: 1;
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes arrow {
  0% {
    -webkit-transform: translateY(-1rem);
            transform: translateY(-1rem);
    opacity: 0;
  }
  25% {
    -webkit-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
  }
  40% {
    -webkit-transform: translateY(0.25rem);
            transform: translateY(0.25rem);
  }
  57% {
    -webkit-transform: translateY(-0.1rem);
            transform: translateY(-0.1rem);
    opacity: 1;
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.btn {
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 2rem;
}

.btn i {
  font-size: 1.25rem;
  margin-top: -5px;
  color: #007A37;
  -webkit-animation: arrow 1s linear 1s infinite;
          animation: arrow 1s linear 1s infinite;
}

.btn:hover {
  background: #2B2A2F;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  -webkit-box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.2);
}

.btn:hover i {
  color: #fff;
}

.scroll-hide, body, main.world {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-hide::-webkit-scrollbar, body::-webkit-scrollbar, main.world::-webkit-scrollbar {
  display: none;
}

body {
  overflow: hidden;
  color: #fff;
}

body.active {
  overflow: auto;
  min-height: 480px;
}

main.world {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  height: 100vh;
  padding-top: 100px;
  background: #007A37;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 300px;
          perspective: 300px;
}

@media (max-width: 1024px) {
  main.world {
    padding-top: 65px;
  }
}

.overlay-circle, .menu-bg {
  width: 50px;
  height: 50px;
  background: #fff;
  content: '';
  position: fixed;
  bottom: 5vw;
  right: 5vw;
  cursor: pointer;
  border-radius: 50%;
  z-index: 13;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
  .overlay-circle, .menu-bg {
    display: none;
  }
}

.overlay-circle .menu-btn, .menu-bg .menu-btn {
  -webkit-transform: scale(0.65);
          transform: scale(0.65);
}

.overlay-circle .menu-btn > div, .menu-bg .menu-btn > div {
  background: #007A37;
  width: 80%;
  height: 4px;
  border-radius: 5px;
  margin: 4px 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.overlay-circle .menu-btn .bar1, .menu-bg .menu-btn .bar1 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.overlay-circle .menu-btn .bar2, .menu-bg .menu-btn .bar2 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.overlay-circle .menu-btn.change .bar1, .menu-bg .menu-btn.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 8px);
          transform: rotate(-45deg) translate(-8px, 8px);
}

.overlay-circle .menu-btn.change .bar2, .menu-bg .menu-btn.change .bar2 {
  opacity: 0;
}

.overlay-circle .menu-btn.change .bar3, .menu-bg .menu-btn.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
          transform: rotate(45deg) translate(-8px, -8px);
}

.overlay-circle.active, .active.menu-bg {
  background: #007A37;
}

.overlay-circle.active .menu-btn > div, .active.menu-bg .menu-btn > div {
  background: #FFFB10;
}

.menu-mobile {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: none;
  min-height: 480px;
  z-index: 12;
  position: absolute;
  top: 0;
}

@media (min-width: 1024px) {
  .menu-mobile {
    display: none;
  }
}

.menu-mobile .list {
  font-size: 28px;
  font-weight: 700;
  text-transform: capitalize;
  margin: 10px 0;
  color: #007A37;
  -webkit-animation: ease .75s both;
          animation: ease .75s both;
}

.menu-mobile .list .menu-drop {
  font-weight: 400;
  text-transform: capitalize;
  padding: 10px;
}

.menu-mobile .list .menu-drop a {
  color: #000;
  font-size: 20px;
  margin: 3rem;
}

@-webkit-keyframes slides {
  0% {
    -webkit-transform: translateX(-10vw);
            transform: translateX(-10vw);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(10vw);
            transform: translateX(10vw);
  }
}

@keyframes slides {
  0% {
    -webkit-transform: translateX(-10vw);
            transform: translateX(-10vw);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(10vw);
            transform: translateX(10vw);
  }
}

.menu-mobile .list:nth-child(1) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.menu-mobile .list:nth-child(2) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.menu-mobile .list:nth-child(3) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.menu-mobile .list:nth-child(4) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.menu-mobile .list:nth-child(5) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@media (max-width: 1024px) {
  .menu-mobile.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
  }
  .menu-mobile.active .list {
    -webkit-animation-name: slides;
            animation-name: slides;
  }
}

.menu-bg {
  background: #fff;
  z-index: 11;
  -webkit-transform: scale(0);
          transform: scale(0);
}

nav#top {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  z-index: 5;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  background: #fff;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

@media (max-width: 1024px) {
  nav#top {
    height: 65px;
  }
}

@media (min-width: 1025px) {
  nav#top .grid {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

nav#top .web-logo img {
  width: auto;
  height: 50px;
}

nav#top .menu {
  position: relative;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  color: #007A37;
}

nav#top .menu::before {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  content: '';
  width: 0;
  height: 3px;
  margin-top: 5px;
  background: #007A37;
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
}

nav#top .menu:hover::before, nav#top .menu.active::before {
  width: 100%;
}

@media (max-width: 1024px) {
  nav#top .menu {
    display: none;
  }
}

header .grid {
  width: 100%;
  height: clamp(480px, 100vh, 720px);
  position: relative;
  overflow: hidden;
}

header h1.headline {
  position: absolute;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(2em, 18vw, 225px);
  text-transform: uppercase;
  -webkit-transform: translateY(-100vh) translateZ(-1000px) scale(5);
          transform: translateY(-100vh) translateZ(-1000px) scale(5);
}

header .glasses {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  z-index: 1;
}

@media (max-width: 720px) {
  header .glasses {
    margin-top: -15vw;
  }
}

header .glass:nth-child(1) {
  -webkit-transform: translate3d(-25vw, -100px, -250px) scale(1.5);
          transform: translate3d(-25vw, -100px, -250px) scale(1.5);
}

header .glass:nth-child(2) {
  -webkit-transform: translate3d(-7.5vw, 0, -150px) scale(1.25);
          transform: translate3d(-7.5vw, 0, -150px) scale(1.25);
}

header .glass:nth-child(3) {
  position: relative;
  margin-left: -35px;
  -webkit-transform: translate3d(0, 1rem, -50px) scale(0.9);
          transform: translate3d(0, 1rem, -50px) scale(0.9);
}

header .glass:nth-child(3) .popout {
  position: absolute;
  left: -15em;
  top: -2em;
}

header .glass:nth-child(4) {
  -webkit-transform: translate3d(7.5vw, 0, -150px) scale(1.25);
          transform: translate3d(7.5vw, 0, -150px) scale(1.25);
}

header .glass:nth-child(5) {
  -webkit-transform: translate3d(25vw, -100px, -250px) scale(1.5);
          transform: translate3d(25vw, -100px, -250px) scale(1.5);
}

header .glass img {
  width: 100%;
}

@media (max-width: 720px) {
  header .glass:nth-child(1), header .glass:nth-child(5), header .glass .popout {
    display: none;
  }
}

section {
  padding: 2rem 0;
}

section .bubble {
  position: absolute;
  content: '';
  border-radius: 50%;
  background: #FFFB10;
  width: clamp(350px, 80vw, 500px);
  height: clamp(350px, 80vw, 500px);
}

#ph1 {
  margin-top: 4rem;
}

#ph1 .bubble {
  right: 0;
}

#ph1 .bubble:first-child {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
  -webkit-transform: translate3d(50vw, 50rem, -500px) scale(4);
          transform: translate3d(50vw, 50rem, -500px) scale(4);
}

#ph1 .bubble:nth-child(2) {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  -webkit-transform: translate3d(25vw, -10em, 0) scale(2.2);
          transform: translate3d(25vw, -10em, 0) scale(2.2);
}

@media (max-width: 720px) {
  #ph1 .bubble:first-child {
    -webkit-transform: translate3d(105vw, 0, -500px) scale(4);
            transform: translate3d(105vw, 0, -500px) scale(4);
  }
  #ph1 .bubble .bubble:nth-child(2) {
    -webkit-transform: translate3d(80vw, -10em, 0) scale(2.2);
            transform: translate3d(80vw, -10em, 0) scale(2.2);
  }
}

@media (max-width: 1280px) {
  #ph1 .bubble {
    opacity: .5;
  }
}

#ph1 .grid {
  z-index: 1;
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);
}

#ph1 h1 {
  font-size: 5rem;
  text-shadow: 10px 20px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 640px) {
  #ph1 h1 {
    font-size: 3rem;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.2);
  }
}

#ph1 p {
  font-size: 24px;
  line-height: 38.832px;
  font-weight: 300;
}

#ph2 {
  margin-top: 8rem;
  position: relative;
}

#ph2 .grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 0;
  -ms-grid-columns: 1fr 1.2fr;
      grid-template-columns: 1fr 1.2fr;
}

@media (max-width: 720px) {
  #ph2 .grid {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

#ph2 .photo {
  position: relative;
}

#ph2 .photo img {
  width: 100%;
  height: auto;
}

#ph2 .photo .chat {
  width: 84%;
  height: auto;
  position: absolute;
  content: '';
  z-index: 1;
  top: 18%;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -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;
}

#ph2 .photo .chat img {
  width: 80%;
  height: auto;
  margin-bottom: 2rem;
}

#ph2 .photo .chat img:nth-child(4) {
  margin-left: auto;
  margin-right: auto;
}

#ph2 .photo .chat img:last-child {
  margin-left: auto;
}

@media (min-width: 721px) {
  #ph2 .photo .chat img {
    width: clamp(10rem, 22vw, 20rem);
    margin-bottom: clamp(10px, 5vw, 2rem);
  }
}

@media (max-width: 590px) {
  #ph2 .photo .chat img {
    width: clamp(8rem, 38vw, 43rem);
    margin-bottom: clamp(10px, 5vw, 2rem);
  }
}

@media (max-width: 720px) {
  #ph2 .photo {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 2 / 1 / 3 / 2;
    width: 100%;
    margin: 0 auto;
    z-index: 2;
  }
}

#ph2 .text {
  width: 100%;
  -webkit-transform: translate3d(75px, -100px, -100px) scale(1.2);
          transform: translate3d(75px, -100px, -100px) scale(1.2);
}

#ph2 .text h1 {
  font-size: 4.5vw;
  font-weight: 900;
  margin-top: 0;
  text-shadow: 10px 20px 20px rgba(0, 0, 0, 0.2);
}

#ph2 .text p {
  font-size: 24px;
  line-height: 38.832px;
  font-weight: 300;
}

@media (max-width: 720px) {
  #ph2 .text {
    -webkit-transform: translate3d(0, -100px, -100px) scale(1.2);
            transform: translate3d(0, -100px, -100px) scale(1.2);
  }
  #ph2 .text h1 {
    font-size: 12vw;
  }
}

#ph2::after {
  display: block;
  position: absolute;
  content: '';
  background: #005426;
  z-index: -1;
}

#ph2-new {
  position: relative;
  z-index: 1;
  padding: 4em 0 6rem;
  margin: 8rem 0 4em;
}

#ph2-new .grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 2rem;
  -ms-grid-columns: (minmax(455px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(455px, 1fr));
}

@media (max-width: 455px) {
  #ph2-new .grid {
    -ms-grid-columns: none;
        grid-template-columns: none;
    width: 100%;
  }
}

#ph2-new .desc p {
  font-size: 24px;
  line-height: 38.832px;
  font-weight: 300;
}

#ph2-new .desc h2 {
  font-size: 5em;
  font-weight: 700;
}

@media (max-width: 1024px) {
  #ph2-new .desc {
    text-align: center;
  }
}

#ph2-new .icon img {
  width: 100%;
  height: auto;
}

#ph2-new::after {
  top: 0;
  display: block;
  position: absolute;
  content: '';
  background: #005426;
  z-index: -1;
}

#ph3 {
  position: relative;
  z-index: 2;
  background: #fff url("../img/splash-new.png") no-repeat fixed right;
}

@media (min-width: 721px) {
  #ph3 {
    -webkit-transform: translate3d(0, -220px, 50px) scale(0.85);
            transform: translate3d(0, -220px, 50px) scale(0.85);
  }
}

#ph3 .grid {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

#ph3 h1 {
  font-size: 5rem;
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  color: #636363;
}

#ph3 p {
  font-size: 2em;
  color: #636363;
  font-weight: 700;
}

@media (max-width: 720px) {
  #ph3 {
    text-align: center;
    margin-top: -5rem;
  }
  #ph3 h1 {
    font-size: 3.5rem;
  }
  #ph3 .grid {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

#ph4 {
  padding: 0;
  margin: 4em 0 0;
  background: #fff;
  z-index: 0;
}

@media (min-width: 721px) {
  #ph4 {
    -webkit-transform: translate3d(0, -400px, -50px) scale(1.17);
            transform: translate3d(0, -400px, -50px) scale(1.17);
  }
}

#ph4 .divide {
  height: 100vh;
  min-height: 540px;
}

@media (max-width: 960px) {
  #ph4 .divide {
    height: auto;
    padding: 6vw;
  }
  #ph4 .divide p {
    margin: 0;
  }
}

#ph4 .divide.kanan {
  position: relative;
  background: #007A37;
  color: #fff;
  z-index: 1;
}

#ph4 .divide.kanan h1 {
  text-transform: uppercase;
  font-size: 6rem;
  font-weight: 900;
  margin: 0;
  color: #FFFB10;
}

#ph4 .divide.kanan p {
  margin: 0;
  font-size: 20px;
  line-height: 32.36px;
  font-weight: 700;
}

#ph4 .divide.kanan p:last-child {
  text-align: right;
}

#ph4 .divide.kanan .btn {
  margin-top: 10rem;
  background: #FFFB10;
}

#ph4 .divide.kanan .btn:hover {
  background: #fff;
}

#ph4 .divide.kanan .btn:hover i {
  color: #007A37;
}

#ph4 .divide.kanan #particles-js {
  position: absolute;
  top: 0;
  z-index: -1;
}

@media (max-width: 960px) {
  #ph4 .divide.kanan {
    height: 100vh;
  }
  #ph4 .divide.kanan h1 {
    font-size: calc(3rem + 2vw);
  }
}

#mixing {
  background: #fff;
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);
}

#mixing h1 {
  font-size: 5rem;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  color: #007A37;
  margin: 0;
}

#mixing ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
  width: 100%;
  max-width: 900px;
  margin: 5rem auto;
}

#mixing ul li {
  list-style-image: url("../img/list.png");
  color: #007A37;
  padding-left: 1rem;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 540px) {
  #mixing ul {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

#mixing .cta {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border: 1px solid #007A37;
  background: #fff;
  color: #007A37;
  outline: none;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}

#mixing .cta:hover {
  background: #007A37;
  color: #fff;
}

#ph5 .cta, #ph6 .cta, #ph7 .cta, #ph7 .cta {
  color: #007A37;
  font-style: italic;
  font-weight: 300;
  border-bottom: 1px solid #007A37;
  display: inline-block;
}

#ph5 .cta:hover, #ph6 .cta:hover, #ph7 .cta:hover, #ph7 .cta:hover {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  color: #25272E;
  border-color: #25272E;
}

@media (max-width: 720px) {
  #ph5 .next, #ph6 .next, #ph7 .next, #ph7 .next {
    padding: 2rem 0 !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    text-align: center;
  }
  #ph5 .next .btn, #ph6 .next .btn, #ph7 .next .btn, #ph7 .next .btn {
    margin-left: 0;
  }
}

#ph5 {
  position: relative;
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);
  padding: 0;
  background: #00612c;
}

@media (min-width: 721px) {
  #ph5 {
    margin-top: -30rem;
  }
}

#ph5 .grid {
  position: relative;
}

#ph5 .desc, #ph5 .next {
  width: 100%;
  max-width: 600px;
  position: relative;
}

#ph5 .desc::before, #ph5 .next::before {
  width: 100vw;
  height: 100%;
  display: block;
  z-index: -1;
  position: absolute;
  right: -18vw;
  top: 0;
  content: '';
}

@media (max-width: 960px) {
  #ph5 .desc, #ph5 .next {
    max-width: 100%;
  }
  #ph5 .desc::before, #ph5 .next::before {
    top: initial;
    right: -6.5%;
  }
}

#ph5 .desc {
  padding: 5rem 0;
}

#ph5 .desc h1 {
  font-size: 4rem;
  line-height: 3.5rem;
  font-weight: 900;
  color: #007A37;
}

#ph5 .desc p {
  font-size: 24px;
  line-height: 38.832px;
  color: #555555;
}

#ph5 .desc p span {
  font-weight: 700;
  color: #2B2A2F;
}

#ph5 .desc::before {
  background: #fff;
}

#ph5 .next {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#ph5 .next h2 {
  font-size: 1.8rem;
}

#ph5 .next::before {
  background: #007A37;
}

#ph5 .thumbnail {
  position: absolute;
  top: 10%;
  right: 0;
  width: 320px;
  height: 100%;
}

#ph5 .thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 960px) {
  #ph5 .thumbnail {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2rem 2vw;
  }
  #ph5 .thumbnail img {
    width: 60%;
    height: auto;
  }
}

#ph6, #ph7 {
  padding: 0;
}

#ph6 .content, #ph7 .content, #ph6 .next, #ph7 .next {
  width: 100%;
  position: relative;
}

#ph6 .content::before, #ph7 .content::before, #ph6 .next::before, #ph7 .next::before {
  width: 100vw;
  height: 100%;
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  content: '';
}

#ph6 .content, #ph7 .content {
  padding: 4rem 0;
}

#ph6 .content::before, #ph7 .content::before {
  background: #fff;
}

#ph6 .content .thumb, #ph7 .content .thumb {
  width: 60%;
  margin-right: 2rem;
}

#ph6 .content .thumb img, #ph7 .content .thumb img {
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 720px) {
  #ph6 .content .thumb, #ph7 .content .thumb {
    position: relative;
    width: 100%;
    margin: 0;
  }
}

#ph6 .content .desc, #ph7 .content .desc {
  width: 50vw;
  max-width: 640px;
  text-align: right;
}

#ph6 .content h1, #ph7 .content h1 {
  font-size: 4rem;
  font-weight: 900;
  line-height: 4rem;
  color: #007A37;
}

#ph6 .content p, #ph7 .content p {
  font-size: 20px;
  line-height: 32.36px;
  color: #555555;
}

#ph6 .content p span, #ph7 .content p span {
  font-weight: 700;
  color: #2B2A2F;
}

@media (max-width: 720px) {
  #ph6 .content, #ph7 .content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #ph6 .content .thumb, #ph7 .content .thumb, #ph6 .content .desc, #ph7 .content .desc {
    width: 100%;
  }
}

#ph6 .next, #ph7 .next {
  padding: .5rem;
}

#ph6 .next h2, #ph7 .next h2 {
  font-size: 1.5rem;
}

@media (min-width: 721px) {
  #ph6 .next .btn, #ph7 .next .btn {
    width: 35px;
    height: 35px;
    font-size: .9rem;
  }
}

#ph7 {
  overflow: hidden;
}

#ph7 .content {
  height: 85vh;
}

#ph7 .content .thumb {
  position: relative;
  margin-right: 0;
  z-index: -1;
}

#ph7 .content .desc {
  text-align: left;
  width: 40%;
  margin-right: auto;
}

@media (max-width: 960px) {
  #ph7 .content {
    height: auto;
  }
  #ph7 .content .desc {
    width: 100%;
  }
}

#ph7 .next {
  font-size: 2rem;
  color: #007A37;
}

#ph7 .next::before {
  background: #FFFB10;
}

#ph7 .next .cta {
  padding: 10px 2rem;
  border: 1px solid #007A37;
  background: #007A37;
  color: #fff;
  outline: none;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  cursor: pointer;
  margin-left: 2rem;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
}

#ph7 .next .cta:hover {
  background: #fff;
  color: #007A37;
}

#ph7 .next .cta:hover {
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}

#client {
  padding: 0;
  height: 500px;
}

#client .swiper-slide {
  position: relative;
  width: calc(100vw / 3 + 400px);
  background: #FFFB10;
  overflow: hidden;
  text-align: center;
  font-size: 18px;
  color: #2B2A2F;
}

#client .swiper-slide:hover .overlay {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

#client .overlay {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  opacity: 0;
  z-index: 1;
  position: absolute;
  width: 95%;
  height: 90%;
  background: rgba(0, 0, 0, 0.75);
}

#client .overlay p {
  font-size: 32px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}

#client .overlay .btn {
  padding: 10px 2rem;
  border: 1px solid #fff;
  background: #fff;
  color: #fff;
  outline: none;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
}

#client .overlay .btn:hover {
  background: #fff;
  color: #fff;
}

#client .overlay .btn:hover {
  color: #2B2A2F;
}

.about {
  position: relative;
}

.about .iconic {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.about .iconic img {
  width: auto;
  height: 900px;
}

.about .grid {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}

.about .info {
  max-width: 40vw;
}

.about .info h3 {
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

.about .info p {
  font-size: 20px;
  line-height: 32.36px;
  font-weight: 300;
}

@media (max-width: 1024px) {
  .about {
    padding: 8rem 0;
    min-height: 840px;
  }
  .about .iconic {
    bottom: 0;
  }
  .about .iconic img {
    height: auto !important;
    width: 75vw;
    min-width: 280px;
    max-width: 500px;
  }
  .about .info {
    max-width: 100%;
    margin: 0;
    margin-bottom: auto;
    text-align: center;
  }
  .about .info h3 {
    font-size: 1.8rem;
  }
  .about .info p {
    font-size: 18px;
    line-height: 29.124px;
    font-weight: 300;
  }
}

#analysis {
  background: #fff;
  overflow: hidden;
  padding: 0;
}

#analysis .title {
  background: #FFFB10;
  text-align: center;
  padding: 4rem 0;
  margin-bottom: 4rem;
}

#analysis .title h1 {
  font-size: 5rem;
  font-weight: 900;
  color: #007A37;
  margin: 0;
}

#analysis .iconic {
  left: 0;
}

#analysis .info {
  color: #007A37;
  margin-left: auto;
}

#target .iconic, #idea .iconic {
  right: 0;
}

#target .info, #idea .info {
  margin-right: auto;
}

#strategy {
  background: #fff;
}

#strategy .iconic {
  left: 0;
  bottom: 0;
}

#strategy .info {
  margin-left: auto;
  color: #007A37;
}

#idea p {
  margin-bottom: 4rem;
}

#idea .cta {
  padding: 10px 6rem;
  background: #FFFB10;
  color: #007A37;
  outline: none;
  font-family: "Lato", sans-serif;
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
}

#idea .cta:hover {
  background: #fff;
  color: #000;
}

#team {
  padding-top: 0;
  background: #fff;
}

#team .title {
  width: 100%;
  padding: 2em 0;
  margin-bottom: 4em;
  background: #FFFB10;
  color: #007A37;
}

#team .title h1 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(1rem, 12vw, 6rem);
}

#team .grid .member {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 4em;
}

#team .grid .member .list {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 250px;
  -webkit-box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  margin: 2em 0;
}

@media (min-width: 1084px) {
  #team .grid .member .list:nth-child(even) {
    margin-bottom: -8em;
  }
}

@media (max-width: 1083px) and (min-width: 834px) {
  #team .grid .member .list:nth-child(2) {
    margin-bottom: -8rem;
  }
  #team .grid .member .list:nth-child(5) {
    margin-bottom: -8rem;
  }
  #team .grid .member .list:nth-child(8) {
    margin-bottom: -8rem;
  }
  #team .grid .member .list:nth-child(11) {
    margin-bottom: -8rem;
  }
}

@media (max-width: 833px) and (min-width: 569px) {
  #team .grid .member .list:nth-child(even) {
    margin-bottom: -8em;
  }
}

#team .grid .member .list:hover {
  -webkit-box-shadow: 0 25px 1rem 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 25px 1rem 0 rgba(0, 0, 0, 0.1);
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.15, 1.9), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.15, 1.9);
}

#client-list {
  background: -webkit-gradient(linear, left top, left bottom, from(0), color-stop(0%, #f5f6f8), to(#fff));
  background: linear-gradient(0, #f5f6f8 0%, #fff 100%);
}

#client-list .list {
  width: 100%;
  max-height: 500px;
  border-radius: 1rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
}

#client-list .list::before {
  opacity: 0;
  position: absolute;
  z-index: 2;
  content: '';
  background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(0, 0, 0, 0.8)), color-stop(80%, rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 80%);
}

#client-list .list:hover {
  -webkit-box-shadow: 0 10px 1rem 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 10px 1rem 0 rgba(0, 0, 0, 0.25);
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

.detail {
  padding: 0;
  background: #fff;
  color: #25272E;
}

.detail .swiper-button-next, .detail .swiper-button-prev {
  -webkit-filter: grayscale(1) brightness(4);
          filter: grayscale(1) brightness(4);
}

.detail .banner {
  overflow: hidden;
  position: relative;
}

.detail .banner .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.detail .grid {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.detail .points > p {
  font-weight: 300;
  font-size: 20px;
  text-align: center;
}

.detail .points ul li {
  font-weight: 700;
  font-size: 16px;
  line-height: 25.888px;
}

.detail .display {
  width: 100%;
  overflow: hidden;
}

.detail .display img {
  width: auto;
  height: 100%;
}

@media (max-width: 640px) {
  .detail .display img {
    width: 100% !important;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.detail .desc {
  font-size: 16px;
  line-height: 25.888px;
}

.detail .gallery {
  display: -ms-grid;
  display: grid;
  grid-gap: 2rem;
  -ms-grid-columns: (minmax(284px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(284px, 1fr));
}

@media (max-width: 284px) {
  .detail .gallery {
    -ms-grid-columns: none;
        grid-template-columns: none;
    width: 100%;
  }
}

.detail .gallery .list {
  height: 320px;
  overflow: hidden;
}

.detail .gallery .list:hover {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  -webkit-box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.1);
}

#contact h1 {
  -webkit-transform: translate3d(0, 50px, 50px) scale(0.75);
          transform: translate3d(0, 50px, 50px) scale(0.75);
  font-size: clamp(4rem, 8vw, 10rem);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}

#contact .sub {
  -webkit-transform: translate3d(0, -20px, -50px) scale(1.2);
          transform: translate3d(0, -20px, -50px) scale(1.2);
}

#contact .sub h2 {
  font-size: 4rem;
  text-transform: uppercase;
  color: #FFFB10;
  margin: 0;
}

#contact .sub p {
  font-size: 18px;
  line-height: 29.124px;
  font-weight: 300;
  margin-left: 1rem;
  max-width: 400px;
}

@media (max-width: 640px) {
  #contact .sub {
    margin-top: 5rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }
  #contact .sub h2, #contact .sub p {
    margin: 0;
  }
}

.contact-form {
  position: relative;
  overflow: hidden;
}

.contact-form .bubble:first-child {
  -webkit-transform: translate3d(150vw, 20vw, -500px) scale(4);
          transform: translate3d(150vw, 20vw, -500px) scale(4);
  z-index: 2;
}

.contact-form .bubble:nth-child(2) {
  -webkit-transform: translate3d(45vw, 10em, -50px) scale(0.75);
          transform: translate3d(45vw, 10em, -50px) scale(0.75);
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.contact-form .bubble:last-child {
  -webkit-transform: translate3d(5em, -5em, 100px) scale(0.75);
          transform: translate3d(5em, -5em, 100px) scale(0.75);
  left: 0;
  bottom: 0;
}

@media (max-width: 1024px) {
  .contact-form .bubble {
    opacity: .4;
  }
}

.contact-form .grid {
  z-index: 2;
}

.contact-form .grid input, .contact-form .grid textarea {
  outline: none;
}

.contact-form .grid .input {
  position: relative;
  margin-bottom: 2rem;
  padding-top: 1rem;
}

.contact-form .grid .inline {
  display: -ms-grid;
  display: grid;
  grid-gap: 1rem;
  -ms-grid-columns: (minmax(204px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(204px, 1fr));
}

@media (max-width: 204px) {
  .contact-form .grid .inline {
    -ms-grid-columns: none;
        grid-template-columns: none;
    width: 100%;
  }
}

.contact-form .grid .text {
  width: 100%;
  border: none;
  border-bottom: 2px solid #FFFB10;
  background: transparent;
  padding: 1rem;
  position: relative;
  font-size: 18px;
  letter-spacing: 2px;
  color: #fff;
}

.contact-form .grid .text:focus {
  border-bottom-color: #fff;
}

.contact-form .grid .list-btn {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.contact-form .grid .list-btn input {
  margin: 0 1rem 1rem;
  padding: 10px 4rem;
  border: 1px solid;
  cursor: pointer;
  font-size: 18px;
}

.contact-form .grid .list-btn input:first-child {
  background: #FFFB10;
  border-color: #FFFB10;
  color: #007A37;
}

.contact-form .grid .list-btn input:last-child {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.contact-form .grid .list-btn input:hover {
  background: #fff;
  color: #2B2A2F;
  border-color: transparent;
}

.contact-form .grid label {
  color: #FFFB10;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.contact-form .grid textarea {
  display: block;
  width: 100%;
  height: 350px;
  margin-top: 2rem;
  padding: 1rem;
  color: #007A37;
  font-family: "Lato", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  background: #E9EDF0;
  border: 2px solid #FFFB10;
}

.contact-form .grid textarea:focus {
  background: #fff;
  -webkit-box-shadow: 0 10px 1rem 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 1rem 0 rgba(0, 0, 0, 0.1);
}

footer {
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

footer .notice {
  position: absolute;
  bottom: 0;
  right: 4rem;
  z-index: -1;
}

footer .notice .glass {
  width: auto;
  height: 250px;
}

footer .notice .popout {
  width: auto;
  height: 100px;
  position: absolute;
  top: -16%;
  left: -100%;
}

@media (max-width: 640px) {
  footer .notice {
    bottom: 6rem;
  }
}

footer h1 {
  font-size: 5rem;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  footer h1 {
    font-size: calc(2rem + 2vw);
  }
}

footer #particles-js2 {
  position: absolute;
  top: 0;
  z-index: -1;
}

footer .content {
  width: 100%;
  height: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -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;
}

footer .content .cta {
  padding: 10px 6rem;
  background: #FFFB10;
  color: #007A37;
  margin-top: 2rem;
  outline: none;
  font-family: "Lato", sans-serif;
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
  cursor: pointer;
}

footer .content .cta:hover {
  background: #fff;
  color: #2B2A2F;
}

@media (max-width: 960px) {
  footer .content {
    height: 100vh;
    min-height: 720px;
  }
}

footer .footer {
  margin-top: 4rem;
}

footer .footer h3 {
  text-transform: uppercase;
  font-weight: 900;
  margin: 0;
}

footer .footer p {
  font-weight: 300;
  margin-top: 5px;
}

nav#down {
  padding: 1rem;
  background: #00612c;
}

nav#down .grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

nav#down .menu {
  color: #fff;
  font-size: 14px;
  margin: 15px 1rem;
  font-weight: 700;
  position: relative;
}

nav#down .menu::before {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  content: '';
  width: 0;
  height: 2px;
  margin-top: 2px;
  background: #fff;
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
}

nav#down .menu:hover::before, nav#down .menu.active::before {
  width: 100%;
}
/*# sourceMappingURL=style.css.map */