@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;
  padding: 0;
}

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



#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;
  max-height: 100%;
 
  margin-bottom: -1rem;
}

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

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

.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);
  color: var(--white--colour);
  height: auto;
}

.dw-area{
  color: var(--black--colour);
  border-color: var(--white--colour);
  text-align: center;
  font-size: 45px;
  padding:20px;
  
}

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

.dw-name,.db-name,.cbar-name,.vig-name{
  
}

.db-area{
  color: var(--black--colour);
  border-color: var(--white--colour);
  text-align: center;
  font-size: 45px;
  padding:20px;
}

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


.cbar-area{
  color: var(--black--colour);
  border-color: var(--white--colour);
  text-align: center;
  font-size: 37px;
  
}

.areacbar{
  padding: 10px;
  color: var(--black--colour);
}

.vig-name{
  background-color: var(--Green--colour);
  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%;
  font-family: 'Roboto', sans-serif;
  font-weight: bolder;
  color: var(--black--colour);
}

.dw-cars select,.dw-cars-two select,.dw-cars-three select,.db-cars select,.db-cars-two select,.db-cars-three select,
.vig-cars select,.vig-cars-two select,.vig-cars-three select{
  max-width: 100%;
  width: 100%;
  height: 10vh;
  background-color: transparent;
  border-color: var(--white--colour);
  font-size: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: bolder;
}

.cbar-cars select,.cbar-cars-two select,.cbar-cars-three select{
  max-width: 100%;
  width: 100%;
  height: 16vh;
  background-color: transparent;
  border-color: var(--white--colour);
  font-size: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: bolder;
}

.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);
}

.footer{
  background-color: var(--black--colour);
  max-width: 100%;
  height: 16vh;
}


@media (max-width: 1920px) {

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


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

  .cbar-cars select,.cbar-cars-two select,.cbar-cars-three select{
    max-width: 100%;
    width: 100%;
    height: 17vh;
    background-color: transparent;
    border-color: var(--white--colour);
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
  }
 
}

@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;
  }

  .cbar-cars select,.cbar-cars-two select,.cbar-cars-three select{
    max-width: 100%;
    width: 100%;
    height: 17vh;
    background-color: transparent;
    border-color: var(--white--colour);
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
  }
 
}

@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;
  }

  .cbar-cars select,.cbar-cars-two select,.cbar-cars-three select{
    max-width: 100%;
    width: 100%;
    height: 17vh;
    background-color: transparent;
    border-color: var(--white--colour);
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
  }
 
}