.screen {
   display: flex;
   height: calc(100vh - 8rem);
   max-width: 100%;
   overflow: hidden;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;

   box-sizing: border-box;

   transition: opacity 0.5s ease-in-out;
   opacity: 0;
   border-radius: 33.7335px;
   box-shadow: 0px 6.09795px 6.09795px rgba(0, 0, 0, 0.25);
}

.ls-login.ls-login--v1 .ls-login__wrapper.step2-wrapper {
   background: url(../media/onboard/ls-dashboard-bg.png);
   background-size: cover;
   background-repeat: no-repeat;

}

.screen.active {
   opacity: 1;
}

.screen:not(.active) {
   display: none;
}

.mw-90 {
   max-width: 90%;
}

.left-column {
   flex: 3;
   display: flex;
   align-items: center;
   justify-content: center;

   position: relative;
   padding: 3rem;
}

.right-column {
   flex: 3.5;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   padding: 2rem;
   box-sizing: border-box;
}


.image-container {
   display: flex;
   justify-content: center;
   margin-top: 3rem;
   margin-bottom: 3rem;
}

img {
   max-width: 100%;
   height: auto;
}

.back-button {
   background-color: transparent;
   border: none;
   color: #fff;
   font-size: 2rem;
   margin: 1rem;
   position: absolute;
   top: 0;
   left: 0;
}

.rightContent {
   margin: auto;

}

.button-group {
   display: flex;
   justify-content: flex-end;
   margin-top: 2rem;
   align-self: flex-end;
}

.skip-button,
.next-button {
   cursor: pointer;
   margin-left: 1rem;

}


.skip-button:focus,
.next-button:focus {
   outline: none;
}

.screen {
   opacity: 0;
   transition: opacity 0.5s ease;
}

.rightContent h2 {
   font-weight: 600;
   margin-bottom: 1.6rem;
}

.rightContent h4 {
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 1.7;
}

.transform45.la-arrow-right {
   transform: rotate(-45deg);
   text-decoration: none;

}

ul.custom-list {
   list-style: disc;
   margin: 0;
   padding: 0;
}

/* ul.custom-list li::before {
   content: "\f111"; 
   font-family: "Font Awesome 5 Free";  
   font-weight: 600;
   margin-right: 10px;
   color: #fff;  
 } */
ul.custom-list .custom-list-item {
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 1.7;
   margin-bottom: 24px;
   /* Add spacing between list items */
}

.gif-container {
   position: relative;
   width: 100%;
   max-width: 800px;
   margin: 0 auto;
}

.gif-container img {
   position: relative;
   z-index: 1;
   width: 100%;
   height: auto;
}

.gif-container:before {
   content: "";
   background: url('../media/onboard/safari-browser-bg.png') center center no-repeat;
   background-size: cover;
   opacity: 0.5;
   /* Set the opacity of the background image */
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   /* Set the z-index to make sure the background image is behind the image */
}

@media (min-width: 1025px) {
   .screen {
      display: flex;
      flex-wrap: wrap;
      height: auto;
   }

   .left-column {
      flex: 1;
      order: 1;
      height: 100vh;
   }

   .right-column {
      flex: 1;
      order: 2;
      height: 100%;
   }
}

@media (min-width: 1024px) {
   .screen {
      height: calc(100vh - 8rem);
   }

   .left-column {
      height: 100%;
   }

   .right-column {
      height: 100%;
   }
}

@media (min-width: 1280px) {
   .rightContent {

      max-width: 560px;
   }

   .left-column {
      flex: 3;

   }

   .right-column {
      flex: 3.5;

   }
}

@media (min-width: 1025px) {
   .ls-login.ls-login--v1.step2-outer .ls-login__wrapper.step2-wrapper.phase4_wrapper {
      padding: 4rem 5.6rem;
   }
}

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

   /* Styles for mobile devices */
   .screen {
      flex-direction: column;
   }

   .left-column {
      flex: 1;
      order: 2;
   }

   .right-column {
      flex: 1;
      padding: 2rem;
      order: 1;
   }

   .image-container {
      margin-top: 2rem;
      margin-bottom: 2rem;
   }

   .button-group {
      justify-content: center;
   }

   .left-column {
      width: 100%;
   }

   .screen {
      height: calc(100vh - 2rem);
      max-width: 100%;
      overflow: inherit;
   }

   
   .left-column {
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;

   }
   .right-column {
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;

   }
}

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

   /* Styles for tablets */
   .left-column {

      flex: 1;

   }

   .right-column {
      flex: 2;
      padding: 2rem;
   }

   .image-container {
      margin-top: 2rem;
      margin-bottom: 2rem;
   }
}