styles.css

:root{
  --background-color1:#F2F2F0;
  --text-color1:#366241;
  --background-color2:#151F10;
  --text-color2:#355E3E;
}
::-webkit-scrollbar {
  width: 5px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

body{
   background-color:var(--background-color1);
   font-family:Inter;
}

header{
  width:100%;
  position:fixed;
  background-color:var(--background-color1);
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

header img{
  width:320px;
  min-height: 75px;
}

nav > ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

li {
  list-style: none;
}

a {
  color: #000;
  text-decoration: none;
  font-size:20px;
}

a:hover{
  color:var(--text-color1);
  transition:0.7s;
}

#About{
  margin-top:120px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:10px;
  /*margin:150px auto;*/
  text-align:center;
  padding:35px;
}

#About h1, h2{
  color:var(--text-color2);
}

h1{
  font-size:40px;
}

.logo{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin:0 auto;
  gap:15px;
  padding-top:30px;
}


.logo img{
  width:100%;
  max-width:300px;
  height:300px;
  object-fit:cover;
}

.logo p{
  text-align:justify;
  width:100%;
  max-width:400px;
  font-size:16px;
  text-indent: 50px;
  letter-spacing:1px;
}

.form-section{
  text-align:center;
  margin:0 auto;
  padding:30px;
  padding-bottom:50px;
}


form label, form input{
  display:block;
  text-align:center;
  margin:0 auto;
}

form label{
  margin-bottom:10px;
  margin-left:50px;
  margin-right:50px;
  font-size:12px;
}

input[type="submit"]{
  width:100px;
  height:30px;
  margin-top:10px;
  background-color:var(--text-color1);
  cursor:pointer;
  border:none;
  color:var(--background-color1);
}


input[type="email"]{
  width:300px;
  height:25px;
}

#Video-section{
  text-align:center;
  margin:0 auto;
  padding:80px;
  background-color:var(--background-color2);
}

#video{
  /*height:400px;
  width:800px;*/
  height:60vh;
  width:110vh;
  min-width:100px;
}

#Video-section h1{
  margin-top:-20px;
  margin-bottom:30px;
  color:var(--background-color1);
}

.products-gallery{
  margin-top:80px;
}

.products-gallery h1{
  color:var(--text-color2);
}

.products{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:10px;
margin:0 auto;
padding:100px;
text-align:center;
}

.products img{
  width:100%;
  max-width:400px;
  height:400px;
  object-fit: cover;
}

.products-gallery h1{
  margin-top:50px;
  text-align:center;
  margin-bottom:-50px;
}

.product1, .product2, .product3{
  display:flex;
  flex-direction:column;
  justify-content:center;
align-items:center;
cursor:pointer;
transition:all 1s ease;
padding:10px;
}

.product1:hover,
 .product2:hover,
  .product3:hover{
    color:var(--background-color1);
    font-weight:600;
    transition:0.5s;
    background-color:var(--text-color1);
  }

.product1 p:first-of-type, 
.product2 p:first-of-type, 
.product3 p:first-of-type{
  margin-top:10px;
  font-size:16px;
}

.product1 p:second-of-type, 
.product2 p:second-of-type, 
.product3 p:second-of-type{
  margin-bottom:20px;
}


footer{
  background-color:var(--background-color2);
  width:100%;
  height:100px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
}

footer p{
  text-align:center;
  color:var(--background-color1);
  width:100%;
}