.use-case-bottom-section{
  position:relative;
  z-index:1;
}
.use-case-top-section {
   position:relative;
    z-index: 99;
}
#use-case2 .first-imge {
    transform: translate(-50%,-3%);
    
}
#use-case3 .first-imge {
    transform: translate(-50%,-28%);
 }
#use-case4 .first-imge {
    transform: translate(-50%,-0%);
 }
#use-case5 .first-imge {
    transform: translate(-50%,-28%);
 }
#use-case6 .first-imge {
    transform: translate(-50%,-3%);
 }

#use-case1 {
    position: relative;
    padding-top: 120px;
}
#use-case2 {
    position: relative;
    z-index: 1;
}
#use-case1:after {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(https://7543628.fs1.hubspotusercontent-na1.net/hubfs/7543628/analytics-creator-images/solution-page-banner-shap.png) center center;
    content: '';
    width: 100%;
    height: 220px;
}
/* use case banner section start */
section.use-case-banner-section {
    padding:60px 0px;
    display:flex;
    justify-content:center;
    align-items:center;
}
section.use-case-banner-section h1{
font-weight: 600;
font-size: 30px;
line-height: 37px;
display: flex;
align-items: center;
text-align: center;
text-transform: uppercase;
color: #464646;
    margin: 0 auto 25px;
  max-width:80%;
  
}
/* .redirection-section {
    text-align: center;
} */
.redirection-section .redirect-link{
    display:block;
    font-weight: 500;
font-size: 24px;
line-height: 29px;
color: #464646;
    margin-bottom:20px;
      display: inline-flex;
    align-items: flex-start;
        width: 100%;
}
.redirection-section .redirect-link:hover{
  text-decoration:underline;
  color:#5664D2;
}
span.link-icon-image {
    vertical-align: top;
    margin: 5px 10px 0px 0;
    display: inline-block;
      width: 100%;
    max-width: 30px;
  height:20px;
}
span.link-icon-image  img{
    object-fit:cover;
    max-width:100%;
  display:block;
}

/* use case banner section end */
/* use-case section */
.use-case-section{
    background-color:#045E7A;
    padding: 0px 0px;
    color:#fff;
}
.use-case-section:first-child{
  padding-top:40px;
}
.use-case-section:last-child{
  padding-bottom:40px;
}
h2.use-case-heading {
font-weight: 700;
font-size: 30px;
line-height: 37px;
text-transform: uppercase;
color: #FFFFFF;
  margin-bottom:45px;
}
.use-case-top-section .use-case-content{
    display:flex;
    align-items:center;
}
.use-case-top-section .use-case-content .content-side{
    flex:1 1 60%;
    max-width:60%;
}
.use-case-top-section .use-case-content .image-side{
    flex:1 1 40%;
    max-width:40%;
}
.use-case-top-section .use-case-content .image-side img{
    max-width:100%;
    display:block;
}
.sub-paragraph{
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #FFFFFF;
  padding:0 15px;
}
.sub-title{
    text-transform:uppercase;
    position:relative;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: #FFFFFF;
    padding:10px 15px;
    z-index:1;
   
}
#sub-title-1:after{
  background: linear-gradient(90deg,#18bbee,rgba(24,187,238,0) 106.96%);
    border-radius: 30px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    content: "";
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
   max-width: 124%;
   width: 124%;
    z-index: -1; 
}
#sub-title-1:before {
  border-radius: 50%;
    content: "";
    height: 14px;
    position: absolute;
    top: -10px;
    width: 14px;
    left: 33%;
    background: rgba(24, 187, 238, 0.31);
}
.use-case-section:nth-child(2n) #sub-title-1:before {
    width: 14px;
    height: 14px;
    position: absolute;
    content: '';
    border-radius: 50%;
    background: linear-gradient(90deg,#18bbee,rgba(24,187,238,0) 106.96%);
    left: -15px;
    top: -10px;
}
#sub-title-2:after{
    position:absolute;
    content:'';
    width:332px;
    height:100%;
  background: linear-gradient(90.86deg, #5E0891 2.98%, rgba(94, 8, 145, 0) 129.67%);
border-radius: 30px;
    top:0;
    left:0%;
    z-index:-1;
}
#sub-title-2 span{
    position:absolute;
}
#sub-title-2 .circle1,#sub-title-2 .circle2,#sub-title-2 .circle3{
    border-radius:50%;
    background: #5E0891;
}
#sub-title-2 .circle1{
    top:0;
    width:6px;
    height:6px;
    left: 42%;
}
#sub-title-2 .circle2{
    bottom: -10px;
    width:6px;
    height:6px;
    left: 5px;
}
#sub-title-2 .circle3{
    width:14px;
    height:14px;
    bottom: -15px;
    left: -15px;
}
/*  */
/* benefits section */
  .use-case-bottom-section h2{
    text-align:center;
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #FFFFFF;
    margin:50px 0px 20px;
}

