:root {
--pink: orange;
}

* {
    margin: 0; padding: 0; border: 0;
}



body    {
    font-family: Poppins;  
}
Body h1 {
    font-family: Outfit;
}

body p {
    font-size: 13px;
}

body li {
    font-size: 12px; list-style: square;
}

#main {
 position: relative;  height: 53vh; 
}

.main   {
   width:100%; background-color: black; padding-bottom: 10px; opacity: 85%; z-index: 5;
}



.main-top {
    position: relative; width: 95%; border-bottom: 1px solid #eee; margin: 0px auto; display: flex; padding: 15px;  justify-content: flex-end;
    color: #eee; font-size: 12px; box-sizing: border-box;
}

.main-top a {
    color: #eee; text-decoration: none; position: relative; padding-right: 1em;  
}

.main-top p {
display: none;
}


.main-top a:hover {
     color: var(--pink); transition: all ease-in-out 250ms;
}

.company-logo {
    position: absolute; top: .5em; Left: .5em;
}

.company-logo img {
    position: relative;  width: 40px; border-radius: 15px; border: 3px solid orange;
}


nav  {
    position: relative; font-size: 11px; box-sizing: border-box; font-weight: bold; 
}

nav ul  {
    list-style: none; width: 100%; margin: 0; padding: .8em 0; display: flex; justify-content:flex-end; align-items: center;
}

nav li a {
    text-decoration: none; color: #eee; padding-right: 1em; position: relative; list-style: none;
}



nav li a:hover {
     color: var(--pink);
}


.main-content {
    position: absolute; width: 100%; height:100%; margin: 0; background-color: black; box-sizing: border-box; top: 0; left: 0; z-index: -2;
}

.main-background {
position: absolute; width: 100%; height: 100%; background-color: grey; opacity: 55%; left: 0; top: 0; z-index: -1;
}

.main-content .main-picture {
    position: relative; width: 100%; height: 100%; box-sizing: border-box; z-index: -2;
}
.main-content .main-picture img {
    position: absolute; width: 100%; height: 100%; margin: 0;
}

.main-content-inside {
    position: absolute; top: 30%; left:1em; background: #222; padding: 15px; width: 90%; border-radius: 20px;box-sizing: border-box;
}

.main-content-inside h1 {
    color: orange; font-weight: bold; margin-bottom: 10px; font-size: 25px;
}

.main-content-inside p {
    color: #eee; margin-bottom: 15px; font-size: 13px; line-height: 1.5;
}

.main-content-inside button {
    padding: .7rem  2rem;  background-color: #eee; font-size: 13px; outline: none; cursor: pointer;
}

.main-content-inside button:hover {
    background-color: orange; transition: ease-in-out 250ms;
}

#wrapper {
    position: relative; box-sizing: border-box; width: 100%; box-sizing: border-box;
}

    
.scroll    {
    position: fixed; z-index: 11;  bottom: 0px; right: 0px; padding: 5px 6px; background: #222; color: #fafafa; text-align: center; display: none; box-sizing: border-box;
}

.scroll a   {
    color: #fafafa; text-decoration: none;
}

.scroll span   {
    font-size: 10px; position: relative; display: block;
}

.scroll i  {
    margin-right: 0px; position: relative; display: block; font-size: 9px;
}
    

#about-us  {
    position: relative; width: 100%; margin-top: 30px;  
}



#about-us hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px auto; margin-top: 10px; margin-bottom: 20px;
}

.about-us-top {
    position: relative; width: 100%; display: block; padding: 20px; box-sizing: border-box; margin-top: 25px; padding-bottom: 50px; 
}

.about-us-top-img {
 position:  relative; width: 100%; box-sizing: border-box;  height: auto;
}

.about-us-top-img img {
    width: 100%; border-radius: 15px; height: 100%;
}

.about-us-top-content {
    position: relative; padding: 20px;  padding-top: 0;  width: 100%; box-sizing: border-box;
}

.about-us-top-content h2 {
    font-size: 20px; text-align: center;
}

.about-us-top-content p {
font-size: 13px; margin-bottom: 10px;
}

.about-us-top-content h3 {
    font-size: 14px; margin-bottom: 10px;
}

.about-us-top-content ul li {
    list-style: square; margin-left: 20px; font-size: 13px; width: 100%;
}




.mission-and-vision {
    position: relative;  box-sizing: border-box; display: block; margin-top: 50px; width: 100%;
}

.mission-and-vision p {
    margin-top: 20px;
}

.mission {
    position: relative;  box-sizing: border-box; width: 100%; background-color: darkgoldenrod; padding: 20px;
}

.mission h4 {
  position: relative; background-color: grey; padding: 1rem 3rem; color: #eee; width: 30%;
}

.mission p {
    position: relative;
}

.mission ul {
    margin-left: 20px; margin-top: 15px;
}

.mission ul li {
    list-style: square; 
}

.vision {
    position: relative;   box-sizing: border-box;  background-color: grey; padding: 20px; width: 100%;
}

.vision h4 {
 position: relative; background-color: darkgoldenrod; padding: 1rem 3rem; color: #222; width: 30%;
}

.vision p {
   position: relative;
}



  #index_why                            {width: 100%; height: auto; padding: 20px;  position: relative; margin: 30px 0; box-sizing: border-box;}
  #index_why hr                         {width: 70px; height: 3px; background: darkgoldenrod; margin-top: 20px; margin-bottom: 20px; margin-left: 10px;}
  #index_why h1                         {margin-left: 10px; font-size: 29px; width: 190px}
  .index_why                            {width: 100% ; background: #fff; padding: 0px; position: relative; z-index: 3}
  .index_why p                          {margin-top: 10px; font-size: 13px}
  
  .why_img                              {position: relative; z-index: 2; width: 100%; height: auto; top: 0; border-radius: 10px;}


  #index_why_right                        {width: 100%; background: #fff; position: relative; top: 8%; padding: 10px; box-sizing: border-box;}
  .why_right                              { position: relative;}
  .why_right h3                           {width: 100%; background: #eee; height: 37px; padding: 10px; text-align: center; cursor: pointer; box-sizing: border-box;
                                            margin-bottom: 3px; font-size: 15px}
  .why_right h3:hover                     {background: darkgoldenrod; color: #fff}

 

  #quality-control {
position: relative; padding: 20px; box-sizing: border-box; width: 100%;  border-top: 2px solid grey;
  }

  #quality-control h2  {
    font-size: 17px; text-align: center; margin-top: 20px;
  }

   #quality-control h3 {
    font-size: 15px; text-align: center; font-style: italic; margin-top: 10px;
  }


  .mid-quality {
    position: relative; width: 100%;  box-sizing: border-box; display: block;
  }

  .mid-quality-content {
position: relative; width: 100%; box-sizing: border-box; padding: 20px; background-color: darkgoldenrod; margin: 30px 0px;
  }

    .quality-bottom{
    position: relative; width: 100%;  box-sizing: border-box; display: block; padding: 0px;
  }

  .quality-bottom-content {
    position: relative; margin: 15px 0px; background-color: #0E1C1F; width: 100%;  padding: 15px; color: #eee; box-sizing: border-box;
  }


