/**
 * Integrity Group styles
 */

*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

body {
   font-family: "Fira Sans", sans-serif;
   font-weight: 400;
   font-style: normal;
   line-height: 1.4;
   color: #555;
   font-size: 18px;
}
@media(max-width:900px) {
   body {
      font-size: 17px;
   }
}

:root {
   --tig-teal: #00beba;
}

a,
.teal {
   color: var(--tig-teal);
}
p {
   margin: 0 0 15px 0;
}

h2 {
   color: var(--tig-teal);
   font-size: 34px;
   margin: 0 0 15px 0;
   line-height: 1.1;
   font-weight: 700;
}
h3 {
   font-size: 24px;
   margin: 0 0 15px 0;
   font-weight: 700;
}
h4 {
   font-size: 20px;
   margin: 0 0 15px 0;
   font-weight: 700;
}
h5 {
   font-size: 18px;
   margin: 0 0 10px 0;
   font-weight: 700;
}
ul {
   margin: 0 0 15px 0;
}
@media(max-width:900px) {
   h2 {
      font-size: 29px;
   }
   h3 {
      font-size: 22px;
   }
   h4 {
      font-size: 18px;
   }
   h5 {
      font-size: 16px;
   }
}

.pagewidth {
   width: 1100px;
   margin: 0 auto;
}
@media(max-width:1140px) {
   .pagewidth {
      width: 100%;
      padding-left: 40px;
      padding-right: 40px;
   }
}
@media(max-width:768px) {
   .pagewidth {
      padding-left: 20px;
      padding-right: 20px;
   }
}

#masthead {
   padding: 20px 0;
}
#masthead .pagewidth {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
}
#masthead a.logo {
   display: block;
   width: 270px;
}
#masthead .tagline {
   text-align: right;
   font-size: 19px;
   font-weight: 700;
   color: var(--tig-teal);
}
@media(max-width:975px) {
   #masthead .pagewidth {
      display: block;
      text-align: center;
   }
   #masthead a.logo {
      width: 220px;
      margin: 0 auto 10px auto;
   }
   #masthead .tagline {
      margin-top: 30px;
      text-align: center;
      font-size: 16px;
   }
}

/* home row styling */
.home-row {
   padding: 60px 0;
}
@media(max-width:768px) {
   .home-row {
      padding: 40px 0;
   }
}

#hero {
   background: url(assets/images/ocean.jpg) no-repeat center center;
   background-zie: cover;
   padding: 150px 0;
   text-align: center;
}
#hero h1 {
   width: 700px;
   max-width: 100%;
   display: inline-block;
   background: rgba(0,0,0,0.3);
   color: #fff;
   text-align: center;
   font-size: 35px;
   padding: 20px 30px;
   line-height: 1.1;
}
@media(max-width:900px) {
   #hero {
      padding: 90px 0;
   }
   #hero h1 {
      font-size: 30px;
   }
}
@media(max-width:768px) {
   #hero {
      padding: 70px 0;
   }
   #hero h1 {
      font-size: 24px;
   }
}

#why .pagewidth {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
}
#why .pagewidth .col-1 {
   width: 55%;
}
#why .pagewidth .col-2 {
   width: 45%;
   display: flex;
   justify-content: flex-end;
}
@media(max-width:900px) {
   #why .pagewidth .col-1 {
      padding-right: 40px;
   }
}
@media(max-width:700px) {
   #why .pagewidth {
      display: block;
   }
   #why .pagewidth .col-1 {
      width: 100%;
      padding-right: 0px;
      text-align: center;
   }
   #why .pagewidth .col-1 h2,
   #why .pagewidth .col-1 p {
      text-align: left;
   }
   #why .pagewidth .col-2 {
      width: 100%;
      display: block;
   }
   #why .pagewidth .col-2 img {
      margin: 0 auto;
   }
}

#products {
   background: rgba(0,190,186,0.1);
}
#products .pagewidth {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
}
#products .col-1 {
   width: 60%;
   padding-right: 40px;
}
#products h2 {
   color: #444;
}
#products ul li {
   font-size: 24px;
   font-weight: 700;
   margin: 0 0 5px 0;
}
#products .col-2 {
   width: 40%;
}
#products .quote {
   background: #fff;
   color: var(--tig-teal);
   padding: 30px;
   border-radius: 10px;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
}
#products .quote blockquote {
   margin: 0;
   padding: 0;
   text-align: center;
   font-style: italic;
}
#products .quote blockquote p {
   font-size: 32px;
   font-weight: 400;
   font-family: "PT Serif", serif;
}
#products .quote p {
   font-size: 16px;
   font-weight: 700;
   text-align: center;
}
@media(max-width:900px) {
   #products ul li {
      font-size: 19px;
   }
   #products .quote blockquote p {
      font-size: 25px;
   }
}
@media(max-width:768px) {
   #products .pagewidth {
      display: block;
   }
   #products .col-1 {
      width: 100%;
      padding-right: 0px;
   }
   #products .col-1 h2,
   #products .col-1 p {
      text-align: center;
   }
   #products .col-1 ul {
      margin-left: 100px;
   }
   #products .col-2 {
      margin-top: 30px;
      width: 100%;
   }
}
@media(max-width:550px) {
   #products .col-1 ul {
      margin-left: 0px;
   }
}

#who-we-are {
   padding: 60px 0 40px 0;
}
#who-we-are .pagewidth {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
}
#who-we-are .col-1 {
   width: 25%;
}
#who-we-are .col-2 {
   width: 75%;
   padding-left: 40px;
}
#who-we-are .col-2 ul li {
   color: var(--tig-teal);
}
@media(max-width:700px) {
   #who-we-are .pagewidth {
      display: block;
   }
   #who-we-are .col-1 {
      width: 100%;
      margin: 0 0 20px 0;
      text-align: center;
   }
   #who-we-are .col-1 img {
      margin: 0 auto;
   }
   #who-we-are .col-2 {
      width: 100%;
      padding-left: 0px;
   }
   #who-we-are .col-2 h2,
   #who-we-are .col-2 p {
      text-align: center;
   }
   #who-we-are .col-2 ul {
      margin-left: 100px;
   }
}
@media(max-width:460px) {
   #who-we-are .col-2 ul {
      margin-left: 0px;
   }
}

#team {
   padding-bottom: 60px;
}
#team .pagewidth {
   display: grid;
   grid-auto-flow: column;
   grid-column-gap: 30px;
   grid-template-columns: repeat(4, 1fr);
}
#team .team-col {
   text-align: center;
}
#team .team-col .thumb {
   aspect-ratio: 1 / 1.3;
   margin: 0 auto 15px auto;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
#team .team-col h3 {
   text-align: center;
}
#team .team-col .title {
   font-size: 16px;
}
#team .team-col a {
   font-size: 16px;
}
@media(max-width:800px) {
   #team .pagewidth {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-flow: row;
   }
   #team .team-col {
      margin-bottom: 30px;
   }
   #team .team-col .thumb {
      max-width: 250px;
   }
}
@media(max-width:480px) {
   #team .pagewidth {
      display: block;
   }
   #team .team-col {
      margin-bottom: 30px;
   }
   #team .team-col .thumb {
      max-width: 200px;
   }
}

#footer {
   padding: 60px 0;
   background: var(--tig-teal);
   color: #fff;
   text-align: center;
}
#footer a {
   color: #fff;
   text-decoration: none;
}
#footer a.logo {
   width: 250px;
   display: inline-block;
   background: #fff;
   margin: 0 0 15px 0;
   padding: 15px;
}
#footer img {
   display: inoine-block;
}
#footer p {
   font-weight: 700;
   margin: 0;
}