.two-col-feature {
    display: flex;
   flex-direction: row;
  flex-wrap: wrap;
}

.column-text{
   
   background-size: cover;
   /*background-position: 50% 50%;*/
   background-repeat: no-repeat;
   max-width: 100%;
   height: 100vh;
  overflow:hidden;
  flex: 50%;

  }

.column-image{
   background-size: cover;
   background-repeat: no-repeat;
   max-width: 100%;
   height: 50vh;
    overflow:hidden;
  flex: 50%;

  }

.two-col-feature.img-left {
    flex-direction: row-reverse;
}

.col {
  width: 50%;
  height: 688px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
 
  
  
}

.inner-col {
  width: 480px;
   font-family: 'Muli' !important;
}

.feature-text-heading { 
    font-style: normal;
    font-weight: 900;
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 32px;
    
}






.inner-col p {
  margin-bottom: 30px;
}

img {
  width: 100%;
  display: block;
  height: 688px;
}

.column-text.white_color {
    background-color: white;
    color: #000;
}



.column-text.black_color {
    background-color: black;
    background-image: none;
    color: #ffffff;
}

.column-text.red_color {
   
  background-color:rgba(236, 77, 51, 0.9);
    
  
  color: #ffffff;
}

  .feature-text-button:link,
      .feature-text-button:visited {
        font-size: 20px;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        padding: 10px 30px 10px 30px;
        border-radius: 50px;
        border: 0.2px solid #FFFFFF;
        font-family: 'Muli';
        font-weight: 700;
        transition: .2s;
        
      }
.feature-text-heading {
     font-size: 32px; 
  }

@media (max-width: 1200px) { 

  
  .inner-col p {
 
  font-size: 20px;
  line-height: 1.2;
  
}


}

@media (max-width: 1024px) { 
  .feature-text-heading {
     font-size: 24px; 
  }
  
  .inner-col p { 
      font-size: 20px;
  }
  
  .inner-col {
    margin-left: 50px;
    width: 400px;
  
}

}

@media (max-width: 816px) { 
 .col {
    flex: 100%;
    height: auto;
    margin: 20px 0 20px 0;
   padding-top:20px;
   padding-bottom:20px;
  }
  
  .feature-text-button:link,
      .feature-text-button:visited {
        padding: 10px 40px;
      }
  .column-image {
  height: 400px;
  }
}

@media (max-width: 415px) { 
  
    .feature-text-heading {
     font-size: 24px; 
  }
  
  .inner-col p { 
      font-size: 16px !important;
    
  }
  
    .inner-col {
   
    width: 320px;
    margin-left: 0px;
  
}
  .column-image {
  height: 400px;
  }

}


@media (max-width: 360px) { 
  
    .feature-text-heading {
     font-size: 20px; 
  }
  
  .inner-col p { 
      font-size: 16px !important;
    
  }
  
    .inner-col {
   
    width: 320px;
    margin-left: 0px;
  
}
  .column-image {
  height: 300px;
  }

}

/* play button */
.image-button-wrapper {
  position: relative;
}

.triangle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  
}

.triangle-button svg {
  width: 100%;
  height: 100%;

}

.image-button-wrapper {
   transition: transform 0.2s ease-in-out;
}
.column-image:hover .image-button-wrapper {
  opacity: 1;
  transform: scale(1.1);
}