/* ============================================
   SERVICES PAGE — Specific styles
   ============================================ */

.services-hero-bg {
    background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80');
}

/* Service category card */
.category-card {
    padding: 2rem;
    border-radius: 1.25rem;
    text-align: center;
    border-top: 4px solid #00A8E8;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.4s;
}
.category-card[data-cat="gold"] { border-top-color: #D4A017; }
.category-card[data-cat="blue"] { border-top-color: #003D7A; }

.category-card .cat-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(0, 168, 232, 0.1), rgba(0, 168, 232, 0.02));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00A8E8;
}
.category-card[data-cat="gold"] .cat-icon { background: linear-gradient(135deg, rgba(212, 160, 23, 0.15), rgba(212, 160, 23, 0.02)); color: #D4A017; }
.category-card[data-cat="blue"] .cat-icon { background: linear-gradient(135deg, rgba(0, 61, 122, 0.12), rgba(0, 61, 122, 0.02)); color: #003D7A; }

/* Service detail card */
.service-card {
    padding: 1.75rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 40px rgba(0, 61, 122, 0.1);
}

.service-card .svc-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 168, 232, 0.1), rgba(0, 61, 122, 0.05));
    color: #003D7A;
    margin-bottom: 1rem;
}

.channel-card {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 3px solid #00A8E8;
    border-radius: 1rem;
    text-align: center;
    transition: all 0.3s;
}
.channel-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 24px rgba(0, 61, 122, 0.08);
}
.channel-card .ch-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: #E8F4F8;
    color: #003D7A;
    display: flex;
    align-items: center;
    justify-content: center;
}