@charset "utf-8";
/* CSS Document */
*{margin:0px; padding:0px;}




body{overflow-x: hidden; font-size: 15px; font-family: 'AR One Sans'; font-family: 'Montserrat';  background-color: #010109; color: #fff;}
a, a:active, a:focus, a:hover {outline: none; transition: all 0.5s ease; text-decoration: none;}
button, button:active, button:focus, button:hover {outline: none; transition: all 0.5s ease; text-decoration: none;}

.container{max-width: 1150px;}

.mt_5{margin-top: 5rem;}
.mb_5{margin-bottom: 5rem;}
.mt_30{padding-Top: 30px;}
.mt_100{margin-top: 100px;}
.pt_5{padding-Top: 2rem;}
.pb_5{padding-bottom: 2rem;}

.MarginTopFeatures{margin-top: -135px;}

.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000000;}
.overlay .overlayDoor:before, .overlay .overlayDoor:after {content: ""; position: absolute; width: 50%; height: 100%; background: #101010; transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1); transition-delay: 0.8s; }
.overlay .overlayDoor:before {left: 0; }
.overlay .overlayDoor:after {right: 0;}
.overlay.loaded .overlayDoor:before {left: -50%;}
.overlay.loaded .overlayDoor:after {right: -50%;}
.overlay.loaded .overlayContent {opacity: 0; margin-top: -15px;}
.overlay .overlayContent {position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;	transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);}
.overlayContent img{width:200px;}
.overlayContent p{color:#1F3543; text-align: center; font-size: 15px; margin-top: 20px;}
#return-to-top {position: fixed; bottom: 60px; right: 10px;color: #fff; transform: rotate(90deg); display: none; transition: all 0.3s ease;}
#return-to-top:hover { color: #1F3543;}

.scroll-down::before {position: absolute; content: ""; letter-spacing: 2px; height: 1px; width: 30px; background:  #1F3543; left: -45px; top: 49%; animation: upDown2 2s infinite;}
.scroll-down:hover{color: #1F3543; text-decoration: none;}
.scroll-down:hover::before{background:  #1F3543;}
@keyframes upDown2 { 0%, 20%, 50%, 80%, 

  100% { transform: translateX(0); }

  40% { transform: translateX(4px); }

  60% { transform: translateX(6px); } }

.Logo{width:170px;}
.middle_text {flex-direction: column; display: -webkit-flex; -webkit-box-pack: center; -webkit-justify-content: center;}
.Header_section img { width: 180px;}
.Header_section{padding:15px;}
header.menu_fixed {background: #1010109e; backdrop-filter: blur(10px);}
header {z-index: 111; width: 100%; position: fixed; left: 0; right: 0; top: 0;}
.navbar-brand {padding: 0px;}
header .navbar{padding: 20px 0px;}
.navbar-collapse {flex-grow: unset;}
.navbar-nav .nav-item {margin-left: 10px; font-weight: 500;}
.navbar-toggler-icon {filter: brightness(0) invert(1);}
.navbar-toggler{padding: 0px; border: none;}
.navbar-toggler:focus {box-shadow: none;}
.nav-link {color: #fff; font-size: 14px;}
header .nav-link.active{color: #fff !important;}
.nav-link:hover{color: #fff;}
.nav-link:focus{color: #fff;}
header .btn_style{width: 155px;}
.btn_style{color: #000; transition: all .3s; font-family: 'Montserrat'; background: #1F3543; border:none; font-weight: 500; display: inline-block; padding: 8px 10px; text-align: center; border-radius: 50px;}
.light_btn{font-family: 'Montserrat'; font-size: 14px; font-weight: 400; color: white; text-align: center; background: radial-gradient(circle, #010101, #1F3543); border: none; margin-left: 10px; border-radius: 8px; padding: 10px 30px; box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.1), 0 5px 20px rgba(0, 0, 0, 0.7); cursor: pointer; transition: transform 1s, box-shadow 1s;} 
.light_btn:hover{transform: scale(1.05); box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.2), 0 8px 25px rgba(0, 0, 0, 0.8); color: #fff;}

.big_btn{padding: 12px 40px; font-size: 20px;}
.border_btn{border: 2px solid #1F3543; font-size: 14px; margin-right: 15px; border-radius: 8px; font-family: 'Montserrat'; overflow: hidden; position: relative; background: transparent; color: #fff; font-weight: 200;}
/* .border_btn:hover::before {left: 120%; transition: all .55s cubic-bezier(.19,1,.22,1);} */
.border_btn:hover{background: #000; color: #fff; box-shadow: 0px 1px 13px -2px #1F3543;}
.border_btn::before {background: #fff; content: ""; height: 155px; left: -75px; opacity: .2; position: absolute; top: -50px; transform: rotate(35deg); transition: all .55s cubic-bezier(.19,1,.22,1); width: 50px;}
.dark_btn{background: #1F3543; color: #fff;}
.navbar-light .navbar-nav .nav-link {
  color: #fff; padding: 10px;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #EFA404;
}
.navbar-light .navbar-nav .nav-link:focus {
  color: #EFA404;
}
.HeaderPadding{padding-top: 50px;}

.HeaderBg{background: transparent;}

.BannerTextWidth{max-width: 650px; margin: auto;}
.BannerHeading h4{font-family: 'Montserrat'; margin-top: 70px; font-weight: 400; font-size: 38px; background: linear-gradient(90deg, #CFE4F1, #3a6179, #CFE4F1, #3a6179); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-animation 5s infinite;}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.BannerHeading h5{font-family: 'Montserrat'; font-weight: 400; font-size: 38px; color: #208FE5; margin: 0px;}
.BannerHeading p{font-family: 'AR One Sans'; color: rgba(255, 255, 255, 0.5); font-size: 15px; margin-top: 20px;}

.BannerButton{background: #fff; margin-top: 20px !important; padding: 10px 20px; color: #000; border-radius: 20px; font-family: 'Montserrat'; font-weight: 500; font-size: 14px; margin-bottom: 160px !important; display: block; width: 150px; margin: auto;}
.BannerButton:hover{background: #1F3543; color: #fff; }


.HeadingMiddle {text-align: center;}
.HeadingWidth {max-width: 600px; margin: auto;}
.HeadingText h4 {color: #fff;font-family: 'Montserrat'; font-weight: 600; font-size: 32px; margin: auto; padding-top: 15px;}
.HeadingText p {font-family: 'AR One Sans'; color: rgba(255, 255, 255, 0.5); font-size: 15px; margin-top: 20px;}


.HeadingTextTwo h4 {color: #fff;font-family: 'Montserrat'; font-weight: 600; font-size: 26px;}
.HeadingTextTwo p {font-family: 'AR One Sans'; color: rgba(255, 255, 255, 0.5); font-size: 15px; margin-top: 20px;}

.BenifitsPointHeading{font-family: 'AR One Sans'; font-size: 15px; font-weight: 500; margin-top: 15px; margin-bottom: 10px;}
.BenifitsPointara{font-family: 'AR One Sans'; color: rgba(255, 255, 255, 0.5); font-size: 15px; padding: 0px 0px 12px 0px;}
.BenifitsIcon{width: 20px; margin-right: 10px;}

.AllGridOne{background: url(../img/GridTwoBg.png) no-repeat; position: absolute;width: 700px; background-size: cover; height: 400px; right: -85px;;}
.BenifitsImage{width: 400px; margin-top: 25px;}
.BenifitsImageBg{background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); padding: 20px; border: 1px solid rgba(255, 255, 255, 0.35);  border-radius: 5px; width: 450px; height: 335px; margin-top: 50px; float: right;}

.AllGridTwo{background: url(../img/GridTwoBg.png) no-repeat; position: absolute;width: 700px; background-size: cover; height: 400px; left: -230px;}
.BenifitsImageTwo{width: 350px; margin: auto; display: block;}
.BenifitsImageBgTwo{background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); padding: 20px; border: 1px solid rgba(255, 255, 255, 0.35);  border-radius: 5px; width: 415px; height: 280px; margin-top: 50px;}


.WorkflowMoneyBg{background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 20px; border: 1px solid rgba(255, 255, 255, 0.35);  border-radius: 5px; width: 220px; height: 150px; position: absolute; left: 255px; bottom: 25px; animation: upDown 2s infinite ease-in-out;}
@keyframes upDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.WorkflowMoneyImage{width: 180px; margin: auto; display: block;}

.BannerBg{background: url(../img/HomeBanner.png) no-repeat; background-size: 100% 100%; min-height: 750px;}
.BannerShadowOne{height: 340px; position: absolute; left: 0px; top: 130px;}
.BannerShadowTwo{height: 340px; position: absolute; right: 0px; top: 130px; transform: rotate(180deg);}

.FeaturesBg{background: url(../img/StarBg.png) no-repeat; background-size: cover;}
.SquareBoxOne{height: 80px; width: 80px; background-image: linear-gradient(#050B1A, #0B1D2B); position: absolute; top: -50px; left: 0px;}
.SquareBoxTwo{height: 80px; width: 80px; background-image: linear-gradient(#050B1A, #0B1D2B); position: absolute; top: 30px;left: 80px;}
.SquareBoxThree{height: 80px; width: 80px; background-image: linear-gradient(#050B1A, #0B1D2B); position: absolute; top: -50px; right: 0px;}
.SquareBoxFour{height: 80px; width: 80px; background-image: linear-gradient(#050B1A, #0B1D2B); position: absolute; top: 30px;right: 80px;}

.FeaturesSmallHeading{font-family: 'Montserrat'; font-size: 14px; font-weight: 400; color: white; text-align: center; background: radial-gradient(circle, #000, #000, #1F3543); border: none; border-radius: 20px; padding: 10px; box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.1), 0 5px 20px rgba(0, 0, 0, 0.7); transition: transform 1s, box-shadow 1s; width: 150px; margin: auto;}
.FeaturesBox{background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); padding: 20px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 5px;}
.FeaturesBox:hover{box-shadow: 0px 0px 9px 0px #ffffff82;}

.FeaturesIcon{width: 250px; margin: auto; display: block;}
.FeaturesIconHeading{color: #fff; font-family: 'Montserrat'; font-weight: 600; font-size: 22px; padding-top: 20px;}
.FeaturesIconPara{font-family: 'AR One Sans'; color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-top: 10px !important; max-width: 420px; margin: auto;}

.DashboardBg{background: url(../img/DashboardBg.png) no-repeat; background-size: 100% 90%; }
.DashboardImage{width: 100%; margin-top: 100px; border-radius: 10px; box-shadow: -4px -3px 27px 0px #15192D; animation: boxShadowBlink 3s infinite;}
@keyframes boxShadowBlink {
  0%, 100% {
    box-shadow: 0 0 5px #15192D, 0 0 10px #15192D;
  }
  50% {
    box-shadow: 0 0 15px #15192D, 0 0 20px #4a568f;
  }
}
.DashboardImageMobile{width: 100%; margin-top: 100px; border-radius: 10px; box-shadow: -4px -3px 27px 0px #15192D; display: none;}

.DashboardShadowOne{height: 340px; position: absolute; left: -30px; top: -155px; z-index: -1;}
.DashboardShadowTwo{height: 340px; position: absolute; right: -30px; top: -155px; z-index: -1;}

.UsersBg{background: rgba(255, 255, 255, 0.1);; margin-bottom: 10px; height: 250px; backdrop-filter: blur(20px); padding: 20px; border-radius: 10px; z-index: 1;}
.UsersBg:hover{box-shadow: 0px 0px 9px 0px #ffffff82;}
.UsersHeading{font-family: 'Montserrat'; color: #fff; line-height: 30px; font-weight: 400; font-size: 20px; text-align: center; margin-top: 18px;}
.UsersPara{font-family: 'Montserrat'; font-weight: 400; font-size: 14px; text-align: center; color: rgba(255, 255, 255, 0.5); line-height: 30px; margin-top: 20px;}
.UserIcon{width: 55px; margin: auto; display: block;}

.UsersBg:hover .UserIcon{ opacity:unset;}
.UsersBg:hover .UsersHeading{ color: #fff;}
.UsersBg:hover .UsersPara{ color: #fff;}

.relative{position: relative;}

.FaqGrid{width: 550px; position: absolute; left: -145px; top: 58px; height: 350px;}

.accordion_border_main{max-width: 1000px; margin: auto;}
.plusminus{position: absolute; z-index: 1; right: 20px; font-size: 18px; top: 19px;  height: 28px;  text-align: center;}
.accordion_head {cursor: pointer; font-size: 16px; color: #fff; font-family: 'Montserrat'; background-color: transparent; backdrop-filter: blur(10px); position: relative; padding-right: 34px !important; font-weight: 400; padding: 20px 18px;}
.faq_point{position: absolute; left: 0; top:0}
.accordion_border{position: relative; overflow: hidden; border-radius: 5px; margin-bottom: 15px;}
.accordion_body{display:none; padding: 0px 20px 10px 20px; background-color: transparent; backdrop-filter: blur(10px);}
.accordion_body p{margin-bottom: 0px; margin-top: 5px; color: rgba(255, 255, 255, 0.5); font-size: 15px; font-family: 'Montserrat'; font-weight: 400; width: 100%;}
.faq_open{display: block;}
.faq_box{max-width: 100%; margin: auto;}
.shadow_lien {height: 1px; background: radial-gradient(circle, #424242 0, transparent 100%); margin-bottom: 10px}
.fa{color: #208FE5;}






.BorderShadow{width: 900px; margin: auto; display: block;}
.BorderShadowFaq{width: 100%; margin: auto; display: block;}
footer {background: url(../img/StarBg.png) no-repeat; background-size: cover;}
.FooterCopyRight { font-family: 'Montserrat'; margin-top: 25px; text-align: center; color: #fff; font-size: 13px; font-weight: 500;}