* { margin: 0; padding: 0; box-sizing: border-box; } /* Base styles */ body { font-family: Arial, sans-serif; line-height: 1.6; background-color: #f4f4f4; color: #333; } /* Header styling */ header { background-color: black; color: #fff; padding: 20px 0; text-align: right; } header h1 { margin-bottom: 10px; text-align: center; } /* Navigation */ nav a { color: #fff; margin: 0 15px; text-decoration: none; font-weight: bold; } nav a:hover { text-decoration: underline; } /* Main content */ main { max-width: 9000px; margin: 30px auto; background-color: #fff; padding: 20px; border-radius: 8px; } /* Float image to right */ .right-img { float: right; margin-right: 90px; margin-left: 20px; margin-bottom: 10px; border-radius: 5px; margin-top: -173px } /* Clear float after image */ main::after { content: ""; display: table; clear: both; } /* Responsive Design */ @media (max-width: 768px) { nav a { display: block; margin: 10px 0; } main { margin: 20px; padding: 15px; } } .support-container { display: flex; justify-content: center; gap: 15px; background-color: white; padding: 20px; flex-wrap: wrap; } .support-card { background-color: black; color: #ffffff; width: 170px; height: 180px; text-align: center; padding: 20px; border-radius: 6px; transition: transform 0.3s; } .support-card i { font-size: 40px; color: #7edbff; margin-bottom: 15px; } .support-card p { font-size: 16px; margin-top: 10px; color: #fff; } .support-card:hover { transform: translateY(-5px); cursor: pointer; } .footer { background-color: #ffffff; color: #000; padding: 40px 20px 20px; font-family: Arial, sans-serif; } .footer-columns { display: flex; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #ccc; padding-bottom: 20px; } .footer-column { flex: 1; min-width: 180px; margin-right: 20px; } .footer-column h5 { font-size: 18px; margin-bottom: 10px; font-weight: bold; } .footer-column ul { list-style: none; padding: 0; } .footer-column ul li { margin-bottom: 8px; } .footer-column ul li a { text-decoration: none; color: #000; } .footer-column ul li a:hover { text-decoration: underline; } .footer-social { display: flex; align-items: flex-start; gap: 15px; margin-top: 10px; } .footer-social a { color: #000; font-size: 22px; } .footer-bottom { margin-top: 20px; text-align: left; font-size: 14px; color: #000; } .footer-logo { flex: 1; min-width: 150px; margin-right: 20px; } .footer-logo img { height: 226px; width: 310px; } .logo { height: 72px; margin-left: 37px; float: left; margin-top: -23px; } .card-section { padding: 20px; } .card-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .card { width: 22%; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } .card-img-top { width: 100%; height: auto; } .card-body { padding: 15px; text-align: center; } @media screen and (max-width: 992px) { .card { width: 45%; } } @media screen and (max-width: 600px) { .card { width: 100%; } } .carousel-item img { width: 100%; height: 400px; object-fit: cover; } .container { display: flex; gap: 20px; padding: 20px; } .sticky-img { position: sticky; top: 20px; height: 231px; width: 505px; } .container { display: flex; gap: 20px; padding: 20px; align-items: flex-start; } .sticky-img { position: sticky; top: 20px; height: 300px; width: 400px; object-fit: cover; flex-shrink: 0; border-radius: 8px; } .content { flex: 1; display: flex; flex-direction: column; justify-content: center; } .content h1 { font-size: 28px; font-weight: bold; margin-bottom: 10px; text-align: left; } .content p { font-size: 16px; line-height: 1.6; text-align: left; } /* Mobile responsiveness improvements */ @media (max-width: 800px) { /* Header and logo */ header { text-align: center; } .logo { float: none; margin: 10px auto; display: block; } nav { margin-top: 10px; } nav a { display: block; margin: 10px 0; text-align: center; } /* Main content */ main { margin: 10px; padding: 15px; } /* Floated right image */ .right-img { float: none; display: block; margin: 0 auto 15px; max-width: 100%; height: auto; } /* Card container */ .card { width: 100%; } /* Footer */ .footer-columns { flex-direction: column; align-items: center; } .footer-column, .footer-logo { margin: 20px 0; text-align: center; } .footer-logo img { width: 100%; height: auto; } /* Sticky Image Section */ .container { flex-direction: column; align-items: center; } .sticky-img { position: static; width: 100%; height: auto; margin-bottom: 15px; } .content { text-align: center; } .content h1, .content p { text-align: center; } } @media (max-width: 600px) { /* Support Cards */ .support-card { width: 100%; margin: 10px 0; } /* Carousel image */ .carousel-item img { height: 200px; } /* Card layout override */ .card { width: 100%; } }