:root {
  --brightness: rgb(0 0 0 / 0.2);
  --brightness-dark: rgb(0 0 0 / 0.45);

  --bckg-project-otp: hsl(157, 49%, 15%);
  --bckg-project-chevron: hsl(42, 52%, 42%);
  --bckg-project-boom: hsl(208, 65%, 72%);
  --bckg-project-beko: rgb(0, 129, 201);
  --bckg-project-bookerguru: #297ee5;
  --bckg-project-paymainloop: hsl(219, 44%, 17%);
  --bckg-project-terrenoss: hsl(157, 49%, 15%);
  --bckg-project-eobrasci: rgb(0, 129, 201);
  --bckg-project-entriva: hsl(180, 100%, 45%);
  --bckg-project-cibtvisas: hsl(193, 100%, 34%);

  /** URLS */
  --mobile-img-curalife: url("/static/images/projects/c1/curalife.rs_(iPhone 12 Pro).png");
  --mobile-img-boom: url("/static/images/projects/n3/boomshop.rs_(iPhone X).png");
  --mobile-img-chevron: url("/static/images/projects/n5/chevronnutrition.rs_(iPhone X).png");
  --mobile-img-beko-1: url("/static/images/projects/n4/home.png");
  --mobile-img-beko-2: url("/static/images/projects/n4/sale.png");
  --mobile-img-beko-3: url("/static/images/projects/n4/promotions.png");
  --mobile-img-bookerguru-1: url("/static/images/projects/n6/home.PNG");
  --mobile-img-bookerguru-2: url("/static/images/projects/n6/menu.PNG");
  --mobile-img-bookerguru-3: url("/static/images/projects/n6/search-mobile.PNG");
  --mobile-img-paymainloop: url("/static/images/projects/pm1/pay.mainloop.rs_(iPhone 12 Pro).png");
  --mobile-img-pet: url("/static/images/projects/n1r/mobile1.png");
  --mobile-img-pet1: url("/static/images/projects/n1r/mobile.png");
  --mobile-img-entriva: url("/static/images/projects/n7/entriva_(iPhone X).webp");
  --mobile-img-entriva-2: url("/static/images/projects/n7/entriva_(iPhone X)_2.webp");
  --mobile-img-terrenoss: url("/static/images/projects/n8/terrenoss.com_(iPhone X).png");
  --mobile-img-terrenoss-2: url("/static/images/projects/n8/property.webp");
  --mobile-img-terrenoss-3: url("/static/images/projects/n8/contact.webp");
  --mobile-img-eobrasci: url("/static/images/projects/n9/eobrasci_(iPhone X).webp");
  --mobile-img-eobrasci-2: url("/static/images/projects/n9/eobrasci-create-document.webp");
  --mobile-img-cibtvisas: url("/static/images/projects/n10/home-mobile-2.webp");
  --mobile-img-cibtvisas-2: url("/static/images/projects/n10/requirements.webp");

}

/** ////////////////////////////////// */
/** /////////// Default ///////////// */
/** ///////////////////////////////// */
body.otp .mobile svg path {
  fill: var(--bckg-project-otp);
}
body.chevron .mobile svg path {
  fill: var(--bckg-project-chevron);
}
body.boom .mobile svg path {
  fill: var(--bckg-project-boom);
}
body.bookerguru .mobile svg path {
  fill: var(--bckg-project-bookerguru);
}

body.beko .mobile svg path {
  fill: var(--bckg-project-beko);
}

body.paymainloop .mobile svg path {
  fill: var(--bckg-project-paymainloop);
}

body.terrenoss .mobile svg path {
  fill: var(--bckg-project-terrenoss);
}

body.eobrasci .mobile svg path {
  fill: var(--bckg-project-eobrasci);
}

body.entriva .mobile svg path {
  fill: var(--bckg-project-entriva);
}

body.cibtvisas .mobile svg path {
  fill: var(--bckg-project-cibtvisas);
}

/** ////////////////////////////////// */
/** ///////////// Home ////////////// */
/** ///////////////////////////////// */
.prj.home {
  height: auto;
  background-color: var(--brightness);
}
/* .prj.home.otp {
  background-color: hsl(153, 54%, 11%);
}
.prj.home.chevron {
  background-color: hsl(153, 54%, 11%);
} */

/* .prj .grid,
.prj .node .project-header,
.prj .globe-model .img {
  height: 100%;
} */
.prj .globe-model {
  position: absolute;
  width: 100%;
  height: 100%;
}
.prj .inner .node {
  position: relative;
}
.prj .globe-model .img {
  background-image: url(/static/images/incs/0.5.nodes.pattern.png);
  background-repeat: repeat;
  background-size: 25px;
  background-position: bottom;
  /* background-color: hsl(153, 54%, 11%); */
  background-color: var(--brightness);
  height: 100%;
  width: 100%;
  opacity: 0.3;
  -webkit-animation: animatedBackground 400s linear infinite;
  animation: animatedBackground 400s linear infinite;
}
@-webkit-keyframes animatedBackground {
  from {
    background-position: 0 2000px;
  }
  to {
    background-position: 0 -2000px;
  }
}
@keyframes animatedBackground {
  from {
    background-position: 0 2000px;
  }
  to {
    background-position: 0 -2000px;
  }
}

