/* ----------------------------------------------------------------------- */ /* Normalize CSS */ @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'); /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* --------------------- Reset default styles -----------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* Body styles */ /* Basic styles */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* Viewport meta tag */ /* Add this to your HTML */ /* : */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* Fluid typography */ /* html { font-size: 1vw; } */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* Accessibility improvements : Ensure proper color contrast ratios, focus states, etc.*/ body { font-family: 'Arial', sans-serif; color: #333; background-color: #fff; line-height: 1; display: flex; flex-direction: column; min-height: 100vh; } a { color: #007bff; /* Link color */ } /* Ensure sufficient color contrast between text and background */ /* Example: WCAG AA compliant color contrast */ /* Example: Focus states for better accessibility */ :focus { outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.3s ease-in-out; } /* Update the outline color on focus */ :focus-visible { outline-color: #007bff; } /* Additional accessibility improvements as needed */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* Optimized images */ /* Use responsive images in your HTML (srcset and sizes attributes) */ /* SHOULD BE INCLUDED IN HTML BODY WHERE IMAGE IS LOADED */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* CSS Grid or Flexbox */ /* Use CSS Grid or Flexbox for layout */ /* Example: Using CSS Grid for layout */ /* .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } */ /* Example: Using Flexbox for layout */ /* .container { display: flex; flex-wrap: wrap; justify-content: space-between; } */ /* Additional layout styles as needed */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ------------------------ Responsive styles -----------------------------*/ /* Styles for small screens */ @media only screen and (max-width: 768px) { } /* Styles for medium screens */ @media only screen and (min-width: 769px) and (max-width: 1024px) { } /* Styles for large screens */ @media only screen and (min-width: 1025px) { } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* Compatibility for different browsers */ /* Note: You may need to add specific styles for different browsers */ /* For example, adding -webkit- prefix for Safari/Chrome */ /* Safari and Chrome */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Keyframes for fade in animation */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { -webkit-animation: fadeIn 1s ease-in-out; animation: fadeIn 1s ease-in-out; } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ------------ Additional styles for specific devices --------------------*/ /* Note: Use device-specific media queries to target specific devices */ /* iPhone 5 */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { /* Styles for iPhone 5 */ } /* iPad */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* Styles for iPad */ } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ------------------------- Partners-base.html ---------------------------*/ /* Navbar */ /* custom-style-04 */ /* custom-style-03 */ .custom-style-04 .navbar-custom { background-color: #f2f2f3 !important; } .custom-style-04 .navbar-container { width: 70%; margin: 0 auto; } .custom-style-04 .brand-custom { margin-right: auto; } .custom-style-04 .links-custom { margin-left: auto; } /* Main Content */ .container-main { flex: 1 0 auto; } /* Footer Content */ .footer { flex-shrink: 0; background-color: #343a40; color: white; text-align: center; padding: 10px 0; width: 100%; } /* custom-style-03 Hypejets Logo*/ /* For Desktops */ @media (min-width: 1200px) { .custom-style-03 .container { width: 70%; margin: auto; padding: 20px; background-color: #f2f2f3; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; } } /* For Laptops */ @media (max-width: 1199px) { .custom-style-03 .container { width: 70%; margin: auto; padding: 20px; background-color: #f2f2f3; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; } } /* For Tablets */ @media (max-width: 991px) { .custom-style-03 .container { width: 80%; margin: auto; padding: 15px; background-color: #f2f2f3; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; } } /* For Mobile Phones */ @media (max-width: 767px) { .custom-style-03 .container { width: 90%; margin: auto; padding: 10px; background-color: #f2f2f3; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } } /* Centering the content */ .custom-style-03 .centered { text-align: center; } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------- Partners-home.html page -------------------------*/ .custom-style-01{ background-color: #f2f2f3; margin-top: 50px; margin-bottom: 50px; } /* Hero section */ .custom-style-01 .hero { background-color: #f8f9fa; padding: 100px 0; } .custom-style-01 .hero h3 { margin-bottom: 20px; } .custom-style-01 .hero p { margin-bottom: 30px; } .custom-style-01 .hero a { margin-bottom: 20px; } /* Features section */ .custom-style-01 .features { padding: 80px 0; background-color: #fff; } .custom-style-01 .feature { text-align: center; margin-bottom: 30px; } .custom-style-01 .feature i { color: #007bff; margin-bottom: 20px; } .custom-style-01 .feature h4 { margin-bottom: 10px; } /* Testimonials section */ .custom-style-01 .testimonials { padding: 80px 0; background-color: #f8f9fa; } .custom-style-01 .testimonial { padding: 20px; background-color: #fff; border-radius: 10px; margin-bottom: 30px; } .custom-style-01 .testimonial p { font-style: italic; margin-bottom: 20px; } .custom-style-01 .testimonial cite { font-weight: bold; } /* Call to action section */ .custom-style-01 .cta { padding: 80px 0; background-color: #fff; text-align: center; } .custom-style-01 .cta h4 { margin-bottom: 20px; } .custom-style-01 .cta p { margin-bottom: 30px; } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- */