@import "base/colors.scss";
@import "base/quary.scss";
@import "base/mixin.scss";
@import "content/hp.scss";
@import "content/jobs.scss";

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $default;
  a, a:link, a:visited, a:active {
      text-decoration: none;
  }
}

body.scroll{
  .scroll-to-top{
    opacity: 1;
  }
}

html[dir=rtl]{
  direction: rtl!important;
}

.link-effect{
  transition: all 0.3s;
  &:hover{
    background-color: #fff;
    .corner{
      width: calc(50% - 1px);
      height: calc(50% - 1px);
    }
  }
  &.brown-link-effect{
    color: $default;
    .top, .bottom, .left, .right{
      background-color: $default;
    }
    .link-text{
      color: $default;
    }
    &:hover .link-text{
      color: #fff;
    }
  }
}

// header

.navigation-links{
  .two-level-wrapper.active{
    .nav-bar-span{
      border-bottom: 2px solid $orange;
    }
  }
  > a.active{
    border-bottom: 2px solid $orange;
    @include res(s-m-l){
      border-bottom: none;
      font-weight: bold;
    }
  }
  .two-level-wrapper:hover{
    .links-wrapper{
      display: block;
      @include res(s-m-l){
        display: none;
      }
    }
    img{
      transform: rotate(180deg);
      @include res(s-m-l){
        transform: rotate(180deg);
      }
    }
  }
  @include res(s-m-l){
    .two-level-wrapper.open-menu{
      .links-wrapper{
        display: block;
      }
      img{
        transform: rotate(180deg);
      }
    }
  }
}

.footer{
  a, a:link, a:visited, a:active{
    color: #fff;
  }
}

form{
  .input-full{
    label{
      font-size: 0.8em;
      top: -18px;
      right: 0;
    }
  }
  .w-file-upload-uploading svg{
    margin: 0px;
  }
  .checkbox-wrapper{
    .checkbox-label{
      &:before{
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 1px solid $orange;
        border-radius: 2px;
        top: 1px;
        position: absolute;
        right: 0;
      }
    }
    input:checked + .checkbox-label:after{
      background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a56337ea76323b509a846b9_check.png) no-repeat center center;
      content:"";
      position: absolute;
      right: -1px;
      top: 1px;
      width: 15px;
      height: 15px;
      background-size: 100%;
    }
    &.dark-bg{
      .checkbox-label{
        &:before{
          border: 1px solid #fff;
        }
      }
      input:checked + .checkbox-label:after{
        background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a4393319dba23054848e8f6_check-white.png) no-repeat center center;
        background-size: 100%;
      }
    }
    &.big-font{
      .checkbox-label{
        &:before{
          width: 16px;
          height: 16px;
          top: 4px;      
        }
      }
      input:checked + .checkbox-label:after{
        right: 0px;
        top: 4px;
      }
    }
  }
}

.load-1000 .hero:not(.no-effect){
  .hero-image, .hero-gradient{
    margin: 0 80px;
    width: calc(100% - 160px);
    @media (max-width: 1740px){
      margin: 0 50px;
      width: calc(100% - 100px);
    }
    @include res(s-m){
      margin: 0 30px;
      width: calc(100% - 60px);
    }
  }
}

.on-hero-image{
    @media (max-width: 1740px){
      margin: 0 50px;
      width: calc(100% - 100px);
    }
    @include res(s-m){
      margin: 0 30px;
      width: calc(100% - 60px);
    }
}

.comma-seperate{
  > div{
    position: relative;
    &:after{
      content: ",";
      margin-left: 5px;
    }
    &:last-child:after{
      display: none;
    }
  }
}

// owl items

