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


:root {
  --black:#000000;
  --red:#CF2C55;
}

/*
font-family: 'Public Sans', sans-serif;
*/

button:focus, input:focus {outline: none;}
body {font-size:16px;font-family: 'Public Sans', sans-serif; color: var(--black);}
h1,h2,h3,h4 {font-family: 'Public Sans', sans-serif; font-weight: 600; }
img {max-width: 100%;}
a {text-decoration: none;}
.wrapper {position: relative; max-width:1920px; margin: 0px auto; overflow: hidden;}
.container {max-width:1440px; }
.logo a {display: inline-block;max-width: 100%;}

.home {background: #101010;color: #ffffff;}
.header {transition: all 0.2s linear; position: relative;z-index: 1; padding: 20px 0px;}
.header.fix {z-index: 11; position: fixed; left: 0px; top: 0px; width: 100%;}
/*.header.fix .logo {max-width:120px;}*/

.redBtn {background:var(--red); color:#ffffff; padding:14px 40px; border-radius:8px; font-size: 18px; font-weight: 700; border:none; display: inline-block; }
.redBtn:hover {background:#7d152f;color: #ffffff; text-decoration: none;}



.mainNav {position: relative; }
.mobileNavBtn:focus {outline: none;box-shadow: none;}
.mobileNavBtn {display: none; border: none; cursor: pointer; float:right; width: 32px; height: 32px;background: transparent; position: relative; z-index: 101;transition: right 0.2s linear; padding: 0px; margin:-1px 0px 0px 0px;}
.mobileNavBtn span { width:28px; left: 2px; top: 4px; height: 2px; background:#ffffff; position: absolute; transition: all 0.3s linear;border-radius: 2px;}
.mobileNavBtn span:nth-child(2) {top: 12px;}
.mobileNavBtn span:nth-child(3) {top: 20px;}
.openNav {overflow: hidden;}
.openNav .mobileNavBtn {top: 20px; left: 236px; position: fixed;}
.openNav .mobileNavBtn span { top: 12px;background: var(--red);}
.openNav .mobileNavBtn span:nth-child(2){display: none;}
.openNav .mobileNavBtn span:nth-child(1){transform:rotate(45deg)}
.openNav .mobileNavBtn span:nth-child(3){transform:rotate(-45deg);}


@media (min-width: 1026px) {
  .navigation>ul {padding: 0px; margin:0px 0px 0px 20px; list-style: none; display: flex; flex-wrap: wrap; align-items: center;}
  .navigation>ul>li { padding:0px; flex:0 0 auto;}
  .navigation>ul>li>a {color:#ffffff; font-size: 16px; font-weight: 600; display: inline-block; font-family: 'Public Sans', sans-serif;letter-spacing: -0.32px; padding:4px 25px 4px 25px;}
  .navigation>ul>li:hover>a {color:var(--red); text-decoration: none; }

  .navigation .get-started {line-height: 1.2; margin-left: auto;}
  .navigation .get-started a {padding: 14px 24px;border-radius: 8px; background: #FFF;font-size: 18px;color: #000;font-weight: 700;  line-height: 1;display: inline-block;}
  .navigation .login { margin:0px 0px 0px 30px;}
  .navigation .login a {padding: 0px 0px 0px 25px;background: url(../images/lock-icon.svg) no-repeat 0px 2px; }
  .navigation .login a:hover {color: #ffffff;}

  .has-menu {position: relative;}
  .has-menu>a {position: relative;padding-right: 20px !important;}
  .has-menu>a:before {content: ""; width: 6px; height: 6px; border:solid 1px transparent; border-top-color: #000; border-right-color: #000; position: absolute; right: 7px; top:calc(50% - 2px); transform: rotate(135deg);}
  .sub-menu {top: calc(100% - 1px); left: 0; width: 200px; position: absolute; transition: 0.4s; background-color: #fff;  opacity: 0; visibility: hidden;transform: translateY(-20px); padding: 5px 0px; list-style: none; box-shadow: 0px 5px 5px rgb(204 204 204 / 50%)}
  .has-menu:hover .sub-menu {opacity: 1; visibility: visible;transform: translate(0);}
  .sub-menu li a {color: #333; text-decoration: none; padding: 5px 16px; font-size: 16px; display: block;}
  .sub-menu li a:hover {color: var(--red);}

}

.overLay {transition: all 0.3s linear;position: fixed; top: 0px; left: 0px;width: 100%;height: 100%; background:rgba(0,0,0,0.5);z-index: 11; display: none;}
@media (max-width: 1025px) {
  .header {padding:28px 0px;}
  .header .col-b {flex:1 1 0; order: 1; width: auto; min-width: 60px;}
  .logo {max-width: 140px;}
  .mobileNavBtn {display: inline-block; }
  .navMain {text-align: right; position: relative;margin: 7px 15px 3px 0px;display: inline-block;width: 100%;}
  .navigation {position: fixed;top: 0px;width:290px;bottom: 0px;  z-index: 100; left:-291px; transition: all .2s linear; height: 100%; padding:52px 15px 10px 15px;background:#ffffff;}
  .openNav .navigation {left: 0px;} 
  .openNav .overLay  {display: block;} 
  .navigation>ul {margin:0px;padding:0px 0px 10px 0px; list-style: none;min-height: calc(100vh - 60px); text-align: left; width: 100%;}
  .navigation>ul>li {padding:8px 10px;    border-bottom: solid 1px #ccc;}
  .navigation>ul>li>a {color:var(--black); font-weight: 500; display:block;}
  

  .navigation .login a, .navigation .get-started a {color: var(--red);}

  .has-menu {position: relative;}
  .has-menu>a {position: relative;padding-right: 20px !important;}
  .has-menu>a:before {content: ""; width: 6px; height: 6px; border:solid 1px transparent; border-top-color: #000; border-right-color: #000; position: absolute; right: 7px; top:calc(50% - 2px); transform: rotate(135deg);}
  .sub-menu { background-color: #fff;  display: none; padding: 5px 0px 0px 0px; list-style: none;}
  .has-menu:hover .sub-menu {display: block;}
  .sub-menu li a {color: #333; text-decoration: none; padding: 5px 16px; font-size: 16px; display: block;}
  .sub-menu li a:hover {color: var(--red);}
  
}

.homeHeading {position: relative;}
.homeHeading h2 {margin: 0px 0px 16px 0px;font-size: 40px; font-weight: 800;}
.homeHeading .desc {letter-spacing: 0.18px;font-size: 18px;color:rgb(255 255 255 / 60%);}

.homeSecA {position: relative; padding:30px 0px 100px 0px;}
.homeSecA .star {position: absolute; left: 0px; top: 0px; width: 44px; height: 44px; background: url(../images/star-icon.svg) no-repeat 0px 0px;}
.homeSecA .starA { left: calc(50% - 50px); top: 10%;}
.homeSecA .starB { left:calc(50% - 900px); top: 38%; background-image:url(../images/star-icon-a.svg);}
.homeSecA .starC { left: 38%; top: 81%; background-image:url(../images/star-icon-a.svg);}
.homeSecA .pattern:before, .homeSecA .pattern:after {max-height: 1300px; max-width: 1300px; height: 70vw; width: 70vw; border-radius: 50%; content: ""; position: absolute; right: -37%; top: -90%; background:var(--red);}
.homeSecA .pattern:before {background: #041DFF; top: inherit;  bottom: -90%;right: -30%;}
.homeSecA .tag {border-radius:25px; padding:9px 20px; background: #252122; letter-spacing: 1.12px;font-weight: 800; font-size: 14px;text-transform: uppercase; margin: 0px 0px 6px 0px; display: inline-block; color:var(--red);}
.homeSecA .textA {letter-spacing: -1.44px;font-weight: 800;font-size: 72px; margin: 0px 0px 16px 0px;}
.homeSecA .textB {letter-spacing: -0.36px;font-weight: 500; font-size: 18px; margin: 0px 0px 40px 0px;}
.homeSecA .arrowImg {margin:-30px 0px 0px 30px; display: inline-block; vertical-align: top;}
.bannerImg {position: relative; width: 50vw; max-width: 960px; text-align: right;}
.bannerImg .img {border-radius: 16px 0px 0px 16px; background:rgb(255 255 255 / 50%); padding: 25px 0px 25px 25px; display: inline-block;}

.homeSecB {position: relative; padding: 100px 0px;background: #181818;}
.homeSecB .container {max-width: 1170px;}
.homeSecB .imgFrame {position: relative;margin-right: 20px;}
.homeSecB .imgFrame:before {content: ""; position: absolute; bottom: -30px; left: -30px; width: 446px; height: 288px; background: url(../images/pattern-a.png) no-repeat 0px 0px;border-radius: 16px;}
.homeSecB .imgFrame img {background: #555; box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.06); border-radius: 24px; position: relative;}
.futureImg {margin: 130px 0px 0px 0px;}
.futureImg img {border-radius: 16px;}

.homeSecC {position: relative; padding: 100px 0px;background: #181818;}
.homeSecC .homeHeading {text-align: center;max-width: 760px; margin: 0px auto;}
.draftsSec {margin: 40px 0px 100px 0px;}
.draftItem {position: relative; text-align: center;}
.draftItem .frame {height: 180px;background: #202020 url(../images/line-pattern.png) 0px 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 22px; position: relative; overflow: hidden;}
.draftItem .frame:before {content: ""; position: absolute; right: 0px; top: 0px; width: 29px; height: 29px; background:#181818 url(../images/corner.png) no-repeat -1px -1px; transition: all 0.2s linear;}
.draftItem .frame .circle {background: #181818; border-radius: 50%; padding: 18px;}
.draftItem h3 {font-weight: 700;font-size: 22px; margin: 0px 0px 5px 0px;}
.draftItem .txt {font-size: 16px; color:rgb(255 255 255 / 60%);}
.draftItem:hover .frame:before {right: -30px; top: -30px;}
/*.draftsSec .slider {display: flex; flex-wrap: wrap;}*/


.worksSec {position: relative;}
.worksSec .tag {font-weight: 800; font-size: 16px;text-transform: uppercase; margin: 0px 0px 10px 0px; display: inline-block; color:var(--red);letter-spacing: 1.28px;}
.worksSec .homeHeading {text-align: center; max-width: 820px; margin: 0px auto 40px auto;}
.worksSec:before,.worksSec:after {content: ""; position: absolute; left: 0px; top: 40px; width: 150px; height: 150px; background: url(../images/pattern-b.png) no-repeat;}
.worksSec:after {left: inherit; right: 0px;transform: rotate(90deg);}

.stepsRow {display: flex; flex-wrap: wrap; justify-content:space-between; max-width: 1140px; margin: 0px auto; position: relative;}
.stepsRow .arrow {width:100px; height: 0px;border-top:dashed 1px #2E2E2E; position:absolute; left: calc(50% - 50px); top: 50%; }
.stepsRow .arrow:before {content: "";height: 40px; width: 40px; border-radius: 50%; border:dashed 1px #2E2E2E; background: #181818 url(../images/arrow.svg) no-repeat 12px 13px; position: absolute; left: 30px; top: -20px;}
.stepsRow .setpCol {flex:0 0 calc(50% - 50px); max-width: 540px;}
.stepsRow .stepBox {border-radius: 16px; border: 1px solid #2E2E2E; background: #1C1C1C; padding: 36px; position:relative;}
.stepsRow .stepBox h3 {font-weight: 700;font-size: 22px; margin: 0px 0px 12px 0px;}
.stepsRow .stepBox .desc {font-size: 16px; color:rgb(255 255 255 / 60%);}
.stepsRow .stepBox .tag {font-weight: 700;margin: 0px 0px 4px 0px; font-size: 12px;}
.stepsRow .stepBox .img {text-align: right;margin: 50px -36px -36px 0px;}
.stepsRow .stepBox .img img {border-radius: 16px 0px;}
.stepsRow .stepBox .arroLink {position: absolute; left: 36px; bottom: 40px;}
.stepsRow .stepBox:hover {border-color:#000;}

.homeSecD {position: relative; padding: 100px 0px;background:#0A0A0A;}
.homeSecD .homeHeading {text-align: center;max-width: 760px; margin: 0px auto 40px auto;}
.homeSecD .container {max-width: 1170px;}
.useCaseBox {border-radius: 16px; background: #181818; display:flex; flex-wrap: wrap; align-items: center;overflow: hidden;}
.useCaseBox .img { flex:0 0 224px;height: 180px;}
.useCaseBox .img img {height: 100%; object-fit: cover;}
.useCaseBox .txt {padding: 30px; flex:1 1 0;}
.useCaseBox h3 {font-weight: 700;font-size: 22px; margin: 0px 0px 10px 0px;}
.useCaseBox .desc {font-size: 18px; color:rgb(255 255 255 / 60%);}

.homeSecE {background: #0A0A0A url(../images/bg-pattern.png) no-repeat bottom center; padding: 100px 0px 0px 0px; text-align: center;}
.homeSecE .homeHeading {max-width: 820px; margin: 0px auto 40px auto;}
.homeSecE .img {border-radius: 32px 32px 0px 0px; padding: 16px 16px 0px 16px; background:url(../images/border-bg.png) no-repeat center / 120% auto; display: inline-block;}
.homeSecE .img img {border-radius: 32px 32px 0px 0px;}

.footer {background: #181818; padding: 100px 0px 0px 0px;}
.actSec {border-radius: 32px; background: linear-gradient(90deg, #A0139B 0%, #B2143C 94.05%); padding: 80px;text-align: center;}
.actSec .homeHeading {max-width: 930px; margin: 0px auto;}
.actSec .redBtn {margin: 28px 0px 0px 0px; background: #ffffff;color: #363636;}
.actSec .redBtn:hover {background:#c6c6c6;}
.actSec .arrowImg {margin:17px 0px 0px 20px; display: inline-block; vertical-align: top; transform: rotate(16deg);}
.footArea {padding: 24px 0px;}
.foot-logo a {display: inline-block; max-width: 100%;}
.copyright {padding: 5px 0px 0px 30px;}
.socilIcons {padding: 0px; margin: 0px; list-style: none;}
.socilIcons li {display: inline-block; vertical-align: top; margin-left: 24px;}
.socilIcons li a {display:block; width: 24px; height: 24px; background: url(../images/social-icons.svg) no-repeat 2px 2px; font-size: 0px;transition: transform 0.2s linear;}
.socilIcons li .in {background-position: -42px 2px;}
.socilIcons li .tw {background-position: -86px 2px;}
.socilIcons li .rss {background-position: -130px 2px;}
.socilIcons li a:hover {transform: scale(1.2);}





/*.owlnav.owl-carousel .owl-nav {position: absolute; left: 0px; bottom: -40px; width: 100%; text-align: center;}
.owlnav.owl-carousel .owl-nav button {width: 56px; height: 56px; background:#36432b url(../images/slider-arrow-c.svg) no-repeat center / 56px auto; margin:8px; border-radius: 50%;}
.owlnav.owl-carousel .owl-nav button.owl-next {transform: rotate(180deg);}
.owlnav.owl-carousel .owl-nav button span {display:none;}
.owlnav.owl-carousel .owl-nav button:hover {background-color:#ffffff; background-image: url(../images/slider-arrow-b.svg);}
*/
.owlnav.owl-carousel .owl-dots {display: block;text-align: center; position: absolute; left: 0px; bottom: -60px; left: 0px; width: 100%; }
.owlnav.owl-carousel .owl-dot {width: 10px; height: 10px; background:rgba(255, 255, 255, 0.25); border-radius: 50%; margin: 5px 7px;}
.owlnav.owl-carousel .owl-dot.active {background:var(--red);}
.owlnav.owl-carousel .owl-dot:focus {outline: none;}


.vis-m {display: none;}
@media (max-width: 767px) {
  .vis-m {display: block;}
  .vis-d {display: none;}
  body {font-size: 14px;}

  .homeSecA { padding:30px 0px 50px 0px;text-align: center;}
  .homeSecA .star {display: none;}
  .homeSecA .textA {font-size: 44px;}
  .homeSecA .textC {display: none;}

  .bannerImg {width: auto;}
  .bannerImg .img {border-radius: 16px; padding: 16px;}
  .bannerImg .img img {border-radius: 12px;}
  .homeSecA .pattern:before, .homeSecA .pattern:after {width:160vw; height:80vw; bottom:-40vw; right: -90vw; top: inherit; }
  .homeSecA .pattern:before {right: inherit; left: -90vw;}

  .homeHeading h2 {font-size: 30px; line-height: 1.4;}

  .homeSecB {padding: 40px 0px 70px 0px;}
  .homeSecB .imgFrame:before {display: none;}
  .homeSecB .imgFrame {margin: 30px 0px 0px 0px;}
  .homeSecB .redBtn.vis-m {width: 100%; margin-bottom: 70px;}
  .futureImg {margin: 70px 0px 0px 0px;text-align: center;}
  .futureImg img {margin: 0px auto;}

  .homeSecE {padding: 70px 0px 0px 0px;}
  .homeSecE .homeHeading {margin-bottom: 60px;}
  .homeSecE .img {border-radius: 24px 24px 0px 0px; padding:6px 6px 0px 6px;}
  .homeSecE .img img {border-radius: 24px 24px 0px 0px;}

  .homeSecC {padding: 70px 0px 50px 0px;}

  .worksSec .tag {max-width: 340px; margin: 0px auto 10px auto;}
  .worksSec:before, .worksSec:after {display: none;}
  .stepsRow .setpCol {flex:0 0 100%;}
  .stepsRow .stepBox {padding: 30px;}
  .stepsRow .stepBox .arroLink {display: none;}
  .stepsRow .stepBox .img {text-align: left;margin:30px 0px 0px 0px;}
  .stepsRow .stepBox .img img {border-radius: 16px;}
  .stepsRow .setpCol:nth-child(2) {margin-bottom: 90px;}
  .stepsRow .arrow { top: calc(50% + 10px);  transform: rotate(90deg);}

  .homeSecD {padding: 50px 0px 20px 0px;}
  .useCaseBox {margin-bottom: 30px;}
  .useCaseBox .img {flex:0 0 100%; height: auto;}
  .useCaseBox .img img {height: auto; width: 100%;}
  .useCaseBox .txt {flex:0 0 100%;  padding:24px 30px;}
  .useCaseBox h3 {font-size: 20px;}
  .useCaseBox .desc {font-size: 16px;}

  .footer {padding: 40px 0px 0px 0px;}
  .actSec {padding: 50px 25px;}
  .actSec .arrowImg {display: none;}
  .actSec .redBtn {width: 100%;}
  .footArea {text-align: center; padding:50px 0px 24px 0px;}
  .footArea .row {justify-content: center;}
  .footArea .col {flex:0 0 100%; margin: 25px 0px;}

}

















/*https://xd.adobe.com/view/8a59cfa0-fc7f-406b-9206-5f0e4b5f926a-df0a/*/

.scroll-ele::-webkit-scrollbar {height: 4px; width: 4px; }
.scroll-ele::-webkit-scrollbar-track {background: #ffffff; }
.scroll-ele::-webkit-scrollbar-thumb {background: #d9d9d9; width: 4px; border-radius: 2px;}

.modal-dialog {min-height: calc(100vh - 60px); display: flex; flex-direction: column; justify-content: center; overflow: auto; }
@media(max-width: 768px) {
  .modal-dialog {min-height: calc(100vh - 20px); }
}