/* ===================== Default ============================ */
/* Setup */
::-moz-selection { /* Code for Firefox */
  color: #FFFFFF;
  background: #DE99F3;
}
::selection {
  color: #FFFFFF;
  background: #DE99F3;
}
.z-1{z-index: 1;}
.z-2{z-index: 2;}
.z-3{z-index: 3;}
body {
  overflow-x: hidden;
  background-color: #F5F5F5;
}

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

*,
.panel_p,
.project {
  padding: 0;
  margin: 0;
}

#smooth-scroll {
  top: 0;
  left: 0;
  height: 100vh;
  overflow: hidden;
}

/* Fonts Face */
@font-face {
  font-family: "NeueKaine-Black";
  src: url(../fonts/NeueKaine-Black.ttf) format("truetype");
}

@font-face {
  font-family: "NeueKaine-Bold";
  src: url(../fonts/NeueKaine-Bold.ttf) format("truetype");
}

@font-face {
  font-family: "NeueKaine-ExtraBold";
  src: url(../fonts/NeueKaine-ExtraBold.ttf) format("truetype");
}

@font-face {
  font-family: "NeueKaine-Light";
  src: url(../fonts/NeueKaine-Light.ttf) format("truetype");
}

@font-face {
  font-family: "NeueKaine-Medium";
  src: url(../fonts/NeueKaine-Medium.ttf) format("truetype");
}

@font-face {
  font-family: "NeueKaine-Regular";
  src: url(../fonts/NeueKaine-Regular.ttf) format("truetype");
}

@font-face {
  font-family: "NeueKaine-SemiBold";
  src: url(../fonts/NeueKaine-SemiBold.ttf) format("truetype");
}

@font-face {
  font-family: "SpaceGrotesk-Bold";
  src: url(../fonts/SpaceGrotesk-Bold.otf) format("opentype");
}

@font-face {
  font-family: "SpaceGrotesk-Light";
  src: url(../fonts/SpaceGrotesk-Light.otf) format("opentype");
}

@font-face {
  font-family: "SpaceGrotesk-Medium";
  src: url(../fonts/SpaceGrotesk-Medium.otf) format("opentype");
}

@font-face {
  font-family: "SpaceGrotesk-Regular";
  src: url(../fonts/SpaceGrotesk-Regular.otf) format("opentype");
}

@font-face {
  font-family: "SpaceGrotesk-SemiBold";
  src: url(../fonts/SpaceGrotesk-SemiBold.otf) format("opentype");
}

/* Fonts Family */
.font-NeueKaine-Black {
  font-family: "NeueKaine-Black";
}

.font-NeueKaine-Bold {
  font-family: "NeueKaine-Bold";
}

.font-NeueKaine-ExtraBold {
  font-family: "NeueKaine-ExtraBold";
}

.font-NeueKaine-Light {
  font-family: "NeueKaine-Light";
}

.font-NeueKaine-Medium {
  font-family: "NeueKaine-Medium";
}

.font-NeueKaine-Regular {
  font-family: "NeueKaine-Regular";
}

.font-NeueKaine-SemiBold {
  font-family: "NeueKaine-SemiBold";
}

.font-SpaceGrotesk-Bold {
  font-family: "SpaceGrotesk-Bold";
}

.font-SpaceGrotesk-Light {
  font-family: "SpaceGrotesk-Light";
}

.font-SpaceGrotesk-Medium {
  font-family: "SpaceGrotesk-Medium";
}

.font-SpaceGrotesk-Regular {
  font-family: "SpaceGrotesk-Regular";
}

.font-SpaceGrotesk-SemiBold {
  font-family: "SpaceGrotesk-SemiBold";
}

/* Fonts Template View Size */
.vz-website-decorative-giga {
  font-family: "NeueKaine-Regular";
  font-size: 15.6vw;
  line-height: 24vh;
  font-style: normal;
  font-weight: 483;
  color: #161415;
}

.vz-website-decorative-number-bold {
  font-family: "NeueKaine-Regular";
  font-size: 15.6vw;
  line-height: 24vh;
  font-style: normal;
  font-weight: 816;
  color: #161415;
}

.vz-website-title-mega {
  font-family: "NeueKaine-Regular";
  font-size: 13vw;
  line-height: 22.8vh;
  font-style: normal;
  font-weight: 483;
  color: #161415;
}

.vz-website-title-hero {
  font-family: "NeueKaine-Regular";
  font-size: 7.8vw;
  line-height: 14vh;
  font-style: normal;
  font-weight: 483;
  color: #161415;
}

.vz-website-title-hero-bold {
  font-family: "NeueKaine-Regular";
  font-size: 7.8vw;
  line-height: 14vh;
  font-style: normal;
  font-weight: 900;
  color: #161415;
}

.vz-website-decorative-body {
  font-family: "SpaceGrotesk-Regular";
  font-size: 5.2vw;
  line-height: 8vh;
  font-style: normal;
  font-weight: 400;
  color: #161415;
}

.vz-website-title-large {
  font-family: "NeueKaine-Regular";
  font-size: 3.64vw;
  line-height: 7vh;
  font-style: normal;
  font-weight: 483;
  color: #161415;
}

.vz-website-decorative-decorative {
  font-family: "NeueKaine-Regular";
  font-size: 3.15vw;
  line-height: 6vh;
  font-style: normal;
  font-weight: 900;
  color: #161415;
}

.vz-website-title-moderate {
  font-family: "SpaceGrotesk-Regular";
  font-size: 3.16vw;
  line-height: 5vh;
  font-style: normal;
  font-weight: 500;
  color: #161415;
}

.vz-website-sub-title-small {
  font-family: "SpaceGrotesk-Regular";
  font-size: 2.6vw;
  line-height: 4vh;
  font-style: normal;
  font-weight: 500;
  color: #161415;
}

.vz-website-sub-title-moderate {
  font-family: "SpaceGrotesk-Regular";
  font-size: 2.1vw;
  line-height: 3vh;
  font-style: normal;
  font-weight: 400;
  color: #161415;
}

.vz-website-body-large {
  font-family: "SpaceGrotesk-Regular";
  font-size: 1.55vw;
  line-height: 2.5vh;
  font-style: normal;
  font-weight: 500;
  color: #161415;
}

.vz-website-body-text {
  font-family: "SpaceGrotesk-Regular";
  font-size: 1.2vw;
  line-height: 2vh;
  font-style: normal;
  font-weight: 400;
  color: #161415;
}

.vz-website-caption-moderate {
  font-family: "SpaceGrotesk-Regular";
  font-size: 0.8vw;
  line-height: 1.3vh;
  font-style: normal;
  font-weight: 400;
  color: #161415;
}

/* Fonts Color */
.text-white,
.font-white {
  color: #F5F5F5 !important;
}

.text-black,
.font-black {
  color: #161415 !important;
}

/* Background Color */
.bg-white,
.bgsub-white {
  background-color: #F5F5F5 !important;
}

.bgsub-black {
  background-color: #161415 !important;
}

/* Text */
h1,
h2,
h3,
h4,
h5,
h6 {}

p,
a,
label,
th,
td,
li,
input,
textarea,
select {
  font-family: "SpaceGrotesk-Light";
  font-size: 1vw;
  line-height: 3vh;
  font-style: normal;
  font-weight: 400;
  color: #161415;
}

a,
a:hover,
a[data-toggle="collapse"] {
  outline: none;
  color: #161415;
  text-decoration: none !important;
  cursor: pointer;
  transition: all .3s;
}

b,
strong {}

i {}

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

form input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.form-control:focus,
.form-select:focus {
  box-shadow: unset;
}

/* z-index */
.z-index-1 {
  z-index: 1;
}

.z-index-2 {
  z-index: 2;
}

.z-index-3 {
  z-index: 3;
}

/* Positioning and Sizing */
.top-15 {
  top: 15%;
}

.w-10 {
  width: 10%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 40%;
}

