body {
  color: #ffffff;
}
ul {
  list-style-type: disc;
}
.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 5vw;
  border-radius: 50%;
  width: 12vw;
  height: 12vw;
  cursor: pointer;
  z-index: 10;
}
label {
  display: block;
}
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.play-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.vertical-line {
           
  background-color: #ffffff;
  display: inline-block;    
  margin:  0px;          
  opacity: 0.9; 
  background: linear-gradient(
    to bottom, 
    rgba(255, 255, 255, 0) 0%,     
    rgba(255, 255, 255, 0.5) 15%,  
    rgb(255, 255, 255) 50%,      
    rgba(255, 255, 255, 0.5) 85%,
    rgba(255, 255, 255, 0) 100%   
  );
  margin-top: 100px;
}
.sectextvideo li
{
  margin-right: -15px;
  color: #FFF;
}
.subvideo
{
  margin-bottom: -100px;
}
@media screen and (min-width: 601px) {
  .play-btn {
    width: 80px;
    height: 80px;
    font-size: 48px;
  }
  .small
  {
    display: none;
  }
  .video-container {
    width: 1178.5px;
    height: 649px;
    }
  .vertical-line {
    height: 190px; 
    width: 2px;
  }
  .secsvg svg
  {
    display: none;
  }
  .sectextvideo
  {
    margin-right: -60px;
  }
  .breadcrumb a 
  {
    text-decoration: none;
    color: #FFFFFF80;
    margin-top: 20px;
    margin-right: 80px;
    margin-left: 10px;
    font-size: 14px;
  }
  .breadcrumb p
  {
    color: #ffffff;
    margin-top: 20px;
    margin-right: 20px;
    font-size: 14px;
  }
  .card
  {
    width: 1180px;
    height: 650px;
    margin: 100px 0px;
    margin-right: 160px;
    border: #FFFFFF80 solid 1px !important;
  }
  .text-section h3
  {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 50px;
  }
  .text-section p ,.text-section li
  {
    font-size: 24px;
    text-align: justify;
  }
  .subvideo p ,.subvideo li,.subvideo h5
  {
    font-size: 20px;
    text-align: justify;
  }
  .playvideo .card
  {
    width: 250px;
    height: 140px;
    margin: 120px 0px;
  }
  .playvideo .video-container
  {
    width: 248.5px;
    height: 139px;
  }
  .textvideo
  {
    margin-right: -20px;
  }
}
@media screen and (max-width: 600px) {

  .secvideo
  {
    margin-bottom: 10%;
  }
  .play-btn
  {
    width: 40px !important;
    height: 40px !important;
  }
  .video-section .video-container {
    width: 268.5px;
    height: 150px;
    }      
  .card
  {
    width: 270px;
    height: 152px;
    margin: 50px 105px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 131.5px;
    height: 73.5px;
    }
  .playvideo .card
  {
    width: 133px;
    height: 75px;
    margin: 109px 0px;
  }
  .vertical-line {
    margin-right: 55px;
  }
  .sectextvideo
  {
    padding-right: 55px;

  }
  .subvideo
  {
    margin-bottom: -200px;
  }
  .secvideo
  {
    margin-top: -70px;
  }
  .big
  {
    display: none;
  }
    .play-btn {
    width: 50px;
    height: 50px;
    font-size: 15px;
  }
  .video-container {
    width: 133px;
    height: 75px;
    }  
  .textvideo
  {
    margin-right: 10px;
  }
  .playvideo
  {
    margin-right: -13px;
  }

  .fistsvg svg
  {
    display: none;
  }
  .vertical-line {
    height: 75px; 
    width: 2px;
    margin-top: 110px;
  }
  .breadcrumb a 
  {
    text-decoration: none;
    color: #FFFFFF80;
    margin-top: 23px;
    margin-right: 25px;
    margin-left: 5px;
    font-size: 8px;
  }
  .breadcrumb svg
  {
   width: 6px;
  }
  .breadcrumb p
  {
    color: #ffffff;
    margin-top: 23px;
    margin-right: 13px;
    font-size: 8px;
  }
  .text-section h3
  {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .text-section p ,.text-section li
  {
    font-size: 12px;
    text-align: justify;
  }
  .text-section .textsmall 
  {
    margin-top: -20px;
  }
  .text-section li
  {
    margin-right: -15px;
  }
    .subvideo p ,.subvideo li,.subvideo h5
  {
    font-size: 10px;
  }
  .sectextvideo .small
  {
    margin-bottom:5px;
  }
  .sectextvideo li
  {
    margin-right: -20px;
  }
}
/*iPhone SE*/
@media screen and (min-width: 374px) and (max-width: 376px)
{
    .video-section .video-container {
    width: 268.5px;
    height: 150px;
    }      
  .card
  {
    width: 270px;
    height: 152px;
    margin: 40px 50px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 131.5px;
    height: 73.5px;
    }
  .playvideo .card
  {
    width: 133px;
    height: 75px;
  }
  .vertical-line {
    margin-right: 50px;
  }
  .sectextvideo
  {
    padding-right: 50px;
  }
}
/*iPhone XR*/
@media screen and (min-width: 411px) and (max-width: 416px)
{
    .video-section .video-container {
    width: 298px;
    height: 161px;
    }      
  .card
  {
    width: 300px;
    height: 162px;
    margin: 50px 55px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 131.5px;
    height: 73.5px;
    }
  .playvideo .card
  {
    width: 133px;
    height: 75px;
  }
  .vertical-line {
    margin-right: 50px;
  }
  .sectextvideo
  {
    padding-right: 50px;
  }
}
/*iPhone 12 pro*/
@media screen and (min-width: 389px) and (max-width: 392px)
{
    .video-section .video-container {
    width: 278px;
    height: 150px;
    }      
  .card
  {
    width: 280px;
    height: 152px;
    margin: 50px 54px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 131.5px;
    height: 73.5px;
    }
  .playvideo .card
  {
    width: 133px;
    height: 75px;
  }
  .vertical-line {
    margin-right: 50px;
  }
  .sectextvideo
  {
    padding-right: 50px;
  }
}
/*iPhone14 promax*/
@media screen and (min-width: 429px) and (max-width: 432px)
{
    .video-section .video-container {
    width: 318px;
    height: 181px;
    }      
  .card
  {
    width: 320px;
    height: 182px;
    margin: 50px 53px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 131.5px;
    height: 73.5px;
    }
  .playvideo .card
  {
    width: 133px;
    height: 75px;
  }
  .vertical-line {
    margin-right: 50px;
  }
  .sectextvideo
  {
    padding-right: 50px;
  }
}
/*Samsung Galaxy S8+*/
@media screen and (min-width: 358px) and (max-width: 362px)
{
    .video-section .video-container {
    width: 268.5px;
    height: 150px;
    }      
  .card
  {
    width: 270px;
    height: 152px;
    margin: 50px 42px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 131.5px;
    height: 73.5px;
    }
  .playvideo .card
  {
    width: 133px;
    height: 75px;
  }
  .vertical-line {
    margin-right: 50px;
  }
  .sectextvideo
  {
    padding-right: 50px;
  }
}
/*iPad Mini*/
@media screen and (min-width: 767px) and (max-width: 819px)
{
  .big
  {
    display: none;
  }
  .small
  {
    display: block;
  }
    .fistsvg svg
    {
        width: 700px;
        height: 100px;
    }
    .subvideo .play-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
    .video-section .video-container {
    width: 568.5px;
    height: 350px;
    }      
  .card
  {
    width: 570px;
    height: 352px;
    margin: 110px 95px;
    border: #FFFFFF80 solid 1px !important;
  }
  .breadcrumb a 
  {
    margin-right: 15px;
    margin-left: 5px;
  }
  .breadcrumb p
  {
    margin-top: 23px;
    margin-right: 10px;
  }
    .playvideo  .video-container {
    width: 181.2px;
    height: 134.5px;
    }
  .playvideo .card
  {
    width: 182.4px;
    height: 136px;
    margin: 120px 0px;
  }
  .vertical-line {
    height: 145px;
    margin-right: 50px;
    margin-top: 120px;
  }
  .sectextvideo
  {
    padding-right: 80px;
  }
  .subvideo
  {
    margin-bottom: -170px;
  }
  .secvideo
  {
    margin-top: -50px;
  }
}
/*iPad Air*/
@media screen and (min-width: 800px) and (max-width: 860px)
{
  .big
  {
    display: none;
  }
  .small
  {
    display: block;
  }
  .subvideo
  {
    margin-bottom: -170px;
  }
  .secvideo
  {
    margin-top: -50px;
  }
    .fistsvg svg
    {
        width: 700px;
        height: 100px;
    }
    .subvideo .play-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
    .video-section .video-container {
    width: 668.5px;
    height: 350px;
    }      
  .card
  {
    width: 670px;
    height: 352px;
    margin: 110px 73px;
    border: #FFFFFF80 solid 1px !important;
  }
  .breadcrumb a 
  {
    margin-right: 15px;
    margin-left: 5px;
  }
  .breadcrumb p
  {
    margin-top: 23px;
    margin-right: 10px;
  }
    .playvideo  .video-container {
    width: 171.5px;
    height: 134.5px;
    }
  .playvideo .card
  {
    width: 173px;
    height: 136px;
    margin: 120px 0px;
  }
  .vertical-line {
    margin-right: 50px;
    height: 145px;
    margin-top: 110px;
  }
  .sectextvideo
  {
    padding-right: 80px;
  }
}
/*iPad Pro*/
@media screen and (min-width: 1023px) and (max-width: 1026px)
{
    .fistsvg svg
    {
        width: 700px;
        height: 100px;
    }
    .subvideo .play-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
    .video-section .video-container {
    width: 788.5px;
    height: 450.5px;
    }      
  .card
  {
    width: 790px;
    height: 452px;
    margin: 110px 115px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 191.5px;
    height: 134.5px;
    }
  .playvideo .card
  {
    width: 193px;
    height: 136px;
    margin: 120px 0px;
  }
  .vertical-line {
    margin-right: 50px;
  }
  .sectextvideo
  {
    padding-right: 80px;
  }
  .subvideo
  {
    margin-bottom: -130px;
  }
}
/*Surface Pro 7*/
@media screen and (min-width: 910px) and (max-width: 914px)
{
  .big
  {
    display: none;
  }
  .small
  {
    display: block;
  }
    .fistsvg svg
    {
        width: 700px;
        height: 100px;
    }
    .subvideo .play-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
    .video-section .video-container {
    width: 673.5px;
    height: 350px;
    }      
  .card
  {
    width: 675px;
    height: 352px;
    margin: 110px 120px;
    border: #FFFFFF80 solid 1px !important;
  }
  .breadcrumb a 
  {
    margin-right: 15px;
    margin-left: 5px;
  }
  .breadcrumb p
  {
    margin-top: 23px;
    margin-right: 10px;
  }
    .playvideo  .video-container {
    width: 198px;
    height: 134.5px;
    }
  .playvideo .card
  {
    width: 200px;
    height: 136px;
    margin: 120px 0px;
    margin-right: -10px;
  }
  .vertical-line {
    margin-right: 60px;
    height: 150px;
    margin-top: 110px;
  }
  .sectextvideo
  {
    padding-right: 90px;
  }
  .subvideo
  {
    margin-bottom: -170px;
  }
}
/*surface duo*/
@media screen and (min-width: 539px) and (max-width: 542px)
{
    .video-section .video-container {
    width: 318px;
    height: 181px;
    }      
  .card
  {
    width: 320px;
    height: 182px;
    margin: 50px 110px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 131.5px;
    height: 73.5px;
    }
  .playvideo .card
  {
    width: 133px;
    height: 75px;
  }
  .vertical-line {
    margin-right: 30px;
  }
  .sectextvideo
  {
    padding-right: 20px;
  }
}
/*galaxy Z fold*/
@media screen and (min-width: 343px) and (max-width: 345px)
{
    .video-section .video-container {
    width: 268.5px;
    height: 150px;
    }      
  .card
  {
    width: 270px;
    height: 152px;
    margin: 50px 38px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 131.5px;
    height: 73.5px;
    }
  .playvideo .card
  {
    width: 133px;
    height: 75px;
    margin-top: 115px;
  }
  .vertical-line {
    margin-right: 55px;
    height: 85px;
  }
  .sectextvideo
  {
    padding-right: 55px;
  }
  .subvideo
  {
    margin-bottom: -180px;
  }
}
/*nest hub max*/
@media screen and (min-width: 1270px) and (max-width: 1281px)
{
    .fistsvg svg
    {
        width: 900px;
        height: 100px;
    }
    .subvideo .play-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
    .video-section .video-container {
    width: 788.5px;
    height: 450.5px;
    }      
  .card
  {
    width: 790px;
    height: 452px;
    margin: 110px 240px;
    border: #FFFFFF80 solid 1px !important;
  }
    .playvideo  .video-container {
    width: 221.5px;
    height: 134.5px;
    }
  .playvideo .card
  {
    width: 223px;
    height: 136px;
    margin: 120px 0px;
  }
  .vertical-line {
    margin-right: 30px;
  }
  .sectextvideo
  {
    padding-right: 80px;
  }
  .subvideo
  {
    margin-bottom: -140px;
  }
}