/* General styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.welcome-message {
    padding: 20px;
}

.hero-section, .degree-programs, .learner-outcomes, .coursera-community, .info-boxes {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* Grid setup */
.hero-section .text-content, .hero-section .image-content {
    display: inline-block;
    vertical-align: top;
}

.hero-section .text-content {
    width: 50%;
    padding-right: 20px;
}

.hero-section .image-content {
    width: 50%;
}

.program-cards, .testimonials, .info-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.program-cards .card, .testimonials .testimonial, .info-boxes .info-box {
    flex: 1;
    min-width: 250px;
    box-sizing: border-box;
}

/* Responsive Styles */

/* For tablets and smaller devices */
@media (max-width: 768px) {
    .hero-section .text-content, .hero-section .image-content {
        width: 100%;
        padding: 0;
        text-align: center;
    }
    
    .hero-section .image-content img {
        width: 100%;
        height: auto;
    }

    .program-cards, .testimonials, .info-boxes {
        flex-direction: column;
        align-items: center;
    }

    .program-cards .card, .testimonials .testimonial, .info-boxes .info-box {
        width: 100%;
        max-width: 500px;
    }
}

/* For mobile devices */
@media (max-width: 480px) {
    .welcome-message {
        padding: 10px;
    }

    .hero-section .text-content h1 {
        font-size: 1.5em;
    }

    .hero-section .text-content p, .program-cards .card-content p, .testimonials .testimonial p, .info-boxes .info-box p {
        font-size: 0.9em;
    }

    .degree-programs, .learner-outcomes, .coursera-community, .info-boxes {
        padding: 10px;
    }

    .buttons a {
        display: block;
        margin-bottom: 10px;
    }

    .info-boxes .info-box ul {
        padding-left: 20px;
    }

    .program-cards .card img, .testimonials .testimonial img, .info-boxes .info-box img {
        width: 100%;
        height: auto;
    }
}