/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and Layout */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    color: #333;
    line-height: 1.6;
    padding: 0 20px; /* Added padding to left and right */
}

/* Header */
header {
    background-color: #6a1b9a;
    color: white;
    padding: 20px 0;
    text-align: center;
}

header .container {
    position: relative;
}

.header-image {
    width: auto; /* Image will maintain its original size */
    height: auto;
    margin: 0 auto 20px;
    max-width: 100%; /* Make the header image responsive */
}

/* Container for content */
.container {
    max-width: 1080px; /* Reduced max-width by 10% */
    margin: 0 auto; /* Center content */
    padding: 0 20px; /* Added padding to content for left and right margins */
}

/* Intro Section */
.intro {
    background-color: #ffffff;
    padding: 40px 0;
}

.intro h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #6a1b9a;
}

.intro-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.book1-img {
    width: 220px;
    height: auto;
    margin-left: 20px;
    float: right; /* Aligns image to the right on desktop */
    margin-bottom: 20px; /* Adds spacing at the bottom of the image */
    max-width: 100%; /* Ensures image scales properly */
}

.intro p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

/* Graphics Section */
.graphics {
    text-align: center;
    margin: 40px 0;
}

.book2-img {
    width: 660px;
    height: auto;
    margin: 20px 0;
    max-width: 100%; /* Make the image responsive */
}

/* Features Section */
.features {
    background-color: #eeeeee;
    padding: 40px 0;
}

.features h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #6a1b9a;
}

.features ul {
    list-style-type: none;
    padding-left: 0;
}

.features li {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.features strong {
    color: #6a1b9a;
}

/* Testimonial Section */
.testimonial {
    background-color: #ffffff;
    padding: 40px 0;
    text-align: center;
}

.testimonial blockquote {
    font-size: 1.2rem;
    color: #333;
    font-style: italic;
    margin-top: 20px;
}

.testimonial h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #6a1b9a;
}

/* Call to Action Section */
.call-to-action {
    background-color: #ffffff;
    padding: 40px 0;
    text-align: center;
}

.call-to-action h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #6a1b9a;
}

.call-to-action .cta-button {
    font-size: 1.5rem;
    background-color: #6a1b9a;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    margin-top: 20px;
}

.call-to-action .cta-button:hover {
    background-color: #9c4d98;
}

/* Footer */
footer {
    background-color: #6a1b9a;
    color: white;
    padding: 20px 0;
    text-align: center;
}

footer p {
    font-size: 1rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Adjust intro section layout */
    .intro-content {
        flex-direction: column; /* Stack content vertically on mobile */
        align-items: center;
        text-align: center;
    }

    /* Adjust image size for mobile */
    .book1-img {
        width: 100%; /* Make the image take full width on mobile */
        margin-left: 0;
        margin-right: 0;
        float: none; /* Remove float on mobile */
    }

    /* Adjust book2 image size for mobile */
    .book2-img {
        width: 100%; /* Make the image take full width on mobile */
    }

    .features ul {
        padding-left: 20px; /* Add some left padding for readability */
    }
}