:root { --mspi-primary: #E8256B; --mspi-primary-light: #FF4D8A; --mspi-primary-dark: #C41D5A; --mspi-secondary: #000000; --mspi-secondary-light: #1A1A1A; --mspi-accent: #FF6B99; --mspi-accent-light: #FF9DBF; --mspi-background: #FFF8F0; --mspi-background-alt: #F5F5F5; --mspi-background-dark: #000000; --mspi-text: #000000; --mspi-text-light: #3D3D3D; --mspi-white: #FFFFFF; --mspi-font-heading: 'Be Vietnam Pro', sans-serif;
--mspi-font-body: 'Be Vietnam Pro', sans-serif; --mspi-text-xs: 0.75rem; --mspi-text-sm: 0.875rem; --mspi-text-base: 1rem; --mspi-text-lg: 1.125rem; --mspi-text-xl: 1.25rem; --mspi-text-2xl: 1.5rem; --mspi-text-3xl: 1.875rem; --mspi-text-4xl: 2.25rem; --mspi-text-5xl: 3rem;  --mspi-spacing-2xs: 0.25rem;
--mspi-spacing-xs: 0.5rem;
--mspi-spacing-sm: 1rem;
--mspi-spacing-md: 1.5rem;
--mspi-spacing-lg: 2rem;
--mspi-spacing-xl: 3rem;
--mspi-spacing-2xl: 4rem; --mspi-radius-sm: 4px;
--mspi-radius-md: 8px;
--mspi-radius-lg: 16px;
--mspi-radius-xl: 24px;
--mspi-radius-full: 9999px; --mspi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--mspi-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
--mspi-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
--mspi-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
--mspi-shadow-hover: 0 14px 30px rgba(233, 30, 156, 0.15), 0 6px 12px rgba(0, 0, 0, 0.08); --mspi-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--mspi-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--mspi-transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--mspi-transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
--mspi-transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
--mspi-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--mspi-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --mspi-section-padding: clamp(3rem, 8vw, 6rem);
--mspi-section-gap: clamp(4rem, 10vw, 8rem);
} .mspi-icon {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
fill: none;
stroke: currentColor;
}
.mspi-icon--filled {
fill: currentColor;
stroke: none;
}  html {
scroll-behavior: smooth;
} html, body {
overflow-x: hidden;
} .mspi-homepage,
.mspi-about,
.mspi-hero {
overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
} .animate-fade-in-up {
animation: fadeInUp 0.6s var(--mspi-ease-out-expo) forwards;
}
.animate-fade-in {
animation: fadeIn 0.5s ease forwards;
}
.animate-slide-in-left {
animation: slideInLeft 0.6s var(--mspi-ease-out-expo) forwards;
}
.animate-slide-in-right {
animation: slideInRight 0.6s var(--mspi-ease-out-expo) forwards;
}
.animate-scale-in {
animation: scaleIn 0.5s var(--mspi-ease-out-expo) forwards;
} .delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; } .mspi-hero__content {
animation: fadeInUp 0.8s var(--mspi-ease-out-expo) 0.1s both;
}
.mspi-hero__image {
animation: fadeInUp 0.8s var(--mspi-ease-out-expo) 0.3s both;
}
.mspi-section-header {
animation: fadeInUp 0.6s var(--mspi-ease-out-expo) both;
}   body {
font-family: var(--mspi-font-body);
background: linear-gradient(135deg, var(--mspi-background) 0%, rgba(233, 30, 156, 0.05) 100%);
background-attachment: fixed;
color: var(--mspi-text);
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--mspi-font-heading);
font-weight: 600;
color: var(--mspi-secondary);
}
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
a {
color: var(--mspi-primary);
transition: var(--mspi-transition);
}
a:hover {
color: var(--mspi-primary-dark);
} .mspi-btn,
.elementor-button,
.wp-block-button__link {
font-family: var(--mspi-font-heading);
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: var(--mspi-radius-full);
transition: var(--mspi-transition);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.875rem;
}
.mspi-btn-primary,
.elementor-button-primary {
background: var(--mspi-primary);
color: var(--mspi-white);
border: none;
}
.mspi-btn-primary:hover {
background: var(--mspi-primary-dark);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(233, 30, 156, 0.4), 0 4px 10px rgba(0, 0, 0, 0.1);
}
.mspi-btn-primary:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(233, 30, 156, 0.3);
}
.mspi-btn-secondary {
background: transparent;
color: var(--mspi-primary);
border: 2px solid var(--mspi-primary);
}
.mspi-btn-secondary:hover {
background: var(--mspi-primary);
color: var(--mspi-white);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(233, 30, 156, 0.25);
}
.mspi-btn-secondary:active {
transform: translateY(0);
} .ast-primary-header-bar {
background: var(--mspi-white);
box-shadow: var(--mspi-shadow-sm);
}
.ast-site-identity .site-title a {
color: var(--mspi-primary);
font-family: var(--mspi-font-heading);
font-weight: 700;
}
.ast-header-custom-item .menu-link,
.ast-nav-menu .menu-link {
font-family: var(--mspi-font-heading);
font-weight: 500;
color: var(--mspi-secondary);
transition: var(--mspi-transition);
}
.ast-nav-menu .menu-link:hover,
.ast-nav-menu .current-menu-item > .menu-link {
color: var(--mspi-primary);
} .mspi-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: transparent;
border-bottom: none;
transition: var(--mspi-transition-smooth);
} .mspi-header--scrolled {
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
} .mspi-header--solid {
background: rgba(26, 26, 26, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.mspi-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
gap: var(--mspi-spacing-md);
transition: padding 0.3s ease;
} .mspi-logo {
display: flex;
align-items: center;
text-decoration: none;
position: relative;
z-index: 10;
}
.mspi-logo__img {
height: 90px;
width: auto;
filter: brightness(0) invert(1);
transition: height 0.3s ease, transform 0.3s ease;
transform: translateY(15px); } .mspi-header--scrolled .mspi-header__inner {
padding: 8px 0;
}
.mspi-header--scrolled .mspi-logo__img {
height: 48px;
transform: translateY(0);
} .mspi-nav {
display: none;
}
.mspi-nav__list {
display: flex;
gap: var(--mspi-spacing-lg);
list-style: none;
margin: 0;
padding: 0;
}
.mspi-nav__link {
font-weight: 600;
color: #fff;
padding: var(--mspi-spacing-xs) 0;
position: relative;
text-decoration: none;
transition: color 0.3s var(--mspi-ease-out-expo);
}
.mspi-nav__link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--mspi-primary), var(--mspi-primary-light));
transition: width 0.4s var(--mspi-ease-out-expo), left 0.4s var(--mspi-ease-out-expo);
border-radius: 1px;
}
.mspi-nav__link:hover::after,
.mspi-nav__link--active::after {
width: 100%;
left: 0;
}
.mspi-nav__link:hover,
.mspi-nav__link--active {
color: var(--mspi-primary);
} .mspi-menu-btn {
display: flex;
flex-direction: column;
gap: 5px;
padding: var(--mspi-spacing-xs);
background: none;
border: none;
cursor: pointer;
}
.mspi-menu-btn span {
width: 24px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: all 0.3s ease;
}
.mspi-menu-btn--active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mspi-menu-btn--active span:nth-child(2) {
opacity: 0;
}
.mspi-menu-btn--active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
} .mspi-header__cta {
display: none;
} .mspi-mobile-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--mspi-white);
padding: var(--mspi-spacing-md);
box-shadow: var(--mspi-shadow-lg);
}
.mspi-mobile-nav--open {
display: block;
}
.mspi-mobile-nav__list {
list-style: none;
margin: 0 0 var(--mspi-spacing-md) 0;
padding: 0;
}
.mspi-mobile-nav__list li {
border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.mspi-mobile-nav__list a {
display: block;
padding: var(--mspi-spacing-sm) 0;
color: var(--mspi-secondary);
font-weight: 600;
text-decoration: none;
}
.mspi-mobile-nav__list a:hover {
color: var(--mspi-primary);
} .ast-primary-header-bar,
.ast-mobile-header-wrap,
#masthead {
display: none !important;
} @media (min-width: 768px) {
.mspi-nav {
display: block;
}
.mspi-menu-btn {
display: none;
}
.mspi-header__cta {
display: inline-flex;
}
.mspi-mobile-nav {
display: none !important;
}
}   .mspi-testimonial {
background: var(--mspi-white);
padding: var(--mspi-spacing-lg);
border-radius: var(--mspi-radius-lg);
border-left: 4px solid var(--mspi-primary);
}
.mspi-testimonial-text {
font-style: italic;
color: var(--mspi-text);
margin-bottom: var(--mspi-spacing-sm);
}
.mspi-testimonial-author {
font-weight: 600;
color: var(--mspi-primary);
} .ast-footer {
background: var(--mspi-secondary);
color: var(--mspi-white);
}
.ast-footer a {
color: var(--mspi-accent-light);
}
.ast-footer a:hover {
color: var(--mspi-primary-light);
}   .mspi-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--mspi-spacing-md);
} .mspi-section-header {
text-align: center;
max-width: 600px;
margin: 0 auto var(--mspi-spacing-xl);
}
.mspi-section-header__label {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
color: var(--mspi-primary);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--mspi-spacing-sm);
padding: var(--mspi-spacing-xs) var(--mspi-spacing-md);
background: rgba(233, 30, 156, 0.1);
border-radius: var(--mspi-radius-full);
}
.mspi-section-header__title {
margin-bottom: var(--mspi-spacing-sm);
font-family: var(--mspi-font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--mspi-secondary);
}
.mspi-section-header__desc {
color: var(--mspi-text-light);
} .mspi-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mspi-spacing-xs);
padding: 0.875rem 2rem;
font-family: var(--mspi-font-heading);
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(--mspi-radius-full);
border: none;
cursor: pointer;
transition: var(--mspi-transition-smooth);
text-decoration: none;
position: relative;
overflow: hidden;
} .mspi-btn::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
transform: scale(0);
opacity: 0;
transition: transform 0.5s var(--mspi-ease-out-expo), opacity 0.3s ease;
}
.mspi-btn:active::after {
transform: scale(2.5);
opacity: 1;
transition: transform 0s, opacity 0s;
}
.mspi-btn--primary {
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-primary-light));
color: var(--mspi-white);
box-shadow: 0 4px 16px rgba(233, 30, 156, 0.3);
}
.mspi-btn--primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 28px rgba(233, 30, 156, 0.45);
color: var(--mspi-white);
}
.mspi-btn--primary:active {
transform: translateY(-1px) scale(0.98);
box-shadow: 0 4px 12px rgba(233, 30, 156, 0.3);
} .mspi-btn:focus-visible {
outline: 3px solid rgba(233, 30, 156, 0.5);
outline-offset: 3px;
}
.mspi-btn--secondary {
background: transparent;
color: var(--mspi-primary);
border: 2px solid var(--mspi-primary);
}
.mspi-btn--secondary:hover {
background: var(--mspi-primary);
color: var(--mspi-white);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 24px rgba(233, 30, 156, 0.25);
}
.mspi-btn--secondary:active {
transform: translateY(-1px) scale(0.98);
} .mspi-hero .mspi-btn--secondary {
background: transparent;
color: #fff;
border: 2px solid #fff;
}
.mspi-hero .mspi-btn--secondary:hover {
background: #fff;
color: var(--mspi-primary);
}
.mspi-btn--accent {
background: var(--mspi-accent);
color: var(--mspi-white);
box-shadow: 0 4px 16px rgba(255, 107, 194, 0.3);
}
.mspi-btn--accent:hover {
background: var(--mspi-primary);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(233, 30, 156, 0.4);
color: var(--mspi-white);
}
.mspi-btn--white {
background: var(--mspi-white);
color: var(--mspi-primary);
font-weight: 700;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.mspi-btn--white:hover {
background: var(--mspi-secondary);
color: var(--mspi-white);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.mspi-btn--outline {
background: transparent;
color: var(--mspi-primary);
border: 2px solid var(--mspi-primary);
font-weight: 600;
}
.mspi-btn--outline:hover {
background: var(--mspi-primary);
color: var(--mspi-white);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(233, 30, 156, 0.35);
}
.mspi-btn--outline-white {
background: transparent;
color: var(--mspi-white);
border: 2px solid var(--mspi-white);
}
.mspi-btn--outline-white:hover {
background: var(--mspi-white);
color: var(--mspi-primary);
} .mspi-hero {
min-height: 100vh;
display: flex;
align-items: center;
padding: calc(80px + var(--mspi-spacing-xl)) 0 var(--mspi-spacing-xl);
position: relative;
overflow: hidden;
background: #1a1a1a;
} .mspi-hero__bg {
position: absolute;
inset: -20px;
z-index: 0;
}
.mspi-hero__bg-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(6px);
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.mspi-hero__bg-slide::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.mspi-hero__bg-slide.active {
opacity: 1;
} .mspi-hero .mspi-container {
position: relative;
z-index: 1;
} .mspi-hero::after {
content: '';
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
width: 120%;
height: 300px;
background: radial-gradient(ellipse at center, rgba(233, 30, 156, 0.15) 0%, transparent 70%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
.mspi-hero__decor {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
opacity: 0.1;
}
.mspi-hero__decor--1 {
top: 20%;
left: 5%;
width: 60px;
height: 60px;
}
.mspi-hero__decor--2 {
bottom: 20%;
right: 10%;
width: 80px;
height: 80px;
}
.mspi-hero__inner {
display: grid;
gap: var(--mspi-spacing-xl);
align-items: center;
}
.mspi-hero__content {
text-align: center;
}
.mspi-hero__badge {
display: inline-block;
padding: var(--mspi-spacing-xs) var(--mspi-spacing-sm);
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-weight: 600;
font-size: 0.875rem;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-hero__title {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
margin-bottom: var(--mspi-spacing-md);
color: #fff;
}
.mspi-hero__title span {
color: var(--mspi-primary);
}
.mspi-hero__subtitle {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--mspi-spacing-lg);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.mspi-hero__actions {
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-sm);
align-items: center;
}
.mspi-hero__stats {
display: flex;
justify-content: flex-start;
gap: var(--mspi-spacing-md);
margin-top: var(--mspi-spacing-lg);
}
.mspi-stat {
text-align: center;
}
.mspi-stat__icon {
color: #fff;
}
.mspi-stat__icon svg {
width: 28px;
height: 28px;
}
.mspi-stat__number {
font-family: var(--mspi-font-heading);
font-size: 2rem;
font-weight: 700;
color: #fff;
transition: color 0.3s ease;
}
.mspi-stat:hover .mspi-stat__number {
color: var(--mspi-primary);
}
.mspi-stat__label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8);
}
.mspi-hero__image-wrapper {
aspect-ratio: 4/5;
border-radius: var(--mspi-radius-lg);
overflow: hidden;
box-shadow: var(--mspi-shadow-lg);
}
.mspi-hero__image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
} .mspi-hero__video {
justify-self: end;
}
.mspi-hero__video-wrapper {
aspect-ratio: 9/16;
border-radius: var(--mspi-radius-lg);
overflow: hidden;
box-shadow: var(--mspi-shadow-lg);
max-width: 320px;
margin-left: auto;
}
.mspi-hero__video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.4s ease-in-out;
} .mspi-about {
padding: var(--mspi-section-padding) 0;
background: var(--mspi-white);
}
.mspi-about__grid {
display: grid;
gap: var(--mspi-spacing-xl);
}
.mspi-about__content {
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-md);
}
.mspi-about__text {
color: var(--mspi-text-light);
line-height: 1.8;
}
.mspi-about__features {
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-sm);
margin: var(--mspi-spacing-sm) 0;
}
.mspi-feature-item {
display: flex;
align-items: center;
gap: var(--mspi-spacing-sm);
}
.mspi-feature-item__icon {
width: 32px;
height: 32px;
background: rgba(233, 30, 156, 0.1);
border-radius: var(--mspi-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--mspi-primary);
font-weight: 700;
flex-shrink: 0;
}
.mspi-feature-item__text {
font-weight: 600;
color: var(--mspi-secondary);
}
.mspi-about__image {
border-radius: var(--mspi-radius-lg);
overflow: hidden;
box-shadow: var(--mspi-shadow-lg);
}
.mspi-about__image img {
width: 100%;
height: 100%;
object-fit: cover;
} .mspi-services {
padding: var(--mspi-section-padding) 0;
background: var(--mspi-background);
}
.mspi-services__grid {
display: grid;
gap: var(--mspi-spacing-md);
}
.mspi-service-card {
background: var(--mspi-white);
border-radius: var(--mspi-radius-lg);
padding: var(--mspi-spacing-lg);
box-shadow: var(--mspi-shadow-sm);
transition: var(--mspi-transition);
}
.mspi-service-card:hover {
transform: translateY(-4px);
box-shadow: var(--mspi-shadow-lg);
}
.mspi-service-card__icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, rgba(233, 30, 156, 0.1), rgba(255, 107, 194, 0.1));
border-radius: var(--mspi-radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--mspi-spacing-md);
font-size: 1.75rem;
}
.mspi-service-card__title {
margin-bottom: var(--mspi-spacing-xs);
color: var(--mspi-secondary);
font-size: 1.25rem;
}
.mspi-service-card__desc {
color: var(--mspi-text-light);
font-size: 0.9375rem;
margin-bottom: var(--mspi-spacing-md);
line-height: 1.6;
}
.mspi-service-card__link {
display: inline-flex;
align-items: center;
gap: var(--mspi-spacing-xs);
font-weight: 600;
color: var(--mspi-primary);
text-decoration: none;
}
.mspi-service-card__link:hover {
gap: var(--mspi-spacing-sm);
} .mspi-service-card--featured {
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-primary-light));
color: var(--mspi-white);
}
.mspi-service-card--featured .mspi-service-card__icon {
background: rgba(255, 255, 255, 0.2);
}
.mspi-service-card--featured .mspi-service-card__title,
.mspi-service-card--featured .mspi-service-card__desc {
color: var(--mspi-white);
}
.mspi-service-card--featured .mspi-service-card__desc {
opacity: 0.9;
}
.mspi-service-card--featured .mspi-service-card__link {
color: var(--mspi-white);
} .mspi-testimonials {
padding: var(--mspi-section-padding) 0;
background: var(--mspi-white);
}
.mspi-testimonials__grid {
display: grid;
gap: var(--mspi-spacing-md);
}
.mspi-testimonial-card {
background: var(--mspi-background);
border-radius: var(--mspi-radius-lg);
padding: var(--mspi-spacing-lg);
position: relative;
}
.mspi-testimonial-card__rating {
position: absolute;
bottom: var(--mspi-spacing-md);
right: var(--mspi-spacing-md);
display: flex;
gap: 2px;
background: rgba(255, 184, 0, 0.1);
padding: 6px 10px;
border-radius: var(--mspi-radius-full);
}
.mspi-testimonial-card__rating svg {
width: 16px;
height: 16px;
color: #FFB800;
transition: transform 0.2s ease;
}
.mspi-testimonial-card:hover .mspi-testimonial-card__rating svg:nth-child(1) { transition-delay: 0ms; }
.mspi-testimonial-card:hover .mspi-testimonial-card__rating svg:nth-child(2) { transition-delay: 40ms; }
.mspi-testimonial-card:hover .mspi-testimonial-card__rating svg:nth-child(3) { transition-delay: 80ms; }
.mspi-testimonial-card:hover .mspi-testimonial-card__rating svg:nth-child(4) { transition-delay: 120ms; }
.mspi-testimonial-card:hover .mspi-testimonial-card__rating svg:nth-child(5) { transition-delay: 160ms; }
.mspi-testimonial-card:hover .mspi-testimonial-card__rating svg {
transform: scale(1.2);
}
.mspi-testimonial-card__content {
font-size: 1rem;
color: var(--mspi-text);
font-style: italic;
margin-bottom: var(--mspi-spacing-md);
line-height: 1.7;
}
.mspi-testimonial-card__author {
display: flex;
align-items: center;
gap: var(--mspi-spacing-sm);
}
.mspi-testimonial-card__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
display: flex;
align-items: center;
justify-content: center;
color: var(--mspi-white);
font-weight: 600;
font-size: 0.8125rem;
overflow: hidden;
flex-shrink: 0;
}
.mspi-testimonial-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.mspi-testimonial-card__info h4 {
font-size: 1rem;
font-weight: 600;
color: var(--mspi-secondary);
margin-bottom: 2px;
}
.mspi-testimonial-card__info span {
font-size: 0.875rem;
color: var(--mspi-text-light);
} .mspi-transformations {
padding: var(--mspi-section-padding) 0;
background: #000000;
position: relative;
overflow: hidden;
}
.mspi-transformations .mspi-section-header__label {
color: var(--mspi-primary);
}
.mspi-transformations .mspi-section-header__title {
color: var(--mspi-white);
}
.mspi-transformations .mspi-section-header__desc {
color: rgba(255, 255, 255, 0.7);
} .mspi-transformations__carousel {
position: relative;
z-index: 1;
} .mspi-carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--mspi-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
padding: 0;
}
.mspi-carousel-nav:hover {
background: var(--mspi-primary);
border-color: var(--mspi-primary);
transform: translateY(-50%) scale(1.1);
}
.mspi-carousel-nav--prev {
left: -24px;
}
.mspi-carousel-nav--next {
right: -24px;
}
.mspi-transformations-owl {
padding: var(--mspi-spacing-md) 0;
}
.mspi-transformations-owl .owl-stage {
display: flex;
align-items: center;
} .mspi-transformations-owl .owl-stage {
display: flex;
align-items: center;
}
.mspi-transformation-card {
position: relative;
border-radius: var(--mspi-radius-lg);
overflow: hidden;
transition: opacity 0.4s ease;
opacity: 0.7;
cursor: pointer;
}
.owl-item.center .mspi-transformation-card {
opacity: 1;
}
.mspi-transformation-card img {
display: block;
height: 450px;
width: auto;
min-width: 200px;
}
@media (max-width: 768px) {
.mspi-transformation-card img {
height: 400px;
min-width: 220px;
}
}
@media (max-width: 480px) {
.mspi-transformation-card img {
height: 350px;
min-width: 200px;
}
} .mspi-transformations-owl .owl-dots {
display: flex !important;
justify-content: center;
gap: 10px;
margin-top: var(--mspi-spacing-xl);
position: relative;
z-index: 5;
}
.mspi-transformations-owl .owl-dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.3) !important;
border-radius: 50%;
border: none;
padding: 0;
transition: all 0.3s ease;
cursor: pointer;
}
.mspi-transformations-owl .owl-dot span {
display: none;
}
.mspi-transformations-owl .owl-dot:hover {
background: rgba(255, 255, 255, 0.5);
transform: scale(1.2);
}
.mspi-transformations-owl .owl-dot.active {
background: var(--mspi-primary) !important;
width: 36px;
border-radius: 6px;
} @media (max-width: 768px) {
.mspi-carousel-nav {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
}
.mspi-carousel-nav--prev {
left: 8px;
}
.mspi-carousel-nav--next {
right: 8px;
}
.mspi-transformations-owl .owl-dot {
width: 10px;
height: 10px;
}
.mspi-transformations-owl .owl-dot.active {
width: 28px;
}
} .mspi-tiktok {
padding: var(--mspi-section-padding) 0;
background: #000;
position: relative;
overflow: hidden;
}
.mspi-tiktok::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
radial-gradient(circle at 30% 20%, rgba(37, 244, 238, 0.15) 0%, transparent 30%),
radial-gradient(circle at 70% 80%, rgba(254, 44, 85, 0.15) 0%, transparent 30%);
animation: tiktok-glow 8s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes tiktok-glow {
0% { transform: translate(0, 0); }
100% { transform: translate(5%, 5%); }
}
.mspi-tiktok .mspi-section-header__label {
background: linear-gradient(135deg, #25F4EE, #FE2C55);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mspi-tiktok .mspi-section-header__title {
color: #fff;
}
.mspi-tiktok .mspi-section-header__desc {
color: rgba(255, 255, 255, 0.7);
} .mspi-tiktok__title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mspi-spacing-sm);
}
.mspi-tiktok__logo {
flex-shrink: 0;
} .mspi-tiktok__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
gap: 16px 24px;
margin-top: var(--mspi-spacing-xl);
justify-content: center;
}
.mspi-tiktok__item {
position: relative;
display: block;
aspect-ratio: 3 / 4;
border-radius: var(--mspi-radius-md);
overflow: hidden;
text-decoration: none;
}
.mspi-tiktok__item:hover .mspi-tiktok__thumbnail {
transform: scale(1.03);
}
.mspi-tiktok__thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.mspi-tiktok__thumbnail-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #161616;
color: rgba(255, 255, 255, 0.3);
} .mspi-tiktok__play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
opacity: 0;
transition: all 0.25s ease;
}
.mspi-tiktok__play-icon svg {
width: 24px;
height: 24px;
margin-left: 3px;
}
.mspi-tiktok__item:hover .mspi-tiktok__play-icon {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.mspi-tiktok__cta {
text-align: center;
margin-top: var(--mspi-spacing-xl);
}
.mspi-tiktok__follow {
display: inline-flex;
align-items: center;
gap: var(--mspi-spacing-sm);
background: linear-gradient(135deg, #25F4EE, #FE2C55);
color: #fff;
padding: 14px 32px;
border-radius: var(--mspi-radius-full);
font-weight: 600;
text-decoration: none;
transition: var(--mspi-transition-smooth);
position: relative;
overflow: hidden;
}
.mspi-tiktok__follow::before {
content: '';
position: absolute;
inset: 2px;
background: #000;
border-radius: inherit;
z-index: -1;
transition: opacity 0.3s ease;
}
.mspi-tiktok__follow:hover {
color: #fff;
transform: scale(1.05);
}
.mspi-tiktok__follow:hover::before {
opacity: 0;
}
.mspi-tiktok__follow svg {
width: 20px;
height: 20px;
} .mspi-sidebar-card--tiktok {
padding: 0;
overflow: hidden;
}
.mspi-sidebar-card--tiktok .mspi-sidebar-card__title {
padding: 0 var(--mspi-spacing-md) var(--mspi-spacing-md);
margin: 0;
border-bottom: 1px solid rgba(26, 26, 26, 0.1);
display: flex;
align-items: center;
}
.mspi-sidebar-card--tiktok .mspi-sidebar-card__title svg {
color: var(--mspi-primary);
}
.mspi-tiktok-profile {
padding: 0;
}
.mspi-tiktok-profile .tiktok-embed {
margin: 0 !important;
max-width: 100% !important;
}
.mspi-tiktok-profile iframe {
max-width: 100% !important;
overflow: hidden;
scrollbar-width: none; }
.mspi-tiktok-profile iframe::-webkit-scrollbar {
display: none; }
.mspi-tiktok-profile blockquote {
border: none;
padding: 0;
margin: 0;
background: transparent;
font-style: normal;
} .mspi-tiktok__placeholder {
text-align: center;
padding: var(--mspi-spacing-2xl) var(--mspi-spacing-lg);
background: var(--mspi-white);
border-radius: var(--mspi-radius-lg);
margin-top: var(--mspi-spacing-xl);
}
.mspi-tiktok__placeholder-icon {
color: var(--mspi-primary);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-tiktok__placeholder-text {
color: var(--mspi-text-light);
font-size: 1.125rem;
max-width: 400px;
margin: 0 auto;
line-height: 1.6;
} .mspi-coaches {
padding: var(--mspi-section-padding) 0;
background: var(--mspi-dark);
position: relative;
overflow: hidden;
}
.mspi-coaches::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.08) 0%, transparent 40%);
pointer-events: none;
}
.mspi-coaches__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mspi-spacing-lg);
position: relative;
}
@media (min-width: 768px) {
.mspi-coaches__grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--mspi-spacing-md);
}
}
.mspi-coach-card {
position: relative;
border-radius: var(--mspi-radius-lg);
overflow: hidden;
cursor: pointer;
group: coach;
}
.mspi-coach-card__image {
aspect-ratio: 3/4;
position: relative;
}
.mspi-coach-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.4) 40%,
transparent 100%
);
transition: background 0.4s ease;
}
.mspi-coach-card:hover .mspi-coach-card__image::after {
background: linear-gradient(
to top,
rgba(236, 72, 153, 0.9) 0%,
rgba(236, 72, 153, 0.3) 50%,
transparent 100%
);
}
.mspi-coach-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mspi-coach-card:hover .mspi-coach-card__image img {
transform: scale(1.1);
}
.mspi-coach-card__info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--mspi-spacing-lg);
z-index: 2;
transform: translateY(20px);
opacity: 0.9;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mspi-coach-card:hover .mspi-coach-card__info {
transform: translateY(0);
opacity: 1;
}
.mspi-coach-card__name {
font-family: var(--mspi-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--mspi-white);
margin-bottom: var(--mspi-spacing-xs);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.mspi-coach-card__role {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--mspi-white);
background: var(--mspi-primary);
padding: 4px 12px;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-coach-card__exp {
display: block;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
margin-top: var(--mspi-spacing-xs);
} .mspi-coach-card__social {
display: flex;
gap: var(--mspi-spacing-sm);
margin-top: var(--mspi-spacing-sm);
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease 0.1s;
}
.mspi-coach-card:hover .mspi-coach-card__social {
opacity: 1;
transform: translateY(0);
} .mspi-media {
padding: var(--mspi-section-padding) 0;
background: var(--mspi-gray-light);
}
.mspi-media__logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--mspi-spacing-xl);
}
.mspi-media__logo {
opacity: 0.6;
transition: opacity 0.3s ease;
filter: grayscale(100%);
}
.mspi-media__logo:hover {
opacity: 1;
filter: grayscale(0%);
}
.mspi-media__logo img {
max-height: 50px;
width: auto;
} .mspi-blog {
padding: var(--mspi-section-padding) 0;
background: linear-gradient(180deg, #fdf2f8 0%, #fff 100%);
position: relative;
}
.mspi-blog::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mspi-primary), transparent);
}
.mspi-blog__grid {
display: grid;
gap: var(--mspi-spacing-xl);
}
@media (min-width: 768px) {
.mspi-blog__grid {
grid-template-columns: repeat(3, 1fr);
}
} .mspi-blog-card {
position: relative;
border-radius: var(--mspi-radius-lg);
overflow: hidden;
box-shadow: var(--mspi-shadow-md);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mspi-blog-card:hover {
transform: translateY(-10px);
box-shadow: var(--mspi-shadow-hover);
}
.mspi-blog-card__image {
display: block;
aspect-ratio: 3/4;
position: relative;
overflow: hidden;
}
.mspi-blog-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.4) 50%,
transparent 100%
);
transition: background 0.4s ease;
}
.mspi-blog-card:hover .mspi-blog-card__image::after {
background: linear-gradient(
to top,
rgba(232, 37, 107, 0.9) 0%,
rgba(232, 37, 107, 0.3) 50%,
transparent 100%
);
}
.mspi-blog-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mspi-blog-card:hover .mspi-blog-card__image img {
transform: scale(1.05);
}
.mspi-blog-card__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--mspi-spacing-md);
z-index: 2;
}
.mspi-blog-card__date {
display: inline-block;
width: fit-content;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #fff;
background: var(--mspi-primary);
padding: 4px 10px;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-blog-card__title {
font-family: var(--mspi-font-heading);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: var(--mspi-spacing-xs);
color: #fff;
}
.mspi-blog-card__title a {
color: #fff;
text-decoration: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mspi-blog-card__title a:hover {
color: #fff;
}
.mspi-blog-card__excerpt {
color: #fff;
font-size: 0.85rem;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mspi-blog-card__link {
display: none;
}
.mspi-blog__cta {
text-align: center;
margin-top: var(--mspi-spacing-2xl);
}
.mspi-blog__empty {
text-align: center;
color: var(--mspi-gray);
grid-column: 1 / -1;
} .mspi-cta {
padding: 6rem 0;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-primary-dark));
position: relative;
overflow: hidden;
}
.mspi-cta::before {
content: '';
position: absolute;
top: -50%;
right: -25%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.mspi-cta__inner {
text-align: center;
position: relative;
z-index: 1;
}
.mspi-cta__title {
color: var(--mspi-white);
margin-bottom: var(--mspi-spacing-md);
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.mspi-cta__desc {
color: rgba(255, 255, 255, 0.9);
font-size: 1.125rem;
max-width: 500px;
margin: 0 auto var(--mspi-spacing-lg);
}
.mspi-cta__actions {
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-sm);
align-items: center;
}  @media (min-width: 768px) {
.mspi-hero__inner {
grid-template-columns: 1fr 1fr;
gap: var(--mspi-spacing-2xl);
}
.mspi-hero__content {
text-align: left;
}
.mspi-hero__subtitle {
margin-left: 0;
}
.mspi-hero__actions {
flex-direction: row;
justify-content: flex-start;
}
.mspi-hero__stats {
justify-content: space-between;
}
.mspi-about__grid {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.mspi-services__grid {
grid-template-columns: repeat(2, 1fr);
}
.mspi-testimonials__grid {
grid-template-columns: repeat(2, 1fr);
}
.mspi-cta__actions {
flex-direction: row;
justify-content: center;
}
} @media (min-width: 1024px) {
.mspi-services__grid {
grid-template-columns: repeat(3, 1fr);
}
.mspi-testimonials__grid {
grid-template-columns: repeat(3, 1fr);
}
} @media (min-width: 1280px) {
.mspi-container {
max-width: 1280px;
}
}  @media (max-width: 767px) {  [data-aos="fade-left"],
[data-aos="fade-right"] {
transform: translateY(30px) !important;
}
[data-aos="fade-left"].aos-animate,
[data-aos="fade-right"].aos-animate {
transform: translateY(0) !important;
} .mspi-header {
padding-top: env(safe-area-inset-top);
}
.mspi-footer {
padding-bottom: env(safe-area-inset-bottom);
} .mspi-header__inner {
padding: 8px 0;
}
.mspi-logo__img {
height: 60px;
transform: translateY(8px); }
.mspi-header--scrolled .mspi-logo__img {
height: 40px;
transform: translateY(0);
} .mspi-header__cta {
display: none !important;
}
.mspi-mobile-nav {
max-height: calc(100vh - 70px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
} .mspi-container {
padding: 0 var(--mspi-spacing-sm);
} .mspi-hero {
min-height: auto;
padding: calc(70px + var(--mspi-spacing-md)) 0 var(--mspi-spacing-lg);
}
.mspi-hero__inner {
gap: var(--mspi-spacing-lg);
}
.mspi-hero__content {
order: 1;
} .mspi-hero__video {
display: none;
}
.mspi-hero__badge {
font-size: 0.75rem;
padding: 6px 12px;
}
.mspi-hero__title {
font-size: 1.75rem;
line-height: 1.25;
margin-bottom: var(--mspi-spacing-sm);
}
.mspi-hero__subtitle {
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: var(--mspi-spacing-md);
}
.mspi-hero__actions {
gap: var(--mspi-spacing-xs);
} .mspi-hero__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mspi-spacing-sm);
justify-items: center;
margin-top: var(--mspi-spacing-md);
}
.mspi-stat {
padding: var(--mspi-spacing-xs);
}
.mspi-stat__icon svg {
width: 24px;
height: 24px;
}
.mspi-stat__number {
font-size: 1.5rem;
}
.mspi-stat__label {
font-size: 0.75rem;
} .mspi-section-header__title {
font-size: 1.5rem;
line-height: 1.3;
}
.mspi-section-header__desc {
font-size: 0.9375rem;
}
.mspi-section-header__label {
font-size: 0.6875rem;
padding: 6px 12px;
} .mspi-btn {
min-height: 48px;
padding: 14px 24px;
font-size: 0.9375rem;
width: 100%;
justify-content: center;
}
.mspi-hero__actions .mspi-btn {
width: 100%;
}
.mspi-menu-btn {
min-width: 48px;
padding: 16px 12px;
justify-content: center;
}
.mspi-nav__link,
.mspi-mobile-nav__list a {
min-height: 48px;
display: flex;
align-items: center;
padding: 14px 0;
font-size: 1rem;
}
.mspi-category-pill {
padding: 10px 16px;
}
.mspi-footer__social a {
min-width: 48px;
min-height: 48px;
} .mspi-service-card__link {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 10px 0;
} .mspi-blog-card__read-more {
min-height: 44px;
display: inline-flex;
align-items: center;
} .mspi-about__grid {
gap: var(--mspi-spacing-lg);
}
.mspi-about__text {
font-size: 0.9375rem;
}
.mspi-feature-item__text {
font-size: 0.9375rem;
} .mspi-services__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--mspi-spacing-sm);
padding-bottom: var(--mspi-spacing-sm);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mspi-services__grid::-webkit-scrollbar {
display: none;
}
.mspi-service-card {
flex: 0 0 85%;
max-width: 85%;
scroll-snap-align: start;
padding: var(--mspi-spacing-md);
}
.mspi-service-card__icon {
width: 56px;
height: 56px;
font-size: 1.5rem;
margin-bottom: var(--mspi-spacing-sm);
}
.mspi-service-card__title {
font-size: 1.125rem;
}
.mspi-service-card__desc {
font-size: 0.875rem;
} .mspi-testimonials__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--mspi-spacing-sm);
padding-bottom: var(--mspi-spacing-sm);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mspi-testimonials__grid::-webkit-scrollbar {
display: none;
}
.mspi-testimonial-card {
flex: 0 0 90%;
max-width: 90%;
scroll-snap-align: start;
padding: var(--mspi-spacing-md);
}
.mspi-testimonial-card__content {
font-size: 0.9375rem;
padding-bottom: 2.5rem; }
.mspi-testimonial-card__rating {
bottom: var(--mspi-spacing-sm);
right: var(--mspi-spacing-sm);
padding: 4px 8px;
}
.mspi-testimonial-card__rating svg {
width: 14px;
height: 14px;
} .mspi-tiktok__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--mspi-spacing-md);
padding-bottom: var(--mspi-spacing-sm);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mspi-tiktok__grid::-webkit-scrollbar {
display: none;
}
.mspi-tiktok__item {
flex: 0 0 160px;
scroll-snap-align: start;
}
.mspi-tiktok__follow {
padding: 12px 24px;
font-size: 0.875rem;
} .mspi-coaches__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--mspi-spacing-md);
padding-bottom: var(--mspi-spacing-sm);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mspi-coaches__grid::-webkit-scrollbar {
display: none;
}
.mspi-coach-card {
flex: 0 0 75%;
max-width: 75%;
scroll-snap-align: start;
}
.mspi-coach-card__name {
font-size: 1rem;
}
.mspi-coach-card__role,
.mspi-coach-card__exp {
font-size: 0.75rem;
} .mspi-media__logos {
display: flex;
overflow-x: auto;
gap: var(--mspi-spacing-lg);
padding-bottom: var(--mspi-spacing-sm);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
flex-wrap: nowrap;
justify-content: flex-start;
}
.mspi-media__logos::-webkit-scrollbar {
display: none;
}
.mspi-media__logo {
flex: 0 0 auto;
}
.mspi-media__logo img {
max-height: 40px;
} .mspi-blog__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--mspi-spacing-md);
padding-bottom: var(--mspi-spacing-sm);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mspi-blog__grid::-webkit-scrollbar {
display: none;
} .mspi-blog__grid .mspi-blog-card {
flex: 0 0 85%;
max-width: 85%;
scroll-snap-align: start;
}
.mspi-blog__grid .mspi-blog-card__image {
aspect-ratio: 4/3;
}
.mspi-blog__grid .mspi-blog-card__title {
font-size: 1rem;
}
.mspi-blog__grid .mspi-blog-card__excerpt {
font-size: 0.8125rem;
-webkit-line-clamp: 2;
} .mspi-blog-grid .mspi-blog-card__image {
aspect-ratio: 16/10;
}
.mspi-blog-grid .mspi-blog-card__content {
padding: var(--mspi-spacing-sm);
}
.mspi-blog-grid .mspi-blog-card__title {
font-size: 1rem;
}
.mspi-blog-grid .mspi-blog-card__excerpt {
font-size: 0.8125rem;
-webkit-line-clamp: 2;
}
.mspi-blog__cta {
margin-top: var(--mspi-spacing-xl);
} .mspi-cta {
padding: var(--mspi-spacing-2xl) 0;
}
.mspi-cta__title {
font-size: 1.5rem;
}
.mspi-cta__desc {
font-size: 1rem;
}
.mspi-cta__actions {
gap: var(--mspi-spacing-xs);
}
.mspi-cta__actions .mspi-btn {
width: 100%;
} .mspi-footer {
padding: var(--mspi-spacing-lg) 0 var(--mspi-spacing-md);
}
.mspi-footer__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--mspi-spacing-sm) var(--mspi-spacing-md);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-footer__brand-col,
.mspi-footer__grid > div:last-child {
grid-column: span 2;
}
.mspi-footer .mspi-logo__img {
height: 70px;
}
.mspi-footer__brand {
margin-bottom: var(--mspi-spacing-sm);
}
.mspi-footer__title {
font-size: 0.875rem;
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-footer__links {
gap: var(--mspi-spacing-2xs);
}
.mspi-footer__links a {
font-size: 0.8125rem;
}
.mspi-footer__contact-item {
font-size: 0.8125rem;
}
.mspi-footer__social {
margin-top: var(--mspi-spacing-sm);
}
.mspi-footer__bottom {
padding-top: var(--mspi-spacing-sm);
gap: var(--mspi-spacing-xs);
}
.mspi-footer__legal {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--mspi-spacing-xs) var(--mspi-spacing-sm);
}
.mspi-footer__copyright {
margin-bottom: 0;
} .mspi-page-hero {
padding: calc(70px + var(--mspi-spacing-lg)) 0 var(--mspi-spacing-lg);
min-height: auto;
}
.mspi-page-hero--has-bg {
min-height: 280px;
}
.mspi-page-hero__badge {
font-size: 0.75rem;
padding: 6px 12px;
}
.mspi-page-hero__title {
font-size: 1.5rem;
line-height: 1.3;
}
.mspi-page-hero__desc {
font-size: 0.9375rem;
}
.mspi-page-hero__decor {
width: 200px;
height: 200px;
top: -20%;
right: -15%;
} .mspi-contact-section {
padding: var(--mspi-spacing-lg) 0 var(--mspi-spacing-xl);
}
.mspi-contact-grid {
gap: var(--mspi-spacing-lg);
}
.mspi-contact-form-wrapper {
padding: var(--mspi-spacing-md);
}
.mspi-contact-form-wrapper h2 {
font-size: 1.25rem;
} .mspi-form-input,
.mspi-form-select,
.mspi-form-textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
min-height: 48px;
padding: 12px var(--mspi-spacing-sm);
font-size: 16px; }
.mspi-form-textarea,
.wpcf7-form textarea {
min-height: 100px;
}
.mspi-form-checkbox {
min-height: 48px;
padding: 8px 0;
}
.mspi-form-checkbox input {
width: 24px;
height: 24px;
}
.mspi-form-row {
grid-template-columns: 1fr;
} .mspi-contact-card {
padding: var(--mspi-spacing-md);
}
.mspi-contact-card__icon {
width: 40px;
height: 40px;
}
.mspi-contact-card__title {
font-size: 1rem;
}
.mspi-contact-card__link {
font-size: 1rem;
min-height: 44px;
display: inline-flex;
align-items: center;
} .mspi-hours-list li {
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: var(--mspi-spacing-xs) 0;
}
.mspi-hours-list li span:last-child {
font-size: 0.8125rem;
} .mspi-social-links a {
width: 48px;
height: 48px;
} .mspi-map-section {
padding: 0 0 var(--mspi-spacing-xl);
}
.mspi-map-embed {
height: 220px;
}
.mspi-map-info {
padding: var(--mspi-spacing-md);
gap: var(--mspi-spacing-sm);
}
.mspi-map-info__icon {
width: 36px;
height: 36px;
}
.mspi-map-info__content h4 {
font-size: 0.9375rem;
}
.mspi-map-info__content p {
font-size: 0.8125rem;
}
.mspi-map-info__directions {
min-height: 44px;
display: inline-flex;
align-items: center;
} .mspi-faq-section {
padding: var(--mspi-spacing-lg) 0 var(--mspi-spacing-xl);
}
.mspi-faq-item__question {
min-height: 56px;
padding: var(--mspi-spacing-sm) var(--mspi-spacing-md);
font-size: 0.9375rem;
}
.mspi-faq-item__answer {
padding: 0 var(--mspi-spacing-sm) var(--mspi-spacing-sm);
font-size: 0.875rem;
line-height: 1.7;
} .mspi-blog-hero {
padding: calc(56px + var(--mspi-spacing-sm)) 0 var(--mspi-spacing-md);
}
.mspi-blog-hero__title {
font-size: 1.75rem;
}
.mspi-blog-hero__desc {
font-size: 0.9375rem;
}
.mspi-blog-section {
padding: var(--mspi-spacing-lg) 0 var(--mspi-spacing-xl);
}
.mspi-blog-categories {
gap: var(--mspi-spacing-xs);
margin-bottom: var(--mspi-spacing-lg);
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
padding: var(--mspi-spacing-xs) var(--mspi-spacing-sm);
margin-left: calc(-1 * var(--mspi-spacing-sm));
margin-right: calc(-1 * var(--mspi-spacing-sm));
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mspi-blog-categories::-webkit-scrollbar {
display: none;
}
.mspi-category-pill {
flex-shrink: 0;
}
.mspi-blog-grid {
gap: var(--mspi-spacing-md);
}
.mspi-blog-grid .mspi-blog-card__read-more {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.mspi-pagination {
gap: var(--mspi-spacing-2xs);
flex-wrap: wrap;
}
.mspi-pagination a,
.mspi-pagination span {
min-width: 40px;
height: 40px;
font-size: 0.875rem;
} .mspi-breadcrumb {
padding: calc(56px + var(--mspi-spacing-xs)) 0 var(--mspi-spacing-xs);
}
.mspi-breadcrumb__list {
font-size: 0.75rem;
flex-wrap: nowrap;
}
.mspi-service-hero {
padding: var(--mspi-spacing-sm) 0 var(--mspi-spacing-lg);
}
.mspi-service-hero__title {
font-size: 1.5rem;
}
.mspi-service-hero__desc {
font-size: 1rem;
}
.mspi-service-hero__meta {
gap: var(--mspi-spacing-sm);
}
.mspi-meta-item__icon {
width: 36px;
height: 36px;
}
.mspi-service-hero__actions {
gap: var(--mspi-spacing-xs);
}
.mspi-service-hero__actions .mspi-btn {
width: 100%;
}
.mspi-service-details {
padding: var(--mspi-spacing-lg) 0 var(--mspi-spacing-xl);
}
.mspi-content-section__title {
font-size: 1.25rem;
}
.mspi-benefits-list__item {
padding: var(--mspi-spacing-xs) var(--mspi-spacing-sm);
}
.mspi-sidebar-card {
padding: var(--mspi-spacing-md);
}
.mspi-price-amount {
font-size: 1.75rem;
}
.mspi-schedule-table th,
.mspi-schedule-table td {
padding: var(--mspi-spacing-xs);
font-size: 0.8125rem;
}
.mspi-related-services {
padding: var(--mspi-spacing-lg) 0 var(--mspi-spacing-xl);
}
.mspi-related-services__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--mspi-spacing-sm);
padding-bottom: var(--mspi-spacing-sm);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mspi-related-services__grid::-webkit-scrollbar {
display: none;
}
.mspi-related-services__grid .mspi-service-card {
flex: 0 0 85%;
max-width: 85%;
scroll-snap-align: start;
}
} @media (max-width: 480px) { .mspi-container {
padding: 0 12px;
} .mspi-hero__title {
font-size: 1.5rem;
}
.mspi-hero__subtitle {
font-size: 0.875rem;
}
.mspi-hero__badge {
font-size: 0.6875rem;
} .mspi-section-header__title {
font-size: 1.375rem;
}
.mspi-section-header {
margin-bottom: var(--mspi-spacing-lg);
} .mspi-hero__stats {
grid-template-columns: repeat(2, 1fr);
gap: var(--mspi-spacing-xs);
}
.mspi-stat__number {
font-size: 1.25rem;
}
.mspi-stat__label {
font-size: 0.6875rem;
} .mspi-services__grid {
grid-template-columns: 1fr;
} .mspi-testimonial-card {
flex: 0 0 95%;
max-width: 95%;
} .mspi-blog-card__image {
aspect-ratio: 16/9;
} .mspi-cta__title {
font-size: 1.375rem;
} .mspi-page-hero__title {
font-size: 1.375rem;
}
.mspi-page-hero--has-bg {
min-height: 240px;
} .mspi-contact-form-wrapper h2 {
font-size: 1.125rem;
}
.mspi-contact-card__title {
font-size: 0.9375rem;
}
.mspi-faq-item__question {
font-size: 0.875rem;
} .mspi-service-hero__title {
font-size: 1.375rem;
}
.mspi-content-section__title {
font-size: 1.125rem;
} .mspi-blog-hero__title {
font-size: 1.5rem;
}
.mspi-blog-grid .mspi-blog-card__title {
font-size: 0.9375rem;
}
.mspi-blog__grid .mspi-blog-card__title {
font-size: 0.9375rem;
}
} .mspi-footer {
background: var(--mspi-secondary);
color: rgba(255, 255, 255, 0.8);
padding: 4rem 0 2rem;
}
.mspi-footer__grid {
display: grid;
gap: var(--mspi-spacing-lg);
margin-bottom: var(--mspi-spacing-xl);
}
.mspi-footer__brand-col {
text-align: center;
}
.mspi-footer__brand {
margin-bottom: var(--mspi-spacing-md);
display: inline-block;
}
.mspi-footer .mspi-logo__img {
height: 150px;
width: auto;
filter: none;
}
.mspi-footer__desc {
font-size: 0.9375rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
}
.mspi-footer__title {
font-size: 1rem;
font-weight: 600;
color: var(--mspi-white);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-footer__links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-xs);
}
.mspi-footer__links a {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9375rem;
transition: color 0.2s ease;
text-decoration: none;
}
.mspi-footer__links a:hover {
color: var(--mspi-white);
}
.mspi-footer__contact {
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-xs);
}
.mspi-footer__contact-item {
display: flex;
align-items: center;
gap: var(--mspi-spacing-xs);
font-size: 0.9375rem;
}
.mspi-footer__contact-item span:first-child {
flex-shrink: 0;
}
.mspi-footer__contact-item a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
}
.mspi-footer__contact-item a:hover {
color: var(--mspi-white);
}
.mspi-footer__social {
display: flex;
gap: var(--mspi-spacing-sm);
margin-top: var(--mspi-spacing-md);
}
.mspi-footer__social a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--mspi-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--mspi-white);
font-size: 0.875rem;
font-weight: 600;
transition: all 0.2s ease;
text-decoration: none;
}
.mspi-footer__social a:hover {
background: var(--mspi-primary);
transform: translateY(-2px);
}
.mspi-footer__bottom {
padding-top: var(--mspi-spacing-lg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-sm);
text-align: center;
}
.mspi-footer__copyright {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
}
.mspi-footer__legal {
display: flex;
justify-content: center;
gap: var(--mspi-spacing-md);
list-style: none;
margin: 0;
padding: 0;
}
.mspi-footer__legal li {
margin: 0;
}
.mspi-footer__legal a {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
.mspi-footer__legal a:hover {
color: var(--mspi-white);
} @media (min-width: 768px) {
.mspi-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
.mspi-footer__bottom {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
@media (min-width: 1024px) {
.mspi-footer__grid {
grid-template-columns: 2fr 1fr 1fr 1.5fr;
}
}  .mspi-breadcrumb {
padding: calc(110px + var(--mspi-spacing-sm)) 0 var(--mspi-spacing-sm);
}
@media (max-width: 767px) {
.mspi-breadcrumb {
padding: calc(70px + var(--mspi-spacing-xs)) 0 var(--mspi-spacing-xs);
}
} .mspi-blog-hero .mspi-breadcrumb,
.mspi-service-hero .mspi-breadcrumb {
padding: 0 0 var(--mspi-spacing-sm);
}
.mspi-breadcrumb__list {
display: flex;
align-items: center;
gap: var(--mspi-spacing-xs);
list-style: none;
font-size: 0.875rem;
margin: 0;
padding: var(--mspi-spacing-xs) var(--mspi-spacing-sm);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
border-radius: var(--mspi-radius-full);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
max-width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
mask-image: linear-gradient(to right, black 85%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.mspi-breadcrumb__list li {
flex-shrink: 0;
}
.mspi-breadcrumb__list li:last-child {
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.mspi-breadcrumb__list a {
color: var(--mspi-text-light);
text-decoration: none;
transition: color 0.2s ease;
}
.mspi-breadcrumb__list a:hover {
color: var(--mspi-primary);
}
.mspi-breadcrumb__sep {
color: var(--mspi-text-light);
opacity: 0.5;
}
.mspi-breadcrumb__current {
color: var(--mspi-primary);
font-weight: 600;
} .mspi-service-hero {
padding: var(--mspi-spacing-md) 0 var(--mspi-spacing-xl);
}
.mspi-service-hero__inner {
display: grid;
gap: var(--mspi-spacing-xl);
}
.mspi-service-hero__badge {
display: inline-block;
padding: var(--mspi-spacing-xs) var(--mspi-spacing-sm);
background: rgba(233, 30, 156, 0.1);
color: var(--mspi-primary);
font-weight: 600;
font-size: 0.875rem;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-service-hero__title {
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-service-hero__desc {
font-size: 1.125rem;
color: var(--mspi-text-light);
margin-bottom: var(--mspi-spacing-lg);
line-height: 1.7;
}
.mspi-service-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--mspi-spacing-md);
margin-bottom: var(--mspi-spacing-lg);
}
.mspi-meta-item {
display: flex;
align-items: center;
gap: var(--mspi-spacing-xs);
}
.mspi-meta-item__icon {
width: 40px;
height: 40px;
background: rgba(255, 107, 194, 0.1);
border-radius: var(--mspi-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.mspi-meta-item__content {
display: flex;
flex-direction: column;
}
.mspi-meta-item__label {
font-size: 0.75rem;
color: var(--mspi-text-light);
text-transform: uppercase;
letter-spacing: 1px;
}
.mspi-meta-item__value {
font-weight: 600;
color: var(--mspi-secondary);
}
.mspi-service-hero__actions {
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-sm);
}
.mspi-service-hero__image {
border-radius: var(--mspi-radius-lg);
overflow: hidden;
box-shadow: var(--mspi-shadow-lg);
}
.mspi-service-hero__image img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 16/10;
} .mspi-service-details {
padding: var(--mspi-spacing-xl) 0 6rem;
}
.mspi-service-details__grid {
display: grid;
gap: var(--mspi-spacing-xl);
} .mspi-content-section {
margin-bottom: var(--mspi-spacing-xl);
}
.mspi-content-section__title {
margin-bottom: var(--mspi-spacing-md);
padding-bottom: var(--mspi-spacing-xs);
border-bottom: 2px solid rgba(233, 30, 156, 0.2);
font-size: 1.5rem;
}
.mspi-content-section__text {
color: var(--mspi-text-light);
margin-bottom: var(--mspi-spacing-md);
line-height: 1.8;
} .mspi-benefits-list {
list-style: none;
display: grid;
gap: var(--mspi-spacing-sm);
padding: 0;
margin: 0;
}
.mspi-benefits-list__item {
display: flex;
align-items: flex-start;
gap: var(--mspi-spacing-sm);
padding: var(--mspi-spacing-sm);
background: var(--mspi-white);
border-radius: var(--mspi-radius-md);
box-shadow: var(--mspi-shadow-sm);
}
.mspi-benefits-list__icon {
width: 24px;
height: 24px;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--mspi-white);
font-size: 0.75rem;
flex-shrink: 0;
margin-top: 2px;
}
.mspi-benefits-list__content h4 {
margin-bottom: 2px;
font-size: 1rem;
color: var(--mspi-secondary);
}
.mspi-benefits-list__content p {
font-size: 0.875rem;
color: var(--mspi-text-light);
margin: 0;
} .mspi-schedule-table {
width: 100%;
border-collapse: collapse;
background: var(--mspi-white);
border-radius: var(--mspi-radius-md);
overflow: hidden;
box-shadow: var(--mspi-shadow-sm);
}
.mspi-schedule-table th,
.mspi-schedule-table td {
padding: var(--mspi-spacing-sm);
text-align: left;
border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.mspi-schedule-table th {
background: var(--mspi-secondary);
color: var(--mspi-white);
font-weight: 600;
font-size: 0.875rem;
}
.mspi-schedule-table td {
font-size: 0.9375rem;
}
.mspi-schedule-table tr:last-child td {
border-bottom: none;
}
.mspi-schedule-table tr:hover td {
background: rgba(233, 30, 156, 0.05);
}
.mspi-schedule-badge {
display: inline-block;
padding: 2px 8px;
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--mspi-radius-sm);
}
.mspi-schedule-badge--beginner {
background: rgba(255, 107, 194, 0.15);
color: var(--mspi-accent);
}
.mspi-schedule-badge--intermediate {
background: rgba(233, 30, 156, 0.15);
color: var(--mspi-primary);
}
.mspi-schedule-badge--advanced {
background: rgba(26, 26, 26, 0.15);
color: var(--mspi-secondary);
} .mspi-sidebar-card {
background: var(--mspi-white);
border-radius: var(--mspi-radius-lg);
padding: var(--mspi-spacing-lg);
box-shadow: var(--mspi-shadow-md);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-sidebar-card--cta {
background: linear-gradient(135deg, var(--mspi-secondary), var(--mspi-secondary-light));
color: var(--mspi-white);
}
.mspi-sidebar-card--cta h3 {
color: var(--mspi-white);
}
.mspi-sidebar-card__title {
margin-bottom: var(--mspi-spacing-md);
font-size: 1.25rem;
}
.mspi-sidebar-card__price {
display: flex;
align-items: baseline;
gap: var(--mspi-spacing-xs);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-price-amount {
display: block;
font-family: var(--mspi-font-heading);
font-size: 2.75rem;
font-weight: 800;
color: var(--mspi-white);
text-align: center;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
padding: var(--mspi-spacing-sm) 0;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--mspi-radius-md);
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-price-period {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8);
}
.mspi-price-amount--free {
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2.25rem;
}
.mspi-sidebar-card--cta .mspi-price-amount--free {
-webkit-text-fill-color: var(--mspi-white);
background: none;
}
.mspi-sidebar-card__features {
list-style: none;
margin: 0 0 var(--mspi-spacing-md) 0;
padding: 0;
}
.mspi-sidebar-card__features li {
display: flex;
align-items: center;
gap: var(--mspi-spacing-xs);
padding: var(--mspi-spacing-xs) 0;
font-size: 0.9375rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.mspi-sidebar-card__features li:last-child {
border-bottom: none;
}
.mspi-sidebar-card .mspi-btn {
width: 100%;
} .mspi-pricing-card {
position: relative;
background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%);
border-radius: var(--mspi-radius-xl);
padding: var(--mspi-spacing-xl) var(--mspi-spacing-lg);
margin-bottom: var(--mspi-spacing-md);
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.mspi-pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--mspi-primary), var(--mspi-accent));
} .mspi-pricing-card__ribbon {
position: absolute;
top: 20px;
right: -35px;
background: linear-gradient(90deg, var(--mspi-primary), var(--mspi-primary-dark));
color: var(--mspi-white);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.375rem 2.5rem;
transform: rotate(45deg);
box-shadow: 0 2px 8px rgba(233, 30, 156, 0.4);
} .mspi-pricing-card__header {
text-align: center;
margin-bottom: var(--mspi-spacing-md);
}
.mspi-pricing-card__label {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--mspi-primary-light);
margin-bottom: 0.25rem;
}
.mspi-pricing-card__title {
font-family: var(--mspi-font-heading);
font-size: 1.375rem;
font-weight: 700;
color: var(--mspi-white);
margin: 0;
} .mspi-pricing-card__price {
text-align: center;
padding: var(--mspi-spacing-md) 0;
margin-bottom: var(--mspi-spacing-md);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mspi-pricing-card__amount {
display: block;
font-family: var(--mspi-font-heading);
font-size: 2.75rem;
font-weight: 800;
color: var(--mspi-white);
line-height: 1.1;
text-shadow: 0 2px 12px rgba(255, 255, 255, 0.1);
}
.mspi-pricing-card__period {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.6);
margin-left: 0.25rem;
} .mspi-pricing-card__features {
list-style: none;
margin: 0 0 var(--mspi-spacing-lg);
padding: 0;
}
.mspi-pricing-card__features li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0;
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mspi-pricing-card__features li:last-child {
border-bottom: none;
}
.mspi-pricing-card__check {
flex-shrink: 0;
color: var(--mspi-primary);
} .mspi-pricing-card__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-primary-dark));
color: var(--mspi-white);
font-size: 1rem;
font-weight: 600;
border-radius: var(--mspi-radius-lg);
text-decoration: none;
transition: var(--mspi-transition-smooth);
box-shadow: 0 4px 16px rgba(233, 30, 156, 0.35);
}
.mspi-pricing-card__cta:hover {
background: linear-gradient(135deg, var(--mspi-primary-light), var(--mspi-primary));
color: var(--mspi-white);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(233, 30, 156, 0.45);
}
.mspi-pricing-card__cta svg {
transition: transform 0.3s ease;
}
.mspi-pricing-card__cta:hover svg {
transform: translateX(4px);
} .mspi-pricing-card__note {
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
text-align: center;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
margin: var(--mspi-spacing-sm) 0 0;
}
.mspi-pricing-card__note svg {
flex-shrink: 0;
color: rgba(255, 255, 255, 0.4);
} .mspi-pricing-card--course {
background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%);
}
.mspi-pricing-card--course::before {
background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
.mspi-pricing-card--course .mspi-pricing-card__ribbon {
background: linear-gradient(90deg, #6366f1, #4f46e5);
}
.mspi-pricing-card--course .mspi-pricing-card__cta {
background: linear-gradient(135deg, #6366f1, #4f46e5);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}
.mspi-pricing-card--course .mspi-pricing-card__cta:hover {
background: linear-gradient(135deg, #818cf8, #6366f1);
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
} .mspi-pricing-card--free::before {
background: linear-gradient(90deg, #10b981, #34d399);
}
.mspi-pricing-card--free .mspi-pricing-card__ribbon {
display: none;
}
.mspi-pricing-card__amount--free {
background: linear-gradient(135deg, #10b981, #34d399);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mspi-pricing-card--free .mspi-pricing-card__cta {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}
.mspi-pricing-card--free .mspi-pricing-card__cta:hover {
background: linear-gradient(135deg, #34d399, #10b981);
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
} .mspi-pricing-card__details {
list-style: none;
margin: 0 0 var(--mspi-spacing-lg);
padding: 0;
}
.mspi-pricing-card__details li {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mspi-pricing-card__details li:last-child {
border-bottom: none;
}
.mspi-pricing-card__details li svg {
flex-shrink: 0;
color: var(--mspi-primary-light);
opacity: 0.8;
}
.mspi-pricing-card__details li span {
flex: 1;
color: rgba(255, 255, 255, 0.6);
}
.mspi-pricing-card__details li strong {
color: var(--mspi-white);
font-weight: 600;
} @media (max-width: 767px) {
.mspi-pricing-card {
padding: var(--mspi-spacing-lg);
}
.mspi-pricing-card__amount {
font-size: 2.25rem;
}
} .mspi-instructor-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mspi-instructor-card__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
display: flex;
align-items: center;
justify-content: center;
color: var(--mspi-white);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--mspi-spacing-sm);
}
.mspi-instructor-card__name {
font-size: 1.125rem;
margin-bottom: var(--mspi-spacing-xs);
color: var(--mspi-secondary);
}
.mspi-instructor-card__role {
font-size: 0.875rem;
color: var(--mspi-primary);
font-weight: 600;
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-instructor-card__exp {
font-size: 0.875rem;
color: var(--mspi-text-light);
margin: 0;
} .mspi-related-services {
padding: var(--mspi-spacing-2xl) 0 6rem;
background: var(--mspi-background);
}
.mspi-related-services__grid {
display: grid;
gap: var(--mspi-spacing-md);
} @media (max-width: 767px) {
.mspi-related-services__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--mspi-spacing-md);
padding: var(--mspi-spacing-sm) var(--mspi-spacing-sm) var(--mspi-spacing-md);
margin: 0 calc(-1 * var(--mspi-spacing-sm));
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mspi-related-services__grid::-webkit-scrollbar {
display: none;
}
.mspi-related-services__grid .mspi-service-card {
flex: 0 0 80%;
max-width: 80%;
scroll-snap-align: center;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(233, 30, 156, 0.15);
background: var(--mspi-white);
}
} .mspi-btn--lg {
padding: 1rem 2rem;
font-size: 1.125rem;
} @media (min-width: 768px) {
.mspi-service-hero__inner {
grid-template-columns: 1fr 1fr;
gap: var(--mspi-spacing-2xl);
align-items: center;
}
.mspi-service-hero__actions {
flex-direction: row;
}
.mspi-service-details__grid {
grid-template-columns: 1fr 350px;
}
.mspi-benefits-list {
grid-template-columns: repeat(2, 1fr);
}
.mspi-related-services__grid {
grid-template-columns: repeat(3, 1fr);
}
}  .mspi-page-hero {
padding: calc(80px + var(--mspi-spacing-2xl)) 0 var(--mspi-spacing-xl);
background: linear-gradient(135deg, var(--mspi-background) 0%, rgba(233, 30, 156, 0.05) 100%);
text-align: center;
position: relative;
overflow: hidden;
} .mspi-page-hero--has-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.mspi-page-hero--has-bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.7) 0%, rgba(233, 30, 156, 0.35) 100%);
z-index: 1;
}
.mspi-page-hero--has-bg .mspi-container {
position: relative;
z-index: 2;
}
.mspi-page-hero--has-bg .mspi-page-hero__badge {
background: rgba(255, 255, 255, 0.2);
color: var(--mspi-white);
backdrop-filter: blur(4px);
}
.mspi-page-hero--has-bg .mspi-page-hero__title {
color: var(--mspi-white);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.mspi-page-hero--has-bg .mspi-page-hero__desc {
color: rgba(255, 255, 255, 0.9);
}
.mspi-page-hero__decor {
position: absolute;
top: -30%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(233, 30, 156, 0.08) 0%, transparent 70%);
border-radius: 50%;
}
.mspi-page-hero--has-bg .mspi-page-hero__decor {
display: none;
}
.mspi-page-hero__badge {
display: inline-block;
padding: var(--mspi-spacing-xs) var(--mspi-spacing-sm);
background: rgba(233, 30, 156, 0.1);
color: var(--mspi-primary);
font-weight: 600;
font-size: 0.875rem;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-page-hero__title {
margin-bottom: var(--mspi-spacing-sm);
color: var(--mspi-secondary);
}
.mspi-page-hero__desc {
font-size: 1.125rem;
color: var(--mspi-text-light);
max-width: 600px;
margin: 0 auto;
} .mspi-contact-section {
padding: var(--mspi-spacing-2xl) 0 6rem;
}
.mspi-contact-grid {
display: grid;
gap: var(--mspi-spacing-xl);
} .mspi-contact-form-wrapper {
background: var(--mspi-white);
border-radius: var(--mspi-radius-xl);
padding: var(--mspi-spacing-lg);
box-shadow: var(--mspi-shadow-md);
}
.mspi-contact-form-wrapper h2 {
margin-bottom: var(--mspi-spacing-md);
font-size: 1.5rem;
color: var(--mspi-secondary);
}
.mspi-contact-form-wrapper > p {
color: var(--mspi-text-light);
margin-bottom: var(--mspi-spacing-lg);
} .mspi-form-group {
margin-bottom: var(--mspi-spacing-md);
}
.mspi-form-label {
display: block;
font-weight: 600;
color: var(--mspi-secondary);
margin-bottom: var(--mspi-spacing-xs);
font-size: 0.9375rem;
}
.mspi-form-label--required::after {
content: ' *';
color: var(--mspi-primary);
}
.mspi-form-input,
.mspi-form-select,
.mspi-form-textarea {
width: 100%;
padding: 0.875rem var(--mspi-spacing-sm);
font-family: var(--mspi-font-body);
font-size: 1rem;
color: var(--mspi-text);
background: var(--mspi-background);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--mspi-radius-md);
transition: all var(--mspi-transition-fast);
}
.mspi-form-input:focus,
.mspi-form-select:focus,
.mspi-form-textarea:focus {
outline: none;
border-color: var(--mspi-primary);
background: var(--mspi-white);
box-shadow: 0 0 0 3px rgba(233, 30, 156, 0.15);
}
.mspi-form-input::placeholder,
.mspi-form-textarea::placeholder {
color: var(--mspi-text-light);
opacity: 0.7;
}
.mspi-form-textarea {
min-height: 120px;
resize: vertical;
}
.mspi-form-select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px;
} .mspi-form-row {
display: grid;
gap: var(--mspi-spacing-md);
} .mspi-form-divider {
display: flex;
align-items: center;
gap: var(--mspi-spacing-sm);
margin: var(--mspi-spacing-lg) 0;
color: var(--mspi-text-light);
font-size: 0.875rem;
font-weight: 600;
}
.mspi-form-divider::before,
.mspi-form-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(26, 26, 26, 0.1);
} .mspi-form-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: var(--mspi-spacing-xs) var(--mspi-spacing-md);
}
.mspi-form-checkbox {
display: flex;
align-items: center;
gap: var(--mspi-spacing-xs);
cursor: pointer;
}
.mspi-form-checkbox input {
width: 20px;
height: 20px;
accent-color: var(--mspi-primary);
cursor: pointer;
}
.mspi-form-checkbox span {
font-size: 0.9375rem;
color: var(--mspi-text);
} .mspi-form-help {
font-size: 0.8125rem;
color: var(--mspi-text-light);
margin-top: 4px;
} .mspi-form-submit {
margin-top: var(--mspi-spacing-lg);
}
.mspi-form-submit p {
font-size: 0.8125rem;
color: var(--mspi-text-light);
margin-top: var(--mspi-spacing-sm);
margin-bottom: 0;
text-align: center;
}
.mspi-form-submit a {
color: var(--mspi-primary);
text-decoration: underline;
} .wpcf7-form .mspi-form-group {
margin-bottom: var(--mspi-spacing-md);
}
.wpcf7-form .wpcf7-form-control-wrap {
display: block;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
width: 100%;
padding: 0.875rem var(--mspi-spacing-sm);
font-family: var(--mspi-font-body);
font-size: 1rem;
color: var(--mspi-text);
background: var(--mspi-background);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--mspi-radius-md);
transition: all var(--mspi-transition-fast);
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
outline: none;
border-color: var(--mspi-primary);
background: var(--mspi-white);
box-shadow: 0 0 0 3px rgba(233, 30, 156, 0.15);
}
.wpcf7-form .wpcf7-not-valid-tip {
color: #DC2626;
font-size: 0.8125rem;
margin-top: 4px;
}
.wpcf7-form .wpcf7-response-output {
margin: var(--mspi-spacing-md) 0;
padding: var(--mspi-spacing-sm) var(--mspi-spacing-md);
border-radius: var(--mspi-radius-md);
}
.wpcf7-form.sent .wpcf7-response-output {
background: rgba(22, 163, 74, 0.1);
border-color: #16A34A;
color: #16A34A;
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
background: rgba(220, 38, 38, 0.1);
border-color: #DC2626;
color: #DC2626;
} .wpcf7-form input[type="submit"],
.wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2rem;
font-family: var(--mspi-font-heading);
font-weight: 600;
font-size: 1rem;
border: none;
border-radius: var(--mspi-radius-full);
cursor: pointer;
transition: all var(--mspi-transition-normal);
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-primary-light));
color: var(--mspi-white);
box-shadow: 0 4px 16px rgba(233, 30, 156, 0.3);
width: 100%;
margin-top: var(--mspi-spacing-sm);
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 28px rgba(233, 30, 156, 0.45);
}
.wpcf7-form input[type="submit"]:active,
.wpcf7-submit:active {
transform: translateY(-1px) scale(0.98);
box-shadow: 0 4px 12px rgba(233, 30, 156, 0.3);
} .wpcf7-form label {
display: block;
font-weight: 600;
color: var(--mspi-secondary);
margin-bottom: var(--mspi-spacing-xs);
font-size: 0.9375rem;
} .wpcf7-form .wpcf7-checkbox {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mspi-spacing-xs) var(--mspi-spacing-md);
}
.wpcf7-form .wpcf7-radio {
display: flex;
flex-wrap: wrap;
gap: var(--mspi-spacing-xs) var(--mspi-spacing-md);
}
.wpcf7-form .wpcf7-list-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.wpcf7-form .wpcf7-list-item input {
width: 18px;
height: 18px;
accent-color: var(--mspi-primary);
} .wpcf7-spinner {
margin-left: var(--mspi-spacing-sm);
} .mspi-contact-info {
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-md);
}
.mspi-contact-card {
background: var(--mspi-white);
border-radius: var(--mspi-radius-lg);
padding: var(--mspi-spacing-lg);
box-shadow: var(--mspi-shadow-sm);
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--mspi-spacing-sm);
row-gap: var(--mspi-spacing-xs);
}
.mspi-contact-card--cta {
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-primary-dark));
color: var(--mspi-white);
}
.mspi-contact-card__icon {
width: 48px;
height: 48px;
background: rgba(233, 30, 156, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.mspi-contact-card--cta .mspi-contact-card__icon {
background: rgba(255, 255, 255, 0.2);
}
.mspi-contact-card__title {
font-size: 1.125rem;
margin: 0;
color: var(--mspi-secondary);
align-self: center;
}
.mspi-contact-card--cta .mspi-contact-card__title {
color: var(--mspi-white);
}
.mspi-contact-card__text {
grid-column: 1 / -1;
color: var(--mspi-text-light);
font-size: 0.9375rem;
margin-bottom: 0;
}
.mspi-contact-card--cta .mspi-contact-card__text {
color: rgba(255, 255, 255, 0.9);
}
.mspi-contact-card__link {
grid-column: 1 / -1;
display: inline-block;
font-weight: 600;
font-size: 1.125rem;
color: var(--mspi-secondary);
margin-top: var(--mspi-spacing-xs);
}
.mspi-contact-card--cta .mspi-contact-card__link {
color: var(--mspi-white);
}
.mspi-contact-card__link:hover {
color: var(--mspi-primary);
}
.mspi-contact-card--cta .mspi-contact-card__link:hover {
opacity: 0.9;
color: var(--mspi-white);
} .mspi-hours-list {
grid-column: 1 / -1;
list-style: none;
margin: 0;
padding: 0;
}
.mspi-hours-list li {
display: flex;
justify-content: space-between;
padding: var(--mspi-spacing-xs) 0;
border-bottom: 1px solid rgba(26, 26, 26, 0.1);
font-size: 0.9375rem;
}
.mspi-hours-list li:last-child {
border-bottom: none;
}
.mspi-hours-list li span:first-child {
color: var(--mspi-text-light);
}
.mspi-hours-list li span:last-child {
font-weight: 600;
color: var(--mspi-secondary);
} .mspi-social-links {
grid-column: 1 / -1;
display: flex;
gap: var(--mspi-spacing-sm);
margin-top: var(--mspi-spacing-sm);
}
.mspi-social-links a {
width: 44px;
height: 44px;
background: rgba(233, 30, 156, 0.1);
border-radius: var(--mspi-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--mspi-primary);
font-weight: 600;
transition: all var(--mspi-transition-fast);
}
.mspi-social-links a:hover {
background: var(--mspi-primary);
color: var(--mspi-white);
transform: translateY(-2px);
} .mspi-map-section {
padding: 0 0 6rem;
}
.mspi-map-wrapper {
background: var(--mspi-white);
border-radius: var(--mspi-radius-xl);
overflow: hidden;
box-shadow: var(--mspi-shadow-md);
}
.mspi-map-embed {
height: 300px;
background: linear-gradient(135deg, rgba(255, 107, 194, 0.1), rgba(233, 30, 156, 0.1));
}
.mspi-map-embed iframe {
width: 100%;
height: 100%;
border: none;
}
.mspi-map-info {
padding: var(--mspi-spacing-lg);
display: grid;
gap: var(--mspi-spacing-md);
}
.mspi-map-info__item {
display: flex;
align-items: flex-start;
gap: var(--mspi-spacing-sm);
}
.mspi-map-info__icon {
width: 40px;
height: 40px;
background: rgba(233, 30, 156, 0.1);
border-radius: var(--mspi-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--mspi-primary);
flex-shrink: 0;
}
.mspi-map-info__content h4 {
font-size: 1rem;
margin-bottom: 2px;
color: var(--mspi-secondary);
}
.mspi-map-info__content p {
font-size: 0.9375rem;
color: var(--mspi-text-light);
margin-bottom: 0;
}
.mspi-map-info__directions {
display: inline-flex;
align-items: center;
gap: var(--mspi-spacing-xs);
font-weight: 600;
color: var(--mspi-primary);
margin-top: var(--mspi-spacing-xs);
}
.mspi-map-info__directions:hover {
gap: var(--mspi-spacing-sm);
} .mspi-faq-section {
padding: var(--mspi-spacing-2xl) 0 6rem;
background: var(--mspi-white);
}
.mspi-faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-sm);
}
.mspi-faq-item {
background: var(--mspi-background);
border-radius: var(--mspi-radius-md);
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.mspi-faq-item:hover {
box-shadow: var(--mspi-shadow-md);
transform: translateY(-2px);
}
.mspi-faq-item__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mspi-spacing-sm);
padding: var(--mspi-spacing-md);
cursor: pointer;
font-weight: 600;
color: var(--mspi-secondary);
transition: color 0.2s ease, background 0.2s ease;
}
.mspi-faq-item__question:hover {
color: var(--mspi-primary);
background: rgba(233, 30, 156, 0.03);
}
.mspi-faq-item__icon {
width: 24px;
height: 24px;
background: rgba(233, 30, 156, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--mspi-primary);
font-size: 1rem;
flex-shrink: 0;
transition: transform var(--mspi-transition-base);
}
.mspi-faq-item--open .mspi-faq-item__icon {
transform: rotate(45deg);
}
.mspi-faq-item__answer {
padding: 0 var(--mspi-spacing-md) var(--mspi-spacing-md);
color: var(--mspi-text-light);
display: none;
}
.mspi-faq-item--open .mspi-faq-item__answer {
display: block;
} .mspi-btn--full {
width: 100%;
} @media (min-width: 768px) {
.mspi-contact-grid {
grid-template-columns: 1fr 380px;
}
.mspi-form-row {
grid-template-columns: 1fr 1fr;
}
.mspi-map-embed {
height: 400px;
}
.mspi-map-info {
grid-template-columns: 1fr 1fr;
}
}  .mspi-blog-hero {
background: linear-gradient(135deg, rgba(233, 30, 156, 0.05) 0%, rgba(255, 107, 194, 0.05) 100%);
padding: 8rem 0 4rem;
text-align: center;
position: relative;
}
.mspi-blog-hero--has-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 320px;
display: flex;
align-items: center;
padding-bottom: 3rem;
}
.mspi-blog-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(26, 26, 26, 0.5) 0%,
rgba(233, 30, 156, 0.25) 40%,
rgba(240, 245, 250, 0.7) 70%,
rgba(240, 245, 250, 1) 90%
);
pointer-events: none;
}
.mspi-blog-hero--has-bg .mspi-container {
position: relative;
z-index: 1;
}
.mspi-blog-hero--has-bg .mspi-blog-hero__title {
color: var(--mspi-white);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.mspi-blog-hero--has-bg .mspi-blog-hero__desc {
color: var(--mspi-white);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
font-weight: 500;
}
.mspi-blog-hero--has-bg .mspi-breadcrumb__list {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
}
.mspi-blog-hero--has-bg .mspi-breadcrumb__list a,
.mspi-blog-hero--has-bg .mspi-breadcrumb__sep {
color: rgba(255, 255, 255, 0.8);
}
.mspi-blog-hero--has-bg .mspi-breadcrumb__current {
color: var(--mspi-white);
}
@media (max-width: 767px) {
.mspi-blog-hero {
padding: calc(56px + var(--mspi-spacing-sm)) 0 var(--mspi-spacing-md);
}
.mspi-blog-hero--has-bg {
min-height: 240px;
}
}
.mspi-blog-hero__title {
font-family: var(--mspi-font-heading);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
color: var(--mspi-secondary);
margin-bottom: var(--mspi-spacing-sm);
}
.mspi-blog-hero__desc {
color: var(--mspi-text-light);
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
} .mspi-blog-section--no-hero {
padding-top: 7rem;
}
@media (max-width: 767px) {
.mspi-blog-section--no-hero {
padding-top: calc(56px + var(--mspi-spacing-md));
}
} .mspi-blog-header {
text-align: center;
margin-bottom: var(--mspi-spacing-xl);
padding-top: var(--mspi-spacing-md);
}
.mspi-blog-header__title {
font-family: var(--mspi-font-heading);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
color: var(--mspi-secondary);
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-blog-header__desc {
color: var(--mspi-text-light);
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
} .mspi-blog-section {
padding: 2rem 0 6rem;
}
.mspi-blog-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--mspi-spacing-lg);
}
@media (min-width: 768px) {
.mspi-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.mspi-blog-grid {
grid-template-columns: repeat(3, 1fr);
}
} .mspi-blog-card__category {
display: inline-block;
width: fit-content;
background: rgba(233, 30, 156, 0.1);
color: var(--mspi-primary);
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mspi-blog-card__meta {
display: flex;
align-items: center;
gap: var(--mspi-spacing-sm);
font-size: 0.8125rem;
color: var(--mspi-text-light);
padding-top: var(--mspi-spacing-sm);
border-top: 1px solid rgba(26, 26, 26, 0.1);
}
.mspi-blog-card__date {
display: flex;
align-items: center;
gap: 0.25rem;
}
.mspi-blog-card__read-more {
margin-left: auto;
color: var(--mspi-primary);
font-weight: 600;
transition: var(--mspi-transition-smooth);
display: inline-flex;
align-items: center;
gap: 4px;
}
.mspi-blog-card__read-more:hover {
color: var(--mspi-primary-dark);
gap: 8px;
} .mspi-blog-categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--mspi-spacing-sm);
margin-bottom: var(--mspi-spacing-xl);
}
.mspi-category-pill {
display: inline-block;
padding: 0.5rem 1.25rem;
background: var(--mspi-white);
border: 1px solid rgba(26, 26, 26, 0.15);
border-radius: var(--mspi-radius-full);
color: var(--mspi-text);
font-size: 0.875rem;
font-weight: 500;
transition: var(--mspi-transition-smooth);
}
.mspi-category-pill:hover {
background: rgba(233, 30, 156, 0.1);
border-color: var(--mspi-primary);
color: var(--mspi-primary);
transform: translateY(-2px);
}
.mspi-category-pill--active {
background: var(--mspi-primary);
border-color: var(--mspi-primary);
color: var(--mspi-white);
box-shadow: 0 4px 12px rgba(233, 30, 156, 0.3);
} .mspi-single-post {
padding: 8rem 0 6rem;
}
.mspi-post-header {
max-width: 800px;
margin: 0 auto var(--mspi-spacing-xl);
text-align: center;
}
.mspi-post-header__category {
display: inline-block;
background: rgba(233, 30, 156, 0.1);
color: var(--mspi-primary);
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mspi-post-header__title {
font-family: var(--mspi-font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
color: var(--mspi-secondary);
margin-bottom: var(--mspi-spacing-md);
line-height: 1.3;
}
.mspi-post-header__meta {
display: flex;
justify-content: center;
gap: var(--mspi-spacing-md);
color: var(--mspi-text-light);
font-size: 0.9375rem;
} .mspi-post-content {
max-width: 800px;
margin: 0 auto;
}
.mspi-post-content h2 {
font-family: var(--mspi-font-heading);
font-size: 1.5rem;
font-weight: 600;
color: var(--mspi-secondary);
margin: var(--mspi-spacing-xl) 0 var(--mspi-spacing-md);
}
.mspi-post-content h3 {
font-family: var(--mspi-font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--mspi-secondary);
margin: var(--mspi-spacing-lg) 0 var(--mspi-spacing-sm);
}
.mspi-post-content p {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--mspi-text);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-post-content ul,
.mspi-post-content ol {
margin: var(--mspi-spacing-md) 0;
padding-left: var(--mspi-spacing-lg);
}
.mspi-post-content li {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--mspi-text);
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-post-content strong {
color: var(--mspi-secondary);
font-weight: 600;
}
.mspi-post-content blockquote {
border-left: 4px solid var(--mspi-primary);
padding: var(--mspi-spacing-md) var(--mspi-spacing-lg);
background: rgba(233, 30, 156, 0.05);
margin: var(--mspi-spacing-lg) 0;
border-radius: 0 var(--mspi-radius-md) var(--mspi-radius-md) 0;
}
.mspi-post-content blockquote p {
font-style: italic;
margin-bottom: 0;
} .mspi-post-nav {
max-width: 800px;
margin: var(--mspi-spacing-xl) auto 0;
padding-top: var(--mspi-spacing-xl);
border-top: 1px solid rgba(26, 26, 26, 0.1);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mspi-spacing-md);
}
.mspi-post-nav__item {
padding: var(--mspi-spacing-md);
background: var(--mspi-white);
border-radius: var(--mspi-radius-md);
transition: all var(--mspi-transition-fast);
}
.mspi-post-nav__item:hover {
background: rgba(233, 30, 156, 0.05);
}
.mspi-post-nav__item--next {
text-align: right;
}
.mspi-post-nav__label {
font-size: 0.75rem;
text-transform: uppercase;
color: var(--mspi-text-light);
margin-bottom: 0.25rem;
}
.mspi-post-nav__title {
font-weight: 600;
color: var(--mspi-secondary);
font-size: 0.9375rem;
}
.mspi-post-nav__title:hover {
color: var(--mspi-primary);
} .mspi-related-posts {
max-width: 1200px;
margin: var(--mspi-spacing-2xl) auto 0;
padding: var(--mspi-spacing-xl) 0;
border-top: 1px solid rgba(26, 26, 26, 0.1);
}
.mspi-related-posts__title {
font-family: var(--mspi-font-heading);
font-size: 1.5rem;
font-weight: 600;
color: var(--mspi-secondary);
text-align: center;
margin-bottom: var(--mspi-spacing-lg);
} .ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
background: transparent;
padding: 0;
}
body.blog .site-content,
body.archive .site-content,
body.single-post .site-content {
background: var(--mspi-background);
}
.ast-separate-container .ast-article-post {
margin-bottom: 0;
} body.blog .entry-header,
body.archive .entry-header,
body.blog .ast-archive-description,
body.archive .ast-archive-description {
display: none;
} .mspi-pagination {
display: flex;
justify-content: center;
gap: var(--mspi-spacing-xs);
margin-top: var(--mspi-spacing-xl);
}
.mspi-pagination a,
.mspi-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--mspi-spacing-sm);
background: var(--mspi-white);
border: 1px solid rgba(26, 26, 26, 0.15);
border-radius: var(--mspi-radius-md);
color: var(--mspi-text);
font-weight: 500;
transition: all var(--mspi-transition-fast);
}
.mspi-pagination a:hover {
background: var(--mspi-primary);
border-color: var(--mspi-primary);
color: var(--mspi-white);
}
.mspi-pagination .current {
background: var(--mspi-primary);
border-color: var(--mspi-primary);
color: var(--mspi-white);
}  .mspi-single-page {
background: var(--mspi-background);
} .mspi-post-hero {
padding: 2rem 0 4rem;
}
.mspi-post-hero__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--mspi-spacing-xl);
align-items: center;
}
@media (min-width: 1024px) {
.mspi-post-hero__inner {
grid-template-columns: 1fr 1fr;
}
}
.mspi-post-hero__badge {
display: inline-block;
background: rgba(233, 30, 156, 0.1);
color: var(--mspi-primary);
font-size: 0.8125rem;
font-weight: 600;
padding: 0.375rem 1rem;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-md);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--mspi-transition-fast);
}
.mspi-post-hero__badge:hover {
background: var(--mspi-primary);
color: var(--mspi-white);
}
.mspi-post-hero__title {
font-family: var(--mspi-font-heading);
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
color: var(--mspi-secondary);
line-height: 1.2;
margin-bottom: var(--mspi-spacing-md);
}
.mspi-post-hero__desc {
font-size: 1.125rem;
color: var(--mspi-text-light);
line-height: 1.7;
margin-bottom: var(--mspi-spacing-lg);
}
.mspi-post-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--mspi-spacing-md);
}
.mspi-post-hero__image {
border-radius: var(--mspi-radius-xl);
overflow: hidden;
box-shadow: var(--mspi-shadow-lg);
max-height: 400px;
}
.mspi-post-hero__image img {
width: 100%;
height: 100%;
max-height: 400px;
object-fit: cover;
object-position: center;
display: block;
}
.mspi-post-hero__placeholder {
width: 100%;
aspect-ratio: 16/10;
background: linear-gradient(135deg, rgba(233, 30, 156, 0.1), rgba(255, 107, 194, 0.1));
border-radius: var(--mspi-radius-xl);
} .mspi-post-details {
padding: 0 0 4rem;
}
.mspi-post-details__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--mspi-spacing-xl);
}
@media (min-width: 1024px) {
.mspi-post-details__grid {
grid-template-columns: 1fr 380px;
}
} .mspi-post-details__main {
background: var(--mspi-white);
border-radius: var(--mspi-radius-lg);
padding: var(--mspi-spacing-xl);
box-shadow: var(--mspi-shadow-sm);
}
.mspi-post-details__main .mspi-content-section h2 {
font-family: var(--mspi-font-heading);
font-size: 1.5rem;
font-weight: 600;
color: var(--mspi-secondary);
margin: var(--mspi-spacing-xl) 0 var(--mspi-spacing-md);
}
.mspi-post-details__main .mspi-content-section h2:first-child {
margin-top: 0;
}
.mspi-post-details__main .mspi-content-section h3 {
font-family: var(--mspi-font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--mspi-secondary);
margin: var(--mspi-spacing-lg) 0 var(--mspi-spacing-sm);
}
.mspi-post-details__main .mspi-content-section p {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--mspi-text);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-post-details__main .mspi-content-section ul,
.mspi-post-details__main .mspi-content-section ol {
margin: var(--mspi-spacing-md) 0;
padding-left: var(--mspi-spacing-lg);
}
.mspi-post-details__main .mspi-content-section li {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--mspi-text);
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-post-details__main .mspi-content-section strong {
color: var(--mspi-secondary);
font-weight: 600;
} .mspi-post-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--mspi-spacing-xs);
padding-top: var(--mspi-spacing-lg);
margin-top: var(--mspi-spacing-xl);
border-top: 1px solid rgba(26, 26, 26, 0.1);
}
.mspi-post-tags__label {
font-weight: 600;
color: var(--mspi-secondary);
margin-right: var(--mspi-spacing-xs);
}
.mspi-post-tags__item {
display: inline-block;
background: rgba(255, 107, 194, 0.1);
color: var(--mspi-accent);
font-size: 0.8125rem;
padding: 0.25rem 0.75rem;
border-radius: var(--mspi-radius-full);
transition: all var(--mspi-transition-fast);
}
.mspi-post-tags__item:hover {
background: var(--mspi-accent);
color: var(--mspi-white);
} .mspi-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mspi-spacing-md);
margin-top: var(--mspi-spacing-xl);
padding-top: var(--mspi-spacing-lg);
border-top: 1px solid rgba(26, 26, 26, 0.1);
}
.mspi-post-nav__item {
display: block;
padding: var(--mspi-spacing-md);
background: rgba(233, 30, 156, 0.03);
border-radius: var(--mspi-radius-md);
transition: all var(--mspi-transition-fast);
}
.mspi-post-nav__item:hover {
background: rgba(233, 30, 156, 0.08);
}
.mspi-post-nav__item--next {
text-align: right;
}
.mspi-post-nav__label {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
color: var(--mspi-text-light);
margin-bottom: 0.25rem;
letter-spacing: 0.5px;
}
.mspi-post-nav__title {
display: block;
font-weight: 600;
color: var(--mspi-secondary);
font-size: 0.9375rem;
line-height: 1.4;
} .mspi-post-details__sidebar {
display: flex;
flex-direction: column;
gap: var(--mspi-spacing-lg);
} .mspi-sidebar-card {
background: var(--mspi-white);
border-radius: var(--mspi-radius-lg);
padding: var(--mspi-spacing-lg);
box-shadow: var(--mspi-shadow-sm);
}
.mspi-sidebar-card--cta {
background: linear-gradient(135deg, var(--mspi-secondary), var(--mspi-secondary-light));
color: var(--mspi-white);
}
.mspi-sidebar-card__title {
font-family: var(--mspi-font-heading);
font-size: 1.125rem;
font-weight: 600;
color: var(--mspi-secondary);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-sidebar-card--cta .mspi-sidebar-card__title {
color: var(--mspi-white);
}
.mspi-sidebar-card__desc {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: var(--mspi-spacing-md);
}
.mspi-sidebar-card__list {
list-style: none;
margin: 0 0 var(--mspi-spacing-lg);
padding: 0;
}
.mspi-sidebar-card__list li {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.9);
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mspi-sidebar-card__list li:last-child {
border-bottom: none;
} .mspi-author-card {
display: flex;
gap: var(--mspi-spacing-sm);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-author-card__avatar {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--mspi-white);
font-weight: 700;
font-size: 1.125rem;
flex-shrink: 0;
}
.mspi-author-card__info h4 {
font-family: var(--mspi-font-heading);
font-size: 1rem;
font-weight: 600;
color: var(--mspi-secondary);
margin-bottom: 0.25rem;
}
.mspi-author-card__info p {
font-size: 0.875rem;
color: var(--mspi-text-light);
line-height: 1.5;
margin: 0;
}
.mspi-author-card__social {
display: flex;
gap: var(--mspi-spacing-sm);
}
.mspi-author-card__social a {
font-size: 0.875rem;
color: var(--mspi-primary);
font-weight: 500;
transition: color var(--mspi-transition-fast);
}
.mspi-author-card__social a:hover {
color: var(--mspi-primary-dark);
} .mspi-sidebar-categories {
list-style: none;
margin: 0;
padding: 0;
}
.mspi-sidebar-categories li {
border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.mspi-sidebar-categories li:last-child {
border-bottom: none;
}
.mspi-sidebar-categories a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
color: var(--mspi-text);
font-size: 0.9375rem;
transition: color var(--mspi-transition-fast);
}
.mspi-sidebar-categories a:hover {
color: var(--mspi-primary);
}
.mspi-sidebar-categories span {
background: rgba(233, 30, 156, 0.1);
color: var(--mspi-primary);
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: var(--mspi-radius-sm);
} .mspi-sidebar-contact__item {
display: flex;
align-items: center;
gap: var(--mspi-spacing-sm);
padding: 0.5rem 0;
}
.mspi-sidebar-contact__item span {
font-size: 1.25rem;
}
.mspi-sidebar-contact__item a {
color: var(--mspi-text);
font-size: 0.9375rem;
transition: color var(--mspi-transition-fast);
}
.mspi-sidebar-contact__item a:hover {
color: var(--mspi-primary);
} .mspi-related-section {
padding: var(--mspi-spacing-2xl) 0;
background: var(--mspi-white);
}
.mspi-related-section .mspi-section-header {
margin-bottom: var(--mspi-spacing-xl);
}  body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.02em;
}
p {
letter-spacing: 0.01em;
} .mspi-service-card,
.mspi-testimonial-card,
.mspi-blog-card,
.mspi-sidebar-card {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.mspi-service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(233, 30, 156, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
}
.mspi-testimonial-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}
.mspi-blog-card:hover {
transform: translateY(-6px);
} .mspi-service-card--featured {
position: relative;
}
.mspi-service-card--featured::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
border-radius: calc(var(--mspi-radius-lg) + 2px);
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}
.mspi-service-card--featured:hover::before {
opacity: 1;
} .mspi-btn--primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.mspi-btn--primary:hover::before {
left: 100%;
} .mspi-service-card__link,
.mspi-blog-card__read-more {
position: relative;
}
.mspi-service-card__link::after,
.mspi-blog-card__read-more::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--mspi-primary);
transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mspi-service-card__link:hover::after,
.mspi-blog-card__read-more:hover::after {
width: 100%;
} .mspi-stat__number {
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} .mspi-blog-card__image img,
.mspi-about__image img {
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mspi-blog-card:hover .mspi-blog-card__image img,
.mspi-about__image:hover img {
transform: scale(1.05);
} .mspi-btn:focus-visible,
a:focus-visible {
outline: 2px solid var(--mspi-primary);
outline-offset: 3px;
} .mspi-testimonial-card__avatar {
transition: box-shadow 0.3s ease;
}
.mspi-testimonial-card:hover .mspi-testimonial-card__avatar {
box-shadow: 0 0 0 3px var(--mspi-primary-light);
} .mspi-hero__badge {
animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(233, 30, 156, 0.3); }
50% { box-shadow: 0 0 0 8px rgba(233, 30, 156, 0); }
} .mspi-feature-item__icon,
.mspi-meta-item__icon,
.mspi-service-card__icon {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mspi-feature-item:hover .mspi-feature-item__icon,
.mspi-service-card:hover .mspi-service-card__icon {
transform: scale(1.15);
} .mspi-cta {
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
} .mspi-nav a {
position: relative;
}
.mspi-nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
width: 0;
height: 2px;
background: var(--mspi-primary);
transition: width 0.3s ease, left 0.3s ease;
}
.mspi-nav a:hover::after,
.mspi-nav a.current::after {
width: 100%;
left: 0;
}  .mspi-service-card,
.mspi-testimonial-card,
.mspi-coach-card,
.mspi-blog-card,
.mspi-faq-item {
will-change: transform;
}
.mspi-btn--primary,
.mspi-float-widget__toggle {
will-change: transform, box-shadow;
} @media (hover: none) {
.mspi-service-card,
.mspi-testimonial-card,
.mspi-coach-card,
.mspi-blog-card,
.mspi-faq-item,
.mspi-btn--primary,
.mspi-float-widget__toggle {
will-change: auto;
} .mspi-testimonial-card__rating svg {
transform: scale(1);
}
}  ::selection {
background: var(--mspi-primary);
color: var(--mspi-white);
} .mspi-service-card,
.mspi-testimonial-card,
.mspi-coach-card {
transition: transform 0.4s var(--mspi-ease-out-expo),
box-shadow 0.4s var(--mspi-ease-out-expo);
}
.mspi-service-card:hover,
.mspi-testimonial-card:hover {
transform: translateY(-8px);
} .mspi-link-animated {
position: relative;
display: inline-block;
}
.mspi-link-animated::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s var(--mspi-ease-out-expo);
}
.mspi-link-animated:hover::after {
transform: scaleX(1);
transform-origin: left;
} .mspi-stagger-item {
opacity: 0;
transform: translateY(20px);
}
[data-aos="stagger"].aos-animate .mspi-stagger-item:nth-child(1) { animation: fadeInUp 0.5s 0.1s forwards; }
[data-aos="stagger"].aos-animate .mspi-stagger-item:nth-child(2) { animation: fadeInUp 0.5s 0.2s forwards; }
[data-aos="stagger"].aos-animate .mspi-stagger-item:nth-child(3) { animation: fadeInUp 0.5s 0.3s forwards; }
[data-aos="stagger"].aos-animate .mspi-stagger-item:nth-child(4) { animation: fadeInUp 0.5s 0.4s forwards; } @keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.mspi-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--mspi-radius-md);
} .mspi-glow-hover {
transition: box-shadow 0.3s ease;
}
.mspi-glow-hover:hover {
box-shadow: 0 0 30px rgba(232, 37, 107, 0.3);
} @keyframes gentlePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
.mspi-btn--primary:not(:hover) {
animation: gentlePulse 3s ease-in-out infinite;
}
.mspi-btn--primary:hover {
animation: none;
} .mspi-scroll-indicator {
animation: bounceDown 2s ease-in-out infinite;
}
@keyframes bounceDown {
0%, 100% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(10px); opacity: 0.5; }
} .mspi-section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--mspi-primary), transparent);
margin: 0 auto;
max-width: 200px;
} @keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.mspi-float {
animation: float 4s ease-in-out infinite;
} .mspi-float-widget {
position: fixed;
bottom: 84px;
right: 24px;
z-index: 9998;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: 12px;
} .mspi-float-widget__toggle {
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background: var(--mspi-primary);
color: var(--mspi-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(232, 37, 107, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
position: relative;
z-index: 2;
padding: 0;
}
.mspi-float-widget__toggle:hover {
transform: scale(1.08);
box-shadow: 0 6px 28px rgba(232, 37, 107, 0.5);
background: var(--mspi-primary-dark);
}
.mspi-float-widget__icon {
width: 26px;
height: 26px;
transition: opacity 0.3s ease, transform 0.3s ease;
position: absolute;
}
.mspi-float-widget__icon--chat {
opacity: 1;
transform: rotate(0deg);
}
.mspi-float-widget__icon--close {
opacity: 0;
transform: rotate(-90deg);
} .mspi-float-widget--open .mspi-float-widget__icon--chat {
opacity: 0;
transform: rotate(90deg);
}
.mspi-float-widget--open .mspi-float-widget__icon--close {
opacity: 1;
transform: rotate(0deg);
} .mspi-float-widget__options {
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.9);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
pointer-events: none;
}
.mspi-float-widget--open .mspi-float-widget__options {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
} .mspi-float-widget--bottom {
flex-direction: column-reverse;
}
.mspi-float-widget--bottom .mspi-float-widget__options {
transform: translateY(-20px) scale(0.9);
}
.mspi-float-widget--bottom.mspi-float-widget--open .mspi-float-widget__options {
transform: translateY(0) scale(1);
} .mspi-float-widget__btn {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 12px;
border-radius: 28px;
color: var(--mspi-white);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
}
.mspi-float-widget__btn:hover {
transform: translateX(-4px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
color: var(--mspi-white);
}
.mspi-float-widget__btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.mspi-float-widget__btn span {
letter-spacing: 0.02em;
} .mspi-float-widget--open .mspi-float-widget__btn:nth-child(1) {
transition-delay: 0.05s;
}
.mspi-float-widget--open .mspi-float-widget__btn:nth-child(2) {
transition-delay: 0.1s;
}
.mspi-float-widget--open .mspi-float-widget__btn:nth-child(3) {
transition-delay: 0.15s;
} .mspi-float-widget__btn--phone {
background: var(--mspi-primary);
}
.mspi-float-widget__btn--phone:hover {
background: var(--mspi-primary-dark);
} .mspi-float-widget__btn--zalo {
background: #0068ff;
}
.mspi-float-widget__btn--zalo:hover {
background: #0054cc;
}
.mspi-float-widget__btn--zalo svg {
width: 28px;
height: 10px;
} .mspi-float-widget__btn--messenger {
background: linear-gradient(135deg, #00b2ff, #006aff, #a033ff);
}
.mspi-float-widget__btn--messenger:hover {
background: linear-gradient(135deg, #0099dd, #0055dd, #8822dd);
} .mspi-float-widget__toggle::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--mspi-primary);
z-index: -1;
animation: widget-pulse 2s ease-out infinite;
}
.mspi-float-widget--open .mspi-float-widget__toggle::after {
animation: none;
}
@keyframes widget-pulse {
0% {
transform: scale(1);
opacity: 0.5;
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(1.5);
opacity: 0;
}
} @media (max-width: 767px) {
.mspi-float-widget {
bottom: 72px;
right: 16px;
}
.mspi-float-widget__toggle {
width: 48px;
height: 48px;
}
.mspi-float-widget__icon {
width: 24px;
height: 24px;
}
.mspi-float-widget__btn {
padding: 8px 14px 8px 10px;
font-size: 13px;
}
.mspi-float-widget__btn svg {
width: 20px;
height: 20px;
}
.mspi-float-widget__btn--zalo svg {
width: 24px;
height: 9px;
}
} #ast-scroll-top {
width: 52px !important;
height: 52px !important;
border-radius: 50% !important;
background: var(--mspi-primary) !important;
color: var(--mspi-white) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
right: 24px !important;
bottom: 24px !important;
line-height: 52px !important;
text-align: center !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, opacity 0.3s ease !important;
}
#ast-scroll-top:hover {
transform: scale(1.1) !important;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
background: var(--mspi-primary-dark) !important;
}
#ast-scroll-top svg {
width: 24px !important;
height: 24px !important;
fill: currentColor !important;
}
@media (max-width: 767px) {
#ast-scroll-top {
width: 48px !important;
height: 48px !important;
right: 16px !important;
bottom: 16px !important;
line-height: 48px !important;
}
#ast-scroll-top svg {
width: 20px !important;
height: 20px !important;
}
} body.page:not(.page-template):not(.mspi-service-page) .entry-header,
body.page-template-default:not(.mspi-service-page) .entry-header {
text-align: center;
margin-top: 8.5em;
}
body.page:not(.page-template):not(.mspi-service-page) .entry-content,
body.page-template-default:not(.mspi-service-page) .entry-content {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--mspi-spacing-md);
} body.page:not(.page-template):not(.mspi-service-page) .entry-content[data-ast-blocks-layout] > *,
body.page-template-default:not(.mspi-service-page) .entry-content[data-ast-blocks-layout] > * {
max-width: 100%;
} @media (max-width: 767px) {
body.page:not(.page-template):not(.mspi-service-page) .entry-header,
body.page-template-default:not(.mspi-service-page) .entry-header {
margin-top: 5em;
}
body.page:not(.page-template):not(.mspi-service-page) .entry-content,
body.page-template-default:not(.mspi-service-page) .entry-content {
padding: 0 var(--mspi-spacing-sm);
}
} .mspi-404-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--mspi-secondary) 0%, var(--mspi-secondary-light) 100%);
position: relative;
overflow: hidden;
padding: 6rem 0;
} .mspi-404__bg-elements {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.mspi-404__circle {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(232, 37, 107, 0.15) 0%, transparent 70%);
}
.mspi-404__circle--1 {
width: 600px;
height: 600px;
top: -200px;
right: -100px;
animation: float404 8s ease-in-out infinite;
}
.mspi-404__circle--2 {
width: 400px;
height: 400px;
bottom: -100px;
left: -100px;
animation: float404 6s ease-in-out infinite reverse;
}
.mspi-404__circle--3 {
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: pulse404 4s ease-in-out infinite;
}
@keyframes float404 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-30px) rotate(5deg); }
}
@keyframes pulse404 {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
} .mspi-404__content {
position: relative;
z-index: 1;
text-align: center;
max-width: 600px;
margin: 0 auto;
} .mspi-404__icon {
margin-bottom: var(--mspi-spacing-lg);
animation: lift404 2s ease-in-out infinite;
}
.mspi-404__icon svg {
width: 120px;
height: 40px;
color: var(--mspi-primary);
}
@keyframes lift404 {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-10px) rotate(-5deg); }
75% { transform: translateY(-10px) rotate(5deg); }
} .mspi-404__number {
font-family: var(--mspi-font-heading);
font-size: clamp(8rem, 20vw, 14rem);
font-weight: 900;
line-height: 1;
margin: 0 0 var(--mspi-spacing-md);
display: flex;
justify-content: center;
gap: 0.1em;
}
.mspi-404__digit {
color: transparent;
-webkit-text-stroke: 3px var(--mspi-primary);
text-stroke: 3px var(--mspi-primary);
transition: all 0.3s ease;
display: inline-block;
}
.mspi-404__digit:hover {
color: var(--mspi-primary);
transform: scale(1.1);
}
.mspi-404__digit--center {
color: var(--mspi-primary);
-webkit-text-stroke: 0;
text-stroke: 0;
animation: heartbeat404 1.5s ease-in-out infinite;
}
@keyframes heartbeat404 {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
} .mspi-404__title {
font-family: var(--mspi-font-heading);
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 700;
color: var(--mspi-white);
margin: 0 0 var(--mspi-spacing-sm);
}
.mspi-404__desc {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.7;
margin: 0 0 var(--mspi-spacing-xl);
} .mspi-404__actions {
display: flex;
gap: var(--mspi-spacing-md);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--mspi-spacing-2xl);
}
.mspi-404__actions .mspi-btn {
display: inline-flex;
align-items: center;
gap: var(--mspi-spacing-xs);
padding: var(--mspi-spacing-sm) var(--mspi-spacing-lg);
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
}
.mspi-404__actions .mspi-btn--primary {
background: var(--mspi-primary);
color: var(--mspi-white);
border: 2px solid var(--mspi-primary);
}
.mspi-404__actions .mspi-btn--primary:hover {
background: var(--mspi-primary-dark);
border-color: var(--mspi-primary-dark);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(232, 37, 107, 0.4);
}
.mspi-404__actions .mspi-btn--outline {
background: transparent;
color: var(--mspi-white);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.mspi-404__actions .mspi-btn--outline:hover {
border-color: var(--mspi-primary);
color: var(--mspi-primary);
transform: translateY(-3px);
} .mspi-404__quote {
padding-top: var(--mspi-spacing-lg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mspi-404__quote p {
font-style: italic;
font-size: 1rem;
color: rgba(255, 255, 255, 0.5);
margin: 0;
} @media (max-width: 767px) {
.mspi-404-page {
padding: 5rem 0;
}
.mspi-404__icon svg {
width: 80px;
height: 28px;
}
.mspi-404__number {
-webkit-text-stroke-width: 2px;
}
.mspi-404__digit {
-webkit-text-stroke-width: 2px;
}
.mspi-404__desc {
font-size: 1rem;
}
.mspi-404__actions {
flex-direction: column;
align-items: center;
}
.mspi-404__actions .mspi-btn {
width: 100%;
max-width: 280px;
justify-content: center;
}
}  .mspi-courses-hero {
position: relative;
padding: calc(100px + var(--mspi-spacing-2xl)) 0 var(--mspi-spacing-2xl);
text-align: center;
background: linear-gradient(135deg, #9A1547 0%, #6B0F33 50%, #3D0A1E 100%);
color: var(--mspi-white);
overflow: hidden;
}
@media (max-width: 767px) {
.mspi-courses-hero {
padding-top: calc(70px + var(--mspi-spacing-xl));
}
}
.mspi-courses-hero__bg {
position: absolute;
inset: 0;
background: url(//mspiwomenfitness.com/wp-content/themes/astra-child/images/khoa-hoc-bg.jpg) center/cover;
opacity: 0.15;
mix-blend-mode: luminosity;
}
.mspi-courses-hero__decor {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.1) 0%, transparent 30%),
radial-gradient(circle at 90% 10%, rgba(0, 0, 0, 0.2) 0%, transparent 40%);
pointer-events: none;
}
.mspi-courses-hero .mspi-container {
position: relative;
z-index: 1;
}
.mspi-courses-hero__label {
display: inline-flex;
align-items: center;
gap: var(--mspi-spacing-xs);
font-size: var(--mspi-text-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--mspi-white);
margin-bottom: var(--mspi-spacing-md);
padding: var(--mspi-spacing-xs) var(--mspi-spacing-md);
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--mspi-radius-full);
}
.mspi-courses-hero__title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
color: var(--mspi-white);
margin-bottom: var(--mspi-spacing-md);
line-height: 1.1;
}
.mspi-courses-hero__title span {
color: var(--mspi-white);
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.mspi-courses-hero__desc {
font-size: var(--mspi-text-lg);
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin: 0 auto var(--mspi-spacing-lg);
line-height: 1.7;
}
.mspi-courses-hero__cta {
margin-bottom: var(--mspi-spacing-2xl);
}
.mspi-btn--white {
background: var(--mspi-white);
color: var(--mspi-primary);
border: none;
font-weight: 600;
}
.mspi-btn--white:hover {
background: var(--mspi-secondary);
color: var(--mspi-white);
}
.mspi-courses-hero__stats {
display: flex;
justify-content: center;
gap: var(--mspi-spacing-lg);
}
.mspi-hero-stat {
display: flex;
align-items: center;
gap: var(--mspi-spacing-sm);
padding: var(--mspi-spacing-md) var(--mspi-spacing-lg);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--mspi-radius-lg);
transition: all 0.3s ease;
backdrop-filter: blur(4px);
}
.mspi-hero-stat:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
.mspi-hero-stat svg {
color: var(--mspi-white);
flex-shrink: 0;
}
.mspi-hero-stat__content {
text-align: left;
}
.mspi-hero-stat__number {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--mspi-white);
line-height: 1.2;
}
.mspi-hero-stat__label {
font-size: var(--mspi-text-sm);
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 767px) {
.mspi-courses-hero {
padding: calc(80px + var(--mspi-spacing-lg)) 0 var(--mspi-spacing-xl);
}
.mspi-courses-hero__title {
font-size: clamp(1.75rem, 6vw, 2.5rem);
}
.mspi-courses-hero__desc {
font-size: var(--mspi-text-base);
padding: 0 var(--mspi-spacing-sm);
}
.mspi-courses-hero__cta {
margin-bottom: var(--mspi-spacing-xl);
}
.mspi-courses-hero__stats {
flex-wrap: wrap;
gap: var(--mspi-spacing-xs);
justify-content: center;
}
.mspi-hero-stat {
padding: var(--mspi-spacing-sm);
min-width: 100px;
flex: 0 0 auto;
gap: var(--mspi-spacing-xs);
}
.mspi-hero-stat svg {
width: 20px;
height: 20px;
}
.mspi-hero-stat__number {
font-size: 1.25rem;
}
.mspi-hero-stat__label {
font-size: var(--mspi-text-xs);
}
.mspi-hero-stat__content {
text-align: center;
}
}
@media (max-width: 480px) {
.mspi-courses-hero {
padding-top: calc(70px + var(--mspi-spacing-md));
}
.mspi-courses-hero__label {
font-size: 0.6875rem;
letter-spacing: 1px;
padding: 6px 12px;
}
.mspi-courses-hero__stats {
gap: 6px;
}
.mspi-hero-stat {
padding: var(--mspi-spacing-xs) var(--mspi-spacing-sm);
min-width: 90px;
}
.mspi-btn--white.mspi-btn--lg {
padding: var(--mspi-spacing-sm) var(--mspi-spacing-lg);
font-size: var(--mspi-text-sm);
}
} .mspi-courses-featured {
padding: var(--mspi-section-padding) 0;
background: var(--mspi-background);
}
.mspi-courses-featured__slider {
margin-top: var(--mspi-spacing-lg);
} .mspi-courses-grid-section {
padding: var(--mspi-section-padding) 0;
}
.mspi-courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--mspi-spacing-xl);
margin-top: var(--mspi-spacing-xl);
}
.mspi-courses-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
.mspi-courses-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
.mspi-courses-grid {
gap: var(--mspi-spacing-lg);
}
}
@media (max-width: 640px) {
.mspi-courses-grid--3,
.mspi-courses-grid {
grid-template-columns: 1fr;
gap: var(--mspi-spacing-md);
}
.mspi-courses-grid {
margin-top: var(--mspi-spacing-lg);
}
.mspi-course-card__image {
aspect-ratio: 16/10;
}
.mspi-course-card__content {
padding: var(--mspi-spacing-sm) var(--mspi-spacing-md);
}
.mspi-course-card__title {
font-size: var(--mspi-text-base);
}
.mspi-course-card__meta {
font-size: var(--mspi-text-xs);
gap: var(--mspi-spacing-xs);
}
.mspi-course-card__footer {
flex-wrap: wrap;
gap: var(--mspi-spacing-xs);
}
.mspi-course-card__price {
font-size: var(--mspi-text-lg);
}
.mspi-course-card__footer .mspi-btn {
width: 100%;
justify-content: center;
}
.mspi-section-header__title {
font-size: var(--mspi-text-2xl);
}
.mspi-courses-grid-section {
padding: var(--mspi-spacing-xl) 0;
}
} .mspi-course-card {
background: var(--mspi-white);
border-radius: var(--mspi-radius-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
cursor: pointer;
}
.mspi-course-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(232, 37, 107, 0.12);
}
@media (prefers-reduced-motion: reduce) {
.mspi-course-card {
transition: none;
}
.mspi-course-card:hover {
transform: none;
}
}
.mspi-course-card__image {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: var(--mspi-background-alt);
}
.mspi-course-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.mspi-course-card:hover .mspi-course-card__image img {
transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
.mspi-course-card__image img {
transition: none;
}
.mspi-course-card:hover .mspi-course-card__image img {
transform: none;
}
}
.mspi-course-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--mspi-text-light);
opacity: 0.5;
}
.mspi-course-card__badge {
position: absolute;
padding: 4px 10px;
font-size: var(--mspi-text-xs);
font-weight: 600;
border-radius: var(--mspi-radius-sm);
}
.mspi-course-card__badge--duration {
bottom: var(--mspi-spacing-xs);
left: var(--mspi-spacing-xs);
background: rgba(0, 0, 0, 0.7);
color: var(--mspi-white);
}
.mspi-course-card__badge--free {
top: var(--mspi-spacing-xs);
right: var(--mspi-spacing-xs);
background: var(--mspi-primary);
color: var(--mspi-white);
}
.mspi-course-card__badge--featured {
top: var(--mspi-spacing-xs);
left: var(--mspi-spacing-xs);
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
color: #1a1a1a;
font-weight: 700;
}
.mspi-course-card__badge--featured svg {
fill: currentColor;
} .mspi-course-card--featured {
border: 2px solid transparent;
background: linear-gradient(var(--mspi-white), var(--mspi-white)) padding-box,
linear-gradient(135deg, #FFD700, var(--mspi-primary)) border-box;
box-shadow: 0 4px 20px rgba(232, 37, 107, 0.15);
}
.mspi-course-card--featured:hover {
box-shadow: 0 8px 30px rgba(232, 37, 107, 0.25);
}
.mspi-course-card__content {
padding: var(--mspi-spacing-md);
}
.mspi-course-card__level {
display: inline-block;
font-size: var(--mspi-text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 2px 8px;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-course-card__level--beginner {
background: rgba(52, 199, 89, 0.15);
color: #34c759;
}
.mspi-course-card__level--intermediate {
background: rgba(255, 149, 0, 0.15);
color: #ff9500;
}
.mspi-course-card__level--advanced {
background: rgba(255, 59, 48, 0.15);
color: #ff3b30;
}
.mspi-course-card__title {
font-size: var(--mspi-text-lg);
font-weight: 600;
margin-bottom: var(--mspi-spacing-xs);
line-height: 1.4;
}
.mspi-course-card__title a {
color: var(--mspi-secondary);
text-decoration: none;
}
.mspi-course-card__title a:hover {
color: var(--mspi-primary);
}
.mspi-course-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--mspi-spacing-sm);
font-size: var(--mspi-text-sm);
color: var(--mspi-text-light);
margin-bottom: var(--mspi-spacing-sm);
}
.mspi-course-card__meta span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.mspi-course-card__meta svg {
opacity: 0.7;
}
.mspi-course-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--mspi-spacing-sm);
border-top: 1px solid var(--mspi-background-alt);
}
.mspi-course-card__price {
font-size: var(--mspi-text-xl);
font-weight: 800;
color: var(--mspi-primary);
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mspi-course-card__price--free {
padding: 4px 12px;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
-webkit-text-fill-color: var(--mspi-white);
border-radius: var(--mspi-radius-full);
font-size: var(--mspi-text-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
} .mspi-course-card--featured {
border: 2px solid var(--mspi-primary);
} .mspi-course-single .mspi-course-hero {
position: relative;
padding: calc(100px + var(--mspi-spacing-xl)) 0 var(--mspi-spacing-2xl);
background: linear-gradient(135deg, var(--mspi-secondary) 0%, var(--mspi-secondary-light) 100%);
color: var(--mspi-white);
overflow: hidden;
}
.mspi-course-single .mspi-course-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.mspi-course-single .mspi-course-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.2;
}
.mspi-course-single .mspi-course-hero .mspi-container {
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.mspi-course-single .mspi-course-hero {
padding-top: calc(70px + var(--mspi-spacing-lg));
}
}
.mspi-course-hero__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mspi-spacing-2xl);
align-items: center;
}
@media (max-width: 1024px) {
.mspi-course-hero__inner {
grid-template-columns: 1fr;
gap: var(--mspi-spacing-lg);
}
}
.mspi-course-hero__level {
display: inline-block;
font-size: var(--mspi-text-sm);
font-weight: 600;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--mspi-radius-full);
margin-bottom: var(--mspi-spacing-sm);
background: rgba(255, 255, 255, 0.2);
}
.mspi-course-hero__title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
color: var(--mspi-white);
margin-bottom: var(--mspi-spacing-md);
}
.mspi-course-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--mspi-spacing-md);
margin-bottom: var(--mspi-spacing-lg);
}
.mspi-course-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--mspi-spacing-sm);
}
.mspi-course-hero__media {
border-radius: var(--mspi-radius-lg);
overflow: hidden;
box-shadow: var(--mspi-shadow-xl);
}
.mspi-course-hero__video {
position: relative;
aspect-ratio: 16/9;
}
.mspi-course-hero__video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mspi-course-hero__image {
width: 100%;
height: auto;
display: block;
} .mspi-course-details {
padding: var(--mspi-section-padding) 0;
}
.mspi-course-details__grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--mspi-spacing-2xl);
align-items: start;
}
.mspi-course-details__main .mspi-content-section {
margin-bottom: var(--mspi-spacing-xl);
}
.mspi-course-details__main .mspi-content-section:last-child {
margin-bottom: 0;
}
@media (max-width: 1024px) {
.mspi-course-details__grid {
grid-template-columns: 1fr;
}
.mspi-course-details__sidebar {
order: -1;
margin-bottom: var(--mspi-spacing-lg);
}
} .mspi-features-list {
list-style: none;
padding: 0;
margin: 0;
}
.mspi-features-list__item {
display: flex;
align-items: flex-start;
gap: var(--mspi-spacing-sm);
padding: var(--mspi-spacing-sm) 0;
border-bottom: 1px solid var(--mspi-background-alt);
}
.mspi-features-list__item:last-child {
border-bottom: none;
}
.mspi-features-list__icon {
flex-shrink: 0;
color: var(--mspi-primary);
margin-top: 2px;
} .mspi-sidebar-card__info {
list-style: none;
padding: 0;
margin: var(--mspi-spacing-md) 0;
}
.mspi-sidebar-card__info li {
display: flex;
align-items: center;
gap: var(--mspi-spacing-xs);
padding: var(--mspi-spacing-sm) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: var(--mspi-text-sm);
}
.mspi-sidebar-card__info li span {
flex: 1;
}
.mspi-sidebar-card__info li strong {
text-align: right;
}
.mspi-sidebar-card__info li:last-child {
border-bottom: none;
} .mspi-related-courses {
padding: var(--mspi-section-padding) 0;
background: var(--mspi-background);
} .mspi-courses-empty {
text-align: center;
padding: var(--mspi-spacing-2xl) var(--mspi-spacing-md);
color: var(--mspi-text-light);
background: var(--mspi-background);
border-radius: var(--mspi-radius-lg);
}
.mspi-courses-empty__icon {
color: var(--mspi-primary);
opacity: 0.5;
margin-bottom: var(--mspi-spacing-md);
}
.mspi-courses-empty h3 {
font-size: var(--mspi-text-xl);
color: var(--mspi-text);
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-courses-empty p {
margin-bottom: var(--mspi-spacing-md);
} .mspi-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--mspi-spacing-md);
visibility: hidden;
opacity: 0;
transition: var(--mspi-transition);
}
.mspi-modal[aria-hidden="false"] {
visibility: visible;
opacity: 1;
}
.mspi-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}
.mspi-modal__container {
position: relative;
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
background: var(--mspi-white);
border-radius: var(--mspi-radius-lg);
box-shadow: var(--mspi-shadow-xl);
transform: scale(0.95) translateY(20px);
transition: var(--mspi-transition);
}
.mspi-modal[aria-hidden="false"] .mspi-modal__container {
transform: scale(1) translateY(0);
}
.mspi-modal__close {
position: absolute;
top: var(--mspi-spacing-sm);
right: var(--mspi-spacing-sm);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--mspi-background-alt);
border: none;
border-radius: var(--mspi-radius-full);
cursor: pointer;
color: var(--mspi-text-light);
transition: var(--mspi-transition);
}
.mspi-modal__close:hover {
background: var(--mspi-primary);
color: var(--mspi-white);
}
.mspi-modal__header {
padding: var(--mspi-spacing-lg) var(--mspi-spacing-lg) var(--mspi-spacing-sm);
text-align: center;
}
.mspi-modal__title {
font-size: var(--mspi-text-2xl);
font-weight: 700;
color: var(--mspi-secondary);
margin: 0;
}
.mspi-modal__course-name {
font-size: var(--mspi-text-sm);
color: var(--mspi-primary);
margin-top: var(--mspi-spacing-xs);
}
.mspi-modal__body {
padding: var(--mspi-spacing-sm) var(--mspi-spacing-lg) var(--mspi-spacing-lg);
} .mspi-course-form__field {
margin-bottom: var(--mspi-spacing-md);
}
.mspi-course-form__field label {
display: block;
font-size: var(--mspi-text-sm);
font-weight: 500;
margin-bottom: var(--mspi-spacing-xs);
color: var(--mspi-secondary);
}
.mspi-course-form__field label span {
color: var(--mspi-primary);
}
.mspi-course-form__field input,
.mspi-course-form__field textarea {
width: 100%;
padding: var(--mspi-spacing-sm);
border: 1px solid var(--mspi-background-alt);
border-radius: var(--mspi-radius-md);
font-family: var(--mspi-font-body);
font-size: var(--mspi-text-base);
transition: var(--mspi-transition);
}
.mspi-course-form__field input:focus,
.mspi-course-form__field textarea:focus {
outline: none;
border-color: var(--mspi-primary);
box-shadow: 0 0 0 3px rgba(232, 37, 107, 0.1);
}
.mspi-course-form__submit {
margin-top: var(--mspi-spacing-md);
} .mspi-course-form__success {
text-align: center;
padding: var(--mspi-spacing-lg) 0;
}
.mspi-course-form__success-icon {
color: #34c759;
margin-bottom: var(--mspi-spacing-md);
}
.mspi-course-form__success h3 {
font-size: var(--mspi-text-xl);
margin-bottom: var(--mspi-spacing-xs);
}
.mspi-course-form__success p {
color: var(--mspi-text-light);
margin-bottom: var(--mspi-spacing-lg);
} .mspi-btn--sm {
padding: 0.5rem 1rem;
font-size: var(--mspi-text-sm);
}
.mspi-btn--block {
display: block;
width: 100%;
text-align: center;
}
.mspi-btn--outline {
background: transparent;
border: 2px solid var(--mspi-primary);
color: var(--mspi-primary);
}
.mspi-btn--outline:hover {
background: var(--mspi-primary);
color: var(--mspi-white);
} .mspi-course-form__error {
color: #ff3b30;
font-size: var(--mspi-text-sm);
margin: var(--mspi-spacing-sm) 0;
padding: var(--mspi-spacing-sm);
background: rgba(255, 59, 48, 0.1);
border-radius: var(--mspi-radius-sm);
text-align: center;
}  .mspi-course-single > .ast-breadcrumbs-wrapper,
.mspi-course-single > .rank-math-breadcrumb,
.mspi-course-single > nav.breadcrumb:not(.mspi-breadcrumb) {
display: none !important;
} .mspi-course-single .mspi-course-hero {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
overflow: hidden;
}
.mspi-course-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.mspi-course-hero__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(232,37,107,0.7) 100%);
}
.mspi-course-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
} .mspi-course-hero .mspi-breadcrumb {
padding: 0 0 var(--mspi-spacing-sm);
position: relative;
z-index: 1;
}
.mspi-course-hero .mspi-breadcrumb__list {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
}
.mspi-course-hero .mspi-breadcrumb__list a,
.mspi-course-hero .mspi-breadcrumb__sep {
color: rgba(255, 255, 255, 0.8);
}
.mspi-course-hero .mspi-breadcrumb__list a:hover {
color: var(--mspi-white);
}
.mspi-course-hero .mspi-breadcrumb__current {
color: var(--mspi-white);
}
.mspi-course-single .mspi-course-hero__inner {
position: relative;
z-index: 1;
display: block;
}
.mspi-course-hero__excerpt {
font-size: var(--mspi-text-lg);
color: rgba(255,255,255,0.9);
margin-bottom: var(--mspi-spacing-md);
line-height: 1.6;
} .mspi-course-hero__highlights {
display: flex;
flex-wrap: wrap;
gap: var(--mspi-spacing-md);
margin-bottom: var(--mspi-spacing-lg);
}
.mspi-highlight {
display: flex;
align-items: center;
gap: var(--mspi-spacing-xs);
color: rgba(255,255,255,0.9);
font-size: var(--mspi-text-sm);
padding: var(--mspi-spacing-xs) var(--mspi-spacing-sm);
background: rgba(255,255,255,0.1);
border-radius: var(--mspi-radius-full);
backdrop-filter: blur(4px);
}
.mspi-highlight--instructor {
background: rgba(255,255,255,0.2);
font-weight: 600;
} .mspi-course-hero__price-tag {
margin-top: var(--mspi-spacing-lg);
}
.mspi-price-tag {
display: inline-block;
font-size: var(--mspi-text-2xl);
font-weight: 700;
color: var(--mspi-white);
padding: var(--mspi-spacing-xs) var(--mspi-spacing-md);
background: rgba(255,255,255,0.15);
border-radius: var(--mspi-radius-md);
backdrop-filter: blur(4px);
}
.mspi-price-tag--free {
background: var(--mspi-primary);
} .mspi-btn--glass {
background: rgba(255,255,255,0.15);
color: var(--mspi-white);
border: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(4px);
}
.mspi-btn--glass:hover {
background: rgba(255,255,255,0.25);
color: var(--mspi-white);
} .mspi-btn svg {
flex-shrink: 0;
}
.mspi-btn--primary svg,
.mspi-btn--glass svg {
margin-right: var(--mspi-spacing-xs);
} .mspi-course-single .mspi-content-section__title {
display: flex;
align-items: center;
gap: var(--mspi-spacing-sm);
font-size: 1.375rem;
padding-bottom: var(--mspi-spacing-sm);
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, var(--mspi-primary), transparent) 1;
}
.mspi-course-single .mspi-content-section__title svg {
flex-shrink: 0;
width: 28px;
height: 28px;
padding: 6px;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
color: var(--mspi-white);
border-radius: var(--mspi-radius-sm);
} .mspi-features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--mspi-spacing-md);
}
.mspi-feature-card {
display: flex;
align-items: flex-start;
gap: var(--mspi-spacing-sm);
padding: var(--mspi-spacing-md);
background: var(--mspi-white);
border-radius: var(--mspi-radius-md);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
cursor: default;
}
.mspi-feature-card:hover {
box-shadow: 0 8px 24px rgba(232, 37, 107, 0.12);
transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
.mspi-feature-card {
transition: none;
}
.mspi-feature-card:hover {
transform: none;
}
}
.mspi-feature-card__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
color: var(--mspi-white);
border-radius: var(--mspi-radius-full);
}
.mspi-feature-card__text {
font-size: var(--mspi-text-sm);
color: var(--mspi-text);
line-height: 1.5;
} .mspi-why-choose {
background: linear-gradient(135deg, rgba(232, 37, 107, 0.03), rgba(168, 85, 247, 0.03));
padding: var(--mspi-spacing-xl);
border-radius: var(--mspi-radius-lg);
border: 1px solid rgba(232, 37, 107, 0.1);
}
.mspi-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--mspi-spacing-lg);
}
@media (max-width: 768px) {
.mspi-why-grid {
grid-template-columns: 1fr;
gap: var(--mspi-spacing-md);
}
}
.mspi-why-item {
text-align: center;
padding: var(--mspi-spacing-lg);
background: var(--mspi-white);
border-radius: var(--mspi-radius-lg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mspi-why-item:hover {
box-shadow: 0 12px 32px rgba(232, 37, 107, 0.15);
transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
.mspi-why-item {
transition: none;
}
.mspi-why-item:hover {
transform: none;
}
}
.mspi-why-item__icon {
width: 64px;
height: 64px;
margin: 0 auto var(--mspi-spacing-md);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
color: var(--mspi-white);
border-radius: var(--mspi-radius-full);
box-shadow: 0 4px 16px rgba(232, 37, 107, 0.25);
}
.mspi-why-item h4 {
font-size: var(--mspi-text-lg);
margin-bottom: var(--mspi-spacing-xs);
color: var(--mspi-secondary);
}
.mspi-why-item p {
font-size: var(--mspi-text-sm);
color: var(--mspi-text-light);
margin: 0;
line-height: 1.6;
} .mspi-sidebar-sticky {
position: sticky;
top: 100px;
} .mspi-sidebar-card__header {
text-align: center;
margin-bottom: var(--mspi-spacing-md);
padding-bottom: var(--mspi-spacing-md);
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.mspi-sidebar-card__label {
display: block;
font-size: var(--mspi-text-sm);
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.8;
margin-bottom: var(--mspi-spacing-xs);
} .mspi-course-price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.25rem;
margin-top: var(--mspi-spacing-xs);
}
.mspi-course-price__amount {
font-family: var(--mspi-font-heading);
font-size: 2.25rem;
font-weight: 800;
color: var(--mspi-white);
line-height: 1.1;
}
.mspi-course-price__period {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
} .mspi-course-price--free .mspi-course-price__amount {
font-size: 1.875rem;
background: linear-gradient(135deg, #34d399, #10b981);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} .mspi-sidebar-card__info li {
display: flex;
align-items: center;
gap: var(--mspi-spacing-xs);
}
.mspi-sidebar-card__info li svg {
flex-shrink: 0;
opacity: 0.7;
}
.mspi-sidebar-card__note {
font-size: var(--mspi-text-xs);
text-align: center;
opacity: 0.7;
margin-top: var(--mspi-spacing-sm);
margin-bottom: 0;
} .mspi-sidebar-card--cta .mspi-btn--white:hover {
background: var(--mspi-primary);
color: var(--mspi-white);
} .mspi-sidebar-card--contact {
text-align: center;
background: linear-gradient(135deg, rgba(232, 37, 107, 0.05), rgba(168, 85, 247, 0.05));
border: 1px solid rgba(232, 37, 107, 0.1);
margin-top: var(--mspi-spacing-md);
}
.mspi-sidebar-card--contact h4 {
font-size: var(--mspi-text-base);
margin-bottom: var(--mspi-spacing-sm);
color: var(--mspi-text-light);
}
.mspi-contact-link {
display: inline-flex;
align-items: center;
gap: var(--mspi-spacing-xs);
font-size: var(--mspi-text-xl);
font-weight: 700;
color: var(--mspi-primary);
text-decoration: none;
transition: color 0.2s ease, transform 0.2s ease;
padding: var(--mspi-spacing-sm) var(--mspi-spacing-md);
background: var(--mspi-white);
border-radius: var(--mspi-radius-full);
box-shadow: 0 2px 8px rgba(232, 37, 107, 0.15);
}
.mspi-contact-link:hover {
color: var(--mspi-white);
background: linear-gradient(135deg, var(--mspi-primary), var(--mspi-accent));
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(232, 37, 107, 0.3);
}
.mspi-contact-link:hover svg {
color: var(--mspi-white);
} .mspi-prose {
line-height: 1.8;
color: var(--mspi-text);
}
.mspi-prose p {
margin-bottom: var(--mspi-spacing-md);
}
.mspi-prose h3, .mspi-prose h4 {
margin-top: var(--mspi-spacing-lg);
margin-bottom: var(--mspi-spacing-sm);
color: var(--mspi-secondary);
}
.mspi-prose ul, .mspi-prose ol {
margin-bottom: var(--mspi-spacing-md);
padding-left: var(--mspi-spacing-lg);
}
.mspi-prose li {
margin-bottom: var(--mspi-spacing-xs);
position: relative;
}
.mspi-prose strong {
color: var(--mspi-secondary);
font-weight: 600;
} @media (max-width: 1024px) {
.mspi-why-grid {
grid-template-columns: 1fr;
gap: var(--mspi-spacing-md);
}
.mspi-why-choose {
padding: var(--mspi-spacing-lg);
}
}
@media (max-width: 768px) {
.mspi-course-single .mspi-course-hero {
min-height: auto;
padding: calc(80px + var(--mspi-spacing-lg)) 0 var(--mspi-spacing-xl);
}
.mspi-course-hero__title {
font-size: clamp(1.5rem, 5vw, 2rem);
}
.mspi-course-hero__highlights {
gap: var(--mspi-spacing-xs);
}
.mspi-highlight {
font-size: var(--mspi-text-xs);
padding: 4px 10px;
}
.mspi-sidebar-sticky {
position: static;
}
.mspi-features-grid {
grid-template-columns: 1fr;
}
.mspi-why-choose {
padding: var(--mspi-spacing-md);
}
.mspi-why-item {
padding: var(--mspi-spacing-md);
}
.mspi-why-item__icon {
width: 48px;
height: 48px;
}
.mspi-course-single .mspi-content-section__title {
font-size: 1.125rem;
}
.mspi-course-single .mspi-content-section__title svg {
width: 24px;
height: 24px;
padding: 4px;
} .mspi-sidebar-card--cta {
padding: var(--mspi-spacing-lg);
}
.mspi-course-price__amount {
font-size: 1.75rem;
}
.mspi-sidebar-card__info li {
font-size: var(--mspi-text-xs);
padding: var(--mspi-spacing-xs) 0;
}
.mspi-contact-link {
font-size: var(--mspi-text-lg);
padding: var(--mspi-spacing-xs) var(--mspi-spacing-md);
} .mspi-course-details {
padding: var(--mspi-spacing-xl) 0;
}
.mspi-related-courses {
padding: var(--mspi-spacing-xl) 0;
}
}
@media (max-width: 480px) {
.mspi-course-single .mspi-course-hero {
padding-top: calc(70px + var(--mspi-spacing-md));
}
.mspi-highlight {
font-size: 0.6875rem;
padding: 3px 8px;
}
.mspi-course-hero__highlights {
flex-wrap: wrap;
}
.mspi-breadcrumb {
font-size: var(--mspi-text-xs);
}
}