#milestones {
    position: relative;  width: 100%; margin: 0px auto; padding: 20px; box-sizing: border-box;
}

#milestones h2 {
    position: relative; width: 80%; background-color: darkgoldenrod; padding: 1rem; text-align: center; margin: 0px auto; box-shadow: 2px 2px #eee; font-size: 18px;
}
.milestone-back  {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; 
}

.milestone-back img {

    position: absolute; left: 0; width: 100%; height: 100%;
}

.inside-milestones {
    position: relative; display: block; box-sizing: border-box; 
}

.milestone {
    position: relative; background-color: #222; width: 100%; padding: 20px; margin: 25px 0;  color: #eee; box-shadow: 2px 2px darkgoldenrod; border-radius: 20px; box-sizing: border-box;
}

.milestone:hover {
    box-shadow: 5px 5px darkgoldenrod; cursor: pointer; transition: ease-in-out 100ms;
}

.milestone h3  {
    margin-bottom: 5px; font-size: 18px;
}

.milestone hr  {
    width: 50px; height: 8px; background-color: darkgoldenrod; margin-bottom: 10px;
}

#our-project {
    position: relative; padding: 20px 0px; border-top: 1px solid grey; border-bottom: 1px solid lightgray; box-sizing: border-box; width: 100%;
}

#our-project hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px auto; margin-top: 10px; margin-bottom: 20px;
}

#our-project h3 {
    text-align: center; font-size: 25px; margin-bottom: 20px;
}

.our-project-content {
    position: relative; display: block; width: 100%; box-sizing: border-box; 
}

.our-project-content h4 {
    font-size: 18px; margin-bottom: 15px;
}

.projects {
    width: 100%; margin: 10px 0;     border-radius: 10px; box-sizing: border-box;
}


.projects img {
    width: 100%; margin-bottom: 15px;    border-radius: 10px;
}

.wbsalt  {
    position: relative; ; padding: 25px; box-shadow: 3px 3px #eee;
}

#our-project .wbsalt hr {
    position: relative; height: .5em; width: 6em; background-color: darkgoldenrod; margin: 0px; margin-top: 10px; margin-bottom: 20px;
}

.ftdutoit  {
    position: relative; ; padding: 25px; box-shadow: 0px 3px #eee;
}

#our-project .ftdutoit hr {
    position: relative; height: .5em; width: 6em; background-color: grey; margin: 0px; margin-top: 10px; margin-bottom: 20px;
}

.westcoastindustrial {
    position: relative; padding: 25px; box-shadow: 0px 3px #eee;
}

#our-project .westcoastindustrial hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px; margin-top: 10px; margin-bottom: 20px; 
}


.admheavyhaullage  {
    position: relative; padding: 25px; box-shadow: 0px 3px #eee;
}

#our-project .admheavyhaullage  hr {
    position: relative; height: .5em; width: 6em; background-color: grey; margin: 0px; margin-top: 10px; margin-bottom: 20px;
}

#founders  {
    position: relative; width: 90%;   margin: 0px auto; margin-top: 50px; text-align: center;
}

#founders h3  {
    font-size: 25px; position: relative;  margin: 0px auto; text-align: center; margin: 50px 0;
}

#founders h2   {
    font-size: 20px;
}

#founders h4   {
    font-size: 15px; font-style: italic;
}
#founders p {
    margin-top: 10px; 
}

.top-rule {
    position: relative;  width: 50px; height: 5px; background: darkgoldenrod;  margin: 0px auto;
}
.werner {
    position: relative; width: 100%; box-sizing: border-box;  display: block; background-color: #eee; margin: 20px 0; 
}

.werner-img {
    background-color: darkgoldenrod; width: 100px; height: 200px; position: relative; bottom: 0; right: 5%; display: none;
 }

 .werner-profile-pic  {
    position: relative; width: 250px; height: 250px; z-index: 1; top: 30px; ; border-radius: 50%; border: 2px solid darkgoldenrod; 
 }



.werner-content {
    width: 100%; margin-top: 20px;  position: relative; padding: 20px; margin-bottom: 0px; box-sizing: border-box;
}

.werner-contact {
    position: relative; padding: 10px 0 30px 0; text-align: center;
}

.werner-contact a  {
    color: #222;  text-decoration: none;
}

.werner-contact i {
    font-size: 12px; margin: 5px;
}


.founder-line {
    position: relative; width: 100%; margin: 30px 0; background: #eee; height: 2px;
}

.melissa {
    position: relative; width: 100%; box-sizing: border-box;  display: block; background-color: #eee; margin: 20px 0; 
}

.melissa-img {
    background-color: darkgoldenrod; width: 100px; height: 200px; position: relative; bottom: 0; right: 5%; display: none;
 }

 .melissa-profile-pic  {
    position: relative; width: 250px; height: 250px; z-index: 1; top: 30px; ; border-radius: 50%; border: 2px solid darkgoldenrod; 
 }



.melissa-content {
    width: 100%; margin-top: 20px;  position: relative; padding: 20px; margin-bottom: 0px; box-sizing: border-box;
}

.melissa-contact {
    position: relative; padding: 10px 0 30px 0; text-align: center;
}

.melissa-contact a  {
    color: #222;  text-decoration: none;
}

.melissa-contact i {
    font-size: 12px; margin: 5px;
}



