/* Custom CSS for the active shadow */
        .active-shadow {
            box-shadow: 0px 10px 40px 0px #00000040;
        }

        /* Initially hide chapter content and set for transition */
        .chapter-content {
            max-height: 0; /* Start with 0 height for slide-up/down effect */
            opacity: 0; /* Start with 0 opacity for fade effect */
            overflow: hidden; /* Hide overflowing content during transition */
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out; /* Smooth transition */
            padding-top: 0; /* Ensure padding is also transitioned */
            padding-bottom: 0; /* Ensure padding is also transitioned */
        }

        /* Arrow rotation for open/close state */
        .rotate-180 {
            transform: rotate(180deg);
        }

        /* Specific styles for the English header when active */
        #header-english.active-header {
            background-color: #47287f;
            color: white;
        }

        /* Specific styles for other headers when active */
        .active-header {
            background-color: #47287f; /* You can define a different active background for other subjects if needed */
            color: white; /* Active text color for other subjects */
        }

        /* Default styles for inactive headers */
        .inactive-header {
            background-color: #d9d9d9;
            color: #673AB7;
        }
        .active-shadow {
            box-shadow: 0px 10px 40px 0px #00000040;
        }

        /* Initially hide chapter content and set for transition */
        .chapter-content {
            max-height: 0; /* Start with 0 height for slide-up/down effect */
            opacity: 0; /* Start with 0 opacity for fade effect */
            overflow: hidden; /* Hide overflowing content during transition */
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out; /* Smooth transition */
            padding-top: 0; /* Ensure padding is also transitioned */
            padding-bottom: 0; /* Ensure padding is also transitioned */
        }

        /* Arrow rotation for open/close state */
        .rotate-180 {
            transform: rotate(180deg);
        }

        /* Specific styles for the English header when active */
        #header-english.active-header {
            background-color: #47287f;
            color: white;
        }

        /* Specific styles for other headers when active */
        .active-header {
            background-color: #47287f; /* You can define a different active background for other subjects if needed */
            color: white; /* Active text color for other subjects */
        }

        /* Default styles for inactive headers */
        .inactive-header {
            background-color: #d9d9d9;
            color: #673AB7;
        }