/* Universal Styles */
html {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 62.5%; 
    box-sizing: border-box;

}

body {
  font-size: 1.6rem;
  background-color: #f2f2f2;
  min-height: 100vh;
  max-width: 100vw;
  margin: 0;
}

.dark-body {
  background-color: #2c2727;
}

main {
  overflow-x: hidden;
}

a {
  color: #f2f2f2;
}

a:link {
  text-decoration: none;
  color: #f2f2f2;
}

a:visited {
  text-decoration: none;
  color:#f2f2f2;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: underline;
}


/* header styles */
header {
    z-index: 1;
    position: absolute;
    top: 0px;
    margin-top: 0px;
    width: 100%;
}

.nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: rgba(1, 5, 5, 0.8);
    height: 10vh;
}

.logo img {
    max-width: 30vw;
    max-height: 10vh;
}


.nav-bar menu {
    display: flex;
    list-style-type: none;
    flex-direction: row;
    justify-content: flex-start;
}


.nav-bar menu li {
    padding-right: 5vw;
    font-family: "Schibsted Grotesk", sans-serif;
}


.nav-bar menu a:hover {
  opacity: 1;
  color:#9ca484;
  text-shadow: 0 0 8px;
}

.side-menu {
  display: none;
  /*get rid of checkbox*/
}

.logo {
    font-size: 2.4rem;
    padding-left: 5vw;
    font-family: Verdana, sans-serif;
}

/* mobile header styles */
@media only screen and (max-width: 760px) {
  .nav-bar menu {
    width: 100%;
    height: 100%;
    top: 5rem;
    visibility: hidden;
    position: fixed;
    background-color:#453F3C;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    padding-inline-start: 0;
  }

  .nav-bar menu li {
    padding-bottom: 3rem;
    font-size: 2.4rem;
  }


      /*menu icon */
      .hamb {
        cursor: pointer;
        float: right;
        padding: 4rem;
      }

      .hamb-line {
        background: #453F3C;
        display: block;
        height: 2px;
        position: relative;
        width: 2.4rem;
      }

      .hamb-line::before,
      .hamb-line::after {
        background: #453F3C;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
      }

      .hamb-line::before {
        top: 5px;
      }
      .hamb-line::after {
        top: -5px;
      }

      /*side-menu toggle changes */
      .side-menu:checked ~ #links {
        visibility: visible;
        opacity: 0.8;
        left: 0;
        margin-top: 2vh;

      }

      .side-menu:checked ~ .hamb .hamb-line {
        background: transparent;
      }

      .side-menu:checked ~.hamb .hamb-line::before {
        transform: rotate(-45deg);
        top: 0;
      }

      .side-menu:checked ~ .hamb .hamb-line::after {
        transform: rotate(45deg);
        top: 0;
      }
}

/* Footer styles */
footer {
    background-color: #2c2727;

}
footer .content {
    color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2rem;
    padding-left: 3rem;
    padding-right: 3rem;

}

/*mobile footer changes */
@media only screen and (max-width: 768px) {
  footer .content {
    padding-bottom: 1.5rem;
  }
}

/*Landing page styles */

.jumbotron {
    max-width: 100%;
}

.jumbotron img {
    width: 100vw;
    max-height: 100vh;
}

.banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;;
    position: absolute;
    top: 35vh;
}

.banner h1 {
    color:#f2f2f2;
    font-family: "Schibsted Grotesk", sans-serif;
    font-weight: 700;
    font-size: 6rem;
    margin-bottom: 17rem;

}

/*js slide-in styles */
.slide-in {
    opacity:0;
    transform: translateX(-40%);
    transition: all 1s ease-out;
  }

  .active {
    opacity: 1;
    transform: translateX(0);
  }

  /* js fade-in styles */
.fade-in {
  opacity: 0;
  transition: all 1s ease-in;
}

.visible {
  opacity: 1;
}



.banner h2 {
    color:#f2f2f2;
    z-index: 1;
}

.section2 {
    display: flex;
    align-items: center;
    margin: 10vw;
}

 .cont1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 20vw;
    margin-right: 5vw;
}

.announcement {
    color:#5daf50;
    font-family: "Schibsted Grotesk", sans-serif;
    font-weight: 700;
    font-size: 7rem;
}

.section2 p {
    color:#2c2727;
    font-size: 2rem;
    width: 50vw;
}

.section3 {
    background-image: linear-gradient(45deg, #2c2727, #5daf50);
    height: 80vh;
    margin-top: 5rem; 
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

.section3 .announcement {
    color:#f2f2f2;
}

.gradient-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20vw;
    height: 65vh;
}

.gradient-box h3 {
    color: #f2f2f2;
    margin-bottom: 7rem;
}

.gradient-box ul {
    list-style-type: none;
    color: #f2f2f2;
}

.gradient-box ul li {
    flex-wrap: wrap;
    margin-bottom: 4rem;
}


.section4 {
    margin: 2vw 10vw 2vw 0vw;
    max-width: 100%;
}

.section4 img {
    margin-right: 7vw;
    width: 45vw;
    max-height: 80vh;
    float: left;
}

.intro-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 50%;
    height: 70vh;
    z-index: 1;
    color: #453f3c;
}

.section5 {
    background-color: #453F3C;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-box {
    background-image: url("./media/section5.jpg");
    background-size: cover;
    background-color: rgba(255, 0, 0, 0.5);
    width: 80vw;
    height: 60vh;
    margin: 5rem;
    display: flex;
    justify-content: center;
}