.owl-wrapper{
  &.items-3, &.items-4, &.items-2{
    .owl-nav{
      width: 132px;
      top: -90px;
      left: 0px;
      position: absolute;
      display: flex;
      > div{
        border: 1px solid;
        position: relative;
        border-radius: 50%;
        width: 55px;
        height: 55px;
        &.owl-next{
          background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6725f390c2d49389d4c1d0_gallery-left.svg) no-repeat center $default;
          background-size: 20px;
          margin-right: 20px;                    
        }
        &.owl-prev {
          background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6725f36dd9550f1faa7dd9_gallery-right.svg) no-repeat center $default;
          background-size: 20px;
        }
        &.disabled{
          pointer-events: none;
          &.owl-next{
            background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6874b1aadcc2ec708a4a68_gallery-left-%20brown.svg) no-repeat center #fff;
            background-size: 20px;
          }
          &.owl-prev {
            background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6874b13034b3427cf23d16_gallery-right-brown.svg) no-repeat center #fff;
            background-size: 20px;
          }
        }
      }
      .small-nav &{
        width: 80px;
        top: -50px;
        > div{
          width: 34px;
          height: 34px;
          &.owl-next{
            background-size: 13px;
            margin-right: 10px;                    
          }
          &.owl-prev {
            background-size: 13px;
          }
          &.disabled{
            &.owl-next{
              background-size: 13px;
            }
            &.owl-prev {
              background-size: 13px;
            }
          }
        }
      }
      .dark-background &{
        .owl-next{
          background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6874b1aadcc2ec708a4a68_gallery-left-%20brown.svg) no-repeat center #fff;
          background-size: 20px;
          margin-right: 20px;  
          border: 1px solid #fff;                  
        }
        .owl-prev {
          background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6874b13034b3427cf23d16_gallery-right-brown.svg) no-repeat center #fff;
          background-size: 20px;
          border: 1px solid #fff;
        }
        .disabled{
          pointer-events: none;
          &.owl-next{
            background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6725f390c2d49389d4c1d0_gallery-left.svg) no-repeat center transparent;
            background-size: 20px;
          }
          &.owl-prev {
            background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a6725f36dd9550f1faa7dd9_gallery-right.svg) no-repeat center transparent;
            background-size: 20px;
          }
        }
      }
    }
    &:not(.owl-loaded){
      display: flex;
      > div{
        display: none;
      }
      &.items-2{
        > div:nth-child(1), > div:nth-child(2){
          display: block;
          width: calc(50% - 30px);
          height: initial;
          margin-left: 30px;
        }
      }
      &.items-3{
        > div:nth-child(1), > div:nth-child(2), > div:nth-child(3){
          display: block;
          width: calc(33% - 30px);
          height: initial;
          margin-left: 30px;
        }
      }
      &.items-4{
        > div:nth-child(1), > div:nth-child(2), > div:nth-child(3), > div:nth-child(4){
          display: block;
          width: calc(25% - 30px);
          height: initial;
          margin-left: 30px;
        }
      }
    }
  }
}

.owl-overflow-visible.owl-carousel{
  .owl-stage-outer{
    overflow: visible;
  }
}

.runing-messages-wrapper{
  ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    animation: ticker-scroll-rtl 50s linear infinite;
    @keyframes ticker-scroll-rtl {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100vw);
      }
    }
    li{
      white-space: nowrap;
    }
    li:after{
      content: "";
      width: 6px;
      height: 6px;
      background-color: #fff;
      margin: 0 33px 3px;
      display: inline-block;
    }
    li:last-child:after{
      display: none;
    }
  }
}

// rich text

.w-richtext{
  table{
    width: 100%;
    margin: 50px 0;
    thead{
      background-color: $default;
      color: #fff;
      font-size: 1.1em;
      th{
        text-align: initial;
        padding: 10px 20px;
      }
    }
    tbody{
      background: #F4EAE6;
      td{
        padding: 40px 20px;
        border-bottom: 1px solid #D9B8AB;
      }
      tr:last-child td{
        border-bottom: none;
      }
    }
  }
}

//lists

.vi-grid3-list{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  li{
    background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a5756da452249e6294bb46b_vi.png) no-repeat right top 4px;
    padding: 0 36px 45px 0;
    border-bottom: 2px solid #FFD2C2;
    margin-top: 36px;
    width: 25%;
    margin-left: 8%;;
  }
}

