:root {
     --bg-color-dark: #002705;
    --primary-blue: #ffe700;
    --secondary-gold: #f2ff00;
    --text-light: #ffe700;
    --text-secondary: #ffffff;
    --card-bg: #0a5013;
}
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 body {
     font-family: 'Inter', sans-serif;
     background-color: var(--bg-color-dark);
     color: var(--text-light);
     line-height: 1.6;
}
/* Default font sizes for desktop and larger screens */
 h1 {
     font-size: 3em;
     line-height: normal;
     margin: 0.8rem 0;
}
 h2 {
     font-size: 2.5em;
     line-height: normal;
     margin: 0.8rem 0;
}
 h3 {
    font-size: 1.5em;
    line-height: normal;
    margin: 0.8rem 0;
}
 h4 {
     font-size: 1em;
     line-height: normal;
     margin: 0.8rem 0;
}

/* * Media query for mobile devices * This rule applies when the screen width is 768px or less */
 @media (max-width: 768px) {
     h1 {
         font-size: 1.8em;
         line-height: normal;
         margin: 0.5rem 0;
    }
     h2 {
         font-size: 1.6em;
         line-height: normal;
         margin: 0.5rem 0;
    }
     h3 {
         font-size: 1.4em;
         line-height: normal;
         margin: 0.5rem 0;
    }
     h4 {
         font-size: 1.2em;
         line-height: normal;
         margin: 0.5rem 0;
    }
}

p {
    color: #ffffff;
}

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1rem;
}
/* --- Header & Navigation --- */
 .navbar {
     background-color: #0a5013;
     backdrop-filter: blur(10px);
     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
     z-index: 1000;
     padding: 1rem 0;
     box-shadow: 0 2px 10px #04211c;
}
 .nav-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .logo {
     font-size: 1.8rem;
     font-weight: 700;
     color: var(--secondary-gold);
     text-decoration: none;
     letter-spacing: 1px;
}
 .hamburger {
     display: none;
     cursor: pointer;
     flex-direction: column;
     justify-content: space-around;
     width: 30px;
     height: 20px;
}
 .hamburger-line {
     width: 100%;
     height: 2px;
     background-color: var(--text-light);
     transition: transform 0.3s ease;
}
 .nav-links {
     display: flex;
     list-style: none;
     align-items: center;
     gap: 2rem;
}
 .nav-links a {
     text-decoration: none;
     color: var(--text-light);
     font-weight: 500;
     transition: color 0.3s ease;
}
 .nav-links a:hover {
     color: var(--primary-blue);
}
 .nav-links .nav-button {
     padding: 0.5rem 1.5rem;
     border-radius: 9999px;
     font-weight: 600;
     transition: background-color 0.3s ease, color 0.3s ease;
}
 .nav-links .nav-button.signin {
     border: 2px solid var(--primary-blue);
     background: transparent;
     color: var(--primary-blue);
}
 .nav-links .nav-button.signin:hover {
     background-color: var(--primary-blue);
     color: var(--bg-color-dark);
}
 .nav-links .nav-button.signup {
     background-color: var(--secondary-gold);
     color: var(--bg-color-dark);
     border: 2px solid var(--secondary-gold);
}
 .nav-links .nav-button.signup:hover {
     background-color: transparent;
     color: var(--secondary-gold);
}
 hr {
     margin:1rem 0;  
  }


/* --- Hero Section --- */
 .hero {
     padding: 12rem 0 8rem;
     text-align: center;
     background: linear-gradient(180deg, #033303 0%, #033807de 100%);
}
 .hero h1 {
     font-size: 3.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
     line-height: 1.2;
}
 .hero p {
     font-size: 1.2rem;
     color: var(--text-secondary);
     margin: 0 auto 2rem;
}
 .hero-buttons .hero-button {
     display: inline-block;
     padding: 0.8rem 2.5rem;
     text-decoration: none;
     border-radius: 9999px;
     font-weight: 600;
     margin: 0 0.5rem;
     transition: transform 0.2s ease;
}
 .hero-buttons .hero-button:hover {
     transform: translateY(-3px);
}
 .hero-buttons .primary-btn {
     background-color: var(--primary-blue);
     color: var(--bg-color-dark);
}
 .hero-buttons .secondary-btn {
     background-color: transparent;
     border: 2px solid var(--secondary-gold);
     color: var(--secondary-gold);
}
/* --- Content Section --- */
 .content-section {
     padding: 4rem 0;
}
 .card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
     text-align: center;
}
 .card {
     background-color: var(--card-bg);
     border-radius: 12px;
     padding: 2rem;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     transition: transform 0.3s ease;
}
 .card:hover {
     transform: translateY(-5px);
}
 .card-icon {
     font-size: 3rem;
     color: var(--primary-blue);
     margin-bottom: 1rem;
}
 .card h3 {
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
}
 .card p {
     color: var(--text-secondary);
}
/* --- Alternating Feature Sections --- */
 .feature-section {
     padding: 4rem 0;
     display: flex;
     align-items: center;
     gap: 4rem;
     border-bottom: 1px solid #0a5013;
}
 .feature-section:last-of-type {
     border-bottom: none;
}
 .feature-section:nth-of-type(odd) {
     flex-direction: row;
}
 .feature-section:nth-of-type(even) {
     flex-direction: row-reverse;
}
 .feature-content {
     flex: 1;
}
 .feature-content h2 {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
}
 .feature-content p {
     color: var(--text-secondary);
     margin-bottom: 1.5rem;
}
 .feature-content ul, li {
     color: var(--text-secondary);
}
 .feature-content ul {
     padding-left: 1.5rem;
}
 .feature-image {
     flex: 1;
}
 .feature-image img {
     width: 100%;
     height: auto;
     border-radius: 12px;
}
 .feature-buttons .feature-button {
     display: inline-block;
     padding: 0.8rem 2rem;
     text-decoration: none;
     border-radius: 9999px;
     font-weight: 600;
     margin-right: 1rem;
     transition: background-color 0.3s ease, color 0.3s ease;
}
 .feature-buttons .primary-btn {
     background-color: var(--primary-blue);
     color: var(--bg-color-dark);
}
 .feature-buttons .secondary-btn {
     background-color: transparent;
     border: 2px solid var(--secondary-gold);
     color: var(--secondary-gold);
}

