/* CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ion-icon {
  vertical-align: middle !important;
}

body {
  height: 100vh;
  line-height: 1;
  scroll-behavior: smooth;
  overflow-x: hidden !important;
}

#bodyscroll {
  overflow: hidden !important;
}

body::-webkit-scrollbar {
  display: none;
}

ol,
ul {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

a[onclick] {
  cursor: pointer;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.form-control {
  border: 0;
}

.scrollbar-track {
  z-index: 1003;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Font */
@font-face {
  font-family: Space Grotesk Bold;
  src: url(font/SpaceGrotesk-Bold.ttf);
}
@font-face {
  font-family: Space Grotesk Medium;
  src: url(font/SpaceGrotesk-Medium.ttf);
}
@font-face {
  font-family: Space Grotesk;
  src: url(font/SpaceGrotesk-Regular.ttf);
}
@font-face {
  font-family: Nunito Sans;
  src: url(font/NunitoSans-Regular.ttf);
}
@font-face {
  font-family: Nunito Sans Semibold;
  src: url(font/NunitoSans-SemiBold.ttf);
}
@font-face {
  font-family: Nunito Sans Bold;
  src: url(font/NunitoSans-Bold.ttf);
}
a {
  font: 1.05vw "Nunito Sans Semibold";
  color: #4e4f63 !important;
  text-decoration: none !important;
}

.text-white {
  color: #ffffff !important;
}

.ico-img {
  width: 1.7vw;
  margin-right: 3.12vw;
  height: auto;
}

.ico-img-bh {
  width: 2.4vw;
  margin-right: 3.12vw;
  height: auto;
}

.ico-img-at {
  width: 1.4vw;
  margin-right: 1.04vw;
  height: auto;
}

.cmt-1 {
  margin-top: 14.4vw !important;
}

.cmt-2 {
  margin-top: 11.9vw !important;
}

.cmt-3 {
  margin-top: 11.2vw !important;
}

.cmt-4 {
  margin-top: 7.8vw !important;
}

.cmt-5 {
  margin-top: 5.2vw !important;
}

.cmb-1 {
  margin-bottom: 14.4vw !important;
}

.cmb-2 {
  margin-bottom: 11.9vw !important;
}

.cmb-3 {
  margin-bottom: 11.2vw !important;
}

.cmb-4 {
  margin-bottom: 7.8vw !important;
}

.cmb-5 {
  margin-bottom: 5.2vw !important;
}

.nm {
  margin: 0 auto 0 auto !important;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh !important;
  z-index: 10002 !important;
  background-color: #ffffff;
}
#preloader img {
  width: 5vw;
  height: auto;
  margin-bottom: 1.67vw;
}
#preloader .preloader-percentage {
  font: 1.67vw "Space Grotesk Medium";
  color: #6988f8;
  text-align: center;
  margin: auto;
}

#notif {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1001;
  display: none;
}
#notif .container {
  height: 100vh;
  margin: auto;
  max-width: 60vw !important;
}
#notif #notif-wrapper {
  position: relative;
  width: 100%;
  height: 70vh;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}
#notif #notif-wrapper .title-text {
  padding: 10%;
  font: 3vw "Space Grotesk Medium";
  color: #2a3749;
  line-height: 4vw;
}
#notif #notif-wrapper .title-text .emphasis-text {
  color: #6988f8;
}
#notif #notif-wrapper .poster-ava {
  background-image: url("img/avatar.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#notif #notif-wrapper .item-content {
  font: 1.67vw "Space Grotesk Medium";
  margin-top: 3.1vw;
}
#notif #notif-wrapper .item-content a {
  margin-right: 3.12vw;
}
#notif #notif-wrapper .item-content a .ico-img {
  margin-right: 0;
}
#notif #notif-wrapper .close-notif {
  position: absolute;
  width: auto;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
  top: 0;
  right: 0;
  margin: 24px;
}

#menu-mobile {
  position: fixed;
  display: none;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background-color: #f7f9fe;
}
#menu-mobile .menu-area {
  width: 100vw !important;
  height: 100vh;
  overflow: hidden;
}
#menu-mobile li {
  width: auto;
  display: block;
}
#menu-mobile li a {
  font: 8.5vw "Space Grotesk Medium";
  width: 100%;
  color: #06273b !important;
  margin-bottom: 8vw;
  display: inline-block;
  transition: all 0.3s ease;
}
#menu-mobile li a:hover,
#menu-mobile li a:active,
#menu-mobile li a:focus {
  color: #6988f8 !important;
  transition: all 0.3s ease;
}
#menu-mobile li .cta {
  background-color: #6988f8;
  color: #ffffff !important;
  padding: 4vw 8vw;
  border-radius: 16vw;
  font-size: 4vw;
  margin: 10vw 0;
  width: 67vw !important;
  z-index: 500;
  transition: all 0.3s ease-in-out;
}
#menu-mobile li .cta:hover,
#menu-mobile li .cta:active,
#menu-mobile li .cta:focus {
  background-color: #626cf6;
  color: #ffffff !important;
  transition: all 0.3s ease-in-out;
}
#menu-mobile li .email {
  color: #6988f8 !important;
}