.prj .text-box .content .title {
  font-size: 7em;
}
.prj .node .project-header .text-box {
  -ms-grid-columns: 40% 30% 30%;
  grid-template-columns: 40% 30% 30%;
  padding: 0 50px;
}
.prj .name,
.prj .specifics,
.prj .remarks {
  margin: 200px 0 100px;
}
.prj .node .project-header .text-box span {
  display: block;
  margin-bottom: 0.35em;
}
.prj .node .project-header .text-box ul {
  position: relative;
}
.prj .node .project-header .text-box ul li {
  display: block;
  margin: 0 0 2em 8em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 19px;
}
.prj .node .project-header .text-box ul li::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0.6;
}
.prj .name .title {
  font-size: clamp(2.5em, 7vw, 4.5em);
  font-weight: 600;
  text-align: left;
  margin-bottom: 40px;
  margin-top: env(safe-area-inset-top);
}

/** ////////////////////////////////// */
/** ///////// Intro Section ///////// */
/** ///////////////////////////////// */
.prj.about.intro-section {
  margin: 5em 0;
}
.prj.about.intro-section .row {
  border-radius: 8pt;
  /* background: #0e2b1f; */
  background-color: var(--brightness);
  padding: 1em 2em;
}
.prj.about.intro-section .row .description {
  padding: 0;
}

/** ////////////////////////////////// */
/** ///////// The Project /////////// */
/** ///////////////////////////////// */
.the-project {
  margin-bottom: 5em;
}
.the-project.intro-section .row {
  background-color: transparent;
}

/** ////////////////////////////////// */
/** /////////// Work App //////////// */
/** ///////////////////////////////// */
.work-app {
  position: relative;
  margin-bottom: 20em;
}
.work-app.empty {
  margin-bottom: 8em;
}
.work-footer > .background,
.work-app > .background {
  /* background-color: #0d2c1e; */
  background-color: var(--brightness);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  height: 100%;
}
.work-app > .background {
  /* background-image: url("/static/images/projects/n2/main.bg.png"); */
  bottom: 100px;
}
.work-app .phone,
.work-app .text {
  margin: 15px;
  position: relative;
}
.work-app .phone {
  width: calc(33.33333% - 30px);
}
.work-app.empty .grid .row .text {
  text-align: center;
  margin: 15px auto;
  width: 100%;
}
.work-app .text {
  width: calc(66.66667% - 30px);
  padding: 10% 5%;
}
.work-app .mobile {
  width: 100%;
  position: relative;
  -webkit-perspective: 1080px;
  perspective: 1080px;
  height: 100%;
  max-width: 300px;
  margin: 20% 0 -33% auto;
}
.work-app .mobile .screen {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-filter: drop-shadow(0 20px 25px rgb(0 0 0 / 0.2));
  filter: drop-shadow(0 20px 25px rgb(0 0 0 / 0.2));
}
.work-app .mobile svg {
  z-index: 10;
  width: 100%;
  height: 100%;
}
.work-app .mobile .panel {
  position: absolute;
  width: 91.7%;
  display: block;
  background: rgba(255, 69, 58, 50%);
  height: 96.8%;
  border-radius: 25px;

  /* background-color: #0d2c1e; */
  background-color: var(--brightness);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
}
.boom .work-app .mobile .panel {
  background-image: var(--mobile-img-boom);
}
.terrenoss .work-app .mobile .panel {
  background-image: var(--mobile-img-terrenoss);
}
.terrenoss .work-app .mobile .panel-2 {
  background-image: var(--mobile-img-terrenoss-2);
}
.terrenoss .work-app .mobile .panel-3 {
  background-image: var(--mobile-img-terrenoss-3);
}
.eobrasci .work-app .mobile .panel {
  background-image: var(--mobile-img-eobrasci);
}
.eobrasci .work-app .mobile .panel-2 {
  background-image: var(--mobile-img-eobrasci-2);
}
.entriva .work-app .mobile .panel {
  background-image: var(--mobile-img-entriva);
}
.entriva .work-app .mobile .panel-2 {
  background-image: var(--mobile-img-entriva-2);
}
.cibtvisas .work-app .mobile .panel {
  background-image: var(--mobile-img-cibtvisas);
}
.cibtvisas .work-app .mobile .panel-2 {
  background-image: var(--mobile-img-cibtvisas-2);
}
.paymainloop .work-app .mobile .panel {
  background-image: var(--mobile-img-paymainloop);
}
.chevron .work-app .mobile .panel {
  background-image: var(--mobile-img-chevron);
}
.beko .work-app .mobile .panel-1 {
  background-image: var(--mobile-img-beko-1);
}
.beko .work-app .mobile .panel-2 {
  background-image: var(--mobile-img-beko-2);
}
.beko .work-app .mobile .panel-3 {
  background-image: var(--mobile-img-beko-3);
}
.bookerguru .work-app .mobile .panel-1 {
  background-image: var(--mobile-img-bookerguru-1);
}

