/* * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       } */



       /* .container {
            max-width: 1200px;
            margin: 0 auto;
        } */

       :root {
           --primary-blue: #2563eb;
           --dark-blue: #003366;
           --accent-orange: #f97316;
           --light-orange: #ffd6b8;
           --white: #ffffff;
           --light-bg: #f8fafc;
           --dark-gray: #1f2937;
           --gray: #94a3b8;

           --transition: all 0.3s ease;
           --gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
           --gradient-orange: linear-gradient(135deg, var(--accent-orange) 0%, #ff7b25 100%);
       }

       header {
           text-align: center;
           margin-bottom: 30px;
           background: white;
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
       }

       .header h1 {
           font-size: 4rem;
       }



       .subtitle {
           font-size: 1rem;
           color: #7f8c8d;
           max-width: 500px;
           margin: 0 auto;
       }


       .banner {
           background: var(--gradient);
           color: white;
           padding: 7rem 0;
           text-align: center;
           position: relative;
           overflow: hidden;
       }

       .banner h1 {
           text-transform: uppercase;
           font-size: 3rem;
           font-weight: 700;
           line-height: 1.2;
           margin-bottom: 10px;
           color: white;
       }

       .banner p {
           font-family: "Bricolage Grotesque", sans-serif;
           font-size: 1.1rem;
           max-width: 700px;
           margin: 0 auto;
           opacity: 0.9;
       }


       h1 {
           font-size: 3rem;
           margin-bottom: 10px;
           color: #2c3e50;
       }

       .subtitle {
           font-size: 1rem;
           color: #7f8c8d;
           max-width: 500px;
           margin: 0 auto;
       }

       .featured-articles {
           margin-top: 3rem;
           margin-right: 3rem;
           margin-left: 3rem;
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
           gap: 20px;
           margin-bottom: 30px;
       }

       .article-card {
           background: white;
           border-radius: 10px;
           overflow: hidden;
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
           transition: all 0.3s ease;
           cursor: pointer;
           height: 100%;
           display: flex;
           flex-direction: column;
       }

       .article-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
       }

       .article-img {
           height: 160px;
           overflow: hidden;
       }

       .article-img img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform 0.4s ease;
       }

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

       .article-content {
           padding: 20px;
           flex-grow: 1;
           display: flex;
           flex-direction: column;
       }

       .article-card h2 {
           color: #2c3e50;
           margin-bottom: 12px;
           font-size: 1.4rem;
           line-height: 1.3;
       }

       .article-card p {
           color: #7f8c8d;
           margin-bottom: 15px;
           flex-grow: 1;
           font-size: 0.95rem;
       }

       .article-meta {
           display: flex;
           justify-content: space-between;
           align-items: center;
           color: #95a5a6;
           font-size: 0.85rem;
           border-top: 1px solid #f1f1f1;
           padding-top: 12px;
           margin-top: 10px;
       }

       .author {
           display: flex;
           align-items: center;
           gap: 6px;
       }

       .author-img {
           width: 26px;
           height: 26px;
           border-radius: 50%;
           background-color: #3498db;
           display: flex;
           align-items: center;
           justify-content: center;
           color: white;
           font-weight: bold;
           font-size: 0.9rem;
       }

       .article-highlights {
           background: #f8f9fa;
           padding: 12px;
           border-radius: 6px;
           margin: 12px 0;
           font-size: 0.9rem;
       }

       .article-highlights ul {
           margin-left: 18px;
           color: #5a6c7d;
       }

       .article-highlights li {
           margin-bottom: 6px;
       }

       .pricing-info {
           background: #e8f4fc;
           border-left: 3px solid #3498db;
           padding: 10px 12px;
           margin: 8px 0;
           border-radius: 4px;
           font-size: 0.85rem;
       }

       .read-article-btn {
           display: block;
           width: 100%;
           background: #3498db;
           color: white;
           border: none;
           padding: 10px;
           border-radius: 5px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s ease;
           margin-top: 10px;
           text-align: center;
           text-decoration: none;
       }

       .read-article-btn:hover {
           background: #2c3e50;
       }

       .see-more-container {
           text-align: center;
           margin: 30px 0;
       }

       .see-more-btn {
           display: inline-block;
           background: white;
           color: #3498db;
           border: 2px solid #3498db;
           padding: 12px 30px;
           border-radius: 30px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s ease;
           text-decoration: none;
       }

       .see-more-btn:hover {
           background: #3498db;
           color: white;
       }


       @media (max-width: 768px) {
           .featured-articles {
               grid-template-columns: 1fr;
           }

           h1 {
               font-size: 1.8rem;
           }

           .banner h1 {
               font-size: 2rem;
           }

           header {
               padding: 15px;
           }
       }