.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}

.animated.hinge {
animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
animation-duration: .75s;
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
animation-name: flip;
}
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}

to {
transform: translate3d(0, 0, 0);
}
}

.slideInDown {
animation-name: slideInDown;
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}

to {
transform: translate3d(0, 0, 0);
}
}

.slideInLeft {
animation-name: slideInLeft;
}

@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}

to {
transform: translate3d(0, 0, 0);
}
}

.slideInRight {
animation-name: slideInRight;
}

@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}

to {
transform: translate3d(0, 0, 0);
}
}

.slideInUp {
animation-name: slideInUp;
}

@keyframes slideOutDown {
from {
transform: translate3d(0, 0, 0);
}

to {
visibility: hidden;
transform: translate3d(0, 100%, 0);
}
}

.slideOutDown {
animation-name: slideOutDown;
}

@keyframes slideOutLeft {
from {
transform: translate3d(0, 0, 0);
}

to {
visibility: hidden;
transform: translate3d(-100%, 0, 0);
}
}

.slideOutLeft {
animation-name: slideOutLeft;
}

@keyframes slideOutRight {
from {
transform: translate3d(0, 0, 0);
}

to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
}

.slideOutRight {
animation-name: slideOutRight;
}

@keyframes slideOutUp {
from {
transform: translate3d(0, 0, 0);
}

to {
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}

.slideOutUp {
animation-name: slideOutUp;


.modal-content {
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.modal-header {
background: linear-gradient(90deg, #ff7f50, #ff5722);
color: white;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.modal-title {
font-weight: bold;
font-size: 1.5rem;
}

/* Estilo geral do carrossel */
#carousel {
scroll-behavior: smooth;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}

.item {
scroll-snap-align: center;
transition: all 0.5s ease;
opacity: 0.5;
transform: scale(0.9);
pointer-events: none;
min-width: 250px;
flex: 0 0 auto;
}

.item.active {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}

/* Marcadores do carrossel */
.carousel-indicators {
display: flex;
justify-content: center;
margin-top: 10px;
gap: 10px;
}
.carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ffa500;
border: none;
opacity: 0.5;
transition: all 0.3s ease;
}
.carousel-indicators button.active {
opacity: 1;
transform: scale(1.2);
}
#carousel {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer e Edge antigos */
}

#carousel::-webkit-scrollbar {
display: none; /* Chrome, Safari e Opera */
}


.popup-content {
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.popup-header {
background: linear-gradient(90deg, #ff7f50, #ff5722);
color: white;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.popup-title {
font-weight: bold;
font-size: 1.5rem;
}

/* Estilo geral do carrossel */
#galeria-scroll {
scroll-behavior: smooth;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}

.card-galeria {
scroll-snap-align: center;
transition: all 0.5s ease;
opacity: 0.5;
transform: scale(0.9);
pointer-events: none;
min-width: 250px;
flex: 0 0 auto;
}

.card-galeria.selecionado {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}

.paginacao-galeria {
display: flex;
justify-content: center;
margin-top: 10px;
gap: 10px;
}
.paginacao-galeria button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ffa500;
border: none;
opacity: 0.5;
transition: all 0.3s ease;
}
.paginacao-galeria button.ativo {
opacity: 1;
transform: scale(1.2);
}
#galeria-scroll {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE e Edge */
}

#galeria-scroll::-webkit-scrollbar {
display: none; /* Chrome, Safari e Opera */
}


.carousel-container-professores {
overflow: hidden;
width: 100%;
padding: 50px 0;
background-color: #f8f9fa;
position: relative;
}
.carousel-items-professores {
display: flex;
transition: transform 0.5s ease;
}
.teacher-card {
flex: 0 0 auto;
width: 150px;
margin: 0 15px;
text-align: center;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.teacher-card img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.teacher-card.active {
transform: scale(1.2);
opacity: 1;
}
.teacher-card.inactive {
opacity: 0.5;
}

