.asid__header {
  padding: 2rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu__icon {
  font-size: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.5rem;
}
.sidbar__menu {
  margin-top: 1rem;
}
.aside_menus {
  display: flex;
  flex-direction: column;
}
.menu__link {
  padding: 1rem 2rem;
  border-right: 0.5rem solid;
  border-color: var(--green-clr);
  display: flex;
  align-items: center;
  gap: 1rem;
 
}
.menu__link i {
  font-size: 1.7rem;
}
.menu__link:hover {
  color: var(--green-clr);
  font-weight: 500;
  border: unset;
}

.menu__link:hover i {
  transform: scale(1.5);
  color: var(--green-clr);
  margin-left: 0.5rem;
}
.sidebar__footer {
  position: absolute;
  bottom: 15%;
  width: 100%;
}
.login__btns {
  display: flex;
  padding: 2rem;
  align-items: center;
  justify-content: center;
}
.login__btns a {
  display: flex;
  text-align: center;
  width: 90%;
  justify-content: center;
  align-items: center;
  background: var(--light-green-2);
  padding: 1rem 2rem;
  color: var(--text-clr);
  font-weight: bold;
  border-radius: 5rem;
  border: 1px solid var(--green-clr);
}
.login__btns a:hover{
    background: var(--green-clr);
    color: var(--white-clr);
}
.login__btns a i {
  font-size: 3rem;
  padding: 0rem 0.5rem;
  color: var(--green-clr);
}
.login__btns a:hover i{
    color: var(--light-green-clr);
}
.social__wrapper {
  padding: 1rem;
  position: absolute;
  width: 100%;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.social__wrapper a {
    padding: 1rem;
    border-radius: 50%;
    box-shadow: 0px 0px 10px var(--shadow-clr-two);
    border: 1px solid var(--shadow-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-green-clr);
}
.social__wrapper a i{
    font-size: 2rem;
    
}
.social__wrapper a:hover{
    transition: all 100ms ease-in;
    background-color: var(--green-clr);
    color: var(--white-clr);
}

.icons__wrapper{
    font-size: 2.5rem;
    color: var(--green-clr);
    opacity: .8;
}
.icons__wrapper i{
    padding: .3rem;
    cursor: pointer;
}




/* tags */

.tages__wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(8rem , 1fr));
  width: 100%;
  padding: 1rem;
  gap: 1rem;
  
  
}
.tag{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-green-2);
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
}
.tag img{
  display: block;
  max-width: 100%;
  height: 10rem;
  padding: .5rem;
  object-fit: cover;
  object-position: center;
}
.tag > a{
  position: absolute;
  width: 100%;
  height: 100%;
  background:linear-gradient(to top right,rgba(1, 49, 1, 0.651) , rgba(66, 64, 64, 0.288));
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--white-clr);
}
.tag:hover > a {
  background:linear-gradient(to top right,rgba(1, 49, 1, 0.774) , rgba(66, 64, 64, 0.603));
}
.tag:hover img{
  transform: scale(1.3);
}


/* club */

