html{
  background-color: var(--main_color);
}

.contact-button{
  background-color: var(--second_color);
  border-radius: 20px;
  color: black;
  font-weight: bold;
}

.contact-button:hover{
  background-color:white;
}

.about{
  background-color: var(--main_color);
  color: var(--main_text);
  padding-top: 6%;
  padding-bottom:1%;
  padding-left: 20%;
  padding-right: 20%;
  box-shadow: 0px 1px 10px black;
  position:relative
}

.about h1{
  font-size: 200%;
  text-align: center;
  margin-bottom: 2%;
}

.about button{
  margin-top: 4%;
  padding: 1em;
  border: 1px solid white;
  border-radius: 20px;
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;

}

.about button:hover{
background-color:  var(--second_color);
color:black;
border : 1px solid black;
}

.badge{
  display: flex;
  justify-content: space-around;
  padding-left: 15%;
  padding-right: 15%;
}
.badge img{
  width: 15em;
  margin-top: 1em;
}

.container-card-row{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--light_main_color);
  padding: 3%;
}

.card-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.ccr-title{
  font-size: 150%;
  color: white;
  margin-bottom: 2%;
  font-weight: bold;
}

.brand-grid{
display: flex;
flex-direction: column;
align-items: center;
padding:4%;
background-color: rgb(45, 45, 45);
}

.brand-grid-row{
  display: flex;
  justify-content: space-around;
}

.row2{
margin-top: 3em;
}

.item{
margin-left: 3em;
margin-right: 3em;
}

.item img{
  width: 100%;
}


@media screen and (max-width: 1500px) {
  .about{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .about button{
    margin-top: 2em;
      margin-bottom: 2em;
  }
  .item{
    margin-bottom: 1em;
  }
  .row2{
    margin: 0;
  }

}