.w-46 {
  width: 46%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.vh-8 {
  height: 8vh !important;
}

.vh-44 {
  height: 44vh !important;
}

.mb-3vh {
  margin-bottom: 3vh;
}

.mb-5vh {
  margin-bottom: 5vh;
}

.mb-6vh {
  margin-bottom: 6vh;
}

/* Component */
.line-black {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #161415;
}

.border-white {
  border: 1px solid #F5F5F5;
}

.border-bottom-white {
  border-bottom: 1px solid #F5F5F5;
}

.border-right-white {
  border-right: 1px solid #F5F5F5;
}

.border-y-white {
  border-top: 1px solid #F5F5F5;
  border-bottom: 1px solid #F5F5F5;
}

.border-black {
  border: 1px solid #161415;
}

.bc-black {
  border-color: #161415 !important;
}

.border-left-black {
  border-left: 1px solid #161415;
}

.border-y-black {
  border-top: 1px solid #161415;
  border-bottom: 1px solid #161415;
}

.border-x-black {
  border-left: 1px solid #161415;
  border-right: 1px solid #161415;
}

.box-diagonal.expand {
  top: 0;
  right: 0;
  transition: all 1s;
}

.bgbox {
  position: relative;
  width: 100%;
  height: 26vh;
}

.boxc {
  position: absolute;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
}

.img-1 {
  height: 100vh;
  width: 100%;
}

.disappear {
  height: 100vh;
  width: 100%;
}

.overlay {
  position: absolute;
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: -webkit-linear-gradient(180deg, transparent 0%, #161415 100%);
  background: -o-linear-gradient(180deg, transparent 0%, #161415 100%);
  background: -moz-linear-gradient(180deg, transparent 0%, #161415 100%);
  background: linear-gradient(180deg, transparent 0%, #161415 100%);
}

.box-diagonal {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 90vh;
  border-left: 1px solid #161415;
  border-bottom: 1px solid #161415;
  background: linear-gradient(to top left, #F5F5F5 calc(50% - 1px), #161415, #F5F5F5 calc(50% + 1px));
  transition: all 1s;
}

.panel_p {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 200vh;
  overflow: hidden;
  width: 100%;
}

.column {
  flex-basis: 100%;
  position: relative;
  overflow: hidden;
}

.col__image-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 200vh;
}

.img_parallax {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.reachus-wrapper .wrapper {
  padding: 0 2.8vw;
}

.reachus-wrapper .wrapper a {
  display: block;
  position: relative;
  padding: 40vh 3vw 5vh;
  border-left: 1px solid #161415;
  border-right: 1px solid #161415;
}

.reachus-wrapper .wrapper a h2 {
  font-family: "SpaceGrotesk-Light";
  font-size: 8vw;
  line-height: 16vh;
}
.reachus-wrapper .wrapper a h2 b{
  font-family: "SpaceGrotesk-Bold";
}
    
.reachus-wrapper .wrapper a .image {
  position: absolute;
  right: 5vw;
  bottom: 15vh;
}

.cb-wrapper .arrow_left {
  position: absolute;
  left: 0;
  top: 50%;
  transition: all .5s;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cb-wrapper .arrow_right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all .5s;
  mix-blend-mode: difference;
}

.cb-wrapper .img_wrapper {
  background-color: #afe5e8;
  display: flex;
  flex: 1 1 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  transition: background-color .9s ease-out;
}

.cb-wrapper .img_wrapper.active {
  background-color: rgb(255, 0, 68);
}

.cb-wrapper .img_wrapper .color_change {
  filter: grayscale(100%) contrast(1) blur(0px);
  flex: 1 0 100%;
  height: 100%;
  max-width: 100%;
  mix-blend-mode: multiply;
  object-fit: cover;
  opacity: 1;
  position: relative;
  width: 100%;
  transition: transform 1s;
}

.cb-wrapper .img_wrapper .color_change.active {
  transform: scale(1.3);
}

.cb-wrapper .img_wrapper::before {
  background-color: #1837ae;
  bottom: 0;
  content: '';
  height: 100%;
  left: 0;
  mix-blend-mode: lighten;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

.cb-wrapper .arrows_wrapper.active .arrow_left {
  transform: translateY(none);
  left: 100%;
}

.cb-wrapper .arrows_wrapper.active .arrow_right {
  right: 100%;
  transform: translateY(none);
}

.portfolios-page-project .col-lg-6.mb-lg-4:nth-child(odd)::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: -3rem;
  width: 100vw;
  height: 1px;
  background-color: #F5F5F5;
}

.portfolios-page-project .col-lg-6.mb-lg-4:nth-child(odd)::after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -3rem;
  width: 100vw;
  height: 1px;
  background-color: #F5F5F5;
}

.portfolios-page-project .item {
  z-index: 2;
  margin-bottom: 6vh !important;
  padding: 0 1.5vw;
  height: 80vh;
}

.portfolios-page-project .item:nth-child(3),
.portfolios-page-project .item:nth-child(4) {
  margin-bottom: 6vh !important;
}

.portfolios-page-project .item:nth-child(5),
.portfolios-page-project .item:nth-child(6) {
  margin-bottom: 0 !important;
}

.portfolios-page-project .wrapper {
  padding: 1px;
}

.portfolios-page-project .wrapper .images {
  width: 99.5%;
  height: 99.5%;
  overflow: hidden;
}

.portfolios-page-project .wrapper .images img {
  object-fit: cover;
  height: 100%;
  transition: all 1s;
}

.portfolios-page-project .wrapper:hover .images img {
  transform: scale(1.1);
  transition: all 1s;
}

.portfolios-page-project .wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100vh;
  background-color: #F5F5F5;
}

.portfolios-page-project .wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100vh;
  background-color: #161415;
}


.portfolios-page-project .wrapper .brief{
    position: relative;
    padding: 4rem !important;
}

.portfolios-page-project .wrapper .brief::before {
  content: '';
  position: absolute;
  margin: 0 auto;
  bottom: 1px;
  left: 0;
  right: 0;
  width: 99.5%;
  height: 100%;
  background: -webkit-linear-gradient(180deg, transparent 0%, #161415 60%);
  background: -o-linear-gradient(180deg, transparent 0%, #161415 60%);
  background: -moz-linear-gradient(180deg, transparent 0%, #161415 60%);
  background: linear-gradient(180deg, transparent 0%, #161415 60%);
}
.portfolios-page-project .wrapper .brief::after {
  content: '';
  position: absolute;
  margin: 0 auto;
  bottom: -100%;
  left: 0;
  right: 0;
  width: 99.5%;
  height: 100%;
  background: var(--GRADIENT-BLACK-NAVY, radial-gradient(90.96% 90.96% at 18.6% 14.63%, #001940 0%, #231F20 100%));
  transition: all 1s;
}

.portfolios-page-project .wrapper:hover .brief::after {
  bottom: 0;
  transition: all 1s;
}

.portfolios-page-project .wrapper .brief h3 {
  padding-bottom: 1vw;
  font-family: "SpaceGrotesk-Regular";
  font-size: 1vw;
  text-transform: uppercase;
}

.portfolios-page-project .wrapper .brief h4 {
  padding-bottom: 1.6vw;
  font-family: "SpaceGrotesk-Medium";
  font-size: 2vw;
}

.portfolios-page-project .wrapper .brief h5 {
  opacity: 0;
  top: 80%;
  font-family: "SpaceGrotesk-Medium";
  font-size: 1.6vw;
  transition: all .5s;
}

.portfolios-page-project .wrapper:hover .brief h5 {
  opacity: 1;
  top: 60%;
  transform: translateY(-50%);
  transition: all .5s;
}

.portfolios-page-project .wrapper .brief ul {
  list-style: none;
}

.portfolios-page-project .wrapper .brief ul li {
  font-size: 0.8vw;
  color: #F5F5F5;
}

.portfolios-page-project .wrapper .brief ul li::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 6%;
  width: 1px;
  height: 40%;
  background-color: #161415;
}

.portfolios-page-project .wrapper .brief ul li:last-child::after {
  display: none;
}

.portfolios-page-project.home .col-lg-6.mb-lg-4:nth-child(odd)::before {
  background-color: #161415;
}

.portfolios-page-project.home .col-lg-6.mb-lg-4:nth-child(odd)::after {
  background-color: #161415;
}

.portfolios-page-project.home .wrapper::before {
  background-color: #161415;
}

.portfolios-page-project.home .wrapper::after {
  background-color: #161415;
}

/* Mobile */
@media screen and (max-width: 846px) {

  p,
  a,
  label,
  th,
  td,
  li,
  input,
  textarea,
  select {
    font-size: 4.2vw;
    line-height: 3.5vh;
  }

  .reachus-wrapper .wrapper {
    border: none;
    padding: 10vh 8vw;
  }

  .reachus-wrapper .wrapper a {
    padding: 0;
    border: unset;
  }

  .reachus-wrapper .wrapper a h2 {
    margin-bottom: 3vh !important;
    font-size: 14vw;
    line-height: 10vh;
  }

  .reachus-wrapper .wrapper a .image {
    position: relative !important;
    bottom: unset !important;
    right: unset !important;
    width: 8vw;
  }

  .portfolios-page-project .col-lg-6.mb-lg-4::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 1px;
    background-color: #F5F5F5;
  }

  .portfolios-page-project .col-lg-6.mb-lg-4::after {
    content: '';
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 1px;
    background-color: #F5F5F5;
  }

  .portfolios-page-project .col-lg-6.mb-lg-4:nth-child(odd)::before {
    left: 0;
  }

  .portfolios-page-project .col-lg-6.mb-lg-4:nth-child(odd)::after {
    left: 0;
  }

  .portfolios-page-project .item {
    margin: 0 0 10vh !important;
    padding: 0 8vw;
    height: auto;
  }

  .portfolios-page-project .item:nth-child(3),
  .portfolios-page-project .item:nth-child(4) {}

  .portfolios-page-project .item:nth-child(5),
  .portfolios-page-project .item:nth-child(6) {}

  .portfolios-page-project .wrapper {}

  .portfolios-page-project .wrapper .images {
    position: relative !important;
    top: unset !important;
    transform: unset !important;
    height: auto;
  }

  .portfolios-page-project .wrapper .images img {}
  
  .portfolios-page-project .wrapper .brief::after {
      bottom: 0 !important;
  }

  .portfolios-page-project .wrapper .brief {
    position: relative !important;
    padding: 4vh 5vw !important;
    bottom: unset !important;
    left: unset !important;
    height: auto;
  }

  .portfolios-page-project .wrapper .brief h3 {
    margin-bottom: 1vh;
    font-family: "SpaceGrotesk-Light";
    font-size: 4vw;
    line-height: 3vh;
  }

  .portfolios-page-project .wrapper .brief h4 {
    margin-bottom: 3vh;
    width: 100% !important;
    font-size: 7vw;
    line-height: 5vh;
  }

  .portfolios-page-project .wrapper .brief h5 {}

  .portfolios-page-project .wrapper .brief ul {
    display: block;
    justify-content: unset !important;
  }

  .portfolios-page-project .wrapper .brief ul li {
    display: inline-block;
    padding-right: 3vw !important;
    width: auto;
    font-family: "SpaceGrotesk-Light";
    text-align: center;
    font-size: 2.2vw;
    line-height: 3vh;
  }

  .portfolios-page-project .wrapper:hover .images img {}

  .portfolios-page-project .wrapper::before {}

  .portfolios-page-project .wrapper::after {}

  .portfolios-page-project .wrapper .brief::before {
    display: none !important;
  }

  .portfolios-page-project .wrapper:hover .brief::before {}

  .portfolios-page-project .wrapper:hover .brief h5 {}

  .portfolios-page-project .wrapper .brief ul li::after {}

  .portfolios-page-project .wrapper .brief ul li:last-child::after {}

  .portfolios-page-project.home .col-lg-6.mb-lg-4:nth-child(odd)::before {}

  .portfolios-page-project.home .col-lg-6.mb-lg-4:nth-child(odd)::after {}

  .portfolios-page-project.home .wrapper::before {}

  .portfolios-page-project.home .wrapper::after {}
}

/* ===================== End Default ======================== */





/* ===================== Preloader ============================ */
.preloader {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  opacity: 1;
  background: #F5F5F5;
  transition: all .5s;
}

.preloader.hide {
  z-index: -1;
  opacity: 0;
  transition: all .5s;
}

.preloader,
.preloader .layer-00,
.preloader .layer-01,
.preloader .layer-02 {
  width: 100%;
  height: 100vh;
}

.preloader .layer-00 {
  z-index: 2;
  background: #F5F5F5;
}

.preloader .layer-01 {}

.preloader .layer-01 .box-diagonal {
  width: 100%;
  height: 100vh;
}

.preloader .layer-01 .box-diagonal.box-diagonal-01 {
  left: 0;
  right: unset;
  border-bottom: 1px solid #161415;
  border-left: unset;
  border-right: 1px solid #161415;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #161415, transparent calc(50% + 1px));
}

.preloader .layer-01 .box-diagonal.box-diagonal-02 {
  border-left: 1px solid #161415;
  border-bottom: 1px solid #161415;
  background: linear-gradient(to top left, transparent calc(50% - 1px), #161415, transparent calc(50% + 1px));
}

.preloader .layer-02 {
  opacity: 0;
  width: 0%;
  height: 0%;
  transition: all .5s;
}

.preloader .layer-02.active {
  opacity: 1;
  width: 100%;
  height: 100%;
  transition: all .5s;
}

.preloader .layer-02 .background {
  width: 65%;
  height: 65%;
  background: url('../images/preloader_background.jpg');
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.preloader .layer-02 .background img {
  width: 100%;
  height: 100%;
}

.preloader .layer-02 .box-diagonal {
  width: 17.7%;
  height: 17.7%;
  border: 1px solid transparent;
  background: transparent !important;
}

.preloader .layer-02 .box-diagonal.box-diagonal-03 {
  left: 0;
  right: unset;
  border-bottom: 1px solid #161415;
  border-right: 1px solid #161415;
}

.preloader .layer-02 .box-diagonal.box-diagonal-04 {
  border-bottom: 1px solid #161415;
  border-left: 1px solid #161415;
}

.preloader .layer-02 .box-diagonal.box-diagonal-05 {
  top: unset;
  bottom: 0;
  left: 0;
  right: unset;
  border-top: 1px solid #161415;
  border-right: 1px solid #161415;
}

.preloader .layer-02 .box-diagonal.box-diagonal-06 {
  top: unset;
  bottom: 0;
  border-top: 1px solid #161415;
  border-left: 1px solid #161415;
}

.preloader .layer-03 {
  opacity: 0;
  width: 28%;
  height: 0%;
  text-align: center;
  background: #161415;
  overflow: hidden;
  transition: all .5s;
}

.preloader .layer-03.active {
  opacity: 1;
  height: 80%;
  transition: all .5s;
}

.preloader .layer-03 .logo {
  top: 22%;
  width: 12vw;
}

.preloader .layer-03 h5 {
  line-height: 3.5vh;
  font-size: 1.15vw;
  text-transform: uppercase;
  color: #F5F5F5;
}

.preloader .layer-03 #btnPreloader {
  top: 78%;
  cursor: pointer;
}

.preloader .layer-03 #btnPreloader:hover .left {
  margin: 0 0.5vw;
  transition: all .5s;
}

.preloader .layer-03 #btnPreloader .left {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1vw;
  width: 1.4vw;
  transition: all .5s;
}

.preloader .layer-03 #btnPreloader p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
  font-size: 1.5vw;
  text-transform: uppercase;
  color: #F5F5F5;
}

.preloader .layer-03 #btnPreloader:hover .right {
  margin: 0 0.5vw;
  transition: all .5s;
}

.preloader .layer-03 #btnPreloader .right {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1vw;
  width: 1.4vw;
  transition: all .5s;
}

.preloader .layer-04 {
  opacity: 0;
  left: -10vw;
  right: unset;
  width: 8.5%;
  transition: all .5s;
}

.preloader .layer-04.active {
  opacity: 1;
  left: 2.5vw;
  transition: all .5s;
}

.preloader .layer-04 .logo {
  margin-bottom: 2vh;
}

.preloader .layer-04 p {
  margin: 0;
  text-transform: uppercase;
  line-height: 2vh;
  font-size: 0.7vw;
}

.awal {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #F5F5F5;
}

/* Mobile */
@media screen and (max-width: 846px) {
  .preloader {}

  .preloader.hide {}

  .preloader,
  .preloader .layer-00,
  .preloader .layer-01,
  .preloader .layer-02 {}

  .preloader .layer-00 {}

  .preloader .layer-01 {}

  .preloader .layer-01 .box-diagonal {}

  .preloader .layer-01 .box-diagonal.box-diagonal-01 {}

  .preloader .layer-01 .box-diagonal.box-diagonal-02 {}

  .preloader .layer-02 {}

  .preloader .layer-02.active {}

  .preloader .layer-02 .background {}

  .preloader .layer-02 .background img {}

  .preloader .layer-02 .box-diagonal {}

  .preloader .layer-02 .box-diagonal.box-diagonal-03 {}

  .preloader .layer-02 .box-diagonal.box-diagonal-04 {}

  .preloader .layer-02 .box-diagonal.box-diagonal-05 {}

  .preloader .layer-02 .box-diagonal.box-diagonal-06 {}

  .preloader .layer-03 {}

  .preloader .layer-03.active {
    width: 90%;
    height: 40%;
  }

  .preloader .layer-03 .logo {
    top: 20%;
    width: 30vw;
  }

  .preloader .layer-03 h5 {}

  .preloader .layer-03 #btnPreloader {}

  .preloader .layer-03 #btnPreloader:hover .left {}

  .preloader .layer-03 #btnPreloader .left {
    width: 4vw;
  }

  .preloader .layer-03 #btnPreloader p {}

  .preloader .layer-03 #btnPreloader:hover .right {}

  .preloader .layer-03 #btnPreloader .right {
    width: 4vw;
  }

  .preloader .layer-04 {
    top: -50vh;
    transform: unset;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40%;
  }

  .preloader .layer-04.active {
    top: 1.2vh;
    left: 0;
    text-align: center;
  }

  .preloader .layer-04 .logo {
    margin-bottom: 1vh;
    width: 7vw;
  }

  .preloader .layer-04 p {}
}

/* ===================== End Preloader ======================== */





/* ===================== Navigation ============================ */
.subvision-navigation {
  position: fixed;
  z-index: 98;
  padding: 7.2vh 4vw;
  top: 0;
  left: 0;
  width: 100vw;
  transition: all .8s cubic-bezier(0.41, 1, 0.45, 1);
  mix-blend-mode: difference;
}

.subvision-navigation.inverted {
  /* mix-blend-mode: unset; */
}

.subvision-navigation .logo {
  width: 10.5vw;
}

.subvision-navigation ul {
  display: flex;
  margin: 0;
  padding: 0 0 0 1.5vw;
  list-style: none;
}

.subvision-navigation ul li {
  position: relative;
}

.subvision-navigation ul li.active {}

.subvision-navigation ul li a {
  display: block;
  margin: 1vh 0.5vw;
  padding: 1vh 2vw;
  margin-bottom: 0;
  font-family: "SpaceGrotesk-Regular";
  text-transform: uppercase;
  font-size: 0.9vw;
  color: #F5F5F5;
}
.subvision-navigation ul li:hover a{
  font-family: "SpaceGrotesk-Bold";
}
.subvision-navigation ul li.active a,
.subvision-navigation ul li.active a p {
  font-family: "SpaceGrotesk-Bold";
  color: #161415;
  background: #F5F5F5;
  /*  
  color: #161415;
  background: #F5F5F5;
  */
}

.subvision-navigation.inverted ul li.active a,
.subvision-navigation.inverted ul li.active a p {
  color: #F5F5F5;
  background: #161415;
}

.subvision-navigation.scrolled {
  top: -120px;
}

.subvision-navigation.inverted ul li a,
.subvision-navigation.inverted ul li a p {
  color: #161415;
}

.subvision-navigation .sidenav ul li:last-child {
  position: absolute;
  right: 4.1vw;
}

.subvision-navigation.inverted.scrolled {
  background: linear-gradient(0deg, transparent 0%, #F5F5F5 100%);
}

.subvision-navigation ul li a::after,
.subvision-navigation ul li.active a::after {
  content: '';
  opacity: 0;
  display: block;
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  right: 2.5vw;
  width: 1vw;
  height: 1vw;
  background: url(../images/arrow_hover_nav.svg);
  background-repeat: no-repeat !important;
  background-size: 100% !important;
  background-position: center !important;
  transition: all 1s;
}

.subvision-navigation.inverted ul li a::after,
.subvision-navigation.inverted ul li.active a::after {
  content: '';
  opacity: 0 !important;
  display: block;
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  right: 2.5vw;
  width: 1vw;
  height: 1vw;
  background: url(../images/arrow_hover_nav_black.svg);
  background-repeat: no-repeat !important;
  background-size: 100% !important;
  background-position: center !important;
  opacity: 1;
  transition: all 1s;
}

.subvision-navigation ul li.active a::after,
.subvision-navigation ul li:hover a::after {
  opacity: 1;
  right: 1vw;
  transition: all 1s;
}

.subvision-navigation.inverted ul li:hover a::after {
  opacity: 1 !important;
  right: 1vw;
  transition: all 1s;
}

/*
.subvision-navigation ul li.active a::after,
.subvision-navigation.inverted ul li.active a::after{
  display: none;
}
*/
.TPTarget-01{
  position: absolute;
  z-index: 1;
  top: 10vh;
  left: 0;
  width: 100%;
  height: 0;
}
.subvision-navigation{
  top: -25vh;
}
.subvision-navigation .logo,
.subvision-navigation .sidenav{
  position: relative;
  z-index: 3;
  top: 25vh;
  opacity: 1;
  transition: all .5s;
}
.subvision-navigation.newnav .logo,
.subvision-navigation.newnav .sidenav{
  position: relative;
  z-index: 1;
  top: 0;
  opacity: 0;
  transition: all .5s;
}
.subvision-navigation .burger{
  position: absolute;
  z-index: 1;
  top: 0;
  right: 8vw;
  font-size: 3vw;
  color: #F5F5F5;
  cursor: pointer;
  opacity: 0;
  transition: all .5s;
}
.subvision-navigation.newnav .burger{
  z-index: 3;
  top: 33vh;
  opacity: 1;
  transition: all .5s;
}
.subvision-navigation.inverted .burger {
  color: #161415;
}

/* Mobile */
@media screen and (max-width: 846px) {
  .subvision-navigation {
    padding: 5vh 8vw;
    /* mix-blend-mode: unset; */
  }

  .subvision-navigation.inverted {}

  .subvision-navigation .logo {
    width: 30vw;
  }

  .subvision-navigation .burger {
    z-index: 3 !important;
    opacity: 1 !important;
    top: 31vh !important;
    font-size: 7vw;}
  .subvision-navigation.newnav .burger{}

  .subvision-navigation .sidenav {
    position: fixed !important;
    z-index: 3 !important;
    top: -100vh !important;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #F5F5F5;
    transition: all .5s;
  }

  .subvision-navigation.active {
    mix-blend-mode: unset;
  }

  .subvision-navigation .sidenav.active {
    padding: 0;
    top: 0 !important;
    transition: all .5s;
  }

  .subvision-navigation .sidenav .logo {
    position: absolute;
    top: 4.6vh;
    left: 8vw;
    width: 32vw;
  }

  .subvision-navigation .sidenav .close {
    position: absolute;
    top: 5.2vh;
    right: 7.2vw;
    font-size: 10vw;
    color: #161415;
  }

  .subvision-navigation ul {
    display: block;
    margin: 18vh 0 0;
    padding: 0;
    text-align: center;
  }

  .subvision-navigation ul li {
    margin: 0;
    padding: 5vh 0;
  }

  .subvision-navigation ul li.active {
    background: #161415;
  }

  .subvision-navigation ul li a {
    margin: 0;
    padding: 0;
    font-size: 5vw;
    color: #161415;
    background: #F5F5F5;
  }

  .subvision-navigation .sidenav ul li:last-child a {
    display: block;
  }

  .subvision-navigation ul li.active a,
  .subvision-navigation ul li.active a p {
    color: #F5F5F5;
    background: #161415;
  }

  .subvision-navigation.inverted ul li.active a {}

  .subvision-navigation.scrolled {}

  .subvision-navigation.inverted ul li a {}

  .subvision-navigation .sidenav ul li:last-child {
    position: relative;
    right: unset;
  }

  .subvision-navigation.inverted.scrolled {}

  .subvision-navigation ul li a::after {}

  .subvision-navigation.inverted ul li a::after {}

  .subvision-navigation ul li:hover a::after {}

  .subvision-navigation.inverted ul li:hover a::after {}

  .subvision-navigation ul li.active a::after,
  .subvision-navigation.inverted ul li.active a::after {
    display: none;
  }
}

/* ===================== End Navigation ======================== */





/* ===================== Footer ============================ */
.subvision-footer {
  height: 52vh;
  overflow: hidden;
}

.subvision-footer .menu {
  font-family: "SpaceGrotesk-Regular";
  font-size: 1.4vw;
}

.subvision-footer .address,
.subvision-footer .copyright {
  font-size: 0.8vw;
  line-height: 2.3vh;
}

.subvision-footer .bgbox {
  height: 26vh;
}

.subvision-footer .ft-link::before {
  content: '';
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--GRADIENT-BLACK-NAVY, radial-gradient(90.96% 90.96% at 18.6% 14.63%, #001940 0%, #231F20 100%));
  transition: all .5s;
}

.subvision-footer .ft-link.sosmed::before {
  background: #161415;
}

.subvision-footer .ft-link.sosmed i {
  position: relative;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  text-align: center;
  background: #F5F5F5;
}

.subvision-footer .ft-link.sosmed i::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  font-size: 2vw;
}

.subvision-footer .ft-link:hover::before {
  bottom: 0%;
  transition: all .5s;
}

.subvision-footer .ft-link:hover p {
  color: #F5F5F5 !important;
  transition: all .5s;
}

/* Mobile */
@media screen and (max-width: 846px) {
  .mobilefooter{
    height: 12vh;
  }
  .subvision-footer {
    height: auto;
  }

  .subvision-footer .border {
    border: 1px solid transparent !important;
    border-bottom: 1px solid #161415 !important;
  }

  .subvision-footer .bgbox {
    height: auto;
  }

  .subvision-footer p {
    margin-bottom: 0 !important;
    padding: 3vh 8vw;
  }

  .subvision-footer .menu {
    font-size: 6vw;
  }

  .subvision-footer .address,
  .subvision-footer .copyright {
    font-size: 3vw;
    line-height: 3vh;
  }

  .subvision-footer .socmed {
    text-align: center;
  }

  .subvision-footer .socmed.mid {
    border-left: 1px solid #161415 !important;
    border-right: 1px solid #161415 !important;
  }

  .subvision-footer .socmed a {
    display: block;
    height: 15vh !important;
  }

  .subvision-footer .socmed a i {}

  .subvision-footer .ft-link.sosmed i {
    width: 10vw;
    height: 10vw;
    background: transparent;
  }

  .subvision-footer .ft-link.sosmed i::before {
    font-size: 10vw;
  }

  .subvision-footer .ft-link::before {
    display: none;
  }

  .subvision-footer .wrapLogo {
    border: none !important;
  }

  .subvision-footer .wrapLogo .logo {
    top: 5vh !important;
    left: 8vw !important;
    width: 42vw;
  }

  .subvision-footer .ft-link:hover p {
    color: #161415 !important;
  }
}

/* ===================== End Footer ======================== */






/* ===================== Home Page ============================ */
/* Header Section */
.home-header {}

.home-header .img--1{
  object-fit: contain;
}

.home-header .wrapper {
  position: absolute;
  margin: 0 auto;
  padding: 0 4vw;
  top: unset;
  transform: unset;
  bottom: 64vh;
  left: 0;
  right: 0;
}

.home-header .wrapper h1 {
  margin-bottom: 4vh;
  font-family: "NeueKaine-Regular";
  font-size: 6.4vw;
  line-height: 12.4vh;
}

.home-header .wrapper h1 span {
  font-family: "NeueKaine-Black";
}

.home-header .wrapper .button img {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1vw 0 0;
  width: 1.8vw;
}

.home-header .wrapper .button p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
  font-size: 0.9vw;
  line-height: 2vh;
}

/* Vision Section */
.home-vision {}

.home-vision .bgtransition {
  position: absolute;
  top: -50vh;
  left: 0;
  width: 100%;
  height: 50vh;
}

.home-vision .wrapper {
  position: relative;
  z-index: 1;
}

.home-vision .wrapper .item-left {
  padding: 0;
  height: 50vh;
  border-top: 1px solid #161415;
  border-bottom: 1px solid #161415;
  border-right: 1px solid #161415;
}

.home-vision .wrapper .item-left p {
  padding: 8.3vh 4.1vw;
  border-bottom: 1px solid #161415;
}

.home-vision .wrapper .item-right {
  padding: 8.3vh 4.1vw;
  height: 50vh;
  border-top: 1px solid #161415;
  border-bottom: 1px solid #161415;
}

.home-vision .wrapper .item-right .title {
  margin-bottom: 8vh;
  font-family: "SpaceGrotesk-Regular";
  font-size: 4.4vw;
  line-height: 10vh;
  text-transform: capitalize;
}

.home-vision .wrapper .item-right .text {
  font-family: "SpaceGrotesk-Medium";
  font-size: 1.3vw;
}

/* Brief 1 Section */
.home-brief-1 {
  position: relative;
  margin-top: -5vh;
  padding: 5vh 4.5vw;
  height: 110vh;
  background: #F5F5F5;
}

.home-brief-1 .layer-01 {
  width: 100%;
  height: 100%;
}

.home-brief-1 .layer-01 .box-diagonal {
  width: 100%;
  height: 100%;
}

.home-brief-1 .layer-01 .box-diagonal.box-diagonal-01 {
  left: 0;
  right: unset;
  border-bottom: unset;
  border-left: unset;
  border-right: 1px solid #161415;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #161415, transparent calc(50% + 1px));
}

.home-brief-1 .layer-01 .box-diagonal.box-diagonal-02 {
  border-left: 1px solid #161415;
  border-bottom: unset;
  background: linear-gradient(to top left, transparent calc(50% - 1px), #161415, transparent calc(50% + 1px));
}

.home-brief-1 .item {}

.home-brief-1 .item .hover-scale {}

.home-brief-1 .item .content_wrapper {}

.home-brief-1 .item .content_wrapper .arrows_wrapper {}

.home-brief-1 .item .content_wrapper .arrows_wrapper .arrow_left,
.home-brief-1 .item .content_wrapper .arrows_wrapper .arrow_right {
  width: 1.5vw;
}

.home-brief-1 .item .content_wrapper .arrows_wrapper .title_portfolio {
  font-family: "SpaceGrotesk-Medium";
  font-size: 2.5vw;
}

/* Expertise Section */
.home-expertise {
  position: relative;
  margin-top: -5vh;
  border-top: 1px solid #161415;
}

.home-expertise .bgtransition {
  margin-top: -50vh;
}

.home-expertise .bgtransition img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
}

.home-expertise .wrapper {
  padding: 0;
}

.home-expertise .wrapper.item-left {
  padding: 0 0 0 4.51vw;
}

.home-expertise .wrapper.item-left .title {
  margin: 0;
  padding: 35vh 2vw 2.5vh;
  height: 100%;
  border-left: 1px solid #161415;
  border-right: 1px solid #161415;
}

.home-expertise .wrapper.item-left .title h2 {
  font-family: "NeueKaine-Regular";
  font-size: 5.5vw;
  line-height: 10vh;
}

.home-expertise .wrapper.item-left .title h2 span {
  font-family: "NeueKaine-Black";
}

.home-expertise .wrapper.item-right {
  padding: 0 4.51vw 0 0;
}

.home-expertise .wrapper.item-right .text {
  position: relative;
  margin: 0;
  padding: 20vh 2vw 5vh;
  height: 100%;
  border-right: 1px solid #161415;
}

.home-expertise .wrapper.item-right .text p {
  position: absolute;
  margin: 0 auto;
  bottom: 5vh;
  left: 0;
  right: 0;
  width: 86%;
}

.home-expertise hr {
  opacity: 1;
  margin: 0;
  border-bottom: 1px solid #161415;
}

.home-expertise .wrapper .accordion {
  display: block;
  position: relative;
  padding-bottom: 60vh;
  margin: 0 auto;
  width: 90.9vw;
  border-left: 1px solid #161415;
  border-right: 1px solid #161415;
}

.home-expertise .wrapper .accordion .accordion-item {
  background: #F5F5F5;
  border-top: unset !important;
  border-bottom: 1px solid #161415 !important;
  border-left: unset !important;
  border-right: unset !important;
}

.home-expertise .wrapper .accordion .accordion-item .accordion-header {}

.home-expertise .wrapper .accordion .accordion-item .accordion-header .accordion-button {
  padding: 2rem 2rem;
  font-family: "SpaceGrotesk-Regular";
  font-size: 2vw;
  background-color: #F5F5F5;
  border: unset !important;
}

.home-expertise .wrapper .accordion .accordion-item .accordion-header .accordion-button::after {
  background-image: url('../images/icons/arrow_down_black.svg') !important;
  background-repeat: no-repeat !important;
  background-size: 1.25rem !important;
  transition: transform .2s ease-in-out;
}

/*.home-expertise .wrapper .accordion .accordion-item .accordion-collapse.show{*/
/*  margin-top: -4rem !important;*/
/*}*/

.home-expertise .wrapper .accordion .accordion-item .accordion-collapse.collapse .accordion-body {
  padding: 0;
}

.home-expertise .wrapper .accordion .accordion-item .accordion-collapse.collapsed .accordion-body {
  border-bottom: 1px solid #161415;
}

.home-expertise .wrapper .accordion .accordion-item .accordion-collapse .accordion-body .info {
  padding: 5vh 2vw;
}

.home-expertise .wrapper .accordion .accordion-item .accordion-collapse .accordion-body .title {
  font-family: "SpaceGrotesk-Regular";
  font-size: 2vw;
}

.home-expertise .wrapper .accordion .accordion-item .accordion-collapse .accordion-body .text {}

.home-expertise .wrapper .accordion .accordion-item .accordion-collapse .accordion-body .button {
  display: block;
  margin-top: 15vh;
  font-size: 1.15vw;
}

.home-expertise .wrapper .accordion .accordion-item .accordion-collapse .accordion-body .button img {
  margin-left: 1vw;
  width: 1.5vw;
}

.home-expertise .wrapper .accordion .accordion-item .accordion-collapse .accordion-body .images {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.home-expertise .wrapper .accordion-button:not(.collapsed) {
  color: #161415;
  background-color: #F5F5F5;
  box-shadow: none;
  opacity: 0;
  height: 0;
  padding: 0;
  visibility: hidden;
  display: none;
}

.home-expertise .wrapper .accordion-button:focus {
  border-color: transparent;
}

.home-expertise .wrapper .accordion-item,
.home-expertise .wrapper .accordion-item:last-of-type .accordion-collapse {
  border-radius: 0;
}

/* Values Section */
.home-values {
  margin-top: -1vh;
}

.home-values .title {
  margin: 20vh 0 10vh;
  padding: 0 4.5vw;
}

.home-values .title span {
  margin-right: 1vw;
}

.home-values .title span:last-child {
  margin-right: 0;
  font-family: "NeueKaine-Regular";
  font-size: 3.6vw;
  line-height: 7.2vh;
}

.home-values .items_values {
  overflow: hidden;
}

.home-values .items_values img {
  width: 100% !important;
}

.home-values .items_values:hover {
  -webkit-box-shadow: 0px 0px 51px 0px rgba(148, 191, 255, 1);
  -moz-box-shadow: 0px 0px 51px 0px rgba(148, 191, 255, 1);
  box-shadow: 0px 0px 51px 0px rgba(148, 191, 255, 1);
  z-index: 2;
}

.home-values .items_values .hovered {
  opacity: 0;
  transition: all .5s;
}

.home-values .items_values:hover .state {
  opacity: 0;
}

.home-values .items_values:hover .hovered {
  opacity: 1;
}

.home-values .items_values .gradient_hovered {
  opacity: 0;
  height: 100% !important;
  transition: all .5s;
}

.home-values .items_values .gradient_state {
  height: 100% !important;
}

.home-values .items_values:hover .gradient_state {
  opacity: 0;
}

.home-values .items_values:hover .gradient_hovered {
  opacity: 1;
}

.home-values .items_values .values_content {
  z-index: 1;
  top: unset;
  bottom: 10% !important;
  transform: unset;
  width: 80%;
}

.home-values .items_values .background {
  height: 75vh;
}

.home-values .items_values h4 {
  margin-bottom: 2vh;
  font-family: 'SpaceGrotesk-Medium';
  font-size: 2.6vw;
  line-height: 6vh;
}

.home-values .items_values .detail_reveal {
  height: 0;
  transition: all .3s;
  opacity: 0;
}

.home-values .items_values:hover .detail_reveal {
  height: 10vh;
  opacity: 1;
}

/* Site Section */
.home-site {}

.home-site .title {
  padding: 50vh 0 45vh;
}

.home-site .title p {
  font-family: "NeueKaine-Regular";
  font-size: 6.5vw;
  line-height: 14vh;
}

.home-site .title p:last-child {
  font-family: "NeueKaine-ExtraBold";
}

.home-site .num {
  font-family: "NeueKaine-ExtraBold";
  font-size: 12vw;
  line-height: 25vh;
}

.home-site .subtitle {
  font-size: 1.8vw;
}

.home-site .point img{
  position: absolute;
}
.home-site .point .logo01{
  top: 20%;
  left: 13%;
  width: 8vw;
}
.home-site .point .logo02{
  top: 13%;
  left: 42%;
  width: 15vw;
}
.home-site .point .logo03{
  top: 23%;
  left: 74%;
  width: 17vw;
}
.home-site .point .logo04{
  top: 62%;
  left: 9%;
  width: 16vw;
}
.home-site .point .logo05{
  top: 77%;
  left: 42%;
  width: 18vw;
}
.home-site .point .logo06{
  top: 60%;
  left: 76%;
  width: 13vw;
}
.home-site .point .logo07{
  top: 18%;
  left: 25%;
  width: 18vw;
}
.home-site .point .logo08{
  top: 13%;
  left: 57%;
  width: 20vw;
}
.home-site .point .logo09{
  top: 42%;
  left: 10%;
  width: 18vw;
}
.home-site .point .logo10{
  top: 42%;
  left: 74%;
  width: 16vw;
}
.home-site .point .logo11{
  top: 70%;
  left: 25%;
  width: 14vw;
}
.home-site .point .logo12{
  top: 72%;
  left: 59%;
  width: 16vw;
}
.home-site .point .logo13{
  top: 40%;
  left: 15%;
  width: 13vw;
}
.home-site .point .logo14{
  top: 44%;
  left: 70%;
  width: 17vw;
}

/* Portfolio Section */
.home-portfolio {}

.home-portfolio .bgtransition {
  position: absolute;
  z-index: 1;
  top: 110vh;
  left: 0;
  width: 100%;
  height: 100vh;
}

.home-portfolio .portfolios-page-project .col-lg-6.mb-lg-4:nth-child(odd)::before {
  background-color: #F5F5F5;
}

.home-portfolio .portfolios-page-project .col-lg-6.mb-lg-4:nth-child(odd)::after {
  background-color: #F5F5F5;
}

.home-portfolio .portfolios-page-project .item:nth-child(3),
.home-portfolio .portfolios-page-project .item:nth-child(4) {
  margin-bottom: 0 !important;
}

.home-portfolio .portfolios-page-project .wrapper::before {
  background-color: #F5F5F5;
}

.home-portfolio .portfolios-page-project .wrapper::after {
  background-color: #F5F5F5;
}

.home-portfolio .portfolios-page-project .wrapper .brief ul li::after {
  background-color: #F5F5F5;
}

/* Brief 2 Section */
.home-brief-2 {
  margin: 5vh 0 22vh;
}

.home-brief-2 .project {}

.home-brief-2 .project .panel_p {}

.home-brief-2 .project .panel_p .column {}

.home-brief-2 .project .panel_p .column .col__image-wrap {}

.home-brief-2 .project .panel_p .column .col__image-wrap p {}

.home-brief-2 .project .panel_p .column .col__image-wrap .img_parallax {
  /*object-fit: contain;*/
}

.home-brief-2 .project .panel_p .column .col__image-wrap .item img {
  width: 1.5vw;
}

.home-brief-2 .project .panel_p .column .col__image-wrap .item .title_portfolio {
  font-family: "SpaceGrotesk-Medium";
  font-size: 2.5vw;
}

/* Brief 3 Section */
.home-brief-3 {}

.home-brief-3 .bgtransition {
  position: absolute;
  top: -65vh;
  left: 0;
  width: 100%;
  height: 50vh;
}

.home-brief-3 .wrapper {
  z-index: 1;
}

.home-brief-3 .wrapper .title {
  padding-top: 20vh;
  font-size: 12vw;
  line-height: 21.8vh;
  border-top: 1px solid #161415;
}

.home-brief-3 .wrapper-cta {
  position: relative;
  margin-top: -22vh;
  width: 100%;
  height: 100vh;
}

.home-brief-3 .wrapper-cta .layer-01 {
  width: 100%;
  height: 100%;
}

.home-brief-3 .wrapper-cta .layer-01 .box-diagonal {
  width: 100%;
  height: 100%;
}

.home-brief-3 .wrapper-cta .layer-01 .box-diagonal.box-diagonal-01 {
  left: 0;
  right: unset;
  border-bottom: unset;
  border-left: unset;
  border-right: 1px solid #161415;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #161415, transparent calc(50% + 1px));
}

.home-brief-3 .wrapper-cta .layer-01 .box-diagonal.box-diagonal-02 {
  border-left: 1px solid #161415;
  border-bottom: unset;
  background: linear-gradient(to top left, transparent calc(50% - 1px), #161415, transparent calc(50% + 1px));
}

.home-brief-3 .wrapper-cta .layer-02 {
  width: 68%;
  height: 68vh;
}

.home-brief-3 .wrapper-cta .layer-02 .background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-brief-3 .wrapper-cta .layer-02 .background {}

.home-brief-3 .wrapper-cta .layer-02 .button {}

.home-brief-3 .wrapper-cta .layer-02 .button p {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1vw 0 0;
  padding: 0;
  font-family: "SpaceGrotesk-Medium";
  font-size: 2vw;
  color: #F5F5F5;
  border: none;
}

.home-brief-3 .wrapper-cta .layer-02 .button .arrow_left {
  display: inline-block;
  vertical-align: middle;
  margin: 0 !important;
  padding: 0 !important;
  width: 2vw;
  transition: all .5s;
}

/* Mobile */
@media screen and (max-width: 846px) {

  /* Header Section */
  .home-header {}
  
  .home-header .img--1{
    object-fit: cover;
  }

  .home-header .panel_p {
    height: 140vh;
  }

  .home-header .wrapper {
    bottom: 56vh !important;
    padding: 6.4vh 8vw;
    text-align: center;
  }

  .home-header .wrapper h1 {
    margin-bottom: 5vh;
    font-size: 8.8vw;
    line-height: 5.6vh;
  }

  .home-header .wrapper .button img {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 5vw;
  }

  .home-header .wrapper .button p {
    font-size: 3.6vw;
    line-height: 2.8vh;
  }

  /* Vision Section */
  .home-vision {}

  .home-vision .bgtransition {
    top: -45vh;
    object-fit: cover;
    object-position: top;
  }

  .home-vision .wrapper {}

  .home-vision .wrapper .item-left {
    margin: 7.2vh 0;
    height: auto;
  }

  .home-vision .wrapper .item-left p {
    margin: 0;
    padding: 4vh 8vw;
    border: unset;
  }

  .home-vision .wrapper .item-right {
    padding: 0 8vw 20vh;
    height: auto;
    border: unset;
  }

  .home-vision .wrapper .item-right .title {
	margin-bottom: 4vh;
    font-size: 8vw;
    line-height: 4.8vh;
  }

  .home-vision .wrapper .item-right .text {
    width: 60vw;
    font-size: 4.2vw;
    line-height: 3.2vh;
  }

  /* Brief 1 Section */
  .home-brief-1 {
    margin: 0;
    padding: 0;
    height: 100vh;
  }

  .home-brief-1 .layer-01 {}

  .home-brief-1 .layer-01 .box-diagonal {}

  .home-brief-1 .layer-01 .box-diagonal.box-diagonal-01 {}

  .home-brief-1 .layer-01 .box-diagonal.box-diagonal-02 {}

  .home-brief-1 .item {}

  .home-brief-1 .item .hover-scale {}

  .home-brief-1 .item .content_wrapper {
    width: 100%;
    text-align: center;
  }

  .home-brief-1 .item .content_wrapper .arrows_wrapper {
    padding: 0 !important;
  }

  .home-brief-1 .item .content_wrapper .arrows_wrapper img {
    display: none;
  }

  .home-brief-1 .item .content_wrapper .arrows_wrapper p {
    margin-bottom: 0;
  }

  .home-brief-1 .item .content_wrapper .arrows_wrapper .title_portfolio {
    font-size: 6vw;
  }

  /* Expertise Section */
  .home-expertise {
    margin: 0;
  }

  .home-expertise .bgtransition {
    display: none !important;
  }

  .home-expertise .wrapper {}

  .home-expertise .wrapper.item-left {
    padding: 0;
  }

  .home-expertise .wrapper.item-left .title {
    padding: 32vh 8vw 4vh;
    border: unset;
  }

  .home-expertise .wrapper.item-left .title h2 {
    font-size: 13.6vw;
    line-height: 7.2vh;
  }

  .home-expertise .wrapper.item-right {
    padding: 0;
  }

  .home-expertise .wrapper.item-right .text {
    padding: 5vh 8vw;
    border-top: 1px solid #161415;
    border-right: unset;
  }

  .home-expertise .wrapper.item-right .text p {
    position: relative;
    bottom: unset;
    width: 100%;
  }

  .home-expertise hr {}

  .home-expertise .wrapper .accordion {
    padding-bottom: 0;
    width: 100%;
  }

  .home-expertise .wrapper .info {
    padding: 8vh 8vw;
  }

  .home-expertise .wrapper .title {
    margin-bottom: 4vh;
    font-size: 8vw;
    line-height: 4.8vh;
  }

  .home-expertise .wrapper .text {
	margin-bottom: 8vh;
  }

  .home-expertise .wrapper .button {
    font-size: 4.4vw;
  }

  .home-expertise .wrapper .button img {
    margin-left: 3vw;
    width: 5vw;
  }

  .home-expertise .wrapper .images {
    height: 50vh;
    object-fit: cover;
  }

  .home-expertise .wrapper .accordion-button:not(.collapsed) {}

  .home-expertise .wrapper .accordion-button:focus {}

  .home-expertise .wrapper .accordion-item,
  .home-expertise .wrapper .accordion-item:last-of-type .accordion-collapse {}
  
  #experttransition,
  #experttransition .panel_p,
  #experttransition .panel_p .col__image-wrap{
    height: 570vh;
  }
  #experttransition .img_parallax{}

  /* Values Section */
  .home-values {
    margin-top: -1vh;
  }
  .home-values .bgtrns{
    position: absolute;
    z-index: 2;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 30vh;
    object-fit: cover;
    object-position: bottom;
  }

  .home-values .title {
    margin: 0;
    /*padding: 10vh 8vw 20vh;*/
    padding: 20vh 8vw 20vh;
  }

  .home-values .title span {
    margin-right: 4vw;
  }

  .home-values .title span:last-child {
    font-size: 8.8vw;
    line-height: 5.6vh;
  }

  .home-values .wrapItem {
    padding: 0 8vw !important;
  }

  .home-values .items_values {
    margin-bottom: 6vh;
  }

  .home-values .items_values:hover {
    -webkit-box-shadow: 0px 0px 51px 0px rgba(148, 191, 255, 1);
    -moz-box-shadow: 0px 0px 51px 0px rgba(148, 191, 255, 1);
    box-shadow: 0px 0px 51px 0px rgba(148, 191, 255, 1);
    z-index: 2;
  }

  .home-values .items_values .state {
    display: none;
  }

  .home-values .items_values .hovered {
    position: relative !important;
    opacity: 1;
    top: unset !important;
    transform: unset !important;
    left: unset !important;
    width: 100%;
  }

  .home-values .items_values .gradient_state {
    display: none;
  }

  .home-values .items_values .gradient_hovered {
    opacity: 1;
    top: 0;
    transform: unset !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
  }

  .home-values .items_values .values_content {
    position: relative !important;
    bottom: unset !important;
    padding: 5vh 0 !important;
  }

  .home-values .items_values .background {
    display: none;
  }

  .home-values .items_values h4 {
    font-size: 8vw;
    line-height: 5vh;
  }

  .home-values .items_values .detail_reveal {
    opacity: 1 !important;
    height: auto !important;
  }

  /* Site Section */
  .home-site {
    margin-top: -1vh;
  }

  .home-site .title {
    padding: 15vh 8vw
  }

  .home-site .title p {
    margin-bottom: 0;
    font-size: 13vw;
    line-height: 10vh;
  }

  .home-site .indicator .num {
    font-size: 30vw;
    line-height: 12vh;
  }

  .home-site .indicator .subtitle {
    font-size: 5vw;
  }

  .home-site .point img {}

  .home-site .point .logo01{
    top: 17%;
    left: 1vw;
    width: 20%;
  }
  .home-site .point .logo02{
    margin: 0 auto;
    top: 8%;
    left: 0;
    right: 0;
    width: 40%;
  }
  .home-site .point .logo03{
    top: 20%;
    left: unset;
    right: 5vw;
    width: 40%;
  }
  .home-site .point .logo04{
    top: 70%;
    left: 4vw;
    width: 45%;
  }
  .home-site .point .logo05{
    top: 70%;
    left: unset;
    right: 5vw;
    width: 40%;
  }
  .home-site .point .logo06{
    margin: 0 auto;
    top: 80%;
    left: 0;
    right: 0;
    width: 40%;
  }
  .home-site .point .logo07{
    top: 20%;
    left: 5vw;
    width: 35%;
  }
  .home-site .point .logo08{
    margin: 0 auto;
    top: 5%;
    left: 0;
    right: 0;
    width: 40%;
  }
  .home-site .point .logo09{
    top: 19%;
    left: unset;
    right: 5vw;
    width: 40%;
  }
  .home-site .point .logo10{
    top: 71%;
    left: 5vw;
    width: 42%;
  }
  .home-site .point .logo11{
    top: 70%;
    left: unset;
    right: 5vw;
    width: 40%;
  }
  .home-site .point .logo12{
    margin: 0 auto;
    top: 86%;
    left: 0;
    right: -5%;
    width: 45%;
  }
  .home-site .point .logo13{
    margin: 0 auto;
    top: 15%;
    left: 0;
    right: 0;
    width: 40%;
  }
  .home-site .point .logo14{
    margin: 0 auto;
    top: 76%;
    left: 0;
    right: 0;
    width: 50%;
  }

  /* Portfolio Section */
  .home-portfolio {
    padding-bottom: 10vh;
  }

  .home-portfolio .bgtransition {
    top: unset;
    bottom: -20vh;
    height: 50vh;
    object-fit: cover;
    object-position: top;
  }

  .home-portfolio .portfolios-page-project .item:nth-child(3) {
    margin-bottom: 6vh !important;
  }

  .home-portfolio .portfolios-page-project .item:nth-child(4) {
    margin-bottom: 0 !important;
  }

  /* Brief 2 Section */
  .home-brief-2 {
    margin: 0;
  }

  .home-brief-2 .project {}

  .home-brief-2 .project .panel_p {
    height: 100vh;
  }

  .home-brief-2 .project .panel_p .column {}

  .home-brief-2 .project .panel_p .column .col__image-wrap {}

  .home-brief-2 .project .panel_p .column .col__image-wrap .item {
    margin: 0 auto;
    width: 60%;
    text-align: center;
  }

  .home-brief-2 .project .panel_p .column .col__image-wrap .item .arrows_wrapper {
    padding: 0 !important;
  }

  .home-brief-2 .project .panel_p .column .col__image-wrap .item .arrows_wrapper img {
    display: none;
  }

  .home-brief-2 .project .panel_p .column .col__image-wrap .item .arrows_wrapper p {
    margin-bottom: 0;
    font-size: 6vw;
    line-height: 5vh;
  }

  .home-brief-2 .project .panel_p .column .col__image-wrap .img_parallax {}

  /* Brief 3 Section */
  .home-brief-3 {
    margin: 10vh 0;
    border-bottom: 1px solid #161415;
  }

  .home-brief-3 .bgtransition {
    top: -50vh;
    object-fit: cover;
    object-position: top;
  }

  .home-brief-3 .wrapper {}

  .home-brief-3 .wrapper .title {
    font-size: 11vw;
    line-height: 7vh;
  }

  .home-brief-3 .wrapper-cta {
    margin-top: -16vh;
  }

  .home-brief-3 .wrapper-cta .layer-01 {}

  .home-brief-3 .wrapper-cta .layer-01 .box-diagonal {}

  .home-brief-3 .wrapper-cta .layer-01 .box-diagonal.box-diagonal-01 {}

  .home-brief-3 .wrapper-cta .layer-01 .box-diagonal.box-diagonal-02 {}

  .home-brief-3 .wrapper-cta .layer-02 {}

  .home-brief-3 .wrapper-cta .layer-02 .background {}

  .home-brief-3 .wrapper-cta .layer-02 .background {}

  .home-brief-3 .wrapper-cta .layer-02 .button {}

  .home-brief-3 .wrapper-cta .layer-02 .button p {
    margin: 0 auto;
    width: 60%;
    font-size: 6vw;
    line-height: 4vh;
  }

  .home-brief-3 .wrapper-cta .layer-02 .button .arrow_left {
    display: none;
  }
}

/* ===================== End Home Page ======================== */





/* ===================== About Page ============================ */
/* Header Section */
.about-header {
  height: 200vh;
  overflow: hidden;
}

.about-header .AHTarget-01 {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 1px;
}

.about-header h1 {
  position: absolute;
  margin: 0 auto;
  top: 20%;
  left: 0;
  right: 0;
  font-family: "NeueKaine-Regular";
  font-size: 2.8vw;
  line-height: 6vh;
}

.about-header .layer-01 {}

.about-header .layer-01 .box {
  position: absolute;
  z-index: 2;
  margin: 0 auto;
  top: 55%;
  left: 0;
  right: 0;
  width: 30%;
  height: 30%;
  border: 1px solid #161415;
  transition: all .5s;
}

.about-header .layer-01 .box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-header .layer-01.active .box {
  top: 46.2%;
  width: 90%;
  height: 50%;
  transition: all .5s;
}

.about-header .layer-01 .line-01 {
  position: absolute;
  margin: 0 auto;
  top: 55%;
  left: 0;
  right: 0;
  width: 100%;
  border: 1px solid #161415;
  transition: all .5s;
}

.about-header .layer-01.active .line-01 {
  top: 46.2%;
  transition: all .5s;
}

.about-header .layer-01 .line-02 {
  position: absolute;
  margin: 0 auto;
  top: 85%;
  left: 0;
  right: 0;
  width: 100%;
  border: 1px solid #161415;
  transition: all .5s;
}

.about-header .layer-01.active .line-02 {
  top: 96.1%;
  transition: all .5s;
}

.about-header .layer-01 .box-diagonal {
  top: 20%;
  width: 100%;
  height: 100%;
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  transition: all .5s;
}

.about-header .layer-01.active .box-diagonal {
  top: 43%;
  width: 180%;
  height: 100%;
  transition: all .5s;
}

.about-header .layer-01 .box-diagonal.box-diagonal-01 {
  left: 0;
  right: unset;
  border-bottom: 1px solid #161415;
  border-left: unset;
  border-right: 1px solid #161415;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #161415, transparent calc(50% + 1px));
}

.about-header .layer-01 .box-diagonal.box-diagonal-02 {
  border-left: 1px solid #161415;
  border-bottom: 1px solid #161415;
  background: linear-gradient(to top left, transparent calc(50% - 1px), #161415, transparent calc(50% + 1px));
}

/* About Section */
.about-content {}

.about-content .vismis_pin_desktop {
  border-top: 1px solid #161415;
  border-bottom: 1px solid #161415;
}

.about-content .vismis_pin_desktop .pin-spacer {}

.about-content .vismis_pin {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  position: relative;
  padding: 0;
}

.about-content .vismis_pin ul li {
  list-style: none;
  will-change: transform;
}

.about-content .vismis_pin .left-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 18%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  border-right: 1px solid #161415;
}

.about-content .vismis_pin .left-content {
  margin-top: 50vh;
  width: 100%;
  max-width: 400px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.about-content .vismis_pin .left-content ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid #161415;
}

.about-content .vismis_pin .left-content ul li {
  border-bottom: 1px solid #161415;
  padding: 6vh 0;
  text-align: center;
  cursor: pointer;
}

.about-content .vismis_pin .left-content ul li:hover,
.about-content .vismis_pin .left-content ul li.selected {
  background-image: radial-gradient(circle, rgba(0, 24, 62, 0.974) 0%, rgba(0, 0, 0, 0.974) 97.4094%);
}

.about-content .vismis_pin .left-content ul li a {
  color: #161415;
}

.about-content .vismis_pin .left-content ul li:hover a,
.about-content .vismis_pin .left-content ul li.selected a {
  color: #F5F5F5;
}

.about-content .vismis_pin .right-container {
  width: 82%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.about-content .vismis_pin .right-content {
  width: 100%;
  position: relative;
  height: 100%;
}

.about-content .vismis_pin .right-element {
  position: absolute;
  opacity: 0;
  padding: 10vh 5vw;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.about-content .vismis_pin .right-element .side_left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5vw;
  width: 25vw;
}

.about-content .vismis_pin .right-element .side_left .title {
  font-family: "NeueKaine-Light";
  font-size: 2.6vw;
  line-height: 6vh;
}

.about-content .vismis_pin .right-element .side_left .text {}

.about-content .vismis_pin .right-element .side_right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5vw;
  width: 35vw;
}

.about-content .vismis_pin .right-element .side_right::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F5F5F5;
  mix-blend-mode: multiply;
}

.about-content .vismis_pin .right-element .side_right video {}

.about-content .vismis_pin ul li a {
  cursor: pointer;
  color: #161415;
  will-change: transform;
}

.about-content .vismis_pin .right-element video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.about-content .about_vismis .indicators {
  list-style: none;
  position: relative;
  z-index: 2;
}

.about-content .about_vismis .indicator {
  border-left: 1px solid #161415;
  border-bottom: 1px solid #161415;
  border-right: 1px solid #161415;
  padding: 3rem 2rem;
  text-align: center;
}

.about-content .about_vismis .indicators .indicator:first-child {
  border-top: 1px solid #161415;
}

.about-content .vismis_divider {
  display: block;
  margin: 0 auto;
  width: 90vw;
  height: 100vh;
  border-left: 1px solid #161415;
  border-right: 1px solid #161415;
}

/* Values Section */
.about-values {
  margin-top: -100vh;
}

.about-values .bgtransition {
  margin-bottom: -1vh;
  height: 100vh;
  object-fit: cover;
}

.about-values .wrapper-title {}

.about-values .wrapper-title .title {
  margin: 0 auto 24vh;
  width: 56vw;
  font-family: "NeueKaine-Regular";
  font-size: 3.6vw;
  line-height: 7.2vh;
}

.about-values .wrapper-item {
  padding: 0 6vw 15vh;
}

.about-values .wrapper-item .item {
  z-index: 2;
  margin-bottom: 6vh !important;
  padding: 0 1.5vw;
}

.about-values .wrapper-item .item .content {
  position: relative;
  width: 100%;
  height: 100%;
}

.about-values .wrapper-item .item .content .ornament{
  position: relative;
  z-index: 1;  
}
.about-values .wrapper-item .item .content .hovered {
  position: relative;
  z-index: 1;
  height: 65%;
}

.about-values .wrapper-item .item .content .gradient_hovered {
  height: 100%;
}

.about-values .wrapper-item .item .content .values_content {
  position: relative;
  z-index: 1;
  padding: 6vh 3vw;
  height: 35%;
}

.about-values .wrapper-item .item .content .values_content h4 {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 2vh;
  width: 49%;
  font-family: "SpaceGrotesk-Medium";
  font-size: 2.5vw;
  line-height: 6vh;
}

.about-values .wrapper-item .item .content .values_content p {
  display: inline-block;
  vertical-align: top;
  width: 50%;
}

/* Brief Section */
.about-brief {}

/* Mobile */
@media screen and (max-width: 846px) {

  /* Header Section */
  .about-header {
    height: 150vh;
  }

  .about-header .AHTarget-01 {}

  .about-header h1 {
    width: 80%;
    font-size: 8vw;
    line-height: 6vh;
  }

  .about-header .layer-01 {}

  .about-header .layer-01 .box {
    top: 55%;
  }

  .about-header .layer-01 .box img {}

  .about-header .layer-01.active .box {
    top: 46.2%;
  }

  .about-header .layer-01 .line-01 {
    top: 55%;
  }

  .about-header .layer-01.active .line-01 {
    top: 46.2%;
  }

  .about-header .layer-01 .line-02 {
    top: 85%;
  }

  .about-header .layer-01.active .line-02 {
    top: 96.1%;
  }

  .about-header .layer-01 .box-diagonal {
    top: 20%;
  }

  .about-header .layer-01.active .box-diagonal {
    top: 43%;
  }

  .about-header .layer-01 .box-diagonal.box-diagonal-01 {}

  .about-header .layer-01 .box-diagonal.box-diagonal-02 {}

  /* About Section */
  .about-content {}

  .about-content .panel_vismis_mobile {
    text-align: center;
    /* height: 664px; */
  }

  .about-content .panel_vismis_mobile .vismis_head {}

  .vismis_pin_mobile .panel_vismis_mobile .vismis_head {}

  .about-content .panel_vismis_mobile .vismis_head img {}

  .about-content .panel_vismis_mobile .vismis_head .title {
    font-family: "SpaceGrotesk-Regular";
    font-size: 6vw;
  }

  .about-content .panel_vismis_mobile .desc {
    padding: 0 8vw;
    top: 58%;
  }   
  .about-content .panel_vismis_mobile .desc .side_right::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    mix-blend-mode: multiply;
  }
  .about-content .panel_vismis_mobile .desc video {
    margin-bottom: 2vh;
    width: 50%;
  }

  .about-content .panel_vismis_mobile .desc .title {}

  .about-content .panel_vismis_mobile .desc .text {}

  .about-content .vismis_pin_desktop {}

  .about-content .vismis_pin_desktop .pin-spacer {}

  .about-content .vismis_pin {}

  .about-content .vismis_pin ul li {}

  .about-content .vismis_pin .left-container {}

  .about-content .vismis_pin .left-content {}

  .about-content .vismis_pin .left-content ul {}

  .about-content .vismis_pin .left-content ul li {}

  .about-content .vismis_pin .left-content ul li:hover,
  .about-content .vismis_pin .left-content ul li.selected {}

  .about-content .vismis_pin .left-content ul li a {}

  .about-content .vismis_pin .left-content ul li:hover a,
  .about-content .vismis_pin .left-content ul li.selected a {}

  .about-content .vismis_pin .right-container {}

  .about-content .vismis_pin .right-content {}

  .about-content .vismis_pin .right-element {}

  .about-content .vismis_pin .right-element .side_left {}

  .about-content .vismis_pin .right-element .side_left .title {}

  .about-content .vismis_pin .right-element .side_left .text {}

  .about-content .vismis_pin .right-element .side_right {}

  .about-content .vismis_pin .right-element .side_right video {}

  .about-content .vismis_pin ul li a {}

  .about-content .vismis_pin .right-element video {}

  .about-content .about_vismis .indicators {}

  .about-content .about_vismis .indicator {}

  .about-content .about_vismis .indicators .indicator:first-child {}

  .about-content .vismis_divider {}

  /* Values Section */
  .about-values {}

  .about-values .bgtransition {}

  .about-values .wrapper-title {}

  .about-values .wrapper-title .title {
    margin: 15vh auto;
    width: 80%;
    font-size: 8vw;
    line-height: 5vh;
  }

  .about-values .wrapper-item {}

  .about-values .wrapper-item .item {
    padding: 0 4vw;
    height: auto;
  }

  .about-values .wrapper-item .item .content {}

  .about-values .wrapper-item .item .content .hovered {
    height: auto;
  }

  .about-values .wrapper-item .item .content .gradient_hovered {}

  .about-values .wrapper-item .item .content .values_content {
    margin: 0 auto;
    padding: 5vh 0 !important;
    width: 80%;
    height: auto;
  }

  .about-values .wrapper-item .item .content .values_content h4 {
    width: 100%;
    font-size: 8vw;
    line-height: 5vh;
  }

  .about-values .wrapper-item .item .content .values_content p {
    width: 100%;
  }

  /* Brief Section */
  .about-brief {}
}

