/* =================================================================== IAC — Modern Professional Theme Brand colors sourced directly from logo1.png: Navy #1D2B5C (deepened from logo navy #313D88 for stronger contrast) Lime #CEDB2A (logo globe green — used as a sparing accent only) Ink #1A1917 (logo wordmark black) Load AFTER instant-css.css: =================================================================== */ :root { --iac-navy: #1D2B5C; --iac-navy-dark: #131d40; --iac-lime: #CEDB2A; --iac-lime-dark: #a9b521; --iac-ink: #1A1917; --iac-gray: #5b6270; --iac-bg-soft: #f6f8fb; --iac-border: #e7eaf0; --iac-radius: 10px; --iac-shadow: 0 6px 24px rgba(29, 43, 92, 0.08); --iac-shadow-hover: 0 16px 36px rgba(29, 43, 92, 0.14); } /* ---------- Type ---------- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap'); /* Note: Font Awesome 6 is loaded via a tag in Default.aspx's , not via @import here. @import for third-party stylesheets inside a CSS file is unreliable across browsers/CDNs — a direct tag is the dependable way to load it. */ * { box-sizing: border-box; } html { overflow-x: hidden; } body { font-family: 'Inter', Arial, Helvetica, sans-serif; color: var(--iac-ink); overflow-x: hidden; } img { max-width: 100%; height: auto; } #content h1, #content h2, #content h3, .services-showcase h2, .faq-section h2, .contact-section h2 { font-family: 'Poppins', Arial, sans-serif; font-weight: 700; color: var(--iac-navy); letter-spacing: -0.01em; } /* =================================================================== Header — full responsive redesign Structure (unchanged from markup): .topbar (thin accent bar) header > .navbar-default .container #1: .navbar-header (logo) + h2 (title + payment btns) .container #2: .navbar-collapse > ul.nav (menu) =================================================================== */ /* Thin top accent bar */ .topbar { background: var(--iac-navy); height: 6px; padding: 0; } .topbar .container-fluid, .topbar .row, .topbar .col-md-2 { height: 100%; padding: 0; margin: 0; } header .navbar-default { background: #ffffff; border: none; border-bottom: 1px solid var(--iac-border); box-shadow: 0 2px 12px rgba(29, 43, 92, 0.06); margin-bottom: 0; padding: 14px 0 0; } /* First container row: logo + title + payment buttons Markup reality: the

contains the company name TEXT followed by two payment button links, all as one inline unit. To get logo-left / name-centered / icons-right without restructuring the markup, the

takes the remaining flex space next to the logo; its text content centers via text-align, and margin-left:auto on the FIRST payment link pushes both icons (it + everything after) to the right edge of the h2, while the centered text sits between. */ header .navbar-default > .container:first-child { display: flex; align-items: center; gap: 20px; padding-bottom: 14px; } header .navbar-header { display: flex; align-items: center; gap: 14px; margin: 0 !important; float: none !important; flex-shrink: 0; } header .navbar-header.marginbot40 { margin-bottom: 0 !important; } header .navbar-brand { padding: 0 !important; height: auto !important; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } header .navbar-brand img { height: 56px; width: auto; max-width: none; image-rendering: -webkit-optimize-contrast; } header h2 { color: var(--iac-navy); font-family: 'Poppins', Arial, sans-serif; font-weight: 700; font-size: 18px; margin: 0; flex: 1 1 auto; min-width: 0; line-height: 1.3; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 244px 0 0; box-sizing: border-box; } header h2 a { display: inline-flex; align-items: center; flex-shrink: 0; } /* Both payment links are pulled out of the centered flex flow and pinned to the h2's own right edge as a group, so the company name text truly centers in the full available width rather than only in the space remaining before the icons. */ header h2 a:first-of-type { position: absolute; right: 122px; top: 50%; transform: translateY(-50%); } header h2 a:nth-of-type(2) { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } header h2 img { height: 32px; width: auto; max-width: 110px; object-fit: contain; vertical-align: middle; } /* Mobile nav toggle button */ header .navbar-toggle { border: 1px solid var(--iac-border); border-radius: 6px; margin: 0; } header .navbar-toggle .icon-bar { background-color: var(--iac-navy); } header .navbar-toggle:hover { background-color: var(--iac-bg-soft); } /* Second container row: the nav menu itself */ header .navbar-default > .container + .container { border-top: 1px solid var(--iac-border); } .navbar-collapse { padding: 0; } .navbar-nav { display: flex; flex-wrap: wrap; margin: 0; } .navbar-nav > li { float: none; } .navbar-nav > li > a { color: var(--iac-ink); font-weight: 500; font-size: 14px; padding: 14px 16px; transition: color 0.2s ease, background 0.2s ease; white-space: nowrap; } .navbar-nav > li > a:hover, .navbar-nav > li > a:focus, .navbar-nav > li.active > a { color: var(--iac-navy); background: var(--iac-bg-soft); } .dropdown-menu { border-radius: 8px; border: 1px solid var(--iac-border); box-shadow: var(--iac-shadow-hover); padding: 6px; margin-top: 2px; } .dropdown-menu > li > a { border-radius: 6px; font-size: 14px; padding: 9px 14px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--iac-bg-soft); color: var(--iac-navy); } /* ---------- Responsive breakpoints ---------- */ /* There are too many top-level nav items (12+) to fit on one line below ~1200px without wrapping awkwardly, so the mobile hamburger collapse is pulled forward to activate earlier than Bootstrap's default 768px breakpoint. Bootstrap's own JS (already loaded by the page) handles the toggle/collapse interaction — no extra script needed here, just CSS to show/hide at the right width. */ @media (max-width: 1199px) { header .navbar-header .navbar-toggle { display: block !important; } header .navbar-collapse.collapse { display: none !important; height: 0 !important; overflow: hidden !important; border-top: 1px solid var(--iac-border); } header .navbar-collapse.collapse.in { display: block !important; height: auto !important; overflow: visible !important; } .navbar-nav { display: block !important; flex-wrap: nowrap; } .navbar-nav > li > a { padding: 12px 18px; font-size: 14px; border-bottom: 1px solid var(--iac-border); } .navbar-nav > li:last-child > a { border-bottom: none; } .dropdown-menu { box-shadow: none; border: none; border-left: 2px solid var(--iac-lime); margin: 0 0 0 18px; border-radius: 0; position: static !important; width: 100%; display: none; } .dropdown.open .dropdown-menu { display: block; } } @media (max-width: 991px) { header .navbar-default > .container:first-child { padding-bottom: 12px; } header .navbar-brand img { height: 46px; } header h2 { font-size: 15px; } header h2 img { height: 26px; } } @media (max-width: 767px) { header .navbar-default { padding-top: 10px; } header .navbar-default > .container:first-child { flex-wrap: nowrap; gap: 10px; } header .navbar-header { flex: 1 1 auto; min-width: 0; } header .navbar-brand img { height: 38px; } /* Below 767px, the full title text would overflow next to the logo, so it's visually hidden while staying in the DOM for screen readers and SEO. The payment icon links remain visible and normally sized. */ header h2 { font-size: 0; line-height: 0; gap: 10px; flex: 0 0 auto; white-space: nowrap; overflow: visible; padding: 0; position: static; justify-content: flex-start; } header h2 > *:not(a) { display: none; } header h2 a { line-height: normal; } /* Undo the desktop absolute positioning so the two payment icons sit in normal inline flow next to each other on mobile, since there's no title text left to center around here. */ header h2 a:first-of-type, header h2 a:nth-of-type(2) { position: static; right: auto; top: auto; transform: none; } header h2 img { height: 24px; } .navbar-toggle { margin-top: 2px; } } @media (max-width: 480px) { header .navbar-brand img { height: 32px; } header h2 img { height: 20px; } } /* ---------- Hero / Banner ---------- */ #banner { position: relative; border-bottom: 4px solid var(--iac-lime); overflow: hidden; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(19, 29, 64, 0.82) 0%, rgba(29, 43, 92, 0.55) 55%, rgba(29, 43, 92, 0.15) 100%); display: flex; align-items: center; z-index: 5; pointer-events: none; } .hero-overlay .container { pointer-events: auto; } .hero-content { max-width: 620px; color: #fff; padding: 0 15px; } .hero-content .hero-eyebrow { display: inline-block; background: rgba(206, 219, 42, 0.2); border: 1px solid var(--iac-lime); color: var(--iac-lime); padding: 5px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; } .hero-content h1 { font-family: 'Poppins', Arial, sans-serif; font-weight: 800; font-size: 40px; line-height: 1.2; color: #fff; margin-bottom: 18px; } .hero-content p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); margin-bottom: 28px; max-width: 540px; } .hero-content .hero-btn-group { display: flex; gap: 14px; flex-wrap: wrap; } .btn-iac-ghost { display: inline-block; padding: 13px 30px; background: transparent; color: #fff !important; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 6px; text-decoration: none !important; font-weight: 600; font-size: 14px; transition: background 0.25s ease, border-color 0.25s ease; } .btn-iac-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; } @media (max-width: 991px) { .hero-content h1 { font-size: 32px; } } @media (max-width: 767px) { .hero-overlay { align-items: flex-end; padding-bottom: 30px; background: linear-gradient(180deg, rgba(19, 29, 64, 0.35) 0%, rgba(19, 29, 64, 0.92) 75%); } .hero-content h1 { font-size: 26px; } .hero-content p { font-size: 14px; } } @media (max-width: 480px) { .hero-content .hero-btn-group { flex-direction: column; } .hero-content .hero-btn-group a { text-align: center; } } /* ---------- About / intro content section ---------- */ #content { background: #ffffff; } #content .align-left h1 { position: relative; padding-bottom: 16px; margin-bottom: 22px; font-size: 32px; } #content .align-left h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--iac-lime); border-radius: 2px; } #content .align-left.aligncenter h1::after, #content h1.aligncenter::after { left: 50%; transform: translateX(-50%); } #content .align-left p { line-height: 1.75; color: var(--iac-gray); font-size: 15.5px; } /* Info blocks (Quality Policy / Aims / Objectives) NOTE: in the markup, .info-blocks IS the Bootstrap column (class="col-sm-4 info-blocks") — not a card nested inside a column. Using gap on the flex row instead of negative-margin/padding gutters, since gap creates real visible space between cards regardless of Bootstrap's own col-* padding or any conflicting site CSS. */ #content .row + .row { display: flex !important; flex-wrap: wrap !important; gap: 28px !important; margin-left: 0 !important; margin-right: 0 !important; } #content .row + .row > .info-blocks { flex: 1 1 0 !important; max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; float: none !important; box-sizing: border-box !important; } .info-blocks { background: #ffffff; border: 1px solid var(--iac-border); border-radius: var(--iac-radius); text-align: center; box-shadow: var(--iac-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex !important; flex-direction: column; align-items: center; } .info-blocks-in { padding: 0 30px 36px !important; width: 100% !important; box-sizing: border-box !important; } .info-blocks:hover { transform: translateY(-6px); box-shadow: var(--iac-shadow-hover); } .info-blocks .icon-info-blocks, .info-blocks i.icon-info-blocks { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 64px !important; width: 64px !important; height: 64px !important; flex: 0 0 64px; border-radius: 50% !important; background: var(--iac-navy) !important; color: #ffffff !important; font-size: 22px !important; margin: 36px auto 20px !important; padding: 0 !important; } .info-blocks .icon-info-blocks::before { display: inline-block; line-height: 1; vertical-align: middle; } @media (max-width: 991px) { #content .row + .row > .info-blocks { flex: 1 1 calc(50% - 14px) !important; min-width: calc(50% - 14px) !important; } } @media (max-width: 600px) { #content .row + .row { gap: 20px !important; } #content .row + .row > .info-blocks { flex: 1 1 100% !important; min-width: 100% !important; } } .info-blocks h3 { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; color: var(--iac-navy); font-size: 18px; margin-bottom: 10px; } .info-blocks p { color: var(--iac-gray); font-size: 14px; line-height: 1.65; margin: 0; } /* =================================================================== Services Showcase =================================================================== */ .services-showcase { padding: 70px 0 50px; background: var(--iac-bg-soft); } .section-heading { text-align: center; max-width: 680px; margin: 0 auto 44px; } .section-heading .eyebrow { display: inline-block; color: var(--iac-navy); background: rgba(206, 219, 42, 0.25); border: 1px solid var(--iac-lime-dark); padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; } .section-heading h2 { font-size: 30px; margin-bottom: 12px; } .section-heading p { color: var(--iac-gray); font-size: 15px; } .services-showcase .row { display: flex; flex-wrap: wrap; } .services-showcase .row > [class*="col-"] { display: flex; margin-bottom: 24px; } .service-card { display: flex; flex-direction: column; justify-content: center; background: #ffffff; border-radius: var(--iac-radius); padding: 30px 20px; text-align: center; text-decoration: none; color: var(--iac-ink); border: 1px solid var(--iac-border); box-shadow: var(--iac-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; height: 100%; width: 100%; } .service-card:hover, .service-card:focus { transform: translateY(-6px); box-shadow: var(--iac-shadow-hover); border-color: var(--iac-navy); text-decoration: none; color: var(--iac-navy); } .service-card .service-icon { display: flex; align-items: center; justify-content: center; line-height: 1; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: var(--iac-navy); color: #ffffff; font-size: 22px; margin: 0 auto 16px; transition: background 0.25s ease; } .service-card .service-icon i { display: block; } .service-card:hover .service-icon { background: var(--iac-lime-dark); } .service-card h4 { font-family: 'Poppins', Arial, sans-serif; font-size: 15.5px; font-weight: 600; margin: 0 0 8px; color: inherit; } .service-card p { font-size: 13px; color: var(--iac-gray); margin: 0; } .services-showcase .view-all-wrap { text-align: center; margin-top: 16px; } .btn-iac-primary { display: inline-block; padding: 13px 32px; background: var(--iac-navy); color: #fff !important; border-radius: 6px; text-decoration: none !important; font-weight: 600; font-size: 14px; transition: background 0.25s ease, transform 0.2s ease; } .btn-iac-primary:hover { background: var(--iac-navy-dark); transform: translateY(-2px); } /* =================================================================== FAQ Section =================================================================== */ .faq-section { padding: 70px 0; background: #ffffff; } .faq-list { max-width: 860px; margin: 0 auto; } .faq-item { border: 1px solid var(--iac-border); border-radius: var(--iac-radius); margin-bottom: 14px; overflow: hidden; background: #ffffff; } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: 15.5px; color: var(--iac-navy); background: #ffffff; user-select: none; } .faq-question .faq-toggle-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--iac-bg-soft); color: var(--iac-navy); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform 0.25s ease, background 0.25s ease; } .faq-item.active .faq-question .faq-toggle-icon { background: var(--iac-navy); color: #fff; transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer-inner { padding: 0 22px 20px; color: var(--iac-gray); font-size: 14.5px; line-height: 1.7; } .faq-item.active .faq-question { background: var(--iac-bg-soft); } /* =================================================================== Contact Section =================================================================== */ .contact-section { padding: 70px 0 80px; background: var(--iac-navy); color: #fff; } .contact-section .section-heading h2 { color: #fff; } .contact-section .section-heading p { color: rgba(255, 255, 255, 0.75); } .contact-section .section-heading .eyebrow { background: rgba(206, 219, 42, 0.18); border-color: var(--iac-lime); color: var(--iac-lime); } .contact-info-panel { max-width: 760px; margin: 0 auto; background: var(--iac-navy-dark); border-radius: 14px; padding: 40px 36px; color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.25); } .contact-info-panel h3 { font-family: 'Poppins', Arial, sans-serif; font-size: 19px; font-weight: 600; margin-bottom: 24px; color: #fff; text-align: center; } .contact-info-panel .contact-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .contact-info-item { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; } .contact-info-item .ci-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(206, 219, 42, 0.18); color: var(--iac-lime); display: flex; align-items: center; justify-content: center; font-size: 15px; } .contact-info-item .ci-text { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); } .contact-info-item .ci-text strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; } @media (max-width: 767px) { .services-showcase, .faq-section, .contact-section { padding: 48px 0; } .contact-info-panel { padding: 28px 22px; } .contact-info-panel .contact-info-grid { grid-template-columns: 1fr; gap: 18px; } .section-heading { margin-bottom: 32px; } .section-heading h2 { font-size: 24px; } #content .align-left h1 { font-size: 26px; } } @media (max-width: 480px) { .services-showcase, .faq-section, .contact-section { padding: 36px 0; } .faq-question { font-size: 14px; padding: 14px 16px; } .faq-answer-inner { padding: 0 16px 16px; font-size: 13.5px; } }