: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: 95%;
  }
}
@media (max-width: 1920px) {
  html {
    font-size: 95%;
  }
}

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


@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.3rem;
  font-weight: 400;
}
.fa {
  font-size: 1.3rem;
}
a {
  height: inherit;
  color: inherit;
  text-decoration: none;
}
.heading{
  padding-left: 3rem;
}

/* nav-bar  */

.header {
  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;
  position: fixed;
  top: 0;
}
.header-box a {
  color: white;
  font-family: var(--font-roboto);
  font-size: 0.8rem;
  transition: all 0.2s ease-in;
  line-height: 2.5rem;
}
.header-box a:hover {
  color: var(--hover-cyan);
  line-height: 3rem;
}
#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;
}

.nav-bar {
  width: 100vw;
  display: grid;
  grid-template-columns: minmax(32rem, auto) 10% 15% 15% 13% 18%;
  grid-template-rows: 1fr;
  align-content: center;
  font-family: "Ubuntu";
  font-size: 1.3rem;
  font-weight: 500;
  position: fixed;
  z-index: 20;
  top: 2.5rem;
  height: 6.5rem;
  background-color: #fafafa;
  box-shadow: 0 0 18px 2px black;
}

.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*/

.navBox-i-container {
  background-color: var(--hover-color2);
  color: white;
  position: absolute;
  height: 60.5vmin;
  line-height: 10.05vmin;
  top: 6.5rem;
  width: 150%;
  display: flex;
  flex-direction: column;
  display: none;
  animation: 0.4s ease-in 1 forwards;
}
.navBox-i-Box {
  width: 100%;
  position: relative;
  font-weight: 400;
  transition: all 0.3s ease-in;
}
.navBox-i-Box:hover {
  font-size: 1.5rem;
  background-color: var(--theme-color);
}



/* ham Button */

.menuButton {
  background-color: var(--theme-color);
  height: 5.5rem;
  width: 10vw;
  position: fixed;
  top: 3rem;
  right: 3vw;
  /* border: 2px solid black; */
  z-index: 100;
  font-size: 1.3rem;
  font-family: var(--font-openSans);
  display: none;
  transition: 0.7s;
}

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


.menuButton a.icon {
  height: 6rem;
  width: 100%;
  background: #fafafa;
  color: black;
  display: block;
  position: absolute;
  text-align: end;
  padding-right: 4vw;
  right: 0;
  top: 0;
  line-height: 6rem;
}

.menu-box{
  color: white;
  text-decoration: none;
  display: block;
  font-family: var(--font-ubuntu);
  text-align: left;
  font-size: 2rem;
  padding: 2rem 0 0 5vw;
  height: 6rem;
  cursor: pointer;
}
.menu-box:hover{
  background-color: var(--hover-color2);
  color: #fafafa;
}

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

/* menu inner box */

.menu-i-container{
  position: absolute;
  top: 0;
  right: 50vw;
  width: 46vw;
  background-color: var(--hover-color2);
  display: none;
  transition: 0.5s;
  animation: menuSlide 0.2s ease-in 1 forwards;
}
@keyframes menuSlide {
  from{
    right: 45vw;
  }
  to{
    right : 50vw;
  }
}
.menuInnnerBox:hover{
  background-color: var(--theme-color);
}
/* media frames for nav-bar*/

@media (max-width: 1355px) {
  .navBox {
    display: none;
  }
  .menuButton {
    display: block;
  }
}

/*  message us */
#message-Us {
  height: auto;
  width: auto;
  position: fixed;
  bottom: 7vmin;
  right: 4vw;
  z-index: 8;
  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: 7;
  background-color: rgb(10 10 20);
  /* 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%;
}



#messageIcon {
  font-size: 3rem;
  display: block;
}
#minimizeIcon {
  font-size: 3rem;
  display: none;
}
@media (max-width: 1355px) {
  #message-Us {
    bottom: 10vmin;
  }
  #messageIcon {
    font-size: 35px;
  }
  #minimizeIcon {
    font-size: 35px;
  }
  #message-form {
    bottom: 1vmin;
    right: 1.5vw;
    width: 96vw;
  }
  .form-group1 {
    margin: 5vh 0rem 2vh 0rem;
    width: 100%;
    text-align: center;
  }
  }
  
  

/* contact Us section */
#contactUs {
  height: auto;
  width: 100vw;
  background-color: #fafafa;
  padding-top: 7rem;
}
.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: 110%;
  margin-left: -5%;
  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;
}
#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: 1.2rem;
}
#contacts-form {
  grid-area: 1/3/3/4;
  align-items: center;
}

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

#contacts-contacts a {
  color: white;
  font-size: 1.2rem;
  transition: all 0.25s ease-in;
}
#contacts-contacts a:hover {
  color: cyan;
  font-size: 1.5rem;
}
#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;
  font-size: 1.4rem;
  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: auto;
  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: 1355px) {
  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);
}
.myDetails{
  font-size: 1.2rem; 
  font-weight: 500;
}
.myDetailsLinks{
  cursor: pointer;
  transition: all 0.25s ease-in;
}
.myDetailsLinks:hover{
  font-size: 1.5rem; 
  color: cyan;
}
/* For Submit Confirmation Box */
#submitConfirmation {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  background-color: rgb(80 80 210 / 10%);
  backdrop-filter: blur(6px);
  z-index: 9;
  display: none;
  animation:submitConfirmationBox 0.4s ease-in-out 1 forwards;
}
@keyframes submitConfirmationBox {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#submitConfirmationBox {
  height: 40vmin;
  width: 50vw;
  position: absolute;
  top: 35vmin;
  left: 25vw;
  background-color: #7bb7c3;
  box-shadow: 0 0 10px 1px black;
  padding-top: 6%;
  text-align: center;
}

