.fl {
    float: left;
    text-align: left;
    padding-left: 0;
}

.fr {
    float: right;
    text-align: right;
    padding-right: 0;
}

body {
    font-family: 'General Sans', sans-serif;
    font-weight: 400;        
     

}

/* Style the navigation menu */

.topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */

.topnav #myLinks {
    display: none;
}

/* Style navigation menu links */

.topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

/* Style the hamburger menu */

.topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

/* Add a grey background color on mouse-over */

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Style the active link (or home/logo) */

.active {
    background-color: #04AA6D;
    color: white;
}

/* Style the buttons that are used to open and close the accordion panel */

.accordion {
    background-color: #f4f4f4;
    color: #000;
    position: relative;
    cursor: pointer;
    padding: 22px;
    border-radius: 10px;
    width: 80%;
    font-weight: 600;
    text-align: left;
    display: block;
    border: 2px solid #f4f4f4;
    margin: 0 auto;
    outline: none;
    margin-bottom: 21px;
    transition: 0.4s;
}

.arow {
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(90deg);
    right: 15px;
    top: 15px;
    font-weight: 600;
    font-size: 20px;
    color: #b0afaf;
}

.accordion:hover .arow {
    color: #6f2b90;
}
.accordion.active .arow {
    transform: rotate(270deg);
    color: #6f2b90;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */


.accordion:hover {
    background-color: #f4f4f4;
    border: 2px solid #6f2b90;
}

/* Style the accordion panel. Note: hidden by default */

.panel {
    padding: 0 18px;
    background-color: white;
    width: 80%;
    display: none;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 20px;
    border: none !important;
    font-weight: 500;
    box-shadow: none;
    transition: max-height 0.3s ease;
    max-height: 0;
}
.accordion.active .arow {
  transform: rotate(90deg); /* Optional arrow animation */
}
header {
    background: linear-gradient(90deg, rgba(21, 24, 43, 1) 25%, rgba(84, 32, 122, 1) 100%);
    padding: 30px 0;
}

header .fr {
    margin-top: 20px;
}

ul li {
    list-style: none;
}

ul {
    margin-left: 0;
    padding-left: 0;
}

img {
    width: 100%;
}

.ban ul li img {
    width: 62px;
}

.ban ul li {
    width: 20%;
    display: inline-block;
    background: #f4f4f4;
    padding: 12px 0px 10px 12px;
    border-radius: 15px;
    margin-bottom: 5px;
}

.ban ul li:hover {
    background: #6f2b90;
}

.ban ul li:hover a h4 {
    color: #fff;
}

.ban ul li:hover img {
    filter: brightness(0) invert(1);
}

.ban li a h4 {
    font-size: 13px;
    font-weight: 600;
    color: #000;
    margin-top: 20px;
}

a {
    text-decoration: none;
    transition: 1s all;
}

a:hover {
    text-decoration: none;
}

header .fr .t-cvr {
    border: 2px solid #fff;
    border-radius: 35px;
    display: inline-block;
    padding: 10px 25px;
}

header .fr .t-cvr a {
    color: #fff;
    font-weight: 600;
    font-size: 17px;
}

section.ban {
    padding: 80px 0;
}

section.ban h1 {
    font-size: 65px;
    margin-bottom: 50px;
    font-weight: 600;
    color: #1d1d1d;
    position: relative;
}

.ru {
    position: absolute;
    left: -1px;
    top: 57px;
    width: 325px;
}

.ban .fr {
    margin-top: 200px;
    padding-left: 0;
}

.readmore {
    background: #6f2b90;
    width: fit-content;
    color: #fff;
    border-radius: 30px;
    padding: 14px 50px;
    margin-top: 25px;
    display: inline-block;
    font-weight: 600;
}

.readmore:hover {
    background: #15182b;
    color: #fff;
}

.owl-nav button {
    position: absolute;
    top: 50%;
    color: #fff;
    margin: 0;
    transition: all 0.3s ease-in-out;
}

.owl-nav button.owl-prev {
    left: 0;
}

.owl-nav button.owl-next {
    right: 0;
}

.owl-item {
  
    border-radius: 10px;
}

.owl-dots {
    text-align: center;
    padding-top: 15px;
}

.owl-dots button.owl-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: none;
    margin: 0 3px;
}

