CSS: 
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#header
{
position:fixed;
display: flex;
width: 100%
top: 0;
left: 0;
padding: 0px 20px;
justify-content: space-around;
align-items: right;
}
#header-img
{
position:static; 
width: 35%;
height:35%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: -25px;
}
#nav-bar
{ 
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: left;
text-align:left;
padding: 20px;
font-size: 20px;
}
nav
{
display: block;
}
.nav-link
{  
color: inherit;
text-decoration:none;
}
li
{
list-style: none;    
}
ol  {
list-style: none;
}
 }
li:hover
{
background-color: #F0F8FF;
color:#ff8000;
}
#heroSection
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 400px;
}
.icon img
{

width:  50px;

height: 50px;

margin: 0px 0px 0px 0px;

align-items: center;

justify-content: center;

flex-direction: column;

 }
.desc 
{
display: flex;
flex-direction: column;
justify-content: center;
padding: 5px;
height: 125px;
width: 80vw;
}
#video
{
position: center;
}
#form
{
 }
#email
{
}
#precio
{
margin: 50px 0 0 0px;
display: flex;
flex-direction: column;
justify-content: center;
}
.product
{
display:flex;
flex-direction: column;
width: calc(100%/3)
}
@media (max-width: 800px)
{
.product
{
max-width:300px;
width: 100%;
margin: 0 auto;
margin-bottom:  10px
}
align-items: center;
border: 1px solid #000;
text-align: center;
}
.level
{
background-color: #ddd;
width: 100%;
color: #000;
padding: 15px 0;
text-tranformation: uppercase;
weight: 800;  
}
.btn
{
padding: 0 20px;
height: 40px;
font-size: 1em;
background-color: #ff8000;
}
.btn:hover
{
background-color: red;
transition: background-color 2s;
}
#submit
{
border-radius: 10px;
background-color: #ff8c1a;
font-size: 1em;
font-weight: 400;
padding: 0 10px;
}
#submit:hover
{
background-color: red;
transition: background-color 2s;
}
footer
{
margin-top: 30px;
background-color: #ddd;
padding: 20px;  
}