.testimonial {
    display: flex;
    margin: 8vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    color: #f2f2f2;
}

.quote {
    font-style: italic;
    font-size: 2rem;
    line-height: 2;
}

.testimonial a {
  font-style: italic;
  text-decoration: underline;
}

.testimonial a:hover {
  text-decoration: none;

}

/*tablet landing page styles */
@media (min-width: 768px) and (max-width: 1024px) {

  .jumbotron img {
    width: initial;
  }

  .banner h1 {
    margin-bottom: 8rem;
  }

  .section4 {
    margin: initial;
  }
  
  .section4 img {
    width: 100vw;
    margin-right: initial;
    float: initial;
  }
  
  .intro-copy {
    margin: 0 5vw;
    height: 40vh
  }

  .intro-copy p {
    font-size: 2rem;

  }
  
  .photo-box {
    width: 100vw;
    margin: initial;
    height: initial;
  }
}

/*mobile landing page styles */
@media only screen and (max-width: 768px) {

  .jumbotron img {
    width: initial;
  }

  .banner {
    left: 7vw;
  }

  .banner h1 {
    font-size: 4rem;
  }

  .announcement {
    font-size: 4rem;
}

.section2 p {
    margin-left: 5vw;
    font-size: 1.6rem;
    width: 45vw;
}

.section3 {
  flex-direction: column;
  height: auto;
  flex-wrap: wrap;
  align-content: center;
  align-items: initial;
}


.section3 .announcement {
  font-size: 4rem;
}

.gradient-box {
  flex-wrap: wrap;
  width: auto;
  height: auto;
  align-items: initial;
}

.gradient-box h3 {
  margin-bottom: 3rem;
}

.gradient-box .item-list {
  padding-bottom: 0vh;
}

.section4 {
  margin: initial;
}

.section4 img {
  width: 100vw;
  margin-right: initial;
  float: initial;
}

.intro-copy {
  margin: 0 5vw;
}

.photo-box {
  width: 100vw;
  margin: initial;
  height: initial;
}
}

/*Services page styles */

.service-header {
  max-width: 100vw;
}

.service-header img {
  width: 100vw;
  max-height: 45vh;
  object-fit: cover;
  object-position: top;
}

.light {
  background-color: #f2f2f2;
  color: #2c2727;
}

.dark {
  background-color: #453f3c;
  color: #f2f2f2
}

.service-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-left: 5vw;
  padding-right: 5vw;
  margin-left: 15vw;
  margin-right: 15vw;
  min-height: 50vh;
}

.light h1 {
  color: #453F3C;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 5.5rem;
  font-weight: 700;
  padding-bottom: 6rem;
  padding-top: 5rem;
  border-bottom: 2px solid #453f3c;
}

.light h2 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  padding-bottom: 3rem;
  padding-top: 5rem;
  border-bottom: 2px solid #453f3c;
}

.service-section p {
  font-size: 2rem;
  padding-top: 2rem;
  padding-bottom: 10vh;
}


.item-list {
  color: #f2f2f2;
  line-height: 2.0;
  padding-bottom: 10vh;
}

.item-list-alt {
  color: #453F3C;
  line-height: 2.0;
  padding-bottom: 10vh;
}


.dark h2 {
  color: #f2f2f2;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  padding-bottom: 3rem;
  padding-top: 5rem;
  border-bottom: 2px solid #f2f2f2;
}

/*services page mobile styles */
@media only screen and (max-width:768px) {
  .service-section {
    margin: initial;
  }
}

/*about page styles */
.about-box {
  margin: 40vh 10vw 20vh;
  color: #2c2727;
  display: flex;
}

.about-box img {
  width: 40vw;
  object-fit: contain;
}

.bio {
  animation: fadeInAnimation ease-in 2s;
  margin-left: 5vw;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.bio p {
  font-size: 2rem;
  line-height: 1.5;
}

/* about page tablet styles */ 
@media (min-width: 768px) and (max-width: 1000px) {
  .about-box {
    margin: 10vh 0;
    flex-direction: column;
  }

  .about-box img {
    width: 100vw;
  }

  .bio {
    margin: 5vw;
  }
}

/* about page mobile styles*/
@media only screen and (max-width: 768px) {
  .about-box {
    margin: 10vh 0;
    flex-direction: column;
  }

  .about-box img {
    width: 100vw;
  }

  .bio {
    margin: 5vw;
  }
}


/* connect page styles */

.connect-cont {
  margin-top: 10vh;
  background-color:#453f3c;
  max-width: 100vw;
  display: flex;
  flex-direction: row;
  max-height: 95vh;
  overflow-y: hidden;
}

.connect-img {
  width: 55vw;
}

.connect-img img {
  width: 100%;
  height: auto;
}

.connect-box {
  width: 45vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.connect-box h1 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 500;
  font-size: 3.6rem;
  margin-top: 10rem;
  color:#f2f2f2;
}

.connect-box h3 {
  color: #f2f2f2;
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  margin-bottom: 3rem
}

/*connect page mobile styles */
@media only screen and (max-width: 768px) {

  .connect-cont {
    display: block;
  }

  .connect-img {
    width: 100vw;
  }

  .connect-box {
    width: 100vw;
    position: absolute;
    top: 20vh;
  }
}