.fancy-text {
            font-family: 'Courier New', monospace;
            color: #32CD32; /* LimeGreen */
            text-shadow: 2px 2px 4px #008000; /* Darker green shadow */
            white-space: pre; /* Preserve spaces for ASCII art */
            font-size: 20px;
        }
        /* Header Section */
        .header {
            background-image: url('img2.webp');
            background-size: cover;
            background-position: center;
            height: 500px;
            color: #fff;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-position: bottom;
        }

        a {
            color: white;
            text-decoration: none;
            transition: color 0.3sease-in-out;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 10px 20px;
            border-radius: 8px;
            margin-bottom: 5px;
        }

        .header p {
            margin-top: 10px;
            color: #ddd;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 10px 20px;
            border-radius: 8px;
        }

        /* Content Section */
        .content {
            padding: 20px 10px;
            text-align: center;
            background-color: #f8f8f8;
        }
        
        .content-text {
            padding: 40px 80px;
            text-align: center;
            background-color: #f8f8f8;
            border: 2px solid #ddd;
            border-radius: 8px;
            margin:8px 100px;
        }
        .content-about {
            display: flex;
            justify-content: space-between;
            /* gap: 30px; */
            padding: 20px;
            max-width: auto;
            /* padding: 40px 80px; */
            text-align: center;
            background-color: #f8f8f8;
            border: 2px solid #ddd;
            border-radius: 8px;
            /* margin:8px 100px; */
        }

        /* .content h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 10px;
        } */

        /* Image Thumbnails */
        .thumbnails {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .thumbnails img {
            width: 200px;
            height: auto;
            border: 2px solid #ddd;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        .thumbnails img:hover {
            transform: scale(1.1);
            border-color: #333;
        }

        .chapters {
            flex: 1;
            /* border-left: 1px solid #ddd; */
            padding-left: 20px;
        }

        .chapters ul {
            list-style: none;
            padding: 0;
        }

        .chapters li {
            margin-bottom: 10px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 8px;
        }

        .chapters li:first-child {
            font-weight: bold;
            color: #e63946;
        }
        
        .container {
            display: flex;
            justify-content: space-between;
            gap: 30px;
            padding: 40px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .about {
            flex: 1;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }
    
        .home-body {
            display: flex;
            flex-direction: row;
            height: 100%; /* Allow content to extend */
          }
        
        .left-section,
        .right-section {
            width: 20%; /* Adjust width as needed */
            height: auto; /* Allow height to grow */
            position: relative; /* Ensure sticky behaves correctly */
        }

        /* Middle Section */
        .middle-section {
            flex: 1; 
            flex-direction: column;
            min-height: 100vh;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            overflow-y: auto; /* Allow middle section content to scroll */
            padding: 16px;
  }
       .social-share {
         display: flex;
         gap: 10px;
         justify-content: center;
     }
        .share-button {
            padding: 10px 15px;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }
        .facebook { background-color: #3b5998; }
        .twitter { background-color: #1da1f2; }
        .linkedin { background-color: #0077b5; }
        .whatsapp { background-color: #25d366; }


  .fixed-section {
    position: sticky; /* Use sticky positioning */
    top: 0; /* Stick to the top of the parent section */
    padding: 16px;
    overflow-y: auto; /* Allow internal scrolling if content exceeds height */
    max-height: 100vh; /* Prevent overflow beyond viewport */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for visibility */
  }
        
        @media (max-width: 480px) {
            .home-body {
                display: flex;
                flex-direction: column;
                height: 100%; /* Allow content to extend */
              }
            .header {
                height: 160px;
            }
        
            /* .header h1 {
                font-size: 1.8rem;
                padding: 5px 10px;
            } */
        
            .header p {
                font-size: 0.9rem;
                padding: 5px 10px;
            }
        
            /* .content h2 {
                font-size: 1.3rem;
                text-underline-offset: 6px;
            } */
        
            .content-text {
                padding: 10px;
                margin: 5px;
            }
        
            .thumbnails img {
                width: 120px;
            }

            .container {
                flex-direction: column;
            }

            .about, .chapters {
                padding: 8px 0;
            }
        
            .chapters li {
                font-size: 0.9rem;
            }
        
            /* .about h2 {
                font-size: 1.2rem; 
            } */

            .fixed-section {
                position: sticky; /* Use sticky positioning */
                top: 0; /* Stick to the top of the parent section */
                padding: 6px;
                overflow-y: auto; /* Allow internal scrolling if content exceeds height */
                max-height: 100vh; /* Prevent overflow beyond viewport */
                box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for visibility */
              }

          /* Middle Section */
            .middle-section {
                flex: 1;
                min-height: 100vh;
                padding: 20px;
                background-color: #fff;
                border: 1px solid #ddd;
                border-radius: 8px;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
                overflow-y: auto;
            }
            .left-section,
            .right-section {
            width: 100%; /* Adjust width as needed */
            height: auto; /* Allow height to grow */
            position: relative; /* Ensure sticky behaves correctly */
          }        }