@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

*{

  margin: 0;
  padding: 0;

}

/* Main depoimento */
main {

  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 64px ;

}

main h1 {

  font-size: 32px;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0;

}

main p {

  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  margin: 16px 0 0 0 ;
  width: 70%;
  text-align: center;

}

main cite {

  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  width: 70%;
  text-align: center;

}

.artigo{
  margin-top: 20px;
}

/* **************Card*********** */
.container-custom {

  padding: 64px;

}

.container-custom h2 {

  margin-bottom: 16px;
  font-size: 32px;
  font-family: 'Roboto', sans-serif;

}

.container-custom p {

  margin-bottom: 10px;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;

}

.container-custom cite {

  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  text-align: center;

}

.container-custom cite a {

 list-style: none;
 text-decoration: none;
 color: #C2467F;

}


.container-custom .row-custom {

  margin-top: 64px;
}


.container-custom .card-custom {

  border: none;
  border-radius: 16px;
  background-color: #FEEAF3;
  box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.77);
  transition: 0.8s;
  margin-bottom: 32px;

}

.container-custom .card-custom:hover {

  transform:translateY(-20px);
  background-color: #ED8C9B;
  box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);

}

.container-custom .card-custom img {

  border: none;
  border-radius: 15px;

}

.container-custom .card-body-custom {

  height: 200px;

}

.card-custom .card-body-custom h5 {

  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #212529;

}

.card-custom .card-body-custom p {

  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #212529;

}

.card-custom .card-body-custom button {

  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight:500;
  color: #C2467F ;
  background-color: transparent;
  border: none;
  padding: 6px 0;
  transition: 0.5s;

}

.card-custom .card-body-custom button:hover {

  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight:500;
  color: #FAF5F5;
  background-color: #C2467F;
  border: none;
  padding: 6px 32px;
  border-radius: 6px;

}

.container-custom .btn-primary-custom {

  text-decoration: none;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  color: #FAF5F5;
  border-radius: 16px;
  border: solid 1px #C2467F;
  padding: 6px 32px;
  background-color: #C2467F;
  transition: 0.5s;

}

.container-custom .btn-primary-custom:hover {

  text-decoration: none;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: #C2467F;
  border-radius: 16px;
  border: solid 1px #C2467F;
  padding: 6px 32px;
  background-color: transparent;

}

/* *****Modal****** */

.modal-dialog .modal-content-custom{

  padding: 32px 0px;
  background-color: #FEEAF3;
  background-image: linear-gradient( #FAF5F5, #EB7AAE );
  border: none;
  border-radius: 16px;

}

.modal-content .modal-img img {

  border-radius: 50%;
  width: 200px;
  height: 200px;
  border: solid 3px #FAF5F5;

}

.modal-content .modal-img {

  text-align: center;

}

.modal-content .modal-img h2 {

  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  margin: 8px 0;
  font-weight: 500;

}

.modal-content .modal-img p {

  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  margin: 8px 0;

}

.modal-content .modal-texto p {

  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  margin: 8px 0;

}

.modal-content .modal-footer-custom {

  padding: 16px 0 0 0;

}

.modal-content .modal-footer-custom button {

  color: #FAF5F5;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  padding: 3px 16px;

}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

*{

  margin: 0;
  padding: 0;

}

/* Main depoimento */
main {

  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 64px ;

}

main h1 {

  font-size: 32px;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0;

}

main p {

  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  margin: 16px 0 0 0 ;
  width: 70%;

}

main cite {

  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  width: 70%;

}

/* **************Card*********** */
.container-custom {

  padding: 64px;

}

.container-custom h2 {

  margin-bottom: 16px;
  font-size: 32px;
  font-family: 'Roboto', sans-serif;

}

.container-custom p {

  margin-bottom: 0px;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;

}

.container-custom cite {

  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  text-align: center;

}

.container-custom cite a {

 list-style: none;
 text-decoration: none;
 color: #C2467F;

}


.container-custom .row-custom {

  margin-top: 64px;
}


.container-custom .card-custom {

  border: none;
  border-radius: 16px;
  background-color: #FEEAF3;
  box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.77);
  transition: 0.8s;
  margin-bottom: 32px;

}

.container-custom .card-custom:hover {

  transform:translateY(-20px);
  background-color: #ED8C9B;
  box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);

}

.container-custom .card-custom img {

  border: none;
  border-radius: 15px;

}

.card-custom .card-body-custom h5 {

  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #212529;

}

.card-custom .card-body-custom p {

  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #212529;

}

.card-custom .card-body-custom button {

  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight:500;
  color: #C2467F ;
  background-color: transparent;
  border: none;
  padding: 6px 0;
  transition: 0.5s;

}

.card-custom .card-body-custom button:hover {

  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight:500;
  color: #FAF5F5;
  background-color: #C2467F;
  border: none;
  padding: 6px 32px;
  border-radius: 6px;

}

.container-custom .btn-primary-custom {

  text-decoration: none;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  color: #FAF5F5;
  border-radius: 16px;
  border: solid 1px #C2467F;
  padding: 6px 32px;
  background-color: #C2467F;
  transition: 0.5s;

}

.container-custom .btn-primary-custom:hover {

  text-decoration: none;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: #C2467F;
  border-radius: 16px;
  border: solid 1px #C2467F;
  padding: 6px 32px;
  background-color: transparent;

}

/* *****Modal****** */

.modal-dialog .modal-content-custom{

  padding: 32px 0px;
  background-color: #FEEAF3;
  background-image: linear-gradient( #FAF5F5, #EB7AAE );
  border: none;
  border-radius: 16px;

}

.modal-content .modal-img img {

  border-radius: 50%;
  width: 200px;
  height: 200px;
  border: solid 3px #FAF5F5;

}

.modal-content .modal-img {

  text-align: center;

}

.modal-content .modal-img h2 {

  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  margin: 8px 0;
  font-weight: 500;

}

.modal-content .modal-img p {

  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  margin: 8px 0;

}

.modal-content .modal-texto p {

  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  margin: 8px 0;

}

.modal-content .modal-footer-custom {

  padding: 16px 0 0 0;

}

.modal-content .modal-footer-custom button {

  color: #FAF5F5;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  padding: 3px 16px;

}