.bottom-section-box-wrapper {
    display:flex;
    justify-content:center;
    gap:5px;
    flex-wrap:wrap;
}

.bottom-section-box-wrapper .box{
    align-items: center;
    border-radius: 40px;
    display: flex;
    flex: 1 1 25%;
    flex-direction: column;
    justify-content: center;
    max-height: 152px;
    max-width: 24%;
    padding: 24px 10px 20px;
  position: relative;
}
.box:before {
    content: "";
    position: absolute;
    background: linear-gradient(102.82deg, rgba(19, 120, 152, 0.54) 21.92%, rgba(109, 224, 246, 0.21) 122.65%);
    opacity: 0.5;
    backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
    width: 100%;
    height: 100%;
    border-radius: 40px;
    right: 0;
    top: 0;
}
.bottom-section-box-wrapper .actions {
    flex:1 1 100%;
    max-width:100%;
    text-align: center;
    margin: 30px 0px;
}
.bottom-section-box-wrapper .actions a{
    display:inline-block;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: #10B8ED;
    border-radius: 40px;
    padding:18px 40px;
    width:45%;
}
.bottom-section-box-wrapper .box .icon-container{
    width:24px;
    margin:0 auto 20px;
    position: relative;
    z-index: 9999;
}
.bottom-section-box-wrapper .box .icon-container img{
    max-width:100%;
    object-fit:cover;
    position: relative;
    z-index: 9999;
}
.box-title,
.box-description{
font-weight: 500;
font-size: 16px;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
    margin:0 0 10px;
    position: relative;
    z-index: 9999;
}
.box-description{
font-weight: 400;
opacity: 0.7;
}
/* benefits section end */
/* css for even modules */
section.use-case-sections-wrapper {
    overflow: hidden;
}
.use-case-section:nth-child(even) .use-case-top-section .use-case-content{
    flex-direction:row-reverse;
}

.use-case-section:nth-child(even) .use-case-top-section .use-case-content .image-side,
.use-case-section:nth-child(even) .use-case-top-section .use-case-content .content-side{
    flex:1 1 50%;
    max-width:50%;
    padding:0 20px;
    margin:auto;
}
.use-case-section:nth-child(even) #sub-title-1:after {
    width: 500%;
    border-radius: 30px;
/*     background: linear-gradient(90deg,#18bbee,rgba(24,187,238,0) 106.96%); */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    //left:0;
   // max-width: 100%;
    background: linear-gradient(90.06deg, #18BBEE 11.81%, rgba(24, 187, 238, 0) 110.61%);
   right: -90%;
    max-width: 190%;
    width: 190%;
    left: initial;
}

