@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.title-animation {
    animation: slideIn 1s ease-out forwards;
}

.important-text {
    animation: blink 2s infinite;
}

.alert-icon {
    margin-right: 8px;
    animation: blink 2s infinite;
}

.modal-dialog-centered {
    display: flex;
    align-items: flex-start;
    min-height: calc(100% - 1rem);
    margin-top: 2rem;
}

.image-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 56.25%;
    position: relative;
}

.modal-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem auto;
        max-width: 95%;
    }
    .modal-dialog-centered {
        min-height: calc(100% - 0.5rem);
        margin-top: 0.5rem;
    }
    .image-container {
        aspect-ratio: 4/3;
    }
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.25rem auto;
        max-width: 98%;
    }
    .modal-dialog-centered {
        margin-top: 0.25rem;
    }
    .modal-body {
        padding: 0.5rem;
    }
}

@media (max-width: 768px) {
    .image-container {
        padding-top: 75%;
    }
}