.template-hero {
        background: #eff8f8;
        border-bottom: 1px solid #ddd;
    }

    .hero-badge {
        background: #fff;
        border: 1px solid #ddd;
        padding: 10px 18px;
        border-radius: 30px;
        font-weight: 600;
        font-size: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .template-card {
        transition: 0.3s;
        cursor: pointer;
    }

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

    .template-title {

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;

    }

    .template-desc {

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;

    }