@import "custom-variables/variables";
@import "../../bootstrap-4.0.0/scss/functions";
@import "../../bootstrap-4.0.0/scss/variables";
@import "../../bootstrap-4.0.0/scss/mixins";
@import "custom/main-banner";
.breadcrumbpanel{
    display: none!important;
}
.first-header {
  transition: all ease 0.5s;
  @include media-breakpoint-up(lg) {
    padding: rem(13) 0;
    background: transparent;
  }
  .fixed-header & {
    background: #fff;
  }
}
.main-slider-content {
  overflow: hidden;
  @include media-breakpoint-up(xl) {
    margin-top: -94px;
  }
  @include media-breakpoint-down(md) {
    margin-top: -50px;
  }
  .sliders-wrap-inner{
    &:not(.slick-initialized){
      .banner-block{
        &:not(:first-child){
          display: none;
        }
      }
    }
  }
}
.tell-us-about-blk {
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.12);
  .tell-us-about-box {
    @media (max-width: 928px) and (min-width: 576px){
      flex-direction: column!important;
      .figcaption{
        flex: 0 0 auto;
        width: auto;
        max-width: none;
      }
    }
    @include media-breakpoint-down(xs) {
      .figure {
        img {
          max-width: 80px;
        }
      }
      &:after {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #f3f3f3;
        position: relative;
        left: 0;
        bottom: -1rem;
      }
      &:last-child {
        &:after {
          display: none;
        }
      }
      h6{
        font-size: 18px;
      }
    }
  }
}

.discover-opportunities-blk {
  background-color: #fffbec;
  padding: rem(196) 0;
  background-image: url("../images/dotted-map.png");
  background-repeat: no-repeat;
  html[dir="ltr"] & {
    background-position: right center;
  } 
  html[dir="rtl"] & {
    background-position: left center;
  }
  background-size: contain;
  @include media-breakpoint-down(md) {
    padding: rem(86) 0;
  }
  @include media-breakpoint-down(sm) {
    padding: rem(45) 0;
  }
  @include media-breakpoint-down(xs) {
    padding: rem(30) 0;
  }
  .discover-opportunities-list {
    li {
      h5,
      p {
        color: #373a36;
      }
    }
    @media (min-width: 1176px) {
      margin-left: -25px;
      margin-right: -25px;
      li {
        padding-left: 25px;
        padding-right: 25px;
      }
    }
    @include media-breakpoint-down(xs) {
      li {
        p {
          font-size: 14px;
        }
      }
    }
  }
  .discover-animation-box {
    width: 480px;
    height: 450px;
    html[dir="ltr"] & {
        right: -65px;
    }
      html[dir="rtl"] & {
        left: -65px;
    }
    top: -65px;
    @include media-breakpoint-down(md) {
       html[dir="ltr"] & {
           right: -125px;
       } 
       html[dir="rtl"] & {
           left: -125px;
       }
      top: -125px;
    }
      .shape-sm {
          width: 33px;
          height: 33px;
          &:before,
          &:after {
              content: '';
              position: absolute;
              width: 18px;
              height: 18px;
          }
          &:before {
            border-top: 7px solid #c8c8c8;
            border-right: 7px solid #c8c8c8;
              top: 0;
              right: 0;
          }
          &:after {
            border-bottom: 7px solid #c8c8c8;
            border-left: 7px solid #c8c8c8;
              bottom: 0;
              left: 0;
          }
      }
      .shape-md {
          width: 46px;
          height: 45px;
          &:before,
          &:after {
              content: '';
              position: absolute;
              width: 24px;
              height: 24px;
          }
          &:before {
            border-top: 8px solid #c8c8c8;
            border-right: 8px solid #c8c8c8;
              top: 0;
              right: 0;
          }
          &:after {
            border-bottom: 8px solid #c8c8c8;
            border-left: 8px solid #c8c8c8;
              bottom: 0;
              left: 0;
          }
      }
      .shape-lg {
          width: 103px;
          height: 104px;
          &:before,
          &:after {
              content: '';
              position: absolute;
              width: 62px;
              height: 62px;
          }
          &:before {
            border-top: 20px solid $primary;
            border-right: 20px solid $primary;
              top: 0;
              right: 0;
          }
          &:after {
            border-bottom: 20px solid $primary;
            border-left: 20px solid $primary;
              bottom: 0;
              left: 0;
          }
      }
    .discoer-animate-icon-1 {
      html[dir="ltr"] & {
          left: 378px;
      } 
      html[dir="rtl"] & {
          right: 378px;
      }
      top: 0;
    }
    .discoer-animate-icon-2 {
      html[dir="ltr"] & {
          left: 0;
      }
      html[dir="rtl"] & {
          right: 0;
      }
      top: 131px;
    }
    .discoer-animate-icon-3 {
      html[dir="ltr"] & {
          right: 0;
      }
      html[dir="rtl"] & {
          left: 0;
      }
      top: 146px;
    }
    .discoer-animate-icon-4 {
      html[dir="ltr"] & {
          left: 147px;
      } 
      html[dir="rtl"] & {
          right: 147px;
      }
      top: 201px;
    }
    .discoer-animate-icon-5 {
      html[dir="ltr"] & {
          left: 280px;
      }
      html[dir="rtl"] & {
          right: 280px;
      }
      top: 240px;
    }
    .discoer-animate-icon-6 {
      html[dir="ltr"] & {
          left: 89px;
      }
      html[dir="rtl"] & {
          right: 89px;
      }
      bottom: 0;
    }
  }
}

