/*------------------------
Space Tab
--------------------------------*/
.space_right_img {
  position: relative;
  right: -20%;
  top: 0;
  text-align: right;
}

.space_tab {
  width: 100%;
}

.space_tab .contentCircle {
  width: 100%;
  top: 400px;
}

.space_tab .contentCircle .CirItem .space_img {
  width: 30%;
  float: left;
}

.space_tab .contentCircle .CirItem .space_info {
  width: 50%;
  float: left;
  text-align: left;
  color: var(--color-theme-white);
  padding-left: 64px;
}

.space_tab .tab_list .itemDot {
  color: var(--color-theme-white);
  position: absolute;
  transform: none !important;
  left: auto !important;
  z-index: 1;
}

.space_tab .tab_list .itemDot .title {
  display: none;
  color: var(--color-theme-white);
}

.space_tab .tab_list .itemDot.active .title {
  display: inline-block;
}

.space_tab .tab_list span.itemDot.itemDot0 {
  top: 82px !important;
  right: -7%;
}

.space_tab .tab_list span.itemDot.itemDot1 {
  top: 18% !important;
  right: -36px;
}

.space_tab .tab_list span.itemDot.itemDot2 {
  top: 28% !important;
  right: 0.5%;
}

.space_tab .tab_list span.itemDot.itemDot3 {
  top: 42% !important;
  right: 2.5%;
}

.space_tab .tab_list span.itemDot.itemDot4 {
  top: 56% !important;
  right: 2.4%;
}

.space_tab .tab_list span.itemDot.itemDot5 {
  top: 68% !important;
  right: 0.3%;
}

.space_tab .tab_list span.itemDot.itemDot6 {
  top: 78% !important;
  right: -3.2%;
}

.space_tab .tab_list span.itemDot.itemDot7 {
  top: 86% !important;
  right: -7.1%;
}

