/* before-after-sec */

.before-after-sec {padding: 74px 0;}
.before-after-sec .step__item {display: flex; align-items: center; justify-content: space-between; gap: 4.4rem; display: grid; grid-template-columns: 1fr 1.321fr; position: relative;}
.before-after-sec .step__image {width: 100%;}
.before-after-sec .step__image .step__videos {position: relative; width: 100%; display: flex; left: 0; top: 0; right: 0;}
.before-after-sec .step__image .step__videos .step__video-item {position: relative; border-radius: 16px; overflow: hidden; width: 100%; height: 100%;} 
.before-after-sec .step__image .step__videos .step__video-item::before {display: block; content: ''; padding: 100% 0 0;}
.before-after-sec .step__image .step__videos .step__video-item iframe,
.before-after-sec .step__image .step__videos .step__video-item video {width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; left: 0; top: 0;}
.before-after-sec .step__item .step__content {position: relative;}
.before-after-sec .step__item .step__content h2 {font-family: 'Inter'; font-weight: 500; font-size: 36px; line-height: 100%; color: #FFFFFF; margin-bottom: 24px;}
.before-after-sec .step__item .step__content h3 {font-family: 'Inter'; font-weight: 400; font-size: 20px; line-height: 28px; color: #A1A1AB;}
.before-after-sec .step__item.step__item--reverse {grid-template-columns:  1.321fr 1fr;}
.before-after-sec .step__item.step__item--reverse .step__content {order: 1;}
.before-after-sec .step__item.step__item--reverse .step__image {order: 2;}
.video-mobile-text {display: none;}

@media (max-width: 1399px) {
  .before-after-sec .step__item {grid-template-columns: 1fr 1fr; gap: 3rem;}
  .before-after-sec .step__item .step__content h2 {font-size: 28px; line-height: 35px; margin-bottom: 12px;}
  .before-after-sec .step__item .step__content h3{font-size: 18px;}
  .before-after-sec .step__image .step__videos .step__video-item::before {padding-top: 100%;}
  .before-after-sec .step__item.step__item--reverse {grid-template-columns: 1fr 1fr; gap: 3rem;}
}

@media (max-width: 1199px) {
  .before-after-sec {padding: 44px 0;}
  .before-after-sec .step__item {grid-template-columns: 1fr 1fr; gap: 2rem;}
  .before-after-sec .step__item .step__content h2 {font-size: 28px; line-height: 35px; margin-bottom: 12px;}
  .before-after-sec .step__item .step__content h3 {font-size: 16px;}
  .before-after-sec .step__image .step__videos .step__video-item::before {padding-top: 100%;}
  .before-after-sec .step__item.step__item--reverse {grid-template-columns: 1fr 1fr; gap: 2rem;}
}

@media (max-width: 991px) {
  .before-after-sec {padding: 34px 0;}
  .before-after-sec .step__item {grid-template-columns: 1fr 1fr; gap: 2rem;}
  .before-after-sec .step__item .step__content h2 {font-size: 26px; line-height: 33px; margin-bottom: 12px;}
  .before-after-sec .step__item .step__content h3 {font-size: 16px;}
  .before-after-sec .step__image .step__videos .step__video-item::before {padding-top: 100%;}
  .before-after-sec .step__item.step__item--reverse {grid-template-columns: 1fr 1fr; gap: 2rem;}
}

@media (max-width: 767px) {
  .before-after-sec {padding: 24px 0;}
  .before-after-sec .step__item {grid-template-columns: 1fr; gap: 2rem;}
  .before-after-sec .step__item .step__content h2 {font-size: 26px; line-height: 33px; margin-bottom: 12px;}
  .before-after-sec .step__item .step__content h3 {font-size: 16px;}
  .before-after-sec .step__image .step__videos .step__video-item::before {padding-top: 100%;}
  .before-after-sec .step__item.step__item--reverse {grid-template-columns: 1fr; gap: 2rem;}
  .before-after-sec .step__item.step__item--reverse .step__image {order: 1;}
  .before-after-sec .step__item.step__item--reverse .step__content {order: 2;}
  .video-mobile-text {display: block; margin-bottom: 20px;}
  .video-mobile-text h2 {font-size: 26px; line-height: 33px; margin-bottom: 12px;}
  .before-after-sec .step__item .step__content h2 {display: none;}

}

/* before-after-sec */