@media (max-width: 768px) {
:root {
--marklis-mobile-padding-x: 20px;
--marklis-mobile-padding-x-safe: max(20px, env(safe-area-inset-left, 0px));
--marklis-mobile-padding-x-safe-r: max(20px, env(safe-area-inset-right, 0px));
--marklis-mobile-section-gap: 40px;
--marklis-mobile-card-padding: 20px;
--marklis-mobile-touch-min: 44px;
}
}
@media (max-width: 480px) {
:root {
--marklis-mobile-padding-x: 16px;
--marklis-mobile-padding-x-safe: max(16px, env(safe-area-inset-left, 0px));
--marklis-mobile-padding-x-safe-r: max(16px, env(safe-area-inset-right, 0px));
--marklis-mobile-section-gap: 32px;
--marklis-mobile-card-padding: 16px;
}
} @media (max-width: 768px) {
html,
body {
overflow-x: hidden;
max-width: 100vw;
}
.site-content,
.ast-container,
.marklis-front-page-content,
.marklis-page-content {
max-width: 100% !important;
overflow-x: hidden;
}
} @media (max-width: 768px) {
.site-header .ast-container,
.footer-inner,
.case-grid-container,
.cards-grid,
.contact-section,
.service-approach-notice,
.pricing-summary-image-wrapper,
.marklis-contact-page-section,
.company-profile-section,
.marklis-story-wrapper,
.premium-consultation-grid,
.philosophy-page-wrapper,
.legal-privacy-container,
.count-section,
.fv-section {
padding-left: var(--marklis-mobile-padding-x) !important;
padding-right: var(--marklis-mobile-padding-x) !important;
} body.home .site-content > .ast-container,
body.page .site-content > .ast-container {
padding-left: var(--marklis-mobile-padding-x-safe) !important;
padding-right: var(--marklis-mobile-padding-x-safe-r) !important;
box-sizing: border-box;
}
} @media (max-width: 768px) {
.service-cards,
.case-grid-section,
.contact-section,
.global-cta-section,
.count-section,
.service-approach-notice {
padding-top: var(--marklis-mobile-section-gap) !important;
padding-bottom: var(--marklis-mobile-section-gap) !important;
}
} @media (max-width: 768px) {
.global-cta-section {
padding: var(--marklis-mobile-section-gap) var(--marklis-mobile-padding-x) !important;
padding-bottom: calc(var(--marklis-mobile-section-gap) + env(safe-area-inset-bottom, 0px)) !important;
}
.global-cta-container,
.global-cta-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
.global-cta-title {
font-size: 1.75rem !important;
margin-bottom: 12px !important;
}
.global-cta-subtitle {
font-size: 1rem !important;
padding: 10px 18px !important;
margin-bottom: 24px !important;
}
.global-cta-question {
padding: 18px 20px !important;
font-size: 1.1rem !important;
margin-bottom: 14px !important;
}
.global-cta-benefits {
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-bottom: 28px !important;
}
.global-cta-benefit {
padding: var(--marklis-mobile-card-padding) !important;
font-size: 0.9rem !important;
}
.global-cta-buttons {
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
margin-bottom: 20px !important;
}
.global-cta-button-primary,
.global-cta-button-line {
width: 100% !important;
display: block !important;
text-align: center !important;
padding: 16px 20px !important;
min-height: var(--marklis-mobile-touch-min) !important;
font-size: 1rem !important;
box-sizing: border-box;
}
.global-cta-description {
font-size: 1rem !important;
margin-bottom: 28px !important;
}
.global-note {
font-size: 0.8rem !important;
}
} @media (max-width: 768px) {
.site-header .ast-container {
padding: 12px var(--marklis-mobile-padding-x) !important;
}
.site-logo img {
max-width: 120px !important;
}
.footer-inner {
padding: var(--marklis-mobile-section-gap) var(--marklis-mobile-padding-x) 20px !important;
}
.footer-bottom {
padding: 20px var(--marklis-mobile-padding-x) calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
} @media (max-width: 768px) {
.service-card,
.case-grid-item,
.contact-point-item {
border-radius: var(--marklis-border-radius) !important;
}
.case-content {
padding: var(--marklis-mobile-card-padding) !important;
} .marklis-cta-button,
.gradient-bg-button,
.wpcf7-submit,
.global-cta-button-primary,
.global-cta-button-line,
.fv-cta-primary,
.fv-cta-outline {
min-height: var(--marklis-mobile-touch-min) !important;
}
} @media (max-width: 768px) {
.service-cards h2,
.case-title {
font-size: 1.5rem !important;
margin-bottom: 28px !important;
}
.case-grid-header {
padding: 0 var(--marklis-mobile-padding-x) !important;
margin-bottom: 28px !important;
}
.cards-grid {
gap: 28px 0 !important;
padding: 0 !important;
}
} @media (max-width: 768px) {
#marklis-float-menu {
right: max(12px, env(safe-area-inset-right, 0px)) !important;
bottom: env(safe-area-inset-bottom, 0px);
}
}