#index_life                               {width: 100%; padding: 20px;  position: relative; box-sizing: border-box; margin: 0px auto; display: block;}
.index_life                               {float: none;  position: relative;}
.index_life_left                          {background: #0E1C1F; color: #fff; width: 100%; position: relative; padding: 20px; box-sizing: border-box;}
.index_life_left h3                       {padding: 10px; font-size: 15px; background:darkgoldenrod; color: #fff; width:22%; text-transform: uppercase;   margin-bottom: 20px}
.index_life_left h1                       {font-size: 20px; font-weight: 750; font-family: Arial; text-transform: uppercase;}
.index_life_left hr                       {margin: 20px 0; height: 3px; width: 40px; background: darkgoldenrod}
.index_life_left p                        {font-size: 13px}
.index_life_left button                   {background: darkgoldenrod; padding: 1rem 2rem; font-size: 15px; margin-top: 30px; text-transform: uppercase;
                                            color: #fff}

.index_life_right                         { position: relative;width: 100%; height: auto;  margin-left: none;}
.index_life_right_img                     {width: 100%; height: 100%; position: relative; }
.index_life_right_cont                     {position: relative; z-index: 2; padding: 20px 0; position: relative; }
.index_life_right_cont h3                  {padding: 1rem 2rem; font-size: 12px; background: darkgoldenrod; color: #fff; width:100;
                                            text-transform: uppercase;  position: relative; left: 0; top: 20px;}



#contact-us {
    position: relative; width: 100%;   border-top: 1px solid grey; box-sizing: border-box; margin-bottom: 30px;

}

.contact-details {
    position: relative; width: 100%; background: #0E1C1F; padding: 5%; z-index: 1; box-sizing: border-box;
}

.contact-details h3 {
    font-size: 30px; color: #eee; margin-bottom: 20px;
}
.contact-details h4 {
    font-size: 16px; margin: 20px 0;
}

.contact-details hr  {
    position: relative; width: 50px; height: 5px; background: darkgoldenrod;  margin-bottom: 10px;
}

.contact-details p {
    font-size: 14px; margin: 20px 0;color: #eee;
}

.get-in-touch {
    position: relative;  background-color: lightgrey; padding: 20px; bottom: 0px; z-index: 2; 
}

.get-in-touch p {
    margin-bottom: 5px;
}
.get-in-touch h4 {
    font-size: 16px; margin: 20px 0;
}

.get-in-touch i {
    position: relative;
     background-color: #0E1C1F; padding: 5px; height: 15px; width: 15px; font-size: 14px; color: #eee; border-radius: 50%; justify-content: center;  align-items: center; text-align: center; margin: 5px;
}
.get-in-touch hr  {
    position: relative; width: 90%; height: 5px; background: darkgoldenrod;  margin-top: 20px;
}

.get-in-touch a {
    text-decoration: none; color: darkgoldenrod; 
}

.get-in-touch a:hover {
    text-decoration: underline;
}

.location {
    position: relative; width: 100%;  z-index: 2; height: 450px;  box-shadow: 2px 2px #eee; padding: 10px; box-sizing: border-box; background-color: #eee; 
}

footer {
    position: relative;  background-color: black;  color: #eee; padding: 25px;
}

footer a {
    text-decoration: none; color: orange;
}

footer a:hover {
    text-decoration: underline;
}


.footer-content {
    position: relative; display: block; margin-bottom: 20px; 
}

.footer-logo {
width: 100%; margin-top:10px;
}

.footer-logo img {
    width: 100%; margin-bottom: 20px; border-radius: 20px;
}

.footer-logo p {
    text-align: center;
}

.footer-nav {
    position: relative; width: 100%; box-sizing: border-box; margin-left: 0px; display: block;
}

.footer-nav ul {
    position: relative; display: block; width: 100%; margin-top: 20px;  text-align: center;
}

.footer-nav ul li {
    list-style: none;  margin-bottom: 10px;
}

.footer-social {
    position: relative; width: 100%; text-align: center; margin-top: 10px;
}

.footer-social h3 {
    font-size: 15px; margin-top: 20px;
}

.footer-social h4 {
    font-size: 15px; margin-bottom: 10px;
}

.footer-social hr  {
    position: relative; width: 50px; height: 5px; background: darkgoldenrod; margin: 0px auto; margin-bottom: 10px;
}

.footer-icons {
    position: relative; width: 100%; display: flex; justify-content: center;  margin: 20px 0;
}

.footer-icons a {
     font-size: 14px; padding: 5px; border:  2px solid orange; border-radius: 50%;  height: 15px; width: 15px; margin: 5px; background: #fafafa; display: inline-flex; justify-content: center; align-items: center;
}


/*
.footer-nav a::after {
    content: ' ';
    position: absolute;
    display: block;
    height: 0.4em;
    width: 0%;
    background-color: var(--pink);
    bottom: -1em;
    transition: all ease-in-out 250ms;
}

.footer-nav li a:hover::after {
    width:6%;
}

.footer-nav li a:hover {
     color: var(--pink);
}*/

.footer-contact {
    position: relative; width: 100%;  text-align: center;
}

.footer-contact h4  {
    margin: 10px 0; font-size: 15px; text-align: center;
}

.footer-contact hr  {
    position: relative; width: 50px; height: 5px; background: darkgoldenrod; margin: 0px auto; margin-bottom: 10px;
}

.footer-contact i  {
    position: relative; padding: 6px; display: none;
}

.footer-contact a {
    color: #eee; 
}



.footer-bottom {
    position: absolute; width: 100%;  padding: 5px ; display: block;  justify-content: center; background-color: #222; box-sizing: border-box; left: 0; 
}

.footer-bottom p {
    position: relative;  padding: 0 1em ; padding-top: 5px; font-size: 12px; text-align: center;
}

.footer-bottom a {
    text-decoration: none; color: orange;
}

.footer-bottom a:hover {
    text-decoration: underline;
}


/*END OF MOBILE CSS*/


/*TABLET CSS*/


@media only screen and (min-width:768px) {

#main {
 position: relative;  height: 50vh;
}

.main   {
   width:100%; background-color: black; padding-bottom: 10px; opacity: 85%; z-index: 5;
}



.main-top {
    position: relative; width: 95%; border-bottom: 1px solid #eee; margin: 0px auto; display: flex; padding: 10px;  justify-content: flex-end;
    color: #eee; font-size: 14px;
}

.main-top a {
    color: #eee; text-decoration: none; position: relative; padding-right: 3em; 
}


.main-top a:hover {
     color: var(--pink); transition: all ease-in-out 250ms;
}

.main-top p {
display: block;
}

.company-logo {
    position: absolute; top: 1em; Left:4em;
}

.company-logo img {
    position: relative;  width: 60px; border-radius: 15px; border: 3px solid orange;
}


nav  {
    position: relative; font-size: 14px; box-sizing: border-box; font-weight: bold; 
}

nav ul  {
    list-style: none; width: 100%; margin: 0; padding: 1em 0; display: flex; justify-content: flex-end; align-items: center;
}

nav li a {
    text-decoration: none; color: #eee; padding-right: 4em; position: relative; transition: all ease-in-out 250ms;
}

nav li a::after {
    content: ' ';
    position: absolute;
    display: block;
    height: 0.4em;
    width: 0%;
    background-color: var(--pink);
    bottom: -1em;
    transition: all ease-in-out 250ms;
}

nav li a:hover::after {
    width:70%;
}

nav li a:hover {
     color: var(--pink);
}


.main-content {
    position: absolute; width: 100%; height:100%; margin: 0; background-color: black; box-sizing: border-box; top: 0; left: 0; z-index: -2;
}

.main-background {
position: absolute; width: 100%; height: 100%; background-color: grey; opacity: 55%; left: 0; top: 0; z-index: -1;
}

.main-content .main-picture {
    position: relative; width: 100%; height: 100%; box-sizing: border-box; z-index: -2;
}
.main-content .main-picture img {
    position: absolute; width: 100%; height: 100%; margin: 0;
}

.main-content-inside {
    position: absolute; top: 40%; left:4em; background: #222; padding: 50px; width: 70%; border-radius: 20px;
}

.main-content-inside h1 {
    color: orange; font-weight: bold; margin-bottom: 10px; font-size: 40px;
}

.main-content-inside p {
    color: #eee; margin-bottom: 15px; font-size: 14px; line-height: 1.5;
}

.main-content-inside button {
    padding: 1rem  3rem;  background-color: #eee; font-size: 14px; outline: none; cursor: pointer;
}

.main-content-inside button:hover {
    background-color: orange; transition: ease-in-out 250ms;
}

#wrapper {
    position: relative; box-sizing: border-box; width: 100%; box-sizing: border-box;
}

    
.scroll    {
    position: fixed; z-index: 11;  bottom: 0px; right: 0; padding: 8px 10px; background: #222; color: #fafafa; text-align: center; display: none;
}

.scroll a   {
    color: #fafafa; text-decoration: none;
}

.scroll span   {
    font-size: 14px; position: relative; display: block;
}

.scroll i  {
    margin-right: 0px; position: relative; display: block;
}
    

#about-us  {
    position: relative; width: 100%; margin-top: 30px;  
}



