:root{--primary_color:#0D3B66;--dark_color: #111;--light_color: #fff;--btn_color:#04172f; --third_color:#0d2037;}
 .see-width{width: 95% !important;margin: auto;}

 
.tmp-app {padding: 7rem 0 3rem;background: linear-gradient(45deg,#ffe2fa,#d8ebff,#ffe5e5,#e3f1ff);background-size: auto;background-size: auto;background-size: 200% 200%;}
.tmp-app .tmp-app-main {text-align: center;width: 100%;margin: auto;}
.tmp-app .tmp-app-title {font-size: 1.8rem;font-weight: 500;padding-bottom: 10px;}
.tmp-app .tmp-app-desc {padding: 5px 0;}
.tmp-app .tmp-btn-main{margin-top: 20px;}
.tmp-app .tmp-btn{border: 2px solid var(--light_color);}
.tmp-app .tmp-btn:hover{background: var(--light_color);}
.tmp-app .tmp-app-form {width: 40%;margin:20px auto 0;position: relative;border-radius: 5px;}
.tmp-app .tmp-app-form input {color: var(--dark_color);width: 100%;font-size: 16px;padding: 12px 30px;position: relative;border-radius:5px;outline: none;border: 1px solid var(--light_color);}
.tmp-app .tmp-svg{position: absolute;top: 50%;left: 8px;bottom: 0;transform: translateY(-50%);display: flex; flex-wrap: wrap;}
.tmp-app .tmp-svg svg{width:15px;}


.wt-cat-top-scroll { margin-bottom: 1.5rem; overflow-x: auto; white-space: nowrap; padding-bottom: 10px; }
.wt-cat-scroll-list { display: flex; flex-wrap: nowrap; list-style: none; padding: 0; margin: 0; gap: 10px; }
.wt-cat-scroll-list li { display: inline-block; white-space: nowrap; }
.wt-cat-scroll-list li a { display: inline-block; padding: 8px 16px; border-radius: 25px; background-color: #f0f4f8; color: #333; text-decoration: none; font-size: 0.9rem; transition: background 0.3s, color 0.3s; }
.wt-cat-scroll-list li.active a, .wt-cat-scroll-list li a:hover { background-color: #007bff; color: white; }
.website-apps { display: flex; justify-content: space-between; padding: 2rem 0; gap: 2rem; flex-wrap: wrap; }
.wt-cat-sidebar { display: flex; flex-direction: column; position: sticky; top: 1rem; flex: 1 1 22%; }
.wt-popular-cat { background: #f5f9ff; border-radius: 12px; padding: 20px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.05); scrollbar-width: thin; }
.wt-cat-list { list-style: none; padding: 0; margin: 0; }
.wt-cat-list li { padding: 10px 15px; margin-bottom: 10px; border-radius: 8px; transition: 0.3s; cursor: pointer; font-weight: 500; }
.wt-cat-list li.active, .wt-cat-list li:hover { background: #d2e9ff; color: #000; }
.wt-cat-list a { text-decoration: none; color: inherit; display: block; }
.temp-plugin { flex: 1 1 75%; }
.temp-plugin-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.temp-plugin-desc { color: #555; font-size: 0.9rem; margin-bottom: 1rem; }
.temp-plugin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.temp-list-item { list-style: none; }
.temp-list-inner { background: #fff; border-radius: 6px; padding: 20px; border:1px solid #d9dadb; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; }
.temp-list-inner:hover { transform: translateY(-5px); border:1px solid #d9dadb; }
.temp-list-top { display: flex; align-items: center; margin-bottom: 12px; }
.temp-list-top figure { margin: 0; padding-right: 12px; }
.temp-list-top img { height: 40px; width: 40px; border-radius: 8px; }
.temp-list-title { font-size: 1.1rem; font-weight: 600; color: #333; }
.ltemp-list-para { color: #666; font-size: 0.85rem; padding: 10px 0; min-height: 45px; }
.temp-list-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #555; }
.temp-install { background: #e0f7ec; color: #008f5c; padding: 4px 8px; border-radius: 5px; font-weight: 500; }

.no-apps-message { text-align: center; }
.no-apps-box { max-width: 400px; margin: 0 auto; }
.no-apps-box span { display: block; font-size: 1.5rem; color: #333; margin-bottom: 10px; }
.no-apps-box p { font-size: 0.95rem; color: #777; }

@media (max-width: 768px) {
  .tmp-app .tmp-app-main, .tmp-app .tmp-app-form{width: 100%;}
  .website-apps { flex-direction: column; }
  .wt-cat-sidebar { position: relative; top: unset; width: 100%; padding-right: 0; margin-bottom: 2rem; }
  .temp-plugin { width: 100%; }
}