html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.box-item {
    border-radius: 20px !important;
    border: 1px solid #000 !important;
}

body {
  margin-bottom: 60px;
}

header {
    position: relative;
    z-index: 1000;
}
.footer{
    color:aliceblue;
}

.btn-menu {
    color: #000;
    background: #d0ffcd;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Mobile-first responsive design */
@media (max-width: 768px) {
    .card {
        margin: 0.5rem;
        border-radius: 0.5rem;
    }

    .form-control, .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .btn {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

   
}

/* Enhanced form styling */
.needs-validation .form-control:invalid,
.needs-validation .form-select:invalid {
    border-color: #dc3545;
}

.needs-validation .form-control:valid,
.needs-validation .form-select:valid {
    border-color: #198754;
}

/* Card enhancements */
.card {
    border: none;
    border-radius: 1rem;
}

.card-header {
    border-radius: 1rem 1rem 0 0 !important;
}

/* Loading states */
.btn-loading {
    position: relative;
    color: transparent;
}

    .btn-loading::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 50%;
        margin-top: -10px;
        margin-left: -10px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 1s ease-in-out infinite;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}