/* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: Arial, sans-serif; /* KEEPING ORIGINAL FONT-FAMILY */ background-color: white; /* KEEPING ORIGINAL BACKGROUND-COLOR */ color: #000000; /* Default text color to black for contrast on white */ position: relative; overflow-x: hidden; } /* Mesmerizing Background Animation for the .particles div */ /* This div should exist in your HTML, typically right after */ .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Ensure it stays behind content */ overflow: hidden; /* Prevent animation overflow */ /* Define multiple, soft, translucent radial gradients */ background: radial-gradient(circle at 10% 90%, rgba(200, 230, 255, 0.2) 0%, transparent 50%), radial-gradient(circle at 90% 10%, rgba(220, 240, 255, 0.2) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(240, 250, 255, 0.2) 0%, transparent 60%); background-size: 300% 300%; /* Make gradients much larger for smooth, subtle movement */ animation: moveGradientBackground 30s ease infinite alternate; /* Slower, smoother, continuous movement */ filter: blur(80px); /* Soften the gradients significantly */ pointer-events: none; /* Ensure it doesn't interfere with mouse events */ } @keyframes moveGradientBackground { 0% { background-position: 0% 0%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 100%; } } /* Navbar */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; background-color: #032c44; /* Keep dark navbar for contrast */ position: fixed; width: 100%; top: 0; z-index: 100; box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Light shadow */ } .logo { display: flex; align-items: center; } .logo img { height: 40px; width: 40px; margin-right: 10px; } .logo span { font-size: 1.6rem; font-weight: bold; color: #47a6ea; /* Lighter blue */ font-family: 'Orbitron', sans-serif; } .nav-links { list-style: none; display: flex; gap: 30px; align-items: center; margin: 0; padding: 0; } .nav-links a { text-decoration: none; color: #57bef2; /* Darker text */ font-weight: 600; font-size: 1rem; transition: color 0.3s ease; position: relative; } .nav-links li { display: flex; /* Make each list item a flex container */ align-items: center; /* Vertically center content within each li */ } .nav-links a::after { content: ''; position: absolute; width: 0%; height: 2px; bottom: -4px; left: 0; background-color: #0096ff; /* Lighter blue */ transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } .nav-links a:hover { color: #0096ff; /* Lighter blue */ } /* Hamburger menu icon styles */ .hamburger { display: none; /* Hidden by default on large screens */ flex-direction: column; cursor: pointer; gap: 5px; z-index: 101; /* Ensure it's above the navbar */ position: relative; /* Added for correct positioning of spans */ } .hamburger span { width: 25px; height: 3px; background: #00bfff; border-radius: 2px; transition: 0.3s; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); /* Adjusted translate values */ } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); /* Adjusted translate values */ } /* Language selection */ .language-select { position: relative; z-index: 100; font-family: Arial, sans-serif; } .language-select button { background-color: #bbd8f2; /* Lighter blue */ border: 1px solid #99c2e0; /* Lighter border */ padding: 6px 8px; font-size: 14px; cursor: pointer; color: #58bae8; /* Changed to match nav links */ border-radius: 5px; display: flex; align-items: center; gap: 6px; min-width: auto; justify-content: center; } .lang-dropdown { display: none; position: absolute; right: 0; top: 100%; background-color: #bbd8f2; /* Lighter blue */ border: 1px solid #99c2e0; /* Lighter border */ margin-top: 5px; list-style: none; padding: 0; color: #57bef2; width: 170px; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Lighter shadow */ } .lang-dropdown li { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; color: #57bef2; gap: 10px; } .lang-dropdown li:hover { background-color: #87cefa; /* Lighter blue on hover */ } .lang-dropdown img { margin-right: 8px; width: 20px; height: 14px; object-fit: cover; } /* Hide Google Translate banner and icon */ .goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon { display: none !important; } /* --- Specific Styles for About Us Section (STANDALONE) --- */ .about-us-section { padding: 40px 20px; /* Padding inside the section */ margin-top: 100px; /* Space from navbar */ max-width: 960px; /* To control width of content */ margin-left: auto; margin-right: auto; /* Center the section itself */ text-align: center; /* ALIGN ENTIRE SECTION CONTENT TO CENTER */ position: relative; /* Needed for absolute positioning of title pseudo-elements */ color: #333333; /* Default text color for this section on white background */ } .about-us-section h1 { text-align: center; /* CENTER THE TITLE */ color: #007bff; /* A prominent blue for the title */ font-size: 2.2em; /* Larger font size for prominence */ margin-bottom: 20px; position: relative; overflow: hidden; /* Important to clip the animation */ animation: fadeInSlideInTitle 1.5s ease-out forwards; /* Apply combined animation */ } /* Animation for the title */ @keyframes fadeInSlideInTitle { 0% { transform: translateY(50px); /* Start from slightly below */ opacity: 0; color: #6495ED; /* Cornflower Blue start */ } 50% { opacity: 0.8; color: #4169E1; /* Royal Blue mid */ } 100% { transform: translateY(0); opacity: 1; color: #007bff; /* Primary Blue end */ } } /* Adjust the line under the title to be centered */ .about-us-section h1::after { content: ""; position: absolute; left: 50%; /* Center the line */ transform: translateX(-50%) scaleX(0); /* Center and start with no width */ bottom: -10px; /* Position below the text */ width: 60px; /* Length of the line */ height: 3px; background-color: #007bff; /* A nice blue for the line */ animation: drawLine 2s ease-out forwards; /* Animate the line drawing */ animation-delay: 1s; /* Start drawing after title appears */ transform-origin: center; /* Grow from center */ } @keyframes drawLine { to { transform: translateX(-50%) scaleX(1); /* Expand to full width while staying centered */ } } /* Styling for the container that holds the individual paragraph lines */ /* (This applies to the parent container for the lines, if you use JS to split lines) */ #about-us-paragraph-container { margin-top: 20px; /* Space between title and paragraph */ font-size: 1.1em; line-height: 1.8; color: #555555; /* Slightly darker grey for body text on white background */ text-align: justify; /* Keep text justified within its container */ margin-left: auto; /* Center the paragraph block itself */ margin-right: auto; /* Center the paragraph block itself */ max-width: 900px; /* Optional: adjust max-width if you want the justified text to have a specific width */ /* Ensure no animations are directly on this container, as lines will animate individually */ opacity: 1; /* Make sure the container is visible */ transform: none; /* No initial transform */ } /* Style for the whole paragraph block (if not split into lines by JS) */ .about-us-section p { opacity: 0; /* Start invisible */ transform: translateY(20px); /* Start slightly below */ animation: fadeInSlideUp 1.5s ease-out forwards; /* Apply animation */ animation-delay: 2s; /* Start after title and line animation */ } @keyframes fadeInSlideUp { to { opacity: 1; transform: translateY(0); } } strong { color: #0056b3; /* Darker blue for emphasized text within the paragraph, stands out on white */ font-weight: bold; } /* --- NEW: GRID LAYOUT FOR VISION & MISSION ONLY --- */ .vision-mission-grid-wrapper { display: grid; /* Two columns for larger screens: Vision on left, Mission on right */ grid-template-columns: 1fr 1fr; /* Equal width columns */ gap: 30px; /* Space between grid items */ max-width: 1200px; /* Max width for the entire grid content */ margin: 60px auto; /* Space from About Us, center the grid wrapper */ padding: 0 20px; /* Padding for the wrapper */ } /* Base styles for sections within the grid */ .vision-section, .mission-section { padding: 40px; /* Generous padding inside each section */ border-radius: 15px; /* Slightly rounded corners for a modern look */ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Soft, prominent shadow */ background-color: #ffffff; /* White background for contrast */ text-align: center; /* Center content within each section */ position: relative; /* For pseudo-elements or animations */ color: #333333; /* Default text color */ overflow: hidden; /* Important for containing animations like pseudo-elements */ display: flex; /* Use flex to align content */ flex-direction: column; justify-content: center; /* Center content vertically */ align-items: center; /* Center content horizontally */ /* Animation initial state */ opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */ } /* Animation final state (when 'visible' class is added by JS) */ .vision-section.visible, .mission-section.visible { opacity: 1; transform: translateY(0); } /* Titles for Vision and Mission */ .vision-section h1, .mission-section h1 { color: #007bff; /* Prominent blue for all titles */ font-size: 2.8em; /* Consistent title size */ margin-bottom: 20px; position: relative; overflow: hidden; } /* Line under Vision and Mission titles */ .vision-section h1::after, .mission-section h1::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -10px; width: 60px; height: 3px; background-color: #007bff; } /* Styling for Vision and Mission Paragraphs */ .vision-section p, .mission-section p { font-size: 1.1em; /* Slightly larger for better readability */ line-height: 1.7; color: #666666; /* Lighter grey text */ text-align: center; /* Center align text in these sections */ margin: 0 auto; /* Center the paragraph block */ max-width: 500px; /* Limit width for better readability in these sections */ } /* Contact Us Section */ #contact-us { background-color: white; /* Changed to pure white */ color: #000000; /* Darker text */ padding: 60px 20px; font-family: Arial, sans-serif; } #contact-us h2 { font-size: 36px; text-align: center; margin-bottom: 10px; /* Reduced margin */ font-weight: 700; } .contact-info { margin-top: 0; /* Reset margin */ padding-top: 0; /* Reset padding */ text-align: center; color: #333333; /* Darker text */ margin-bottom: 30px; /* Space before contact boxes */ } .contact-info p { margin: 5px 0; font-size: 16px; } .contact-info a { color: #007ac1; /* Slightly darker blue link */ text-decoration: none; } .contact-info a:hover { text-decoration: underline; } .social-icons { margin-top: 10px; } .social-icons a { display: inline-block; margin: 0 8px; width: 36px; height: 36px; background-color: #cccccc; /* Lighter background */ border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .social-icons a:hover { transform: scale(1.15); background-color: #72b1dd; box-shadow: 0 0 15px rgba(0, 150, 255, 0.3); /* Subtle blue glow */ } .social-icons img { width: 20px; height: 20px; filter: brightness(0) invert(0.2); /* Slightly inverted to work with light background */ } .contact-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1200px; margin: auto; } .contact-box { flex: 1; min-width: 250px; max-width: 280px; background-color: white; /* Changed to pure white */ padding: 25px; border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Light shadow */ transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; border: 1px solid transparent; } .contact-box:hover { transform: translateY(-8px); background-color: #f5f5f5; /* Slight hover tint */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Clearer shadow on hover */ border-color: #0096ff; /* Lighter blue border */ } .contact-box h3 { font-size: 20px; margin-bottom: 15px; color: #333333; /* Darker text */ } .contact-box p { font-size: 14px; line-height: 1.7; margin-bottom: 15px; color: #666666; /* Lighter grey text */ } .contact-box iframe { width: 100%; height: 250px; border: 0; border-radius: 8px; } .map-container { flex: 1; min-height: 300px; border-radius: 10px; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adjusted shadow */ } .map-container:hover { transform: scale(1.02); box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); /* Adjusted shadow */ z-index: 10; } .map-container iframe { width: 100%; height: 250px; border: 2px solid #0096ff; /* Lighter blue border */ border-radius: 10px; } /* Responsive Menu Behavior */ @media (max-width: 992px) { /* Adjust breakpoint for grid layout change */ .vision-mission-grid-wrapper { grid-template-columns: 1fr; /* Stack vision and mission vertically on smaller screens */ padding: 0 15px; /* Adjust padding */ gap: 20px; /* Reduce gap */ } .vision-section, .mission-section { padding: 30px; /* Slightly less padding on mobile */ } .vision-section h1, .mission-section h1 { font-size: 2em; /* Smaller titles on mobile */ } .vision-section p, .mission-section p { font-size: 1em; /* Slightly smaller text for mobile */ max-width: 100%; /* Allow full width on mobile */ } } @media (max-width: 768px) { .navbar { padding: 15px 20px; /* Adjust padding for smaller screens */ } .hamburger { display: flex; /* Show hamburger */ } .nav-links { position: absolute; top: 70px; /* Or adjust based on your navbar height */ right: 0; background-color: #032c44; flex-direction: column; width: 100%; display: none; /* This is key: hidden by default on mobile */ padding: 20px 0; text-align: center; z-index: 99; /* Lower than hamburger, higher than page content */ box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .nav-links.show { display: flex; /* This is key: shown when 'show' class is added */ } /* Move the language selection inside the nav-links for mobile */ .navbar .language-select { /* Target specifically within navbar for mobile */ position: static; /* Remove fixed positioning */ width: auto; margin: 10px auto 0; /* Center it if desired, or set text-align: center on parent */ border: none; box-shadow: none; background-color: transparent; } .navbar .language-select button { background-color: #bbd8f2; border: 1px solid #99c2e0; margin: 0 auto; /* Center button */ } .navbar .lang-dropdown { position: static; /* Remove absolute positioning */ width: auto; margin: 5px auto 0; /* Center dropdown */ background-color: #bbd8f2; border: 1px solid #99c2e0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* Adjustments for About Us section on mobile */ .about-us-section { padding: 20px 15px; /* Adjust padding for smaller screens */ } .about-us-section h1 { font-size: 2.2em; /* Smaller title on mobile */ } /* Responsive Fixes for Contact Us */ #contact-us h2 { font-size: 28px; } .contact-box { max-width: 100%; } } @media (min-width: 769px) { .hamburger { display: none; } .nav-links { display: flex; /* Explicitly set to flex for desktop */ flex-direction: row; /* Ensure they are in a row */ position: static; /* Override absolute positioning from mobile */ width: auto; /* Override 100% width from mobile */ padding: 0; /* Override padding from mobile */ background-color: transparent; /* Override background from mobile */ box-shadow: none; /* Override box-shadow from mobile */ } /* Ensure the language-select is positioned correctly for desktop */ .language-select { position: relative; /* Crucial for desktop, not fixed */ margin-left: 30px; /* Adjust this value if you want more/less space from "Contact Us" */ } /* Resetting mobile-specific styles for the language-select */ .navbar .language-select, .navbar .language-select button, .navbar .lang-dropdown { position: initial; /* Reset fixed/absolute to default for these */ width: auto; margin: 0; border: initial; box-shadow: initial; background-color: initial; } /* Re-apply desktop specific styles for the button and dropdown */ .language-select button { background-color: #bbd8f2; border: 1px solid #99c2e0; padding: 6px 8px; font-size: 14px; cursor: pointer; color: #58bae8; border-radius: 5px; display: flex; align-items: center; gap: 6px; min-width: auto; justify-content: center; } .lang-dropdown { display: none; position: absolute; right: 0; top: 100%; background-color: #bbd8f2; border: 1px solid #99c2e0; margin-top: 5px; list-style: none; padding: 0; color: #57bef2; width: 170px; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } } .accreditations-section { /* REMOVED: background-color: rgba(255, 255, 255, 0.05); */ padding: 60px 20px; /* REMOVED: border-radius: 20px; */ margin: 60px auto; max-width: 1100px; /* REMOVED: box-shadow: 0 0 20px rgba(0, 150, 255, 0.2); */ font-family: Arial, sans-serif; color: black; /* Darker text */ text-align: center; /* REMOVED: border: 1px solid rgba(0, 150, 255, 0.15); */ margin-top: 0; /* Keeping this as it might align with surrounding sections */ padding-top: 40px; /* Keeping this for internal top spacing */ } .credentials-block { margin-bottom: 60px; /* No changes needed here, it doesn't have box styling */ } .credentials-title { color: #04105c; /* Lighter blue */ margin-bottom: 10px; } .credentials-text { font-size: 1rem; margin-bottom: 25px; color: rgb(2, 33, 78); /* Darker text */ } .credentials-logos { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; align-items: center; } .credentials-logos img { height: 100px; width: auto; border-radius: 10px; background-color: #f0f2f5; /* Lighter background for individual logo */ padding: 10px; box-shadow: 0 0 8px rgba(0, 150, 255, 0.15); /* Lighter shadow for individual logo */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .credentials-logos img:hover { transform: scale(1.05); box-shadow: 0 0 15px #0096ff; /* Lighter glow on hover for individual logo */ } /* Make Saudi credentials logos like UK logos */ .credentials-details { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; align-items: center; margin-top: 25px; } .credentials-details img { height: 100px; width: auto; border-radius: 10px; background-color: #f0f2f5; /* Lighter background for individual logo */ padding: 10px; box-shadow: 0 0 8px rgba(0, 150, 255, 0.15); /* Lighter shadow for individual logo */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .credentials-details img:hover { transform: scale(1.05); box-shadow: 0 0 15px #0096ff; /* Lighter glow on hover for individual logo */ } /* Assuming .credential-box is an unused or alternative structure, no changes are strictly needed if HTML does not use it as the primary container for logos. */ .credential-box { width: auto; height: 100px; background-color: #f0f2f5; /* Lighter background */ padding: 10px; border-radius: 10px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 15px rgba(0, 150, 255, 0.15); /* Lighter shadow */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .credential-box img { max-width: 100%; max-height: 100%; object-fit: contain; } .credential-box:hover { transform: scale(1.05); box-shadow: 0 0 15px #0096ff; /* Lighter glow */ } /* General Footer Styles */ .site-footer { background: #0f355a; color: #fff; width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box; overflow: hidden; /* Prevent horizontal scrollbar if 100vw is problematic */ } .footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columns: Addresses, Accreditations, Contact */ gap: 20px; padding: 30px 10px; box-sizing: border-box; } /* Offices Section */ .footer-addresses-wrapper { grid-column: 1 / 3; /* Spans the first two columns in the main grid */ display: grid; grid-template-columns: 1fr 1fr; /* Two columns for the addresses themselves */ gap: 10px; } .footer-title { grid-column: 1 / 3; /* Spans across both address columns within its grid */ text-align: center; font-size: 1.5em; font-weight: bold; color: #fff; margin-bottom: 20px; letter-spacing: 1px; } .footer-column { display: flex; /* Keep as flex to stack address blocks */ flex-direction: column; justify-content: flex-start; /* Removed align-items: flex-start here to allow address block to control its content */ } .footer-column address { margin: 0; padding: 0; font-style: normal; display: block; /* Make address a block element for consistent flow */ text-align: left; /* **Crucial:** Ensures all text content inside address aligns left */ margin-bottom: 16px; /* Space between addresses */ box-sizing: border-box; } .footer-column address strong { display: block; /* Ensure strong is a block element to take its own line */ text-align: left; /* Explicitly align country name to the left */ margin-bottom: 5px; /* Space below the country name */ box-sizing: border-box; white-space: normal; /* Allow text to wrap naturally */ } .footer-column address p { margin: 0; /* Remove default paragraph margins */ padding: 0; line-height: 1.4; /* Improve readability of address lines */ text-align: left; /* Explicitly ensure paragraph text is left-aligned */ } .footer-column address p:not(:last-child) { margin-bottom: 5px; /* Space between address lines, but not after the last one */ } /* Link Styles */ address a { color: #ecf0f1; text-decoration: none; transition: color 0.3s ease, text-decoration 0.3s ease; } address a:hover { color: #3498db; text-decoration: underline; } /* Accreditation Section */ .footer-accreditations { grid-column: 3 / 4; /* Positions Accreditations in the third column */ display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 0; } .footer-accreditations h3, .footer-contact h3 { text-align: center; font-size: 1.5em; font-weight: bold; color: #fff; margin-bottom: 20px; letter-spacing: 1px; width: 100%; } .acc-saudi, .acc-uk { display: flex; flex-direction: column; align-items: center; min-width: 180px; width: 100%; } .accreditation-images { display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; } .accreditation-subtitle { margin-bottom: 10px; text-align: center; width: 100%; } .accreditation-images img { max-width: 80px; height: auto; display: block; } /* Contact Section */ .footer-contact { grid-column: 4 / 5; /* This will be out of bounds if grid-template-columns is 3. Adjust if needed. */ display: flex; flex-direction: column; align-items: center; margin-top: 0; } .social-links { display: flex; gap: 15px; margin-bottom: 15px; justify-content: center; width: 100%; } .social-links .social-icon img { width: 30px; height: 30px; filter: brightness(180%); opacity: 0.9; transition: all 0.3s ease; } .social-links .social-icon img:hover { filter: brightness(100%); opacity: 1; } .contact-us-list { list-style: none; padding: 0; margin: 0; width: 100%; text-align: center; } .contact-us-list li { margin-bottom: 5px; } .contact-us-list li a { color: #ccc; font-size: 14px; text-decoration: none; transition: color 0.3s ease; } .contact-us-list li a:hover { color: #1396ed; text-decoration: underline; } /* Footer Bottom */ .footer-bottom { background-color: #05345d; text-align: center; padding: 20px 20px; font-size: 13px; color: #aaa; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 0; } /* Responsive adjustments */ @media (max-width: 1024px) { .footer-container { grid-template-columns: repeat(2, 1fr); /* Two columns for smaller screens */ gap: 20px; } .footer-addresses-wrapper { grid-column: 1 / 3; /* Spans both columns */ grid-template-columns: 1fr 1fr; } .footer-accreditations { grid-column: 1 / 2; /* Move to first column */ } .footer-contact { grid-column: 2 / 3; /* Move to second column */ } /* Ensure address content is left-aligned in two-column layout */ .footer-column address { text-align: left; /* Force left alignment for all text within address */ } .footer-column address strong { text-align: left; } .footer-column address p { text-align: left; } } @media (max-width: 768px) { .footer-container { grid-template-columns: 1fr; /* Single column for very small screens */ gap: 30px; } .footer-addresses-wrapper { grid-column: 1 / 2; grid-template-columns: 1fr; /* Addresses stack */ align-items: center; /* Center the wrapper content */ justify-content: center; } .footer-addresses-wrapper .footer-column { align-items: center; /* Center the column itself */ text-align: center; /* Center text within the column */ } /* Explicitly center address block and its strong tag when stacked */ .footer-column address { text-align: center; /* Ensure all text within address is centered */ margin-bottom: 20px; } .footer-column address strong { text-align: center; } .footer-column address p { text-align: center; } .footer-accreditations { grid-column: 1 / 2; } .footer-contact { grid-column: 1 / 2; } .accreditation-images { flex-direction: row; flex-wrap: wrap; justify-content: center; } } /* Specific styles for elements that need to be centered on small screens */ @media (max-width: 768px) { .footer-title, .footer-accreditations h3, .footer-contact h3 { text-align: center; } .social-links, .contact-us-list { justify-content: center; text-align: center; } }