/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

html {
  scroll-behavior: smooth;
}

body {
    padding-top: 3rem;
    color: #5a5a5a;
  }
  

.mt-6{
    margin-top: 6vh;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
  /* NAVIGATION
  -------------------------------------------------- */

  /* Nav-Items auto margin */
  .mra{
      margin-right: auto;
  }

  /* Nav Font */

  .navFont{
      letter-spacing: 0.05vw;
      font-size: larger;
      font-weight: 450;
  }

  #smallNavLogo{
      margin-right: 3vw;
      height: 60px;
  }

  @media (min-width: 801px) {
    .picContainer {
      position: relative;
      text-align: center;
      color: white;
    }
    
    .picText {
      background-color: #21252981;
      padding: 1rem;
      border-radius: 1rem;
      position: absolute;
      top: 3vh;
      left: 12vw;
    }

    .picText h1{
      font-weight: 400;
    }
  }

  @media (max-width: 800px) {
    .picContainer {
      position: relative;
      text-align: center;
      color: white;
    }
    
    .picText {
      background-color: #21252981;
      padding: 0.3rem;
      border-radius: 0.5rem;
      
      position: absolute;
      top: 8vw;
      left: 10vw;
      transform: translate(0%, -50%);
    }

    .picText h1{
      font-size: 1.1rem;
      font-weight: 400;
    }
  }

  #cart{
      width: 20vw;
  }
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  
  /* Carousel base class */
  .carousel {
    margin-bottom: 4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
    background-color: #2727275b;
    padding: 0.5vh 1vw 0.5vh;
    width: 31vw;
    border-radius: 1vh;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 32rem;
  }
/*
  .carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 32rem;
  }
*/

  /* HOME CSS
  -------------------------------------------------- */
  .homeText{
    color: black;
  }
  .homeText h1{
    text-align: center;
    font-weight: 400;
  }
  .homeText p{
    font-weight: 400;
    font-size: 1rem;
  }

  .homeTextBox{
      padding: 0 12vh 0 12vh;
  }

  @media (max-width: 800px) {
    .homeTextBox{
      padding: 0 4vh 0 4vh;
    }
  }

  .service-arrow{
    width: 16%;
  }
  .service-icon{
    width: 30%;
  }
  .service-text{
    width: 56%;
  }

  @media (max-width: 400px) {
    .service-text h3{
      font-size: 90%;
    }
  }

  .defaultFont{
    color: black;
  }

  .defaultFont h1{
    font-weight: 400;
  }

  .defaultFont{
    font-weight: 400;
    font-size: 1rem;
  }

  .greyBox {
      background-color: #9797978a;
      padding: 2vh 1vw 2vh 1vw;
      text-align: center;
  }

  .greyBox img{
    margin: 3vh 0 3vh 0;
    width: 75%;
    border-radius: 1vw;
  }

  .serviceBox{
    border: 4px solid #A80808;
    padding: 0.75rem;
    color: black;
    height: 12vh;
  }

  .serviceBox img{
    height: 11vh;
  }

  .serviceBox h1{
    text-align: center;
  }

  .picDesc{
    text-align: center;
    margin-top: 0.5rem;
    font-weight: bold;
  }
  
  .services img{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  @media (max-width: 500px) {
    .services img{
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 400px;
    }
  }

  @media (max-width: 400px) {
    .services img{
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 300px;
    }
  }

  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
  @media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
      margin-bottom: 1.25rem;
      font-size: 1.25rem;
      line-height: 1.4;
    }
  
    .featurette-heading {
      font-size: 50px;
    }
  }
  
  @media (min-width: 62em) {
    .featurette-heading {
      margin-top: 7rem;
    }
  }

  #home-img{
    width: 100%;
    max-width: 80vw;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  @media (max-width: 800px) {
    #home-img{
      width: 100%;
      max-width: 100vw;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  }

  textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    max-width: 100%;
}

  /* Footer */

  footer{
    background-color: #212529;
    padding: 1rem;
  }

  footer a{
    text-decoration: none;
    color: white;
    font-size: 1rem;
  }

  footer p{
    margin-top: 1.5vh;
  }