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

body {
  font-family: sans-serif;
  background: #fff;
  color: black;
  line-height: 1.6;
}

ul {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

h1,
h2 {
  font-weight: 300;
  line-height: 1.2;
}

/* Navbar */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #333;
  color: #fff;
  opacity: 0.9;
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0px;
  padding: 0 30px;
  z-index: 3;
  transition: 0.5s;
}

.navbar a {
  color: #fff;
  padding: 10px 20px;
  margin: 0 10px;
}

.top {
  background: transparent;
}

.navbar a:hover,
.navbar a.current {
  border-bottom: #00308f 2px solid;
}

.navbar a.logo-link {
  border-bottom: none;
}

.navbar ul {
  display: flex;
}

.hero {
  background: url(../images/header-image.jpg) no-repeat center center/cover;
  height: 100vh;
  position: relative;
  color: #fff;
}

/* header image placement */
.hero .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 0 20px;
}

/* header content styles */
.hero .content h1 {
  font-size: 50px;
}

.hero.content h1 > p {
  font-size: 2rem;
  max-width: 600px;
  margin: 20px 0px 30px;
}

/* overlay */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

/* bring the text to show well, ( anything that is in hero set it to 10) */
.hero .content * {
  z-index: 1;
}

.icons {
  padding: 30px;
}

.icons i {
  background-color: var(--primary-color);
  color: #fff;
  padding: 1rem;
  border-radius: 50%;
  margin-bottom: 15px;
}

.grid-items > div {
  display: flex;
  flex-direction: column;
  border: var(--secondary-color) 2px solid;
  padding: 20px;
  align-items: center;
}

.layout2-grid.column-1 {
  display: flex;
  width: 50%;
  flex-grow: 0;
}

#Jobs .meet-clients h4 {
  color: var(--secondary-color);
}

#Jobs .meet-clients h4 span {
  color: var(--primary-color);
}

#Jobs .meet-clients a {
  margin-top: 2rem;
}

#categories h4 {
  font-size: 2rem;
  text-align: center;
}

.expect-grid .expect-items i {
  background-color: var(--primary-color);
  color: #fff;
  padding: 1rem;
  border-radius: 50%;
  margin-bottom: 15px;
}

.expect-items > div {
  display: flex;
  flex-direction: column;
  padding: 20px;
  align-items: center;
  background-color: var(--secondary-color);
  border-radius: 10px;
  margin: 1rem;
}

#why-NobleTrust .why-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

#why-NobleTrust .why-box .why-inside-box {
  background-color: #fff;
  height: 80%;
  width: 60%;
  border-radius: 30px;
  padding: 3%;
  overflow: hidden;
}

#why-NobleTrust .why-box .why-inside-box ul li {
  font-size: 20px;
  line-height: 4rem;
  font-weight: bolder;
  text-align: center;
}

.circle-span1 {
  width: 100px;
  height: 100px;
  background-color: var(--secondary-color);
  border-radius: 50%;
  animation: animate;
  transform: translateX(-40%);
}

.circle-span2 {
  width: 100px;
  height: 100px;
  background-color: var(--secondary-color);
  border-radius: 50%;
  transform: translateX(120%);
}

.circle-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10fr;
}

#why-NobleTrust {
  background-color: var(--primary-color);
}

#why-NobleTrust .why-image-tag {
  display: flex;
  width: 50%;
  height: 50%;
  object-fit: cover;
}

.why-grid .why-message img {
  display: block;
  margin: auto;
  width: 50%;
}

.why-grid .why-message {
  text-align: center;
  padding: 30px;
}

.why-grid .why-message h4 {
  font-size: 2rem;
  color: #fff;
}

.why-grid .why-message p {
  color: #fff;
  text-align: justify;
}

.content-count h2 {
  color: #fff;
  text-align: center;
}

.question .question-grid .ask-items img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.question .question-grid:first-child {
  padding: 30px;
}

.question .question-grid:first-child h3 {
  font-size: 2rem;
  color: var(--primary-color);
}

.question .question-grid:first-child h3 span {
  color: var(--secondary-color);
}

