#offer-confirmation-container {
  h3{
    margin-bottom: 30px;
    margin-top: 30px;
  }
  span{
    font-size: 16px;
    color: var(--color-turquoise);
    font-weight: bold;
  }
}


#offer-confirmation-container{
  width: 80%;
  margin: 20px auto 20px auto;
  .offer-confirmation-header{
    a{
      color: var(--color-turquoise);
      font-weight: bold;
    }
  }

  .offer-confirmation-button{
    margin-top: 40px;
    text-align: center;
  }
  .offer-payment-info-buttons, .offer-confirmation-buttons{
    display: flex;
    justify-content: space-around;
    width: 36%;
    margin-right: auto;
    margin-left: auto;
  }
  .offer-confirmation-buttons{
    margin-top: 88px;
  }

  .offer-payment-info-buttons{
    margin-top: 60px;
  }
}
.bot__list{
  width: 100%;
  margin: auto;
  display: flex;
  text-align: center;
  justify-content: space-around;
  margin-top: 30px;
  img{
    margin: auto;
  }
  .bot__name{
    color: var(--color-dark);
    font-weight: bold;
    margin-top: 10px;
  }
  .bot-message{
    background-color: var(--color-hover-yellow);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    p{
      font-size: 14px;
    }
  }
}

@media (max-width: 767px) {
  #offer-confirmation-container {
    width: 85%;
    .offer-confirmation-buttons{
      width: 100%;
    }
  }
  #offer-confirmation-container {
    margin-top: 50px;
    .bot__list{
      width: 100%;
      flex-wrap: wrap;
      .bot-message{
        margin-top: 20px;
      }
      .bot__checkbox{
        margin-bottom: 45px;
      }
    }
  }

}

/* ipad */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)  {
  #offer-confirmation-container {
    width: 70%;
  }

}