.sounding-board-blk {
  .sounding-board-img {
    @media (min-width: 1160px) {
      min-width: 877px;
    }
    @media (max-width: 1160px) and (min-width: 768px) {
      min-width: 560px;
    }
  }
  @include media-breakpoint-down(sm) {
    h2 {
      br {
        display: none;
      }
    }
  }
}

.global-marketing-blk {
  background: url(../images/home/global-market-bg.jpg) repeat-x;
  background-position: center bottom;
  background-size: cover;
  .global-marketing-image-slider {
      &:not(.slick-initialized) {
        .global-marketing-image-slide:not(:first-child) {
            display: none;
        }
      }
    .global-marketing-image-slide {
      h2 {
        @include media-breakpoint-down(sm) {
          font-size: rem(20);
          line-height: rem(30);
        }
      }
      // @include media-breakpoint-down(sm) {
      //   img {
      //     max-height: 400px;
      //   }
      // }
    }
  }
    .global-marketing-text-slider:not(.slick-initialized) {
        .global-marketing-text-slide:not(:first-child) {
            display: none;
        }
    }
}

.our-edge-blk {
  .our-edge-box {
    min-height: 197px;
  }
}

.award-blk {
  background-color: #d8d6e4;
  @include media-breakpoint-down(xs) {
    img{
      max-width: 60%;
    }
  }
}

.partnership-blk {
    html[dir="ltr"] &{
      background-image: url(../images/home/partnership-bg.jpg);
    } 
    html[dir="rtl"] &{
      background-image: url(../images/home/partnership-ar-bg.jpg);
    }
  background-size: cover;
  min-height: 845px;
    background-repeat: no-repeat;
  background-position: center bottom;
  @media (min-width: 2650px){
    min-height: 1250px;
    background-position: center 90%;
  }
  @media (min-width: 2400px){
    min-height: 1100px;
    background-position: center 90%;
  }
  @media (min-width: 1950px){
    min-height: 1000px;
    background-position: center 90%;
  }
  @media (min-width: 1800px){
    min-height: 900px;
  }
  @include media-breakpoint-down(lg) {
    min-height: 700px;
  }
  @include media-breakpoint-down(md) {
    min-height: 620px;
    .display-2{
      font-size: rem(48);
    }
  }
  @include media-breakpoint-down(xs) {
    min-height: 450px;
  }
}

.main-slider-content {
    direction: ltr;
  img {
    max-width: 100%;
  }
  .slick-dots{
    top: inherit;
    bottom: 0;
    position: absolute;
    text-align: center;
    left: 0;
    li.slick-active button{
      background-color: #f5c300!important;
    }
    li button{
      background-color: rgba($white,.5);
    }
  }
}