#say {
  background-color: black;
  padding-top: 30px;
}

#say .say-head h2 {
  display: block;
  text-align: center;
  color: var(--secondary-color);
  font-weight: bolder;
  font-size: 55px;
}

#say .say-head h2 span {
  color: #fff;
}

.review-grid .review-items i {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: 1rem;
  border-radius: 50%;
  margin-bottom: 15px;
}

.review-grid .review-items p {
  color: #fff;
}

.review-grid .review-items .review-wrap h5 {
  color: #fff;
  margin-top: 5%;
}

.review-grid .review-items .review-wrap h6 {
  color: #fff;
}

.contact-form-parent .contact-form-child:first-child {
  background-color: var(--secondary-color);
  padding: 35px;
  line-height: 36px;
}

.contact-form-parent .contact-form-child h3 {
  font-size: 40px;
  color: var(--primary-color);
}

.contact-form-parent .contact-form-child label {
  display: block;
  font-size: 20px;
}

.contact-form-parent .contact-form-child input,
.contact-form-parent .contact-form-child textarea {
  width: 100%;
  height: 30px;
  border-radius: 5px;
  border: var(--primary-color) 1px solid;
  padding: 10px;
  font-size: 14px;
}
.contact-form-parent .contact-form-child textarea:focus,
.contact-form-parent .contact-form-child input:focus {
  outline: none;
}

.contact-form-parent .contact-form-child textarea {
  height: 100px;
  border-radius: 10px;
  border: var(--primary-color) 1px solid;
  padding: 20px;
  font-size: 18px;
}

.contact-form-parent .contact-form-child textarea:focus,
.contact-form-parent .contact-form-child input:focus {
  border: var(--primary-color) 2px solid;
}

.mfooter-parent .mfotter-child p {
  color: #fff;
  font-size: 13px;
}

.fotter-icon-parent a {
  color: #fff;
  font-size: 13px;
}

.fotter-icon-parent .fi-child a {
  margin: 5px;
  font-size: 20px;
}

/* 
***********************About page************************* */

.about-hero {
  background: url(../images/aboutus-hero.jpg) no-repeat center center/cover;
  height: 80vh;
  position: relative;
  color: #fff;
}

/* header image placement */
.about-hero .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 0 20px;
}

/* header content styles */
.about-hero .content h1 {
  font-size: 50px;
}

.about-hero .content h1 span {
  color: var(--secondary-color);
}

.about-hero .content .btn {
  margin-top: 15px;
}

.about-hero.content h1 > p {
  font-size: 2rem;
  max-width: 600px;
  margin: 20px 0px 30px;
}

/* overlay */
.about-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

/* bring the text to show well, ( anything that is in hero set it to 10) */
.about-hero .content * {
  z-index: 1;
}

/* Main styles  */

#different-section {
  height: 150px;
  background-color: #f4f4f4;
}

.different-parent {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 20px;
  height: 100%;
  width: 100%;
}

.different-parent .different-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-style: italic;
  font-size: 15px;
  font-weight: bolder;
  color: var(--primary-color);
}

.introduction-parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.introduction-parent .introduction-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.introduction-parent .introduction-child img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.introduction-parent .introduction-child:last-child {
  text-align: justify;
  padding: 30px;
  background-color: #f4f4f4;
  line-height: 30px;
}

.introduction-parent .introduction-child:last-child h2 {
  font-weight: bolder;
  margin-bottom: 20px;
}

.introduction-parent .introduction-child:last-child p {
  margin: 15px;
}

.story-parent {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding-top: 30px;
  height: 100%;
  width: 100%;
}

.story-parent .story-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 15px;
  font-weight: bolder;
  color: var(--primary-color);
}

.story-parent .story-child span {
  color: var(--secondary-color);
}

.story-parent .story-child h3 {
  font-size: 43px;
}

.sy-mes-parent {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 20px;
  height: 100%;
  width: 100%;
}

.sy-mes .sy-mes-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: justify;
  font-size: 15px;
  padding: 0 30px;
  line-height: 2rem;
}

