body { font-family: 'Arial', sans-serif; background-color: #f5f7fa; color: #333; margin: 0; padding: 0; } .container { max-width: 1200px; margin: 20px auto; padding: 20px; } /* Header Section */ .header { text-align: center; margin-bottom: 40px; } .header h2 { font-size: 32px; color: #2c3e50; } .header p { font-size: 18px; color: #555; } /* Contribution Section */ .contribution-banner { background: linear-gradient(90deg, #007bff, #0056b3); color: white; padding: 20px; border-radius: 12px; margin-bottom: 40px; text-align: center; } .contribution-banner h3 { font-size: 24px; margin-bottom: 10px; } .contribution-banner p { font-size: 16px; } /* Reasons Section */ .reasons { background-color: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 40px; } .reasons h3 { text-align: center; font-size: 26px; color: #34495e; margin-bottom: 20px; } .reasons-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .reason-item { background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; align-items: flex-start; } .reason-item:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .reason-icon { font-size: 30px; /* Increased size for better visibility */ margin-right: 15px; flex-shrink: 0; margin-top: 4px; } .reason-content h4 { font-size: 18px; color: #2c3e50; margin-bottom: 10px; } .reason-content p { color: #555; } /* Plan Cards Section */ .card-container { display: grid; grid-template-columns: repeat(3, 1fr); /* Display 3 cards in one row */ gap: 20px; justify-content: center; margin-top: 30px; } .card { background: white; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 20px; text-align: left; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } .card-header { text-align: center; margin-bottom: 20px; } .card-header h3 { font-size: 20px; color: #34495e; } .card-header .price { font-size: 20px; font-weight: bold; color: #27ae60; } /* Customization Section */ .customization { margin: 20px 0; padding: 15px; background-color: #f9f9f9; border-radius: 8px; text-align: center; } .customization label { display: block; margin-bottom: 10px; font-size: 14px; color: #555; } .customization input { width: 80%; padding: 8px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 6px; } /* Button */ .btn { display: block; width: 100%; padding: 12px; text-align: center; font-size: 16px; color: white; background-color: #007bff; border: none; border-radius: 8px; text-decoration: none; transition: background-color 0.3s ease; } .btn:hover { background-color: #0056b3; } /* Charge Breakdown Section */ .charges { margin-top: 20px; padding: 15px; background: #fefefe; border: 1px solid #ddd; border-radius: 8px; } .charges p { margin: 8px 0; font-size: 14px; color: #555; } .charges .total { font-size: 18px; font-weight: bold; color: #27ae60; margin-top: 15px; } /* Advantages Section */ .advantages { margin-top: 20px; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; } .advantages h4 { font-size: 18px; color: #2c3e50; margin-bottom: 10px; } .advantages ul { list-style: none; padding: 0; margin: 0; } .advantages li { position: relative; padding-left: 25px; font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 8px; } .advantages li::before { content: "✓"; position: absolute; left: 0; color: #27ae60; font-weight: bold; } /* Responsive Design */ @media (max-width: 768px) { .card-container { grid-template-columns: 1fr; /* Stack cards vertically on smaller screens */ } .reasons-list { grid-template-columns: 1fr 1fr; /* Adjust grid for smaller screens */ } } @media (max-width: 480px) { .reasons-list { grid-template-columns: 1fr; /* Single column on very small screens */ } }