.section-dual-media{
    min-height:600px; 
    padding-top:6em; 
    background: #eee;
}

.section-dual-media .container-dual-media{
  display: grid; 
  animation: animateBg 90s linear infinite; 
  background-image: linear-gradient(90deg,#642a30,#68364c,#bf355b,#6a5a61, #a93e5c); 
  background-size: 800% 100%;
}

.section-dual-media .row-dual-media{
  margin-left:0; 
  margin-right:0; 
  margin-top:0em; 
  align-self:center;
}

/***  Fonts Size *****/

.section-dual-media .h1-dual-media{
  color: white; 
  font-family: 'Raleway'; 
  font-weight: 500; 
  text-align: center;
  margin-bottom: 0;
  line-height: 1.5em;
}


@media only screen and (max-width: 1280px){
  .section-dual-media .h1-dual-media{
    font-size:3.5em;
  }
}

@media only screen and (max-width: 812px){
  .section-dual-media .h1-dual-media{
    font-size: 2.7em;
    line-height: 1.5em;
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media only screen and (max-width: 768px){
  .section-dual-media .h1-dual-media{
    font-size: 2.4em;
    line-height: 1.4em;
  }
}


@media only screen and (max-width: 420px){
  .section-dual-media .h1-dual-media{
    font-size: 2.4em;
    line-height: 1.4em;
  }
}

@media only screen and (max-width: 320px){
  .section-dual-media .h1-dual-media{
    font-size: 2.2em;
    line-height: 1.3em;    
  }
}

/*********************** Dual Media SVG *********************/

.section-dual-media .dual-media-svg {
  display: block;
  font: 9em 'Raleway';
  width: 80%;
  max-height: 200px;
  margin: 0 auto;
}


/*********************** Button Play *************************/

.section-dual-media .play-transparent {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  cursor: pointer;
  position: relative;
  display: block;
  margin-top: 1em;
  margin-bottom: 2em;
}

.section-dual-media .icon-Video-5 {
  opacity: 1;
  font-size: 4.5em;
  cursor: pointer;
  background: #ff6171;
  border-radius: 50%;
  color: white;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}


.section-dual-media .icon-Video-5:hover{
  background: white;
  color:#ff6171
}

/*** Formatting of block of text */

.section-dual-media .unmatched-media{
    padding-left:10%; 
    padding-right:10%; 
    text-align:center;
}

/*** Text section  ***/

.h2-dual-media{
  color:#2e2e2e;
  line-height: 1.8em; 
  font-family:Raleway; 
  color:white;
}

@media only screen and (max-width: 1280px){
  .h2-dual-media{
    font-size: 1.9em;
    line-height: 1.5em;
  }  
}

@media only screen and (max-width: 768px){
  .section-dual-media .h2-dual-media{
    font-size: 1.5em;
    line-height: 1.4em;
  }
}

@media only screen and (max-width: 420px){
  .section-dual-media .h2-dual-media{
    font-size: 1.4em;
    line-height: 1.4em;
  }
}

@media only screen and (max-width: 320px){
  .section-dual-media .h2-dual-media{
    font-size: 1.3em;
    line-height: 1.4em;
  }
}

.section-dual-media .replaces-apps{
  color: white; 
  text-align: center; 
  display: block; 
  font-size: 1.2em;
  padding-right: 10%;
  padding-left: 10%;
}

@media only screen and (max-width: 420px){
  .section-dual-media .replaces-apps{
    font-size:0.95em;
  }
}


@media only screen and (max-width: 320px){
  .section-dual-media .replaces-apps{
    font-size:0.85em;
  }
}

/******  H4 Formatting ***/

.section-dual-media .invisible-sub-title{
  visibility: hidden;
}

.section-dual-media .removed-sub-title{
  display: none !important;
}

.h4-first-section{
  color: #ffffff;
  text-align: center;
  margin-top: 1em;
  font-size: 1.6em;
}

@media only screen and (max-width: 768px){
  .section-dual-media .h4-first-section{
    font-size: 1.2em;
    line-height: 1.4em;
  }
}

@media only screen and (max-width: 420px){
  .h4-first-section{    
    font-size: 1em;     
    line-height: 1.6em;
    margin-top: 1.5em;
  }
}


@media only screen and (max-width: 320px){
  .h4-first-section{    
    font-size: 0.9em;     
    line-height: 1.6em;
    margin-top: 1.5em;
  }
}


/**** ANimation ANTS ************/


.section-dual-media .text-copy {
  fill: none;
  stroke: lavender;
  stroke-dasharray: 6% 29%;
  stroke-width: 3px;
  stroke-dashoffset: 0%;
  letter-spacing: double;
  animation: stroke-offset 5.5s infinite linear;
}

.section-dual-media .text-copy:nth-child(1){
stroke: #ff6171;
animation-delay: -1;
}

.section-dual-media .text-copy:nth-child(2){
stroke: #a3a3a3;
animation-delay: -2s;
}

.section-dual-media .text-copy:nth-child(3){
stroke: #bf3542;
animation-delay: -3s;
}

.section-dual-media .text-copy:nth-child(4){
stroke: #d75576;
animation-delay: -4s;
}

.section-dual-media .text-copy:nth-child(5){
stroke: #b9b9b9;
animation-delay: -5s;
}

@keyframes stroke-offset{
100% {stroke-dashoffset: -35%;}
}

.section-dual-media .sect.animated-gradient {
  animation: animateBg 90s linear infinite;
  background-image: linear-gradient(
  90deg,#ff6171,#6a5a61,#bf3555,#6a5a61, #ff6171);
  background-size: 800% 100%;
}