/* MOBILE */
@media (max-width: 768px) {
  /** ////////////////////////////////// */
  /** ////////// GLOBAL CSS /////////// */
  /** ///////////////////////////////// */
  .col-s-2-of-2 {
    width: calc(100% - 30px);
  }
  .grid {
    padding: 0;
  }

  /** ////////////////////////////////// */
  /** //////// SW NOTIFICATION //////// */
  /** ///////////////////////////////// */
  #service-worker-update {
    text-align: left;
    padding: 1em 2em 2em;
    bottom: 0;
    top: unset;
    z-index: 9999999;
  }

  #service-worker-update .wrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 0;
    gap: 0;
    padding: 0;
  }

  #service-worker-update .wrapper .btn {
    padding: 10px 15px;
    margin: 15px 0 0;
    width: 100%;
  }

  /** ////////////////////////////////// */
  /** //////////// OFFLINE //////////// */
  /** ///////////////////////////////// */
  .mainloop-offline .properties {
    padding: 50px 25px;
    border-radius: 0;
  }

  /** ////////////////////////////////// */
  /** ////////// HEADER & NAV ///////// */
  /** ///////////////////////////////// */
  .app-header {
    position: absolute;
  }

  .app-desktop-menu,
  .app-header .col.menu {
    display: none;
  }

  .app-header .col {
    display: -ms-grid;
    display: grid;
    margin: 15px auto 0;
  }

  .lottie-container {
    font-size: 30px;
  }
  /** ////////////////////////////////// */
  /** ///////// GLOBE SECTION ///////// */
  /** ///////////////////////////////// */
  .globe-model {
    height: clamp(630px, var(--vh-max), var(--vh-max));
  }
  canvas#globekit-canvas {
    height: clamp(var(--globe-h), var(--vh-max), var(--vh-max));
    width: 100%;
  }

  /** ////////////////////////////////// */
  /** ///////////// HOME ////////////// */
  /** ///////////////////////////////// */
  .text-box .content {
    padding: 0 2em;
    text-align: center;
  }
  .home.globe .button.cta {
    margin: 30px auto 0;
  }

  .text-box .content .title,
  .text-box .content .description,
  .home.intro-section .description {
    width: 100%;
  }

  .home.globe .text-box .content .description > span {
    display: none;
  }
  /** ////////////////////////////////// */
  /** ///////// Intro Section ///////// */
  /** ///////////////////////////////// */
  .intro-section .title {
    font-size: 2em;
    line-height: 1.2;
  }

  .intro-section .description {
    font-size: 17px;
    padding: 0;
  }

  /** ////////////////////////////////// */
  /** ////// Highlighted Project ////// */
  /** ///////////////////////////////// */
  .highlighted-project,
  .who-we-are {
    margin: 120px 0 70px;
  }

  .highlighted-project {
    margin: 370px 0 0;
  }

  .highlighted-project .container .main {
    height: unset;
    padding: 0 2em;
  }

  .highlighted-project .container .offset-col .background-image {
    top: unset;
    left: unset;
    margin-left: unset;
    border-radius: unset;
    height: 100%;
    background: unset;
    background-color: #741013;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
  }

  .highlighted-project .container .main .col:nth-child(1) {
    margin: 10em 0 0;
  }

  .highlighted-project .container .main .col:nth-child(2) {
    width: 100%;
    margin: 0;
  }

  .highlighted-project .container .main .col:nth-child(2) .row {
    width: auto;
    margin: 2em 0 4em;
    height: unset;
  }

  .highlighted-project .container .main .col:nth-child(2) .text-box {
    width: unset;
    margin: unset;
  }

  .highlighted-project .container .main .col:first-child .title {
    font-size: 3em;
  }

  .highlighted-project .container .main {
    height: unset;
  }

  .highlighted-project .container .main .col:nth-child(2) .mobile {
    top: -21em;
  }

  .highlighted-project .container .col:nth-child(1) .button {
    background-color: #a51e22;
  }

  /** ////////////////////////////////// */
  /** ///////// Home Clients ////////// */
  /** ///////////////////////////////// */
  .clients-slider {
    overflow: hidden;
  }

  .swiper-container {
    -webkit-transform: scale(1.65) !important;
    -ms-transform: scale(1.65) !important;
    transform: scale(1.65) !important;
  }

  .swiper-slide {
    background-size: contain;
  }

  /** ////////////////////////////////// */
  /** //////////// Footer ///////////// */
  /** ///////////////////////////////// */
  .app-footer {
    padding-bottom: 120px;
  }

  .app-footer .col,
  .app-footer .text-right {
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .app-footer .right {
    margin: 0 auto;
  }
  .app-footer .f-logo-ov {
    bottom: 0;
    height: 100%;
    width: 100%;
  }

  .app-footer .f-logo-ov::before {
    content: "";
    display: block;
    position: absolute;
    height: 25%;
    width: 100%;
    z-index: 999;
    pointer-events: none;
    background: -o-linear-gradient(top, #162239 0, rgba(40, 35, 51, 0));
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0, #162239),
      to(rgba(40, 35, 51, 0))
    );
    background: linear-gradient(180deg, #162239 0, rgba(40, 35, 51, 0));
    top: 0;
  }

  .app-footer .footer-menu {
    margin: 0;
  }

  .app-footer .social-menu {
    margin-right: 0;
  }

  .app-footer .social-menu li {
    display: block;
    margin: 7px 0;
  }

  .app-footer .credit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    margin: 25px 0 12.5px 0;
  }

  /** ////////////////////////////////// */
  /** ////////// Mobile Tabs ////////// */
  /** ///////////////////////////////// */
  .mobile-tabs {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 90px;
    width: 100%;
    bottom: 0;
    z-index: 999999;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-tabs .node {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    background-color: #17181d70;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(20px);
    /* border-top: 2px solid #1c284263; */
    padding: 10px 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    bottom: 0;
  }
  .mobile-tabs .node a {
    position: relative;
    text-decoration: none;
    color: #fdfdfd;
    font-family: "Volte Text", Geneva, Tahoma, sans-serif;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    display: inline-block;
    width: 100px;
    padding: 0;
    z-index: 2;
    height: 38px;
    margin: auto 0 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: auto 0 0 0;
  }

  .mobile-tabs a .cls-1 {
    fill: #1a2640d6;
  }

  .mobile-tabs a b {
    position: relative;
    -webkit-transition: 0.3s ease top;
    -o-transition: 0.3s ease top;
    transition: 0.3s ease top;
    font-family: "Volte Text";
    text-align: center;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
    margin: 5px 0 0 0;
    font-size: 0.6em;
  }

  .mobile-tabs a i {
    position: relative;
    left: 25%;
    -webkit-transition: 0.3s ease left;
    -o-transition: 0.3s ease left;
    transition: 0.3s ease left;
  }

  .mobile-tabs a:hover b {
    top: 0;
  }

  .mobile-tabs a:hover i {
    left: 0;
  }

  .mobile-tabs a svg.active {
    -webkit-filter: drop-shadow(0 0 15px #4fb3ff);
    filter: drop-shadow(0 0 15px #4fb3ff);
  }

  /** ////////////////////////////////// */
  /** ///////////// Work ////////////// */
  /** ///////////////////////////////// */
  .work .grid .work-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .work .text-box .content .title {
    font-size: 4em;
  }
  .work-footer .row {
    padding: 3em;
    height: 100%;
  }

  .work-footer .links {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: normal;
    -ms-flex-align: normal;
    align-items: normal;
  }
  .work-footer .menu {
    display: none;
  }

  /** ////////////////////////////////// */
  /** /////////// Constact //////////// */
  /** ///////////////////////////////// */
  .contact .text-box .content {
    padding: 0 1em;
  }
  .contact .text-box .content .box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 2em;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .contact canvas#globekit-canvas {
    right: unset;
  }
  .contact .text-box .content .box .image {
    display: none;
  }
  .contact .text-box .content .mail {
    text-align: center;
  }
  .contact .app-footer {
    position: relative;
    background-color: rgb(21 32 54);
    backdrop-filter: unset;
  }
  .contact .text-box .content {
    margin: auto auto;
    z-index: 2;
  }
  /** ////////////////////////////////// */
  /** ///////////// Who /////////////// */
  /** ///////////////////////////////// */
  .who .text-box .content .title {
    font-size: 2.9em;
  }
  .who.about.intro-section .row {
    border-radius: unset;
  }
  .who.s-clients .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    border: none;
  }
  .who.s-clients .clients-grid .client {
    padding: 1em;
  }
  .who.s-clients .big-title {
    width: 100%;
  }
  .who.s-clients .team-grid {
    margin-top: 30px;
    grid-template-columns: repeat(1, 1fr);
  }
  .who.s-clients .team-grid .item .image {
    height: 300px;
  }
  .who.mobile-tabs::before {
    background: -o-linear-gradient(bottom, #17181dd4 0, rgba(40, 35, 51, 0));
    background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, #17181dd4),
      to(rgba(40, 35, 51, 0))
    );
    background: linear-gradient(360deg, #17181dd4 0, rgba(40, 35, 51, 0));
  }
  .who.intro-section .description,
  .who.intro-section .small-title,
  .who.s-clients .big-title {
    text-align: center;
  }

  /** ////////////////////////////////// */
  /** ///////// Project Page ////////// */
  /** ///////////////////////////////// */
  .prj.home,
  .prj .node .project-header .text-box {
    height: unset;
  }

  .prj .node .project-header .text-box {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin: 115px 0 0;
  }
  .prj .name,
  .prj .specifics,
  .prj .remarks {
    margin: 0;
  }
  .prj .node .project-header .text-box ul li {
    font-size: 17px;
  }
  .prj .globe-model {
    /* height: clamp(
      calc(620px + var(--safe-area-inset-top)),
      calc(var(--globe-h) + 40px),
      var(--vh-max)
    ); */
    height: 100%;
  }
  .prj.about.intro-section .row,
  .banner-prj-img.main .row > div {
    border-radius: 0;
  }
  .main.banner-prj-img {
    margin-bottom: 6em;
  }
  .the-project {
    margin-bottom: 10em;
  }
  .work-app,
  .work-app.empty {
    margin-bottom: 3em;
  }
  .work-app .phone.with,
  .work-app .text.with {
    width: 100%;
    padding-top: 0;
    margin-top: 0;
  }
  .work-app .text .title {
    font-size: 35px;
  }
  .work-app .text .description {
    font-size: 17px;
  }
  .work-app .mobile {
    margin: -80px auto 0;
    width: 70%;
  }
  .work-app .mobile .screen {
    -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-footer .links a:nth-child(1) {
    text-align: left;
  }
  .work-footer .links a:nth-child(2) {
    text-align: right;
  }
  .paymainloop #bannerImg1,
  .paymainloop #bannerImg2,
  .boom #bannerImg1,
  .boom #bannerImg2,
  .boom #bannerImg3,
  .boom #bannerImg4,
  .chevron #bannerImg1,
  .chevron #bannerImg2,
  .chevron #bannerImg3,
  .chevron #bannerImg4,
  .beko #bannerImg1,
  .bookerguru #bannerImg1,
  .bookerguru #bannerImg2,
  .curalife #bannerImg0,
  .curalife #bannerImg1,
  .curalife #bannerImg2,
  .curalife #bannerImg3,
  .curalife #bannerImg4,
  .pet #bannerImg1,
  .pet #bannerImg2,
  .pet #bannerImg3,
  .pet #bannerImg4,
  .terrenoss #bannerImg1,
  .entriva #bannerImg1 {
    height: 200px;
    border-radius: 8pt;
  }
  .main #bannerImg0 {
    height: 380px;
  }
  .entriva #bannerImg0,
  .cibtvisas #bannerImg0,
  .eobrasci #bannerImg1 {
    display: none;
  }
  .banner-prj-img:not(.main) .row {
    padding: 0 2em;
  }
  .terrenoss #bannerImg1 {
    margin-bottom: 110px;
  }
}

