/* ----------------------------------------------------------------------- */ /* 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 */ } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ------------------------- idtravel-base.html ---------------------------*/ /* Navbar */ .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; } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------- Idtravel-home.html page -------------------------*/ /* custom-style-01. */ /* For Desktops */ @media (min-width: 1200px) { .custom-style-01 .container { width: 70%; margin: 50px auto; padding: 20px; background-color: #f2f2f3; border-top-left-radius: 10px; border-top-right-radius: 10px; } } /* For Laptops */ @media (max-width: 1199px) { .custom-style-01 .container { width: 70%; margin: 50px auto; padding: 20px; background-color: #f2f2f3; border-top-left-radius: 10px; border-top-right-radius: 10px; } } /* For Tablets */ @media (max-width: 991px) { .custom-style-01 .container { width: 80%; margin: 30px auto; padding: 15px; background-color: #f2f2f3; border-top-left-radius: 8px; border-top-right-radius: 8px; } } /* For Mobile Phones */ @media (max-width: 767px) { .custom-style-01 .container { width: 90%; margin: 20px auto; padding: 10px; background-color: #f2f2f3; border-top-left-radius: 5px; border-top-right-radius: 5px; } } .custom-style-01 .container h4 { margin-bottom: 30px; } .custom-style-01 .container p { margin-bottom: 20px; } .custom-style-01 .container ul { margin-bottom: 20px; } .custom-style-01 .container .btn { margin-top: 40px; } .custom-style-01 .container .terms-list { padding-left: 20px; } .custom-style-01 .container h4, .custom-style-01 .container p, .custom-style-01 .container button { display: block; } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* --------------- Idtravel-company-info.html page ------------------------*/ /* custom-style-02 */ /* For Desktops */ @media (min-width: 1200px) { .custom-style-02 .container { width: 70%; margin: 50px auto; padding: 20px; background-color: #f2f2f3; border-top-left-radius: 10px; border-top-right-radius: 10px; } } /* For Laptops */ @media (max-width: 1199px) { .custom-style-02 .container { width: 70%; margin: 50px auto; padding: 20px; background-color: #f2f2f3; border-top-left-radius: 10px; border-top-right-radius: 10px; } } /* For Tablets */ @media (max-width: 991px) { .custom-style-02 .container { width: 80%; margin: 30px auto; padding: 15px; background-color: #f2f2f3; border-top-left-radius: 8px; border-top-right-radius: 8px; } } /* For Mobile Phones */ @media (max-width: 767px) { .custom-style-02 .container { width: 90%; margin: 20px auto; padding: 10px; background-color: #f2f2f3; border-top-left-radius: 5px; border-top-right-radius: 5px; } } .custom-style-02 .container label { display: block; } .custom-style-02 .container input[type="text"], .custom-style-02 .container select { padding: 8px; margin-top: 5px; margin-bottom: 10px; box-sizing: border-box; } .custom-style-02 .container .form-check { display: block; } /* Responsive Styling for Select2 within custom-style-02 added on: 17-01-2025*/ /* For Desktops */ @media (min-width: 1200px) { .custom-style-02 .select2-container { width: 100% !important; /* Full width of the parent container */ } } /* For Laptops */ @media (max-width: 1199px) { .custom-style-02 .select2-container { width: 100% !important; } } /* For Tablets */ @media (max-width: 991px) { .custom-style-02 .select2-container { width: 100% !important; } } /* For Mobile Phones */ @media (max-width: 767px) { .custom-style-02 .select2-container { width: 100% !important; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* --------------------- idtravel-emptyleg.html page ----------------------*/ /*Idtravel Emptylegs */ /* Common Style */ .custom-style-05 .table-smooth th { background-color: #f8f9fa; color: #212529; border-bottom: 2px solid #dee2e6; } .custom-style-05 .table-smooth td { background-color: #fff; border-bottom: 1px solid #dee2e6; } .custom-style-05 tbody tr:last-child td { border-bottom: none; } .custom-style-05 { width: 100%; margin: 50px auto; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); overflow: hidden; } .custom-style-05 .table-smooth th, .custom-style-05 .table-smooth td { text-align: center; padding: 15px 5px; } /* Styles for Desktop */ @media only screen and (min-width: 1350px) { .custom-style-05 { width: 90%; } .custom-style-05 .table-smooth th, .custom-style-05 .table-smooth td { font-size: 15px; } } /* Styles for Laptop */ @media only screen and (min-width: 992px) and (max-width: 1349px) { .custom-style-05 .table-smooth th, .custom-style-05 .table-smooth td { font-size: 14px; } } /* Styles for Tablet */ @media only screen and (min-width: 768px) and (max-width: 991px) { .custom-style-05 .table-smooth th, .custom-style-05 .table-smooth td { font-size: 14px; } } /* Styles for Mobile Phone */ @media only screen and (max-width: 767px) { .custom-style-05 .table-smooth th, .custom-style-05 .table-smooth td { font-size: 13px; } } /* ----------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- */