html {
    max-height: 100vh;
  }
.line {
    background-color: #000;
    padding-left: 20px;
    padding-right: 20px;
  }
  .section-title {
    width: 50%;
    margin: 60px auto 60px;
    background-image: linear-gradient(
      to top,
      #000 39px,
      #bdae82 39px,
      #bdae82 41px,
      #000 41px
    );
    font-family: "Merriweather";
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 80px;
    /* identical to box height, or 200% */
  
    text-align: center;
  
    color: #bdae82;
  }
  .body {
max-width: 1440px;
background-color: #000;
margin-bottom: 50px;
margin: 0 auto;
  }
  .footer {
      max-width: 1440px;
      text-align: center;
      margin: 0 auto;
      color: #bdae82;
  }
  .container {
      max-width: 1440px;
      margin: 0 auto 100px;
      position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  }
  .videobutton {
    position: relative;
    justify-content: center;
  align-items: center;
    border: none;
    width: 140px;
    height: 140px;
    background: none;
    background-size: contain;
    background-image: url("./assets/svg/videobutton.svg");
    background-repeat: no-repeat;
    transition: 0.3s;
  }
  .videobut{
      display: flex;
    position: relative;
    justify-content: center;
  align-items: center; 
  margin: 0 auto;
  }
  .player-video{
    display: flex;
    flex-direction: column;
  }


  .video-player {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: calc(46% + 60px);
    max-height: 705px;
  }
  
  .viewer {
    width: calc(100% + 2px);
    height: auto;
    border: 1px solid #bdae82;
    border-bottom: 0;
  }
  
  .play-btn {
    position: absolute;
    width: 150px;
    height: 150px;
    z-index: 3;
    background-image: url('./assets/svg/play-btn.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    transition: 1s;
  }
  .play-btn1 {
    position: none;
    width: 150px;
    height: 150px;
    z-index: 3;
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    transition: 1s;
  }
  
  .play-btn:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
      contrast(87%);
  }
  
  .poster {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background-image: url('./assets/img/video.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    transition: 1s;
  }
  .poster1 {
    position: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background-image: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    transition: 1s;
  }
  
  .controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: calc(100% + 2px );
    height: 60px;
    padding: 0 ;
    background-color: #000000;
    border: 1px solid #bdae82;
    border-top: 0;
  }
  
  .play-icon {
    width: 40px;
    height: 36px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .play-icon:hover,
  .play-icon:active {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
      contrast(87%);
  }
  
  .play {
    background-image: url('assets/svg/play.svg');
  }
  
  .pause {
    background-image: url('assets/svg/pause.svg');
  }
  
  .volume-icon {
    background-image: url('assets/svg/volume.svg');
  }
  
  .mute {
    background-image: url('assets/svg/mute.svg');
  }
  
  .progress,
  .volume {
    background: linear-gradient(
      to right,
      #bdae82 0%,
      #bdae82 0%,
      #c8c8c8 0%,
      #c8c8c8 100%
    );
    height: 10px;
    width: calc(80% - 160px);
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
  }
  
  .volume {
    background: linear-gradient(
      to right,
      #bdae82 0%,
      #bdae82 40%,
      #c8c8c8 40%,
      #c8c8c8 100%
    );
  }
  
  .volume {
    width: calc(20% - 40px);
  }
  
  .progress::-webkit-slider-thumb,
  .volume::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    -webkit-appearance: none;
    cursor: ew-resize;
    background: #fff;
  }
  .link {
    text-decoration: none;
  }