/* Section4 Styling */
.section4 {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center-align all content */
    justify-content: center; /* Center content vertically */
    padding: 50px; /* Add spacing inside the section */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding in width */
    background: linear-gradient(to right, #0368FF, #C27FCF); /* Gradient background */
    border-radius: 10px; /* Optional rounded corners */
    margin-top: 20px; /* Add spacing between sections */
}

.quotation {
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center-align all elements */
    gap: 20px; /* Space between image and text */
}

.quotation-img {
    width: 33px; /* Set width for quotation mark image */
    height: 33px; /* Set height for quotation mark image */
}

.quotation-text {
    text-align: center; /* Center-align text */
}

.quote {
    font-family: 'Spartan', sans-serif;
    font-size: 18px; /* Set font size to 18px */
    font-weight: bold; /* Bold text */
    color: white; /* White text color */
    margin-bottom: 10px; /* Spacing between quote and source */
}

.source {
    font-family: 'Spartan', sans-serif;
    font-size: 18px; /* Set font size to 18px */
    font-weight: bold; /* Bold text */
    color: white; /* White text color */
}

/* Responsive Design for Smaller Devices */

/* Devices 768px or smaller */
@media (max-width: 768px) {
    .section4 {
        padding: 30px; /* Reduce padding for medium screens */
        margin-top: 20%;

    }

    .quotation-img {
        width: 28px; /* Reduce size for quotation mark image */
        height: 28px; /* Reduce size for quotation mark image */
    }

    .quote, .source {
        font-size: 16px; /* Adjust font size for text */
    }
}

/* Devices 480px or smaller */
@media (max-width: 480px) {
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 100%;
    }

    .quotation-img {
        width: 25px; /* Further reduce size for quotation mark image */
        height: 25px; /* Further reduce size for quotation mark image */
    }

    .quote, .source {
        font-size: 14px; /* Adjust font size for text */
    }
}

@media (max-width: 375px) {
    /* Add your styles here for Samsung Galaxy A23 and similar devices */
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 70%;
    }
}

@media (max-width: 414px) {
    /* Add your styles here for Samsung Galaxy A23 and similar devices */
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 10%;
    }
}

@media (max-width: 390px) {
    /* Add your styles here for Samsung Galaxy A23 and similar devices */
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 40%;
    }
}

@media (max-width: 430px) {
    /* Add your styles here for Samsung Galaxy A23 and similar devices */
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 10%;
    }
}

@media (max-width: 360px) {
    /* Add your styles here for Samsung Galaxy A23 and similar devices */
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 60%;
    }
}

@media (max-width: 540px) {
    /* Add your styles here for Samsung Galaxy A23 and similar devices */
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 70%;
    }
}

@media (max-width: 344px) {
    /* Add your styles here for Samsung Galaxy A23 and similar devices */
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 20%;
    }
}

@media (max-width: 412px) {
    /* Add your styles here for Samsung Galaxy A23 and similar devices */
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 20%;
    }
}

@media (max-width: 1080px) {
    /* Add your styles here for Samsung Galaxy A23 and similar devices */
    .section4 {
        padding: 20px; /* Further reduce padding for small screens */
        margin-top: 60%;
    }
}