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%;
}

body {
  margin-bottom: 60px;
}

.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;
}

/* Custom Darker Colors for Buttons */

/* زر يتناسب مع البطاقة الصفراء (btn-warning) */
.custom-darker-warning {
    background-color: #785b10; /* درجة أغمق من الأصفر/الذهبي */
    border-color: #785b10;
    color: #fff; /* لون النص أبيض */
}

    .custom-darker-warning:hover {
        background-color: #5a450c; /* أغمق قليلاً عند التمرير */
        border-color: #5a450c;
        color: #fff; /* لون النص أبيض */
    }

/* زر يتناسب مع البطاقة الخضراء (btn-success) */
.custom-darker-success {
    background-color: #155827; /* درجة أغمق من الأخضر */
    border-color: #155827;
    color: #fff; /* لون النص أبيض */
}

    .custom-darker-success:hover {
        background-color: #165327; /* أغمق قليلاً عند التمرير */
        border-color: #165327;
    }

/* زر يتناسب مع البطاقة الزرقاء/التركواز (btn-info) */
.custom-darker-info {
    background-color: #38606a; /* درجة أغمق من الأزرق (قريب من btn-primary) */
    border-color: #38606a;
    color: #fff; /* لون النص أبيض */
}

    .custom-darker-info:hover {
        background-color: #264148; /* أغمق قليلاً عند التمرير */
        border-color: #264148;
    }

/* زر يتناسب مع البطاقة الزرقاء الداكنة (btn-primary) */
.custom-darker-primary {
    background-color: #1b3b5a; /* أزرق داكن متناسق مع البقية */
    border-color: #1b3b5a;
    color: #fff; /* لون النص أبيض */
}

    .custom-darker-primary:hover {
        background-color: #142c44; /* أغمق قليلاً عند التمرير */
        border-color: #142c44;
        color: #fff;
    }
.small-box {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 25px 15px 60px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

    .small-box .inner {
        position: relative;
        z-index: 2;
    }

    .small-box .icon {
        position: absolute;
        top: 15px;
        right: 15px;
        opacity: 0.2;
        font-size: 70px;
        z-index: 1;
    }

    .small-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    }

    .small-box .btn {
        margin-top: 15px;
    }