.contact-section {
            padding: 40px 20px;
            text-align: center;
        }

       
        .contact-card {
            background-color: #f9f9f9;
            border-bottom: 2px solid var(--yellow);
            padding: 15px;
            margin: 0 10px 20px;
            text-align: left;
            vertical-align: top;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            min-height: 120px;
            height: fit-content;
        }

        .contact-card i {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: var(--yellow);
        }

        .contact-card p {
            font-size: 0.9rem;
            color: var(--dark-brown);
            margin: 5px 0;
        }

        .contact-card .highlight {
            color: var(--yellow);
            font-weight: bold;
        }

        .contact-card a {
            color: var(--brown);
            text-decoration: none;
        }

        .contact-card a:hover {
            color: var(--yellow);
        }

        @media (max-width: 768px) {
            .contact-card {
                width: 100%;
                margin: 0 0 20px;
            }
        }