#about-us hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px auto; margin-top: 10px; margin-bottom: 20px;
}

.about-us-top {
    position: relative; width: 100%; display: block; padding: 50px; box-sizing: border-box; margin-top: 25px; padding-bottom: 50px; 
}

.about-us-top-img {
 position:  relative; width: 100%; box-sizing: border-box;  margin-left: 0px; height: 40vh;
}

.about-us-top-img img {
    width: 100%; border-radius: 15px; height: 100%;
}

.about-us-top-content {
    position: relative; padding: 20px;  padding-top: 0;  width: 100%; box-sizing: border-box;
}

.about-us-top-content h2 {
    font-size: 25px; text-align: center;
}

.about-us-top-content p {
font-size: 14px; margin-bottom: 10px; text-align: justify;
}

.about-us-top-content h3 {
    font-size: 15px; margin-bottom: 10px;
}

.about-us-top-content ul li {
    list-style: square; margin-left: 20px; font-size: 14px; width: 100%;
}




.mission-and-vision {
    position: relative;  box-sizing: border-box; display: flex; margin-top: 50px;
}

.mission-and-vision p {
    margin-top: 20px;
}

.mission {
    position: relative;  box-sizing: border-box; width: 50%; background-color: darkgoldenrod; padding: 50px;
}

.mission h4 {
  position: relative; background-color: grey; padding: 1rem 3rem; color: #eee; width: 40%;
}

.mission p {
    position: relative;
}

.mission ul {
    margin-left: 20px; margin-top: 15px;
}

.mission ul li {
    list-style: square; 
}

.vision {
    position: relative;  ;  box-sizing: border-box;  background-color: grey; padding: 50px; width: 50%;
}

.vision h4 {
 position: relative; background-color: darkgoldenrod; padding: 1rem 3rem; color: #222; width: 40%;
}

.vision p {
   position: relative;
}



  #index_why                            {width: 100%; height: auto; padding: 5%;  position: relative; margin: 50px 0; box-sizing: border-box;}
  #index_why hr                         {width: 70px; height: 3px; background: darkgoldenrod; margin-top: 20px; margin-bottom: 20px; margin-left: 10px;}
  #index_why h1                         {margin-left: 10px; font-size: 29px; width: 190px}
  .index_why                            {width: 60% ; background: #fff; padding: 20px; position: relative; z-index: 3; box-shadow: 2px 2px darkgoldenrod;}
  .index_why p                          {margin-top: 0; font-size: 15px}
  
  .why_img                              {position: absolute; left: 40%; z-index: 2; width: 55%; height: 250px; top: 10%; border-radius: 10px;}


  #index_why_right                        {width: 100%; background: #fff; position: relative; margin-top: 20%; padding: 10px; box-sizing: border-box;}
  .why_right                              { position: relative;}
  .why_right h3                           {width: 100%; background: #eee; height: auto; padding: 15px; text-align: center; cursor: pointer;
                                            margin-bottom: 8px; font-size: 16px}
  .why_right h3:hover                     {background: darkgoldenrod; color: #fff}



#milestones {
    position: relative;  width: 100%; margin: 0px auto; padding: 5%; box-sizing: border-box;
}

#milestones h2 {
    position: relative; width: 60%; background-color: darkgoldenrod; padding: 1rem; text-align: center; margin: 0px auto; box-shadow: 2px 2px #eee;
}
.milestone-back  {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; 
}

.milestone-back img {

    position: absolute; left: 0; width: 100%; height: 100%;
}

.inside-milestones {
    position: relative; display: flex;
}

.milestone {
    position: relative; background-color: #222; width: 35%; padding: 20px; margin: 15px; margin-top: 25px; color: #eee; box-shadow: 2px 2px darkgoldenrod; border-radius: 20px;
}

.milestone:hover {
    box-shadow: 5px 5px darkgoldenrod; cursor: pointer; transition: ease-in-out 100ms;
}

.milestone h3  {
    margin-bottom: 5px; font-size: 20px;
}

.milestone hr  {
    width: 50px; height: 8px; background-color: darkgoldenrod; margin-bottom: 10px;
}

#our-project {
    position: relative; padding: 70px 0px; border-top: 1px solid grey; border-bottom: 1px solid lightgray;
}

#our-project hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px auto; margin-top: 10px; margin-bottom: 20px;
}

#our-project h3 {
    text-align: center; font-size: 25px; margin-bottom: 20px;
}

.our-project-content {
    position: relative; display: flex; width: 100%; box-sizing: border-box;
}

.our-project-content h4 {
    font-size: 18px; margin-bottom: 15px;
}

.projects {
    width: 30%; margin: 10px 3%;     border-radius: 10px;
}

.projects:hover  {
    box-shadow: 5px 5px darkgoldenrod; transition: ease-in-out 250ms; cursor: pointer;
}

.projects img {
    width: 100%; margin-bottom: 15px;    border-radius: 10px;
}

.ftdutoit  {
    position: relative; ; padding: 25px; box-shadow: 3px 3px #eee;
}

#our-project .ftdutoit hr {
    position: relative; height: .5em; width: 6em; background-color: grey; margin: 0px; margin-top: 10px; margin-bottom: 20px;
}

.westcoastindustrial {
    position: relative; padding: 25px; box-shadow: 3px 3px #eee;
}

#our-project .westcoastindustrial hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px; margin-top: 10px; margin-bottom: 20px; 
}


.admheavyhaullage  {
    position: relative; padding: 25px; box-shadow: 3px 3px #eee;
}

#our-project .admheavyhaullage  hr {
    position: relative; height: .5em; width: 6em; background-color: grey; margin: 0px; margin-top: 10px; margin-bottom: 20px;
}

#founders  {
    position: relative; width: 90%;   margin: 0px auto; margin-top: 50px;
}

#founders h3  {
    font-size: 25px; position: relative;  margin: 0px auto; text-align: center; margin: 50px 0;
}

#founders h2   {
    font-size: 20px;
}

#founders h4   {
    font-size: 15px; font-style: italic;
}
#founders p {
    margin-top: 10px; 
}