.owl-dots button.owl-dot.active {
    background-color: #000;
}

.owl-dots button.owl-dot:focus {
    outline: none;
}

.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.owl-carousel .owl-item img {
    padding: 15px;
}

.item {
    background: #fff;
}

span {
    font-size: 50px;
    position: relative;
    top: -5px;
}

.owl-nav button:focus {
    outline: none;
}

.client h2 {
    color: #000;
    text-align: center;
    margin-bottom: 35px;
    margin-top: 55px;
}

hr {
    border-top: 1px solid #595555;
    margin-top: 50px;
}

.get {
    margin-top: 50px;
    text-align: center;
}

.get h2 {
    text-align: center;
    font-size: 55px;
    color: #000;
    margin-bottom: 30px;
    font-weight: 600;
}

.get h5 {
    font-size: 18px;
    margin-bottom: 50px;
    font-weight: 600;
}

.get .cvr {
    background: #f4f4f4;
    padding: 30px 20px;
    border-radius: 15px;
}

.get img {
    margin-bottom: 20px;
}

.get h4 {
    font-size: 24px;
    padding: 0 25px;
    color: #000;
    font-weight: 600;
    margin-bottom: 25px;
}

.get p {
    font-size: 18px;
    padding: 0 20px;
    font-weight: 500;
    line-height: 27px;
}

.why {
    margin-top: 80px;
}

.why h2 {
    text-align: center;
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 70px;
}

.why li {
    width: 47%;
    margin-bottom: 15px;
    background: #f4f4f4;
    border-radius: 12px;
    padding: 30px;
    float: left;
    margin-right: 15px;
    position: relative;
}

.imgryt img {
    width: 500px;
    position: absolute;
    top: 50px;
    left: -100px;
}

.why .imgryt {
    position: relative;
    display: inline-block;
}

.why li:nth-child(2):after {
    position: absolute;
    content: "";
    width: 50px;
    height: 55px;
    background: url(img/arrow.png) no-repeat center;
    background-size: contain;
    right: -37px;
    bottom: 90px;
}

.why li img {
    width: 40px;
}

.why li h4 {
    font-size: 26px;
    color: #000;
    font-weight: 600;
}

.why p {
    font-size: 18px;
    height: 130px;
}

footer {
    background: linear-gradient(90deg, rgba(21, 24, 43, 1) 25%, rgba(84, 32, 122, 1) 100%);
    padding: 70px 0;
}

footer .container {
    padding-left: 0;
}

