.container-card {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        .nav-item {
            margin-right: 20px;
        }

        .profile-img{
            height: 300px;
            width: 300px;
        }
    
        
    .dogs-wrapper {
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .dogs-wrapper:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transform: translateY(-2px);
    }

    .dogs-wrapper .btn-success {
        background-color: #28a745; /* Change the background color to green */
        color: #fff; /* Change the text color to white */
        border-color: #28a745; /* Change the border color to match the background color */
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .dogs-wrapper .btn-success:hover {
        background-color: #218838; /* Darker green on hover */
        transform: translateY(-2px);
    }

   
/* CSS for the connecting cards and the connecting effect */
.connect-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    background-color: #f8f9fa; /* Change the background color to your preference */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

.connect-card .card-title {
    font-size: 18px;
    font-weight: bold;
}

.connect-card p {
    font-size: 16px;
    margin-top: 10px;
}

/* Add a horizontal connecting line between connecting cards */
.connect-card + .connect-card {
    border-left: 1px solid red; /* Adjust the border style, width, and color as needed */
    padding-left: 20px; /* Adjust the spacing between the cards and the connecting line */
}