* { -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
.div-button:focus { outline: 0; border: none; cursor: pointer }
a, button, input[type=submit] { transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -ms-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; cursor: pointer }
html { min-height: 100%; position: relative; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent }
body { margin: 0; padding: 0; font-size: 16px; color: #696f74; line-height: 1.6; background-color: #fff; font-weight: 400; font-family: Arial, Helvetica, sans-serif }
h1, h2, h3, h4, h5, h6, p { margin: 0 }
p { line-height: 30px }
a { text-decoration: none }
a { color: #000 }
ol, ul { margin: 0; padding: 0; list-style: none }
button:focus { outline: 0 }
.headBox { max-width: 710px; margin: 0 auto; text-align: center }
.headBox h2 { text-align: center; font-size: 32px; font-weight: 500; line-height: 50px; color: #24282c; margin-bottom: 20px }
.btn { font-size: 15px; line-height: 18px; font-weight: 500; padding: 10px 25px; border-radius: 4px }
.btn-o, .reqQuote .btn { background: #ff6501; color: #fff; box-shadow: 0 3px 6px #ff650133 }
.btn-o:hover, .reqQuote .btn:hover { background-color: #1d2538; color: #fff; box-shadow: none }
.btn-b { background: 0 0; color: #24282c; border: 1px solid #4a97fc; border-radius: 6px; font-size: 18px; line-height: 22px; font-weight: 400; display: inline-block }
.btn-b:hover { background: #4a97fc; color: #fff }
.btn-w { background: 0 0; border: 1px solid #ff6501; color: #ff6501 }
.btn-w:hover { border: 1px solid #1d2538; color: #1d2538 }
.btn .fa { margin-left: 10px }
.container { width: 100%; max-width: 1170px; padding: 0 15px; margin: 0 auto }
.row { padding: 0; margin-left: -15px; margin-right: -15px }
.col12 { padding: 0 15px; width: 100% }
.col9 { padding: 0 15px; width: 75% }
.col3 { padding: 0 15px; width: 25% }
.flex { display: flex }
.bw { justify-content: space-between }
.vc { align-items: center }
.ib { display: inline-block }
.header { position: relative }
.header-inner { display: flex; align-items: center; justify-content: space-between;}
.logo img { vertical-align: top }
.header-button {/*display:none;*/ padding: 30px 0; }
.start-button { background: #006c9f; border-radius: 5px; line-height: 40px; color: #fff; padding: 0 25px; box-shadow: 0 3px 4px rgba(8,152,201,.35); display: block; font-weight: 600; font-size: 15px; margin-right: 0 }
.toggle-button { width: 40px; background: 0 0; border: none; padding: 0 }
.toggle-button span { background: rgba(0,0,0,.5); width: calc(100% - 15px); display: block; height: 4px; margin-bottom: 6px }
.toggle-button span:nth-child(2) { width: 100% }
.toggle-button span:last-child { margin-bottom: 0 }
.main-menu nav>ul { margin: 0; padding: 0; display: flex; align-items: center }
.main-menu nav>ul>li { margin-right: 40px; padding: 28px 0 33px }
.main-menu nav>ul>li:last-child { margin-right: 0 }
.main-menu nav>ul>li>a, .main-menu nav>ul>li>button { color: #333; font-size: 15px; line-height: 40px; background: 0 0; padding: 0; border: none }
.parent:after { content: ""; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #333; display: inline-block; vertical-align: middle; margin: 0 0 0 7px }
.main-menu nav ul li>a:focus, .main-menu nav>ul>li>a:hover { text-decoration: none; color: #0898c9 }
.demo-button>a, .main-menu nav>ul>li.demo-button>a, .main-menu nav>ul>li.started-button>a, .started-button>a { background: #0898c9; border-radius: 5px; line-height: 40px; color: #fff; padding: 0 25px; display: block; font-weight: 600; font-size: 15px; font-weight: 400; border: none }
.main-menu nav>ul>li.started-button>a:focus, .main-menu nav>ul>li.started-button>a:hover, .started-button>a:focus, .started-button>a:hover { background: #057499 }
.demo-button>a:focus, .demo-button>a:hover, .main-menu nav>ul>li.demo-button>a:focus, .main-menu nav>ul>li.demo-button>a:hover { background: #0a136e }
.demo-button>a, .main-menu nav>ul>li.demo-button>a { background: #2a338e }
.close-icon { position: absolute; right: 15px; top: 15px; padding: 0; border: none; background: 0 0; display: none }
.submenu { position: absolute; left: 0; top: 100%; width: 100%; z-index: 99; background: #fff; border-bottom: 1px solid #eee; border-top: 1px solid #eee; display: none }
.submenu ul { display: flex; align-items: center; border-left: 1px solid #eee; margin: 0 }
.submenu ul li { border-right: 1px solid #eee; width: 33.333% }
.submenu ul li a { padding: 30px 20px; display: block; color: #000 }
.submenu ul li a h3 { margin: 0 0 15px; font-size: 18px; font-weight: 600 }
.submenu ul li a p { font-size: 14px; line-height: 22px; color: #999 }
.banner { position: relative; margin-top: 100px }
.banner .container { height: 590px; position: relative }
.bannerCaption {/*position:absolute;top:50%;transform:translate(0,-50%);z-index:9;left:0;text-align:left*/ }
.container.bannerCaption { position: relative; z-index: 1; padding: 9% 0; }
.bannerCaption h1 { font-size: 42px; font-weight: 400; line-height: 48px; margin-bottom: 29px; color: #000 }
.bannerCaption ul { width: 100%; display: flex; justify-content: flex-start }
.banUl1 { margin-bottom: 35px }
.banUl1 li { position: relative; padding: 0 15px }
.banUl1 li:nth-child(1) { padding-left: 0 }
.banUl1 li:after { position: absolute; content: ''; right: 0; top: 2px; width: 2px; height: 24px; background: #d0cbe1 }
.banUl1 li:nth-last-child(1):after { display: none }
.banUl1 li a { color: #d0cbe1; font-size: 18px; line-height: 24px }
.bannerCaption .btn { font-size: 16px; line-height: 20px; display: inline-block; vertical-align: top; height: 40px; cursor: pointer; border-radius: 4px; background: #0898c9; border: none }
.tabList { background: #fff; border-bottom: 1px solid #ebedf0; position: sticky; top: 0; z-index: 50 }
.tabFrame { display: flex; align-items: center; justify-content: space-between }
.tabFrame ul.tabList-link { justify-content: flex-start; display: flex; align-items: center }
.tabFrame ul.tabList-link li { margin-right: 65px }
.tabFrame ul.tabList-link li:last-child { margin-right: 0 }
.tabFrame ul { justify-content: flex-start; display: flex; align-items: center }
.tabFrame ul.button-row li { margin-right: 20px }
.tabFrame ul.tabList-link li button { font-size: 16px; line-height: 20px; color: #24282C99; background: 0 0; border: 0; padding: 20px 0; position: relative; cursor: pointer }
.tabFrame ul.active_1.tabList-link li.link_1 button, .tabFrame ul.active_2.tabList-link li.link_2 button, .tabFrame ul.active_3.tabList-link li.link_3 button, .tabFrame ul.active_4.tabList-link li.link_4 button, .tabFrame ul.active_5.tabList-link li.link_5 button, .tabFrame ul.active_6.tabList-link li.link_6 button, .tabFrame ul.active_7.tabList-link li.link_7 button, .tabFrame ul.tabList-link li button:hover { color: #302848 }
.tabFrame ul.active_1.tabList-link li.link_1 button:after, .tabFrame ul.active_2.tabList-link li.link_2 button:after, .tabFrame ul.active_3.tabList-link li.link_3 button:after, .tabFrame ul.active_4.tabList-link li.link_4 button:after, .tabFrame ul.active_5.tabList-link li.link_5 button:after, .tabFrame ul.active_6.tabList-link li.link_6 button:after, .tabFrame ul.active_7.tabList-link li.link_7 button:after, .tabFrame ul.tabList-link li button:hover:after { position: absolute; content: ''; width: 100%; height: 2px; background: #302848; left: 0; bottom: 0 }
.details { padding: 80px 0; position: relative }
.dtlFrame { display: flex; justify-content: space-between; align-items: center }
.dtlFrame ul { padding-left: 15px; margin-bottom: 30px }
.dtlFrame ul li { width: 100%; margin-bottom: 10px; list-style-type: disc; padding-left: 5px }
.dtlFrame1 .left, .dtlFrame2 .right { max-width: 600px; width: 100% }
.dtlFrame1 .right, .dtlFrame2 .left { width: 100% }
.dtlFrame1 .right { max-width: 538px }
.dtlFrame2 .left { max-width: 549px }
.dtlFrame2 .left img { max-width: 497px; max-height: 713px }
.text-b { font-size: 16px; font-weight: 500; line-height: 50px; color: #4b98fd; text-transform: uppercase }
.text-o { font-size: 18px; line-height: 50px; color: #ff6501; text-transform: uppercase }
.dtlFrame h2 { font-size: 36px; font-weight: 500; line-height: 50px; color: #24282c; margin-bottom: 30px }
.weApp .dtlFrame h2 { font-size: 28px }
.play { display: inline-block; line-height: 1px; vertical-align: top }
.play:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 40px; height: 40px; background: #ff6501; border-radius: 50%; animation: pulse-border 1.5s ease-out infinite }
.play:after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 40px; height: 40px; background: #ff6501; border-radius: 50%; transition: all .2s }
@keyframes pulse-border { 0% {
transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity:1
}
100% {
transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity:0
}
}
.textBtn .play { position: absolute; top: -10px; right: -50px }
.dtlFrame p { margin-bottom: 20px }
.textBtn { color: #ff6501; padding-bottom: 5px; border-bottom: 2px solid #ff6501; position: relative }
.textBtn:hover, .textBtn:hover .play { opacity: .7 }
.techSlider .headBox h2 { color: #24282c }
.techSlider .headBox p { color: #696f74 }
.techSlider .headBox { margin-bottom: 80px }
.tech-list ul { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap }
.tech-list ul li { margin-left: 20px; margin-right: 20px }
.weApp { padding: 90px 0 100px; border-top: 1px solid #ebedf0; border-bottom: 1px solid #ebedf0; position: relative }
.weApp:after { position: absolute; content: ''; width: 100%; top: 0; left: 0; height: 100%; background: #21b5ae; opacity: .78; z-index: 0 }
.weApp .container { position: relative; z-index: 1 }
.weApp * { color: #fff }
.weApp .dtlFrame h2, .weApp .headBox h2 { color: #f3efff }
.weApp .headBox { margin-bottom: 80px }
.weApp .dtlFrame2 { margin-bottom: 70px }
.weApp .dtlFrame2 .right { max-width: 490px; padding-right: 30px }
.weApp .dtlFrame1 .right, .weApp .dtlFrame2 .left { max-width: 600px }
.weApp .dtlFrame1 .left { max-width: 450px }
.weApp .dtlFrame1 { margin-bottom: 0 }
.weApp .dtlFrame2 .left img { max-width: 519px; max-height: 715px }
.weApp .dtlFrame1 .right img { max-width: 610px; max-height: 433px }
.weApp .storeUl { padding: 0; margin: 0 }
.weApp .storeUl li { list-style: none; padding: 0; width: auto }
.weApp button { display: none }
.mx100 { max-width: 100px }
.choosePlan { background: #fcfcfc; padding: 100px 0 }
.chooseTable { margin-top: 50px }
.chooseTable table { width: 100%; border-collapse: collapse }
.chooseTable table td, .chooseTable table th { text-align: center; padding: 20px 30px }
.chooseTable table th { background: #302848; font-size: 22px; font-weight: 500; color: #f3efff; line-height: 27px }
.chooseTable table thead tr.topThead th { font-size: 18px; color: #fff; line-height: 22px; font-weight: 400; background: 0 0 }
.chooseTable table thead tr.topThead th.grey { background: #d0cbe1; color: #302848 }
.chooseTable table thead tr.topThead th.dark { background: #302848; color: #fff }
.chooseTable table thead tr.topThead th.shapeBorder { border-radius: 4px 4px 0 0 }
.chooseTable table tbody td:first-child, .chooseTable table thead th:first-child { text-align: left }
.chooseTable table tbody td { border-bottom: 1px solid #ebedf0; font-size: 18px; font-weight: 400; line-height: 22px; color: #24282c }
.chooseTable table tbody td.notAvailable { opacity: .4 }
.storeUl li a:hover { opacity: .6 }
.cloneslider { padding: 60px 0 145px; position: relative }
.cloneslider:after { position: absolute; content: ''; top: 140px; left: -510px; width: 1096px; height: 100%; z-index: -1 }
.cloneslider .headBox { margin-bottom: 85px }
.clonesliderFrame { position: relative }
.cloneslider .left { width: 1200px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0 }
.cloneslider .left:after { position: absolute; content: ''; top: 10px; left: -140px; width: 479PX; height: 100%; z-index: -1 }
.cloneslider .left img { max-width: 500px; max-height: 853px }
.cloneslider .right { width: 100%; margin: 0 auto; overflow-x: visible }
.productSlider { padding: 0 0; text-align: center }
.productSlider div .div-slide { width: 20%; padding: 0 15px; margin: 0 }
.productSlider div .div-slide .sfaDiv { border-radius: 37px; overflow: hidden; border: 1px solid rgba(112,112,112,.33); box-shadow: 0 0 20px rgb(0 0 0 / .16); margin-top: 10px }
.productSlider div .div-button-next, .productSlider div .productSlider div .div-button-prev { transform: rotate(180deg); margin-top: -29px }
.productSlider div>div::-webkit-scrollbar {
display:none;
width:0;
background:0 0
}
.productSlider div>div:focus { border: 0; outline: 0 }
.productSlider div>div { -ms-overflow-style: none; overflow: -moz-scrollbars-none; scrollbar-width: none }
.productSlider div .div-button { height: 50px; width: 50px; cursor: pointer; transition: all .3s ease-in-out }
.productSlider div .div-button:hover { opacity: .6 }
div[role=tablist].tabs-with-flex { display: flex; flex-wrap: wrap }
div[role=tablist].tabs-with-flex [role=tab] { flex-grow: 1; text-align: center; padding: var(--space-1) }
div[role=tablist].tabs-with-flex [role=tab][selected] { outline: 0; border-bottom: 2px solid var(--color-primary) }
div[role=tablist].tabs-with-flex [role=tabpanel] { display: none; width: 100%; order: 1; padding: var(--space-4) }
div[role=tablist].tabs-with-flex [role=tab][selected]+[role=tabpanel] {
display:block
}
div[role=tablist].tabs-with-selector { display: flex }
div[role=tablist].tabs-with-selector { display: flex }
div[role=tablist].tabs-with-selector [role=tab] { width: 100%; text-align: center; padding: var(--space-1) }
div.tabpanels [role=tabpanel] { display: none; padding: var(--space-4) }
div.tabpanels [role=tabpanel][selected] { outline: 0; display: block }
.feature { padding: 35px 0 }
.feature .headBox { margin-bottom: 90px }
.feature .left { max-width: 315px; width: 100%; padding-right: 35px }
.ftrContent div[role=tablist].tabs-with-selector { display: block }
.feature .left ul li button, .feature div[role=tablist].tabs-with-selector [role=tab] { font-size: 17px; font-weight: 400; color: #696f74; padding: 13px 20px 13px; background: #fff; margin-bottom: 10px; border: 0; width: 100%; text-align: left; cursor: pointer }
.feature .left ul li button:hover, .feature .left ul.active_11 li.link_1 button, .feature .left ul.active_12 li.link_2 button, .feature .left ul.active_13 li.link_3 button, .feature .left ul.active_14 li.link_4 button, .feature .left ul.active_15 li.link_5 button, .feature .left ul.active_16 li.link_6 button, .feature .left ul.active_17 li.link_7 button, .feature .left ul.active_18 li.link_8 button, .feature .left ul.active_19 li.link_9 button, .ftrContent div[role=tablist].tabs-with-selector [role=tab][selected] { background: #14101f; color: #fff }
.feature .left ul li:last-child button { margin-bottom: 0 }
.feature .right { padding-left: 60px; width: calc(100% - 315px) }
.feature .right button { font-size: 30px; line-height: 50px; color: #24282c; margin-bottom: 30px; font-weight: 400; pointer-events: none; border: 0; background-color: transparent; padding: 0; width: 100%; text-align: left }
.feature .right p { margin-bottom: 40px }
.feature .right ul li h3 { font-size: 20px; line-height: 50px; font-weight: 500; color: #24282c }
.feature .right ul { display: flex; justify-content: start; flex-wrap: wrap }
.feature .right ul li { width: 50%; max-width: 320px; margin-right: 95px; margin-bottom: 40px }
.feature .right ul li:nth-child(2n) { margin-right: 0 }
.feature .right ul li p { margin: 0 }
.feature .right .cmnSec { margin-bottom: 80px }
.feature .right .featureArrowBox { width: 100%; text-align: center }
.feature .right button.featureArrow { position: relative; z-index: 9; display: inline-block; pointer-events: all; margin: 50px auto 50px; text-align: center; float: none; background: #fff; border: none; font-size: 18px; width: 40px; height: 40px; box-shadow: 0 0 7px rgba(0,0,0,.2); border-radius: 3px; transition: all .3s ease-in-out; cursor: pointer; line-height: 40px }
.feature .right button.featureArrow:hover { background: #000; color: #fff }
.faq { padding: 105px 0 95px; position: relative; background: #f9f9f9 }
.faq .headBox { margin-bottom: 70px }
.accParent div { max-width: 570px; width: 100% }
.faq section { background: #fff; border-radius: 5px; margin-bottom: 40px }
.faq section h4 { padding: 35px 65px 30px 30px; font-weight: 500; font-size: 20px; line-height: 35px; color: #696f74; position: relative; background: #fff; border: 1px solid #ebedf0 }
.faq section h4:focus { outline: 0 }
.faq section .fa { position: absolute; right: 45px; top: 45px; font-size: 14px }
.faq section .toggle-content { padding: 0 30px 35px }
.faq section .toggle-content p, .faq section .toggle-content ul { margin-bottom: 10px }
.faq section .toggle-content ul li { margin-bottom: 5px }
.faq section[expanded] .fa { color: red; transform: rotate(-180deg); top: 48px }
.faq section[expanded] { box-shadow: 0 3px 25px #0000000D }
.faq section[expanded] h4 { border: 1px solid transparent; color: #ff6501 }
.accParent div section:last-child { margin-bottom: 0 }
.like { padding: 70px 0; border-top: 1px solid #ebedf0; border-bottom: 1px solid #ebedf0; text-align: center; position: relative }
.like:after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: #080511; opacity: .89; z-index: 0 }
.like .container { position: relative; z-index: 1 }
.like .headBox h2 { color: #f3efff }
.like p { color: #d0cbe1 }
.like ul { max-width: 250px; margin: 20px auto 30px }
.contact { padding: 60px 0 30px; background: #fff; position: relative }
.contact h2 { margin-bottom: 50px }
.iframeForm { width: 100%; height: 660px; max-width: 769px; margin: 0 auto }
.iframeForm amp-iframe { height: 100%; width: 100% }
.productSliderFrame { margin-top: 50px; margin-bottom: 50px }
.testBox h3 { font-size: 18px; font-weight: 700; line-height: 38px; color: #24282c }
.btn, .copyright a, .f-row ul li a, .f-top a, .faq section, .faq section h4, .faq section h4 .fa, .feature .left ul li button, .menu-item .show li, .navMenu>ul.btnUl>li.xsVisible>a>button, .navMenu>ul>li a.btn, .storeUl li a, .tabFrame ul li button, .textBtn, .trans { transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out }
.headerFrame { position: relative }
.menu-item .hide { display: none }
.menu-item .show { position: absolute; display: none; z-index: 99; width: 900px; padding: 40px 30px 20px; background: rgba(31,36,54,.98); border-radius: 4px; right: 0; top: 109px }
.menu-item .show li { display: inline-block; width: 50%; margin: 0 -2px 20px; min-height: 76px }
.menu-item .show li:nth-child(1), .menu-item .show li:nth-child(2n+1) { padding-right: 15px }
.menu-item .show li:hover { opacity: .7 }
.menu-item .show li a { position: relative; padding-left: 95px }
.menu-item .show .menuImg { position: absolute; top: 0; left: 0 }
.menu-item .show li a h4 { color: #fff; font-size: 22px; font-weight: 700; line-height: 27px; margin-bottom: 5px; text-transform: capitalize }
.menu-item .show li a p { font-size: 18px; line-height: 22px; color: #fff; opacity: .55; text-transform: capitalize }
.navMenu>ul.btnUl, .navMenu>ul.btnUl>li { margin: 0 }
.navMenu>ul>li a.btn:hover { background-color: #1d2538; color: #fff; box-shadow: none }
.xsVisible { display: none }
.top-arrow button { background: #fff; border: none; color: #f05a23; font-size: 18px; width: 40px; height: 40px; box-shadow: 0 0 7px rgba(0,0,0,.2); border-radius: 3px; cursor: pointer }
.top-arrow { position: fixed; right: 15px; bottom: 15px; z-index: 9999 }
.testSlider { padding: 65px 0 100px; background: #f9f9f9 }
.testFrame { background: #fff; max-width: 935px; margin: 0 auto; margin-top: 40px; padding: 30px 0 0 }
.testFrame .div-slide { width: 100%; vertical-align: top; margin: 0 }
.testFrame div .div-button { width: 10px; height: 18px; cursor: pointer; transition: all .3s ease-in-out }
.testFrame div .div-button:hover { opacity: .6 }
.testBox { max-width: 670px; margin: 0 auto; position: relative; margin-top: 40px; padding: 30px 10px 20px; text-align: center }
.testBox:after { position: absolute; content: ""; top: -40px; left: 0; right: 0; width: 57px; height: 42px; margin: 0 auto }
.testBox p.desc { font-size: 20px; font-style: italic; line-height: 38px; color: #696f74; margin-bottom: 30px }
.clientImg { width: 80px; height: 80px; border-radius: 50%; display: block; margin: 0 auto 25px; background-size: cover; background-position: center; overflow: hidden }
.clientImg img { max-width: 80px; max-height: 80px }
.rec { background: #fff; padding: 90px 0 }
.rec .tbox { display: flex; justify-content: space-between; margin-bottom: 50px }
.rec .tbox .headBox { max-width: 540px; margin: 0 }
.rec .tbox .headBox * { text-align: left }
.rec .ibox img { max-width: 243px; max-height: 188px }
.rec .ibox { max-width: 243px; width: 100% }
.rec .recSlider div .div-slide { width: 40%; padding: 0 10px; min-width: 760px }
.rscont { min-height: 150px }
.rsImg img { max-width: 278px; max-height: 60px }
.rec .recSlider div .div-slide *, .testFrame .div-slide { white-space: normal }
.recSlider div>div::-webkit-scrollbar, .testFrame div>div::-webkit-scrollbar {
display:none;
width:0;
background:0 0
}
.recSlider div>div:focus, .testFrame div>div:focus { border: 0; outline: 0 }
.recSlider div>div, .testFrame div>div { -ms-overflow-style: none; overflow: -moz-scrollbars-none; scrollbar-width: none }
.rsBox { padding: 20px 20px; border: 1px solid #eee; border-radius: 15px }
.rsBox .rstop { margin-bottom: 15px }
.rsBox .rstop, .rsBox .rstop ul { display: flex; justify-content: space-between; align-items: center }
.rsBox .rstop ul li img { max-width: 16px; max-height: 17px }
.rscont { margin-bottom: 20px }
.rsBox h5 { text-transform: uppercase; font-size: 16px }
.rsUL { display: flex; flex-wrap: wrap; justify-content: flex-end }
.rsUL ul { max-width: 100px; width: 100% }
.recSlider div .div-button { width: 50px; height: 50px; cursor: pointer; transition: all .3s ease-in-out }
.recSlider div .div-button:hover { opacity: .6 }
.port { padding: 80px 0 90px; position: relative }
.port::after { position: absolute; content: ''; width: 100%; top: 0; left: 0; height: 100%; background: #302848; opacity: .78; z-index: 0 }
.port .container { position: relative; z-index: 1 }
.port .container .headBox { margin: 0 auto 63px }
.port .container .headBox * { color: #fff }
.port div { text-align: center }
.port div .div-slide { width: 50%; padding: 0 32px; vertical-align: top }
.port div .div-slide * { white-space: normal }
.port div>div::-webkit-scrollbar {
display:none;
width:0;
background:0 0
}
.port div>div:focus { border: 0; outline: 0 }
.port div>div { -ms-overflow-style: none; overflow: -moz-scrollbars-none; scrollbar-width: none }
.port div .div-button { width: 50px; height: 50px; cursor: pointer; border: 1px solid #33333336; transition: all .3s ease-in-out; border-radius: 50% }
.port div .div-button:hover { opacity: .6 }
.port { padding: 80px 0 90px; position: relative }
.port .portBox { padding: 0 0; border-radius: 20px; background: #fff; position: relative; overflow: hidden; z-index: 0 }
.portTop { padding: 0 0; position: relative; z-index: 1 }
.portTop ul { display: flex; justify-content: center }
.portBottm { padding: 30px 15px }
.portBottm { text-align: center }
.portBottm p { font-size: 26px; line-height: 32px; font-weight: 400; color: #24282c; text-align: center; margin: 0 0 25px }
.portBottm ul { display: flex; justify-content: center }
.portBottm ul li { padding: 0 10px }
.portBottm ul li a { min-width: auto }
.portBottm a.btn { background: #ffebce 0 0 no-repeat; border-radius: 16px; height: 50px; line-height: 50px; text-align: center; color: #ea4203; font-size: 20px; font-weight: 700; display: inline-block; vertical-align: top; min-width: 300px; padding: 0 }
.copyright-box { color: #838383; font-size: 14px; line-height: 19px; padding: 7px 0; border-top: 1px solid #ececec; text-align: center }
.copyright-subtext { font-size: 12px; margin-top: 3px }
.footer-top { padding: 65px 0 35px }
.footer-top-inner { width: 100%; display: flex; justify-content: space-between }
.social-box { margin: 0 0 30px; padding: 0; display: flex }
.social-box li { margin-right: 15px }
.social-box li:last-child { margin-right: 0 }
.social-box li a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(0,127,184,.2); border-radius: 100% }
.social-box li a:hover { background: #007fb8 }
.footer-col-title { font-weight: 700; font-size: 16px; line-height: 22px; color: #333; margin-bottom: 15px }
.footer-link ul { margin: 0; padding: 0 }
.footer-link ul li { margin-bottom: 5px }
.footer-link ul li:last-child { margin-bottom: 0 }
.footer-link ul li a { color: #000; font-size: 14px; line-height: 34px }
.footer-address { max-width: 375px }
.footer-address ul li { margin-bottom: 5px; display: flex; color: #000; font-size: 18px; line-height: 34px }
.footer-address ul li span { width: 70px; margin-right: 15px; color: #000; font-size: 14px; line-height: 34px }
.footer-address ul li a { color: #000; font-size: 14px }
.footer-address ul li a:focus, .footer-address ul li a:hover, .footer-link ul li a:focus, .footer-link ul li a:hover { color: #2a338e; text-decoration: none }
.solution-menu { display: flex }
.solution-menu ul { margin-right: 155px }
.solution-menu ul:last-child { margin-right: 0 }
.get-button { display: inline-block; height: 50px; line-height: 28px; padding: 11px 0 11px 24px; color: #171420; font-size: 16px; font-weight: 600; position: relative }
.get-button:before { content: ""; background: #00c9b8; opacity: .2; border-radius: 5px; position: absolute; width: 65px; height: 50px; left: 0; top: 0; transition: all .3s ease-out 0s }
.get-button:focus:before, .get-button:hover:before { width: 100px }
.get-button:focus, .get-button:hover { color: #000 }
.industries-box { padding: 65px 0 85px }
.benefit-box .headBox h2, .benefit-box .headBox p, .industries-box .headBox h2, .industries-box .headBox p { color: #fff; text-align: center }
.industries-col-box { display: flex; justify-content: space-between; margin-top: 75px }
.industries-col { background: #fff; border-radius: 10px; width: 280px; min-height: 312px; padding: 20px 20px 0; position: relative }
.industries-col:nth-child(2) { background: #00c9b8 }
.industries-col:nth-child(2) p, .industries-col:nth-child(2) p strong { color: #fff }
.industries-col p strong { color: #000; font-size: 21px; font-weight: 700; line-height: 30px }
.industries-col p { color: #000; font-size: 18px; line-height: normal; margin-bottom: 10px }
.industries-col img { position: absolute; left: 20px; bottom: 20px }
.benefit-box { padding: 90px 0 40px; background: #00093a }
.benefit-col-box { display: flex; justify-content: space-between; margin-top: 50px; padding: 0 50px }
.benefit-col ul { width: 340px }
.benefit-col ul li { position: relative; padding-left: 65px; margin-bottom: 60px }
.benefit-col ul li:last-child { margin-bottom: 0 }
.benefit-col ul li span { position: absolute; left: 0; top: 0 }
.benefit-col ul li h3 { color: #fff; font-size: 22px; line-height: normal; margin-bottom: 16px }
.benefit-col ul li p { color: #fff; font-size: 16px; line-height: 30px; margin-bottom: 8px }
.benefit-col ul li p:last-child { margin-bottom: 0 }
.benefit-col ul li p a { color: #fff; font-size: 18px; font-weight: 600 }
.benefit-col ul li p a img { margin-left: 5px; vertical-align: middle }
.review-box span { color: rgba(208,203,225,.59); font-size: 16px }
.review-box p { margin: 20px 0 30px }
.review-box p img { vertical-align: top }
.review-box .headBox h2 { color: #fff; text-align: center }
.customize-idea-box { padding: 80px 0 }
.customize-row { display: flex; align-items: center; justify-content: space-between; padding: 0 60px }
.customize-left { width: 48% }
.customize-right { width: 50%; padding-left: 10px }
.customize-left h2 { color: #fff; font-size: 36px; line-height: 50px; font-weight: 800; margin-bottom: 20px }
.customize-left p { color: #fff; font-size: 16px; line-height: 30px; margin-bottom: 40px }
.customize-button { display: block; width: 193px; height: 50px; border-radius: 5px; background: #fff; text-align: center; line-height: 50px; color: #333; font-size: 16px; font-weight: 600 }
.customize-button:focus, .customize-button:hover { text-decoration: none; color: #fff; background: #333 }
.benefit-box div .div-button-next, .benefit-box div .div-button-prev, .customize-idea-box div .div-button-next, .customize-idea-box div .div-button-prev, .similar-app-slider div .benefit-box div .div-button-prev, .similar-app-slider div .div-button-next, .similar-app-slider div .div-button-prev { transform: rotate(180deg); margin-top: -29px; left: 0; right: auto }
.customize-website-box { background: #fff }
.customize-website-box .customize-left1 h2 { color: #24282c }
.customize-website-box .customize-left1 p { color: #696f74 }
.customize-website-box .customize-button { background: #0898c9; color: #fff }
.customize-website-box .customize-button:focus, .customize-website-box .customize-button:hover { background: #057499 }
.similar-app-col { width: 380px; margin: 10px 10px; white-space: normal; vertical-align: top }
.app-col-images { height: 312px; width: 100%; box-shadow: 0 0 6px rgba(0,0,0,.16); border-radius: 14px; overflow: hidden }
.similar-app-slider .amp-scrollable-carousel-slide:first-child { margin-left: 10px }
.similar-app-slider { display: -webkit-box; display: -ms-flexbox; display: flex }
.app-col-content { padding: 20px }
.app-col-content h3 { color: #24282c; font-size: 24px; font-weight: 600; line-height: normal; font-weight: 400; margin-bottom: 14px }
.app-col-content p { color: #696f74; font-size: 16px; line-height: 30px }
.free-demo-box { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3); z-index: 99999; transition: all .3s ease-out 0s; opacity: 0; visibility: hidden; overflow: hidden }
.free-demo-box.open { opacity: 1; visibility: visible; overflow: visible }
.demo-inner-box { width: 500px; height: 100%; overflow: auto; position: absolute; right: -100%; top: 0; background: #f9f9f9; padding: 100px 50px 100px; transition: all .3s ease-out 0s }
.free-demo-box.open .demo-inner-box { right: 0 }
.demo-popup-close:focus, .demo-popup-close:hover { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) }
.form-row { display: flex; justify-content: space-between }
.from-col { width: 100%; margin-bottom: 20px }
.three-col .from-col { width: 32% }
.two-col .from-col { width: 49% }
.from-col>label { display: block; color: #24282c; font-size: 16px; margin: 0 0 10px; font-weight: 400 }
.from-col>input { width: 100%; height: 45px; border-radius: 5px; border: 1px solid #dcdcdc; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.18); padding: 0 15px; color: #24282c; font-size: 14px }
.from-col>textarea { width: 100%; height: 105px; resize: none; border-radius: 5px; border: 1px solid #dcdcdc; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.18); padding: 15px; color: #24282c; font-size: 14px }
.from-select select { width: 100%; height: 45px; border: 1px solid #dcdcdc; border-radius: 5px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.18); padding: 0 15px; color: #24282c; font-size: 14px; cursor: pointer }
.agree-row { position: relative; padding: 0 0 0 40px; color: #24282c; font-size: 15px; line-height: 27px; margin-bottom: 30px }
.agree-row a { color: #0898c9; text-decoration: underline }
.agree-checkbox { position: absolute; left: 0; top: 0 }
.agree-checkbox input { position: absolute; left: 0; top: 0; opacity: 0 }
.agree-checkbox input+label { width: 27px; height: 27px; border-radius: 5px; border: 1px solid #dcdcdc; background: #fff; display: block; margin: 0; cursor: pointer }
.submit-button input { background: #0898c9; border: none; border-radius: 5px; line-height: 50px; color: #fff; padding: 0 30px; display: block; font-weight: 600; font-size: 16px }
.submit-button input:focus, .submit-button input:hover { background: #057499; color: #fff }
.sticky-button { position: fixed; z-index: 99; left: 0; bottom: 0; width: 100%; background: #fff; padding: 15px; box-shadow: 0 -2px 6px rgba(0,0,0,.1); display: none }
.sticky-button ul { display: flex; margin: 0; justify-content: space-between }
.sticky-button ul li { width: 49% }
.sticky-button .demo-button>a, .sticky-button .started-button>a { width: 100%; text-align: center }
@media only screen and (min-width:992px) {
.main-menu nav>ul>li:hover .submenu { display: block }
}
@media only screen and (max-width:1399px) {
.bannerCaption h1 { font-size: 32px }
}
@media only screen and (max-width:1199px) {
.main-menu nav ul li { margin-right: 30px }
.footer-about { width: 100%; text-align: center; margin-bottom: 30px }
.footer-top-inner { flex-wrap: wrap }
.social-box { justify-content: left }
.benefit-image-col { display: none }
.industries-col { padding: 25px 20px 0; width: 220px }
.industries-col p { line-height: 24px }
.bannerCaption h1, .copyright a, .copyright p, .dtlFrame h2, .f-row .col3 ul li, .f-row ul li a, .headBox h2, body, p { line-height: 1.6 }
.container { width: 970px }
.bannerCaption h1 { margin-bottom: 20px }
.dtlFrame h2, .headBox h2 { font-size: 28px }
.dtlFrame h2 { margin-bottom: 15px }
.details { padding: 50px 0 }
.f-row .col9 { padding-right: 0 }
.f-row .col9 ul { width: 33.33%; padding-right: 15px }
.f-row ul li { margin-bottom: 10px }
.f-row ul li a { font-size: 15px; color: rgba(36,40,44,.6) }
.f-icon { width: auto; margin-right: 15px }
.f-row .col3 { width: 30% }
.f-row .col9 { width: 70% }
.copyright a, .copyright p { font-size: 14px; color: rgba(36,40,44,.6) }
.navMenu>ul>li a, .navMenu>ul>li button { font-size: 16px }
.tabFrame ul li { margin-right: 50px }
.dtlFrame1 .right { max-width: 430px; padding-left: 30px }
.dtlFrame2 .left { max-width: 430px; padding-right: 30px }
.cloneslider .left { max-width: 940px }
.cloneslider .left img { max-width: 300px; max-height: 512px }
.cloneslider .left::after { display: none }
.slideImgBox { width: 300px; height: 531px }
.feature .left { max-width: 250px; padding-right: 30px }
.feature .right { padding-left: 30px; max-width: calc(100% - 250px) }
.feature .right ul li { margin-right: 15px }
.accParent div { max-width: 50% }
.accParent div:nth-child(1) { padding-right: 15px }
.accParent div:nth-child(2) { padding-left: 15px }
.faq section h4 { padding: 20px 30px 15px 20px }
.faq section .fa { top: 30px; right: 15px }
.faq section[expanded] .fa { top: 33px }
.feature .right button { font-size: 26px; margin-bottom: 15px }
.techSlider .container ul li img { max-width: 180px; max-height: 63px }
.portBottm p { font-size: 20px }
.similar-app-slider .app-col-images { height: 240px }
}
@media only screen and (max-width:991px) {
.container { width: 750px }
.logo img { max-width: 200px; max-height: 42px }
.main-menu nav ul li { margin-right: 0 }
.main-menu nav ul li.started-button a { padding: 0 15px }
.banner-left { max-width: 475px; padding-right: 40px }
.build-left, .feature-right, .tab-left { display: none }
.build-content-box { justify-content: center }
.new-feature-title-left { max-width: 550px }
.tab-right { width: 100% }
.header-button { display: flex }
.close-icon { display: block }
.header { padding: 15px 0 }
.main-menu { opacity: 0; visibility: hidden; overflow: hidden; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(42,51,142,.98); padding: 60px 20px; transition: all .5s ease-out 0s; overflow: auto }
.main-menu.open { opacity: 1; visibility: visible; overflow: auto }
.main-menu nav ul { display: block; text-align: left }
.main-menu nav>ul>li { margin-bottom: 0; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1) }
.main-menu nav>ul>li:last-child { margin-bottom: 0; border: none }
.main-menu nav>ul>li>a, .main-menu nav>ul>li>button { color: #fff; font-size: 20px }
.main-menu nav>ul>li.demo-button>a, .main-menu nav>ul>li.started-button>a { margin: 0; text-align: center; width: 150px; padding: 0 15px }
.main-menu nav>ul>li.demo-button>a { background: #2d3cd7 }
.parent::after { border-top-color: #fff }
.submenu.open { display: block }
.submenu { position: static; background: 0 0; border: none }
.submenu ul { margin: 10px 0 0 }
.submenu ul, .submenu ul li { border: none }
.submenu ul li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.1); width: 100% }
.submenu ul li:last-child { border-bottom: none }
.submenu ul li a { padding: 10px 0; color: #fff }
.submenu ul li a h3 { margin-bottom: 0 }
.menu-icon1, .menu-icon2, .menu-icon3, .menu-icon4, .submenu ul li a p { color: #fff; display: none }
.footer-link ul li a { font-size: 14px; line-height: 30px }
.solution-menu ul { margin-right: 20px }
.footer-address ul li, .footer-address ul li a, .footer-address ul li span { font-size: 14px }
.industries-col { padding: 25px 20px 0; width: 175px; min-height: 340px }
.numberFrame ul li h2, .testBox h3, .testBox p.desc { line-height: 1.6 }
.navMenu { height: 79px }
.navMenu>ul>li { padding: 31px 0 }
.menu-item .show li a .menuImg { max-width: 60px; max-height: 60px }
.menu-item .show li a h4 { font-size: 18px; margin-bottom: 0 }
.menu-item .show li a p { font-size: 16px }
.menu-item .show li a { padding-left: 70px }
.menu-item .show { max-width: 720px; top: 80px }
.bannerCaption h1 { font-size: 20px; margin-bottom: 10px }
.bannerCaption h1, .bannerCaption p { max-width: 320px }
.productSliderFrame { margin-top: 30px; margin-bottom: 30px }
.dtlFrame { flex-wrap: wrap }
.dtlFrame1 { flex-flow: column-reverse }
.dtlFrame1 .left, .dtlFrame2 .right { max-width: 100%; text-align: center }
.weApp .dtlFrame h2 { max-width: 100% }
.contact { padding: 40px 0 20px }
.f-top p { font-size: 16px }
.f-top a { font-size: 14px; color: rgba(36,40,44,.6) }
.f-top { padding: 50px 0 30px; margin-bottom: 30px }
.f-row h3 { font-size: 18px; margin-bottom: 15px }
.f-row .col3 ul li { font-size: 15px }
.f-row .col9 { width: 65% }
.f-row .col3 { width: 35% }
.f-row { margin-bottom: 20px }
.f-social { margin-bottom: 10px }
.copyright { padding: 20px 0 30px }
.iframeForm { height: 820px }
.bannerCaption { max-width: 300px }
.bannerCaption h1 { font-size: 25px }
.bannerCaption ul { margin-bottom: 15px }
.bannerCaption .btn { padding: 10px 15px }
.banUl1 li a { font-size: 16px; line-height: 18px }
.bannerCaption ul .btn:nth-child(1) { margin-right: 15px }
.tabFrame ul li { margin-right: 25px }
.dtlFrame1 .right, .feature .right .cmnSec, .weApp .dtlFrame2 { margin-bottom: 30px }
.cloneslider .headBox, .dtlFrame1, .faq .headBox, .feature .headBox, .weApp .headBox { margin-bottom: 50px }
.dtlFrame1 .right { padding-left: 0 }
.dtlFrame2 .left { padding-right: 0; margin: 0 auto 30px }
.cloneslider .left { max-width: 720px; display: none }
.cloneslider .right { padding-left: 0; max-width: 100% }
.productSlider { max-width: 100% }
.choosePlan, .cloneslider, .faq, .feature, .like, .techSlider, .weApp { padding: 50px 0 }
.techSlider .div-slide { width: 33% }
.feature .left { padding-right: 15px }
.feature .right { padding-left: 15px }
.feature .right button, .feature .right ul li h3 { line-height: 1.6 }
.feature .left ul li button { margin-bottom: 10px; padding: 10px 15px 10px }
.feature .right ul li { max-width: 100%; margin-right: 0; padding-right: 0; margin-bottom: 15px; width: 100% }
.weApp .dtlFrame2 .right { padding-right: 0; margin: 0 auto 0 }
.faq section h4 { padding: 15px 30px 13px 15px; line-height: 1.4 }
.faq section .fa { top: 25px; right: 15px }
.faq section[expanded] .fa { top: 28px }
.faq section .toggle-content { padding: 0 20px 15px }
.like ul { margin: 10px auto 15px }
.techSlider div { margin-top: 50px }
.cloneslider:after, .details:after, .faq::after, .faq::before { display: none }
.field-input { width: 50% }
#web1 { display: none }
#web1.open { display: block; margin-bottom: 0 }
#web1 .left { display: none }
#web2 { display: none }
#web2.open { display: block }
#web2 .right { display: none }
#web3 { display: none }
#web3.open { display: block; margin-bottom: 0 }
#web3 .left { display: none }
.weApp button { display: block }
.weApp .weCmn { padding: 10px 15px; margin-bottom: 0; border-bottom: 1px solid #ebedf0 }
.weApp .weCmn button { margin-bottom: 0; text-align: left; font-size: 18px; font-weight: 700; position: relative; width: 100%; background: 0 0; border: 0; cursor: pointer; padding: 0 }
.weApp .weCmn button .fa { position: absolute; top: 4px; right: 0; font-size: 16px }
.weApp .weCmn button .fa.fa-minus { display: none }
.weApp .weCmn button .fa.fa-plus { display: block }
.weApp .weCmn.plus button .xsVisible.fa.fa-plus { display: none }
.weApp .weCmn.plus button .xsVisible.fa.fa-minus { display: block }
.weApp .weCmn span { display: none }
.weApp .dtlFrame { padding-top: 20px }
.weApp .headBox { text-align: center }
.weApp .dtlFrame1 .left, .weApp .weCmn .dtlFrame2 .right { text-align: left; margin: 0 }
.chooseTable table th { font-size: 18px }
.chooseTable table tbody td, .chooseTable table thead tr.topThead th { font-size: 16px }
.chooseTable table td, .chooseTable table th { padding: 10px 15px }
.weApp .row:last-child .weCmn { border-bottom: 0 }
.productSlider div .div-slide { width: 33% }
.techSlider .container ul, .techSlider .container ul.bottomUL { justify-content: space-evenly }
.rec, .testSlider { padding: 50px 0 }
.rec .recSlider div .div-slide { width: 60% }
.portBottm a { max-width: 100%; width: 100%; min-width: 100% }
.portBottm ul { flex-wrap: wrap; justify-content: center }
.portBottm ul li { width: 100%; margin-bottom: 10px }
.portBottm ul li:last-child { margin-bottom: 0 }
.testBox h3, .testBox p.desc { font-size: 16px }
.testBox h3, .testBox p.desc { line-height: 1.6 }
.testBox { padding: 10px 10px 10px }
.benefit-col ul { width: 310px }
.customize-left h2 { font-size: 30px; line-height: 44px }
.similar-app-slider .app-col-images { height: 182px }
}
@media only screen and (max-width:767px) {
.close-icon { display: block }
.modal-dialog { width: calc(100% - 30px) }
.tech-list ul li { margin-left: 0; margin-right: 0 }
.footer { margin-bottom: 75px }
.footer-top { padding: 20px 0 30px }
.footer-top-inner { display: block }
.footer-col { margin-bottom: 20px }
.footer-col:last-child { margin-bottom: 0 }
.footer-col-title { font-size: 20px; margin-bottom: 5px }
.footer-address ul li, .footer-address ul li span, .footer-link ul li a { font-size: 14px; line-height: 26px }
.footer-address ul li a { font-size: 14px }
.footer-address ul li span { width: 50px }
.footer-address, .footer-link { width: 100% }
.solution-menu { display: block }
.solution-menu ul:last-child { margin: 0 }
.solution-menu ul { margin: 0 0 5px }
.benefit-col-box { display: block }
.benefit-col ul li, .benefit-col ul li:last-child { margin-bottom: 30px }
.benefit-col ul { width: 100% }
.benefit-col ul li { padding: 0 }
.benefit-col ul li span { display: none }
.benefit-col ul li h3 { line-height: normal; font-size: 18px }
.benefit-col ul li p { line-height: normal; font-size: 14px }
.feature { background: #fff }
.industries-col-box { display: block }
.industries-col { width: 100%; padding: 25px 15px; margin: 0 0 15px; min-height: auto }
.industries-col:last-child { margin: 0 }
.industries-col img { position: relative; margin-top: 15px; bottom: auto }
.navMenu.menuClicked .mobMenu.show { display: none }
.xsVisible { display: block }
.xsHidden { display: none }
.container { width: 100% }
.navMenu>ul.btnUl>li.xsVisible { margin-right: 15px }
.banner { background: #16267b }
.banner .container { height: 400px }
.bannerCaption h1, .bannerCaption p { max-width: 100%; width: 100%; text-align: left }
.bannerFrame { margin-bottom: 50px; text-align: right }
.bannerFrame .container { text-align: left }
.bannerFrame img.xsVisible { display: inline-block; clear: both }
.dtlFrame ul { text-align: left; max-width: 80%; margin: 0 auto 20px }
.dtlFrame h2, .headBox h2 { font-size: 24px }
.productSlider { max-width: 100% }
.details { padding: 30px 0 }
.dtlFrame1 .left, .dtlFrame2 .right { text-align: center }
.dtlFrame h2, .headBox h2 { margin-bottom: 15px; text-align: left }
.dtlFrame p { text-align: left; font-size: 16px }
.cpInner, .f-bottom .row, .f-middle .row, .f-top ul { flex-wrap: wrap }
.f-top ul { justify-content: center }
.f-top ul li { width: 33.33%; text-align: center; margin-bottom: 10px }
.f-top ul li:nth-last-child(1), .f-top ul li:nth-last-child(2) { margin-bottom: 0 }
.f-top { padding: 30px 0 15px; margin-bottom: 15px }
.f-bottom .row3, .f-bottom .row9, .f-middle .row .col3, .f-middle .row9, .f-row .col3, .f-row .col9 { width: 100%; padding: 0 15px }
.cpInner { justify-content: center }
.copyright a, .copyright p { text-align: center }
.f-bottom .row .col3, .f-middle .row .col3 { max-width: 100%; text-align: center }
.f-bottom .row .col3 ul, .f-middle .row .col3 ul li { justify-content: center }
.f-social { width: 100%; margin: 0 auto }
.f-social li { padding: 0 10px }
.f-row { margin-bottom: 0 }
.f-bottom.f-row .col9 div.flex, .f-middle.f-row .col3 ul, .f-middle.f-row .col9 div.flex { border-bottom: 1px solid #ebebeb; margin-bottom: 30px; padding-bottom: 15px }
.mobMenu { position: absolute; top: 79px; padding: 15px; width: 100%; left: 0; height: auto; background: rgba(31,36,54,.98); max-height: 100vh; overflow-y: auto }
.mobMenuUL { flex-wrap: wrap }
.mobMenuUL li { width: 100%; text-align: left }
.mobMenuUL li a, .mobMenuUL li button { text-align: left; font-size: 16px; margin-bottom: 10px; padding: 0 }
.navMenu .mobMenuUL li a, .navMenu .mobMenuUL li button { font-size: 20px; color: #fff; opacity: 1 }
.menu-item .show li a p { opacity: 1 }
.navMenu .mobMenuUL>li>a, .navMenu .mobMenuUL>li>button { margin-bottom: 0; padding: 10px 0 }
.navMenu .mobMenuUL .menu-item .show { position: static; max-width: 100%; background: 0 0; padding: 15px 0; display: block; margin-bottom: 65px }
.mobMenuUL .menu-item .show img { position: absolute; top: 0; left: 0; max-width: 60px; max-height: 60px }
.navMenu>ul.btnUl>li.xsVisible>a>button { line-height: 1; height: 25px; cursor: pointer }
.navMenu>ul.btnUl>li.xsVisible>a>button:hover { opacity: .6 }
.f-middle ul { display: flex; justify-content: center; flex-wrap: wrap }
.f-middle ul li { width: 50% }
.footer .f-middle ul li { width: 100% }
.livechat-box { display: none }
.f-row .col9, .f-top { display: none }
.footer { padding-top: 15px; border-top: 1px solid #ebebeb }
.f-bottom .row .col3, .f-bottom .row .col3 h3, .f-bottom .row .col3 ul, .f-bottom .row .col3 ul li, .f-middle .row .col3, .f-middle .row .col3 h3, .f-middle .row .col3 ul li { text-align: left; justify-content: left }
.coffeeUl, .f-social { margin: 0; justify-content: left }
.coffeeUl { padding-top: 15px }
.f-bottom .row .col3 h3, .f-middle.f-row .col3 h3 { margin-bottom: 10px; line-height: 1 }
.f-social li:nth-child(1) { padding-left: 0 }
.f-middle.f-row .col3 ul { margin-bottom: 15px; padding-bottom: 5px }
.f-bottom .row .col3 ul li { margin-bottom: 15px }
.bannerCaption { max-width: 100%; text-align: left; margin-top: 0; left: 0; transform: translateY(-50%); padding-left: 15px }
.bannerCaption ul { justify-content: start }
.bannerFrame { margin-bottom: 0 }
.tabList { display: none }
.cloneslider .left, .feature .left { display: none }
.cloneslider .right, .feature .right { padding-left: 0; width: 100%; max-width: 100% }
.cloneslider, .faq, .feature, .like, .techSlider, .weApp { padding: 30px 0 }
.techSlider div { margin-top: 30px }
.feature .right ul li:nth-child(2n) { padding-right: 0 }
.weApp .dtlFrame h2, .weApp .dtlFrame1 .left, .weApp .dtlFrame2 .right { max-width: 100% }
.weApp .storeUl { max-width: 480px; margin: 0 auto; display: inline-block; width: 100%; vertical-align: top }
.weApp .storeUl li { list-style: none; padding: 0; width: auto; display: inline-block; margin: 0 15px 0 0; vertical-align: middle }
.weApp .storeUl li a { display: block }
.weApp .storeUl li:last-child { margin-right: 0 }
.techSlider .div-slide { width: 33%; padding: 0 15px }
.techSlider .div-slide img { max-width: 140px; max-height: 52px }
.cmnSec { text-align: center }
.slideImgBox { width: 100%; background-size: contain; height: 400px }
.productSliderFrame { margin-top: 0; margin-bottom: 30px }
.cloneslider .headBox, .dtlFrame1, .faq .headBox, .feature .headBox, .weApp .headBox { margin-bottom: 30px; margin-left: 0; text-align: left }
.feature div.tabpanels [role=tabpanel] { display: block }
.feature .right button { font-size: 20px; pointer-events: all; cursor: pointer }
.feature .right ul li h3 { font-size: 18px; margin-bottom: 15px }
.feature .right .cmnSec, .feature div.tabpanels [role=tabpanel] { padding: 10px 0; margin-bottom: 0; border-bottom: 1px solid #ebedf0 }
.feature .right .cmnSec:last-child, .feature div.tabpanels [role=tabpanel]:last-child { border-bottom: 0 }
.feature .right button { margin-bottom: 0; text-align: left; font-size: 18px; font-weight: 700; position: relative }
.feature .right button .fa { position: absolute; top: 11px; right: 0; font-size: 16px }
#ProductionPost, #assignTask, #createCluster, #createPost, #groupChat, #monetizePost, #profilePost, #storagePost { margin-top: 20px; text-align: left; margin-bottom: 20px; display: none }
#ProductionPost.open, #assignTask.open, #createCluster.open, #createPost.open, #groupChat.open, #monetizePost.open, #profilePost.open, #storagePost.open { display: block }
#ProductionPost>p, #assignTask>p, #createCluster>p, #createPost>p, #groupChat>p, #monetizePost>p, #profilePost>p, #storagePost>p { margin-bottom: 15px }
.like h2, .techSlider h2 { text-align: center }
.contact .headBox { margin-left: 0 }
.bannerCaption h1 { max-width: 260px }
.weApp .headBox, .weApp .headBox h2 { text-align: center }
.chooseTable { width: 100%; overflow-x: scroll }
.chooseTable table { width: 768px }
.faq section h4 { font-size: 17px }
.faq section .fa { top: 19px }
.faq section[expanded] .fa { top: 20px }
.feature .right .featureArrowBox { display: none }
.productSlider div .div-button, .recSlider div .div-button { height: 40px; width: 40px }
.productSlider div .div-slide { width: 50% }
.port div .div-slide { width: 100% }
.port .container .headBox *, .testSlider .headBox h2 { text-align: center }
.testBox { max-width: 100% }
.rec, .testSlider { padding: 30px 0 }
.testBox p.desc { font-size: 16px; margin-bottom: 10px }
.rec .recSlider div .div-slide { width: 100%; vertical-align: top; min-width: 100% }
.rscont { min-height: auto }
.customize-idea-box { padding: 30px 0 }
.customize-right { display: none }
.customize-left { width: 100% }
.customize-row { padding: 0 30px }
.benefit-box div .div-button-next, .benefit-box div .div-button-prev, .customize-idea-box div .div-button-next, .customize-idea-box div .div-button-prev, .similar-app-slider div .div-button-next, .similar-app-slider div .div-button-prev { width: 30px; height: 30px }
.similar-app-col { width: 275px }
.app-col-images { height: 240px }
.app-col-content h3 { font-size: 18px; margin-bottom: 10px }
.app-col-content { padding: 10px }
.app-col-content p { font-size: 14px; line-height: normal }
.similar-app-slider div { max-height: inherit }
.benefit-col-box { padding: 0 30px }
.benefit-col ul li p a { font-size: 15px }
.benefit-box { padding: 30px 0 }
.sticky-button { display: block }
.similar-app-slider { display: block }
.similar-app-col { width: 275px; margin: 0 auto; margin-bottom: 15px }
.similar-app-slider .app-col-images { height: 227px }
}
@media only screen and (max-width:559px) {
.menu-item .show li { width: 100%; min-height: auto; margin-bottom: 10px }
.mobMenuUL .menu-item .show img { max-width: 40px; max-height: 40px }
.menu-item .show li a { padding-left: 50px }
.menu-item .show li a h4 { font-size: 16px; line-height: 1; margin-bottom: 4px }
.menu-item .show li a p { font-size: 14px }
.numberFrame ul { flex-wrap: wrap }
.numberFrame ul li { width: 50% }
.f-row h3 { text-align: center }
.copyright a, .copyright p { font-size: 12px }
.f-row .col3 ul li { font-size: 14px }
.f-row ul li { text-align: center }
body { line-height: 1.6 }
.btn-b { font-size: 16px }
.btn { padding: 7px 15px }
.f-middle ul li { width: 100% }
.f-icon { margin-right: 5px }
.techSlider .div-slide img { max-width: 120px; max-height: 44px }
.accParent { flex-wrap: wrap }
.accParent div { max-width: 100%; padding: 0; width: 100% }
.accParent div:nth-child(1) { padding-right: 0; margin-bottom: 30px }
.faq section { margin-bottom: 30px }
.accParent div:nth-child(2) { padding-left: 0 }
.banUl1 li a { font-size: 16px }
.feature .right button { font-size: 18px }
.rsImg img { max-width: 200px; max-height: 43px }
.rstop { flex-wrap: wrap }
.rsImg, .rsUL { width: 100% }
.rsImg { margin-bottom: 15px }
.rsUL { justify-content: flex-start }
}
@media only screen and (max-width:500px) {
.start-button { padding: 0 10px; font-size: 11px }
.logo img { max-width: 140px; max-height: 32px }
}
@media only screen and (max-width:479px) {
.navMenu>ul>li a.btn { padding: 7px 10px; font-size: 14px }
.navMenu>ul.btnUl>li.xsVisible { margin-right: 5px }
.navMenu>ul.btnUl>li.xsVisible>a>button img { max-width: 35px; max-height: 19px }
.f-row .col9 ul, .f-row .col9 ul:nth-child(1), .f-row .col9 ul:nth-child(2), .f-row .col9 ul:nth-child(3) { max-width: 100%; width: 100%; padding: 0 }
.f-bottom .col9 .flex, .f-middle .col9 .flex { flex-wrap: wrap }
.f-top { padding-bottom: 0 }
.copyright { padding: 15px 0 15px }
.f-row { margin-bottom: 0 }
.f-top ul li { width: 50%; text-align: center }
.f-top ul li:nth-last-child(1), .f-top ul li:nth-last-child(2) { margin-bottom: 10px }
.techSlider .div-slide { width: 100%; padding: 0 }
.feature .right ul li { width: 100%; padding-right: 0; max-width: 100% }
.faq section h4 { font-size: 16px }
.weApp .storeUl li:first-child a img, .weApp .storeUl li:nth-child(2) a img { max-width: 110px; max-height: 34px }
.weApp .storeUl li { margin: 0 10px 0 0 }
.productSlider div .div-slide { width: 100% }
.techSlider .container ul li, .techSlider .container ul.bottomUL li { margin-bottom: 10px }
.rec .recSlider div .div-slide { width: 100% }
.port div .div-slide { padding: 0 15px }
}
@media only screen and (max-width:359px) {
.bannerCaption p { font-size: 14px }
.btn { padding: 7px 10px }
.navMenu>ul>li button.btn { font-size: 14px }
.weApp .storeUl li:first-child a img, .weApp .storeUl li:nth-child(2) a img { max-width: 90px; max-height: 28px }
.weApp .storeUl li:nth-last-child(2) a img { max-width: 21px; max-height: 25px }
.weApp .storeUl li:last-child a img { max-width: 25px; max-height: 25px }
}
.chat_hide, .chat_show { width: 325px; height: 260px; right: 0; display: flex; align-items: center; text-align: center; position: fixed; z-index: 99; bottom: 0; background: #fff; border: 2px solid #60ab12; -webkit-animation-duration: 1s; -webkit-animation-delay: 0; -webkit-animation-fill-mode: forwards; animation-duration: 1s; animation-delay: 0; animation-fill-mode: forwards; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out }
.chat_show { -webkit-animation-name: mymove; animation-name: mymove; transform: translateY(0); -webkit-transform: translateY(0) }
.chat_hide { -webkit-animation-name: mymoveReverse; animation-name: mymoveReverse; transform: translateY(100%); -webkit-transform: translateY(100%) }
.chat_hide .arrow, .chat_show .arrow { width: 100%; padding: 0 15px; background: #60ab12; z-index: 9; border: 1px solid #60ab12; margin-bottom: 5px; position: absolute; top: -50px; text-align: left; color: #fff; height: 50px; line-height: 50px; font-size: 17px; font-weight: 400; min-width: 325px; left: -2px }
.chat_hide::after, .chat_show::after { content: ""; position: absolute; left: 15px; right: 15px; height: 1px; width: auto; background: rgba(255,255,255,.3); top: 0; display: block }
.chat_hide .arrow .fa, .chat_show .arrow .fa { float: right; color: #fff; font-size: 24px; line-height: 50px }
.chat_hide .arrow .fa { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg) }
.chat_show .arrow .fa { transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0) }
#livezilla_livechat { margin: 0 auto; display: block }
#livezilla_livechat a span strong { color: #f05a23 }
#livezilla_livechat a span { display: block; font-size: 28px; font-weight: 600; color: #60ab12; line-height: 1; letter-spacing: -.5px; margin-bottom: 10px }
@keyframes mymove { from {
transform:translateY(100%)
}
to { transform: translateY(0) }
}
@-webkit-keyframes mymove { from {
transform:translateY(100%)
}
to { transform: translateY(0) }
}
@keyframes mymoveReverse { from {
transform:translateY(0)
}
to { transform: translateY(100%) }
}
@-webkit-keyframes mymoveReverse { from {
transform:translateY(0)
}
to { transform: translateY(100%) }
}
.cookiesPopup { position: fixed; top: auto; left: 0; right: 0; bottom: 10px; z-index: 999; width: 100%; text-align: center; background: 0 0 }
.cookiesPopup .cookiesFrame { display: inline-block; text-align: center; background: rgba(8,9,14,.7); padding: 2px 2px 2px 5px; font-weight: 700; height: auto; width: auto; bottom: auto; z-index: 999 }
.cookiesPopup .colLeft { display: inline-block; vertical-align: middle }
.cookiesPopup p { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.6; display: inline }
.cookiesPopup button { display: inline-block; line-height: 30px; height: 30px; padding: 0 15px; display: inline-block; vertical-align: middle; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; box-shadow: -3px 15px 24px 0 rgba(0,0,0,.1); -webkit-box-shadow: -3px 15px 24px 0 rgba(0,0,0,.1); -moz-box-shadow: -3px 15px 24px 0 rgba(0,0,0,.1); -ms-box-shadow: -3px 15px 24px 0 rgba(0,0,0,.1); -o-box-shadow: -3px 15px 24px 0 rgba(0,0,0,.1); background: #007fb8; border: 1px solid #007fb8; color: #fff; margin-left: 10px }
img { max-width: 100%; height: auto; display: block; margin: 0 auto; max-height: 650px; }
.get-button img { display: none }
.get-button { position: relative }
.get-button::after { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 12px solid #ccf4f1; content: ""; display: block; position: absolute; right: -20px; top: 19px }
.new-feature-box .get-button::after { border-left: 12px solid #fff }
.app-slider-box .get-button::after { border-left: 12px solid #fff }
.main-menu nav>ul>li>a, .main-menu nav>ul>li>button { font-weight: 700 }
html { scroll-behavior: smooth }
.tabFrame ul.tabList-link li a { font-size: 16px; line-height: 20px; color: #24282C99; background: 0 0; border: 0; padding: 20px 0; position: relative; cursor: pointer; display: block }
.tabFrame ul.tabList-link li a:hover { color: #333 }
.faq section .toggle-content { display: none; border-top: solid 1px #ececec; padding-top: 10px }
#faq-section button { border: none; background: 0 0; width: 100%; text-align: left }
.show-div { display: block!important }
.accordianSection { width: 49% }
.faq section h4 { border: none; background: 0 0; font-size: 18px; padding: 25px 65px 20px 20px; position: relative }
.faq section { border: solid 1px #ececec }
.bannerCaption { width: 100%; text-align: center; max-width: 100% }
.bannerCaption h1, .bannerCaption p { max-width: 100%; text-align: center }
.bannerCaption ul { justify-content: center }
.banner .container { height: 440px }
.cloneslider { background: #f9f9f9; border-top: solid 1px #f1f1f1 }
.food-top-title { font-size: 40px; line-height: 50px; font-weight: 800 }
.banUl1 li { color: #fff }
.feature .right button { font-size: 25px; line-height: 30px; margin-bottom: 25px; font-weight: 500 }
.feature { padding: 30px 0 35px }
.food-prd-lsider .sfaDiv { width: 25%; float: left; padding: 10px }
.faq .fa.fa-chevron-down { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #666; margin: 0; position: absolute; right: 10px; top: 47% }
.feature .right ul { display: block; justify-content: start; flex-wrap: wrap; float: left; width: 59% }
.img-box-feture { float: right; width: 40%; padding-top: 20px }
body .feature .right ul li { width: 50%; float: left; margin: 0 0 4px 0; min-height: 130px; max-width: 100%; padding-right: 20px }
.feature .right ul li p { margin: 0; line-height: 20px; font-size: 15px }
.feture-row-in::after { clear: both; display: block; content: "" }
.feture-row { padding: 25px 0 }
.feature .headBox { margin-bottom: 50px }
.blubg2 { background: #1c2545 }
.benefit-box { padding: 80px 0 80px }
.banner { overflow: hidden }
.banner::after { position: absolute; width: 125%; height: 550px; background: rgb(233 240 247); content: ""; left: -50px; bottom: -50px; display: block; top: inherit; border-radius: 0; transform: rotate(165deg) }
.img-left { float: left }
.text-right { float: right!important; padding-left: 25px }
.cloneslider { padding: 80px 0 80px; position: relative }
.benefit-col ul li { position: relative; padding-left: 60px; margin-bottom: 35px }
.benefit-col ul li h3 { color: #fff; font-size: 18px; line-height: normal; margin-bottom: 10px }
.benefit-col ul li p { color: #fff; font-size: 15px; line-height: 22px; margin-bottom: 5px }
.faq section h4 { line-height: 20px; min-height: 85px }
.feature .right { padding-left: 0; width: 100% }
@media screen and (max-width:1199px) {
.feature .right { padding-left: 0; max-width: 100% }
img { max-width: 100%!important }
}
@media screen and (max-width:1023px) {
.container { width: 98% }
body .feature .right ul li:nth-child(2n+1) { clear: both }
}
@media screen and (max-width:767px) {
.cookiesPopup { display: none }
#faq-section .flex { display: block }
.banner .container { height: 100%; }
.accordianSection { width: 100% }
.faq section h4 { border: none; background: 0 0; font-size: 17px; padding: 15px 65px 15px 15px }
.faq section { margin-bottom: 20px }
img { max-width: 100%!important }
.food-prd-lsider .sfaDiv { width: 25%; float: left; padding: 5px }
.headBox { margin: 0; width: 100%; max-width: 100%; padding: 0 15px; margin-bottom: 10px!important }
.img-box-feture { display: none }
.feature .right ul { width: 100%; float: none }
body .feature .right ul li { width: 100%; float: none; margin: 10px 10px 25px 0; min-height: inherit }
.feture-row-in { display: none }
.feture-row { padding: 10px 0; background: no-repeat }
.faq-section .flex { display: block }
.feture-row .fa.fa-plus.xsVisible { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #666; margin: -3px 0 0 0 }
.benefit-box { padding: 30px 0 10px }
.food-top-title { font-size: 32px; line-height: 25px }
.feature .right button { font-size: 18px; line-height: 26px; margin-bottom: 0; font-weight: 500 }
.benefit-col ul li { padding: 0 }
.faq section .toggle-content { padding: 20px }
.accordianSection { width: 100%!important; max-width: 100%!important; padding-right: 0!important; padding-left: 0!important }
.accParent div section:last-child { margin-bottom: 20px }
.faq section { margin-bottom: 20px }
.faq section h4 { min-height: inherit }
.accParent div { max-width: 100% }
}
.dtlFrame1 .right img { max-width: 100% }
@media screen and (max-width:767px) {
.dtlFrame1 { flex-flow: inherit; display: block }
.dtlFrame1 .right, .feature .right .cmnSec, .weApp .dtlFrame2 { margin-top: 30px }
.dtlFrame2 .left { padding-top: 30px }
.dtlFrame.dtlFrame2 { flex-direction: column-reverse!important; -webkit-flex-direction: column-reverse!important; -moz-flex-direction: column-reverse!important; -ms-flex-direction: column-reverse!important }
}
.header {
    position: fixed;
    z-index: 99;
    width: 100%;
    background: #fdfdfd;
    /* border-bottom: solid 1px #ececec; */
    top: 0;
    max-width: 1170px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, .2) !important;
    transform: translateX(-50%);
    left: 50%;
}
.back-top { position: fixed; right: 10px; bottom: 10px; background: #007fb8; border-radius: 100%; font-size: 14px; width: 30px; height: 30px; text-align: center; z-index: 999 }
.back-top a { display: block; font-size: 0; width: 30px; height: 30px }
.back-top a::after { font-size: 0; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; display: block; content: ""; margin: auto; margin-top: 12px }
.footer-top { border-top: 1px solid #ececec }
@media screen and (max-width:991px) {
body { padding-top: 70px }
.back-top { display: none }
}
.btn-rs a { max-width: 200px; margin: auto }
.btn-mdl-row { padding: 50px 0; background: #f9f9f9; border-bottom: solid 1px #f1f1f1; border-top: solid 1px #f1f1f1 }
.btn-mdl-row a { max-width: 230px; margin: auto }
.price-start-row { padding: 50px 60px; text-align: center; font-size: 35px; color: #000; border-top: solid 1px #ccc; margin-top: 70px }
.price-start-row p { line-height: 42px }
.price-start-row p strong { color: #2a338e }
.works-decp p { font-size: 14px; line-height: 23px; margin-bottom: 20px; min-height: 70px }
.works-decp p { font-size: 14px; line-height: 23px; margin-bottom: 20px; min-height: 70px }
.how-it-apps-row .headBox { padding-bottom: 25px }
.col-blog-list h4 { margin: 0; padding-bottom: 5px; font-size: 17px; color: #000; font-weight: 400; font-weight: 600; line-height: 22px; margin-bottom: 5px }
.col-blog-list a { color: #838383 }
.how-it-in-row { position: relative; margin: 0 -1% }
.col-blog-list { text-align: left; padding: 5px; }
.col-blog-list:hover { border: solid 2px #ccc; border-color: #ccc; transform: scale(1.02) }
.tags-blog { line-height: 20px; color: #333; font-size: 14px }
.tags-blog a { color: #333 }
.date-row { position: absolute; bottom: 10px; color: #333; font-size: 14px }
.date-row-2 { position: static }
.how-it-apps-row { padding: 120px 0 }
.app-icons img { width: auto; max-width: 80px; border: solid 1px #cccc; padding: 10px; border-radius: 3px; height: auto }
.retail-apps-row .app-col-content h3 span { display: flex; width: 100%; text-align: center; justify-content: center; height: 40px; align-items: center }
.industries-col-box { justify-content: center; flex-wrap: wrap }
.similar-app-slider { justify-content: center; flex-wrap: wrap }
.food-prd-lsider { display: flex; justify-content: center; flex-wrap: wrap }
.industries-col { margin: 10px }
.banner-text { max-width: 650px; margin: auto; padding-bottom: 35px; color: #fff; font-size: 18px }
.industries-col { background: #fff; border-radius: 0; border-top: 5px solid #ccc; text-align: center; transition: all .5s ease; position: relative }
.industries-col:hover { margin-top: -2px }
.industries-col p { color: #000; font-size: 18px; line-height: normal; margin-bottom: 10px; border-bottom: solid 1px rgba(0,0,0,.1); padding-bottom: 10px; margin-left: -20px; margin-right: -20px }
.industries-col img { right: 0; margin: 15px auto 0 }
.headBox h2 { font-size: 36px }
.get-button::after { border-left: 12px solid #121e62 }
.get-button::before { background: #121e62 }
.feture-row-new .right ul { display: flex; justify-content: start; flex-wrap: wrap; float: none; width: 100%; overflow: hidden; margin: -1px }
body .feture-row-new .right ul li { width: 33.3%; margin: 0; min-height: 130px; max-width: 100%; padding-right: 20px; border-left: solid 1px #e8e8e8; border-top: solid 1px #e8e8e8; padding: 20px }
.feture-row-new .feture-row-in { overflow: hidden }
.feture-row-new .right ul li h3 { font-size: 20px; line-height: 30px; font-weight: 500; color: #24282c; padding-bottom: 10px }
.full-row { width: 100%; display: block }
.full-row .left, .full-row .right { float: none; width: 100%; max-width: 100% }
.retail-apps-row .similar-app-col { width: 31.3%; margin: 10px 1%; white-space: normal; vertical-align: top; border: solid 1px #ccc; background: #fff; text-align: center; border-radius: 4px }
.sbox { margin: 0 auto; font-size: 18px; text-align: center; margin-top: 50px; margin-bottom: 50px }
.retail-apps-row .app-col-content h3 { color: #24282c; font-size: 18px; font-weight: 600; line-height: normal; font-weight: 400; margin-bottom: 14px; border-bottom: solid 1px #e6e6e6; margin-bottom: 15px; margin-left: -20px; margin-right: -20px; margin-top: -6px; background: #eaeaea; margin-top: -20px; border-radius: 4px 4px 0 0; padding: 14px 8px 5px 8px; border-bottom: solid 1px #ccc; min-height: 62px }
.text-col { min-height: 120px; line-height: 26px!important; margin-bottom: 10px }
.get-button-new { background: #0898c9; border-radius: 5px; line-height: 40px; color: #fff; padding: 0 25px; display: block; font-weight: 600; font-size: 15px; font-weight: 600; border: none; text-align: center }
.get-button-new:hover { background: #057499 }
.five-col-row .similar-app-col { width: 33.3%; margin: 10px 10px; white-space: normal; vertical-align: top; border: solid 1px #ccc; background: #fff; text-align: center; border-radius: 4px }
.five-col-row .app-col-content h3 { color: #24282c; font-size: 24px; font-weight: 600; line-height: normal; font-weight: 400; margin-bottom: 14px; border-bottom: solid 1px #e6e6e6; padding-bottom: 10px; margin-bottom: 15px; margin-left: -20px; margin-right: -20px; margin-top: -6px }
.tag-list ul { display: flex; padding: 0; margin-bottom: 10px }
.tag-list ul li { font-size: 12px; color: #000; background: #fff; border: 1px solid #dfe0e6; border-radius: 50px; height: 28px; display: flex; align-items: center; padding: 0 12px; margin: 0 8px 8px 0; list-style: none; width: auto; text-align: center }
.plan-btn-col span { display: block }
.plan-btn-col { border: solid 2px #333; padding: 10px; color: #000; margin-bottom: 25px }
.plan-btn-col:hover { background: #fff }
.mtn-price strong { font-size: 14px; font-weight: 400; color: #9b9fb1 }
.mtn-price { font-size: 40px; font-weight: 700; line-height: 35px; padding-top: 10px }
.mnt-text { font-size: 15px; font-weight: 700; color: #9b9fb1 }
.text-cut { text-decoration: line-through }
.plat-from-row ul { padding: 0; list-style: none; display: flex }
.plat-from-row ul li { list-style: none; display: flex; width: auto; padding-right: 12px; padding-left: 0 }
.plat-from-row ul li img { max-height: 30px }
.plat-from-row h4 { padding-bottom: 15px; padding-top: 15px; color: #333; font-size: 14px }
.in-row-plats { display: flex; padding-bottom: 25px }
.plats-text { max-width: 310px; padding-left: 50px }
.price-check-row { padding: 80px 0 }
input[type=radio].css-checkbox { display: none }
input[type=radio].css-checkbox+label.css-label { padding-left: 55px; display: inline-block; background-repeat: no-repeat; background-position: 0 0; vertical-align: middle; cursor: pointer }
input[type=radio].css-checkbox:checked+label.css-label { background-position: 0 -50px }
label.css-label { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative }
label.css-label:after { background: #fff; content: ""; display: block; width: 32px; height: 32px; position: absolute; left: 0; top: 1px; border-radius: 100%; border: solid 1px #ccc }
label.css-label:before { background: #cecece; content: ""; display: block; width: 24px; height: 24px; position: absolute; left: 4px; top: 5px; border-radius: 100%; border: solid 1px #ccc; z-index: 9 }
input[type=radio].css-checkbox:checked+label.css-label::after { background: #0898c9; border: solid 1px #0898c9; content: ""; display: block; width: 32px; height: 32px }
input[type=radio].css-checkbox:checked+label.css-label:before { background: #05789f; content: ""; display: block; width: 24px; height: 24px; position: absolute; left: 4px; top: 5px; border-radius: 100%; border: solid 1px #0898c9; z-index: 9 }
.plat-from-row:after { clear: both; display: block; content: "" }
.img-blog-list { margin: -5px }
.img-blog-list img { height: auto; width: 100% }
.blog-heading { font-size: 14px; margin-left: -8px; color: #000; padding-bottom: 25px }
.blog-paging ul { display: flex; margin: 30px -5px 0; flex-wrap: wrap }
.blog-paging ul li a { border: solid 1px #ccc; background: #fff; display: block; padding: 6px 16px; color: #333; margin-left: -1px; margin-bottom: 5px }
.blog-paging ul li a.current, .blog-paging ul li a:hover { background: #f5f5f5 }
.blog-cat-tabs ul { display: flex; margin: 0 -5px 30px; flex-wrap: wrap }
.blog-cat-tabs ul li a { border: solid 1px #ccc; background: #fff; display: block; padding: 4px 12px; color: #333; margin-right: 5px; font-size: 13px; font-weight: 700; border-radius: 2px; margin-bottom: 5px }
.blog-cat-tabs ul li a.current, .blog-cat-tabs ul li a:hover { background: #eaeaea }
.solution-links { max-width: 41% }
.solution-links ul li { width: 50%; float: left }
.blog-fetures-row { display: flex; flex-wrap: wrap; margin: 0 -1% }
.featuredBlg-col-blog { width: 24%; text-align: center; margin: .5% }
.featuredBlg-col-blog a { color: #000 }
.fetures-blog-in { background: #f9f9f9; padding: 25px 15px; border: solid 2px #000; font-size: 20px; transition: .2s }
.fetures-blog-in:hover { border-color: #000; transform: scale(1.02) }
.cBlg-feIcon { font-size: 65px; display: block; margin-bottom: 15px }
.top-blog-dtl { color: #000; padding: 0 10px; }
.blog-dtl-img { padding: 45px 0 20px 0 }
.blog-dtl-img img { width: 100% }
.top-blog-dtl h1 { font-size: 33px; padding-bottom: 10px; line-height: 44px; padding-top: 5px; color: #000; font-weight: 800 }
.top-blog-dtl h4 { color: #333; margin: 25px 0 10px 0; border: 1px solid #ccc; padding: 8px; background: #f9f9f9; }
.top-blog-dtl h2 { counter-reset: slide; }
.top-blog-dtl h3 { counter-increment: slide; }
.top-blog-dtl h3:before { content: counter(slide)". "; }
.top-blog-dtl h2 { font-size: 24px; padding-bottom: 10px; line-height: 1.4; padding-top: 5px; color: #000 }
.top-blog-dtl h2 { border: 1px solid #07203D; margin: 10px 0; padding: 10px; background: #07203D; }
.top-blog-dtl h3 { font-size: 22px; padding: 10px 0; margin-top: 15px; color: #000 }
.date-row-2 { position: static; padding-top: 15px }
.blog-post-row p { padding-bottom: 8px; line-height: 28px; font-size: 15px; margin: 20px 0; }
.blog-post-row ol { padding: 0 15px 15px; line-height: 30px; list-style: number; margin: 10px 0; }
.blog-dtl-img { margin-left: 0; margin-right: 0 }
.nex-prv-post:after { clear: both; display: block; content: "" }
.nex-prv-post { padding-bottom: 30px }
.nex-prv-post a { color: #3098c9; font-weight: 700 }
.next-post { margin-top: -65px }
@media screen and (max-width:1191px) {
p.text-col { min-height: 150px; line-height: 24px!important; margin-bottom: 10px; font-size: 15px }
.five-col-row .similar-app-col { width: 100%; margin: 15px auto; white-space: normal; vertical-align: top; border: solid 1px #ccc; background: #fff; text-align: center; border-radius: 4px }
.five-col-row .similar-app-col p.text-col { min-height: inherit }
.five-col-row .similar-app-slider { display: block }
.price-check-row .dtlFrame1 .left, .price-check-row .dtlFrame2 .right { max-width: 100%; text-align: left }
.col-how-it-wrks::after { display: none }
.industries-col { margin: 10px 2px }
}
@media screen and (max-width:767px) {
.banner-text { font-size: 15px; padding: 10px 10px 20px 10px }
.headBox h2 { font-size: 28px }
.five-col-row .similar-app-col, .retail-apps-row .similar-app-col { width: 100%; margin: 15px auto }
.five-col-row .app-col-content h3, .retail-apps-row .app-col-content h3 { margin-left: -10px; margin-right: -10px; margin-top: -10px; font-size: 20px }
p.text-col { min-height: inherit }
.price-check-row .dtlFrame img { display: none }
.in-row-plats img { display: block!important }
.plat-from-row ul { margin: 0 }
.mtn-price { font-size: 22px; line-height: 28px }
input[type=radio].css-checkbox+label.css-label { padding-left: 40px }
.plan-btn-col { padding: 6px }
.mtn-price strong { font-size: 13px }
.inc-month { font-size: 14px }
.plat-from-row ul li { min-width: 42px }
.plats-text { max-width: 310px; padding-left: 20px }
.price-check-row { padding: 30px 0 }
.tag-list ul { margin: 0 }
label.css-label::before { width: 20px; height: 20px }
label.css-label::after { width: 28px; height: 28px }
.feture-row-new .feture-row-in { display: block }
body .feture-row-new .right ul li { width: 100%; margin: 0; min-height: inherit; padding: 20px 0 15px }
.bannerCaption { padding: 10px }
.industries-col { margin: 10px 0 }
.price-start-row { font-size: 22px; margin-top: 70px; padding: 25px 15px }
.price-start-row p { line-height: 32px }
.col-how-it-wrks { width: 100%; margin: 10px 0 10px 0 }
.works-decp p { min-height: inherit }
.how-it-apps-row { padding: 40px 0 }
.how-it-in-row { padding: 0 15px }
.retail-apps-row .similar-app-slider { padding: 0 15px }
.how-it-apps-row .headBox { padding-bottom: 0 }
.food-prd-lsider .sfaDiv { width: 50% }
.solution-links { max-width: 100% }
.solution-links:after { clear: both; display: block; content: "" }
.featuredBlg-col-blog { width: 49%; text-align: center; margin: .5% }
.fetures-blog-in { background: #f9f9f9; padding: 15px 10px; border: solid 2px #000; font-size: 15px; transition: .2s }
.cBlg-feIcon { font-size: 55px }
.food-top-title { font-size: 20px }
.food-top-title br { display: none }
.bannerCaption h1 { line-height: 1.5em; margin: 50px 0 50px 0; }
.col-blog-list { width: 100%; margin-bottom: 15px }
.blog-paging ul { display: flex; margin: 30px 0 0; flex-wrap: wrap }
.blog-paging ul li a { padding: 6px 13px }
.blog-paging ul { justify-content: center }
.next-post { margin-top: 0!important }
}
.sp2 { display: block; font-size: 1.5em; font-weight: 700 }
.tihead { margin: 0; padding-bottom: 5px; font-size: 17px; color: #000; font-weight: 400; font-weight: 600; line-height: 22px; margin-bottom: 5px }
.promobannerhead { color: #fff; font-size: 36px; line-height: 50px; font-weight: 800; margin-bottom: 20px }
.top-blog-dtl blockquote { text-align: left; border-left: none; background: #f6f6f6; margin: 50px 70px 50px 0; border-left: solid 4px #fc9803; width: 100%; padding: 10px 20px }
.top-blog-dtl blockquote p { font-size: 18px; line-height: 28px; padding: 15px; margin: 0 }
.shoftwere-team-m {
    margin-bottom: 15px;
}
.new_bg {
    background: #07203D!important;
    color: #fff!important;
    max-width: 1170px;
    margin: 0 auto;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .2) !important;
}
.banner-btn { background-color: #006c9f; border-radius: 5px; padding: 20px 60px; display: inline-block; color: #fff; font-size: 20px; line-height: 23px }
.lnk { font-size: inherit; color: inherit; font-weight: 600 !important; }
.lnk:hover { color: #fc9803; text-decoration: underline!important }
.toggle-button-n { width: 40px; background: 0 0; border: none; padding: 0; cursor: pointer }
.chat-box { position: fixed; right: 0; bottom: 0; font-family: Roboto, sans-serif; width: 300px; z-index: 1000 }
.chat-box .toggle-button-n { width: 32px }
.chat-icon { background: #204ee2; background: linear-gradient(101deg, rgba(32,78,226,1) 0, rgba(10,166,246,1) 100%); margin: 0 15px 45px; width: 60px; height: 60px; border-radius: 100%; padding: 12px; border: solid 2px #108ef1; float: right }
.chat-form { background: #1d2c35; padding: 15px; margin: 10px; border-radius: 5px; border: solid 1px #666; color: #fff; position: relative }
.chat-form h3 { color: #fff; margin-top: 0; text-align: center; padding-bottom: 10px; border-bottom: solid 1px rgba(255,255,255,.4); margin-bottom: 10px; font-size: 16px }
.chat-form-in label { display: block; width: 100%; font-size: 14px; padding-bottom: 3px }
.chat-form-in input[type=email], .chat-form-in input[type=text], .chat-form-in textarea { width: 100%; border: 0; padding: 4px; border-radius: 2px; height: 30px; font-family: Roboto, sans-serif; font-size: 13px }
.chat-form-in textarea { height: 60px; font-family: Roboto, sans-serif; font-size: 13px; resize: none }
.ht-input-box { padding-bottom: 10px }
.ht-button { background-color: #fc9803; border-radius: 3px; padding: 6px 20px; display: inline-block; color: #fff; font-size: 14px; line-height: 23px; border: 0 }
.ht-button:hover { background: #fff; color: #fc9803 }
.close-btn { display: none; padding: 6px }
.chat-box.open .close-btn { display: block }
.chat-box.open .opn-btn { display: none }
.chat-form { display: none }
.chat-box.open .chat-form { display: block }
.opn-btn { padding: 3px }
.loader { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #eceaea; background-image: url(https://www.coders.dev/images/ajax-loader.gif); background-size: 50px; background-repeat: no-repeat; background-position: center; z-index: 10000000; opacity: .4 }
.hide { display: none }
</style> <style> .blue-bg {
background-color:#0171bc;
color:#fff
}
.blue-text { color: #0071bc }
.hover-bdr:hover { border-color: #4386cd!important }
.btn-blue-1 { background-color: #4386cd!important; color: #fff!important; border-color: #4386cd!important }
.btn-blue-1:hover { background-color: #fff!important; color: #4386cd!important; border-color: #4386cd!important }
.btn-blue-2:hover { background-color: #0071bc!important; color: #fff!important; border-color: #0071bc!important }
.container { width: 100%; max-width: 1290px; padding: 0 15px; margin: 0 auto }
ul { list-style-type: none }
ul { padding: 0; margin: 0; list-style-type: none }
.ux-designer-sec .inner-ux-designer { display: flex; flex-wrap: wrap; margin: 0 -10px }
.ux-designer-sec .inner-ux-designer .ux-right-box { width: calc(24% - 21px); margin: 0 10px; animation-name: moveInTop; animation-duration: 1s }
.ux-designer-sec .inner-ux-designer .ux-left-box { width: 100%; margin: -50px 10px 0 }
.ux-designer-sec .inner-ux-designer .ux-left-box span img { margin-right: 8px }
.ux-designer-sec a { font-size: 12px }
.ux-designer-sec .ux-box { background-color: #fff; position: relative; animation-name: moveInTop; animation-duration: 1s; width: calc(33.33% - 28px); margin: 14px }
.ux-designer-sec .ux-box .inner-box-ux { display: flex; flex-wrap: wrap; margin-bottom: 13px }
.ux-designer-sec .ux-box .inner-box-ux .ui-left { width: 102px; position: relative }
.ux-designer-sec .ux-box .inner-box-ux .ui-right { width: calc(100% - 129px); padding-left: 27px }
.ux-designer-sec .ui-left .admin-img { position: relative }
.ux-designer-sec .ui-left .admin-img img { display: block }
.ux-designer-sec .ui-left .btn.btn-blue { background-color: #4386cd; border-radius: 5px; padding: 4px 12px; border: none; font-size: 14px; color: #fff; font-weight: 600; margin: 8px auto; text-align: center; display: block; border: 1px solid #4386cd }
.ux-designer-sec .ui-right .top-box { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid #cecece }
.ux-designer-sec .ui-right .left-in-box h2 { font-size: 16px; margin: 0; line-height: 20px; color: #3d3d3d; width: 100% }
.ux-designer-sec .ui-right .left-in-box .location-admin { display: flex; align-items: center; line-height: 34px; font-size: 13px; color: #3d3d3d; flex-wrap: wrap; max-width: 300px; margin-top: 7px }
.ux-designer-sec .ui-right .left-in-box .experience { font-size: 12px; line-height: 19px; font-weight: 600; color: #3d3d3d }
.ux-designer-sec .ui-right p { font-size: 13px; line-height: 19px; max-width: 100%; color: #777; margin-top: 4px; font-family: Arial, Helvetica, sans-serif; margin-bottom: 0 }
.ux-designer-sec .ui-right ul.shoftwere-using { display: flex; flex-wrap: wrap; margin-bottom: 19px; border-bottom: 1px solid #e8f0f9; padding-bottom: 19px }
.ux-designer-sec .ui-right ul.shoftwere-using li a { margin-right: 10px; font-size: 13px; color: #4386cd; background-color: rgb(67 134 205/12%); margin-bottom: 10px; border-radius: 15px; padding: 5px 15px 5px 10px; border-top-right-radius: 85px }
.ux-designer-sec .ui-right ul.shoftwere-using li img { width: 9px }
.ui-com-box { display: flex; flex-wrap: wrap; margin: 0 -14px }
.ux-designer-sec .ux-box .inner-ux-ui-box { padding: 21px; border: 2px solid #fff; transition: all .5s; box-shadow: 1px 3px 12px rgb(0 0 0/16%); height: 100% }
ul.shoftwere-using { display: flex; flex-wrap: wrap; margin: -3px }
ul.shoftwere-using li { padding: 5px 9px; border: 1px solid rgb(102 102 102/.5); border-radius: 3px; margin: 3px!important; line-height: 16px }
.ux-box .btn.btn-border { border: 1px solid #777; width: 100%; display: block; padding: 17px 0; font-size: 16px; line-height: 18px; color: #777; text-align: center; font-family: Arial, Helvetica, sans-serif; border-radius: 0 }
ul.location-admin { display: flex; align-items: center }
ul.location-admin li:nth-child(1) { padding-right: 11px; margin-right: 11px; border-right: 1px solid #777 }
ul.location-admin li img { margin-right: 7px }
ul.location-admin li { line-height: 1.1; font-size: 14px }
.ui-full-box .content-box p { font-size: 13px; line-height: 19px; color: #3d3d3d; padding-bottom: 15px }
.sign-up-box { padding: 129px 0; text-align: center }
.ux-box.classsign-up-box .inner-ux-ui-box, .ux-box.classsign-up-box:hover .inner-ux-ui-box { border-color: #f1f1f1 }
.ux-box.classsign-up-box .inner-ux-ui-box { background-color: #f1f1f1; height: 100%; display: flex; align-items: center; justify-content: center; width: 100%; flex-wrap: wrap }
.ux-box.classsign-up-box { box-shadow: none }
.ux-box.classsign-up-box .inner-ux-ui-box .sign-up-box a { font-size: 24px; font-family: Arial, Helvetica, sans-serif; line-height: 35px; margin: 0; display: block }
.ux-box.classsign-up-box .inner-ux-ui-box .sign-up-box span { font-size: 24px; font-family: Arial, Helvetica, sans-serif; line-height: 35px; margin: 0 }
.btn.btn-active { color: #fff; padding: 12px 38px; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; display: block; max-width: 190px; border-radius: 0; font-size: 16px; line-height: 19px }
.btn.btn-active:hover { color: #1d2c35; background-color: #f3f3f3 }
.ux-box.blur-box inner-ux-ui-box:hover { border-color: #fff!important }
.ux-box.blur-box:hover .inner-ux-ui-box { border-color: #fff }
.ux-box.blur-box:hover .inner-ux-ui-box .btn.btn-border { background-color: initial; color: #777; border: 1px solid #777 }
.coders-sec .container { max-width: 875px; margin: 0 auto }
.coders-sec h2 { margin: 0; font-size: 42px; line-height: 52px; color: #3d3d3d; font-weight: 400; text-align: center }
.color-blue { color: #4386cd }
.coders-sec .com-coders-box { display: flex; text-align: center; flex-wrap: wrap; margin: 50px -15px 0; position: relative }
.coders-sec .com-coders-box .coders-box { width: calc(33.33% - 30px); margin: 0 15px; position: relative; transition: all .3s ease }
.coders-sec .com-coders-box .coders-box .img-box { width: 114px; height: 114px; border-radius: 50%; margin: 0 auto; transition: all .3s ease }
.coders-sec .com-coders-box .coders-box:hover .img-box { border: 4px solid rgb(255 255 255/.8); box-shadow: 0 0 20px rgb(0 0 0/35%) }
.coders-sec .com-coders-box .coders-box .img-box img { transform: scale(1); transition: all .5s ease }
.coders-sec .com-coders-box .coders-box:hover .img-box img { transform: scale(1.1) }
.coders-sec .com-coders-box .coders-box .img-box img { line-height: 0; display: block; margin: 0 auto; padding: 32px }
.coders-sec .com-coders-box .text-box h3 { margin: 0; font-size: 16px; color: #3d3d3d }
.coders-sec .com-coders-box .text-box p { font-size: 14px; line-height: 26px; color: #3d3d3d }
.coders-sec .com-coders-box .text-box { margin-top: 18px }
.coders-sec .com-coders-box:before { content: ""; width: 75%; height: 2px; background-color: #ccc; position: absolute; top: 55px; margin: 0 auto; left: 0; right: 0 }
.btn.btn-border { font-size: 16px; line-height: 21px; color: #fff; padding: 12px 30px; border: 1px solid #fff; border-radius: 5px; margin-top: 18px; display: inline-block }
.ux-designer-sec .ui-right .top-box .right-in-box ul li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; margin: 6px 0; border-bottom: 1px solid rgb(29 44 53/19%) }
.ux-designer-sec .ui-right .top-box .right-in-box ul li span { font-size: 13px; line-height: 19px; color: #3d3d3d; font-weight: 500 }
.ux-designer-sec .ui-right .top-box .right-in-box ul li:last-child { border: none }
.ux-designer-sec .ui-right .left-in-box .location-admin li img { margin-right: 7px }
.ux-designer-sec .ui-right .left-in-box .location-admin li { display: flex; align-items: center; padding-right: 16px; position: relative; font-size: 13px; line-height: 25px }
.ux-designer-sec .ui-right .left-in-box .location-admin li:nth-child(2):before { content: ""; width: 1px; height: 13px; background-color: #3d3d3d; position: absolute; left: -8px; top: 6px }
.view-profile-btn { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; text-align: center; background-color: rgb(255 255 255/43%); height: 100% }
.inner-right-box { padding-left: 20px }
.ux-designer-sec .inner-ux-designer .ux-right-box h2 { margin-top: 27px; margin-bottom: 7px; color: #081827; font-size: 17px; font-weight: 400 }
a { transition: all .5s }
.ux-designer-sec .ui-left .btn.btn-blue:hover { background-color: initial; color: #4386cd }
.ux-designer-sec a:hover { color: #3d3d3d }
.btn.btn-border:hover { background-color: #fff; color: #3d3d3d }
.ux-designer-sec .ui-right ul.shoftwere-using li a:hover { background-color: #4386cd; color: #fff }
a.img-box:hover img { transform: scale(1.1) }
a.img-box img { transition: all .5s; width: 100%; display: block }
a.img-box { overflow: hidden; display: block }
a.img-admin { display: block }
a.img-admin img { display: block; object-fit: contain; transition: all .5s; width: 100%; margin: 0; display: block }
span.star-img { line-height: 20px }
@keyframes moveInleft { 0% {
opacity:0;
transform:translateX(-100px)
}
80% {
transform:translateX(10px)
}
100% {
opacity:1;
transform:translate(0)
}
}
@keyframes moveInRight { 0% {
opacity:0;
transform:translateX(100px)
}
80% {
transform:translateX(-10px)
}
100% {
opacity:1;
transform:translate(0)
}
}
@keyframes moveInTop { 0% {
opacity:0;
transform:translateY(100px)
}
80% {
transform:translateY(-10px)
}
100% {
opacity:1;
transform:translate(0)
}
}
h2 { font-weight: 400 }
.ux-box.classsign-up-box .ui-full-box .btn.btn-border:hover { color: #4386cd; background-color: #fff }
.blur-box-img img { display: block; width: 100% }
.ux-box.blur-box .inner-ux-ui-box.hover-bdr { box-shadow: none; padding: 0 }
.ux-designer-sec .ux-box.blur-box { padding: 21px; border: 2px solid #fff; transition: all .5s; box-shadow: 1px 3px 12px rgb(0 0 0/16%) }
.page-sec { padding: 70px 0 }
.ui-right-full { width: 100% }
.ui-right-full .top-box { border-bottom: 1px solid #ddd; margin-bottom: 15px }
.ui-full-box { width: 100% }
ul.location-admin li { margin-left: 0!important }
.headBox h2 { text-align: center; font-size: 42px; font-weight: 700; line-height: 1.2; color: #242837; margin-bottom: 20px }
.headBox { margin: 0 auto; text-align: center; margin-bottom: 50px; max-width: 800px }
h2 { font-size: 30px; font-weight: 700; line-height: 46px; margin-bottom: 20px; color: #333 }
.btn__block li:last-child { margin-right: 0 }
.text_left { text-align: left!important }
h3 { font-size: 28px; font-weight: 700; line-height: 1.2; color: #242837; margin-bottom: 20px }
.headBox h3 { text-align: center; font-size: 36px; font-weight: 700; line-height: 1.2; color: #242837; margin-bottom: 20px }
.ux-designer-sec .ui-right .top-box .left-in-box h3 { font-size: 22px; margin: 0 0 5px }
.btn-right .btn-blue { color: #fff; font-size: 16px; display: block; padding: 4px 15px; border-radius: 6px; margin-right: 15px }
.btn-right .btn-blue:hover { background: #157be7 }
.img_Block img { max-width: 100%; height: auto; object-fit: contain }
.img_Block { width: 100%; height: 100%; background: #689bff; display: flex; align-items: center; justify-content: center }
@keyframes pulse-blue { 0% {
transform:scale(.95);
box-shadow:0 0 rgba(52,172,224,.7)
}
70% {
transform:scale(1);
box-shadow:0 0 0 10px rgba(52,172,224,0)
}
100% {
transform:scale(.95);
box-shadow:0 0 rgba(52,172,224,0)
}
}
@keyframes pulse-dblue { 0% {
transform:scale(.95);
box-shadow:0 0 rgba(67,134,205,.7)
}
70% {
transform:scale(1);
box-shadow:0 0 0 10px rgba(67,134,205,0)
}
100% {
transform:scale(.95);
box-shadow:0 0 rgba(67,134,205,0)
}
}
.btn_b { border: 1px solid #4386cd; color: #4386cd }
@media only screen and (max-width:1399px) {
.container { max-width: 96% }
.img-admin img { width: 100% }
}
@media only screen and (min-width:1200px) and (max-width:1290px) {
.ux-designer-sec .ux-box .inner-ux-ui-box { min-height: 100% }
.ux-designer-sec .ux-box .inner-ux-ui-box .blur-box-img img { min-height: 350px; object-fit: cover; height: 100% }
}
@media only screen and (min-width:991px) and (max-width:1200px) {
.sign-up-box { padding: 120px 0 }
.blur-box-img img { width: 100%; height: 309px }
}
@media only screen and (max-width:1200px) {
.ux-designer-sec .ui-right ul.shoftwere-using li a { margin-bottom: 10px; display: block }
.img-admin img { object-fit: contain }
ul.location-admin li { width: 100% }
.ux-designer-sec .ux-box { width: calc(50% - 28px) }
.page-sec { padding: 50px 0 }
.headBox h2 { font-size: 32px; line-height: 46px; margin-bottom: 25px }
.headBox { margin-bottom: 20px }
.headBox h3 { font-size: 28px }
}
@media only screen and (max-width:991px) {
.inner-right-box { padding-left: 0 }
.ux-designer-sec { padding: 60px 0 }
.ux-designer-sec .inner-ux-designer .ux-right-box { width: calc(30% - 20px) }
.ux-designer-sec .ui-right .top-box .left-in-box { width: 100% }
.ux-designer-sec .ui-right .top-box .right-in-box { width: 100% }
.coders-sec { padding: 50px 0 }
.coders-sec h2 { font-size: 30px }
.coders-sec .container { max-width: 96% }
ul.location-admin li { font-size: 13px }
.sign-up-box { padding: 132px 0 }
.ux-box.classsign-up-box { background-color: #f1f1f1; padding: 21px; border: 2px solid #fff; transition: all .5s; box-shadow: 1px 3px 12px rgb(0 0 0/16%) }
.ux-box.classsign-up-box .inner-ux-ui-box { background-color: initial; box-shadow: none; left: 0; right: 0 }
.blur-box-img img { min-height: 100%; height: 100%; object-fit: cover }
.ux-box.blur-box { padding: 21px; border: 2px solid #fff; transition: all .5s; box-shadow: 1px 3px 12px rgb(0 0 0/16%) }
.page-sec { padding: 35px 0 }
.ux-designer-sec .ux-box .inner-ux-ui-box { padding: 10px }
.headBox h2 { font-size: 30px; line-height: 40px; margin-bottom: 25px }
}
@media only screen and (max-width:767px) {
.ux-designer-sec .inner-ux-designer .ux-left-box { width: 100%; margin: 0 }
.ux-designer-sec .inner-ux-designer { margin: 0 }
.ux-designer-sec .inner-ux-designer .ux-right-box { width: 100%; margin: 0 }
.ux-designer-sec .ux-box .inner-box-ux .ui-left .admin-port { max-width: 140px; position: relative }
.ux-designer-sec .ux-box .inner-box-ux .ui-right { width: calc(100% - 112px); padding-left: 10px }
.ux-designer-sec .ui-right .left-in-box .location-admin li:nth-child(2):before { display: none }
.coders-sec h2 { font-size: 24px; line-height: 32px }
.coders-sec .com-coders-box .coders-box { width: 100% }
.coders-sec .com-coders-box:before { display: none }
.ux-designer-sec .inner-ux-designer .ux-left-box span:first-child img { margin: 0 }
.coders-sec .com-coders-box { margin: 50px 0 0 }
.container { max-width: 89%; padding: 0 }
.ux-designer-sec .ui-left .btn.btn-blue { max-width: 106px; margin-left: 0; margin-right: auto }
.ux-designer-sec { padding: 34px 0 50px }
.ux-designer-sec .ux-box { width: 100% }
ul.location-admin { flex-wrap: wrap; padding-bottom: 10px }
ul.location-admin li:nth-child(1) { padding: 0 0 4px; margin: 0; border: none }
.sign-up-box { padding: 75px 0 }
.ux-designer-sec .ui-right .top-box { margin-bottom: 9px; padding-bottom: 10px }
.img-bg { display: none }
.coders-sec .container { max-width: 89% }
.coders-sec .com-coders-box .coders-box { width: 100%; padding-bottom: 20px }
.coders-sec .com-coders-box .coders-box:last-child { padding-bottom: 0 }
.ux-box.classsign-up-box .inner-ux-ui-box { position: initial; transform: inherit }
.ux-designer-sec .ux-box .inner-ux-ui-box { padding: 15px }
.headBox h2 { font-size: 24px; line-height: 34px; margin-bottom: 15px }
h2 { font-size: 24px; line-height: 32px; margin-bottom: 15px }
body { font-size: 15px }
}
@media only screen and (max-width:767px) {
.right-box.blue-bg { background: 0 0 }
.headBox h3 { font-size: 22px }
h3 { font-size: 18px; margin-bottom: 15px }
.ux-designer-sec .ui-right .top-box .left-in-box h3 { margin: 0; font-size: 18px }
}
.view-profile-btn .btn.btn-active { display: none }
.view-profile-btn:hover .btn.btn-active { background: #4386cd; color: #fff; display: block; }
.light-bg { background: #f7f7f7; }
.m30 { margin: 30px; }
html { overflow-y: scroll !important; }
.sub-text-center { max-width: 900px; }
.sub-text-center { text-align: center; color: #000; font-size: 18px; max-width: 700px; margin: 0 auto 30px; }
.text-center { text-align: center; }
.sec-head { font-size: 40px; color: #3d3d3d; line-height: 1.3; margin: 0 0 30px; }
.cloudlinks ul { margin: 0 -15px; display: flex; flex-wrap: wrap; }
.cloudlinks li { width: 100%; font-size: 14px; padding: 5px 15px; border: 1px solid #e7e7e7; background: #f3f3f3; margin: 0 15px 15px; padding: 7px 10px; }
.cloudlinks li a { color: #505050; }
.cloudlinks li .lnk { color: #3098c9; font-weight: 700; }
.container .container { max-width: 100%; padding: 0; }
ul.cl-nxt-pre { margin: 0; padding: 0; display: flex; justify-content: space-between; }
ul.cl-nxt-pre li { display: block; }
ul.cl-nxt-pre li a {
    color: #fff;
    font-size: 15px;
    background: #006c9f;
    display: block;
    padding: 6px 12px;
    font-weight: 400;
    line-height: 1.6;
}
.main-bg-color { background: #eef5fd; }
@media only screen and (max-width: 767px) {
.blog-dtl-img { display: none !important; }
.cloudlinks li { width: calc(100% - 20px); margin: 0 10px 15px; }
.top-blog-dtl blockquote { margin: 20px 25px; padding: 5px; }
.bannerCaption { padding: 10px; position: relative; transform: none; }
.main-bg-color { margin-top: 0; padding: 30px 15px; }
.main-bg-color .food-top-title { line-height: 1.6; }
.customize-row { padding: 0 5px; }
span.promobannerhead { color: #fff; font-size: 24px; line-height: 1.5; font-weight: 700; margin-bottom: 15px; display: block; }
.new_bg .customize-left p:last-child { margin: 0; }
.banner-btn { padding: 15px 20px; font-size: 16px; line-height: 1.4; text-align: center; }
.how-it-in-row { padding: 0; }
.sub-text-center { font-size: 16px; margin: 0 auto 30px; }
}
.container { width: 100%; max-width: 1170px; padding: 0 15px; margin: 0 auto; }
.inner-insight img { max-width: none; width: 55px; height: 55px; border-radius: 50%; overflow: hidden; }
.insight-box { border: 1px solid #ccc; }
.sec-head { text-align: center; font-size: 42px; line-height: 52px; color: #3d3d3d; margin-bottom: 52px; margin: 0 0 30px; }
.articles-sec .inner-articles-sec { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.articles-sec .inner-articles-sec .articles-box { width: calc(33.33% - 24px); margin: 12px; box-shadow: 0 3px 55px rgb(132 131 131 / 16%); background: #fff; }
.insight-box { border: 1px solid #ccc; }
.articles-sec .inner-articles-sec .articles-box .text-box { padding: 22px; }
.articles-sec .inner-articles-sec .articles-box .text-box p { margin: 0 0 18px; font-weight: 600; line-height: 25px; font-size: 16px; }
.post { margin: 0 0 15px!important; font-size: 16px!important; color: #3d3d3d; line-height: 26px!important; font-weight: 400!important; }
.articles-sec .inner-articles-sec .articles-box .text-box ul { display: flex; align-items: center; }
.articles-sec .inner-articles-sec .articles-box .text-box ul li { margin-right: 15px; font-size: 14px; color: #3d3d3d; }
.articles-sec .inner-articles-sec .articles-box .img-box img { width: 100%; display: block; }
a.img-box img { transition: all .5s; }
.lnks { color: #fff; font-size: 16px; margin: 70px 0 10px 0; }
.lnks a { color: #fff !important; }
.postar { padding: 40px 0; width: 100%; max-width: 800px; margin: 0 auto !important; letter-spacing: 1px; }
.postar h2 { color: #d58000 !important; }
.postar h3 { color: #007aa3 !important; }
.updt { font-size: 14px; }
</style> <script type="text/javascript"> function toggleNav() {
var element = document.getElementById("cisnav");
element.classList.toggle("show");
element.classList.toggle("hide");
}
</script><style>.toggle-button-n {
width: 40px;
background: 0 0;
border: none;
padding: 0;
cursor:pointer;
}
.chat-box { position: fixed; right: 0; bottom: 0; font-family: "Roboto", sans-serif; width: 300px; z-index: 1000; }
.chat-box .toggle-button-n { width: 32px; }
.chat-icon { background: rgb(32,78,226); background: linear-gradient(101deg, rgba(32,78,226,1) 0%, rgba(10,166,246,1) 100%); margin: 0 15px 45px; width: 60px; height: 60px; border-radius: 100%; padding: 12px; border: solid 2px #108ef1; float: right; }
.chat-form { background: #1d2c35; padding: 15px; margin: 10px; border-radius: 5px; border: solid 1px #666; color: #fff; position: relative; }
.chat-form h3 { color: #fff; margin-top: 0px; text-align: center; padding-bottom: 10px; border-bottom: solid 1px rgba(255, 255, 255, .4); margin-bottom: 10px; font-size: 16px; }
.chat-form-in label { display: block; width: 100%; font-size: 14px; padding-bottom: 3px; }
.chat-form-in input[type="text"], .chat-form-in input[type="email"], .chat-form-in textarea { width: 100%; border: 0; padding: 4px; border-radius: 2px; height: 30px; font-family: "Roboto", sans-serif; font-size: 13px; }
.chat-form-in textarea { height: 60px; font-family: "Roboto", sans-serif; font-size: 13px; resize: none; }
.ht-input-box { padding-bottom: 10px; }
.ht-button { background-color: #FC9803; border-radius: 3px; padding: 6px 20px; display: inline-block; color: #fff; font-size: 14px; line-height: 23px; border: 0; }
.ht-button:hover { background: #fff; color: #FC9803; }
.close-btn { display: none; padding: 6px; }
.chat-box.open .close-btn { display: block; }
.chat-box.open .opn-btn { display: none; }
.chat-form { display: none; }
.chat-box.open .chat-form { display: block; }
.opn-btn { padding: 3px; }
.loader { position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-color: #eceaea; background-image: url("https://www.coders.dev/images/ajax-loader.gif"); background-size: 50px; background-repeat: no-repeat; background-position: center; z-index: 10000000; opacity: 0.4; filter: alpha(opacity=40); }
.hide { display: none; }
</style> <style> .works-decp {
 padding: 15px 10px;
 border-left: 8px solid #fc9803;
 color: #121f2c;
}
.container800 { width: 100%; max-width: 800px; padding: 0 15px; margin: 0 auto; }
.table-of-contents { /*float: right;*/
  /*width: 100%;*/
background: #f6f6f6; font-size: 0.8em; padding: 1em 2em; margin: 0 0 1.2em 0; border-left: solid 4px #fc9803 !important; }
.table-of-contents ul { padding: 0; }
.table-of-contents li.h2 { margin: 0 0 0.5em 0; font-size: 1em; font-weight: 600; list-style-type: disclosure-closed; }
.table-of-contents li.h3 { margin: 0 0 0.50em 1em; list-style-type: disc; }
.table-of-contents a { text-decoration: none; }
.table-of-contents a:hover, .table-of-contents a:active { text-decoration: underline; }
h2:target, h3:target { animation: highlight 1s ease; }
 @keyframes highlight {  from {
background: yellow;
}
to { background: white; }
}
.filler-box { text-align: center; margin: 30px 0; border-radius: 8px; }
.filler-box h5 { text-align: center; font-size: 30px; }
.filler-box p { text-align: center; margin: 30px 20px; }
a.banner-btn:hover { background-color: #fc9803; }
.fbox h5 { color: #fc9803 !important; }
.fbox ul { text-align: left !important; ; margin-left: 65px !important; ; }
.fbox ul li { margin: 10px; list-style-type: circle; }
.fbox .banner-btn {
    background-color: #fff !important;
    margin-top: 20px !important;
    color: #000;
    padding: 10px 20px;
    font-weight: 700;
}
 @media only screen and (max-width: 767px) {
.filler-box h5 { font-size: 24px; }
.fbox ul { margin-left: 20px !important; ; }
}
/*----------04-10-24------------*/
.header.container { right: 0; left: 0; }
.banner.bannerCaption { position: relative; top: 0; transform: none; margin-top: 100px; padding: 100px 15px; max-width: 1170px; box-shadow: 0 0 10px rgba(0, 0, 0, .2) !important;}
.right-footer.inner-right-box { display: flex; flex-wrap: wrap; justify-content: space-between; }
.footer .footer-inner { align-items: flex-start; }
.postar {
    padding: 40px 5px 0;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .2) !important;
    max-width: 1170px;
    background: #fff;
    position: relative;
    z-index: 1;
}
.new_bg.container { width: 100%; max-width: 100%; }
.new_bg .customize-row { max-width: 1170px; margin: 0 auto; }
.bannerCaption h1, .bannerCaption p { max-width: 1170px; text-align: center; margin: 0 auto 30px; position: relative; z-index: 1; }
.filler-box { padding: 25px 0 !important; }
.c1 .banner-btn { margin-left: auto !important; margin-right: auto !important; display: block; max-width: 200px; text-align: center; }
.container.row.tab-wrap_1306 { margin: 0 auto; }
.top-blog-dtl h2 {
    color: #fc9803 !important;
}
 @media only screen and (max-width:991px) {
.header-button { padding: 25px 0; }
.banner.bannerCaption { margin-top: 20px; padding: 50px 0; }
.customize-row { padding: 0 15px; }
.promobannerhead { font-size: 24px; line-height: 1.4; }
.blog-post-row p { padding-bottom: 8px; line-height: 1.6; margin-bottom: 15px; }
.banner-btn { padding: 15px 20px; font-size: 16px; line-height: 1.4; }
}
@media only screen and (max-width:767px) {
.header-button { display: flex; padding: 20px 0; }
.banner.bannerCaption { margin-top: 0; padding: 30px 15px; }
span.promobannerhead { line-height: 1.4; }
.customize-left { width: 100%; padding: 20px 0; }
.footer { padding: 40px 0 10px; margin: 0; }
.blog-post-row p { padding-bottom: 0; line-height: 1.6; margin-bottom: 15px; }
.bannerCaption h1, .banner-text { position: relative; z-index: 1; line-height: 1.4; }
.ttSlider { width: 100%; padding: 0 20px; }
.swiper-button-prev3, .swiper-rtl .swiper-button-next3 { left: var(--swiper-navigation-sides-offset, 10px); }
.swiper-button-next3, .swiper-rtl .swiper-button-prev3 { right: var(--swiper-navigation-sides-offset, 10px); }
.logo svg {
    display: block;
}
.top-blog-dtl blockquote p {
    font-size: 15px;
    line-height: 1.6;
}
.top-blog-dtl ul li {
    line-height: 1.6;
}
}
.top-blog-dtl table { border-collapse: collapse; border: 1px dashed #000; width: 100%; margin: 20px 0; padding: 8px; }
.top-blog-dtl th, .top-blog-dtl td { border: 1px dashed black; border-collapse: collapse; padding: 8px; }
.fr-dashed-borders, table.fr-dashed-borders td { border: 1px dashed #000 !important; }
.cis_tab-sec_1306 { padding: 80px 0; max-width: 1170px;
    margin: 0 -5px;
    box-shadow: none !important;}
.tab-wrap_1306 { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.tab-wrap_1306 .tabs_1306 { flex: 0 0 370px; max-width: 370px; padding-left: 15px; padding-right: 15px; }
.tab-wrap_1306 .tab-content_1306 { flex: 0 0 calc(100% - 370px); max-width: calc(100% - 370px); padding-left: 15px; padding-right: 15px; }
.tab-wrap_1306 .tab-content_1306 .list_1306 { display: flex; font-size: 16px; flex-wrap: wrap; margin: 0 -10px; }
.tab-wrap_1306 .tab-content_1306 .list_1306 li { margin-bottom: 5px; width: 50%; padding: 0 10px; }
.tab-wrap_1306 .tabs_1306 .tab-item_1306 { display: block; padding: 0 10px; margin-bottom: 10px; font-size: 20px; font-weight: 700; cursor: pointer; }
.tab-content-wrap_1306 { display: none; }
.tab_radio_1306 { opacity: 0; position: absolute; z-index: -99; }
#tab_TopSkills:checked~.tab-content_1306 .tab-content-wrap_1306:nth-child(1),  #tab_TrendingSkills:checked~.tab-content_1306 .tab-content-wrap_1306:nth-child(2),  #tab_TopSkillsInUS:checked~.tab-content_1306 .tab-content-wrap_1306:nth-child(3),  #tab_serviceTM:checked~.tab-content_1306 .tab-content-wrap_1306:nth-child(4) { display: block; }
.tab_radio_1306:nth-child(1):checked~.tabs_1306 .tab-item_1306:nth-child(1),  .tab_radio_1306:nth-child(2):checked~.tabs_1306 .tab-item_1306:nth-child(2),  .tab_radio_1306:nth-child(3):checked~.tabs_1306 .tab-item_1306:nth-child(3),  .tab_radio_1306:nth-child(4):checked~.tabs_1306 .tab-item_1306:nth-child(4) { color: #0171bc; }
.tab-wrap_1306 .tab-content_1306 .list_1306 a { color: #262626; }
.tab-wrap_1306 .tab-content_1306 .list_1306 a:hover { color: #0171bc; }
 @media(max-width: 1169px) {
.tab-wrap_1306 .tabs_1306 { flex: 0 0 300px; max-width: 300px; padding-left: 15px; padding-right: 15px; }
.tab-wrap_1306 .tab-content_1306 { flex: 0 0 calc(100% - 300px); max-width: calc(100% - 300px); padding-left: 15px; padding-right: 15px; }
}
 @media(max-width: 991px) {
.tab-wrap_1306 .tabs_1306 { flex: 0 0 250px; max-width: 250px; }
.tab-wrap_1306 .tab-content_1306 { flex: 0 0 calc(100% - 250px); max-width: calc(100% - 250px); padding-left: 15px; padding-right: 15px; }
.cis_tab-sec_1306 { padding: 40px 0; }
.tab-wrap_1306 .tabs_1306 .tab-item_1306 { padding: 0; }
}
 @media(max-width: 767px) {
.tab-wrap_1306 .tabs_1306 { flex: 0 0 100%; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.tab-wrap_1306 .tabs_1306 .tab-item_1306 { font-size: 18px; padding: 0 10px; }
.tab-wrap_1306 .tab-content_1306 { flex: 0 0 100%; max-width: 100%; padding-top: 20px; }
.tab-wrap_1306 .tab-content_1306 .list_1306 { padding-left: 0; padding-right: 0; margin:0}
.tab-wrap_1306 .tab-content_1306 .list-wrap_1306 { margin: 0 -15px; }
.tab-wrap_1306 .tab-content_1306 .list_1306 a { font-size: 14px; }
}
ul.shoftwere-using { max-height: 75px; overflow: hidden; }
.content-box { height: 62px; overflow: hidden; }
 @media only screen and (max-width: 767px) {
.content-box { height: 100%; }
ul.shoftwere-using li { max-height: none; }
}
</style> <style> .ex-r-t .h-pro-col {
 border: 1px solid #ccc;
 background: #fff;
 border-radius: 10px;
 overflow: hidden;
 margin-top: 0;
 margin-bottom: 20px;
}
.h-pro-col .pro-t-dl a { color: #005CFF; font-size: 18px; }
.ex-r-con .h-pro-img { width: 34px; height: 34px; }
.ex-r-con { padding: 15px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tkw { line-height: 22px; margin: 0 0 10px; color: #333; text-align: center; font-weight: 600; }
.ex-r-con p { line-height: 1.4; font-size: 15px; margin: 0 0 10px; color: #333; -webkit-line-clamp: 3; }
.h-pro-t { color: #333; display: inline-block; padding: 0 7px; font-weight: 600; }
.h-pro-t sup { font-weight: 400; }
.h-pro-img { width: 40px; padding: 2px; background: #fff; border-radius: 50%; overflow: hidden; height: 40px; display: flex; align-items: center; justify-content: center; margin-left: -8px; }
.world-class-col:hover { background: #e4efff !important; border: 1px solid #FC9803 !important; }
.made-easy-col-in:hover { background: #FC9803; border: 1px solid #FC9803; }
.post { padding-bottom: 8px; line-height: 28px; font-size: 14px; line-height: 23px; margin-bottom: 20px; min-height: 70px; border-left: 8px solid #fc9803; padding-left: 10px; }
.table-res1 table thead td { background: #242837!important; }
.table-res1 table tr td:nth-child(4) { background: #242837 !important; color: #fff; }
.table-res1 table tr td:first-child { background: #fff !important; }
.table-res1 table tr td:nth-child(2) { background: #f5faff; color: #333; }
.green-bg { background: #6dcda9; color: #fff; }
.black-bg { background: #242837; color: #fff; }
.authorbox { margin-bottom: 30px; margin-top:30px; padding: 25px; border: 1px solid #e7e7e7; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.05); box-shadow: 1px 1px 2px rgba(0,0,0,.05); background: #fff; width: 100%; height: auto; display: flex; }
.authorbio { -webkit-box-sizing: border-box; }
.auth-left { width: 24%; float: left; }
.auth-right { width: 76%; float: right; padding-left: 3.5%; margin: 5px 0 0 0; }
.btn-linkedin { background: #0E76A8; border-radius: 0; color: #fff; border-width: 1px; border-style: solid; border-color: #084461; }
.btn-linkedin:link, .btn-linkedin:visited { color: #fff; }
.btn-linkedin:active, .btn-linkedin:hover { background: #084461; color: #fff; }
.authorbox.container {
    box-shadow: 0 7px 7px rgba(0, 0, 0, .2) !important;
    border: none;
}
.pn-sec {
    padding: 0 10px;
}
.footer-box ul {
    margin: 0;
}
.authorbox.container800 {
    max-width: 1170px;
    border: none;
    box-shadow: none !important;
}
 @media only screen and (max-width: 767px) {
.auth-left { width: 100%; float: unset; text-align: center; }
.auth-right { width: 100%; float: unset; padding-left: 0; margin: 20px 0 0 0; }
}
.containerPro { display: flex; max-width: 800px; margin: 50px 0; }
.team-p-l { width: 100px; margin: 20px auto 10px auto; }
.image-design1 { padding-right: 5px; padding-bottom: 5px; border-radius: 6px 0 0 0; position: relative; background: 0 0; }
.team-m-p { overflow: hidden; }
.image-design1:before { border-radius: 0 0 6px 0; position: absolute; content: ""; background: #a5d1ed; left: 10px; top: 10px; right: 0; bottom: 0; }
.image-design1 img { position: relative; border-radius: 6px 0 6px 0; }
.team-m-p img { width: 100%; display: block; transition: all .2s; cursor: pointer; }
.dname { font-size: 18px; margin: 0; line-height: 1.6; color: #000 !important; width: 100%; font-weight: 800; text-align: center; }
.card { margin: 1rem; width: 300px;  padding: .5rem 1rem;
background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 0 6px rgb(91 91 91 / 16%); display: flex; flex-direction: column; justify-content: center; align-items: center; transition: .2s; }
.card:hover { transform: translateY(-5px); }
.title { font-size: 14px; margin: 5px 0 10px 0; font-weight: 600; color: #484848!important; width: 100%; text-align: center; }
.containerPro .desc { text-align: center; font-size: 13px; line-height: 19px; color: #3d3d3d; }
.containerPro p { margin-top: 1rem; color: #484848; }
.btn.btn-border { border: 1px solid #777; width: 100%; display: block; padding: 17px 0; font-size: 16px; line-height: 18px; color: #333; text-align: center; font-family: Arial, Helvetica, sans-serif; border-radius: 0; }
.ctaSec { width: 100%; max-width: 100%; margin: 25px auto; padding: 15px 0; background-color: #07203D; border-radius: 10px; display: flex; align-items: center; position: relative; font-family: Arial, Helvetica, sans-serif; letter-spacing: .2px; clear: both; }
.ctaLeft { width: 60%; border-left: 12px solid #fc9803; border-right: 1px solid #fff; padding: 0 16px; }
.ctaSec .ctaLeft h2 { font-size: 24px; padding-bottom: 10px; line-height: 1.4; padding-top: 5px; padding: 0; margin: 0; }
.ctaSec .ctaLeft p { border: 1px solid #07203D; margin: 10px 0; padding: 10px; background: #07203D;  color:;
color: #fff; margin: 0; }
.ctaRight { width: 40%; padding: 15px 16px; text-align: center; }
.ctaRight h3 { font-size: 14px; color: #fff !important; line-height: 1.3; margin-bottom: 12px; text-align: center; margin-top: 0 !important; }
.ctaRight a.ctaButton { display: inline-block; background-color: #fff; border: 1px solid #fff; color: #fff; padding: 8px 16px; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: bold; text-align: center; cursor: pointer; color: #07203D; }
.ctaRight a.ctaButton:hover { background: no-repeat; border: solid 1px #fff; color: #fff; }
.ctaSec .containerPro, .ctaSec aside, .ctaSec blockquote { display: none; }
 @media only screen and (max-width: 767px) {
.containerPro { display: block !important; }
.ctaSec { display: block; }
.ctaLeft { width: 100%; border-top: 0; border-right: 0; padding: 0 16px; text-align: center; border-left: 0; margin: auto; }
.ctaRight { width: 100%; padding: 15px 16px; text-align: center; }
}
.shoftwere-team-m li { display: inline-block; /*margin-right: 1px;
    margin-bottom: 5px;*/
margin: 0 1px 5px 0 !important; }
.shoftwere-team-m li a { display: block; font-size: 12px; border: 1px solid #ddd; color: #000; padding: 4px 8px; border-radius: 4px; line-height: 1.4; white-space: nowrap; }
.shoftwere-team-m li a:hover { border: 1px solid #ccc; color: #fff; background: #000; }
.rel { text-align: left; border-left: none; background: #f6f6f6; margin: 50px 0 70px 0 !important; border-left: solid 4px #fc9803 !important; padding: 10px 20px; }
.footer { background-color: #000; padding: 80px 0 25px }
.footer .footer-inner { display: flex; flex-wrap: wrap }
.footer .footer-inner .left-footer { width: 30% }
.footer .footer-inner .right-footer { width: 70% }
.footer .footer-inner .right-footer .inner-right-box { display: flex; flex-wrap: wrap; justify-content: space-between }
.footer .footer-inner .right-footer .inner-right-box .footer-box { }
.footer-box h4 { font-size: 18px; line-height: 29px; color: #fff; font-weight: 600; margin-bottom: 10px }
.footer-box ul li a { color: rgb(255 255 255/.8); font-size: 14px; line-height: 29px }
.footer-box.social-sec ul { display: flex }
.footer-box.social-sec ul li { margin-right: 16px }
.footer .footer-inner .left-footer p { color: rgb(255 255 255/.8); font-size: 23px; line-height: 36px; padding-right: 101px; margin-bottom: 0 }
.footer .footer-inner .left-footer .footer-btn { border-radius: 5px; padding: 12px 23px; font-size: 16px; line-height: 21px; color: #fff; font-weight: 600; margin-top: 44px }
.footer-bottom { margin-top: 50px; border-top: 1px solid rgb(255 255 255/15%); padding-top: 20px }
.footer-bottom ul { display: flex; align-items: center; justify-content: flex-end }
.footer-bottom ul li { width: 50%; color: #fff; font-size: 14px; line-height: 29px }
.footer-bottom ul li a { font-size: 14px; line-height: 29px; color: rgb(255 255 255/47%) }
.footer .footer-inner .left-footer .footer-btn:hover { color: #1d2c35; background-color: #ccc }
.footer-box ul li a:hover { color: #4386cd }
.footer-bottom ul li:last-child { text-align: right; }
.footer-bottom ul li:last-child a { margin-left: 20px; }
ul.social-sec { display: flex; margin: 15px -5px; }
ul.social-sec li { margin: 0 5px; }
ul { padding: 0; margin: 0 0 0 15px; list-style-type: none; }
.footer-box-lg { width: 75%; }
.footer-box-lg ul { margin: 0 -10px; display: flex; flex-wrap: wrap; }
.footer-box-lg ul li { width: 50%; padding: 0 10px; }
.footer-box ul li a { color: rgb(255 255 255/.8); font-size: 14px; line-height: 29px; }
.greg { color: rgb(255 255 255/47%); text-align: center; font-size: 13px; }
.top-blog-dtl ul li { line-height: 28px; font-size: 15px; margin: 10px; list-style-type: circle; }
.top-blog-dtl ul li p { margin: 0; }
.bannerCaption .banner-text {
    max-width: 650px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}
 @media only screen and (max-width: 767px) {
.footer .footer-inner .left-footer p { font-size: 18px; line-height: 1.6; }
 @media only screen and (max-width: 991px) {
.footer .footer-inner .left-footer p {
 font-size: 20px;
 padding: 0;
}
.footer .footer-inner .right-footer {
 width: 100%;
}
}
 @media only screen and (max-width: 991px) {
.footer .footer-inner .left-footer { width: 100%; margin-bottom: 20px; }
.footer .footer-inner .left-footer p { font-size: 20px; padding: 0; }
.inner-right-box { padding-left: 0; }
.footer-bottom { margin-top: 35px; }
.footer-bottom ul li:last-child a { margin-left: 15px; }
.header-button { padding: 15px 0; }
}
 @media only screen and (max-width: 767px) {
.footer .footer-inner .left-footer p { font-size: 18px; line-height: 1.6; }
.footer .footer-inner .right-footer .inner-right-box .footer-box { width: 100%; }
.footer-box ul { margin-bottom: 10px; }
.footer-box-lg ul li { width: 100%; padding: 0 10px; }
.footer-bottom ul { flex-wrap: wrap; }
.footer-bottom ul li { width: 100%; text-align: center; }
.footer-bottom ul li:last-child { text-align: center; }
.footer-bottom ul li:last-child a { margin: 0 5px; }
.header { padding: 0 }
.header-button { padding: 15px 0; }
.main-bg-color { padding: 0 15px; }
.bannerCaption h1 { margin: 0 auto 15px; }
.banner .container { height: auto; }
.bannerCaption p { margin: 0; padding: 0; }
.customize-left { padding: 0; }
.top-blog-dtl blockquote { margin: 0; padding: 5px; }
.team-p-l.team-m-p.image-design1 { margin: 5px auto; }
.blog-col:before { opacity: 0; }
.ttSlider .blog-col { padding: 10px 15px; }
}