html {
  scroll-behavior: smooth;
}

body {
  background-color: #3e1774;
  font-family: "Roboto", serif;
}

.background-title {
  background-color: #176172;
  color: #f8f9fa;
  padding: 500px;
  text-align: center;
}

.paragrafo {
  text-align: justify;
}

.btn-pink {
  background-color: #d90452;
  border-color: #d90452;
}

.btn-pink:hover {
  background-color: #c50a5e;
  border-color: #c50a5e;
}

.btn-pink:focus {
  background-color: #c50a5e;
  border-color: #c50a5e;
}

.btn-orange {
  background-color: #ff5e00;
  border-color: #ff5e00;
}

.table-orange {
  background-color: #b73d1e;
  border-color: #b73d1e;
}

.btn-orange:hover {
  background-color: #e04d2d;
  border-color: #e04d2d;
}

.btn-orange:focus {
  background-color: #e04d2d;
  border-color: #e04d2d;
}

.text-justify {
  text-align: justify;
}

.bg-purple {
  background-color: #2c0d65;
  color: #f8f9fa;
}

.space {
  margin-top: 100px;
  margin-bottom: 100px;
}

.space-2 {
  margin-top: 25px;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d90452;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #9a064e;
}

.card-courses {
  background-color: #f8f9fa;
  width: 120px;
  height: 120px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.card-courses:hover {
  background-color: #e9ecef;
  transform: scale(1.7);
}

.background-flaute {
  background-image: url("/img/courses/flauta.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 30px;
  text-shadow: 2px 2px 4px black;
}

.background-clarinete {
  background-image: url("/img/courses/clarinete.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 28px;
  text-shadow: 2px 2px 4px black;
}

.background-trompa {
  background-image: url("/img/courses/trompa.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 28px;
  text-shadow: 2px 2px 4px black;
}

.background-trompete {
  background-image: url("/img/courses/trompete.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 25px;
  text-shadow: 2px 2px 4px black;
}

.background-trombone {
  background-image: url("/img/courses/trombone.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 25px;
  text-shadow: 2px 2px 4px black;
}

.background-tuba {
  background-image: url("/img/courses/tuba.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 30px;
  text-shadow: 2px 2px 4px black;
}

.background-saxofone {
  background-image: url("/img/courses/saxofone.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 25px;
  text-shadow: 2px 2px 4px black;
}

.background-eufonico {
  background-image: url("/img/courses/eufonico.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 25px;
  text-shadow: 2px 2px 4px black;
}

.background-percussao {
  background-image: url("/img/courses/percussao.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 25px;
  text-shadow: 2px 2px 4px black;
}

.background-piano {
  background-image: url("/img/courses/piano.webp");
  background-size: cover; /* Ajusta a imagem para cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem no contêiner */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  color: white;
  font-size: 25px;
  text-shadow: 2px 2px 4px black;
}

swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

swiper-slide {
  background-position: center;
  background-size: cover;
  width: 500px;
  /* height: 300px; */
}

swiper-slide img {
  display: block;
  width: 100%;
}