/*how to default*/
.howtopages h1{font-size: 58px;}
.howtopages .yellow-btn{background: none; padding: 0;}
.howtopages .yellow-btn a {border: 0;color: #000 !important;font-size: 16px;padding: 13px 28px;background: #FFE44F !important;}
.howtopages .homebanner p{color: #000; font-size: 18px;}
.howtopages .homebanner .desc{padding: 70px 15px 0;}
.howtopages .homebanner {min-height: inherit}
.howtopages .homebanner .desc { max-width: 1120px;}
.howtopages .box-shadow{box-shadow: 0px 0px 60px rgba(221, 226, 238, 0.7)}
.howtopages .box-radius10{border-radius: 10px;}
.howtopages .border-radius10 img {border-radius: 10px}
.howto-section {padding: 60px 0;}
.howtopages h2{padding: 0 0 30px; margin: 0;}
.howtopages p, .howtopages li {font-size: 16px; color: #666;}
.speak-expert-section p{font-size: 16px; color: #000; font-weight: 600;}
.speak-expert-section h2, .speak-expert-section p {padding: 0 0 20px;}

/*end*/

/*Editor classes*/
.homebanner .vc_col-sm-12{position: static !important;}
.wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid > li {margin-bottom: 0 !important;}
.vc_general.vc_btn3:focus, .vc_general.vc_btn3:hover {border: 0px solid transparent !important; }

/*header bg pages*/
.page-id-13039 .howtopages .homebanner .desc, .page-id-13171 .howtopages .homebanner .desc{padding: 150px 15px 0;}
.page-id-13039 h2 strong{color:#355CEC;}
.page-id-13039 p, .page-id-13171 p {font-size: 16px;color: rgba(0,0,0,0.5);letter-spacing: 0;}
.page-id-13039 .site, .page-id-13171 .site {padding-top: 0;}
.page-id-13039 .menu-wrapper, .page-id-13171 .menu-wrapper {top: 20px;}
.page-id-13039 .logo img{filter: invert(100%);}
.page-id-13039 .main-navigation .nav-menu > li > a{color: #fff;}
.page-id-13039.scroll-up .menu-wrapper, .page-id-13171.scroll-up .menu-wrapper {top: 0px;}
.page-id-13039.scroll-up .nav-menu > li > a, .page-id-13171.scroll-up .nav-menu > li > a {color: #000;}
.page-id-13039.scroll-up .logo img, .page-id-13171.scroll-up .logo img {filter: none;}
.page-id-13039 .homebannerbg  {background: #1c1c1c;}
.page-id-13171 .homebannerbg{background: #EBF1FE;}
.page-id-13039 .desc h1, .page-id-13171 .desc h1 {color: #fff;font-size: 58px;padding: 0 15px;margin: 0 0 20px;}
.page-id-13039 .homebanner .desc p, .page-id-13171 .homebanner .desc p {font-size: 16px;margin: 0 0 20px; color: #fff;} 
.page-id-13039 .homebannerbg::before, .page-id-13039 .homebannerbg::after, .page-id-13171 .homebannerbg::before, .page-id-13171 .homebannerbg::after {
background: #EBF1FE;left: -192px;bottom: 0;height: 368px;width: 368px;z-index: -1;opacity: 0.07;top: auto;border-radius: 100%;border: #000 solid 80px;}
.page-id-13039 .homebannerbg::after, .page-id-13171 .homebannerbg::after {background: #EBF1FE;right: -260px;left: auto;top: auto;
bottom: 10%;width: 514px;height: 514px;}
.page-id-13039 .homebannerbg::before, .page-id-13039 .homebannerbg::after{background: #1c1c1c; border: #fff solid 80px;}

.page-id-13171 .desc h1, .page-id-13171 .homebanner .desc p{color: #000;}
.page-id-13171 .need-mobile-image-section {background-color: #355CEC;margin-top: 30px;display: flex;align-items: flex-end;}

/*need-mobile-app-section*/
.need-mobile-ap-section {max-width: 1920px;}
.need-mobile-image-section {background-color: #FFE44F;background-image: url(../images/howtp-img-bg-dots.png);background-repeat: repeat;
background-position: left top;}
.need-mobile-image-section .wpb_single_image {margin-bottom: auto;display: flex;}
.need-mobile-image-section h2 {font-size: 62px;padding: 0 40px;}
.app-need-image-center {display: flex;justify-content: center;}
.need-mobile-text-section .wpb_wrapper h3, .need-mobile-text-section .wpb_wrapper p {display: flex;padding: 0px 0 10px 40px;margin: 0;}
.need-mobile-text-section {counter-reset: section; padding-right: 8% !important;}
.need-mobile-text-section .wpb_wrapper h3::before {counter-increment: section;content: "0" counter(section);background: blue;
width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;color: #fff;border-radius: 100%;border: #fff solid 3px;
left: -40px;position: absolute;}
.need-mobile-text-section .wpb_wrapper p {padding-bottom: 40px;}

/*easy-step section*/
.easy-step-left-text h2{position: relative; font-size: 0;}
.easy-step-left-text h2::before {content: '5 Easy Steps';color: #121212;opacity: 0.06;position: absolute;right: -330px;top: 280px;
width: 802px;height: 150px;font-size: 118px;transform: rotate(-90deg);}
.easy-step-boxes .wpb_wrapper {display: flex;flex-wrap: wrap;}
.easystepbox h3 {margin: 0;padding: 0 0 10px;}
.easystepbox {width: calc(50% - 30px);box-shadow: 0px 0px 60px rgba(221, 226, 238, 0.7);border-radius: 10px;padding: 50px 20px 20px;
margin: 0 14px 58px !important;position: relative;}
.easy-step-boxes {counter-reset: section; padding-right: 8% !important;}
.easystepbox::before {counter-increment: section;content: "0" counter(section);background: #EBF1FE;width: 60px;height: 60px;display: flex;
align-items: center;justify-content: center;color: #000;border-radius: 100%;left: 20px;position: absolute;font-size: 24px;font-weight: 500;
top: -30px;}

/*design-your-app*/
.design-your-app h3{margin-bottom: 0; padding: 0 0 10px; font-size: 30px; letter-spacing: 0;}
.design-your-app p{font-size: 16px;padding: 0 10px 20px 0;}

/*Benefits mobile app*/
.benefits-mobileapp-boxes {display: flex;flex-wrap: wrap;}
.benefits-mobileapp-boxes .benefits-box {box-shadow: 0px 0px 60px rgba(221, 226, 238, 0.7);padding: 20px;border-radius: 10px;
	width: calc(33.3333% - 30px);margin: 0 15px 30px;}
.benefits-box h3 {letter-spacing: 0;margin: 0;padding: 0 0 10px;}
.benefits-box .vc_single_image-wrapper {background: #EBF1FE;width: 60px;height: 60px;border-radius: 5px;align-items: center;
display: flex !important;justify-content: center;margin: 0 0 20px;}
.why-builderfly-section h2{padding: 0 0 15px; margin: 0;}
.why-builderfly-section p{padding: 0 0 30px;}

/*faq*/
.howtopages .newblogfaqsec .descitem {margin-bottom: 30px !important;}
.howtopages.newblogfaqsec .descitem:last-child{border-bottom: 1px solid rgba(0,0,0,0.4);}
.howtopages .newblogfaqsec .descitem ul li {padding-left: 0;line-height: 1.5;list-style: none;padding: 8px 0; display: flex;}
.howtopages .newblogfaqsec .descitem ul li::before {content: "\f00c";font-weight: 700;font-family: "Font Awesome 5 Free";background: none;
padding: 0 30px 0 0;color: #37BA32;}

/*Why-ecommerce-boxes*/
.ew-block h2{color: #fff;}
.ew-block h2 strong{color:#FFE44F;}
.ew-block .easystep-person-img{padding: 0 15px;}

.why-ecommerce-boxes {padding: 60px 15px 0;display: flex;flex-wrap: wrap;}
.why-ecommerce-section{counter-reset: section;}
.why-ecommerce-section {padding-right: 8%;display: flex;}
.why-ecommerce-boxes .easystepbox {width: calc(50% - 30px);max-width: 420px;padding: 50px 20px 20px;margin: 0 14px 28px !important;position: relative;}
.why-ecommerce-boxes .easystepbox:before {background: #FFE44F;}
.ai-easy-steps h2 strong{color: #355CEC;}
.ecommerce-easystep .easystepbox {width: calc(50% - 120px);box-shadow: 0px 0px 60px rgba(221, 226, 238, 0.7);border-radius: 10px;
padding: 20px;margin: 0 120px 58px 0;position: relative;}
.ecommerce-easystep .easystepbox::before {right: -135px;position: absolute;font-size: 24px;font-weight: 500;top: 50%;left: auto;transform: translateY(-50%);}
.ecommerce-easystep .easy-step-boxes .wpb_wrapper > .easystepbox:nth-child(2n+2) {margin:18% 0 0 auto !important;}
.ecommerce-easystep .easy-step-boxes .wpb_wrapper > .easystepbox:nth-child(2n+2)::before {left: -150px;right: auto;}
.ecommerce-easystep .easy-step-boxes .wpb_wrapper {display: flex;flex-wrap: wrap;align-items: flex-start;position: relative;}
.ecommerce-easystep .easy-step-boxes::before {content: "";border-right: #355CEC dashed 2px;position: absolute;left: 50%;height: 100%;
margin: 0 0 0 -50px;}

/*How to start eCommerce page*/
.howto-banner-video{text-align: center;}
.howto-banner-video iframe {
	background: linear-gradient(283.85deg, #426AB1 0.28%, #2D4774 100%, #2D4774 100%);
	padding: 20px;
	box-shadow: 5px 16px 40px rgba(43, 43, 43, 0.2);
}
.start-ecommerce-banner::before {content: "";background: linear-gradient(183.4deg, #426AB1 3%, #2D4774 97.42%, #2D4774 97.42%);
width: 100%;height: 464px;position: absolute;left: 0;bottom: 0px;transform: matrix(-1, 0, 0, 1, 0, 0);z-index: -1;}
.scroll-animation {overflow: inherit !important;}
.sticky-image {position: sticky !important;top: 50px;}
.scroll-animation-bg {background: linear-gradient(183.4deg, #426AB1 3%, #2D4774 97.42%, #2D4774 97.42%);height: 236px;position: relative;
margin: 0 -15px;bottom: -130px;transform: matrix(-1, 0, 0, 1, 0, 0);z-index: -1;}
.create-online-store h2{margin-top: -40px; color: #fff;}
.create-store-steps {min-height: 400px;padding: 40px 0;}
.create-store-steps h3 {padding: 0 0 15px;margin: 0;}
.create-store-steps p {font-size: 16px;color: #666;}
.intro-section {padding-bottom: 0;}
/*.create-online-store .vc_col-sm-6 {position: static; }*/
.various-category{padding: 80px 0; overflow: hidden;}
.various-category{background: linear-gradient(183.4deg, #426AB1 3%, #2D4774 97.42%, #2D4774 97.42%); content: ""; height: 100%;width: 100%;}
.various-category .container-small {margin: 0 auto;}
.various-category::before, .various-category::after {background: #EBF1FE;left: -192px;top: 0;height: 400px;content: "";width: 400px;
z-index: -1;opacity: 0.07; position: absolute;z-index: 1;border-radius: 100%;border: #000 solid 80px; bottom: auto;}
.various-category::after {background: #EBF1FE;right: -192px;left: auto;top: auto;bottom: -30px;width: 400px;height: 400px;}
.various-category h2 {color: #fff;padding: 0 0 60px;}
.various-category h2 strong {color: #FFE44F;}
.vc-box {background: #fff;border-radius: 5px;display: flex !important;height: 70px;margin-bottom: 40px !important;align-items: center;
padding: 20px;justify-content: space-between;}
.vc-box::before {content: "\f061";font-size: 18px;font-family: "Font Awesome 5 Free";order: 2;font-weight: 700;}
.vc-box p {padding: 0;color: #000;font-size: 18px;}

/*End How to start eCommerce */

/*How To Manage Your Online Store On The Go? Page*/
.banner-side-text {padding: 60px 0px 0px;}
.howtopages .homebanner .banner-side-text .desc {padding: 0px 15px 0;}
.side-banner-text {padding: 80px 15px 60px;}
.side-banner-text p{color: #000;}
.banner-with-bg .wpb_column::before {content: "";height: 359px;background: linear-gradient(92.74deg, #09172F 45%, #296383 100.4%);
transform: matrix(1, 0, 0, -1, 0, 0);position: absolute;left: 0;top: 0px;width: 100%;}
.online-tutorial-step-box {
	background: #fff;
	box-shadow: 0px 0px 60px rgba(221, 226, 238, 0.7);
	border-radius: 10px;
	padding: 30px;
	margin-bottom: 50px !important;
	margin-top: 50px !important;
}
.online-tutorial-step-section {
	justify-content: space-between;
	display: flex;
	align-items: flex-start;
}
.mt200{margin-top: 200px;}
.online-tutorial-step-box h3 {
	margin: 10px 0;
}
.online-tutorial-step-box img {
	border: 1px solid #E3E3E3;
	border-radius: 10px;
}
/*End How To Manage Your Online Store On The Go? Page*/

@media screen and (max-width: 1199px){
.need-mobile-app-section {display: flex;flex-wrap: wrap;}
.need-mobile-image-section {display: flex;flex-wrap: wrap;}
.need-mobile-image-section .wpb_wrapper {display: flex;flex-wrap: wrap;height: 100%;}
.easystep-person-img{margin-top: auto; }
.design-your-app h3{font-size: 24px;}

}
@media screen and (max-width: 1023px){
/*header bg pages*/
.page-id-13039 .logo img, .page-id-13171 .logo img {filter: inherit;}
.page-id-13039 .main-navigation .nav-menu > li > a, .page-id-13171 .main-navigation .nav-menu > li > a {color: #000;}
/*end*/

.need-mobile-image-section h2 {font-size: 42px;}
.easystepbox{width: 100%;}
.design-your-app h3 {font-size: 20px;}
.benefits-mobileapp-boxes .benefits-box {width: 100%;}

}
@media screen and (max-width: 767px){
/*header bg pages*/
.page-id-13039 .desc h1, .page-id-13171 .desc h1 {font-size: 32px;}
/*end*/

.howtopages .homebanner {margin-bottom: 60px;padding-bottom: 0;}
.howtopages .homebanner .desc {padding-left: 15px;padding-right: 15px;}
.easy-step-boxes {padding-right: 0;}
.easystepbox {margin: 0 0 60px !important;}
.need-mobile-text-section .wpb_wrapper h3, .need-mobile-text-section .wpb_wrapper p {padding: 0px 0 10px 95px;}
.need-mobile-text-section .wpb_wrapper h3::before{left: 15px;}

}