/* HEADER + FOOTER COLORS */
.header-bg,
.footer-custom,
#footer {
    background-color: #002466;
}

/* SUBMIT BUTTON */
.custom-submit-button {
    width: 250px;
    background-color: #1f2937;
    color: white;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
    display: block;
    margin: 1rem auto 0 auto;
    text-align: center;
}
.custom-submit-button:hover {
    background-color: #111827;
}

/* FIXED HELP BUTTON */
.fixed-help-button {
    position: fixed;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}
@media (min-width: 1024px) {
    .fixed-help-button {
        bottom: 1.5rem;
    }
}

/* HELP BUTTON ICON + TEXT */
.help-button-icon {
    background-color: #047857;
    color: white;
    padding: 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}
.help-button-icon:hover {
    background-color: #065f46;
}
@media (min-width: 1024px) {
    .help-button-icon {
        padding: 1rem;
    }
}
.help-button-text {
    font-size: 0.875rem;
    color: #047857;
    font-weight: 500;
}

/* READ MORE BUTTON */
.read-more-button {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: #007BFF;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.read-more-button:hover {
    background-color: #0056b3;
}

/* IDS */
#all {
    color: yellow;
}
#allin {
    padding: 20px;
}

/* ANIMATIONS */
@keyframes slide-up {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-left {
    from {
        transform: translateX(-100%) translateY(-10%);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}
@keyframes slide-right {
    from {
        transform: translateX(100%) translateY(-10%);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slide-up 0.6s ease-out forwards;
}
.animate-slide-left,
.animate-slide-right {
    opacity: 0;
    animation-play-state: paused;
}
.animate-slide-left {
    transform: translateX(-100%) translateY(-10%);
    animation: slide-left 1.5s ease-out forwards;
}
.animate-slide-right {
    transform: translateX(100%) translateY(-10%);
    animation: slide-right 1.5s ease-out forwards;
}
.animate-slide-left.visible,
.animate-slide-right.visible {
    animation-play-state: running;
}
     

      

        .custom-submit-button {
            width: 250px;
            background-color: orange;
            color: white;
            padding: 0.75rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: background-color 0.3s ease;
            display: block;
            margin: 1rem auto 0 auto;
            text-align: center;
        }

        .custom-submit-button:hover {
            background-color: olive;
        }

        .fixed-help-button {
            position: fixed;
            bottom: 0.5rem;
            right: 0.5rem;
            z-index: 50;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            cursor: pointer;
        }

        @media (min-width: 1024px) {
            .fixed-help-button {
                bottom: 1.5rem;
                right: 0.5rem;
            }
        }


        @keyframes slide-up {
            from {
                transform: translateY(100px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slide-left {
            from {
                transform: translateX(-100%) translateY(-10%);
                opacity: 0;
            }
            to {
                transform: translateX(0) translateY(0);
                opacity: 1;
            }
        }

        @keyframes slide-right {
            from {
                transform: translateX(100%) translateY(-10%);
                opacity: 0;
            }
            to {
                transform: translateX(0) translateY(0);
                opacity: 1;
            }
        }

       

      

      

        .animate-slide-left.visible,
        .animate-slide-right.visible {
            animation-play-state: running;
        }

        /* Form background and text styling */
        #housing-form, #group-form {
            background-color: white;
        }

        #housing-form h2, #group-form h2 {
            color: black;
        }

        #housing-form label, #group-form label {
            color: black; /* Tailwind gray-200 for readability */
        }

        #housing-form input, #group-form input,
        #housing-form select, #group-form select {
            background-color: #e5e7eb; /* Light gray for input fields */
            color: #1f2937; /* Dark gray text for contrast */
        }

        #housing-form input::placeholder, #group-form input::placeholder {
            color: #6b7280; /* Tailwind gray-500 for placeholder text */
        }