* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}
        body {background-color: #f0f2f5; color: #333; line-height: 1.6;}
        .container {width: 90%; max-width: 1200px; margin: auto;}
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://bengaliworksheets.com/images/free-bengali-worksheets-download.webp) no-repeat center center/cover;
            color: #fff; padding: 100px 0; text-align: center; opacity: 0; transform: translateY(30px);
            animation: fadeInUp 1s forwards;
        }
        @keyframes fadeInUp {
            from {opacity: 0; transform: translateY(30px);}
            to {opacity: 1; transform: translateY(0);}
        }
        .hero-section h1 {font-size: 3.5rem; margin-bottom: 20px; animation: slideIn 0.5s forwards;}
        @keyframes slideIn {
            from {transform: translateY(-20px); opacity: 0;}
            to {transform: translateY(0); opacity: 1;}
        }
        .download-buttons {display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;}
        .download-btn {display: flex; align-items: center; transition: transform 0.3s ease;}
        .download-btn:hover {transform: scale(1.05);}
        
        .features-section {padding: 60px 0; background-color: #fff;}
        .features-section h2 {text-align: center; margin-bottom: 40px; font-size: 2.5rem; color: #333;}
        .features {display: flex; justify-content: space-around; gap: 20px; flex-wrap: wrap;}
        .feature {
            background-color: #f9f9f9; padding: 20px; border-radius: 10px; text-align: center; 
            flex-basis: 30%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; 
            opacity: 0; transform: translateY(20px);
            animation: fadeIn 0.5s forwards;
        }
        @keyframes fadeIn {
            from {opacity: 0; transform: translateY(20px);}
            to {opacity: 1; transform: translateY(0);}
        }
        .feature:nth-child(1) {animation-delay: 0.1s;}
        .feature:nth-child(2) {animation-delay: 0.2s;}
        .feature:nth-child(3) {animation-delay: 0.3s;}
        .feature h3 {font-size: 1.6rem; margin-bottom: 15px; color: #0fbcf9;}
        .feature:hover {transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);}
        
        .rating-section {background-color: #673ab7; color: #fff; padding: 50px 0; text-align: center;}
        .rating-section h2 {font-size: 2.5rem; margin-bottom: 20px;}
        .stars {font-size: 2.5rem; color: #ffd700; margin-bottom: 20px;}
        .rating-text {font-size: 1.3rem;}
        
        .image-carousel {overflow: hidden; position: relative; margin: 40px 0;}
        .image-scroll {display: flex; width: calc(100% * 8); /* 8 is the number of images */ }
        .image-scroll img {
            width: auto; height: 400px; /* Adjust height for 9:16 aspect ratio */
            border-radius: 15px; margin-right: 20px;
        }

        .review-section {padding: 60px 0; background-color: #f0f2f5;}
        .review-section h2 {text-align: center; margin-bottom: 40px; font-size: 2.5rem; color: #333;}
        .reviews {display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px;}
        .review {
            background-color: #fff; padding: 20px; border-radius: 10px; flex-basis: 30%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
            display: flex; flex-direction: column; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease; 
            opacity: 0; transform: translateY(20px);
            animation: fadeIn 0.5s forwards;
        }
        .review:nth-child(1) {animation-delay: 0.1s;}
        .review:nth-child(2) {animation-delay: 0.2s;}
        .review:nth-child(3) {animation-delay: 0.3s;}
        .review:hover {transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);}
        .review img {width: 80px; height: 80px; border-radius: 50%; margin-bottom: 15px;}
        .review p {font-size: 1rem; color: #555; margin-bottom: 10px; text-align: center;}
        .review .user {font-weight: 700; color: #333;}
        
        .about-section {padding: 60px 0; background-color: #fff; text-align: center;}
        .about-section h2 {font-size: 2.5rem; margin-bottom: 20px; color: #333;}
        .about-section p {font-size: 1.2rem; margin-bottom: 20px; color: #555; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.8;}
        
        .cta-section {background-color: #ff4081; color: #fff; padding: 60px 0; text-align: center;}
        .cta-section h2 {font-size: 2.5rem; margin-bottom: 20px;}
        .cta-section p {font-size: 1.2rem; margin-bottom: 30px;}
        .cta-btn {
            background-color: #fff; color: #ff4081; padding: 15px 30px; border-radius: 30px; 
            text-decoration: none; font-weight: 700; font-size: 1.1rem; transition: background-color 0.3s ease, color 0.3s ease;
        }
        .cta-btn:hover {background-color: #d9d9d9; color: #ff4081;}
        
        .footer {background-color: #333; color: #fff; padding: 20px 0; text-align: center;}
        .footer p {margin: 0; font-size: 1rem;}

        @media (max-width: 768px) {
            .hero-section h1 {font-size: 2.5rem;}
            .features {flex-direction: column;}
            .feature {flex-basis: 100%;}
            .reviews {flex-direction: column;}
            .review {flex-basis: 100%;}
        }
        @media (max-width: 480px) {
            .hero-section {padding: 70px 0;}
            .hero-section h1 {font-size: 2rem;}
            .hero-section p {font-size: 1rem;}
            .download-btn {padding: 10px 20px; font-size: .9rem;}
            .feature h3 {font-size: 1.3rem;}
            .review img {width: 60px; height: 60px;}
            .cta-section h2 {font-size: 2rem;}
            .cta-section p {font-size: 1rem;}
            .cta-btn {padding: 10px 20px; font-size: 1rem;}
        }