.bg-join-tenant {
    padding: 5rem 0;
}

.bg-join-tenant h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    color: var(--secondary-color);
    text-align: center;
    font-weight: bold;
}

.bg-join-tenant p {
    font-size: clamp(1rem, 4vw, 1rem);
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 4rem;
}

.bg-join-tenant .card {
    background: var(--background-card);
    border-radius: 10px;
    border: none;
    box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.5);
    width: 34rem;
}

.bg-join-tenant span {
    font-size: 1.2rem;
    color: var(--secondary-color);
    font-weight: bold;
    padding-bottom: 1rem;
}

.bg-join-tenant .card p {
    font-size: clamp(0.8rem, 3vw, 0.9rem);
    color: var(--secondary-color);
    margin: 10px 0;
}

.bg-join-tenant a.btn {
    background: var(--button-color);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
}


/* media query */
@media (max-width: 468px) {
   .bg-join-tenant .card {
    width: 20rem;
}
}