#navbar {
  width: 100vw;
  height: auto;
  display: none;
  padding: 1vw 12vw;
  top: 0;
  position: fixed;
  transition: top 0.8s ease-out;
  z-index: 1000;
  background-color: rgba(247, 249, 254, 0);
}
#navbar #main-title {
  width: auto;
  height: auto;
}
#navbar #main-title .logo img {
  width: 2.5vw;
  height: auto;
  padding-right: 0.42vw;
  vertical-align: middle;
}
#navbar #main-title .logo .title {
  font: 2.135vw "Space Grotesk Medium";
  color: #6988f8;
  vertical-align: middle;
  transition: all 0.3s ease-in-out;
}
#navbar #menu-desktop {
  width: auto;
  cursor: pointer;
}
#navbar #menu-desktop li {
  width: auto;
  display: inline-block;
}
#navbar #menu-desktop li a {
  color: #787ea0 !important;
  padding: 0.78vw 1.3vw 0vw 1.3vw;
  display: inline-block;
  transition: all 0.3s ease;
}
#navbar #menu-desktop li a .icon-cta {
  color: #6988f8 !important;
  margin-right: 5px;
  padding-bottom: 3px;
  font-size: 20px;
}
#navbar #menu-desktop li .textmenu::after {
  display: block;
  content: "";
  border-bottom: 2px solid #6988f8;
  margin-top: 0.78vw;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
  transform-origin: 100% 0%;
}
#navbar #menu-desktop li a:hover {
  color: #6988f8 !important;
  transition: all 0.3s ease;
}
#navbar #menu-desktop li .textmenu:hover::after {
  transform: scaleX(1);
  transform-origin: 0% 100%;
}
#navbar #menu-desktop li .cta {
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  display: flex;
  background-color: #6988f8 !important;
  color: white !important;
  padding: 0.78vw 2.35vw;
  margin-left: 1.3vw;
  border-radius: 1.55vw;
  overflow: hidden;
  transition: background-color 0.3s ease;
}
#navbar #menu-desktop li .cta .button__filler {
  background: #626cf6;
  position: absolute;
  width: 150%;
  height: 200%;
  border-radius: 50%;
  top: -50%;
  left: -25%;
  transform: translate3d(0, 75%, 0);
}
#navbar #menu-desktop li .cta .button__text,
#navbar #menu-desktop li .cta .button__text-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#navbar #menu-desktop li .cover-cta:hover {
  background-color: #6988f8 !important;
}
#navbar #menu-desktop li .cta:focus,
#navbar #menu-desktop li .cta:hover,
#navbar #menu-desktop li .button--hover {
  background-color: #87A1FF !important;
  color: #ffffff !important;
  transition: background-color 0.3s ease;
}
#navbar #hamburger {
  display: none;
}
#navbar #hamburger .btn-hamburger,
#navbar #hamburger .btn-close {
  width: 8vw;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
#navbar #hamburger .btn-close {
  width: 5.35vw;
}
#navbar #hamburger:hover {
  cursor: pointer;
}
#navbar .state-close .btn-close {
  display: none;
}
#navbar .state-active .btn-hamburger {
  display: none;
}

