.gif-banner {
  position: relative;
  height: clamp(360px, 45vw, 600px);
  overflow: hidden;
  margin-bottom: 56px;
}

.text-content {
  width: 35%;
  z-index: 2;
  position: relative;
}

/* RTL/LTR Support - Text Content Position */

.gif-banner .gif-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  height: 100%;
  right: 43%;
}

/* RTL/LTR Support */
body.ltr .gif-banner .gif-video {
  left: 43%;
  right: auto;
}

body.rtl .gif-banner .gif-video {
  right: 43%;
  left: auto;
}

/* RTL/LTR Support - Flip Layout */
body.ltr .gif-banner .right_section {
  clip-path: polygon(0 0, 45% 0, 25% 100%, 0% 100%);
  left: 0;
  right: auto;
}

body.rtl .gif-banner .right_section {
  clip-path: polygon(55% 0, 100% 0%, 100% 100%, 75% 100%);
  right: 0;
}

body.ltr .gif-banner .left_section {
  clip-path: polygon(75% 0, 100% 0, 100% 100%, 61% 100%);
  right: 0;
  left: auto;
}

body.rtl .gif-banner .left_section {
  clip-path: polygon(0 0, 0% 100%, 39% 100%);
  left: 0;
  right: auto;
}

.text-content {
  max-width: 35%;
}

.gif-banner img,
.gif-banner video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}


.gif-banner .main_title {
  font-weight: 800;
  line-height: normal;
  margin-bottom: 0px;
  text-align: center;
  color: var(--title-color);
  font-size: clamp(12px,2.5vw, 35px);
}

/* RTL/LTR Support */
body.ltr .gif-banner .main_title {
  text-align: left;
}

body.rtl .gif-banner .main_title {
  text-align: right;
}

.gif-banner .des {
  font-size: clamp(10px,2.5vw, 28px);
  font-weight: 500;
  line-height: normal;
  text-align: center;
  margin-bottom: 16px;
  color: var(--desc-color);
}

/* RTL/LTR Support */
body.ltr .gif-banner .des {
  text-align: center;
}
body.ltr .gif-banner .main_title{
  text-align: center;
}

.gif-banner .btn_sub {
  font-size: clamp(10px, 2.5vw, 18px);
  font-weight: 400;
  line-height: normal;
  padding: 8px 25px;
  text-align: center;
  color: var(--btn-color);
  background-color: var(--btn-bg);
  box-shadow: 2px 2px var(--btn-border);
}

.gif-banner .main_section {
  gap: 30px;
  padding-inline: 0;
}

.gif-banner .right_section {
  position: absolute;
  inset: 0;
  clip-path: polygon(55% 0, 100% 0%, 100% 100%, 75% 100%);
  z-index: 1;
  background-color: var(--right-bg);
}

.gif-banner .left_section {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  clip-path: polygon(0 0, 0% 100%, 39% 100%);
  z-index: 1;
  background-color: var(--left-bg);
}

@media (min-width: 768px) {
  .gif-banner .right_section {
    clip-path: polygon(56% 0, 100% 0%, 100% 100%, 68% 100%);
  }

  .gif-banner .gif-video {
    width: 30%;
  }

  .gif-banner .main_title {
    font-size: clamp(14px, 2.5vw, 30px);
  }

  .gif-banner .des {
    font-size: clamp(14px, 2.5vw, 28px);
    line-height: normal;
    margin-bottom: 32px;
  }

  .gif-banner .btn_sub {
    line-height: normal;
    padding: 16px 65px;
  }

}
@media (max-width:550px) {
  .gif-video {
    right: 25%;
  }
  
  /* RTL/LTR Support */
  body.ltr .gif-video {
    left: 25%;
    right: auto;
  }
  
  body.rtl .gif-video {
    right: 25%;
    left: auto;
  }
  
  .text-content{
    margin-inline-start:0;
  }
  
  .gif-banner .gif-video{
    right: 28%;
  }
  
  /* RTL/LTR Support */
  body.ltr .gif-banner .gif-video{
    left: 28%;
    right: auto;
  }
  
  body.rtl .gif-banner .gif-video{
    right: 28%;
    left: auto;
  }
}