styles.css

/* Custom styles for additional effects */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav a {
    transition: color 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-title {
    animation: fadeInDown 1s ease-out;
    font-family: 'Georgia', serif;
    font-size: 62px; /* Default font size */
    letter-spacing: 8px;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
}

.services-title {
    animation: fadeIn 1s ease-out;
}

.card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    animation: fadeIn 0.6s ease-out;
    text-align: center;
}

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

.card h3 {
    margin-top: 1rem;
}

.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

/* AOS library animation */
[data-aos] {
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Responsive adjustments for header */
@media (max-width: 768px) {
    .header-title {
        font-size: 40px; /* Adjust the font size for mobile */
        letter-spacing: 2px;
    }

    nav a {
        font-size: 14px; /* Adjust the font size of nav links for mobile */
        padding: 5px; /* Add padding for easier tapping on touch screens */
    }

    /* Adjust header layout for mobile */
    .header {
        flex-direction: column;
        text-align: center;
    }

    .header nav {
        margin-top: 10px; /* Add some space between the title and nav links */
    }
}