/*==================================  Preprocessor Animation globe   ===============================*/

.preprocessor-background{
  position: absolute;
  width: 100%;
  height:100%;
   background: linear-gradient(110deg, rgb(106, 21, 197) 0%, #7b18cb 40%, #f426fa 100%);
}

.preprocessor-top-content{
  display: grid;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.preprocessor-search{
    margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

.preprocessor-card{
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  display: grid;
  margin-bottom: 10em;
}
.preprocessor-trynow {
  margin: 1em;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

.preprocessor-input{
    padding: 14px;
    margin: 16px 0;
    border-radius: 10px 0 0 10px;
    color: black;
    width: 75%;
    border: none;
    background:#d8d5d1;
}

.preprocessor-search-button{
    padding: 16px 22px;
    margin: 16px 0;
    border-radius: 0 10px 10px 0;
    color: black;
    background: #d8d5d1;
}
.preprocessor-layout {
  margin-bottom: 10em;
  margin-top: 6em;
}

.tyr-now-button{
  color: white;
}

.preprocessor-icon{
   width: 100%;
   height: 100%;
   max-width: 320px;
   margin-top: 5em;
}
.preprocessor-icon {
  height: 100%;
  max-width: 320px;
  margin-top: 5em;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  position: relative;
}

.preprocessor-image {
  width: 100%;
  max-width: 63vw;
  margin: auto;
  justify-content: center;
  display: flex;
}


.technologies-system-container {
  position: absolute;
  z-index: 0;
  width: 100%;
  max-width: 32em;
  height: 100%;
  margin-top: 0em;
  opacity: 0.5;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.2;
}
.solar-system {
 position:relative;
 width:100%
}
@media (max-width:689.98px) {

}

@media (min-width:690px) {
 .solar-system {
  max-width:1100px;
  margin-left:auto;
  margin-right:auto
 }
}
.solar-system:before {
 content:'';
 display:block;
 width:100%;
 padding-bottom:100%
}
.solar-system>div {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 margin:auto;
 border-radius:100%;
 opacity: 0.7;
}
.solar-system .circle1 {
 width:100%;
 height:100%;
 border:2px solid #e1e1e1
}
.solar-system .circle2 {
 width:80%;
 height:80%;
 border:2px solid #e1e1e1
}
.solar-system .circle2 span {
 -webkit-box-orient:horizontal;
 -webkit-box-direction:reverse;
 -ms-flex-direction:row-reverse;
 flex-direction:row-reverse
}
.solar-system .circle2 span:before {
 margin-right:-10px
}
.solar-system .circle2 span:after {
 margin-left:-5px
}
.solar-system .circle3 {
 width:60%;
 height:60%;
 border:2px solid #e1e1e1
}
.solar-system span {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-pack:justify;
 -ms-flex-pack:justify;
 justify-content:space-between;
 width:100%;
 height:20px
}
.solar-system span:before,
.solar-system span:after {
 content:'';
 border-radius:100%
}
.solar-system span:before {
 width:20px;
 height:20px;
 margin-left:-10px;
 background:#ebedf9
}
.solar-system span:after {
 width:10px;
 height:10px;
 margin-right:-5px;
 background:#f1f3fb
}
.solar-system span {
 -webkit-animation-play-state:paused;
 animation-play-state:paused;
 -webkit-animation-name:spin;
 animation-name:spin;
 -webkit-animation-timing-function:linear;
 animation-timing-function:linear;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite
}
.solar-system.active span {
 -webkit-animation-play-state:running;
 animation-play-state:running
}
.circle1 span {
 -webkit-animation-duration:80s;
 animation-duration:80s
}
.circle2 span {
 -webkit-animation-duration:40s;
 animation-duration:40s
}
.circle3 span {
 -webkit-animation-duration:20s;
 animation-duration:20s
}
@-webkit-keyframes spin {
 100% {
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg)
 }
}
@keyframes spin {
 100% {
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg)
 }
}

@media screen and (max-width: 991px) {
.pricing25_orange-glow.glow-orglll {
  top: 45% !important;
}
}

@media screen and (max-width: 721px) {
.pricing25_orange-glow.glow-orglll {
  top: 35% !important;
}
}
@media screen and (max-width: 480px) {
.pricing25_orange-glow.glow-orglll {
  top: 25% !important;
}
}
/*xl*/
@media only screen and (min-width: 1280px) {

}
/*lg*/
@media only screen and (min-width: 1024px) {
  .preprocessor-card{
    display: flex;
  }
    .preprocessor-top-content{
      display: grid;
      text-align: left;
      margin-left: 0;
      margin-right: 0;
    }
    .preprocessor-search{
        margin-left: 0;
      margin-right: 0;
      width: fit-content;
    }
    .technologies-system-container {
       right: -0%;
       margin-right: 0;
    }
    .preprocessor-image {
      max-width: 18em;
      width: 18rem;
    }
    .preprocessor-icon{
       margin-right: 2em;
    }

    .preprocessor-icon{

       margin-right: 0;
       float: right;
    }
    .preprocessor-trynow {
      margin-left: 0;
    }


}
@media only screen and (min-width: 1350px) {
  .technologies-system-container {
    right: -54em;
    margin: auto;
  }
}



/*sm*/
@media only screen and (min-width: 640px) {

}

@media only screen and (max-width: 480px) {
.preprocessor-icon {
  margin-top: 3em;
}

}



/*==================================  Creatives Codes   ===============================*/

.creative-codes-right-lay a
{
  margin: 0px 4px;
}
.creative-codes-top{
  margin-top: 7rem;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  display: grid;
  text-align: center;
}

.cartoon-icons {
  width: 14em;
  right: 20%;
  position: absolute;
  margin-top: -13px;
}

.creative-codes-right-lay{
  display: flex;
  margin-top: 2em;
  width: 100%;
  margin-left: auto;
  margin-right: auto;

}
.creative-codes-button {
  margin: 25px 15px;
  display: block;
  align-items: center;
  padding: 6px 32px 10px;
  border: none;
  border-radius: 7px;
  font-weight: 600;
  color: white;
  font-size: 18px;
  line-height: 28px;
  width: 50%;
  text-align: center;
}
.creative-codes-bottom{
  margin-top: 32px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
.layout_editor {
  padding: 5%;
  border-radius: 19px;
  background-color: #222;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 9;
  position: relative;
}

/*xl*/
@media only screen and (min-width: 1280px) {
    .cartoon-icons{
      right: 12em !important;
    }
}


/*md*/
@media only screen and (min-width: 768px) {

    .cartoon-icons{
      right: 7em;
    }
    .creative-codes-top{
      display: flex;
      text-align: left;
    }
    .creative-codes-right-lay{
      float: right;
      margin-left: 0;
      margin-right: 0;
      width: auto;
      margin-top: 4em;
    }
    .cartoon-icons{
      width: 13em;
      margin-top: 0em;
    }




}