/* --- Blog Page Layout --- */
        .blog-header {
            padding: 8rem 0 4rem;
            text-align: center;
        }

        .blog-header h1 {
            font-size: 2.8rem;
            font-weight: 700;
        }

        .blog-container {
            display: flex;
            gap: 2rem;
            padding-bottom: 4rem;
            margin-top: 2rem;
        }

        .blog-grid {
            display: flex;
            gap: 2rem;
        }
        
        .blog-main-post {
            flex-grow: 8;
            max-width: 66.67%;
        }
        
        .blog-main {
            flex-grow: 8;
            max-width: 66.67%;
        }
        
        .blog-sidebar {
            flex-grow: 4;
            max-width: 33.33%;
        }
        
        .blog-post-content li {
            margin-left: 1.5rem;
        }
        
        article.blog-post li {
            margin-left: 1.5rem;
        }
        
        .articles-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
        
        .articles-grid .blog-post {
            flex: 0 0 calc(50% - 0.75rem);
        }

        .blog-post {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .blog-post-thumbnail {
            width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .blog-post h2 {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }

        .blog-post a {
            text-decoration: none;
            color: var(--text-light);
            transition: color 0.3s ease;
        }

        .blog-post a:hover {
            color: var(--primary-blue);
        }

        .blog-meta {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .read-more {
            display: inline-block;
            color: var(--secondary-gold);
            text-decoration: none;
            font-weight: 600;
            margin-top: 1rem;
            transition: color 0.3s ease;
        }
        
        .read-more:hover {
            color: var(--primary-blue);
        }
        
        .sidebar-widget {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            position: sticky;
            top: 8rem;
        }

        .sidebar-widget h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .sidebar-widget ul {
            list-style: none;
        }
        
        .sidebar-widget ul li {
            margin-bottom: 0.5rem;
        }

        .sidebar-widget ul li a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .sidebar-widget ul li a:hover {
            color: var(--primary-blue);
        }


/* --- Footer --- */
 .footer {
     background-color: #0a5013;
     padding: 2rem 0;
     text-align: center;
     color: var(--text-secondary);
     border-top: 1px solid #f2ff00;
}
/* --- Mobile Responsiveness --- */
 @media (max-width: 768px) {
     p {
         font-size: 0.9em;
    }
     .navbar {
         padding: 1rem;
    }
     .nav-links {
         display: none;
         flex-direction: column;
         width: 100%;
         position: absolute;
         top: 70px;
         left: 0;
         background-color: var(--card-bg);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
         border-radius: 0 0 12px 12px;
         padding: 1rem 0;
         transform: translateY(-100%);
         transition: transform 0.3s ease-in-out;
         gap: 0;
    }
     .nav-links.active {
         display: flex;
         transform: translateY(0);
    }
     .nav-links li {
         width: 100%;
         text-align: center;
    }
     .nav-links a {
         display: block;
         padding: 0.8rem 1rem;
    }
     .nav-links .nav-button {
         margin: 0.5rem 20px;
         padding: 0.8rem 1.5rem;
    }
     .hamburger {
         display: flex;
    }
     .hero {
         padding: 8rem 0 4rem;
    }
     .hero h1 {
         font-size: 1.8rem;
    }
     .feature-content h2 {
         font-size: 1.7rem;
    }
     .hero-buttons {
         display: flex;
         flex-direction: column;
         gap: 1rem;
    }
     .feature-section {
         display: contents;
         gap: 2rem;
    }
     .feature-content {
         padding: 0 1rem;
         order: 2;
    }
     .feature-image {
         order: 1;
         padding: 0 1rem;
    }
     .feature-buttons .feature-button {
         display: flex;
         padding: 0.8rem 1rem;
         font-size: 0.8em;
         text-decoration: none;
         border-radius: 50px;
         margin-bottom: 0.5rem;
         font-weight: 500;
         transition: background-color 0.3s ease, color 0.3s ease;
         justify-content: center;
         margin-right: 0;
    }
    .blog-container {
        flex-direction: column;
    }
    
    .blog-grid {
        flex-direction: column;
    }
    
    .articles-grid .blog-post {
        flex: auto;
    }

    .blog-main,
    .blog-main-post,
    .blog-sidebar {
        max-width: 100%;
    }
    
    .blog-header h1 {
        font-size: 1.8rem;
    }
    
    .blog-post h2 {
        font-size: 1.6rem;
    }

}