:root {
  --theme-color: #153d42;
  --hover-cyan: cyan;
  --hover-color2: brown;
  --hover-red: rgba(255, 0, 0, 0.664);
  --hover-yellow: yellow;
  --font-roboto: "Roboto", sans-serif;
  --font-ubuntu: "Ubuntu", sans-serif;
  --font-openSans: "Open Sans", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  /* outline: 2px solid red; */
}

body {
  background: #fafafa;
  font-family: var(--font-roboto);
  overflow-x: hidden;
}
html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media (min-width: 1920px) {
  html {
    font-size: 85%;
  }
}@media (max-width: 1920px) {
  html {
    font-size: 85%;
  }
}

@media (max-width: 1500px) {
  html {
    font-size: 70%;
  }
}

@media (max-width: 1440px) {
  html {
    font-size: 67%;
  }
}

@media (max-width: 1200px) {
  html {
    font-size: 60%;
  }
}

@media (max-width: 980px) {
  html {
    font-size: 58%;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 52%;
  }
}
@media (max-width: 480px) {
  html {
    font-size: 46%;
  }
}
@media (max-width: 400px) {
  html {
    font-size: 42%;
  }
}

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.8rem;
}
h3 {
  font-size: 1.5rem;
}
p {
  font-family: var(--font-openSans);
  font-size: 1.2rem;
  font-weight: 400;
}
.fa {
  font-size: 1.3rem;
}
a {
  height: inherit;
  color: inherit;
  text-decoration: none;
}

/* nav-bar  */
.nav-bar {
  height: 9rem;
  width: 100vw;
  background-color: #fafafa;
  outline: 2px solid #153d42;
  position: fixed;
  top: 0;
  z-index: 10;
  box-shadow: 0 0 18px 2px black;
}
.upper-nav {
  height: 2.5rem;
  width: 100vw;
  display: grid;
  background-color: black;
  grid-template-columns:
    repeat(2, minmax(12rem, 11vw)) repeat(auto-fill, minmax(11rem, 41%))
    repeat(4, minmax(2.5rem, 2vw));
  justify-content: center;
  z-index: 20;
}
.upper-nav-box a {
  color: white;
  font-family: var(--font-roboto);
  font-size: 0.8rem;
  transition: all 0.2s ease-in;
  line-height: 2.5rem;
}
.upper-nav-box a:hover {
  color: var(--hover-cyan);
}
#nav-logo {
  position: fixed;
  top: 2.5rem;
  left: 3vw;
  height: 6.3rem;
  width: 8rem;
  background-image: url("images/logoTrnsp.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 11;
}
.nav-logo-text {
  position: relative;
  right: -102%;
  top: 0.7rem;
  font-size: 2.4rem;
  font-weight: 600;
  color: black;
  /* text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; */
  font-family: 'FontAwesome';
  font-style: italic;
}

.recruitment{
  color: #1d75bd;
}

.lower-nav {
  width: 100vw;
  position: relative;
  display: grid;
  grid-template-columns: minmax(31rem, auto) 13% 10% 21% 12% 2%;
  grid-template-rows: 1fr;
  align-content: center;
  font-family: "Ubuntu";
  font-size: 1.3rem;
  font-weight: 500;
  position: relative;
}

.navBox {
  height: 6.5rem;
  color: black;
  text-align: center;
  line-height: 6.5rem;
  transition: all 0.3s ease-in;
  cursor: pointer;
  position: relative;
}
.navBox:hover {
  color: white;
  background-color: var(--hover-color2);
}
/* nav-services box*/

#navBox4i {
  background-color: var(--hover-color2);
  color: white;
  position: absolute;
  height: 63vmin;
  line-height: 9vmin;
  top: 6.5rem;
  width: 150%;
  display: flex;
  flex-direction: column;
  display: none;
  animation:  0.4s ease-in 1 forwards;
}
.navBox4iBox {
  width: 100%;
  position: relative;
  font-weight: 400;
  transition: all 0.3s ease-in;
}
.navBox4iBox:hover {
  color: black;
  background-color:var(--hover-yellow);
}
.navBox4ii{
  color: black;
  position: absolute;
  background-color: var(--hover-yellow);
  top: 0;
  right: -120%;
  width: 100%;
  display: none;
  animation:  0.4s ease-in 1 forwards;
}
.navBox4ii p{
  font-weight: 600;
  transition: all 0.3s ease-in;
}
.navBox4ii p:hover{
  background-color:var(--hover-red);
}


/* nav - training & development */
#navBox5i {
  background-color: var(--hover-color2);
  color: white;
  position: absolute;
  height: 15vmin;
  top: 6.5rem;
  right: 14%;
  width: 21%;
  text-align: center;
  line-height: 15vmin;
  display: flex;
  flex-direction: column;
  display: none;
  animation:  0.4s ease-in 1 forwards;
}
.navBox5iBox {
  width: 100%;
  position: relative;
  font-weight: 400;
  transition: all 0.3s ease-in;
}
.navBox5iBox:hover {
  color: black;
  background-color:var(--hover-yellow);
}
/* ham Button */

