.sr-tabs-split-screen-01{position:relative;} 
.sr-tabs-split-screen-01 [data-image] {z-index:10;}
.gradient-ring {  position:sticky;  
    height: 942px;
    z-index: -1;
    top: 50px;
       left: 0;float:left;}
.gradient-ring:after{
        background-image: url(https://40821657.fs1.hubspotusercontent-na1.net/hubfs/40821657/Graphic%20Elements/Gradient-half-ring.svg);
    position: absolute;
  background-size:contain;
    background-repeat: no-repeat;
          content: "";
    left: 0;
    top: 0;
   width: 330px;
    height: 875px;
}

.sr-tabs-split-screen-01 .bg{border-radius:0; object-fit:contain!important;}
.sr-tabs-split-screen-01-image__overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.sr-tabs-split-screen-01-image__overlay.active::after {
  display: block;
}

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

  .sr-tabs-split-screen-01 .menu,
  .sr-tabs-split-screen-01 .sr-tabs-split-screen-01-image {
    display: none;
  }

  .sr-tabs-split-screen-01 .mobile-content {
    position: relative;
    padding: .75rem 1rem;
  }

  .sr-tabs-split-screen-01 .content-scroll__info {
    padding: 1rem;
  }

  .sr-tabs-split-screen-01 .sr-tabs-split-screen__title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 2rem;
  }

  .sr-tabs-split-screen-01 .sr-tabs-split-screen__title>* {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .sr-tabs-split-screen-01 .mobile-content {
    display: none;
  }

  .sr-tabs-split-screen-01 .sr-tabs-split-screen-01-image {
      display: flex;
        flex-basis: 50%;
       height: 50vh;        position: sticky;
       top: 25%;      left: 4%;
    }

  .sr-tabs-split-screen-01 .bg {
    height: 100%;
    object-fit: cover;
  }

  .sr-tabs-split-screen-01 .image-info {
    position: relative;
    width: 100%;
    z-index: 10;
  }

  .sr-tabs-split-screen-01 [data-image] {
    position: absolute;
    height: 100%;
    opacity: 0;
    transition: opacity 250ms ease;
  }

  .sr-tabs-split-screen-01 [data-image].active {
    opacity: 1;
  }

  .sr-tabs-split-screen-01 .content-scroll {
    display: flex;
    flex-basis: 50%;
    max-width: 50%;
    justify-content: center;
    align-items: center;
  }

  .sr-tabs-split-screen-01 [data-section] {
    height: 100vh;
		min-height: 650px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: clamp(6rem, 10vw, 12rem) clamp(3rem, 10vw, 3rem);
  }

  .sr-tabs-split-screen-01 .menu {
  /*  display: block;*/
      display: none;
    position: absolute;
    bottom: 6.25rem;
    right: 0;
    z-index: 10;
    padding: 0 0 0 15px;
    margin: 0;
  }

  .sr-tabs-split-screen-01 .menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    line-height: 3;
    list-style-type: none;
    cursor: pointer;
  }

  .sr-tabs-split-screen-01 .menu li::after {
    content: '';
    width: 6.25rem;
    height: 2px;
  }

  .sr-tabs-split-screen-01 .menu li.active::after {
    background-color: currentColor;
  }

  .sr-tabs-split-screen-01 .sr-tabs-split-screen__title {
    position: absolute;
    padding: clamp(6rem, 10vw, 12rem);
  }

  .sr-tabs-split-screen-01 .sr-tabs-split-screen__title.active {
    display: block;
  }
}


@media (max-width: 1024px) and (min-width: 767px) {
    .sr-tabs-split-screen-01 [data-section] {
 padding: clamp(2rem, 1vw, 12rem) !important;
    }
}

@media (min-width: 1700px) {.sr-tabs-split-screen-01 .bg{width:100%;}}

@media (min-width:700px) and (max-width: 1048px)  {
    .sr-tabs-split-screen-01 [data-image] {
        height: 70%;
        padding-right: 3rem;
    }
}

@media (min-width:700px) and (max-width: 1048px)  {
    .sr-tabs-split-screen-01 [data-image] {
        height: 70%;
        padding-right: 3rem;
    }
}

}
/* @media (min-width:821px) and (max-width: 1048px)  {
  .gradient-ring:after {
    left: -162%;
    top: 13%;
}
}
@media (min-width:700px) and (max-width: 820px)  {
  .gradient-ring:after {
          left: -131%;
        top: 6%;
}
}

@media (min-width:1480px) and (max-width: 1899px)  {
.gradient-ring:after {
    left: -252%;
    top: 13%;
}
} */
/* @media (min-width:1900px) and (max-width: 2040px)  {
.gradient-ring:after {
    left: -301%;
    top: 9%;
}
} */
/* @media (min-width:2041px) and (max-width: 2051px)  {
.gradient-ring:after {
    left: -320%;
    width: 543px;
  top:0;
  height:1440px;
  }} */
  @media (min-width: 2052px) and (max-width:2400)  {
/* .gradient-ring:after {
    left: -355%;
    width: 543px;
  top:0;
  height:1440px;
} */
}
  @media (min-width: 2401px) and (max-width:2560px)   {
/* .gradient-ring:after {
    left: -400%;
    width: 500px;
  top:3%;
  height:1326px;
} */
    
}
}

  @media (min-width: 2561px)  {
/* .gradient-ring:after {
    left: -400%;
    width: 500px;
  top:2%;
  height:1326px;
} */
    /*   .sr-tabs-split-screen-01 [data-section] {
        padding: 10rem 30rem 10rem 2rem;
    }
}*/
/* @media (min-width:1049px) and (max-width: 1240px)  {
  .gradient-ring:after {
        left: -182%;
    top: 0;
    width: 330px;
    height: 875px;
  }} */


@media (max-width: 767px) {
    .sr-tabs-split-screen-01 .mobile-content {
        padding: 0 1rem;
    }
  .gradient-ring,.gradient-ring:after{display:none !important;    visibility: hidden;}
}

[data-image] {
    opacity: 0; /* Make images invisible by default */
    transition: opacity 0.5s ease-in-out; /* Smooth fade effect over 0.5 seconds */
    position: absolute;
    display: block;
}

[data-image].active {
    opacity: 1; /* Fade in the active image */
    z-index: 1; /* Ensure the active image is above other content */
}
    
    @media (max-width: 550px) {
  .gradient-ring,.gradient-ring:after{display:none !important;    visibility: hidden;}
}