.page-hero {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-color) 100%);
            color: white;
            padding: 100px 0 80px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/Courses-banner.jpg);
            background-size: cover;
            background-position: center center;
            opacity: 0.2;
        }


        /* Base Section Styling */
        .section-block {
            padding: 80px 0;
            text-align: start;
            position: relative;
        }
        
        .section-header h3 {
            color: #333;
        }

        .about-header-title{
            color: #333;
            text-align: start;
        }

        .about-header-para{
            color: #444; 
            line-height: 1.7; 
            margin-top: 20px; 
            font-size: 1.1em;
            text-align: start;
        }

        /* 1. Key Takeaways Section (V6 retained) */
        .key-takeaways-split {
            display: flex;
            gap: 50px;
            align-items: center;
            text-align: left;
            flex-wrap: wrap;
        }
        .takeaway-list-col {
             flex: 2; 
             min-width: 350px;
            }
        .image-quote-col { 
            flex: 1; 
            min-width: 300px; 
            position: relative;
            transform: rotate(-1deg);
            box-shadow: 10px 10px 0px var(--accent-color);
            border: 3px solid var(--primary-color);
            transition: all .3s ease;
        }
        .image-quote-col:hover{
            box-shadow: -10px -10px 0px var(--accent-color);
        }
        .image-quote-col img { 
            width: 100%; 
            height: auto; 
            display: block; 
        }
        .clean-icon-list { 
            list-style: none; 
            padding: 0; 
            margin-top: 30px; 
        }
        .clean-icon-list li {
            display: flex; 
            align-items: center; 
            padding: 18px 0;
            border-bottom: 1px dashed #ddd; 
            color: #333;
            font-size: 1.1em; font-weight: 500;
            transition: padding-left 0.3s ease;
        }
        .clean-icon-list li:last-child { 
            border-bottom: none; 
        }
        .clean-icon-list li:hover { 
            padding-left: 10px; 
            color: var(--purple-color); 
        }
        .clean-icon-list li i {
            font-size: 1.3em; 
            color: var(--primary-color);
            margin-right: 15px; 
            width: 30px; 
            text-align: center;
        }

        /* 2. *PERFECTED BENEFITS GRID (Floating Icon Blocks) - V10* */
        .premium-benefits-grid {
            background-color: #f7f7f7;
            padding: 50px 0;
            position: relative;
        }

        .benefit-perfect-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 Columns on desktop */
            gap: 30px;
            margin-top: 90px;
        }
        
        .benefit-perfect-item {
            background-color: rgba(255, 255, 255, 0.277);
            padding: 25px 20px;
            border-radius: 10px;
            /* Floating Effect */
            transform: translateY(-10px); /* Permanent lift */
            transition: all 0.4s ease;
            text-align: start;
            display: flex;
            justify-content: start;
            align-items: start;
            flex-direction: column;
            gap: 15px;
        }
        
        .benefit-perfect-item:hover {
            transform: translateY(-15px); /* Lift higher on hover */
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
        }

        .icon-wrapper {
            background-color: var(--primary-color); /* Teal Background */
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            /* Pull icon up above the card for floating effect */
            /* margin: -60px auto 20px;  */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.096);
            border: 4px solid var(--secondary-color); /* White ring */
        }
        
        .icon-wrapper i {
            font-size: 1.6em;
            color: var(--accent-color); /* Gold Icon */
            margin: 0;
        }

        .benefit-perfect-item h4 {
            font-size: 1.3em;
            color: #333;
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .benefit-perfect-item p {
            color: #555;
            font-size: 0.9em;
        }
        
        /* 3. Curriculum Section (V6 retained) */
        .curriculum-module-container { 
            width: 100%; 
            margin: 0 auto; 
        }
        .module-row-alternate {
            display: flex; 
            align-items: center; 
            gap: 60px;
            padding: 50px 0; 
            border-bottom: 1px solid #eee; 
            text-align: left;
        }
        .module-row-alternate:nth-child(even) {
            background-color: #f4f4f4; 
            flex-direction: row-reverse;
            padding: 0px 20px; 
            margin: 0 -20px;
        }
        .module-text-col { 
            flex: 2; 
        }
        .module-text-col h4 { 
            font-size: 2em; 
            color: #4a4a4a; 
            margin-bottom: 15px;
         }
        .module-text-col p {
             line-height: 1.7; 
             color: #555; 
            }
        .module-image-col { 
            flex: 1; 
            
         }
        .module-image-col .image-box {
            position: relative; 
            padding: 10px; 
            background-color: var(--purple-color);
            clip-path: polygon(0 0, 100% 10%, 100% 100%, 10% 90%);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            width: 350px;
            height: 300px;
            transition: all 1.3s ease;
        }
        .module-image-col img {
            width: 100%; 
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            clip-path: polygon(0 0, 100% 10%, 100% 100%, 10% 90%);
            transition: all .8s ease;
        }

        .module-row-alternate:hover .image-box{
            clip-path: polygon(100% 100%, 0% 90%, 0% 0%, 90% 10%);
        }
        .module-row-alternate:hover img{
            clip-path: polygon(100% 100%, 0% 90%, 0% 0%, 90% 10%);
        }

        /* 4. FINAL CTA (Parallax Background - V8/V9 Retained and Perfected) */
        .cta-section {
            /* Parallax Background Implementation */
            background-image: url(images/Hifz-\(Memorization\).jpg); 
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* THE PARALLAX EFFECT */
            color: white;
            padding: 100px 0; 
            position: relative;
            overflow: hidden;
            z-index: 0;
        }

        /* Dark Teal Overlay for Readability */
        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(56, 62, 63, 0.75); /* Teal overlay 75% opacity */
            z-index: 1;
        }

        .cta-content-box {
            max-width: 1000px;
            margin: 0 auto;
            z-index: 2; /* Bring content above overlay */
            position: relative;
        }

        .cta-section h3 {
            font-size: 2.5em;
            letter-spacing: 1px;
            margin-bottom: 15px;
            text-align: center;
        }

        .cta-para{
            font-size: 1.2em; 
            opacity: 0.9; 
            margin-bottom: 30px;
            text-align: center;
        }

        .cta-btn-v7 {
            background-color: var(--accent-color);
            color: var(--purple-color);
            border: none;
            padding: 18px 45px;
            font-size: 1.2em;
            font-weight: 700;
            border-radius: 50px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
            margin-top: 20px;
            display: inline-block;
            text-decoration: none;
        }
        
        .cta-btn-v7:hover {
            transform: scale(1.05);
            background-color: #ffde54; 
        }

        /* Responsiveness for Perfected Benefits Grid */
        @media (max-width: 1200px) {
            .benefit-perfect-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .key-takeaways-split { flex-direction: column; text-align: center; }
            .image-quote-col { transform: rotate(0deg); box-shadow: 5px 5px 0px var(--accent-color); max-width: 450px; }
            .clean-icon-list li { justify-content: flex-start; }
            .module-row-alternate, .module-row-alternate:nth-child(even) { flex-direction: column; gap: 20px; padding: 40px 0; margin: 0; }
            .module-image-col { max-width: 300px; margin: 0 auto; }
            
            .benefit-perfect-grid {
                grid-template-columns: 1fr; /* Single column on mobile */
            }
        }