MiniatureGardenToys.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: PP Mori;
  }
  html,body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: rgba(250, 247, 247, 0.774)
  }
  a{
  text-decoration: none;
  }
  nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 3vw;
    padding: 3.5vw 5vw;
    position: relative;
    z-index: 999;
    background-color: #4d864d;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 1.4vw;
    justify-content: center;
    }
    .nav-right h4{
        color: rgb(255, 255, 255);
        text-decoration: none;
        /* padding-left: 2vw; */
        padding-right: 2vw;
        font-size: 1.1vw;
        font-weight: 700;
    }
    .nav-right h4:hover{
      color: rgb(10, 71, 10);
      cursor: pointer;
    }
    
    
    .dropdown {
        display: inline-block;
        position: relative;
      }
      a{
        text-decoration: none;
      }
      
      button{
        border:none;
        border-radius:5px;
        padding:15px 25px;
        font-size:1.1vw;
        cursor:pointer;
        background-color: transparent;
        font-weight: 700;
        color: white;
        z-index: 999;
      }
      
      button:hover{
        color: rgb(10, 71, 10);
      }
      
      .dropdown-options {
        display: none;
        position: absolute;
        overflow: auto;
        background-color:#fffdfd;
        border-radius:5px;
        box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
      }
      
      .dropdown:hover .dropdown-options {
        display: block;
      }
      
      .dropdown-options a {
        display: block;
        color: #000000;
        text-decoration: none;
        padding:1vw 5vw;
        font-weight: 200;
        font-size: 1vw;
      }
      
      .dropdown-options a:hover {
        color: #0a0a23;
        background-color: #ddd;
        border-radius:5px;
      }
      #main{
        width: 100%;
        height: auto;
        position: relative;
      }
      #sec1{
        position: relative;
        width: 100%;
        height: 100vh;
        padding: 5vw 10vw;
      }
      #sec1 h1{
        font-size: 3.5vw;
        font-weight: 900;
        font-family: 'General Sans Medium';
        text-align: center;
      }
      #sec1 .line{
        width: 55%;
        height: 2vw;
        background-color: #9AF19A;
        margin: auto;
      }
      .products{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
justify-content: space-evenly;
padding: 4vw 0vw;
gap: 2vw;
position: relative;
      }
      .products .box{
        width: 15.75vw;
        height: 20vw;
        padding: 1vw 1vw;
        border-radius: 1vw;
        overflow: hidden;
        cursor: pointer;
        position: relative;
      }
      .products .box:hover{
        /* opacity: .4; */
        background-color: #74c074;
      }
      .box img{
        width: 100%;
        height: 60%;
        margin-left: auto;
        margin-right: auto;
        object-fit: cover;
        border-radius: .2vw;
        border: 1px solid rgb(3, 41, 3);
      }
      .box .svg{
       width: 0.8vw;
        object-fit: cover;
        border: none;
       color: #4d864d;
      
      }
      .box h3{
        padding: .4vw 0vw;
        font-weight: 200;
        font-size: 1vw;
        font-family: 'General Sans Regular';
      }

      .box h5{
        padding: .2vw 0vw;
        font-family: 'General Sans Regular';
        opacity: .7;
      }
      #sec2{
        width: 70%;
        height: auto;
        position: relative;
border: 1px solid rgb(51, 50, 50);
margin: auto;
padding-left: 2vw;
padding-right: 2vw;
padding-top: 1vw;
margin-top: 600px;
      }
#sec2 hr{
  margin: 2vw 0;
}
#sec2 h4{
  font-size: 1vw;
  color: #00000085;
word-spacing: .2vw;
letter-spacing: .1vw;
}
#sec2 .info-text{
  border: 1px solid green;
  display: flex;
  justify-content: space-between;
  align-items: center;
padding: 1vw 2vw;
}
#sec2 .info-text i{
  width: 2vw;
  cursor: pointer;
}
#sec2 .info-text h3{
  cursor: pointer;
  width: fit-content;
}
#sec2 .info-info1 ,.info-info2, .info-info3 ,.info-info4 ,.info-info5,.info-info6,.info-info7,.info-info8,.info-info9,.info-info10,.info-info11,.info-info12,.info-info13,.info-info14,.info-info15,.info-info16,.info-info17,.info-info18,.info-info19{
  border: 1px solid green;
  padding: 1vw 2vw;
  display: none;
  color: #1b681bb7;
}


footer{
  width: 100vw;
  height: 40vh;
  position: relative;
margin-top: 10vw;
padding-top: 10vw;
}
.footer-con{
width: 100%;
height: 30vh;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: #4d864d;
position: absolute;
bottom: 0%;
border: none;
}
.footer-part1{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 20vw;
}
.footer-part1 p{
  font-size: 1vw;
  font-weight: 500;
  font-family: 'General Sans Regular';
}
.footer-part2{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.footer-part2 h3{
  margin: .2vw 0;
  font-weight: 400;
  font-family: 'General Sans Regular';
}
.footer-part2 h2{
  margin: .3vw 0;
  font-size: 2vw;
  font-weight: 600;
  font-family: 'General Sans Medium';
}
.footer-part3{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.footer-part3 h3{
  margin: .2vw 0;
  font-weight: 400;
  font-family: 'General Sans Regular';
}
.footer-part3 h2{
  margin: .3vw 0;
  font-size: 2vw;
  font-weight: 600;
  font-family: 'General Sans Medium';
}
.footer-part4{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.footer-part4 h3{
  margin: .2vw 0;
  font-weight: 400;
  font-family: 'General Sans Regular';
}
.footer-part4 h2{
  margin: .3vw 0;
  font-size: 2vw;
  font-weight: 600;
  font-family: 'General Sans Medium';
}
a{
  color: #000;
}