.top-rule {
    position: relative;  width: 50px; height: 5px; background: darkgoldenrod;  margin: 0px auto;
}
.werner {
    position: relative; width: 95%; box-sizing: border-box;  display: flex; background-color: #0E1C1F; margin: 100px 0;  margin-left: 5%; 
}

.werner-img {
    background-color: darkgoldenrod; width: 100px; height: 200px; position: absolute; bottom: 0; right: 5%; display: block;
 }

 .werner-profile-pic  {
    position: absolute; width: 250px; height: 250px; z-index: 1; top: -30px; right: 5%; border-radius: 50%; border: 2px solid darkgoldenrod; 
 }



.werner-content {
    width: 50%; background-color: darkgoldenrod; margin-top: -30px; margin-left: -30px; box-shadow: 3px 3px 3px 3px #eee; position: relative; padding: 20px; border: 3px solid #eee; margin-bottom: 30px;
}

.werner-contact {
    position: absolute;  height: 60px; background-color: white; bottom: 0; left: 50%; padding: 20px; text-align: center; border-radius: 20px 20px 0 0px;
}


.founder-line {
    position: relative; width: 100%; margin: 30px 0; background: #eee; height: 2px;
}

.melissa {
    position: relative; width: 95%; box-sizing: border-box;  display: flex; background-color: #0E1C1F; margin: 50px 0;  margin-right: 5%; margin-top: 100px;  justify-content: flex-end;
}

.melissa-img {
    background-color: darkgoldenrod; width: 100px; height: 200px; position: absolute; bottom: 0; left: 5%; display: block;
 }

 .melissa-profile-pic  {
    position: relative; width: 250px; height: 250px; z-index: 1; top: -30px; right: 10%; border-radius: 50%; border: 3px solid darkgoldenrod; 
 }



.melissa-content {
    width: 50%; background-color: darkgoldenrod; margin-top: -30px; box-shadow: 1px 1px 3px 3px #eee; position: relative; padding: 20px; border: 3px solid #eee; margin-bottom: 30px; margin-right: -30px;
}

.melissa-contact {
    position: absolute;  height: 60px; background-color: white; bottom: 0; right: 50%; padding: 20px; text-align: center; border-radius: 20px 20px 0 0px;
}



#index_life                               {width: 100%; padding: 20px;  position: relative; box-sizing: border-box; margin: 0px auto; display: block;}
.index_life                               {float: none;  position: relative;}
.index_life_left                          {background: #0E1C1F; color: #fff; width: 100%; position: relative; padding: 20px; box-sizing: border-box;}
.index_life_left h3                       {padding: 10px; font-size: 15px; background:darkgoldenrod; color: #fff; width:22%; text-transform: uppercase;   margin-bottom: 20px}
.index_life_left h1                       {font-size: 20px; font-weight: 750; font-family: Arial; text-transform: uppercase;}
.index_life_left hr                       {margin: 20px 0; height: 3px; width: 40px; background: darkgoldenrod}
.index_life_left p                        {font-size: 13px}
.index_life_left button                   {background: darkgoldenrod; padding: 1rem 2rem; font-size: 15px; margin-top: 30px; text-transform: uppercase;
                                            color: #fff}

.index_life_right                         { position: relative;width: 100%; height: auto;  margin-left: none;}
.index_life_right_img                     {width: 100%; height: 100%; position: relative; }
.index_life_right_cont                     {position: relative; z-index: 2; padding: 20px 0; position: relative; }
.index_life_right_cont h3                  {padding: 1rem 2rem; font-size: 14px; background: darkgoldenrod; color: #fff; width:100%;
                                            text-transform: uppercase;  position: relative; left: 0px; top: 20px; box-sizing: border-box;}


.index_life_right_cont hr   {
    margin: 20px 0; height: 3px; width: 40px; background: darkgoldenrod
}

.vacancies {
    background-color: #eee; height: 300px; margin: 30px 0;
}

#contact-us {
    position: relative; width: 100%;   border-top: 1px solid grey; box-sizing: border-box; margin-bottom: 300px;

}

.contact-details {
    position: relative; width: 100%; background: #0E1C1F;  height: 450px; padding: 5%; z-index: 1; box-sizing: border-box;
}

.contact-details h3 {
    font-size: 30px; color: #eee; margin-bottom: 20px;
}
.contact-details h4 {
    font-size: 16px; margin: 20px 0;
}

.contact-details hr  {
    position: relative; width: 50px; height: 5px; background: darkgoldenrod;  margin-bottom: 10px;
}

.contact-details p {
    font-size: 14px; margin: 20px 0;color: #eee;
}

.get-in-touch {
    position: absolute;  background-color: lightgrey; padding: 50px; left: 5%; bottom: -250px; z-index: 2; border-radius: 20px;
}

.get-in-touch p {
    margin-bottom: 5px;
}
.get-in-touch h4 {
    font-size: 16px; margin: 20px 0;
}

.get-in-touch i {
    position: relative;
     background-color: #0E1C1F; padding: 5px; height: 15px; width: 15px; font-size: 14px; color: #eee; border-radius: 50%; justify-content: center;  align-items: center; text-align: center; margin: 5px;
}
.get-in-touch hr  {
    position: relative; width: 80%; height: 5px; background: darkgoldenrod;  margin-top: 50px;
}

.get-in-touch a {
    text-decoration: none; color: darkgoldenrod; 
}

.get-in-touch a:hover {
    text-decoration: underline;
}

.location {
    position: absolute; width: 40%; right: 5%; z-index: 2; height: 450px; bottom:-200px; box-shadow: 2px 2px #eee; padding: 10px; box-sizing: border-box; background-color: #eee; border-radius: 20px;
}

footer {
    position: relative;  background-color: black;  color: #eee; padding: 20px 10px; box-sizing: border-box;
}

footer a {
    text-decoration: none; color: orange;
}

footer a:hover {
    text-decoration: underline;
}


.footer-content {
    position: relative; display: flex; margin-bottom: 20px; justify-content: center; box-sizing: border-box;
}

.footer-logo {
width: 25%; margin-top:10px;
}

.footer-logo img {
    width: 100%; margin-bottom: 10px; border-radius: 20px;
}

.footer-logo p {
    text-align: center;
}

.footer-nav {
    position: relative; width: 20%; box-sizing: border-box; margin-left: 40px; display: block; justify-content: center; 
}

.footer-nav ul {
    position: relative; display: block; transition: all ease-in-out 250ms; width: 50%; margin-top: 10px; 
}

.footer-nav ul li {
    list-style: none;  margin-bottom: 10px;
}

.footer-social {
    position: relative; width: 25%; text-align: center; margin-top: 10px;
}

.footer-social h3 {
    font-size: 10px; margin-top: 20px;
}

.footer-social h4 {
    font-size: 15px; margin-bottom: 10px;
}

.footer-social hr  {
    position: relative; width: 50px; height: 5px; background: darkgoldenrod; margin: 0px auto; margin-bottom: 10px;
}

.footer-icons {
    position: relative; width: 100%; display: flex; justify-content: center;  margin: 20px 0;
}

.footer-icons a {
     font-size: 14px; padding: 5px; border:  2px solid orange; border-radius: 50%;  height: 15px; width: 15px; margin: 5px; background: #fafafa; display: inline-flex; justify-content: center; align-items: center;
}


/*
.footer-nav a::after {
    content: ' ';
    position: absolute;
    display: block;
    height: 0.4em;
    width: 0%;
    background-color: var(--pink);
    bottom: -1em;
    transition: all ease-in-out 250ms;
}

.footer-nav li a:hover::after {
    width:6%;
}

.footer-nav li a:hover {
     color: var(--pink);
}*/

.footer-contact {
    position: relative; width: 35%; text-align: left;
}

.footer-contact h4  {
    margin: 10px 0; font-size: 15px; text-align: left;
}

.footer-contact p {
font-size: 12;
}

.footer-contact hr  {
    position: relative; width: 50px; height: 5px; background: darkgoldenrod; margin: 0px; margin-bottom: 10px; 
}

.footer-contact i  {
    position: relative; padding: 6px; display: inline-block;
}

.footer-contact a {
    color: #eee;
}

.footer-bottom {
    position: absolute; width: 100%;  padding: 5px ; display: flex;  justify-content: center; background-color: #222; box-sizing: border-box; left: 0; 
}

.footer-bottom p {
    position: relative;  padding: 0 4em ; padding-top: 5px; font-size: 12px;
}

.footer-bottom a {
    text-decoration: none; color: orange;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

}

/*TABLET CSS*/

@media only screen and (min-width:1000px) {

#main {
 position: relative;  height: 115vh;
}

.main   {
   width:100%; background-color: black; padding-bottom: 10px; opacity: 85%; z-index: 5;
}



.main-top {
    position: relative; width: 95%; border-bottom: 1px solid #eee; margin: 0px auto; display: flex; padding: 10px;  justify-content: flex-end;
    color: #eee; font-size: 14px;
}

.main-top a {
    color: #eee; text-decoration: none; position: relative; padding-right: 3em; 
}


.main-top a:hover {
     color: var(--pink); transition: all ease-in-out 250ms;
}

.main-top p {
display: block;
}

.company-logo {
    position: absolute; top: 1em; Left:4em;
}

.company-logo img {
    position: relative;  width: 60px; border-radius: 15px; border: 3px solid orange;
}


nav  {
    position: relative; font-size: 14px; box-sizing: border-box; font-weight: bold; 
}

nav ul  {
    list-style: none; width: 100%; margin: 0; padding: 1em 0; display: flex; justify-content: flex-end; align-items: center;
}

nav li a {
    text-decoration: none; color: #eee; padding-right: 4em; position: relative; transition: all ease-in-out 250ms;
}

nav li a::after {
    content: ' ';
    position: absolute;
    display: block;
    height: 0.4em;
    width: 0%;
    background-color: var(--pink);
    bottom: -1em;
    transition: all ease-in-out 250ms;
}

nav li a:hover::after {
    width:70%;
}

nav li a:hover {
     color: var(--pink);
}


.main-content {
    position: absolute; width: 100%; height:100%; margin: 0; background-color: black; box-sizing: border-box; top: 0; left: 0; z-index: -2;
}

.main-background {
position: absolute; width: 100%; height: 100%; background-color: grey; opacity: 55%; left: 0; top: 0; z-index: -1;
}

.main-content .main-picture {
    position: relative; width: 100%; height: 100%; box-sizing: border-box; z-index: -2;
}
.main-content .main-picture img {
    position: absolute; width: 100%; height: 100%; margin: 0;
}

.main-content-inside {
    position: absolute; top: 40%; left:4em; background: #222; padding: 50px; width: 40%; border-radius: 20px;
}

.main-content-inside h1 {
    color: orange; font-weight: bold; margin-bottom: 10px; font-size: 40px;
}

.main-content-inside p {
    color: #eee; margin-bottom: 15px; font-size: 14px; line-height: 1.5;
}

.main-content-inside button {
    padding: 1rem  3rem;  background-color: #eee; font-size: 14px; outline: none; cursor: pointer;
}

.main-content-inside button:hover {
    background-color: orange; transition: ease-in-out 250ms;
}

#wrapper {
    position: relative; box-sizing: border-box; width: 100%; box-sizing: border-box;
}

    
.scroll    {
    position: fixed; z-index: 11;  bottom: 0px; right: 0; padding: 8px 10px; background: #222; color: #fafafa; text-align: center; display: none;
}

.scroll a   {
    color: #fafafa; text-decoration: none;
}

.scroll span   {
    font-size: 14px; position: relative; display: block;
}

.scroll i  {
    margin-right: 0px; position: relative; display: block;
}
    

#about-us  {
    position: relative; width: 100%; margin-top: 30px;  
}



