Como cenralizar a parte de certificações?
<section class="box-certificicoes hidden">
<div class="certificacoes">
<h2 class="title">Certificações</h2>
<div class="linha-horizontal"></div>
<div class="swiper-container">
<div class="card--container swiper">
<div class="card--content">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card">
<h3 class="title-certificacao">JavaScript: elementos no DOM</h3>
<p class="certificacao-txt">Instituição: <span>Alura</span></p>
<p class="certificacao-txt">Duração: <span>6 horas</span></p>
<p class="certificacao-txt">Ano de conclusão: <span>24/08/2023</span></p>
<p class="certificacao-txt">Certificado: <span>
<a class="link-certificado" href="https://cursos.alura.com.br/user/mebuffbeka/course/javascript-manipulando-elementos-dom/formalCertificate">Clique aqui</a>
</span></p>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<h3 class="title-certificacao">Algoritmos com JavaScript II</h3>
<p class="certificacao-txt">Instituição: <span>Alura</span></p>
<p class="certificacao-txt">Duração: <span>10 horas</span></p>
<p class="certificacao-txt">Ano de conclusão: <span>18/10/2023</span></p>
<p class="certificacao-txt">Certificado: <span>
<a class="link-certificado" href="https://cursos.alura.com.br/user/mebuffbeka/course/algoritmos-javascript-ii-aprofundando-ordenacao-busca/formalCertificate">Clique aqui</a>
</span></p>
</div>
</div>
</div>
</div>
<!-- Navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</section>
.box-certificicoes{
height:70vh;
}
.swiper-container {
display:flex;
justify-content:center;
align-items:center;
margin:auto;
width:80%;
/* height:100vh; */
}
.card-container {
padding-block:5rem;
}
.card--content{
margin-inline: 1.75rem;
/* border-radius: 1.25rem; */
overflow:hidden;
}
.card {
border: 3px solid var(--neon-azul);
border-radius:5%;
width: 200px;
height: 240px;
padding:1rem;
margin-top:3rem;
overflow:hidden;
}
.title-certificacao{
color:var(--azul-medio);
font-weight:400;
position: relative;
padding-bottom:.5rem;
}
.certificacao-txt{
font-size:1rem;
margin-bottom:.5rem;
}
.link-certificado{
text-decoration:none;
color:var(--vermelho);
}
/* Swiper class */
.swiper-pagination-bullet{
background-color:hsl(212, 32%, 40%);
opacity:1;
}
let swiperCards = new Swiper('.card--content', {
loop: true,
spaceBetween:30,
grabCursor:true,
pagination: {
el: '.swiper-pagination',
clickable:true,
dynamicBullets:true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
600:{
slidesPerView: 2,
},
969:{
slidesPerView: 3,
},
},
})
Nessa parte em especifico:
<div class="swiper-pagination"></div>
Como colocar mais a baixo do conteudo? Segui abaixo o git: https://github.com/RebecaTI/Portfolio-Rebeca/blob/main/index.htm