/* Custom styles for educational tools */
.tool-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease !important;
    border: 1px solid transparent !important;
}

.tool-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #232A3C !important; /* Thinner navy blue border on hover */
}

/* Blog card hover styles */
.blog-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border 0.3s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.blog-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #232A3C !important; /* Same thin navy blue border on hover */
}

/* Category page post card hover styles */
.category-post-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
}

.category-post-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #232A3C !important; /* Same thin navy blue border on hover */
}

/* All Posts page card hover styles */
.post-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
}

.post-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #232A3C !important; /* Same thin navy blue border on hover */
}

/* Additional Follow Us Social Link Styles */
.social-link {
    cursor: pointer !important;
    z-index: 10;
    position: relative;
    text-decoration: none !important;
    pointer-events: auto !important;
}

.social-link:active,
.social-link:focus {
    outline: 2px solid rgba(0, 115, 170, 0.5);
}

.social-link.active {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.touchevents .social-link.active:after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background-color: #00d084;
    border-radius: 50%;
    border: 2px solid white;
    z-index: 2;
}

/* Create specific selectors for social links to override any conflicting styles */
.follow-us-section .social-links-container .social-link,
.footer-social .social-links .social-link {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Media query for touch devices */
@media (pointer: coarse) {
    .social-link {
        padding: 12px; /* Larger touch target */
    }
}