.hero-area-inner {
     position: relative;
     z-index: 1;
     padding-top: 197px;
     padding-bottom: 94px
}

@media only screen and (max-width: 1919px) {
     .hero-area-inner {
          padding-top: 147px;
          padding-bottom: 44px
     }
}
@media only screen and (max-width: 800px) {

     .hero-area-inner {  padding-inline-end: 0px !important; }
}

.hero-area-inner .shape-1 {
     position: absolute;
     top: 200px;
     inset-inline-end: calc(100% + 133px);
     width: 132px;
     z-index: -1
}

.hero-area-inner .shape-2 {
     position: absolute;
     bottom: 0;
     inset-inline-start: calc(100% - 180px);
     width: 494px;
     z-index: -1
}

@media only screen and (max-width: 1919px) {
     .hero-area-inner .shape-2 {
          width: 314px
     }
}

@media only screen and (max-width: 767px) {
     .hero-area-inner .shape-2 {
          display: none
     }
}

.dir-rtl .hero-area-inner .shape-2 img {
     transform: rotateY(180deg)
}

.hero-area .section-subtitle {
     font-size: 20px;
     text-transform: uppercase;
     font-family: var(--font_plusjakartasans);
     color: var(--primary);
     font-weight: 500;
     display: inline-flex;
     gap: 15px;
     align-items: center
}

@media only screen and (max-width: 1199px) {
     .hero-area .section-subtitle {
          font-size: 16px
     }
}

@media only screen and (max-width: 1199px) {
     .hero-area .section-subtitle img {
          height: 10px
     }
}

.hero-area .section-title {
     font-size: 120px;
     line-height: .92;
     font-weight: 300
}

@media only screen and (max-width: 1919px) {
     .hero-area .section-title {
          font-size: 100px
     }
}

@media only screen and (max-width: 1199px) {
     .hero-area .section-title {
          font-size: 70px
     }
}

@media only screen and (max-width: 991px) {
     .hero-area .section-title {
          font-size: 50px
     }
}

@media only screen and (max-width: 767px) {
     .hero-area .section-title {
          font-size: 40px
     }
}

.hero-area .section-content {
     display: grid;
     gap: 30px 60px;
     grid-template-columns: auto 450px
}

@media only screen and (max-width: 991px) {
     .hero-area .section-content {
          grid-template-columns: auto 400px
     }
}

@media only screen and (max-width: 767px) {
     .hero-area .section-content {
          grid-template-columns: auto
     }
}

.hero-area .section-content .title-wrapper {
     margin-top: 33px
}

.hero-area .section-content .customer-box .text {
     line-height: 1.22;
     max-width: 193px;
     margin-top: 15px
}

.hero-area .section-content .customer-box .text span {
     color: var(--primary)
}

.hero-area .section-content .text-wrapper {
     margin-top: 59px
}

@media only screen and (max-width: 1919px) {
     .hero-area .section-content .text-wrapper {
          margin-top: 39px
     }
}

.hero-area .section-content .btn-wrapper {
     margin-top: 33px
}

.image-area {
     background-image: linear-gradient(180deg, #fff 0%, #fff 200px, var(--theme) 200px, var(--theme) 100%)
}

.dark .image-area {
     background-image: linear-gradient(180deg, var(--black) 0%, var(--black) 200px, #ed1c24 200px, #ed1c24 100%)
}

@media only screen and (max-width: 1919px) {
     .image-area {
          background-image: linear-gradient(180deg, #fff 0%, #fff 120px, var(--theme) 120px, var(--theme) 100%)
     }

     .dark .image-area {
          background-image: linear-gradient(180deg, var(--black) 0%, var(--black) 200px, #ed1c24 200px, #ed1c24 100%)
     }
}

@media only screen and (max-width: 767px) {
     .image-area {
          background-image: linear-gradient(180deg, #fff 0%, #fff 70px, var(--theme) 70px, var(--theme) 100%)
     }

     .dark .image-area {
          background-image: linear-gradient(180deg, var(--black) 0%, var(--black) 200px, #ed1c24 200px, #ed1c24 100%)
     }
}

.image-area .video-btn {
     width: 200px;
     height: 200px;
     background-color: var(--primary);
     color: var(--white);
     font-size: 30px;
     display: flex;
     justify-content: center;
     align-items: center
}

.dark .image-area .video-btn {
     color: var(--black)
}

@media only screen and (max-width: 1919px) {
     .image-area .video-btn {
          width: 120px;
          height: 120px;
          font-size: 20px
     }
}

@media only screen and (max-width: 767px) {
     .image-area .video-btn {
          width: 70px;
          height: 70px;
          font-size: 14px
     }
     .image-area .image-wrapper-box { margin-inline-end: 0; }
}

.image-area .image-wrapper-box {
     position: relative;
     /*margin-inline-end: calc((100vw + 24px - var(--container-max-widths))/-2)*/
     margin-inline-end: -10vw;
}

.image-area .video-button-box {
     position: absolute;
     top: 0;
     inset-inline-start: 0
}

.video-area {
     padding-top: 80px;
     padding-bottom: 73px;
     background-color: red
}

@media only screen and (max-width: 1919px) {
     .video-area {
          padding-top: 90px;
          padding-bottom: 83px
     }
}

.video-wrapper {
     display: grid;
     gap: 60px 60px;
     grid-template-columns: repeat(2, 600px);
     justify-content: space-between
}

@media only screen and (max-width: 1199px) {
     .video-wrapper {
          grid-template-columns: repeat(3, 240px)
     }
}

@media only screen and (max-width: 991px) {
     .video-wrapper {
          grid-template-columns: repeat(2, 310px)
     }
}

@media only screen and (max-width: 767px) {
     .video-wrapper {
          grid-template-columns: repeat(1, 1fr)
     }
}

.video-box .title {
     font-size: 26px;
     line-height: 1.1;
     color: var(--white);
     letter-spacing: 1px;
}

.video-box .title span {
     font-weight: 700
}

.video-box .content {
     margin-top: 0px
}

@media only screen and (max-width: 767px) {
     .video-box .content {
          margin-top: 0px
     }
}

.video-box .text {
     color: var(--white);
     margin-top: 28px
}

@media only screen and (max-width: 1919px) {
     .video-box .text {
          margin-top: 18px
     }
}