/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
  .mobile-tabs::before {
    bottom: 90px !important;
  }

  .globe-model {
    height: calc(100vh - 90px);
    @supports (height: clamp(620px, 80vh, 80vh)) {
      height: clamp(620px, 80vh, 80vh);
    }
  }
}

/* Desktop Mid - Under 1024 */
@media (max-width: 1024px) {
}

/* DESKTOP MID - ABOVE 1024 */
@media (min-width: 1024px) {
}

/** ////////////////////////////////// */
/** //////////// iOS PWA //////////// */
/** ///////////////////////////////// */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    --safe-area-inset-top: env(safe-area-inset-top);
    height: calc(100% + var(--safe-area-inset-top));
  }
}

/** ////////////////////////////////// */
/** /////////// <a> HOVER /////////// */
/** ///////////////////////////////// */

@media only screen and (hover: hover) and (pointer: fine) {
  .menu a:hover:after {
    left: 10px;
    width: calc(100% - 20px);
    opacity: 1;
    -webkit-transition: all 0.2s cubic-bezier(0.14, 0.8, 0.4, 1);
    -o-transition: all 0.2s cubic-bezier(0.14, 0.8, 0.4, 1);
    transition: all 0.2s cubic-bezier(0.14, 0.8, 0.4, 1);
    -webkit-box-shadow: 0 0 15px -0.5px #4fb3ff;
    box-shadow: 0 0 15px -0.5px #4fb3ff;
    background: #4fb3ff;
  }
}