@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

body {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

:root {
  --Blue--colour: #3264a6b6;
  --Green--colour: #1bb416b0;
  --white--colour: #ffffff;
  --black--colour: #0d0d0de1;
  --orange--colour: #d85521af;
  --red--colour: #b31111b3;
}

.container{
  max-width: 100%;
}

#hero-container {
  max-width: 100%;
  position: relative;
}

#navbar {
  max-width: 100%;
  background-color: #0d0d0d;
  display: grid;
  grid-template-columns: repeat(3,1fr);

}

#navbar h1 {
 color: var(--white--colour);
 text-align: center;
}

#powered-by{
  max-width:100%;
  width:30%;
  font-size: 20px;
}

.nav-heading{
  color:white;
  text-align: center;
  width: 100%;
}

#arcompanies-container{
  max-width: 100%;
  display: flex;
}

.pair-div{
  display: flex;
  flex-direction: row;
}

.dw-name h1,.db-name h1,.cbar-name h1,.vig-name h1{
  font-size: 40px;
  font-weight: bold;
}

.dw-name{
  background-color: var(--Blue--colour);
  height: auto;
  color: var(--white--colour);
}

.dw-area{
  color: var(--white--colour);
  border-color: var(--white--colour);
  text-align: center;
  font-size: 45px;
  padding-top:20px;
  padding-bottom:33px;
  height: 5.55vh;
}

.db-name{
  background-color: var(--orange--colour);
  height: auto;
  color: var(--white--colour);
  
}

.db-area{
  color: var(--white--colour);
  border-color: var(--white--colour);
  text-align: center;
  font-size: 45px;
  padding-top:20px;
  padding-bottom:33px;
  height: 5.55vh;
  overflow: hidden;
}

.cbar-name{
  background-color: var(--red--colour);
  height: auto;
  color: var(--white--colour);
}


.cbar-area{
  color: var(--white--colour);
  border-color: var(--white--colour);
  text-align: center;
  font-size: 45px;
  padding-top:30px;
  padding-bottom: 22px;
}

.vig-name{
  background-color: var(--Green--colour);
  height:auto;
  color: var(--white--colour);
}

.vig-areas{
  color: var(--white--colour);
  border-color: var(--white--colour);
  text-align: center;
  font-size: 45px;
  padding-top:10px;
  padding-bottom: 45px;
}


.dw-areas,.db-areas,.cbar-areas,.vig-areas{
  display: flex;
  max-width: 100%;
  width: 100%;
}

.dw-cars select,.dw-cars-two select,.dw-cars-three select,.db-cars select,.db-cars-two select,.db-cars-three select,
.cbar-cars select,.cbar-cars-two select,.cbar-cars-three select,.vig-cars select,.vig-cars-two select,.vig-cars-three select{
  max-width: 100%;
  width: 100%;
  height: 11vh;
  background-color: transparent;
  border-color: var(--white--colour);
  font-size: 30px;
}

.dw-cars option,.dw-cars-two option,.dw-cars-three option{
  background-color: var(--Blue--colour);
}

.db-cars option,.db-cars-two option,.db-cars-three option{
  background-color: var(--orange--colour);
}

.cbar-cars option,.cbar-cars-two option,.cbar-cars-three option{
  background-color: var(--red--colour);
}

.vig-cars option,.vig-cars-two option,.vig-cars-three option{
  background-color: var(--Green--colour);
}


h1{
  text-align: center;
}

option,select{
  font-size: 25px;
  text-align: center;
  color: var(--white--colour);
}

@media (max-width: 1920px) {

  .dw-name,.db-name ,.cbar-name,.vig-name{
    width:25%;
  }


  #powered-by{
    padding-left: 1rem;
  }
 
}

@media (max-width: 1280px) {

  #navbar h1 {
    font-size:15px;
  }

   #powered-by {
    font-size:10px !important;
  }

  .dw-name,.db-name ,.cbar-name,.vig-name{
    width:25%;
    height: 4rem;
  }

  .dw-name h1,.db-name h1,.cbar-name h1,.vig-name h1{
    font-size:25px;
  }

  #powered-by{
    padding-left: 1rem;
  }
 
}

@media (max-width: 1024px) {

  #navbar h1 {
    font-size:15px;
  }

   #powered-by {
    font-size:10px !important;
  }

  .dw-name,.db-name ,.cbar-name,.vig-name{
    width:25%;
    height: 4rem;
  }

  .dw-name h1,.db-name h1,.cbar-name h1,.vig-name h1{
    font-size:25px;
  }


  #powered-by{
    padding-left: 1rem;
  }
 
}