.content-with-scrolling-graphic{
    padding-left: 20px;
    padding-right: 20px;
}
.content-with-scrolling-graphic .swiper-wrapper{
    cursor: default !important;
}
@media(min-width: 1400px){
  .content-with-scrolling-graphic.graphic-right .content-with-scrolling-graphic-container-wrapper,
  .content-with-scrolling-graphic.graphic-right .content-with-scrolling-graphic-container{
    right: 0;
  }
  .content-with-scrolling-graphic.graphic-left .content-with-scrolling-graphic-container-wrapper,
  .content-with-scrolling-graphic.graphic-left .content-with-scrolling-graphic-container{
    left: 0
  }
  .content-with-scrolling-graphic.graphic-left .container{
    align-items: flex-end;
  }
   .content-with-scrolling-graphic .content-intro {
    width: 48%;
  }
  .content-with-scrolling-graphic.graphic-left .swiper-container {
    direction: rtl; 
  }
  .content-with-scrolling-graphic.graphic-left .swiper-slide {
    direction: ltr;  
  }
  .content-with-scrolling-graphic .container{
    padding: 0px 140px;
    border-radius: 48px;
    gap: 50px;
    max-width: 1720px;
    position: sticky;
    top: 200px;
    min-height: 700px !important;
  }
  .content-with-scrolling-graphic .swiper-container{
    padding-top: 82px;
    padding-bottom: 82px;
    position: relative;
    right: 0;
    top: -700px;
    margin-right: calc(100vw / 2 - 800px);
    max-width: 800px;
    margin-bottom: -700px;
    display: flex;
    margin-left: auto;
    justify-content: flex-end;
  }
  .content-with-scrolling-graphic .swiper-button-next,
  .content-with-scrolling-graphic .swiper-button-prev{
    display: none;  
  }
/*   .content-with-scrolling-graphic .content-with-scrolling-graphic-container-wrapper,
  .content-with-scrolling-graphic .content-with-scrolling-graphic-container{
    max-width: 556px; 
  } */
}

.content-with-scrolling-graphic.bg-full-width{
  padding-bottom: 0px !important; 
}
.content-with-scrolling-graphic .swiper-slide.swiper-slide-active{
  opacity: 100%; 
}
.content-with-scrolling-graphic .swiper-slide{
  opacity: 40%; 
}
.content-with-scrolling-graphic .swiper-slide img{
  filter: brightness(100) saturate(0);
}
.content-with-scrolling-graphic .swiper-slide.swiper-slide-active img{
  filter: unset;
}
.content-with-scrolling-graphic .content-intro{
  margin-top: 82px;
  margin-bottom: 82px;
  max-width: 653px;
}
.content-with-scrolling-graphic.bg-full-width .content-intro{
  margin-bottom: 169px; 
}
.content-with-scrolling-graphic .content-intro .description{
  font-family: Poppins;
  font-weight: 300;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0%;
}

.content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic{
  padding: 45px 33px 30px 33px;
  height: 100%;
  min-height: 267px;
  background: linear-gradient(112.83deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0) 110.84%);  
  backdrop-filter: blur(14px);
  border-radius: 30px;
  border: 1px solid #FFFFFFB3;
}
.content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic-individual {
  height: 267px !important;
}
.content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic .card-title{
  font-size: 92px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px; /* 65.217% */
  }
.content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic .graphic-container{
  margin-bottom: 28px;
  margin-left: auto;
  margin-right: auto;
  max-width: 130px;
}
@media(max-width: 1400px){
  .content-with-scrolling-graphic{
     background: linear-gradient(302.92deg, #000000 -3.47%, #36040C 39.79%, #720819 71.17%, #CE0E2D 115.92%);
  }
  .content-with-scrolling-graphic .container{
    background: unset;  
  }
}
@media(max-width: 1024px){
  .content-with-scrolling-graphic .container{
    padding-right: 0; 
  }
  .content-with-scrolling-graphic .container .content-intro{
    padding-right: 20px; 
  }
  
}
.content-with-scrolling-graphic .decription-after-button{
  margin-top: 30px;
}


.content-with-scrolling-graphic .swiper-wrapper{
    max-width: 556px;
  padding-right: 140px;
}
.content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic .card-title{
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 50px; /* 65.217% */
    }
@media screen and (min-width: 1024px){
  .content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic .card-title{
    font-size: 92px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px; /* 65.217% */
    }
}
.content-with-scrolling-graphic .swiper-button-prev, 
.content-with-scrolling-graphic .swiper-button-next{
  background-color: transparent;
}
.content-with-scrolling-graphic .swiper-button-prev:hover, 
.content-with-scrolling-graphic .swiper-button-next:hover{
  background-color: white;
}
.content-with-scrolling-graphic .swiper-button-prev::after, 
.content-with-scrolling-graphic .swiper-button-next::after{
  filter: brightness(0) saturate(100%) invert(95%) sepia(100%) saturate(0%) hue-rotate(180deg) brightness(106%) contrast(105%);
}
.content-with-scrolling-graphic .swiper-button-prev:hover::after, 
.content-with-scrolling-graphic .swiper-button-next:hover::after{
  filter: unset;
}
.content-with-scrolling-graphic .swiper-buttons{
  margin-top: 70px;  
}
@media screen and (max-width: 767px){
  .content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic-individual{
    width: 100% !important; 
  }
  .content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic-individual {
    height: unset !important;
  }
}
/* .content-with-scrolling-graphic .swiper-container {
  overflow: hidden; 
}

.content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic-individual.swiper-slide-active {
  opacity: 1;
  z-index: 2;
}

.content-with-scrolling-graphic .content-with-scrolling-graphic-container .graphic-individual.swiper-slide-active ~ .swiper-slide:nth-child(n+1):nth-child(-n+2) {
  opacity: 0.4;
  z-index: 1;
}

.content-with-scrolling-graphic .swiper-slide {
  opacity: 0.1; /* Lower opacity for non-active slides 
  transition: opacity 0.3s ease
} */

.scroll-bg-top{
  position: absolute;
  width: 100%;
  height: 100px;
  z-index: 10;
}
.scroll-bg-top-active{
  position: fixed !important;
  top: 100px !important;
}
.scroll-bg-bottom {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0px;
  z-index: 10;
}
.scroll-bg-bottom-active{
  position: fixed !important; 
}