footer li a {
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

footer li a:hover {
    color: #ccc;
}

footer .col-md-5 img {
    width: 250px;
}

.ft {
    color: #fff;
}

footer li {
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

footer .col-md-4 li {
    margin-bottom: 5px;
}

footer .col-md-4 li a {
    margin-bottom: 0px;
    font-weight: 400;
}

.social li {
    float: left;
    margin-right: 5px;
    width: 35px;
}

.social {
    margin-top: 40px;
}

.social li a:hover {
    opacity: 0.7;
}

.copyright {
    padding: 30px 0;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
}

.faq {
    margin-top: 60px;
    margin-bottom: 60px;
}

.faq h2 {
    text-align: center;
    font-weight: 600;
    font-size: 50px;
    margin-bottom: 60px;
}

.easy {
    margin-top: 160px;
    margin-bottom: 70px;
    text-align: center;
}

.easy h2 {
    text-align: center;
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 80px;
}

section.easy img {
    width: 150px;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.easy h3 {
    text-align: center;
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: 600;
}

.easy p {
    text-align: center;
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 20px;
}

.easy .readmore {
    margin: 0 auto;
    display: block;
}

.easy .nmbr {
    font-size: 22px;
    color: #000;
    display: block;
    text-align: center;
    margin-bottom: 0;
}

.easy .fl,
.fr {
    margin-top: 50px;
}

.easy h6,
h5 {
    text-align: center;
    margin-top: 20px;
}

.easy h5 {
    color: #6f2b90;
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 600;
    margin-top: 10px;
}

.or img {
    width: 50px !important;
}

img.very {
    width: 20px !important;
    display: inline-block !important;
}










* {
  box-sizing: border-box;
}
* ::before,
* ::after {
  box-sizing: border-box;
}

.main {
  width:525px;
 

  border-radius: 3px;
  padding: 30px;
  position: relative;
  display: block; margin: 0 auto;
}
.main .form_wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.main .form_wrapper .tile {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
  overflow: hidden;
}
.main .form_wrapper .tile h3 {
  font-size: 22px;
  margin: 0px;
  transition: all 0.3s ease;
}
.main .form_wrapper .radio {
  display: none;
}
section.f-main {
    width: 800px;
    margin: 0 auto;
    border: 2px solid #6f2b90;
    border-radius: 20px;
    padding: 50px 0 0;
    position: relative;
    top:50px;
}
.main .form_wrapper .tab {
  width: 50%;
 cursor: pointer;
  height: 42px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: 500;
  transition: color 0.3s ease;
  user-select: none;
}
.main .form_wrapper #signup:checked ~ .signup_tab:hover{
  color: #fff;
}

.main .form_wrapper .tab.login_tab {
   background: #ccc; cursor: pointer;
    border-radius: 20px 0px 0px 20px;
}
.main .form_wrapper .tab.signup_tab {
    background: #ccc;
    border-radius: 0 20px 20px 0;
}
.main .form_wrapper .shape {
  background: linear-gradient(45deg, #6f2b90, #6f2b90) no-repeat center;
  width: 50%;
  height: calc(10px - 1px);
  border-radius: 5px;
  position: absolute;
  top: 55.5px;
  left: 0px;
  opacity: 0.9;
  transition: all 0.4s ease;
}
.main .form_wrapper .shape:hover {
  background: linear-gradient(-45deg, #6f2b90, #6f2b90) no-repeat center;
}
.main .form_wrapper #login:checked ~ .shape {
  left: 0px;
}
.main .form_wrapper #login:checked ~ .login_tab {
border-color: transparent;
    z-index: 1;
    border-radius: 20px 0 0 20px;
    color: #fff;
    background: #672f8b;
}
.main .form_wrapper #login:checked ~ .tile .signup {
  display: none;  opacity: 0;
}
.main .form_wrapper #login:checked ~ .form_wrap {
  transform: translateX(0);
}
.main .form_wrapper #login:checked ~ .form_wrap .signup_form {
  opacity: 0;
}
.main .form_wrapper #signup:checked ~ .shape {
  left: 50%;
}
.main .form_wrapper #signup:checked ~ .signup_tab {
  border-color: transparent;
  z-index: 1;
     color: #ffffff;
    background: #672f8b;
}
.main .form_wrapper #signup:checked ~ .tile .login {
  display: none; opacity: 0;
}
.main .form_wrapper #signup:checked ~ .form_wrap {
  transform: translateX(-100%);
}
.main .form_wrapper #signup:checked ~ .form_wrap .login_form {
  opacity: 0;
}
.main .form_wrapper a {
  color: #6f2b90;
  text-decoration: none;
  transition: all 0.3s linear;
}
.not_mem h6 a {
   
    margin-left: 6px;
    font-size: 14px;
    color: #672f8b;
}
.main .form_wrapper .form_wrap .form_fild .btn:hover{
  background: #000;
}
.not_mem h6{
  margin-top:2px;
}

