* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 3.2rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(25, 24, 24);
  color: white;
  
}


.logo {
  display: flex;
  align-items: center; 
  margin-left: 30px;
}

.logo img{
  width:100px;
}

#wordlogo{
 margin-left: 30px;
 color: white;
}

nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-color);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

nav ul {
  list-style: none;
  display: flex;
  gap:10px;
  margin-top: 75px;
  margin-right: 30px;


  }


.navbar{
  border: none;
  color: white;
  padding:1rem;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  font-size: 1.1rem;
}

.navbar:hover{
  opacity: 65%;
}

#squish{
  display: none;
}



/* .burger-menu {
  color: white;
  font-size: 2rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: none;
} */


.video-section{
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.onevid {
width: 100%;
display: block;
}

.order-button{
padding: 1em 2.5em;
text-decoration: none;
font-weight: bold;
background-color: #ff0000;
color: white;
position:absolute;
margin-top: 10em;
}

.order-button:hover{
background-color: red;
border: 1px black solid;
cursor: pointer;
}

.top-sales {
text-align: center;
}

.best-sellers{
background-color: black;
color: white;
}

.whiteline{
height: 25px;
background-color: white;
}

.product{
margin-bottom: 50px
}

.sale{
padding: 10px 25px;
border: none;
color: white;
font-size: 3.2rem;
font-family: 'Roboto', sans-serif;
}

.top_sale_pics{
width:35%;
}

.bshtwo{
padding-top: 30px;
}

.promo-section {
  text-align: center;
  background-color: white;



  padding-inline: 10px;
}

.promo-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px 0;
}

.cmenu {
  display: inline-block;
  padding: 0.7em 2em;
  background-color:black;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.5rem;
}

.cmenu:hover{
  background-color: #ff0000;
  color:white;
  cursor: pointer;
}

#color_smoothie{
  width: 100%;    
}

.product-section {
  text-align: center;
  background-color:whitesmoke;
  color: white;
  padding-inline: 10px;


}

.product-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: white;
  gap:8.5%;
}

.product-info img {
  width: 40%; 
  max-width: 600px;
}

.product-description {
  max-width: 400px;
  color: black;
}

.learn-more-button {
  display: block;
 
  width: 60%;
  padding: 0.7em;
  margin-top: 0.7em;
  margin-inline: auto;
  background-color: black;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.5rem; 
  text-align: center;
}

.learn-more-button:hover{
  background-color: red;
  color: white;
  cursor: pointer;
}



footer {
  background-color:rgb(25, 24, 24);
  text-align: center;
  padding: 20px 0;
}

.contact-links {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-links li {
  margin: 0 10px;
}

.contact-links a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-links a:hover {
  color:red;
  cursor: pointer;
}

.fa {
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 5px;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-phone{
background:green;
color: white;

}

.fa-envelope{
background: pink;
color:white
}

.fa-map-marker{
background: red;
color: white;
}

.bigger{
font-size: 1.8rem;
}






@media screen and (max-width:1076px){

#wordlogo{
  font-size: 2.5rem;

}
}



@media screen and (max-width:1050px){


  header{
    position: fixed;
    z-index: 3;
    width:100vw;
  }

#squish{
  display:inline-block;
  position: absolute;
  background-color: white;
  width:30px;
  border-radius: 3px;
  right:45px;
}

#squish:hover{
  opacity: 75%;
}

.logo {
  margin-inline: auto;
}

#wordlogo{
margin-inline: auto;
}


nav {
  padding: 1.5rem 1rem;
  z-index: 1;

}

.navbar{
  padding: 0;
  background-color:transparent;
}

nav ul {
  position: absolute;
  background-color:black;
  flex-direction: column;
  top: 5px;
  left: 60%;
  width: 40%;
  text-align: center;
 /* transform: translateX(160%); X makes it come from the sides the y top to bottom*/
  transform: translateY(30%);
}




 nav ul li {
  margin: 5px;
  border-bottom: solid 1px white;
}

.video-section{
  padding-top:130px;/*Bandaid solution*/
}


}

@media screen and (max-width:615px){


.bshtwo{
font-size: 10vw;
}

.sale{
  font-size: 8vw;
}


.product{
  margin-bottom: 25px;
}

.order-button{
  margin-top: 7em;
  padding: 0.75em;
}

}

@media screen and (max-width:530px){

  #wordlogo{
    display: none;
  }

  .logo{
    margin-inline:25px 0;
  }
}





@media screen and (max-width:415px){


.order-button{
  margin-top: 5em;
  padding: 0.5em;
}

.product-info{
  display: block;
}


.fa {
  padding: 5px;
  font-size: 15px;
  width: 25px;
}
}


@media screen and (max-width:350px){
  .logo img{
    width:75px;
  }

  .video-section{
    padding-top:100px;/*Bandaid solution*/
  }
}











font-family: 'Roboto', sans-serif;