html,
body {
margin: 0 !important;
padding: 0 !important;
max-width: 100%;
overflow-x: hidden !important;
font-family: "Muli", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Saira", sans-serif;
font-weight: 700;
margin: 0;
}
/* =========================================
MOPABOND HEADER
========================================== */
.mopabond-header {
width: 100%;
height: 100px;
background: #06284d;
position: relative;
z-index: 99999;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* =========================================
NAV CONTAINER
========================================== */
.mopabond-nav-container {
width: 100%;
max-width: 1380px;
height: 100%;
margin: 0 auto;
padding: 0 35px 0 25px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
box-sizing: border-box;
}
/* =========================================
LOGO
========================================== */
.mopabond-logo {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
.mopabond-logo img {
width: 265px;
max-width: 100%;
height: auto;
display: block;
}
/* =========================================
DESKTOP NAVIGATION
========================================== */
.mopabond-navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-left: auto;
}
/* =========================================
NAV LINKS
========================================== */
.mopabond-nav-link {
position: relative;
display: inline-flex;
align-items: center;
color: #ffffff;
text-decoration: none;
font-family: "Mulish", sans-serif;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
padding: 30px 0;
transition:
color 0.3s ease,
opacity 0.3s ease;
}
.mopabond-nav-link:hover {
color: #f58220;
}
/* Active link */
.mopabond-nav-link.mopabond-active {
color: #f58220;
}
/* Active underline */
.mopabond-nav-link.mopabond-active::after {
content: "";
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
height: 2px;
background: #f58220;
border-radius: 5px;
}
/* =========================================
EXPERT ADVICE BUTTON
========================================== */
.mopabond-expert-btn {
height: 40px;
min-width: 150px;
padding: 0 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #f58220;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
font-family: "Mulish", sans-serif;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
margin-left: 15px;
transition:
background 0.3s ease,
transform 0.3s ease;
flex-shrink: 0;
}
.mopabond-expert-btn:hover {
background: #ff963d;
color: #ffffff;
transform: translateY(-1px);
}
.mopabond-arrow {
font-size: 17px;
line-height: 1;
}
/* =========================================
MOBILE MENU BUTTON
========================================== */
.mopabond-menu-toggle {
display: none;
width: 45px;
height: 45px;
padding: 0;
margin: 0;
border: none;
outline: none;
background: transparent;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
flex-shrink: 0;
position: relative;
z-index: 100001;
-webkit-appearance: none;
appearance: none;
}
.mopabond-menu-toggle span {
display: block;
width: 25px;
height: 2px;
background: #ffffff;
border-radius: 5px;
transition: all 0.3s ease;
}
/* =========================================
TABLET
========================================== */
@media (max-width: 1150px) {
.mopabond-navigation {
gap: 16px;
}
.mopabond-nav-link {
font-size: 11px;
}
.mopabond-expert-btn {
min-width: 135px;
margin-left: 8px;
font-size: 10px;
}
.mopabond-logo img {
width: 165px;
}
}
/* =========================================
MOBILE
========================================== */
@media (max-width: 991px) {
.mopabond-header {
height: 70px;
}
.mopabond-nav-container {
padding: 0 20px;
gap: 10px;
}
/* Logo */
.mopabond-logo {
flex-shrink: 0;
}
.mopabond-logo img {
width: 165px;
}
/* Show hamburger */
.mopabond-menu-toggle {
display: flex;
margin-left: auto;
}
/* Hide CTA */
.mopabond-expert-btn {
display: none;
}
/* =====================================
MOBILE NAVIGATION CLOSED
====================================== */
.mopabond-navigation {
display: none !important;
position: absolute;
top: 70px;
left: 0;
right: 0;
width: 100%;
height: auto;
padding: 10px 20px 20px;
margin: 0;
background: #06284d;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
box-shadow:
0 10px 25px rgba(0,0,0,0.25);
border-top:
1px solid rgba(255,255,255,0.1);
z-index: 100000;
}
/* =====================================
MOBILE NAVIGATION OPEN
====================================== */
.mopabond-navigation.mopabond-menu-open {
display: flex !important;
}
/* Mobile links */
.mopabond-navigation .mopabond-nav-link {
display: block;
width: 100%;
padding: 14px 5px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
border-bottom:
1px solid rgba(255,255,255,0.1);
}
.mopabond-navigation .mopabond-nav-link:hover {
color: #f58220;
}
.mopabond-navigation .mopabond-nav-link.mopabond-active {
color: #f58220;
}
/* Remove desktop underline */
.mopabond-navigation
.mopabond-nav-link.mopabond-active::after {
display: none;
}
}
/* =========================================
SMALL MOBILE
========================================== */
@media (max-width: 600px) {
.mopabond-header {
height: 64px;
}
.mopabond-nav-container {
padding: 0 15px;
}
.mopabond-logo img {
width: 160px;
}
.mopabond-navigation {
top: 64px;
padding-left: 15px;
padding-right: 15px;
}
.mopabond-navigation .mopabond-nav-link {
padding: 13px 5px;
font-size: 13px;
}
}
/* =========================================
VERY SMALL MOBILE
========================================== */
@media (max-width: 380px) {
.mopabond-logo img {
width: 160px;
}
.mopabond-nav-container {
padding-left: 12px;
padding-right: 12px;
}
}
/* =========================================================
MOPABOND HERO SECTION
Unique prefix: mopabond-hero-
========================================================= */
.mopabond-hero-section {
width: 100%;
min-height: 620px;
position: relative;
overflow: hidden;
background-image: url("../img/banner1.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
font-family: "Mulish", sans-serif;
}
/* =========================================================
DARK OVERLAY
========================================================= */
.mopabond-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(2, 28, 55, 0.45) 0%,
rgba(2, 28, 55, 0.08) 55%,
rgba(2, 28, 55, 0) 100%
);
z-index: 1;
}
/* =========================================================
CONTAINER
========================================================= */
.mopabond-hero-container {
width: 100%;
max-width: 1400px;
min-height: 620px;
margin: 0 auto;
padding: 70px 50px;
display: flex;
align-items: center;
position: relative;
z-index: 2;
box-sizing: border-box;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.mopabond-hero-content {
width: 48%;
max-width: 570px;
padding-left: 5px;
}
/* =========================================================
TITLE
========================================================= */
.mopabond-hero-title {
margin: 0 0 15px 0;
padding: 0;
color: #ffffff;
font-family: "Mulish", sans-serif;
font-size: clamp(42px, 4.5vw, 72px);
line-height: 0.93;
font-weight: 800;
letter-spacing: -1px;
text-transform: uppercase;
}
.mopabond-hero-title span {
display: block;
}
.mopabond-hero-title
.mopabond-orange-text {
color: #f58220;
}
/* =========================================================
DESCRIPTION
========================================================= */
.mopabond-hero-description {
width: 90%;
max-width: 510px;
margin: 0 0 24px 0;
color: #ffffff;
font-family: "Mulish", sans-serif;
font-size: 15px;
line-height: 1.45;
font-weight: 400;
}
/* =========================================================
BUTTONS
========================================================= */
.mopabond-hero-buttons {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 34px;
}
.mopabond-hero-btn {
min-height: 42px;
padding: 0 17px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 4px;
text-decoration: none;
font-family: "Mulish", sans-serif;
font-size: 12px;
font-weight: 700;
transition:
all 0.3s ease;
box-sizing: border-box;
}
/* Explore Products */
.mopabond-products-btn {
background: #f58220;
color: #ffffff;
border: 1px solid #f58220;
}
.mopabond-products-btn:hover {
background: #ff963d;
color: #ffffff;
transform: translateY(-2px);
}
/* Expert Advice */
.mopabond-advice-btn {
background: rgba(0, 0, 0, 0.10);
color: #ffffff;
border: 1px solid #f58220;
}
.mopabond-advice-btn:hover {
background: #f58220;
color: #ffffff;
transform: translateY(-2px);
}
.mopabond-hero-arrow {
font-size: 16px;
line-height: 1;
}
/* =========================================================
FEATURES
========================================================= */
.mopabond-hero-features {
display: flex;
align-items: center;
gap: 30px;
}
.mopabond-hero-feature {
display: flex;
align-items: center;
gap: 9px;
}
/* =========================================================
FEATURE ICON
========================================================= */
.mopabond-feature-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #f58220;
border: 2px solid #f58220;
border-radius: 50%;
font-size: 11px;
box-sizing: border-box;
}
/* =========================================================
FEATURE TEXT
========================================================= */
.mopabond-feature-text {
display: flex;
flex-direction: column;
color: #ffffff;
line-height: 1.15;
}
.mopabond-feature-text strong {
font-family: "Mulish", sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.5px;
}
.mopabond-feature-text small {
margin-top: 2px;
font-family: "Mulish", sans-serif;
font-size: 8px;
font-weight: 600;
color: #ffffff;
letter-spacing: 0.5px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (max-width: 1300px) {
.mopabond-hero-container {
padding-left: 45px;
padding-right: 45px;
}
.mopabond-hero-content {
width: 50%;
}
.mopabond-hero-title {
font-size: 58px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.mopabond-hero-section {
min-height: 570px;
background-position: 58% center;
}
.mopabond-hero-container {
min-height: 570px;
padding: 55px 30px;
}
.mopabond-hero-content {
width: 55%;
max-width: 500px;
}
.mopabond-hero-title {
font-size: 48px;
line-height: 0.95;
}
.mopabond-hero-description {
font-size: 13px;
max-width: 430px;
}
.mopabond-hero-features {
gap: 18px;
}
.mopabond-feature-text strong,
.mopabond-feature-text small {
font-size: 7px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mopabond-hero-section {
min-height: 650px;
background-position: 68% center;
}
.mopabond-hero-overlay {
background:
linear-gradient(
90deg,
rgba(2, 28, 55, 0.88) 0%,
rgba(2, 28, 55, 0.65) 60%,
rgba(2, 28, 55, 0.25) 100%
);
}
.mopabond-hero-container {
min-height: 650px;
padding: 55px 22px;
align-items: center;
}
.mopabond-hero-content {
width: 100%;
max-width: 500px;
padding: 0;
}
.mopabond-hero-title {
font-size: clamp(39px, 10vw, 52px);
line-height: 0.94;
letter-spacing: -0.5px;
margin-bottom: 18px;
}
.mopabond-hero-description {
width: 100%;
max-width: 400px;
font-size: 13px;
line-height: 1.5;
margin-bottom: 22px;
}
.mopabond-hero-buttons {
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}
.mopabond-hero-btn {
min-height: 40px;
padding: 0 14px;
font-size: 11px;
}
.mopabond-hero-features {
flex-wrap: wrap;
gap: 18px;
}
.mopabond-hero-feature {
gap: 7px;
}
.mopabond-feature-icon {
width: 27px;
height: 27px;
font-size: 9px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.mopabond-hero-section {
min-height: 700px;
background-position: 72% center;
}
.mopabond-hero-container {
min-height: 700px;
padding: 45px 18px;
}
.mopabond-hero-title {
font-size: 38px;
line-height: 0.95;
}
.mopabond-hero-description {
font-size: 12px;
max-width: 330px;
}
.mopabond-hero-buttons {
flex-direction: column;
align-items: flex-start;
}
.mopabond-hero-btn {
width: auto;
min-width: 150px;
}
.mopabond-hero-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px 10px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 360px) {
.mopabond-hero-title {
font-size: 34px;
}
.mopabond-hero-description {
font-size: 11px;
}
.mopabond-hero-container {
padding-left: 15px;
padding-right: 15px;
}
}
/* =========================================================
MOPABOND ABOUT SECTION
Unique prefix: mopabond-about-
========================================================= */
.mopabond-about-section {
width: 100%;
position: relative;
overflow: hidden;
background: #ffffff;
font-family: "Mulish", sans-serif;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.mopabond-about-container {
width: 100%;
max-width: 1500px;
min-height: 390px;
margin: 0 auto;
display: flex;
align-items: stretch;
position: relative;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.mopabond-about-content {
width: 51%;
min-height: 390px;
padding: 55px 45px 50px 7%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 5;
background: #ffffff;
box-sizing: border-box;
}
/* =========================================================
ABOUT LABEL
========================================================= */
.mopabond-about-label {
margin-bottom: 5px;
font-family: "Saira", sans-serif;
font-size: 11px;
font-weight: 700;
color: #f58220;
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* =========================================================
MAIN HEADING
========================================================= */
.mopabond-about-title {
margin: 0 0 13px 0;
padding: 0;
color: #06284d;
font-family: "Saira", sans-serif;
font-size: clamp(30px, 3vw, 46px);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.5px;
text-transform: uppercase;
}
.mopabond-about-title span {
display: block;
color: #f58220;
}
/* =========================================================
DESCRIPTION
========================================================= */
.mopabond-about-description {
width: 100%;
max-width: 590px;
margin: 0 0 20px 0;
color: #4e5660;
font-family: "Mulish", sans-serif;
font-size: 16px;
text-align: justify;
line-height: 1.5;
font-weight: 400;
}
/* =========================================================
BUTTON
========================================================= */
.mopabond-about-button {
width: fit-content;
min-height: 38px;
padding: 0 17px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #f58220;
color: #ffffff;
text-decoration: none;
border-radius: 4px;
font-family: "Mulish", sans-serif;
font-size: 15px;
font-weight: 700;
transition: all 0.3s ease;
}
.mopabond-about-button:hover {
background: #06284d;
color: #ffffff;
transform: translateY(-2px);
}
.mopabond-about-arrow {
font-size: 15px;
line-height: 1;
}
/* =========================================================
RIGHT IMAGE
========================================================= */
.mopabond-about-image {
width: 49%;
min-height: 390px;
position: relative;
overflow: hidden;
/*
Using the uploaded composite image and cropping
the right side to reproduce the worker section.
*/
background-image: url("../img/abt.png");
background-repeat: no-repeat;
/* background-size: 205% 100%; */
background-position: right center;
}
/* =========================================================
ANGLED DIVIDER
========================================================= */
.mopabond-about-image::before {
content: "";
position: absolute;
left: -1px;
top: 0;
width: 95px;
height: 100%;
background: #ffffff;
clip-path: polygon(
0 0,
45% 0,
0 100%,
0 100%
);
z-index: 3;
}
/* Blue diagonal strip */
.mopabond-about-image::after {
content: "";
position: absolute;
left: 17px;
top: -5%;
width: 55px;
height: 110%;
/* background: #06284d; */
transform: skewX(-21deg);
z-index: 2;
}
/* Orange diagonal strip */
.mopabond-about-image-overlay {
position: absolute;
left: 43px;
top: -5%;
width: 15px;
height: 110%;
/* background: #f58220; */
transform: skewX(-21deg);
z-index: 4;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (max-width: 1300px) {
.mopabond-about-content {
padding-left: 6%;
padding-right: 35px;
}
.mopabond-about-title {
font-size: 38px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.mopabond-about-container {
min-height: 350px;
}
.mopabond-about-content {
width: 52%;
min-height: 350px;
padding:
40px
30px
40px
5%;
}
.mopabond-about-image {
width: 48%;
/* min-height: 350px; */
background-size: 205% 100%;
}
.mopabond-about-title {
font-size: 31px;
}
.mopabond-about-description {
font-size: 10px;
line-height: 1.45;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mopabond-about-container {
min-height: auto;
display: flex;
flex-direction: column;
}
/* Content */
.mopabond-about-content {
width: 100%;
min-height: auto;
padding:
45px
25px
40px;
order: 1;
}
.mopabond-about-label {
font-size: 10px;
margin-bottom: 6px;
}
.mopabond-about-title {
font-size: clamp(30px, 8vw, 42px);
line-height: 0.98;
margin-bottom: 15px;
}
.mopabond-about-description {
max-width: 100%;
font-size: 12px;
line-height: 1.55;
margin-bottom: 22px;
}
.mopabond-about-button {
min-height: 40px;
padding: 0 16px;
font-size: 11px;
}
/* Image */
.mopabond-about-image {
width: 100%;
/* height: 300px; */
/* min-height: 300px; */
order: 2;
background-size: 205% 100%;
background-position: right center;
}
/* Remove artificial desktop divider */
.mopabond-about-image::before {
display: none;
}
.mopabond-about-image::after {
left: 42%;
width: 40px;
transform: skewX(-18deg);
}
.mopabond-about-image-overlay {
left: calc(42% + 25px);
width: 10px;
transform: skewX(-18deg);
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.mopabond-about-content {
padding:
38px
20px
35px;
}
.mopabond-about-title {
font-size: 29px;
line-height: 1;
}
.mopabond-about-description {
font-size: 11px;
line-height: 1.55;
}
.mopabond-about-image {
/* height: 250px; */
/* min-height: 250px; */
background-size: 210% 100%;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 360px) {
.mopabond-about-title {
font-size: 26px;
}
.mopabond-about-description {
font-size: 10.5px;
}
.mopabond-about-image {
/* height: 220px; */
/* min-height: 220px; */
}
}
/* =========================================================
MOPABOND SOLUTIONS SECTION
UNIQUE PREFIX: mopabond-solutions-
========================================================= */
.mopabond-solutions-section {
width: 100%;
padding: 55px 20px 65px;
background: #f7f9fa;
overflow: hidden;
font-family: "Mulish", sans-serif;
box-sizing: border-box;
}
/* =========================================================
CONTAINER
========================================================= */
.mopabond-solutions-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
SECTION HEADING
========================================================= */
.mopabond-solutions-heading {
width: 100%;
text-align: center;
margin-bottom: 30px;
}
/* Eyebrow */
.mopabond-solutions-eyebrow {
margin-bottom: 3px;
color: #f58220;
font-family: "Saira", sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}
/* Main Heading */
.mopabond-solutions-title {
margin: 0;
color: #06284d;
font-family: "Saira", sans-serif;
font-size: clamp(30px, 3.2vw, 43px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.5px;
text-transform: uppercase;
}
.mopabond-solutions-title span {
color: #f58220;
}
/* Subtitle */
.mopabond-solutions-subtitle {
margin: 7px auto 0;
color: #59616a;
font-family: "Mulish", sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.4;
}
/* =========================================================
GRID
========================================================= */
.mopabond-solutions-grid {
width: 100%;
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 14px;
}
/* =========================================================
CARD
========================================================= */
.mopabond-solutions-card {
width: 100%;
min-width: 0;
background: #ffffff;
border: 1px solid #e8ecef;
border-radius: 2px;
overflow: hidden;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.04);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.mopabond-solutions-card:hover {
transform: translateY(-4px);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.10);
}
/* =========================================================
CARD IMAGE
========================================================= */
.mopabond-solutions-image {
width: 100%;
/* height: 125px; */
overflow: hidden;
background: #e9eef1;
}
.mopabond-solutions-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition:
transform 0.4s ease;
}
.mopabond-solutions-card:hover
.mopabond-solutions-image img {
transform: scale(1.04);
}
/* =========================================================
CARD BODY
========================================================= */
.mopabond-solutions-card-body {
min-height: 145px;
padding: 13px 12px 12px;
display: flex;
align-items: flex-start;
gap: 9px;
box-sizing: border-box;
}
/* =========================================================
ICON
========================================================= */
.mopabond-solutions-icon {
width: 29px;
height: 29px;
min-width: 29px;
margin-top: 1px;
display: flex;
align-items: center;
justify-content: center;
color: #f58220;
border: 1.5px solid #f58220;
border-radius: 50%;
font-size: 11px;
box-sizing: border-box;
}
/* =========================================================
CARD CONTENT
========================================================= */
.mopabond-solutions-card-content {
min-width: 0;
flex: 1;
}
/* Card Title */
.mopabond-solutions-card-content h3 {
margin: 0 0 5px;
margin-top: 6px;
color: #06284d;
font-family: "Saira", sans-serif;
font-size: 17px;
font-weight: 800;
line-height: 1.05;
}
/* Description */
.mopabond-solutions-card-content p {
margin: 0 0 8px;
color: #68717a;
font-family: "Mulish", sans-serif;
font-size: 15px;
font-weight: 400;
margin-top: 17px;
line-height: 1.4;
}
/* Explore Link */
.mopabond-solutions-card-content a {
display: inline-flex;
align-items: center;
gap: 5px;
color: #f58220;
font-family: "Mulish", sans-serif;
font-size: 15px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition:
color 0.25s ease,
gap 0.25s ease;
}
.mopabond-solutions-card-content a:hover {
color: #06284d;
gap: 8px;
}
.mopabond-solutions-card-content a span {
font-size: 12px;
line-height: 1;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (max-width: 1200px) {
.mopabond-solutions-section {
padding-left: 25px;
padding-right: 25px;
}
.mopabond-solutions-grid {
gap: 12px;
}
.mopabond-solutions-image {
/* height: 115px; */
}
.mopabond-solutions-card-body {
min-height: 150px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.mopabond-solutions-section {
padding:
50px
20px
55px;
}
.mopabond-solutions-heading {
margin-bottom: 25px;
}
.mopabond-solutions-title {
font-size: 34px;
}
.mopabond-solutions-subtitle {
font-size: 10px;
}
/* 2 columns */
.mopabond-solutions-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 15px;
}
.mopabond-solutions-image {
/* height: 145px; */
}
.mopabond-solutions-card-body {
min-height: 135px;
padding: 13px;
}
.mopabond-solutions-card-content h3 {
font-size: 14px;
}
.mopabond-solutions-card-content p {
font-size: 10px;
}
.mopabond-solutions-card-content a {
font-size: 9px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mopabond-solutions-section {
padding:
42px
15px
48px;
}
.mopabond-solutions-title {
font-size: 30px;
line-height: 1.05;
}
.mopabond-solutions-eyebrow {
font-size: 9px;
}
.mopabond-solutions-subtitle {
max-width: 330px;
font-size: 10px;
line-height: 1.45;
}
.mopabond-solutions-heading {
margin-bottom: 22px;
}
/* One column */
.mopabond-solutions-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.mopabond-solutions-image {
/* height: 190px; */
}
.mopabond-solutions-card-body {
min-height: auto;
padding: 15px;
}
.mopabond-solutions-icon {
width: 32px;
height: 32px;
min-width: 32px;
font-size: 12px;
}
.mopabond-solutions-card-content h3 {
font-size: 16px;
line-height: 1.1;
}
.mopabond-solutions-card-content p {
font-size: 11px;
line-height: 1.45;
}
.mopabond-solutions-card-content a {
font-size: 10px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.mopabond-solutions-section {
padding:
38px
12px
45px;
}
.mopabond-solutions-title {
font-size: 27px;
}
.mopabond-solutions-subtitle {
font-size: 9px;
}
.mopabond-solutions-grid {
gap: 12px;
}
.mopabond-solutions-image {
/* height: 175px; */
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 360px) {
.mopabond-solutions-title {
font-size: 24px;
}
.mopabond-solutions-image {
/* height: 160px; */
}
.mopabond-solutions-card-content h3 {
font-size: 14px;
}
}
/* =========================================================
MOPABOND FEATURED PRODUCTS
UNIQUE PREFIX: mopabond-products-
========================================================= */
.mopabond-products-section {
width: 100%;
padding: 42px 25px 50px;
background: #06284d;
overflow: hidden;
font-family: "Mulish", sans-serif;
box-sizing: border-box;
}
/* =========================================================
CONTAINER
========================================================= */
.mopabond-products-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
HEADER
========================================================= */
.mopabond-products-header {
width: 100%;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 20px;
}
/* =========================================================
HEADING AREA
========================================================= */
.mopabond-products-heading-area {
min-width: 0;
}
/* =========================================================
EYEBROW
========================================================= */
.mopabond-products-eyebrow {
margin-bottom: 1px;
color: #f58220;
font-family: "Saira", sans-serif;
font-size: 9px;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* =========================================================
MAIN HEADING
========================================================= */
.mopabond-products-title {
margin: 0;
padding: 0;
color: #ffffff;
font-family: "Saira", sans-serif;
font-size: clamp(28px, 3vw, 39px);
font-weight: 800;
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.4px;
}
.mopabond-products-title span {
color: #f58220;
}
/* =========================================================
SUBTITLE
========================================================= */
.mopabond-products-subtitle {
margin: 5px 0 0;
color: rgba(255,255,255,0.75);
font-family: "Mulish", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
}
/* =========================================================
VIEW ALL PRODUCTS
========================================================= */
.mopabond-products-all-btn {
min-width: 105px;
height: 30px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #f58220;
border: 1px solid #f58220;
border-radius: 3px;
text-decoration: none;
font-family: "Mulish", sans-serif;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.3s ease;
}
.mopabond-products-all-btn:hover {
background: #f58220;
color: #ffffff;
}
.mopabond-products-all-btn strong {
font-size: 13px;
line-height: 1;
font-weight: 500;
}
/* =========================================================
PRODUCTS GRID
========================================================= */
.mopabond-products-grid {
width: 100%;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 9px;
}
/* =========================================================
PRODUCT CARD
========================================================= */
.mopabond-product-card {
width: 100%;
min-width: 0;
min-height: 145px;
background: #ffffff;
border-radius: 5px;
overflow: hidden;
display: flex;
align-items: stretch;
box-shadow:
0 2px 8px rgba(0,0,0,0.08);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.mopabond-product-card:hover {
transform: translateY(-3px);
box-shadow:
0 8px 20px rgba(0,0,0,0.16);
}
/* =========================================================
PRODUCT IMAGE
========================================================= */
.mopabond-product-image {
width: 42%;
min-width: 42%;
min-height: 145px;
padding: 7px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
box-sizing: border-box;
}
.mopabond-product-image img {
width: 100%;
height: 100%;
max-height: 155px;
display: block;
object-fit: contain;
}
/* =========================================================
PRODUCT CONTENT
========================================================= */
.mopabond-product-content {
flex: 1;
min-width: 0;
padding: 15px 10px 11px 3px;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
}
/* =========================================================
PRODUCT TITLE
========================================================= */
.mopabond-product-content h3 {
margin: 0 0 8px;
color: #06284d;
font-family: "Saira", sans-serif;
font-size: 17px;
font-weight: 800;
line-height: 1.05;
}
/* =========================================================
FEATURES
========================================================= */
.mopabond-product-features {
display: flex;
flex-direction: column;
gap: 4px;
}
/* =========================================================
SINGLE FEATURE
========================================================= */
.mopabond-product-feature {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
color: #5c6268;
font-family: "Mulish", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.15;
}
/* =========================================================
FEATURE CIRCLE
========================================================= */
.mopabond-feature-circle {
width: 13px;
height: 13px;
min-width: 13px;
display: flex;
align-items: center;
justify-content: center;
color: #f58220;
border: 1px solid #f58220;
border-radius: 50%;
font-size: 7px;
font-weight: 800;
line-height: 1;
}
/* =========================================================
VIEW PRODUCT BUTTON
========================================================= */
.mopabond-product-view-btn {
width: fit-content;
min-height: 25px;
margin-top: auto;
padding: 0 9px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
background: #f58220;
color: #ffffff;
border-radius: 3px;
text-decoration: none;
font-family: "Mulish", sans-serif;
margin-top: 20px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
transition: all 0.3s ease;
}
.mopabond-product-view-btn:hover {
background: #06284d;
color: #ffffff;
}
.mopabond-product-view-btn strong {
font-size: 11px;
line-height: 1;
font-weight: 500;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (max-width: 1200px) {
.mopabond-products-section {
padding-left: 20px;
padding-right: 20px;
}
.mopabond-products-grid {
gap: 8px;
}
.mopabond-product-image {
width: 40%;
min-width: 40%;
}
.mopabond-product-content h3 {
font-size: 12px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.mopabond-products-section {
padding:
42px
20px
48px;
}
.mopabond-products-header {
margin-bottom: 18px;
}
.mopabond-products-title {
font-size: 32px;
}
/* 2 columns */
.mopabond-products-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px;
}
.mopabond-product-card {
min-height: 175px;
}
.mopabond-product-image {
min-height: 175px;
width: 43%;
min-width: 43%;
}
.mopabond-product-image img {
max-height: 160px;
}
.mopabond-product-content {
padding:
18px
12px
12px
4px;
}
.mopabond-product-content h3 {
font-size: 14px;
}
.mopabond-product-feature {
font-size: 9px;
}
.mopabond-feature-circle {
width: 15px;
height: 15px;
min-width: 15px;
}
.mopabond-product-view-btn {
min-height: 28px;
font-size: 8px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mopabond-products-section {
padding:
38px
15px
45px;
}
.mopabond-products-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.mopabond-products-title {
font-size: 30px;
}
.mopabond-products-subtitle {
font-size: 10px;
max-width: 330px;
}
.mopabond-products-all-btn {
height: 34px;
font-size: 9px;
}
/* One column */
.mopabond-products-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.mopabond-product-card {
min-height: 190px;
}
.mopabond-product-image {
width: 42%;
min-width: 42%;
min-height: 190px;
padding: 10px;
}
.mopabond-product-image img {
max-height: 170px;
}
.mopabond-product-content {
padding:
20px
15px
14px
3px;
}
.mopabond-product-content h3 {
font-size: 16px;
margin-bottom: 10px;
}
.mopabond-product-feature {
font-size: 10px;
gap: 6px;
}
.mopabond-feature-circle {
width: 17px;
height: 17px;
min-width: 17px;
font-size: 8px;
}
.mopabond-product-view-btn {
min-height: 31px;
padding: 0 11px;
font-size: 9px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.mopabond-products-section {
padding:
35px
12px
42px;
}
.mopabond-products-title {
font-size: 27px;
}
.mopabond-products-subtitle {
font-size: 9px;
}
.mopabond-product-card {
min-height: 170px;
}
.mopabond-product-image {
min-height: 170px;
padding: 8px;
}
.mopabond-product-image img {
max-height: 155px;
}
.mopabond-product-content {
padding:
16px
10px
10px
2px;
}
.mopabond-product-content h3 {
font-size: 14px;
}
.mopabond-product-feature {
font-size: 8px;
}
.mopabond-feature-circle {
width: 14px;
height: 14px;
min-width: 14px;
font-size: 7px;
}
.mopabond-product-view-btn {
min-height: 27px;
font-size: 8px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 360px) {
.mopabond-products-title {
font-size: 24px;
}
.mopabond-product-card {
min-height: 155px;
}
.mopabond-product-image {
min-height: 155px;
}
.mopabond-product-content h3 {
font-size: 13px;
}
.mopabond-product-feature {
font-size: 7px;
}
}
/* =========================================================
MOPABOND - WHY CHOOSE US
UNIQUE CLASS PREFIX: mpbd-whychoose-82x
========================================================= */
.mpbd-whychoose-82x {
width: 100%;
background: #ffffff;
padding: 45px 28px 45px;
box-sizing: border-box;
}
.mpbd-whychoose-82x *,
.mpbd-whychoose-82x *::before,
.mpbd-whychoose-82x *::after {
box-sizing: border-box;
}
/* =========================================================
MAIN WRAPPER
========================================================= */
.mpbd-whychoose-wrap-82x {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
HEADER AREA
========================================================= */
.mpbd-whychoose-head-82x {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
margin-bottom: 12px;
}
/* =========================================================
HEADING
========================================================= */
.mpbd-whychoose-title-82x {
margin: 0;
color: #102d50;
font-family: "Saira", sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -.3px;
}
.mpbd-whychoose-title-orange-82x {
color: #ef5b21;
}
/* Question mark */
.mpbd-whychoose-title-question-82x {
color: #ef5b21;
}
/* =========================================================
SUBTITLE
========================================================= */
.mpbd-whychoose-subtitle-82x {
margin: 3px 0 0;
color: #4d4d4d;
font-weight: 400;
line-height: 1.3;
}
/* =========================================================
KNOW MORE BUTTON
========================================================= */
.mpbd-whychoose-btn-82x {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 17px;
margin-top: 1px;
background: #f15a24;
color: #ffffff;
border-radius: 3px;
text-decoration: none;
font-family: "Saira", sans-serif;
font-weight: 600;
line-height: 1;
box-shadow:
0 2px 5px rgba(0,0,0,.08);
transition:
background .25s ease,
transform .25s ease;
}
.mpbd-whychoose-btn-82x:hover {
background: #d94d1b;
color: #ffffff;
transform: translateY(-1px);
}
.mpbd-whychoose-btn-82x i {
font-size: inherit;
}
/* =========================================================
CARDS GRID
========================================================= */
.mpbd-whychoose-grid-82x {
display: grid;
grid-template-columns:
repeat(6, minmax(0, 1fr));
gap: 8px;
width: 100%;
}
/* =========================================================
CARD
========================================================= */
.mpbd-whychoose-card-82x {
position: relative;
min-width: 0;
min-height: 125px;
padding: 12px 11px 11px;
border: 1px solid #e8e8e8;
border-radius: 5px;
background: #ffffff;
box-shadow:
0 1px 4px rgba(0,0,0,.025);
transition:
transform .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
.mpbd-whychoose-card-82x:hover {
transform: translateY(-2px);
border-color: #f1b39a;
box-shadow:
0 5px 14px rgba(0,0,0,.07);
}
/* =========================================================
ICON
========================================================= */
.mpbd-whychoose-icon-82x {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
border-radius: 50%;
background: #fff0e9;
color: #ef5b21;
border: 1px solid #ffd9ca;
}
.mpbd-whychoose-icon-82x i {
font-size: 25px;
line-height: 1;
}
/* =========================================================
CARD TITLE
========================================================= */
.mpbd-whychoose-card-title-82x {
margin: 0 0 4px;
color: #102d50;
font-family: "Saira", sans-serif;
font-weight: 700;
margin-top: 20px;
line-height: 1.15;
}
/* =========================================================
CARD DESCRIPTION
========================================================= */
.mpbd-whychoose-card-text-82x {
margin: 0;
color: #5e6670;
margin-top: 15px;
font-weight: 400;
line-height: 1.3;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.mpbd-whychoose-82x {
padding-left: 20px;
padding-right: 20px;
}
.mpbd-whychoose-grid-82x {
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 10px;
}
.mpbd-whychoose-card-82x {
min-height: 130px;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 750px) {
.mpbd-whychoose-head-82x {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.mpbd-whychoose-btn-82x {
margin-top: 0;
}
.mpbd-whychoose-grid-82x {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 480px) {
.mpbd-whychoose-82x {
padding:
18px 12px 22px;
}
.mpbd-whychoose-head-82x {
gap: 10px;
margin-bottom: 13px;
}
.mpbd-whychoose-grid-82x {
grid-template-columns:
1fr;
gap: 9px;
}
.mpbd-whychoose-card-82x {
min-height: auto;
padding:
13px;
}
.mpbd-whychoose-icon-82x {
width: 31px;
height: 31px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 350px) {
.mpbd-whychoose-82x {
padding-left: 10px;
padding-right: 10px;
}
.mpbd-whychoose-btn-82x {
width: 100%;
}
}
/* =========================================================
APPLICATION SOLUTIONS BANNER
UNIQUE PREFIX: mpbd-applications-74x
========================================================= */
.mpbd-applications-74x {
position: relative;
width: 100%;
min-height: 245px;
overflow: hidden;
background:
linear-gradient(
90deg,
rgba(2, 26, 52, .98) 0%,
rgba(3, 34, 66, .94) 34%,
rgba(3, 34, 66, .48) 67%,
rgba(2, 22, 43, .58) 100%
),
url("../img/cta.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mpbd-applications-74x *,
.mpbd-applications-74x *::before,
.mpbd-applications-74x *::after {
box-sizing: border-box;
}
/* =========================================================
INNER
========================================================= */
.mpbd-applications-inner-74x {
position: relative;
z-index: 5;
width: 100%;
max-width: 1320px;
min-height: 245px;
margin: 0 auto;
display: flex;
align-items: center;
padding:
25px 35px;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.mpbd-applications-content-74x {
width: 36%;
flex-shrink: 0;
padding-right: 20px;
}
.mpbd-applications-title-74x {
margin: 0;
color: #ffffff;
font-family:
"Saira",
sans-serif;
font-weight: 800;
line-height: 1.02;
text-transform: uppercase;
letter-spacing: -.3px;
}
.mpbd-applications-title-orange-74x {
display: block;
color: #f15b23;
}
/* Description */
.mpbd-applications-description-74x {
max-width: 280px;
margin:
9px 0 13px;
color:
rgba(255,255,255,.88);
font-family:
"Saira",
sans-serif;
font-weight:
400;
line-height:
1.3;
}
/* =========================================================
BUTTON
========================================================= */
.mpbd-applications-button-74x {
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
8px;
padding:
8px 16px;
background:
#f15b23;
color:
#ffffff;
border:
1px solid
#ff7139;
border-radius:
3px;
text-decoration:
none;
font-family:
"Saira",
sans-serif;
font-weight:
600;
line-height:
1;
box-shadow:
0 3px 8px
rgba(0,0,0,.15);
transition:
.25s ease;
}
.mpbd-applications-button-74x:hover {
background:
#d94b17;
color:
#ffffff;
transform:
translateY(-2px);
}
/* =========================================================
APPLICATION LABELS AREA
========================================================= */
.mpbd-applications-labels-74x {
position:
relative;
flex:
1;
min-height:
210px;
}
/* =========================================================
LABEL
========================================================= */
.mpbd-application-label-74x {
position:
absolute;
display:
flex;
align-items:
center;
gap:
7px;
padding:
5px 9px 5px 5px;
min-width:
145px;
background:
rgba(255,255,255,.95);
border:
1px solid
rgba(255,255,255,.8);
border-radius:
5px;
box-shadow:
0 3px 10px
rgba(0,0,0,.16);
color:
#1b2d40;
font-size: 13px;
}
/* =========================================================
LABEL ICON
========================================================= */
.mpbd-application-label-icon-74x {
flex:
0 0 30px;
width:
30px;
height:
30px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
50%;
background:
#f47a32;
color:
#ffffff;
box-shadow:
0 2px 5px
rgba(0,0,0,.12);
}
.mpbd-application-label-icon-74x i {
font-size:
13px;
line-height:
1;
}
/* =========================================================
LABEL TEXT
========================================================= */
.mpbd-application-label-74x span {
display:
block;
font-weight:
700;
line-height:
1.08;
}
/* =========================================================
INDIVIDUAL POSITIONS
========================================================= */
/* Roof */
.mpbd-application-roof-74x {
top:
0;
left:
5%;
}
/* Bathroom */
.mpbd-application-bathroom-74x {
top:
4px;
right:
35%;
}
/* Walls */
.mpbd-application-walls-74x {
top:
13px;
right:
-2%;
}
/* Flooring */
.mpbd-application-flooring-74x {
bottom:
7px;
left:
1%;
}
/* Kitchen */
.mpbd-application-kitchen-74x {
bottom:
3px;
left:
39%;
}
/* Concrete */
.mpbd-application-concrete-74x {
bottom:
13px;
right:
-1%;
}
/* =========================================================
SMALL CONNECTOR DOT
========================================================= */
.mpbd-application-label-74x::after {
content:
"";
position:
absolute;
width:
7px;
height:
7px;
border-radius:
50%;
background:
#f47a32;
box-shadow:
0 0 0 2px
rgba(244,122,50,.18);
}
/* Individual dot positions */
.mpbd-application-roof-74x::after {
right:
-8px;
bottom:
-8px;
}
.mpbd-application-bathroom-74x::after {
left:
-8px;
bottom:
-8px;
}
.mpbd-application-walls-74x::after {
left:
-8px;
bottom:
-8px;
}
.mpbd-application-flooring-74x::after {
right:
-8px;
top:
-8px;
}
.mpbd-application-kitchen-74x::after {
left:
-8px;
top:
-8px;
}
.mpbd-application-concrete-74x::after {
left:
-8px;
top:
-8px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.mpbd-applications-inner-74x {
padding:
22px 25px;
}
.mpbd-applications-content-74x {
width:
35%;
}
.mpbd-applications-labels-74x {
min-height:
205px;
}
.mpbd-application-label-74x {
min-width:
130px;
padding:
5px 7px 5px 5px;
}
.mpbd-application-bathroom-74x {
right:
15%;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 800px) {
.mpbd-applications-74x {
min-height:
auto;
}
.mpbd-applications-inner-74x {
min-height:
auto;
flex-direction:
column;
align-items:
stretch;
padding:
35px 22px;
}
.mpbd-applications-content-74x {
width:
100%;
padding:
0;
margin-bottom:
30px;
}
.mpbd-applications-description-74x {
max-width:
420px;
}
.mpbd-applications-labels-74x {
min-height:
270px;
width:
100%;
}
.mpbd-application-label-74x {
min-width:
145px;
}
.mpbd-application-roof-74x {
left:
2%;
}
.mpbd-application-bathroom-74x {
right:
27%;
}
.mpbd-application-walls-74x {
right:
0;
}
.mpbd-application-flooring-74x {
left:
2%;
}
.mpbd-application-kitchen-74x {
left:
38%;
}
.mpbd-application-concrete-74x {
right:
0;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mpbd-applications-74x {
background-position:
center;
}
.mpbd-applications-inner-74x {
padding:
30px 15px;
}
.mpbd-applications-content-74x {
text-align:
center;
margin-bottom:
25px;
}
.mpbd-applications-description-74x {
margin-left:
auto;
margin-right:
auto;
}
.mpbd-applications-labels-74x {
min-height:
390px;
display:
grid;
grid-template-columns:
repeat(2, 1fr);
grid-template-rows:
repeat(3, auto);
gap:
12px;
align-content:
center;
}
.mpbd-application-label-74x {
position:
relative;
top:
auto !important;
right:
auto !important;
bottom:
auto !important;
left:
auto !important;
min-width:
0;
width:
100%;
min-height:
52px;
}
.mpbd-application-label-74x::after {
display:
none;
}
.mpbd-application-roof-74x {
grid-column:
1;
grid-row:
1;
}
.mpbd-application-bathroom-74x {
grid-column:
2;
grid-row:
1;
}
.mpbd-application-walls-74x {
grid-column:
1;
grid-row:
2;
}
.mpbd-application-flooring-74x {
grid-column:
2;
grid-row:
2;
}
.mpbd-application-kitchen-74x {
grid-column:
1;
grid-row:
3;
}
.mpbd-application-concrete-74x {
grid-column:
2;
grid-row:
3;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.mpbd-applications-labels-74x {
grid-template-columns:
1fr;
grid-template-rows:
repeat(6, auto);
min-height:
auto;
}
.mpbd-application-roof-74x,
.mpbd-application-bathroom-74x,
.mpbd-application-walls-74x,
.mpbd-application-flooring-74x,
.mpbd-application-kitchen-74x,
.mpbd-application-concrete-74x {
grid-column:
1;
grid-row:
auto;
}
}
/* ==========================================
MOPABOND WATERPROOFING FEATURE
========================================== */
.mopa-waterproof-feature {
--mopa-navy: #062B63;
--mopa-deep: #031B40;
--mopa-blue: #0B4C99;
--mopa-orange: #FF6A00;
--mopa-orange-light: #FF8126;
--mopa-white: #FFFFFF;
--mopa-light: #F4F7FA;
position: relative;
width: 100%;
overflow: hidden;
padding: 100px 20px;
background:
linear-gradient(
135deg,
#031B40 0%,
#062B63 48%,
#073E7E 100%
);
}
/* ==========================================
BACKGROUND GRID
========================================== */
.mopa-waterproof-grid {
position: absolute;
inset: 0;
opacity: 0.06;
pointer-events: none;
background-image:
linear-gradient(
rgba(255,255,255,0.5) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,0.5) 1px,
transparent 1px
);
background-size: 70px 70px;
}
/* ==========================================
BACKGROUND GLOW
========================================== */
.mopa-waterproof-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(5px);
}
.mopa-glow-one {
width: 420px;
height: 420px;
top: -200px;
right: -120px;
background: rgba(255, 106, 0, 0.13);
}
.mopa-glow-two {
width: 350px;
height: 350px;
bottom: -200px;
left: -120px;
background: rgba(0, 120, 255, 0.12);
}
/* ==========================================
CONTAINER
========================================== */
.mopa-waterproof-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, 0.92fr)
minmax(0, 1.08fr);
gap: 65px;
align-items: center;
}
/* ==========================================
LEFT CONTENT
========================================== */
.mopa-waterproof-content {
position: relative;
}
/* ==========================================
EYEBROW
========================================== */
.mopa-waterproof-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: var(--mopa-orange);
font-family: "Mulish", sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.mopa-eyebrow-line {
display: inline-block;
width: 38px;
height: 3px;
background: var(--mopa-orange);
border-radius: 10px;
}
/* ==========================================
MAIN HEADING
========================================== */
.mopa-waterproof-title {
margin: 0;
color: var(--mopa-white);
font-family: "Saira", sans-serif;
font-size: 38px ;
font-weight: 800;
line-height: 0.98;
letter-spacing: -1.8px;
text-transform: uppercase;
}
.mopa-waterproof-title span {
display: block;
color: var(--mopa-orange);
}
/* ==========================================
LARGE STATEMENT
========================================== */
.mopa-waterproof-statement {
display: flex;
align-items: flex-start;
gap: 18px;
margin-top: 32px;
margin-bottom: 26px;
padding-left: 18px;
border-left: 4px solid var(--mopa-orange);
}
.mopa-statement-number {
color:white;
font-family: "Saira", sans-serif;
font-size: 18px;
font-weight: 700;
}
.mopa-statement-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.mopa-statement-text strong {
color: var(--mopa-white);
font-family: "Saira", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0.3px;
}
.mopa-statement-text strong:last-child {
color: var(--mopa-orange);
}
/* ==========================================
DESCRIPTION
========================================== */
.mopa-waterproof-description {
max-width: 530px;
margin: 0 0 30px;
color: rgba(255,255,255,0.78);
font-family: "Mulish", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.75;
}
/* ==========================================
FEATURE POINTS
========================================== */
.mopa-waterproof-points {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 10px;
margin-bottom: 32px;
}
.mopa-waterproof-point {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 12px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.055);
border-radius: 8px;
transition:
transform 0.3s ease,
background 0.3s ease,
border-color 0.3s ease;
}
.mopa-waterproof-point:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.09);
border-color: rgba(255,106,0,0.5);
}
.mopa-point-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 7px;
color: var(--mopa-orange);
background: rgba(255,106,0,0.12);
font-size: 15px;
}
.mopa-waterproof-point strong {
display: block;
margin-bottom: 3px;
color: var(--mopa-white);
font-family: "Saira", sans-serif;
font-size: 14px;
font-weight: 700;
}
.mopa-waterproof-point small {
display: block;
color: rgb(255 255 255);
font-family: "Mulish", sans-serif;
font-size: 13px;
line-height: 1.4;
}
/* ==========================================
CTA
========================================== */
.mopa-waterproof-btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
color: var(--mopa-white);
background: var(--mopa-orange);
border-radius: 5px;
text-decoration: none;
font-family: "Mulish", sans-serif;
font-size: 13px;
font-weight: 800;
transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.mopa-waterproof-btn i {
transition: transform 0.3s ease;
}
.mopa-waterproof-btn:hover {
color: var(--mopa-white);
background: #ff7b1c;
transform: translateY(-3px);
box-shadow:
0 12px 25px rgba(255,106,0,0.25);
}
.mopa-waterproof-btn:hover i {
transform: translateX(5px);
}
/* ==========================================
RIGHT VISUAL
========================================== */
.mopa-waterproof-visual {
position: relative;
min-width: 0;
}
/* ==========================================
MAIN IMAGE
========================================== */
.mopa-waterproof-main-image {
position: relative;
width: 100%;
height: 440px;
overflow: hidden;
border-radius: 18px;
background: #0b294e;
box-shadow:
0 30px 70px rgba(0,0,0,0.30);
}
.mopa-waterproof-main-image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 7px;
height: 100%;
z-index: 3;
background: var(--mopa-orange);
}
.mopa-waterproof-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease;
}
.mopa-waterproof-main-image:hover img {
transform: scale(1.04);
}
.mopa-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 45%,
rgba(2,20,44,0.65) 100%
);
pointer-events: none;
}
/* ==========================================
FLOATING LABEL
========================================== */
.mopa-waterproof-label {
position: absolute;
left: 25px;
bottom: 25px;
z-index: 5;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
background: rgba(3,27,64,0.93);
border-left: 3px solid var(--mopa-orange);
border-radius: 5px;
backdrop-filter: blur(10px);
}
.mopa-label-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--mopa-orange);
background: rgba(255,106,0,0.13);
border-radius: 50%;
}
.mopa-waterproof-label small {
display: block;
margin-bottom: 2px;
color: var(--mopa-orange);
font-family: "Mulish", sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
}
.mopa-waterproof-label strong {
display: block;
color: var(--mopa-white);
font-family: "Saira", sans-serif;
font-size: 14px;
}
/* ==========================================
BEFORE / AFTER
========================================== */
.mopa-before-after {
position: relative;
display: grid;
grid-template-columns: 1fr 45px 1fr;
align-items: center;
gap: 10px;
margin-top: -55px;
padding: 0 18px;
z-index: 8;
}
/* ==========================================
CONDITION CARD
========================================== */
.mopa-condition-card {
overflow: hidden;
background: var(--mopa-white);
border-radius: 9px;
box-shadow:
0 15px 35px rgba(0,0,0,0.20);
}
.mopa-condition-image {
position: relative;
/* height: 115px; */
overflow: hidden;
}
.mopa-condition-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mopa-condition-tag {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 8px;
color: var(--mopa-white);
background: var(--mopa-orange);
border-radius: 3px;
font-family: "Mulish", sans-serif;
font-size: 8px;
font-weight: 900;
letter-spacing: 1px;
}
.mopa-condition-info {
display: flex;
align-items: center;
gap: 9px;
padding: 10px;
}
.mopa-condition-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 50%;
color: var(--mopa-orange);
background: rgba(255,106,0,0.1);
}
.mopa-condition-info strong {
display: block;
color: var(--mopa-navy);
font-family: "Saira", sans-serif;
font-size: 17px;
font-weight: 700;
}
.mopa-condition-info small {
display: block;
margin-top: 2px;
color: #7a8491;
font-family: "Mulish", sans-serif;
font-size: 14px;
}
/* ==========================================
BEFORE / AFTER ARROW
========================================== */
.mopa-before-after-arrow {
display: flex;
align-items: center;
justify-content: center;
}
.mopa-before-after-arrow span {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--mopa-white);
background: var(--mopa-orange);
border-radius: 50%;
box-shadow:
0 8px 20px rgba(255,106,0,0.3);
}
/* ==========================================
RESPONSIVE — TABLET
========================================== */
@media (max-width: 1000px) {
.mopa-waterproof-feature {
padding: 80px 25px;
}
.mopa-waterproof-container {
grid-template-columns: 1fr;
gap: 55px;
max-width: 760px;
}
.mopa-waterproof-content {
max-width: 680px;
}
.mopa-waterproof-title {
font-size: 58px;
}
.mopa-waterproof-main-image {
height: 460px;
}
}
/* ==========================================
RESPONSIVE — MOBILE
========================================== */
@media (max-width: 650px) {
.mopa-waterproof-feature {
padding: 65px 16px;
}
.mopa-waterproof-container {
gap: 40px;
}
.mopa-waterproof-eyebrow {
font-size: 10px;
letter-spacing: 1.5px;
}
.mopa-waterproof-title {
font-size: 43px;
letter-spacing: -1px;
}
.mopa-waterproof-statement {
margin-top: 25px;
padding-left: 13px;
}
.mopa-statement-text strong {
font-size: 18px;
}
.mopa-waterproof-description {
font-size: 14px;
line-height: 1.65;
}
.mopa-waterproof-points {
grid-template-columns: 1fr;
gap: 8px;
}
.mopa-waterproof-point {
flex-direction: row;
align-items: center;
}
.mopa-waterproof-main-image {
height: 360px;
border-radius: 12px;
}
.mopa-waterproof-label {
left: 16px;
bottom: 16px;
}
.mopa-before-after {
grid-template-columns: 1fr;
gap: 12px;
margin-top: -35px;
padding: 0 8px;
}
.mopa-before-after-arrow {
display: none;
}
.mopa-condition-image {
height: 150px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 400px) {
.mopa-waterproof-feature {
padding: 50px 13px;
}
.mopa-waterproof-title {
font-size: 37px;
}
.mopa-statement-text strong {
font-size: 16px;
}
.mopa-waterproof-main-image {
height: 310px;
}
.mopa-waterproof-btn {
width: 100%;
justify-content: center;
padding: 14px 12px;
}
}
/* ==========================================
MOPABOND — BUILT FOR PROFESSIONALS
========================================== */
.mopa-pro-section {
--mopa-pro-navy: #062B63;
--mopa-pro-deep: #031B40;
--mopa-pro-blue: #0B4C99;
--mopa-pro-orange: #FF6A00;
--mopa-pro-orange-light: #FF8126;
--mopa-pro-white: #FFFFFF;
--mopa-pro-light: #F5F7FA;
--mopa-pro-text: #17243A;
--mopa-pro-muted: #687487;
position: relative;
width: 100%;
padding: 105px 20px;
overflow: hidden;
background: var(--mopa-pro-light);
}
/* ==========================================
BACKGROUND GRID
========================================== */
.mopa-pro-bg-grid {
position: absolute;
inset: 0;
opacity: 0.4;
pointer-events: none;
background-image:
linear-gradient(
rgba(6,43,99,0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(6,43,99,0.035) 1px,
transparent 1px
);
background-size: 55px 55px;
}
/* ==========================================
ORANGE DECORATIVE SHAPE
========================================== */
.mopa-pro-orange-shape {
position: absolute;
width: 480px;
height: 480px;
right: -270px;
top: 80px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,106,0,0.09) 0%,
rgba(255,106,0,0.03) 45%,
transparent 70%
);
pointer-events: none;
}
/* ==========================================
MAIN CONTAINER
========================================== */
.mopa-pro-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, 0.93fr)
minmax(0, 1.07fr);
gap: 70px;
align-items: center;
}
/* ==========================================
LEFT VISUAL
========================================== */
.mopa-pro-visual {
position: relative;
min-width: 0;
padding-bottom: 30px;
}
.mopa-pro-image-wrap {
position: relative;
width: 100%;
height: 545px;
overflow: hidden;
border-radius: 4px 30px 4px 30px;
background: var(--mopa-pro-navy);
box-shadow:
0 25px 55px rgba(3,27,64,0.18);
}
/* Orange vertical accent */
.mopa-pro-image-wrap::before {
content: "";
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 8px;
height: 100%;
background: var(--mopa-pro-orange);
}
.mopa-pro-image-wrap img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition:
transform 0.7s ease;
}
.mopa-pro-image-wrap:hover img {
transform: scale(1.045);
}
/* Image overlay */
.mopa-pro-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(3,27,64,0.02) 30%,
rgba(3,27,64,0.70) 100%
);
pointer-events: none;
}
/* ==========================================
FLOATING BRAND CARD
========================================== */
.mopa-pro-brand-card {
position: absolute;
z-index: 10;
left: 25px;
bottom: 28px;
display: flex;
align-items: center;
gap: 13px;
padding: 14px 18px;
background:
rgba(3,27,64,0.94);
border-left: 4px solid var(--mopa-pro-orange);
border-radius: 3px;
box-shadow:
0 15px 30px rgba(0,0,0,0.22);
backdrop-filter: blur(8px);
}
.mopa-pro-brand-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
color: var(--mopa-pro-orange);
background:
rgba(255,106,0,0.13);
border-radius: 50%;
font-size: 17px;
}
.mopa-pro-brand-text span {
display: block;
margin-bottom: 2px;
color: var(--mopa-pro-orange);
font-family: "Mulish", sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
}
.mopa-pro-brand-text strong {
display: block;
color: var(--mopa-pro-white);
font-family: "Saira", sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* ==========================================
EXPERIENCE BADGE
========================================== */
.mopa-pro-experience {
position: absolute;
z-index: 12;
right: -24px;
bottom: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: var(--mopa-pro-orange);
color: var(--mopa-pro-white);
border-radius: 4px;
box-shadow:
0 12px 28px rgba(255,106,0,0.28);
}
.mopa-pro-experience-number {
font-family: "Saira", sans-serif;
font-size: 26px;
font-weight: 800;
line-height: 1;
}
.mopa-pro-experience strong,
.mopa-pro-experience small {
display: block;
}
.mopa-pro-experience strong {
font-family: "Saira", sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
}
.mopa-pro-experience small {
margin-top: 2px;
font-family: "Mulish", sans-serif;
font-size: 8px;
font-weight: 700;
opacity: 0.85;
letter-spacing: 1px;
}
/* ==========================================
RIGHT CONTENT
========================================== */
.mopa-pro-content {
position: relative;
min-width: 0;
}
/* ==========================================
EYEBROW
========================================== */
.mopa-pro-eyebrow {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 18px;
color: var(--mopa-pro-orange);
font-family: "Mulish", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.mopa-pro-eyebrow-line {
width: 38px;
height: 3px;
display: inline-block;
background: var(--mopa-pro-orange);
border-radius: 10px;
}
/* ==========================================
HEADING
========================================== */
.mopa-pro-heading {
margin: 0;
color: var(--mopa-pro-navy);
font-family: "Saira", sans-serif;
font-size:40px ;
font-weight: 800;
line-height: 0.98;
letter-spacing: -1.5px;
text-transform: uppercase;
}
.mopa-pro-heading span {
display: block;
color: var(--mopa-pro-orange);
}
/* ==========================================
DESCRIPTION
========================================== */
.mopa-pro-description {
max-width: 570px;
margin: 26px 0 8px;
color: var(--mopa-pro-text);
font-family: "Mulish", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
}
.mopa-pro-description-small {
margin-top: 5px;
color: var(--mopa-pro-muted);
font-size: 14px;
font-weight: 400;
line-height: 1.75;
}
/* ==========================================
FEATURES
========================================== */
.mopa-pro-features {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 12px;
margin-top: 30px;
}
.mopa-pro-feature {
position: relative;
display: flex;
gap: 13px;
min-height: 85px;
padding: 17px;
background: var(--mopa-pro-white);
border: 1px solid #E5EAF0;
border-radius: 5px;
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.mopa-pro-feature::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background: var(--mopa-pro-orange);
transition: width 0.3s ease;
}
.mopa-pro-feature:hover {
transform: translateY(-5px);
border-color:
rgba(255,106,0,0.35);
box-shadow:
0 15px 30px rgba(3,27,64,0.08);
}
.mopa-pro-feature:hover::after {
width: 100%;
}
/* ==========================================
FEATURE ICON
========================================== */
.mopa-pro-feature-icon {
flex: 0 0 auto;
width: 43px;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
color: var(--mopa-pro-orange);
background:
#FFF3EA;
border-radius: 5px;
font-size: 15px;
}
.mopa-pro-feature-content {
position: relative;
padding-right: 5px;
}
.mopa-pro-feature-number {
position: absolute;
right: 0;
top: -3px;
color: #E8ECF1;
font-family: "Saira", sans-serif;
font-size: 21px;
font-weight: 800;
}
.mopa-pro-feature h3 {
margin: 0 25px 5px 0;
color: var(--mopa-pro-navy);
font-family: "Saira", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}
.mopa-pro-feature p {
margin: 0;
color: var(--mopa-pro-muted);
font-family: "Mulish", sans-serif;
font-size: 13px;
line-height: 1.55;
}
/* ==========================================
CTA AREA
========================================== */
.mopa-pro-action {
display: flex;
align-items: center;
gap: 18px;
margin-top: 28px;
}
.mopa-pro-button {
display: inline-flex;
align-items: center;
gap: 13px;
padding: 14px 20px;
color: var(--mopa-pro-white);
background: var(--mopa-pro-orange);
border-radius: 4px;
text-decoration: none;
font-family: "Mulish", sans-serif;
font-size: 12px;
font-weight: 800;
transition:
transform 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.mopa-pro-button i {
transition:
transform 0.3s ease;
}
.mopa-pro-button:hover {
color: var(--mopa-pro-white);
background:
var(--mopa-pro-orange-light);
transform: translateY(-3px);
box-shadow:
0 12px 25px rgba(255,106,0,0.25);
}
.mopa-pro-button:hover i {
transform: translateX(5px);
}
.mopa-pro-action-note {
color: #8791A0;
font-family: "Mulish", sans-serif;
font-size: 10px;
font-weight: 600;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1000px) {
.mopa-pro-section {
padding: 80px 25px;
}
.mopa-pro-container {
grid-template-columns: 1fr;
max-width: 760px;
gap: 55px;
}
.mopa-pro-image-wrap {
height: 520px;
}
.mopa-pro-content {
max-width: 720px;
}
.mopa-pro-heading {
font-size: 58px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 650px) {
.mopa-pro-section {
padding: 65px 16px;
}
.mopa-pro-container {
gap: 42px;
}
.mopa-pro-image-wrap {
height: 400px;
border-radius: 3px 20px 3px 20px;
}
.mopa-pro-brand-card {
left: 16px;
bottom: 18px;
padding: 11px 13px;
}
.mopa-pro-brand-icon {
width: 35px;
height: 35px;
font-size: 14px;
}
.mopa-pro-brand-text strong {
font-size: 13px;
}
.mopa-pro-experience {
right: 10px;
}
.mopa-pro-heading {
font-size: 43px;
letter-spacing: -1px;
}
.mopa-pro-description {
font-size: 15px;
}
.mopa-pro-description-small {
font-size: 13px;
}
.mopa-pro-features {
grid-template-columns: 1fr;
gap: 10px;
}
.mopa-pro-feature {
min-height: auto;
}
.mopa-pro-action {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.mopa-pro-button {
width: 100%;
justify-content: center;
text-align: center;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 400px) {
.mopa-pro-section {
padding: 50px 13px;
}
.mopa-pro-image-wrap {
height: 340px;
}
.mopa-pro-heading {
font-size: 37px;
}
.mopa-pro-eyebrow {
font-size: 9px;
letter-spacing: 1.2px;
}
.mopa-pro-feature {
padding: 14px;
}
}
/* ==========================================
MOPABOND SIMPLE GALLERY
========================================== */
.mopa-gallery-simple {
width: 100%;
padding: 30px 20px;
background: #ffffff;
}
.mopa-gallery-simple-wrap {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* ==========================================
HEADING
========================================== */
.mopa-gallery-simple-heading {
text-align: center;
max-width: 650px;
margin: 0 auto 45px;
}
.mopa-gallery-simple-tag {
display: inline-block;
margin-bottom: 10px;
color: #FF6A00;
font-family: "Mulish", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.mopa-gallery-simple-heading h2 {
margin: 0 0 12px;
color: #062B63;
font-family: "Saira", sans-serif;
font-size: 46px;
font-weight: 800;
line-height: 1.05;
}
.mopa-gallery-simple-heading h2 span {
color: #FF6A00;
}
.mopa-gallery-simple-heading p {
margin: 0;
color: #687586;
font-family: "Mulish", sans-serif;
font-size: 14px;
line-height: 1.7;
}
/* ==========================================
GALLERY GRID
========================================== */
.mopa-gallery-simple-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
/* ==========================================
GALLERY IMAGE
========================================== */
.mopa-gallery-simple-item {
position: relative;
width: 100%;
height: 190px;
overflow: hidden;
border-radius: 5px;
background: #edf1f5;
}
.mopa-gallery-simple-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform 0.5s ease;
}
.mopa-gallery-simple-item:hover img {
transform: scale(1.06);
}
/* Orange hover overlay */
.mopa-gallery-simple-item::after {
content: "";
position: absolute;
inset: 0;
background: rgba(6, 43, 99, 0);
transition:
background 0.3s ease;
pointer-events: none;
}
.mopa-gallery-simple-item:hover::after {
background: rgba(6, 43, 99, 0.12);
}
/* ==========================================
BUTTON
========================================== */
.mopa-gallery-simple-btn-wrap {
display: flex;
justify-content: center;
margin-top: 35px;
}
.mopa-gallery-simple-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 22px;
color: #ffffff;
background: #FF6A00;
border-radius: 4px;
text-decoration: none;
font-family: "Mulish", sans-serif;
font-size: 12px;
font-weight: 800;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.mopa-gallery-simple-btn i {
transition:
transform 0.3s ease;
}
.mopa-gallery-simple-btn:hover {
color: #ffffff;
background: #062B63;
transform: translateY(-2px);
}
.mopa-gallery-simple-btn:hover i {
transform: translateX(4px);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 900px) {
.mopa-gallery-simple {
padding: 75px 25px;
}
.mopa-gallery-simple-grid {
grid-template-columns: repeat(3, 1fr);
}
.mopa-gallery-simple-item {
height: 190px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 600px) {
.mopa-gallery-simple {
padding: 60px 16px;
}
.mopa-gallery-simple-heading {
margin-bottom: 30px;
}
.mopa-gallery-simple-heading h2 {
font-size: 36px;
}
.mopa-gallery-simple-heading p {
font-size: 13px;
}
.mopa-gallery-simple-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.mopa-gallery-simple-item {
height: 145px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 400px) {
.mopa-gallery-simple {
padding: 50px 13px;
}
.mopa-gallery-simple-heading h2 {
font-size: 32px;
}
.mopa-gallery-simple-grid {
gap: 8px;
}
.mopa-gallery-simple-item {
height: 125px;
}
}
/* ==========================================
MOPABOND — TECHNICAL RESOURCES
========================================== */
.mopa-resource-section {
--mr-navy: #062B63;
--mr-deep: #031B40;
--mr-orange: #FF6A00;
--mr-orange-light: #FF8126;
--mr-white: #FFFFFF;
--mr-bg: #F5F7FA;
--mr-text: #18263A;
--mr-muted: #6D7888;
--mr-border: #E4E8ED;
width: 100%;
padding: 95px 20px;
background: var(--mr-bg);
overflow: hidden;
}
.mopa-resource-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* ==========================================
HEADER
========================================== */
.mopa-resource-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 50px;
margin-bottom: 45px;
}
.mopa-resource-heading-left {
flex: 1;
}
.mopa-resource-heading-right {
width: 340px;
padding-bottom: 5px;
}
/* ==========================================
LABEL
========================================== */
.mopa-resource-label {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 13px;
color: var(--mr-orange);
font-family: "Mulish", sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.mopa-resource-label::before {
content: "";
width: 35px;
height: 3px;
display: inline-block;
background: var(--mr-orange);
border-radius: 20px;
}
/* ==========================================
HEADING
========================================== */
.mopa-resource-heading-left h2 {
margin: 0;
color: var(--mr-navy);
font-family: "Saira", sans-serif;
font-size: 42px ;
font-weight: 800;
line-height: 0.98;
letter-spacing: -1.5px;
text-transform: uppercase;
}
.mopa-resource-heading-left h2 span {
display: block;
color: var(--mr-orange);
}
/* ==========================================
INTRO DESCRIPTION
========================================== */
.mopa-resource-heading-right p {
margin: 0;
color: var(--mr-muted);
font-family: "Mulish", sans-serif;
font-size: 14px;
line-height: 1.75;
}
/* ==========================================
RESOURCE GRID
========================================== */
.mopa-resource-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* ==========================================
CARD
========================================== */
.mopa-resource-card {
position: relative;
overflow: hidden;
background: var(--mr-white);
border: 1px solid var(--mr-border);
border-radius: 7px;
box-shadow:
0 8px 25px rgba(6,43,99,0.05);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.mopa-resource-card:hover {
transform: translateY(-7px);
box-shadow:
0 18px 40px rgba(6,43,99,0.12);
}
/* ==========================================
IMAGE
========================================== */
.mopa-resource-image {
position: relative;
width: 100%;
/* height: 220px; */
overflow: hidden;
background: var(--mr-navy);
}
.mopa-resource-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform 0.6s ease;
}
.mopa-resource-card:hover
.mopa-resource-image img {
transform: scale(1.06);
}
/* ==========================================
IMAGE OVERLAY
========================================== */
.mopa-resource-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(3,27,64,0.05) 30%,
rgba(3,27,64,0.65) 100%
);
pointer-events: none;
}
/* ==========================================
NUMBER
========================================== */
.mopa-resource-number {
position: absolute;
z-index: 3;
top: 14px;
left: 15px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
color: var(--mr-white);
background: var(--mr-orange);
border-radius: 50%;
font-family: "Saira", sans-serif;
font-size: 12px;
font-weight: 800;
}
/* ==========================================
CATEGORY
========================================== */
.mopa-resource-category {
position: absolute;
z-index: 3;
bottom: 14px;
left: 15px;
padding: 6px 9px;
color: var(--mr-white);
background: var(--mr-navy);
border-left: 3px solid var(--mr-orange);
font-family: "Mulish", sans-serif;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
}
/* ==========================================
CONTENT
========================================== */
.mopa-resource-content {
padding: 23px 22px 25px;
}
.mopa-resource-small-title {
display: block;
margin-bottom: 8px;
color: var(--mr-orange);
font-family: "Mulish", sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.mopa-resource-content h3 {
margin: 0 0 11px;
color: var(--mr-navy);
font-family: "Saira", sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.2;
}
.mopa-resource-content p {
margin: 0 0 18px;
color: var(--mr-muted);
font-family: "Mulish", sans-serif;
font-size: 12px;
line-height: 1.7;
}
/* ==========================================
READ MORE
========================================== */
.mopa-resource-link {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--mr-navy);
font-family: "Mulish", sans-serif;
font-size: 11px;
font-weight: 800;
text-decoration: none;
transition:
color 0.25s ease;
}
.mopa-resource-link i {
color: var(--mr-orange);
transition:
transform 0.25s ease;
}
.mopa-resource-link:hover {
color: var(--mr-orange);
}
.mopa-resource-link:hover i {
transform: translateX(5px);
}
/* ==========================================
BOTTOM CTA
========================================== */
.mopa-resource-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 35px;
padding: 23px 26px;
background: var(--mr-navy);
border-radius: 5px;
border-left: 4px solid var(--mr-orange);
}
.mopa-resource-bottom-text span {
display: block;
margin-bottom: 5px;
color: var(--mr-orange);
font-family: "Mulish", sans-serif;
font-size: 8px;
font-weight: 800;
letter-spacing: 1.5px;
}
.mopa-resource-bottom-text h3 {
margin: 0;
color: var(--mr-white);
font-family: "Saira", sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 1.2;
}
.mopa-resource-bottom-text strong {
color: var(--mr-orange);
}
/* ==========================================
CTA BUTTON
========================================== */
.mopa-resource-button {
display: inline-flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
padding: 13px 19px;
color: var(--mr-white);
background: var(--mr-orange);
border-radius: 4px;
text-decoration: none;
font-family: "Mulish", sans-serif;
font-size: 11px;
font-weight: 800;
transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.mopa-resource-button i {
transition:
transform 0.3s ease;
}
.mopa-resource-button:hover {
color: var(--mr-white);
background: var(--mr-orange-light);
transform: translateY(-2px);
box-shadow:
0 10px 25px rgba(255,106,0,0.25);
}
.mopa-resource-button:hover i {
transform: translateX(5px);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 900px) {
.mopa-resource-section {
padding: 75px 25px;
}
.mopa-resource-header {
align-items: flex-start;
flex-direction: column;
gap: 20px;
}
.mopa-resource-heading-right {
width: 100%;
max-width: 600px;
}
.mopa-resource-grid {
grid-template-columns: repeat(2, 1fr);
}
.mopa-resource-card:last-child {
grid-column: 1 / -1;
max-width: calc(50% - 12px);
justify-self: center;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 600px) {
.mopa-resource-section {
padding: 60px 16px;
}
.mopa-resource-header {
margin-bottom: 30px;
}
.mopa-resource-heading-left h2 {
font-size: 39px;
letter-spacing: -1px;
}
.mopa-resource-heading-right p {
font-size: 13px;
}
.mopa-resource-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.mopa-resource-card:last-child {
grid-column: auto;
max-width: none;
}
.mopa-resource-image {
height: 220px;
}
.mopa-resource-content {
padding: 20px;
}
.mopa-resource-content h3 {
font-size: 20px;
}
.mopa-resource-bottom {
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 21px;
}
.mopa-resource-button {
width: 100%;
justify-content: center;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 400px) {
.mopa-resource-section {
padding: 50px 13px;
}
.mopa-resource-heading-left h2 {
font-size: 34px;
}
.mopa-resource-image {
height: 200px;
}
}
/* =========================================
MOPABOND QUALITY SECTION
========================================= */
.mopa-quality-section {
width: 100%;
padding: 100px 20px;
background: #f5f7fa;
position: relative;
overflow: hidden;
font-family: "Mulish", sans-serif;
}
/* Background decoration */
.mopa-quality-section::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
border: 1px solid rgba(6,43,99,0.06);
border-radius: 50%;
right: -180px;
top: -180px;
}
.mopa-quality-section::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
border: 1px solid rgba(255,106,0,0.08);
border-radius: 50%;
left: -130px;
bottom: -130px;
}
/* =========================================
CONTAINER
========================================= */
.mopa-quality-container {
max-width: 1100px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* =========================================
HEADING
========================================= */
.mopa-quality-heading {
max-width: 720px;
margin-bottom: 55px;
}
.mopa-quality-label {
display: flex;
align-items: center;
gap: 12px;
color: #ff6a00;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.5px;
margin-bottom: 15px;
}
.mopa-quality-label-line {
width: 38px;
height: 3px;
background: #ff6a00;
display: inline-block;
}
.mopa-quality-heading h2 {
margin: 0;
color: #062b63;
font-family: "Saira", sans-serif;
font-size: 48px;
line-height: 1.05;
font-weight: 800;
letter-spacing: -1px;
}
.mopa-quality-heading h2 span {
display: block;
color: #ff6a00;
}
.mopa-quality-heading p {
margin: 20px 0 0;
max-width: 650px;
color: #667085;
font-size: 16px;
line-height: 1.8;
}
/* =========================================
MAIN GRID
========================================= */
.mopa-quality-main {
display: grid;
grid-template-columns: 40% 60%;
gap: 45px;
align-items: stretch;
}
/* =========================================
LEFT IMAGE
========================================= */
.mopa-quality-image {
min-height: 530px;
position: relative;
overflow: hidden;
background: #062b63;
}
.mopa-quality-image img {
width: 100%;
height: 100%;
min-height: 530px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.mopa-quality-image:hover img {
transform: scale(1.04);
}
/* =========================================
IMAGE OVERLAY
========================================= */
.mopa-quality-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(3,27,64,0.95) 0%,
rgba(3,27,64,0.45) 45%,
rgba(3,27,64,0.05) 100%
);
}
/* Orange side accent */
.mopa-quality-image::after {
content: "";
position: absolute;
width: 5px;
height: 100%;
left: 0;
top: 0;
background: #ff6a00;
z-index: 5;
}
/* =========================================
IMAGE CONTENT
========================================= */
.mopa-quality-image-content {
position: absolute;
left: 35px;
right: 30px;
bottom: 38px;
z-index: 3;
}
.mopa-quality-image-small {
display: inline-block;
padding: 6px 11px;
margin-bottom: 12px;
background: #ff6a00;
color: #ffffff;
font-family: "Saira", sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.mopa-quality-image-content h3 {
margin: 0;
color: #ffffff;
font-family: "Saira", sans-serif;
font-size: 34px;
line-height: 1.05;
font-weight: 800;
}
.mopa-quality-image-content h3 span {
color: #ff8126;
}
.mopa-quality-image-content p {
max-width: 350px;
margin: 15px 0 0;
color: rgba(255,255,255,0.78);
font-size: 13px;
line-height: 1.6;
}
/* =========================================
IMAGE BADGE
========================================= */
.mopa-quality-image-badge {
position: absolute;
right: 22px;
top: 22px;
z-index: 4;
display: flex;
align-items: center;
gap: 9px;
padding: 10px 13px;
background: rgba(255,255,255,0.96);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.mopa-quality-badge-check {
width: 32px;
height: 32px;
background: #ff6a00;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.mopa-quality-image-badge strong {
display: block;
color: #062b63;
font-family: "Saira", sans-serif;
font-size: 12px;
line-height: 1.1;
letter-spacing: 1px;
}
.mopa-quality-image-badge small {
display: block;
color: #7b8490;
font-size: 8px;
letter-spacing: 1.5px;
margin-top: 2px;
}
/* =========================================
RIGHT QUALITY ITEMS
========================================= */
.mopa-quality-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.mopa-quality-item {
min-height: 115px;
background: #ffffff;
display: grid;
grid-template-columns: 62px 1fr 38px;
align-items: center;
gap: 20px;
padding: 20px 22px;
border: 1px solid #e6e9ee;
position: relative;
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.mopa-quality-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: #ff6a00;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.3s ease;
}
.mopa-quality-item:hover {
transform: translateX(6px);
border-color: rgba(255,106,0,0.35);
box-shadow: 0 15px 35px rgba(6,43,99,0.09);
}
.mopa-quality-item:hover::before {
transform: scaleY(1);
}
/* =========================================
ICON
========================================= */
.mopa-quality-icon {
width: 58px;
height: 58px;
background: #f1f5fa;
display: flex;
align-items: center;
justify-content: center;
color: #062b63;
font-size: 21px;
transition: 0.3s ease;
}
.mopa-quality-item:hover .mopa-quality-icon {
background: #062b63;
color: #ffffff;
}
/* =========================================
TEXT
========================================= */
.mopa-quality-text {
position: relative;
}
.mopa-quality-item-number {
font-size: 10px;
font-weight: 800;
color: #ff6a00;
letter-spacing: 1.5px;
}
.mopa-quality-text h3 {
margin: 3px 0 4px;
font-family: "Saira", sans-serif;
font-size: 21px;
font-weight: 700;
color: #062b63;
}
.mopa-quality-text p {
margin: 0;
color: #727b87;
font-size: 13px;
line-height: 1.55;
}
/* =========================================
ARROW
========================================= */
.mopa-quality-arrow {
width: 34px;
height: 34px;
border: 1px solid #e4e7eb;
display: flex;
align-items: center;
justify-content: center;
color: #ff6a00;
font-size: 12px;
transition: 0.3s ease;
}
.mopa-quality-item:hover .mopa-quality-arrow {
background: #ff6a00;
color: #ffffff;
border-color: #ff6a00;
}
/* =========================================
BOTTOM TRUST STRIP
========================================= */
.mopa-quality-bottom {
margin-top: 35px;
background: #062b63;
padding: 22px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.mopa-quality-bottom-title {
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-family: "Saira", sans-serif;
font-size: 13px;
letter-spacing: 1.5px;
}
.mopa-quality-bottom-title span {
width: 25px;
height: 3px;
background: #ff6a00;
}
.mopa-quality-bottom p {
margin: 0;
color: rgba(255,255,255,0.72);
font-size: 13px;
}
.mopa-quality-bottom p b {
color: #ffffff;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.mopa-quality-section {
padding: 80px 20px;
}
.mopa-quality-main {
grid-template-columns: 1fr;
gap: 35px;
}
.mopa-quality-image {
min-height: 450px;
}
.mopa-quality-image img {
min-height: 450px;
}
.mopa-quality-heading h2 {
font-size: 42px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.mopa-quality-section {
padding: 65px 15px;
}
.mopa-quality-heading {
margin-bottom: 35px;
}
.mopa-quality-heading h2 {
font-size: 34px;
letter-spacing: -0.5px;
}
.mopa-quality-heading p {
font-size: 14px;
line-height: 1.7;
}
.mopa-quality-image {
min-height: 390px;
}
.mopa-quality-image img {
min-height: 390px;
}
.mopa-quality-image-content {
left: 25px;
right: 20px;
bottom: 28px;
}
.mopa-quality-image-content h3 {
font-size: 29px;
}
.mopa-quality-image-badge {
right: 15px;
top: 15px;
}
.mopa-quality-item {
grid-template-columns: 52px 1fr;
gap: 14px;
padding: 18px;
}
.mopa-quality-icon {
width: 52px;
height: 52px;
font-size: 18px;
}
.mopa-quality-text h3 {
font-size: 19px;
}
.mopa-quality-text p {
font-size: 12px;
}
.mopa-quality-arrow {
display: none;
}
.mopa-quality-bottom {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 20px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 400px) {
.mopa-quality-heading h2 {
font-size: 30px;
}
.mopa-quality-label {
font-size: 10px;
letter-spacing: 2px;
}
.mopa-quality-image {
min-height: 350px;
}
.mopa-quality-image img {
min-height: 350px;
}
.mopa-quality-image-content h3 {
font-size: 26px;
}
.mopa-quality-image-content p {
font-size: 12px;
}
}
/* =====================================================
MOPABOND FOOTER 14
===================================================== */
.mopa-footer14 {
width: 100%;
background: #ffffff;
font-family: "Mulish", sans-serif;
position: relative;
overflow: hidden;
}
/* =====================================================
MAIN FOOTER
===================================================== */
.mopa-footer14-main {
width: 100%;
background: #062b63;
padding: 52px 20px 50px;
position: relative;
overflow: hidden;
}
/* =====================================================
SUBTLE BACKGROUND PATTERN
===================================================== */
.mopa-footer14-main::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.5;
background-image:
linear-gradient(
30deg,
rgba(6,43,99,0.025) 12%,
transparent 12.5%,
transparent 87%,
rgba(6,43,99,0.025) 87.5%
),
linear-gradient(
150deg,
rgba(255,106,0,0.018) 12%,
transparent 12.5%,
transparent 87%,
rgba(255,106,0,0.018) 87.5%
);
background-size: 80px 80px;
}
/* =====================================================
CONTAINER
===================================================== */
.mopa-footer14-container {
max-width: 1100px;
margin: 0 auto;
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
1.15fr
0.85fr
1.2fr
1.05fr;
column-gap: 42px;
align-items: start;
}
/* =====================================================
BRAND
===================================================== */
.mopa-footer14-brand {
padding-top: 2px;
}
/* =====================================================
BLUE LOGO
===================================================== */
.mopa-footer14-logo {
display: inline-block;
text-decoration: none;
}
.mopa-footer14-logo img {
width: 270px;
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* =====================================================
TAGLINE
===================================================== */
.mopa-footer14-tagline {
max-width: 245px;
margin: 12px 0 22px;
color: #687384;
font-size: 12px;
line-height: 1.7;
}
/* =====================================================
SOCIAL ICONS
===================================================== */
.mopa-footer14-social {
display: flex;
align-items: center;
gap: 9px;
}
.mopa-footer14-social a {
width: 41px;
height: 41px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid #dbe2eb;
color: #062b63;
text-decoration: none;
font-size: 15px;
transition:
0.3s ease;
}
.mopa-footer14-social a:hover {
background: #ff6a00;
border-color: #ff6a00;
color: #ffffff;
transform: translateY(-3px);
}
/* =====================================================
COLUMN HEADINGS
===================================================== */
.mopa-footer14-column h3 {
margin: 4px 0 11px;
color: white;
font-family: "Saira", sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 1.2;
}
/* =====================================================
HEADING LINE
===================================================== */
.mopa-footer14-title-line {
display: block;
width: 42px;
height: 3px;
background: #ff6a00;
margin-bottom: 20px;
position: relative;
}
.mopa-footer14-title-line::after {
content: "";
position: absolute;
left: 48px;
top: 1px;
width: 17px;
height: 1px;
background: #062b63;
}
/* =====================================================
QUICK LINKS
===================================================== */
.mopa-footer14-column ul {
margin: 0;
padding: 0;
list-style: none;
}
.mopa-footer14-column ul li {
margin-bottom: 13px;
}
.mopa-footer14-column ul li a {
display: inline-flex;
align-items: center;
gap: 9px;
color: white;
font-size: 13px;
text-decoration: none;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.mopa-footer14-column ul li a i {
color: #ff6a00;
font-size: 9px;
transition: transform 0.3s ease;
}
.mopa-footer14-column ul li a:hover {
color: white;
transform: translateX(4px);
}
.mopa-footer14-column ul li a:hover i {
transform: translateX(2px);
}
/* =====================================================
CONTACT ITEM
===================================================== */
.mopa-footer14-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 19px;
}
/* Contact icon */
.mopa-footer14-contact-icon {
width: 30px;
min-width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #ff6a00;
font-size: 14px;
margin-top: 1px;
}
/* Contact content */
.mopa-footer14-contact-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.mopa-footer14-contact-content p {
margin: 0;
color: white;
font-size: 12px;
line-height: 1.8;
}
.mopa-footer14-contact-content a {
color: white;
font-size: 12px;
line-height: 1.7;
text-decoration: none;
transition: color 0.3s ease;
}
.mopa-footer14-contact-content a:hover {
color: #ff6a00;
}
/* =====================================================
GOOGLE MAP
===================================================== */
.mopa-footer14-map {
width: 100%;
height: 180px !important;
overflow: hidden;
}
.mopa-footer14-map iframe {
width: 100%;
height:180px !important;
border: 0;
display: block;
}
/* =====================================================
ORANGE COPYRIGHT BAR
===================================================== */
.mopa-footer14-bottom {
width: 100%;
background: #ff6a00;
position: relative;
border-top: 1px solid rgba(255,255,255,0.25);
}
/* =====================================================
COPYRIGHT INNER
===================================================== */
.mopa-footer14-bottom-inner {
max-width: 1100px;
min-height: 66px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
/* Copyright text */
.mopa-footer14-bottom p {
margin: 0;
color: #ffffff;
font-size: 12px;
line-height: 1.6;
}
/* MOPABOND name */
.mopa-footer14-bottom-brand {
color: #062b63;
font-weight: 800;
}
/* Designer link */
.mopa-footer14-bottom p a {
color: #062b63;
font-weight: 800;
text-decoration: none;
transition: color 0.3s ease;
}
.mopa-footer14-bottom p a:hover {
color: #ffffff;
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 1000px) {
.mopa-footer14-container {
grid-template-columns:
1fr
1fr;
column-gap: 50px;
row-gap: 45px;
}
.mopa-footer14-brand {
grid-column: span 2;
}
.mopa-footer14-map-column {
grid-column: span 1;
}
.mopa-footer14-map {
height: 220px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 650px) {
.mopa-footer14-main {
padding: 42px 20px 40px;
background-size: 65px 65px;
}
.mopa-footer14-container {
grid-template-columns: 1fr;
row-gap: 36px;
column-gap: 0;
}
.mopa-footer14-brand {
grid-column: auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mopa-footer14-logo img {
width: 190px;
}
.mopa-footer14-tagline {
margin-top: 10px;
margin-bottom: 18px;
}
.mopa-footer14-social {
justify-content: center;
}
.mopa-footer14-column {
width: 100%;
}
.mopa-footer14-column h3 {
font-size: 20px;
}
.mopa-footer14-map-column {
grid-column: auto;
}
.mopa-footer14-map {
height: 240px;
}
/* Copyright */
.mopa-footer14-bottom-inner {
min-height: auto;
padding: 17px 20px;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
}
.mopa-footer14-bottom p {
font-size: 11px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media (max-width: 400px) {
.mopa-footer14-main {
padding-left: 15px;
padding-right: 15px;
}
.mopa-footer14-logo img {
width: 175px;
}
.mopa-footer14-social a {
width: 38px;
height: 38px;
font-size: 14px;
}
.mopa-footer14-column h3 {
font-size: 19px;
}
.mopa-footer14-column ul li a {
font-size: 12px;
}
.mopa-footer14-contact-content p,
.mopa-footer14-contact-content a {
font-size: 12px;
}
.mopa-footer14-map {
height: 220px;
}
.mopa-footer14-bottom p {
font-size: 10px;
}
}
.mopa-footer14-map {
width: 100%;
height: 240px;
overflow: hidden;
}
.mopa-footer14-map iframe {
width: 100%;
height: 240px;
border: 0;
display: block;
}
/* Floating Contact Buttons */
.floating-contact {
position: fixed;
right: 20px;
bottom: 25px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
}
.floating-contact a {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #fff;
font-size: 22px;
box-shadow: 0 5px 15px rgba(0,0,0,0.25);
transition: all 0.3s ease;
}
.floating-contact a:hover {
transform: scale(1.1);
}
/* Call Button */
.floating-call {
background: #0b7a3b;
}
/* WhatsApp Button */
.floating-whatsapp {
background: #25D366;
}
/* Mobile Responsive */
@media (max-width: 767px) {
.floating-contact {
right: 15px;
bottom: 18px;
gap: 10px;
}
.floating-contact a {
width: 48px;
height: 48px;
font-size: 20px;
}
}
/* =========================================================
MOPABOND HERO BANNER
UNIQUE PREFIX: mpbd-hero-9x7a
========================================================= */
.mpbd-hero-9x7a {
position: relative;
width: 100%;
min-height: 450px;
display: flex;
align-items: center;
overflow: hidden;
background-image: url("../img/subbanner.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* DARK BLUE OVERLAY */
.mpbd-hero-overlay-9x7a {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(2, 25, 52, 0.96) 0%,
rgba(2, 25, 52, 0.88) 27%,
rgba(2, 25, 52, 0.55) 46%,
rgba(2, 25, 52, 0.08) 72%,
rgba(2, 25, 52, 0) 100%
);
z-index: 1;
}
/* CONTENT CONTAINER */
.mpbd-hero-container-9x7a {
position: relative;
z-index: 2;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 70px 70px;
display: flex;
align-items: center;
}
/* LEFT CONTENT */
.mpbd-hero-content-9x7a {
width: 48%;
max-width: 570px;
}
/* MAIN HEADING */
.mpbd-hero-title-9x7a {
margin: 0 0 22px;
font-size: clamp(42px, 4.2vw, 70px);
font-weight: 900;
line-height: 0.98;
letter-spacing: -1.5px;
text-transform: uppercase;
color: #ffffff;
}
/* HEADING LINES */
.mpbd-hero-title-9x7a span {
display: block;
color: #ffffff;
}
/* ORANGE HIGHLIGHT */
.mpbd-hero-title-9x7a strong {
display: block;
color: #f47721;
font-weight: 900;
}
/* SUBTITLE */
.mpbd-hero-subtitle-9x7a {
margin: 0 0 18px;
max-width: 480px;
font-size: 18px;
line-height: 1.45;
font-weight: 500;
color: #ffffff;
}
/* DESCRIPTION */
.mpbd-hero-description-9x7a {
margin: 0;
max-width: 500px;
font-size: 14px;
line-height: 1.6;
font-weight: 400;
color: rgba(255, 255, 255, 0.82);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.mpbd-hero-9x7a {
min-height: 350px;
}
.mpbd-hero-container-9x7a {
max-width: 1500px;
padding-left: 80px;
padding-right: 80px;
}
.mpbd-hero-content-9x7a {
max-width: 600px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.mpbd-hero-9x7a {
min-height: 350px;
background-position: center center;
}
.mpbd-hero-overlay-9x7a {
background:
linear-gradient(
90deg,
rgba(2, 25, 52, 0.96) 0%,
rgba(2, 25, 52, 0.85) 50%,
rgba(2, 25, 52, 0.35) 100%
);
}
.mpbd-hero-container-9x7a {
padding: 60px 45px;
}
.mpbd-hero-content-9x7a {
width: 58%;
}
.mpbd-hero-title-9x7a {
font-size: 48px;
}
.mpbd-hero-subtitle-9x7a {
font-size: 16px;
}
.mpbd-hero-description-9x7a {
font-size: 13px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mpbd-hero-9x7a {
min-height:350px;
background-position: 62% center;
}
.mpbd-hero-overlay-9x7a {
background:
linear-gradient(
90deg,
rgba(2, 25, 52, 0.98) 0%,
rgba(2, 25, 52, 0.91) 60%,
rgba(2, 25, 52, 0.55) 100%
);
}
.mpbd-hero-container-9x7a {
padding: 55px 25px;
align-items: center;
}
.mpbd-hero-content-9x7a {
width: 100%;
max-width: 480px;
}
.mpbd-hero-title-9x7a {
font-size: 42px;
line-height: 1;
letter-spacing: -0.8px;
margin-bottom: 20px;
}
.mpbd-hero-subtitle-9x7a {
font-size: 16px;
line-height: 1.45;
margin-bottom: 15px;
}
.mpbd-hero-description-9x7a {
font-size: 13px;
line-height: 1.55;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.mpbd-hero-9x7a {
min-height: 350px;
background-position: 65% center;
}
.mpbd-hero-container-9x7a {
padding: 45px 20px;
}
.mpbd-hero-title-9x7a {
font-size: 34px;
}
.mpbd-hero-subtitle-9x7a {
font-size: 15px;
}
.mpbd-hero-description-9x7a {
font-size: 12.5px;
}
}
/* =========================================================
MOPABOND MISSION & VISION
UNIQUE CLASS PREFIX: mbv-
========================================================= */
.mbv-section-x82k {
position: relative;
width: 100%;
overflow: hidden;
padding: 65px 0;
background:
linear-gradient(
90deg,
rgba(2, 25, 55, 0.97),
rgba(3, 35, 72, 0.94)
),
url("assets/mopabond-industrial-bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* SUBTLE INDUSTRIAL OVERLAY */
.mbv-section-x82k::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.025) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.02) 50%,
rgba(255, 255, 255, 0.02) 75%,
transparent 75%
);
background-size: 80px 80px;
opacity: 0.35;
pointer-events: none;
}
/* CONTAINER */
.mbv-container-x82k {
position: relative;
z-index: 2;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 65px;
display: grid;
grid-template-columns:
1fr
1px
1.25fr;
column-gap: 55px;
align-items: center;
}
/* =========================================================
COLUMNS
========================================================= */
.mbv-column-x82k {
width: 100%;
}
/* =========================================================
HEADING ROW
========================================================= */
.mbv-heading-row-x82k {
display: flex;
align-items: flex-start;
gap: 22px;
margin-bottom: 22px;
}
/* =========================================================
ICON
========================================================= */
.mbv-icon-box-x82k {
flex: 0 0 64px;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
color: #f47721;
font-size: 46px;
line-height: 1;
}
/* =========================================================
SMALL LABEL
========================================================= */
.mbv-label-x82k {
display: block;
margin-bottom: 4px;
color: #f47721;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* =========================================================
MAIN HEADING
========================================================= */
.mbv-heading-content-x82k h2 {
margin: 0;
color: #ffffff;
font-size: clamp(27px, 2.3vw, 42px);
line-height: 1.02;
font-weight: 900;
letter-spacing: -0.5px;
text-transform: uppercase;
}
/* ORANGE HEADING TEXT */
.mbv-heading-content-x82k h2 span {
color: #f47721;
}
/* =========================================================
DESCRIPTION
========================================================= */
.mbv-description-x82k {
max-width: 590px;
margin: 0 0 25px;
color: rgba(255, 255, 255, 0.82);
font-size: 13px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
DIVIDER
========================================================= */
.mbv-divider-x82k {
width: 1px;
min-height: 245px;
background:
linear-gradient(
to bottom,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
}
/* =========================================================
MISSION POINTS
========================================================= */
.mbv-points-grid-x82k {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 35px;
row-gap: 9px;
margin-top: 18px;
}
.mbv-point-x82k {
display: flex;
align-items: center;
gap: 9px;
color: rgba(255, 255, 255, 0.88);
font-size: 11px;
line-height: 1.3;
}
/* ORANGE CHECK */
.mbv-check-x82k {
flex: 0 0 17px;
width: 17px;
height: 17px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f47721;
color: #ffffff;
font-size: 8px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.mbv-container-x82k {
max-width: 1500px;
padding-left: 80px;
padding-right: 80px;
}
.mbv-section-x82k {
padding-top: 75px;
padding-bottom: 75px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.mbv-container-x82k {
padding-left: 40px;
padding-right: 40px;
column-gap: 35px;
}
.mbv-heading-row-x82k {
gap: 15px;
}
.mbv-icon-box-x82k {
flex-basis: 52px;
width: 52px;
height: 52px;
font-size: 38px;
}
.mbv-heading-content-x82k h2 {
font-size: 27px;
}
.mbv-points-grid-x82k {
column-gap: 20px;
}
}
/* =========================================================
TABLET / SMALL LAPTOP
========================================================= */
@media (max-width: 850px) {
.mbv-container-x82k {
grid-template-columns: 1fr;
row-gap: 45px;
}
.mbv-divider-x82k {
width: 100%;
height: 1px;
min-height: 1px;
background:
linear-gradient(
to right,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
}
.mbv-column-x82k {
max-width: 700px;
margin: 0 auto;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mbv-section-x82k {
padding: 50px 0;
}
.mbv-container-x82k {
padding-left: 22px;
padding-right: 22px;
row-gap: 38px;
}
.mbv-heading-row-x82k {
gap: 13px;
margin-bottom: 18px;
}
.mbv-icon-box-x82k {
flex-basis: 45px;
width: 45px;
height: 45px;
font-size: 32px;
}
.mbv-label-x82k {
font-size: 11px;
}
.mbv-heading-content-x82k h2 {
font-size: 25px;
line-height: 1.04;
}
.mbv-description-x82k {
font-size: 13px;
line-height: 1.6;
}
.mbv-points-grid-x82k {
grid-template-columns: 1fr;
gap: 10px;
}
.mbv-point-x82k {
font-size: 12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.mbv-section-x82k {
padding: 42px 0;
}
.mbv-container-x82k {
padding-left: 18px;
padding-right: 18px;
}
.mbv-heading-content-x82k h2 {
font-size: 22px;
}
.mbv-icon-box-x82k {
flex-basis: 40px;
width: 40px;
height: 40px;
font-size: 28px;
}
.mbv-description-x82k {
font-size: 12px;
}
}
/* =========================================================
MOPABOND - WHY CHOOSE US
UNIQUE CLASS PREFIX: mop-why-
========================================================= */
.mop-why-section-k7p9 {
position: relative;
width: 100%;
padding: 70px 0 75px;
overflow: hidden;
background: #f5f9fc;
}
/* =========================================================
BACKGROUND
========================================================= */
.mop-why-bg-k7p9 {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(245, 249, 252, 0.98) 0%,
rgba(245, 249, 252, 0.94) 45%,
rgba(245, 249, 252, 0.82) 100%
),
url("assets/mopabond-construction-bg.jpg");
background-size: cover;
background-position: center;
opacity: 0.9;
}
/* =========================================================
CONTAINER
========================================================= */
.mop-why-container-k7p9 {
position: relative;
z-index: 2;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 50px;
}
/* =========================================================
HEADER
========================================================= */
.mop-why-header-k7p9 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
margin-bottom: 32px;
}
/* LEFT HEADING */
.mop-why-heading-wrap-k7p9 {
position: relative;
padding-left: 17px;
}
/* ORANGE VERTICAL LINE */
.mop-why-heading-wrap-k7p9::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 3px;
height: 62px;
background: #f47721;
}
/* SMALL LABEL */
.mop-why-label-k7p9 {
display: block;
margin-bottom: 4px;
color: #f47721;
font-size: 12px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.4px;
text-transform: uppercase;
}
/* MAIN TITLE */
.mop-why-title-k7p9 {
margin: 0;
color: #09284a;
font-size: clamp(30px, 3vw, 46px);
font-weight: 900;
line-height: 0.98;
letter-spacing: -1px;
text-transform: uppercase;
}
/* ORANGE TITLE LINE */
.mop-why-title-k7p9 span {
color: #f47721;
}
/* INTRO */
.mop-why-intro-k7p9 {
margin: 8px 0 0;
color: #506070;
font-size: 15px;
line-height: 1.4;
}
/* =========================================================
KNOW MORE BUTTON
========================================================= */
.mop-why-button-k7p9 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
flex-shrink: 0;
margin-top: 10px;
padding: 12px 21px;
border-radius: 4px;
background: #f47721;
color: #ffffff;
font-size: 11px;
font-weight: 700;
text-decoration: none;
transition:
transform 0.25s ease,
background 0.25s ease,
box-shadow 0.25s ease;
}
.mop-why-button-k7p9:hover {
background: #df6818;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(244, 119, 33, 0.25);
}
.mop-why-button-k7p9 i {
font-size: 9px;
}
/* =========================================================
FEATURE GRID
========================================================= */
.mop-why-grid-k7p9 {
display: grid;
grid-template-columns:
repeat(6, 1fr);
gap: 10px;
}
/* =========================================================
FEATURE CARD
========================================================= */
.mop-why-card-k7p9 {
position: relative;
min-height: 155px;
padding: 17px 14px 16px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid #e2e9ef;
border-radius: 2px;
box-shadow:
0 4px 12px rgba(5, 30, 55, 0.07);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.mop-why-card-k7p9:hover {
transform: translateY(-5px);
border-color: rgba(244, 119, 33, 0.35);
box-shadow:
0 12px 28px rgba(5, 30, 55, 0.12);
}
/* =========================================================
ICON
========================================================= */
.mop-why-icon-k7p9 {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 13px;
color: #f47721;
font-size: 25px;
line-height: 1;
}
/* =========================================================
CARD TITLE
========================================================= */
.mop-why-card-k7p9 h3 {
margin: 0 0 10px;
color: #0a2d51;
font-size: 14px;
line-height: 1.05;
font-weight: 800;
text-transform: uppercase;
}
/* =========================================================
CARD DESCRIPTION
========================================================= */
.mop-why-card-k7p9 p {
margin: 0;
color: #596875;
font-size: 12px;
line-height: 1.45;
font-weight: 400;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.mop-why-container-k7p9 {
padding: 0 35px;
}
.mop-why-grid-k7p9 {
grid-template-columns:
repeat(3, 1fr);
gap: 14px;
}
.mop-why-card-k7p9 {
min-height: 175px;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 768px) {
.mop-why-section-k7p9 {
padding: 55px 0 60px;
}
.mop-why-header-k7p9 {
align-items: flex-start;
margin-bottom: 28px;
}
.mop-why-title-k7p9 {
font-size: 32px;
}
.mop-why-grid-k7p9 {
grid-template-columns:
repeat(2, 1fr);
gap: 12px;
}
.mop-why-card-k7p9 {
min-height: 180px;
padding: 18px 16px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mop-why-section-k7p9 {
padding: 48px 0 50px;
}
.mop-why-container-k7p9 {
padding: 0 20px;
}
.mop-why-header-k7p9 {
display: block;
margin-bottom: 25px;
}
.mop-why-heading-wrap-k7p9 {
padding-left: 14px;
}
.mop-why-heading-wrap-k7p9::before {
height: 55px;
}
.mop-why-label-k7p9 {
font-size: 11px;
}
.mop-why-title-k7p9 {
font-size: 27px;
letter-spacing: -0.5px;
}
.mop-why-intro-k7p9 {
font-size: 11px;
}
.mop-why-button-k7p9 {
margin-top: 20px;
padding: 11px 18px;
}
.mop-why-grid-k7p9 {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mop-why-card-k7p9 {
min-height: 175px;
padding: 15px 13px;
}
.mop-why-icon-k7p9 {
width: 30px;
height: 30px;
margin-bottom: 10px;
font-size: 21px;
}
.mop-why-card-k7p9 h3 {
font-size: 12px;
margin-bottom: 8px;
}
.mop-why-card-k7p9 p {
font-size: 9.5px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
.mop-why-container-k7p9 {
padding: 0 15px;
}
.mop-why-title-k7p9 {
font-size: 24px;
}
.mop-why-grid-k7p9 {
grid-template-columns: 1fr;
}
.mop-why-card-k7p9 {
min-height: auto;
padding: 18px;
}
.mop-why-card-k7p9 p {
max-width: 280px;
font-size: 10px;
}
}
/* =========================================================
MOPABOND - CONSTRUCTION CHALLENGE CTA
UNIQUE CLASS PREFIX: mop-challenge-
========================================================= */
.mop-challenge-section-r8x4 {
position: relative;
width: 100%;
overflow: hidden;
/* background: #f7f5f0; */
padding: 55px 0;
position: relative;
align-items: center;
overflow: hidden;
background-image: url(../img/subcta.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.mop-challenge-container-r8x4 {
position: relative;
width: 100%;
max-width: 1100px;
min-height: 350px;
margin: 0 auto;
padding: 0 55px;
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.mop-challenge-content-r8x4 {
position: relative;
z-index: 3;
width: 52%;
max-width: 680px;
padding: 30px 0;
}
/* =========================================================
EYEBROW
========================================================= */
.mop-challenge-eyebrow-r8x4 {
display: block;
margin-bottom: 7px;
color: #f47721;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* =========================================================
TITLE
========================================================= */
.mop-challenge-title-r8x4 {
margin: 0 0 14px;
color: #142b3f;
font-size: clamp(32px, 3.4vw, 52px);
font-weight: 900;
line-height: 0.98;
letter-spacing: -1.2px;
text-transform: uppercase;
}
.mop-challenge-title-r8x4 span {
display: block;
color: #f47721;
}
/* =========================================================
DESCRIPTION
========================================================= */
.mop-challenge-description-r8x4 {
max-width: 570px;
margin: 0 0 23px;
color: black;
font-size: 13px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
BUTTON WRAPPER
========================================================= */
.mop-challenge-buttons-r8x4 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
/* =========================================================
PRIMARY BUTTON
========================================================= */
.mop-challenge-btn-primary-r8x4 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 40px;
padding: 0 20px;
border-radius: 4px;
background: #f47721;
color: #ffffff;
font-size: 11px;
font-weight: 700;
text-decoration: none;
transition: all 0.25s ease;
}
.mop-challenge-btn-primary-r8x4:hover {
background: #dc6516;
color: #ffffff;
transform: translateY(-2px);
box-shadow:
0 7px 18px rgba(244, 119, 33, 0.25);
}
.mop-challenge-btn-primary-r8x4 i {
font-size: 9px;
}
/* =========================================================
SECONDARY BUTTON
========================================================= */
.mop-challenge-btn-secondary-r8x4 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 40px;
padding: 0 20px;
border: 1px solid #d86b1d;
border-radius: 4px;
background: transparent;
color: #c95f17;
font-size: 11px;
font-weight: 700;
text-decoration: none;
transition: all 0.25s ease;
}
.mop-challenge-btn-secondary-r8x4:hover {
background: #f47721;
border-color: #f47721;
color: #ffffff;
transform: translateY(-2px);
}
.mop-challenge-btn-secondary-r8x4 i {
font-size: 9px;
}
/* =========================================================
RIGHT IMAGE
========================================================= */
.mop-challenge-image-r8x4 {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 58%;
height: 100%;
overflow: hidden;
}
/* IMAGE */
.mop-challenge-image-r8x4 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
opacity: 0.92;
mask-image:
linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,0.35) 15%,
#000000 32%,
#000000 100%
);
-webkit-mask-image:
linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,0.35) 15%,
#000000 32%,
#000000 100%
);
}
/* =========================================================
SOFT BLEND INTO OFF-WHITE BACKGROUND
========================================================= */
.mop-challenge-image-r8x4::before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 35%;
height: 100%;
pointer-events: none;
}
/* =========================================================
TOP & BOTTOM SOFT BLEND
========================================================= */
.mop-challenge-image-r8x4::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.mop-challenge-section-r8x4 {
padding: 65px 0;
}
.mop-challenge-container-r8x4 {
max-width: 1550px;
min-height: 380px;
padding: 0 70px;
}
.mop-challenge-content-r8x4 {
max-width: 700px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.mop-challenge-section-r8x4 {
padding: 50px 0;
}
.mop-challenge-container-r8x4 {
min-height: 350px;
padding: 0 40px;
}
.mop-challenge-content-r8x4 {
width: 58%;
}
.mop-challenge-title-r8x4 {
font-size: 38px;
}
.mop-challenge-description-r8x4 {
max-width: 470px;
font-size: 12px;
}
.mop-challenge-image-r8x4 {
width: 58%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.mop-challenge-section-r8x4 {
padding: 0;
}
.mop-challenge-container-r8x4 {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: auto;
padding: 0;
}
/* Content becomes top section */
.mop-challenge-content-r8x4 {
width: 100%;
max-width: none;
padding: 45px 25px 38px;
}
.mop-challenge-eyebrow-r8x4 {
font-size: 11px;
}
.mop-challenge-title-r8x4 {
font-size: 31px;
line-height: 1;
letter-spacing: -0.6px;
}
.mop-challenge-description-r8x4 {
font-size: 12px;
line-height: 1.55;
max-width: 100%;
}
/* Image */
.mop-challenge-image-r8x4 {
position: relative;
top: auto;
right: auto;
width: 100%;
height: 280px;
}
.mop-challenge-image-r8x4 img {
mask-image: none;
-webkit-mask-image: none;
opacity: 1;
}
.mop-challenge-image-r8x4::before {
width: 100%;
height: 35%;
background:
linear-gradient(
to bottom,
#f7f5f0,
rgba(247,245,240,0)
);
}
.mop-challenge-image-r8x4::after {
background:
linear-gradient(
to bottom,
rgba(247,245,240,0.3),
transparent 30%,
transparent 100%
);
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.mop-challenge-content-r8x4 {
padding: 40px 20px 32px;
}
.mop-challenge-title-r8x4 {
font-size: 27px;
}
.mop-challenge-description-r8x4 {
font-size: 11.5px;
}
.mop-challenge-buttons-r8x4 {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.mop-challenge-btn-primary-r8x4,
.mop-challenge-btn-secondary-r8x4 {
width: 100%;
}
.mop-challenge-image-r8x4 {
height: 240px;
}
}
/* =========================================================
CONTACT BUTTON
========================================================= */
.mpbd-hero-contact-btn-9x7a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 40px;
padding: 0 22px;
border-radius: 3px;
background: #f47721;
color: #ffffff;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition:
transform 0.25s ease,
background 0.25s ease,
box-shadow 0.25s ease;
}
/* BUTTON HOVER */
.mpbd-hero-contact-btn-9x7a:hover {
background: #dc6617;
color: #ffffff;
transform: translateY(-2px);
box-shadow:
0 8px 20px
rgba(244, 119, 33, 0.25);
}
/* BUTTON ICON */
.mpbd-hero-contact-btn-9x7a i {
font-size: 9px;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mpbd-hero-contact-btn-9x7a {
min-height: 39px;
padding: 0 19px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.mpbd-hero-contact-btn-9x7a {
width: auto;
min-height: 38px;
padding: 0 18px;
font-size: 10px;
}
}
/* =========================================================
MOPATECH INDIA - CONTACT INFORMATION
UNIQUE CLASS PREFIX: mpt-contact-7k4x
========================================================= */
/* =========================================================
MAIN SECTION
========================================================= */
.mpt-contact-7k4x {
width: 100%;
background: #062b52;
padding: 42px 0;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.mpt-contact-container-7k4x {
width: 100%;
max-width: 1325px;
margin: 0 auto;
padding: 0 55px;
display: grid;
grid-template-columns:
1.15fr
1.25fr
1.25fr
1.35fr;
align-items: center;
}
/* =========================================================
COMPANY INFORMATION
========================================================= */
.mpt-contact-company-7k4x {
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 35px;
border-right: 1px solid
rgba(255, 255, 255, 0.25);
}
.mpt-contact-company-name-7k4x {
margin: 0 0 8px;
color: #ffffff;
font-size: 20px;
line-height: 1.25;
font-weight: 700;
}
.mpt-contact-company-cert-7k4x {
margin: 0;
color: #f47721;
font-size: 14px;
line-height: 1.4;
font-weight: 600;
}
/* =========================================================
CONTACT ITEM
========================================================= */
.mpt-contact-item-7k4x {
min-height: 120px;
display: flex;
align-items: center;
gap: 18px;
padding: 0 30px;
border-right: 1px solid
rgba(255, 255, 255, 0.25);
}
.mpt-contact-item-7k4x:last-child {
border-right: none;
}
/* =========================================================
ICON
========================================================= */
.mpt-contact-icon-7k4x {
flex: 0 0 58px;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f47721;
color: #ffffff;
font-size: 23px;
box-shadow:
0 5px 15px rgba(0, 0, 0, 0.18);
}
/* =========================================================
INFORMATION AREA
========================================================= */
.mpt-contact-info-7k4x {
min-width: 0;
}
/* =========================================================
LABEL
========================================================= */
.mpt-contact-label-7k4x {
display: block;
margin-bottom: 7px;
color: #f47721;
font-size: 14px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* =========================================================
CONTACT VALUE
========================================================= */
.mpt-contact-value-7k4x {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
color: #ffffff;
font-size: 14px;
line-height: 1.45;
font-weight: 700;
}
.mpt-contact-value-7k4x a {
color: #ffffff;
text-decoration: none;
transition:
color 0.2s ease;
}
.mpt-contact-value-7k4x a:hover {
color: #f47721;
}
/* PHONE SEPARATOR */
/* .mpt-contact-value-7k4x a + a::before {
content: "|";
margin-right: 8px;
color: rgba(255, 255, 255, 0.45);
} */
/* =========================================================
DESCRIPTION
========================================================= */
.mpt-contact-description-7k4x {
max-width: 260px;
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
line-height: 1.5;
font-weight: 400;
}
/* =========================================================
LOCATION
========================================================= */
.mpt-contact-location-7k4x
.mpt-contact-value-7k4x span {
color: #ffffff;
font-weight: 700;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.mpt-contact-7k4x {
padding: 48px 0;
}
.mpt-contact-container-7k4x {
max-width: 1550px;
padding-left: 70px;
padding-right: 70px;
}
.mpt-contact-company-name-7k4x {
font-size: 21px;
}
.mpt-contact-icon-7k4x {
flex-basis: 62px;
width: 62px;
height: 62px;
font-size: 25px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.mpt-contact-container-7k4x {
padding: 0 30px;
grid-template-columns:
1fr
1fr
1fr;
}
/* COMPANY FULL WIDTH */
.mpt-contact-company-7k4x {
grid-column: 1 / -1;
min-height: auto;
padding: 0 0 25px;
margin-bottom: 20px;
border-right: none;
border-bottom: 1px solid
rgba(255, 255, 255, 0.25);
}
/* CONTACT ITEMS */
.mpt-contact-item-7k4x {
padding: 0 20px;
}
.mpt-contact-item-7k4x:first-of-type {
padding-left: 0;
}
.mpt-contact-item-7k4x:last-child {
padding-right: 0;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 800px) {
.mpt-contact-container-7k4x {
grid-template-columns:
1fr 1fr;
}
.mpt-contact-item-7k4x {
min-height: 115px;
padding: 20px 15px;
border-bottom: 1px solid
rgba(255, 255, 255, 0.18);
}
.mpt-contact-item-7k4x:nth-child(3) {
border-right: none;
}
.mpt-contact-item-7k4x:nth-last-child(-n+2) {
border-bottom: none;
}
.mpt-contact-icon-7k4x {
flex-basis: 52px;
width: 52px;
height: 52px;
font-size: 21px;
}
.mpt-contact-label-7k4x {
font-size: 13px;
}
.mpt-contact-value-7k4x {
font-size: 13px;
}
.mpt-contact-description-7k4x {
font-size: 11px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mpt-contact-7k4x {
padding: 38px 0;
}
.mpt-contact-container-7k4x {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 22px;
}
/* COMPANY */
.mpt-contact-company-7k4x {
width: 100%;
padding: 0 0 24px;
margin-bottom: 0;
text-align: center;
border-right: none;
border-bottom: 1px solid
rgba(255, 255, 255, 0.25);
}
.mpt-contact-company-name-7k4x {
font-size: 20px;
}
.mpt-contact-company-cert-7k4x {
font-size: 13px;
}
/* ITEMS */
.mpt-contact-item-7k4x,
.mpt-contact-item-7k4x:first-of-type,
.mpt-contact-item-7k4x:last-child {
width: 100%;
min-height: auto;
padding: 23px 0;
border-right: none;
border-bottom: 1px solid
rgba(255, 255, 255, 0.18);
}
.mpt-contact-item-7k4x:last-child {
border-bottom: none;
}
/* ICON */
.mpt-contact-icon-7k4x {
flex: 0 0 52px;
width: 52px;
height: 52px;
font-size: 21px;
}
/* LABEL */
.mpt-contact-label-7k4x {
font-size: 13px;
}
/* VALUE */
.mpt-contact-value-7k4x {
font-size: 13px;
line-height: 1.5;
}
/* DESCRIPTION */
.mpt-contact-description-7k4x {
max-width: 300px;
font-size: 11px;
line-height: 1.5;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.mpt-contact-container-7k4x {
padding: 0 18px;
}
.mpt-contact-company-name-7k4x {
font-size: 18px;
}
.mpt-contact-company-cert-7k4x {
font-size: 12px;
}
.mpt-contact-icon-7k4x {
flex-basis: 48px;
width: 48px;
height: 48px;
font-size: 19px;
}
.mpt-contact-label-7k4x {
font-size: 12px;
}
.mpt-contact-value-7k4x {
font-size: 12px;
}
.mpt-contact-description-7k4x {
font-size: 10.5px;
}
}
/* =========================================================
MOPABOND - ENQUIRY SECTION
UNIQUE CLASS PREFIX: mp-enq-
========================================================= */
/* =========================================================
MAIN SECTION
========================================================= */
.mp-enq-section-v8k2 {
width: 100%;
padding: 70px 20px;
background: #f5f4ef;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================================
MAIN WRAPPER
========================================================= */
.mp-enq-wrapper-v8k2 {
width: 100%;
max-width: 1450px;
min-height: 560px;
margin: 0 auto;
display: grid;
grid-template-columns:
0.72fr
1.05fr
1.55fr;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow:
0 12px 40px rgba(4, 35, 65, 0.10);
}
/* =========================================================
LEFT IMAGE
========================================================= */
.mp-enq-image-v8k2 {
position: relative;
width: 100%;
min-height: 560px;
overflow: hidden;
}
.mp-enq-image-v8k2 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
}
/* =========================================================
IMAGE SOFT OVERLAY
========================================================= */
.mp-enq-image-v8k2::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(3, 31, 59, 0.05),
rgba(3, 31, 59, 0)
);
pointer-events: none;
}
/* =========================================================
MIDDLE NAVY PANEL
========================================================= */
.mp-enq-info-v8k2 {
position: relative;
min-height: 560px;
padding: 55px 38px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#062b52 0%,
#07365f 100%
);
color: #ffffff;
}
/* =========================================================
SMALL HEADING
========================================================= */
.mp-enq-small-title-v8k2 {
position: relative;
display: block;
padding-left: 12px;
margin-bottom: 15px;
color: #ffffff;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.mp-enq-small-title-v8k2::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: #f47721;
}
/* =========================================================
MIDDLE HEADING
========================================================= */
.mp-enq-info-heading-v8k2 h2 {
margin: 0;
color: #ffffff;
font-size: 34px;
line-height: 1.05;
font-weight: 900;
letter-spacing: -0.5px;
text-transform: uppercase;
}
.mp-enq-info-heading-v8k2 h2 span {
color: #f47721;
}
/* =========================================================
INFORMATION LIST
========================================================= */
.mp-enq-list-v8k2 {
display: flex;
flex-direction: column;
gap: 17px;
margin-top: 38px;
}
/* =========================================================
LIST ITEM
========================================================= */
.mp-enq-list-item-v8k2 {
display: flex;
align-items: center;
gap: 13px;
color: rgba(255, 255, 255, 0.88);
font-size: 13px;
line-height: 1.4;
font-weight: 500;
}
/* =========================================================
LIST ICON
========================================================= */
.mp-enq-list-icon-v8k2 {
flex: 0 0 28px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #f47721;
font-size: 17px;
}
/* =========================================================
RIGHT FORM
========================================================= */
.mp-enq-form-v8k2 {
min-width: 0;
padding: 45px 38px 30px;
background: #ffffff;
box-sizing: border-box;
}
/* =========================================================
FORM HEADING
========================================================= */
.mp-enq-form-heading-v8k2 {
margin-bottom: 20px;
}
.mp-enq-form-heading-v8k2 h2 {
margin: 0 0 5px;
color: #092c50;
font-size: 27px;
line-height: 1.05;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.5px;
}
.mp-enq-form-heading-v8k2 h2 span {
color: #f47721;
}
.mp-enq-form-heading-v8k2 p {
margin: 0;
color: #68737c;
font-size: 12px;
line-height: 1.5;
}
/* =========================================================
FORM ROW
========================================================= */
.mp-enq-form-row-v8k2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 13px;
}
/* =========================================================
FIELD
========================================================= */
.mp-enq-field-v8k2 {
min-width: 0;
}
.mp-enq-field-v8k2 label {
display: block;
margin-bottom: 6px;
color: #173554;
font-size: 11px;
line-height: 1.3;
font-weight: 700;
}
.mp-enq-field-v8k2 label span {
color: #f47721;
}
/* =========================================================
INPUT / SELECT
========================================================= */
.mp-enq-field-v8k2 input,
.mp-enq-field-v8k2 select,
.mp-enq-field-v8k2 textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #dfe4e8;
border-radius: 3px;
background: #ffffff;
color: #263b4e;
font-family: "Muli", sans-serif;
font-size: 12px;
outline: none;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.mp-enq-field-v8k2 input,
.mp-enq-field-v8k2 select {
height: 38px;
padding: 0 11px;
}
.mp-enq-field-v8k2 textarea {
min-height: 100px;
padding: 11px;
resize: vertical;
line-height: 1.45;
}
/* =========================================================
PLACEHOLDER
========================================================= */
.mp-enq-field-v8k2 input::placeholder,
.mp-enq-field-v8k2 textarea::placeholder {
color: #a2aab0;
opacity: 1;
}
/* =========================================================
FOCUS
========================================================= */
.mp-enq-field-v8k2 input:focus,
.mp-enq-field-v8k2 select:focus,
.mp-enq-field-v8k2 textarea:focus {
border-color: #f47721;
box-shadow:
0 0 0 2px rgba(244, 119, 33, 0.10);
}
/* =========================================================
MESSAGE
========================================================= */
.mp-enq-message-field-v8k2 {
margin-top: 1px;
margin-bottom: 14px;
}
/* =========================================================
SUBMIT BUTTON
========================================================= */
.mp-enq-submit-v8k2 {
width: 100%;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: none;
border-radius: 4px;
background: #f47721;
color: #ffffff;
font-size: 12px;
font-weight: 800;
cursor: pointer;
text-transform: uppercase;
transition:
background 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
.mp-enq-submit-v8k2:hover {
background: #dc6518;
transform: translateY(-1px);
box-shadow:
0 7px 18px rgba(244, 119, 33, 0.25);
}
.mp-enq-submit-v8k2 i {
font-size: 11px;
}
/* =========================================================
FORM NOTE
========================================================= */
.mp-enq-note-v8k2 {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 10px;
color: #7b858c;
font-size: 10px;
line-height: 1.4;
text-align: center;
}
.mp-enq-note-v8k2 i {
color: #f47721;
font-size: 10px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.mp-enq-wrapper-v8k2 {
max-width: 1550px;
}
.mp-enq-info-v8k2 {
padding: 65px 45px;
}
.mp-enq-info-heading-v8k2 h2 {
font-size: 38px;
}
.mp-enq-form-v8k2 {
padding: 55px 45px 35px;
}
.mp-enq-form-heading-v8k2 h2 {
font-size: 30px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.mp-enq-section-v8k2 {
padding: 50px 18px;
}
.mp-enq-wrapper-v8k2 {
grid-template-columns:
0.7fr
1fr
1.4fr;
min-height: 520px;
}
.mp-enq-image-v8k2,
.mp-enq-info-v8k2 {
min-height: 520px;
}
.mp-enq-info-v8k2 {
padding: 45px 28px;
}
.mp-enq-info-heading-v8k2 h2 {
font-size: 28px;
}
.mp-enq-list-v8k2 {
gap: 14px;
margin-top: 30px;
}
.mp-enq-list-item-v8k2 {
font-size: 12px;
}
.mp-enq-form-v8k2 {
padding: 35px 25px 25px;
}
.mp-enq-form-heading-v8k2 h2 {
font-size: 24px;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 850px) {
.mp-enq-wrapper-v8k2 {
grid-template-columns: 1fr 1fr;
}
/* IMAGE */
.mp-enq-image-v8k2 {
min-height: 500px;
}
/* INFORMATION */
.mp-enq-info-v8k2 {
min-height: 500px;
padding: 40px 28px;
}
/* FORM FULL WIDTH */
.mp-enq-form-v8k2 {
grid-column: 1 / -1;
padding: 40px 35px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.mp-enq-section-v8k2 {
padding: 35px 15px;
}
.mp-enq-wrapper-v8k2 {
display: flex;
flex-direction: column;
min-height: auto;
border-radius: 7px;
}
/* IMAGE */
.mp-enq-image-v8k2 {
width: 100%;
height: 330px;
min-height: 330px;
}
.mp-enq-image-v8k2 img {
object-position: center center;
}
/* INFORMATION */
.mp-enq-info-v8k2 {
width: 100%;
min-height: auto;
padding: 40px 25px;
}
.mp-enq-small-title-v8k2 {
font-size: 11px;
}
.mp-enq-info-heading-v8k2 h2 {
font-size: 29px;
}
.mp-enq-list-v8k2 {
gap: 16px;
margin-top: 30px;
}
.mp-enq-list-item-v8k2 {
font-size: 13px;
}
/* FORM */
.mp-enq-form-v8k2 {
width: 100%;
padding: 40px 25px 30px;
}
.mp-enq-form-heading-v8k2 h2 {
font-size: 25px;
}
.mp-enq-form-heading-v8k2 p {
font-size: 12px;
}
/* FORM ROW */
.mp-enq-form-row-v8k2 {
grid-template-columns: 1fr;
gap: 13px;
margin-bottom: 13px;
}
/* INPUT */
.mp-enq-field-v8k2 label {
font-size: 12px;
}
.mp-enq-field-v8k2 input,
.mp-enq-field-v8k2 select {
height: 43px;
font-size: 13px;
}
.mp-enq-field-v8k2 textarea {
min-height: 120px;
font-size: 13px;
}
/* BUTTON */
.mp-enq-submit-v8k2 {
height: 46px;
font-size: 12px;
}
.mp-enq-note-v8k2 {
font-size: 10px;
line-height: 1.5;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.mp-enq-section-v8k2 {
padding: 25px 10px;
}
.mp-enq-image-v8k2 {
height: 280px;
min-height: 280px;
}
.mp-enq-info-v8k2 {
padding: 35px 20px;
}
.mp-enq-info-heading-v8k2 h2 {
font-size: 26px;
}
.mp-enq-form-v8k2 {
padding: 35px 20px 25px;
}
.mp-enq-form-heading-v8k2 h2 {
font-size: 23px;
}
}
.mpbd-hero-contact-label-9x7a{
color: #f47721;
font-weight: bold;
}
/* =========================================================
MOPABOND - EXPLORE OUR APPLICATIONS
UNIQUE PREFIX: mpapp-9k4x
========================================================= */
.mpapp-section-9k4x {
width: 100%;
padding: 65px 20px 75px;
background: #f5f8fa;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.mpapp-container-9k4x {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
HEADER
========================================================= */
.mpapp-header-9k4x {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 30px;
}
.mpapp-header-line-9k4x {
flex: 0 0 4px;
width: 4px;
height: 58px;
margin-top: 3px;
background: #f47721;
border-radius: 2px;
}
.mpapp-header-content-9k4x {
min-width: 0;
}
/* =========================================================
MAIN HEADING
========================================================= */
.mpapp-eyebrow-9k4x {
display: block;
margin: 0 0 6px;
color: #092d51;
font-size: 28px;
line-height: 1.1;
font-weight: 800;
text-transform: uppercase;
}
/* =========================================================
HEADER SUBTITLE
========================================================= */
.mpapp-title-9k4x {
margin: 0 0 5px;
color: #f47721;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
}
.mpapp-intro-9k4x {
margin: 0;
max-width: 850px;
color: #596873;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
}
/* =========================================================
APPLICATION GRID
========================================================= */
.mpapp-grid-9k4x {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 18px;
}
/* =========================================================
CARD
========================================================= */
.mpapp-card-9k4x {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
background: #ffffff;
border: 1px solid #e1e7eb;
border-radius: 6px;
box-shadow:
0 4px 14px rgba(9, 45, 81, 0.07);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.mpapp-card-9k4x:hover {
transform: translateY(-4px);
border-color:
rgba(244, 119, 33, 0.35);
box-shadow:
0 12px 28px rgba(9, 45, 81, 0.12);
}
/* =========================================================
IMAGE
========================================================= */
.mpapp-image-wrap-9k4x {
position: relative;
width: 100%;
height: 155px;
overflow: hidden;
background: #e8edf0;
}
.mpapp-image-wrap-9k4x img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition:
transform 0.4s ease;
}
.mpapp-card-9k4x:hover
.mpapp-image-wrap-9k4x img {
transform: scale(1.04);
}
/* =========================================================
NUMBER
========================================================= */
.mpapp-number-9k4x {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 30px;
background: #f47721;
color: #ffffff;
font-size: 13px;
font-weight: 700;
border-radius: 3px;
}
/* =========================================================
IMAGE ICON
========================================================= */
.mpapp-image-icon-9k4x {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.95);
border-radius: 4px;
color: #092d51;
font-size: 15px;
box-shadow:
0 2px 7px rgba(0, 0, 0, 0.12);
}
/* =========================================================
CARD CONTENT
========================================================= */
.mpapp-card-content-9k4x {
display: flex;
flex-direction: column;
flex: 1;
padding: 18px 17px 17px;
}
/* =========================================================
CARD TITLE
========================================================= */
.mpapp-card-content-9k4x h3 {
margin: 0 0 7px;
color: #092d51;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
}
/* =========================================================
CARD HIGHLIGHT
========================================================= */
.mpapp-card-content-9k4x strong {
display: block;
margin-bottom: 9px;
color: #f47721;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
}
/* =========================================================
DESCRIPTION
========================================================= */
.mpapp-card-content-9k4x p {
margin: 0 0 12px;
color: #596873;
font-size: 13px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
BULLET LIST
========================================================= */
.mpapp-card-content-9k4x ul {
display: flex;
flex-direction: column;
gap: 5px;
margin: 0 0 17px;
padding: 0;
list-style: none;
}
.mpapp-card-content-9k4x li {
position: relative;
padding-left: 18px;
color: #596873;
font-size: 12px;
line-height: 1.4;
font-weight: 400;
}
.mpapp-card-content-9k4x li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #f47721;
font-size: 11px;
font-weight: 700;
}
/* =========================================================
BUTTON
========================================================= */
.mpapp-btn-9k4x {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: fit-content;
min-height: 38px;
margin-top: auto;
padding: 0 16px;
border-radius: 4px;
background: #f47721;
color: #ffffff;
font-size: 12px;
line-height: 1;
font-weight: 700;
text-decoration: none;
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mpapp-btn-9k4x:hover {
background: #dc6517;
color: #ffffff;
transform: translateY(-1px);
box-shadow:
0 5px 12px rgba(244, 119, 33, 0.2);
}
.mpapp-btn-9k4x i {
font-size: 10px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.mpapp-container-9k4x {
max-width: 1550px;
}
.mpapp-section-9k4x {
padding-top: 75px;
padding-bottom: 85px;
}
.mpapp-image-wrap-9k4x {
height: 175px;
}
.mpapp-card-content-9k4x h3 {
font-size: 19px;
}
}
/* =========================================================
LAPTOP / TABLET
========================================================= */
@media (max-width: 1100px) {
.mpapp-section-9k4x {
padding: 55px 25px 65px;
}
.mpapp-grid-9k4x {
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 16px;
}
.mpapp-eyebrow-9k4x {
font-size: 26px;
}
.mpapp-image-wrap-9k4x {
height: 160px;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 850px) {
.mpapp-grid-9k4x {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
}
.mpapp-image-wrap-9k4x {
height: 180px;
}
.mpapp-card-content-9k4x h3 {
font-size: 18px;
}
.mpapp-card-content-9k4x p {
font-size: 13px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mpapp-section-9k4x {
padding: 45px 16px 55px;
}
.mpapp-header-9k4x {
gap: 12px;
margin-bottom: 25px;
}
.mpapp-header-line-9k4x {
width: 4px;
flex-basis: 4px;
height: 52px;
}
.mpapp-eyebrow-9k4x {
font-size: 22px;
}
.mpapp-title-9k4x {
font-size: 15px;
}
.mpapp-intro-9k4x {
font-size: 13px;
}
.mpapp-grid-9k4x {
grid-template-columns: 1fr;
gap: 18px;
}
.mpapp-image-wrap-9k4x {
height: 210px;
}
.mpapp-card-content-9k4x {
padding: 18px;
}
.mpapp-card-content-9k4x h3 {
font-size: 20px;
}
.mpapp-card-content-9k4x strong {
font-size: 12px;
}
.mpapp-card-content-9k4x p {
font-size: 14px;
line-height: 1.55;
}
.mpapp-card-content-9k4x li {
font-size: 13px;
}
.mpapp-btn-9k4x {
min-height: 40px;
padding: 0 17px;
font-size: 12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.mpapp-section-9k4x {
padding-left: 12px;
padding-right: 12px;
}
.mpapp-eyebrow-9k4x {
font-size: 20px;
}
.mpapp-title-9k4x {
font-size: 14px;
}
.mpapp-intro-9k4x {
font-size: 12px;
}
.mpapp-image-wrap-9k4x {
height: 190px;
}
.mpapp-card-content-9k4x h3 {
font-size: 19px;
}
}
/* =========================================================
MOPABOND - APPLICATION SOLUTION TABLE
UNIQUE PREFIX: mp-soltable-4r8x
========================================================= */
.mp-soltable-section-4r8x {
width: 100%;
padding: 50px 20px;
background: #f5f8fa;
box-sizing: border-box;
}
/* =========================================================
CONTAINER
========================================================= */
.mp-soltable-container-4r8x {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0;
}
/* =========================================================
TABLE SCROLL WRAPPER
========================================================= */
.mp-soltable-scroll-4r8x {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #dce4e9;
background: #ffffff;
}
/* =========================================================
TABLE
========================================================= */
.mp-soltable-4r8x {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
/* =========================================================
TABLE HEADER
========================================================= */
.mp-soltable-4r8x thead th {
padding: 13px 18px;
background: #092d51;
color: #ffffff;
font-size: 15px;
line-height: 1.3;
font-weight: 700;
text-align: left;
border-right: 1px solid
rgba(255, 255, 255, 0.25);
}
.mp-soltable-4r8x thead th:first-child {
width: 34%;
}
.mp-soltable-4r8x thead th:last-child {
width: 66%;
border-right: none;
}
/* =========================================================
TABLE BODY
========================================================= */
.mp-soltable-4r8x tbody tr {
background: #ffffff;
transition:
background 0.2s ease;
}
.mp-soltable-4r8x tbody tr:nth-child(even) {
background: #f7f9fa;
}
.mp-soltable-4r8x tbody tr:hover {
background: #fff5ed;
}
/* =========================================================
TABLE CELLS
========================================================= */
.mp-soltable-4r8x tbody td {
padding: 10px 18px;
color: #566673;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #dfe6ea;
border-right: 1px solid #dfe6ea;
}
.mp-soltable-4r8x tbody td:first-child {
color: #092d51;
font-weight: 700;
}
.mp-soltable-4r8x tbody td:last-child {
border-right: none;
}
.mp-soltable-4r8x tbody tr:last-child td {
border-bottom: none;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.mp-soltable-section-4r8x {
padding: 65px 25px;
}
.mp-soltable-container-4r8x {
max-width: 1350px;
}
.mp-soltable-4r8x thead th {
padding: 15px 20px;
font-size: 16px;
}
.mp-soltable-4r8x tbody td {
padding: 12px 20px;
font-size: 15px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.mp-soltable-section-4r8x {
padding: 45px 20px;
}
.mp-soltable-4r8x thead th {
padding: 12px 15px;
font-size: 14px;
}
.mp-soltable-4r8x tbody td {
padding: 10px 15px;
font-size: 13px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mp-soltable-section-4r8x {
padding: 35px 12px;
}
.mp-soltable-scroll-4r8x {
overflow-x: auto;
}
/*
Keep the table wide enough for readability.
User can swipe horizontally on small screens.
*/
.mp-soltable-4r8x {
min-width: 650px;
}
.mp-soltable-4r8x thead th {
padding: 12px 14px;
font-size: 13px;
}
.mp-soltable-4r8x tbody td {
padding: 10px 14px;
font-size: 12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.mp-soltable-section-4r8x {
padding: 30px 10px;
}
.mp-soltable-4r8x {
min-width: 620px;
}
.mp-soltable-4r8x thead th {
font-size: 12px;
padding: 11px 13px;
}
.mp-soltable-4r8x tbody td {
font-size: 12px;
padding: 9px 13px;
}
}
/* =========================================================
MOPABOND - MOBILE APPLICATION TABLE
MOBILE ONLY
========================================================= */
@media (max-width: 600px) {
.mp-soltable-section-4r8x {
padding: 30px 14px;
}
.mp-soltable-scroll-4r8x {
overflow: visible;
border: none;
background: transparent;
}
.mp-soltable-4r8x {
width: 100%;
min-width: 0;
display: block;
}
/* Hide desktop table header */
.mp-soltable-4r8x thead {
display: none;
}
/* Each row becomes a card */
.mp-soltable-4r8x tbody {
display: flex;
flex-direction: column;
gap: 12px;
}
.mp-soltable-4r8x tbody tr {
display: block;
width: 100%;
padding: 15px;
box-sizing: border-box;
background: #ffffff !important;
border: 1px solid #dfe6ea;
border-radius: 5px;
box-shadow:
0 3px 10px rgba(9, 45, 81, 0.06);
}
.mp-soltable-4r8x tbody tr:hover {
background: #ffffff !important;
}
/* Both cells become separate blocks */
.mp-soltable-4r8x tbody td {
display: block;
width: 100%;
box-sizing: border-box;
padding: 0;
border: none !important;
text-align: left;
font-size: 14px;
line-height: 1.5;
}
/* APPLICATION */
.mp-soltable-4r8x tbody td:first-child {
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #e5eaed !important;
color: #092d51;
font-size: 16px;
font-weight: 700;
}
.mp-soltable-4r8x tbody td:first-child::before {
content: "APPLICATION";
display: block;
margin-bottom: 4px;
color: #f47721;
font-size: 10px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 0.5px;
}
/* RECOMMENDED SOLUTION */
.mp-soltable-4r8x tbody td:last-child {
color: #596873;
font-size: 14px;
font-weight: 400;
}
.mp-soltable-4r8x tbody td:last-child::before {
content: "RECOMMENDED SOLUTION";
display: block;
margin-bottom: 4px;
color: #092d51;
font-size: 10px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.3px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.mp-soltable-section-4r8x {
padding: 25px 10px;
}
.mp-soltable-4r8x tbody {
gap: 10px;
}
.mp-soltable-4r8x tbody tr {
padding: 14px;
}
.mp-soltable-4r8x tbody td:first-child {
font-size: 15px;
}
.mp-soltable-4r8x tbody td:last-child {
font-size: 13px;
}
}
/* =========================================================
MOPABOND - OUR PROJECTS
UNIQUE PREFIX: mpproj-6x8q
========================================================= */
.mpproj-section-6x8q {
width: 100%;
padding: 60px 20px 70px;
background: #f5f8fa;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.mpproj-container-6x8q {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
SECTION HEADING
========================================================= */
.mpproj-heading-6x8q {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 30px;
}
.mpproj-heading-line-6x8q {
flex: 0 0 4px;
width: 4px;
height: 46px;
margin-top: 2px;
background: #f47721;
border-radius: 2px;
}
.mpproj-heading-content-6x8q {
min-width: 0;
}
.mpproj-eyebrow-6x8q {
display: block;
margin: 0;
color: #092d51;
font-size: 28px;
line-height: 1.1;
font-weight: 800;
text-transform: uppercase;
}
.mpproj-heading-6x8q p {
margin: 6px 0 0;
color: #66747e;
font-size: 15px;
line-height: 1.5;
font-weight: 400;
}
/* =========================================================
PROJECT GRID
========================================================= */
.mpproj-grid-6x8q {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
/* =========================================================
PROJECT CARD
========================================================= */
.mpproj-card-6x8q {
display: flex;
flex-direction: column;
min-width: 0;
background: #ffffff;
border: 1px solid #dfe6ea;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(9, 45, 81, 0.07);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.mpproj-card-6x8q:hover {
transform: translateY(-4px);
border-color: rgba(244, 119, 33, 0.35);
box-shadow: 0 12px 28px rgba(9, 45, 81, 0.12);
}
/* =========================================================
PROJECT IMAGE
========================================================= */
.mpproj-image-6x8q {
width: 100%;
/* height: 200px; */
overflow: hidden;
background: #e8edf0;
}
.mpproj-image-6x8q img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
.mpproj-card-6x8q:hover
.mpproj-image-6x8q img {
transform: scale(1.04);
}
/* =========================================================
CARD CONTENT
========================================================= */
.mpproj-content-6x8q {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
}
/* =========================================================
META INFORMATION
========================================================= */
.mpproj-meta-6x8q {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px 14px;
margin-bottom: 12px;
}
.mpproj-meta-6x8q span {
display: inline-flex;
align-items: center;
gap: 6px;
color: #66747e;
font-size: 12px;
line-height: 1.4;
font-weight: 600;
}
.mpproj-meta-6x8q i {
color: #f47721;
font-size: 12px;
}
/* =========================================================
PROJECT TITLE
========================================================= */
.mpproj-content-6x8q h3 {
margin: 0 0 10px;
color: #092d51;
font-size: 20px;
line-height: 1.25;
font-weight: 800;
}
/* =========================================================
DESCRIPTION
========================================================= */
.mpproj-description-6x8q {
margin: 0 0 14px;
color: #596873;
font-size: 14px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
SOLUTIONS TITLE
========================================================= */
.mpproj-solutions-title-6x8q {
margin-bottom: 7px;
color: #f47721;
font-size: 13px;
line-height: 1.4;
font-weight: 700;
}
/* =========================================================
SOLUTIONS LIST
========================================================= */
.mpproj-solutions-6x8q {
display: flex;
flex-direction: column;
gap: 5px;
margin: 0 0 18px;
padding: 0;
list-style: none;
}
.mpproj-solutions-6x8q li {
position: relative;
padding-left: 19px;
color: #596873;
font-size: 13px;
line-height: 1.45;
font-weight: 400;
}
.mpproj-solutions-6x8q li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #f47721;
font-size: 12px;
font-weight: 700;
}
/* =========================================================
VIEW PROJECT BUTTON
========================================================= */
.mpproj-button-6x8q {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: fit-content;
min-height: 40px;
margin-top: auto;
padding: 0 17px;
background: #f47721;
color: #ffffff;
border-radius: 4px;
font-size: 13px;
line-height: 1;
font-weight: 700;
text-decoration: none;
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mpproj-button-6x8q:hover {
background: #dc6517;
color: #ffffff;
transform: translateY(-1px);
box-shadow:
0 5px 12px rgba(244, 119, 33, 0.22);
}
.mpproj-button-6x8q i {
font-size: 11px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.mpproj-container-6x8q {
max-width: 1400px;
}
.mpproj-image-6x8q {
height: 220px;
}
.mpproj-content-6x8q {
padding: 22px;
}
.mpproj-content-6x8q h3 {
font-size: 21px;
}
.mpproj-description-6x8q {
font-size: 15px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1100px) {
.mpproj-section-6x8q {
padding: 55px 20px 65px;
}
.mpproj-grid-6x8q {
gap: 16px;
}
.mpproj-image-6x8q {
height: 180px;
}
.mpproj-content-6x8q {
padding: 18px;
}
.mpproj-content-6x8q h3 {
font-size: 18px;
}
.mpproj-description-6x8q {
font-size: 13px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 850px) {
.mpproj-grid-6x8q {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.mpproj-eyebrow-6x8q {
font-size: 25px;
}
.mpproj-heading-6x8q p {
font-size: 14px;
}
.mpproj-image-6x8q {
height: 200px;
}
.mpproj-content-6x8q h3 {
font-size: 19px;
}
.mpproj-description-6x8q {
font-size: 14px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mpproj-section-6x8q {
padding: 45px 15px 55px;
}
.mpproj-heading-6x8q {
gap: 10px;
margin-bottom: 25px;
}
.mpproj-heading-line-6x8q {
width: 4px;
flex-basis: 4px;
height: 39px;
}
.mpproj-eyebrow-6x8q {
font-size: 22px;
}
.mpproj-heading-6x8q p {
font-size: 13px;
}
.mpproj-grid-6x8q {
grid-template-columns: 1fr;
gap: 20px;
}
.mpproj-image-6x8q {
height: 220px;
}
.mpproj-content-6x8q {
padding: 20px;
}
.mpproj-meta-6x8q {
gap: 7px 12px;
}
.mpproj-meta-6x8q span {
font-size: 12px;
}
.mpproj-content-6x8q h3 {
font-size: 20px;
}
.mpproj-description-6x8q {
font-size: 14px;
line-height: 1.55;
}
.mpproj-solutions-title-6x8q {
font-size: 13px;
}
.mpproj-solutions-6x8q li {
font-size: 13px;
}
.mpproj-button-6x8q {
min-height: 40px;
padding: 0 17px;
font-size: 13px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.mpproj-section-6x8q {
padding-left: 12px;
padding-right: 12px;
}
.mpproj-eyebrow-6x8q {
font-size: 20px;
}
.mpproj-heading-6x8q p {
font-size: 12px;
}
.mpproj-image-6x8q {
height: 195px;
}
.mpproj-content-6x8q {
padding: 18px;
}
.mpproj-content-6x8q h3 {
font-size: 19px;
}
.mpproj-description-6x8q {
font-size: 13px;
}
}
/* =========================================================
MOPABOND - PROJECT APPLICATIONS
UNIQUE PREFIX: mpprojapp-8h4x
========================================================= */
/* =========================================================
SECTION
========================================================= */
.mpprojapp-section-8h4x {
width: 100%;
padding: 60px 20px 70px;
background: #f5f8fa;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.mpprojapp-container-8h4x {
width: 100%;
max-width: 1150px;
margin: 0 auto;
}
/* =========================================================
GRID
========================================================= */
.mpprojapp-grid-8h4x {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 20px;
}
/* =========================================================
CARD
========================================================= */
.mpprojapp-card-8h4x {
display: grid;
grid-template-columns:
38% 62%;
min-width: 0;
background: #ffffff;
border: 1px solid #dfe6ea;
border-radius: 5px;
overflow: hidden;
box-shadow:
0 4px 14px rgba(9, 45, 81, 0.06);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.mpprojapp-card-8h4x:hover {
transform: translateY(-3px);
border-color:
rgba(244, 119, 33, 0.35);
box-shadow:
0 10px 25px rgba(9, 45, 81, 0.10);
}
/* =========================================================
IMAGE
========================================================= */
.mpprojapp-image-8h4x {
width: 100%;
height: 100%;
min-height: 330px;
overflow: hidden;
background: #e8edf0;
}
.mpprojapp-image-8h4x img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition:
transform 0.4s ease;
}
.mpprojapp-card-8h4x:hover
.mpprojapp-image-8h4x img {
transform: scale(1.04);
}
/* =========================================================
CONTENT
========================================================= */
.mpprojapp-content-8h4x {
display: flex;
flex-direction: column;
min-width: 0;
padding: 23px 22px 20px;
}
/* =========================================================
LABEL
========================================================= */
.mpprojapp-label-8h4x {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 9px;
color: #092d51;
font-size: 13px;
line-height: 1.3;
font-weight: 700;
}
.mpprojapp-label-8h4x i {
color: #f47721;
font-size: 15px;
}
/* =========================================================
TITLE
========================================================= */
.mpprojapp-content-8h4x h2 {
margin: 0 0 9px;
color: #092d51;
font-size: 15px;
line-height: 1.2;
font-weight: 800;
text-transform: uppercase;
}
/* =========================================================
DESCRIPTION
========================================================= */
.mpprojapp-description-8h4x {
margin: 0 0 12px;
color: #596873;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
}
/* =========================================================
SMALL HEADING
========================================================= */
.mpprojapp-content-8h4x h3 {
margin: 0 0 7px;
color: #f47721;
font-size: 13px;
line-height: 1.4;
font-weight: 700;
}
/* =========================================================
TWO-COLUMN LIST
========================================================= */
.mpprojapp-list-8h4x {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 0 15px;
margin-bottom: 17px;
}
.mpprojapp-list-8h4x ul {
display: flex;
flex-direction: column;
gap: 5px;
margin: 0;
padding: 0;
list-style: none;
}
.mpprojapp-list-8h4x li {
position: relative;
padding-left: 17px;
color: #596873;
font-size: 12px;
line-height: 1.4;
font-weight: 400;
}
.mpprojapp-list-8h4x li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #f47721;
font-size: 11px;
font-weight: 700;
}
/* =========================================================
BUTTON
========================================================= */
.mpprojapp-button-8h4x {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: fit-content;
min-height: 40px;
margin-top: auto;
padding: 0 17px;
background: #f47721;
color: #ffffff;
border-radius: 4px;
font-size: 12px;
line-height: 1;
font-weight: 700;
text-decoration: none;
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mpprojapp-button-8h4x:hover {
background: #dc6517;
color: #ffffff;
transform: translateY(-1px);
box-shadow:
0 5px 12px rgba(244, 119, 33, 0.20);
}
.mpprojapp-button-8h4x i {
font-size: 10px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.mpprojapp-container-8h4x {
max-width: 1400px;
}
.mpprojapp-card-8h4x {
grid-template-columns:
40% 60%;
}
.mpprojapp-image-8h4x {
min-height: 350px;
}
.mpprojapp-content-8h4x {
padding: 25px;
}
.mpprojapp-content-8h4x h2 {
font-size: 22px;
}
.mpprojapp-description-8h4x {
font-size: 15px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1100px) {
.mpprojapp-section-8h4x {
padding: 55px 20px 65px;
}
.mpprojapp-grid-8h4x {
gap: 16px;
}
.mpprojapp-card-8h4x {
grid-template-columns:
36% 64%;
}
.mpprojapp-image-8h4x {
min-height: 320px;
}
.mpprojapp-content-8h4x {
padding: 20px 18px;
}
.mpprojapp-content-8h4x h2 {
font-size: 19px;
}
.mpprojapp-description-8h4x {
font-size: 13px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 850px) {
.mpprojapp-grid-8h4x {
grid-template-columns: 1fr;
}
.mpprojapp-card-8h4x {
grid-template-columns:
38% 62%;
}
.mpprojapp-image-8h4x {
min-height: 300px;
}
.mpprojapp-content-8h4x h2 {
font-size: 21px;
}
.mpprojapp-description-8h4x {
font-size: 14px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mpprojapp-section-8h4x {
padding: 45px 15px 55px;
}
.mpprojapp-grid-8h4x {
grid-template-columns: 1fr;
gap: 18px;
}
.mpprojapp-card-8h4x {
grid-template-columns: 1fr;
}
.mpprojapp-image-8h4x {
width: 100%;
height: 220px;
min-height: 220px;
}
.mpprojapp-content-8h4x {
padding: 20px;
}
.mpprojapp-label-8h4x {
font-size: 13px;
}
.mpprojapp-content-8h4x h2 {
font-size: 20px;
line-height: 1.25;
}
.mpprojapp-description-8h4x {
font-size: 14px;
line-height: 1.55;
}
.mpprojapp-content-8h4x h3 {
font-size: 13px;
}
.mpprojapp-list-8h4x {
gap: 0 20px;
}
.mpprojapp-list-8h4x li {
font-size: 13px;
}
.mpprojapp-button-8h4x {
min-height: 40px;
font-size: 12px;
padding: 0 16px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.mpprojapp-section-8h4x {
padding-left: 12px;
padding-right: 12px;
}
.mpprojapp-image-8h4x {
height: 195px;
min-height: 195px;
}
.mpprojapp-content-8h4x {
padding: 18px;
}
.mpprojapp-content-8h4x h2 {
font-size: 19px;
}
.mpprojapp-description-8h4x {
font-size: 13px;
}
.mpprojapp-list-8h4x {
grid-template-columns: 1fr;
gap: 4px;
}
.mpprojapp-list-8h4x li {
font-size: 13px;
}
}
/* =========================================================
MOPABOND - BE PART OF THE JOURNEY
UNIQUE PREFIX: mpjourney-7v3k
========================================================= */
/* =========================================================
MAIN SECTION
========================================================= */
.mpjourney-section-7v3k {
width: 100%;
padding: 55px 20px;
background: #f5f8fa;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.mpjourney-container-7v3k {
position: relative;
width: 100%;
max-width: 1100px;
min-height: 330px;
margin: 0 auto;
display: grid;
grid-template-columns:
42% 43% 15%;
background: #ffffff;
border: 1px solid #e1e7eb;
overflow: hidden;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.mpjourney-content-7v3k {
position: relative;
z-index: 5;
padding: 38px 35px 35px 45px;
background: #ffffff;
box-sizing: border-box;
}
/* =========================================================
HEADING
========================================================= */
.mpjourney-heading-7v3k {
position: relative;
margin: 0 0 15px;
padding-left: 13px;
color: #092d51;
font-size: 27px;
line-height: 1.05;
font-weight: 800;
text-transform: uppercase;
}
.mpjourney-heading-7v3k::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: #f47721;
border-radius: 2px;
}
.mpjourney-heading-7v3k span {
display: inline;
}
.mpjourney-heading-7v3k strong {
color: #f47721;
font-weight: 800;
}
/* =========================================================
BODY TEXT
========================================================= */
.mpjourney-text-7v3k {
margin: 0 0 10px;
color: #5d6b75;
font-size: 13px;
line-height: 1.48;
font-weight: 400;
}
/* =========================================================
HIGHLIGHT
========================================================= */
.mpjourney-highlight-7v3k {
margin: 12px 0 7px;
color: #f47721;
font-size: 13px;
line-height: 1.3;
font-weight: 800;
text-transform: uppercase;
}
/* =========================================================
FINAL TEXT
========================================================= */
.mpjourney-final-text-7v3k {
margin-bottom: 0;
}
/* =========================================================
CENTER IMAGE
========================================================= */
.mpjourney-image-7v3k {
position: relative;
width: 100%;
height: 100%;
min-height: 330px;
overflow: hidden;
background: #e6ecef;
}
.mpjourney-image-7v3k img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* =========================================================
IMAGE LIGHT OVERLAY
========================================================= */
.mpjourney-image-7v3k::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(255,255,255,0.02),
rgba(255,255,255,0.00)
);
}
/* =========================================================
ORANGE RIGHT PANEL
========================================================= */
.mpjourney-orange-7v3k {
position: relative;
min-height: 330px;
overflow: hidden;
background: #f47721;
}
/* =========================================================
ANGLED SHAPE
========================================================= */
.mpjourney-orange-shape-7v3k {
position: absolute;
left: -25px;
top: -10%;
width: 27px;
height: 120%;
background: #ffffff;
transform: skewX(-20deg);
opacity: 0.98;
}
/* =========================================================
ORANGE CONTENT
========================================================= */
.mpjourney-orange-content-7v3k {
position: relative;
z-index: 5;
height: 100%;
min-height: 330px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 10px 20px 20px;
box-sizing: border-box;
}
.mpjourney-orange-content-7v3k span {
display: block;
color: #ffffff;
font-size: 19px;
line-height: 1.2;
font-weight: 800;
text-align: center;
text-transform: uppercase;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.mpjourney-container-7v3k {
max-width: 1550px;
min-height: 360px;
grid-template-columns:
43% 42% 15%;
}
.mpjourney-content-7v3k {
padding: 42px 40px 40px 50px;
}
.mpjourney-heading-7v3k {
font-size: 30px;
}
.mpjourney-text-7v3k {
font-size: 14px;
}
.mpjourney-highlight-7v3k {
font-size: 14px;
}
.mpjourney-image-7v3k {
min-height: 360px;
}
.mpjourney-orange-7v3k,
.mpjourney-orange-content-7v3k {
min-height: 360px;
}
.mpjourney-orange-content-7v3k span {
font-size: 21px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1100px) {
.mpjourney-section-7v3k {
padding: 45px 20px;
}
.mpjourney-container-7v3k {
grid-template-columns:
43% 42% 15%;
min-height: 310px;
}
.mpjourney-content-7v3k {
padding: 30px 25px 30px 32px;
}
.mpjourney-heading-7v3k {
font-size: 24px;
}
.mpjourney-text-7v3k {
font-size: 12px;
}
.mpjourney-highlight-7v3k {
font-size: 12px;
}
.mpjourney-image-7v3k {
min-height: 310px;
}
.mpjourney-orange-7v3k,
.mpjourney-orange-content-7v3k {
min-height: 310px;
}
.mpjourney-orange-content-7v3k span {
font-size: 17px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 800px) {
.mpjourney-container-7v3k {
grid-template-columns:
1fr 1fr;
min-height: auto;
}
.mpjourney-content-7v3k {
padding: 32px 28px;
}
.mpjourney-image-7v3k {
min-height: 360px;
}
/* Orange panel moves underneath */
.mpjourney-orange-7v3k {
grid-column: 1 / -1;
min-height: 90px;
}
.mpjourney-orange-content-7v3k {
min-height: 90px;
flex-direction: row;
justify-content: center;
gap: 20px;
padding: 15px 25px;
}
.mpjourney-orange-content-7v3k span {
font-size: 18px;
}
.mpjourney-orange-shape-7v3k {
left: -30px;
width: 70px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mpjourney-section-7v3k {
padding: 35px 14px 45px;
}
.mpjourney-container-7v3k {
display: flex;
flex-direction: column;
}
/* CONTENT FIRST */
.mpjourney-content-7v3k {
padding: 28px 22px;
}
.mpjourney-heading-7v3k {
font-size: 23px;
margin-bottom: 13px;
padding-left: 11px;
}
.mpjourney-text-7v3k {
font-size: 14px;
line-height: 1.55;
margin-bottom: 11px;
}
.mpjourney-highlight-7v3k {
font-size: 13px;
line-height: 1.4;
margin-top: 14px;
}
/* IMAGE */
.mpjourney-image-7v3k {
width: 100%;
height: 230px;
min-height: 230px;
order: 2;
}
/* ORANGE PANEL */
.mpjourney-orange-7v3k {
min-height: 90px;
order: 3;
}
.mpjourney-orange-content-7v3k {
min-height: 90px;
gap: 10px;
padding: 15px;
}
.mpjourney-orange-content-7v3k span {
font-size: 15px;
}
.mpjourney-orange-shape-7v3k {
left: -30px;
width: 60px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.mpjourney-section-7v3k {
padding-left: 10px;
padding-right: 10px;
}
.mpjourney-content-7v3k {
padding: 25px 18px;
}
.mpjourney-heading-7v3k {
font-size: 21px;
}
.mpjourney-text-7v3k {
font-size: 13px;
}
.mpjourney-highlight-7v3k {
font-size: 12px;
}
.mpjourney-image-7v3k {
height: 200px;
min-height: 200px;
}
.mpjourney-orange-content-7v3k {
gap: 7px;
padding: 12px 8px;
}
.mpjourney-orange-content-7v3k span {
font-size: 12px;
}
}
/* =========================================================
MOPABOND - WHY BUILD YOUR CAREER WITH US?
UNIQUE PREFIX: mpcareerwhy-5r8x
MAX WIDTH: 1100px
========================================================= */
/* =========================================================
SECTION
========================================================= */
.mpcareerwhy-section-5r8x {
width: 100%;
padding: 55px 20px;
background: #062d52;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.mpcareerwhy-container-5r8x {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mpcareerwhy-heading-5r8x {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 35px;
}
.mpcareerwhy-heading-line-5r8x {
flex: 0 0 4px;
width: 4px;
height: 29px;
background: #f47721;
border-radius: 2px;
}
.mpcareerwhy-heading-5r8x h2 {
margin: 0;
color: #ffffff;
font-size: 25px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 0.2px;
text-transform: uppercase;
}
.mpcareerwhy-heading-5r8x h2 strong {
color: #f47721;
font-weight: 800;
}
/* =========================================================
FEATURE GRID
========================================================= */
.mpcareerwhy-grid-5r8x {
display: grid;
grid-template-columns:
repeat(6, minmax(0, 1fr));
border-top: 1px solid
rgba(255, 255, 255, 0.16);
border-bottom: 1px solid
rgba(255, 255, 255, 0.16);
}
/* =========================================================
FEATURE ITEM
========================================================= */
.mpcareerwhy-item-5r8x {
position: relative;
min-width: 0;
padding: 25px 17px 24px;
box-sizing: border-box;
transition:
background 0.25s ease,
transform 0.25s ease;
}
/* vertical separators */
.mpcareerwhy-item-5r8x:not(:last-child)::after {
content: "";
position: absolute;
top: 22px;
right: 0;
width: 1px;
height: calc(100% - 44px);
background:
rgba(255, 255, 255, 0.18);
}
.mpcareerwhy-item-5r8x:hover {
background:
rgba(255, 255, 255, 0.045);
}
/* =========================================================
ICON
========================================================= */
.mpcareerwhy-icon-5r8x {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 16px;
color: #f47721;
font-size: 23px;
border: 1px solid
rgba(244, 119, 33, 0.45);
border-radius: 50%;
background:
rgba(244, 119, 33, 0.07);
transition:
background 0.25s ease,
transform 0.25s ease;
}
.mpcareerwhy-item-5r8x:hover
.mpcareerwhy-icon-5r8x {
background: rgba(244, 119, 33, 0.14);
transform: translateY(-2px);
}
/* =========================================================
ITEM TITLE
========================================================= */
.mpcareerwhy-item-5r8x h3 {
margin: 0 0 9px;
color: #ffffff;
font-size: 16px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================================
ITEM DESCRIPTION
========================================================= */
.mpcareerwhy-item-5r8x p {
margin: 0;
color:
rgba(255, 255, 255, 0.72);
font-size: 13px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1200px) {
.mpcareerwhy-section-5r8x {
padding-top: 65px;
padding-bottom: 65px;
}
.mpcareerwhy-heading-5r8x h2 {
font-size: 27px;
}
.mpcareerwhy-item-5r8x {
padding-left: 18px;
padding-right: 18px;
}
.mpcareerwhy-item-5r8x h3 {
font-size: 17px;
}
.mpcareerwhy-item-5r8x p {
font-size: 13px;
}
}
/* =========================================================
LAPTOP / SMALL DESKTOP
========================================================= */
@media (max-width: 950px) {
.mpcareerwhy-section-5r8x {
padding: 50px 20px;
}
.mpcareerwhy-grid-5r8x {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.mpcareerwhy-item-5r8x {
padding: 25px 20px;
}
/* remove right separator from every third item */
.mpcareerwhy-item-5r8x:nth-child(3)::after,
.mpcareerwhy-item-5r8x:nth-child(6)::after {
display: none;
}
/* horizontal separator between rows */
.mpcareerwhy-item-5r8x:nth-child(-n+3) {
border-bottom: 1px solid
rgba(255, 255, 255, 0.16);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 700px) {
.mpcareerwhy-section-5r8x {
padding: 45px 18px;
}
.mpcareerwhy-heading-5r8x {
margin-bottom: 28px;
}
.mpcareerwhy-heading-5r8x h2 {
font-size: 23px;
}
.mpcareerwhy-grid-5r8x {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.mpcareerwhy-item-5r8x {
padding: 24px 20px;
}
.mpcareerwhy-item-5r8x:nth-child(3)::after {
display: block;
}
.mpcareerwhy-item-5r8x:nth-child(2n)::after {
display: none;
}
.mpcareerwhy-item-5r8x:nth-child(5),
.mpcareerwhy-item-5r8x:nth-child(6) {
border-bottom: none;
}
.mpcareerwhy-item-5r8x:nth-child(3),
.mpcareerwhy-item-5r8x:nth-child(4) {
border-bottom: 1px solid
rgba(255, 255, 255, 0.16);
}
.mpcareerwhy-item-5r8x h3 {
font-size: 16px;
}
.mpcareerwhy-item-5r8x p {
font-size: 13px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 500px) {
.mpcareerwhy-section-5r8x {
padding: 40px 15px;
}
.mpcareerwhy-heading-5r8x {
gap: 10px;
margin-bottom: 25px;
}
.mpcareerwhy-heading-line-5r8x {
height: 27px;
}
.mpcareerwhy-heading-5r8x h2 {
font-size: 21px;
line-height: 1.25;
}
.mpcareerwhy-grid-5r8x {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid
rgba(255, 255, 255, 0.16);
}
.mpcareerwhy-item-5r8x {
padding: 24px 5px;
border-bottom: 1px solid
rgba(255, 255, 255, 0.16);
}
.mpcareerwhy-item-5r8x:last-child {
border-bottom: none;
}
.mpcareerwhy-item-5r8x::after {
display: none !important;
}
.mpcareerwhy-icon-5r8x {
width: 44px;
height: 44px;
margin-bottom: 13px;
font-size: 21px;
}
.mpcareerwhy-item-5r8x h3 {
font-size: 17px;
margin-bottom: 7px;
}
.mpcareerwhy-item-5r8x p {
font-size: 14px;
line-height: 1.55;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.mpcareerwhy-section-5r8x {
padding-left: 13px;
padding-right: 13px;
}
.mpcareerwhy-heading-5r8x h2 {
font-size: 19px;
}
.mpcareerwhy-item-5r8x h3 {
font-size: 16px;
}
.mpcareerwhy-item-5r8x p {
font-size: 13px;
}
}
/* =========================================================
MOPABOND - CAREER OPPORTUNITIES
UNIQUE PREFIX: mpcareerop-4x7n
MAX WIDTH: 1100px
========================================================= */
/* =========================================================
MAIN SECTION
========================================================= */
.mpcareerop-section-4x7n {
width: 100%;
padding: 60px 20px 70px;
background: #f5f8fa;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.mpcareerop-container-4x7n {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
MAIN HEADING
========================================================= */
.mpcareerop-heading-4x7n {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 25px;
}
.mpcareerop-heading-line-4x7n {
flex: 0 0 4px;
width: 4px;
height: 55px;
background: #f47721;
border-radius: 2px;
}
.mpcareerop-heading-small-4x7n {
margin-bottom: 3px;
color: #092d51;
font-size: 17px;
line-height: 1.3;
font-weight: 700;
}
.mpcareerop-heading-4x7n h2 {
margin: 0;
color: #092d51;
font-size: 27px;
line-height: 1.15;
font-weight: 800;
text-transform: uppercase;
}
.mpcareerop-heading-4x7n h2 strong {
color: #f47721;
font-weight: 800;
}
.mpcareerop-heading-4x7n p {
margin: 5px 0 0;
color: #697781;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
}
/* =========================================================
DEPARTMENT GRID
========================================================= */
.mpcareerop-departments-4x7n {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 45px;
}
/* =========================================================
DEPARTMENT CARD
========================================================= */
.mpcareerop-department-4x7n {
display: flex;
align-items: flex-start;
gap: 13px;
min-width: 0;
padding: 18px 15px;
background: #ffffff;
border: 1px solid #dfe6ea;
border-radius: 5px;
box-sizing: border-box;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.mpcareerop-department-4x7n:hover {
transform: translateY(-3px);
border-color:
rgba(244, 119, 33, 0.35);
box-shadow:
0 8px 20px rgba(9, 45, 81, 0.09);
}
/* =========================================================
DEPARTMENT ICON
========================================================= */
.mpcareerop-icon-4x7n {
flex: 0 0 36px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: #f47721;
background: #fff3e9;
border: 1px solid
rgba(244, 119, 33, 0.25);
border-radius: 50%;
font-size: 17px;
}
/* =========================================================
DEPARTMENT CONTENT
========================================================= */
.mpcareerop-department-content-4x7n {
min-width: 0;
}
.mpcareerop-department-content-4x7n h3 {
margin: 0 0 6px;
color: #092d51;
font-size: 15px;
line-height: 1.3;
font-weight: 700;
}
.mpcareerop-department-content-4x7n p {
margin: 0;
color: #697781;
font-size: 12px;
line-height: 1.5;
font-weight: 400;
}
/* =========================================================
CURRENT OPENINGS HEADING
========================================================= */
.mpcareerop-opening-heading-4x7n {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.mpcareerop-opening-heading-4x7n
.mpcareerop-heading-line-4x7n {
height: 32px;
}
.mpcareerop-opening-heading-4x7n h2 {
margin: 0;
color: #092d51;
font-size: 24px;
line-height: 1.2;
font-weight: 800;
text-transform: uppercase;
}
.mpcareerop-opening-heading-4x7n h2 strong {
color: #f47721;
font-weight: 800;
}
/* =========================================================
OPENINGS GRID
========================================================= */
.mpcareerop-openings-4x7n {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 16px;
}
/* =========================================================
JOB CARD
========================================================= */
.mpcareerop-job-4x7n {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 20px;
background: #ffffff;
border: 1px solid #dfe6ea;
border-radius: 5px;
box-shadow:
0 3px 12px rgba(9, 45, 81, 0.05);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.mpcareerop-job-4x7n:hover {
transform: translateY(-3px);
border-color:
rgba(244, 119, 33, 0.35);
box-shadow:
0 8px 20px rgba(9, 45, 81, 0.09);
}
/* =========================================================
JOB ICON
========================================================= */
.mpcareerop-job-icon-4x7n {
flex: 0 0 38px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
color: #f47721;
background: #fff3e9;
border-radius: 50%;
font-size: 17px;
}
/* =========================================================
JOB CONTENT
========================================================= */
.mpcareerop-job-content-4x7n {
min-width: 0;
flex: 1;
}
.mpcareerop-job-content-4x7n h3 {
margin: 0 0 10px;
color: #092d51;
font-size: 17px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================================
JOB DETAILS
========================================================= */
.mpcareerop-job-details-4x7n {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.mpcareerop-job-details-4x7n span {
color: #697781;
font-size: 13px;
line-height: 1.4;
}
.mpcareerop-job-details-4x7n strong {
color: #092d51;
font-weight: 600;
}
/* =========================================================
VIEW DETAILS BUTTON
========================================================= */
.mpcareerop-details-btn-4x7n {
display: inline-flex;
align-items: center;
gap: 6px;
color: #f47721;
font-size: 13px;
line-height: 1.3;
font-weight: 700;
text-decoration: none;
transition:
color 0.2s ease,
gap 0.2s ease;
}
.mpcareerop-details-btn-4x7n:hover {
color: #092d51;
gap: 9px;
}
.mpcareerop-details-btn-4x7n i {
font-size: 10px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1200px) {
.mpcareerop-section-4x7n {
padding-top: 70px;
padding-bottom: 80px;
}
.mpcareerop-heading-4x7n h2 {
font-size: 29px;
}
.mpcareerop-department-4x7n {
padding: 20px 17px;
}
.mpcareerop-department-content-4x7n h3 {
font-size: 16px;
}
.mpcareerop-department-content-4x7n p {
font-size: 13px;
}
}
/* =========================================================
TABLET / SMALL LAPTOP
========================================================= */
@media (max-width: 900px) {
.mpcareerop-departments-4x7n {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.mpcareerop-openings-4x7n {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.mpcareerop-job-4x7n:last-child {
grid-column: 1 / -1;
max-width: calc(50% - 8px);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 700px) {
.mpcareerop-section-4x7n {
padding: 45px 18px 55px;
}
.mpcareerop-heading-4x7n h2 {
font-size: 24px;
}
.mpcareerop-heading-small-4x7n {
font-size: 16px;
}
.mpcareerop-heading-4x7n p {
font-size: 13px;
}
.mpcareerop-department-4x7n {
padding: 17px;
}
.mpcareerop-openings-4x7n {
grid-template-columns: 1fr;
}
.mpcareerop-job-4x7n:last-child {
grid-column: auto;
max-width: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 550px) {
.mpcareerop-section-4x7n {
padding: 40px 14px 50px;
}
.mpcareerop-heading-4x7n {
gap: 10px;
margin-bottom: 22px;
}
.mpcareerop-heading-line-4x7n {
flex-basis: 3px;
width: 3px;
height: 50px;
}
.mpcareerop-heading-4x7n h2 {
font-size: 21px;
line-height: 1.2;
}
.mpcareerop-heading-small-4x7n {
font-size: 15px;
}
.mpcareerop-heading-4x7n p {
font-size: 13px;
line-height: 1.45;
}
/* DEPARTMENTS */
.mpcareerop-departments-4x7n {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 38px;
}
.mpcareerop-department-4x7n {
padding: 18px;
gap: 13px;
}
.mpcareerop-icon-4x7n {
flex-basis: 40px;
width: 40px;
height: 40px;
font-size: 18px;
}
.mpcareerop-department-content-4x7n h3 {
font-size: 16px;
margin-bottom: 6px;
}
.mpcareerop-department-content-4x7n p {
font-size: 13px;
line-height: 1.5;
}
/* CURRENT OPENINGS */
.mpcareerop-opening-heading-4x7n {
margin-bottom: 20px;
}
.mpcareerop-opening-heading-4x7n
.mpcareerop-heading-line-4x7n {
height: 29px;
}
.mpcareerop-opening-heading-4x7n h2 {
font-size: 21px;
}
/* JOBS */
.mpcareerop-openings-4x7n {
gap: 13px;
}
.mpcareerop-job-4x7n {
padding: 18px;
gap: 13px;
}
.mpcareerop-job-icon-4x7n {
flex-basis: 40px;
width: 40px;
height: 40px;
font-size: 17px;
}
.mpcareerop-job-content-4x7n h3 {
font-size: 17px;
margin-bottom: 9px;
}
.mpcareerop-job-details-4x7n span {
font-size: 13px;
}
.mpcareerop-details-btn-4x7n {
font-size: 13px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.mpcareerop-section-4x7n {
padding-left: 11px;
padding-right: 11px;
}
.mpcareerop-heading-4x7n h2 {
font-size: 19px;
}
.mpcareerop-heading-small-4x7n {
font-size: 14px;
}
.mpcareerop-department-4x7n {
padding: 16px;
}
.mpcareerop-department-content-4x7n h3 {
font-size: 15px;
}
.mpcareerop-department-content-4x7n p {
font-size: 12px;
}
.mpcareerop-job-4x7n {
padding: 16px;
}
.mpcareerop-job-content-4x7n h3 {
font-size: 16px;
}
}
/* =========================================================
MOPABOND - WHO WE'RE LOOKING FOR
UNIQUE PREFIX: mpcareerwho-8k4p
MAX WIDTH: 1100px
========================================================= */
/* =========================================================
SECTION
========================================================= */
.mpcareerwho-section-8k4p {
width: 100%;
padding: 60px 20px 70px;
background: #f5f8fa;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.mpcareerwho-container-8k4p {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
TOP FEATURE
========================================================= */
.mpcareerwho-top-8k4p {
display: grid;
grid-template-columns:
38% 42% 20%;
min-height: 315px;
background: #ffffff;
border: 1px solid #dfe6ea;
overflow: hidden;
}
/* =========================================================
TOP CONTENT
========================================================= */
.mpcareerwho-top-content-8k4p {
padding: 27px 25px 25px 28px;
box-sizing: border-box;
}
/* =========================================================
TITLE
========================================================= */
.mpcareerwho-title-row-8k4p {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.mpcareerwho-title-line-8k4p {
flex: 0 0 3px;
width: 3px;
height: 45px;
background: #f47721;
border-radius: 2px;
}
.mpcareerwho-small-title-8k4p {
color: #092d51;
font-size: 17px;
line-height: 1.2;
font-weight: 700;
}
.mpcareerwho-title-row-8k4p h2 {
margin: 2px 0 0;
color: #092d51;
font-size: 24px;
line-height: 1.1;
font-weight: 800;
text-transform: uppercase;
}
.mpcareerwho-title-row-8k4p h2 strong {
color: #f47721;
font-weight: 800;
}
/* =========================================================
INTRO
========================================================= */
.mpcareerwho-intro-8k4p {
margin: 0 0 6px;
color: #697781;
font-size: 13px;
line-height: 1.4;
font-weight: 400;
}
/* =========================================================
QUALITY LIST
========================================================= */
.mpcareerwho-quality-list-8k4p {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 5px 15px;
margin: 0;
padding: 0;
list-style: none;
}
.mpcareerwho-quality-list-8k4p li {
position: relative;
padding-left: 17px;
color: #596873;
font-size: 12px;
line-height: 1.45;
}
.mpcareerwho-quality-list-8k4p li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #f47721;
font-size: 11px;
font-weight: 700;
}
/* =========================================================
TOP IMAGE
========================================================= */
.mpcareerwho-top-image-8k4p {
position: relative;
min-width: 0;
overflow: hidden;
background: #e6ecef;
}
.mpcareerwho-top-image-8k4p img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* =========================================================
IMAGE MESSAGE
========================================================= */
.mpcareerwho-top-message-8k4p {
display: flex;
align-items: center;
padding: 25px 20px;
background: #ffffff;
box-sizing: border-box;
}
.mpcareerwho-top-message-8k4p p {
margin: 0;
color: #596873;
font-size: 13px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
BOTTOM CARDS
========================================================= */
.mpcareerwho-cards-8k4p {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 18px;
}
/* =========================================================
CARD
========================================================= */
.mpcareerwho-card-8k4p {
display: grid;
grid-template-columns:
68% 32%;
min-width: 0;
background: #ffffff;
border: 1px solid #dfe6ea;
overflow: hidden;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.mpcareerwho-card-8k4p:hover {
transform: translateY(-3px);
border-color:
rgba(244, 119, 33, 0.35);
box-shadow:
0 9px 22px rgba(9, 45, 81, 0.09);
}
/* =========================================================
CARD CONTENT
========================================================= */
.mpcareerwho-card-content-8k4p {
min-width: 0;
padding: 20px 18px;
box-sizing: border-box;
}
/* =========================================================
CARD HEADING
========================================================= */
.mpcareerwho-card-heading-8k4p {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.mpcareerwho-card-icon-8k4p {
flex: 0 0 35px;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
color: #f47721;
background: #fff3e9;
border: 1px solid
rgba(244, 119, 33, 0.25);
border-radius: 50%;
font-size: 16px;
}
.mpcareerwho-card-heading-8k4p span {
display: block;
margin-bottom: 3px;
color: #092d51;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
}
.mpcareerwho-card-heading-8k4p h3 {
margin: 0;
color: #f47721;
font-size: 15px;
line-height: 1.25;
font-weight: 800;
text-transform: uppercase;
}
/* =========================================================
CARD TEXT
========================================================= */
.mpcareerwho-card-content-8k4p p {
margin: 0 0 7px;
color: #697781;
font-size: 12px;
line-height: 1.5;
}
/* =========================================================
HIGHLIGHT
========================================================= */
.mpcareerwho-highlight-8k4p {
margin: 8px 0 12px;
color: #f47721;
font-size: 13px;
line-height: 1.3;
font-weight: 800;
}
/* =========================================================
BUTTON
========================================================= */
.mpcareerwho-button-8k4p {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
padding: 0 14px;
background: #f47721;
color: #ffffff;
border-radius: 4px;
font-size: 11px;
line-height: 1;
font-weight: 700;
text-decoration: none;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.mpcareerwho-button-8k4p:hover {
background: #dc6517;
color: #ffffff;
transform: translateY(-1px);
}
.mpcareerwho-button-8k4p i {
font-size: 9px;
}
/* =========================================================
CARD IMAGE
========================================================= */
.mpcareerwho-card-image-8k4p {
min-width: 0;
min-height: 100%;
overflow: hidden;
background: #e6ecef;
}
.mpcareerwho-card-image-8k4p img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1200px) {
.mpcareerwho-section-8k4p {
padding-top: 70px;
padding-bottom: 80px;
}
.mpcareerwho-top-8k4p {
min-height: 330px;
}
.mpcareerwho-title-row-8k4p h2 {
font-size: 26px;
}
.mpcareerwho-top-message-8k4p p {
font-size: 14px;
}
.mpcareerwho-card-content-8k4p {
padding: 22px 20px;
}
.mpcareerwho-card-content-8k4p p {
font-size: 13px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.mpcareerwho-top-8k4p {
grid-template-columns:
45% 55%;
min-height: 350px;
}
.mpcareerwho-top-message-8k4p {
display: none;
}
.mpcareerwho-cards-8k4p {
grid-template-columns: 1fr;
}
.mpcareerwho-card-8k4p {
grid-template-columns:
72% 28%;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 700px) {
.mpcareerwho-section-8k4p {
padding: 45px 18px 55px;
}
.mpcareerwho-top-8k4p {
grid-template-columns: 1fr;
min-height: auto;
}
.mpcareerwho-top-content-8k4p {
padding: 25px 22px;
}
.mpcareerwho-top-image-8k4p {
height: 280px;
min-height: 280px;
}
.mpcareerwho-top-message-8k4p {
display: flex;
padding: 20px 22px;
}
.mpcareerwho-cards-8k4p {
grid-template-columns: 1fr;
gap: 15px;
}
.mpcareerwho-card-8k4p {
grid-template-columns:
70% 30%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 550px) {
.mpcareerwho-section-8k4p {
padding: 40px 14px 50px;
}
.mpcareerwho-title-row-8k4p {
gap: 9px;
margin-bottom: 10px;
}
.mpcareerwho-title-line-8k4p {
height: 43px;
}
.mpcareerwho-small-title-8k4p {
font-size: 16px;
}
.mpcareerwho-title-row-8k4p h2 {
font-size: 22px;
}
.mpcareerwho-intro-8k4p {
font-size: 13px;
}
.mpcareerwho-quality-list-8k4p {
grid-template-columns: 1fr;
gap: 5px;
}
.mpcareerwho-quality-list-8k4p li {
font-size: 13px;
}
.mpcareerwho-top-image-8k4p {
height: 240px;
min-height: 240px;
}
.mpcareerwho-top-message-8k4p {
padding: 18px 20px;
}
.mpcareerwho-top-message-8k4p p {
font-size: 13px;
}
/* Bottom cards become vertical */
.mpcareerwho-card-8k4p {
display: flex;
flex-direction: column;
}
.mpcareerwho-card-content-8k4p {
padding: 20px;
}
.mpcareerwho-card-image-8k4p {
order: 2;
width: 100%;
height: 190px;
min-height: 190px;
}
.mpcareerwho-card-heading-8k4p {
gap: 10px;
}
.mpcareerwho-card-icon-8k4p {
flex-basis: 40px;
width: 40px;
height: 40px;
font-size: 17px;
}
.mpcareerwho-card-heading-8k4p span {
font-size: 13px;
}
.mpcareerwho-card-heading-8k4p h3 {
font-size: 17px;
line-height: 1.3;
}
.mpcareerwho-card-content-8k4p p {
font-size: 13px;
line-height: 1.55;
}
.mpcareerwho-highlight-8k4p {
font-size: 14px;
}
.mpcareerwho-button-8k4p {
min-height: 40px;
padding: 0 16px;
font-size: 12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.mpcareerwho-section-8k4p {
padding-left: 11px;
padding-right: 11px;
}
.mpcareerwho-top-content-8k4p {
padding: 22px 17px;
}
.mpcareerwho-title-row-8k4p h2 {
font-size: 20px;
}
.mpcareerwho-small-title-8k4p {
font-size: 15px;
}
.mpcareerwho-top-image-8k4p {
height: 205px;
min-height: 205px;
}
.mpcareerwho-card-content-8k4p {
padding: 18px;
}
.mpcareerwho-card-heading-8k4p h3 {
font-size: 16px;
}
.mpcareerwho-card-content-8k4p p {
font-size: 12px;
}
.mpcareerwho-card-image-8k4p {
height: 180px;
min-height: 180px;
}
}
/* =========================================================
MOPABOND - EMPLOYEE EXPERIENCE + APPLICATION
UNIQUE PREFIX: mpcareerexp-6t9q
MAX WIDTH: 1100px
========================================================= */
/* =========================================================
SECTION
========================================================= */
.mpcareerexp-section-6t9q {
width: 100%;
padding: 60px 20px 70px;
background: #f5f8fa;
box-sizing: border-box;
overflow: hidden;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.mpcareerexp-container-6t9q {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
TOP EMPLOYEE EXPERIENCE
========================================================= */
.mpcareerexp-top-6t9q {
display: grid;
grid-template-columns: 62% 38%;
min-height: 300px;
background: #062d52;
overflow: hidden;
}
/* =========================================================
TOP CONTENT
========================================================= */
.mpcareerexp-top-content-6t9q {
padding: 28px 30px;
box-sizing: border-box;
}
/* =========================================================
TOP HEADING
========================================================= */
.mpcareerexp-heading-6t9q {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.mpcareerexp-heading-line-6t9q {
flex: 0 0 3px;
width: 3px;
height: 45px;
background: #f47721;
border-radius: 2px;
}
.mpcareerexp-small-title-6t9q {
color: #ffffff;
font-size: 16px;
line-height: 1.25;
font-weight: 700;
}
.mpcareerexp-heading-6t9q h2 {
margin: 2px 0 0;
color: #ffffff;
font-size: 23px;
line-height: 1.15;
font-weight: 800;
text-transform: uppercase;
}
.mpcareerexp-heading-6t9q h2 strong {
color: #f47721;
font-weight: 800;
}
/* =========================================================
INTRO
========================================================= */
.mpcareerexp-top-intro-6t9q {
margin: 0 0 12px;
color:
rgba(255,255,255,0.78);
font-size: 13px;
line-height: 1.45;
}
/* =========================================================
FEATURES
========================================================= */
.mpcareerexp-features-6t9q {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
border-top: 1px solid
rgba(255,255,255,0.16);
border-bottom: 1px solid
rgba(255,255,255,0.16);
}
/* =========================================================
FEATURE ITEM
========================================================= */
.mpcareerexp-feature-6t9q {
position: relative;
min-width: 0;
padding: 18px 14px 17px;
}
.mpcareerexp-feature-6t9q:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 16px;
width: 1px;
height: calc(100% - 32px);
background:
rgba(255,255,255,0.16);
}
/* =========================================================
FEATURE ICON
========================================================= */
.mpcareerexp-feature-icon-6t9q {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
margin-bottom: 10px;
color: #f47721;
border: 1px solid
rgba(244,119,33,0.5);
border-radius: 50%;
background:
rgba(244,119,33,0.08);
font-size: 16px;
}
/* =========================================================
FEATURE TITLE
========================================================= */
.mpcareerexp-feature-6t9q h3 {
margin: 0 0 5px;
color: #ffffff;
font-size: 13px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================================
FEATURE TEXT
========================================================= */
.mpcareerexp-feature-6t9q p {
margin: 0;
color:
rgba(255,255,255,0.68);
font-size: 11px;
line-height: 1.45;
}
/* =========================================================
TOP IMAGE
========================================================= */
.mpcareerexp-top-image-6t9q {
min-width: 0;
min-height: 300px;
overflow: hidden;
background: #dce4e8;
}
.mpcareerexp-top-image-6t9q img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* =========================================================
APPLICATION SECTION
========================================================= */
.mpcareerexp-application-6t9q {
display: grid;
grid-template-columns: 34% 66%;
background: #ffffff;
border: 1px solid #dfe6ea;
border-top: none;
}
/* =========================================================
APPLICATION INFO
========================================================= */
.mpcareerexp-application-info-6t9q {
padding: 30px 28px;
box-sizing: border-box;
}
.mpcareerexp-application-heading-6t9q {
display: flex;
align-items: flex-start;
gap: 9px;
margin-bottom: 13px;
}
.mpcareerexp-application-heading-6t9q
.mpcareerexp-heading-line-6t9q {
height: 48px;
}
.mpcareerexp-application-heading-6t9q
.mpcareerexp-small-title-6t9q {
color: #092d51;
font-size: 17px;
}
.mpcareerexp-application-heading-6t9q h2 {
margin: 3px 0 0;
color: #f47721;
font-size: 19px;
line-height: 1.2;
font-weight: 800;
text-transform: uppercase;
}
.mpcareerexp-application-info-6t9q > p {
margin: 0 0 11px;
color: #697781;
font-size: 13px;
line-height: 1.55;
}
/* =========================================================
APPLICATION NOTE
========================================================= */
.mpcareerexp-application-note-6t9q {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 18px;
padding: 12px;
background: #fff5ed;
border-left: 3px solid #f47721;
}
.mpcareerexp-application-note-6t9q i {
margin-top: 2px;
color: #f47721;
font-size: 14px;
}
.mpcareerexp-application-note-6t9q span {
color: #596873;
font-size: 12px;
line-height: 1.45;
}
/* =========================================================
FORM WRAPPER
========================================================= */
.mpcareerexp-form-wrapper-6t9q {
padding: 27px 28px;
background: #ffffff;
box-sizing: border-box;
}
/* =========================================================
FORM
========================================================= */
.mpcareerexp-form-6t9q {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 13px 15px;
}
/* =========================================================
FIELD
========================================================= */
.mpcareerexp-field-6t9q {
min-width: 0;
}
.mpcareerexp-field-6t9q label {
display: block;
margin-bottom: 5px;
color: #092d51;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================================
INPUTS
========================================================= */
.mpcareerexp-field-6t9q input,
.mpcareerexp-field-6t9q select,
.mpcareerexp-field-6t9q textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #d8e0e5;
border-radius: 3px;
background: #fbfcfd;
color: #092d51;
font-family: inherit;
font-size: 13px;
line-height: 1.4;
outline: none;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.mpcareerexp-field-6t9q input,
.mpcareerexp-field-6t9q select {
height: 40px;
padding: 0 11px;
}
.mpcareerexp-field-6t9q textarea {
min-height: 82px;
padding: 10px 11px;
resize: vertical;
}
.mpcareerexp-field-6t9q input::placeholder,
.mpcareerexp-field-6t9q textarea::placeholder {
color: #a0abb2;
}
.mpcareerexp-field-6t9q input:focus,
.mpcareerexp-field-6t9q select:focus,
.mpcareerexp-field-6t9q textarea:focus {
border-color: #f47721;
background: #ffffff;
box-shadow:
0 0 0 2px rgba(244,119,33,0.08);
}
/* =========================================================
FILE FIELD
========================================================= */
.mpcareerexp-file-field-6t9q input[type="file"] {
height: auto;
min-height: 40px;
padding: 9px 10px;
cursor: pointer;
}
.mpcareerexp-file-field-6t9q small {
display: block;
margin-top: 4px;
color: #89959d;
font-size: 10px;
}
/* =========================================================
MESSAGE FULL WIDTH
========================================================= */
.mpcareerexp-message-field-6t9q {
grid-column: 1 / -1;
}
/* =========================================================
SUBMIT
========================================================= */
.mpcareerexp-submit-6t9q {
grid-column: 1 / -1;
width: 100%;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
border-radius: 3px;
background: #f47721;
color: #ffffff;
font-family: inherit;
font-size: 12px;
line-height: 1;
font-weight: 700;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mpcareerexp-submit-6t9q:hover {
background: #dc6517;
transform: translateY(-1px);
box-shadow:
0 5px 12px rgba(244,119,33,0.20);
}
.mpcareerexp-submit-6t9q i {
font-size: 10px;
}
/* =========================================================
FORM NOTE
========================================================= */
.mpcareerexp-form-note-6t9q {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #89959d;
font-size: 10px;
line-height: 1.4;
text-align: center;
}
.mpcareerexp-form-note-6t9q i {
color: #f47721;
font-size: 11px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1200px) {
.mpcareerexp-section-6t9q {
padding-top: 70px;
padding-bottom: 80px;
}
.mpcareerexp-top-6t9q {
min-height: 320px;
}
.mpcareerexp-top-image-6t9q {
min-height: 320px;
}
.mpcareerexp-feature-6t9q p {
font-size: 12px;
}
.mpcareerexp-application-info-6t9q {
padding: 32px;
}
.mpcareerexp-form-wrapper-6t9q {
padding: 30px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.mpcareerexp-top-6t9q {
grid-template-columns: 60% 40%;
}
.mpcareerexp-features-6t9q {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.mpcareerexp-feature-6t9q:nth-child(2)::after {
display: none;
}
.mpcareerexp-feature-6t9q:nth-child(1),
.mpcareerexp-feature-6t9q:nth-child(2) {
border-bottom: 1px solid
rgba(255,255,255,0.16);
}
.mpcareerexp-application-6t9q {
grid-template-columns: 1fr;
}
.mpcareerexp-application-info-6t9q {
padding: 25px 28px 10px;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 700px) {
.mpcareerexp-section-6t9q {
padding: 45px 18px 55px;
}
.mpcareerexp-top-6t9q {
grid-template-columns: 1fr;
}
.mpcareerexp-top-content-6t9q {
padding: 26px 23px;
}
.mpcareerexp-top-image-6t9q {
height: 280px;
min-height: 280px;
}
.mpcareerexp-application-info-6t9q {
padding: 25px 23px 10px;
}
.mpcareerexp-form-wrapper-6t9q {
padding: 20px 23px 25px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 550px) {
.mpcareerexp-section-6t9q {
padding: 40px 14px 50px;
}
.mpcareerexp-top-content-6t9q {
padding: 23px 18px;
}
.mpcareerexp-heading-6t9q {
gap: 9px;
}
.mpcareerexp-heading-line-6t9q {
height: 43px;
}
.mpcareerexp-small-title-6t9q {
font-size: 15px;
}
.mpcareerexp-heading-6t9q h2 {
font-size: 20px;
}
.mpcareerexp-top-intro-6t9q {
font-size: 13px;
}
.mpcareerexp-features-6t9q {
grid-template-columns: 1fr;
}
.mpcareerexp-feature-6t9q {
padding: 17px 5px;
border-bottom: 1px solid
rgba(255,255,255,0.16);
}
.mpcareerexp-feature-6t9q:last-child {
border-bottom: none;
}
.mpcareerexp-feature-6t9q::after {
display: none !important;
}
.mpcareerexp-feature-icon-6t9q {
width: 38px;
height: 38px;
margin-bottom: 8px;
}
.mpcareerexp-feature-6t9q h3 {
font-size: 15px;
}
.mpcareerexp-feature-6t9q p {
font-size: 13px;
line-height: 1.5;
}
.mpcareerexp-top-image-6t9q {
height: 230px;
min-height: 230px;
}
/* APPLICATION */
.mpcareerexp-application-heading-6t9q
.mpcareerexp-heading-line-6t9q {
height: 43px;
}
.mpcareerexp-application-heading-6t9q
.mpcareerexp-small-title-6t9q {
font-size: 15px;
}
.mpcareerexp-application-heading-6t9q h2 {
font-size: 18px;
}
.mpcareerexp-application-info-6t9q {
padding: 24px 18px 8px;
}
.mpcareerexp-application-info-6t9q > p {
font-size: 13px;
}
.mpcareerexp-form-wrapper-6t9q {
padding: 20px 18px 24px;
}
.mpcareerexp-form-6t9q {
grid-template-columns: 1fr;
gap: 13px;
}
.mpcareerexp-message-field-6t9q,
.mpcareerexp-submit-6t9q,
.mpcareerexp-form-note-6t9q {
grid-column: auto;
}
.mpcareerexp-field-6t9q label {
font-size: 13px;
}
.mpcareerexp-field-6t9q input,
.mpcareerexp-field-6t9q select {
height: 43px;
font-size: 14px;
}
.mpcareerexp-field-6t9q textarea {
font-size: 14px;
min-height: 100px;
}
.mpcareerexp-submit-6t9q {
height: 44px;
font-size: 12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.mpcareerexp-section-6t9q {
padding-left: 11px;
padding-right: 11px;
}
.mpcareerexp-top-content-6t9q {
padding: 21px 16px;
}
.mpcareerexp-heading-6t9q h2 {
font-size: 19px;
}
.mpcareerexp-small-title-6t9q {
font-size: 14px;
}
.mpcareerexp-top-image-6t9q {
height: 205px;
min-height: 205px;
}
.mpcareerexp-application-info-6t9q {
padding-left: 16px;
padding-right: 16px;
}
.mpcareerexp-form-wrapper-6t9q {
padding-left: 16px;
padding-right: 16px;
}
}