.navbar-brand{
    color:rgb(1, 1, 68); 
    text-size-adjust: 2rem;
    font-weight: bolder;
    @import url(https://fonts.googleapis.com/css?family=Teko:300,regular,500,600,700);
}

body{
    background-color: rgb(207, 252, 252);
    font-family: sans-serif;
}
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* To evenly space the cards */
}

.card {
    width: calc(33.33% - 10px); /* Initially, each card takes up 33.33% of the container width */
    margin-bottom: 20px; /* Margin between cards */
    margin-top: 10px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    padding: 20px;
    box-sizing: border-box;
}
.card-title {
    @import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
    font-weight: bolder;
}
.card-text{
    @import url(https://fonts.googleapis.com/css?family=Young+Serif:regular);
}

/* Media queries for different screen sizes */

/* For phones and small screens */
@media (max-width: 767px) {
    .card {
        width: 100%; /* Cards take up 100% of the container width for small screens */
    }
}

/* For tablets and medium screens */
@media (min-width: 768px) and (max-width: 1023px) {
    .card {
        width: calc(50% - 10px); /* Cards take up 50% of the container width for medium screens */
    }
}

/* For laptops and larger screens */
@media (min-width: 1024px) {
    .card {
        width: calc(33.33% - 10px); /* Cards return to 33.33% width for larger screens */
    }
}