/* ===================== End About Page ======================== */





/* ===================== Services Page ============================ */
/* Header Section */
.services-header {}

.services-header .project {}

.services-header .project .panel_p {}

.services-header .project .panel_p .column {}

.services-header .project .panel_p .column .col__image-wrap {}

.services-header .title {
  opacity: 1;
  top: 60%;
  left: 4vw;
  right: unset;
  width: 60vw;
  font-family: "NeueKaine-Regular";
  font-size: 4vw;
  line-height: 9vh;
  transition: all .8s;
}

.services-header .title.active {
  opacity: 1;
  transition: all .8s;
}

.services-header .layer-01 {
  position: relative;
  width: 100%;
  height: 200vh;
}

.services-header .layer-01 .comp {}

.services-header .layer-01 .ornament-01 {
  position: absolute;
  display: none !important;
  z-index: 1;
  opacity: 0;
  bottom: 40%;
  right: 24.5%;
  width: 18vw;
  height: 18vw;
  border: 1px solid #161415;
  transition: all .8s;
}

.services-header .layer-01 .ornament-01.active {
  opacity: 1;
  bottom: 28%;
  right: 4%;
  width: 8vw;
  height: 8vw;
  transition: all .8s;
}

.services-header .layer-01 .ornament-01 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-header .layer-01 .ornament-02 {
  position: absolute;
  top: 60.8%;
  left: -15vw;
  width: 150vw;
  height: 0.1vh;
  background: #161415;
  transform: rotate(22deg);
}

