@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spin-once {
  animation: spin 1s linear;
}


#hiddenInput {
    display: none;
}

label {
    font-weight: bold;
    font-size: 14px;
}

.form-group input {
    border-radius: 5px;          /* Curved edges */
    background-color: #f0f0f0;   /* Slightly darker background inside */
    border: 1px solid #ccc;      /* Border color */
    padding: 10px;               /* Padding inside the input */
    font-size: 16px;             /* Font size inside the input */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
}

.form-group input:focus {
    background-color: #e8e8e8;   /* Darker background on focus */
    border-color: #007bff;       /* Change border color on focus */
    outline: none;               /* Remove the default outline on focus */
}
button[type="submit"] {
    background: linear-gradient(90deg, #4B0082, #D8BFD8);
    color: black;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button[type="submit"]:hover {
    background: linear-gradient(90deg, #D8BFD8, #4B0082);
}
.card-title {
    font-size: 1.5rem; /* Increase font size of the title */
    font-weight: bold;
}

.card-text {
    font-size: 1.2rem; /* Increase font size of the text */
    margin-bottom: 15px;
}

.btn-custom {
    background: linear-gradient(90deg, #4B0082, #D8BFD8);
    color: white;
    font-size: 1.2rem; /* Increase font size of the button text */
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for a 3D effect */
}

.btn-custom:hover {
    background: linear-gradient(90deg, #D8BFD8, #4B0082);
    transform: translateY(-2px); /* Slightly lift the button when hovered */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance the shadow on hover */
}

.btn-custom:active {
    transform: translateY(0); /* Return the button to its original position when clicked */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#bttn {
    background: linear-gradient(90deg, #4B0082, #D8BFD8);
    color: white;
    font-size: 1.2rem; /* Increase font size of the button text */
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for a 3D effect */
}

#bttn:hover {
    background: linear-gradient(90deg, #D8BFD8, #4B0082);
    transform: translateY(-2px); /* Slightly lift the button when hovered */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance the shadow on hover */
}

#bttn:active {
    transform: translateY(0); /* Return the button to its original position when clicked */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
        .navbar-custom {
            background-color: #6A0DAD; /* Dark Purple */
        }

        .navbar-custom .navbar-brand,
        .navbar-custom .nav-link {
            color: white;
            font-size: 1.1rem;
        }

        .navbar-custom .nav-link:hover {
            color: #D8BFD8; /* Light Purple */
        }

		        .alert-card {
            box-shadow: 0 4px 8px rgba(0, 128, 0, 0.4); /* Green shadow */
            border-radius: 10px;
            text-align: center;
            padding: 30px;
            position: relative;
            max-width: 400px;
            margin: 50px auto;
        }

        .alert-card .fa-thumbs-up {
            font-size: 3rem;
            color: #28a745; /* Green color for thumbs up */
            margin-bottom: 15px;
        }

        .alert-card .btn-ok {
            background-color: #28a745; /* Green background */
            color: white;
            border: none;
            border-radius: 20px;
            padding: 10px 20px;
            cursor: pointer;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }

        .alert-card .btn-ok:hover {
            background-color: #218838; /* Darker green on hover */
        }
		.required {
    color: red;
}
.navbar-custom .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1); /* Add a border to make the button visible */
    color: #6A0DAD; /* Ensure the color contrasts with the background */
    /*background-color: transparent; /* Set background to transparent */
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Ensure the collapse menu behaves as expected on small screens */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #6A0DAD; /* You can adjust this to match your navbar */
    }
}

a {
    color: #6A0DAD; /* Dark purple color */
}

a:visited {
    color: #4B0082; /* Dark purple color for visited links */
}

a:hover {
    color: #4B0082; /* Dark purple color when hovering over the link */
}

a:active {
    color: #4B0082; /* Dark purple color when the link is active */
}
.navbar-nav .nav-item {
    background-color: #6A0DAD;
}
.navbar-nav .nav-link {
    color: black;
}