@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&display=swap');


* {margin: 0; padding: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none;}
body {font-size: 15px; line-height: normal; color: #1E1E1E; font-family: "PT Sans Caption", serif; background: #fff; height: 100%; padding-top: 70px;}
a {outline: none; text-decoration: none; color: #0071BD; -webkit-transition: ease-in-out .3s; -moz-transition: ease-in-out .3s; -ms-transition: ease-in-out .3s; -o-transition: ease-in-out .3s; transition: ease-in-out .3s;}
a:hover {text-decoration: none;}
input, textarea, select {font-size: 14px; color: #1E1E1E; vertical-align: middle; font-family: "PT Sans Caption", serif; outline: none; resize: none;}
input[type="button"], input[type="submit"], button {-webkit-transition: ease-in-out .3s; -moz-transition: ease-in-out .3s; -ms-transition: ease-in-out .3s; -o-transition: ease-in-out .3s; transition: ease-in-out .3s; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; cursor: pointer; font-family: "PT Sans Caption", serif;}
select {appearance: none; -ms-appearance: none; -webkit-appearance: none;}
select::-ms-expand {display: none;}
.transition {-webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; -ms-transition: ease-in-out .5s; -o-transition: ease-in-out .5s; transition: ease-in-out .5s;}
img {border: none; vertical-align: top; max-width: 100%;}
ul {padding: 0; margin: 0; list-style: none;}
li {padding: 0; margin: 0; list-style: none;}
.flexBox {display: flex; flex-wrap: wrap; justify-content: center;}
.flexBox.nowrap {flex-wrap: nowrap;}
.itemCenter {align-items: center;}
.itemBottom {align-items: flex-end;}
.justifyContentBetween {justify-content: space-between;}
.justifyContentCenter {justify-content: center;}
.justifyContentEnd {justify-content: flex-end;}
.tac {text-align: center !important;}
.tar {text-align: right !important;}
.container {width: 100%; margin: auto; max-width: 1360px; padding: 0 40px;}
.pr {position: relative;}
.mb-20 {margin-bottom: 20px;}
.p-20 {padding: 20px;}

.header {width: 100%; position: fixed; background: #fff; left: 0; top: 0; box-shadow: 0 0 10px rgba(0,0,0,.2); z-index: 101;}
.header .container {height: 70px;}
.headRgt {width: calc(100% - 200px); position: relative; padding-left: 70px;}

.language {border: 1px solid #C9C9C9; border-radius: 8px; height: 32px; font-size: 13px; font-weight: 700; text-transform: uppercase; position: absolute; left: 0;} 
.language img {margin-right: 10px;}

.language button {background: none; border: none; color: #000; padding: 0 20px;}
.language:hover button {background: none; border: none; color: #000;}
.language .btn-check:checked+.btn, .language .btn.active, .language .btn.show, .language .btn:first-child:active, :not(.btn-check)+.btn:active {background: none; border: none; color: #000;}


a.showMobMenu {display: none;}
.menuBox {width: 100%}
.menu li {margin-left: 40px; font-size: 15px; font-weight: 700;}
.menu li a {color: #1E1E1E;}
.menu li a:hover {color: #0071BD;}

.topRgt ul li {margin-left: 40px; font-size: 15px; font-weight: 700; display: flex; align-items: center;}
.topRgt ul li a {color: #1E1E1E;}
.topRgt ul li a:hover {color: #0071BD;}
.topRgt ul li.openBusiness a {background: #1E1E1E; height: 47px; color: #fff; display: flex; align-items: center; border-radius: 10px; padding: 0 25px;}
.topRgt ul li.openBusiness a:hover {background: #0071BD;}

.pt80 {padding-top: 80px;}
.pb80 {padding-bottom: 80px;}
.bannerBox .det {width: 50%; padding-right: 80px;}
.bannerBox .det h1 {font-size: 50px; text-transform: uppercase; font-weight: 700;}
.bannerBox .det p {font-size: 20px; line-height: 30px; text-transform: uppercase; font-weight: 700;}
.topBtns {max-width: 500px;}
.topBtns a {height: 47px; display: flex; align-items: center; justify-content: center; border-radius: 10px; width: 48%; background: #1E1E1E; color: #fff; font-size: 15px; font-weight: 700;}
.topBtns a:hover {background: #0071BD;}
.topBtns a.learn {background: #fff; border: 1px solid #1E1E1E; color: #1E1E1E;}
.topBtns a.learn:hover {background: #0071BD; color: #fff; border-color: #0071BD;}

.bannerBox .img {width: 50%; position: relative;}
.bannerBox .img img {width: 100%; border-radius: 16px;}

.bannerLinks {position: absolute; left: -40px; bottom: 30px;}
.bannerLinks li {margin-top: 10px;}
.bannerLinks li a {display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; width: 266px; background: #1E1E1E; min-height: 55px; font-size: 18px; text-transform: uppercase; font-weight: 700; color: #fff; border: 5px solid;}
.bannerLinks li a:hover {background: #0071BD;}

.infoList {margin: -10px;}
.infoList li {width: 33.33%; padding: 10px;}
.infoList li .inner {height: 100%; border-radius: 16px; overflow: hidden;}
.infoList li .inner .img {width: 130px; background-size: cover !important; border-radius: 16px;}
.infoList li .inner .img img {opacity: 0; width: 100%;}
.infoList li .inner .det {padding: 20px 30px; width: calc(100% - 130px); display: flex; flex-direction: column; justify-content: center; font-size: 13px; line-height: 22px; font-weight: 700;}
.infoList li .inner .det span {display: block; font-size: 22px; line-height: normal; text-transform: uppercase; padding-bottom: 10px;}
.whtClr {color: #fff;}

.connectWith {margin: -40px;}
.connectWith .img {width: 50%; padding: 40px; position: relative;}
.connectWith .img img {width: 100%; border-radius: 16px;}

.connectWith .img .bannerLinks {right: 0; left: inherit; bottom: 60px;}
.exclusiveOffer .img .bannerLinks {left: 0; right: inherit; bottom: 60px;}

.connectWith .det {width: 50%; padding: 40px;}
.connectWith .det p {font-size: 20px; line-height: 28px; margin-bottom: 20px;}
a.learnMore {font-size: 20px; color: #1E1E1E; display: inline-flex; align-items: center;}
a.learnMore .arrow {margin:0 0 0 10px; font-size: 20px; transition: ease-in-out .2s; margin-top: 2px;}
a.learnMore:hover {color: #0071BD;}
a.learnMore:hover .arrow {margin-left: 15px;}
.mainHd {font-size: 40px; line-height: 46px; font-weight: 700; padding-bottom: 20px;}

.exclusiveOffer .img {display: flex; justify-content: space-between;}
.exclusiveOffer .img .img1 {width: 46%; padding-top: 70px;}
.exclusiveOffer .img .img2 {width: 54%;}
.videoBox {position: relative; overflow: hidden; border-radius: 16px;}
.videoBox video { width: 100%; vertical-align: top; transition: ease-in-out .4s;}

.benefits {margin: -10px; padding-top: 10px;}
.benefits li {padding: 10px; width: 25%;}
.benefits li .inner {height: 100%; border: 1px solid #B3B3B3; border-radius: 16px; padding: 25px;}
.benefits li .inner img {height: 60px; margin-bottom: 20px;}
.benefits li .inner h3 {font-size: 24px; font-weight: 700; padding-bottom: 10px;}
.benefits li .inner p {font-size: 15px; line-height: 24px; margin-bottom: 30px;}
.benefits li .inner a.learnMore {font-size: 16px;}

.projectList {margin: -10px; padding-top: 10px;}
.projectList li {padding: 10px; width: 33.33%;}
.projectList li .inner {height: 100%; background: #E8F2EE; border: 1px solid #B3B3B3; border-radius: 16px; padding: 20px;}
.projectList li .inner .img img {width: 100%; border-radius: 16px;}
.projectList li .inner .det {padding: 20px 15px;}
.projectList li .inner .det span {display: block; font-size: 22px; text-transform: uppercase; font-weight: 700; padding-bottom: 10px;}
.projectList li .inner .det span a {color: #1E1E1E;}
.projectList li .inner .det span a:hover {color:#0071BD;}
.projectList li .inner .det p {font-size: 13px; line-height: 22px;}

.downloadApp {background-size: cover !important; background: url(../images/app-bg.jpg) no-repeat right top;}
.downloadBox .left {width: 55%; padding-right: 50px; font-size: 22px; line-height: 32px; color: #fff;}
.downloadBox .left span {display: block; font-size: 26px; line-height: normal; font-weight: 700; text-transform: uppercase; padding-bottom: 20px;}
.downloadBox .right {max-width: 45%; display: flex;}
.downloadBox .right a {margin-left: 20px;}

.footerInfo {width: 50%; padding: 50px 50px 50px 0;}
.socialLinks {padding: 60px 0 20px 0;}
.socialLinks li {margin-right: 10px;}
.languageBot {border: 1px solid #C9C9C9; border-radius: 8px; height: 32px; font-size: 13px; font-weight: 700; padding: 0 15px; display: inline-flex;} 
.languageBot img {margin-right: 10px;}
.footerMenu {width: 50%; padding: 50px 0;}
.footerMenu ul li {font-weight: 700; padding: 0 0 20px 0;}
.footerMenu ul li a {color: #1E1E1E;}
.footerMenu ul li a:hover {color: #0071BD;}
.footerBot {background: #000000; padding: 15px 0;}
.footerBot .copy {font-weight: 700; text-transform: uppercase; color: #fff;}
.updateSettings a {color: #C9C9C9; border: 1px solid #C9C9C9; font-size: 13px; font-weight: 700; border-radius: 8px; padding: 8px 15px; display: inline-flex;}
.updateSettings a:hover {background: #0071BD;}

.innerBanner {background-size: cover !important; background: url(../images/contact-banner.jpg) no-repeat center; color: #fff; font-size: 70px; font-weight: 700; position: relative;}
.innerBanner.price { background: url(../images/pricing-banner.jpg) no-repeat center;}
.innerBanner.about { background: url(../images/about-banner.jpg) no-repeat center;}
.innerBanner:before {content: ''; background: rgba(0,0,0,.4); width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.innerBanner .container {height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; padding: 15px;}

.contactTop {box-shadow: 0px 0px 14px 0px #00000026; border-radius: 20px; padding: 15px;}
.getInTouch {background: #1E1E1E; border-radius: 10px; padding: 40px; width: 500px;}
.getInInfo {padding-top: 10px;}
.getInInfo li {margin-top: 25px;}
.getInInfo li .icon {width: 56px; height: 56px; margin-top: 4px; border-radius: 8px; background: #F5F5F5; display: flex; align-items: center; justify-content: center; color: #0071BD;}
.getInInfo li .icon span {font-size: 32px;}
.getInInfo li .det {width: calc(100% - 56px); padding-left: 20px; font-size: 20px;}
.getInInfo li .det span {display: block; font-size: 15px; font-weight: 500; color: #fff; padding-top: 5px;}
.getInTouchForm {width: calc(100% - 500px); padding: 40px;}
.form {margin: -10px;}
.form li {padding: 10px; width: 100%;}
.form li.half {width: 50%;}
.formInput {width: 100%; border: 1px solid #CBCAD7; border-radius: 6px; padding: 0 20px; height: 56px; background: #fff;}
textarea.formInput {height: auto; padding: 15px 20px;}
.submitBtn {background: #0071BD; height: 48px; border-radius: 6px; font-weight: 700; font-size: 18px; color: #fff; padding: 0 25px; min-width: 180px;}
.submitBtn:hover {background: #1E1E1E;}

.aboutText {font-size: 17px; line-height: 26px;}
.aboutImg {float: left; margin: 5px 40px 20px 0; border-radius: 16px;}


.blackBg {background: #000000;}
.pinkBg {background: #F6F0E9;}
.blueBg {background: #03133B;}
.scanbg {background: url(../images/scan-qr.jpg) no-repeat center;}
.stayUpdatedBg {background: url(../images/stay-updated.jpg) no-repeat center;}
.buildBg {background: url(../images/Stay-anonmous.jpg) no-repeat center;}
.background1 {background: #E8F2EE; border-top: 1px solid #fff;}
.background2 {background: #F2ECE1; border-top: 1px solid #fff;}


.loginCon {padding: 0;}
.loginTop {min-height: calc(100vh - 65px); display: flex; align-items: center; justify-content: center; overflow: auto; padding: 15px;}
.loginBox {background: #D9D9D9; border-radius: 10px; width: 100%; max-width: 380px; margin: auto; padding: 25px;}
.loginForm {padding-top: 25px;}
.loginForm li {position: relative; margin-bottom: 15px;}
.loginInput {width: 100%; background: #fff; border: none; height: 70px; border-radius: 10px; padding: 0 20px; font-weight: 700; font-size: 15px;}
a.forgot {position: absolute; right: 20px; top: 50%; margin-top: -10px; color: #1E1E1E; font-weight: 700; font-size: 15px;}
a.forgot:hover {color: #0071BD; text-decoration: underline;}
.loginBtn {width: 100%; background: #1E1E1E; height: 50px; border-radius: 10px; border: none; color: #fff; font-size: 15px; font-weight: 700;}
.loginBtn:hover {background: #0071BD;}
a.createAc {color: #1E1E1E; font-size: 15px; font-weight: 700; margin-top: 10px; display: inline-flex;}
a.createAc:hover {color: #0071BD; text-decoration: underline;}
.loginCon .footerBot {height: 65px; background: #D9D9D9;}
.loginCon .footerBot .copy {color: #1E1E1E;}
.loginCon .updateSettings a {color: #1E1E1E; border: 1px solid #1E1E1E;}
.loginCon .updateSettings a:hover {background: #1E1E1E; color: #fff;}

.mainCon {position: relative;}
.regLeft {width: 300px; height: 100vh; box-shadow: 0 0 10px rgba(0,0,0,.2);}
.regLogo {display: flex; align-items: center; height: 100px; padding: 0 30px;}
.regFooter {display: flex; align-items: center; justify-content: center; height: 100px; color: #747474; font-size: 13px; font-weight: 700;}
.regmenu {height: calc(100vh - 200px); display: flex; align-items: center; padding: 20px 30px;}
.regmenu ul li {font-size: 14px; font-weight: 700; padding: 10px 0;}
.regmenu ul li a {color: #747474; display: flex; align-items: center;}
.regmenu ul li a .icon {background: #E3EEF1; filter: grayscale(1); width: 40px; height: 40px; border-radius: 10px; margin-right: 10px; display: flex; align-items: center; justify-content: center;}
.regmenu ul li:nth-child(3) a .icon, .regmenu ul li:nth-child(4) a .icon {background: #F2E4E4;}
.regmenu ul li a.active {color: #000;}
.regmenu ul li a.active .icon {filter: grayscale(0);}


.regRight {padding: 20px; width: calc(100% - 300px); height: 100vh; overflow: auto; display: flex; align-items: center; justify-content: center;}
.regInner {width: 100%; max-width: 600px; margin: auto;}
.regHd {color: #1E1E1E; font-size: 32px; font-weight: 700; padding-bottom: 25px;}
.regHd span {display: block; color: #747474; font-size: 18px; font-weight: 400; padding-top: 10px;}
.regForm {margin: -10px;}
.regForm li {width: 100%; padding: 10px;}
.regForm li.half {width: 50%;}
.regInputBox {border: 1px solid #747474; border-radius: 6px; padding: 10px 20px;}
.regInputBox .hd {color: #000; font-size: 14px; font-weight: 600; display: block; padding-bottom: 5px;}
.regInput {width: 100%; height: 32px; border: none; background: none; font-size: 15px; color: #000;}
.regInput::placeholder {color: #999; opacity: 1;}
.regInput::-ms-input-placeholder {color: #999;}

.regBtns {padding: 30px 0 0 0;}
.getStarted {background: #1E1E1E; font-size: 15px; font-weight: 700; color: #fff; border-radius: 10px; padding: 0 25px; height: 48px;}
.getStarted:hover {background: #0071BD;}
.regLanguage {margin-right: 30px; color: #1E1E1E; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center;}
.regLanguage span {font-size: 14px; margin-left: 10px;}
.regTab {position: relative; border: 1px solid #747474; color: #747474; height: 48px; font-weight: 600; border-radius: 10px; display: inline-flex; align-items: center; padding: 0 30px; margin-right: 5px;}
.regTab.active {background: #597BA5; color: #fff; }
.regTab .input {position: absolute; left: 0; top: 0; opacity: 0;}

a.backBtn {margin-right: 30px; color: #1E1E1E; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center;}
a.backBtn span {font-size: 14px; margin-right: 10px;}
.tcText {text-align: right; padding-top: 5px; font-size: 13px; color: #747474;}
.regSelect {width: 100%; height: 32px; border: none; background: none; font-size: 15px; font-weight: 600; color: #000; background: url(../images/arrow.png) no-repeat right center;}


.thanksBox .regHd {width: calc(100% - 100px); padding:0 50px 0 0; max-width: 400px;}
.thanksBox .icon {width: 100px;}


/* Custom error text color */
.text-danger {
    color: red !important;
}

.error {
    color: red;
    font-size: 0.9em;
}

label.error {
    color: red;
    font-size: 12px; 
    margin-top: 5px;  
}
.success-message-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.success-message {
    color: green;
    font-size: 16px;
    font-weight: bold;
}
.error-message.danger {
    color: #ff0000;  
    font-size: 14px;
    margin-top: 5px;
    font-weight: bold;
}
/* add vijay css */

.custom-container {
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
}
.custom-category-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}
.custom-category-btn {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background-color: #e9ecef;
    border: 1px solid transparent;
}
.custom-category-btn:hover {
    background-color: #007bff;
    color: white;
    transform: scale(1.05);
}
.custom-selected {
    background-color: #007bff !important;
    color: white;
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.5);
}
.custom-error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
    display: none;
    text-align: center;
}
.custom-btn-primary {
    width: 100%;
    margin-top: 20px;
}

/* Start 19Feb2025*/
.priceBox {margin: auto; justify-content: space-between; max-width: 800px;}
.pricing-table {padding: 25px; text-align: center; width: 48%; box-shadow: 0px 0px 18px #ccc; border-radius: 12px;}
.pricing-table .head h4 {font-size: 24px;}
.pricing-table .content .price {background:linear-gradient(to right, #8E2DE2 0%, #4A00E0 100%); width: 90px; height: 90px; line-height: 90px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0px 0px 10px #ccc; transition: all 0.5s ease; margin: 20px auto; font-size: 32px; color: #fff;}
.pricing-table .content ul {padding-bottom: 25px;}
.pricing-table .content ul li {padding: 10px 0;}
.pricing-table .content .sign-up a {display: block; background: #000; max-width: 160px; margin: auto; padding: 15px; border-radius: 30px; color: #fff;}
.regInput:-webkit-autofill,
.regInput:-webkit-autofill:hover,
.regInput:-webkit-autofill:focus,
.regInput:-webkit-autofill:active,
.regInput:-webkit-autofill:valid {-webkit-transition-delay: 99999s; -webkit-text-fill-color:#000;}
 .formInput.error {
    border: 1px solid #ff7f7f !important; 
}

.businessBox {width: 100%; max-width: 1060px; margin: auto;}
.businessBox .mainHd {text-transform: uppercase;}
.hdText {font-size: 22px; text-transform: uppercase; font-weight: 700; padding-bottom: 30px;}
.businessImg {padding-top: 30px; margin: -15px auto; max-width: 1100px;}
.businessImg li {width: 25%; padding: 15px;}
.businessImg li img {width: 100%; border-radius: 6px;}
.background3 {background: #F2F2F2; border-top: 1px solid #fff;}
.businessStep {margin: -10px;}
.businessStep li {width: 25%; padding: 10px;}
.businessStep li .inner {height: 100%; background: #E8F2EE; border-radius: 14px; overflow: hidden; position: relative;}
.businessStep li .inner .img img {width: 100%;}
.businessStep li .inner .det {padding: 25px 25px 70px 25px; }
.businessStep li .inner .det span {display: block; font-size: 22px; font-weight: 700; padding-bottom: 20px;}
.businessStep li .inner .det p {font-size: 14px; line-height: 24px;}
.businessStep li .inner .det a.learnMore {font-size: 14px; position: absolute; bottom: 25px; left: 25px;}
.businessStep li .inner .det a.learnMore .arrow {padding: 0; font-size: 20px; font-weight: 400;}
.connectWithBox {background: #E8F2EE; border-radius: 12px; padding: 40px;}
.connectWithBox .inner {max-width: 900px; margin: auto;}
.connectWithBox .inner p {font-size: 20px; line-height: 28px;}

.videoBox:before {content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.4);}

h3.agree {
    font-size: 24px;
    color: #000;
}

h3.privacy {
    font-size: 22px;
    color: rgb(0, 0, 0);
}


#cookie-banner {display: flex;}
#cookie-banner .left {width: calc(100% - 170px); margin: -10px; display: flex;}
#cookie-banner .left p {width: 33.33%; padding: 10px;}

#cookie-banner .right {width: 150px;}
#cookie-banner .right button {display: block; width: 100%; margin: 5px 0;}