/* CSS Custom Properties for Color Management */
   :root {
       --primary-brown: #4A2E2E;
       --light-brown: #F5EDE6;
       --white: #FFFFFF;
       --text-gray: #6B7280;
       --light-gray: #F3F4F6;
       --border-gray: #E5E7EB;
       --dark-gray: #374151;
   }

   /* Reset and Base Styles */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Inter', sans-serif;
       line-height: 1.6;
       color: var(--dark-gray);
       background-color: var(--white);
   }



   /* Header Styles */
   /* .header {
            background-color: var(--white);
            padding: 1rem 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-brown);
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
            align-items: center;
        }

        .nav-menu a {
            text-decoration: none;
            color: var(--dark-gray);
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .nav-menu a:hover {
            color: var(--primary-brown);
        }

        .auth-buttons {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .btn-login {
            background: none;
            border: 1px solid var(--primary-brown);
            color: var(--primary-brown);
            padding: 0.5rem 1rem;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-signup {
            background-color: var(--primary-brown);
            color: var(--white);
            padding: 0.5rem 1rem;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-login:hover, .btn-signup:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(74, 46, 46, 0.2);
        }

        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            background: none;
            border: none;
        }

        .hamburger span {
            width: 25px;
            height: 3px;
            background-color: var(--primary-brown);
            margin: 3px 0;
            transition: 0.3s;
        } */

   /* Hero Section */
   .hero {
       background-color: var(--white);
       padding: 2rem 0;
   }

   .hero-container {
       max-width: 1000px;
       margin: 0 auto;
       padding: 0 2rem;
   }

   .hero-image {
       width: 100%;
       max-width: 100%;
       height: 100vh;
       border-radius: 12px;
       margin-bottom: 2rem;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       object-fit: cover;
   }

   .hero-content {
       text-align: center;
       margin-bottom: 2rem;
   }

   .hero h1 {
       font-size: 44px;
       font-weight: 400;
       margin-bottom: 1rem;
       line-height: 1.3;
       color: #563D39;
   }

   .hero-subtitle {
       font-size: 1.1rem;
       color: var(--text-gray);
       margin-bottom: 1.5rem;
       line-height: 1.6;
   }

   .hero-tags {
       display: flex;
       justify-content: center;
       gap: 1rem;
       flex-wrap: wrap;
   }
   .hero-tags a{
    color: #FFFFFF;
    text-decoration: none;
   }

   .hero-tag {
       background-color: var(--primary-brown);
       color: var(--white);
       padding: 0.5rem 1rem;
       border-radius: 20px;
       font-size: 0.9rem;
       font-weight: 500;
   }

   /* Main Content */
   .main-content {
       max-width: 1000px;
       margin: 3rem auto;
       padding: 0 2rem;
   }

   .content-section {
       margin-bottom: 3rem;
   }

   .content-section h2 {
       font-size: 1.8rem;
       font-weight: 600;
       color: var(--primary-brown);
       margin-bottom: 1rem;
       border-left: 4px solid var(--primary-brown);
       padding-left: 1rem;
   }

   .content-section h3 {
       font-size: 1.3rem;
       font-weight: 600;
       color: var(--dark-gray);
       margin: 2rem 0 1rem 0;
   }

   .content-section p {
       margin-bottom: 1rem;
       line-height: 1.8;
       color: var(--text-gray);
   }

   .content-section ul {
       margin: 1rem 0;
       padding-left: 2rem;
   }

   .content-section li {
       margin-bottom: 0.5rem;
       color: var(--text-gray);
       line-height: 1.8;
   }

   .highlight-box {
       background-color: var(--light-brown);
       padding: 1.5rem;
       border-radius: 8px;
       margin: 2rem 0;
       border-left: 4px solid var(--primary-brown);
   }

   .highlight-box h4 {
       color: var(--primary-brown);
       font-weight: 600;
       margin-bottom: 0.5rem;
   }

   /* FAQ Section */
   .faq-section {
       background-color: var(--light-gray);
       padding: 3rem 0;
       margin-top: 4rem;
   }

   .faq-container {
       max-width: 1000px;
       margin: 0 auto;
       padding: 0 2rem;
   }

   .faq-section h2 {
       text-align: center;
       font-size: 2rem;
       font-weight: 600;
       color: var(--primary-brown);
       margin-bottom: 2rem;
   }

   .faq-item {
       background-color: var(--white);
       border-radius: 8px;
       margin-bottom: 1rem;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .faq-question {
       padding: 1.5rem;
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-weight: 600;
       color: var(--primary-brown);
       border: none;
       background: none;
       width: 100%;
       text-align: left;
   }

   .faq-question:hover {
       background-color: var(--light-brown);
   }

   .faq-answer {
       padding: 0 1.5rem;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease, padding 0.3s ease;
   }

   .faq-answer.active {
       padding: 0 1.5rem 1.5rem 1.5rem;
       max-height: 200px;
   }

   .faq-icon {
       transition: transform 0.3s ease;
   }

   .faq-icon.active {
       transform: rotate(45deg);
   }

   /* Related Posts Section */
   .related-posts {
       background-color: var(--primary-brown);
       color: var(--white);
       padding: 1.5rem 0;
       border-radius: 40px;
       margin-top: 60px;
   }
   
   .related-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 2rem;
   }

   .related-posts h2 {
       text-align: center;
       font-size: 2rem;
       font-weight: 600;
       margin-bottom: 3rem;
   }

   .posts-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 2rem;
   }

   .post-card {
       background-color: var(--white);
       border-radius: 12px;
       overflow: hidden;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       color: var(--dark-gray);
   }

   .post-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   }

   .post-image {
       width: 100%;
       height: 200px;
       background: linear-gradient(45deg, var(--light-brown), var(--border-gray));
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 3rem;
       color: var(--primary-brown);
   }
   .post-image img {
        height: 192px !important;
        width: 464px !important;
   }

   .post-content {
       padding: 1.5rem;
   }

   .post-content h3 {
       font-size: 1.1rem;
       font-weight: 600;
       margin-bottom: 0.5rem;
       color: var(--primary-brown);
   }

   .post-content p {
       font-size: 0.9rem;
       color: var(--text-gray);
       line-height: 1.6;
   }

   /* Footer */
   /* .footer {
       background-color: var(--light-brown);
       padding: 3rem 0 2rem 0;
   }

   .footer-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 2rem;
   }

   .footer-content {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 2rem;
       margin-bottom: 2rem;
   }

   .footer-section h3 {
       color: var(--primary-brown);
       font-weight: 600;
       margin-bottom: 1rem;
   }

   .footer-section ul {
       list-style: none;
   }

   .footer-section ul li {
       margin-bottom: 0.5rem;
   }

   .footer-section ul li a {
       color: var(--text-gray);
       text-decoration: none;
       transition: color 0.3s ease;
   }

   .footer-section ul li a:hover {
       color: var(--primary-brown);
   }

   .social-icons {
       display: flex;
       gap: 1rem;
       margin-top: 1rem;
   }

   .social-icons a {
       color: var(--primary-brown);
       font-size: 1.5rem;
       transition: color 0.3s ease, transform 0.3s ease;
   }

   .social-icons a:hover {
       color: var(--dark-gray);
       transform: translateY(-2px);
   }

   .footer-bottom {
       border-top: 1px solid var(--border-gray);
       padding-top: 1rem;
       text-align: center;
       color: var(--text-gray);
       font-size: 0.9rem;
   } */

   /* Responsive Design */
   @media (max-width: 768px) {
       .nav-menu {
           position: fixed;
           top: 70px;
           left: -100%;
           width: 100%;
           height: calc(100vh - 70px);
           background-color: var(--white);
           flex-direction: column;
           justify-content: start;
           padding-top: 2rem;
           transition: left 0.3s ease;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       }

       .nav-menu.active {
           left: 0;
       }

       .hamburger {
           display: flex;
       }

       .hero h1 {
           font-size: 1.8rem;
       }

       .hero-subtitle {
           font-size: 1rem;
       }

       .hero-tags {
           gap: 0.5rem;
       }

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

       .main-content {
           padding: 0 1rem;
       }

       .content-section h2 {
           font-size: 1.5rem;
       }

       .posts-grid {
           grid-template-columns: 1fr;
       }

       .footer-content {
           grid-template-columns: 1fr;
           text-align: center;
       }
   }

   /* Smooth scrolling */
   html {
       scroll-behavior: smooth;
   }

   /* Accessibility improvements */
   .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0;
   }

   /* Focus styles for accessibility */
   a:focus,
   button:focus {
       outline: 2px solid var(--primary-brown);
       outline-offset: 2px;
   }

   /* cutom css 11  */
   .wp-singular .hero-container{
    max-width: 1440px;
   }