@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {
    font-family: "Noto Sans", sans-serif;
    font-weight: normal;
    font-style: normal;
}

.content-fade-in {
    opacity: 0;
    animation: fadeInPage 0.6s ease-in-out forwards;
}

@keyframes fadeInPage {
    to {
        opacity: 1;
    }
}

.bg-custom{
    background-color: #f7f7f7;
}

.bg-lightblue {
    background-color: #e3f2fd; /* Light blue for the banner */
}

.border-blue{
    border-color: #3c7cb3;
}

.bg-blue{
    background-color: #266aa6;
}

.text-blue{
    color: #266aa6;
}

.btn-blue {
    background-color: #266aa6;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
    border: none;
}

.btn-blue:hover {
    background-color: #1c4c76;
    color: white;
}

.btn-blue:active {
    background-color: #163b5c;
    transform: scale(0.98);
}

.more-btn {
    background-color: #266aa6;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
    border: none;
}

.more-btn:hover {
    background-color: #1c4c76;
    color: white;
}

.more-btn:active {
    background-color: #163b5c;
    transform: scale(0.98) !important;
}

.description-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card {
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Adding smooth transition */
}

.card:hover {
    border-color: #266aa6; /* Change border color */
    background-color: #f0f8ff; /* Light blue background on hover */
}