/* ##################### Common Starts ############### */
.u-textCenter{ text-align: center;}
/* ##################### Common Ends ############### */

/* ##################### Hero Starts ############### */
.WebzaiHero {
    padding: 80px 0;
    position: relative;
}
.WebzaiHero-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.WebzaiHero-content {
    flex-basis: 42%;
    z-index: 1;
}
.WebzaiHero-banner{
    flex-basis: 54%;
}
.WebzaiHero-buttonPlan {
    margin-top: 20px;
    margin-left: 15px;
    border: 2px solid #25B566;
    width: 170px;
    height: 40px;
    border-radius: 5px;
    font: normal normal 600 15px/30px Montserrat;
    color: #25B566;
    background: #fff;
    text-transform: uppercase;
}
.WebzaiHero-bgleft {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
}
.WebzaiHero-bgright {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35%;
    z-index: 0;
}
.WebzaiHero-title {
    font: normal normal 600 42px/51px Montserrat;
    color: #333333;
}
.WebzaiHero-highlight { color: #FF7700; }
.WebzaiHero-subtitle {
    font: normal normal normal 18px/24px Open Sans;
    color: #333333;
    margin-bottom: 30px;
}
.WebzaiHero-banner { position: relative;}
.WebzaiHero-banner .ic-youtube-play{
    font-size: 75px;
    position: absolute;
    left: 29%;
    top: 13%;
    color: rgba(0, 0, 0, 0.75);
    padding: 50px 100px;
    cursor: pointer;
}
.ic-youtube-play:hover{
    color: #ff7700;
}
.WebzaiHero-image{ 
    Width: 100%;
    opacity: 0.7;
}
.WebzaiHero-form{
    display: flex;
    z-index: 1;
    position: relative;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.WebzaiHero-form.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.WebzaiHero-inputdomain,
.WebzaiHero-submit{
    box-shadow: 0px 3px 6px #5E5E5E4E;
    border: none;
    box-sizing: border-box;
    height: 56px;
    border-radius: unset;
}
.WebzaiHero-inputdomain{
    flex-basis: 75%;
    padding-left: 5%;
    padding-top: 0;
    font-weight: 600;
    font-size: 15px;
}
.WebzaiHero-form.is-sticky .WebzaiHero-inputdomain{ flex-basis: 80%; }
.WebzaiHero-inputdomain::placeholder { font: normal normal normal 18px Open Sans; }
.WebzaiHero-submit{
    flex-basis: 25%;
    background: #25B566;
    color: #fff;
    font: normal normal bold 15px Montserrat;
}
.WebzaiHero-form.is-sticky .WebzaiHero-submit{ flex-basis: 20%; }

@media (max-width: 640px){
    .WebzaiHero { 
        padding: 40px 0 0; 
        overflow: hidden;
    }
    .WebzaiHero-wrapper{ display: block;}
    .WebzaiHero-banner .ic-youtube-play{left: 15%;}
    .WebzaiHero-title { 
        font: normal normal bold 27px/36px Montserrat; 
        width: 100%;
        text-align: center;
    }
    .WebzaiHero-subtitle { 
        font: normal normal normal 15px/20px Open Sans;
        text-align: center;
        padding: 0;
    }
    .WebzaiHero-buttonPlan {
        display: block;
        margin: 0 auto 15px;
        width: 150px;
        height: 35px;
        font-size: 11px;
    }
    .WebzaiHero-image {
        Width: 124%;
        opacity: 0.6;
        margin-left: -14%;
    }
    .WebzaiHero-form { 
        flex-direction: column; 
        position: unset;
        margin-bottom: 25px; 
    }
    .WebzaiHero-inputdomain, .WebzaiHero-submit {
        box-sizing: border-box;
        height: 56px;
        width: 70%;
        margin: 0 auto 15px;
        padding: 15px 10px;
        border-radius: 3px;
    }
    .WebzaiHero-inputdomain {
        text-align: center;
        border: 1px solid #CBCBCB;
        box-shadow: none;
    }
    .WebzaiHero-inputdomain::placeholder { font-size: 15px; }
    .WebzaiHero-submit{ font-size: 13px; }
}
/* ##################### Hero Ends ############### */

/* ##################### guide Starts ############### */
.WebzaiGuide {
    background: #F8F8F8;
    padding: 100px 0;
}
.WebzaiGuide-title {
    text-align: center;
    margin-bottom: 55px;
    font: normal normal bold 36px/44px Montserrat;
}
.WebzaiGuide-wrapper { display: flex; }
.WebzaiGuide-wrapStep {
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.WebzaiGuide .Step {
    background: #fff;
    width: 75%;
    padding: 12px 20px;
    box-shadow: 2px 2px 6px #0000001F;
    border-radius: 6px;
    position: relative;
}
.WebzaiGuide .Step.is-active {
    background: #FF7700;
    color: #fff;
}
.WebzaiGuide .Step-heading {
    font: normal normal bold 18px/22px Montserrat;
    margin-bottom: 4px;
}
.WebzaiGuide .Step-description {
    font: normal normal normal 14px/19px Open Sans;
}
.WebzaiGuide .anim-ready:nth-child(1){
    animation: anim1 23.93s infinite;
}
.WebzaiGuide .anim-ready:nth-child(2){
    animation: anim2 23.93s infinite;
}
.WebzaiGuide .anim-ready:nth-child(3){
    animation: anim3 23.93s infinite;
}
.WebzaiGuide .Step:nth-child(1)::after {
    content: '1';
    position: absolute;
    top: -35px;
    right: 10px;
    font: normal normal bold 55px Montserrat;
    color: #FFC999;
}
.WebzaiGuide .Step:nth-child(2)::after {
    content: '2';
    position: absolute;
    top: -24px;
    left: -28px;
    font: normal normal bold 55px Montserrat;
    color: #FFC999;
}
.WebzaiGuide .Step:nth-child(3)::after {
    content: '3';
    position: absolute;
    bottom: -38px;
    right: 41px;
    font: normal normal bold 55px Montserrat;
    color: #FFC999
}
.WebzaiGuide-gif { flex-basis: 60%; }
.WebzaiGuide-img{ width: 100%;}

@media (max-width: 640px){
    .WebzaiGuide { padding: 60px 25px; }
    .WebzaiGuide-title { font: normal normal bold 27px/36px Montserrat;}
    .WebzaiGuide-wrapper{ flex-direction: column-reverse; }
    .WebzaiGuide-wrapStep{ margin-top: 30px;}
    .WebzaiGuide .Step{
        width: 95%;
        margin: 0 auto;
        border-radius: unset;
        border: 1px solid #F8ECE3;
        background-color: transparent;
        box-shadow: none;
        padding: 15px 20px;
    }
    .WebzaiGuide .Step::after{ display: none; }
}
/* ##################### guide Ends ############### */

/* ##################### Plans Starts ############### */
.WebzaiPlans {  padding: 100px 0; }
.WebzaiPlans-heading {
    font-size: 32px;
    line-height: 39px;
    margin-bottom: 15px;
    background: none;
    color: unset;
}
.WebzaiPlans-domain { color: #FF7700; }
.WebzaiPlans-wrapPlan {
    text-align: center;
    margin-top: 60px;
}
.WebzaiPlans .Plan {
    display: inline-flex;
    width: 23%;
    padding: 30px 20px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 12px;
    margin-right: 2%;
    box-sizing: border-box;
}
.WebzaiPlans .Plan:last-child { margin-right: 0;}
.WebzaiPlans .Plan-name {
    font-size: 20px;
    line-height: 27px;
    color: #333333;
    text-transform: uppercase;
    background: none;
    padding: 0;
    margin-bottom: 10px;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    letter-spacing: 0;
}
.WebzaiPlans .Plan-price {
    color: #FF7700;
    font-size: 26px;
    font-weight: bold;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
.WebzaiPlans .Plan-heading {
    color: #575757;
    padding: 0 1px;
    margin: 24px 0 20px;
    font: normal normal 600 14px/22px Montserrat;
    letter-spacing: 0;
}
.WebzaiPlans .Plan-price .sup {
    font-size: 19px;
    vertical-align: text-top;
    font-family: Arial, Helvetica, sans-serif;
}
.WebzaiPlans .Plan-price .sub {
    font-size: 18px;
    font-weight: 600;
}
.WebzaiPlans .Plan-tenure {
    width: 96%;
    border: 1px solid #CECECE;
    padding: 10px 5px;
    border-radius: 4px;
    background: #FAFAFA;
    margin: 25px 0;
    font-size: 11px;
    font-weight: bold;
}
.WebzaiPlans .Plan input[type="button"], .WebzaiPlans .Plan .btn {
    width: 93%;
    padding: 12px 8px;
    background: #25B566;
    border: none;
    color: #fff;
    font: normal normal 600 14px/18px Montserrat;
    text-transform: uppercase;
    border-radius: 5px;
    letter-spacing: 0.39px;
    margin-bottom: 20px;
}
.WebzaiPlans .Plan.Plan--free input[type="button"], .WebzaiPlans .Plan.Plan--free input[type="button"]:hover {
    background: #fff;
    color: #25B566 !important;
    border: 2px solid #25B566;
}
.WebzaiPlans .Plan-wrapFeatures { text-align: left;}
.WebzaiPlans .Plan .Feature {
    color: #2B2929;
    font: normal normal normal 14px/30px Open Sans;
    letter-spacing: 0;
}
.WebzaiPlans .Plan .Feature b{
    font-weight: 600;
}
.WebzaiPlans .Plan .Feature:before {
    content: '\220E';
    display: inline-block;
    transform: rotate(45deg);
    color: #2B2929;
    margin-right: 5px;
    vertical-align: baseline;
}

@media (max-width: 640px){
    .WebzaiPlans{ padding: 60px 0; }
    .WebzaiPlans-heading{ font: normal normal bold 27px/33px Montserrat; }
    .WebzaiPlans-wrapPlan{ 
        position: relative; 
        margin: 0;
        padding-top: 50px;
        overflow: hidden;
    }
    .WebzaiPlans .Plan{ width: 280px; margin-bottom: 10px;}
    .WebzaiPlans .owl-item{ display: inline-block; }
    .WebzaiPlans .owl-nav { display: none; }
    .WebzaiPlans .owl-dots {
        position: absolute;
        top: 0;
        left: 45%;
    }
    .WebzaiPlans .owl-dot {
        width: 8px;
        height: 8px;
        display: inline-block;
        background: #A6A6A6;
        margin-right: 6px;
        border-radius: 50%;
        transition: width 0.3s;
    }
    .owl-dot.active {
        width: 16px;
        background: #FF7700;
        border-radius: 25px;
    }
}
/* ##################### Plans Ends ############### */

/* ##################### Features Starts ############### */
.WebzaiFeatures {
    padding: 100px 0;
    background-color: #F8F8F8;
}
.WebzaiFeatures-wrapper{
    width: 82%;
    margin: 0 auto;
}
.WebzaiFeatures-heading {
    font: normal normal bold 36px/44px Montserrat;
    text-align: center;
    color: #333333;
    margin-bottom: 35px;
    background: none;
}
.WebzaiFeatures-wrapFeature {
    display: flex;
    justify-content: space-evenly;
    margin: 70px 0;
}
.WebzaiFeatures .Feature {
    flex-basis: 18%;
}
.WebzaiFeatures .Feature-icon {
    display: inline-block;
    width: 89px;
    height: 90px;
}
.WebzaiFeatures .Feature-icon--bblog{ background-image: url('../../images/website-builder/beautiful-blog.png'); }
.WebzaiFeatures .Feature-icon--marketing{ background-image: url('../../images/website-builder/marketing.svg'); }
.WebzaiFeatures .Feature-icon--ecomerce{ background-image: url('../../images/website-builder/ecommerce.png'); }
.WebzaiFeatures .Feature-icon--builder{ background-image: url('../../images/website-builder/intelligent-builder.png'); }
.WebzaiFeatures .Feature-icon--responsive{ background-image: url('../../images/website-builder/mobile-responsive.png'); }
.WebzaiFeatures .Feature-icon--security{ background-image: url('../../images/website-builder/website-security.png'); }
.WebzaiFeatures .Feature-heading {
    color: #FF7700;
    margin: 10px 0;
    font-size: 18px;
    line-height: 22px;
}
.WebzaiFeatures .Feature-subheading {
    font-size: 15px;
    line-height: 20px;
    color: #333333;
}

@media (max-width: 640px){
    .WebzaiFeatures{ padding: 60px 0; }
    .WebzaiFeatures-heading{ font: normal normal bold 27px/33px Montserrat; }
    .WebzaiFeatures-wrapFeature{ 
        display: block;
        margin: 5px 0;
    }
    .WebzaiFeatures .Feature{  
        display: flex; 
        margin-bottom: 30px;
    }
    .WebzaiFeatures .Feature-icon{
        background-size: contain;
        background-repeat: no-repeat;
        flex-basis: 20%;
        width: 100%;
    }
    .WebzaiFeatures .Feature-content { flex-basis: 95%; }
    .WebzaiFeatures .Feature-heading{
        text-align: left;
        margin-top: 0;
        padding-top: 0;
        font: normal normal bold 16px/19px Montserrat;
    }
    .WebzaiFeatures .Feature-subheading{ 
        text-align: left;
        font: normal normal normal 14px/19px Open Sans; 
    }
}
/* ##################### Features Ends ############### */

/* ##################### Slider Starts ############### */
.WebzaiAnimation {
    position: relative;
}
.WebzaiAnimation-wrap {
    overflow: hidden;
    width: 100%;
    margin: 5px auto;
    background: #fff;
    white-space: nowrap;
}
.WebzaiAnimation-wrapImage1 {
    display: inline-block;
    animation: marquee 60s linear infinite;
}
.WebzaiAnimation-wrapImage2 {
    display: inline-block;
    animation: marquee2 60s linear infinite;
    /* animation-delay: 30s; */
}
.Image {
    display: inline-block;
    width: auto;
    float: none;
    padding: 0;
}
.Image img {
    transition: all 0.3s;
    opacity: 0.6;
}
.Image img:hover {
    transform: scale(1.1);
}
.WebzaiAnimation-form {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    padding: 30px;
    background: #00000059;
    border-radius: 12px;
    display: flex;
    width: 50%;
    flex-wrap: wrap;
}
input.WebzaiAnimation-inputdomain{
    height: 56px;
    flex-basis: 75%;
    padding: 10px 30px;
    box-sizing: border-box;
    font: normal normal normal 18px/73px Open Sans;
    color: #212121;
    border: none;
    border-radius: 6px 0 0 6px;
}
input.WebzaiAnimation-submit {
    flex-basis: 25%;
    background: #25B566;
    color: #fff;
    border: none;
    font: normal normal bold 15px/23px Montserrat;
    box-sizing: border-box;
    border-radius: 0 6px 6px 0;
}

@media (max-width:640px){
    .WebzaiAnimation-form{
        display: block;
        width: 80%;
    }
    input.WebzaiAnimation-inputdomain{
        width: 100%;
        height: 48px;
        font: normal normal normal 17px/73px Open Sans;
        border-radius: 6px;
        margin-bottom: 20px;
    }
    input.WebzaiAnimation-submit{
        width: 100%;
        border-radius: 6px;
        height: 48px;
    }
}
/* ##################### Slider Ends ############### */

/* ##################### Video Popup Starts ############### */
.WebzaiVideo {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000a6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.WebzaiVideo-close {
    position: absolute;
    right: 5%;
    top: 8%;
    width: 32px;
    height: 32px;
    opacity: 0.8;
    cursor: pointer;
}
.WebzaiVideo-close:hover {  opacity: 1; }
.WebzaiVideo-close:before, 
.WebzaiVideo-close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #fff;
}
.WebzaiVideo-close:before {
    transform: rotate(45deg);
}
.WebzaiVideo-close:after {
    transform: rotate(-45deg);
}

@media  (max-width: 800px){
    .WebzaiVideo-clip{
        width: 80%;
        height:  35%;
    }
}

/* ##################### Video Popup Ends ############### */

/* ##################### Animations Starts ############### */
@keyframes marquee {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes marquee2 {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes anim1{
    0%{
        background: #FF7700;
        color: #fff;
    }
    31%{
        background: #FF7700;
        color: #fff;
    }
    32%{
        background: #fff;
        color: #333333;
    }
    100%{
        background: #fff;
        color: #333333;
    }
}
@keyframes anim2{
    0%{
        background: #fff;
        color: #333333;
    }
    31%{
        background: #fff;
        color: #333333;
    }
    32%{
        background: #FF7700;
        color: #fff;
    }
    82%{
        background: #FF7700;
        color: #fff;
    }
    83%{
        background: #fff;
        color: #333333;
    }
    100%{
        background: #fff;
        color: #333333;
    }
}
@keyframes anim3{
    0%{
        background: #fff;
        color: #333333;
    }
    82%{
        background: #fff;
        color: #333333;
    }
    83%{
        background: #FF7700;
        color: #fff;
    }
    100%{
        background: #FF7700;
        color: #fff;
    }
}
@media (max-width: 640px){
    @keyframes anim1{
        0%{
            background: #FF7700;
            color: #fff;
        }
        31%{
            background: #FF7700;
            color: #fff;
        }
        32%{
            background: transparent;
            color: #333333;
        }
        100%{
            background: transparent;
            color: #333333;
        }
    }
    @keyframes anim2{
        0%{
            background: transparent;
            color: #333333;
        }
        31%{
            background: transparent;
            color: #333333;
        }
        32%{
            background: #FF7700;
            color: #fff;
        }
        82%{
            background: #FF7700;
            color: #fff;
        }
        83%{
            background: transparent;
            color: #333333;
        }
        100%{
            background: transparent;
            color: #333333;
        }
    }
    @keyframes anim3{
        0%{
            background: transparent;
            color: #333333;
        }
        82%{
            background: transparent;
            color: #333333;
        }
        83%{
            background: #FF7700;
            color: #fff;
        }
        100%{
            background: #FF7700;
            color: #fff;
        }
    }
}
/* ##################### Animations Ends ############### */

.WebzaiHero-form.error{
    padding: 0;
    border: none;
    background: transparent;
}
.WebzaiHero-form.error .alert{
    display: block;
    font-weight: normal;
    font-size: 11px;
    width: 100%;
    margin: 5px 0;
}
.WebzaiAnimation-form .alert.alert-danger{font-weight: normal; font-size: 11px; width: 100%; margin: 5px 0;}
.btns-for-ab-test{
    display: block;
    text-align: center;
    width: 205px;
    display: none;
}
.btns-for-ab-test span{
    display: block;
    margin-top: 10px;
}
.btns-for-ab-test a{
    font-size: 15px;
    text-align: center;
    text-decoration: underline;
}
.domain-error-msg{
    font-size: 14px;
    font-weight: 600;
}
.domain-error-msg .red{
    color: #FF0000;
}
.domain-error-msg .green{
    color: #25B566;
}
.new_domain .btn-flat-green.button-link{
    color: #2196F3;
    background: transparent;
    padding: 0;
    font-size: 12px;
    margin: 11px 20px;    
}
.new_domain .btn-flat-green.button-link i{
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    top: -1px;
    position: relative;
}
.new_domain .btn-flat-green{
    font-weight: 600;
    padding: 10px 20px;
}