:root {
    --siteWidth: 1200px;
    --dark: #333;
    --light: #fff;
    --lightShade: #f2f2f2;
    --orange: #FFBC57;
    --grey: #545454;
    --bodyFont: "Prata", serif;
    --headingFont: var(--bodyFont);
    --buttonFont: var(--headingFont);
        --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0);
    font-size: 100%;
}

html {
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    padding: 0em;
}

/*.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
   --bs-gutter-x: 5rem;  
}*/

h1, h2, h3, h4, h5, h6 {
    font-family: "Prata", serif;
    color: #000;
    font-weight: 400;
    line-height: 1.3;
    font-style: normal;
    letter-spacing:1px;
}

h1 {
    font-size:3rem;
}

h2 {
    font-size:2.5rem;
    padding-bottom:20px;
}

h3 {
    font-size:1.3rem;
    padding-bottom:20px;
}

p {
    font-family: "Prata", serif;
    color: #6A768E;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.8;
}

ol, ul {
    padding-left: 1rem;
}

li {
    font-family: "Prata", serif;
    color: #6A768E;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.8;
    margin: 8px 0px;
}

a {
    color: #000;
    text-decoration:none;
}

b, strong {
    font-weight: 600;
}

.headerBanner {
    height:100vh;
    background-image: linear-gradient(rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%) ;
    text-align:center;
    display:flex;
    align-items: center;
    background-size:cover; 
    background-position:50% 50%; 
    background-repeat:no-repeat;
}

.headerTitle h1 {
    color:#fff;
}

.headerTitle h2 {
    color:#fff;
    font-size:1.5rem;
    padding:30px 0px;
    font-style:italic;
}

.headerTitle h3 {
    color:#fff;
    font-size:1.2rem;
    font-style:italic;
}

.downArrow {
    width:40px;
    margin-top:30px;
}

.introPanel {
    text-align:center;
    /*display:flex;*/
    align-items: center;
    margin:0 auto;
}

.textWhite * {
    color:#fff;
}

.textBox {
    background-color:#fff;
    padding:50px;
}

.textBox h2 {
    padding-bottom:20px;
}

.textBox h3 {
    padding-bottom:20px;
}

.offsetImg img {
    margin-left:100px;
}

.services {
    text-align:center;
    display: flex;
    align-items: baseline;
}

.serviceBox {
    display:flex;
    align-items: center;
    justify-content: center;
    min-height:300px;
}

.serviceBox h3 {
    padding:20px;
}

.serviceBox img:hover {
  filter: brightness(0.90);
}

.serviceBox a {
    text-decoration:none;
    color:#000;
}

.serviceBox a:hover {
    text-decoration:none;
    color:#666;
}

.feedbackBox {
    padding:20px;
    background-color:#f2f2f2;
    margin:10px 0px;
}

.feedbackBox p {
    font-style:italic;
}

.footerPanel {
    text-align:center;
    display:flex;
    align-items: top;
    background-color:#f2f2f2;
}

.footerPanel h2 {
    padding-bottom:0px;
}

.footerPanel h3 {
    font-size:1.2rem;
    padding-bottom:20px;
}

.footerPanel p {
    color:#000;
}

.footerPanel a {
    color:#000;
    text-decoration:none;
}

.footerPanel a:hover {
    color:#666;
    text-decoration:none;
}

.logoPanel {
    text-align:center;
    display:flex;
    align-items: center;
} 

.logoImg {
    width:100%;
}

.textCentre {
    text-align:center;
}

.vertPad {
    padding:15px 0px;
}

.horPad {
    padding:0px 30px;
}

.padding30 {
    padding-top:30px;
    padding-bottom:30px;
}

.padtop30 {
    padding-top:30px;
}

.padbot30 {
    padding-bottom:30px;
}

.padding60 {
    padding-top:60px;
    padding-bottom:60px;
}

.padtop60 {
    padding-top:60px;
}

.padbot60 {
    padding-bottom:60px;
}

.padding100 {
    padding-top:100px;
    padding-bottom:100px;
}

.padtop100 {
    padding-top:100px;
}

.padbot100 {
    padding-bottom:100px;
}

img .icon {
    width:100%; 
    max-width:100px;
    margin-bottom:20px;
}

.fade-in {
    animation: fadeIn 3s;
    -webkit-animation: fadeIn 3s;
    -moz-animation: fadeIn 3s;
    -o-animation: fadeIn 3s;
    -ms-animation: fadeIn 3s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/*  navbar */

.navbar {
background-color: rgba(0, 0, 0, 0.3);
}

.navbar-collapse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background-color: #3e4149;
}
.navbar-toggler,
.navbar-brand {
  z-index: 1;
}
.navbar-brand {
  font-size: 1.8em;
}
.navbar-toggler {
    border:1px!important;
}
.navbar-toggler:focus {
  box-shadow: none;
  border:1px!important;
}
.navbar-toggler:active {
  box-shadow: none;
  border:0px!important;
}
.navbar-collapse .nav-link {
  font-family: var(--headingFont);
  font-size: 1.2em;
  color: #fff;
  padding:5px 0px;
}
.navbar-collapse .nav-link:hover,
.navbar-collapse .nav-link.active {
  color: var(--orange);
}
.nav-item {
  padding: 0.1em 4em;
  margin:0px;
}
.nav-link {
    padding: 0px;
}

.navbar-collapse.show {
  transition: all 0.5s;
}

