:root{
    --logo: #ecece4;
    --colour1: #99E6B2;
    --colour2: #7AD2A8;
    --colour3: #5CBE9D;
    --colour4: #3DAA93;
    --colour5: #1F9688;
    --colour6: #00827E;
}
.products-header{
    overflow-x: hidden;
    margin-top: 140px;
    margin-bottom: 0px;
    transition-duration: 0.5s;
}

.vid-width{
    margin-left: 150px;
    margin-right: 150px;
}

.product-vid{
    height: 600px;
    overflow: hidden;
}

/* .vid-slides{
    margin-top:140px;
    width: 100%; 
    height: 100%;
    
} */
/* @media screen and (max-width: 1000px){ */
    .product-vid{
        height: 500px;
        margin-top: 31px; 
    }

/*-------PROMOTIONS-------*/

.promotions{
    margin-bottom: 50px;
    overflow-x: hidden;
}

.promotions h3{
    background-color: var(--colour4);
    padding: 8px 0 8px;
    text-align: center;

}
/*-------sale-------*/
body {


    justify-content: center;
    align-items: center; 
    min-height: 100vh;
    background: #fff;
    padding: 20px 0; 
  
    text-transform: uppercase;
    text-align: center; 
    /* color:rgb(247, 247, 247); */
  }
  .box {
    
    position: relative; 
    max-width: 600px;
    width: 300px;
    height: 300px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    margin-right:0px;
   display:inline-block;
  }
 
  
  /* common */
  .ribbon {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: absolute;
  }
  .ribbon::before,
  .ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 3px solid #7AD2A8;
  }
  .ribbon span {
    position: absolute;
    display: block;
    width: 165px;   
    padding: 5px 0;
    background-color: #7AD2A8;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
  }
  /* top right*/
   .ribbon-top-right {
    top: -3px;
    right: -3px;
  }
  .ribbon-top-right::before,
  .ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
  }
  .ribbon-top-right::before {
    top: 0;
    left: 0;
  }
  .ribbon-top-right::after {
    bottom: 0;
    right: 0;
  }
  .ribbon-top-right span {
    left: -22px;
    top: 30px;
    transform: rotate(45deg);
  }  
  
  
/*-------FOOTER-------*/
footer{
    background-color: var(--colour5);
    margin-top: 35px;
}

.social-media, .bank-acc{
    border-top: 1px solid black;
    margin: 10px 0 0;
    padding: 10px 0 10px;
}

.social-media img, .bank-acc img{
    width: 40px;
    height: 40px;
    margin-top: 10px;
}