.customer__club{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.customer__club p{
  color: var(--green-clr);
  font-weight: bold;
  font-size: 1.1rem;
}
.customer__club form{
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 2rem;

}
.customer__club form input ,
.customer__club form button{
  display: block;
  width: 100%;
  appearance: none;
  border: none;
  outline: none;
  padding: 1rem;
  border-radius: .4rem;
}
.customer__club form input{
  border: 1px solid;
  border-color: var(--green-clr);
  background-color: var(--white-clr);
  box-shadow: 0px 2px 5px var(--shadow-clr-two);
  font-weight: bold;
}
.customer__club form button{
  background-color: #3f5d55;
  color: var(--white-clr);
  cursor: pointer;
  
}
.customer__club form button:hover{
  background-color: #5a8651;
}

.club h4{
  margin-bottom: 1rem;
  color: var(--text-clr-2);
  font-size: 1.4rem;
}
.list_address li{
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  padding: 0 1rem;

}
.list_address li a{
  font-weight: bold;
  font-size: 1.4rem;
}
.list_address li a:hover{
  color: #5a8651;
}
.club p{
  font-size: 1.2rem;
}





/* config */
.config__item{
  padding: 2rem;
  background-color: var(--white-clr);
}
.config__item h2{
  margin-bottom: 1rem;
}
.config__item textarea{
  background-color: var(--shadow-clr-two);
  width: 100%;
  min-height: fit-content;
  padding: 2rem;
  resize: none;
  border: none;
  border-radius: .5rem;
  -webkit-border-radius: .5rem;
  -moz-border-radius: .5rem;
  -ms-border-radius: .5rem;
  -o-border-radius: .5rem;
  outline: none;
  font-size: 1.4rem;
  font-weight: 400;
 direction: ltr;
}

.config__item button{
  min-width: fit-content;
  padding: .8rem 1.5rem;
  margin-top: 2rem;
  font-size: 1.7rem;
  font-weight: 600;
  background-color: var(--light-green-clr);
  border: none;
  outline: none;
  color: var(--white-clr);
  border-radius: .5rem;
  -webkit-border-radius: .5rem;
  -moz-border-radius: .5rem;
  -ms-border-radius: .5rem;
  -o-border-radius: .5rem;
  cursor: pointer;
}

.config__item button:hover,
.config__item button:active{
  background-color: var(--green-clr);
  transform: scale(.98);
  -webkit-transform: scale(.98);
  -moz-transform: scale(.98);
  -ms-transform: scale(.98);
  -o-transform: scale(.98);
}
.apps{
  padding: 2rem;
}
.download_links{
  display: flex;
  flex-direction: column;
  gap: 2;
  padding: 2rem;
}

.download_links a{
  padding: 1rem;
  margin: .5rem;
  font-weight: 500;
  color: var(--subtext-clr);
  font-size: 1.3rem;
  border: 1px solid var(--shadow-clr);
}

.download_links a:hover{
  color: var(--green-clr);
}







/* responsive */
@media screen and (max-width:1050px){
  .main__wrapper{
    grid-template-areas: 
    "mainHeader mainHeader mainHeader mainHeader"
    "mainSite mainSite info info"
    ;
  }
  .article{
    max-width: 60%;
  }
}



/* responsive */
@media screen and (max-width:1024px){
  html{
    font-size: 60%;
  }
  .saidebar.notactive{
    right: -100%;
  }
  .saidebar.notactive + .main__wrapper{
    width: calc(100% - 0rem);
    margin-right: unset;
  }
}

/* responsive */
@media screen and (max-width:992px){
  html{
    font-size: 60%;
  }

  .saidebar.notactive{
   
    right: -100%;
  }
  .saidebar + .main__wrapper{
    width: calc(100% - 0rem);
    margin-right: unset;
  }
}
@media screen and (max-width:868px){
  html{
    font-size: 65%;
  }
  
  .saidebar.notactive{
    display: none;
    right: -100%;
  }
  .saidebar + .main__wrapper{
    width: calc(100% - 0rem);
    margin-right: unset;
  }
  section.main__wrapper{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 7rem auto;
    grid-template-areas: 
    "mainHeader mainHeader mainHeader mainHeader"
    "mainSite mainSite mainSite mainSite "
    "info info info info"
    ;
  }
  .customer__club {
    text-align: center;
  }
  .customer__club form{
    
    flex-direction: row;
    justify-content: center;
  }
  .customer__club form input{
    width: 50%;
  }.customer__club form button{
    width: 30%;
  }
  .section__title{
    text-align: center;
  }
  .club{
    padding: 0 7%;
  }
  .customer__club p{
    font-size: 2rem;
  }
  .article{
    max-width: 90%;
  }
  .new__flower{
    place-items: center;
  }
  .login__btns{
    padding:unset;
    margin-top: 2rem;
  }
}
@media screen and (max-width:550px){
 .bxs-toggle-left,
 .bx-exit-fullscreen{
  display: none !important;
 }
 .logo__title{
  font-size: 1.4rem;
 }
  html{
    font-size: 60%;
  }
  .new__flower{
    padding: 1rem;
    
  }
  a.banner__link h4{
    font-size: 1.5rem;
  }
  a.banner__link img{
    max-height: 16rem;
  }
  .article{
    max-width: 100%;
    margin-bottom: 5rem;
    grid-template-columns: auto;
  }
  .flower__detail{
    padding: 0 1rem;
  }
  .customer__club form{
    flex-direction: column;
  }
  .customer__club form input, .customer__club form button{
    width: 100%;
  }
  .flower__img img{
    transform:scale(1.5);
    padding-bottom: 20px;
    
  }
}