/*
// Variables & Definitions
*/

.bottom-section {
  margin-top: 150px;
  position: relative;
  background-color: #ebeef1;
  padding-bottom: 70px;


  .info-container {
    padding-top: 40px;
    padding-bottom: 30px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    justify-content: space-evenly;

    > div {
      h3 {
        font-size: 22px;
        font-family: Roboto, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        color: #333647;
        text-align: center;
        font-weight: 600;
        margin-top: 0px;
      }

      p {
        font-size: 16px;
        font-family: Roboto, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        color: #3e3e40;
        text-align: center;
        line-height: 1.6;
      }
    }

    .info-box {
      width: 250px;
    }

  } 

  div.image {

    p {
      font-size: 14px;
      color: #86939e;
      font-family: Roboto, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      text-align: center;
      margin-bottom: 24px;
    }

    img {
      margin-right: auto;
      margin-left: auto;
      width: 100%;
      max-width: 1050px;
      height: auto;
      display: block;
    }
  }

} 

.bottom-section::before { 
  left: 0;
  bottom: 100%;
  content: '';
  display: block;
  position: absolute;
  z-index: 2;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 0 260px 2400px;
  border-color: transparent transparent #eceef1 transparent;
}

.bottom-section::after { 
  left: 0;
  bottom: 100%;
  content: '';
  display: block;
  position: absolute;
  z-index: 1;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 1012px 175px 0;
  border-color: transparent transparent #ebeef1 transparent;
  opacity: 0.44;
}

/* TABLET STYLES */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .bottom-section {
    margin-top: 80px;

    .info-container {
      width: 700px;
      padding-top: 100px;

      .ex-left {
        margin-left: 0;
      }
    }
  }

  .bottom-section::before { 
    border-width: 0 0 80px 1024px;
  }

  .bottom-section::after { 
    border-width: 0 1024px 80px 0;
  }

}

/* MOBILE STYLING */
@media screen and (max-width: 767px) {
  .bottom-section {
    margin-top: 100px;
    padding-bottom: 20px;
    position: relative;
    background-color: #eceef1;

    .info-container {
      padding-top: 60px;
      width: 340px;
      display: block;
      margin-left: auto;
      margin-right: auto;

      .info-box {
        width: 100%;

        h3 {
          font-size: 22px;
          font-family: Roboto, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          color: #333647;
          text-align: center;
        }

        p {
          font-size: 16px;
          font-family: Roboto, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          color: #5a646d;
          text-align: center;
          margin-bottom: 40px;
        }
      }

      


      .ex-left {
        width: 320px;
        margin-left: 30px;
        padding-bottom: 30px;
      }

      .ex-center {
        width: 320px;
        padding-bottom: 30px;
      }

      .ex-right {
        width: 320px;
        margin-left: 33px;
        margin-right: 25px;
        float: none;
      }
    } 
  } 

  .bottom-section::before { 
    border-width: 0 0 80px 767px;
  }

  .bottom-section::after { 
    border-width: 0 500px 80px 0;
  }
}


/* SMALL MOBILE STYLING */
@media screen and (max-width: 414px) {

  .bottom-section::before { 
    border-width: 0 0 80px 414px;
  }

  .bottom-section::after { 
    border-width: 0 414px 80px 0;
  }
}