* { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: Arial, Helvetica, sans-serif; background: #071a2f; color: #ffffff; line-height: 1.6; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } .navbar { background: #03111f; padding: 18px 20px; display: flex; justify-content: center; align-items: center; gap: 18px; border-bottom: 2px solid #ff6600; flex-wrap: wrap; width: 100%; max-width: 100%; overflow: visible; white-space: normal; } .navbar a { color: #ffffff; font-size: 0.95rem; font-weight: 700; padding: 12px 16px; border-radius: 12px; transition: 0.3s ease; } .navbar a:hover, .navbar a.active { background: #ff6600; } .top-banner { background: #03111f; padding: 35px 7%; border-bottom: 3px solid #ff6600; } .top-banner-placeholder { width: 100%; max-width: 1200px; margin: auto; border-radius: 18px; overflow: hidden; border: 1px solid #ffb000; background: #123756; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35); } .top-banner-placeholder img { width: 100%; height: auto; display: block; } .hero { background: linear-gradient(135deg, #071a2f, #102f4f); padding: 80px 60px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; } .hero-left { width: 100%; } .hero-image-placeholder { width: 100%; max-width: 820px; height: 350px; margin: 0 auto 35px auto; border-radius: 22px; overflow: hidden; border: 3px solid rgba(132, 214, 255, 0.25); background-image: url("images/excellent.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .hero-left p { font-size: 1.2rem; color: #d8e6f5; margin-bottom: 35px; max-width: 700px; } .hero-title { font-size: 1.75rem; line-height: 1.1; margin-bottom: 20px; font-weight: 800; } .hero-title span { color: #ff6600; } .btn { display: inline-flex; justify-content: center; align-items: center; background: #ff6600; color: #ffffff; padding: 12px 26px; border-radius: 10px; font-size: 0.95rem; font-weight: 700; transition: 0.3s ease; } .btn:hover { opacity: 0.9; } .hero-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); padding: 30px; border-radius: 18px; width: 75%; margin: auto; max-width: 520px; } .hero-card h3 { color: #ff6600; font-size: 1.5rem; margin-bottom: 20px; } .hero-card ul { list-style: none; } .hero-card li { padding: 10px 0; font-size: 1rem; line-height: 1.5; } section { padding: 80px 60px; } .section-title { text-align: center; margin-bottom: 50px; } .section-title h2 { font-size: 2.8rem; color: #ff6600; margin-bottom: 15px; } .section-title p { max-width: 700px; margin: 0 auto; color: #d8e6f5; } .who-we-are-photo-placeholder { width: 100%; max-width: 1100px; margin: 30px auto 35px auto; border-radius: 24px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35); background: transparent; padding: 0; } .who-we-are-photo-placeholder img { width: 100%; height: auto; object-fit: contain; object-position: center; display: block; } .about-intro-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; text-align: left; } .about-text-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 26px; color: #d8e6f5; line-height: 1.8; } .about-text-card p { margin: 0; } .about { background: #061525; } .about-box { max-width: 950px; margin: auto; background: rgba(255, 255, 255, 0.06); padding: 40px; border-radius: 20px; text-align: center; } .about-box h3 { font-size: 2rem; margin-bottom: 20px; color: #ff6600; } .about-box p { color: #d8e6f5; font-size: 1rem; line-height: 1.8; text-align: left; max-width: 800px; margin: 0 auto; } .about-photo-placeholder { width: 100%; max-width: 1100px; height: auto; margin: 35px auto; border-radius: 24px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35); background: transparent; padding: 0; } .about-photo-placeholder img { width: 100%; height: auto; object-fit: contain; object-position: center; display: block; } .values-grid, .industries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; } .card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); padding: 30px; border-radius: 18px; } .card h3 { color: #ff6600; margin-bottom: 15px; font-size: 1.5rem; } .card p { color: #d8e6f5; } .card-image-placeholder, .industry-image-placeholder { width: 100%; aspect-ratio: 1 / 1; height: auto; background: #102b45; border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 18px; overflow: hidden; margin-bottom: 20px; } .card-image-placeholder img, .industry-image-placeholder img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .cta { text-align: center; background: linear-gradient(135deg, #102f4f, #071a2f); } .cta h2 { font-size: 1.7rem; line-height: 1.2; margin-bottom: 12px; font-weight: 700; color: #ffffff; } .cta h2 span { color: #ff6600; font-size: 0.95em; } .lasts-photo-placeholder { width: 100%; max-width: 1100px; height: auto; margin: 35px auto; border-radius: 24px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35); background: transparent; padding: 0; } .lasts-photo-placeholder img { width: 100%; height: auto; object-fit: contain; object-position: center; display: block; } .cta p { max-width: 800px; margin: auto; color: #d8e6f5; font-size: 1rem; line-height: 1.5; } .footer { background: #03111f; padding: 30px; text-align: center; border-top: 2px solid #ff6600; } .footer-links { margin-top: 12px; } .footer-links a { margin: 0 12px; color: #d8e6f5; } @media (max-width: 900px) { .navbar { padding: 18px 14px; gap: 10px; } .navbar a { font-size: 0.88rem; padding: 10px 12px; } .hero { grid-template-columns: 1fr; padding: 60px 25px; } .hero-title { font-size: 2.4rem; } .hero-image-placeholder { width: 100%; height: 240px; } .hero-card { width: 100%; padding: 30px; } .hero-card li { font-size: 1.1rem; line-height: 1.6; } section { padding: 60px 25px; } .section-title h2 { font-size: 2.2rem; } .about-intro-grid { grid-template-columns: 1fr; max-width: 100%; } .about-text-card { padding: 22px; } .who-we-are-photo-placeholder, .about-photo-placeholder, .lasts-photo-placeholder { width: 100%; max-width: 1100px; height: auto; } .card-image-placeholder, .industry-image-placeholder { aspect-ratio: 1 / 1; height: auto; } .cta h2 { font-size: 1.65rem; line-height: 1.2; } } @media (max-width: 600px) { .who-we-are-photo-placeholder, .about-photo-placeholder, .lasts-photo-placeholder { width: 100%; max-width: 1100px; height: auto; } } /* ---- Extracted block separator ---- */ .major-heading { text-align: center; color: #ff6600; font-size: 1.55rem; line-height: 1.15; margin-bottom: 12px; } .cta-heading { color: #ffffff; } .cta-heading span { color: #ff6600; } @media (max-width: 900px) { .top-banner { padding: 10px 4% !important; } section, .hero, .about, .cta { padding: 16px 4% !important; } .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr) !important; gap: 10px !important; align-items: center !important; } .hero-image-placeholder { height: 135px !important; margin: 0 auto 8px !important; border-radius: 9px !important; } .hero-left p, .about-text-card p, .about-box p, .card p, .cta p { font-size: .62rem !important; line-height: 1.25 !important; } .hero-left p { margin-bottom: 8px !important; } .hero-title, .major-heading, .about-box h3 { font-size: 1rem !important; line-height: 1.08 !important; margin-bottom: 6px !important; } .hero-card, .about-text-card, .about-box, .card { padding: 8px !important; border-radius: 7px !important; box-shadow: none !important; } .hero-card { width: 100% !important; max-width: none !important; } .hero-card h3, .card h3 { font-size: .72rem !important; margin-bottom: 4px !important; } .hero-card li { padding: 2px 0 !important; font-size: .57rem !important; line-height: 1.15 !important; } .btn { padding: 5px 8px !important; border-radius: 4px !important; font-size: .58rem !important; } .section-title { margin-bottom: 10px !important; } .section-title p { font-size: .60rem !important; line-height: 1.2 !important; } .who-we-are-photo-placeholder, .about-photo-placeholder, .lasts-photo-placeholder { margin: 8px auto !important; border-radius: 8px !important; } .about-intro-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 7px !important; } .about-box { max-width: 88% !important; margin-top: 10px !important; } .values-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 7px !important; } .card-image-placeholder, .industry-image-placeholder { margin-bottom: 5px !important; border-radius: 6px !important; border-width: 1px !important; } .cta .lasts-photo-placeholder { max-width: 88% !important; } .footer { padding: 12px 10px !important; font-size: .55rem !important; } .footer-links { margin-top: 5px !important; } } @media (max-width: 430px) { .navbar { padding: 6px 4px !important; gap: 3px !important; } .navbar a { font-size: .48rem !important; padding: 5px 6px !important; border-radius: 5px !important; } } /* ---- Extracted block separator ---- */ @media (max-width: 900px) { .about-box { padding: 6px !important; border-radius: 6px !important; max-width: 82% !important; margin: 8px auto 0 !important; } .about-box h3 { font-size: 0.72rem !important; line-height: 1.05 !important; margin-bottom: 4px !important; white-space: normal !important; } .about-box .about-photo-placeholder { margin: 5px auto !important; border-radius: 6px !important; } .about-box p { font-size: 0.56rem !important; line-height: 1.18 !important; margin: 0 auto !important; } .about-box .btn { margin-top: 4px !important; padding: 4px 7px !important; font-size: 0.54rem !important; } } /* ---- Extracted block separator ---- */ /* Consistent major section heading scale */ .consistent-major-heading, .hero-title.consistent-major-heading, .about-box .consistent-major-heading, .cta .consistent-major-heading { font-size: 1rem !important; line-height: 1.08 !important; font-weight: 800 !important; margin-bottom: 8px !important; } .major-heading.consistent-major-heading { text-align: center !important; color: #ff6600 !important; } .cta-heading.consistent-major-heading { color: #ffffff !important; } .cta-heading.consistent-major-heading span, .hero-title.consistent-major-heading span { color: #ff6600 !important; } @media (max-width: 900px) { .consistent-major-heading, .hero-title.consistent-major-heading, .about-box .consistent-major-heading, .cta .consistent-major-heading { font-size: 0.72rem !important; line-height: 1.05 !important; margin-bottom: 4px !important; } } /* ---- Extracted block separator ---- */ /* Site-wide Back to Top navigation */ html { scroll-behavior: smooth; } .back-to-top-wrap { display:flex; justify-content:center; align-items:center; margin:22px auto; padding:0 12px; } .back-to-top-midpoint { margin:26px auto; } .back-to-top-btn { display:inline-block; background:#ff6a00; color:#fff !important; text-decoration:none; font:700 0.78rem Arial,sans-serif; line-height:1; padding:9px 13px; border-radius:7px; border:0; box-shadow:none; } .back-to-top-btn:hover,.back-to-top-btn:focus { background:#e85f00; color:#fff !important; } @media (max-width:768px){ .back-to-top-wrap{margin:16px auto;padding:0 8px}.back-to-top-midpoint{margin:18px auto}.back-to-top-btn{font-size:.66rem;padding:7px 10px;border-radius:6px} } /* LinkedIn footer button */ .footer-links .linkedin-btn { display: inline-block; margin: 8px 12px 0; padding: 7px 14px; border: 1px solid #0a66c2; border-radius: 8px; background: #0a66c2; color: #ffffff; font-weight: 700; } .footer-links .linkedin-btn:hover, .footer-links .linkedin-btn:focus-visible { background: #084f96; border-color: #084f96; } @media (max-width: 900px) { .footer-links .linkedin-btn { margin-top: 5px; padding: 4px 8px; border-radius: 4px; } }