#close {
  font-size: 2rem;
  position: absolute;
  top: 0.5vmin;
  right: 1vw;
  cursor: pointer;
  transition: all 0.2s ease-in;
  padding: 0 0.5em;
}
#close:hover {
  background-color: var(--hover-cyan);
}












/* untill here general setting for all sub-domains */



/* main -heading */
.main-heading{
  margin-top: 11rem;
}

/* home section carousal */

.carousel-container {
  border-radius: 20px;
  height: 40vw;
  width: 97vw;
  background: black;
  position: relative;
  border: 2px solid #00000066;
  /* box-shadow: 0 0 8px 0px black; */
  margin: auto;
  z-index: 0;
  font-family: var(--font-roboto);
  overflow: hidden;
  margin-top: 11rem;
}

/* Hide the images by default */
.mySlides {
  height: 100%;
  width: inherit;
  background-size: cover;
  background-position: center;
}
.mySlides img {
  height: inherit;
  width: inherit;
  background-size: cover;
  background-position: center;
  display: block;
}

#homePic1 {
  background-image: url("images/slideConstruction.png");
  background-position-y: 20%;
}
#homePic2 {
  background-image: url("images/slideOilNgas.png");
}
#homePic3 {
  background-image: url("images/slideHospitality.png");
}
#homePic4 {
  background-image: url("images/slideHospital.png");
}
#homePic5 {
  background-image: url("images/slideLogistics.png");
}
#homePic6 {
  background-image: url("images/slideEducation.png");
}
.number {
  color: white;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  font-family: var(--font-ubuntu);
  /* background-color: rgba(173, 216, 230, 0.15); */
  /* backdrop-filter: blur(3px); */
  position: absolute;
  bottom: 5vw;
  width: inherit;
  display: grid;
  /* border: 2px solid white; */
  grid-template-columns: 1fr 1fr 1fr;
  text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
  justify-items: center;
}
.indImgText{
  height: auto;
  width: auto;
  padding: 0.1rem 1rem;
  border-radius: 20px;
  background-color: rgba(173, 216, 230, 0.15);
  border: 2px solid white;
  backdrop-filter: blur(30px);
}
/* Next & previous buttons */
.prev,
.next {
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 7vw;
  text-align: center;
  line-height: 40vw;
  color: white;
  font-weight: bold;
  font-size: 2rem;
  border-radius: 0 8px 8px 0;
  user-select: none;
  transition: all 0.5s;
  z-index: 3;
}
.next {
  right: 0;
  border-radius: 8px 0 0 8px;
}
.prev:hover,
.next:hover {
  background-color: rgba(32, 34, 34, 0.3);
}

/* Caption text */
.text {
  color: seashell;
  background-color: rgba(10, 10, 20, 0.1);
  backdrop-filter: blur(30px);
  border-radius: 10px;
  font-size: 2rem;
  padding: 0.5rem 2rem;
  position: absolute;
  font-family: var(--font-ubuntu);
  top: 1vw;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  border: 2px solid seashell;
  text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
  z-index: 8;
}

.dots-container {
  position: absolute;
  bottom: 1vw;
  left: 50%;
  transform: translate(-50%);
}

/* The dots/bullets/indicators */
.dots {
  cursor: pointer;
  height: 1rem;
  width: 1rem;
  margin: 1vmin 0.5vw;
  background-color: #000000a8;
  border: 0.15rem solid seashell;
  backdrop-filter: blur(2px);
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s ease;
}
.active,
.dots:hover {
  background-color: white;
}

.dots:hover {
  border: 0.15rem solid black;
  background-color: yellow;
}

 /* Fading animation */

.animate {
  animation-name: animate;
  animation-duration: 8s;
}

@keyframes animate {
  from {
    transform: scale(1.2) rotateY(10deg);
    opacity: 0.8;
  }
  to {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
} 

.content {
  z-index: 100;
  padding-top: 6rem;
}

/* content */

.service-container {
  height: auto;
  width: 100vw;
  background-color: #fafafa;
  padding: 5vmin 2vw;
  display: flex;
  justify-content: center;
}
#construction {
  position: absolute;
  top: -13rem;
  color: transparent;
}
.industryText {
  font-weight: 600;
  position: relative;
}
.industryText h1 {
  padding-left: 5vw;
}
.list {
  font-weight: bold;
  display: flex;
  margin-top: 6vmin;
  padding: 0 2vw;
  font-family: var(--font-openSans);
}
.list ul {
  list-style: circle;
  padding: 0px 3vw;
}
.list ul li {
  margin: 1vmin 0;
}
.IndustrySideImg {
  height: auto;
  width: 50vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#IndustrySideImg1 {
  background-image: url("images/construction2.jpg");
}
#IndustrySideImg2 {
  background-image: url("images/oilNgas3.jpg");
}
#IndustrySideImg3 {
  background-image: url("images/hospitality2.jpg");
}
#IndustrySideImg4 {
  background-image: url("images/hospital.webp");
}
#IndustrySideImg5 {
  margin-left: 10vw;
  background-image: url("images/logistics.jpg");
}
#IndustrySideImg6 {
  background-image: url("images/teaching.jpg");
  background-position-x: left;
}