.sy-mes .sy-mes-child p {
  margin-top: 10px;
}

.services-parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  height: 100%;
  padding: 30px;
}

.services-parent .services-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.services-parent .services-child img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-parent .services-child:first-child {
  border: var(--secondary-color) 2px solid;
  border-radius: 50%;
  overflow: hidden;
}

.services-parent .services-child h3 {
  color: var(--primary-color);
  font-size: 3rem;
}

.services-parent .services-child .ser-head {
  text-decoration: underline;
}

.services-parent .services-child p {
  text-align: justify;
}

.we-offer-parent {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 30px;
  height: 100%;
  width: 100%;
}

.we-offer-parent .we-offer-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: justify;
  font-size: 15px;
}

.we-offer-parent .we-offer-child h3 {
  color: var(--primary-color);
  text-transform: uppercase;
}

.we-offer-parent .we-offer-child p {
  margin-top: 20px;
}

.who-parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 40px;
  padding: 30px;
}

.who-parent .who-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: justify;
}

.who-parent .who-child h4 {
  color: var(--primary-color);
}

.who-parent .who-child span {
  color: var(--primary-color);
}

.who-parent .who-child:last-child p {
  margin-top: 8px;
}

.who-parent .who-child:first-child p {
  line-height: 40px;
}

.about-ques {
  background-color: var(--secondary-color);
  height: 200px;
}

.about-ques-parent {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  width: 100%;
  height: 100%;
  z-index: 3;
}

.about-ques-parent .about-ques-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about-ques-parent .about-ques-child h3 {
  color: var(--primary-color);
  font-size: 35px;
}

.about-ques-parent .about-ques-child span {
  color: #fff;
}

.about-ques-parent .about-ques-child .btn {
  margin-top: 3%;
}

/* 
*****************Contact Us Page *********************** */

.contact-hero {
  background: url(../images/contact-us.jpg) no-repeat center center/cover;
  height: 80vh;
  position: relative;
  color: #fff;
}

/* header image placement */
.contact-hero .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 0 20px;
}

/* header content styles */
.contact-hero .content h1 {
  font-size: 50px;
}

.contact-hero .content h1 span {
  color: var(--secondary-color);
}

.contact-hero .content .btn {
  margin-top: 15px;
}

.contact-hero.content h1 > p {
  font-size: 2rem;
  max-width: 600px;
  margin: 20px 0px 30px;
}

/* overlay */
.contact-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

/* bring the text to show well, ( anything that is in hero set it to 10) */
.contact-hero .content * {
  z-index: 1;
}

/* **** Main Styles **** */

.customer-parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.customer-parent .customer-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.customer-parent .customer-child img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-parent .customer-child:last-child {
  overflow: hidden;
  border-radius: 10px;
  margin: 40px;
}

.customer-parent .customer-child:first-child {
  padding: 40px;
}

.customer-parent .customer-child h2 {
  color: var(--primary-color);
  font-weight: bolder;
  font-size: 2rem;
}

.customer-parent .customer-child span {
  color: var(--secondary-color);
}

.customer-parent .customer-child p {
  font-size: 20px;
  margin-top: 30px;
}

.customer-parent .customer-child i {
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.get {
  background: url(../images/contact-overlay.jpg) no-repeat center center/cover;
  height: 800px;
  position: relative;
}

/* overlay */
.get::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

/* bring the text to show well, ( anything that is in hero set it to 10) */
.get .get-parent * {
  z-index: 1;
}

.get-parent {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  width: 100%;
  height: 100%;
}

.get-parent .get-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.get-parent .get-child form {
  justify-content: center;
  background-color: #fff;
  border-radius: 10px;
  width: 50%;
  padding: 20px;
  line-height: 30px;
  margin: auto;
}

.get-parent .get-child form label {
  display: block;
}

.get-parent .get-child form textarea,
.get-parent .get-child form input {
  width: 100%;
  border-radius: 5px;
  padding: 10px;
}

.get-parent .get-child form textarea:focus,
.get-parent .get-child form input:focus {
  outline: none;
  border: var(--secondary-color) 2px solid;
}

.get-parent .get-child form input {
  height: 30px;
}

.get-parent .get-child form h3 {
  text-transform: uppercase;
  font-size: 2rem;
  color: var(--primary-color);
}

.formgroup .error-txt {
  font-size: 14.5px;
  color: red;
  text-align: left;
  margin: -5px 0 10px;
  display: none;
}

.formgroup.error .item {
  border: red 2px solid;
}

.formgroup.error .error-txt {
  display: block;
}

/* ****************Get Started ************************** */
.signup-hero {
  background: url(../images/get-started-banner.jpg) no-repeat center
    center/cover;
  height: 60vh;
  position: relative;
  color: #fff;
}

/* header image placement */

.content-parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.signup-hero .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: center;
  height: 100%;
  padding: 0 20px;
  padding-top: 100px;
}

