@media all and (min-width:769px){

.b2b{
width:100%;
max-width:1092px;
margin:0 auto;

}
 .container {
    display:flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 340px;
    width:auto;
    margin:40px auto;

  }
  


.card{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
   transition: 2s ease-out;

  }


 .card-squ {
    display:flex;
    border-radius:0;
    height: 250px;
    width: 388px;
    background: linear-gradient(to right, #ffdf40 0%, #6ABF4A 100%);
    filter:blur(4px);
        box-shadow: inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
        inset +0.75px +0.5px rgba(255, 255, 255, 0.025),
          3px 2px 10px rgba(0, 0, 0, 0.25),
          inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
          inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
         opacity:.7;
    transition: 2s ease-out;
  }
  
  .card:not(:first-child) {
      margin-left: -36px;
  }
  
  .card:hover {
    transform: translateY(-15px);
    transition: 2s ease-out;
  }
  
  .card:hover ~ .card {
    position: relative;
    left: 30px;
    transition: 2s ease-out;
  }
  
  .title {
    color: black;
    font-weight: 300;
font-size:28px;
    position: absolute;
    left: 12px;
    top: 15px;
  }
  
  .bar {
    position: absolute;
    top: 130px;
    left: 0px;
    height: 7px;
      width: 398px;
    filter: blur(2px);
  }
  
  .emptybar {
    background-color: rgba(255, 255, 255, 0.452);
    width: 100%;
    height: 100%;
  }

    .filledbar-1, .filledbar-2, .filledbar-3{
    position: absolute;
    top: 0px;
    z-index: 3;
    width: 0px;
    height: 100%;
    background: #FFDF40;
    background: linear-gradient(90deg, #FFDF40 30%, #6ABF4B 65%, #6ABF4B 100%);
    transition: 0.6s ease-out;
  }   

  .card:hover .filledbar-1{
    width: 130px;
    transition: 1s ease-out;
  }
  .card:hover .filledbar-2{
    width: 240px;
    transition: 1s ease-out;
  }
  .card:hover .filledbar-3{
    width: 388px;
    transition: 1s ease-out;
  }
  
.image-1{
display:flex;
flex-direction: column;
width:auto;
height:60px;
position:relative;
filter:blur(1px);
margin:0 auto;
}

.image-2{
    display:flex;
    flex-direction: column;
    width:auto;
    height:64px;
    position:relative;
    top:20px;
    left:20px;
    filter:blur(1px);
    }

    .image-3{
        display:flex;
        flex-direction: column;
        width:auto;
        height:76px;
        position:relative;
        top:16px;
        left:18px;
        filter:blur(1px);
        }

  .circle {
    position: absolute;
    top: 150px;
    left: calc(50% - 60px);
  }
  
  .stroke {
    stroke: rgba(255, 255, 255);
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
    transition: 0.08s ease-out;
  }

  .cir-svg{
   display:flex;
    fill:transparent;
    stroke-width:1px;
  }
  
  .card:hover .stroke {
    stroke-dashoffset: 45;
    transition: 0.6s ease-out;
  }

  .title-h2{
display:flex;
align-items:center;
justify-content:center;
    text-align:center;
     position:relative; 
      font-size:32px;

  }

.title-h3{
    text-align:center;
    position:relative;
    font-size:27px;
    font-weight:600;
    color:#6abf4b86;
    max-width:1250px;
    width:100%;
    margin:0 auto;
    padding-bottom: 74px;
  }

.advantages{
   display:flex;
    flex-direction:column;
    position:relative;
    top:122px;
    width:100%;
    max-width:1200px;
    align-items:center;
    justify-content:center;
    margin:0 auto;
     gap:50px;
}



.rts{
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    background:#f8f8f8;
}


.card-text-sale, .card-text-content{
    padding:40px;
    text-align:left;
     width:980px;
}

.card-text-rts{
   padding: 40px 40px 40px 74px;
    text-align: left;
    width: 1012px;
} 

.card-text-sale p, .card-text-content p, .card-text-rts p{
font-size:24px;
}


.rts span, .content span, .sale span {
    font-size: 24px;
    text-align: left;
}

b {
    color:#6abf4b
}
.content{
    display:flex;
    flex-direction:row;
    position: relative;
    background: #f8f8f8;
}

.sale{
    display:flex;
    flex-direction:row;
    position: relative;
    background:#f8f8f8;

}

img {
    width:360px;
    height:260px;
    border-radius0px

}

/*.img-rtl{
background-image: url("/upload/b2b/rtl_1.svg");
width: 890px;
height: 260px;
position: relative;
    left: 78px;
    background-repeat: no-repeat;
    bottom: 44px;
}

.img-rtl-2{
background-image: url("/upload/b2b/rtl_2.svg");
width: 890px;
height: 260px;
position: relative;
    left: 72px;
    background-repeat: no-repeat;
    bottom: 180px;
}*/


.content img{
    transform: scaleX(-1);
}

 .icon-how{
     display:flex;
     width:100px;
     height:100px;
     position:relative;
     top:380px;
     margin:0 auto;
 }
 .num1{
     position:relative;
     font-size:184px;
     font-weight:600;
     color:#ffdf40;
     opacity:.8;
     top: -90px;
     left: 10px;
     text-shadow:
     1px 2px 3px silver,
     -1px 5px 3px silver;

 }
 .num2{
     position: relative;
     font-size:184px;
     font-weight:600;
     color:#ffdf40;
     opacity:.8;
     bottom:92px;
     text-shadow:
     1px 2px 3px silver,
     -1px 5px 3px silver;

 }

 .num3{
     position:relative;
     font-size:184px;
     font-weight:600;
     bottom:90px;
     color:#ffdf40;
     opacity:.8;
     text-shadow:
     1px 2px 3px silver,
     -1px 5px 3px silver;
 }



 .how{
     display:flex;
     flex-direction:row;
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     height: 540px;
     align-items: end;
 }
 .how-partner, .how-to-connect{
     display:flex;
     flex-direction:column;
     align-items: center;
     justify-content: center;
     margin:0 auto;
     width: 600px;
     height: 300px;
     position:relative;
     transition: 0.4s ease-out;
 }

.how-partner::before {
    content: '';
    position: absolute;
    width:100%;
    height:100%;
    background:linear-gradient(217deg, rgb(23 153 0 / 80%), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgb(90 217 32 / 80%), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, #ffdf40, rgba(0,0,255,0) 70.71%);
    box-shadow: 0 15px 25px -4px rgb(0 0 0 / 18%), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2);
    filter:blur(2px)
}

.how-to-connect::before{
    content: '';
    position: absolute;
    width:100%;
    height:100%;
    background:linear-gradient(217deg, #ffdf40, rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgb(90 217 32 / 80%), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgb(23 153 0/ 80%), rgba(0,0,255,0) 70.71%);
    box-shadow: 0 15px 25px -4px rgb(0 0 0 / 18%), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2);
    filter:blur(3px)
}


 .title-partner, .title-how-to-connect{
     max-width:400px;
     text-align:center;
     position:relative;
     font-size:24px;
     color:black;

 }

 .how-partner p,.how-to-connect p{
     position:relative;
     padding-top: 20px;
     text-align:center;
     color:black;
     margin:0;
 }

 .how-partner:hover, .how-to-connect:hover {
     transform: translateY(-20px);
     transition: 0.4s ease-out;
 }

 .otdel for + for, .otdel:hover for { display: none; }
 .otdel for, .otdel:hover for + for { display: block; }

}


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

.b2b{
    width:100%;
    max-width:340px;
    margin:0 auto;
}
 .container {
    display:block;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    width:auto;
  }


.card{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
   transition: 2s ease-out;
        text-align: center;
        align-items: center;

  }


 .card-squ {
    display:flex;
    border-radius:0;
    height: 200px;
    width: 340px;
    background: linear-gradient(to right, #ffdf40 0%, #6ABF4A 100%);
    filter:blur(4px);
    box-shadow: inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
        inset +0.75px +0.5px rgba(255, 255, 255, 0.025),
          3px 2px 10px rgba(0, 0, 0, 0.25),
          inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
          inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
    opacity:.9;
    transition: 2s ease-out;
     margin:20px auto;

  }
  
  .card:not(:first-child) {
      margin-left: 0;
  }
  
  .card:hover {
    transform: translateY(0px);
    transition: 2s ease-out;
  }
  
  .card:hover ~ .card {
    position: relative;
    left: 0;
    transition: 2s ease-out;
  }
  
  .title {
    color: black;
    font-weight: 300;
    font-size:22px;
    position: absolute;
    left:auto;
    top: 0;
  }
  
  .bar {
      display:none
  }


.image-1{
    display:block;
    width:auto;
    height: 70px;
    position:static;
    filter:blur(1px);
    padding-right:0;

}

.image-2{
    display:block;
    width:auto;
    height:84px;
    position:static;
    top:0px;
    left:0;
    filter:blur(1px);
    }

    .image-3{
        display:block;
        width:auto;
        height:94px;
        position:static;
        top:16px;
        left:0;
        filter:blur(1px);
        }

  .circle {
    position: absolute;
    top: 104px;
    left: auto;
  }
  
  .stroke {
    stroke: rgba(255, 255, 255);
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
    transition: 0.08s ease-out;
  }

  .cir-svg{
   display:flex;
    fill:transparent;
    stroke-width:1px;
  }
  
  .card:hover .stroke {
    stroke-dashoffset: 45;
    transition: 0.6s ease-out;
  }


.advantages{
    display:flex;
    flex-direction:column;
    position:relative;
    top:0px;
    width:100%;
    max-width:340px;
    align-items:center;
    justify-content:center;
    margin:100px auto 0 auto;
     gap:50px;
}



.card-text-sale, .card-text-content,.card-text-rts{
   padding: 40px 10px 40px 10px;
    text-align: left;
    width: auto;
} 

.card-text-sale p, .card-text-content p, .card-text-rts p{
font-size:18px;
}


.rts span, .content span, .sale span {
    font-size: 14px;
    text-align: left;
}

b {
    color:#6abf4b
}

.rts{
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    align-items: flex-start;
    background:#f8f8f8;
}

.content{
    display:flex;
    flex-direction:row;
    position: relative;
    background: #f8f8f8;
}

.sale{
    display:flex;
    flex-direction:row;
    position: relative;
    background:#f8f8f8;

}

img {
    width:360px;
    height:260px;
    border-radius:0px;

}


.content img{
    transform: scaleX(-1);
}

 .icon-how{
     display:flex;
     width:100px;
     height:100px;
     position:relative;
     top:380px;
     margin:0 auto;
 }
 .num1{
     position:relative;
     font-size:184px;
     font-weight:600;
     color:#ffdf40;
     opacity:.8;
     top: -90px;
     left: 10px;
     text-shadow:
     1px 2px 3px silver,
     -1px 5px 3px silver;

 }
 .num2{
     position: relative;
     font-size:184px;
     font-weight:600;
     color:#ffdf40;
     opacity:.8;
     bottom:92px;
     text-shadow:
     1px 2px 3px silver,
     -1px 5px 3px silver;

 }

 .num3{
     position:relative;
     font-size:184px;
     font-weight:600;
     bottom:90px;
     color:#ffdf40;
     opacity:.8;
     text-shadow:
     1px 2px 3px silver,
     -1px 5px 3px silver;
 }



 .how{
 display:flex;
     flex-direction:column;
     width: 100%;
     max-width: 340px;
     margin: 80px auto 0 auto;
     height: 540px;
     align-items: end;
 }
 .how-partner, .how-to-connect{
     display:flex;
 flex-direction:column;
     align-items: center;
     justify-content: center;
     margin: 10px auto;
     width: 340px;
     height: 300px;
     position:relative;
     transition: 0.4s ease-out;
    padding:10px;
 }

.how-partner::before {
    content: '';
    position: absolute;
    width:100%;
    height:100%;
    background:linear-gradient(217deg, rgb(23 153 0 / 80%), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgb(90 217 32 / 80%), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, #ffdf40, rgba(0,0,255,0) 70.71%);
    box-shadow: 0 15px 25px -4px rgb(0 0 0 / 18%), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2);
    filter:blur(2px)
}

.how-to-connect::before{
    content: '';
    position: absolute;
    width:100%;
    height:100%;
    background:linear-gradient(217deg, #ffdf40, rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgb(90 217 32 / 80%), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgb(23 153 0/ 80%), rgba(0,0,255,0) 70.71%);
    box-shadow: 0 15px 25px -4px rgb(0 0 0 / 18%), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2);
    filter:blur(3px)
}


 .title-partner, .title-how-to-connect{
     max-width:340px;
     text-align:center;
     position:relative;
     font-size:22px;
     color:black;

 }

 .how-partner p,.how-to-connect p{
     position:relative;
     padding-top: 20px;
     text-align:center;
     color:black;
     margin:0;
 }

 .how-partner:hover, .how-to-connect:hover {
     transform: translateY(-20px);
     transition: 0.4s ease-out;
 }

 .otdel for + for, .otdel:hover for { display: none; }
 .otdel for, .otdel:hover for + for { display: block; }

}