/* ============================================
   SERVICES PAGE — PDDRCS Design
   ============================================ */

.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 #1A5BC4;
    background: #ffffff;
    box-shadow: 0 4px 24px rgba(0, 35, 102, 0.08);
    border: 1px solid rgba(229, 234, 242, 1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 35, 102, 0.12);
    background: #ffffff;
}
.category-card[data-cat="gold"] { border-top-color: #F7D417; }
.category-card[data-cat="blue"] { border-top-color: #003DA5; }

.category-card .cat-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(26, 91, 196, 0.12), rgba(26, 91, 196, 0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A5BC4;
}
.category-card[data-cat="gold"] .cat-icon { background: linear-gradient(135deg, rgba(247, 212, 23, 0.18), rgba(247, 212, 23, 0.03)); color: #B08E00; }
.category-card[data-cat="blue"] .cat-icon { background: linear-gradient(135deg, rgba(0, 61, 165, 0.14), rgba(0, 61, 165, 0.02)); color: #003DA5; }

/* Service detail card */
.service-card {
    padding: 1.75rem;
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid rgba(229, 234, 242, 1);
    box-shadow: 0 4px 24px rgba(0, 35, 102, 0.07);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-6px);
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 35, 102, 0.14);
    border-color: rgba(247, 212, 23, 0.35);
}

.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(26, 91, 196, 0.12), rgba(0, 61, 165, 0.04));
    color: #003DA5;
    margin-bottom: 1rem;
}

.channel-card {
    padding: 1.5rem;
    background: #ffffff;
    border-top: 3px solid #1A5BC4;
    border-radius: 1rem;
    border: 1px solid rgba(229, 234, 242, 1);
    box-shadow: 0 4px 16px rgba(0, 35, 102, 0.07);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.channel-card:hover {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 16px 30px rgba(0, 35, 102, 0.10);
}
.channel-card .ch-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: rgba(232, 240, 254, 0.8);
    color: #003DA5;
    display: flex;
    align-items: center;
    justify-content: center;
}