/* header content styles */
.signup-hero .content h1 {
  font-size: 50px;
}

.about-hero .content h1 span {
  color: var(--secondary-color);
}

.signup-hero .content .btn {
  margin-top: 15px;
}

.content-parent .content span {
  color: var(--secondary-color);
}

.content-parent .content p {
  text-align: justify;
  font-size: 18px;
}

/* overlay */
.signup-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/* bring the text to show well, ( anything that is in hero set it to 10) */
.signup-hero .content * {
  z-index: 1;
}

/* 
Get Started Main styles  */

.overview-parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5fr;
}

.overview-parent .overview-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  padding-top: 70px;
}

.overview-parent .overview-child img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-parent .overview-child .img-overview {
  width: 30%;
  border: var(--primary-color) 2px solid;
  border-radius: 50%;
  overflow: hidden;
}

.overview-parent .overview-child h2 {
  color: var(--primary-color);
  text-transform: uppercase;
  margin-top: 20px;
  font-weight: bolder;
}

.overview-parent .overview-child p {
  margin-top: 20px;
  text-align: justify;
}

.overview-parent .overview-child ol li {
  margin-top: 7%;
  text-align: justify;
}

.overview-parent .overview-child ol li span {
  color: var(--primary-color);
  font-weight: bolder;
}

.fill-parent {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 30px;
}

.fill-parent .fill-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fill-parent .fill-child h3 {
  color: var(--primary-color);
  text-decoration: underline;
  text-align: center;
}

.apply {
  background-color: #f4f4f4;
  height: 700px;
}

.apply-wrap {
  box-shadow: 5px -2px 39px -6px rgba(0, 0, 0, 0.75);
  padding: 20px;
  width: 50%;
  border-radius: 15px;
}

.apply-parent {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  width: 100%;
  height: 100%;
}

.apply-parent .apply-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.apply-parent .apply-child input {
  width: 100%;
  outline: none;
  height: 30px;
  margin-top: 20px;
}
.apply-parent .apply-child select .val,
.apply-parent .apply-child input::placeholder {
  color: var(--primary-color);
}

.apply-parent .apply-child select {
  width: 30%;
  margin: 10px 15px;
}

.apply-child .form-select {
  display: flex;
  align-items: center;
  justify-content: center;
}

.apply-parent .apply-child h3 {
  color: var(--primary-color);
  text-transform: uppercase;
  font-size: 25px;
  text-align: center;
}

.apply-parent .apply-child .apply-wrap .btn {
  margin-top: 20px;
}

.apply-parent .apply-child .apply-wrap p {
  margin-top: 10px;
}

.apply-parent .apply-child .form-fotter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.apply-parent .apply-child .form-fotter a {
  text-decoration: underline;
  color: var(--secondary-color);
  font-weight: bolder;
}

.apply-parent .apply-child .form-fotter a:hover {
  color: var(--primary-color);
}

.apply-parent .apply-child .countryUploadWrap {
  display: flex;
}

.apply-parent .apply-child #passportwrap #country label {
  font-size: 10px;
  display: none;
}

.countryUploadWrap #passportwrap input {
  display: inline-block;
}

