/* aboutStyles.css */ body{ font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif /* More professional font */ } /* General Section Styling */ .about-section { background-color: #f8f9fa; /* Light background for readability */ padding: 60px 0; color: #333; /* Dark text for better contrast */ letter-spacing: 0.5px; } .about-section h2 { font-size: 2.5rem; font-weight: 200; color: #000000; /* Brand color for headings */ text-align: left; /* Align text to the left for a professional look */ margin-bottom: 20px; } .about-section p { font-size: 1.1rem; line-height: 1.6; text-align: justify; margin-bottom: 15px; color: #555; /* Slightly lighter gray for body text */ } /* Image Styling */ .about-section .about-image { max-width: 100%; height: auto; border-radius: 5px; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Softer shadow for depth */ } /* Columns Styling */ .about-section .col-lg-6 { padding: 20px; } .about-section .col-lg-6:first-child { display: flex; justify-content: center; align-items: center; } .about-section .col-lg-6:last-child { display: flex; flex-direction: column; justify-content: center; /* Center text vertically */ } /* Additional Information Section */ .about-section h3 { font-size: 2rem; font-weight: 600; color: #000000; margin-top: 30px; margin-bottom: 15px; } /* Contact & Affiliates Block */ .about-section h3 span { font-size: 1.5rem; color: #222; } .about-section .small-logos { max-width: 70px; /* Smaller logos for better layout */ margin: 0 10px; } .about-section .contact-info { text-align: left; font-size: 1.1rem; color: #333; /* Darker text for contact information */ } .about-section .contact-info a { color: #000000; /* Consistent brand color for links */ text-decoration: none; /* Remove underline */ } .about-section .contact-info a:hover { text-decoration: underline; /* Underline on hover for clarity */ } /* Additional Information Section */ .additional-info-section { background-color: #ffffff; /* White background for clarity */ padding: 40px 0; border-top: 2px solid #000000; /* Border to separate sections */ } .additional-info-section h3 { font-size: 2rem; font-weight: 600; color: #000000; /* Brand color for headings */ margin-bottom: 20px; text-align: left; /* Align text to the left for professionalism */ } .additional-info-section p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 15px; color: #555; /* Dark gray text for readability */ } .image-blur-right { position: relative; overflow: hidden; /* Ensure no content spills out */ } .image-blur-right img { display: block; width: 100%; height: auto; } .image-blur-right::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 20%; /* The fade starts from the middle */ background: linear-gradient(to left, #f8f9fa, rgba(255, 255, 255, 0)); pointer-events: none; /* Make sure the blur doesn't interfere with any clicks or actions */ } @media (max-width: 768px) { .about-section h2 { font-size: 2rem; } .about-section h3 { font-size: 1.5rem; } .about-section p { font-size: 1rem; } .additional-info-section h3 { font-size: 1.5rem; } .additional-info-section p { font-size: 1rem; } .about-section .col-lg-6 { padding: 15px; /* Reduce padding for smaller screens */ } } @media (max-width: 576px) { .about-section h2 { font-size: 1.8rem; /* Smaller font for very small screens */ } .about-section h3, .additional-info-section h3 { font-size: 1.3rem; /* Adjusted for small screens */ } .about-section p, .additional-info-section p { font-size: 0.9rem; /* Smaller font size */ } .about-section .small-logos { max-width: 50px; /* Smaller logos for very small screens */ } } /* Responsive adjustments @media (max-width: 768px) { .additional-info-section h3 { font-size: 1.5rem; } .additional-info-section p { font-size: 1rem; } } */ /* Responsive adjustments @media (max-width: 768px) { .about-section h2 { font-size: 2rem; } .about-section h3 { font-size: 1.5rem; } .about-section p { font-size: 1rem; } } */