@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Roboto', sans-serif; font-weight: 400; color: #000; font-size: 1.1vw; width: 100%; overflow-x: hidden;}

.container {display: block; width: 94%; margin: 0 auto;}
.container::after {content: ''; display: block; clear: both;}
.clear {display: block; clear: both;}
.wrap::after {content: ''; display: block; clear: both;}

header {display: block; width: 100%; position: absolute; top: 0; left: 0; padding: 36px 0; z-index: 1;}
header .logo {display: inline-block; width: 9vw; vertical-align: middle;}
header .logo img {width: 100%;}
header nav {display: inline-block; width: calc(100% - 9vw - 8px); vertical-align: middle; text-align: right;font-size: 1.2vw;}
header nav ul {display: block;}
header nav ul li {display: inline-block; margin: 0 1vw;}
header nav ul li a {color: #fff; text-decoration: none;}

.container .steps{background: url(../images/steps.png) center no-repeat; background-size: cover; position: relative; overflow: hidden;}
.hBanner {background: url(../images/Banner.jpg) center no-repeat; background-size: cover; position: relative; overflow: hidden;}
.hBanner::before {content: ''; display: block; width: 100%; height: 84%; background: url(../images/Banner-Circle.png) center no-repeat; background-size: 100% 100%; position: absolute; bottom: -10vw; left: 0; transition: all ease-in-out 2s;}
.hBanner::after {content: ''; display: block; width: 100%; height: 30%; background: url(../images/Banner-Bot.png) center no-repeat; background-size: 100% 100%; position: absolute; bottom: -10vw; left: 0; transition: all ease-in-out 2s;}
.hBanner.show::before, .hBanner.show::after {bottom: -2px;}
.hBanner .txt {display: block; width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); text-align: center;}
.hBanner .txt h1 {font-size: 4vw; color: #fff; font-weight: 500; margin-bottom: 2vw; opacity: 0; transition: all ease-in-out 1s;}
.hBanner .txt h1.show {opacity: 1;}
.hBanner .txt h2 {font-size: 2.8vw; color: #231f20; font-weight: 500; opacity: 0; transition: all ease-in-out 1s;}
.hBanner .txt h2.show {opacity: 1;}

section.intro {display: block; padding: 14vw 0 18vw; text-align: center; position: relative; z-index: 1;}
section.intro .logo {display: block; margin-bottom: 1vw; opacity: 0; transition: all ease-in-out 1s;}
section.intro .logo.show {opacity: 1;}
section.intro .logo img {width: 9vw;}
section.intro .desc {font-size: 3.4vw; color: #939598; opacity: 0; transition: all ease-in-out 1s;}
section.intro .desc.show {opacity: 1;}
section.intro .desc strong {font-weight: 500; color: #020202;}

section.benefits {display: block; padding: 18vw 0; background: #e0a019; color: #fff;}
section.benefits h2 {font-size: 5vw; text-align: center; margin-bottom: 14vw;}
section.benefits h2 img {width: 9vw;}

.benefitsListWrap {display: block; max-width: 64vw; margin: 0 auto;}
.benefitsListWrap .benefitsW {margin-bottom: 24vw;}
.benefitsListWrap .benefitsW h3 {font-size: 5vw; margin-bottom: 8vw; text-align: center; /*transition: all ease-in-out .2s;*/
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; width: 100%; text-align: center; width: 100%;
}

.benefitsListWrap .benefitsW h3.scaleup {color: #000;}
.benefitsListWrap .benefitsW .list {display: block; border-top: 4px solid rgba(255,255,255,.5); margin-bottom: 8vw;}
.benefitsListWrap .benefitsW .list .box {display: block; border-bottom: 4px solid #fff; color: #fff; transition: all ease-in .2s; position: relative; opacity: .5; font-weight: 400;}
.benefitsListWrap .benefitsW .list .box::before {content: ''; display: block; width: 100%; border-top: 4px solid #000; height: 0; background: #000; position: absolute; top: -4px; left: 0; z-index: 1; opacity: 0; transition: all ease-in-out 1s;}
.benefitsListWrap .benefitsW .list .box .txt {display: inline-block; width: calc(100% - 22vw - 8px); vertical-align: middle; font-size: 2vw; transition: all ease-in-out .2s; position: unset;  top: unset; left: unset; transform: unset; margin-bottom: unset; text-align: unset;}
.benefitsListWrap .benefitsW .list .box .pic {display: inline-block; width: 22vw; vertical-align: middle; opacity: 0; transition: all ease-in-out 1s;}
.benefitsListWrap .benefitsW .list .box .pic::after {content: ''; display: block; clear: both;}
.benefitsListWrap .benefitsW .list .box .pic img {width: 100%; float: right;}
.benefitsListWrap .benefitsW:last-child {margin-bottom: 0;}

.benefitsListWrap .benefitsW .cta {display: inline-block; padding: 1vw 4vw; border: .2vw solid #fff; color: #fff; border-radius: 2vw; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 1.4vw;}
.benefitsListWrap .benefitsW .cta:hover {border-color: #000; color: #000;}

.auditions {display: block; padding: 14vw 0; text-align: center;}
.auditions h2 {font-size: 5vw; margin: 14vw auto 80vh; text-align: left; display: block; max-width: 64vw; text-align: center;}
.auditions .auditionsList {display: block; max-width: 64vw; margin: 0 auto; text-align: center;}
.auditions .auditionsList .box {display: block;}
.auditions .auditionsList .box .txtWrap {display: block; width: 100%; transform: translate(-50%, -50%) scale(.3); position: fixed; top: 50%; left: 50%; z-index: -100; opacity: 0;}
.auditions .auditionsList .box .txt {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8vw; width: 140%; font-weight: 700;}
.auditions .auditionsList .box:last-child {margin-bottom: 0;}

.runningTxts {display: block; padding: 14vw 0; font-size: 3.6vw; color: #898a8d;}
.runningTxts strong {color: #000000;}

.threeSteps {display: block; padding: 14vw 0 10vw; text-align: center;}
.threeSteps h2 {font-size: 5.2vw; color: #231f20; margin-bottom: 14vw;}
.threeSteps .stepsWrap {display: block; max-width: 50vw; margin: 0 auto; color: #000;}
.threeSteps .stepsWrap .step {display: block; margin-bottom: 18vw;}
.threeSteps .stepsWrap .step * { opacity: 0;}
.threeSteps .stepsWrap .step .head {display: block; font-size: 2.2vw; margin-bottom: 5vw;}
.threeSteps .stepsWrap .step .head strong {display: block; font-size: 3.2vw;}
.threeSteps .stepsWrap .step p {font-size: 2.2vw; margin-bottom: 4vw; font-weight: 300;}
.threeSteps .stepsWrap .step img {width: 100%;}

.threeStepsImg {display: block; padding: 10vw 20px 10vw; text-align: center;}
.threeStepsImg h2 {font-size: 5.2vw; color: #231f20; margin-bottom: 14vw; }
.threeStepsImg .stepsWrap {display: block; max-width: 90vw; margin: 0 auto; color: #000;}
.threeStepsImg .stepsWrap .step {display: block; margin-bottom: 10vw;}
.threeStepsImg .stepsWrap .step * { opacity: 0;}
.threeStepsImg .stepsWrap .step img {width: 100%; max-height: 500px;}

.packages {display: block; padding: 0 0 14vw; text-align: center;}
.packages h2 {font-size: 5.2vw; color: #231f20; margin-bottom: 1vw;}
.packagesWrap {display: block; max-width: 80%; margin: 0 auto 42px;}
.packagesWrap .box {display: inline-block; width: calc(100% / 5 - 2vw - 4px); vertical-align: top; margin: 0 1vw; text-align: left; color: #959698; cursor: pointer;}
.packagesWrap .box .namePrice {display: block; margin-bottom: 1vw; text-align: center; padding-top: 3vw;}
.packagesWrap .box:hover .namePrice {background: #000; border-radius: 1.2vw; color: #fff;}
.packagesWrap .box .namePrice .name {display: block; text-align: center; font-size: 1.2vw; margin-bottom: 1vw; height: 2.4vw;}
.packagesWrap .box:hover .namePrice .name {padding: 0 2vw; text-align: center;}
.packagesWrap .box .namePrice .price {display: block; padding: 2.4vw 1.4vw 3vw; background: #fdfeff; border-radius: 1.2vw; box-shadow: inset 0 0  .5vw .5vw rgba(0,0,0,.1); min-height: 10vw; font-weight: 700; position: relative;}
.packagesWrap .box .namePrice .price .priceW {display: block; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 12px;}
.packagesWrap .box:hover .namePrice .price {display: block; background: none; box-shadow: none;}
.packagesWrap .box .namePrice .price .sm {display: block; font-size: 1.1vw;}
.packagesWrap .box .namePrice .price .big {display: block; font-size: 1.8vw;}
.packagesWrap .box .namePrice .price .linthr {font-size: 1.2vw; text-decoration: line-through;}
.packagesWrap .box .register {display: block; text-align: center; font-size: 1.6vw; font-weight: 700;}
.packagesWrap .box:hover .register {color: #000;}

.packages .note {display: block; max-width: 64vw; margin: 0 auto; text-align: left; font-size: 14px; /*font-style: italic;*/}

.benefitsListWrap .benefitsW .list .box.scaleup {color: #000; border-bottom: 4px solid #000; font-weight: 700; opacity: 1;}
.benefitsListWrap .benefitsW .list .box.scaleup::before {opacity: 1;}
.benefitsListWrap .benefitsW .list .box.scaleup .pic {opacity: 1;}

footer .container {display: block; font-size: 11px; padding: 2vw 0; color: #000000; border-top: 1px solid #f3f3f3;}

.eocjs-newsticker .eocjs-newsticker-container {height: 4vw;}
.eocjs-newsticker .eocjs-newsticker-one, .eocjs-newsticker .eocjs-newsticker-two {line-height: 3.6vw;}
.eocjs-newsticker {background: none;}

.certificate {width:100px; height:50px;}
footer .copy { padding-left: 20px;  padding-left: 20px; display: inline-block; line-height: 20px;}
footer .socialMedia {float: right; line-height: 20px; padding-right: 50px;}
footer .socialMedia ul {float: right;}
footer .socialMedia ul li {display: inline-block; margin-left: 8px; transition: all ease-in-out .2s; vertical-align: middle;}
footer .socialMedia ul li img {width: 20px;}
/*footer .socialMedia ul li:hover {transform: scale(1.2);}*/
footer .socialMedia ul li a {display: inline-block; text-decoration: none; font-size: 14px; color: inherit;}

header.blk {position: relative; border-bottom: 1px solid #f3f3f3;}
header.blk nav ul li a {color: #000;}

.head {font-size: 6vw; display: block; padding: 4vw 0; border-bottom: 1px solid #000; font-weight: 500; margin-bottom: 32px;}
.contact {display: block; width: 90%; margin: 0 auto;}
.contact h3 {font-size: 2.5vw; font-weight: 500; margin-bottom: 3vw;}
.contact p {font-size: 1.2vw; font-weight: 400; margin-bottom: 3vw; line-height: 1.8vw;}
.contact .Phone {font-size: 4vw; font-weight: 500; color: #e0a019; }


.usecase ul {margin-left: 20px;}
.uc-img {text-align: center; margin-bottom: 25px;}
.uc-img img {max-height: 374px; max-width: 100%;}
.usecase .details{ width: 75%; margin: 0 auto;}
.usecase .details{ width: 75%; margin: 0 auto;}
.contactForm, .contactDetails {display: inline-block; width: 50%; float: left; padding: 4vw;}
.contactForm .caseImg, .contactDetails .caseImg {display:block; width: 100%; height: 15vw; background-size: cover; background-position: center;}
.usecase h1 {font-size: 2vw;}
.usecase h2 {font-size: 1.5vw;}
@media only screen and (max-width: 767px) {
    .contactForm .caseImg, .contactDetails .caseImg {height: 40vw;}
}
.contactForm {background: #fff7e6;}
.contactForm .formW .field {display: block; margin-bottom: 3vw;}
.contactForm .formW .field label {display: block; margin-bottom: .5vw; font-size: 1.2vw; font-weight: 500;}
.contactForm .formW .field input[type=text], .contactForm .formW .field select {display: block; width: 100%; height: 42px; padding: 0 1vw; font-size: 14px; border: 1px solid #000;}
.contactForm .formW .field textarea {display: block; width: 100%; height: 120px; padding: 1vw 1vw; font-size: 14px; border: 1px solid #000; }
.contactForm .formW .note {font-size: .9vw; margin-bottom: 2vw;}
.contactForm .formW .note a {color: inherit; text-decoration: underline;}
.contactForm .formW .iagree {font-size: 1.2vw; margin-bottom: 2vw;}
.contactForm .formW .iagree input[type=checkbox] {display: none;}
.contactForm .formW .iagree input[type=checkbox] ~ label {display: block; width: 100%; padding-left: 24px; position: relative;}
.contactForm .formW .iagree input[type=checkbox] ~ label::before {content: ''; display: block; width: 16px; height: 16px; border: 1px solid #000; border-radius: 3px; position: absolute; top: 2px; left: 0;}
.contactForm .formW .iagree input[type=checkbox]:checked ~ label::before {background: #000 url(../images/tick.png) center no-repeat; background-size: 90% auto;}
.contactForm .formW .submit {display: block;}
.contactForm .formW .submit .btn {display: inline-block; height: 42px; width: 180px; background: #e0a019; color: #fff; font-size: 1.1vw; border: 0;}
.contactDetails .neeHelp {padding-top: 3vw; border-top: 1px solid #f3f3f3;}
.contactDetails .neeHelp h4 {font-size: 1.1vw; margin-bottom: 1vw; font-weight: 500;}
.contactDetails .neeHelp p {margin-bottom: 1vw; font-weight: 500;}
.contactDetails .neeHelp .box {margin-bottom: 4vw;}
.contactDetails .neeHelp a.lnk {font-size: 1.1vw; margin-bottom: 1vw; font-weight: 500; color: #d7a23d; text-decoration: none; display: inline-block; padding-right: 2.4vw; position: relative;}
/*.contactDetails .neeHelp a.lnk::before {content: '>'; position: absolute; right: .8vw; top: 50%; transform: translateY(-50%); transition: all ease-in-out .2s;}
.contactDetails .neeHelp a.lnk:hover::before {right: 0;}*/

.txtC {text-align: center;}

.tnc {display: block; width: 90%; margin: 0 auto;}
.tnc .head {font-size: 2vw; display: block; padding: 2vw 0; border-bottom: 1px solid #000; font-weight: 500;}
.tnc .wrap {padding: 42px 0;}
.tnc h5 {font-size: 20px; margin-bottom: 20px;}
.tnc p {margin-bottom: 20px;}
.tnc ul {margin-bottom: 20px; margin-left: 20px;}

.ftTnc {display: block; margin-bottom: 20px; text-align: center;}
.ftTnc ul {display: block;}
.ftTnc ul li {display: inline-block; margin: 0 12px;}
.ftTnc ul li a {color: inherit; text-decoration: none; font-size: 13px;}
.ftTnc ul li a:hover {text-decoration: underline;}

.telNo {display: block; margin-bottom: 32px;}
.telNo span {display: block; margin-right: 20px; margin-bottom: 12px; /*padding-left: 32px;*/ font-weight: bold; color: #000;}
.telNo span a {color: inherit; text-decoration: none;}
.telNo span.usa {background: url(../images/USA.jpg) center left no-repeat;}
.telNo span.ind {background: url(../images/India.jpg) center left no-repeat;}

.wa {display: block; margin-bottom: 32px;}
.wa img {display: inline-block; width: 24px; vertical-align: middle; margin-right: 8px;}
.wa a {color: #848484; font-weight: bold; text-decoration: none;}
.contact .head {margin-bottom: 0;}

.about {display: block; width: 90%; margin: 0 auto;}
.about h3 {font-size: 3vw; font-weight: 500; margin-bottom: 3vw;}
.about p {font-size: 1.2vw; font-weight: 400; margin-bottom: 3vw; line-height: 1.8vw;}
.about .Phone {font-size: 4vw; font-weight: 500; color: #e0a019;}

.steps {width:90%; margin-left:30px; margin-right: 30px; }

.ScrollToTop {display: block; visibility: hidden; position: fixed; bottom: 20px; right: 100px; opacity: 0; transition: all ease-in-out 2s;}
.ScrollToTop.show {opacity: 1; visibility: visible;}

.chosen-container-single .chosen-single {height: 42px; line-height: 42px; border-color: #000; border-radius: 0;}
.chosen-container-single .chosen-single div b {background-position: 0 12px;}
.chosen-container-active.chosen-with-drop .chosen-single div b {background-position: -14px 12px;}
.contactForm .formW .chosen-container-single .chosen-search input[type=text] {height: 24px;}

.contactForm .formW .field.err textarea, .contactForm .formW .field.err input[type=text], .contactForm .formW .field.err select, .contactForm .formW .field.err .chosen-container-single .chosen-single {border-color: red;}
.errm {display: none; padding: 4px 0; font-size: 12px; font-weight: bold; color: red;}
.err .errm {display: block;}

.gobackbtn {display: inline-block; line-height: 42px; padding: 0 20px; text-align: center; background: #e0a019; color: #fff; font-size: 1.1vw; border: 0; text-decoration: none; border-radius: 4px;}


.testimonials {padding: 10vw 0; text-align: center;}
.testimonialSlider {display: block; max-width: 800px; margin: 0 auto;}
.testimonialSlider .testimony {margin-bottom: 20px; font-size: 18px; }
.testimonialSlider .testimony .desc {color: #959698;}
.testimonialSlider .by {margin-bottom: 20px; font-size: 18px; font-weight: 700;}
.testimonialSlider .bx-default-pager {display: block;}
.testimonialSlider .bx-default-pager .bx-pager-item {display: inline-block; margin: 0 4px;}
.testimonialSlider .bx-default-pager .bx-pager-item a {display: block; width: 12px; height: 12px; background: #ccc; text-indent: 100px; overflow: hidden; border-radius: 50%;}
.testimonialSlider .bx-default-pager .bx-pager-item a.active {background: #454545;}
.bylink {display: block; text-align: center;}
.bylink a { display: inline-block; padding: 1vw 1vw; border: 0 vw solid #e0a019; color: #e0a019; border-radius: 1vw; text-decoration: none; text-transform: uppercase; font-weight: 500; font-size: 1.2vw; margin: 0 0px;}

.contact-img {width:158px;}
.svasuKS {text-align: center;}
.useCaseReadMore {color:#3f627f; font-weight:bolder; text-decoration:none;}
.backToBlogs {color:#3f627f; font-weight:bolder; text-decoration:none; text-align: right; display: block;}
.tnc .note {margin-bottom: 12px; display: block; font-style: italic;}

.cloud-cont.nottext {padding: 0px 20px; line-height: 30px; color: #808080; }

@media only screen and (max-width: 767px) {
    .usecase .details{ width: 100%; margin: 0 auto;}
    .tnc .usecase {padding: 0px;}
}

header nav .hamburger {display: none; width: 24px; cursor: pointer;}
header nav .hamburger::before, header nav .hamburger::after {content: '';}
header nav .hamburger i, header nav .hamburger::before, header nav .hamburger::after {display: block; height: 2px; background: #fff; transition: all ease-in-out .2s;}
header nav .hamburger i {margin: 6px 0;}
header nav.active ul {display: block;}
header.blk nav .hamburger i, header.blk nav .hamburger::before, header.blk nav .hamburger::after {background: #000;}

header nav.active .hamburger i {opacity: 0;}
header nav.active .hamburger::before {transform: rotate(39deg); transform-origin: 0 0;}
header nav.active .hamburger::after {transform: rotate(-42deg); transform-origin: 0 0;}

/*--------------contuct-us code --------------*/
.contUscont6 {
    width: calc(50% - 4px);
    display: inline-block;
    vertical-align: middle;
    padding: 2vw 4vw;
}
.contUscont6 img{
    width: 100%;
}
.contUscont6 .contUSHead,
.contactDetails h3,
.contactDetails .contDetHead {
    font-size: 42px;
    font-weight: 300;
    color: #4B7193;
    line-height: 52px;
    padding-bottom: 30px;
}

.contUscont6 .contUSText,
.contUscont4 .contUSText,
.contDetText p {
    font-size: 17px;
    line-height: 27px;
    color: #7A7A7A;
}
.contUscont4 {
    width: calc(33.3% - 4px);
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 2vw 2vw;
}
.contUscont4 .contUSHead {
    font-size: 28px;
    color: #4B7193;
    padding: 15px 0px;
}
.contactForm {
    border-radius: 50px;
    border: 1px solid #000;
}
.contactDetails h3{
    font-weight: 600;
}
.contactDetails .contDetHead{
    border-bottom: 1px solid #000;
    padding: 20px 0px;
    margin-bottom: 30px;
}
.contUscontIMg{
    padding: 0;
}
.tos {
    font-weight: normal;
}