.menuButton {
  background-color: #333;
  height: 5.5rem;
  width: 10vw;
  position: fixed;
  top: 3rem;
  right: 3vw;
  border-radius: 10px;
  border: 2px solid black;
  z-index: 10;
  font-size: 1.3rem;
  font-family: var(--font-openSans);
  display: none;
}

.menuButton #myLinks {
  height: auto;
  display: none;
}

.menuButton a {
  color: white;
  text-decoration: none;
  display: block;
  height: 6rem;
  padding-top: 2.6vmin;
  padding-left: 2vw;
  font-family: var(--font-ubuntu);
  font-size: 2rem;
  text-align: left;
}

.menuButton a.icon {
  height: 5rem;
  width: 100%;
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 2.5vmin;
  padding-left: 40%;
  border-radius: inherit;
}

.menuButton a:hover {
  background-color: #ddd;
  color: black;
}

#activeMenuWidth {background-color: transparent;}
.activeMenu {
  background-color: var(--theme-color);
  color: white;
}

/* media frames for nav-bar*/

@media (max-width: 1000px) {
  .lower-nav {
    display: none;
  }
  .menuButton {
    display: block;
  }
}

/*  message us */ 

#message-Us{
  height: auto;
  width: auto;
  position: fixed;
  bottom: 3vmin;
  right: 4vw;
  z-index: 20;
  border: 2px solid black;
  background-color: #54c7cb;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
#message-Us:hover{
  box-shadow: 0 0 10px 2px black;
}

#message-form{
  position: fixed;
  bottom: 1vmin;
  right: 3vw;
  border: 2px solid black;
  z-index: 19;
  background-color: rgb(10 10 20 / 80%);
  backdrop-filter: blur(37px);
  animation:  0.3s ease-in 1 forwards forwards;
  opacity: 0;
  display: none;
}

@keyframes message {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

#survey-form1 {
  display: flex;
  flex-direction: column;
}
.form-group1 {
  margin: 5vmin 3rem 2vmin 2rem;
  width: 28vw;
  text-align: center;
}
.form-control1 {
  height: auto;
  font-size: 1.5rem;
  font-family: var(--font-roboto);
  padding: 1vmin 8% 1vmin 3%;
  width: 88%;
}
.input-textarea1 {
  height: auto;
  font-size: 1.5rem;
  font-family: var(--font-roboto);
  padding: 3vmin 8% 6vmin 3%;
  width: 89%;
}
.submit-button1 {
  font-family: var(--font-roboto);
  color: white;
  background-color: green;
  border: 2px solid seashell;
  padding: 1vmin 10%;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.3s ease-in;
}
.submit-button1:hover {
  color: black;
  background-color: var(--hover-yellow);
  font-size: 1.6rem;
}


/* backgroundImg */
.backgroundImg {
  z-index: -1;
  height: 80vmin;
  width: 100vw;
  background-image: url("images/background2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-position-y: 30%;
  position: fixed;
  top: 20vmin;
  margin-top: 11rem;
}
.content {
  z-index: 100;
  margin-top: -20vmin;
}
.description {
  text-align: center;
  padding-bottom: 24vmin;
  margin-top: 24vmin;
}
.heading {
  color: wheat;
  font-size: 5rem;
  font-weight: bold;
  font-family: var(--font-ubuntu);
  text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black,
    -1px -1px 0 black;
}
.description h1 {
  color: white;
  font-family: var(--font-ubuntu);
  text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black,
    -1px -1px 0 black;
}

.container {
  height: 90vmin;
  width: 100vw;
  display: grid;
  position: relative;
  padding-top: 10vmin;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  background-color: #fafafa;
  grid-column-gap: 2vw;
  grid-row-gap: 5vmin;
  position: relative;
}

.dummyBtns{
  height: auto;
  width: auto;
  padding: 2vmin 3vw;
  position: absolute;
  border: 2px solid black;
  border-radius: 10px;
  font-size: 2rem;
  font-family: var(--hover-color2);
  cursor: pointer;
  transition: all 0.3s ease-in;
}
.dummyBtns:hover{
  font-size: 2.5rem;
}
#dummy1{
  top: 20%;
  left: 5%;
  background-color: lightgrey;
}
#dummy2{
  top: 40%;
  left: 5%;
  background-color: lightgrey;
}
#dummy3{
  top: 60%;
  left: 5%;
  background-color: orangered;
}
#dummy4{
  top: 20%;
  left: 30%;
  background-color: darkgrey;
}
#dummy5{
  top: 80%;
  left: 30%;
  background-color: green;
  color: white;
}
#dummy6{
  top: 80%;
  left: 42%;
  background-color: #dbc6ad;
}
#dummy7{
  top: 80%;
  left: 60%;
  background-color: #dbc6ad;
}
#dummy8{
  top: 80%;
  left: 80%;
  background-color: red;
}
.formGroup{
  
background-color: #7c7062;
}

