@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700;900&display=swap');
.icons-header{
  display: none;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 5;
  border: none;
  outline: none;
  background-color: #1d1233;
  color: white;
  cursor: pointer;
  padding: 10px;
  font-size: 15px;
  border-radius: 4px;
}
.header-title{
  display: none;
}
.extra{
  display: none;
}
.overview-description{
  display: block;
  font-size: 25px;
  padding: 25px;
  padding-top: 0px;
  font-family:'Poppins',sans-serif;
  text-align: center;
  align-self: center;

   

}

.overview-description li{
  
    font-size: 25px;
    padding: 10px 0;
    font-family:'Poppins',sans-serif;
    text-align: justify;
    list-style-type: disc;
}
.product{
  position: relative;
}
.invalid-credential {
  background: rgb(249, 205, 205);
  border-radius: 5px;
  text-align: left;
  color: black;
  padding: 10px;
  font-size: 13px;
  margin: 0px;
  margin-bottom: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 900;
  animation: bounce 0.5s ease-in-out;
}

.valid-credential {
  background: rgb(205, 249, 222);
  border-radius: 5px;
  text-align: left;
  color: black;
  padding: 10px;
  font-size: 13px;
  margin: 0px;
  margin-bottom: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 900;
  animation: bounce 0.5s ease-in-out;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}


@keyframes slideUp {
  0%, 50% { transform: translateY(0px); }
  100% { transform: translateY(-20px); }

}


.invalid-credential i {
  padding:10px ;
  font-size: 22px;
  align-self: center;
  justify-content: center;

}

.valid-credential i {
  padding:10px ;
  font-size: 22px;
  align-self: center;
  justify-content: center;

}

.navbtn{
  margin: 20px auto;
  top:10px;
  right:80px;
  position: absolute;
  
}
#myBtn5 {
  display: none;
}
@media only screen and (max-width:800px) {
  
  
  .invalid-credential {
    background: rgb(249, 205, 205);
    border-radius: 5px;
    text-align: left;
    color: black;
    width: auto;
    padding: 10px;
    font-size: 13px;
    margin: 0px;
    margin-bottom: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    position: fixed;
    left: 10px;
    top: 10px;
    bottom: auto;
    right: 10px;
    z-index: 900;
  }
  .extra{
    display: block;
  }
  .valid-credential {
    background: rgb(205, 249, 222);
    border-radius: 5px;
    text-align: left;
    color: black;
    width: auto;
    padding: 10px;
    font-size: 13px;
    margin: 0px;
    margin-bottom: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    position: fixed;
    left: 10px;
    top: 10px;
    bottom: auto;
    right: 10px;
    z-index: 900;
  }
  
  
  #myBtn {
    display: block;
    position: fixed;
    right: 13%;
    bottom: 9%;
    z-index:99;
    border: none;
    outline: none;
    background:rgb(233, 232, 238);
    color:black;
    cursor: pointer;
    font-weight: 600;
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
    text-align: center;
    width: 40px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.636);
  }
  
  #myBtn5 {
    display: none;
    position: fixed;
    right: 13%;
    bottom: 9%;
    z-index:99;
    border: none;
    outline: none;
    background:rgb(233, 232, 238);
    color:black;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 12px;
    font-size: 20px;
    border-radius: 5px;
    text-align: center;
    width: 40px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.636);
  }
  #myBtn6 {
    display: none;
    position: fixed;
    right: 6%;
    bottom: 9%;
    z-index:99;
    border: none;
    outline: none;
    background:rgb(233, 232, 238);
    color:black;
    cursor: pointer;
    font-weight: 600;
    font-size: 20px;
    padding: 10px 12px;
    border-radius: 5px;
    width: auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.636);
  }
  #myBtn5 i{
    font-weight: 900;
  }
  .header-title{
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 40px;
    left: 25px;
    width: 90%;
    
  }
  .header-title h1{
    color: white;
    font-family: 'Montserrat',sans-serif;
    font-size: 35px;
    font-weight: 300;
    width: 230px;
    
  }
  .header-title p{
    color: white;
    font-family: 'Montserrat',sans-serif;
    font-size: 13px;
    width: 200px;
    font-weight: 300;
    margin-bottom: 10px;
    
  }
  .header-title a{
    color: #22193f;
    background: white;
    font-family: 'Montserrat',sans-serif;
    font-size: 20px;
    padding: 10px;
    position: absolute;
    bottom: -37px;
    border-radius: 5px;
    right: 10%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.636);
    z-index: 10;
    
  }
  .dot-container {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 80px;
    margin: 10px 2px;
   
}
.dot1, .dot2, .dot3, .dot4 {
    width: 5px;
    height: 5px;
    border-radius: 50%; 
    
}
.dot1{
  background-color: white;
}
.dot2{
  background-color: rgb(197, 195, 195);
}
.dot3{
  background-color: rgb(95, 95, 95);
}
.dot4{
  background-color: rgb(18, 17, 17);
}
  .icons-header{
 
    display: none;
    position: fixed;
    right: 13%;
    bottom: 16%;
    z-index:99;
    border: none;
    outline: none;
    cursor: none;
    font-weight: 600;
    font-size: 20px;
    border-radius: 5px;
    flex-wrap: wrap;
    gap: 10px;
    height:150px;
    flex-direction:column;
    justify-content: flex-end;
    transform: scaleX(-1);
   

  }
  .icons-header a{
    text-decoration: none;
    background:rgb(233, 232, 238);
    color:black;
    cursor: none;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.636);
    text-align: center;
    width: 40px;
  }
  .icons-header .fa-solid{
    padding: 10px;
    position: sticky;
    color: black;
    border-radius: 10px;
    
  }
 
  #sidemenu .login-home {
    background-color: rgba(102, 246, 97, 0.074);
    border: 1px solid rgb(0, 255, 89);
    color: rgb(5, 101, 21);
    font-size: 20px;
    padding: 10px 25px;
    border-radius: 10px;
    text-align: left;
    display: block;
    font-weight: 400;
  }
  .overview-description{
    text-align: justify;
    font-size: 16px;
  }
  .overview-description li{
    font-size: 16px;
  }
}