.gradient-container {
display: flex;
width: 100%;
padding: 64px;
align-items: flex-start;
gap: 24px;
border-radius: 24px;
background: linear-gradient(180deg, #0072BC 0%, #06446C 100%);
  position:relative;
}
.gradient-container .content-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex-basis:60%;
  margin:0;
  color:#fff;
}

.content-left h2 {
  color: #fff !important;
}
.gradient-container .feature-list {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.gradient-container .feature-list .feature-point {
display: flex;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}

.feature-point img {
width: 51px;
height: 51px;
border-radius: 4px;
  flex-shrink:0;
}

.feature-point .content {
  display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

.content .heading {
  color: #FFF;
  align-self: stretch;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
  margin-left:0;
}

.content .heading2 {
  color: #fff !important;
}

.content .copy {
  font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.content-right {
bottom: 0;
  position: absolute;
  right: 0;
  display:flex;
  flex-basis:40%;
}


.cs-logo {
  max-width:200px;
  margin:0;
}

@media only screen and (max-width:768px) {
  .feature-point {
/*     flex-direction:column; */
  }
  .feature-point img {
    margin:0;
  }
  .gradient-container {
    padding: 64px 24px !important;
  }
  .gradient-container .content-left {
    margin-bottom:500px;
  }
}

@media only screen and (max-width:1024px) {
  .content-right {
/*     display:none; */
  }
  .content-left {
    flex-basis:40% !important;
}
}

@media only screen and (max-width:768px) { 
  .content-left {
    flex-basis:100% !important;
}
  .content-left a {
    display:none;
  }
  .content-left .cs-logo {
    text-align:center;
    width:100%;
  }
  .content-left h2 {
   text-align:center;
   width:100%;
}
  .cs-logo {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:auto;
  }

/***** Animations *****/

/* 
  Starts off hidden and slightly above its normal spot.
  Will slide down and fade in when we add the "visible" class.
*/
.animate-bottom {
  opacity: 0;
  transform: translate(0, -10vh);
  transition: all 1s;
}

/* 
  When this is added, the element fades in and moves to its normal position.
*/
.animate-bottom.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* 
  Starts off hidden and pushed to the left.
  Will slide in from the left and fade in when "visible" is added.
*/
.text-fadeIn {
  opacity: 0;
  transform: translate(-10vw, 0);
  transition: all 1s;
}

/* 
  Makes the text show up and move into place from the left.
*/
.text-fadeIn.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* 
  Starts off hidden and pushed to the right.
  Will slide in from the right and fade in when "visible" is added.
*/
.image-fadeIn {
  opacity: 0;
  transform: translate(10vw, 0);
  transition: all 1s;
}

/* 
  Makes the image show up and move into place from the right.
*/
.image-fadeIn.visible {
  opacity: 1;
  transform: translate(0, 0);
}