/* Outer Wrapper */
#outer-wrapper {
  width: auto;
  max-width: 100vw;
  height: auto;
  background-color: #f7f9fe;
}
#outer-wrapper .boxed-area {
  width: 70% !important;
}
#outer-wrapper #hero {
  width: auto;
  max-width: 100vw;
  height: auto;
}
#outer-wrapper #hero .display-text {
  position: relative;
  font: 4.375vw "Space Grotesk Medium";
  color: #2a3749;
  margin: auto;
  max-width: 42vw;
  margin-top: 10vw;
  text-align: center;
  line-height: 5vw;
  z-index: 500;
}
#outer-wrapper #hero .display-text .emphasis-text {
  color: #6988f8;
}
#outer-wrapper #hero .sub-display-text {
  position: relative;
  font: 1.3vw "Nunito Sans";
  color: #4e4f63;
  margin: auto;
  max-width: 42vw;
  margin-top: 4vh;
  text-align: center;
  line-height: 2.15vw;
  z-index: 500;
}
#outer-wrapper #hero .sub-display-text .sb {
  font: 1.3vw "Nunito Sans Semibold";
  color: #2a3749;
}
#outer-wrapper #hero .cta-mobile {
  text-align: center;
  margin: 4.55vh auto;
  padding: 0.78vw 0;
  display: none;
  position: relative;
  z-index: 990;
}
#outer-wrapper #hero .cta-mobile .cta {
  cursor: pointer;
  margin: auto;
  background-color: #6988f8;
  color: #ffffff !important;
  padding: 4vw 19vw;
  border-radius: 16vw;
  font-size: 4vw;
}
#outer-wrapper #hero .cta-mobile .cta .icon-cta {
  margin-right: 5px;
  padding-bottom: 3px;
  font-size: 6vw;
}
#outer-wrapper #hero .cta-mobile .cta:hover {
  background-color: #626cf6;
  color: #ffffff !important;
  transition: all 0.3s ease;
}
#outer-wrapper #hero .display-image {
  position: relative;
  width: 100vw;
  height: 90vw;
  margin: auto;
  top: -22vw;
}
#outer-wrapper #hero .display-image #fixed {
  width: 95vw;
  height: 101vw;
  margin: 2vw auto 18vw auto;
  display: block;
}
#outer-wrapper #hero .background-image {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 7.5vw;
}
#outer-wrapper #hero .background-image img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#outer-wrapper .section-title {
  padding: 10.5vw 0vw;
}
#outer-wrapper .section-title .title-border {
  width: 100%;
  height: 1px;
  background: #cfd1dd;
}
#outer-wrapper .section-title .title-text {
  font: 4vw "Space Grotesk Medium";
  color: #2a3749;
  line-height: 4.5vw;
}
#outer-wrapper .section-title .title-text .emphasis-text {
  color: #6988f8;
}
#outer-wrapper .section-title .title-text .paragraph-thumbnail {
  width: auto;
  max-width: 8vw;
  height: auto;
  max-height: 4vw;
  border-radius: 100%;
}
#outer-wrapper #service .service-item {
  width: 40%;
  margin-bottom: 4vw;
}
#outer-wrapper #service .service-item .service-image {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 0.52vw;
  transform-style: preserve-3d;
}
#outer-wrapper #service .service-item .service-desc {
  width: auto;
  margin: 2.5vw auto;
  text-align: center;
}
#outer-wrapper #service .service-item .service-desc h3 {
  font: 2.35vw "Space Grotesk Medium";
  color: #2a3749;
  line-height: 2.5vw;
}
#outer-wrapper #service .service-item .service-desc span {
  font: 1.3vw "Nunito Sans";
  color: #9fa2b8;
  margin: auto;
  line-height: 2.15vw;
}
#outer-wrapper #service .service-item:nth-child(2n+3) {
  margin-top: -20vw;
}
#outer-wrapper #service .service-item:nth-child(2) {
  margin-top: 20vw;
}
#outer-wrapper #service .service-item:last-child {
  margin-bottom: 0;
}
#outer-wrapper #portofolio .project-box {
  margin-top: 5.2vw;
}
#outer-wrapper #portofolio .project-item {
  width: 45%;
  margin-bottom: 6.25vw;
}
#outer-wrapper #portofolio .project-item canvas {
  border-radius: 0.5vw;
  overflow: hidden;
}
#outer-wrapper #portofolio .project-item .project-desc {
  width: auto;
  margin: 3vw auto;
  text-align: center;
}
#outer-wrapper #portofolio .project-item .project-desc .project-image {
  width: 100% !important;
  border-radius: 1.35vw !important;
}
#outer-wrapper #portofolio .project-item .project-desc h3 {
  font: 2.35vw "Space Grotesk Medium";
  color: #2a3749;
  line-height: 2.5vw;
}
#outer-wrapper #portofolio .project-item .project-desc span {
  font: 1.3vw "Nunito Sans";
  color: #9fa2b8;
  margin: auto;
  line-height: 2.15vw;
}
#outer-wrapper #portofolio .project-item:nth-child(2n+3) {
  margin-top: -20vw;
}
#outer-wrapper #portofolio .project-item:nth-child(2) {
  margin-top: 20vw;
}
#outer-wrapper #porto-wrapper #title-area .title-box {
  width: 70vw;
  height: auto;
  margin: auto;
  padding: 19.5vw 0 11.2vw 0;
}
#outer-wrapper #porto-wrapper #title-area .title-box .project-name {
  font: 1.3vw "Nunito Sans";
  color: #4e4f63;
}
#outer-wrapper #porto-wrapper #title-area .title-box .project-desc-text {
  font: 3.9vw "Space Grotesk Medium";
  color: #2a3749;
  line-height: 4.4vw;
  margin: 1.5vw 0vw;
}
#outer-wrapper #porto-wrapper #title-area .title-box .project-cat {
  font: 1.3vw "Space Grotesk Medium";
  color: #2a3749;
}
#outer-wrapper #porto-wrapper video {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
#outer-wrapper #porto-wrapper img {
  width: 100%;
  height: auto;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