.device-image-container{
  .device-image-liner{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
}

.global-marketing-image-slide{
  &.slick-active{
    // .graph-image{
    //   left: 0;
    // }
    .graph-image{
      opacity: 1;
      &.graph-desktop{animation: graphSlideIn 12s linear infinite;}
      &.graph-ipad{animation: graphSlideIn 12s linear infinite;}
      &.graph-mobile{animation: graphSlideIn 12s linear infinite;}
    }
    .device-image-container{
      &:before,
      &:after {
          transform: translate(0px, 0px);
          opacity: 1;
      }
    }
  }
  .graph-image{
    top: 50%;
    transform: translateY(-50%);
    margin-top: 10px;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    @include media-breakpoint-down(xs) {
      height: 100px;
    }
    &.graph-desktop{
      @include media-breakpoint-down(xs) {
        margin-top: 0;
        height: 80px;
      }
      @media (max-width: 400px){
        height: 60px;
      }
    }
  }
  .device-image-container{
    &:before,
    &:after {
        content: "";
        width: 100px;
        height: 100px;
        display: inline-block;
        position: absolute;
        opacity: 0;
        transition: all 0.5s ease-in-out;
        z-index: 2;
    }

    &:before {
        border-top: 30px solid $primary;
        border-right: 30px solid $primary;
        // top: 0;
        // right: 10%;
        top: -15px;
        right: 8%;
        transform: translate(60px, -60px);
        // transform: translate(0, 0);
    }

    &:after {
        border-bottom: 30px solid $primary;
        border-left: 30px solid $primary;
        bottom: 3%;
        left: 15px;
        transform: translate(-60px, 60px);
        // transform: translate(0, 0);
    }
    @include media-breakpoint-down(sm) {
      &:before,
      &:after {
          width: 70px;
          height: 70px;
      }
      &:before {
          border-top: 24px solid $primary;
          border-right: 24px solid $primary;
      }
      &:after {
          border-bottom: 24px solid $primary;
          border-left: 24px solid $primary;
      }
    }
    @include media-breakpoint-down(xs) {
      &:before,
      &:after {
          width: 50px;
          height: 50px;
      }
      &:before {
          border-top: 16px solid $primary;
          border-right: 16px solid $primary;
          top: -8px;
      }
      &:after {
          border-bottom: 16px solid $primary;
          border-left: 16px solid $primary;
          left: 8px;
      }
    }
    &.device-image-container-ipad{
      &:before {
        top: -12px;
        right: 16%;
      }
      &:after {
        bottom: 10px;
        left: 16%;
      }
      @include media-breakpoint-down(md) {
        &:before {
          top: -6px;
          right: 19%;      
        }
        &:after {
          bottom: 3%;
          left: 20%;
        }
      }
      @include media-breakpoint-down(xs) {
        &:before {
          top: -2px;
          right: 10%;
        }
        &:after {
          bottom: 3%;
          left: 10%;
        }
      }
    }
    &.device-image-container-mobile{
      &:before {
        top: 0;
        right: 20%;
      }
      &:after {
        bottom: 0%;
        left: 20%;
      }
      @include media-breakpoint-down(md) {
        &:before {
          top: 0;
          right: 27%;
        }
        &:after {
          bottom: 3%;
          left: 25%;
        }
      }
      @include media-breakpoint-down(xs) {
        &:before {
          top: 2%;
          right: 13%;
        }
        &:after {
          bottom: 6%;
          left: 13%;
        }
      }
    }
  }
}
@keyframes graphSlideIn {
  0%{
    left: 0;
  }
  100%{
    left: -90%;
  }
}

.box-link{
  left: 0;
  top: 0;
  z-index: 2;
}

.sprite { display: inline-block; background: url('../images/sprite-index.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
.platform-guides { background-position: -3px -0px; width: 235px !important; height: 156px !important; }
.seminar-event { background-position: -3px -159px; width: 198px !important; height: 157px !important; }
.trading-strategy { background-position: -3px -319px; width: 177px !important; height: 173px !important; }
.investor-personality { background-position: -3px -495px; width: 110px; height: 105px; }
.prefer-investing { background-position: -116px -495px; width: 110px; height: 105px; }
.risk-appetite { background-position: -3px -603px; width: 110px; height: 105px; }
.icon-commodities { background-position: -116px -603px; width: 60px; height: 60px; }
.icon-currencies { background-position: -116px -666px; width: 60px; height: 60px; }
.icon-etfs { background-position: -3px -711px; width: 60px; height: 60px; }
.icon-indices { background-position: -66px -729px; width: 60px; height: 60px; }
.icon-shares { background-position: -129px -729px; width: 60px; height: 60px; }
.icon-treasuries { background-position: -3px -774px; width: 60px; height: 60px; }
.consultancy-research { background-position: -179px -603px; width: 56px; height: 57px; }
.dedicated-support { background-position: -179px -663px; width: 56px; height: 57px; }
.experience { background-position: -66px -792px; width: 56px; height: 57px; }
.licensed { background-position: -125px -792px; width: 56px; height: 57px; }

.arrow-shape {
    min-width: 32px;
    width: 32px;
    height: 32px;
}

.bg-primary-300 {
    background-color: rgba($primary,0.3);
}
.search-from .input-group{
    @include media-breakpoint-up(md){
        background: rgba($white,0.9);
    }
}