html { scroll-behavior: smooth; }
body[class^="page-"] { margin: 0; padding: 0; box-sizing: border-box; }
/* index page styles */
@scope (body.page-index) {
/* =========================================================
INOVIQ - HOME PAGE CSS
DARK BLUE PREMIUM THEME
========================================================= */
/* ================= GOOGLE FONT ================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:scope {
font-family: "Inter", sans-serif;
background: #F5FAFD;
color: #091125;
line-height: 1.6;
}
h1,
h2,
h3,
h4 {
font-family: "Poppins", sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
/* =========================================================
HEADER
========================================================= */
.header {
position: sticky;
top: 0;
width: 100%;
z-index: 999;
background: #091227;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-container {
height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* LOGO */
.logo {
display: flex;
align-items: center;
gap: 10px;
color: #FFFFFF;
font-size: 22px;
font-weight: 800;
letter-spacing: 1.5px;
}
.logo-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2E76C4, #72A6DE);
color: #FFFFFF;
font-size: 21px;
font-weight: 800;
box-shadow: 0 8px 25px rgba(46, 118, 196, 0.3);
}
/* NAVIGATION */
.navbar {
display: flex;
align-items: center;
gap: 32px;
}
.navbar a {
color: #D6ECF6;
font-size: 14px;
font-weight: 500;
transition: 0.3s ease;
}
.navbar a:hover,
.navbar a.active {
color: #72A6DE;
}
.nav-btn {
padding: 11px 21px;
border-radius: 8px;
background: #2E76C4 !important;
color: #FFFFFF !important;
transition: 0.3s ease;
}
.nav-btn:hover {
background: #72A6DE !important;
transform: translateY(-2px);
}
.menu-icon {
display: none;
color: #FFFFFF;
font-size: 27px;
cursor: pointer;
}
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
overflow: hidden;
min-height: 700px;
display: flex;
align-items: center;
background:
radial-gradient(circle at 80% 20%, rgba(46, 118, 196, 0.18), transparent 30%),
linear-gradient(135deg, #081022, #0E1B3A 55%, #0A1328);
color: #FFFFFF;
}
.hero-container {
min-height: 700px;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 60px;
position: relative;
z-index: 2;
}
/* HERO CONTENT */
.hero-content {
max-width: 650px;
}
.hero-tag {
display: inline-block;
padding: 8px 15px;
border: 1px solid rgba(114, 166, 222, 0.35);
border-radius: 30px;
color: #8ECAE4;
background: rgba(114, 166, 222, 0.07);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.8px;
margin-bottom: 22px;
}
.hero h1 {
font-size: clamp(42px, 5vw, 70px);
line-height: 1.1;
letter-spacing: -2px;
margin-bottom: 25px;
}
.hero h1 span {
display: block;
color: #72A6DE;
}
.hero-content > p {
max-width: 590px;
color: #A4D5EA;
font-size: 17px;
line-height: 1.8;
margin-bottom: 35px;
}
/* HERO BUTTONS */
.hero-buttons {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 42px;
}
.primary-btn,
.secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 23px;
border-radius: 9px;
font-size: 14px;
font-weight: 600;
transition: 0.3s ease;
}
.primary-btn {
background: linear-gradient(135deg, #2E76C4, #5896D8);
color: #FFFFFF;
box-shadow: 0 12px 30px rgba(46, 118, 196, 0.25);
}
.primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 17px 35px rgba(46, 118, 196, 0.35);
}
.secondary-btn {
border: 1px solid rgba(255, 255, 255, 0.22);
color: #FFFFFF;
background: rgba(255, 255, 255, 0.04);
}
.secondary-btn:hover {
background: #FFFFFF;
color: #091227;
}
/* HERO TRUST */
.hero-trust {
display: flex;
align-items: center;
gap: 25px;
}
.trust-item {
display: flex;
flex-direction: column;
}
.trust-item strong {
font-size: 22px;
color: #FFFFFF;
}
.trust-item span {
color: #6CA2DC;
font-size: 11px;
}
.trust-line {
width: 1px;
height: 38px;
background: rgba(255, 255, 255, 0.15);
}
/* HERO IMAGE / VISUAL */
.hero-image {
display: flex;
align-items: center;
justify-content: center;
}
.hero-card {
width: 410px;
height: 430px;
border: 1px solid rgba(132, 177, 226, 0.22);
border-radius: 30px;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.025)
);
backdrop-filter: blur(15px);
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 35px 80px rgba(0, 0, 0, 0.25),
inset 0 0 50px rgba(62, 134, 210, 0.05);
}
.card-glow {
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
background: #2E76C4;
filter: blur(100px);
opacity: 0.35;
}
/* Z CENTER */
.hero-main-icon {
width: 150px;
height: 150px;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
background: linear-gradient(145deg, #2E76C4, #72A6DE);
color: #FFFFFF;
font-size: 90px;
font-weight: 800;
box-shadow:
0 30px 60px rgba(46, 118, 196, 0.3),
inset 0 0 30px rgba(255, 255, 255, 0.15);
}
/* FLOATING CARDS */
.floating-card {
position: absolute;
z-index: 5;
min-width: 190px;
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
background: rgba(10, 20, 42, 0.88);
backdrop-filter: blur(12px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.floating-card span {
width: 34px;
height: 34px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(46, 118, 196, 0.18);
color: #72A6DE;
}
.floating-card strong {
display: block;
color: #FFFFFF;
font-size: 12px;
}
.floating-card small {
display: block;
color: #5594D7;
font-size: 9px;
margin-top: 2px;
}
.card-top {
top: 65px;
right: -35px;
}
.card-bottom {
bottom: 65px;
left: -45px;
}
/* HERO CIRCLES */
.hero-bg-circle {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(114, 166, 222, 0.08);
}
.circle-one {
width: 450px;
height: 450px;
right: -170px;
top: -170px;
}
.circle-two {
width: 300px;
height: 300px;
left: -170px;
bottom: -180px;
}
/* =========================================================
SECTION COMMON
========================================================= */
section {
padding: 100px 0;
}
.section-heading {
max-width: 700px;
margin-bottom: 55px;
}
.section-heading.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.section-tag {
display: inline-block;
color: #2E76C4;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 12px;
}
.section-heading h2 {
font-size: clamp(34px, 4vw, 48px);
line-height: 1.2;
color: #091227;
margin-bottom: 17px;
}
.section-heading h2 span {
color: #2E76C4;
}
.section-heading p {
color: #2C72BC;
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
ABOUT
========================================================= */
.about-intro {
background: #FFFFFF;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
.about-image {
min-height: 470px;
}
.image-placeholder {
height: 470px;
border-radius: 25px;
background:
radial-gradient(circle at 30% 30%, rgba(114, 166, 222, 0.25), transparent 30%),
linear-gradient(145deg, #091227, #12234C);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #FFFFFF;
box-shadow: 0 25px 60px rgba(9, 18, 39, 0.18);
position: relative;
overflow: hidden;
}
.image-placeholder::before {
content: "";
width: 260px;
height: 260px;
border: 1px solid rgba(114, 166, 222, 0.25);
border-radius: 50%;
position: absolute;
}
.image-placeholder span {
position: relative;
z-index: 2;
font-size: 48px;
font-weight: 800;
letter-spacing: 4px;
}
.image-placeholder small {
position: relative;
z-index: 2;
color: #9FD3E9;
margin-top: 8px;
}
.about-content h3 {
font-size: 30px;
color: #091227;
margin-bottom: 20px;
}
.about-content > p {
color: #2C72BC;
font-size: 15px;
margin-bottom: 17px;
}
.about-points {
margin: 25px 0;
}
.about-point {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 13px;
}
.about-point span {
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(46, 118, 196, 0.1);
color: #2E76C4;
font-size: 12px;
font-weight: bold;
}
.about-point p {
color: #182F66;
font-size: 14px;
}
.text-btn {
color: #2E76C4;
font-size: 14px;
font-weight: 700;
}
/* =========================================================
SERVICES
========================================================= */
.services-section {
background: #F2F9FC;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.service-card {
position: relative;
overflow: hidden;
background: #FFFFFF;
padding: 32px;
min-height: 320px;
border: 1px solid #E0F1F8;
border-radius: 18px;
transition: 0.35s ease;
}
.service-card::after {
content: "";
position: absolute;
width: 120px;
height: 120px;
right: -60px;
bottom: -60px;
border-radius: 50%;
background: rgba(46, 118, 196, 0.06);
transition: 0.35s ease;
}
.service-card:hover {
transform: translateY(-8px);
border-color: rgba(46, 118, 196, 0.3);
box-shadow: 0 20px 45px rgba(9, 18, 39, 0.1);
}
.service-card:hover::after {
transform: scale(2);
}
.service-number {
position: absolute;
right: 25px;
top: 25px;
color: #D5EBF5;
font-size: 15px;
font-weight: 800;
}
.service-icon {
width: 55px;
height: 55px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
145deg,
rgba(46, 118, 196, 0.12),
rgba(114, 166, 222, 0.06)
);
color: #2E76C4;
font-size: 22px;
font-weight: 700;
margin-bottom: 25px;
}
.service-card h3 {
color: #091227;
font-size: 20px;
margin-bottom: 12px;
}
.service-card p {
color: #307CCE;
font-size: 13px;
line-height: 1.7;
margin-bottom: 22px;
}
.service-card a {
color: #2E76C4;
font-size: 12px;
font-weight: 700;
}
.services-button {
text-align: center;
margin-top: 45px;
}
/* =========================================================
WHY CHOOSE US
========================================================= */
.why-section {
background: #FFFFFF;
}
.why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.why-content h2 {
font-size: clamp(34px, 4vw, 48px);
line-height: 1.2;
color: #091227;
margin-bottom: 20px;
}
.why-content h2 span {
display: block;
color: #2E76C4;
}
.why-content > p {
color: #2E76C4;
font-size: 15px;
line-height: 1.8;
margin-bottom: 35px;
}
.why-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.why-item {
display: flex;
gap: 17px;
}
.why-icon {
min-width: 46px;
height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #091227;
color: #72A6DE;
font-weight: 700;
}
.why-item h4 {
color: #091227;
font-size: 15px;
margin-bottom: 4px;
}
.why-item p {
color: #3B83D1;
font-size: 12px;
}
/* WHY VISUAL */
.why-visual {
display: flex;
justify-content: center;
}
.visual-box {
width: 430px;
height: 430px;
border-radius: 35px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #081022, #13254F);
overflow: hidden;
}
.visual-center {
width: 130px;
height: 130px;
border-radius: 35px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2E76C4, #72A6DE);
color: #FFFFFF;
font-size: 70px;
font-weight: 800;
position: relative;
z-index: 5;
box-shadow: 0 25px 50px rgba(46, 118, 196, 0.3);
}
.visual-circle {
position: absolute;
border: 1px solid rgba(114, 166, 222, 0.25);
border-radius: 50%;
}
.circle-a {
width: 210px;
height: 210px;
}
.circle-b {
width: 310px;
height: 310px;
}
.circle-c {
width: 410px;
height: 410px;
}
/* =========================================================
CTA
========================================================= */
.cta-section {
padding-top: 20px;
background: #FFFFFF;
}
.cta-box {
position: relative;
overflow: hidden;
border-radius: 25px;
padding: 65px;
background:
radial-gradient(circle at 90% 20%, rgba(114, 166, 222, 0.2), transparent 25%),
linear-gradient(135deg, #091227, #12244E);
color: #FFFFFF;
}
.cta-content {
position: relative;
z-index: 2;
max-width: 650px;
}
.cta-content > span {
color: #81AFE1;
font-size: 10px;
letter-spacing: 2px;
font-weight: 800;
}
.cta-content h2 {
font-size: clamp(30px, 4vw, 45px);
line-height: 1.2;
margin: 13px 0 15px;
}
.cta-content h2 strong {
display: block;
color: #72A6DE;
}
.cta-content p {
color: #A3D4E9;
font-size: 14px;
margin-bottom: 25px;
}
.cta-btn {
display: inline-block;
padding: 14px 23px;
border-radius: 8px;
background: #FFFFFF;
color: #091227;
font-size: 13px;
font-weight: 700;
transition: 0.3s ease;
}
.cta-btn:hover {
background: #72A6DE;
color: #FFFFFF;
transform: translateY(-3px);
}
.cta-shape {
position: absolute;
width: 350px;
height: 350px;
border: 1px solid rgba(114, 166, 222, 0.16);
border-radius: 50%;
right: -100px;
top: -120px;
}
/* =========================================================
CONTACT STRIP
========================================================= */
.contact-strip {
padding: 45px 0;
background: #F2F9FC;
}
.contact-strip-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.contact-info {
display: flex;
align-items: center;
gap: 14px;
}
.contact-icon {
width: 46px;
height: 46px;
min-width: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #091227;
color: #72A6DE;
}
.contact-info small {
display: block;
color: #5594D7;
font-size: 10px;
margin-bottom: 2px;
}
.contact-info a,
.contact-info p {
color: #091227;
font-size: 12px;
font-weight: 600;
}
/* =========================================================
FOOTER
========================================================= */
.footer {
background: #070E1F;
color: #FFFFFF;
padding: 75px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr;
gap: 50px;
padding-bottom: 55px;
}
/* FOOTER LOGO */
.footer-logo {
display: flex;
align-items: center;
gap: 9px;
color: #FFFFFF;
font-size: 20px;
font-weight: 800;
letter-spacing: 1px;
}
.footer-logo span {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #2E76C4;
color: #FFFFFF;
}
.footer-about > p {
max-width: 300px;
color: #5091D6;
font-size: 12px;
line-height: 1.8;
margin: 20px 0;
}
/* SOCIAL */
.social-links {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.social-links a {
padding: 7px 11px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
color: #7AABE0;
font-size: 10px;
transition: 0.3s ease;
}
.social-links a:hover {
background: #2E76C4;
border-color: #2E76C4;
color: #FFFFFF;
}
/* FOOTER LINKS */
.footer h3 {
color: #FFFFFF;
font-size: 14px;
margin-bottom: 20px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
color: #5091D6;
font-size: 11px;
transition: 0.3s ease;
}
.footer-links a:hover {
color: #72A6DE;
padding-left: 4px;
}
/* FOOTER CONTACT */
.footer-contact p {
color: #5091D6;
font-size: 11px;
line-height: 1.7;
margin-bottom: 13px;
}
.footer-contact strong {
color: #FFFFFF;
}
/* REGISTERED OFFICE */
.registered-office {
padding: 22px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #5091D6;
font-size: 10px;
line-height: 1.8;
}
.registered-office strong {
color: #FFFFFF;
}
/* FOOTER BOTTOM */
.footer-bottom {
min-height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.footer-bottom p {
color: #2E77C6;
font-size: 10px;
}
.footer-bottom div {
display: flex;
gap: 20px;
}
.footer-bottom a {
color: #2E77C6;
font-size: 10px;
}
.footer-bottom a:hover {
color: #72A6DE;
}
/* =========================================================
RESPONSIVE - TABLET
========================================================= */
@media (max-width: 1000px) {
.navbar {
gap: 18px;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
padding: 80px 0;
}
.hero-content {
margin: auto;
}
.hero-content > p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons,
.hero-trust {
justify-content: center;
}
.hero-image {
margin-top: 20px;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-grid,
.why-grid {
gap: 45px;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================================================
RESPONSIVE - MOBILE
========================================================= */
@media (max-width: 700px) {
.container {
width: 92%;
}
.nav-container {
height: 70px;
}
.navbar {
position: absolute;
top: 70px;
left: 0;
width: 100%;
padding: 20px;
display: none;
flex-direction: column;
align-items: flex-start;
gap: 18px;
background: #091227;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar.show {
display: flex;
}
.nav-btn {
width: 100%;
text-align: center;
}
.menu-icon {
display: block;
}
.hero {
min-height: auto;
}
.hero-container {
min-height: auto;
padding: 75px 0;
}
.hero h1 {
font-size: 40px;
letter-spacing: -1px;
}
.hero-content > p {
font-size: 14px;
}
.hero-buttons {
flex-direction: column;
width: 100%;
}
.primary-btn,
.secondary-btn {
width: 100%;
}
.hero-trust {
gap: 15px;
}
.hero-card {
width: 100%;
max-width: 350px;
height: 350px;
}
.hero-main-icon {
width: 110px;
height: 110px;
font-size: 65px;
border-radius: 28px;
}
.floating-card {
min-width: 160px;
padding: 10px;
}
.card-top {
right: -10px;
top: 35px;
}
.card-bottom {
left: -10px;
bottom: 35px;
}
section {
padding: 70px 0;
}
.section-heading {
margin-bottom: 40px;
}
.section-heading h2 {
font-size: 34px;
}
.about-grid,
.why-grid {
grid-template-columns: 1fr;
}
.about-image {
min-height: auto;
}
.image-placeholder {
height: 350px;
}
.about-content h3 {
font-size: 25px;
}
.services-grid {
grid-template-columns: 1fr;
}
.service-card {
min-height: auto;
}
.visual-box {
width: 100%;
max-width: 380px;
height: 380px;
}
.cta-box {
padding: 40px 25px;
}
.contact-strip-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.footer {
padding-top: 55px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.footer-bottom {
padding: 20px 0;
flex-direction: column;
align-items: flex-start;
}
.footer-bottom div {
flex-direction: column;
gap: 8px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.hero h1 {
font-size: 34px;
}
.hero-trust {
gap: 10px;
}
.trust-item strong {
font-size: 18px;
}
.hero-card {
height: 320px;
}
.floating-card {
min-width: 145px;
}
.visual-box {
height: 320px;
}
.visual-center {
width: 100px;
height: 100px;
font-size: 55px;
}
}
}
/* about page styles */
@scope (body.page-about) {
/* =========================================================
INOVIQ ABOUT PAGE
COMPLETE DARK BLUE CSS
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:scope {
font-family: "Inter", sans-serif;
background: #F4FAFC;
color: #091125;
line-height: 1.6;
}
h1,
h2,
h3,
h4 {
font-family: "Poppins", sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
/* =========================================================
HEADER
========================================================= */
.header {
width: 100%;
position: sticky;
top: 0;
z-index: 999;
background: #091125;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-container {
height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
color: #FFFFFF;
font-size: 22px;
font-weight: 800;
letter-spacing: 1.5px;
}
.logo-icon {
width: 40px;
height: 40px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,#296AAF,#75A8DF);
color: white;
font-size: 21px;
font-weight: 800;
box-shadow: 0 8px 25px rgba(41, 106, 175, 0.3);
}
.navbar {
display: flex;
align-items: center;
gap: 32px;
}
.navbar a {
color: #D3EBF5;
font-size: 14px;
font-weight: 500;
transition: 0.3s;
}
.navbar a:hover,
.navbar a.active {
color: #75A8DF;
}
.nav-btn {
padding: 11px 21px;
border-radius: 8px;
background: #296AAF !important;
color: #FFFFFF !important;
}
.nav-btn:hover {
background: #75A8DF !important;
transform: translateY(-2px);
}
.menu-icon {
display: none;
color: white;
font-size: 28px;
cursor: pointer;
}
/* =========================================================
PAGE HERO
========================================================= */
.page-hero {
position: relative;
overflow: hidden;
padding: 120px 0 105px;
text-align: center;
color: white;
background:
radial-gradient(
circle at 80% 20%,
rgba(90, 151, 216, 0.2),
transparent 30%
),
linear-gradient(
135deg,
#070E1F,
#0F1D3F 55%,
#091227
);
}
.page-hero::before {
content: "";
position: absolute;
width: 450px;
height: 450px;
border: 1px solid rgba(114, 166, 222, 0.12);
border-radius: 50%;
right: -180px;
top: -220px;
}
.page-hero::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
border: 1px solid rgba(114, 166, 222, 0.08);
border-radius: 50%;
left: -170px;
bottom: -190px;
}
.page-hero .container {
position: relative;
z-index: 2;
}
.hero-tag {
display: inline-block;
padding: 8px 15px;
border: 1px solid rgba(114, 166, 222, 0.35);
border-radius: 30px;
background: rgba(114, 166, 222, 0.07);
color: #8FCBE5;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 20px;
}
.page-hero h1 {
font-size: clamp(42px,5vw,64px);
line-height: 1.12;
letter-spacing: -2px;
margin-bottom: 22px;
}
.page-hero h1 span {
color: #75A8DF;
}
.page-hero p {
max-width: 650px;
margin: auto;
color: #A4D5EA;
font-size: 15px;
line-height: 1.8;
}
.breadcrumb {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 30px;
font-size: 12px;
}
.breadcrumb a {
color: #75A8DF;
}
.breadcrumb span {
color: #3982D1;
}
.breadcrumb strong {
color: #FFFFFF;
}
/* =========================================================
COMMON SECTION
========================================================= */
section {
padding: 100px 0;
}
.section-heading {
max-width: 700px;
margin-bottom: 55px;
}
.section-heading.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.section-tag {
display: inline-block;
color: #296AAF;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 12px;
}
.section-heading h2 {
color: #091125;
font-size: clamp(34px,4vw,48px);
line-height: 1.2;
margin-bottom: 17px;
}
.section-heading h2 span {
color: #296AAF;
}
.section-heading p {
color: #2D75C1;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
ABOUT COMPANY
========================================================= */
.about-company {
background: #FFFFFF;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 70px;
}
/* IMAGE */
.about-image {
width: 100%;
}
.image-placeholder {
height: 470px;
border-radius: 26px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background:
radial-gradient(
circle at 30% 25%,
rgba(117, 168, 223, 0.25),
transparent 30%
),
linear-gradient(
145deg,
#091125,
#12244E
);
box-shadow: 0 30px 65px rgba(9, 17, 37, 0.2);
}
.image-placeholder::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
border: 1px solid rgba(117, 168, 223, 0.22);
border-radius: 50%;
}
.image-placeholder::after {
content: "";
position: absolute;
width: 210px;
height: 210px;
border: 1px solid rgba(117, 168, 223, 0.15);
border-radius: 50%;
}
.image-placeholder span {
position: relative;
z-index: 2;
color: #FFFFFF;
font-size: 48px;
font-weight: 800;
letter-spacing: 4px;
}
.image-placeholder small {
position: relative;
z-index: 2;
color: #84B1E2;
font-size: 12px;
margin-top: 8px;
}
/* ABOUT CONTENT */
.about-content h2 {
color: #091125;
font-size: clamp(32px,4vw,46px);
line-height: 1.2;
margin-bottom: 22px;
}
.about-content h2 span {
display: block;
color: #296AAF;
}
.about-content > p {
color: #2D75C1;
font-size: 14px;
line-height: 1.8;
margin-bottom: 17px;
}
.about-content .primary-btn {
margin-top: 12px;
}
/* =========================================================
BUTTON
========================================================= */
.primary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 23px;
border-radius: 9px;
background: linear-gradient(
135deg,
#296AAF,
#5B98D9
);
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
box-shadow: 0 12px 30px rgba(41, 106, 175, 0.22);
transition: 0.3s ease;
}
.primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 18px 35px rgba(41, 106, 175, 0.3);
}
/* =========================================================
VISION / MISSION / VALUES
========================================================= */
.vision-section {
background: #F2F9FC;
}
.vision-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 22px;
}
.vision-card {
position: relative;
overflow: hidden;
background: #FFFFFF;
border: 1px solid #DDEFF7;
border-radius: 18px;
padding: 35px 30px;
min-height: 290px;
transition: 0.35s ease;
}
.vision-card::after {
content: "";
position: absolute;
width: 140px;
height: 140px;
right: -70px;
bottom: -70px;
border-radius: 50%;
background: rgba(41, 106, 175, 0.06);
transition: 0.35s ease;
}
.vision-card:hover {
transform: translateY(-8px);
border-color: rgba(41, 106, 175, 0.25);
box-shadow:
0 20px 45px rgba(9, 17, 37, 0.1);
}
.vision-card:hover::after {
transform: scale(1.8);
}
.vision-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
background: linear-gradient(
145deg,
rgba(41, 106, 175, 0.13),
rgba(117, 168, 223, 0.06)
);
color: #296AAF;
font-size: 22px;
font-weight: 700;
margin-bottom: 23px;
position: relative;
z-index: 2;
}
.vision-card h3 {
position: relative;
z-index: 2;
color: #091125;
font-size: 20px;
margin-bottom: 12px;
}
.vision-card p {
position: relative;
z-index: 2;
color: #2E77C6;
font-size: 13px;
line-height: 1.8;
}
/* =========================================================
WHY INOVIQ
========================================================= */
.about-why {
background: #FFFFFF;
}
.why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 80px;
}
.why-content h2 {
color: #091125;
font-size: clamp(34px,4vw,48px);
line-height: 1.2;
margin-bottom: 20px;
}
.why-content h2 span {
display: block;
color: #296AAF;
}
.why-content > p {
color: #2E76C2;
font-size: 14px;
line-height: 1.8;
margin-bottom: 35px;
}
/* WHY LIST */
.why-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.why-item {
display: flex;
align-items: flex-start;
gap: 16px;
}
.why-icon {
width: 46px;
height: 46px;
min-width: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #091125;
color: #75A8DF;
font-weight: 700;
}
.why-item h4 {
color: #091125;
font-size: 15px;
margin-bottom: 4px;
}
.why-item p {
color: #3881D0;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
WHY VISUAL
========================================================= */
.why-visual {
display: flex;
justify-content: center;
}
.visual-box {
width: 430px;
height: 430px;
border-radius: 35px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(
circle at center,
rgba(46, 118, 196, 0.2),
transparent 40%
),
linear-gradient(
145deg,
#091125,
#132651
);
}
.visual-center {
width: 130px;
height: 130px;
border-radius: 35px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 5;
background: linear-gradient(
135deg,
#296AAF,
#75A8DF
);
color: #FFFFFF;
font-size: 70px;
font-weight: 800;
box-shadow:
0 25px 50px rgba(41, 106, 175, 0.3);
}
.visual-circle {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(117, 168, 223, 0.23);
}
.circle-a {
width: 210px;
height: 210px;
}
.circle-b {
width: 310px;
height: 310px;
}
.circle-c {
width: 410px;
height: 410px;
}
/* =========================================================
COMPANY INFORMATION
========================================================= */
.company-info {
background: #F2F9FC;
}
.company-info-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 18px;
margin-bottom: 35px;
}
.info-card {
background: #FFFFFF;
padding: 28px 22px;
border-radius: 15px;
border: 1px solid #DDEFF7;
transition: 0.3s ease;
}
.info-card:hover {
transform: translateY(-5px);
border-color: rgba(41, 106, 175, 0.25);
box-shadow:
0 15px 35px rgba(9, 17, 37, 0.08);
}
.info-label {
display: block;
color: #296AAF;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
margin-bottom: 10px;
}
.info-card h3 {
color: #091125;
font-size: 14px;
word-break: break-word;
}
/* OFFICE */
.office-box {
padding: 30px;
border-radius: 18px;
text-align: center;
background:
radial-gradient(
circle at 90% 10%,
rgba(114, 166, 222, 0.16),
transparent 30%
),
#091125;
color: #FFFFFF;
}
.office-box .section-tag {
color: #75A8DF;
}
.office-box p {
max-width: 850px;
margin: 5px auto 0;
color: #A6D6EA;
font-size: 13px;
line-height: 1.8;
}
/* =========================================================
CTA
========================================================= */
.cta-section {
background: #FFFFFF;
padding-top: 25px;
}
.cta-box {
position: relative;
overflow: hidden;
border-radius: 25px;
padding: 65px;
background:
radial-gradient(
circle at 90% 20%,
rgba(117, 168, 223, 0.2),
transparent 25%
),
linear-gradient(
135deg,
#091125,
#13254F
);
color: #FFFFFF;
}
.cta-content {
position: relative;
z-index: 2;
max-width: 650px;
}
.cta-content > span {
color: #75A8DF;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.cta-content h2 {
font-size: clamp(30px,4vw,45px);
line-height: 1.2;
margin: 13px 0 15px;
}
.cta-content h2 strong {
display: block;
color: #75A8DF;
}
.cta-content p {
color: #A4D5EA;
font-size: 14px;
margin-bottom: 25px;
}
.cta-btn {
display: inline-flex;
padding: 14px 23px;
border-radius: 8px;
background: #FFFFFF;
color: #091125;
font-size: 13px;
font-weight: 700;
transition: 0.3s ease;
}
.cta-btn:hover {
background: #75A8DF;
color: #FFFFFF;
transform: translateY(-3px);
}
.cta-shape {
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
border: 1px solid rgba(117, 168, 223, 0.16);
right: -100px;
top: -120px;
}
/* =========================================================
FOOTER
========================================================= */
.footer {
background: #070E1D;
color: #FFFFFF;
padding: 75px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns:
1.5fr
0.8fr
1.2fr
1fr;
gap: 50px;
padding-bottom: 55px;
}
/* FOOTER ABOUT */
.footer-logo {
display: flex;
align-items: center;
gap: 9px;
color: #FFFFFF;
font-size: 20px;
font-weight: 800;
letter-spacing: 1px;
}
.footer-logo span {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #296AAF;
color: #FFFFFF;
}
.footer-about > p {
max-width: 300px;
color: #4E90D6;
font-size: 12px;
line-height: 1.8;
margin: 20px 0;
}
/* SOCIAL */
.social-links {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.social-links a {
padding: 7px 11px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
color: #6FA4DD;
font-size: 10px;
transition: 0.3s ease;
}
.social-links a:hover {
background: #296AAF;
border-color: #296AAF;
color: #FFFFFF;
}
/* FOOTER LINKS */
.footer h3 {
color: #FFFFFF;
font-size: 14px;
margin-bottom: 20px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
color: #4E90D6;
font-size: 11px;
transition: 0.3s ease;
}
.footer-links a:hover {
color: #75A8DF;
padding-left: 4px;
}
/* FOOTER CONTACT */
.footer-contact p {
color: #4E90D6;
font-size: 11px;
line-height: 1.7;
margin-bottom: 13px;
}
.footer-contact strong {
color: #FFFFFF;
}
/* REGISTERED OFFICE */
.registered-office {
padding: 22px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #4E90D6;
font-size: 10px;
line-height: 1.8;
}
.registered-office strong {
color: #FFFFFF;
}
/* FOOTER BOTTOM */
.footer-bottom {
min-height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.footer-bottom p {
color: #2E76C4;
font-size: 10px;
}
.footer-bottom div {
display: flex;
gap: 20px;
}
.footer-bottom a {
color: #2E76C4;
font-size: 10px;
}
.footer-bottom a:hover {
color: #75A8DF;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.navbar {
gap: 18px;
}
.about-grid,
.why-grid {
gap: 45px;
}
.vision-grid {
grid-template-columns: repeat(2,1fr);
}
.company-info-grid {
grid-template-columns: repeat(2,1fr);
}
.footer-grid {
grid-template-columns: repeat(2,1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.container {
width: 92%;
}
.nav-container {
height: 70px;
}
.navbar {
position: absolute;
top: 70px;
left: 0;
width: 100%;
padding: 20px;
display: none;
flex-direction: column;
align-items: flex-start;
gap: 18px;
background: #091125;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar.show {
display: flex;
}
.nav-btn {
width: 100%;
text-align: center;
}
.menu-icon {
display: block;
}
/* PAGE HERO */
.page-hero {
padding: 85px 0 75px;
}
.page-hero h1 {
font-size: 39px;
letter-spacing: -1px;
}
.page-hero p {
font-size: 13px;
}
/* ABOUT */
section {
padding: 70px 0;
}
.about-grid,
.why-grid {
grid-template-columns: 1fr;
}
.image-placeholder {
height: 350px;
}
.about-content h2,
.why-content h2 {
font-size: 34px;
}
/* VISION */
.vision-grid {
grid-template-columns: 1fr;
}
.vision-card {
min-height: auto;
}
/* WHY */
.visual-box {
width: 100%;
max-width: 380px;
height: 380px;
margin: auto;
}
/* COMPANY */
.company-info-grid {
grid-template-columns: 1fr;
}
.info-card {
padding: 24px 20px;
}
.office-box {
padding: 25px 18px;
}
/* CTA */
.cta-box {
padding: 40px 25px;
}
/* FOOTER */
.footer {
padding-top: 55px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.footer-bottom {
padding: 20px 0;
flex-direction: column;
align-items: flex-start;
}
.footer-bottom div {
flex-direction: column;
gap: 8px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.page-hero h1 {
font-size: 34px;
}
.breadcrumb {
font-size: 10px;
}
.visual-box {
height: 320px;
}
.visual-center {
width: 100px;
height: 100px;
font-size: 55px;
}
.circle-a {
width: 170px;
height: 170px;
}
.circle-b {
width: 245px;
height: 245px;
}
.circle-c {
width: 320px;
height: 320px;
}
}
}
/* services page styles */
@scope (body.page-services) {
/* =========================================================
INOVIQ - SERVICES PAGE
STANDALONE DARK BLUE THEME
========================================================= */
/* =========================================================
RESET
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:scope {
font-family: "Inter", Arial, sans-serif;
background: #F4FAFC;
color: #0C1834;
line-height: 1.6;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
button,
input,
textarea {
font-family: inherit;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* =========================================================
HEADER
========================================================= */
.header {
width: 100%;
height: 78px;
position: sticky;
top: 0;
z-index: 1000;
background: #091227;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
/* LOGO */
.logo {
display: flex;
align-items: center;
gap: 10px;
color: #FFFFFF;
font-size: 21px;
font-weight: 800;
letter-spacing: 1.5px;
}
.logo-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: linear-gradient(
135deg,
#296AAF,
#7DADE1
);
color: #FFFFFF;
font-size: 20px;
font-weight: 800;
box-shadow: 0 8px 25px rgba(41, 106, 175, 0.3);
}
/* NAVIGATION */
.navbar {
display: flex;
align-items: center;
gap: 30px;
}
.navbar a {
color: #BDE0EF;
font-size: 13px;
font-weight: 500;
transition: 0.3s ease;
}
.navbar a:hover,
.navbar a.active {
color: #7DADE1;
}
/* NAV BUTTON */
.navbar .nav-btn {
padding: 11px 20px;
border-radius: 8px;
background: #296AAF;
color: #FFFFFF;
font-weight: 700;
}
.navbar .nav-btn:hover {
background: #7DADE1;
color: #091227;
transform: translateY(-2px);
}
/* MOBILE MENU ICON */
.menu-icon {
display: none;
color: #FFFFFF;
font-size: 27px;
cursor: pointer;
user-select: none;
}
/* =========================================================
SERVICES HERO
========================================================= */
.services-hero {
position: relative;
overflow: hidden;
padding: 120px 0 105px;
text-align: center;
color: #FFFFFF;
background:
radial-gradient(
circle at 80% 20%,
rgba(87, 149, 215, 0.22),
transparent 30%
),
linear-gradient(
135deg,
#070E1D 0%,
#101F42 55%,
#091227 100%
);
}
/* HERO CIRCLES */
.services-hero::before {
content: "";
position: absolute;
width: 450px;
height: 450px;
right: -200px;
top: -230px;
border: 1px solid rgba(125, 173, 225, 0.14);
border-radius: 50%;
}
.services-hero::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
left: -180px;
bottom: -180px;
border: 1px solid rgba(125, 173, 225, 0.10);
border-radius: 50%;
}
.services-hero-glow {
position: absolute;
width: 180px;
height: 180px;
top: 25%;
left: 10%;
border-radius: 50%;
background: rgba(41, 106, 175, 0.07);
filter: blur(10px);
}
.services-hero .container {
position: relative;
z-index: 2;
}
/* HERO TAG */
.hero-tag {
display: inline-block;
padding: 8px 16px;
margin-bottom: 20px;
border: 1px solid rgba(125, 173, 225, 0.35);
border-radius: 50px;
background: rgba(125, 173, 225, 0.07);
color: #91CCE5;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
/* HERO TITLE */
.services-hero h1 {
max-width: 850px;
margin: 0 auto 20px;
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(42px, 5vw, 64px);
line-height: 1.12;
letter-spacing: -2px;
}
.services-hero h1 span {
display: block;
color: #7DADE1;
}
/* HERO DESCRIPTION */
.services-hero p {
max-width: 680px;
margin: 0 auto;
color: #A4D5EA;
font-size: 14px;
line-height: 1.9;
}
/* BREADCRUMB */
.breadcrumb {
display: flex;
justify-content: center;
align-items: center;
gap: 11px;
margin-top: 28px;
font-size: 11px;
}
.breadcrumb a {
color: #7DADE1;
}
.breadcrumb span {
color: #3982D1;
}
.breadcrumb strong {
color: #FFFFFF;
}
/* =========================================================
SECTION COMMON
========================================================= */
.section-heading {
max-width: 720px;
margin: 0 auto 55px;
text-align: center;
}
.section-tag {
display: inline-block;
margin-bottom: 11px;
color: #296AAF;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.section-heading h2 {
margin-bottom: 15px;
color: #091227;
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.2;
letter-spacing: -1px;
}
.section-heading h2 span {
color: #296AAF;
}
.section-heading p {
color: #307BCC;
font-size: 13px;
line-height: 1.8;
}
/* =========================================================
SERVICES INTRO
========================================================= */
.services-intro {
padding: 95px 0 35px;
background: #FFFFFF;
}
/* =========================================================
SERVICES SECTION
========================================================= */
.all-services {
padding: 50px 0 100px;
background: #FFFFFF;
}
.services-list {
display: flex;
flex-direction: column;
gap: 24px;
}
/* =========================================================
SERVICE CARD
========================================================= */
.service-large-card {
position: relative;
display: grid;
grid-template-columns: 70px 85px 1fr;
align-items: center;
gap: 25px;
min-height: 300px;
padding: 42px;
overflow: hidden;
border: 1px solid #DAEEF6;
border-radius: 22px;
background: #FFFFFF;
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
/* CARD BACKGROUND SHAPE */
.service-large-card::before {
content: "";
position: absolute;
width: 350px;
height: 350px;
right: -190px;
bottom: -210px;
border-radius: 50%;
background: rgba(41, 106, 175, 0.045);
transition: 0.4s ease;
}
.service-large-card:hover {
transform: translateY(-7px);
border-color: rgba(41, 106, 175, 0.28);
box-shadow:
0 25px 60px rgba(9, 18, 39, 0.10);
}
.service-large-card:hover::before {
transform: scale(1.4);
}
/* =========================================================
SERVICE NUMBER
========================================================= */
.service-large-number {
position: relative;
z-index: 2;
color: #D5EBF5;
font-family: "Poppins", Arial, sans-serif;
font-size: 38px;
font-weight: 800;
line-height: 1;
}
/* =========================================================
SERVICE ICON
========================================================= */
.service-large-icon {
position: relative;
z-index: 2;
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
background:
linear-gradient(
145deg,
#091227,
#142754
);
color: #7DADE1;
font-size: 23px;
font-weight: 700;
box-shadow:
0 15px 35px rgba(9, 18, 39, 0.18);
transition: 0.3s ease;
}
.service-large-card:hover .service-large-icon {
transform: scale(1.07);
box-shadow:
0 18px 40px rgba(41, 106, 175, 0.25);
}
/* =========================================================
SERVICE CONTENT
========================================================= */
.service-large-content {
position: relative;
z-index: 2;
}
.service-small-title {
display: inline-block;
margin-bottom: 7px;
color: #296AAF;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.service-large-content h2 {
margin-bottom: 12px;
color: #091227;
font-family: "Poppins", Arial, sans-serif;
font-size: 28px;
line-height: 1.25;
}
.service-large-content > p {
max-width: 680px;
margin-bottom: 17px;
color: #2E77C6;
font-size: 13px;
line-height: 1.8;
}
/* =========================================================
SERVICE FEATURES
========================================================= */
.service-features {
display: flex;
flex-wrap: wrap;
gap: 7px 20px;
margin-bottom: 20px;
}
.service-features span {
color: #25609F;
font-size: 11px;
font-weight: 600;
}
/* =========================================================
SERVICE BUTTON
========================================================= */
.service-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 18px;
border-radius: 8px;
background: #091227;
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
transition: 0.3s ease;
}
.service-view-btn:hover {
background: #296AAF;
transform: translateY(-2px);
box-shadow:
0 10px 25px rgba(41, 106, 175, 0.20);
}
/* =========================================================
BENEFITS
========================================================= */
.service-benefits {
padding: 100px 0;
background: #F2F9FC;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* BENEFIT CARD */
.benefit-card {
position: relative;
min-height: 245px;
padding: 30px 25px;
overflow: hidden;
border: 1px solid #D8EDF6;
border-radius: 17px;
background: #FFFFFF;
transition: 0.35s ease;
}
.benefit-card::after {
content: "";
position: absolute;
width: 120px;
height: 120px;
right: -65px;
bottom: -65px;
border-radius: 50%;
background: rgba(41, 106, 175, 0.05);
}
.benefit-card:hover {
transform: translateY(-7px);
border-color: rgba(41, 106, 175, 0.25);
box-shadow:
0 20px 45px rgba(9, 18, 39, 0.08);
}
/* BENEFIT ICON */
.benefit-icon {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
border-radius: 14px;
background:
linear-gradient(
135deg,
rgba(41, 106, 175, 0.13),
rgba(125, 173, 225, 0.07)
);
color: #296AAF;
font-size: 20px;
font-weight: 700;
}
.benefit-card h3 {
margin-bottom: 9px;
color: #091227;
font-family: "Poppins", Arial, sans-serif;
font-size: 17px;
}
.benefit-card p {
color: #307BCC;
font-size: 12px;
line-height: 1.8;
}
/* =========================================================
PROCESS
========================================================= */
.process-section {
padding: 100px 0;
background: #FFFFFF;
}
.process-grid {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.process-grid::before {
content: "";
position: absolute;
left: 12%;
right: 12%;
top: 38px;
height: 1px;
background: #CDE8F3;
z-index: 0;
}
.process-card {
position: relative;
z-index: 2;
text-align: center;
padding: 0 15px;
}
.process-number {
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
border: 6px solid #FFFFFF;
border-radius: 50%;
background:
linear-gradient(
135deg,
#091227,
#142754
);
color: #7DADE1;
font-size: 13px;
font-weight: 800;
box-shadow:
0 12px 30px rgba(9, 18, 39, 0.17);
}
.process-card h3 {
margin-bottom: 8px;
color: #091227;
font-family: "Poppins", Arial, sans-serif;
font-size: 17px;
}
.process-card p {
color: #307BCC;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
CTA
========================================================= */
.cta-section {
padding: 25px 0 80px;
background: #FFFFFF;
}
.cta-box {
position: relative;
overflow: hidden;
padding: 65px;
border-radius: 25px;
background:
radial-gradient(
circle at 90% 15%,
rgba(125, 173, 225, 0.20),
transparent 28%
),
linear-gradient(
135deg,
#091227,
#142754
);
}
.cta-content {
position: relative;
z-index: 2;
max-width: 680px;
}
.cta-content > span {
color: #7DADE1;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.cta-content h2 {
margin: 13px 0 15px;
color: #FFFFFF;
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(32px, 4vw, 46px);
line-height: 1.2;
}
.cta-content h2 strong {
display: block;
color: #7DADE1;
}
.cta-content p {
margin-bottom: 25px;
color: #A8D6EA;
font-size: 13px;
line-height: 1.8;
}
.cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 23px;
border-radius: 8px;
background: #FFFFFF;
color: #091227;
font-size: 12px;
font-weight: 800;
transition: 0.3s ease;
}
.cta-btn:hover {
background: #7DADE1;
color: #FFFFFF;
transform: translateY(-3px);
}
/* CTA CIRCLE */
.cta-shape {
position: absolute;
width: 370px;
height: 370px;
right: -120px;
top: -140px;
border: 1px solid rgba(125, 173, 225, 0.15);
border-radius: 50%;
}
/* =========================================================
CONTACT STRIP
========================================================= */
.contact-strip {
padding: 0 0 80px;
background: #FFFFFF;
}
.contact-strip-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 28px;
border: 1px solid #D8EDF6;
border-radius: 18px;
background: #F4FAFC;
}
.contact-info {
display: flex;
align-items: center;
gap: 14px;
}
.contact-icon {
width: 48px;
height: 48px;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #091227;
color: #7DADE1;
font-size: 17px;
}
.contact-info small {
display: block;
margin-bottom: 3px;
color: #5091D6;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.contact-info a,
.contact-info p {
color: #091227;
font-size: 11px;
font-weight: 600;
line-height: 1.5;
word-break: break-word;
}
.contact-info a:hover {
color: #296AAF;
}
/* =========================================================
FOOTER
========================================================= */
.footer {
padding: 75px 0 0;
background: #070E1D;
color: #FFFFFF;
}
.footer-grid {
display: grid;
grid-template-columns:
1.5fr
0.8fr
1.2fr
1fr;
gap: 50px;
padding-bottom: 50px;
}
/* FOOTER LOGO */
.footer-logo {
display: flex;
align-items: center;
gap: 9px;
color: #FFFFFF;
font-size: 20px;
font-weight: 800;
letter-spacing: 1px;
}
.footer-logo span {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #296AAF;
color: #FFFFFF;
}
.footer-about > p {
max-width: 300px;
margin: 20px 0;
color: #5091D6;
font-size: 11px;
line-height: 1.8;
}
/* SOCIAL */
.social-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.social-links a {
padding: 7px 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
color: #639DDB;
font-size: 9px;
transition: 0.3s ease;
}
.social-links a:hover {
background: #296AAF;
border-color: #296AAF;
color: #FFFFFF;
}
/* FOOTER HEADINGS */
.footer h3 {
margin-bottom: 18px;
color: #FFFFFF;
font-size: 14px;
}
/* FOOTER LINKS */
.footer-links {
display: flex;
flex-direction: column;
gap: 9px;
}
.footer-links a {
color: #5091D6;
font-size: 10px;
transition: 0.3s ease;
}
.footer-links a:hover {
padding-left: 4px;
color: #7DADE1;
}
/* FOOTER COMPANY */
.footer-contact p {
margin-bottom: 12px;
color: #5091D6;
font-size: 10px;
line-height: 1.7;
}
.footer-contact strong {
color: #FFFFFF;
}
/* REGISTERED OFFICE */
.registered-office {
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #5091D6;
font-size: 9px;
line-height: 1.8;
}
.registered-office strong {
color: #FFFFFF;
}
/* FOOTER BOTTOM */
.footer-bottom {
min-height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.footer-bottom p {
color: #2E76C2;
font-size: 9px;
}
.footer-bottom div {
display: flex;
gap: 20px;
}
.footer-bottom a {
color: #2E76C2;
font-size: 9px;
}
.footer-bottom a:hover {
color: #7DADE1;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.navbar {
gap: 18px;
}
.service-large-card {
grid-template-columns: 60px 75px 1fr;
padding: 32px;
}
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
row-gap: 50px;
}
.process-grid::before {
display: none;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.container {
width: 92%;
}
/* HEADER */
.header {
height: 70px;
}
.menu-icon {
display: block;
}
.navbar {
position: absolute;
top: 70px;
left: 0;
width: 100%;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 15px 20px 20px;
background: #091227;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar.show {
display: flex;
}
.navbar a {
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.navbar .nav-btn {
margin-top: 10px;
padding: 12px;
text-align: center;
border: none;
}
/* HERO */
.services-hero {
padding: 85px 0 75px;
}
.services-hero h1 {
font-size: 38px;
letter-spacing: -1px;
}
.services-hero p {
font-size: 12px;
}
/* INTRO */
.services-intro {
padding: 70px 0 30px;
}
/* SERVICES */
.all-services {
padding: 35px 0 70px;
}
.service-large-card {
display: block;
min-height: auto;
padding: 30px 23px;
}
.service-large-number {
position: absolute;
top: 20px;
right: 20px;
font-size: 27px;
}
.service-large-icon {
width: 65px;
height: 65px;
margin-bottom: 20px;
}
.service-large-content h2 {
font-size: 24px;
}
.service-large-content > p {
font-size: 12px;
}
.service-features {
gap: 8px 13px;
}
.service-features span {
font-size: 10px;
}
.service-view-btn {
margin-top: 3px;
}
/* BENEFITS */
.service-benefits {
padding: 70px 0;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.benefit-card {
min-height: auto;
padding: 28px 23px;
}
/* PROCESS */
.process-section {
padding: 70px 0;
}
.process-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.process-card {
padding: 0 25px;
}
/* CTA */
.cta-section {
padding: 20px 0 60px;
}
.cta-box {
padding: 40px 25px;
}
.cta-content h2 {
font-size: 31px;
}
.cta-content p {
font-size: 12px;
}
.cta-btn {
width: 100%;
}
/* CONTACT */
.contact-strip {
padding-bottom: 60px;
}
.contact-strip-grid {
grid-template-columns: 1fr;
padding: 22px;
}
/* FOOTER */
.footer {
padding-top: 55px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.footer-bottom {
min-height: auto;
padding: 20px 0;
flex-direction: column;
align-items: flex-start;
}
.footer-bottom div {
flex-direction: column;
gap: 8px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.services-hero h1 {
font-size: 33px;
}
.hero-tag {
font-size: 8px;
}
.service-large-card {
padding: 27px 20px;
}
.service-large-content h2 {
font-size: 22px;
}
.service-view-btn {
width: 100%;
}
.contact-info a {
font-size: 10px;
}
}
}
/* contact page styles */
@scope (body.page-contact) {
/* =========================================================
INOVIQ CONTACT PAGE CSS
DARK BLUE + BLUE + WHITE
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:scope {
font-family: "DM Sans", sans-serif;
background: #FFFFFF;
color: #0D1935;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
button,
input,
textarea {
font-family: inherit;
}
:scope {
--dark-blue: #0A1328;
--blue: #245E9C;
--bright-blue: #3D85D1;
--light-blue: #EAF5FA;
--soft-blue: #F5FAFD;
--white: #FFFFFF;
--text: #0D1935;
--muted: #2B70B9;
--border: #D5EBF5;
}
/* ================= HEADER ================= */
.site-header {
width: 100%;
background: #FFFFFF;
border-bottom: 1px solid var(--border);
position: relative;
z-index: 1000;
}
.header-container {
width: 90%;
max-width: 1280px;
min-height: 86px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
/* LOGO */
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--dark-blue);
color: white;
border-radius: 12px;
font-family: "Manrope", sans-serif;
font-size: 22px;
font-weight: 800;
}
.logo-name {
color: var(--dark-blue);
font-family: "Manrope", sans-serif;
font-size: 26px;
font-weight: 800;
}
/* NAVIGATION */
.navbar {
display: flex;
align-items: center;
gap: 35px;
}
.navbar a {
position: relative;
color: #255F9D;
font-size: 14px;
font-weight: 600;
transition: 0.3s ease;
}
.navbar a:hover,
.navbar a.active {
color: var(--blue);
}
.navbar a.active::after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 2px;
background: var(--blue);
}
/* HEADER BUTTON */
.header-button {
height: 46px;
padding: 0 22px;
display: flex;
align-items: center;
gap: 8px;
background: var(--dark-blue);
color: white;
border-radius: 30px;
font-size: 13px;
font-weight: 700;
transition: 0.3s ease;
}
.header-button:hover {
background: var(--blue);
transform: translateY(-2px);
}
/* MENU */
.menu-toggle {
display: none;
width: 44px;
height: 44px;
background: white;
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
font-size: 20px;
}
/* ================= HERO ================= */
.contact-hero {
position: relative;
overflow: hidden;
padding: 105px 0 110px;
background:
linear-gradient(
135deg,
#0A1328 0%,
#101F42 60%,
#1C387A 100%
);
color: white;
}
.hero-container {
width: 90%;
max-width: 1280px;
margin: auto;
position: relative;
z-index: 2;
}
.hero-content {
max-width: 850px;
}
.hero-tag {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
color: #9ED2E8;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
}
.hero-tag span {
width: 30px;
height: 2px;
background: var(--bright-blue);
}
.hero-content h1 {
margin-bottom: 25px;
font-family: "Manrope", sans-serif;
font-size: clamp(46px, 6vw, 78px);
line-height: 1.06;
letter-spacing: -3px;
font-weight: 800;
}
.hero-content h1 strong {
display: block;
color: #659EDB;
}
.hero-content p {
max-width: 650px;
color: #BDE0EF;
font-size: 17px;
line-height: 1.8;
}
/* HERO CIRCLES */
.hero-circle {
position: absolute;
border-radius: 50%;
opacity: 0.18;
}
.circle-one {
width: 380px;
height: 380px;
background: #317DCF;
right: -120px;
top: -150px;
}
.circle-two {
width: 230px;
height: 230px;
border: 2px solid #79AADF;
right: 25%;
bottom: -150px;
}
/* ================= CONTACT ================= */
.contact-section {
padding: 110px 0;
background: #FFFFFF;
}
.contact-container {
width: 90%;
max-width: 1280px;
margin: auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 80px;
}
/* INFO */
.section-label {
display: inline-block;
margin-bottom: 16px;
color: var(--blue);
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
}
.contact-info h2 {
margin-bottom: 20px;
color: var(--dark-blue);
font-family: "Manrope", sans-serif;
font-size: clamp(38px, 4vw, 56px);
line-height: 1.12;
letter-spacing: -2px;
font-weight: 800;
}
.contact-info h2 span {
display: block;
color: var(--blue);
}
.contact-description {
max-width: 500px;
margin-bottom: 40px;
color: var(--muted);
font-size: 15px;
line-height: 1.8;
}
/* CONTACT CARDS */
.contact-card {
display: flex;
gap: 18px;
padding: 22px 0;
border-top: 1px solid var(--border);
}
.contact-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-blue);
color: var(--blue);
border-radius: 12px;
}
.contact-card h3 {
margin-bottom: 5px;
color: var(--dark-blue);
font-size: 15px;
font-weight: 800;
}
.contact-card p,
.contact-card a {
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}
.contact-card a:hover {
color: var(--blue);
}
/* COMPANY DETAILS */
.company-details {
margin-top: 25px;
padding: 22px;
background: var(--soft-blue);
border: 1px solid var(--border);
border-radius: 12px;
}
.company-details h3 {
margin-bottom: 15px;
color: var(--dark-blue);
font-size: 15px;
}
.company-detail-row {
display: flex;
justify-content: space-between;
gap: 15px;
padding: 9px 0;
border-bottom: 1px solid #DDEFF7;
font-size: 12px;
}
.company-detail-row:last-child {
border-bottom: none;
}
.company-detail-row span {
color: #307CCE;
}
.company-detail-row strong {
color: var(--dark-blue);
text-align: right;
}
/* ================= FORM ================= */
.form-wrapper {
padding: 45px;
background: var(--soft-blue);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 20px 50px rgba(10, 19, 40, 0.07);
}
.form-heading {
margin-bottom: 30px;
}
.form-heading > span {
display: block;
margin-bottom: 10px;
color: var(--blue);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.form-heading h2 {
margin-bottom: 8px;
color: var(--dark-blue);
font-family: "Manrope", sans-serif;
font-size: 34px;
line-height: 1.2;
font-weight: 800;
}
.form-heading h2 strong {
color: var(--blue);
}
.form-heading p {
color: var(--muted);
font-size: 13px;
}
/* FORM */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.form-group label {
margin-bottom: 8px;
color: var(--dark-blue);
font-size: 12px;
font-weight: 700;
}
.form-group input,
.form-group textarea {
width: 100%;
background: white;
border: 1px solid #CBE7F3;
border-radius: 9px;
outline: none;
color: var(--dark-blue);
font-size: 13px;
transition: 0.3s ease;
}
.form-group input {
height: 51px;
padding: 0 15px;
}
.form-group textarea {
min-height: 145px;
padding: 14px 15px;
resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(36, 94, 156, 0.09);
}
.form-group small {
min-height: 15px;
margin-top: 4px;
color: #2866A8;
font-size: 11px;
}
/* BUTTON */
.submit-button {
width: 100%;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border: none;
border-radius: 9px;
background: var(--blue);
color: white;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: 0.3s ease;
}
.submit-button:hover {
background: var(--dark-blue);
}
.submit-button span {
font-size: 19px;
transition: 0.3s ease;
}
.submit-button:hover span {
transform: translateX(5px);
}
#formMessage {
margin-top: 15px;
min-height: 20px;
text-align: center;
font-size: 13px;
}
/* ================= CTA ================= */
.cta-section {
padding: 80px 0;
background: var(--light-blue);
}
.cta-container {
width: 90%;
max-width: 1280px;
margin: auto;
padding: 55px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
background:
linear-gradient(
120deg,
#0A1328,
#112249
);
border-radius: 20px;
}
.cta-label {
display: block;
margin-bottom: 12px;
color: #81AFE1;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.cta-container h2 {
margin-bottom: 10px;
color: white;
font-family: "Manrope", sans-serif;
font-size: clamp(32px, 4vw, 52px);
line-height: 1.15;
font-weight: 800;
}
.cta-container h2 strong {
display: block;
color: #679FDB;
}
.cta-container p {
color: #A9D7EB;
font-size: 14px;
}
.cta-button {
flex-shrink: 0;
padding: 0 25px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: white;
color: var(--dark-blue);
border-radius: 30px;
font-size: 12px;
font-weight: 800;
transition: 0.3s ease;
}
.cta-button:hover {
background: var(--bright-blue);
color: white;
}
/* ================= MAP ================= */
.map-section {
padding: 100px 0;
background: white;
}
.map-container {
width: 90%;
max-width: 1280px;
margin: auto;
}
.map-heading {
margin-bottom: 30px;
}
.map-heading h2 {
color: var(--dark-blue);
font-family: "Manrope", sans-serif;
font-size: 44px;
line-height: 1.15;
font-weight: 800;
}
.map-heading h2 span {
color: var(--blue);
}
.map-box {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 15px;
box-shadow: 0 15px 40px rgba(10, 19, 40, 0.08);
}
.map-box iframe {
display: block;
width: 100%;
}
/* ================= FOOTER ================= */
.site-footer {
background: var(--dark-blue);
color: white;
}
.footer-container {
width: 90%;
max-width: 1280px;
margin: auto;
padding: 70px 0 60px;
display: grid;
grid-template-columns: 1.5fr 0.8fr 1fr 1.2fr;
gap: 55px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.footer-logo .logo-icon {
background: white;
color: var(--dark-blue);
}
.footer-logo .logo-name {
color: white;
}
.footer-company > p {
max-width: 330px;
color: #8ECAE4;
font-size: 13px;
line-height: 1.8;
}
.footer-column {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-column h3 {
margin-bottom: 20px;
font-size: 14px;
}
.footer-column a {
margin-bottom: 11px;
color: #7DADE1;
font-size: 12px;
transition: 0.3s ease;
}
.footer-column a:hover {
color: white;
transform: translateX(3px);
}
.footer-contact p {
max-width: 280px;
color: #7DADE1;
font-size: 12px;
line-height: 1.7;
}
/* FOOTER BOTTOM */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom-container {
width: 90%;
max-width: 1280px;
min-height: 75px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-bottom p,
.footer-bottom a {
color: #4B8ED5;
font-size: 11px;
}
.footer-bottom a {
margin-left: 25px;
}
.footer-bottom a:hover {
color: white;
}
/* ================= TABLET ================= */
@media (max-width: 1000px) {
.navbar {
gap: 20px;
}
.header-button {
display: none;
}
.contact-container {
grid-template-columns: 1fr;
}
.cta-container {
flex-direction: column;
align-items: flex-start;
}
.footer-container {
grid-template-columns: 1fr 1fr;
}
}
/* ================= MOBILE ================= */
@media (max-width: 768px) {
.header-container {
min-height: 75px;
}
.navbar {
display: none;
position: absolute;
top: 75px;
left: 0;
width: 100%;
padding: 25px;
background: white;
border-bottom: 1px solid var(--border);
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.navbar.show {
display: flex;
}
.menu-toggle {
display: flex;
align-items: center;
justify-content: center;
}
.contact-hero {
padding: 75px 0 80px;
}
.hero-content h1 {
font-size: 47px;
}
.contact-section {
padding: 75px 0;
}
.contact-info h2 {
font-size: 42px;
}
.form-wrapper {
padding: 28px 22px;
}
.form-row {
grid-template-columns: 1fr;
}
.cta-container {
padding: 35px 25px;
}
.cta-button {
width: 100%;
}
.map-section {
padding: 70px 0;
}
.map-heading h2 {
font-size: 38px;
}
.map-box iframe {
height: 320px;
}
.footer-container {
grid-template-columns: 1fr;
gap: 40px;
padding: 55px 0 45px;
}
.footer-bottom-container {
min-height: auto;
padding: 22px 0;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.footer-bottom a {
margin-left: 0;
margin-right: 20px;
}
}
/* ================= SMALL MOBILE ================= */
@media (max-width: 480px) {
.header-container,
.hero-container,
.contact-container,
.cta-container,
.map-container,
.footer-container,
.footer-bottom-container {
width: 92%;
}
.logo-name {
font-size: 23px;
}
.hero-content h1 {
font-size: 39px;
}
.contact-info h2 {
font-size: 36px;
}
.form-wrapper {
padding: 24px 17px;
}
.form-heading h2 {
font-size: 29px;
}
.cta-container h2 {
font-size: 32px;
}
.map-heading h2 {
font-size: 34px;
}
.company-detail-row {
flex-direction: column;
gap: 2px;
}
.company-detail-row strong {
text-align: left;
}
}
}
@scope (body.page-service) {
.service-detail {
color: #101F42;
background: #F4FAFC;
}
.service-detail-hero {
min-height: 410px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(180px, 0.5fr);
align-items: center;
gap: 48px;
padding: 70px max(24px, calc((100vw - 1200px) / 2));
color: #FFFFFF;
background: linear-gradient(115deg, #091227 0%, #102044 100%);
}
.service-detail-hero-copy {
max-width: 720px;
}
.service-detail-breadcrumb {
display: inline-flex;
gap: 10px;
margin-bottom: 42px;
color: #BBDFEF;
font-size: 13px;
text-decoration: none;
}
.service-detail-eyebrow {
display: block;
margin-bottom: 12px;
color: #2F78C7;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.service-detail-hero h1 {
max-width: 720px;
margin: 0;
font-size: clamp(38px, 5vw, 64px);
line-height: 1.08;
}
.service-detail-hero-copy > p {
max-width: 620px;
margin: 22px 0 0;
color: #CBE7F3;
font-size: 17px;
line-height: 1.7;
}
.service-detail-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
margin-top: 30px;
}
.service-detail-button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 0 20px;
border-radius: 4px;
color: #FFFFFF;
background: #2969AD;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.service-detail-button:hover {
background: #225790;
}
.service-detail-contact {
color: #FFFFFF;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.service-detail-mark {
width: min(100%, 300px);
aspect-ratio: 1;
display: grid;
place-items: center;
justify-self: center;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 50%;
color: #94CDE6;
background: rgba(255, 255, 255, 0.08);
font-size: 54px;
font-weight: 800;
}
.service-detail-overview,
.service-detail-packages,
.service-detail-cta {
width: min(1200px, calc(100% - 48px));
margin: 0 auto;
}
.service-detail-overview {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 56px;
align-items: end;
padding: 78px 0 38px;
}
.service-detail-overview h2,
.service-detail-section-heading h2,
.service-detail-cta h2 {
margin: 0;
font-size: 32px;
line-height: 1.2;
}
.service-detail-overview > p,
.service-detail-section-heading > p {
margin: 0;
color: #2867AA;
line-height: 1.7;
}
.service-detail-features {
width: min(1200px, calc(100% - 48px));
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 0 auto;
padding: 12px 0 80px;
}
.service-detail-feature {
min-height: 185px;
padding: 23px;
border: 1px solid #D8EDF6;
background: #FFFFFF;
}
.service-detail-feature > span {
color: #2969AD;
font-size: 12px;
font-weight: 800;
}
.service-detail-feature h3 {
margin: 20px 0 8px;
font-size: 17px;
}
.service-detail-feature p {
margin: 0;
color: #2867AA;
font-size: 14px;
line-height: 1.6;
}
.service-detail-packages {
padding: 64px 0 88px;
border-top: 1px solid #D8EDF6;
}
.service-detail-section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 28px;
margin-bottom: 28px;
}
.service-detail-section-heading h2 {
max-width: 650px;
}
.service-detail-section-heading > p {
max-width: 360px;
font-size: 14px;
}
.service-detail-package-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.service-detail-package {
min-width: 0;
display: flex;
flex-direction: column;
padding: 21px;
border: 1px solid #D8EDF6;
background: #FFFFFF;
}
.service-detail-package-service {
color: #2B70B9;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.service-detail-package h3 {
min-height: 44px;
margin: 15px 0 18px;
font-size: 17px;
line-height: 1.3;
}
.service-detail-price {
margin: 0 0 18px;
color: #091227;
font-size: 28px;
font-weight: 800;
}
.service-detail-price span {
margin-right: 3px;
font-size: 18px;
}
.service-detail-package > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 15px;
border-top: 1px solid #E0F1F8;
color: #245E9C;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.service-detail-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-bottom: 80px;
padding: 34px;
color: #FFFFFF;
background: #091227;
}
.service-detail-cta .service-detail-eyebrow {
color: #94CDE6;
}
.service-detail-cta h2 {
max-width: 720px;
font-size: 26px;
}
.service-detail-empty {
width: min(720px, calc(100% - 48px));
min-height: 420px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 0 auto;
}
.service-detail-empty h1 {
margin: 0;
font-size: 42px;
}
.service-detail-empty p {
color: #2867AA;
line-height: 1.6;
}
@media (max-width: 900px) {
.service-detail-hero {
grid-template-columns: minmax(0, 1fr) 180px;
gap: 24px;
}
.service-detail-features {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-detail-package-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.service-detail-hero {
min-height: auto;
grid-template-columns: 1fr;
padding: 38px 24px 52px;
}
.service-detail-breadcrumb {
margin-bottom: 28px;
}
.service-detail-hero h1 {
font-size: 38px;
}
.service-detail-mark {
width: 112px;
justify-self: start;
font-size: 27px;
}
.service-detail-overview {
grid-template-columns: 1fr;
gap: 16px;
padding-top: 54px;
}
.service-detail-overview h2,
.service-detail-section-heading h2 {
font-size: 27px;
}
.service-detail-features {
padding-bottom: 56px;
}
.service-detail-section-heading,
.service-detail-cta {
align-items: flex-start;
flex-direction: column;
}
.service-detail-package-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-detail-package {
padding: 16px;
}
.service-detail-cta {
width: 100%;
margin-bottom: 48px;
padding: 30px 24px;
}
}
@media (max-width: 420px) {
.service-detail-features,
.service-detail-package-grid {
grid-template-columns: 1fr;
}
}
}
.payment-launcher {
position: fixed;
right: max(18px, env(safe-area-inset-right));
bottom: max(18px, env(safe-area-inset-bottom));
z-index: 1200;
}
.payment-launcher-button {
min-height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 21px;
border: 1px solid #FFFFFF;
border-radius: 4px;
color: #FFFFFF;
background: #091125;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.payment-launcher-button > span {
width: 21px;
height: 21px;
display: grid;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
font-size: 17px;
line-height: 1;
}
.payment-modal {
width: min(540px, calc(100% - 28px));
max-width: none;
max-height: min(780px, calc(100dvh - 28px));
overflow-y: auto;
padding: 0;
border: 1px solid #3E86D2;
border-radius: 6px;
color: #091125;
background: #FFFFFF;
box-shadow: 0 24px 90px rgba(0, 0, 0, 0.4);
}
.payment-modal[open] {
position: fixed;
inset: auto;
top: 50vh;
left: 50vw;
margin: 0;
transform: translate(-50%, -50%);
}
.payment-modal::backdrop {
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(3px);
}
.payment-modal-panel {
padding: 30px;
}
.payment-modal-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.payment-modal-eyebrow {
color: #2764A5;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
}
.payment-modal-heading h2 {
margin: 7px 0 0;
font-size: 25px;
line-height: 1.2;
}
.payment-modal-close {
width: 38px;
height: 38px;
flex: 0 0 auto;
border: 1px solid #ACD9EC;
border-radius: 3px;
color: #091125;
background: #FFFFFF;
font-size: 25px;
line-height: 1;
cursor: pointer;
}
.payment-modal-description {
margin: 14px 0 24px;
color: #20538A;
font-size: 14px;
line-height: 1.55;
}
.payment-modal-custom-amount {
margin-top: 14px;
}
.payment-modal-custom-amount label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 700;
}
#payment-modal-form > label:not(.payment-modal-consent) {
display: block;
margin: 15px 0 6px;
font-size: 13px;
font-weight: 700;
}
#payment-modal-form > label > span {
color: #2764A5;
font-weight: 400;
}
#payment-modal-form input:not([type="checkbox"]),
#payment-modal-form select {
width: 100%;
min-height: 46px;
padding: 10px 12px;
border: 1px solid #91CCE5;
border-radius: 3px;
color: #091125;
background: #FFFFFF;
font: inherit;
font-size: 14px;
}
#payment-modal-form input:focus,
#payment-modal-form select:focus,
.payment-modal-close:focus-visible,
.payment-launcher-button:focus-visible {
outline: 2px solid #20538A;
outline-offset: 2px;
}
.payment-modal-consent {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
align-items: start;
margin: 19px 0;
color: #20538A;
font-size: 12px;
line-height: 1.5;
}
.payment-modal-consent input {
width: 16px;
height: 16px;
margin: 1px 0 0;
accent-color: #132653;
}
.payment-modal-submit {
width: 100%;
min-height: 48px;
border: 0;
border-radius: 3px;
color: #FFFFFF;
background: #0D1A37;
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.payment-modal-submit:hover {
background: #1A336E;
}
.payment-modal-submit:disabled {
opacity: 0.65;
cursor: wait;
}
.payment-modal-message {
min-height: 20px;
margin: 12px 0 0;
color: #20538A;
font-size: 13px;
line-height: 1.5;
}
.payment-modal-message.is-error {
color: #0D1A37;
font-weight: 700;
}
.payment-modal-message.is-success {
color: #1A336E;
}
@media (max-width: 520px) {
.payment-modal-panel {
padding: 22px 18px;
}
.payment-modal-heading h2 {
font-size: 22px;
}
.payment-launcher-button {
min-height: 48px;
padding: 0 16px;
}
}