.services-header .layer-01 .ornament-02::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 100%;
  height: 2px;
  background: #F5F5F5;
  transition: all 1.5s;
}

.services-header .layer-01 .ornament-02.active::after {
  width: 0%;
  transition: all 1.5s;
}

.services-header .layer-01 .ornament-03 {
  position: absolute;
  top: 58%;
  left: 7.3vw;
  width: 150vw;
  height: 0.1vh;
  background: #161415;
  transform: rotate(47deg);
}

.services-header .layer-01 .ornament-03::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 100%;
  height: 2px;
  background: #F5F5F5;
  transition: all 1.5s;
}

.services-header .layer-01 .ornament-03.active::after {
  width: 0%;
  transition: all 1.5s;
}

.services-header .layer-01 .ornament-04 {
  position: absolute;
  top: 40.1%;
  left: 13.3vw;
  width: 150vw;
  height: 0.1vh;
  background: #161415;
  transform: rotate(72.5deg);
}

.services-header .layer-01 .ornament-04::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 90%;
  height: 2px;
  background: #F5F5F5;
  transition: all 1.5s;
}

.services-header .layer-01 .ornament-04.active::after {
  width: 0%;
  transition: all 1.5s;
}

/* USP Section */
.services-usp {}

.services-usp .item {}

.services-usp .item .project {}