#about-us hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px auto; margin-top: 10px; margin-bottom: 20px;
}

.about-us-top {
    position: relative; width: 100%; display: flex; padding: 50px; box-sizing: border-box; margin-top: 25px; padding-bottom: 50px; 
}

.about-us-top-img {
 position:  relative; width: 45%; box-sizing: border-box;  margin-left: 40px; height: 100%; margin-top: 20px;
}

.about-us-top-img img {
    width: 100%; border-radius: 15px; height: 100%;
}

.about-us-top-content {
    position: relative; padding: 20px;  padding-top: 0;  width: 53%; box-sizing: border-box;
}

.about-us-top-content h2 {
    font-size: 25px; text-align: center;
}

.about-us-top-content p {
font-size: 14px; margin-bottom: 10px; text-align: justify;
}

.about-us-top-content h3 {
    font-size: 15px; margin-bottom: 10px;
}

.about-us-top-content ul li {
    list-style: square; margin-left: 20px; font-size: 14px; width: 100%;
}




.mission-and-vision {
    position: relative;  box-sizing: border-box; display: flex; margin-top: 50px;
}

.mission-and-vision p {
    margin-top: 20px;
}

.mission {
    position: relative;  box-sizing: border-box; width: 50%; background-color: darkgoldenrod; padding: 50px;
}

.mission h4 {
  position: relative; background-color: grey; padding: 1rem 3rem; color: #eee; width: 20%;
}

.mission p {
    position: relative;
}

.mission ul {
    margin-left: 20px; margin-top: 15px;
}

.mission ul li {
    list-style: square; 
}

.vision {
    position: relative;  ;  box-sizing: border-box;  background-color: grey; padding: 50px; width: 50%;
}

.vision h4 {
 position: relative; background-color: darkgoldenrod; padding: 1rem 3rem; color: #222; width: 20%;
}

