.title-border::before,
                    .title-border::after {
                        content: '';
                        position: absolute;
                        width: 0;
                        height: 0;
                        transition: all 0.8s ease;
                    }

                    .title-border::before {
                        top: 0;
                        left: 0;
                        border-top: 2px solid transparent;
                        border-left: 2px solid transparent;
                    }

                    .title-border::after {
                        bottom: 0;
                        right: 0;
                        border-bottom: 2px solid transparent;
                        border-right: 2px solid transparent;
                    }

                    .card:hover .title-border::before {
                        width: 100%;
                        height: 100%;
                        border-top-color: #007bff;
                        border-left-color: #007bff;
                    }

                    .card:hover .title-border::after {
                        width: 100%;
                        height: 100%;
                        border-bottom-color: #007bff;
                        border-right-color: #007bff;
                    }

                    .hover-card {
                        transition: transform 0.3s ease;
                    }

                    .hover-card:hover {
                        transform: translateY(-5px);
                    }