.bookerguru .work-app .mobile .panel-2 {
  background-image: var(--mobile-img-bookerguru-2);
}

.bookerguru .work-app .mobile .panel-3 {
  background-image: var(--mobile-img-bookerguru-3);
}
.curalife .work-app .mobile .panel {
  background-image: var(--mobile-img-curalife);
}
.pet .work-app .mobile .panel-r {
  background-image: var(--mobile-img-pet);
}
.pet .work-app .mobile .panel-r1 {
  background-image: var(--mobile-img-pet1);
}

.work-app .text .title {
  font-size: 40px;
}
.work-app .text hr {
  margin-left: 0;
}
.work-app .text .description {
  font-size: 19px;
  line-height: 1.4em;
  letter-spacing: 1px;
}

/** ////////////////////////////////// */
/** ///////// Banner Image ////////// */
/** ///////////////////////////////// */
.main.banner-prj-img {
  /* 6em */
  margin-bottom: 2.5em;
}
.banner-prj-img .bannerImg {
  width: 100%;
  height: 380px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* background-color: #0d2c1e; */
  background-color: transparent;
  opacity: 0;

  border-radius: 8pt;
}
.banner-prj-img .bannerImg.loaded {
  -webkit-animation: fade-in 1.7s linear;
  animation: fade-in 1.7s linear;
  opacity: 1;
}
.banner-prj-img .container {
  width: 100%;
  height: 100%;
  margin-bottom: 3em;
}
.banner-prj-img .grid .row > div:first-of-type:not(.container) {
  margin-bottom: 3em;
}
/* Custom Image Height */
.main #bannerImg0 {
  height: 710px;
}

.entriva .main #bannerImg0 {
  height: 950px;
}

.cibtvisas .main #bannerImg0 {
  height: 850px;
}

.boom #bannerImg1,
.boom #bannerImg2,
.boom #bannerImg3,
.boom #bannerImg4,
.chevron #bannerImg1,
.beko #bannerImg1,
.bookerguru #bannerImg1,
.bookerguru #bannerImg2,
.curalife #bannerImg0,
.curalife #bannerImg1,
.curalife #bannerImg2,
.curalife #bannerImg3,
.curalife #bannerImg4,
.paymainloop #bannerImg1,
.paymainloop #bannerImg2,
.chevron #bannerImg1 {
  height: 545px;
  
}
.terrenoss #bannerImg1 {
  height: 625px;
}
.eobrasci #bannerImg1{
  height: 825px;
}
.entriva #bannerImg1 {
  height: 1035px;
}
.pet #bannerImg1,
.pet #bannerImg2,
.pet #bannerImg3,
.pet #bannerImg4 {
  height:545px;
  object-fit: fill;
}
.chevron #bannerImg4 {
  height: 465px;
  background-position: bottom;
}
.otp-iz #bannerImg1,
.otp-iz #bannerImg2,
.otp-li #bannerImg1,
.otp-li #bannerImg2 {
  height: clamp(200px, 61.5vw, 895px);
  background-size: contain;
}

/** ////////////////////////////////// */
/** //////// Project Footer ///////// */
/** ///////////////////////////////// */
.work-footer {
  position: relative;

  -webkit-box-shadow: 0px 10px 16px 0px #00000014;

  box-shadow: 0px 10px 16px 0px #00000014;
  z-index: 10;
}
.work-footer > .background {
  /* background-image: url("/static/images/projects/n3/screen1.jpg"); */
}
.work-footer .row {
  height: 440px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}
.work-footer .menu {
  width: 100%;
}
.work-footer .menu > a {
  z-index: 10;
  font-size: 5em;
  font-family: var(--font-bold);
  text-shadow: 0 0 20px rgb(0 0 0 / 0.3);
}
.work-footer .links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}
.work-footer .links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-shadow: 0 0 20px rgb(0 0 0 / 0.3);
}
.work-footer .links a:nth-child(1) {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.work-footer .links a:nth-child(2) {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.work-footer .links a .navigator {
  font-size: 19px;
  font-weight: 400;
  text-transform: uppercase;
}
.work-footer .links a .title {
  font-size: 3.5em;
  font-weight: 600;
  margin: 15px 0 5px;
  color: var(--text-white);
}
.work-footer .links a .description {
  font-size: 19px;
  font-weight: 400;
  color: var(--text-description-ulight);
}
/** ////////////////////////////////// */
/** //////////// Footer ///////////// */
/** ///////////////////////////////// */
.app-footer {
  background-color: transparent;
  background-color: var(--brightness-dark);
}