@media screen and (min-width: 768px) {
    .nav-item {
        padding: 0.1em 4em;
        margin: 0px;
    }
}

@media screen and (max-width: 420px) {
    .navbar-collapse .nav-link {
          font-size: 1.2em;
}   
}
/* end navbar */

/* media queries */
@media screen and (max-width: 600px) {
    h1 {
        font-size:1.8rem;
    }
    h2 {
        font-size:1.5rem;
    }
    .xsNone {
        display:none;
    }
    .headerTitle h2 {
    font-size: 1.1rem;
    }
    .headerTitle h3 {
    font-size: 1rem;
    }
    .textBox {
    padding:25px;
    }
    .headerBanner {
    background-position:90% 50%; 
    }
    .offsetImg img {
    margin-left:0px;
    }     
}

/* header images */

.homeBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%), url(images/construction-worker-computer-mob.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .homeBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%), url(images/construction-worker-computer.jpg);
        background-position:50% 50%;
}
}

.aboutBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%), url(images/shaking-hands-mob.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .aboutBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%), url(images/shaking-hands.jpg);
        background-position:50% 50%;
}
}

.answerBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%), url(images/plan-mob.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .answerBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%), url(images/plan.jpg);
        background-position:50% 75%;
}
}

.awardBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%), url(images/award-trophy-mob.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .awardBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.6) 100%), url(images/award-trophy.jpg);
        background-position:50% 75%;
}
}

.bidBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%), url(images/flag-at-the-top-mob.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .bidBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%), url(images/flag-on-blocks.jpg);
        background-position:50% 60%;
}
}

.capabilityBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.4) 100%), url(images/bulb-cogs-target-mob.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .capabilityBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%), url(images/bulb-cogs-target.jpg);
        background-position:50% 30%;
}
}

.isoBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%), url(images/iso-9001-mob.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .isoBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%), url(images/iso9001.jpg);
        background-position:50% 50%;
}
}

.marketBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%), url(images/magnifying-glass.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .marketBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%), url(images/magnifying-glass.jpg);
        background-position:50% 50%;
}
}

.taxBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 100%), url(images/tax-relief-mob.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .taxBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%), url(images/tax-relief.jpg);
        background-position:50% 50%;
}
}

.mockBanner {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%), url(images/five-star-blocks-mob.jpg);
    background-position:50% 50%;
}

@media screen and (min-width: 600px) {
    .mockBanner {
        background-image:linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%), url(images/five-star-wooden-blocks.jpg);
        background-position:50% 35%;
}
}
/* end header images */

/* panel images */

.aboutPanel {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.5) 100%), url(images/award-trophy-mob.jpg); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:50% 50%; 
    display:flex; 
    align-items: center;
}

@media screen and (min-width: 600px) {
    .aboutPanel {
        background-image:linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.3)), url(images/award-trophy.jpg);
        background-position:50% 50%;
}
}

.answerPanel {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%), url(images/bulb-cogs-target-mob.jpg); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:50% 50%; 
    display:flex; 
    align-items: center;
}

@media screen and (min-width: 600px) {
    .answerPanel {
        background-image:linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url(images/bulb-cogs-target.jpg);
        background-position:50% 20%;
}
}

.awardPanel {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%), url(images/advantage-mob.jpg); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:50% 50%; 
    display:flex; 
    align-items: center;
}

@media screen and (min-width: 600px) {
    .awardPanel {
        background-image:linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.4)), url(images/advantage.jpg);
        background-position:50% 50%;
}
}

.bidPanel {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%), url(images/shaking-hands-mob.jpg); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:50% 50%; 
    display:flex; 
    align-items: center;
}

@media screen and (min-width: 600px) {
    .bidPanel {
        background-image:linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.3)), url(images/shaking-hands.jpg);
        background-position:50% 50%;
}
}

.capabilityPanel {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%), url(images/growth-mob.jpg); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:50% 50%; 
    display:flex; 
    align-items: center;
}

@media screen and (min-width: 600px) {
    .capabilityPanel {
        background-image:linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.3)), url(images/growth-blocks.jpg);
        background-position:50% 60%;
}
}

.isoPanel {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%), url(images/flag-at-the-top-mob.jpg); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:80% 50%; 
    display:flex; 
    align-items: center;
}

@media screen and (min-width: 600px) {
    .isoPanel {
        background-image:linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.0)), url(images/flag-on-blocks.jpg);
        background-position:50% 60%;
}
}

.marketPanel {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%), url(images/report-computer-screen.jpg); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:50% 50%; 
    display:flex; 
    align-items: center;
}

@media screen and (min-width: 600px) {
    .marketPanel {
        background-image:linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.0)), url(images/report-computer-screen.jpg);
        background-position:50% 50%;
}
}

.taxPanel {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.5) 100%), url(images/review-mob.jpg); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:50% 50%; 
    display:flex; 
    align-items: center;
}

@media screen and (min-width: 600px) {
    .taxPanel {
        background-image:linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.2)), url(images/review.jpg);
        background-position:50% 90%;
}
}

.mockPanel {
    background-image:linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%), url(images/measuring-success-mob.jpg); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:50% 50%; 
    display:flex; 
    align-items: center;
}

@media screen and (min-width: 600px) {
    .mockPanel {
        background-image:linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url(images/measuring-success-ruler.jpg);
        background-position:50% 20%;
}
}
/* end panel images */