/*hex codes for colour variables are here*/
:root {
    --white: #fff;
    --dad_blue: #254061;
    --link_hover: #475f7b;
}

html, body {
    height: 100%;
    top: 0vw;
    width: 100%;
}

/*background colour, fonts*/
body {
    margin: 0 auto;
    height: 100%;
    background-color: var(--dad_blue);
    font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
    width: 100%; 
    margin: 1 auto;
}

.top_header {
    background-color: var(--dad_blue);
    max-height: 6vw;
    width: 100%;
    top: 0vw;
}

/* idk what this does but don't mess with it*/
.inner{
    width: 100%; 
    margin: 1 auto;
    height: inherit;
}

/*link styling*/
.nav_links {
    display: flex;
    line-height: 5vw;
    list-style: none;
}

ul li:first-child {
    float: left;
}

nav ul li { 
    list-style:none;
    margin:10px;
    float: right; 
  }

/*link formatting*/
.links {
    display: inherit;
    margin-left: 27vw;
    margin-right: 1vw;
    font-size: 2vw;
    line-height: auto;
    margin-top: 1vw;
}

/*space between the nav links*/
.nav_links a {
    margin-left: 4vw;
}

/* style for link fonts */
a {
    text-decoration: none; 
    color: var(--white);
}

/*link hover colour*/
a:hover {
    color: var(--link_hover);
  }

  /*landing page photo + size and details*/
.hero_header  {
    height: 44vw;
    background-size: cover;
    text-align: center;
    background-image: url("images/heroimage.jpg");
    margin-top: 3vw;
}

/*landing page photo properties*/
.hero_header_inner  {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*text formatting for main text on landing page*/
.sub_headline {
  display: flex;
  justify-content: flex-end;
  font-size: 5vw;
  font-weight: bold;
  color: var(--white);
  text-shadow: .15vw .15vw #000;
}


.page_2{
    background-color: var(--white);
    position: absolute;
    width: 100%;
    height: 50vw;
    left: 0px;
    top: 65vw;
}

.services {
    font-family: Arial;
    font-weight: bold;
    font-size: 5vw;
    color: var(--dad_blue);
    text-align: center;
     top: 10vw;
}

/*sales and operations leadership box*/
.box1{
    position: absolute;
    top: 8vw;
    width: 37.29%;
    height: 19vw;
    left: 9.65%;
    background: #F4F4F4;
    border-radius: 1vw;
}

/*for the titles underneath services*/
.heading1{
    font-family: Arial;
    font-weight: bold;
    font-size: 2.3vw;
    text-align: center;
    color: var(--dad_blue)
}

/*for the list items under services*/
.services1{
    font-family: Arial;
    font-weight: normal;
    max-height: 11vw;
    font-size: 2vw;
    text-align: center;
    color: var(--dad_blue);
    list-style: none;
}

/*product management box*/
.box2{
    position: absolute;
    top: 8vw;
    width: 37.29%;
    height: 19vw;
    left: 52.7%;
    background: #F4F4F4;
    border-radius: 1vw;
    }

.box3{
    position: absolute;
    top: 30vw;
    width: 37.29%;
    height: 15vw;
    left: 9.65%;
    background: #F4F4F4;
    border-radius: 1vw;
}

.box4{
    position: absolute;
    top: 30vw;
    width: 37.29%;
    height: 15vw;
    left: 52.7%;
    background: #F4F4F4;
    border-radius: 1vw;
    }

.page2navy{
    position: absolute;
    width: 100%;
    height: 20vw;
    left: 0px;
    top: 50vw;
    background: var(--dad_blue);
    text-align: center;
    }

.howcanwehelpyou{
    font-family: Arial;
    font-size: 3vw;
    text-align: center;
    color: white;
    }

.page3{
    position: absolute;
    width: 100%;
    height: 60vw;
    left: 0px;
    top: 130vw;
    background: white
}

    
.photo{
    position: absolute;
    left: 9.65%;
}
    
.founder{
    position: absolute;
    top: 15vw;
    font-family: Arial;
    text-align: left;
    font-weight: bold;
    font-size: 3.5vw; 
    color: var(--dad_blue);
    margin-bottom: 2vw;
    margin-left: 1.5vw;
}
    
.founder2{
    position: absolute;
    top: 19vw;
    font-family: Arial;
    font-weight: normal;
    text-align: left;
    font-size: 3vw; 
    color: var(--dad_blue);
    margin-left: 1.5vw;
}
    
.school{
    position: absolute;
    top: 22.5vw;
    font-family: Arial;
    font-weight: normal;
    font-size: 2.2vw;
    text-align: left;
    color: var(--dad_blue);
    margin-left: 1.5vw;
}
    
.table{
    margin-left: 9.65%;
    margin-right: 0;
    top: 12vw;
}
    
.tagline{
    font-family: Arial;
    font-style: normal;
    font-weight: normal;
    font-size: 2vw;
    color: var(--dad_blue);
    margin-left: 9.65%;
    margin-top: 2%;
    margin-bottom: 1%;
    margin-left: 10.65%
}
    
.list{
    position: absolute;
    left: 8.00%;
    font-family: Arial;
    font-style: normal;
    font-weight: normal;
    font-size: 2vw;
    line-height: 3vw;
    color: var(--dad_blue);
}

.page4{
    position: absolute;
    width: 100%;
    height: 30vw;
    left: 0px;
    top: 60vw;
    background: var(--dad_blue);
    font-family: Arial;
    font-weight: normal;
    font-size: 2vw;
    color: white;
}

.contact {
    font-family: Arial;
    font-weight: bold;
    font-size: 5vw;
    color: var(--white);
    text-align: center;
    top: 1vw;
}

.mapformat{
    margin-bottom: 3.5vw;
    margin-top: .5vw;
    padding-top: 4vw;
    margin-left: 38%;
}

.linkedinformat{
    width: 10vw;
    margin-top: 4.8vw;
    margin-left: 31vw;
}

.emailformat{
    width: 10vw;
    height: auto;
    margin-top: 2.6vw;
    margin-left: 56vw; 
    margin-bottom: 2vw;
}

.copyright{
    margin-left: 38%;
    font-size:1vw;
    color: white;
    font-size: arial;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

.subscribe{
    color: black;
}