@import url('https://fonts.googleapis.com/css2?family=Heebo&family=Poppins:wght@400;700&display=swap');
body{font-size: calc(.885vw + 3px);font-family: 'Poppins', 'Heebo', sans-serif;}
body { background-color: #f8f9fa;
    background: url(https://cloudzone.io/wp-content/uploads/2022/07/background-scaled-1.jpg) #fff;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;}
html {direction: rtl;}
img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ }
.site-header img{     height: 6em;
  width: auto;
  margin-right: 3em;
  margin-top: 1em;
  text-align: right;
  position: absolute;
  top: 1em;
  right: 0;}
h1, h1 p{font-size: calc(4vw + 1px); text-align: left; color: #fff; font-weight: 800 !important;  line-height: 1;    font-family: 'Poppins', 'Heebo', sans-serif;}
h2 img{  width: 20em;    margin-top: 5em;    height: auto;}
 #top{ text-align: left;  margin-left: 5em;padding-top: 6em;}
#side-text{      margin-top: 3vw;
  color: #fff;  font-size: calc(1px + 1.5vw);  margin-right: 4vw;}
  #side-text p {
    text-align: right;
    font-size: calc(1px + 1.5vw);
    font-family: 'Poppins', 'Heebo', sans-serif;
    line-height: 1.5;
    color: #fff;
  }
#takeownership{  text-align: left;  padding-top: 14vw;      max-width: 36vw;
  margin: 0 auto;}
#takeownership .cta-text p {
  text-align: right;
  font-size: calc(1px + 1.6vw);
    color: #656565;
    line-height: 1.4;
    font-family: 'Poppins', 'Heebo', sans-serif;
}
/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }
.cta p{ color: #b42fff;    font-weight: 800;    font-size: calc(1px + 4vw);     line-height: 1;
  font-family: 'Poppins', 'Heebo', sans-serif;}