.services-usp .item .project .panel_p {}

.services-usp .item .project .panel_p .column {}

.services-usp .item .project .panel_p .column .col__image-wrap {}

.services-usp .item .project .panel_p .column .col__image-wrap .img_parallax {}

.services-usp .item .project .panel_p .column .col__image-wrap .box-diagonal {
  top: 111vh;
  width: 60vw;
  height: 76vh;
  border-left: 0.1vw solid #161415;
  border-top: 0.1vw solid #161415;
  background: linear-gradient(to top right, transparent calc(50% - 0.05vw), #161414, transparent calc(50% + 0.05vw));
}

.services-usp .item .project .panel_p .column .col__image-wrap .comp {
  position: absolute;
  z-index: 1;
  background: #161415;
}

.services-usp .item .project .panel_p .column .col__image-wrap .line-01 {
  top: 0;
  left: 4.1vw;
  width: 0.01vw;
  height: 100%;
}

.services-usp .item .project .panel_p .column .col__image-wrap .line-02 {
  top: 0;
  left: 40%;
  width: 0.01vw;
  height: 100%;
}

.services-usp .item .project .panel_p .column .col__image-wrap .line-03 {
  top: 0;
  right: 4.1vw;
  width: 0.01vw;
  height: 100%;
}

.services-usp .item .project .panel_p .column .col__image-wrap .line-04 {
  top: 111vh;
  left: 0;
  width: 40%;
  height: 0.01vh;
}

.services-usp .item .project .panel_p .column .col__image-wrap .wrapper {
  position: absolute;
  padding: 12vh 5vw 6vh 6.4vw;
  top: 43vh;
  left: 0;
  width: 40vw;
  height: 62vh;
  border-bottom: 0.01vh solid #161415;
  /*
  position: absolute;
  padding: 26% 4.1vw 5vh 8.2vw;
  top: 0;
  left: 0;
  width: 40%;
  height: 59%;
  border-bottom: 1px solid #161415;
  */
}

.services-usp .item .project .panel_p .column .col__image-wrap .wrapper .title {
  margin-bottom: 3vh;
  font-family: "NeueKaine-Black";
  font-size: 2.25vw;
  line-height: 4.5vh;
}

.services-usp .item .project .panel_p .column .col__image-wrap .wrapper .desc {
  margin-bottom: 3vh;
  font-size: 0.9vw;
}

.services-usp .item .project .panel_p .column .col__image-wrap .wrapper .subtitle {
  margin-bottom: 1vh;
}

.services-usp .item .project .panel_p .column .col__image-wrap .wrapper .point {
  position: relative !important;
  margin: 0;
  padding: 0;
  top: unset !important;
  list-style: none;
}

.services-usp .item .project .panel_p .column .col__image-wrap .wrapper .point li {
  margin-bottom: 0;
  font-family: "SpaceGrotesk-Bold";
}

.services-usp .item .project .panel_p .column .col__image-wrap .button {
  position: absolute;
  padding: 3.2vh 3.4vw;
  top: 111vh;
  right: 4.1vw;
  border: 0.11vw solid #161415;
}

.services-usp .item .project .panel_p .column .col__image-wrap .button h4 {
  margin: 0;
  font-family: "SpaceGrotesk-Medium";
  font-size: 1.2vw;
}

.services-usp .item .project .panel_p .column .col__image-wrap .button .icon {
  margin: 0 0 0 0.5vw !important;
  vertical-align: middle;
  width: 1vw;
}

/* Plan Section */
.services-plan {
  padding-bottom: 20vh;
}

.services-plan .overlay {
  bottom: 99%;
  height: 50vh;
}

.services-plan .title {
  margin: 0 auto;
  padding: 50vh 0 20vh;
  width: 75%;
  font-family: 'NeueKaine-Regular';
  font-size: 6vw;
  line-height: 12vh;
}

.services-plan .plan-item {}

.services-plan .plan-item .background {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: all .5s;
}

.services-plan .plan-item:hover .background {
  height: 125vh;
  opacity: 1;
  transition: all .5s;
}

.services-plan .plan-item .wrapper {
  position: relative;
  z-index: 2;
  padding: 10vh 2vw;
  width: 100%;
  height: 125vh;
}

.services-plan .plan-item .wrapper h4 {
  margin-bottom: 2vh;
  font-family: "SpaceGrotesk-Medium";
  font-size: 1.5vw;
  transition: all .5s;
}

.services-plan .plan-item .wrapper h3 {
  margin-bottom: 5vh;
  height: 12vh;
  font-family: "NeueKaine-Bold";
  font-size: 3.2vw;
  transition: all .5s;
}

.services-plan .plan-item .wrapper table {}

.services-plan .plan-item .wrapper table tr {}

.services-plan .plan-item .wrapper table tr td {
  position: relative;
  padding: 1vh 0vw;
}

.services-plan .plan-item .wrapper table tr td:first-child {
  width: 50px;
}

.services-plan .plan-item .wrapper table tr td img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 1.5vw;
}

.services-plan .plan-item .wrapper table tr td .icon {
  opacity: 1;
  transition: all .5s;
}

.services-plan .plan-item .wrapper table tr td .icon-hover {
  opacity: 0;
  transition: all .5s;
}

.services-plan .plan-item:hover .wrapper table tr td .icon {
  opacity: 0;
  transition: all .5s;
}

