/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding:0px;

  margin:0px;

  color: #5a5a5a;

   font-family: "Roboto", sans-serif;

}

.dropdown-menu > li.kopie > a {

    padding-left:5px;

}

 

.dropdown-submenu {

    position:relative;

}

.dropdown-submenu>.dropdown-menu {

   top:0;left:100%;

   margin-top:-6px;margin-left:-1px;

   -webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;

 }

  

.dropdown-submenu > a:after {

  border-color: transparent transparent transparent #333;

  border-style: solid;

  border-width: 5px 0 5px 5px;

  content: " ";

  display: block;

  float: right;  

  height: 0;     

  margin-right: -10px;

  margin-top: 5px;

  width: 0;

}

 

.dropdown-submenu:hover>a:after {

    border-left-color:#555;

 }



.dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {

  text-decoration: none;

}

a{color: #3344dc;}

.navbar-nav{ float:right;} 

.navbar{padding:5px 0px;} 

.navbar-default .navbar-nav>li>a{color:#000;    font-family: "Roboto", sans-serif;}

.nav>li>a{ font-size:18px; }

.launchapp{background: #3344dc;  padding: 14px 30px !important;  color: #fff !important;  border-radius:8px;}

.launchapp:hover{background: #000 !important;}

.navbar{min-height:78px;}

.navbar-nav{ margin-top:7px;}

.navbar{ margin-bottom:0px;}



header .dropdown-menu>li>a{padding:10px 12px;font-size: 16px;}

header .dropdown-menu li a{ border-bottom:1px solid #e7e7e7;}

header .dropdown-menu{ padding:0px 0px;width: 210px; border:none;}





.launchbtn{ margin-left:40px;}

.quicklink p{ text-align:left; line-height:26px; padding-right:20px;color: #242424; font-size:15px;}

.quicklink{text-align:left;}

.quicklink img{margin-bottom:15px; margin-top:10px; }

.navbar-default .navbar-nav>li>a:hover{ background:#3344dc; color:#fff;border-radius: 8px;}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{background-color:#f4f3f0;color: #000;}

.slider{ background:url(../image/sliderbg.png) no-repeat; background-size:cover; padding:50px 0px 60px;}

.slider h1{ margin-bottom:-15px; color:#000;    font-size:60px;font-weight:800; line-height:52px; margin-top:65px;}

.slider h1 span{ font-size:38px;}

.slider h3{ font-size:38px; color:#000; font-weight:400; margin-bottom:20px;}

.slider p{    font-size: 19px; line-height: 30px; color: #242424; font-weight: 400;}

.navbar-default{ border:none !important;}

.getstarted{background:#3344dc; padding:12px 20px; border:none; margin-top:20px; border-radius:0px;font-weight: 500;box-shadow: 1px 6px 4px rgb(0 0 0 / 10%); margin-right:15px;    border-radius: 8px; }

.getstarted:hover{ background:#000;}

.getstarted a{color:#fff; font-size:18px; text-decoration:none;}

.howbtn{ background:#000}



.sliderimages img{ float:right;}

.arrow{ width:auto !important;}

.navbar-brand{    padding:7px 0px !important;}

.fa-telegram{ font-size:21px !important;}

.supportchain{ padding:30px 0px;    text-align: center;}

.supportchain h2{ text-align:center; font-size:35px; font-weight:600; color:#000; margin-bottom:25px;}

.supportchain ul li {width: 10%; display: inline-block;  border:1px solid #d9e1ed;  padding:18px 10px; text-align: center; list-style:none; border-radius: 10px;    margin-right: 10px; margin-bottom:15px; box-shadow: 1px 3px 15px #e1e1e1;}

.supportchain ul li img {width:50%;  border-radius: 50%; margin-bottom: 5px;}

.supportchain ul li p{font-size: 16px; font-weight: 600; color:#000; margin-bottom: 0px;}

.supportchain ul{ margin-left:0px; padding-left:0px;}



.scroller { 

    max-width:1100px;

	margin:0 auto;

}



.scroller__inner {

    display: flex;

    padding-block: 1rem;

    flex-wrap: wrap;

    gap: 1.5rem;

}



.scroller[data-animated="true"] {

    overflow: hidden;

    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);

    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);

}



.scroller[data-animated="true"] .scroller__inner {

    width: max-content;

    flex-wrap: nowrap;

    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;

    animation-delay: 1s;

}



.scroller[data-direction='left'] {

    --_animation-direction: forwards;

}

.scroller[data-direction='right'] {

    --_animation-direction: reverse;

}



.scroller[data-direction='slow'] {

    --_animation-duration: 20s;

}

.scroller[data-speed='fast'] {

    --_animation-duration: 10s;

}

.howwork h2{ text-align:center; font-size:50px; color:#000; font-weight:800; margin-bottom:2px;}

.howwork h3{ text-align:center; font-size:35px; color:#000; margin-top:0px; margin-bottom:10px !important;}

.howwork p{ text-align:center; font-size:18px;color:#000;}

.yambit ul li{ list-style:none;}

.yambit ul{ margin-top:60px; margin-bottom:20px;}





@keyframes scroll {

    to {

        transform: translate(calc(-50% - 0.5rem));

    }

}





.scroller[data-animated="true"] .scroller__inner:has(img:hover, img:active, img:focus) {

    -webkit-animation-play-state: paused;

    animation-play-state: paused;

}







.scroller[data-animated="true"] .scroller__inner:has(li:hover, li:active, li:focus) {

    -webkit-animation-play-state: paused;

    animation-play-state: paused;

}





.scroller__inner {margin-top: -33px;}

.marquee-row{ text-align:center; padding:50px 0px;}

.tag-list li{ list-style:none; padding:10px 0px;}

.tag-list li img {width:60px;padding-top: 4px;}



.section3{ background:url(../image/section3bg.png) no-repeat; background-size:cover; padding:50px 0px 80px;}

.section3 h2{ text-align:center; font-size:45px; color:#000; font-weight:800; margin-bottom:50px;}

.tbox{ background:#fff; padding:40px 14px; margin-top:40px; text-align:center; border-radius:15px; box-shadow: 1px 1px 12px #cec9e5;}

.tbox hr {margin-top: 13px; margin-bottom: 15px; border: 0;  border-top: 5px solid #27293a;  width:50px;

    border-radius: 50px;}

.tbox h3{ color:#000; font-weight:600;}

.tbox p{line-height: 23px; font-size: 16px;  color: #333;}

.arrowright{ margin-top:15px;}

.tbox img{ margin-top:-100px; border: 5px solid #ffffff;    border-radius: 100px;}

.section4{ padding:50px 0px 80px;}

.section4 h3{ font-size:30px; font-weight:600; color:#000; margin-bottom:20px;}

.section4 ul{margin-left: -40px;}

.section4 ul li {line-height: 45px; font-size: 18px; color: #000;}

.yambit{ margin-top:20px;}

.yambits{margin-top:30px;float:right;}



.section5{ background:url(../image/section5bg.png) no-repeat; background-size:cover; padding:40px 0px 70px;}

.s5box{background: #fff; padding: 10px 15px; border-radius: 15px; box-shadow: 1px 1px 8px rgb(132 106 165 / 30%);

    height: 120px;}

.s5box img{ float:left; margin-right:10px; margin-top:5px; border-radius: 50px;}

.s5box h4{color: #000; font-weight: 500; font-size:24px; margin-top:25px;}



.section6{ padding:80px 0px;}

.section6bg {background: url(../image/section6bg.png) no-repeat;  padding: 40px 30px; height: 180px;   border-radius: 20px;    margin: 0px 15px;}

.section6bg h3{ margin-top:0px; color:#fff; font-weight:600; font-size:30px;text-shadow: 4px 8px 1px #512ab1; margin-bottom:15px;}

.section6bg p{font-size: 18px; color: #fff; text-shadow: 3px 4px 1px #6747b5;}

.getstartedbox button{float: right; margin-top: 24px;}

.Whofor img{ width:100%;}

.Whofor h2{text-align:center; font-size:45px; color:#000; font-weight:800; margin-bottom:30px;}

.Whofor h4{color: #000000;  font-size:27px;  font-weight: 600;
    letter-spacing: 0.2px;}
.Whofor .col-md-4 p{font-size:17px;color: #000;}
.boxe{ text-align: center;
    background:#f0f0ff;
    height: 300px;
    border-radius: 20px;
    padding: 20px;}	

.section5 h3{text-align: center;

    font-size: 45px;

    color: #000;

    font-weight: 800;

    margin-bottom: 30px;}





#footer {

    background:#fff !important;

	padding:40px 0px;

	border-top: 1px solid #e1e1e1;

}

#footer h5{

    padding-bottom: 6px;

    margin-bottom:8px;

    color:#000;

	text-align:left;

	font-size:22px;

}

#footer a {

    color: #ffffff;

    text-decoration: none !important;



}

#footer ul.social li{

	padding: 3px 0;

}

#footer ul.social li a i {

    margin-right: 5px;

    font-size: 20px;

    background: #000;

    color: #fff;

    border-radius: 5px;

    width: 33px;

    height: 33px;

    text-align: center;

    line-height: 33px;

}

#footer ul.social li:hover a i {

	margin-top:-10px;

}

#footer ul.social li a,

#footer ul.quick-links li a{

	color:#242424;

	font-weight: 400;

}

#footer ul.social li a:hover{

	color:#eeeeee;

}

#footer ul.quick-links li{

	padding: 3px 0;

	text-align:left;

	line-height:28px;

	font-size:15px;

}

#footer ul.quick-links li:hover{

	padding: 3px 0;

	font-weight:700;

}

#footer ul.quick-links li a i{

	margin-right: 5px;

}

#footer ul.quick-links li:hover a i {

    font-weight: 700;

}

.copyright{text-align: center; background: #fff !important; border-top:1px solid #d2d3e7;  padding-top: 18px;

    padding-bottom: 8px;}

#footer ul.quick-links li a:hover{color:#3344dc;}

.copyright p{ font-size:15px;}	





  

@media (max-width: 767px) {



  .navbar-nav  {

     display: inline;

  }

  .navbar-default .navbar-brand {

    display: inline;

  }

  .navbar-default .navbar-toggle .icon-bar {

    background-color: #fff;

  }

  .navbar-default .navbar-nav .dropdown-menu > li > a {

    color: red;

    background-color: #ccc;

    border-radius: 4px;

    margin-top: 2px;   

  }

   .navbar-default .navbar-nav .open .dropdown-menu > li > a {

     color: #333;

   }

   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,

   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {

     background-color: #ccc;

   }



   .navbar-nav .open .dropdown-menu {

     border-bottom: 1px solid white; 

     border-radius: 0;

   }

  .dropdown-menu {

      padding-left: 10px;

  }

  .dropdown-menu .dropdown-menu {

      padding-left: 20px;

   }

   .dropdown-menu .dropdown-menu .dropdown-menu {

      padding-left: 30px;

   }

   li.dropdown.open {

    border: 0px solid red;

   }



}

 

@media (min-width: 768px) {

  ul.nav li:hover > ul.dropdown-menu {

    display: block;

  }

  #navbar {

    text-align: center;

  }

} 







.faq-heading {  

  font-weight:600;

  font-size:21px;

   -webkit-transition: text-indent 0.2s;

  text-indent: 20px;

  color: #333;

	padding: 14px 0px;

	margin-bottom: 0px;

}



.faq-text {

    font-weight: 400;

    color: #000;

    width: 95%;

    padding-left: 23px;

    margin-bottom: 10px;

	font-size: 16px;

	

}

.faq-text b{font-weight: 400 !important;}



.faq {

  width: 1100px;

  margin: 0 auto;

  border-radius: 0px;

  position: relative;

  border:0px solid #E1E1E1;

}

.faq li {

    font-size: 16px;

    line-height: 30px;

    font-weight: 400;

}

.faq label {

    display: block;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    height: 56px;

    padding-top: 1px;

    background-color:#e6dcf7;

    border-bottom: 0px solid #E1E1E1;

    margin-bottom: 12px;

    box-shadow: 1px 2px 5px rgb(163 136 175 / 20%);

    border-radius: 8px;

}



.faq input[type="checkbox"] {

  display: none;

}



.faq .faq-arrow {

    width: 14px;

    height: 14px;

    transition: -webkit-transform 0.8s;

    transition: transform 0.8s;

    transition: transform 0.8s, -webkit-transform 0.8s;

    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    border-top: 2px solid rgba(0, 0, 0, 0.80);

    border-right: 2px solid rgba(0, 0, 0, 0.80);

    float: right;

    position: relative;

    top: -34px;

    right: 22px;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}



.faq ul{margin-left:0px !important;}

#faq-a ul li{color:#333;}

 .faq input[type="checkbox"]:checked + label > .faq-arrow {

  transition: -webkit-transform 0.8s;

  transition: transform 0.8s;

  transition: transform 0.8s, -webkit-transform 0.8s;

  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  -webkit-transform: rotate(135deg);

          transform: rotate(135deg);

}

 .faq input[type="checkbox"]:checked + label {

  display: block;

  

  color: #333;

  height: auto;

  transition: height 0.8s;

  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

      padding-bottom: 15px;

}



 .faq input[type='checkbox']:not(:checked) + label {

  display: block;

  transition: height 0.8s;

  height: 60px;

  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.faqsection{ padding:50px 0px;}

.faqsection h2{text-align: center;  margin-bottom:20px;  color: #000;  font-weight:800; font-size:45px;}

.lastbg h3{text-align: center;  margin-bottom:5px;  color: #000;  font-weight:800; font-size:45px;}

.lastbg{background: url(../image/lastbg.png) no-repeat; background-size: cover; text-align:center;}

.lastbg p{ text-align:center; font-size:18px; color:#000;}

.lastbg button{ margin-top:20px !important;}

.breadcumb-content ul li {display: inline-block; padding: 0px 3px; font-size: 16px;}

.breadcumb-wrapper{ padding:45px 0px 55px; background: url(../image/section3bg.png) no-repeat;  background-size: cover;}

.breadcumb-menu{ margin:0 auto; padding-left:0px;}

.breadcumb-title{ margin-top:0px;}



.breadcumb-wrapper h1 {text-align: left; font-size:45px; color: #000; margin-top:0px; margin-bottom:20px;font-weight: 800;}

.breadcumb-wrapper p{text-align: left; font-size: 18px; color: #000; line-height: 30px;}

.caption{ padding-top:32px;}



.pricingpage{padding: 50px 0px 80px; background: linear-gradient(357deg, rgb(168 163 255) 0%, rgb(244 239 249) 0%, rgb(236 234 255) 100%);}

.wrapper{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    grid-gap: 15px;

    margin: 30px 20px;

    padding: 0px 20px;



}

.pricingpage h1{ color:#000; font-size: 44px; font-weight: 600;margin-bottom: 5px;}

.subtitle{font-size: 18px; color: #333; text-align:center;}

.pricing-table {

    box-shadow: 0px 0px 18px #ccc;

    text-align: center;

    padding: 30px 0px;

    border-radius: 20px;

    position: relative;

    background: #fff;

}

.pricing-table .head {

    border-bottom:1px solid #eee;

    padding-bottom: 50px;

    transition: all 0.5s ease;

}

.pricing-table:hover .head{

   border-bottom:1px solid #8E2DE2;

   

}

.pricing-table .head .title {

    margin-bottom: 20px;

    font-size: 25px;

    font-weight: 700;

    color: #000;

    text-transform: uppercase;

}



.pricing-table .content .price{

    background: linear-gradient(to right, #ff00dd 0%, #0030e0 100%);

    width: 90px;

    height: 90px;

    margin: auto;

    line-height: 90px;

    border-radius: 50%;

    border: 5px solid #fff;

    box-shadow: 0px 0px 10px #ccc;

    margin-top: -50px;

     transition: all 0.5s ease;

}

.pricing-table:hover .content .price{

    transform: scale(1.2);

 

}

.pricing-table .content .price h1{

    color:#fff;

    font-size: 30px;

    font-weight: 700;

}

.pricing-table .content ul{

   list-style-type: none;

   margin-bottom: 20px;

   padding-top: 10px;

   padding-left:0px;

}



.pricing-table .content ul li {

    /* margin: 16px 0px; */

    font-size: 15px;

    color: #000000;

    border-bottom: 1px dashed #e7e7e7;

    padding: 8px 0px;

}



.pricing-table .content .sign-up{

    background: linear-gradient(to right, #f500f7 0%, #3344dc 100%);

    border-radius: 40px;

    font-weight: 500;

    position: relative;

    display: inline-block;

}





.pricing-table .btn {

	color: #fff;

	padding:8px 40px;

	display: inline-block;

	text-align: center;

	font-weight: 600;

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3 linear;

	transition: all 0.3 linear;

	border: none;

	font-size:18px;

	text-transform: capitalize;

	position: relative;

	text-decoration: none;

    margin: 2px;

    z-index: 9999;

    text-decoration: none;

    border-radius:50px;

 

}



.pricing-table .btn:hover{

	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);

}



.pricing-table .btn.bordered {

	z-index: 50;

	color: #333;

}

.pricing-table:hover .btn.bordered{

	color:#fff !important;

}



.pricing-table .btn.bordered:after {

	background: #fff none repeat scroll 0 0;

	border-radius: 50px;

	content: "";

	height: 100%;

	left: 0;

	position: absolute;

	top: 0;

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3 linear;

	transition: all 0.3 linear;

	width: 100%;

	z-index: -1;	

	-webkit-transform:scale(1);

	-moz-transform:scale(1);

	transform:scale(1);

}

.pricing-table:hover .btn.bordered:after{

	opacity:0;

	transform:scale(0);

}



@media screen and (max-width:768px){

   .wrapper{

        grid-template-columns: repeat(2,1fr);

    } 

}



@media screen and (max-width:600px){

   .wrapper{

        grid-template-columns: 1fr;

    } 

}

.shoppage h1{ font-size:40px; font-weight:600; color:#000;}

.shoppage{ padding:50px 0px;}

.shoppage p{line-height: 30px;  font-size: 16px;}

.howitwork { padding:30px 0px 50px;}

.howitwork h2{ text-align:center; font-size:40px; color:#000;font-weight: 700;    margin-top: 35px;}

.howitwork p{ text-align:center; color:#333; font-size: 17px;}

.howitwork h4{ color:#000; font-size:26px; margin-bottom:8px;}

.howitwork .col-md-3{ margin-top:20px;}

.whyitwork{background: #e1dfff; padding: 50px;}

.whyitwork h2{color:#000; margin-bottom:15px; font-size:40px;}

.whywork{ list-style:none;}

.whywork li {width: 32%; text-align: left; float: left; background: #fff;  padding: 15px 25px 25px; border-radius: 25px;  margin-right: 14px;  height: 137px; box-shadow: 1px 5px 11px #d6c9e3;}

.whywork li h4{ font-size:26px; color:#000;} 

.whywork li p{color: #606060; font-size: 17px;}

.rtl img{ float:right;}

.table{ background:#fff;}

thead{background:#664fe5;}

thead tr th{ color:#fff; font-size: 18px;  font-weight: 500; text-align:center;}

.table tr td{font-size:15px; color:#000;}

.pricingpage h3{font-size: 30px; color:#000;    margin-top: 26px;}

tbody tr th{font-size: 16px;  color: #000;}

.faqpage .faq-heading{background: #fff;}

.faqpage label{background: #fff !important;}

.faqsection h2{ margin-bottom:8px;}

.faqpage{ margin-top:30px;}

.boxs img{ margin-bottom:15px;}

.boxs{background: #ffffff; padding:38px; border-radius: 10px;}

.boxs h3{ color:#000; margin-top:0px;}

.boxs p{ font-size:16px;}	



@media only screen and (max-width: 767px) {

  .faq {width: 100%;}

  .slider .animationimg{width: 70%; margin: 0 auto; text-align: center; margin-left: 70px; margin-top: 30px;}

  .Whofor .col-md-3{ margin-bottom:30px;}

  .tbox{ margin-bottom:50px;}

  .slider h1{    margin-top: 15px;}

}

.contactform{background:#eaecff; padding:50px 50px 70px;}
.formbox{background: #fff; padding:30px; border-radius: 10px; height:540px; box-shadow: 1px 1px 13px #e3dde7;}
.formbox p{ font-size:16px; color:#000;}
.#contactform  {
    color: #fff;background-color: #3344dc;}

#contactform {
        padding: 44px;
   background: #8ca0ff;
    border: 1px solid #6e7bb7;
   border-radius: 10px;
	
}
.formbox p{ margin-bottom:15px;}
#contactform input{border: 1px solid #d3d3d3;
    padding: 10px;
    width: 100%;
	height: 45px;
    border: none;
    border-radius: 4px;
    margin-bottom: 10px;}
#contactform textarea {
    border:0px solid #d3d3d3;
    padding: 10px;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
    height: 100px;
}	
.btn-primary{color: #fff; background-color: #3344dc;}
.btn-primary:hover{background-color: #000;}
.features .boxs{margin-bottom: 30px;}