@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

   body {
     font-family: 'Poppins', sans-serif;
     background-color: #09010e;
     color: #eee8f2;
   }

   .gradient-bg {
     background: linear-gradient(135deg, #150e74 0%, #09010e 100%);
   }

   .card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(200, 123, 253, 0.2);
   }

   .tab-active {
     color: #c87bfd;
     border-bottom: 2px solid #c87bfd;
   }

   .custom-scrollbar::-webkit-scrollbar {
     width: 6px;
     height: 6px;
   }

   .custom-scrollbar::-webkit-scrollbar-track {
     background: #09010e;
   }

   .custom-scrollbar::-webkit-scrollbar-thumb {
     background: #c87bfd;
     border-radius: 3px;
   }

   .video-duration {
     background-color: rgba(9, 1, 14, 0.8);
     border-radius: 4px;
     padding: 2px 6px;
     font-size: 12px;
     position: absolute;
     bottom: 10px;
     right: 10px;
   }

   .playlist-count {
     background-color: rgba(9, 1, 14, 0.8);
     border-radius: 4px;
     padding: 4px 8px;
     position: absolute;
     bottom: 10px;
     right: 10px;
     display: flex;
     align-items: center;
     gap: 4px;
   }

   .mobile-menu {
     transform: translateX(-100%);
     transition: transform 0.3s ease;
   }

   .mobile-menu.open {
     transform: translateX(0);
   }

   .blog-content h2 {
     font-size: 1.75rem;
     font-weight: 600;
     margin-top: 2rem;
     margin-bottom: 1rem;
     color: #eee8f2;
   }

   .blog-content h3 {
     font-size: 1.5rem;
     font-weight: 600;
     margin-top: 1.75rem;
     margin-bottom: 0.75rem;
     color: #eee8f2;
   }

   .blog-content p {
     margin-bottom: 1.25rem;
     line-height: 1.8;
     color: #9594a1;
   }

   .blog-content ul,
   .blog-content ol {
     margin-bottom: 1.25rem;
     padding-left: 1.5rem;
     color: #9594a1;
   }

   .blog-content ul {
     list-style-type: disc;
   }

   .blog-content ol {
     list-style-type: decimal;
   }

   .blog-content li {
     margin-bottom: 0.5rem;
     line-height: 1.7;
   }

   .blog-content a {
     color: #c87bfd;
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 2px;
   }

   .blog-content blockquote {
     border-left: 4px solid #c87bfd;
     padding-left: 1rem;
     margin-left: 0;
     margin-right: 0;
     margin-bottom: 1.25rem;
     font-style: italic;
     color: #9594a1;
   }

   .blog-content img {
     border-radius: 0.5rem;
     margin-bottom: 1.25rem;
   }

   .blog-content pre {
     background-color: #150e74;
     padding: 1rem;
     border-radius: 0.5rem;
     overflow-x: auto;
     margin-bottom: 1.25rem;
   }

   .blog-content code {
     font-family: monospace;
     background-color: #150e74;
     padding: 0.2rem 0.4rem;
     border-radius: 0.25rem;
   }

   .pagination-item {
     transition: all 0.3s ease;
   }

   .pagination-item:hover:not(.active) {
     background-color: rgba(200, 123, 253, 0.1);
   }

   .pagination-item.active {
     background-color: #c87bfd;
     color: #09010e;
   }

   .category-filter {
     transition: all 0.3s ease;
   }

   .category-filter:hover:not(.active) {
     color: #c87bfd;
   }

   .category-filter.active {
     background-color: #c87bfd;
     color: #09010e;
   }

   /*video page*/

   .video-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .video-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(200, 123, 253, 0.2);
   }

   .video-thumbnail {
     position: relative;
     overflow: hidden;
     border-radius: 0.75rem;
   }

   .video-thumbnail::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(0deg, rgba(9, 1, 14, 0.7) 0%, rgba(9, 1, 14, 0) 50%);
     z-index: 1;
   }

   .play-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 60px;
     height: 60px;
     background-color: rgba(200, 123, 253, 0.8);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
     z-index: 2;
   }

   .video-thumbnail:hover .play-button {
     opacity: 1;
   }

   .video-duration {
     position: absolute;
     bottom: 10px;
     right: 10px;
     background-color: rgba(9, 1, 14, 0.8);
     color: #eee8f2;
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 12px;
     z-index: 2;
   }

   .video-views {
     display: flex;
     align-items: center;
     color: #9594a1;
     font-size: 14px;
   }

   .tab-active {
     color: #c87bfd;
     border-bottom: 2px solid #c87bfd;
   }

   /* urartech */
   .urartech {
     font-family: Montserrat !important;
     font-weight: 700;
     transform: scale(1, 0.85) !important;
     text-decoration: none;
   }

   /** font weight */
   .fw-100 {
     font-weight: 100;
   }

   .fw-200 {
     font-weight: 200;
   }

   .fw-300 {
     font-weight: 300;
   }

   .fw-400 {
     font-weight: 400;
   }

   .fw-500 {
     font-weight: 500;
   }

   .fw-600 {
     font-weight: 600;
   }

   .fw-700 {
     font-weight: 700;
   }

   .fw-800 {
     font-weight: 800;
   }

   .fw-900 {
     font-weight: 900;
   }


   /* playlists */
   .playlist-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .playlist-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(200, 123, 253, 0.2);
   }

   .playlist-thumbnail {
     position: relative;
     overflow: hidden;
     border-radius: 0.75rem;
   }

   .playlist-thumbnail::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(0deg, rgba(9, 1, 14, 0.7) 0%, rgba(9, 1, 14, 0) 50%);
     z-index: 1;
   }

   .view-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: rgba(200, 123, 253, 0.8);
     color: #09010e;
     border-radius: 0.5rem;
     padding: 0.5rem 1.5rem;
     font-weight: 500;
     opacity: 0;
     transition: opacity 0.3s ease;
     z-index: 2;
     display: flex;
     align-items: center;
   }

   .playlist-thumbnail:hover .view-button {
     opacity: 1;
   }

   .video-count {
     position: absolute;
     bottom: 10px;
     right: 10px;
     background-color: rgba(9, 1, 14, 0.8);
     color: #eee8f2;
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 12px;
     z-index: 2;
     display: flex;
     align-items: center;
   }

   .playlist-details {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s ease;
   }

   .playlist-details.open {
     max-height: 1000px;
   }

   .video-item {
     transition: background-color 0.3s ease;
   }

   .video-item:hover {
     background-color: rgba(200, 123, 253, 0.1);
   }

   .video-item.active {
     border-left: 3px solid #c87bfd;
     background-color: rgba(200, 123, 253, 0.1);
   }

   /* search */
   .search-input {
     background-color: rgba(21, 14, 116, 0.3);
     border: 2px solid #c87bfd;
     transition: all 0.3s ease;
   }

   .search-input:focus {
     outline: none;
     background-color: rgba(21, 14, 116, 0.5);
     box-shadow: 0 15px 30px rgba(200, 123, 253, 0.3);
   }

   .result-item {
     transition: all 0.3s ease;
     border-left: 3px solid transparent;
   }

   .result-item:hover {
     background-color: rgba(200, 123, 253, 0.1);
     border-left-color: #c87bfd;
   }

   .highlight {
     background-color: rgba(200, 123, 253, 0.2);
     padding: 0 2px;
     border-radius: 3px;
   }

   .filter-btn {
     transition: all 0.3s ease;
   }

   .filter-btn.active {
     background-color: #c87bfd;
     color: #09010e;
   }

   .filter-btn:hover:not(.active) {
     background-color: rgba(200, 123, 253, 0.2);
   }

   .search-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(9, 1, 14, 0.95);
     z-index: 100;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
     display: flex;
     align-items: flex-start;
     justify-content: center;
     padding-top: 100px;
   }

   .search-modal.open {
     opacity: 1;
     visibility: visible;
   }

   .search-container {
     width: 100%;
     max-width: 700px;
     transform: translateY(-50px);
     opacity: 0;
     transition: transform 0.5s ease, opacity 0.5s ease;
   }

   .search-modal.open .search-container {
     transform: translateY(0);
     opacity: 1;
   }

   .search-suggestions {
     margin-top: 20px;
     background-color: rgba(21, 14, 116, 0.3);
     border-radius: 12px;
     overflow: hidden;
     max-height: 0;
     opacity: 0;
     transition: max-height 0.5s ease, opacity 0.5s ease;
   }

   .search-suggestions.show {
     max-height: 300px;
     opacity: 1;
   }

   .suggestion-item {
     padding: 12px 20px;
     border-bottom: 1px solid rgba(200, 123, 253, 0.2);
     cursor: pointer;
     transition: background-color 0.3s ease;
   }

   .suggestion-item:hover {
     background-color: rgba(200, 123, 253, 0.1);
   }

   .suggestion-item:last-child {
     border-bottom: none;
   }

   /* Pulse Animation for Search Button */
   @keyframes pulse {
     0% {
       box-shadow: 0 0 0 0 rgba(200, 123, 253, 0.4);
     }

     70% {
       box-shadow: 0 0 0 10px rgba(200, 123, 253, 0);
     }

     100% {
       box-shadow: 0 0 0 0 rgba(200, 123, 253, 0);
     }
   }

   .search-pulse {
     animation: pulse 2s infinite;
   }

   /* Skeleton Loading Animation */
   @keyframes shimmer {
     0% {
       background-position: -468px 0;
     }

     100% {
       background-position: 468px 0;
     }
   }

   .skeleton {
     background: linear-gradient(to right, rgba(21, 14, 116, 0.2) 8%, rgba(21, 14, 116, 0.3) 18%, rgba(21, 14, 116, 0.2) 33%);
     background-size: 800px 104px;
     animation: shimmer 1.5s linear infinite;
   }