body
  > main
  > section.apply
  > div
  > div
  > div
  > form
  > div.countryUploadWrap
  > div:nth-child(2)
  > label {
  display: inline-block;
  color: var(--primary-color);
}

#myfile {
  display: inline-block;
  margin-top: -10px;
}

body
  > main
  > section.apply
  > div
  > div
  > div
  > form
  > div.countryUploadWrap
  > div:nth-child(1)
  > label {
  color: var(--primary-color);
  font-size: 14px;
}
/* ============= SUCESS MESSAGE ON SIGNUP FORM ============= */

#successMessage p:first-child {
  text-align: center;
  background-color: green;
  color: white;
  margin-top: 1rem;
  font-size: 14px;
  font-weight: bold;
}

#successMessage p:last-child {
  text-align: center;
  color: green;
}

#userNameErrorTxt,
#nameErrorTxt,
#passwordErrorTxt,
#successMessage,
#userExists,
#empty-fields,
#emailErrorTxt,
#passwordErrorTxt {
  display: none;
}

#userNameErrorTxt p,
#nameErrorTxt p,
#emailErrorTxt p,
#passwordErrorTxt p {
  color: red;
  font-size: 10px;
  font-weight: bold;
}

#userExists p,
#empty-fields p {
  text-align: center;
  font-size: 14px;
  color: red;
  font-weight: bold;
}

/* **********************Login Pages************************ */

.log {
  height: 100vh;
}

.log-parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  height: 100%;
}

.log-parent .log-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.log-wrap {
  width: 60%;
  padding: 20px;
  box-shadow: -8px 3px 23px 0px rgba(0, 0, 0, 0.25);
  background-color: #fff;
}

.log-parent .log-child img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.log-parent .log-child label {
  display: block;
}
.log-parent .log-child .item {
  width: 100%;
  height: 40px;
}

.log-parent .log-child h1 {
  font-weight: bolder;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--primary-color);
  text-align: center;
}

.log-parent .log-child:last-child .formgroup {
  margin-top: 20px;
}

.log-parent .log-child:last-child {
  line-height: 40px;
  background-color: var(--primary-color);
}

.log-parent .log-child .rem-wrap {
  display: flex;
}

.log-parent .log-child .rem-wrap a {
  margin-left: 20%;
  color: var(--primary-color);
  justify-self: flex-end;
  font-size: 10px;
}

.log-parent .log-child .rem-wrap label {
  margin-left: 10px;
}

.log-parent .log-child:last-child .btn {
  width: 100%;
}

.log-parent .log-child:last-child .log-footer {
  text-align: center;
}

.log-parent .log-child:last-child .log-footer a {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: bold;
}

/* ==========ERROR AND SUCCESS MESSAGE ============== */
#password2ErrorTxt,
#userErrorTxt,
#passError,
#fieldsError,
#successTxtLogin {
  display: none;
}

#successTxtLogin P {
  text-align: center;
  font-size: 12px;
  color: green;
  font-weight: bold;
}

#fieldsError p {
  text-align: center;
  font-size: 12px;
  color: red;
  font-weight: bold;
}

#passError p {
  font-size: 10px;
  color: red;
  font-weight: bold;
  margin-top: -8px;
}

#userErrorTxt p {
  font-size: 10px;
  color: red;
  font-weight: bold;
  margin-top: -8px;
  margin-bottom: -14px;
}

#password2ErrorTxt p {
  font-size: 10px;
  color: red;
  font-weight: bold;
}

/* ----LOGIN PAGE EYE PASSWORD STYLES --- */

#password-container {
  position: relative;
}

#password-container .fa-eye-slash,
#password-container .fa-eye {
  position: absolute;
  right: 3%;
  bottom: 13px;
  cursor: pointer;
}

/* ----SIGNUP PAGE EYE PASSWORD STYLES --- */
#SignupPassword {
  position: relative;
}

#SignupPassword .fa-eye-slash,
#SignupPassword .fa-eye {
  position: absolute;
  right: 3%;
  bottom: 6px;
  cursor: pointer;
  color: var(--primary-color);
}