.services-plan .plan-item:hover .wrapper table tr td .icon-hover {
  opacity: 1;
  transition: all .5s;
}

.services-plan .plan-item .wrapper table tr td p {
  margin: 0;
  color: #F5F5F5;
  transition: all .5s;
}

.services-plan .plan-item:hover .wrapper h4,
.services-plan .plan-item:hover .wrapper h3,
.services-plan .plan-item:hover .wrapper table tr td p {
  color: #161415;
  transition: all .5s;
}

.services-plan .plan-item .button {
  display: block;
  position: relative;
  width: 100%;
  height: 15vh;
  background: transparent !important;
  border-top: 1px solid #F5F5F5;
}

.services-plan .plan-item:hover .button {
  background: url(../images/services/service-usp-button.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  transition: all .5s;
}

.services-plan .plan-item .button h4 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2vw;
  font-family: "SpaceGrotesk-Regular";
  font-size: 1.5vw;
}

.services-plan .plan-item .button .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2vw;
  width: 1.5vw;
}

/* Brief 1 Section */
.services-brief-1 {}

.services-brief-1 .services-page-custom {}

.services-brief-1 .services-page-custom .comp {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 1px;
  background: #F5F5F5;
}

.services-brief-1 .services-page-custom .line-01 {
  top: 40vh;
}

.services-brief-1 .services-page-custom .line-02 {
  top: 60vh;
}

.services-brief-1 .services-page-custom .line-03 {
  top: 75vh;
}

.services-brief-1 .services-page-custom .image {}

.services-brief-1 .services-page-custom .title {
  position: absolute;
  z-index: 1;
  padding: 4vh 2vw;
  top: 40vh;
  left: 7vw;
  width: 33vw;
  height: 20vh;
  font-family: 'NeueKaine-Regular';
  font-size: 2.7vw;
  line-height: 6.5vh;
  background: #F5F5F5;
}

.services-brief-1 .services-page-custom .button {
  position: absolute;
  z-index: 1;
  top: 40vh;
  right: 7vw;
  width: 18vw;
  height: 35vh;
  background: #F5F5F5;
}

.services-brief-1 .services-page-custom .button img {
  width: 6.5vw;
}

/* FAQ Section */
.services-faq {
  padding-top: 15vh;
}

.services-faq .services-page-faq {
  border-top: 1px solid #161415;
  border-bottom: 1px solid #161415;
}

.services-faq .services-page-faq .title {
  padding: 30vh 4.1vw 60vh;
  border-right: 1px solid #161415 !important;
}

.services-faq .services-page-faq .title h2 {
  font-family: "NeueKaine-Regular";
  font-size: 3.6vw;
  line-height: 8vh;
}

.services-faq .services-page-faq .content {}

.services-faq .services-page-faq .content .services_accordion {
  background: #F5F5F5;
}

.services-faq .services-page-faq .content .services_accordion .accordion-item {
  background: #F5F5F5;
  border: unset !important;
  border-bottom: 1px solid #161415 !important;
}

.services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-header {}

.services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-header .accordion-button {
  padding: 3vh 2vw;
  font-family: 'SpaceGrotesk-Regular';
  font-size: 2.1vw;
  color: #161415;
  background: #F5F5F5;
  border-radius: 0 !important;
}

.services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-header .accordion-button::after {
  background-image: url('../images/icons/arrow_down_black.svg') !important;
  background-repeat: no-repeat !important;
  background-size: 1.25rem !important;
  transition: transform .2s ease-in-out;
}

.services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-collapse {}

.services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-collapse .accordion-body {
  padding: 0 2vw 3vh;
  background: #F5F5F5;
}

.services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-collapse .accordion-body p {}

.services-faq .services-page-faq .content .services_accordion .accordion-button:not(.collapsed) {
  color: #161415;
  background-color: #F5F5F5;
  box-shadow: none;
}

/* Brief 2 Section */
.services-brief-2 {}