#outer-wrapper #porto-wrapper #thumb {
  width: 100vw;
  height: auto;
}
#outer-wrapper #porto-wrapper #overview .overview-box {
  width: 60vw;
  height: auto;
  margin: 14.4vw auto;
}
#outer-wrapper #porto-wrapper #overview .overview-box .overview-text {
  width: 27%;
  height: auto;
  float: left;
}
#outer-wrapper #porto-wrapper #overview .overview-box .overview-text h6 {
  font: 1.3vw "Space Grotesk Bold";
  color: #4e4f63;
}
#outer-wrapper #porto-wrapper #overview .overview-box .overview-desc {
  width: 70%;
  height: auto;
  float: right;
}
#outer-wrapper #porto-wrapper #overview .overview-box .overview-desc p {
  max-width: 100%;
  font: 1.45vw "Nunito Sans";
  line-height: 2.2vw;
  color: #2a3749;
}
#outer-wrapper #porto-wrapper #overview .overview-box .overview-desc a {
  font: 1.45vw "Nunito Sans Bold";
  line-height: 2.2vw;
  color: #2a3749;
}
#outer-wrapper #porto-wrapper .porto-area-85 {
  width: 85vw;
  height: auto;
  margin: 7vw auto;
}
#outer-wrapper #porto-wrapper .porto-area-100 {
  width: 100vw;
  height: auto;
  display: flex;
  margin: 7vw auto;
}
#outer-wrapper #porto-wrapper .porto-area-100 .sub-porto-50 {
  width: 50%;
}
#outer-wrapper #porto-wrapper .box-67 {
  width: 67vw;
  height: auto;
  margin: 14.4vw auto 11.9vw auto;
}
#outer-wrapper #porto-wrapper .box-95 {
  width: 95vw;
  height: auto;
  margin: 7vw auto;
}
#outer-wrapper #porto-wrapper .box-27 {
  width: 27vw;
  height: auto;
  margin: 14.4vw auto 11.9vw auto;
}
#outer-wrapper #porto-wrapper .box-27 .highlight-text {
  width: 100% !important;
}
#outer-wrapper #porto-wrapper .mason-box .highlight-desc {
  width: 45%;
}
#outer-wrapper #porto-wrapper .mason-img {
  display: block;
  float: left;
  width: 45%;
  margin-bottom: 4vw;
}
#outer-wrapper #porto-wrapper .mason-img:nth-child(odd) {
  margin-right: 10%;
}
#outer-wrapper #porto-wrapper .highlight-text {
  width: 50%;
  float: left;
}
#outer-wrapper #porto-wrapper .highlight-text h3 {
  font: 3.5vw "Space Grotesk Medium";
  color: #2a3749;
  line-height: 3.9vw;
}
#outer-wrapper #porto-wrapper .highlight-desc {
  width: 50%;
  float: right;
}
#outer-wrapper #porto-wrapper .highlight-desc p,
#outer-wrapper #porto-wrapper .highlight-desc h3 {
  font: 1.45vw "Nunito Sans";
  line-height: 2.2vw;
  color: #2a3749;
}
#outer-wrapper #porto-wrapper .hl-70 {
  width: 70%;
}
#outer-wrapper #porto-wrapper .box-img {
  display: flex;
  justify-content: space-around;
}
#outer-wrapper #porto-wrapper .box-img-4 {
  width: 22.25%;
  height: auto;
  display: inline-block;
}
#outer-wrapper #porto-wrapper #next-project {
  width: 100vw;
  height: auto;
}
#outer-wrapper #porto-wrapper #next-project .btn-next-area {
  width: 50%;
  margin: 7vw 0 3.5vw 0;
  float: right;
}
#outer-wrapper #porto-wrapper #next-project .btn-next-area .next-pro {
  font: 3.5vw "Space Grotesk Medium";
  color: #48c26c;
  line-height: 3.9vw;
}
#outer-wrapper #porto-wrapper #next-project .btn-next-area .pro-name {
  font: 3.5vw "Nunito Sans";
  color: #9fa2b8;
  line-height: 3.9vw;
}
#outer-wrapper #porto-wrapper #next-project .img-next-area {
  width: 64%;
  float: right;
}
#outer-wrapper #porto-wrapper #next-project .img-next-area img {
  width: 100%;
  height: 36vw;
}
#outer-wrapper #porto-wrapper .related-link {
  display: inline-block;
  font: 1.3vw "Nunito Sans Bold";
  color: #2a3749 !important;
  transition: color 0.2s ease-in-out;
}
#outer-wrapper #porto-wrapper .related-link::after {
  display: block;
  content: "";
  border-bottom: 2px solid #6988f8;
  margin-top: 0.5vw;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
  transform-origin: 100% 0%;
}
#outer-wrapper #porto-wrapper .related-link:hover {
  color: #6988f8 !important;
  transition: all 0.3s ease;
}
#outer-wrapper #porto-wrapper .related-link:hover::after {
  transform: scaleX(1);
  transform-origin: 0% 100%;
}
#outer-wrapper #academy-wrapper {
  height: auto;
  padding-top: 10vw;
  margin: auto;
  overflow: hidden;
}
#outer-wrapper #academy-wrapper .heading-wrapper {
  margin-left: 11vw;
  width: 24vw;
  height: auto;
}
#outer-wrapper #academy-wrapper .heading-wrapper h6 {
  font: 1.3vw "Space Grotesk Medium";
  color: #9fa2b8;
}
#outer-wrapper #academy-wrapper .heading-wrapper h2 {
  font: 3.4vw "Space Grotesk Medium";
  color: #2a3749;
  line-height: 4.5vw;
  margin: 1.6vw 0 3.65vw 0;
}
#outer-wrapper #academy-wrapper .heading-wrapper .text-emphasis {
  color: #6988f8 !important;
}
#outer-wrapper #academy-wrapper .heading-wrapper .text-desc {
  display: inline-block;
  font: 1.46vw "Nunito Sans";
  color: #9fa2b8;
  line-height: 2.2vw;
  padding-bottom: 1.82vw;
}
#outer-wrapper #academy-wrapper .heading-wrapper form {
  border-bottom: 1px solid #CFD1DD;
}
#outer-wrapper #academy-wrapper .heading-wrapper input[type=email] {
  border: none !important;
  outline: none !important;
  width: 100%;
  background-color: transparent;
  border: none;
  padding: 1.05vw 0vw;
  font: 1.5vw "Nunito Sans";
  color: #CFD1DD;
  transition: all 0.3s ease;
}
#outer-wrapper #academy-wrapper .heading-wrapper input[type=submit] {
  border: none;
  padding: 1.05vw 0vw;
  cursor: pointer;
  outline: inherit;
  background-color: transparent !important;
  color: #6988f8;
  font: 1.5vw "Space Grotesk Medium";
}
#outer-wrapper #academy-wrapper .heading-wrapper .glowroundb {
  position: absolute;
  top: 75vh;
  right: -25vw;
  border-radius: 50vw;
  width: 85vw;
  height: 85vw;
  opacity: 15%;
  background-color: #6988f8;
  filter: blur(50px);
  display: none;
}
#outer-wrapper #academy-wrapper .video-wrapper .glowround {
  position: absolute;
  right: -5vw;
  border-radius: 12vw;
  width: 22.4vw;
  height: 22.4vw;
  opacity: 15%;
  background-color: #6988f8;
  filter: blur(50px);
}
#outer-wrapper #academy-wrapper .video-wrapper video {
  margin-top: 9vw;
  width: 58.3vw;
  height: 32.8vw;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1001;
}
#outer-wrapper #contact {
  margin-top: 5.2vw;
  padding: 5.2vw 0vw 10.4vw 0vw;
  background-color: #060e3b;
}
#outer-wrapper #contact .item-title {
  font: 1.67vw "Space Grotesk Medium";
  color: #787ea0;
  margin: 1.55vw 0vw;
}
#outer-wrapper #contact .item-content {
  font: 1.67vw "Space Grotesk Medium";
  color: #ffffff;
  margin-bottom: 3.1vw;
}
#outer-wrapper #contact form .inp-box {
  position: relative;
}
#outer-wrapper #contact form input[type=text],
#outer-wrapper #contact form input[type=email] {
  width: 100%;
  background-color: transparent;
  border: none;
  padding: 1.55vw 0vw;
  border-bottom: 1px solid #787ea0;
  margin-bottom: 3.1vw;
  font: 1.67vw "Space Grotesk Medium";
  color: #ffffff;
  transition: all 0.3s ease;
}
#outer-wrapper #contact form .inp-box .inp-label {
  position: absolute;
  font: 1.67vw "Space Grotesk Medium";
  color: #6988f8;
  pointer-events: none;
  transition: 0.5s;
  top: 1.55vw;
  left: 0;
}
#outer-wrapper #contact form .inp-box input[type=text]:focus ~ .inp-label,
#outer-wrapper #contact form .inp-box input[type=email]:focus ~ .inp-label,
#outer-wrapper #contact form .inp-box input[type=text]:not([value=""]) ~ .inp-label,
#outer-wrapper #contact form .inp-box input[type=email]:not([value=""]) ~ .inp-label {
  top: 0;
  font-size: 1vw;
  outline: none;
}
#outer-wrapper #contact form .inp-box input {
  outline: none !important;
}
#outer-wrapper #contact form input[type=radio],
#outer-wrapper #contact form input[type=checkbox] {
  display: none;
}
#outer-wrapper #contact form input[type=radio] + label,
#outer-wrapper #contact form input[type=checkbox] + label {
  display: inline-block;
  background-color: transparent;
  padding: 1.3vw 2.35vw;
  font: 1.05vw "Nunito Sans Semibold";
  color: #ffffff;
  margin: 0vw 1.05vw 3.15vw 0vw;
  border: 1px solid #ffffff;
  border-radius: 3.15vw;
  transition: all 0.3s ease;
}
#outer-wrapper #contact form input[type=radio] + label:hover,
#outer-wrapper #contact form input[type=radio]:checked + label,
#outer-wrapper #contact form input[type=checkbox] + label:hover,
#outer-wrapper #contact form input[type=checkbox]:checked + label {
  background-color: #ffffff;
  color: #2a3749;
  cursor: pointer;
  transition: all 0.3s ease;
}
#outer-wrapper #contact form input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}
#outer-wrapper #contact form .file-up {
  font: 1.3vw "Space Grotesk Medium";
  color: #ffffff;
  padding: 0.025vw 0vw 0vw 0.05vw;
}
#outer-wrapper #contact form button {
  display: inline-block;
  background-color: #6988f8;
  padding: 1.3vw 2.35vw;
  font: 1.05vw "Nunito Sans Semibold";
  color: #ffffff;
  margin-top: 3.15vw;
  border-radius: 3.15vw;
  border: none;
  transition: all 0.3s ease;
}
#outer-wrapper #contact form button:hover {
  cursor: pointer;
  background-color: #626cf6;
  transition: all 0.3s ease;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  background-color: #6988f8;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.2s ease-out;
  z-index: 9999;
  background-repeat: no-repeat;
  background-position: center;
  transition-property: height, width, opacity, background-image;
}