.vision p {
   position: relative;
}



  #index_why                            {width: 95%; height: 70vh; padding: 5%;  position: relative; margin: 50px 0; box-sizing: border-box;}
  #index_why hr                         {width: 70px; height: 3px; background: darkgoldenrod; margin-top: 20px; margin-bottom: 20px; margin-left: 10px;}
  #index_why h1                         {margin-left: 10px; font-size: 29px; width: 190px}
  .index_why                            {width: 30% ; background: #fff; padding: 20px; position: relative; z-index: 3; box-shadow: 2px 2px darkgoldenrod;}
  .index_why p                          {margin-top: 0; font-size: 15px}
  
  .why_img                              {position: absolute; left: 20%; z-index: 2; width: 50%; height: 420px; top: 10%; border-radius: 10px;}


  #index_why_right                        {width: 25%; background: #fff; position: absolute; right: 1%; margin-top: 0%; padding: 10px}
  .why_right                              { position: relative;}
  .why_right h3                           {width: 95%; background: #eee; height: auto; padding: 15px; text-align: center; cursor: pointer;
                                            margin-bottom: 8px; font-size: 16px}
  .why_right h3:hover                     {background: darkgoldenrod; color: #fff}
  .why_right p                            {font-size: 14px; margin-bottom: 20px; padding: 10px;border-bottom: 1px solid #38A1F3 }
  .why_right_p1                           {display: none}
  .why_right_p                            {display: block}
  .why_right_active                       {background: #222; color: #fff}



  #quality-control {
position: relative; padding: 20px; box-sizing: border-box; width: 90%; margin: 0px auto;
  }

  #quality-control h2  {
    font-size: 20px; text-align: center; margin-top: 50px;
  }

   #quality-control h3 {
    font-size: 17px; text-align: center; font-style: italic; margin-top: 10px;
  }


  .mid-quality {
    position: relative; width: 100%;  box-sizing: border-box; display: flex;
  }

  .mid-quality-content {
position: relative; width: 50%; box-sizing: border-box; padding: 20px; background-color: darkgoldenrod; margin: 30px;
  }

    .quality-bottom{
    position: relative; width: 100%;  box-sizing: border-box; display: flex; padding: 20px;
  }

  .quality-bottom-content {
    position: relative; margin: 15px; background-color: #0E1C1F; width: 25%;  padding: 15px; color: #eee;
  }

#milestones {
    position: relative;  width: 100%; margin: 0px auto; padding: 5%; box-sizing: border-box; margin-top: 70px;
}

#milestones h2 {
    position: relative; width: 30%; background-color: darkgoldenrod; padding: 1rem; text-align: center; margin: 0px auto; box-shadow: 2px 2px #eee;
}
.milestone-back  {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; 
}

.milestone-back img {

    position: absolute; left: 0; width: 100%; height: 100%;
}

.inside-milestones {
    position: relative; display: flex;
}

.milestone {
    position: relative; background-color: #222; width: 35%; padding: 20px; margin: 15px; margin-top: 25px; color: #eee; box-shadow: 2px 2px darkgoldenrod; border-radius: 20px;
}

.milestone:hover {
    box-shadow: 5px 5px darkgoldenrod; cursor: pointer; transition: ease-in-out 100ms;
}

.milestone h3  {
    margin-bottom: 5px; font-size: 20px;
}

.milestone hr  {
    width: 50px; height: 8px; background-color: darkgoldenrod; margin-bottom: 10px;
}

#our-project {
    position: relative; padding: 70px 0px; border-top: 1px solid grey; border-bottom: 1px solid lightgray; 
}

#our-project hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px auto; margin-top: 10px; margin-bottom: 20px;
}

#our-project h3 {
    text-align: center; font-size: 25px; margin-bottom: 20px;
}

.our-project-content {
    position: relative; display: flex; width: 100%; box-sizing: border-box; align-items: center; align-content: center;
}

.our-project-content h4 {
    font-size: 18px; margin-bottom: 15px;
}

.projects {
    width: 25%; margin: 10px 3%;     border-radius: 10px; box-sizing: border-box;
}

.projects:hover  {
    box-shadow: 5px 5px darkgoldenrod; transition: ease-in-out 250ms; cursor: pointer;
}

.projects img {
    width: 100%; margin-bottom: 15px;    border-radius: 10px;
}

.wbsalt  {
    position: relative; ; padding: 25px; box-shadow: 3px 3px #eee;
}

.ftdutoit  {
    position: relative; ; padding: 25px; box-shadow: 3px 3px #eee;
}

#our-project .ftdutoit hr {
    position: relative; height: .5em; width: 6em; background-color: grey; margin: 0px; margin-top: 10px; margin-bottom: 20px;
}

.westcoastindustrial {
    position: relative; padding: 25px; box-shadow: 3px 3px #eee;
}

#our-project .wbsalt hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px; margin-top: 10px; margin-bottom: 20px; 
}

#our-project .westcoastindustrial hr {
    position: relative; height: .5em; width: 6em; background-color: orange; margin: 0px; margin-top: 10px; margin-bottom: 20px; 
}


.admheavyhaullage  {
    position: relative; padding: 25px; box-shadow: 3px 3px #eee;
}

#our-project .admheavyhaullage  hr {
    position: relative; height: .5em; width: 6em; background-color: grey; margin: 0px; margin-top: 10px; margin-bottom: 20px;
}

#founders  {
    position: relative; width: 90%;   margin: 0px auto; margin-top: 50px;
}

#founders h3  {
    font-size: 25px; position: relative;  margin: 0px auto; text-align: center; margin: 50px 0;
}

#founders h2   {
    font-size: 20px;
}

#founders h4   {
    font-size: 15px; font-style: italic;
}
#founders p {
    margin-top: 10px; 
}

.top-rule {
    position: relative;  width: 50px; height: 5px; background: darkgoldenrod;  margin: 0px auto;
}
.werner {
    position: relative; width: 95%; box-sizing: border-box;  display: flex; background-color: #0E1C1F; margin: 100px 0;  margin-left: 5%; 
}

.werner-img {
    background-color: darkgoldenrod; width: 100px; height: 200px; position: absolute; bottom: 0; right: 5%; display: block;
 }

 .werner-profile-pic  {
    position: absolute; width: 250px; height: 250px; z-index: 1; top: -30px; right: 5%; border-radius: 50%; border: 2px solid darkgoldenrod; 
 }



.werner-content {
    width: 40%; background-color: darkgoldenrod; margin-top: -30px; margin-left: -30px; box-shadow: 3px 3px 3px 3px #eee; position: relative; padding: 20px; border: 3px solid #eee; margin-bottom: 30px;
}

.werner-contact {
    position: absolute;  height: 60px; background-color: white; bottom: 0; left: 50%; padding: 20px; text-align: center; border-radius: 20px 20px 0 0px;
}

.werner-contact a  {
    color: #222;  text-decoration: none;
}

.werner-contact i {
    font-size: 12px; margin: 5px;
}


.founder-line {
    position: relative; width: 100%; margin: 30px 0; background: #eee; height: 2px;
}

.melissa {
    position: relative; width: 95%; box-sizing: border-box;  display: flex; background-color: #0E1C1F; margin: 50px 0;  margin-right: 5%; margin-top: 150px;  justify-content: flex-end;
}

