Pilgrim’s Progress

/* General Styles */ body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; color: #333; line-height: 1.6; } h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; } .container { width: 90%; max-width: 1200px; margin: 0 auto; } .btn { display: inline-block; padding: 10px 20px; background-color: #2c3e50; color: #fff; text-decoration: none; border-radius: 5px; transition: background-color 0.3s; } .btn:hover { background-color: #34495e; } /* Header Styles */ header { background-color: #2c3e50; color: #fff; padding: 20px 0; } header .logo { display: flex; align-items: center; } header .logo img { height: 50px; margin-right: 10px; } header nav ul { list-style: none; display: flex; justify-content: flex-end; } header nav ul li { margin-left: 20px; } header nav ul li a { color: #fff; text-decoration: none; } /* Hero Section */ .hero { background: url('hero-image.jpg') no-repeat center center/cover; color: #fff; padding: 100px 0; text-align: center; } .hero h1 { font-size: 3rem; margin-bottom: 20px; } .hero p { font-size: 1.2rem; margin-bottom: 30px; } /* About Section */ .about { padding: 60px 0; text-align: center; } .about img { max-width: 100%; height: auto; margin-top: 20px; } /* Mission Section */ .mission { background-color: #f4f4f4; padding: 60px 0; text-align: center; } .mission img { height: 50px; margin-top: 20px; } /* Programs Section */ .programs { padding: 60px 0; text-align: center; } .program-list { display: flex; justify-content: space-around; flex-wrap: wrap; } .program-item { width: 30%; margin-bottom: 20px; } .program-item img { height: 50px; margin-bottom: 10px; } /* Testimonials Section */ .testimonials { background-color: #2c3e50; color: #fff; padding: 60px 0; text-align: center; } .testimonial-list { display: flex; justify-content: space-around; flex-wrap: wrap; } .testimonial-item { width: 45%; margin-bottom: 20px; } .testimonial-item img { border-radius: 50%; width: 100px; height: 100px; margin-bottom: 10px; } /* Donation Section */ .donate { padding: 60px 0; text-align: center; } /* Footer Styles */ footer { background-color: #34495e; color: #fff; padding: 20px 0; text-align: center; } footer .footer-links { margin-bottom: 10px; } footer .footer-links a { color: #fff; text-decoration: none; margin: 0 10px; }