/* css for even modules end */
#use-case1 .container {
  z-index:9;
  position:relative;
}
#use-case1{
  position:relative;
}
.first-imge {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-13%);
    width: 100%;
}
.first-imge img{
    max-width: 100%;
    height: auto;
    width: 100%;
}
.second-imge {
  position: absolute;
    height: 460px;
    bottom: -140px;
}
.second-imge img {
width:100%;
}
.use-case-bottom-section h2:before {
/*     background-image: url(https://www.analyticscreator.com/hs-fs/hubfs/analytics-creator-images/shape-solution.png); */
    background-size: 100% 100%;
/*     background-position: 28% 9%; */
    background-repeat: no-repeat;
    position: absolute;
    content: "";
    top: -55%;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
}
.use-case-section:nth-child(odd) .use-case-bottom-section h2:before {
    background-image: url(https://www.analyticscreator.com/hs-fs/hubfs/analytics-creator-images/shape-solution.png);
}

.use-case-section:nth-child(even) .use-case-bottom-section h2:before {
  top: -38%;
    min-height: 240px;
    background-image: url(https://7543628.fs1.hubspotusercontent-na1.net/hubfs/7543628/analytics-creator-images/Benefits_bg.png);
}
.use-case-bottom-section h2 {
    position: relative;
    margin: 0;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.use-case-bottom-section h2 span {
    position: relative;
}





/* new css */
@media(min-width:768px){
  
  .bottom-section-box-wrapper .actions a {
    font-size: 11px;
}
  .redirection-section{
       display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

  }
   .redirection-section .redirect-link {
    align-items: flex-start;
    display: inline-flex;
        width: 100%;
    text-align: left;
    flex: 1 1 100%;
    max-width: 100%;
  }
    span.link-icon-image {
      display: inline-block;
      height: 20px;
      margin: 5px 10px 0 0;
      vertical-align: top;
          width: 100%;
      max-width: 30px;
  }
}

/*  */
@media(max-width:767px){
  .content-side, .sub-paragraph {
      padding: 0 !important;
  }
  .use-case-section:nth-child(odd) .use-case-bottom-section h2{
    min-height: 80px;
  }
  .use-case-section:nth-child(odd) .use-case-bottom-section h2:before {
    background-image: url(https://7543628.fs1.hubspotusercontent-na1.net/hubfs/7543628/analytics-creator-images/Benefits-odd.png);
}
.use-case-section:nth-child(even) .use-case-bottom-section h2:before {
  top: -7%;
  min-height: 80px;
    background-image: url(https://7543628.fs1.hubspotusercontent-na1.net/hubfs/7543628/beenfits-shape-even.svg);
}
  .use-case-section:nth-child(odd) .use-case-bottom-section h2:before{
  background-image: url(https://7543628.fs1.hubspotusercontent-na1.net/hubfs/7543628/benefits-shape-mobile.svg);
    top:-60%; 
    background-size: cover;

}
  #sub-title-1:after, #sub-title-2:after {
      max-width: 100%;
    width: 50%;
    left: -15px;
  }
  h3#sub-title-2 {
      text-align: left !important;
      padding-left: 20px !important;
      margin: 10px 0 25px 15px;
  }
  #sub-title-1:before {
      left: unset;
      right: 10%;
  }
  .use-case-section:nth-child(2n) #sub-title-1:before {
      left: 25%;
      top: -15px;
  }
  .use-case-section:nth-child(2n) #sub-title-1:after {
      right: -30%;
      //left: unset;
    width: 100%;
  }
  .use-case-section:nth-child(2n) h3.sub-title {
      text-align: center;
  }
  .img-container img {
      max-width: 300px !important;
  }
  .box-description, .box-title {
      font-size: 14px;
      line-height: 18px;
  }
  .redirection-section .redirect-link {
      font-size: 18px;
      line-height: 25px;
      margin-bottom: 10px;
  }
  section.use-case-banner-section .mt-5 {
      margin-top: 20px !important;
  }
  span.link-icon-image {
         margin: 3px 15px 0 0;
    max-width: 17px;
  }
  div#use-case1 {
      padding-top: 70px;
  }
  h2.use-case-heading {
      font-size: 22px;
      line-height: 29px;
      margin-bottom: 15px;
  }
  section.use-case-banner-section h1 {
      margin: 0;
      display: block;
      width: 100%;
      max-width: 100%;
    font-size: 18px;
    line-height: 30px;
  }
    .use-case-content {
        flex-direction:column-reverse !Important;
        flex-wrap:wrap;
        gap:30px;
    }
    .use-case-top-section .use-case-content .content-side,
    .use-case-top-section .use-case-content .image-side{
        flex:1 1 100% !Important;
        max-width:100% !Important;
    }
    .bottom-section-box-wrapper{
        flex-wrap:
        wrap;
        gap: 10px;
    }
    .bottom-section-box-wrapper .box{
        flex: 1 1 48%;
        max-width: 50%;
    }
   .sub-paragraph,
  .sub-title,
  .use-case-bottom-section h2 span{
   font-size:12px;
}
  .sub-title{
    padding:8px 15px;
  }
  h2.use-case-heading{
   font-size:12px;
   line-height:15px;
}
    .bottom-section-box-wrapper .actions a{
        width:100%;
      padding: 12px 15px;
      font-size:10px;
    }
  .box-description, .box-title {
    font-size: 10px;
  }
  .image-side .img-container img {
    width: 100%;
}
}
@media(max-width:420px){
  .use-case-section {
      padding: 20px 0;
  }
  .use-case-section:nth-child(2n) .bottom-section-box-wrapper {
      position: relative;
      margin-top: -10%;
  }
  .img-container img {
      max-width: 250px!important;
  } 
  .bottom-section-box-wrapper .box {
/*       flex: 1 1 100%; */
      max-width: 100%;
    padding: 15px 7px;
  }
  .box-description, .box-title {
    font-size: 10px;
  }
  .bottom-section-box-wrapper .box .icon-container {
    margin: 0 auto 15px;
  }
}
/*  */
span.top-white-strip img,
span.bottom-white-strip img{
    display:block;
    margin:auto;
    width:100%;
    object-fit:contain;
}


/*  */