.space_tab .tab_list .itemDot .forActive {
  cursor: pointer;
  height: 35px;
  width: 35px;
  margin-left: 30px;
  border-radius: 90px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.space_tab .tab_list .itemDot .forActive::before {
  content: "";
  height: 15px;
  width: 15px;
  background: var(--color-theme-white);
  display: block;
  border-radius: 90px;
  line-height: 35px;
  left: 0;
  top: 10px;
  right: 0;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}

.space_tab .tab_list .itemDot.active .forActive::before {
  background: var(--color-theme-primary);
}

.space_tab .contentCircle .CirItem .space_info .title,
.space_tab .contentCircle .CirItem.title-box .title {
  color: var(--color-theme-white);
  font-size: 60px;
  margin-bottom: 15px;
}

.space-tab-wrapper .wpb_single_image .vc_figure {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  max-width: 100%;
}

.space-tab-wrapper .wpb_single_image .vc_single_image-wrapper {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
}

.space-tab-wrapper .wpb_single_image img {
  height: auto;
  max-width: 100%;
  vertical-align: top;
}

.holderCircle {
  width: 600px;
  height: 600px;
  border-radius: 100%;
  margin: 60px auto;
  position: relative;
}

.CirItem.title-box .title {
  color: var(--color-theme-primary);
}

.dotCircle {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
  z-index: 20;
}

.dotCircle .itemDot {
  display: block;
  width: 80px;
  height: 80px;
  position: absolute;
  background: #eee;
  color: var(--color-theme-primary);
  border-radius: 20px;
  text-align: center;
  line-height: 80px;
  font-size: 30px;
  z-index: 3;
  cursor: pointer;
}

.dotCircle .itemDot .forActive {
  width: 56px;
  height: 56px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
}

.dotCircle .itemDot .forActive::after {
  content: "";
  width: 5px;
  height: 5px;
  border: 3px solid var(--color-theme-primary);
  bottom: -31px;
  left: -14px;
  filter: blur(1px);
  position: absolute;
  border-radius: 100%;
}

.dotCircle .itemDot:hover svg path,
.dotCircle .itemDot.active svg path {
  stroke: var(--color-theme-white);
}

.dotCircle .itemDot .forActive::before {
  content: "";
  width: 6px;
  height: 6px;
  filter: blur(5px);
  top: -15px;
  position: absolute;
  transform: rotate(-45deg);
  border: 6px solid var(--color-theme-primary);
  right: -39px;
}

.dotCircle .itemDot.active .forActive {
  display: block;
}

.round {
  position: absolute;
  left: 40px;
  top: 45px;
  width: 500px;
  height: 500px;
  border: 2px dotted var(--color-theme-primary);
  border-radius: 100%;
  -webkit-animation: rotation 100s infinite linear;
}

.dotCircle .itemDot:hover,
.dotCircle .itemDot.active {
  color: var(--color-theme-white);
  transition: 0.5s;
  background: var(--color-theme-primary);
  background: -moz-linear-gradient(left, #7d4ac7 0%, #a733bb 100%);
  background: -webkit-linear-gradient(left, #7d4ac7 0%, #a733bb 100%);
  background: linear-gradient(to right, #7d4ac7 0%, #a733bb 100%);
  -webkit-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.13);
  box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.13);
}

.dotCircle .itemDot {
  font-size: 40px;
}

.contentCircle {
  width: 250px;
  border-radius: 100%;
  color: #222;
  position: relative;
  top: 200px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.contentCircle .CirItem {
  border-radius: 100%;
  color: #222;
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scale(0);
  transition: 0.5s;
  font-size: 15px;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  margin: auto;
  line-height: inherit;
  display: flex;
  align-items: center;
}

.CirItem.active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  transition: 0.5s;
}

.contentCircle .CirItem svg {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 0;
  left: 32px;
  right: 0;
  opacity: 0.1;
  z-index: -1;
}

.contentCircle .CirItem svg path {
  stroke: var(--global-font-color);
}

.iq-breadcrumb .vc_single_image-wrapper img {
  box-shadow: 0 10px 46px 0 rgba(0, 0, 0, 0.1);
}

.space-tab-wrapper .two-column-list {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}

.vizion-feature-circle .effect-circle:before {
  background: url("../images/circle.png");
  width: 270px;
  height: 270px;
  display: inline-block;
  content: "";
}

@media (max-width: 1599px){
  .space_right_img{
    right: -180px;
  }

  .space_tab .tab_list .itemDot .forActive{
    margin-left: 5px;
  }

  .space_tab .tab_list span.itemDot.itemDot0,
  .space_tab .tab_list span.itemDot.itemDot7{
    right: -5px;
  }

  .space_tab .tab_list span.itemDot.itemDot1,
  .space_tab .tab_list span.itemDot.itemDot6{
    right: 53px;
  }

  .space_tab .tab_list span.itemDot.itemDot2,
  .space_tab .tab_list span.itemDot.itemDot5{
    right: 100px;
  }

  .space_tab .tab_list span.itemDot.itemDot3{
    right: 128px;
  }

  .space_tab .tab_list span.itemDot.itemDot4{
    right: 125px;
  }
}

@media (max-width: 992px) {
  .wpb_single_image.space_right_img img {
    max-width: 80%;
  }

  .space_tab .tab_list span.itemDot.itemDot1,
  .space_tab .tab_list span.itemDot.itemDot2,
  .space_tab .tab_list span.itemDot.itemDot3,
  .space_tab .tab_list span.itemDot.itemDot4,
  .space_tab .tab_list span.itemDot.itemDot5,
  .space_tab .tab_list span.itemDot.itemDot6,
  .space_tab .tab_list span.itemDot.itemDot7,
  .space_tab .tab_list span.itemDot.itemDot0 {
    top: auto !important;
    bottom: auto !important;
    margin: 0 0 30px 45px;
    display: inline-block;
    vertical-align: middle;
  }

  .space_tab .tab_list .itemDot {
    position: relative;
    left: 0 !important;
    right: auto !important;
  }

  .space_tab .tab_list .itemDot .title {
    display: inline-block;
  }

  .space_tab .contentCircle .CirItem .space_info {
    padding: 0 50px;
    width: 60%;
  }
}

@media (max-width: 767px) {
  .space_tab .contentCircle {
    position: static;
    transform: none;
  }

  .space_tab .contentCircle .CirItem {
    flex-direction: column;
    position: static;
    display: none;
  }

  .space_tab .contentCircle .CirItem.active {
    display: block;
  }

  .space_tab .contentCircle .CirItem .space_img,
  .space_tab .contentCircle .CirItem .space_info {
    width: 100%;
  }

  .space-tab-wrapper .two-column-list {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
  }

  .space_tab .contentCircle .CirItem .space_info {
    padding: 0;
  }

  .space_right_img {
    display: none;
  }
}

@media only screen and (min-width: 300px) and (max-width: 599px) {
  .holderCircle {
    width: 100%;
    height: 300px;
    margin: 110px auto;
  }

  .dotCircle,
  .dotCircle .itemDot {
    transform: none !important;
    transition: none !important;
    position: initial;
    margin: 0 10px 10px;
    display: inline-block;
    text-align: center;
  }

  .holderCircle::after {
    width: 100%;
    height: 100%;
  }

  .dotCircle {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
}