.formControl {
  display: block;
  width: 100%;
  padding: 1vmin 2vw;
  font-size: 2rem;
  color: black;
  background-color: #dbc6ad;
  transition: all 0.3s ease-in;
}
.formControl:hover {
 font-size: 2.5rem;
}
.formControl option {
  color: #000;
  font-size: 2rem;
  background-color: bisque;
}

.formControl:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
#dummy9{
  width: 46vw;
  top: 40%;
  left: 30%;
  padding: 0;
}
#dummy10{
  top: 60%;
  left: 30%;
  width: 46vw;
  padding: 0;
}

/* contact Us section */
#contactUs {
  height: auto;
  width: 100vw;
  background-color: #fafafa;
  padding-top: 24vmin;
}
.contacts-themeColor {
  height: auto;
  width: 100vw;
  margin-top: 2vmin;
  padding: 0vmin 0 10vmin 0;
  position: relative;
}
.contacts-container {
  height: auto;
  width: 100vw;
  /* background-color: black; */
  background-image: radial-gradient(#3c3434, #201f1f,#222222 );
  color: white;
  padding: 10vmin 0 0 0;
  display: grid;
  grid-template-columns: 0.5fr 0.8fr 1fr;
  grid-template-rows: auto auto auto;
  position: relative;
  align-content: center;
}

#qrCode {
  grid-area: 1/1/2/2;
  height: auto;
  width: 100%;
  background-image: url("images/qrCode.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-in;
}

#qrCode:hover {
  background-size: 70%;
}
#googleMaps {
  grid-area: 2/1/3/2;
  height: auto;
  width: 100%;
  background-image: url("images/googleMaps.png");
  background-size: 110%;
  background-position: center;
  transition: all 3s ease-in;
}

#googleMaps:hover {
  background-size: 250%;
}
#contacts-contacts {
  grid-area: 1/2/2/3;
  padding-left: 3vw;
}
#contacts-location {
  grid-area: 2/2/3/3;
  padding: 0 3vw;
}
#contacts-location p {
  font-size: 1rem;
}
#contacts-form {
  grid-area: 1/3/3/4;
  align-items: center;
}

#contacts-hireYou {
  grid-area: 3/1/4/4;
  padding: 0 4vw;
}

#contacts-contacts a {
  color: white;
  font-size: 1rem;
}
#survey-form {
  color: red;
  display: flex;
  flex-direction: column;
  margin-left: -8%;
}
.form-group {
  margin-top: 4rem;
  width: 100%;
  text-align: center;
}
.form-control {
  height: auto;
  font-size: 1.5rem;
  font-family: var(--font-roboto);
  padding: 1vmin 8% 1vmin 3%;
  width: 85%;
}
.input-textarea {
  height: auto;
  font-size: 1.5rem;
  font-family: var(--font-roboto);
  padding: 3vmin 8% 6vmin 3%;
  width: 85%;
}
.submit-button {
  font-family: var(--font-roboto);
  color: white;
  background-color: green;
  border: 2px solid seashell;
  padding: 1vmin 10%;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.3s ease-in;
}
.submit-button:hover {
  color: black;
  background-color: var(--hover-yellow);
  font-size: 1.6rem;
}



.contactUsBOx4-pic {
  height: 50vmin;
  width: 100%;
  margin: 14vmin 0;
  background-image: linear-gradient( 115deg,rgb(5, 2, 2),rgba(22, 22, 24, 0.404)),url("images/contactUsBox4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: space-evenly;
}

.contactUsBOx4-text {
  height: 30%;
  width: auto;
  position: relative;
  top: 13vmin;
  left: 2vw;
}
.hireYouText {
  color: red;
  /* text-shadow: -1px 1px 0 white, 1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white; */
}
#contacts-logo {
  display: flex;
  margin-top: 7vmin;
  justify-self: center;
}
.contacts-logo-pic {
  height: 25vmin;
  width: 25vmin;
  border: 2px solid white;
  border-radius: 50%;
  background-image: url("images/logoTrnsp.png");
  background-size: 81%;
  background-color: aliceblue;
  background-repeat: no-repeat;
  margin: 0px 2rem;
  background-position: center;
  background-position-y: 30%;
}

.contacts-logo-link {
  height: 25vmin;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.contacts-logo-link a {
  color: white;
  transition: all 0.3s ease-in;
  outline: 2px solid black;
  padding: 2vmin;
}
.contacts-logo-link a:hover {
  font-size: 1.8rem;
}
footer {
  height: 10vmin;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  color: white;
  padding: 4vmin 3vw;
  position: absolute;
  bottom: 0;
  background-color: var(--theme-color);
}
@media (max-width: 768px) {
  footer {
    display: flex;
    flex-direction: column;
    margin-bottom: 2vmin;
  }
}
.contacts-logo {
  position: relative;
  top: 100%;
  width: auto;
  font-size: 2rem;
  font-weight: 600;
  color: white;
  /* text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; */
  font-family: var(--font-openSans);
}