/* Extracted from keystoneapp/templates/services/service_list.html */
/* Hero Section */

.services-hero {

    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}



.services-hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}



.services-hero h1 {

    font-size: 3rem;

    font-weight: 700;

    color: #fff;

    margin-bottom: 1rem;

}



.services-hero .lead {

    color: rgba(255, 255, 255, 0.8);

    font-size: 1.25rem;

}



/* Category Filters */

.category-filters {

    background: #fff;

    padding: 20px 0;

    border-bottom: 1px solid #eee;

    position: sticky;

    top: 0;

    z-index: 100;

}



.category-btn {

    padding: 10px 24px;

    border-radius: 50px;

    border: 2px solid #e0e0e0;

    background: #fff;

    color: #333;

    font-weight: 500;

    transition: all 0.3s ease;

    margin: 5px;

    text-decoration: none;

}



.category-btn:hover,

.category-btn.active {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-color: transparent;

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

}



/* Featured Services Section */

.featured-section {

    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);

    padding: 80px 0;

}



.featured-card {

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

    transition: all 0.4s ease;

    height: 100%;

}



.featured-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

}



.featured-card .card-img-wrapper {
    position: relative;
    height: 250px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
}

.featured-card .card-img-wrapper img.service-image-fit {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    transition: transform 0.5s ease;
}

.featured-card:hover .card-img-wrapper img.service-image-fit {
    transform: scale(1.06);
}


.featured-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);

    color: #fff;

    padding: 6px 16px;

    border-radius: 50px;

    font-size: 0.8rem;

    font-weight: 600;

    z-index: 2;

}



.featured-card .card-body {

    padding: 30px;

}



.featured-card .service-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

}



.featured-card .service-icon i {

    font-size: 1.5rem;

    color: #fff;

}



.featured-card .card-title {

    font-size: 1.4rem;

    font-weight: 700;

    color: #1a1a2e;

    margin-bottom: 15px;

}



.featured-card .card-text {

    color: #666;

    line-height: 1.7;

    margin-bottom: 20px;

}



/* Services Grid */

.services-grid {

    padding: 80px 0;

}



.service-card {

    background: #fff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    transition: all 0.3s ease;

    height: 100%;

    border: 1px solid #f0f0f0;

}



.service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

    border-color: transparent;

}



.service-card .card-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
}

.service-card .card-img-wrapper img.service-image-fit {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    transition: transform 0.4s ease;
}

.service-card .card-img-wrapper img.service-image-contain {
    object-fit: contain !important;
    padding: 0.9rem;
    background: #f8fafc;
}

.service-card .card-img-wrapper.service-image-wrap-contain {
    background: #f8fafc;
}

.service-card:hover .card-img-wrapper img.service-image-fit {
    transform: scale(1.06);
}

.service-card:hover .card-img-wrapper img.service-image-contain {
    transform: none;
}

.service-card .category-badge {
    position: absolute;
    bottom: 15px;

    left: 15px;

    background: rgba(0, 0, 0, 0.7);

    color: #fff;

    padding: 5px 12px;

    border-radius: 20px;

    font-size: 0.75rem;

    backdrop-filter: blur(10px);

}



.static-service-card {

    border: 1px solid #e6edf5;

}



.static-service-card:hover {

    border-color: #f59e0b;

}



.static-service-card .category-badge {

    background: rgba(15, 23, 42, 0.82);

}



.static-service-card .service-icon-sm {

    background: linear-gradient(135deg, #0f766e 0%, #f59e0b 100%);

}



.static-service-card .btn-service-outline {

    color: #0f766e;

    border-color: #0f766e;

}



.static-service-card .btn-service-outline:hover {
    background: linear-gradient(135deg, #0f766e 0%, #f59e0b 100%);
    color: #fff;
}

.services-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
}

.services-hero-badges .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    margin: 0 !important;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
}

.services-note {
    background: #f8fafc;
    border: 1px solid #e5e7eb;

    border-left: 4px solid #0f766e;

    border-radius: 10px;

    padding: 18px 20px;

    margin-bottom: 28px;

}



.service-card .card-body {

    padding: 25px;

}



.service-card .service-icon-sm {

    width: 45px;

    height: 45px;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

}



.service-card .service-icon-sm i {

    font-size: 1.1rem;

    color: #fff;

}



.service-card .card-title {

    font-size: 1.2rem;

    font-weight: 600;

    color: #1a1a2e;

    margin-bottom: 12px;

}



.service-card .card-text {

    color: #666;

    font-size: 0.95rem;

    line-height: 1.6;

    margin-bottom: 20px;

}



.service-card .view-count {

    color: #999;

    font-size: 0.85rem;

}



/* CTA Button */

.btn-service {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: #fff;

    border: none;

    padding: 10px 24px;

    border-radius: 50px;

    font-weight: 500;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-block;

}



.btn-service:hover {

    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);

}



.btn-service-outline {

    background: transparent;

    color: #667eea;

    border: 2px solid #667eea;

    padding: 10px 24px;

    border-radius: 50px;

    font-weight: 500;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-block;

}



.btn-service-outline:hover {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-color: transparent;

    color: #fff;

}



/* Why Choose Us Section */

.why-choose-section {

    background: #1a1a2e;

    padding: 80px 0;

}



.why-choose-section h2 {

    color: #fff;

}



.why-choose-card {

    background: rgba(255, 255, 255, 0.05);

    border-radius: 16px;

    padding: 30px;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.3s ease;

}



.why-choose-card:hover {

    background: rgba(255, 255, 255, 0.1);

    transform: translateY(-5px);

}



.why-choose-card i {

    font-size: 2.5rem;

    color: #667eea;

    margin-bottom: 20px;

}



.why-choose-card h5 {

    color: #fff;

    font-weight: 600;

    margin-bottom: 15px;

}



.why-choose-card p {

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 0;

}



/* CTA Section */

.cta-section {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    padding: 80px 0;

}



.cta-section h2 {

    color: #fff;

    font-weight: 700;

}



.cta-section p {

    color: rgba(255, 255, 255, 0.9);

}



.btn-cta {

    background: #fff;

    color: #667eea;

    padding: 15px 40px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 1.1rem;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-block;

}



.btn-cta:hover {

    background: #1a1a2e;

    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



/* Empty State */

.empty-state {

    text-align: center;

    padding: 60px 20px;

}



.empty-state i {

    font-size: 4rem;

    color: #ddd;

    margin-bottom: 20px;

}



.empty-state h4 {

    color: #666;

    margin-bottom: 10px;

}



.empty-state p {

    color: #999;

}



/* Animations */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.animate-fade-in-up {

    animation: fadeInUp 0.6s ease forwards;

}



/* Responsive */

@media (max-width: 768px) {
    .services-hero h1 {
        font-size: 2rem;
    }

    .services-hero-badges {
        align-items: center;
        flex-direction: column;
    }

    .services-hero-badges .badge {
        width: min(100%, 330px);
        min-height: 42px;
    }
    
    .featured-card .card-img-wrapper,
    .service-card .card-img-wrapper {
        height: 200px;
    }
    
    .category-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

}

/* Generated classes for former inline style attributes */
/* Inline styles extracted from keystoneapp/templates/services/service_list.html */
.ktl-inline-a30b0d0a { animation-delay: 0.1s; }
.ktl-inline-c4cfe587 { animation-delay: 0.2s; }
.ktl-inline-509d6c96 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.ktl-inline-dd5c6737 { font-size: 4rem; color: rgba(255,255,255,0.3); }
.ktl-inline-1f6ca5ad { font-size: 3rem; color: #ddd; }