.main .form_wrapper a:hover {
  color: #6f2b90;
}
.main .form_wrapper .form_wrap {
  display: flex;
  width: 100%;
  flex: 0 0 100%;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.main .form_wrapper .form_wrap .form_fild {
  width: 100%;
  flex: 0 0 100%;
  transition: all 0.5s ease;
}
.main .form_wrapper .form_wrap .form_fild .input_group {
  width: 100%;
  margin-bottom:21px;
}
.main .form_wrapper .form_wrap .form_fild .input_group .input {
  border: solid #f1f1f1 2px;
  border-radius: 5px;
  width: 100%;
  height: 50px;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: all 0.3s linear;
}
.main .form_wrapper .form_wrap .form_fild .input_group .input::placeholder {
  color: #adadad;
}
.main .form_wrapper .form_wrap .form_fild .input_group .input:hover {
      border-color: rgba(84, 32, 122, 1);
}
.main .form_wrapper .form_wrap .form_fild .input_group .input:focus {
    border-color: rgba(84, 32, 122, 1);
}
.main .form_wrapper .form_wrap .form_fild .forgot {
     margin-top: 25px;
    display: block;
    margin-bottom: 30px;
  padding: 0px 2px;     text-align: right;
    text-decoration: underline;
}
.main .form_wrapper .form_wrap .form_fild .btn {
 width: 45%;
    margin: 0 auto;
    height: 40px;
    margin-bottom: 20px;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.8px;
    color: white;
    background: linear-gradient(45deg, #6f2b90, #6f2b90) no-repeat center;
    border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s linear;
}

.main .form_wrapper .form_wrap .form_fild .btn:active {
  transform: scale(0.95);
}
.main .form_wrapper .form_wrap .form_fild .not_mem {
  text-align: center;     display: flex;
}
.main .form_wrapper .form_wrap .form_fild .not_mem label {
     display: flex; 
       margin: 0 auto;
    font-weight: 500;
}
.main .form_wrapper .form_wrap .form_fild .not_mem label span {
  pointer-events: all;
  color: #6f2b90;
  text-decoration: none;
  transition: all 0.3s linear;
}
.main .form_wrapper .form_wrap .form_fild .not_mem label span:hover {
  color: #6f2b90;
}
body {
 
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
 
}


.menu-btn {
      position: absolute;
    display: inline;
    top: 5%;
    right: 50px;
    font-size: 25px;
    z-index: 999; cursor: pointer;
}

.menu-btn a {
   display: inline-block;
   text-decoration: none;
}

.btn-open:after {
   content: "\f0c9";
   font-family: "fontawesome";
   color: #000;
   -webkit-transition: all .3s linear 0s;
   -moz-transition: all .3s linear 0s;
   -o-transition: all .3s linear 0s;
   transition-property: all .3s linear 0s;
}

.btn-open:hover:after {
   color:#6f2b90;
}

.btn-close:after {
   content: "\f00d";
   font-family: "fontawesome";
   color: #fff;
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.btn-close:hover:after {
   color:#6f2b90;
}


/* OVERLAY NAV */

.nav {
   position: fixed;
   display: none;
   overflow: auto;
   top: 0;
   right: 0;
   width:20%;
   height: 100%;
   margin: 0;
   padding: 0;
   background: rgba(26, 26, 26, 0.9);
   z-index: 99;
}
span.fa.fa-fw.field-icon.toggle-password.fa-eye {
    float: right;
    position: relative;
    top: -28px;
    right: 10px;
}
span.fa.fa-fw.field-icon.toggle-password.fa-eye-slash {
    float: right;
    position: relative;
    top: -28px;
    right: 10px;
}
.menu {
   width: 100%;
   height: 100%;
}

.menu ul {
 margin-top: 70px;
   padding: 0;
   width: 100%;
   height: 100%;
}

.menu li {
   display: table;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 10%;
   list-style: none;
   text-align: center;
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.menu li a {
   display: table-cell;
   color: #fff;
   vertical-align: middle;
}

.menu li:hover {
   background:#6f2b90;
}
header .col-md-12 img{
  width: 300px; text-align: center; margin: 0 auto; display: block;
}

/* RESPONSIVE */

@media screen and (max-width: 768px) {
   .menu-btn {
      right: 25px;
   }
   .nav

 {
    width: 75%;}
    header .col-md-12 img{
  width: 150px; 
}
.main .form_wrapper .form_wrap .form_fild .forgot {
   
    margin-bottom: 20px;}
.menu-btn {
  
    top: 1%;}
section.f-main {
    width:98%;}
    .main {
    width:100%;}
    .menu li {
  
    height: 6%;
    }
.ban ul li {
    width: 32%;}
    section.ban {
    padding:25px 0;         
    overflow-x: hidden;
    overflow-y: visible;
}
section.client {
    overflow-x: hidden;
    overflow-y: hidden;
}
section.ban h1 {
    font-size: 35px;
    margin-bottom: 30px;}
    .ru {
    position: absolute;
    left: 2px;
    top: 37px;
    width: 179px;
}
.ban li a h4 {
    font-size: 12px;
}
.readmore {
    padding: 11px 35px;
    margin-top: 15px;
    position: relative;
    z-index: 10;
    display: inline-block;}
    .ban .fr {
    margin-top: 25px;}
    .client h2 {
    margin-bottom: 10px;
    margin-top: 10px;  font-size: 20px;
} 
hr {
    margin-top: 15px;
}
.get {
    margin-top: 0px;         overflow-x: hidden;
        overflow-y: hidden;
}
   .get h2 {
   font-size: 25px;
    margin-bottom: 20px;
    padding-top: 0px;
    margin-top: 10px;
}
.get h5 {
    font-size: 16px;
    margin-bottom: 25px;
}
.get .cvr {
   
    padding: 10px 20px;
    margin-bottom: 20px;}
.get img {
    margin-bottom: 10px;
}

.get h4

 {
    font-size: 22px;
    padding: 0 12px;
  
    margin-bottom: 15px;
}
.get p

 {
    font-size: 17px;
    padding: 0 12px;}

.why {
    margin-top: 10px;         overflow-x: hidden;
        overflow-y: hidden;

}
   .why h2 {
     font-size: 30px;
    margin-bottom: 35px;
}
.why li {
    width: 100%;
    margin-bottom: 15px;
   
    padding: 25px;
   
    margin-right: 0;}
.why li h4 {
    font-size: 23px;}

.why p {
    font-size: 18px;
    height: inherit;
}
.imgryt img {
  width: 70%;
        text-align: center;
        position: relative;
        top: 0;
        left: 50%;
        margin-left: -137px;
}
.why li:nth-child(2):after{
  display: none;
}
header .fr .t-cvr {
    display: inline-block;
    padding: 6px 15px;
    margin: 0;
    text-align: center;
    position: absolute;
    right: 10px;
    top: 15px;
}
header .fl{
  float: left;
  padding-right: 0;
}
header {
    padding: 10px 0;
    position: relative;
    min-height: 50px;
}
header .fr {
    margin-top: 0;
    position: static;
}
header .fr .t-cvr a {
    font-size: 13px;
}
header .fl img{
  width: 140px; 
  margin: 8px 0 8px 10px;
  display: block;
}
.ban .fl{
  padding-left: 15px;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.ban ul li {
        width: 32%;
        margin-right: 2px;
    }
    .ban ul li:nth-child(3n) {
        
        margin-right:0px;
    }
.easy {
    margin-top: 20px;
    margin-bottom: 50px;         overflow-x: hidden;
        overflow-y: hidden;

}
.easy h2 {
    font-size: 30px;
  
    margin-bottom: 0;
}
.easy .fl, .fr {
    margin-top: 30px; 
    float: none;
    text-align: center;
}
section.easy img {
    width: 110px;}
.easy h3 {
    font-size: 24px;
    margin-bottom: 15px;
}
.easy p {
    font-size: 17px;}

.easy h6, h5 {
    margin-top: 10px;
}
.or {
    display: none;
}
.easy .fl:first-of-type {
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 40px;
}
.easy .fl:first-of-type:after {
    content: "OR";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 20px;
    font-weight: 600;
    color: #6f2b90;
    font-size: 16px;
    z-index: 2;
}
.easy .fl:first-of-type:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e0e0e0;
    z-index: 1;
}
.faq {
    margin-top: 0;         overflow-x: hidden;
        overflow-y: hidden;

}
.faq h2 {
    font-size: 31px;
    margin-bottom: 35px;
}
.accordion {
        font-size: 13.7px;

    padding: 18px;
    border-radius: 10px;
    width: 100%;}

.panel {
   width: 100%;}

.faq {
    margin-bottom: 25px;
}
footer .container {
    padding-left: 15px;
}
footer {
   padding: 40px 0;         overflow-x: hidden;
        overflow-y: hidden;

}
footer .col-md-5 img {
    width: 148px;
}
.copyright {
    padding: 20px 0;     font-size: 15.5px;   

}
footer li a {
   
    font-size: 19px;}
.social {
    margin-top: 15px;
}
.ft {
    margin-bottom: 20px;}
















}