:root {
    --colorOne: #002329;
    --colorTwo:#8c8c8c;
    --colorThree: #f0f0f0;
    --colorFour: #1890ff;
    --colorFive: #09B138;
    --colorSix: #595959;
  }

  body{
    font-family: Arial, Helvetica, sans-serif;
    height: 100% !important; 
    background-image: url(../img/backgrounds/Justice-angled1.jpg); 
    background-repeat: no-repeat;
    background-size: cover;    
  }
  .colorOne{
    color: var(--colorOne) !important;
  }
  .colorTwo{
    color: var(--colorTwo) !important;
  }
  .colorThree{
    color: var(--colorThree) !important;
  }
  .colorFour{
    color: var(--colorFour) !important;
  }
  .colorSix{
    color: var(--colorSix) !important;
  }


  .navbar{
    background-color: var(--colorOne) !important;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;    
  }
.linkColor{
  color: var(--colorThree) !important;
}
.linkColor:hover{
  color: var(--colorThree) !important;
  border-bottom: 1px solid var(--colorThree);
  transition: all 0.3s;
}
.card{
  min-height: 80px;
}
.border{
  border-color:  var(--colorThree) !important;
}
.myBorder{
  border: 1px solid #d9d9d9 !important;
}

.cardButton{
  background-color: var(--colorFive) !important;
  color: var(--colorThree) !important;
}
.cardShadow{
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}
.cardShadow:hover{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: all 0.3s;
}

.section{  
  min-height: 560px !important;  
}

.img-fluid{
  min-width: 320px !important;
}

.iconSpan{
  width: 44px;
  color: var(--colorFour);
}

.footer { 
  display: block !important;
  min-height: 200px !important;
  width: 100%;
  background-color: var(--colorOne);
  color: white;
  text-align: center;
}

@media only screen and (max-width: 16000px) and (min-width:2559px)  {
  .card {
    height: 200px;
  }
  .cardImg{
    width: 90px;
  }
  .card-title{
    font-size: large;
  }
  .section{  
    min-height: 560px !important;
    position: relative;
  }
  .vertical-center {
    margin: 0;    
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
@media only screen and (max-width: 2560px) and (min-width:1439px)  {
  .card {
    height: 180px;
  }
  .cardImg{
    width: 85px;
  }
  .card-title{
    font-size: 20px !important;
  }
  .section{  
    min-height: 560px !important;
    position: relative;
  }
  .vertical-center {
    margin: 0;    
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
@media only screen and (max-width: 1440px) and (min-width:1200px)  {
  .card {
    height: 170px;
  }
  .cardImg{
    width: 75px;
  }
  .card-title{
    font-size: 18px !important;
  }

  .section{  
    min-height: 560px !important;
    position: relative;
  }
  .vertical-center {
    margin: 0;    
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

@media only screen and (max-width: 1199px) and (min-width:768px)  {
  .card {
    height: 140px;
  }
  .cardImg{
    width: 70px;
  }

  .card-title{
    font-size: 17px !important;
  }

  .section{  
    min-height: 560px !important;
    position: relative;
  }
  .vertical-center {
    margin: 0;    
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

@media only screen and (max-width: 767px) and (min-width:425px)  {
  .card {
    height: 130px !important;
  }
  .cardImg{
    width: 65px;
  }
  .card-title{
    font-size: 16px !important;
  }
  .img-fluid{
    display: none !important;
  }
}

@media only screen and (max-width: 424px) and (min-width:320px)  {
  .card {
    height: 130px !important;
  }
  .cardImg{
    width: 65px;
  }
  .card-title{
    font-size: 16px !important;
  }
  .img-fluid{
    display: none !important;
  }
}