:root {
   --primary: #0079C1;
   --primary-dark: #005f99;
   --secondary: #ff6b35;
   --text: #333;
   --light-text: #666;
   --bg: #fff;
   --light-bg: #f9f9f9;
   --border: #e1e5eb;
   --radius: 12px;
   --shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
   --transition: all 0.3s ease;
 }



 /* Preloader */
 #preloader0 {
   position: fixed;
   inset: 0;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
 }

 .spinner0 {
   width: 60px;
   height: 60px;
   border: 6px solid var(--border);
   border-top-color: var(--primary);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }

 /* Header Section */
 .section-heading {
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   color: white;
   padding: 8rem 2rem 0 0;
   position: relative;
   overflow: hidden;
   text-align: center;
   font-family: 'Poppins', sans-serif;
 }

 /* .section-heading::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.05)"/></svg>') repeat;
   opacity: 0.2;
 } */

 .section-heading h1 {
   font-size: 2.5rem;
   margin-bottom: 0.5rem;
   position: relative;
   font-weight: 700;
   letter-spacing: -0.5px;
 }

 .section-heading p {
   font-size: 1.1rem;
   opacity: 0.9;
   margin-bottom: 2rem;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
   color: white
 }

 /* Search Input */
 #searchStories {
   width: 100%;
   max-width: 500px;
   padding: 1rem 1.5rem;
   border: none;
   border-radius: 50px;
   font-size: 1rem;
   background: white;
   box-shadow: var(--shadow);
   transition: var(--transition);
   margin: 0 auto;
   display: block;
   pointer-events: auto; 
 }

 #searchStories:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(0, 121, 193, 0.3), var(--shadow);
   transform: translateY(-2px);
 }

 #searchStories::placeholder {
   color: #aaa;
 }

 /* Search input with icon */
 .search-container {
   position: relative;
   max-width: 500px;
   margin: 0 auto;
 }

 .search-container i {
   position: absolute;
   left: 20px;
   top: 50%;
   transform: translateY(-50%);
   color: #aaa;
   pointer-events: none;
   transition: var(--transition);
 }

 .search-container input {
   padding-left: 50px;
 }

 .search-container input:focus+i {
   color: var(--primary);
 }

 /* Container */
 .container {
   max-width: 1600px;
   margin: 0 auto;
   padding: 2rem;
   position: relative;
 }

 /* Stories Grid */
 .stories-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2rem;
   margin-top: 2rem;
 }

 /* Story Card */
 .story-card {
   background: white;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
   transition: var(--transition);
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
   transform: translateY(0);
 }

 .story-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 14px 40px rgba(0, 0, 0, 0.15);
 }

 .story-card__image {
   height: 320px;
   overflow: hidden;
   position: relative;
   object-fit: cover;
 }

 .story-card__image::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 30%;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
   opacity: 0;
   transition: var(--transition);
 }

 .story-card:hover .story-card__image::after {
   opacity: 1;
 }

 .story-card__image img {
   width: 100%;
   height: 100%;
   /* object-fit: cover; */
   object-position: 50% 0%;
   transition: var(--transition);
 }

 .story-card:hover .story-card__image img {
   transform: scale(1.05);
 }

 .story-card__body {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }

 .story-card h3 {
   font-size: 1.25rem;
   margin-bottom: 0.75rem;
   font-weight: 600;
   color: var(--text);
   position: relative;
   padding-bottom: 0.75rem;
 }

 .story-card h3::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 50px;
   height: 3px;
   background: var(--primary);
   border-radius: 4px;
   transition: var(--transition);
 }

 .story-card:hover h3::after {
   width: 80px;
 }

 .story-card .excerpt {
   color: var(--light-text);
   margin-bottom: 1.5rem;
   line-height: 1.7;
   font-size: 0.95rem;
 }

 .read-more-success {
   color: white;
   text-decoration: none;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   margin-top: auto;
   position: relative;
   transition: var(--transition);
   background-color: #0079C1;
   padding: 9px;
   width: 100%;
   border-radius: 4px;
   max-width: 150px;
 }

 .read-more-success::after {
   content: "→";
   margin-left: 0.3rem;
   transition: var(--transition);
 }

 .read-more-success:hover {
   color: #0079C1;
   background-color: transparent;
   border: 2px solid #0079C1;
 }

 .read-more-success:hover::after {
   transform: translateX(4px);
 }

 /* No Results */
 .no-results,
 .error {
   grid-column: 1 / -1;
   text-align: center;
   padding: 3rem 0;
   color: var(--light-text);
   font-size: 1.1rem;
 }

 /* Loading State */
 .loading-state {
   grid-column: 1 / -1;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 3rem 0;
 }

 .loading-pulse {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: var(--primary);
   animation: pulse 1.5s ease-in-out infinite;
 }

 @keyframes pulse {
   0% {
     transform: scale(0.8);
     opacity: 0.3;
   }

   50% {
     transform: scale(1);
     opacity: 0.8;
   }

   100% {
     transform: scale(0.8);
     opacity: 0.3;
   }
 }

 /* Filter Tags */
 .filter-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin: 1rem 0 2rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--border);
 }

 .filter-tag {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 50px;
   padding: 0.5rem 1rem;
   font-size: 0.9rem;
   cursor: pointer;
   transition: var(--transition);
 }

 .filter-tag:hover {
   background: var(--primary);
   color: white;
   border-color: var(--primary);
 }

 .filter-tag.active {
   background: var(--primary);
   color: white;
   border-color: var(--primary);
 }

 /* Show More Button */
 .show-more-container {
   display: flex;
   justify-content: center;
   margin: 2rem 0;
 }

 .show-more-btn {
   background: var(--primary);
   color: white;
   border: none;
   border-radius: 50px;
   padding: 0.7rem 1.5rem;
   font-size: 0.95rem;
   font-weight: 500;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   transition: var(--transition);
   box-shadow: 0 4px 12px rgba(0, 121, 193, 0.2);
 }

 .show-more-btn:hover {
   background: var(--primary-dark);
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 121, 193, 0.3);
 }

 .show-more-btn i {
   transition: var(--transition);
 }

 .show-more-btn:hover i {
   transform: translateY(2px);
 }

 /* Card Entrance Animation */
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .story-card {
   animation: fadeIn 0.5s ease forwards;
   opacity: 0;
 }

 .story-card:nth-child(2) {
   animation-delay: 0.1s;
 }

 .story-card:nth-child(3) {
   animation-delay: 0.2s;
 }

 .story-card:nth-child(4) {
   animation-delay: 0.3s;
 }

 .story-card:nth-child(5) {
   animation-delay: 0.4s;
 }

 .story-card:nth-child(6) {
   animation-delay: 0.5s;
 }

 /* Responsive */


 @media (max-width: 1024px) {
   .stories-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }


 @media (max-width: 768px) {
   .section-heading {
     padding: 8rem 2rem 0 0;
   }

   .section-heading h1 {
     font-size: 2rem;
   }

   .container {
     padding: 1.5rem;
   }

   .stories-grid {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 1.5rem;
   }

   .story-card__image {
     height: 180px;
   }
 }

 @media (max-width: 480px) {
   .stories-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
   }

   .story-card__image {
     height: 140px;
   }

   .story-card__body {
     padding: 1rem;
   }

   .story-card h3 {
     font-size: 1rem;
     margin-bottom: 0.5rem;
     padding-bottom: 0.5rem;
   }

   .story-card .excerpt {
     font-size: 0.85rem;
     margin-bottom: 1rem;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }

   .read-more-success {
     font-size: 0.9rem;
   }

   #searchStories {
     padding: 0.8rem 1.2rem;
   }

   .filter-tags {
     overflow-x: auto;
     padding-bottom: 0.5rem;
     margin-bottom: 1rem;
     white-space: nowrap;
     display: flex;
     flex-wrap: nowrap;
   }

   .filter-tag {
     padding: 0.4rem 0.8rem;
     font-size: 0.8rem;
   }
 }

 /* Very small screens */
 @media (max-width: 359px) {
   .stories-grid {
     grid-template-columns: 1fr;
   }
 }