.hal-portfolio-footer,
.hal-contact-footer {
  margin-top: 0 !important;
}

#outer-wrapper[class=hal-portfolio] {
  background-color: white;
}

#showreel {
  position: fixed;
  display: none;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 1005;
  background-color: #f7f9fe;
}
#showreel .showreel-wrapper {
  height: 100vh;
}
#showreel .showreel-wrapper video {
  width: auto;
  height: 100vh;
}
#showreel .showreel-wrapper .close-notif {
  position: absolute;
  cursor: pointer;
  top: 0;
  right: 0;
  margin: 24px;
  padding: 24px;
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
}
#showreel .showreel-wrapper .close-notif img {
  width: 20px;
  height: 20px;
  display: block;
}
#showreel .showreel-wrapper .close-notif:hover {
  background-color: rgba(105, 136, 248, 0.137254902);
  transition: all 0.3s ease-in-out;
}

@media screen and (orientation: portrait) {
  .cursor {
    display: none;
  }
  circle {
    display: none !important;
  }
  #outer-wrapper .boxed-area {
    width: 83% !important;
  }
  #hamburger {
    display: block !important;
  }
  #menu-desktop {
    display: none;
  }
  .cta-mobile {
    display: block !important;
  }
  #navbar #main-title .logo img {
    width: 9.6vw;
    height: 9.6vw;
    margin-right: 2vw;
  }
  #navbar #main-title .logo .title {
    font-size: 8vw;
  }
  #navbar {
    padding: 6vh 6vw !important;
  }
  .trans-bg {
    background-color: transparent !important;
  }
  #navbar .col-3 {
    width: 70%;
  }
  #preloader img {
    width: 21vw;
    height: auto;
  }
  #preloader .preloader-percentage {
    font-size: 8.5vw;
  }
  .display-text {
    margin-top: 18.5vh !important;
    max-width: 70vw !important;
    font-size: 11.2vw !important;
    line-height: 12.5vw !important;
  }
  .display-text .emphasis-text {
    display: inline-block;
    width: 100% !important;
  }
  .sub-display-text {
    max-width: 90% !important;
    font-size: 4vw !important;
    line-height: 6.7vw !important;
    margin-bottom: 6.7vh !important;
  }
  .sub-display-text .sb {
    font-size: 4vw !important;
    line-height: 6.7vw !important;
  }
  .background-image {
    margin-top: 61.5vh !important;
  }
  .display-image {
    margin-top: 10vh !important;
  }
  .section-title {
    padding: 32vw 0 !important;
  }
  .section-title .col-7 {
    width: 100% !important;
  }
  .section-title .col-4,
  .section-title .col-5 {
    display: none !important;
  }
  .section-title .title-text {
    font-size: 8.5vw !important;
    line-height: 12.5vw !important;
  }
  #service {
    margin-top: -10vh !important;
  }
  .service-item,
  .project-item {
    width: 100% !important;
    margin: 0 0 16vw 0 !important;
  }
  .service-image,
  .project-image {
    width: 100% !important;
    height: 78vw !important;
    border-radius: 1.35vw !important;
  }
  .service-desc,
  .project-desc {
    margin-top: 8vw !important;
  }
  .service-desc h3,
  .project-desc h3 {
    font-size: 5.35vw !important;
    line-height: 7vw !important;
  }
  .service-desc span,
  .project-desc span {
    font-size: 4vw !important;
    line-height: 5.5vw !important;
  }
  .footer-area {
    display: flex;
    flex-direction: column-reverse;
  }
  .footer-area .col-4,
  .footer-area .col-7 {
    width: 100% !important;
  }
  .footer-area .col-4 {
    margin-bottom: 43.5vw !important;
  }
  .item-title,
  .item-content {
    font-size: 5.35vw !important;
    line-height: 7vw !important;
  }
  .item-title {
    margin: 8vw 0vw !important;
  }
  .item-content {
    margin-bottom: 16vw !important;
  }
  .inp-box-spacer {
    margin: 8vw 0 !important;
  }
  .inp-box .inp-label {
    top: 2.7vw !important;
  }
  .inp-box input[type=text]:focus ~ .inp-label,
  .inp-box input[type=email]:focus ~ .inp-label,
  .inp-box input[type=text]:not([value=""]) ~ .inp-label,
  .inp-box input[type=email]:not([value=""]) ~ .inp-label {
    padding-top: 0 !important;
    top: 0 !important;
    font-size: 3.6vw !important;
    outline: none;
  }
  input[type=text],
  input[type=email],
  .inp-box .inp-label {
    font-size: 5.35vw !important;
    padding: 5.35vw 0 !important;
    margin-bottom: 10.5vw !important;
  }
  input[type=radio] + label,
  input[type=checkbox] + label {
    font-size: 3.2vw !important;
    padding: 3.2vw 6.4vw !important;
    border-radius: 10vw !important;
    margin: 0 4vw 4vw 0 !important;
  }
  .chkbx label:nth-child(4n+1),
  .rdbtn label:nth-child(3n+1) {
    margin-right: 0 !important;
  }
  .file-up {
    font-size: 4vw !important;
    padding: 4vw 0;
  }
  button {
    background-color: #6988f8;
    color: #ffffff !important;
    padding: 4vw 16vw !important;
    border-radius: 16vw !important;
    font-size: 4vw !important;
    margin: 8vw 0 !important;
  }
  .ico-img {
    width: 7.2vw !important;
    margin-right: 13vw !important;
  }
  .ico-img-bh {
    width: 10vw !important;
    margin-right: 0 !important;
  }
  .ico-img-at {
    width: 5.5vw !important;
    margin-right: 4vw !important;
  }
  #contact {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #academy-wrapper .wrap-acad {
    display: flex;
    flex-direction: column-reverse;
  }
  #academy-wrapper .video-wrapper {
    margin: 20vw auto 4vw auto !important;
    padding: 0 !important;
    width: 100vw !important;
    height: auto !important;
  }
  #academy-wrapper .video-wrapper video {
    width: 100vw !important;
    height: auto !important;
  }
  #academy-wrapper .video-wrapper .glowround {
    display: none !important;
  }
  #academy-wrapper .heading-wrapper {
    margin: 0 auto !important;
    padding: 0 10vw !important;
    width: 100vw !important;
    height: auto !important;
  }
  #academy-wrapper .heading-wrapper h6 {
    font-size: 4.5vw !important;
  }
  #academy-wrapper .heading-wrapper h2 {
    font-size: 7.2vw !important;
    line-height: 11.2vw !important;
    margin: 5.3vw 0 10.6vw 0 !important;
  }
  #academy-wrapper .heading-wrapper .text-desc {
    font-size: 5.3vw !important;
    line-height: 8.4vw !important;
  }
  #academy-wrapper .heading-wrapper input[type=email] {
    margin-bottom: 0 !important;
  }
  #academy-wrapper .heading-wrapper form {
    margin-bottom: 24.6vw !important;
  }
  #academy-wrapper .heading-wrapper input[type=submit] {
    font-size: 5.3vw !important;
    padding: 5.3vw 0 !important;
  }
  #academy-wrapper .heading-wrapper .glowroundb {
    display: block !important;
  }
  #notif .container {
    width: 70vw !important;
    max-width: 70vw !important;
  }
  #notif #notif-wrapper {
    border-radius: 3vw !important;
    align-items: start !important;
    height: 70vh !important;
  }
  #notif #notif-wrapper .col-7,
  #notif #notif-wrapper .col-5 {
    width: 100% !important;
  }
  #notif #notif-wrapper .title-text {
    font: 6.4vw "Space Grotesk Medium";
    line-height: 9.6vw;
  }
  #notif #notif-wrapper .poster-ava {
    width: 100% !important;
    height: 40vh !important;
  }
  #notif #notif-wrapper .item-content {
    margin-top: 5vh;
    margin-bottom: 6vw !important;
  }
  #notif #notif-wrapper .item-content a {
    margin-right: 0.7vw;
  }
  #notif #notif-wrapper .item-content a .ico-img {
    width: 6vw !important;
  }
  #notif #notif-wrapper .item-content a .ico-img-bh {
    width: 8.3vw !important;
  }
  #notif #notif-wrapper .close-notif img {
    width: 6vw !important;
    margin: 4vw !important;
  }
  #porto-wrapper #title-area .title-box {
    width: 80vw !important;
    padding: 54vw 0 27vw 0 !important;
  }
  #porto-wrapper #title-area .title-box .project-name {
    font-size: 4.5vw !important;
  }
  #porto-wrapper #title-area .title-box .project-desc-text {
    font-size: 8vw !important;
    line-height: 11.2vw !important;
    margin-bottom: 13.3vw !important;
  }
  #porto-wrapper #title-area .title-box .project-cat {
    font-size: 4.5vw !important;
  }
  #porto-wrapper #overview .overview-box {
    width: 80vw !important;
    margin: 26.7vw auto !important;
  }
  #porto-wrapper #overview .overview-box .overview-text {
    width: 100% !important;
  }
  #porto-wrapper #overview .overview-box .overview-text h6 {
    font-size: 4.5vw !important;
  }
  #porto-wrapper #overview .overview-box .overview-desc {
    width: 100% !important;
  }
  #porto-wrapper #overview .overview-box .overview-desc p,
  #porto-wrapper #overview .overview-box .overview-desc a {
    font-size: 5.45vw !important;
    line-height: 8.5vw !important;
  }
  #porto-wrapper .porto-area-85,
  #porto-wrapper .porto-area-100 {
    width: 100vw !important;
    display: block !important;
  }
  #porto-wrapper .porto-area-85 .sub-porto-50,
  #porto-wrapper .porto-area-100 .sub-porto-50 {
    width: 100% !important;
  }
  #porto-wrapper .porto-area-85 .sub-porto-50:first-child,
  #porto-wrapper .porto-area-100 .sub-porto-50:first-child {
    margin-bottom: 6.5vw !important;
  }
  #porto-wrapper .box-67,
  #porto-wrapper .box-85,
  #porto-wrapper .box-27 {
    width: 80% !important;
  }
  #porto-wrapper .box-67,
  #porto-wrapper .box-27 {
    margin: 26.7vw auto 18.7vw auto !important;
  }
  #porto-wrapper .highlight-text {
    width: 100% !important;
  }
  #porto-wrapper .highlight-text h3 {
    font-size: 8.5vw !important;
    line-height: 9.6vw !important;
    margin-bottom: 8vw !important;
  }
  #porto-wrapper .highlight-desc {
    width: 100% !important;
  }
  #porto-wrapper .highlight-desc p,
  #porto-wrapper .highlight-desc h3,
  #porto-wrapper .highlight-desc a {
    font-size: 5.45vw !important;
    line-height: 8.5vw !important;
  }
  #porto-wrapper .highlight-desc .related-link {
    font: 4.5vw "Nunito Sans Semibold" !important;
    color: #2a3749 !important;
    transition: all 0.3s ease-in-out;
  }
  #porto-wrapper .highlight-desc .related-link:hover {
    color: #6988f8 !important;
    border: 2px solid #6988f8 !important;
    transition: all 0.3s ease-in-out;
  }
  #porto-wrapper .box-img {
    display: block !important;
  }
  #porto-wrapper .box-95 {
    width: 100% !important;
    margin: 13.5vw 0 !important;
  }
  #porto-wrapper .box-img-4 {
    width: 100% !important;
    margin: 4vw 0;
  }
  #porto-wrapper .mason-box {
    width: 100% !important;
  }
  #porto-wrapper .mason-box .highlight-desc {
    width: 80% !important;
    margin: 0 10% !important;
  }
  #porto-wrapper .mason-img {
    width: 100% !important;
    margin: 6.5vw 0 !important;
  }
  #porto-wrapper #next-project .btn-next-area {
    width: 100% !important;
    margin: 7vw 0 14vw !important;
  }
  #porto-wrapper #next-project .btn-next-area .next-pro,
  #porto-wrapper #next-project .btn-next-area .pro-name {
    font-size: 8.5vw !important;
    line-height: 9.6vw !important;
    padding: 0 10vw !important;
  }
  #porto-wrapper #next-project .img-next-area {
    width: 100% !important;
  }
  #porto-wrapper #next-project .img-next-area img {
    height: 56vw !important;
  }
  #porto-wrapper .nm {
    margin: 0 auto 0 auto !important;
  }
  #porto-wrapper .mmt-1 {
    margin-top: 26.7vw !important;
  }
  #porto-wrapper .mmt-2 {
    margin-top: 18.7vw !important;
  }
  #porto-wrapper .mmt-3 {
    margin-top: 13.3vw !important;
  }
  #porto-wrapper .mmt-4 {
    margin-top: 8vw !important;
  }
  #porto-wrapper .mmb-1 {
    margin-bottom: 26.7vw !important;
  }
  #porto-wrapper .mmb-2 {
    margin-bottom: 18.7vw !important;
  }
  #porto-wrapper .mmb-3 {
    margin-bottom: 13.3vw !important;
  }
  #porto-wrapper .mmb-4 {
    margin-bottom: 8vw !important;
  }
  #showreel .showreel-wrapper video {
    width: 100vw;
    height: auto;
  }
}
.Typewriter {
  display: inline;
}/*# sourceMappingURL=style.css.map */