/* Mobile */
@media screen and (max-width: 846px) {

  /* Header Section */
  .services-header {}

  .services-header .project {}

  .services-header .project .panel_p {}

  .services-header .project .panel_p .column {}

  .services-header .project .panel_p .column .col__image-wrap {}

  .services-header .title {
    z-index: 1;
    top: 50%;
    left: 8vw;
    width: 84vw;
    font-size: 9vw;
    line-height: 6vh;
  }

  .services-header .title.active {}

  .services-header .layer-01 {}

  .services-header .layer-01 .comp {}

  .services-header .layer-01 .ornament-01 {
    bottom: 50%;
    right: 33%;
    width: 55vw;
    height: 55vw;
  }

  .services-header .layer-01 .ornament-01.active {
    bottom: 34%;
    right: 9%;
    width: 15vw;
    height: 15vw;
  }

  .services-header .layer-01 .ornament-01 img {}

  .services-header .layer-01 .ornament-02 {
    top: 60.8%;
    left: -20vw;
    transform: rotate(40deg);
  }

  .services-header .layer-01 .ornament-02::after {}

  .services-header .layer-01 .ornament-02.active::after {}

  .services-header .layer-01 .ornament-03 {
    top: 48%;
    left: -53.7vw;
    width: 200vw;
    transform: rotate(56deg);
  }

  .services-header .layer-01 .ornament-03::after {}

  .services-header .layer-01 .ornament-03.active::after {}

  .services-header .layer-01 .ornament-04 {
    top: 92vh;
    left: -15.9vw;
    width: 187vw;
    transform: rotate(75.5deg);
  }

  .services-header .layer-01 .ornament-04::after {
    width: 100%;
  }

  .services-header .layer-01 .ornament-04.active::after {}

  /* USP Section */
  .services-usp {
    margin-bottom: 5vh;
  }

  .services-usp .item {}

  .services-usp .item .overlay {
    bottom: 99%;
    height: 15vh;
  }

  .services-usp .item .project {}

  .services-usp .item .project .panel_p {
    display: block;
    justify-content: unset;
    align-items: unset;
    height: auto;
    overflow: unset;
    width: 100%;
  }

  .services-usp .item .project .panel_p .column {
    flex-basis: unset;
    position: relative;
    overflow: unset;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap {
    position: relative;
    top: unset;
    transform: unset !important;
    translate: unset !important;
    rotate: unset !important;
    scale: unset !important;
    left: unset;
    height: auto;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .img_parallax {
    height: 60vh;
    object-fit: cover;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .box-diagonal {
    display: none;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .comp {
    display: none;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .line-01 {}

  .services-usp .item .project .panel_p .column .col__image-wrap .line-02 {}

  .services-usp .item .project .panel_p .column .col__image-wrap .line-03 {}

  .services-usp .item .project .panel_p .column .col__image-wrap .line-04 {}

  .services-usp .item .project .panel_p .column .col__image-wrap .wrapper {
    position: relative !important;
    padding: 10vh 8vw 8vh;
    top: unset !important;
    transform: unset !important;
    left: unset !important;
    width: 100% !important;
    height: auto !important;
    border-bottom: unset;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .wrapper .title {
    margin-bottom: 3vh;
    font-size: 7vw;
    line-height: 5vh;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .wrapper .desc {
    margin-bottom: 3vh;
    font-size: 4.2vw;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .wrapper .subtitle {
    margin-bottom: 1vh;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .wrapper .point {}

  .services-usp .item .project .panel_p .column .col__image-wrap .wrapper .point li {
    margin-bottom: 0;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .button {
    display: block;
    position: relative;
    padding: 6vh 8vw;
    top: unset !important;
    right: unset;
    width: 100%;
    border-left: unset;
    border-right: unset;
  }

  .services-usp .item:last-child .project .panel_p .column .col__image-wrap .button {
    border-bottom: unset;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .button h4 {
    font-size: 5vw;
  }

  .services-usp .item .project .panel_p .column .col__image-wrap .button .icon {
    margin: 0 0 0 35vw !important;
    width: 4vw;
  }

  /* Plan Section */
  .services-plan {}

  .services-plan .overlay {
    top: -10vh;
    bottom: unset;
    height: 11vh;
    object-fit: contain;
  }

  .services-plan .title {
    padding: 20vh 8vw 15vh;
    width: 100%;
    text-align: left !important;
    font-size: 10vw;
    line-height: 7vh;
  }

  .services-plan .plan-item {}

  .services-plan .plan-item .background {
    height: 145vh;
    opacity: 1;
    transition: all .5s;
  }

  .services-plan .plan-item:hover .background {
    height: 145vh;
  }

  .services-plan .plan-item .wrapper {
    padding: 10vh 8vw;
    height: 145vh;
  }

  .services-plan .plan-item .wrapper h4 {
    font-size: 5vw;
  }

  .services-plan .plan-item .wrapper h3 {
    height: 15vh;
    font-size: 13vw;
  }

  .services-plan .plan-item .wrapper table {}

  .services-plan .plan-item .wrapper table tr {}

  .services-plan .plan-item .wrapper table tr td {}

  .services-plan .plan-item .wrapper table tr td:first-child {}

  .services-plan .plan-item .wrapper table tr td img {
    width: 6vw;
  }

  .services-plan .plan-item .wrapper table tr td .icon {
    opacity: 0;
  }

  .services-plan .plan-item .wrapper table tr td .icon-hover {
    opacity: 1;
  }

  .services-plan .plan-item:hover .wrapper table tr td .icon {}

  .services-plan .plan-item:hover .wrapper table tr td .icon-hover {}

  .services-plan .plan-item .wrapper table tr td p {}

  .services-plan .plan-item .wrapper h4,
  .services-plan .plan-item .wrapper h3,
  .services-plan .plan-item .wrapper table tr td p {
    color: #161415;
  }

  .services-plan .plan-item:hover .wrapper h4,
  .services-plan .plan-item:hover .wrapper h3,
  .services-plan .plan-item:hover .wrapper table tr td p {}

  .services-plan .plan-item .button {
    background: url(../images/services/service-usp-button.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
  }

  .services-plan .plan-item:hover .button {}

  .services-plan .plan-item .button h4 {
    left: 8vw;
    font-size: 5vw;
  }

  .services-plan .plan-item .button .icon {
    right: 8vw;
    width: 5vw;
  }

  .services-plan .secplan-carousel,
  .services-plan .stagepadding {
    padding: 0 0 15vh 4vw;
  }

  .services-plan .secplan-carousel .owl-dots,
  .services-plan .stagepadding .owl-dots {
    margin-top: 4vh;
  }

  .services-plan .secplan-carousel .owl-dots .owl-dot,
  .services-plan .stagepadding .owl-dots .owl-dot {
    outline: none !important;
  }

  .services-plan .secplan-carousel.owl-theme .owl-dots .owl-dot span,
  .services-plan .stagepadding.owl-theme .owl-dots .owl-dot span {
    margin: 0 2vw;
    width: 17vw;
    height: 1vh;
    border-radius: unset;
    background: transparent;
    border: 1px solid #F5F5F5;
  }

  .services-plan .secplan-carousel .owl-dots .owl-dot.active span,
  .services-plan .stagepadding .owl-dots .owl-dot.active span,
  .services-plan .secplan-carousel .owl-dots .owl-dot:hover span,
  .services-plan .stagepadding .owl-dots .owl-dot:hover span {
    background: #94BFFF !important;
  }

  .services-plan .secplan-carousel .owl-nav,
  .services-plan .stagepadding .owl-nav {
    display: none;
  }

  /* Brief 1 Section */
  .services-brief-1 {}

  .services-brief-1 .services-page-custom {}

  .services-brief-1 .services-page-custom .comp {}

  .services-brief-1 .services-page-custom .line-01 {
    top: 20vh;
  }

  .services-brief-1 .services-page-custom .line-02 {}

  .services-brief-1 .services-page-custom .line-03 {
    top: 80vh;
  }

  .services-brief-1 .services-page-custom .line-04 {
    top: 65vh;
  }

  .services-brief-1 .services-page-custom .image {
    height: 100vh;
    object-fit: cover;
  }

  .services-brief-1 .services-page-custom .title {
    margin: 0;
    padding: 5vh 8vw;
    top: 20vh;
    left: 8vw;
    width: 84vw;
    height: 40vh;
    font-size: 8vw;
    line-height: 5vh;
  }

  .services-brief-1 .services-page-custom .button {
    top: 65vh;
    right: 8vw;
    width: 25vw;
    height: 15vh;
  }

  .services-brief-1 .services-page-custom .button img {
    width: 7vw;
  }

  /* FAQ Section */
  .services-faq {}

  .services-faq .services-page-faq {}

  .services-faq .services-page-faq .title {
    padding: 10vh 8vw;
    border-bottom: 1px solid #161415 !important;
    border-right: unset !important;
  }

  .services-faq .services-page-faq .title h2 {
    font-size: 10vw;
    line-height: 7vh;
  }

  .services-faq .services-page-faq .content {}

  .services-faq .services-page-faq .content .services_accordion {}

  .services-faq .services-page-faq .content .services_accordion .accordion-item {}

  .services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-header {}

  .services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-header .accordion-button {
    padding: 5vh 8vw;
    font-size: 5vw;
  }

  .services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-header .accordion-button::after {
    width: 5vw;
    height: 5vw;
    background-size: 100% !important;
  }

  .services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-collapse {}

  .services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-collapse .accordion-body {
    padding: 0 8vw 5vh;
  }

  .services-faq .services-page-faq .content .services_accordion .accordion-item .accordion-collapse .accordion-body p {}

  .services-faq .services-page-faq .content .services_accordion .accordion-button:not(.collapsed) {}

  /* Brief 2 Section */
  .services-brief-2 {}
}

/* ===================== End Services Page ======================== */





/* ===================== Portfolios Page ============================ */
/* Header Section */
.portfolios-header {
  height: 100vh;
}

.portfolios-header .title {
  position: absolute;
  margin: 0;
  bottom: 8vh;
  left: 4vw;
  width: 60vw;
  font-family: "NeueKaine-Regular";
  font-size: 10.4vw;
  line-height: 21vh;
}

.portfolios-header .box-diagonal {
  height: 100vh;
}

/* Description Section */
.portfolios-description {
  position: relative;
  height: 120vh;
}

.portfolios-description .image {
  position: absolute;
  bottom: 30vh;
  left: 0%;
  width: 70.1%;
  height: 90vh;
  border: 1px solid #161415;
  transition: all 1s;
}

.portfolios-description .brief {
  position: absolute;
  padding: 0 5vw;
  top: 40%;
  transform: translateY(-50%);
  right: 0;
  width: 30%;
}

.portfolios-description .brief h2 {
  margin-bottom: 5vh;
  font-family: "SpaceGrotesk-Medium";
  font-size: 2.6vw;
  line-height: 5.5vh;
}

.portfolios-description .brief p {
  margin-bottom: 5vh;
}

.portfolios-description .brief h3 {
  margin-bottom: 0;
  font-family: "NeueKaine-Black";
  font-size: 2.6vw;
  line-height: 5.5vh;
}

.portfolios-description .ornament {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 30vh;
  border-top: 1px solid #161415;
  border-left: 1px solid #161415;
}

/* Content Section */
.portfolios-content {}

.portfolios-content .pppNav {
  z-index: 3;
  margin-top: -6vh;
  padding: 10vh 0;
  background: #F5F5F5;
}

.portfolios-content .comp {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
}

.portfolios-content .ornament-left {
  left: -5vw;
}

.portfolios-content .ornament-right {
  right: -5vw;
}

.portfolios-content .icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1vw;
  width: 1.5vw;
}

.portfolios-content .navpages {
  display: inline-block;
  vertical-align: middle;
  font-family: "SpaceGrotesk-Medium";
  font-size: 1.5vw;
}

.portfolios-content .num {
  font-family: "SpaceGrotesk-Medium";
  font-size: 1.6vw;
}

.portfolios-content .num b {}

.portfolios-content .portfolios-page-project .item:nth-child(3),
.portfolios-content .portfolios-page-project .item:nth-child(4) {
  margin-bottom: 6vh !important;
}

.portfolios-content .portfolios-page-project .item:nth-child(5),
.portfolios-content .portfolios-page-project .item:nth-child(6) {
  margin-bottom: 6vh !important;
}

.portfolios-content .portfolios-page-project .item:nth-child(7),
.portfolios-content .portfolios-page-project .item:nth-child(8) {
  margin-bottom: 6vh !important;
}

.portfolios-content .portfolios-page-project .item:nth-child(9),
.portfolios-content .portfolios-page-project .item:nth-child(10) {
  margin-bottom: 6vh !important;
}

.portfolios-content .portfolios-page-project .item:nth-child(11),
.portfolios-content .portfolios-page-project .item:nth-child(12) {
  margin-bottom: 0 !important;
}

.portfolios-content .portfolios-page-project .col-lg-6.mb-lg-4:nth-child(odd)::before {
  background-color: #161415;
}

.portfolios-content .portfolios-page-project .col-lg-6.mb-lg-4:nth-child(odd)::after {
  background-color: #161415;
}

.portfolios-content .portfolios-page-project .wrapper::before {
  background-color: #161415;
}

.portfolios-content .portfolios-page-project .wrapper::after {
  background-color: #161415;
}

.portfolios-content .portfolios-page-project .wrapper .brief ul li::after {
  background-color: #F5F5F5;
}

.portfolios-content .portfolios-page-project.home .col-lg-6.mb-lg-4:nth-child(odd)::before {
  background-color: #161415;
}

.portfolios-content .portfolios-page-project.home .col-lg-6.mb-lg-4:nth-child(odd)::after {
  background-color: #161415;
}

.portfolios-content .portfolios-page-project.home .wrapper::before {
  background-color: #161415;
}

.portfolios-content .portfolios-page-project.home .wrapper::after {
  background-color: #161415;
}

/* Brief 1 Section */
.portfolios-brief-1 {}

.PBTarget-01 {
  position: absolute;
  z-index: 1;
  top: -10vh;
  left: 0;
  width: 100%;
  height: 1px;
}

.portfolios-brief-1 .image {
  height: 100vh;
}

.portfolios-brief-1 .layer-01 {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.portfolios-brief-1 .layer-01 .box-diagonal {
  width: 100%;
  height: 100vh;
}

.portfolios-brief-1 .layer-01 .box-diagonal.box-diagonal-01 {
  left: 0;
  right: unset;
  border-bottom: 1px solid #F5F5F5;
  border-left: unset;
  border-right: 1px solid #F5F5F5;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #F5F5F5, transparent calc(50% + 1px));
}

.portfolios-brief-1 .layer-01 .box-diagonal.box-diagonal-02 {
  border-left: 1px solid #F5F5F5;
  border-bottom: 1px solid #F5F5F5;
  background: linear-gradient(to top left, transparent calc(50% - 1px), #F5F5F5, transparent calc(50% + 1px));
}

.portfolios-brief-1 .layer-02 {
  opacity: 0;
  width: 0%;
  height: 0%;
  transition: all .5s;
}

.portfolios-brief-1.active .layer-02 {
  opacity: 1;
  width: 100%;
  height: 100%;
  transition: all 1s;
  transition-timing-function: cubic-bezier(0.23, 0.88, 0.58, 1);
}

.portfolios-brief-1 .layer-02 .background {
  width: 65%;
  height: 65%;
  background: #F5F5F5;
}

.portfolios-brief-1 .layer-02 .background img {}

.portfolios-brief-1 .layer-02 .box-diagonal {
  width: 17.7%;
  height: 17.7%;
  border: 1px solid transparent;
  background: transparent !important;
}

.portfolios-brief-1 .layer-02 .box-diagonal.box-diagonal-03 {
  left: 0;
  right: unset;
  border-bottom: 1px solid #F5F5F5;
  border-right: 1px solid #F5F5F5;
}

.portfolios-brief-1 .layer-02 .box-diagonal.box-diagonal-04 {
  border-bottom: 1px solid #F5F5F5;
  border-left: 1px solid #F5F5F5;
}

.portfolios-brief-1 .layer-02 .box-diagonal.box-diagonal-05 {
  top: unset;
  bottom: 0;
  left: 0;
  right: unset;
  border-top: 1px solid #F5F5F5;
  border-right: 1px solid #F5F5F5;
}

.portfolios-brief-1 .layer-02 .box-diagonal.box-diagonal-06 {
  top: unset;
  bottom: 0;
  border-top: 1px solid #F5F5F5;
  border-left: 1px solid #F5F5F5;
}

.portfolios-brief-1 .layer-02 .background {
  width: 65%;
  height: 65%;
}

.portfolios-brief-1 .layer-02 .background .wrapper {
  opacity: 0;
  width: 50%;
  transition: all 1s;
  transition-delay: 1s;
}

.portfolios-brief-1.active .layer-02 .background .wrapper {
  opacity: 1;
  transition: all 1s;
  transition-delay: 1s;
}

.portfolios-brief-1.active .layer-02 .background .wrapper .title {
  margin-bottom: 10vh;
  font-family: "NeueKaine-Medium";
  font-size: 3.6vw;
  line-height: 6.4vh;
}
.portfolios-brief-1.active .layer-02 .background .wrapper .title b {
  font-family: "NeueKaine-Black";
}

.portfolios-brief-1.active .layer-02 .background .wrapper .button h5 {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1vw 0 0;
  font-family: "SpaceGrotesk-Medium";
  font-size: 1.6vw;
}

.portfolios-brief-1.active .layer-02 .background .wrapper .button img {
  display: inline-block;
  vertical-align: middle;
  width: 1.5vw;
}

/* Brief 2 Section */
.portfolios-brief-2 {}

/* Mobile */
@media screen and (max-width: 846px) {

  /* Header Section */
  .portfolios-header {
    height: 60vh;
  }

  .portfolios-header .title {
    bottom: 3vh;
    left: 8vw;
    width: 72vw;
    font-size: 10.5vw;
    line-height: 6.5vh;
  }

  .portfolios-header .box-diagonal {
    width: 20vw;
    height: 100%;
  }

  /* Description Section */
  .portfolios-description {
    height: auto;
  }

  .portfolios-description .image {
    position: relative;
    bottom: unset;
    width: 80%;
    height: 50vh;
  }

  .portfolios-description .brief {
    position: relative;
    padding: 10vh 8vw;
    top: unset;
    transform: unset;
    width: 100%;
    text-align: center;
    border-top: 1px solid #161415;
  }

  .portfolios-description .brief h2 {
    font-size: 8vw;
    line-height: 6vh;
  }

  .portfolios-description .brief p {
    margin-bottom: 10vh;
  }

  .portfolios-description .brief h3 {
    font-size: 13vw;
    line-height: 8vh;
  }

  .portfolios-description .ornament {
    display: none;
  }

  /* Content Section */
  .portfolios-content {
    padding-bottom: 0;
  }

  .portfolios-content .pppNav {
    margin-top: 0;
    padding: 5vh 0;
  }

  .portfolios-content .comp {
    width: 20vw;
  }

  .portfolios-content .ornament-left {
    left: -11vw;
  }

  .portfolios-content .ornament-right {
    right: -11vw;
  }

  .portfolios-content .icon {
    width: 5vw;
  }

  .portfolios-content .navpages {
    display: none;
  }

  .portfolios-content .num {
    margin: 0 20vw;
    font-size: 6vw;
  }

  .home-portfolio .portfolios-page-project .item:nth-child(5) {
    margin-bottom: 6vh !important;
  }

  .home-portfolio .portfolios-page-project .item:nth-child(6) {
    margin-bottom: 0 !important;
  }

  .portfolios-content .portfolios-page-project .col-lg-6.mb-lg-4::before {
    background-color: #161415;
  }

  .portfolios-content .portfolios-page-project .col-lg-6.mb-lg-4::after {
    background-color: #161415;
  }

  /* Brief 1 Section */
  .portfolios-brief-1 {}

  .portfolios-brief-1 .image {
    height: 100vh;
    object-fit: cover;
  }

  .portfolios-brief-1 .box-diagonal {}

  .portfolios-brief-1 .box-diagonal.box-diagonal-01 {}

  .portfolios-brief-1 .box-diagonal.box-diagonal-02 {}

  .portfolios-brief-1 .box-diagonal.box-diagonal-03 {}

  .portfolios-brief-1 .box-diagonal.box-diagonal-04 {}

  .portfolios-brief-1 .background {}

  .portfolios-brief-1 .layer-01 {}

  .portfolios-brief-1 .layer-02 {
    width: 100%;
    height: 100%;
    transition: all .5s;
  }

  .portfolios-brief-1.active .layer-02 {
    opacity: 1;
    transition: all .5s;
  }

  .portfolios-brief-1 .layer-02 .background .wrapper {
    padding: 10vh 8vw;
    width: 100%;
  }

  .portfolios-brief-1.active .layer-02 .background .wrapper .title {
    margin-bottom: 8vh;
    font-size: 6vw;
    line-height: 4vh;
  }

  .portfolios-brief-1 .layer-02 .background .wrapper a {}

  .portfolios-brief-1 .layer-02 .background .wrapper a h5 {
    width: 38vw;
  }

  .portfolios-brief-1.active .layer-02 .background .wrapper .button h5 {
    margin: 0 auto;
    font-size: 4.2vw;
    line-height: 3.5vh;
  }

  .portfolios-brief-1.active .layer-02 .background .wrapper .button img {
    display: none;
  }

  /* Brief 2 Section */
  .portfolios-brief-2 {}
}

/* ===================== End Portfolios Page ======================== */





/* ===================== Portfolios Detail Page ============================ */
/* Header Section */
.detail-header {}

.detail-header .portfolios-detail-page-header {}

.detail-header .portfolios-detail-page-header .image {}

.detail-header .portfolios-detail-page-header .overlay {
  background: -webkit-linear-gradient(180deg, transparent 0%, #161415 60%);
  background: -o-linear-gradient(180deg, transparent 0%, #161415 60%);
  background: -moz-linear-gradient(180deg, transparent 0%, #161415 60%);
  background: linear-gradient(180deg, transparent 0%, #161415 60%);
}

.detail-header .portfolios-detail-page-header .title {
  position: absolute;
  top: 17%;
  left: 4.1vw;
}
.detail-header .portfolios-detail-page-header .title h3{
  position: relative;
  overflow: hidden;
}
.detail-header .portfolios-detail-page-header .title h3,
.detail-header .portfolios-detail-page-header .title h3 a{
  margin-bottom: 4vh;
  font-family: "SpaceGrotesk-Medium";
  font-size: 1.2vw;
}
.detail-header .portfolios-detail-page-header .title h3 a{
  position: relative;
  margin-left: -1.5vw;
  color: #F5F5F5;
  opacity: 50%;
  transition: all .5s;
}
.detail-header .portfolios-detail-page-header .title h3 a:hover{
  margin-left: 0;
  opacity: 100%;
  transition: all .5s;
}
.detail-header .portfolios-detail-page-header .title h3 a::before{
  content:'';
  position: relative;
  display: inline-block;
  margin-right: 0.5vw;
  width: 1vw;
  height: 1.1vw;
  background: url('../images/arrow_right_white.svg');
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.detail-header .portfolios-detail-page-header .title h1 {
  margin-bottom: 2vh;
  width: 70vw;
  font-family: "NeueKaine-Regular";
  font-size: 6.2vw;
  line-height: 11vh;
}

.detail-header .portfolios-detail-page-header .title a {}

.detail-header .portfolios-detail-page-header .title a .icon {
  margin-right: 1vw;
  width: 1.5vw;
}

.detail-header .portfolios-detail-page-header .title a h4 {
  font-family: "SpaceGrotesk-Light";
  font-size: 1vw;
}

.detail-header .portfolios-detail-page-header .about {}

.detail-header .portfolios-detail-page-header .about .wrapper {
  padding: 7vh 3vw;
}

.detail-header .portfolios-detail-page-header .about h4 {
  margin-bottom: 1vh;
  font-family: "SpaceGrotesk-Light";
  font-size: 1vw;
  line-height: 3vh;
}

.detail-header .portfolios-detail-page-header .about p {
  margin-bottom: 5vh;
  color: #F5F5F5;
}

.detail-header .portfolios-detail-page-header .about h2 {
  margin-bottom: 16vh;
  font-family: "SpaceGrotesk-Light";
  font-size: 2.4vw;
  line-height: 5.6vh;
}

.detail-header .portfolios-detail-page-header .about ul {
  list-style: none;
  margin: 0 0 5vh;
  padding: 0;
}

.detail-header .portfolios-detail-page-header .about ul li {
  color: #F5F5F5;
}

.detail-header .portfolios-detail-page-header .about .button {
  display: block;
  margin-bottom: 15vh;
}

.detail-header .portfolios-detail-page-header .about .button h4 {
  margin: 0 1vw 0 0;
  font-family: "SpaceGrotesk-Medium";
}

.detail-header .portfolios-detail-page-header .about .button .icon {
  width: 1.5vw;
}

/* Highlight Section */
.detail-highlight {}

.detail-highlight .project {}

.detail-highlight .project .panel_p {}

.detail-highlight .project .panel_p .column {
  max-width: 100%;
  width: 100%;
}

.detail-highlight .project .panel_p .column .col__image-wrap {
  max-width: 100%;
  width: 100%;
}

.detail-highlight .project .panel_p .column .col__image-wrap .img_parallax {
  object-fit: contain;
}

/* Process Section */
.detail-process {}

.detail-process .wrapper {
  margin: 20vh 0;
}

.detail-process .wrapper .item-left {
  height: auto;
}

.detail-process .wrapper .item-left p {}

.detail-process .wrapper .item-right {
  height: auto;
}

.detail-process .wrapper .item-right .title {
  font-family: "SpaceGrotesk-Light";
  font-size: 8vw;
  line-height: 14vh;
}

.detail-process .wrapper .item-right .text {
  width: 32vw;
  font-family: "SpaceGrotesk-Light";
  font-size: 1vw;
  line-height: 2.8vh;
}

/* Gallery Section */
.detail-gallery {
  padding: 0 4.1vw;
}
.detail-gallery.gend {
  padding-right: var(--bs-gutter-x, .75rem);
  padding-left: var(--bs-gutter-x, .75rem);
}

.detail-gallery .images {
  margin-bottom: 8rem !important;
}

/* Desktop Section */
.detail-desktop {
  padding: 5vh 20vw;
}

.detail-desktop .images {
  border-radius: 0.8px;
  -webkit-box-shadow: 0 0 50px 4px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 0 50px 4px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 50px 4px rgba(0, 0, 0, 0.05);
}

/* Description Section */
.detail-description {
  padding: 20vh 16vw 32vh 36vw;
}

.detail-description h2 {
  font-size: 2.8vw;
}

.detail-description p {
  margin-bottom: 4vh;
  font-family: "SpaceGrotesk-Light";
  font-size: 1.52vw;
  line-height: 4.2vh;
}

.detail-description p:last-child {
  margin-bottom: 0;
}

/* Mobile Section */
.detail-mobile {
  padding: 0 20vw 20vh;
  text-align: center;
}

.detail-mobile .images {
  display: inline-block;
  margin: 6vh 1.5vw;
  width: 28%;
  border-radius: 1vw;
}

/* Result Section */
.detail-result {}

.detail-result .overlay {
  top: unset;
  bottom: 99%;
  background: -webkit-linear-gradient(180deg, transparent 0%, #161415 90%);
  background: -o-linear-gradient(180deg, transparent 0%, #161415 90%);
  background: -moz-linear-gradient(180deg, transparent 0%, #161415 90%);
  background: linear-gradient(180deg, transparent 0%, #161415 90%);
}

.detail-result .wrapper {}

.detail-result .wrapper h4 {
  margin-bottom: 8rem !important;
  font-family: "SpaceGrotesk-Regular";
  font-size: 1.2vw;
}

.detail-result .wrapper h2 {
  font-family: "NeueKaine-Regular";
  font-size: 3.6vw;
  line-height: 7.2vh;
}

/* Other Section */
.detail-other {
  margin-top: -1vh;
}

.detail-other .image {
  object-fit: cover;
  height: 115vh;
}

.detail-other .wrapper {
  padding-top: 20vh;
  width: 91.8vw;
}

.detail-other .wrapper h4 {
  margin-bottom: 2vh;
  font-family: "SpaceGrotesk-Light";
  font-size: 1vw;
}

.detail-other .wrapper .title {
  position: absolute;
  bottom: 10vh;
}

.detail-other .wrapper .title h2 {
  margin-bottom: 2vh;
  width: 50%;
  font-family: "NeueKaine-Regular";
  font-size: 6.5vw;
  line-height: 13vh;
}

.detail-other .wrapper .title ul {
  list-style: none;
}

.detail-other .wrapper .title ul li {
  color: #F5F5F5;
}

.detail-other .wrapper .title .button {
  padding: 3vw;
  left: unset;
}

.detail-other .wrapper .title .button img {
  width: 1.6vw;
}

/* Mobile */
@media screen and (max-width: 846px) {

  /* Header Section */
  .detail-header {}

  .detail-header .portfolios-detail-page-header {}

  .detail-header .portfolios-detail-page-header .image {
    height: 100vh;
    object-fit: cover;
  }

  .detail-header .portfolios-detail-page-header .overlay {
    top: 50vh;
    bottom: unset;
    height: 80vh;
    object-fit: cover;
  }

  .detail-header .portfolios-detail-page-header .title {
    padding: 0 8vw;
    top: 40vh;
    left: 0;
    width: 100% !important;
  }

  .detail-header .portfolios-detail-page-header .title h3,
  .detail-header .portfolios-detail-page-header .title h3 a{
    margin-bottom: 2vh;
    margin-left: 0;
    font-size: 3.8vw;
  }
  .detail-header .portfolios-detail-page-header .title h3 a::before{
    display: none !important;
  }

  .detail-header .portfolios-detail-page-header .title h1 {
    margin-bottom: 2vh;
    font-size: 9vw;
    line-height: 5.5vh;
  }

  .detail-header .portfolios-detail-page-header .title a {}

  .detail-header .portfolios-detail-page-header .title a .icon {
    margin-right: 1.5vw;
    vertical-align: middle;
    width: 4vw;
  }

  .detail-header .portfolios-detail-page-header .title a h4 {
    font-size: 4vw;
  }

  .detail-header .portfolios-detail-page-header .about {
    position: relative !important;
    padding: 0 8vw 10vh;
    background: #161415;
    border: unset;
  }

  .detail-header .portfolios-detail-page-header .about .wrapper {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: calc(var(--bs-gutter-x)* .5);
    padding-right: calc(var(--bs-gutter-x)* .5);
  }

  .detail-header .portfolios-detail-page-header .about .border-right-white {
    border-right: unset !important;
  }

  .detail-header .portfolios-detail-page-header .about h4 {
    font-size: 4.2vw;
    line-height: 3.5vh;
  }

  .detail-header .portfolios-detail-page-header .about p {}

  .detail-header .portfolios-detail-page-header .about h2 {
    font-size: 4.2vw;
    line-height: 3.5vh;
  }

  .detail-header .portfolios-detail-page-header .about ul {
    padding: 0;
  }

  .detail-header .portfolios-detail-page-header .about ul li {}

  .detail-header .portfolios-detail-page-header .about .button {
    margin-bottom: 0;
  }

  .detail-header .portfolios-detail-page-header .about .button h4 {
    margin-right: 2vw;
  }

  .detail-header .portfolios-detail-page-header .about .button .icon {
    width: 5vw;
  }

  /* Highlight Section */
  .detail-highlight {}

  .detail-highlight .project {}

  .detail-highlight .project .panel_p {}

  .detail-highlight .project .panel_p .column {}

  .detail-highlight .project .panel_p .column .col__image-wrap {}

  .detail-highlight .project .panel_p .column .col__image-wrap .img_parallax {
    object-fit: cover;
  }

  /* Process Section */
  .detail-process {}

  .detail-process .wrapper {
    margin: 0;
  }

  .detail-process .wrapper .item-left {}

  .detail-process .wrapper .item-left p {}

  .detail-process .wrapper .item-right {}

  .detail-process .wrapper .item-right .title {
    font-size: 8vw;
    line-height: 5.5vh;
  }

  .detail-process .wrapper .item-right .text {
    width: 100%;
    font-size: 4.2vw;
  }

  /* Gallery Section */
  .detail-gallery {}

  .detail-gallery .images {}

  /* Desktop Section */
  .detail-desktop {
    padding: 5vh 8vw;
  }

  .detail-desktop .images {}

  /* Description Section */
  .detail-description {
    padding: 0 8vw;
  }

  .detail-description h2 {
    font-size: 8vw;
    line-height: 5.5vh;
  }

  .detail-description p {
    font-size: 4.2vw;
  }

  /* Mobile Section */
  .detail-mobile {
    padding: 5vh 8vw 10vh;
  }

  .detail-mobile .images {
    margin: 2vh 1.5vw;
  }

  /* Result Section */
  .detail-result {}

  .detail-result .col-lg-12 {
    padding: 10vh 8vw !important;
    height: auto !important;
    border: unset;
  }

  .detail-result .overlay {
    height: 30vh;
  }

  .detail-result .wrapper {
    position: relative !important;
    top: unset !important;
    transform: unset !important;
    left: unset !important;
    width: 100% !important;
  }

  .detail-result .wrapper h4 {
    margin-bottom: 3vh;
    width: 100%;
    font-size: 4.2vw;
    line-height: 3.5vh;
  }

  .detail-result .wrapper h2 {
    font-size: 5.5vw;
    line-height: 4.5vh;
  }

  /* Other Section */
  .detail-other {}

  .detail-other .image {
    margin-top: -1vh;
    height: 100vh;
  }

  .detail-other .wrapper {
    padding: 10vh 8vw;
    width: 100%;
  }

  .detail-other .wrapper h4 {
    font-size: 4.2vw;
    line-height: 3.5vh;
  }

  .detail-other .wrapper .title {
    width: 84vw !important;
  }

  .detail-other .wrapper .title h2 {
    width: 100%;
    font-size: 11vw;
    line-height: 7vh;
  }

  .detail-other .wrapper .title ul {}

  .detail-other .wrapper .title ul li {
    font-size: 4.2vw;
  }

  .detail-other .wrapper .title .button {
    top: unset !important;
    transform: unset;
    bottom: 0;
    width: 20vw;
    height: 20vw;
  }

  .detail-other .wrapper .title .button img {
    position: absolute;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    width: 7vw;
  }
}

/* ===================== End Portfolios Detail Page ======================== */





/* ===================== Contact Page ============================ */
/* Content Section */
.contact-content {
  padding-top: 20vh;
}

.contact-content .title {
  border-top: 1px solid #161415;
  border-bottom: 1px solid #161415;
}

.contact-content .title .wrapper {
  margin-bottom: 20vh;
  padding: 10vh 4.1vw;
}

.contact-content .title .wrapper p {
  font-family: "NeueKaine-Regular";
  font-size: 6.4vw;
  line-height: 10.4vh;
}

.contact-content .title .wrapper p span {
  font-family: "NeueKaine-Black";
}

.contact-content .ccform {
  border-top: 1px solid #161415;
  border-left: 1px solid #161415;
  border-bottom: 1px solid #161415;
}

.contact-content .ccform form #formSubvision {}

.contact-content .ccform form #formSubvision .question {
  padding: 4vh 4.7%;
  border-bottom: 1px solid #161415;
}

.contact-content .ccform form #formSubvision .question:last-child {
  border-bottom: unset;
}

.contact-content .ccform form #formSubvision .question label {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 0;
  padding: 0;
  width: 19%;
  font-family: "SpaceGrotesk-Bold";
}

.contact-content .ccform form #formSubvision .question input,
.contact-content .ccform form #formSubvision .question textarea {
  display: inline-block;
  vertical-align: top;
  padding: 0;
  width: 80%;
  border: none;
  background: #F5F5F5;
}

.contact-content .ccform form #formSubvision .button {
  position: absolute;
  padding: 0 4.7% 0 66.7%;
  bottom: 0;
  left: 0;
  border-top: 1px solid #161415;
}

.contact-content .ccform form #formSubvision .button .submit-subvis {
  padding: 5vh 0;
  width: 100%;
  color: #F5F5F5;
  border: none;
  border-radius: 0;
  background-image: radial-gradient(circle, rgb(0, 25, 64) 0%, rgb(0, 0, 0) 100%);
}

.contact-content .ccform form #formSubvision .button .submit-subvis p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
  color: #F5F5F5;
}

.contact-content .ccform form #formSubvision .button .submit-subvis img {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1vw;
  width: 1.3vw;
}

/* Footer Section */
.contact-footer {
  height: auto;
}

.contact-footer .border {
  border: 1px solid #161415 !important;
}

.contact-footer .bgbox {
  height: 15vh;
  border-left: 1px solid #161415 !important;
}

.contact-footer p {
  position: relative !important;
  margin: 0 !important;
  padding: 4vh 2vw !important;
  top: unset !important;
  transform: unset !important;
  left: unset !important;
  right: unset !important;
  min-height: 15vh;
  font-size: 0.8vw;
  line-height: 2.3vh;
}

.contact-footer a {}

.contact-footer a i {}

/* Mobile */
@media screen and (max-width: 846px) {

  /* Content Section */
  .contact-content {
    padding-top: 16vh;
  }

  .contact-content .title {
    border-bottom: unset;
  }

  .contact-content .title .wrapper {
    margin: 0;
    padding: 10vh 8vw;
  }

  .contact-content .title .wrapper p {
    font-size: 15vw;
    line-height: 9vh;
  }

  .contact-content .ccform {}

  .contact-content .ccform form #formSubvision {}

  .contact-content .ccform form #formSubvision .question {
    padding: 5vh 8vw;
  }

  .contact-content .ccform form #formSubvision .question:last-child {}

  .contact-content .ccform form #formSubvision .question label {
    display: block;
    margin-bottom: 2vh;
    width: 100%;
  }

  .contact-content .ccform form #formSubvision .question input,
  .contact-content .ccform form #formSubvision .question textarea {
    display: block;
    width: 100%;
  }

  .contact-content .ccform form #formSubvision .button {
    position: relative;
    padding: 0 8vw 0 25vw;
  }

  .contact-content .ccform form #formSubvision .button .submit-subvis {}

  .contact-content .ccform form #formSubvision .button .submit-subvis p {}

  .contact-content .ccform form #formSubvision .button .submit-subvis img {
    margin-left: 2vw;
    width: 6vw;
  }

  /* Footer Section */
  .contact-footer {
    margin-top: 15vh;
  }

  .contact-footer .border {}

  .contact-footer .bgbox {
    height: auto;
    border-top: 1px solid #161415 !important;
  }

  .contact-footer p {
    padding: 5vh 8vw !important;
    font-size: 3vw;
    line-height: 3vh;
  }

  .contact-footer a {}

  .contact-footer a i {}
}

/* ===================== End Contact Page ======================== */
.split-line {
  overflow: hidden;
}

.split-parent {
  overflow: hidden;
}

.quoteOnLoad, .quote_1 { overflow:hidden; }
.side-nav {
  display: block;
  position: fixed;
  padding: 7.2vh 4vw;
  top: 0;
  right: -100vw;
  width: 100vw;
  height: 100vh;
  background-color: #F5F5F5;
  transition: right 1s ease;
  z-index: 1000;
}
.side-nav.open {
  right: 0;
}
.side-nav .logo{
  width: 10.5vw;
}
.side-nav .text{
  position: absolute;
  margin: 0;
  padding-left: 4vw;
  bottom: 7.2vh;
  left: 0;
  width: 25%;
  font-size: 1.2vw;
  line-height: 2.8vh;
  text-transform: uppercase;
}
.side-nav #closeBtn{
  position: absolute;
  z-index: 2;
  top: 7vh;
  right: 8vw;
  width: 4vw;
  height: 4vw;
  background: #161415;
  cursor: pointer;
}
.side-nav #closeBtn .close-toggle{
  width: 2vw;
  font-size: 9vw;
}
.side-nav .menu-side-menu-container{
  position: absolute;
  top: 0;
  right: 0;
  width: 75%;
  height: 100%;
  border-left: 1px solid #161415;
}
.side-nav .menu{
  position: absolute;
  margin: 0;
  padding: 0;
  bottom: 0;
  width: 100%;
  list-style: none;
}
.side-nav .menu li{
  padding: 0 8vw;
}
.side-nav .menu li a {
  display: inline-block;
  margin-bottom: 2vh;
  padding: 0 0 1vh;
  font-family: "SpaceGrotesk-Regular";
  text-transform: uppercase;
  font-size: 4vw;
  line-height: 11vh;
  color: #161415;
  border-bottom: 1px solid transparent;
  transition: all .3s;
}
.side-nav .menu li:hover a{
  font-family: "SpaceGrotesk-Bold";
  border-bottom: 0.3vh solid #161415;
  transition: all .3s;
}
.side-nav .menu li.active a,
.side-nav .menu li.active a p {
  font-family: "SpaceGrotesk-Bold";
  color: #161415;
  border-bottom: 1px solid #161415;
  transition: all .3s;
}
.side-nav .menu li:last-child{
  margin-top: 8vh;
  padding: 0 16vw 0 8vw;
  border-top: 1px solid #161415
}
.side-nav .menu li:last-child a{
  margin: 3vh 0;
  padding: 0;
  font-size: 2.1vw;
  line-height: 5.8vh;
  visibility: hidden;
}
.side-nav .menu li:last-child::after{
  content: '';
  position: absolute;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  right: 25vw;
  width: 2vw;
  height: 5vh;
  background: url('../images/arrow_hover_nav_black.svg');
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  visibility: hidden;
}
@media screen and (max-width: 846px) {
  .side-nav{
    padding: 5vh 8vw;
    top: -100vh;
    right: 0;
    transition: top 1s ease;
  }
  .side-nav.open{
    top: 0;
  }
  .side-nav .logo{
    width: 30vw;
  }
  .side-nav .text{
    position: relative;
    margin: 3vh 0;
    padding: 0;
    bottom: unset;
    left: unset;
    width: unset;
    font-size: 3.6vw;
    line-height: 2.8vh;
  }
  .side-nav #closeBtn{
    top: 5vh;
    width: 12vw;
    height: 6.5vh;
  }
  .side-nav #closeBtn .close-toggle{
    width: 7vw;
  }
  .side-nav .menu-side-menu-container{
    width: 100%;
  }
  .side-nav .menu{
    bottom: -6vh;
  }
  .side-nav .menu li{}
  .side-nav .menu li a {
    margin-bottom: 4vh;
    padding: 0 0 1vh;
    font-size: 11.2vw;
    line-height: 6.8vh;
  }
  .side-nav .menu li:hover a{}
  .side-nav .menu li.active a p {}
  .side-nav .menu li:last-child{}
  .side-nav .menu li:last-child a{
    font-size: 4.4vw;
    line-height: 5.8vh;
  }
  .side-nav .menu li:last-child::after{
    right: 9vw;
    width: 5vw;
    height: 6vw;
  }
}
.nav-menu {
  list-style-type: none;
  padding: 50px 20px;
}
.nav-menu li {
  margin-bottom: 20px;
  overflow: hidden;
  cursor: pointer;
}
.nav-menu a {
  color: white;
  text-decoration: none;
  font-size: 24px;
  display: block;
}



.wrapAnimeFadeUp{
    position: relative;
}
.AFUTarget-01{
  position: absolute;
  z-index: 1;
  top: -40vh;
  left: 0;
  width: 100%;
  height: 1px;
}
.AFUeffect{
  position: relative;
  opacity: 0;
  top: 10vh;
  transition: all 1.5s;
}
.wrapAnimeFadeUp.active .AFUeffect{
  position: relative;
  opacity: 1;
  top: 0;
  transition: all 1.5s;
}
.vh-100{
    height: 100vh;
}
.vw-100{
    width: 100vw;
}
.object-cover{
    object-fit: cover;
}
.wrapper_contact_thanks .thanks_button_explore{
      padding: 2vh 2vw;
      width: 100%;
      color: #F5F5F5;
      border: none;
      border-radius: 0;
      background-image: radial-gradient(circle, rgb(0, 25, 64) 0%, rgb(0, 0, 0) 100%);
      display: inline;
}
.wrapper_contact_thanks_mobile .thanks_button_explore{
      padding: 2vh 2vw;
      width: 80%;
      color: #F5F5F5;
      border: none;
      border-radius: 0;
      background-image: radial-gradient(circle, rgb(0, 25, 64) 0%, rgb(0, 0, 0) 100%);
      display: inline;
}
.wpcf7-spinner{
    display: none !important;
}
.wpcf7 form .wpcf7-response-output{
    display: none;
}
.borderlines_1{
    position: absolute;
      height: 1px;
      background-color: #161415;
      z-index: 3;
      width: 100%;
      bottom: 5vh;
}