.melissa-img {
    background-color: darkgoldenrod; width: 100px; height: 200px; position: absolute; bottom: 0; left: 5%; display: block;
 }

 .melissa-profile-pic  {
    position: relative; width: 250px; height: 250px; z-index: 1; top: -30px; right: 35%; border-radius: 50%; border: 3px solid darkgoldenrod; 
 }



.melissa-content {
    width: 40%; background-color: darkgoldenrod; margin-top: -30px; box-shadow: 1px 1px 3px 3px #eee; position: relative; padding: 20px; border: 3px solid #eee; margin-bottom: 30px; margin-right: -30px;
}

.melissa-contact {
    position: absolute;  height: 60px; background-color: white; bottom: 0; right: 50%; padding: 20px; text-align: center; border-radius: 20px 20px 0 0px;
}


#index_life                               {width: 100%; padding: 5%;  position: relative; box-sizing: border-box; margin: 0px auto; display: flex;}
.index_life                               {float: left;  position: relative;}
.index_life_left                          {background: #0E1C1F; color: #fff; width: 25%; position: relative; padding: 20px;}
#index_life .index_life_left h3                       {padding: 10px; font-size: 15px; background:darkgoldenrod; color: #fff; width:30%; text-transform: uppercase;   margin-bottom: 20px}
.index_life_left h1                       {font-size: 20px; font-weight: 750; font-family: Arial; text-transform: uppercase;}
.index_life_left hr                       {margin: 20px 0; height: 3px; width: 40px; background: darkgoldenrod}
.index_life_left p                        {font-size: 14px}
.index_life_left button                   {background: darkgoldenrod; padding: 1rem 2rem; font-size: 15px; margin-top: 30px; text-transform: uppercase; color: #fff; cursor: pointer;}

.index_life_right                         { position: relative;width: 70%; height: 90vh;  margin-left: 5%;}
.index_life_right_img                     {width: 100%; height: 100%; position: relative; }
.index_life_right_cont                     {position: relative; z-index: 2; padding: 0px; position: relative; }
#index_life .index_life_right_cont h3                  {padding: 1rem 2rem; font-size: 15px; background: darkgoldenrod; color: #fff; width:47%;  text-transform: uppercase;  position: absolute; left: 20px; top: 20px;}

.index_life_right_cont hr   {
    margin: 20px 0; height: 3px; width: 40px; background: darkgoldenrod;
}

.vacancies {
    background-color: #eee; height: 300px; margin: 30px 0;
}

#contact-us {
    position: relative; width: 100%;   border-top: 1px solid grey; box-sizing: border-box; margin-bottom: 330px;

}

.contact-details {
    position: relative; width: 100%; background: #0E1C1F;  height: 450px; padding: 5%; z-index: 1; box-sizing: border-box;
}

.contact-details h3 {
    font-size: 30px; color: #eee; margin-bottom: 20px;
}
.contact-details h4 {
    font-size: 16px; margin: 20px 0;
}

.contact-details hr  {
    position: relative; width: 50px; height: 5px; background: darkgoldenrod;  margin-bottom: 10px;
}

.contact-details p {
    font-size: 14px; margin: 20px 0;color: #eee;
}

.get-in-touch {
    position: absolute;  background-color: lightgrey; padding: 50px; left: 5%; bottom: -280px; z-index: 2; border-radius: 20px;
}

.get-in-touch p {
    margin-bottom: 5px;
}
.get-in-touch h4 {
    font-size: 16px; margin: 20px 0;
}

.get-in-touch i {
    position: relative;
     background-color: #0E1C1F; padding: 5px; height: 15px; width: 15px; font-size: 14px; color: #eee; border-radius: 50%; justify-content: center;  align-items: center; text-align: center; margin: 5px;
}
.get-in-touch hr  {
    position: relative; width: 80%; height: 5px; background: darkgoldenrod;  margin-top: 50px;
}

.get-in-touch a {
    text-decoration: none; color: darkgoldenrod; 
}

.get-in-touch a:hover {
    text-decoration: underline;
}

.location {
    position: absolute; width: 40%; right: 5%; z-index: 2; height: 450px; bottom:-150px; box-shadow: 2px 2px #eee; padding: 10px; box-sizing: border-box; background-color: #eee; border-radius: 20px;
}

footer {
    position: relative;  background-color: black;  color: #eee; padding: 25px;
}

footer a {
    text-decoration: none; color: orange;
}

footer a:hover {
    text-decoration: underline;
}


.footer-content {
    position: relative; display: flex; margin-bottom: 20px; justify-content: flex-end;
}

.footer-logo {
width: 25%; margin-top:10px;
}

.footer-logo img {
    width: 100%; margin-bottom: 10px; border-radius: 20px;
}

.footer-logo p {
    text-align: center;
}

.footer-nav {
    position: relative; width: 30%; box-sizing: border-box; margin-left: 50px; display: flex; justify-content: center; 
}

.footer-nav ul {
    position: relative; display: block; transition: all ease-in-out 250ms; width: 50%; margin-top: 10px; 
}

.footer-nav ul li {
    list-style: none;  margin-bottom: 10px;
}

.footer-social {
    position: relative; width: 20%; text-align: center; margin-top: 10px;
}

.footer-social h3 {
    font-size: 15px; margin-top: 20px;
}

.footer-social h4 {
    font-size: 15px; margin-bottom: 10px;
}

.footer-social hr  {
    position: relative; width: 50px; height: 5px; background: darkgoldenrod; margin: 0px auto; margin-bottom: 10px;
}

.footer-icons {
    position: relative; width: 100%; display: flex; justify-content: center;  margin: 20px 0;
}

.footer-icons a {
     font-size: 14px; padding: 5px; border:  2px solid orange; border-radius: 50%;  height: 15px; width: 15px; margin: 5px; background: #fafafa; display: inline-flex; justify-content: center; align-items: center;
}


/*
.footer-nav a::after {
    content: ' ';
    position: absolute;
    display: block;
    height: 0.4em;
    width: 0%;
    background-color: var(--pink);
    bottom: -1em;
    transition: all ease-in-out 250ms;
}

.footer-nav li a:hover::after {
    width:6%;
}

.footer-nav li a:hover {
     color: var(--pink);
}*/

.footer-contact {
    position: relative; width: 20%;
}

.footer-contact h4  {
    margin: 10px 0; font-size: 15px; text-align: left;
}

.footer-contact hr  {
    position: relative; width: 50px; height: 5px; background: darkgoldenrod; margin: 0px; margin-bottom: 10px; 
}

.footer-contact i  {
    position: relative; padding: 6px;
}

.footer-contact a {
    color: #eee;
}

.footer-bottom {
    position: absolute; width: 100%;  padding: 5px ; display: flex;  justify-content: center; background-color: #222; box-sizing: border-box; left: 0; 
}

.footer-bottom p {
    position: relative;  padding: 0 4em ; padding-top: 5px; font-size: 12px;
}

.footer-bottom a {
    text-decoration: none; color: orange;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

}