.solutions-wrapper{
   background-color: #19364b;
   padding: 40px 20px;
   color: #fff;
   position: relative;
   z-index: 1;
}
.solutions-wrapper p{   
   font-size: 14px;
}
.solutions-wrapper img{
   display: none;
}
.solutions-wrapper .item{
   display: flex;
   flex-wrap: wrap;
   border-bottom: 1px solid #ffffff7a;
   margin-bottom: 30px;
}
.solutions-wrapper .item>*:nth-child(1),
.solutions-wrapper .item>*:nth-child(2){
   width: 47%;
   margin-right: 6%;
   display: flex;
}

.solutions-wrapper .item>*:nth-child(2){
   margin-right: 0;
}

.solutions-wrapper h6{
   font-size: 24px !important;
}
.solutions-wrapper .text a{
   color: #fff;
   font-weight: bold;
}
.solutions-wrapper .open:not(.visible-desktop){
   width: 100%;
   display: flex;
   margin: 20px 0 0;
   min-height: 40px;
   justify-content: center;
}
.solutions-wrapper .open span{
   width: 40px;
   height: 1px; 
   background-color: #ffffff7a;

}
.solutions-wrapper .open span:nth-child(2){
   transform: translateX(-40px) rotate(90deg);
   transform-origin: center;

}
.solutions-wrapper .open span:nth-child(3){
   display: none;
}


.solutions-wrapper .popup{
   display: none;
   flex-direction: column;
   position: absolute;
   background: #fff;
   color: #000;
   padding: 40px;
   width: 85%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   align-items: center;
}
.solutions-wrapper .popup.active{
   display: flex;
}
.solutions-wrapper .popup img{
   display: block;
   min-width: 75px;
   margin-bottom: 30px;
}
.solutions-wrapper .close-wrap{
   margin-top: 45px;
}
.solutions-wrapper .popup .open{
   transform: rotate(45deg);
}
.solutions-wrapper .popup .open span{
   background-color: #19364b;
}


.solutions-wrapper .solution .open{
   display: none;
}

.visible-desktop{
   display: none;
}

@media(min-width: 768px){
   .solutions-wrapper img{
      min-width: 55px;
      margin-right: 20px;
      display: block;
   }
}

@media(min-width: 1024px){
   .visible-mobile{
      display: none;
   }
   .visible-desktop{
      display: block;
   }
   .solutions{
      position: relative;
   }
   .solutions .text{
    padding-right: 30px;
   }
   .solutions-wrapper{
      position: static;
      max-width: 70%;
      padding: 15px
   }
   .solutions-wrapper h6{
      font-size: 35px !important;
   }
   .solutions-wrapper .problem h6{
      margin-left: 45px;
   }
   .solutions-wrapper .solution h6{
      margin-left: -10px;
   }
   .solutions-wrapper>.item:first-child>div{
      text-align: center;
      justify-content: center;
   }
   .solutions-wrapper .item{
      margin-bottom: 0;
      position: relative;
      z-index: 2;
      margin: 0 30px;
      padding: 35px 0 20px
   }
   .solutions-wrapper .text p{
      margin-bottom: 0;
      line-height: 1.2;  
   }
   .solutions-wrapper .item.headings,
   .solutions-wrapper .item.last{
      border: none;
      padding: 20px 0 5px;
   }
   .solutions-wrapper .item>*:nth-child(1), 
   .solutions-wrapper .item>*:nth-child(2) {
      width: 40%;
      /* margin: 20px 4%; */
      display: flex;
      justify-content: center;
   }
   .solutions-wrapper .item>*:nth-child(2){
      width: 48%;
      margin-left: 25px;
      position: relative;
   }
   .solutions-wrapper .open:not(.close){
      cursor: pointer;
      /* transform: scale(0.75); */
      display: none;
   }
   .solutions-wrapper .open.close{
      display: block;
      transform: scale(.75);
      cursor: pointer;
   }
   .solutions-wrapper .close-wrap{
      margin-top: 0;
   }
   .solutions-wrapper .solution .open{
      display: flex;
      position: absolute;
      right: -50px;
      left: auto;
      justify-self: flex-end;
      justify-content: flex-end;
      width: auto;
      transform: scale(.75);
   } 
   .solutions-wrapper .open span {
      width: 40px;
      height: 2px;
      background-color: #d2d2d2;
      transform: scaleX(1.9);
   }
   .solutions-wrapper .open span:nth-child(2) {
      transform: translate(-15px,-14px) rotate(45deg);
      /* transform-origin: center; */
   }
   .solutions-wrapper .open span:nth-child(3) {
      display: inline;
      transform: translate(-55px,14px) rotate(135deg);
  }
  .solutions-wrapper .overlay{
      position: absolute;
      z-index: 2;
      width: 70%;
      height: 100%;
      top: 0;
      left: 0;
      background: #19364b;
  }
  .solutions-wrapper .popup {
      display: flex;
      flex-direction: column;
      position: absolute;
      background: #fff;
      color: #000;
      padding: 40px;
      width: 45%;
      top: 50%;
      transform: translateY(-50%);
      transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
      z-index: 0;
      left: 0;
      height: 100%;
      box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 0%);
   }
   .solutions-wrapper .popup.active {   
      width: 30%;
      left: 70%;
      box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 18%);
      height: auto;
   }
   .solutions-wrapper p{   
      font-size: unset
   }
}