*{
  box-sizing: border-box;
}

/*
  ======= HEADER STYLING =======
 */


header {
  display: grid;
  grid-template-columns: 2fr, 6fr, 2fr;
  grid-template-rows: auto;
  text-align: center;
  align-items: center;
  padding: 1vw 0 1vw 0;
  justify-content: space-around;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  z-index: 2;
}

/*
======== LOGO ========
*/
.hLogo {
  grid-column: 1;
}
.homePageLogo {
  width: 30vw;
}

/*
======== NAV ========
*/

.hNav {
  grid-column: 2;
}
.hNav > a {
  padding: 0vw 1.5vw 1vw 1.5vw;
  font-size: 1.3vw;
  text-decoration: none;
  color: black;
}

.hNav a:hover {
  color: gray;
  border-top: 2px solid darkorange;
  background-color: white;
  border-radius: 10px;
}

/*
======== LANG ========
*/

.hLang {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.hLang a {
  padding: .5vw;
  font-size: .8vw;
  text-decoration: none;
  color: black;
}

.hLang a:hover {
  color: darkblue;
  box-shadow: -2px 0 0 0 darkorange;
}


/*
======= Back to Top =======
*/
.backToTop {
  position: fixed;
  top: 80vh;
  left:90%;
  border-radius: 50%;
  width: 7vw;
  border: 3px solid black;
  transform: rotate(180deg);
  opacity: .2;
  z-index: 5;
}

.backToTop:hover {
  opacity: 1;
  cursor: pointer;
  color: darkorange;
}

.bHide {
  display: none;
}


/*
=======
Main Section
=======
*/


/* About Us Heading */
    .pageHeadingImg {
      filter: blur(5px);
      opacity: .5;
      position: relative;
      object-fit: cover;
      width: 100%;
      height: 25vw;
      box-sizing: border-box;
    }

    .pageHeadTitle {
      position: absolute;
      left: 10%;
      top: 20%;
      font-size: 7vw;
      color: #001a4d;
      font-family: serif;
    }

			/* Page Body Section */
        #mobileMenuBtn {display: none}
        .bioBtn,
        .bioBtn2,
        .bioBtn3 {
          display: none;
        }


			.mainSection {
				position: relative;
				width: auto;
				box-sizing: border-box;
				margin: 1%;
				padding: 1%;
			}

			.aboutPageEmp1,
			.aboutPageEmp2,
			.aboutPageEmp3 {
				position: relative;
				left: 2%;
				padding: 3% 0;
				display: inline-flex;
				flex-direction: row;
				flex-wrap: wrap;
				position: relative;
				width: 100%;
				align-items: center;
				box-sizing: border-box;
			}

			.aboutPageImg {
				object-fit:cover;
				border-radius:50%;
				height: 30vw;
				width: 30vw;

			}

			.aboutName {
				color: #001a4d;
			}

			.empDescrip {
				position: relative;
				left: 2%;
				width: 55vw;
			}

			.empDescrip h2 {
				font-variant: small-caps;
        font-size: 2.5vw;
			}

      .empDescrip p {
        font-size: 1.5vw;
        padding-top: 1vw;
      }


  /*
  =====
  FOOTER SECTION
  ======
  */

  .siteFooter {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    justify-content: space-around;
    background-color: #003366;
    color: white;
    padding: 1.5vw;
    font-size: 1.5vw;
    align-items: center;
  }

  .footerDetails {grid-column: 1}
  .footerCredits {grid-column: 1}
  .footerContact {
    grid-column: 2;
    grid-row: 1;
  }
  .footerLocation {
    grid-column: 3;
    grid-row: 1;
  }


  /*--
  ====
  MOBILE SECTION
  ====
  --*/

  @media only screen and (max-width: 600px) {

    /* Adjusting the Logo & Nav */
    header {display: none;}
    .mobileHeader {
      display: grid !important;
      grid-template-columns: 1;
      grid-template-rows: 1;
    }

    .homePageLogo {
      grid-column: 1;
      grid-row: 1;
      padding: 3vw;
      width: 100%;
    }


    .pageHeadTitle {
      position: relative;
      width: 50%;
    }

    .pageHeadingImg {
      position: relative;
      top: -75px;
    }

    /*
    ===== Nav =====
    */
    #mobileMenuBtn {
      display: block;
      width: 35px;
      position: relative;
      top: 10px;
      left: 48%;
      z-index: 2;
      /* transform: rotate(45deg); */
    }

    .off { /* Used to toggle the menu */
      display: none;
      height: auto;
    }

    .mobileMenuTab {  /* Effectively the Menu Container for mobile */
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5px 0 10px 0;
    }

    .hNav {
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto auto auto auto auto;
      text-align: center;
    }
    .hNav > a {
      font-size: 2em;
      border-bottom: 2px solid rgba(0, 50, 102, .2);
    }

    .hLang {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .hLang > a {
      margin: 2% 5%;
      font-size: 1.1em;
    }



    /* Adjusting the Header & IMG */

    main {
      position: relative;
    }

      .backToTop {
        background-color: #9BC9FF;
        opacity: 1;
        border-color: #9BC9FF;
      }

    /* Adjusting the Main Content */
    .mainSection {
      top: -50px;
    }

    .mainSection > div { /*Creates a column */
      display: flex;
      flex-direction: column;
    }

    .imgNameTitle {text-align: center;}
    .aboutPageImg {
      width: 50%;
      height: 50%;
    }
    .empDescrip{width: 90%}

    .bioBtn,
    .bioBtn2,
    .bioBtn3 {
      display: flex;
      justify-content: space-between;
      padding: 5px 10px;
      margin: 3px 5px;
      box-shadow: 2px 2px 10px 3px lightgray;
      border-radius: 20px;
    } /*Makes the content less overwhelming*/


    .empDescrip h2 {
      width: 100%;
      font-size: 1.5em;
    }

    .empDescrip p {
      width: 100%;
      font-size: 1.08em;
      font-family: sans-serif;
    }
    .Poff,
    .Poff2,
    .Poff3
    {display: none}

    /* Adjusting the Footer */
    footer > div > p,
    footer > div > a   {
      font-size: 2em;
    }

    .siteFooter {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      align-items: center;
    }

    .footerDetails,
    .footerCredits {
      grid-column: 1;
    }


    .footerContact,
    .footerLocation {
      grid-column: 2;
    }
    .footerContact {grid-row: 1}
    .footerLocation {grid-row: 2}


}