/*RESET + ROOT + BASE START*/
html {
box-sizing: border-box;
scroll-behavior: smooth;
overflow-x: hidden;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
:root {
--header-height: 88px;
/* Primary Brand Colors */
--primary-dark: #0a0d3f;
--primary: #111564;
--primary-soft: #23288a;
--primary-light: #3a40a3;
/* Secondary / Surface Colors */
--secondary: #081116;
--secondary-soft: #10202a;
--secondary-light: #18313f;
/* Accent / CTA Colors */
--accent: #00afef;
--accent-dark: #008fc3;
--accent-light: #7ed8f8;
--accent-soft: #e6f8fe;
/* Base Colors */
--white: #ffffff;
--white-soft: rgba(255, 255, 255, 0.88);
--bg-light: #f8fafc;
--bg-soft: #eef4f9;
--bg-section: #f3f7fb;
/* Text Colors */
--text-dark: #0f172a;
--text-soft: #475569;
--text-light: #64748b;
--text-white: #ffffff;
--text-white-soft: rgba(255, 255, 255, 0.85);
/* UI / Border */
--border: #dbe4ee;
--border-soft: #e8eef5;
--border-dark: rgba(255, 255, 255, 0.14);
--overlay: rgba(17, 21, 100, 0.72);
/* Shadows */
--shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
--shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.12);
--shadow-card: 0 10px 30px rgba(2, 6, 23, 0.08);
/* Motion & Radius */
--transition: 0.3s ease;
--radius-sm: 10px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 22px;
}
body {
font-family: Arial, sans-serif;
background: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
}
body.popup-open {
overflow: hidden;
}
a {
text-decoration: none;
color: inherit;
}
ul,
ol {
list-style: none;
}
img {
max-width: 100%;
display: block;
height: auto;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
border: none;
background: none;
cursor: pointer;
}
/*RESET + ROOT + BASE START*/
/*BUTTON SYSTEM*/
/* BASE BUTTON */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: clamp(44px, 6vw, 46px);
padding: 0 18px;
border-radius: var(--radius-md);
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: var(--transition);
border: 1px solid transparent;
}
/* HEADER CTA (smaller) */
.cta-btn {
min-height: 42px;
padding: 0 14px;
font-size: 14px;
border-radius: 6px;
background: var(--accent);
color: var(--white);
}
.cta-btn:hover {
background: var(--white);
color: var(--primary-dark);
}
/* PRIMARY BUTTON */
.btn-primary {
background: var(--accent);
color: var(--white);
border: 1px solid var(--accent);
transition: all 0.3s ease;
}
/* HOVER (your requirement) */
.btn-primary:hover {
background: var(--white); /* white bg */
color: var(--accent-dark); /* text accent-dark */
border-color: var(--accent); /* border accent */
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 175, 239, 0.25);
}
/* ACTIVE */
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(0, 175, 239, 0.2);
}
/* FOCUS */
.btn-primary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* SECONDARY BUTTON (outline) */
.btn-secondary {
background: transparent;
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
}
/* HOVER (dull + branded) */
.btn-secondary:hover {
background: rgba(0, 175, 239, 0.08); /* your accent soft */
color: var(--white);
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: none;
}
/* ACTIVE */
.btn-secondary:active {
transform: translateY(0);
}
/* FOCUS */
.btn-secondary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* WHATSAPP */
/* WHATSAPP BUTTON */
.btn-whatsapp {
background: #25d366;
color: #ffffff;
border: 1px solid #25d366;
gap: 6px;
transition: all 0.3s ease;
}
/* HOVER */
.btn-whatsapp:hover {
background: #111564;
color: #ffffff;
border-color: #00afef;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 175, 239, 0.22);
}
.btn-whatsapp:hover i {
color: #ffffff;
}
/* ACTIVE */
.btn-whatsapp:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(0, 175, 239, 0.16);
}
.btn-whatsapp i {
color: #ffffff !important;
}
/* ICON */
.btn-whatsapp i {
font-size: 16px;
}
/* LIGHT (white button) */
.btn-light {
background: #ffffff;
color: var(--primary);
border-color: #ffffff;
}
.btn-light:hover {
background: #f1f5f9;
}
/* REQUEST QUOTE (special CTA) */
.btn-request-quote {
min-height: 48px;
padding: 0 22px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
background: var(--accent);
color: #ffffff;
border-color: var(--accent);
}
.btn-request-quote:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
transform: translateY(-2px);
}
/*RESET + ROOT + BASE START*/
/* HEADER SECTION CSS START */
.header {
position: relative;
z-index: 1000;
background: #0a0d3f;
}
.container {
width: min(100% - 24px, 1200px);
margin: 0 auto;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 70px;
}
/* MENU BUTTON */
.menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
border: none;
background: transparent;
color: var(--accent);
font-size: 24px;
cursor: pointer;
transition: var(--transition);
}
.menu-btn:hover {
color: var(--white);
}
/* LOGO */
.logo {
flex-shrink: 0;
}
.logo img {
display: block;
width: 110px;
height: auto;
}
/* HEADER BUTTON */
.header-btn {
display: flex;
align-items: center;
flex-shrink: 0;
}
.cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 14px;
border: none;
border-radius: 12px;
background: var(--accent);
color: var(--white);
font-size: 14px;
font-weight: 600;
line-height: 1;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: var(--transition);
}
.cta-btn:hover {
background: var(--accent-dark);
}
/* =========================
MOBILE NAV
========================= */
.navbar {
position: absolute;
top: 70px;
left: 0;
width: 80%;
max-width: 320px;
height: calc(100dvh - 70px);
padding: 16px 0;
background: var(--primary-dark);
box-shadow: var(--shadow);
overflow-y: auto;
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 999;
}
.navbar.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.nav-list {
display: block;
}
.nav-list > li > a {
display: block;
width: 60%;
margin: 10px auto;
padding: 14px 18px;
color: var(--white);
text-align: center;
transition: var(--transition);
}
.nav-list > li > a:hover {
color: var(--accent);
background: rgba(255, 255, 255, 0.05);
}
.nav-list > li > a.active {
color: var(--accent);
border-bottom: 3px solid var(--accent);
border-radius: 2px;
}
/* BODY LOCK */
body.menu-open,
body.popup-open {
overflow: hidden;
}
/* =========================
POPUP OVERLAY
========================= */
.popup-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(10, 13, 63, 0.82);
overflow-y: auto;
}
.popup-overlay.active {
display: flex;
}
/* =========================
POPUP BOX
========================= */
.popup-box {
position: relative;
width: 100%;
max-width: 460px;
max-height: 85dvh;
overflow-y: auto;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
animation: popupFade 0.3s ease;
scrollbar-width: thin;
scrollbar-color: rgba(0, 175, 239, 0.35) transparent;
}
.popup-box::-webkit-scrollbar {
width: 6px;
}
.popup-box::-webkit-scrollbar-thumb {
background: rgba(0, 175, 239, 0.35);
border-radius: 999px;
}
.popup-box::-webkit-scrollbar-track {
background: transparent;
}
/* CLOSE BUTTON */
.popup-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
background: #f3f6fb;
color: #0a0d3f;
font-size: 18px;
cursor: pointer;
transition: 0.3s ease;
}
.popup-close:hover {
background: #e8eef7;
}
/* FORM BOX */
.form-box {
position: relative;
padding: 20px 18px 18px;
background: #ffffff;
border-radius: 20px;
}
.form-box h2 {
margin: 0 40px 14px 0;
color: #0a0d3f;
font-size: 26px;
line-height: 1.15;
font-weight: 700;
text-align: center;
}
/* =========================
FORM LAYOUT
========================= */
#brochureForm {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 0;
color: #1f2937;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
/* improve input spacing */
.form-group input {
padding: 10px 45px 10px 14px;
}
/* better icon size */
.icon i {
font-size: 16px;
}
/* smooth appearance */
.icon {
transition: 0.2s ease;
}
/* better error box alignment */
.input-error-box {
align-items: center;
justify-content: space-between;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
min-height: 44px;
padding: 10px 14px;
border: 1px solid #d8dee8;
border-radius: 12px;
background: #ffffff;
color: #111827;
font-size: 14px;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* ================= INPUT WRAPPER ================= */
.input-wrapper {
position: relative;
}
/* space for icon */
.input-wrapper input {
padding-right: 45px;
}
/* ================= ICON SYSTEM ================= */
.icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%); /* perfect center */
display: none; /* hidden by default */
font-size: 14px;
pointer-events: none;
}
/* success */
.icon.success {
color: green;
}
/* error */
.icon.error {
color: red;
}
.icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: none;
pointer-events: none;
}
/* success */
.icon.success i {
color: #22c55e; /* better green */
}
/* error */
.icon.error i {
color: #ef4444; /* better red */
}
#nameErrorClose i{
color: #ef4444;
}
.input-error-box {
display: none;
margin-top: 4px;
padding: 8px 10px;
border-radius: 8px;
background: #ffeaea;
color: #d93025;
font-size: 13px;
}
.input-error-box i{
color: #ef4444;
}
.input-error-box.active {
display: flex;
justify-content: space-between;
}
/* SUBMIT BUTTON */
#brochureForm > .btn,
#brochureForm > button[type="submit"] {
width: 100%;
min-height: 48px;
margin-top: 4px;
padding: 12px 16px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: var(--white);
font-size: 15px;
font-weight: 700;
line-height: 1;
text-align: center;
cursor: pointer;
transition: 0.3s ease;
}
#brochureForm > .btn:hover,
#brochureForm > button[type="submit"]:hover {
transform: translateY(-2px);
}
/* =========================
THANK YOU POPUP
========================= */
.thank-popup {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(10, 13, 63, 0.18);
}
.thank-popup.active {
display: flex;
}
.thank-box {
width: 100%;
max-width: 400px;
padding: 24px 20px;
text-align: center;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.thank-box h3 {
margin: 0 0 10px;
color: #0a0d3f;
font-size: 24px;
line-height: 1.2;
}
.thank-box p {
margin: 0 0 16px;
color: #4b5563;
font-size: 14px;
line-height: 1.7;
}
.thank-box .btn,
.thank-box button {
width: 100%;
max-width: 180px;
margin: 0 auto;
}
/* =========================
ANIMATION
========================= */
@keyframes popupFade {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================
TABLET
========================= */
@media (min-width: 768px) {
.container {
width: min(100% - 40px, 1200px);
}
.header-inner {
min-height: 78px;
gap: 18px;
}
.logo img {
width: 165px;
}
.cta-btn {
min-height: 44px;
padding: 12px 16px;
}
.navbar {
top: 78px;
width: 320px;
height: calc(100dvh - 78px);
}
.nav-list > li > a {
width: auto;
margin: 0;
padding: 10px 14px;
font-size: 15px;
border-radius: 8px;
}
.nav-list > li > a:hover {
background: rgba(255, 255, 255, 0.08);
}
.nav-list > li > a.active {
background: transparent;
border-bottom: none;
position: relative;
}
.nav-list > li > a.active::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: 4px;
height: 2px;
background: var(--accent);
border-radius: 999px;
}
.popup-overlay {
padding: 20px;
}
.popup-box {
max-width: 460px;
max-height: 86dvh;
}
.form-box {
padding: 20px 18px 18px;
}
.form-box h2 {
font-size: 28px;
margin: 0 40px 14px 0;
}
#brochureForm {
grid-template-columns: 1fr;
gap: 10px;
}
.form-group label {
font-size: 13px;
}
.form-group input,
.form-group select,
.form-group textarea {
min-height: 46px;
font-size: 14px;
}
.form-group textarea {
min-height: 84px;
}
}
/* =========================
DESKTOP
========================= */
@media (min-width: 1024px) {
.menu-btn {
display: none;
}
.header-inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
min-height: 84px;
}
.navbar {
position: static;
justify-self: center;
width: auto;
max-width: none;
height: auto;
padding: 0;
background: transparent;
box-shadow: none;
overflow: visible;
transform: none;
opacity: 1;
visibility: visible;
}
.nav-list {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.nav-list > li > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
margin: 0;
padding: 10px 16px;
color: var(--white);
font-size: 15px;
/*border: 1px solid transparent;*/
/*border-radius: 8px;*/
background: transparent;
transition: var(--transition);
}
.nav-list > li > a.active {
color: var(--accent);
background: transparent;
position: relative;
}
.nav-list > li > a.active::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: -4px;
height: 2px;
background: var(--accent);
border-radius: 999px;
}
.header-btn {
justify-self: end;
}
.cta-btn {
min-height: 46px;
padding: 12px 18px;
}
.popup-overlay {
padding: 24px;
}
.popup-box {
max-width: 480px;
max-height: 92dvh;
overflow-y: hidden;
}
.form-box {
padding: 18px 18px 16px;
}
.popup-close {
top: 12px;
right: 12px;
width: 42px;
height: 42px;
font-size: 18px;
}
.form-box h2 {
font-size: 28px;
margin: 0 42px 12px 0;
}
#brochureForm {
grid-template-columns: 1fr;
gap: 8px;
}
.form-group {
gap: 3px;
}
.form-group label {
font-size: 12.5px;
}
.form-group input,
.form-group select {
min-height: 42px;
padding: 9px 12px;
}
.form-group textarea {
min-height: 70px;
padding: 9px 12px;
}
#brochureForm > .btn,
#brochureForm > button[type="submit"] {
min-height: 44px;
margin-top: 2px;
font-size: 15px;
}
}
/* HEADER SECTION CSS END */
/**********************************************************************/
/* HERO SECTION CSS START */
.hero {
position: relative;
overflow: hidden;
background: url("/assets/images/hero-banner.webp") center center / cover no-repeat;
min-height: calc(100vh - var(--header-height));
padding: 40px 0;
display: flex;
align-items: center;
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(to right, rgba(8, 21, 45, 0.88), rgba(8, 21, 45, 0.55)),
radial-gradient(circle at top right, rgba(45, 183, 245, 0.18), transparent 35%);
}
.hero-container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 32px;
}
.hero-content {
max-width: 100%;
color: var(--white);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
margin-bottom: 18px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
color: var(--white);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
}
.hero .hero-title {
margin: 0 0 16px;
color: var(--white);
font-size: 34px;
font-weight: 800;
line-height: 1.15;
}
.hero .hero-title span {
color: var(--accent);
}
.hero p {
max-width: 640px;
margin: 0 0 28px;
color: rgba(255, 255, 255, 0.84);
font-size: 15px;
line-height: 1.8;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 100%;
margin-bottom: 22px;
}
.hero-buttons .btn {
width: 100%;
min-height: 54px;
padding: 0 20px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
text-align: center;
white-space: nowrap;
transition: all 0.3s ease;
}
.hero-trust {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.hero-trust div {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 12px 14px;
border-radius: 14px;
text-align: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 500;
}
.hero-image {
display: none;
}
.hero-image img {
width: 100%;
max-width: 560px;
display: block;
border-radius: 24px;
object-fit: cover;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 768px) {
.hero {
padding: 80px 0 70px;
}
.hero-container {
gap: 42px;
}
.hero h1 {
font-size: 46px;
}
.hero p {
font-size: 16px;
}
.hero-buttons {
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
max-width: 760px;
}
.hero-buttons .btn {
width: auto;
min-width: 190px;
}
.hero-trust {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (min-width: 1024px) {
.hero {
min-height: calc(100dvh - var(--header-height));
padding: 0;
}
.hero-container {
min-height: calc(100dvh - var(--header-height));
gap: 40px;
}
.hero-content {
max-width: 700px;
}
.hero h1 {
font-size: 58px;
line-height: 1.08;
}
.hero p {
margin-bottom: 32px;
font-size: 17px;
}
.hero-buttons {
flex-wrap: nowrap;
margin-bottom: 30px;
}
.hero-buttons .btn {
min-width: 0;
flex: 0 0 auto;
}
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1280px) {
.hero h1 {
font-size: 64px;
}
.hero p {
max-width: 620px;
}
}
/* HERO SECTION CSS END */
/********************************/
/*WHY CHOOSE SECTION CSS START*/
.why-section {
padding: 24px 0;
background: #f8fafc;
}
.why-section-container {
padding: 24px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
box-shadow:
0 15px 40px rgba(0, 175, 239, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.why-section-head {
max-width: 850px;
margin: 0 auto 40px;
text-align: center;
padding: 24px 20px;
border-radius: 16px;
}
.why-section-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
margin-bottom: 14px;
border-radius: 999px;
background: rgba(14, 165, 233, 0.1);
color: #0ea5e9;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
}
.why-section-title {
margin: 0 0 14px;
font-size: clamp(18px, 2.5vw, 28px);
line-height: 1.2;
color: #0f172a;
}
.why-section-desc {
max-width: 720px;
margin: 0 auto 12px;
padding: 12px 16px;
background: #e6f1f7;
border-left: 4px solid #00afef;
border-radius: 10px;
font-size: 15px;
line-height: 1.7;
color: #0f172a;
box-shadow:
0 12px 28px rgba(0, 175, 239, 0.14),
0 4px 12px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
transition: all 0.3s ease;
}
.why-section-desc:hover {
transform: translateY(-2px);
box-shadow:
0 18px 38px rgba(0, 175, 239, 0.2),
0 8px 18px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.why-section-desc:last-child {
margin-bottom: 0;
}
.why-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.why-card {
padding: 32px 24px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
box-shadow:
0 15px 40px rgba(0, 175, 239, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
text-align: center;
transition: all 0.3s ease;
}
.why-card:hover {
transform: translateY(-6px);
box-shadow:
0 25px 60px rgba(0, 175, 239, 0.35),
0 10px 25px rgba(0, 175, 239, 0.25),
inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
.why-card:active {
transform: scale(0.98);
}
.why-card-icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
border-radius: 50%;
background: #e0f2fe;
color: #0ea5e9;
display: flex;
align-items: center;
justify-content: center;
}
.why-card-icon i {
font-size: 26px;
line-height: 1;
}
.why-card-title {
margin: 0 0 10px;
font-size: 18px;
line-height: 1.4;
color: #0f172a;
}
.why-card-text {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #64748b;
}
/* TABLET */
@media (min-width: 768px) {
.why-section {
padding: 40px 0;
}
.why-section-head {
margin: 0 auto 50px;
}
.why-section-desc {
font-size: 16px;
}
.why-grid {
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.why-card {
padding: 28px 22px;
border-radius: 16px;
}
.why-card-icon {
width: 60px;
height: 60px;
margin-bottom: 18px;
}
.why-card-icon i {
font-size: 30px;
}
.why-card-title {
font-size: 19px;
}
.why-card-text {
font-size: 15px;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.why-section {
padding: 48px 0;
}
.why-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.why-card-icon {
width: 64px;
height: 64px;
}
.why-card-icon i {
font-size: 34px;
}
.why-card-title {
font-size: 18px;
margin-bottom: 12px;
}
}
/*WHY CHOOSE SECTION CSS END*/
/***************************************/
/*COMPANY OVERVIEW SECTION CSS START*/
.home-overview-section {
padding: 24px 0;
background: #f8fafc;
}
/* MAIN BOX */
.home-overview-container {
background: #0a0d3f;
color: #ffffff;
padding: 24px 16px;
border-radius: 18px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
text-align: center;
}
/* BADGE */
.home-overview-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 14px;
margin-bottom: 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #00afef;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.home-overview-badge i {
font-size: 14px;
}
/* TITLE */
.home-overview-title {
margin: 0 0 14px;
font-size: clamp(18px, 6vw, 22px);
line-height: 1.35;
font-weight: 700;
color: #ffffff;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.home-overview-title span {
display: block;
font-size: inherit;
color: #00afef;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* CONTENT */
.home-overview-content {
max-width: 850px;
margin: 0 auto 24px;
}
.home-overview-text {
margin: 0 0 16px;
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.88);
}
.home-overview-text:last-child {
margin-bottom: 0;
}
/* HIGHLIGHTS */
.home-overview-highlights {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin: 24px 0;
}
.overview-highlight-item {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #ffffff;
text-align: center;
}
.overview-highlight-item i {
color: #00afef;
}
/* BUTTON WRAP */
.home-overview-btn {
margin-top: 8px;
}
.home-overview-btn .btn,
.home-overview-btn .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
/* BUTTON */
.home-overview-btn .btn-primary {
background: #00afef;
color: #fff;
border: none;
border-radius: 12px;
padding: 14px 28px;
cursor: pointer;
text-decoration: none;
backdrop-filter: blur(8px);
transition: all 0.3s ease;
box-shadow:
0 10px 25px rgba(0, 175, 239, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* HOVER */
.home-overview-btn .btn-primary:hover {
transform: translateY(-3px);
box-shadow:
0 20px 45px rgba(0, 175, 239, 0.45),
0 8px 20px rgba(0, 175, 239, 0.3),
inset 0 2px 6px rgba(255, 255, 255, 0.6);
}
/* ACTIVE */
.home-overview-btn .btn-primary:active {
transform: translateY(0);
box-shadow:
0 6px 15px rgba(0, 175, 239, 0.3),
inset 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* TABLET */
@media (min-width: 768px) {
.home-overview-section {
padding: 32px 0;
}
.home-overview-container {
padding: 32px 24px;
border-radius: 24px;
}
.home-overview-title {
font-size: clamp(22px, 4vw, 28px);
line-height: 1.3;
white-space: nowrap;
}
.home-overview-title span {
display: inline;
white-space: nowrap;
}
.home-overview-text {
font-size: 16px;
line-height: 1.8;
}
.home-overview-highlights {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin: 28px 0;
}
.overview-highlight-item {
justify-content: center;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.home-overview-section {
padding: 40px 0;
}
.home-overview-container {
padding: 36px 32px;
}
.home-overview-title {
font-size: clamp(24px, 3vw, 32px);
}
.home-overview-content {
max-width: 900px;
}
.home-overview-highlights {
gap: 16px;
}
.overview-highlight-item {
padding: 13px 18px;
}
}
/*COMPANY OVERVIEW SECTION CSS END*/
/***************************************/
/* SERVICES SECTION CSS START*/
.services-section {
padding: 24px 0;
}
.gradient-text {
background: linear-gradient(135deg, #111564 0%, #00afef 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.services-container {
padding: 24px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
box-shadow:
0 15px 40px rgba(0, 175, 239, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* SECTION HEAD */
.services-section .section-head {
text-align: center;
margin-bottom: 32px;
}
.section-tag {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #111564, #3a40a3);
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 12px;
}
.services-section h2 {
font-size: 26px;
margin-bottom: 12px;
color: var(--text-dark);
}
.services-section p {
font-size: 15px;
color: var(--text-soft);
line-height: 1.7;
max-width: 520px;
margin: 0 auto;
}
/* GRID */
.grid-4 {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* CARD */
.service-card {
text-align: center;
padding: 32px 24px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 175, 239, 0.12);
box-shadow:
0 15px 40px rgba(0, 175, 239, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
}
/* ONLY ONE HOVER */
.service-card:hover {
transform: translateY(-6px);
background: rgba(17, 21, 100, 0.9);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.45),
0 10px 25px rgba(0, 175, 239, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.service-card:active {
transform: scale(0.98);
}
/* ICON */
.service-card i {
font-size: 22px;
color: #00afef;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.service-card h3 {
font-size: 16px;
margin-bottom: 8px;
color: var(--text-dark);
transition: all 0.3s ease;
}
.service-card p {
font-size: 14px;
color: var(--text-soft);
transition: all 0.3s ease;
}
/* HOVER TEXT FIX */
.service-card:hover h3,
.service-card:hover p {
color: #ffffff;
}
.service-card:hover i {
color: #00afef;
}
/* CTA BUTTON */
.services-cta {
margin-top: 26px;
text-align: center;
}
.services-cta .btn {
width: 100%;
max-width: 220px;
}
/* TABLET */
@media (min-width: 768px) {
.services-section {
padding: 80px 0;
}
.services-section h2 {
font-size: 34px;
}
.services-section p {
font-size: 16px;
max-width: 640px;
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.service-card {
padding: 26px 18px;
}
.service-card h3 {
font-size: 18px;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.services-section {
padding: 40px 0;
}
.services-section h2 {
font-size: 44px;
}
.services-section p {
font-size: 17px;
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.service-card {
padding: 32px 22px;
border-radius: 22px;
}
.service-card i {
font-size: 28px;
}
.service-card h3 {
font-size: 20px;
}
.service-card p {
font-size: 15px;
}
.services-cta {
margin-top: 32px;
}
.services-cta .btn {
max-width: 240px;
}
}
/* SERVICES SECTION CSS END*/
/***************************************/
/* FEATURED PROJECT SECTION CSS START */
/* FEATURED PROJECT SECTION */
.featured-project {
position: relative;
padding: 60px 0;
background: #0f172a;
color: #ffffff;
overflow: hidden;
}
/* BACKGROUND IMAGE */
.featured-project::before {
content: "";
position: absolute;
inset: 0;
background: url("/assets/images/featured-project-bg.webp") center center / cover no-repeat;
z-index: 0;
}
/* DARK OVERLAY */
.featured-project::after {
content: "";
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.75);
z-index: 1;
}
/* WRAPPER */
.featured-project-wrap {
position: relative;
z-index: 2;
}
/* CONTENT */
.featured-project-content {
max-width: 100%;
text-align: center;
}
/* TAG */
.featured-project .section-tag {
display: inline-block;
margin-bottom: 14px;
padding: 6px 12px;
font-size: 13px;
font-weight: 600;
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
border-radius: 999px;
}
/* TITLE */
.project-title,
.featured-project-content h2 {
margin: 0 0 16px;
font-size: clamp(24px, 6vw, 32px);
line-height: 1.25;
font-weight: 700;
color: #ffffff;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* TEXT */
.featured-project-content p {
margin: 0 auto 18px;
max-width: 680px;
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.88);
}
/* BUTTON */
.featured-project .btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 200px;
margin: 0 auto;
}
/* TABLET */
@media (min-width: 768px) {
.featured-project {
padding: 80px 0;
}
.featured-project-content {
max-width: 700px;
margin: 0 auto;
}
.project-title,
.featured-project-content h2 {
font-size: clamp(30px, 4vw, 42px);
line-height: 1.2;
}
.featured-project-content p {
font-size: 16px;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.featured-project {
padding: 100px 0;
}
.featured-project-wrap {
display: flex;
align-items: center;
min-height: 420px;
}
.featured-project-content {
max-width: 600px;
text-align: left;
}
.project-title,
.featured-project-content h2 {
font-size: clamp(38px, 3vw, 52px);
line-height: 1.15;
text-align: left;
white-space: nowrap;
}
.featured-project-content p {
margin: 0 0 18px;
max-width: 520px;
font-size: 18px;
}
.featured-project .btn {
margin: 0;
max-width: 220px;
}
}
/* FEATURED PROJECT SECTION CSS END */
/***********************************************/
/* CTA PAGE CSS START */
.cta-section-main {
padding: 60px 0;
background: linear-gradient(135deg, #0b1e3c 0%, #111564 100%);
color: #ffffff;
overflow: hidden;
}
.cta-wrap-main {
display: flex;
flex-direction: column;
gap: 24px;
padding: 28px 20px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
backdrop-filter: blur(8px);
}
.cta-content-main {
text-align: center;
}
.cta-tag {
display: inline-block;
margin-bottom: 14px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.cta-title {
margin: 0 0 12px;
font-size: clamp(18px, 5vw, 24px);
line-height: 1.25;
font-weight: 700;
color: #ffffff;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.cta-text {
margin: 0;
font-size: 15px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.86);
}
.cta-actions-main {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.cta-btn-primary,
.cta-btn-whatsapp {
width: 100%;
max-width: 240px;
justify-content: center;
}
.cta-btn-whatsapp {
display: inline-flex;
align-items: center;
gap: 8px;
background: #25d366;
border: 1px solid #25d366;
color: #ffffff;
}
.cta-btn-whatsapp:hover {
background: #1ebe5b;
border-color: #1ebe5b;
color: #ffffff;
}
.cta-btn-whatsapp i {
font-size: 18px;
}
/* TABLET */
@media (min-width: 768px) {
.cta-section-main {
padding: 80px 0;
}
.cta-wrap-main {
padding: 40px 32px;
gap: 28px;
}
.cta-title {
line-height: 1.2;
}
.cta-text {
font-size: 16px;
max-width: 700px;
margin: 0 auto;
}
.cta-actions-main {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.cta-btn-primary,
.cta-btn-whatsapp {
width: auto;
min-width: 200px;
max-width: none;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.cta-section-main {
padding: 100px 0;
}
.cta-wrap-main {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 48px 56px;
}
.cta-content-main {
flex: 1 1 60%;
text-align: left;
}
.cta-title {
line-height: 1.15;
text-align: left;
white-space: nowrap;
}
.cta-text {
margin: 0;
max-width: 620px;
font-size: 17px;
}
.cta-actions-main {
flex: 0 0 auto;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 14px;
}
.cta-btn-primary,
.cta-btn-whatsapp {
min-width: 190px;
}
}
/* CTA PAGE CSS START */
/* ABOUT PAGE CSS START */
.about-page-overview{
padding: 40px 0;
}
.about-page .overview-top {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
background: var(--white);
padding: 20px 16px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
}
.about-page .overview-image {
width: 100%;
max-width: 220px;
height: auto;
margin: 0 auto;
border-radius: var(--radius-md);
overflow: hidden;
text-align: center;
/*background: var(--primary);*/
/*background: #1E3A8A;*/
/*box-shadow: 0 10px 30px rgba(11, 31, 92, 0.4);*/
padding: 2px;
}
.about-page .overview-image img {
display: block;
width: 100%; /* slightly smaller */
max-width: 400px; /* control max size */
height: auto;
margin: 0 auto; /* center */
box-shadow: 0 10px 30px rgba(11, 31, 92, 0.4);
}
.about-page .overview-image span {
display: block;
margin-top: 10px;
font-size: 14px;
font-weight: 600;
color: White;
}
.about-page .overview-content {
text-align: center;
}
.about-page .overview-content .section-title {
font-size: 28px;
margin-bottom: 14px;
color: var(--primary);
text-align: center;
box-shadow: ;
}
.overview-content {
display: flex;
flex-direction: column;
align-items: center;
}
.overview-desc {
width: 100%;
max-width: 720px;
margin-bottom: 16px;
padding: 16px 20px;
background: #cfd8df; /* better contrast than current */
border-radius: 14px;
color: #0f172a;
text-align: center;
line-height: 1.7;
}
.overview-desc {
max-width: 720px;
margin: 0 auto 18px; /* center horizontally */
padding: 16px 20px;
background: #e6f1f7;
border-radius: 12px;
color: #0f172a;
text-align: center; /* center text */
line-height: 1.7;
}
.about-page .overview-content .highlight{
max-width: 700px;
margin: 0 auto 12px;
line-height: 1.8;
color: var(--text-soft);
}
.overview-highlight {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 16px;
padding: 14px;
background: rgba(0, 175, 239, 0.08);
border-left: 3px solid var(--accent);
border-radius: 8px;
}
.overview-highlight i {
font-size: 18px;
color: var(--accent);
margin-top: 3px;
}
.overview-highlight p {
margin: 0;
color: var(--text-dark);
line-height: 1.7;
}
/* ---------------- MISSION & VISION ---------------- */
/* ---------------- MISSION & VISION ---------------- */
.about-page .mission-vision-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 24px;
}
.about-page .info-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, #111564, #3a40a3);
color: white;
/*background: var(--white);*/
padding: 20px 18px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-page .info-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}
.about-page .info-card-content {
flex: 1;
}
.about-page .info-card-content h3 {
font-size: 18px;
margin-bottom: 6px;
color: var(--white);
}
.about-page .info-card-content p {
font-size: 14.5px;
line-height: 1.7;
color: var(--white);
}
/* ICON */
.about-page .info-card-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--accent-soft);
display: flex;
align-items: center;
justify-content: center;
}
.about-page .info-card-icon i {
font-size: 20px;
color: var(--accent);
}
/* ---------------- RESPONSIVE ---------------- */
@media (min-width: 768px) {
.about-page .mission-vision-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---------------- MISSION & VISION ---------------- */
/* ---------------- FOUNDER ---------------- */
.about-page .founder-section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
margin-top: 32px;
padding: 24px; /* needed */
border-radius: 16px; /* needed */
background: #ffffff; /* needed for shadow */
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.about-page .founder-title,
.about-page .founder-name,
.about-page .founder-role,
.about-page .founder-expertise-title {
text-align: center !important;
width: 100%;
}
.about-page .founder-image {
width: 100%;
max-width: 300px;
height: auto;
border-radius: 16px;
overflow: hidden;
margin: 0 auto;
text-align: center;
background: var(--white);
box-shadow: whitesmoke;
}
.about-page .founder-image img {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
object-fit: contain;
}
.about-page .founder-image span {
display: block;
margin-top: 10px;
font-size: 18px;
font-weight: 500;
color: black;
font-family: Arial, sans-serif;
}
.about-page .founder-image:hover img {
transform: none;
}
.about-page .founder-content {
width: 100%;
}
.about-page .founder-desc {
max-width: 620px;
margin: 0 auto 14px;
padding: 14px 18px;
background: #e6f1f7; /* soft blue */
border-radius: 10px;
color: #0f172a;
text-align: left;
line-height: 1.7;
}
.about-page .founder-role {
margin-bottom: 12px;
color: var(--text-soft);
text-align: center;
}
.about-page .founder-expertise-box {
margin-top: 20px;
}
.about-page .founder-expertise-list {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
justify-items: center;
padding: 0;
list-style: none;
}
.about-page .founder-expertise-list li {
width: 100%;
max-width: 320px;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: 12px;
background: var(--white);
box-shadow: var(--shadow-soft);
justify-content: flex-start;
text-align: left;
}
.about-page .founder-expertise-list li i {
color: var(--accent);
}
/* ---------------- WHY CHOOSE ---------------- */
.about-page .why-choose-wrap {
margin-top: 48px;
padding: 28px;
border-radius: 18px;
background: linear-gradient(135deg, #111564, #3a40a3);
box-shadow:
0 4px 12px rgba(0,0,0,0.05),
0 12px 32px rgba(0,0,0,0.08);
}
.about-page .why-choose-wrap h2 {
text-align: center;
margin-bottom: 24px;
color:#ffffff;
}
.about-page .why-choose-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.about-page .why-card {
text-align: center;
background: var(--white);
padding: 22px 16px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
}
.about-page .why-card i {
font-size: 24px;
color: var(--accent);
margin-bottom: 12px;
display: inline-block;
}
.about-page .why-card h4 {
font-size: 16px;
line-height: 1.6;
color: var(--text-dark);
}
.about-page .why-choose-note {
max-width: 760px;
margin: 24px auto 0;
text-align: center;
}
.about-page .why-choose-note {
max-width: 720px;
margin: 24px auto 0;
padding: 16px 20px;
background: #e6f1f7;
border-left: 4px solid #00afef;
border-radius: 10px;
color: #0f172a;
text-align: left;
line-height: 1.6;
}
/* ---------------- WORK APPROACH ---------------- */
.about-page .work-approach {
margin-top: 48px;
padding: 28px;
border-radius: 18px;
background: #ffffff;
box-shadow:
0 4px 12px rgba(0,0,0,0.05),
0 12px 32px rgba(0,0,0,0.08);
}
.about-page .work-title {
text-align: center;
margin-bottom: 24px;
}
.about-page .work-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.about-page .work-item {
background: var(--white);
padding: 20px 16px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
text-align: center;
}
.about-page .work-item i {
font-size: 24px;
color: var(--accent);
margin-bottom: 12px;
display: inline-block;
}
.about-page .work-item h4 {
margin-bottom: 8px;
color: var(--text-dark);
}
.about-page .work-item p {
color: var(--text-soft);
line-height: 1.7;
}
/* ---------------- TEAM ---------------- */
.about-page .our-team {
margin-top: 48px;
padding: 28px;
border-radius: 18px;
background: #ffffff;
box-shadow:
0 4px 12px rgba(0,0,0,0.05),
0 12px 32px rgba(0,0,0,0.08);
}
.about-page .our-team .section-title {
text-align: center;
margin-bottom: 24px;
}
.about-page .team-points {
display: grid;
gap: 16px;
}
.about-page .team-text {
background: var(--white);
padding: 20px 16px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
text-align: center;
}
.about-page .team-text i {
font-size: 24px;
color: var(--accent);
margin-bottom: 12px;
display: inline-block;
}
.about-page .team-text p {
color: var(--text-soft);
line-height: 1.8;
}
.about-page .team-highlight {
max-width: 700px;
margin: 24px auto;
text-align: center;
background: var(--white);
padding: 20px 16px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
}
.about-page .team-highlight p {
line-height: 1.8;
color: var(--text-soft);
}
.about-page .team-support {
max-width: 700px;
margin: 20px auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.about-page .team-support i {
font-size: 24px;
color: var(--accent);
}
.about-page .team-support p {
color: var(--text-soft);
line-height: 1.8;
}
/* ---------------- CTA ---------------- */
.about-page .final-cta {
margin: 48px 0;
text-align: center;
padding: 32px 20px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, #111564, #3a40a3);
color: var(--white);
box-shadow:
0 10px 30px rgba(0,0,0,0.2),
0 0 0 1px rgba(255,255,255,0.05) inset;
}
.about-page .cta-title {
color: var(--white);
margin-bottom: 14px;
font-size: 22px;
text-align: center;
}
.about-page .cta-title i {
margin-right: 8px;
}
.about-page .cta-text {
max-width: 600px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.88);
line-height: 1.8;
}
.about-page .cta-buttons {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 20px;
}
.about-page .btn-primary {
background: var(--accent);
color: var(--white);
}
.about-page .btn-outline {
border: 2px solid var(--white);
color: var(--white);
background: transparent;
padding: 12px 22px;
border-radius: 10px;
}
.about-page .btn-outline:hover {
background: var(--white);
color: var(--primary);
}
/* ---------------- RESPONSIVE ---------------- */
@media (min-width: 768px) {
.about-page .overview-top {
grid-template-columns: 240px 1fr;
align-items: center;
gap: 32px;
padding: 28px;
}
.about-page .overview-content {
text-align: left;
}
.about-page .overview-content p {
margin: 0 0 12px;
}
.about-page .founder-section {
gap: 28px;
}
.about-page .work-list {
grid-template-columns: repeat(2, 1fr);
}
.about-page .team-points {
grid-template-columns: repeat(2, 1fr);
}
.about-page .cta-buttons {
flex-wrap: nowrap;
}
.about-page .cta-buttons .btn {
width: 200px;
}
}
@media (min-width: 1024px) {
.about-page .founder-section {
flex-direction: row;
align-items: flex-start;
text-align: left;
}
.about-page .founder-image {
flex: 0 0 320px;
max-width: 320px;
}
.about-page .founder-content {
flex: 1;
}
.about-page .founder-title,
.about-page .founder-name,
.about-page .founder-role,
.about-page .founder-expertise-title {
text-align: center;
}
/*.about-page .founder-content p {*/
/* margin: 0 0 12px;*/
/*}*/
.about-page .founder-expertise-list {
grid-template-columns: repeat(2, 1fr);
justify-items: stretch;
}
.about-page .work-list {
grid-template-columns: repeat(3, 1fr);
}
.about-page .why-choose-grid {
grid-template-columns: repeat(4, 1fr);
}
.about-page .cta-title {
font-size: 26px;
text-align: center;
}
}
/* ABOUT PAGE CSS END */
/* ABOUT PAGE CSS END */
/***************************************/
/* PROJECT PAGE CSS START */
/* =========================
PROJECT PAGE
========================= */
:root {
--projects-card-border: rgba(255, 255, 255, 0.10);
--projects-text: #ffffff;
--projects-text-soft: rgba(255, 255, 255, 0.86);
--projects-text-muted: rgba(255, 255, 255, 0.72);
}
/* Portfolio page base */
.portfolio-page,
.other-projects-section {
position: relative;
background: linear-gradient(135deg, #0b1e3c, #112b57);
color: var(--white);
}
.portfolio-page img,
.other-projects-section img {
width: 100%;
display: block;
}
/* Faster below-the-fold rendering */
.other-projects-section,
.work-showcase-section {
content-visibility: auto;
contain-intrinsic-size: 1px 1000px;
}
/* =========================
PORTFOLIO HERO
========================= */
.portfolio-hero {
position: relative;
padding: 70px 0 80px;
background: url("/assets/images/portfolio-hero-bg.webp") center center / cover no-repeat;
overflow: hidden;
}
.portfolio-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.28) 0%,
rgba(0, 0, 0, 0.48) 40%,
rgba(0, 0, 0, 0.72) 100%
);
z-index: 1;
}
.portfolio-overlay {
display: none;
}
.portfolio-hero .container {
position: relative;
z-index: 2;
}
.portfolio-hero-content {
max-width: 800px;
margin: 0 auto 42px;
text-align: center;
background: rgba(1,1,1,0.40);
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.portfolio-hero {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.portfolio-hero-content h1 {
margin: 0 0 16px;
font-size: clamp(28px, 4.5vw, 38px);
line-height: 1.08;
font-weight: 600;
color: var(--white);
}
.portfolio-hero-content p {
/*margin: 0 auto;*/
/*max-width: 520px;*/
font-size: clamp(18px, 2vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
text-align: center;
}
/* =========================
FEATURED TAG
========================= */
.featured-tag {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
margin: 0 auto 12px;
padding: 7px 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: var(--white);
font-size: 12px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
}
/* =========================
FEATURED PROJECT CARD
========================= */
.featured-project-card {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
max-width: 1200px;
margin: 0 auto 20px;
padding: 16px;
border: 1px solid var(--projects-card-border);
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}
.featured-project-image {
min-width: 0;
height: 100%;
}
.featured-project-image img {
width: 100%;
height: 100%;
min-height: 240px;
object-fit: cover;
border-radius: 12px;
}
.featured-project-content {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
height: 100%;
padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
/*background: rgba(255, 255, 255, 0.01);*/
background: rgba(1, 1, 1, 0.50);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.featured-project-content h2 {
margin: 0 0 16px;
font-size: clamp(22px, 4vw, 30px);
line-height: 1.18;
font-weight: 500;
color: var(--white);
text-align: center;
}
.featured-project {
text-align: center;
}
.featured-project-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.featured-project-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Button Center */
.featured-project .btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
max-width: 260px;
margin: 12px auto 0;
padding: 14px 20px;
}
.project-location {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: var(--projects-text-soft);
font-size: 16px;
line-height: 1.5;
text-align: center;
}
.icon {
flex-shrink: 0;
line-height: 1;
}
.project-meta {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: start;
margin-bottom: 10px;
}
.meta-box {
min-width: 0;
}
.meta-box:first-child {
padding-bottom: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.meta-title {
margin: 0 0 22px;
font-size: 15px;
line-height: 1.5;
color: var(--white);
}
.meta-box h3 {
margin: 0 0 16px;
color: var(--white);
font-size: 15px;
line-height: 1.4;
font-weight: 600;
}
.meta-box ul {
margin: 0;
padding: 0;
list-style: none;
}
.meta-box ul li {
position: relative;
margin-bottom: 14px;
padding-left: 24px;
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.meta-box ul li:last-child {
margin-bottom: 0;
}
.meta-box ul li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
color: var(--projects-text);
font-weight: 700;
}
/* =========================
OTHER PROJECTS
========================= */
.other-projects-section {
padding: 52px 0;
}
.other-projects-head {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 20px;
}
.other-projects-head h2 {
margin: 0;
color: var(--accent);
}
.other-projects-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.project-card {
position: relative;
overflow: hidden;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
background: transparent;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
border-color: rgba(255, 255, 255, 0.12);
}
.project-card-image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.project-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.project-card-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.78) 0%,
rgba(0, 0, 0, 0.32) 45%,
rgba(0, 0, 0, 0) 100%
);
z-index: 1;
pointer-events: none;
}
.project-card-content {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
width: calc(100% - 24px);
margin: 0;
padding: 0;
text-align: center;
z-index: 2;
}
.project-card-content h3 {
margin: 0;
color: var(--projects-text);
font-size: 18px;
line-height: 1.3;
font-weight: 600;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.68);
}
.project-card-content p {
display: none;
}
/* =========================
WORK SHOWCASE
========================= */
.work-showcase-section {
padding: 60px 0;
background: linear-gradient(135deg, #0b1e3c, #112b57);
color: var(--white);
}
.work-showcase-head {
text-align: center;
margin-bottom: 30px;
}
.work-showcase-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.work-card {
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
cursor: pointer;
}
.work-card-image {
width: 100%;
height: 220px;
overflow: hidden;
}
.work-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.work-card-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 16px;
text-align: center;
color: var(--white);
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.85),
rgba(0, 0, 0, 0.3),
transparent
);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.work-card:hover .work-card-image img {
transform: scale(1.08);
}
.work-card:hover .work-card-content {
opacity: 1;
transform: translateY(0);
}
.work-card:focus-within .work-card-content,
.work-card:active .work-card-content {
opacity: 1;
transform: translateY(0);
}
.work-card:focus-within .work-card-image img,
.work-card:active .work-card-image img {
transform: scale(1.05);
}
.work-card:focus {
outline: none;
}
.work-card-content h3 {
margin: 0 0 4px;
font-size: 16px;
color: var(--white);
}
.work-card-content p {
margin: 0;
font-size: 13px;
color: #e2e8f0;
}
/* Touch devices */
@media (hover: none), (pointer: coarse) {
.work-card:hover .work-card-image img {
transform: none;
}
.work-card:hover .work-card-content {
opacity: 0;
transform: translateY(20px);
}
}
/* Desktop only */
@media (hover: hover) and (pointer: fine) {
.work-card:hover .work-card-content {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile only */
@media (hover: none), (pointer: coarse) {
.work-card:active .work-card-content {
opacity: 1;
transform: translateY(0);
}
}
/* =========================
TABLET
========================= */
@media (min-width: 768px) {
.portfolio-hero {
padding: 56px 0 64px;
}
.featured-project-card {
grid-template-columns: 1fr 1fr;
gap: 22px;
padding: 22px;
}
.featured-project-image img {
min-height: 360px;
border-radius: var(--radius-lg);
}
.project-meta {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.meta-box:first-child {
padding-right: 22px;
padding-bottom: 0;
border-right: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: none;
}
.meta-title,
.meta-box h3,
.meta-box ul li {
font-size: 17px;
}
.project-location {
font-size: 20px;
margin-bottom: 28px;
padding-bottom: 20px;
}
.other-projects-section {
padding: 64px 0;
}
.other-projects-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-card-content {
bottom: 12px;
width: calc(100% - 28px);
}
.project-card-content h3 {
font-size: 20px;
}
.work-showcase-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================
DESKTOP
========================= */
@media (min-width: 1024px) {
.featured-project-card {
gap: 28px;
padding: 32px;
border-radius: var(--radius-xl);
}
.featured-project-image img {
min-height: 540px;
}
.featured-project-content h2 {
text-align: left;
}
.project-location {
justify-content: flex-start;
text-align: left;
}
.other-projects-section {
padding: 80px 0;
}
.other-projects-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.project-card-content {
bottom: 14px;
width: calc(100% - 32px);
}
.project-card-content h3 {
font-size: 22px;
}
.work-showcase-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
/* =========================
LARGE DESKTOP
========================= */
@media (min-width: 1200px) {
.work-showcase-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* PROJECT PAGE CSS END */
/***************************************/
/* =========================
SERVICES PAGE CSS START
========================= */
/* MOBILE FIRST */
.services-page {
padding: 20px 0;
background: #f8fbff;
}
.services-page-container {
padding: 24px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(10px);
box-shadow:
0 15px 40px rgba(0, 175, 239, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
/* HEAD */
.services-page .services-page-head {
max-width: 900px;
margin: 0 auto 40px;
text-align: center;
}
.services-page .services-page-tag {
display: inline-block;
padding: 8px 16px;
margin-bottom: 14px;
border-radius: 999px;
background: rgba(0, 175, 239, 0.08);
color: var(--accent);
font-size: 13px;
font-weight: 600;
}
.services-page .services-page-title {
font-size: clamp(18px, 2.2vw, 28px);
line-height: 1.2;
margin-bottom: 14px;
color: #0b1e3c;
}
.services-page .services-page-intro {
font-size: 15px;
line-height: 1.7;
color: #5b6470;
}
/* =========================
SPLIT LAYOUT FIX
========================= */
/* parent wrapper */
.services-page-grid {
display: flex;
flex-direction: column;
}
/* main 6 cards */
.services-main-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
/* highlight 2 cards */
.services-highlight-grid {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
/* highlight card size */
.services-highlight-grid .services-page-card {
max-width: 420px;
width: 100%;
}
/* =========================
CARD DESIGN
========================= */
.services-page .services-page-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 175, 239, 0.12);
border-radius: 16px;
padding: 22px 18px;
box-shadow:
0 12px 30px rgba(0, 175, 239, 0.14),
0 6px 16px rgba(15, 23, 42, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
text-align: center;
transition: all 0.35s ease;
}
.services-page .services-page-card:hover {
transform: translateY(-8px);
background: linear-gradient(135deg, #0b1e3c 0%, #00afef 100%);
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.28),
0 14px 32px rgba(0, 175, 239, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.services-page .services-page-card:active {
transform: scale(0.98);
}
/* ICON */
.services-page .services-page-icon {
width: 60px;
height: 60px;
margin: 0 auto 14px;
border-radius: 50%;
background: #e0f2fe;
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.35s ease;
}
.services-page .services-page-icon i {
font-size: 22px;
}
/* TEXT */
.services-page .services-page-card-title {
font-size: 18px;
margin-bottom: 10px;
color: #0b1e3c;
}
.services-page .services-page-card-text {
font-size: 14px;
line-height: 1.7;
color: #5b6470;
}
/* HOVER TEXT */
.services-page .services-page-card:hover .services-page-card-title,
.services-page .services-page-card:hover .services-page-card-text {
color: #ffffff;
}
.services-page .services-page-card:hover .services-page-icon {
background: rgba(255, 255, 255, 0.14);
}
.services-page .services-page-card:hover .services-page-icon i {
color: #ffffff;
}
/* highlight border (optional premium feel) */
.highlight-card {
border: 2px solid rgba(0, 175, 239, 0.2);
}
/* =========================
CTA
========================= */
.services-page .services-page-cta {
margin-top: 28px;
text-align: center;
}
.services-page .services-page-cta .btn {
width: 80%;
max-width: 320px;
height: 48px;
font-size: 15px;
border-radius: 10px;
}
/* =========================
TABLET
========================= */
@media (min-width: 768px) {
.services-main-grid {
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.services-highlight-grid {
flex-direction: row;
justify-content: center;
}
}
/* =========================
DESKTOP
========================= */
@media (min-width: 1024px) {
.services-page {
padding: 40px 0;
background: #ffffff;
}
.services-page-container {
padding: 32px;
border-radius: 24px;
}
.services-main-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.services-page .services-page-card {
padding: 28px 22px;
border-radius: 20px;
}
.services-page .services-page-card:hover {
transform: translateY(-10px);
}
.services-page .services-page-icon {
width: 72px;
height: 72px;
}
.services-page .services-page-icon i {
font-size: 26px;
}
.services-page .services-page-card-title {
font-size: 20px;
}
.services-page .services-page-card-text {
font-size: 15px;
}
}
/* =========================
SERVICES PAGE CSS END
========================= */
/* SERVICES PAGE CSS END */
/*********************************************************/
/* CLIENT PAGE CSS START */
.client-page {
padding: 40px 0;
background: #f8fbff;
}
/* CLIENT PAGE WRAPPER */
.client-page-container{
background: var(--white);
border-radius: 20px;
padding: 24px 18px;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}
.client-page .container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 16px;
}
/* HEAD */
.client-head {
text-align: center;
margin-bottom: 24px;
}
.client-head h1 {
margin: 0 0 12px;
font-size: clamp(28px, 5vw, 42px);
line-height: 1.2;
font-weight: 700;
color: #0a0d3f;
}
.client-head p {
max-width: 780px;
margin: 0 auto;
font-size: 15px;
line-height: 1.7;
color: #4b5563;
}
/*testing*/
/* CLIENT CARD */
.client-card {
background: var(--white);
padding: 24px 18px;
border-radius: 20px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
/* TITLE */
.client-title {
text-align: center;
margin-bottom: 18px;
}
/* EACH POINT */
.client-point {
background: #fff;
padding: 14px 16px 14px 18px; /* extra left padding for border */
border-radius: 12px;
margin-bottom: 14px;
border-left: 4px solid var(--accent); /* 🔥 accent line */
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
transition: all 0.3s ease;
}
/* HOVER */
.client-point:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
border-left-color: var(--primary); /* optional color shift */
}
/*testing*/
/* CARD */
.client-card {
background: #ffffff;
border: 1px solid rgba(10, 13, 63, 0.08);
border-radius: 20px;
padding: 20px 16px;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
}
.client-card + .client-card {
margin-top: 20px;
}
/* TESTIMONIAL CARD GRID */
.client-card:has(.client-testimonial) {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: stretch;
}
/* TITLE */
.client-title {
margin: 0 0 18px;
text-align: center;
font-size: clamp(22px, 4vw, 30px);
line-height: 1.3;
font-weight: 700;
color: #0a0d3f;
grid-column: 1 / -1;
}
/* LOGO GRID */
.client-logo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.client-logo-item {
display: flex;
align-items: center;
justify-content: center;
min-height: 110px;
padding: 14px;
background: #f8fbff;
border: 1px solid rgba(10, 13, 63, 0.06);
border-radius: 16px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.client-logo-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08);
}
.client-logo-item img {
max-width: 100%;
width: auto;
height: auto;
max-height: 60px;
object-fit: contain;
display: block;
}
/* TESTIMONIAL */
.client-testimonial {
padding: 18px 16px;
background: #f8fbff;
border: 1px solid rgba(10, 13, 63, 0.06);
border-radius: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
}
.client-testimonial p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: #1f2937;
}
.client-testimonial span {
display: block;
margin-top: auto;
padding-top: 14px;
width: 100%;
font-size: 14px;
font-weight: 600;
color: #00afef;
text-align: center;
}
/* REMOVE OLD STACK MARGIN */
.client-testimonial + .client-testimonial {
margin-top: 0;
}
/* GCC CARD TEXT */
.client-card > p {
margin: 0;
text-align: center;
font-size: 15px;
line-height: 1.7;
color: #4b5563;
}
/* TABLET */
@media (min-width: 768px) {
.client-page {
padding: 60px 0;
}
.client-card {
padding: 28px 24px;
}
.client-card:has(.client-testimonial) {
grid-template-columns: 1fr 1fr;
}
.client-logo-grid {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.client-logo-item {
min-height: 120px;
padding: 18px;
}
.client-logo-item img {
max-height: 70px;
}
.client-testimonial {
padding: 22px 20px;
}
}
.client-card {
background: #ffffff;
border: 1px solid rgba(10, 13, 63, 0.08);
border-radius: 20px;
padding: 20px 16px;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
}
.client-card + .client-card {
margin-top: 20px;
}
.client-title {
margin: 0 0 18px;
text-align: center;
font-size: clamp(22px, 4vw, 30px);
line-height: 1.3;
font-weight: 700;
color: #0a0d3f;
}
.client-card > p {
margin: 0;
text-align: center;
font-size: 15px;
line-height: 1.8;
color: #4b5563;
}
.client-card > p + p {
margin-top: 14px;
}
/* TABLET */
@media (min-width: 768px) {
.client-card {
padding: 28px 24px;
}
.client-card > p {
max-width: 900px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
.client-card > p + p {
margin-top: 16px;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.client-card {
padding: 32px 28px;
border-radius: 24px;
}
.client-card + .client-card {
margin-top: 24px;
}
.client-card > p {
max-width: 950px;
line-height: 1.9;
}
.client-card > p + p {
margin-top: 18px;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.client-head {
margin-bottom: 32px;
}
.client-card {
padding: 32px 28px;
border-radius: 24px;
}
.client-card + .client-card {
margin-top: 24px;
}
.client-card:has(.client-testimonial) {
grid-template-columns: repeat(3, 1fr);
}
.client-logo-grid {
gap: 20px;
}
.client-logo-item {
min-height: 130px;
border-radius: 18px;
}
.client-testimonial {
border-radius: 18px;
}
}
/* CLIENT PAGE CSS END */
/*********************************************************/
/*CONTACT PAGE CSS START*/
.contact-page {
background: #f8fbff;
overflow: hidden;
padding: 10px;
}
/* =========================
CONTACT SECTION FIX
========================= */
.contact-wrap {
position: relative;
min-height: calc(100vh - var(--header-height));
display: flex;
align-items: center;
justify-content: center;
padding: 20px 16px;
}
/* MAIN BOX */
.contact-page-container {
position: relative;
width: 100%;
max-width: 1200px;
padding:80px;
border-radius: 20px;
overflow: hidden;
/* REMOVE DOUBLE BACKGROUND CONFLICT */
background: url("/assets/images/contact-bg-plumbing.webp") center center / cover no-repeat;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}
/* DARK OVERLAY FOR READABILITY */
.contact-page-container::before {
content: "";
position: absolute;
inset: 0;
background: rgba(10, 13, 63, 0.45); /* dark overlay */
/*background: rgba(10, 13, 63, 0.65); */
z-index: 1;
}
/* CONTENT ABOVE OVERLAY */
.contact-page-container > * {
position: relative;
z-index: 2;
}
.contact-page .container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 16px;
}
.section-head {
text-align: center;
max-width: 100%;
margin: 0 auto 32px;
padding: 0 16px;
}
.section-head .section-tag {
display: inline-block;
margin-bottom: 12px;
padding: 8px 14px;
background: linear-gradient(135deg, #111564, #3a40a3);
/*color: #00afef;*/
color: #ffffff;
font-size: 13px;
font-weight: 600;
line-height: 1;
border-radius: 999px;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.section-head .contact-title {
margin: 0 0 14px;
font-size: clamp(18px, 6vw, 32px);
line-height: 1.25;
font-weight: 700;
/*color: #0a0d3f;*/
color: #ffffff;
white-space: normal;
}
.section-head p {
margin: 0;
font-size: 15px;
line-height: 1.7;
/*color: #5b6475;*/
color: #ffffff;
max-width: 680px;
margin-inline: auto;
}
.contact-page .contact-wrap {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-page .contact-info {
display: flex;
flex-direction: column;
gap: 14px;
padding: 10px;
}
.contact-page .contact-card,
.contact-page .contact-form-box {
width: 100%;
background: #ffffff;
border: 1px solid #dbe7f3;
border-radius: 16px;
padding: 18px 14px;
/*box-shadow: 0 10px 30px rgba(11, 30, 60, 0.05);*/
/*background: #e6f1f7;*/
background: rgba(10, 13, 63, 0.55);
margin: 20px 0;
}
.contact-page .contact-label {
display: block;
text-align: center;
font-size: 16px;
font-weight: 700;
/*color: var(--accent);*/
color: #ffffff;
text-transform: uppercase;
margin-bottom: 8px;
}
.contact-page .contact-card h3 {
font-size: 18px;
margin-bottom: 6px;
/*color: #0b1e3c;*/
color: #ffffff;
}
.contact-page .contact-card p {
font-size: 13px;
line-height: 1.6;
/*color: #5f6b7a;*/
color: #ffffff;
}
.contact-page .contact-led {
font-weight: 600;
/*color: #0b1e3c;*/
color: #ffffff;
}
.contact-page .contact-location {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.contact-page .contact-links {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-page .contact-links a {
font-size: 13px;
font-weight: 600;
/*color: #0b1e3c;*/
color: #ffffff;
word-break: break-word;
text-decoration: none;
}
.contact-page .contact-links a:hover {
color: var(--accent);
}
.contact-page .contact-form {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
.contact-page .form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-page .form-group label {
font-size: 13px;
font-weight: 600;
/*color: #0b1e3c;*/
color: #ffffff;
}
/*testing*/
#qpTimerText {
margin-top: 10px;
font-size: 14px;
color: #475569;
}
#qpTimer {
font-weight: 700;
color: var(--accent);
}
.loader {
width: 16px;
height: 16px;
border: 2px solid #fff;
border-top: 2px solid transparent;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
vertical-align: middle;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/*testing*/
.contact-page .form-group input,
.contact-page .form-group select,
.contact-page .form-group textarea {
width: 100%;
max-width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid #ccd9e6;
font-size: 14px;
background: #fff;
outline: none;
box-sizing: border-box;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.contact-page .form-group textarea {
min-height: 110px;
resize: vertical;
}
.contact-page .form-group input:focus,
.contact-page .form-group select:focus,
.contact-page .form-group textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(0, 175, 239, 0.15);
}
.contact-page .form-group .error-msg {
display: none;
margin-top: 6px;
font-size: 13px;
color: #d93025;
line-height: 1.4;
text-align: center;
width: 100%;
}
.contact-page .form-group input.is-invalid,
.contact-page .form-group select.is-invalid,
.contact-page .form-group textarea.is-invalid {
border-color: #d93025;
box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}
.contact-page .btn-contact {
width: 100%;
padding: 14px;
border: none;
border-radius: 10px;
background: var(--accent);
color: #fff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
.contact-page .btn-contact:hover {
background: var(--accent-dark);
}
.contact-page .btn-contact:active {
transform: translateY(1px);
}
.contact-page .btn-contact:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.form-status {
display: none;
margin-top: 14px;
font-size: 14px;
color: #d93025;
text-align: center;
}
.form-popup {
position: fixed;
inset: 0;
background: rgba(10, 13, 63, 0.7);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.3s ease;
z-index: 9999;
}
.form-popup.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.form-popup-box {
width: 100%;
max-width: 420px;
background: #ffffff;
border-radius: 18px;
padding: 28px 22px;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
transform: translateY(20px);
transition: transform 0.3s ease;
}
.form-popup.active .form-popup-box {
transform: translateY(0);
}
.form-popup-box h3 {
margin: 0 0 10px;
font-size: 24px;
line-height: 1.2;
color: #0a0d3f;
}
.form-popup-box p {
margin: 0 0 18px;
font-size: 15px;
line-height: 1.6;
color: #475569;
}
@media (min-width: 768px) {
.contact-page {
padding: 40px 0;
}
.section-head {
margin-bottom: 40px;
padding: 0 20px;
}
.section-head .section-tag {
font-size: 14px;
padding: 9px 16px;
}
.section-head .contact-title {
font-size: clamp(30px, 4vw, 42px);
margin-bottom: 16px;
}
.section-head p {
font-size: 16px;
max-width: 720px;
}
.contact-page .contact-card,
.contact-page .contact-form-box {
padding: 24px 20px;
}
}
@media (min-width: 992px) {
.contact-page .contact-wrap {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 30px;
}
.section-head .contact-title {
font-size: 34px;
}
.contact-page .contact-card {
font-size: 20px;
}
.contact-page .contact-card h3 {
font-size: 20px;
}
}
@media (min-width: 1024px) {
.section-head {
margin-bottom: 48px;
}
.section-head .contact-title {
white-space: nowrap;
font-size: clamp(24px, 2.5vw, 36px);
line-height: 1.2;
}
.section-head p {
font-size: 17px;
max-width: 760px;
}
}
/*TESTING*/
/* =========================
INPUT ICON (TICK + ERROR)
========================= */
.input-wrapper {
position: relative;
}
.input-wrapper input,
.input-wrapper textarea {
padding-right: 40px; /* space for icon */
}
.icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
display: none;
cursor: pointer;
}
/* SUCCESS (tick) */
.icon.success {
color: #28a745;
}
/* ERROR (cross) */
.icon.error {
color: #d93025;
}
/* =========================
ERROR BOX (BROCHURE STYLE)
========================= */
.input-error-box {
display: none;
margin-top: 6px;
padding: 8px 10px;
background: rgba(217, 48, 37, 0.08);
border: 1px solid rgba(217, 48, 37, 0.2);
border-radius: 8px;
font-size: 13px;
color: #d93025;
}
.input-error-box.active {
display: flex;
justify-content: space-between;
align-items: center;
}
/* close button inside error */
.input-error-box .error-close {
background: none;
border: none;
color: #d93025;
cursor: pointer;
font-size: 12px;
}
/* =========================
VALID / INVALID STATE
========================= */
input.is-valid,
textarea.is-valid {
border-color: #28a745;
}
input.is-invalid,
textarea.is-invalid {
border-color: #d93025;
}
/*TESTING*/
/*CONTACT PAGE CSS END*/
/*POLICY PAGE CSS START*/
.policy-page {
padding: 40px 0;
background: #f8fbff;
}
.policy-page .container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 16px;}
/* HEAD */
.policy-head {
text-align: center;
margin-bottom: 24px;
}
.policy-head h1 {
margin: 0 0 8px;
font-size: clamp(24px, 5vw, 36px);
line-height: 1.2;
color: #0a0d3f;
}
.policy-head p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #6b7280;
}
/* CONTENT */
.policy-content {
background: #ffffff;
padding: 24px 20px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
}
.policy-content h2 {
margin: 24px 0 10px;
font-size: 18px;
line-height: 1.35;
color: #0a0d3f;
}
.policy-content h2:first-child {
margin-top: 0;
}
.policy-content p {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.7;
color: #374151;
}
.policy-content ul {
margin: 0 0 14px;
padding-left: 20px;
}
.policy-content li {
margin-bottom: 8px;
font-size: 15px;
line-height: 1.7;
color: #374151;
}
/* TABLET */
@media (min-width: 768px) {
.policy-page {
padding: 60px 0;
}
.policy-content {
padding: 32px 28px;
}
.policy-content h2 {
font-size: 20px;
}
.policy-content p,
.policy-content li {
font-size: 16px;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.policy-page {
padding: 80px 0;
}
.policy-content {
padding: 40px 36px;
}
.policy-head h1 {
font-size: 40px;
}
}
/*POLICY PAGE CSS END*/
/*TERM OF SERVICES PAGE CSS START*/
/* TERMS / POLICY PAGE */
.policy-page {
padding: 40px 0;
background: #f8fbff;
}
.policy-page .container {
max-width: 900px;
margin: 0 auto;
padding: 0 16px;
}
/* HEAD */
.policy-head {
text-align: center;
margin-bottom: 24px;
}
.policy-head h1 {
margin: 0 0 8px;
font-size: clamp(24px, 5vw, 36px);
line-height: 1.2;
color: #0a0d3f;
}
.policy-head p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #6b7280;
}
/* CONTENT BOX */
.policy-content {
background: #ffffff;
padding: 24px 20px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
}
/* HEADINGS */
.policy-content h2 {
margin: 24px 0 10px;
font-size: 18px;
line-height: 1.35;
color: #0a0d3f;
}
.policy-content h2:first-child {
margin-top: 0;
}
/* TEXT */
.policy-content p {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.7;
color: #374151;
}
/* LIST */
.policy-content ul {
margin: 0 0 14px;
padding-left: 20px;
}
.policy-content li {
margin-bottom: 8px;
font-size: 15px;
line-height: 1.7;
color: #374151;
}
/* LINKS (important for terms page) */
.policy-content a {
color: #00afef;
text-decoration: none;
font-weight: 500;
}
.policy-content a:hover {
text-decoration: underline;
}
/* TABLET */
@media (min-width: 768px) {
.policy-page {
padding: 60px 0;
}
.policy-content {
padding: 32px 28px;
}
.policy-content h2 {
font-size: 20px;
}
.policy-content p,
.policy-content li {
font-size: 16px;
}
}
/* DESKTOP */
@media (min-width: 1024px) {
.policy-page {
padding: 80px 0;
}
.policy-content {
padding: 40px 36px;
}
.policy-head h1 {
font-size: 40px;
}
}
/*TERM OF SERVICES PAGE CSS END*/
/* TESTING CSS START */
/* =========================
BASE (MOBILE FIRST)
========================= */
.qp-contact-page {
padding: 16px 12px;
background: #f8fbff;
}
.qp-contact-container {
max-width: 100%;
margin: 0 auto;
}
.qp-form-box {
width: 100%;
max-width: 100%;
margin: 0 auto;
background: #fff;
padding: 16px;
border-radius: 16px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.qp-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
.qp-hidden-field {
display: none !important;
visibility: hidden;
position: absolute;
left: -9999px;
}
.qp-form-group {
display: flex;
flex-direction: column;
}
.qp-form-group label {
font-size: 12px;
margin-bottom: 4px;
color: #0a0d3f;
}
.qp-input,
.qp-select,
.qp-textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #d0d5dd;
border-radius: 10px;
font-size: 16px; /* mobile-friendly */
box-sizing: border-box;
}
.qp-input,
.qp-select {
min-height: 46px;
}
.qp-textarea {
min-height: 90px;
resize: none;
}
.qp-error {
display: none;
font-size: 12px;
color: #d92d20;
margin-top: 4px;
}
.qp-char-count {
font-size: 12px;
color: #667085;
margin-top: 4px;
}
.qp-form-status {
margin: 0;
font-size: 13px;
}
.qp-btn {
border: none;
cursor: pointer;
}
.qp-btn-primary {
width: 100%;
padding: 13px 14px;
background: #00afef;
color: #fff;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
}
.qp-btn-primary:hover {
background: #0a0d3f;
}
/* =========================
POPUP (MOBILE)
========================= */
.qp-popup {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
}
.qp-popup.active {
opacity: 1;
visibility: visible;
}
.qp-popup-box {
width: 100%;
max-width: 100%;
background: #fff;
padding: 20px 16px;
border-radius: 16px;
text-align: center;
}
/* =========================
TABLET (768px+)
========================= */
@media (min-width: 768px) {
.qp-contact-page {
padding: 20px;
}
.qp-form-box {
max-width: 500px;
padding: 20px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}
.qp-form {
gap: 8px;
}
.qp-form-group label {
font-size: 13px;
}
.qp-input,
.qp-select,
.qp-textarea {
font-size: 14px;
padding: 10px 12px;
}
.qp-input,
.qp-select {
min-height: 20px;
}
.qp-textarea {
min-height: 40px;
}
.qp-btn-primary {
padding: 12px 14px;
border-radius: 12px;
}
.qp-popup-box {
max-width: 400px;
padding: 24px;
border-radius: 20px;
}
}
/* =========================
SELECT FIELD
========================= */
.form-group select {
width: 100%;
padding: 12px 40px 12px 14px; /* space for arrow */
border: 1px solid #d0d5dd;
border-radius: 10px;
font-size: 14px;
font-family: inherit;
color: #0a0d3f;
background-color: #fff;
appearance: none; /* remove default arrow */
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: all 0.25s ease;
}
/* CUSTOM ARROW */
.form-group {
position: relative;
}
.form-group select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%230a0d3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
}
/* HOVER */
.form-group select:hover {
border-color: #00afef;
}
/* FOCUS */
.form-group select:focus {
border-color: #00afef;
box-shadow: 0 0 0 3px rgba(0, 175, 239, 0.15);
outline: none;
}
/* ERROR */
.error-msg {
display: none;
font-size: 12px;
color: #d92d20;
margin-top: 4px;
}
/* INVALID STATE */
select:invalid {
color: #9ca3af;
}
/* =========================
DESKTOP (992px+)
========================= */
@media (min-width: 992px) {
.qp-contact-container {
max-width: 1200px;
}
}
/* TESTING CSS START */
/*********************************************************/