REAL PEOPLE. REAL VISITS. REAL RESULTS.
REAL INSIGHTS.
BETTER DECISIONS.
STRONGER BUSINESS.
Professional mystery shopping solutions that reveal the truth behind
customer experiences, measure service performance, and turn real-world
insights into smarter business decisions.
✓ Confidential
✓ Professional
✓ Actionable Insights
2. Ab Elementor → Advanced → Custom CSS mein ye paste karo
/* ================================
MYSTERY PRO — HERO LEFT CONTENT
================================ */
.mpro-hero-content {
max-width: 620px;
padding: 20px 0;
}
/* Small Eyebrow */
.mpro-eyebrow {
display: inline-block;
margin-bottom: 18px;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #0EA5E9;
}
/* Main Heading */
.mpro-hero-content h1 {
margin: 0 0 22px;
font-family: "Poppins", sans-serif;
font-size: 54px;
line-height: 1.08;
font-weight: 800;
letter-spacing: -1.5px;
color: #0F172A;
}
.mpro-hero-content h1 span {
color: #0EA5E9;
}
/* Description */
.mpro-hero-description {
max-width: 560px;
margin: 0 0 30px;
font-family: "Poppins", sans-serif;
font-size: 17px;
line-height: 1.65;
font-weight: 400;
color: #475569;
}
/* Buttons */
.mpro-hero-buttons {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.mpro-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 50px;
padding: 0 23px;
border-radius: 7px;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
/* Primary Button */
.mpro-btn-primary {
background: #0EA5E9;
color: #FFFFFF;
box-shadow: 0 8px 22px rgba(14, 165, 233, 0.22);
}
.mpro-btn-primary:hover {
background: #0284C7;
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(14, 165, 233, 0.30);
}
/* Secondary Button */
.mpro-btn-secondary {
background: #FFFFFF;
color: #0F172A;
border: 1px solid #0EA5E9;
}
.mpro-btn-secondary:hover {
background: #F0F9FF;
color: #0F172A;
transform: translateY(-2px);
}
/* Arrow */
.mpro-btn span {
font-size: 18px;
line-height: 1;
}
/* Trust Line */
.mpro-trust-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px;
margin-top: 25px;
font-family: "Poppins", sans-serif;
font-size: 12px;
font-weight: 500;
color: #64748B;
}
.mpro-trust-line span {
white-space: nowrap;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-48d1b28 */.mp-hero-visual {
position: relative;
width: 100%;
max-width: 570px;
min-height: 520px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================
MAIN IMAGE
========================================= */
.mp-hero-image-card {
position: relative;
width: 78%;
height: 430px;
overflow: hidden;
border-radius: 22px;
background: #dff4fc;
border: 7px solid rgba(255,255,255,0.9);
box-shadow:
0 30px 70px
rgba(11,39,66,0.16);
transform:
rotate(1.5deg);
z-index: 2;
}
.mp-hero-image-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.mp-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(11,39,66,0.02),
rgba(11,39,66,0.35)
);
pointer-events: none;
}
/* =========================================
IMAGE LABEL
========================================= */
.mp-image-label {
position: absolute;
left: 20px;
bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
padding: 9px 13px;
border-radius: 6px;
background:
rgba(6,22,44,0.86);
color: #ffffff;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.2px;
backdrop-filter: blur(10px);
}
.mp-live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #38bdf8;
box-shadow:
0 0 0 4px
rgba(56,189,248,0.15);
}
/* =========================================
SCORE CARD
========================================= */
.mp-score-card {
position: absolute;
top: 48px;
right: 0;
width: 190px;
padding: 20px;
border-radius: 14px;
background:
rgba(255,255,255,0.94);
border: 1px solid
rgba(255,255,255,0.8);
box-shadow:
0 18px 45px
rgba(11,39,66,0.14);
backdrop-filter: blur(12px);
z-index: 5;
}
.mp-score-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.mp-score-top span:first-child {
color: #6f8192;
font-size: 10px;
font-weight: 700;
}
.mp-score-icon {
color: #d4a72c;
font-size: 15px;
}
.mp-score-number {
color: #0b2742;
font-size: 35px;
line-height: 1;
font-weight: 800;
}
.mp-score-number span {
color: #1687c7;
font-size: 17px;
}
/* PROGRESS */
.mp-score-progress {
width: 100%;
height: 5px;
margin: 13px 0 9px;
overflow: hidden;
border-radius: 20px;
background: #e7f0f5;
}
.mp-score-progress div {
width: 92%;
height: 100%;
border-radius: 20px;
background:
linear-gradient(
90deg,
#1687c7,
#38bdf8
);
}
.mp-score-card small {
color: #8b9aaa;
font-size: 9px;
}
/* =========================================
INSIGHT CARD
========================================= */
.mp-insight-card {
position: absolute;
left: 0;
bottom: 55px;
display: flex;
align-items: center;
gap: 12px;
width: 205px;
padding: 14px 16px;
border-radius: 12px;
background: #0b2742;
box-shadow:
0 18px 40px
rgba(11,39,66,0.22);
z-index: 6;
}
.mp-insight-icon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 8px;
background:
rgba(56,189,248,0.13);
color: #38bdf8;
font-size: 19px;
font-weight: 800;
}
.mp-insight-card strong {
display: block;
margin-bottom: 4px;
color: #ffffff;
font-size: 10px;
}
.mp-insight-card span {
display: block;
color: #8fa5ba;
font-size: 8px;
line-height: 1.4;
}
/* =========================================
CUSTOMER CARD
========================================= */
.mp-customer-card {
position: absolute;
right: 35px;
bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: #ffffff;
border-radius: 10px;
box-shadow:
0 14px 35px
rgba(11,39,66,0.13);
z-index: 7;
}
.mp-customer-avatar {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff6d9;
color: #d4a72c;
font-size: 12px;
}
.mp-customer-card strong {
display: block;
margin-bottom: 2px;
color: #0b2742;
font-size: 9px;
}
.mp-customer-card span {
color: #8a99a7;
font-size: 8px;
}
/* =========================================
DECORATIVE CIRCLES
========================================= */
.mp-hero-circle {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.mp-circle-one {
width: 240px;
height: 240px;
right: -45px;
bottom: 10px;
background:
rgba(56,189,248,0.10);
z-index: 0;
}
.mp-circle-two {
width: 90px;
height: 90px;
left: 25px;
top: 25px;
border: 2px solid
rgba(212,167,44,0.25);
z-index: 0;
}
/* =========================================
FLOATING ANIMATION
========================================= */
.mp-score-card {
animation:
mpFloat 4s ease-in-out infinite;
}
.mp-insight-card {
animation:
mpFloat 5s ease-in-out infinite;
animation-delay: 0.7s;
}
@keyframes mpFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-7px);
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 950px) {
.mp-hero-visual {
max-width: 520px;
min-height: 480px;
}
.mp-hero-image-card {
height: 400px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.mp-hero-visual {
min-height: 410px;
max-width: 100%;
}
.mp-hero-image-card {
width: 82%;
height: 330px;
}
.mp-score-card {
top: 25px;
right: 0;
width: 150px;
padding: 15px;
}
.mp-score-number {
font-size: 28px;
}
.mp-insight-card {
left: 0;
bottom: 35px;
width: 175px;
padding: 11px;
}
.mp-customer-card {
right: 5px;
bottom: 0;
}
.mp-circle-one {
width: 180px;
height: 180px;
}
}
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9429f34 *//* =========================================
MYSTERYPRO
WHY LEADING BRANDS CHOOSE US
========================================= */
.mp-leading-brands {
position: relative;
width: 100%;
padding: 100px 0;
background:
radial-gradient(
circle at 85% 20%,
rgba(34, 151, 243, 0.12),
transparent 32%
),
linear-gradient(
135deg,
#06142d 0%,
#081b38 55%,
#061329 100%
);
overflow: hidden;
}
/* Decorative glow */
.mp-leading-brands::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -180px;
top: -180px;
border-radius: 50%;
background: rgba(40, 155, 255, 0.08);
filter: blur(20px);
pointer-events: none;
}
/* Main container */
.mp-leading-container {
width: min(1180px, 90%);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
/* =========================================
LEFT CONTENT
========================================= */
.mp-leading-content {
position: relative;
z-index: 2;
}
/* Small heading */
.mp-section-label {
display: inline-block;
margin-bottom: 18px;
color: #d4a62a;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
}
/* Main heading */
.mp-leading-content h2 {
margin: 0 0 22px;
color: #ffffff;
font-size: clamp(38px, 4vw, 58px);
line-height: 1.08;
font-weight: 700;
letter-spacing: -1.5px;
}
/* Gold heading line */
.mp-leading-content h2 span {
display: block;
color: #ffffff;
}
/* Description */
.mp-leading-description {
max-width: 560px;
margin: 0 0 35px;
color: #c9d5e6;
font-size: 16px;
line-height: 1.75;
font-weight: 400;
}
/* =========================================
TRUST LIST
========================================= */
.mp-trust-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 30px;
margin-bottom: 35px;
}
.mp-trust-item {
display: flex;
gap: 13px;
align-items: flex-start;
}
.mp-trust-icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d4a62a;
border-radius: 50%;
color: #d4a62a;
font-size: 14px;
font-weight: 700;
margin-top: 2px;
}
.mp-trust-item h4 {
margin: 0 0 5px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
}
.mp-trust-item p {
margin: 0;
color: #9eafc5;
font-size: 13px;
line-height: 1.55;
}
/* =========================================
BUTTON
========================================= */
.mp-leading-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 24px;
background: #2196f3;
color: #ffffff !important;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
border-radius: 6px;
transition:
transform 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.mp-leading-btn span {
font-size: 18px;
transition: transform 0.3s ease;
}
.mp-leading-btn:hover {
background: #d4a62a;
transform: translateY(-3px);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.25);
}
.mp-leading-btn:hover span {
transform: translateX(5px);
}
/* =========================================
RIGHT VISUAL
========================================= */
.mp-leading-visual {
position: relative;
min-height: 520px;
display: flex;
align-items: center;
justify-content: center;
}
/* Image */
.mp-image-frame {
position: relative;
width: 100%;
max-width: 560px;
height: 500px;
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(255,255,255,0.12);
box-shadow:
0 25px 70px rgba(0,0,0,0.4);
}
.mp-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.mp-image-frame:hover img {
transform: scale(1.04);
}
/* Image blue overlay */
.mp-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(6,20,45,0.15),
rgba(33,150,243,0.08)
);
pointer-events: none;
}
/* =========================================
FLOATING STAT CARDS
========================================= */
.mp-stat {
position: absolute;
z-index: 5;
padding: 18px 22px;
min-width: 175px;
background: rgba(255,255,255,0.95);
border: 1px solid rgba(255,255,255,0.7);
border-radius: 12px;
box-shadow:
0 15px 40px rgba(0,0,0,0.25);
backdrop-filter: blur(12px);
}
.mp-stat strong {
display: block;
color: #0b2345;
font-size: 28px;
line-height: 1;
font-weight: 800;
margin-bottom: 6px;
}
.mp-stat span {
display: block;
color: #53657d;
font-size: 12px;
font-weight: 600;
}
/* Top statistic */
.mp-stat-top {
top: 35px;
right: -25px;
}
/* Bottom statistic */
.mp-stat-bottom {
bottom: 30px;
left: -30px;
}
/* Gold accent line */
.mp-stat::before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 3px;
height: 42px;
background: #d4a62a;
border-radius: 0 3px 3px 0;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.mp-leading-brands {
padding: 75px 0;
}
.mp-leading-container {
grid-template-columns: 1fr;
gap: 55px;
}
.mp-leading-content {
max-width: 700px;
}
.mp-leading-visual {
min-height: 480px;
}
.mp-image-frame {
max-width: 650px;
}
.mp-stat-top {
right: 0;
}
.mp-stat-bottom {
left: 0;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.mp-leading-brands {
padding: 60px 0;
}
.mp-leading-container {
width: 88%;
gap: 40px;
}
.mp-section-label {
font-size: 11px;
letter-spacing: 2px;
}
.mp-leading-content h2 {
font-size: 36px;
letter-spacing: -0.8px;
}
.mp-leading-description {
font-size: 15px;
}
.mp-trust-list {
grid-template-columns: 1fr;
gap: 20px;
}
.mp-leading-visual {
min-height: 390px;
}
.mp-image-frame {
height: 390px;
border-radius: 14px;
}
.mp-stat {
padding: 14px 17px;
min-width: 145px;
}
.mp-stat strong {
font-size: 23px;
}
.mp-stat span {
font-size: 11px;
}
.mp-stat-top {
top: 15px;
right: -5px;
}
.mp-stat-bottom {
bottom: 15px;
left: -5px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3d8b6f6 *//* ================================
MYSTERYPRO FAQ SECTION
================================ */
.mp-faq-section {
width: 100%;
padding: 100px 30px;
background:
radial-gradient(circle at 8% 20%, rgba(135,206,235,0.16), transparent 28%),
radial-gradient(circle at 92% 85%, rgba(11,48,82,0.06), transparent 30%),
#ffffff;
font-family: "Inter", Arial, sans-serif;
box-sizing: border-box;
}
.mp-faq-container {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 75px;
align-items: center;
}
/* ================================
LEFT SIDE
================================ */
.mp-faq-intro {
position: relative;
}
.mp-faq-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.2px;
color: #1687c7;
margin-bottom: 18px;
}
.mp-faq-label::before {
content: "";
width: 28px;
height: 2px;
background: #d4a72c;
display: inline-block;
}
.mp-faq-intro h2 {
margin: 0 0 22px;
color: #0b2742;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1.5px;
}
.mp-faq-intro h2 span {
color: #1687c7;
}
.mp-faq-intro p {
max-width: 470px;
margin: 0 0 30px;
color: #617080;
font-size: 16px;
line-height: 1.8;
font-weight: 400;
}
/* ================================
HELP BOX
================================ */
.mp-faq-help {
display: flex;
align-items: center;
gap: 15px;
width: fit-content;
padding: 15px 20px;
margin-bottom: 28px;
background: #f5fbff;
border: 1px solid #d9edf8;
border-radius: 12px;
}
.mp-faq-help-icon {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #0b2742;
color: #d4a72c;
font-size: 20px;
font-weight: 700;
}
.mp-faq-help strong {
display: block;
color: #0b2742;
font-size: 14px;
margin-bottom: 3px;
}
.mp-faq-help span {
display: block;
color: #718092;
font-size: 12px;
}
/* ================================
BUTTON
================================ */
.mp-faq-button {
display: inline-flex;
align-items: center;
gap: 15px;
padding: 14px 22px;
background: #1687c7;
color: #ffffff !important;
border-radius: 7px;
text-decoration: none !important;
font-size: 14px;
font-weight: 700;
box-shadow: 0 10px 25px rgba(22,135,199,0.20);
transition: all 0.3s ease;
}
.mp-faq-button span {
font-size: 19px;
transition: transform 0.3s ease;
}
.mp-faq-button:hover {
background: #0b2742;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(11,39,66,0.18);
}
.mp-faq-button:hover span {
transform: translateX(5px);
}
/* ================================
FAQ LIST
================================ */
.mp-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.mp-faq-item {
background: #ffffff;
border: 1px solid #e1eaf0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(11,39,66,0.045);
transition: all 0.3s ease;
}
.mp-faq-item:hover {
border-color: #9bd5ef;
box-shadow: 0 10px 28px rgba(11,39,66,0.08);
}
/* ================================
QUESTION
================================ */
.mp-faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 21px 24px;
color: #0b2742;
font-size: 15px;
font-weight: 700;
transition: all 0.3s ease;
}
.mp-faq-item summary::-webkit-details-marker {
display: none;
}
.mp-faq-item summary b {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #edf8fd;
color: #1687c7;
font-size: 20px;
font-weight: 400;
transition: all 0.3s ease;
}
/* ================================
ACTIVE FAQ
================================ */
.mp-faq-item[open] {
border-color: #9bd5ef;
box-shadow: 0 12px 30px rgba(22,135,199,0.10);
}
.mp-faq-item[open] summary {
color: #1687c7;
background: #fbfdff;
}
.mp-faq-item[open] summary b {
transform: rotate(45deg);
background: #1687c7;
color: #ffffff;
}
.mp-faq-answer {
padding: 0 24px 22px;
color: #687787;
font-size: 14px;
line-height: 1.75;
font-weight: 400;
}
/* ================================
RESPONSIVE
================================ */
@media (max-width: 900px) {
.mp-faq-section {
padding: 75px 22px;
}
.mp-faq-container {
grid-template-columns: 1fr;
gap: 45px;
}
.mp-faq-intro p {
max-width: 650px;
}
}
@media (max-width: 600px) {
.mp-faq-section {
padding: 60px 18px;
}
.mp-faq-intro h2 {
font-size: 34px;
}
.mp-faq-item summary {
padding: 18px;
font-size: 14px;
}
.mp-faq-answer {
padding: 0 18px 18px;
}
.mp-faq-help {
width: 100%;
box-sizing: border-box;
}
}
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-240c8a9 *//* =========================================
MYSTERYPRO — WHY YOU CHOOSE US
========================================= */
.mp-why-section {
width: 100%;
padding: 105px 30px;
box-sizing: border-box;
background:
radial-gradient(
circle at 5% 85%,
rgba(56, 189, 248, 0.09),
transparent 28%
),
#ffffff;
font-family: "Inter", Arial, sans-serif;
overflow: hidden;
}
/* MAIN CONTAINER */
.mp-why-container {
width: min(1180px, 90%);
margin: 0 auto;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 80px;
align-items: center;
}
/* =========================================
LEFT VISUAL
========================================= */
.mp-why-visual {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
}
.mp-why-image {
position: relative;
width: 100%;
max-width: 510px;
height: 540px;
overflow: hidden;
border-radius: 20px;
box-shadow:
0 25px 60px rgba(11, 39, 66, 0.15);
z-index: 2;
}
.mp-why-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(15, 39, 71, 0.08),
rgba(14, 165, 233, 0.08)
);
pointer-events: none;
}
.mp-why-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.7s ease;
}
.mp-why-image:hover img {
transform: scale(1.04);
}
/* GOLD DECORATIVE ELEMENT */
.mp-why-accent {
position: absolute;
width: 130px;
height: 130px;
left: -25px;
bottom: 15px;
border: 3px solid #d4a72c;
border-radius: 50%;
opacity: 0.8;
z-index: 1;
}
/* =========================================
EXPERIENCE BADGE
========================================= */
.mp-why-badge {
position: absolute;
right: -20px;
bottom: 45px;
z-index: 5;
min-width: 190px;
padding: 20px 24px;
display: flex;
align-items: center;
gap: 14px;
background: #0b2742;
border-radius: 12px;
box-shadow:
0 18px 40px rgba(11, 39, 66, 0.25);
}
.mp-why-badge-number {
color: #d4a72c;
font-size: 32px;
line-height: 1;
font-weight: 800;
}
.mp-why-badge-text {
color: #ffffff;
font-size: 12px;
line-height: 1.45;
font-weight: 600;
}
/* =========================================
RIGHT CONTENT
========================================= */
.mp-why-content {
position: relative;
z-index: 3;
}
/* LABEL */
.mp-why-label {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 17px;
color: #1687c7;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.2px;
text-transform: uppercase;
}
.mp-why-label::before {
content: "";
width: 28px;
height: 2px;
background: #d4a72c;
}
/* HEADING */
.mp-why-content h2 {
margin: 0 0 22px;
max-width: 600px;
color: #0b2742;
font-family: "Poppins", sans-serif;
font-size: clamp(38px, 4vw, 54px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1.5px;
}
.mp-why-content h2 span {
display: block;
color: #1687c7;
}
/* INTRO */
.mp-why-intro {
max-width: 600px;
margin: 0 0 34px;
color: #657587;
font-size: 15.5px;
line-height: 1.75;
font-weight: 400;
}
/* =========================================
BENEFITS
========================================= */
.mp-why-benefits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px 35px;
margin-bottom: 35px;
}
.mp-why-benefit {
display: flex;
align-items: flex-start;
gap: 13px;
}
.mp-why-icon {
flex: 0 0 39px;
width: 39px;
height: 39px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #f0f9ff;
border: 1px solid #ccecf9;
color: #1687c7;
font-size: 11px;
font-weight: 800;
}
.mp-why-benefit h3 {
margin: 0 0 5px;
color: #0b2742;
font-size: 14px;
font-weight: 700;
}
.mp-why-benefit p {
margin: 0;
color: #718092;
font-size: 12.5px;
line-height: 1.55;
}
/* =========================================
STATS
========================================= */
.mp-why-stats {
display: flex;
align-items: center;
gap: 25px;
padding-top: 25px;
border-top: 1px solid #e3ebf1;
}
.mp-why-stat strong {
display: block;
margin-bottom: 5px;
color: #0b2742;
font-size: 24px;
line-height: 1;
font-weight: 800;
}
.mp-why-stat span {
color: #718092;
font-size: 11px;
font-weight: 600;
}
.mp-stat-divider {
width: 1px;
height: 35px;
background: #dfe7ed;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 950px) {
.mp-why-section {
padding: 80px 25px;
}
.mp-why-container {
grid-template-columns: 1fr;
gap: 60px;
}
.mp-why-visual {
min-height: 500px;
}
.mp-why-image {
max-width: 650px;
}
.mp-why-badge {
right: 20px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.mp-why-section {
padding: 60px 18px;
}
.mp-why-container {
width: 90%;
}
.mp-why-visual {
min-height: 390px;
}
.mp-why-image {
height: 390px;
border-radius: 14px;
}
.mp-why-badge {
right: -5px;
bottom: 20px;
min-width: 150px;
padding: 15px 17px;
}
.mp-why-badge-number {
font-size: 25px;
}
.mp-why-badge-text {
font-size: 10px;
}
.mp-why-accent {
width: 85px;
height: 85px;
left: -15px;
bottom: 5px;
}
.mp-why-content h2 {
font-size: 34px;
}
.mp-why-benefits {
grid-template-columns: 1fr;
gap: 20px;
}
.mp-why-stats {
gap: 12px;
justify-content: space-between;
}
.mp-why-stat strong {
font-size: 19px;
}
.mp-why-stat span {
font-size: 9px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f08d3c9 *//* =========================================
MYSTERYPRO — OUR PROCESS
========================================= */
.mp-process-section {
width: 100%;
padding: 105px 30px;
box-sizing: border-box;
background:
radial-gradient(
circle at 15% 15%,
rgba(14, 165, 233, 0.10),
transparent 30%
),
radial-gradient(
circle at 90% 85%,
rgba(212, 167, 44, 0.06),
transparent 25%
),
linear-gradient(
135deg,
#061329 0%,
#081d39 50%,
#06152c 100%
);
font-family: "Inter", Arial, sans-serif;
overflow: hidden;
}
/* =========================================
CONTAINER
========================================= */
.mp-process-container {
width: min(1180px, 90%);
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.mp-process-header {
max-width: 720px;
margin: 0 auto 75px;
text-align: center;
}
.mp-process-label {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: #d4a72c;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.mp-process-label::before,
.mp-process-label::after {
content: "";
width: 24px;
height: 1px;
background: #d4a72c;
}
.mp-process-header h2 {
margin: 0 0 20px;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: clamp(38px, 4vw, 56px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1.5px;
}
.mp-process-header h2 span {
color: #38bdf8;
}
.mp-process-header p {
max-width: 620px;
margin: 0 auto;
color: #9fb2c8;
font-size: 15px;
line-height: 1.75;
font-weight: 400;
}
/* =========================================
TIMELINE
========================================= */
.mp-process-timeline {
position: relative;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 25px;
}
/* Horizontal line */
.mp-process-timeline::before {
content: "";
position: absolute;
top: 31px;
left: 7%;
right: 7%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(56, 189, 248, 0.45),
rgba(212, 167, 44, 0.45),
transparent
);
z-index: 0;
}
/* =========================================
PROCESS STEP
========================================= */
.mp-process-step {
position: relative;
z-index: 2;
text-align: center;
}
/* Number */
.mp-step-number {
position: relative;
width: 62px;
height: 62px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0a2343;
border: 1px solid rgba(56, 189, 248, 0.45);
color: #38bdf8;
font-size: 15px;
font-weight: 800;
box-shadow:
0 0 0 8px rgba(56, 189, 248, 0.035),
0 10px 25px rgba(0, 0, 0, 0.25);
transition: all 0.35s ease;
}
/* Gold number accent */
.mp-process-step:nth-child(2) .mp-step-number,
.mp-process-step:nth-child(4) .mp-step-number {
color: #d4a72c;
border-color: rgba(212, 167, 44, 0.5);
box-shadow:
0 0 0 8px rgba(212, 167, 44, 0.035),
0 10px 25px rgba(0, 0, 0, 0.25);
}
/* =========================================
CONTENT
========================================= */
.mp-step-content {
padding: 30px 20px 25px;
min-height: 245px;
background:
linear-gradient(
145deg,
rgba(255,255,255,0.055),
rgba(255,255,255,0.018)
);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 16px;
transition:
transform 0.35s ease,
border-color 0.35s ease,
background 0.35s ease;
}
.mp-process-step:hover .mp-step-content {
transform: translateY(-7px);
border-color: rgba(56, 189, 248, 0.30);
background:
linear-gradient(
145deg,
rgba(56,189,248,0.08),
rgba(255,255,255,0.025)
);
}
.mp-process-step:hover .mp-step-number {
transform: translateY(-4px) scale(1.04);
background: #38bdf8;
color: #061329;
border-color: #38bdf8;
}
/* =========================================
ICON
========================================= */
.mp-step-icon {
width: 48px;
height: 48px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(56, 189, 248, 0.09);
border: 1px solid rgba(56, 189, 248, 0.16);
font-size: 20px;
}
/* =========================================
TITLE
========================================= */
.mp-step-content h3 {
margin: 0 0 12px;
color: #ffffff;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
}
/* =========================================
DESCRIPTION
========================================= */
.mp-step-content p {
margin: 0;
color: #91a5bc;
font-size: 12.5px;
line-height: 1.7;
font-weight: 400;
}
/* =========================================
BOTTOM STATEMENT
========================================= */
.mp-process-bottom {
margin-top: 65px;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
}
.mp-process-bottom-line {
flex: 1;
max-width: 180px;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(56,189,248,0.35)
);
}
.mp-process-bottom-line:last-child {
background:
linear-gradient(
90deg,
rgba(56,189,248,0.35),
transparent
);
}
.mp-process-bottom p {
margin: 0;
white-space: nowrap;
color: #8fa4bb;
font-size: 13px;
letter-spacing: 0.5px;
}
.mp-process-bottom strong {
color: #ffffff;
font-weight: 700;
}
.mp-process-bottom strong:nth-child(2) {
color: #38bdf8;
}
.mp-process-bottom strong:nth-child(3) {
color: #d4a72c;
}
.mp-process-bottom span {
color: #8fa4bb;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 950px) {
.mp-process-section {
padding: 80px 25px;
}
.mp-process-timeline {
grid-template-columns: 1fr 1fr;
gap: 35px 20px;
}
.mp-process-timeline::before {
display: none;
}
.mp-process-header {
margin-bottom: 55px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.mp-process-section {
padding: 65px 18px;
}
.mp-process-container {
width: 90%;
}
.mp-process-header {
margin-bottom: 45px;
}
.mp-process-header h2 {
font-size: 34px;
}
.mp-process-header p {
font-size: 14px;
}
.mp-process-timeline {
grid-template-columns: 1fr;
gap: 25px;
}
.mp-step-content {
min-height: auto;
padding: 27px 22px;
}
.mp-process-bottom {
margin-top: 45px;
}
.mp-process-bottom-line {
display: none;
}
.mp-process-bottom p {
white-space: normal;
text-align: center;
line-height: 2;
}
}
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e2a8db3 *//* =========================================
MYSTERYPRO CONTACT + CTA
========================================= */
.mp-contact-section {
width: 100%;
padding: 100px 30px;
box-sizing: border-box;
background:
radial-gradient(
circle at 5% 90%,
rgba(56, 189, 248, 0.10),
transparent 28%
),
#f8fbfd;
font-family: "Inter", Arial, sans-serif;
overflow: hidden;
}
/* =========================================
CONTAINER
========================================= */
.mp-contact-container {
width: min(1180px, 90%);
margin: 0 auto;
}
/* =========================================
TOP CTA
========================================= */
.mp-contact-cta {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 45px;
padding: 55px 60px;
margin-bottom: 75px;
overflow: hidden;
border-radius: 20px;
background:
radial-gradient(
circle at 85% 15%,
rgba(255,255,255,0.18),
transparent 25%
),
linear-gradient(
120deg,
#0b2742,
#116fa5 60%,
#1687c7
);
box-shadow:
0 25px 60px rgba(11, 39, 66, 0.18);
}
/* Decorative circle */
.mp-contact-cta::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -100px;
bottom: -150px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 50%;
}
/* CTA content */
.mp-cta-content {
position: relative;
z-index: 2;
max-width: 720px;
}
.mp-cta-label {
display: inline-block;
margin-bottom: 15px;
color: #d4a72c;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.mp-cta-content h2 {
margin: 0 0 16px;
color: #ffffff;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1;
font-weight: 800;
letter-spacing: -1px;
}
.mp-cta-content h2 span {
display: block;
color: #bceaff;
}
.mp-cta-content p {
max-width: 650px;
margin: 0;
color: rgba(255,255,255,0.78);
font-size: 14px;
line-height: 1.7;
font-weight: 400;
}
/* CTA BUTTON */
.mp-cta-button {
position: relative;
z-index: 2;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 25px;
background: #ffffff;
color: #0b2742 !important;
border-radius: 7px;
text-decoration: none !important;
font-size: 13px;
font-weight: 800;
box-shadow:
0 10px 25px rgba(0,0,0,0.16);
transition: all 0.3s ease;
}
.mp-cta-button span {
font-size: 19px;
transition: transform 0.3s ease;
}
.mp-cta-button:hover {
background: #d4a72c;
color: #ffffff !important;
transform: translateY(-3px);
}
.mp-cta-button:hover span {
transform: translateX(5px);
}
/* =========================================
CONTACT GRID
========================================= */
.mp-contact-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 75px;
align-items: start;
}
/* =========================================
CONTACT INFO
========================================= */
.mp-contact-info {
padding-top: 15px;
}
.mp-contact-label {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 17px;
color: #1687c7;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.mp-contact-label::before {
content: "";
width: 28px;
height: 2px;
background: #d4a72c;
}
.mp-contact-info h3 {
margin: 0 0 20px;
color: #0b2742;
font-size: clamp(35px, 4vw, 50px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1px;
}
.mp-contact-info h3 span {
display: block;
color: #1687c7;
}
.mp-contact-info > p {
max-width: 500px;
margin: 0 0 35px;
color: #687787;
font-size: 15px;
line-height: 1.8;
}
/* =========================================
CONTACT DETAILS
========================================= */
.mp-contact-details {
display: flex;
flex-direction: column;
gap: 18px;
}
.mp-contact-detail {
display: flex;
align-items: center;
gap: 15px;
}
.mp-contact-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #edf8fd;
border: 1px solid #d3edf9;
color: #1687c7;
font-size: 18px;
}
.mp-contact-detail span {
display: block;
margin-bottom: 3px;
color: #8a98a7;
font-size: 11px;
font-weight: 600;
}
.mp-contact-detail strong {
color: #0b2742;
font-size: 13px;
font-weight: 700;
}
/* =========================================
FORM CARD
========================================= */
.mp-contact-form {
padding: 38px;
background: #ffffff;
border: 1px solid #e2ebf1;
border-radius: 18px;
box-shadow:
0 18px 50px rgba(11,39,66,0.08);
}
.mp-form-header {
margin-bottom: 27px;
}
.mp-form-header span {
display: block;
margin-bottom: 7px;
color: #1687c7;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.8px;
}
.mp-form-header h4 {
margin: 0;
color: #0b2742;
font-size: 24px;
font-weight: 800;
}
/* =========================================
FORM ROW
========================================= */
.mp-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 17px;
}
.mp-form-field {
margin-bottom: 18px;
}
.mp-form-field label {
display: block;
margin-bottom: 7px;
color: #30455c;
font-size: 11px;
font-weight: 700;
}
.mp-form-field input,
.mp-form-field select,
.mp-form-field textarea {
width: 100%;
box-sizing: border-box;
padding: 13px 14px;
border: 1px solid #dce6ed;
border-radius: 7px;
outline: none;
background: #fbfdff;
color: #0b2742;
font-family: inherit;
font-size: 13px;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
.mp-form-field textarea {
resize: vertical;
min-height: 115px;
}
.mp-form-field input::placeholder,
.mp-form-field textarea::placeholder {
color: #a0acb8;
}
.mp-form-field input:focus,
.mp-form-field select:focus,
.mp-form-field textarea:focus {
border-color: #55b9e5;
background: #ffffff;
box-shadow:
0 0 0 3px rgba(22,135,199,0.08);
}
/* =========================================
FORM BUTTON
========================================= */
.mp-form-button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 20px;
border: none;
border-radius: 7px;
background: #1687c7;
color: #ffffff;
font-family: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: all 0.3s ease;
}
.mp-form-button span {
font-size: 18px;
transition: transform 0.3s ease;
}
.mp-form-button:hover {
background: #0b2742;
transform: translateY(-2px);
box-shadow:
0 10px 25px rgba(11,39,66,0.18);
}
.mp-form-button:hover span {
transform: translateX(5px);
}
/* FORM NOTE */
.mp-form-note {
margin: 15px 0 0;
text-align: center;
color: #98a5b2;
font-size: 10px;
line-height: 1.5;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 950px) {
.mp-contact-section {
padding: 80px 25px;
}
.mp-contact-cta {
flex-direction: column;
align-items: flex-start;
padding: 45px;
}
.mp-contact-grid {
grid-template-columns: 1fr;
gap: 50px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.mp-contact-section {
padding: 60px 18px;
}
.mp-contact-container {
width: 90%;
}
.mp-contact-cta {
padding: 32px 25px;
border-radius: 15px;
gap: 25px;
}
.mp-cta-content h2 {
font-size: 32px;
}
.mp-cta-content p {
font-size: 13px;
}
.mp-contact-info h3 {
font-size: 34px;
}
.mp-form-row {
grid-template-columns: 1fr;
gap: 0;
}
.mp-contact-form {
padding: 25px 20px;
}
}
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f3f7c61 *//* =========================================
MYSTERYPRO — PREMIUM DARK FOOTER
========================================= */
.mp-footer {
width: 100%;
box-sizing: border-box;
padding: 85px 30px 25px;
background:
radial-gradient(
circle at 10% 10%,
rgba(56, 189, 248, 0.09),
transparent 27%
),
radial-gradient(
circle at 90% 75%,
rgba(212, 167, 44, 0.05),
transparent 25%
),
linear-gradient(
135deg,
#040e1e 0%,
#06162c 50%,
#030b18 100%
);
color: #ffffff;
font-family: "Inter", Arial, sans-serif;
overflow: hidden;
}
/* =========================================
CONTAINER
========================================= */
.mp-footer-container {
width: min(1180px, 90%);
margin: 0 auto;
}
/* =========================================
TOP FOOTER
========================================= */
.mp-footer-top {
display: grid;
grid-template-columns:
1.5fr
0.8fr
1fr
1fr;
gap: 65px;
padding-bottom: 65px;
}
/* =========================================
BRAND
========================================= */
.mp-footer-brand {
max-width: 330px;
}
.mp-footer-logo {
display: inline-block;
margin-bottom: 20px;
color: #ffffff !important;
font-size: 30px;
line-height: 1;
font-weight: 800;
letter-spacing: -1px;
text-decoration: none !important;
}
.mp-footer-logo span {
color: #38bdf8;
}
.mp-footer-brand p {
margin: 0 0 25px;
color: #91a5bc;
font-size: 13px;
line-height: 1.75;
}
/* =========================================
FOOTER CTA
========================================= */
.mp-footer-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border: 1px solid rgba(56,189,248,0.35);
border-radius: 6px;
color: #ffffff !important;
background: rgba(56,189,248,0.06);
font-size: 11px;
font-weight: 700;
text-decoration: none !important;
transition: all 0.3s ease;
}
.mp-footer-cta span {
color: #38bdf8;
font-size: 17px;
transition: transform 0.3s ease;
}
.mp-footer-cta:hover {
background: #38bdf8;
border-color: #38bdf8;
color: #04101f !important;
transform: translateY(-2px);
}
.mp-footer-cta:hover span {
color: #04101f;
transform: translateX(4px);
}
/* =========================================
FOOTER COLUMNS
========================================= */
.mp-footer-column h4 {
margin: 2px 0 22px;
color: #ffffff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
}
.mp-footer-column h4::after {
content: "";
display: block;
width: 25px;
height: 2px;
margin-top: 9px;
background: #d4a72c;
}
.mp-footer-column ul {
margin: 0;
padding: 0;
list-style: none;
}
.mp-footer-column li {
margin-bottom: 12px;
}
.mp-footer-column li a {
color: #8196ad !important;
font-size: 12px;
text-decoration: none !important;
transition:
color 0.25s ease,
padding-left 0.25s ease;
}
.mp-footer-column li a:hover {
color: #38bdf8 !important;
padding-left: 5px;
}
/* =========================================
CONTACT
========================================= */
.mp-footer-contact-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.mp-footer-contact-icon {
width: 35px;
height: 35px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(56,189,248,0.07);
border: 1px solid rgba(56,189,248,0.12);
color: #38bdf8;
font-size: 14px;
}
.mp-footer-contact-item small {
display: block;
margin-bottom: 3px;
color: #667c94;
font-size: 9px;
font-weight: 600;
}
.mp-footer-contact-item strong {
display: block;
color: #dce7f1;
font-size: 11px;
font-weight: 600;
}
/* =========================================
DIVIDER
========================================= */
.mp-footer-divider {
width: 100%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.12),
transparent
);
}
/* =========================================
MIDDLE
========================================= */
.mp-footer-middle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 27px 0;
}
.mp-footer-middle p {
margin: 0;
color: #71879f;
font-size: 13px;
letter-spacing: 0.5px;
}
.mp-footer-middle p span {
color: #b0c0d0;
font-weight: 600;
}
.mp-footer-middle p span:nth-child(2) {
color: #38bdf8;
}
.mp-footer-middle p span:nth-child(3) {
color: #d4a72c;
}
.mp-footer-middle p strong {
color: #ffffff;
font-weight: 800;
}
/* =========================================
SOCIAL ICONS
========================================= */
.mp-footer-socials {
display: flex;
align-items: center;
gap: 9px;
}
.mp-footer-socials a {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: #8ea4bb !important;
font-size: 11px;
font-weight: 700;
text-decoration: none !important;
transition: all 0.3s ease;
}
.mp-footer-socials a:hover {
background: #38bdf8;
border-color: #38bdf8;
color: #04101f !important;
transform: translateY(-3px);
}
/* =========================================
BOTTOM BAR
========================================= */
.mp-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.mp-footer-bottom p {
margin: 0;
color: #60758d;
font-size: 10px;
}
.mp-footer-legal {
display: flex;
align-items: center;
gap: 10px;
}
.mp-footer-legal a {
color: #60758d !important;
font-size: 10px;
text-decoration: none !important;
transition: color 0.25s ease;
}
.mp-footer-legal a:hover {
color: #38bdf8 !important;
}
.mp-footer-legal span {
color: #334a61;
font-size: 10px;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 950px) {
.mp-footer {
padding: 70px 25px 25px;
}
.mp-footer-top {
grid-template-columns: 1fr 1fr;
gap: 45px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.mp-footer {
padding: 60px 18px 22px;
}
.mp-footer-container {
width: 90%;
}
.mp-footer-top {
grid-template-columns: 1fr;
gap: 38px;
padding-bottom: 45px;
}
.mp-footer-brand {
max-width: 100%;
}
.mp-footer-middle {
flex-direction: column;
gap: 22px;
text-align: center;
}
.mp-footer-bottom {
flex-direction: column;
justify-content: center;
text-align: center;
gap: 12px;
}
}
/* End custom CSS */