.unit-list{
    list-style: none;
    padding: 0px;
    li{
        background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a5735f66f87cf0231db52eb_mdi_location.svg) no-repeat right top;
        padding-right: 28px;
        margin: 14px 0;
    }
}

    #gallery{
        .w-tab-menu{
            a:first-child{
                border-top-right-radius: 60px;
                border-bottom-right-radius: 60px;
                border-right: 1px solid #fff;
            }
            a:last-child{
                border-top-left-radius: 60px;
                border-bottom-left-radius: 60px;
                border-left: 1px solid #fff;
            }
            a.w--current{
                div{
                    background-color: #fff;
                    color: $default;
                }
            }
            > a{
              @media (min-width: 992px) and (max-width: 1180px){
                width: 117px;
                text-align: center;
                font-size: 0.9em;
              }
            }

        }
        .outdoor-main-slider .splide__list {
            position: relative;
        }
        .outdoor-main-slider .splide__slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1;
            transition: opacity 400ms ease;
        }
        .outdoor-main-slider .splide__slide.is-active {
            opacity: 1;
            position: relative;
            z-index: 2;
            transform: initial!important;
        }
        .splide__track--nav > .splide__list > .splide__slide{
            border-radius: 11px;
        }
        .splide__track--nav > .splide__list > .splide__slide.is-active{
            border:5px solid #fff;
        }
        .splide__arrows--ttb{
            .splide__arrow--prev, .splide__arrow--next{
                opacity: 1;
                left: auto;
                right: 100px;
                svg{
                    display: none;
                }
            }
            .splide__arrow--prev{
                background: url("https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a4d4f69ddf3fe861d817ab6_Left_Arrow_4_.svg") no-repeat center center;
                margin: 0 auto;
                position: relative;
                right: 0;
                left: 0;
                transform: initial;
                top: 0;
            }
            .splide__arrow--next{
                background: url("https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a4d4f746f01845f99d8758b_Left_Arrow_4_%20(1).svg") no-repeat center center;
                bottom: -40px;
                right: 70px;
            }
        }
        .gradient-video.is-playing img{
            display: none;
        }
      }

.no-padding-bullets{
  ul{
    padding: 0 16px 0 0;
  }
}

.owl-dots{
  .owl-dot{
    border: 2px solid #CE3E00;
    background: #FFF;
    width: 17px;
    height: 17px;
    &.active{
      background: #CE3E00;
      width: 20px;
      height: 20px;
      top: 2px;
      position: relative;
    }
  }
}

.form-with-opacity{
  &.viewport-view{
    .form-bg{
      margin: 0 80px;
      width: calc(100% - 160px);
    }
    .width-wrapper{
      opacity: 1;
    }
  }
  .form-wraper.width-wrapper{
    max-width: calc(100% - 160px);
  }
}

.contact-circle{
  &.open{
    .circle-button{
      display: none;
    }
    .contact-circle-form{
      display: block;
    }
  }
}

.project-item-wrapper:hover .status-image img{
  transform: scale(1.2);
}

@media (min-width: 1330px) and (max-width: 1650px) {
  header .navigation-links{
    font-size: 0.8em;
    grid-column-gap: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1329px) {
  header{
    font-size: 0.7em;
    .navigation-links {
      grid-column-gap: 17px;
    }
    .navbar{
      padding: 10px;
    }
    .nav-icons-actions{
      grid-column-gap: 10px;
      .image-90 {
        width: 19px;
        height: 19px;
      }
      .nav-user{
        width: 13px;
      }
      .nav-icons-wrapper {
        grid-column-gap: 10px;
      }
      .nav-link-contact{
        padding: 8px 10px;
        white-space: nowrap;
      }
    }
    img.loog{
      width: 90px;
      height: auto;
    }
  }
}

@include res(s-m-l){
  header{
    .w-nav-overlay{
        height: 100vh!important;
        top: 70px !important;
    }
    .navigation-links{
      height: calc(100vh - 70px) !important;
      &[data-nav-menu-open=""]{
        display: flex!important;
        flex-direction: column;
        align-items: flex-start;
      }
    }
    .menu-button.w--open{
      .w-icon-nav-menu{
        display: none;
      }
      .close-icon{
        display: block;
      }
    }
  }
}

.lp-form.visible{
  bottom: 0;
}

.w-dyn-empty {
  background-color: transparent;
  padding: 0px;
}

.pg-be-narrow.viewport-view{
  .bg-be-narrow{
    margin: 0 80px;
    width: calc(100% - 160px);
  }
}

.grid-of-4{
  > div{
    &:nth-child(4n){
      margin-left: 0px;
    }
  }
}

.grid-of-3{
  > div{
    &:nth-child(3n){
      margin-left: 0px;
    }
  }
}