.brands-hero-content{
  height: 60vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.line-item:not(:first-child) .nice-select:last-child{
  display: none;
}
.remove-btn{
    height: auto;
    background: darkred;
    border: none;
    /* font-size: 3.5vw; */
    color: transparent;
    height: clamp(1px, 0.8vw, 5px);
    width: 10%;
    border-radius: 3px;
    position: relative;
}
.brands-hero-container{
  background-image: url(/assets/img/flare.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.brands-hero-content h1{
  font-size: 3rem;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}
.brands-hero-content p{
  font-size: 1rem;
  margin-top: 1vw;
  color: white;
  font-weight: 300;
  text-align: center;
}
.brands-hero-blur-1{
  position: absolute;
  width: 50%;
  left: 0;
  height: 60vh;
  top: 0;
  margin: auto;
  z-index: -1;
}
.brands-hero-blur-2{
  position: absolute;
  width: 50%;
  height: 60vh;
  right: 0;
  top: 0;
  margin: auto;
  z-index: -1;
}
.brands-hero-blur-1 img, .brands-hero-blur-2 img{
  width: 100%;
  height: 100%;
}
body{
  overflow-x: hidden;
  overflow-y: scroll;
}
.text{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  max-width: 80%;
}
.since-text{
  font-size: 1.8vw;
  font-weight: 500;
  margin-left: 8.5vw;
}
.about-text{
  font-size: 8vw;
  font-weight: 500;
  margin-top: -1.5vw;
  text-align: center;
}
.prems-text{
  font-size: 4.2vw;
  font-weight: 500;
  margin-top: -1.5vw;
  color: white;
}

/*Contact*/

.contact-content{
  margin-top: -8%;
  margin-bottom: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--margin-md, 20px);
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
}
.contact-text h2{
  font-size: 3.9vw;
  color: white;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: var(--margin-sm, 20px);
}
.contact-form{
  border-radius: 9.849px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.10);
  box-shadow: 0px 59.491px 118.982px 0px rgba(255, 255, 255, 0.15) inset, 0px 5.949px 11.898px 0px rgba(0, 0, 0, 0.05), 0px 17.847px 35.695px 0px rgba(0, 0, 0, 0.05), 0px 35.695px 71.389px 0px rgba(0, 0, 0, 0.10);
  padding: 2vw;
}
.form-top, .form-center, .form-bottom{
  display: flex;
  
  gap: 3%;
  margin-bottom: 1.5vw;
}

.form-top div, .form-center div, .form-bottom{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}
.form-top label, .form-center label, .form-bottom label{
 margin-bottom: 1vw;
}
.form-top div input, .form-center div input, .form-bottom textarea{
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 88.89%);
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.10);
  padding: 0.8vw;
  font-size: 1vw;
  width: 100%;
  min-height: 25px;
}
.form-bottom textarea{
  resize:none;
}
.form-action{
  display: flex;
  flex-direction: column;
}
.form-action span{
  font-size: 0.8vw;
  color: white;
  opacity: 0.5;
}

.form-action button{
  width: fit-content;
  margin-top: 1vw;
  padding: 15px 10px;
}

.contact-bottom{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 2vw;
  margin-top: 5vw;
  width: 100%;
  position: relative;
}
.contact-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}
.contact-item .img-container{
  border-radius: 13.501px;
  border: 1.35px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.10);
  box-shadow: 0px 67.506px 135.011px 0px rgba(255, 255, 255, 0.15) inset, 0px 6.751px 13.501px 0px rgba(0, 0, 0, 0.05), 0px 20.252px 40.503px 0px rgba(0, 0, 0, 0.05), 0px 40.503px 81.007px 0px rgba(0, 0, 0, 0.10);
  padding: 2%;
  width: 4vw;
  height: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-item .img-container img{
  width: 80%;
  height: auto;
}
.contact-item h5{
  font-size: 1.1vw;
  color: white;
  font-weight: 300;
}
.contact-item p{
  text-align: center;
  color: rgba(255, 255, 255, 0.60);
  font-size: 0.9vw;
}
.contact-item a{
  color: white;
  text-decoration: none;
}
.text-gradient{
  font-size: 3rem;
  font-weight: 500;
}
.contact-blur{
  position: absolute;
  width: 50%;
  height: 100%;
  left: -25%;
}
.contact-blur img{
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}