.cta-text{  font-size: calc(1px + 1.6vw); color: #656565;}
h3{  line-height: 1;}
.cta strong{  color: #732182;}
.text{color: #fff;font-size: calc(1px + 1.3vw);    margin-top: -0.5em;}
#finops{  text-align: center;   padding-top: 12em;margin-bottom: 12vw;padding-bottom: 12em;}
h4{ color: #656565; margin-bottom: 2vw;;}
.steps{ display: flex; 
  flex-wrap: wrap;
  margin-right: 28vw;    margin-bottom: 2vw;
  margin-left: 0vw;}
.step{    flex: 0 0 33%;
  max-width: 20%;}
.step-title{font-size: calc(1px + 1.5vw); }
.step-text{
  color: #656565;
}
.step-text p{
  font-family: 'Poppins', 'Heebo', sans-serif;
  font-size: 1em;

}
.step3 .step-title{
  color:#0000ff; font-weight: 700;
}
.step2 .step-title{
  color:#5ea8e3; font-weight: 700;
}
.step1 .step-title{
  color:#b42fff; font-weight: 700;
}

h2::after{
  content: "";
  background-image: url(https://cloudzone.io/wp-content/uploads/2022/07/points-1.png);
  position: absolute;
  background-size: 6vw;
  height: 0.5vw;
  width: 6vw;
  background-repeat: no-repeat;
  top: 21vw;
  left: 5.6vw;
}

.step-title::after{
  content: "";
    background-image: url(https://cloudzone.io/wp-content/uploads/2022/07/points-2.png);
   
    background-size: 5.3vw;
   
    background-repeat: no-repeat;
    display: block;
    margin: 0.5em auto;
    width: 90%;
    height: 1em;
    background-position: center;
}

.step1::after,
.step2::after{
  content: "";
  background-image: url(https://cloudzone.io/wp-content/uploads/2022/07/arrows.png);
  background-repeat: no-repeat;
  width: 2vw;
  height: 1.2vw;
  position: absolute;
  top: 0.7em;
  left: -0.6vw;
  background-size: 1.5vw;

}

#form{
  background: #fff;
  box-shadow: 0.15em 0.5em 1.5em 0.15em rgb(0 0 0 / 50%);
  width: 67vw;
  position: fixed;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  z-index: 333;
  padding: 0.5em 0 0.25em;
  text-align: center;
}
h3{
  font-size: calc(1px + 1.1vw);
  margin-right: 0.8em;
  color: #1212ff;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  direction: rtl;
}
form .row.fields-row {
  justify-content: space-between;
}
.step2, .step1 {
  position: relative;
}
.wpcf7-not-valid-tip{
  font-size: 0.8em;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  width: 29vw;
}
input[type="submit"]{
  background-color:  #5ea8e3 !important;
  border-color: #5ea8e3 !important;
    margin-top: 1vw;
}
.wpcf7-spinner {
  top: 1.5vw;
  left: 6vw;
  position: absolute;
}

form .row {
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
  direction: rtl;
}

.wpcf7-list-item{
  margin: 1em -2em 0em 0;
}
#mailing .wpcf7-list-item {
    margin: 1em 0em 0em 0;
  }
  
  .submit-wrapper {
    text-align: left;
    display: flex;
    justify-content: flex-start;
    direction: ltr;
  }
  input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; line-height: 1.5; border-radius: 0.25rem; -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; padding: 0.5rem 1.25rem; color: #fff; background-color: #007bff; border-color: #007bff; }

input[type="button"]:active, input[type="button"]:hover, input[type="reset"]:active, input[type="reset"]:hover, input[type="submit"]:active, input[type="submit"]:hover { color: #fff; background-color: #0062cc; border-color: #005cbf; cursor: pointer; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; }

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }

input[type="text"]:-webkit-input-placeholder, input[type="text"]:-moz-placeholder, input[type="text"]:-ms-input-placeholder, input[type="email"]:-webkit-input-placeholder, input[type="email"]:-moz-placeholder, input[type="email"]:-ms-input-placeholder, input[type="url"]:-webkit-input-placeholder, input[type="url"]:-moz-placeholder, input[type="url"]:-ms-input-placeholder, input[type="password"]:-webkit-input-placeholder, input[type="password"]:-moz-placeholder, input[type="password"]:-ms-input-placeholder, input[type="search"]:-webkit-input-placeholder, input[type="search"]:-moz-placeholder, input[type="search"]:-ms-input-placeholder, input[type="number"]:-webkit-input-placeholder, input[type="number"]:-moz-placeholder, input[type="number"]:-ms-input-placeholder, input[type="tel"]:-webkit-input-placeholder, input[type="tel"]:-moz-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="range"]:-webkit-input-placeholder, input[type="range"]:-moz-placeholder, input[type="range"]:-ms-input-placeholder, input[type="date"]:-webkit-input-placeholder, input[type="date"]:-moz-placeholder, input[type="date"]:-ms-input-placeholder, input[type="month"]:-webkit-input-placeholder, input[type="month"]:-moz-placeholder, input[type="month"]:-ms-input-placeholder, input[type="week"]:-webkit-input-placeholder, input[type="week"]:-moz-placeholder, input[type="week"]:-ms-input-placeholder, input[type="time"]:-webkit-input-placeholder, input[type="time"]:-moz-placeholder, input[type="time"]:-ms-input-placeholder, input[type="datetime"]:-webkit-input-placeholder, input[type="datetime"]:-moz-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="datetime-local"]:-webkit-input-placeholder, input[type="datetime-local"]:-moz-placeholder, input[type="datetime-local"]:-ms-input-placeholder, input[type="color"]:-webkit-input-placeholder, input[type="color"]:-moz-placeholder, input[type="color"]:-ms-input-placeholder, textarea:-webkit-input-placeholder, textarea:-moz-placeholder, textarea:-ms-input-placeholder { color: #6c757d; opacity: 1; }
input {
  background-color: #eceded !important;
  max-width: 100%;
  height: 2.4vw;
  border-radius: 0.25rem;}
  input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    height: fit-content;
}
  .mobile {display: none;}
  @media (min-width: 992px) {
    #form .col-lg-2 {
      -ms-flex: 0 0 16%;
      flex: 0 0 16%;
      max-width: 16%;
  }
    #form .col-lg-8 {
      text-align: right;
  }
  }

@media(max-width:1000px){
    body{font-size: 4.4vw;}
    /* #form .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 20%;
        max-width: 20%;
    } */
      #form .col-lg-8 {
        text-align: right;
    }
    .desktop {
        display: none;
      }
    .mobile {
        display: block;
      } 
      body { background-color: #f8f9fa;
        background: url(https://cloudzone.io/wp-content/uploads/2022/07/bg_mob-scaled-1.jpg) #fff;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        font-size: 4.4vw;
        overflow-x: hidden;
      }

      .site-header img {
        height: 2em;
        margin-right: 0.5em;
        margin-top: 0.2em;
        top: 0;
      }
    
      #top {
        margin-left: 1em;
        padding-top: 2em;
    }
    h1, h1 p {
      font-size: 1em;
    }
    h2 img {
      width: 15em;
      margin-top: 1em;
      margin-bottom: 0.5em;
    }
    #side-text p {
      font-size: 1em;
      line-height: 1.2;
      margin-top: -0.5em;
  }
  
  
    .text {
      font-size: 0.85em;
      margin-top: 1em;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      line-height: 1.1;
    }
    
    .text .text {
      max-width: 12em;
      margin-top: -1.5em;
    }
    
    h2::after {
    
      background-size: 2em;
      height: 0.2em;
      width: 2em;
      top: 3.2em;
      left: 0.6em;
    
    }

    .wpcf7-not-valid-tip {
      font-size: 0.8em;
      position: absolute;
      left: 0;
      width: 10em;
  }

  .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    width: fit-content;
    font-size: 0.7em;
}
    
    #side-text {
      margin-top: 0em;
      font-size: 0.8em;
      margin-right: 0.9em;
      line-height: 1.2;
    }
    
    
    #takeownership {
        text-align: center;
        padding-top: 8em;
        max-width: 16em;
    }
    h3 {
      font-size: 1em;
      margin-right: 0;
      margin-bottom: 1em;
    }
    
    .cta p {
      font-size: 1.2em;
    }
    
    .cta-text {
      font-size: 0.65em;
      margin-top: -1em;
    }
    #finops {
      padding-top: 1em;
      padding-bottom: 4em;
    }
    
    .steps {
    
      margin-right: 0;
      justify-content: space-evenly;
    }
    .step {
      flex: 0 0 33%;
      max-width: 33%;
    }
    .step-title {
      font-size: 1.2em;
    }
    .step-title::after {
     
      background-size: 2em;
      
      margin: 0em auto;
      width: 2em;
      height: 0.5em;
    }
    .step-text {
      font-size: 0.7em;
    }
    
    #form {
      width: 100%;
      position: fixed;
      top: 0;
      padding: 2em 2em 3em;
      display: none;
    }

    input {
      
      height: 2em;
  }
  
  input[type="submit"] {
    padding-top: 0.3em;
  }
  
    #takeownership .cta-text p {
        font-size: 1.11em;
    }
    
    #form h3 {
      font-size: 1.2em;
      margin-bottom: 0;
    }
    
    .wpcf7-list-item {
      max-width: 100%;
      margin: 1em 0;
    }
    .wpcf7-list-item label{
    
      text-align: right;
    }
    .wpcf7-list-item-label {
      
      font-size: 0.8em;
      text-align: right;
    
    }
    .submit-wrapper {
      text-align: left;
    }
    .wpcf7-spinner {
    
      position: absolute;
      top: 0.5em;
        left: 6em
    }
    .step1::after, .step2::after {
      content: "";
      background-image: url(https://cloudzone.io/wp-content/uploads/2022/07/arrows.png);
      background-repeat: no-repeat;
      width: 1em;
      height: 1.5em;
      position: absolute;
      top: 0.6em;
      left: -0.6em;
      background-size: 1em;
    }
    .open-popup {
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      background-color: #00d3fe;
      color: #fff;
      padding: 0.2em;
      font-size: 1.3em;
    }
    .close-popup {
      font-size: 2em;
      position: absolute;
      top: 0.1em;
      right: 0.5em;
    }
    #finops img {
      max-width: 50%;
      margin-top: -2em;
      margin-bottom: -5em;
    }
    #form img {
      margin-top: 2em;
      max-width: 60%;
      margin: 1em auto 0
    }
    .wpcf7 form .wpcf7-response-output {
      margin-top: 0.5em !important;

  }
}