.form-action span{
  font-size: 1vw;
  color: white;
  opacity: 0.75;
}
.form-action button{
  color: white;
  font-weight: 500;
  padding: 1.5% 2%;
  width: fit-content;
}
.form-container{
  width: 60%;
} 

@media (width <= 1020px){
  .brands-hero-content{
    height: 400px;
  }
  
  .form-container{
    width: 100%;
  }
  .contact-section{
    height: auto;
    padding: 40px 20px;
  }
  .contact-form{
    width: 100%;
  } 
  .info-cards h3{
    margin-bottom: 0px;
  }
  .form-top, .form-center, .form-bottom{
    flex-direction: column;
  }
  .contact-content{
    padding: 20px;
    margin-top: -20%;
  }
  .form-container form{
    padding: 20px;
  }
  .form-top div input, .form-center div input, .form-bottom textarea{
    font-size: 1rem;
    margin-top: 4px;
    margin-bottom: 16px;
    padding: 10px;
  }
  .form-action span{
    font-size: 0.8rem;
  }
  .form-action button{
    width: 100%;
    margin-top: 20px;
  }
  .contact-bottom{
    flex-direction: column;
    gap: 20px;

  }
  .brands-hero-container{
    background-size: cover;
  }

  .contact-item .img-container{
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
  .contact-item h5{
    font-size: 1rem;
    margin-bottom: 10px;
  }
  .contact-item p{
    font-size: 0.8rem;
    margin-bottom: 10px;
  }
  .contact-blur{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
  }
  .contact-blur img{
    width: 100%;
    height: 100%;
  }

  /******/
  .products-select .nice-select{
    font-size: 1rem !important;
    margin-bottom: 20px;
  }
  .products-select .nice-select .option{
    font-size: .8rem !important;
    font-weight: 100;
  }
}
@media(width <= 500px){
 
  .bg-image{
    top: 15%;
  }
  .section.hero{
    height: 35vh;
  }
  .section.quality-section{
    height: 30vh;
  }
  .form-container form{
    padding: 20px;
  }
  .form-container{
    width: 100%;
  }
}



.products-select .nice-select{
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 88.89%);
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.10);
  border-radius: 4px;
  font-size: 1vw;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.products-select .nice-select .list{
  background:rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.10);
  border-radius: 4px;
  font-size: 1vw;
}

.products-select .nice-select .option{
  background: transparent;
  border-radius: 4px;
  font-size: 1vw;
}

.add-btn-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  margin-top: 1vw;
  margin-bottom: 5%;
}
.add-btn-container button{
  padding: 1vw 1.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1E1E1E;
  border-radius: 50%;
  color: #fff;
  font-size: 1.5vw;
  border: none;
  font-weight: 100;
}
.add-btn-container h5{
  font-size: clamp(14px, 1.1vw, 1.1vw);
  color: white;
  font-weight: 300;
}
.add-btn-container h5 span{
  color: #EE161F;
  font-weight: 500;
}


.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
} 
.loader {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid;
  border-color: gray #0000;
  animation: l1 1s infinite;
  display: none;
}
.action-button{
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
.action-bar-mobile{
  display: none;
}
#catalog-nav-link{
  list-style: disc;
  list-style-position: inside;
}
#catalog-nav-link a{
  color: white;
}
.form-action .btn-outline{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.form-message{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.form-message .success{
  color: lawngreen;
}
.form-message .error{
  color: #EE161F;
}
.form-message .error, .form-message .success{
  font-weight: 500;
  display: none;
}
@keyframes l1 {to{transform: rotate(.5turn)}}