html {
scroll-behavior: smooth;
}
/* =========================================
GALH 28 DAY
PROBLEM + SOLUTION SECTION
========================================= */
.galh-28day-problem-solution {
direction: rtl;
width: 100%;
overflow: hidden;
}
/* =========================================
PROBLEM SECTION
========================================= */
.galh-problem-section {
width: 100%;
padding: 80px 20px 75px;
box-sizing: border-box;
background: #ffffff;
}
.galh-problem-inner {
max-width: 780px;
margin: 0 auto;
text-align: center;
}
/* תג קטן */
.galh-section-label {
display: inline-block;
margin-bottom: 18px;
padding: 8px 20px;
border-radius: 50px;
background: #e8f9fc;
color: #0786a3;
font-size: 15px;
font-weight: 800;
}
/* כותרת */
.galh-problem-inner h2 {
margin: 0 0 30px;
color: #102a43;
font-size: clamp(32px, 4vw, 52px);
line-height: 1.2;
font-weight: 900;
letter-spacing: -1px;
}
/* טקסט */
.galh-problem-text {
max-width: 650px;
margin: 0 auto;
color: #536b7d;
font-size: 20px;
line-height: 1.75;
}
.galh-problem-text p {
margin: 0 0 8px;
}
/* משפט מודגש */
.galh-problem-highlight {
max-width: 650px;
margin: 35px auto 0;
padding: 20px 25px;
background: #f3fafc;
border-right: 5px solid #08a9c7;
border-radius: 12px;
color: #102a43;
font-size: 22px;
font-weight: 800;
box-sizing: border-box;
}
/* =========================================
SOLUTION SECTION
========================================= */
.galh-solution-section {
position: relative;
width: 100%;
padding: 85px 20px 90px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#e9faff 0%,
#f7fdfe 50%,
#e2f7fb 100%
);
}
/* אלמנט עיצובי עדין */
.galh-solution-section::before {
content: "";
position: absolute;
width: 400px;
height: 400px;
top: -200px;
left: -150px;
background: rgba(8, 169, 199, 0.08);
border-radius: 50%;
pointer-events: none;
}
.galh-solution-inner {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
/* תג */
.galh-solution-label {
background: #ffffff;
box-shadow:
0 5px 15px rgba(8, 120, 150, 0.08);
}
/* כותרת */
.galh-solution-inner h2 {
margin: 0 0 20px;
color: #102a43;
font-size: clamp(34px, 4.5vw, 56px);
line-height: 1.15;
font-weight: 900;
letter-spacing: -1px;
}
/* טקסט פתיחה */
.galh-solution-intro {
max-width: 650px;
margin: 0 auto 50px;
color: #536b7d;
font-size: 20px;
line-height: 1.65;
}
/* =========================================
BIG NUMBERS
========================================= */
.galh-big-numbers {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 22px;
max-width: 950px;
margin: 0 auto;
}
/* כרטיס */
.galh-number-card {
padding: 35px 25px;
background: #ffffff;
border-radius: 22px;
box-shadow:
0 15px 40px rgba(20, 100, 120, 0.10);
border: 1px solid rgba(8, 169, 199, 0.10);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.galh-number-card:hover {
transform: translateY(-6px);
box-shadow:
0 20px 45px rgba(20, 100, 120, 0.16);
}
/* המספר */
.galh-number {
margin-bottom: 8px;
color: #08a9c7;
font-size: clamp(52px, 6vw, 76px);
line-height: 1;
font-weight: 900;
letter-spacing: -3px;
}
/* כותרת */
.galh-number-title {
margin-bottom: 8px;
color: #102a43;
font-size: 21px;
font-weight: 800;
}
/* טקסט */
.galh-number-text {
color: #718096;
font-size: 15px;
line-height: 1.5;
}
/* =========================================
BOTTOM MESSAGE
========================================= */
.galh-solution-bottom {
max-width: 650px;
margin: 55px auto 0;
text-align: center;
}
.galh-solution-check {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
margin: 0 auto 15px;
background: #08a9c7;
color: #ffffff;
border-radius: 50%;
font-size: 28px;
font-weight: 900;
box-shadow:
0 8px 20px rgba(8, 169, 199, 0.25);
}
.galh-solution-bottom p {
margin: 0 0 15px;
color: #536b7d;
font-size: 19px;
line-height: 1.7;
}
.galh-solution-bottom strong {
display: block;
color: #102a43;
font-size: 28px;
font-weight: 900;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 768px) {
.galh-problem-section {
padding: 60px 18px;
}
.galh-problem-inner h2 {
font-size: 34px;
}
.galh-problem-text {
font-size: 18px;
}
.galh-problem-highlight {
font-size: 19px;
}
.galh-solution-section {
padding: 65px 18px;
}
.galh-solution-inner h2 {
font-size: 36px;
}
.galh-solution-intro {
font-size: 18px;
}
.galh-big-numbers {
grid-template-columns: 1fr;
max-width: 400px;
gap: 15px;
}
.galh-number-card {
padding: 25px 20px;
}
.galh-number {
font-size: 58px;
}
.galh-solution-bottom {
margin-top: 40px;
}
}
@media (max-width: 420px) {
.galh-problem-inner h2 {
font-size: 30px;
}
.galh-solution-inner h2 {
font-size: 31px;
}
.galh-section-label {
font-size: 14px;
}
}
/* ========================================
GALH - מה אתם מקבלים בקורס
======================================== */
.galh-course-benefits {
width: 100%;
padding: 80px 20px;
background: linear-gradient(
180deg,
#f4fcfc 0%,
#ffffff 100%
);
box-sizing: border-box;
}
.galh-benefits-container {
max-width: 1100px;
margin: 0 auto;
}
/* כותרת */
.galh-benefits-header {
max-width: 750px;
margin: 0 auto 50px;
text-align: center;
}
.galh-benefits-label {
display: inline-block;
margin-bottom: 12px;
padding: 7px 18px;
border-radius: 30px;
background: #dff7f7;
color: #159a9c;
font-size: 16px;
font-weight: 700;
}
.galh-benefits-header h2 {
margin: 0 0 18px;
color: #1d2f35;
font-size: 42px;
line-height: 1.2;
font-weight: 800;
}
.galh-benefits-header p {
margin: 0;
color: #5e7075;
font-size: 19px;
line-height: 1.7;
}
/* גריד הכרטיסיות */
.galh-benefits-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
/* כרטיס */
.galh-benefit-card {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 30px;
background: #ffffff;
border: 1px solid #e3eeee;
border-radius: 18px;
box-shadow: 0 8px 25px rgba(20, 100, 100, 0.06);
box-sizing: border-box;
transition: transform 0.25s ease,
box-shadow 0.25s ease;
}
.galh-benefit-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(20, 100, 100, 0.11);
}
/* אייקון */
.galh-benefit-icon {
flex: 0 0 58px;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: #e3f8f8;
border-radius: 50%;
font-size: 28px;
line-height: 1;
}
/* תוכן */
.galh-benefit-content h3 {
margin: 2px 0 8px;
color: #1d2f35;
font-size: 21px;
line-height: 1.35;
font-weight: 800;
}
.galh-benefit-content p {
margin: 0;
color: #65777c;
font-size: 16px;
line-height: 1.65;
}
/* ========================================
מובייל
======================================== */
@media (max-width: 767px) {
.galh-course-benefits {
padding: 55px 16px;
}
.galh-benefits-header {
margin-bottom: 32px;
}
.galh-benefits-label {
font-size: 14px;
}
.galh-benefits-header h2 {
font-size: 31px;
}
.galh-benefits-header p {
font-size: 17px;
line-height: 1.6;
}
.galh-benefits-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.galh-benefit-card {
gap: 16px;
padding: 22px;
border-radius: 15px;
}
.galh-benefit-icon {
flex: 0 0 48px;
width: 48px;
height: 48px;
font-size: 23px;
}
.galh-benefit-content h3 {
font-size: 18px;
}
.galh-benefit-content p {
font-size: 15px;
}
}
/* =========================================
GALH 28 DAY
PROGRAM / 4 WEEKS SECTION
========================================= */
.galh-28day-program {
direction: rtl;
width: 100%;
padding: 90px 20px;
box-sizing: border-box;
background: #ffffff;
}
.galh-28day-program-inner {
max-width: 1150px;
margin: 0 auto;
text-align: center;
}
/* =========================================
HEADER
========================================= */
.galh-program-label {
display: inline-block;
margin-bottom: 18px;
padding: 8px 20px;
background: #e8f9fc;
color: #0786a3;
border-radius: 50px;
font-size: 15px;
font-weight: 800;
}
.galh-28day-program h2 {
margin: 0 0 20px;
color: #102a43;
font-size: clamp(34px, 4.5vw, 56px);
line-height: 1.2;
font-weight: 900;
letter-spacing: -1px;
}
.galh-program-intro {
max-width: 680px;
margin: 0 auto 55px;
color: #607589;
font-size: 20px;
line-height: 1.7;
}
/* =========================================
WEEK CARDS
========================================= */
.galh-program-weeks {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 20px;
max-width: 1100px;
margin: 0 auto;
}
.galh-week-card {
position: relative;
padding: 35px 25px 30px;
background: #ffffff;
border: 1px solid #e3f0f3;
border-radius: 22px;
box-shadow:
0 10px 30px rgba(20, 90, 110, 0.07);
text-align: center;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.galh-week-card:hover {
transform: translateY(-7px);
box-shadow:
0 18px 40px rgba(20, 90, 110, 0.14);
}
/* =========================================
WEEK NUMBER
========================================= */
.galh-week-number {
position: absolute;
top: 15px;
left: 18px;
color: #d9f1f5;
font-size: 38px;
line-height: 1;
font-weight: 900;
}
/* =========================================
ICON
========================================= */
.galh-week-icon {
display: flex;
align-items: center;
justify-content: center;
width: 65px;
height: 65px;
margin: 0 auto 18px;
background: #e8f9fc;
border-radius: 50%;
font-size: 30px;
}
/* =========================================
TITLES
========================================= */
.galh-week-card h3 {
margin: 0 0 5px;
color: #08a9c7;
font-size: 17px;
font-weight: 800;
}
.galh-week-card h4 {
margin: 0 0 15px;
color: #102a43;
font-size: 22px;
font-weight: 900;
}
/* =========================================
TEXT
========================================= */
.galh-week-card p {
min-height: 105px;
margin: 0 0 20px;
color: #607589;
font-size: 15px;
line-height: 1.65;
}
/* =========================================
TAG
========================================= */
.galh-week-tag {
display: inline-block;
padding: 7px 13px;
background: #f3fafc;
color: #0786a3;
border-radius: 30px;
font-size: 13px;
font-weight: 700;
}
/* =========================================
SUMMARY
========================================= */
.galh-program-summary {
display: flex;
align-items: center;
gap: 20px;
max-width: 750px;
margin: 50px auto 0;
padding: 22px 30px;
background:
linear-gradient(
135deg,
#e9faff,
#f6fdfe
);
border-radius: 18px;
text-align: right;
box-sizing: border-box;
}
.galh-summary-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #08a9c7;
color: #ffffff;
border-radius: 50%;
font-size: 25px;
font-weight: 900;
}
.galh-program-summary strong {
display: block;
margin-bottom: 5px;
color: #102a43;
font-size: 19px;
font-weight: 900;
}
.galh-program-summary p {
margin: 0;
color: #607589;
font-size: 15px;
line-height: 1.5;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.galh-program-weeks {
grid-template-columns:
repeat(2, 1fr);
max-width: 700px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.galh-28day-program {
padding: 65px 18px;
}
.galh-28day-program h2 {
font-size: 34px;
}
.galh-program-intro {
font-size: 18px;
margin-bottom: 40px;
}
.galh-program-weeks {
grid-template-columns: 1fr;
max-width: 400px;
gap: 15px;
}
.galh-week-card {
padding: 30px 22px;
}
.galh-week-card p {
min-height: auto;
}
.galh-program-summary {
align-items: flex-start;
padding: 20px;
gap: 15px;
}
.galh-summary-icon {
width: 42px;
height: 42px;
font-size: 21px;
}
.galh-program-summary strong {
font-size: 17px;
}
.galh-program-summary p {
font-size: 14px;
}
}
/* =========================================
GALH 28 DAY
WHO IS THIS PROGRAM FOR?
========================================= */
.galh-28day-suitable {
direction: rtl;
width: 100%;
padding: 90px 20px;
box-sizing: border-box;
background:
linear-gradient(
180deg,
#f7fcfd 0%,
#ffffff 100%
);
}
.galh-suitable-inner {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
/* =========================================
HEADER
========================================= */
.galh-suitable-label {
display: inline-block;
margin-bottom: 18px;
padding: 8px 20px;
background: #e8f9fc;
color: #0786a3;
border-radius: 50px;
font-size: 15px;
font-weight: 800;
}
.galh-suitable-inner > h2 {
margin: 0 0 20px;
color: #102a43;
font-size: clamp(34px, 4.5vw, 56px);
line-height: 1.2;
font-weight: 900;
letter-spacing: -1px;
}
.galh-suitable-intro {
max-width: 700px;
margin: 0 auto 55px;
color: #607589;
font-size: 20px;
line-height: 1.7;
}
/* =========================================
CARDS GRID
========================================= */
.galh-suitable-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 25px;
max-width: 1000px;
margin: 0 auto;
}
/* =========================================
CARD
========================================= */
.galh-suitable-card {
padding: 35px 35px 30px;
background: #ffffff;
border-radius: 22px;
text-align: right;
box-sizing: border-box;
box-shadow:
0 12px 35px rgba(20, 90, 110, 0.08);
}
/* =========================================
CARD HEADER
========================================= */
.galh-suitable-card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.galh-suitable-card-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 27px;
font-weight: 900;
}
.galh-suitable-card h3 {
margin: 0;
color: #102a43;
font-size: 23px;
line-height: 1.3;
font-weight: 900;
}
/* =========================================
YES CARD
========================================= */
.galh-suitable-yes {
border-top: 5px solid #08a9c7;
}
.galh-suitable-yes
.galh-suitable-card-icon {
background: #e5f8fb;
color: #08a9c7;
}
/* =========================================
NO CARD
========================================= */
.galh-suitable-no {
border-top: 5px solid #d9e2e7;
}
.galh-suitable-no
.galh-suitable-card-icon {
background: #f2f5f6;
color: #8a9aa5;
}
/* =========================================
LIST
========================================= */
.galh-suitable-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.galh-suitable-card li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
color: #536b7d;
font-size: 16px;
line-height: 1.6;
}
.galh-suitable-card li:last-child {
margin-bottom: 0;
}
.galh-suitable-card li span {
flex-shrink: 0;
font-size: 18px;
font-weight: 900;
}
.galh-suitable-yes li span {
color: #08a9c7;
}
.galh-suitable-no li span {
color: #9aa9b2;
}
/* =========================================
CONCLUSION
========================================= */
.galh-suitable-conclusion {
max-width: 750px;
margin: 60px auto 0;
text-align: center;
}
.galh-conclusion-icon {
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
margin: 0 auto 18px;
background: #e8f9fc;
border-radius: 50%;
font-size: 25px;
}
.galh-suitable-conclusion h3 {
margin: 0 auto 12px;
color: #102a43;
font-size: 25px;
line-height: 1.5;
font-weight: 900;
}
.galh-suitable-conclusion p {
margin: 0 0 25px;
color: #607589;
font-size: 18px;
}
/* =========================================
PURCHASE BUTTON
========================================= */
.galh-28day-purchase-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 17px 42px;
background:
linear-gradient(
135deg,
#08a9c7,
#087f9d
);
color: #ffffff !important;
font-size: 20px;
font-weight: 800;
text-decoration: none !important;
border-radius: 50px;
box-shadow:
0 12px 25px rgba(8, 169, 199, 0.28);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.galh-28day-purchase-button:hover {
transform: translateY(-3px);
box-shadow:
0 17px 32px rgba(8, 169, 199, 0.38);
}
.galh-28day-purchase-button span {
font-size: 24px;
transition:
transform 0.25s ease;
}
.galh-28day-purchase-button:hover span {
transform: translateX(-5px);
}
/* =========================================
PURCHASE NOTE
========================================= */
.galh-purchase-note {
margin-top: 15px;
color: #718096;
font-size: 13px;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 768px) {
.galh-28day-suitable {
padding: 65px 18px;
}
.galh-suitable-inner > h2 {
font-size: 34px;
}
.galh-suitable-intro {
font-size: 18px;
margin-bottom: 40px;
}
.galh-suitable-grid {
grid-template-columns: 1fr;
max-width: 500px;
}
.galh-suitable-card {
padding: 28px 23px;
}
.galh-suitable-card h3 {
font-size: 21px;
}
.galh-suitable-card li {
font-size: 15px;
}
.galh-suitable-conclusion {
margin-top: 45px;
}
.galh-suitable-conclusion h3 {
font-size: 21px;
}
.galh-28day-purchase-button {
width: 100%;
box-sizing: border-box;
font-size: 18px;
}
}
/* =========================================
GALH 28 DAY
SOCIAL PROOF SECTION
========================================= */
.galh-28day-social-proof {
direction: rtl;
width: 100%;
padding: 95px 20px;
box-sizing: border-box;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f4fbfc 100%
);
}
.galh-social-proof-inner {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
/* =========================================
HEADER
========================================= */
.galh-social-proof-label {
display: inline-block;
margin-bottom: 18px;
padding: 8px 20px;
background: #e8f9fc;
color: #0786a3;
border-radius: 50px;
font-size: 15px;
font-weight: 800;
}
.galh-social-proof-inner h2 {
max-width: 850px;
margin: 0 auto 20px;
color: #102a43;
font-size: clamp(34px, 4.5vw, 56px);
line-height: 1.2;
font-weight: 900;
letter-spacing: -1px;
}
.galh-social-proof-intro {
max-width: 720px;
margin: 0 auto 55px;
color: #607589;
font-size: 20px;
line-height: 1.75;
}
/* =========================================
COLLAGE
========================================= */
.galh-social-proof-collage {
max-width: 900px;
margin: 0 auto;
padding: 25px;
background: #ffffff;
border-radius: 24px;
box-shadow:
0 15px 45px rgba(20, 90, 110, 0.10);
box-sizing: border-box;
}
.galh-collage-title {
margin-bottom: 20px;
color: #102a43;
font-size: 20px;
font-weight: 800;
}
.galh-collage-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 350px;
background: #f7fbfc;
border: 2px dashed #cfe7ec;
border-radius: 16px;
}
.galh-collage-placeholder-icon {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin-bottom: 15px;
background: #e8f9fc;
border-radius: 50%;
font-size: 28px;
}
.galh-collage-placeholder p {
margin: 0;
color: #8a9aa5;
font-size: 14px;
}
/* =========================================
SELECTED TESTIMONIALS
========================================= */
.galh-selected-title {
max-width: 700px;
margin: 70px auto 35px;
}
.galh-selected-title h3 {
margin: 0 0 12px;
color: #102a43;
font-size: 30px;
font-weight: 900;
}
.galh-selected-title p {
margin: 0;
color: #607589;
font-size: 17px;
line-height: 1.7;
}
/* =========================================
SELECTED PLACEHOLDERS
========================================= */
.galh-selected-placeholder {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 25px;
max-width: 900px;
margin: 0 auto;
}
.galh-selected-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 220px;
padding: 25px;
background: #ffffff;
border: 2px dashed #cfe7ec;
border-radius: 18px;
box-sizing: border-box;
}
.galh-selected-item span {
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
margin-bottom: 12px;
background: #e8f9fc;
border-radius: 50%;
font-size: 25px;
}
.galh-selected-item p {
margin: 0;
color: #8a9aa5;
font-size: 14px;
}
/* =========================================
CONCLUSION
========================================= */
.galh-social-proof-conclusion {
max-width: 750px;
margin: 70px auto 0;
}
.galh-social-proof-icon {
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
margin: 0 auto 18px;
background: #e8f9fc;
border-radius: 50%;
font-size: 25px;
}
.galh-social-proof-conclusion h3 {
margin: 0 0 12px;
color: #102a43;
font-size: 28px;
font-weight: 900;
}
.galh-social-proof-conclusion p {
margin: 0;
color: #607589;
font-size: 18px;
line-height: 1.75;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 700px) {
.galh-28day-social-proof {
padding: 65px 18px;
}
.galh-social-proof-inner h2 {
font-size: 34px;
}
.galh-social-proof-intro {
font-size: 18px;
margin-bottom: 40px;
}
.galh-social-proof-collage {
padding: 15px;
border-radius: 18px;
}
.galh-collage-title {
font-size: 18px;
}
.galh-selected-title {
margin-top: 50px;
}
.galh-selected-title h3 {
font-size: 25px;
}
.galh-selected-placeholder {
grid-template-columns: 1fr;
gap: 18px;
}
.galh-social-proof-conclusion {
margin-top: 50px;
}
.galh-social-proof-conclusion h3 {
font-size: 24px;
}
.galh-social-proof-conclusion p {
font-size: 17px;
}
}
/* =========================================
GALH 28 DAY
ABOUT GAL SECTION
========================================= */
.galh-28day-about {
direction: rtl;
width: 100%;
padding: 100px 20px;
box-sizing: border-box;
background: #ffffff;
}
.galh-about-inner {
display: grid;
grid-template-columns:
0.9fr 1.1fr;
align-items: center;
gap: 80px;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================
IMAGE
========================================= */
.galh-about-image {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
min-height: 550px;
background:
linear-gradient(
145deg,
#e8f9fc 0%,
#cceff5 100%
);
border-radius: 30px;
overflow: hidden;
}
.galh-about-image::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
top: 40px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.45);
border-radius: 50%;
}
.galh-about-image img {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-width: 520px;
height: auto;
object-fit: contain;
object-position: bottom center;
}
/* =========================================
TEXT
========================================= */
.galh-about-content {
text-align: right;
}
.galh-about-label {
display: inline-block;
margin-bottom: 18px;
padding: 8px 20px;
background: #e8f9fc;
color: #0786a3;
border-radius: 50px;
font-size: 15px;
font-weight: 800;
}
.galh-about-content h2 {
margin: 0 0 28px;
color: #102a43;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.25;
font-weight: 900;
letter-spacing: -0.8px;
}
.galh-about-content p {
margin: 0 0 18px;
color: #526b7d;
font-size: 18px;
line-height: 1.8;
}
/* =========================================
HIGHLIGHT
========================================= */
.galh-about-highlight {
margin-top: 28px !important;
padding: 22px 25px;
background: #f1fafc;
border-right: 5px solid #08a9c7;
border-radius: 12px;
color: #24485a !important;
font-size: 19px !important;
font-weight: 600;
}
/* =========================================
SIGNATURE
========================================= */
.galh-about-signature {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 30px;
padding-top: 22px;
border-top: 1px solid #e3edf0;
}
.galh-about-signature strong {
color: #102a43;
font-size: 21px;
font-weight: 900;
}
.galh-about-signature span {
color: #718596;
font-size: 15px;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.galh-about-inner {
grid-template-columns: 1fr;
gap: 50px;
max-width: 700px;
}
.galh-about-image {
order: 1;
min-height: 450px;
max-width: 550px;
width: 100%;
margin: 0 auto;
}
.galh-about-content {
order: 2;
text-align: right;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.galh-28day-about {
padding: 65px 18px;
}
.galh-about-inner {
gap: 35px;
}
.galh-about-image {
min-height: 390px;
border-radius: 22px;
}
.galh-about-content h2 {
font-size: 32px;
line-height: 1.3;
}
.galh-about-content p {
font-size: 17px;
line-height: 1.75;
}
.galh-about-highlight {
padding: 18px 20px;
font-size: 17px !important;
}
}
/* =========================================
GALH 28 DAY
PURCHASE SECTION
========================================= */
.galh-28day-purchase {
direction: rtl;
width: 100%;
padding: 110px 20px;
box-sizing: border-box;
background:
linear-gradient(
145deg,
#e9fafd 0%,
#f7fcfd 50%,
#e8f8fb 100%
);
}
.galh-purchase-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
/* =========================================
HEADER
========================================= */
.galh-purchase-label {
display: inline-block;
margin-bottom: 18px;
padding: 8px 22px;
background: #ffffff;
color: #0786a3;
border-radius: 50px;
font-size: 15px;
font-weight: 800;
box-shadow:
0 5px 15px rgba(8, 120, 145, 0.08);
}
.galh-purchase-inner h2 {
max-width: 750px;
margin: 0 auto 20px;
color: #102a43;
font-size: clamp(38px, 5vw, 60px);
line-height: 1.2;
font-weight: 900;
letter-spacing: -1px;
}
.galh-purchase-intro {
max-width: 650px;
margin: 0 auto 45px;
color: #526b7d;
font-size: 20px;
line-height: 1.75;
}
/* =========================================
PRICE CARD
========================================= */
.galh-price-card {
max-width: 520px;
margin: 0 auto;
padding: 45px 40px 35px;
background: #ffffff;
border-radius: 28px;
box-shadow:
0 20px 60px rgba(20, 90, 110, 0.15);
box-sizing: border-box;
}
/* =========================================
PRICE
========================================= */
.galh-price-top {
display: inline-block;
margin-bottom: 18px;
padding: 7px 18px;
background: #fff3d6;
color: #a66a00;
border-radius: 50px;
font-size: 14px;
font-weight: 800;
}
.galh-old-price {
margin-bottom: 3px;
color: #81919c;
font-size: 18px;
}
.galh-old-price span {
text-decoration: line-through;
text-decoration-thickness: 2px;
}
.galh-current-price {
margin: 0;
color: #0786a3;
font-size: 64px;
line-height: 1;
font-weight: 900;
letter-spacing: -2px;
}
.galh-price-note {
margin-top: 10px;
color: #718596;
font-size: 15px;
}
/* =========================================
BENEFITS
========================================= */
.galh-purchase-benefits {
display: flex;
flex-direction: column;
gap: 13px;
margin: 32px auto;
padding-top: 28px;
border-top: 1px solid #e7eff2;
text-align: right;
}
.galh-purchase-benefit {
display: flex;
align-items: center;
gap: 10px;
color: #405b6c;
font-size: 17px;
font-weight: 600;
}
.galh-purchase-benefit span {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 25px;
height: 25px;
background: #e5f8f4;
color: #15916f;
border-radius: 50%;
font-size: 15px;
font-weight: 900;
}
/* =========================================
PURCHASE BUTTON
========================================= */
.galh-purchase-button {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
padding: 20px 25px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#08abc9,
#087f9d
);
color: #ffffff !important;
font-size: 21px;
font-weight: 900;
text-decoration: none !important;
border-radius: 50px;
box-shadow:
0 12px 25px rgba(8, 169, 199, 0.28);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.galh-purchase-button:hover {
transform: translateY(-3px);
box-shadow:
0 18px 35px rgba(8, 169, 199, 0.38);
}
.galh-purchase-button span {
font-size: 25px;
transition:
transform 0.25s ease;
}
.galh-purchase-button:hover span {
transform: translateX(-6px);
}
/* =========================================
SECURITY
========================================= */
.galh-purchase-secure {
margin-top: 18px;
color: #8a9aa5;
font-size: 13px;
}
/* =========================================
BOTTOM MESSAGE
========================================= */
.galh-purchase-bottom {
max-width: 650px;
margin: 45px auto 0;
color: #526b7d;
font-size: 17px;
line-height: 1.7;
}
.galh-purchase-bottom p {
margin: 0 0 8px;
}
.galh-purchase-bottom strong {
color: #102a43;
font-size: 20px;
font-weight: 900;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.galh-28day-purchase {
padding: 70px 18px;
}
.galh-purchase-inner h2 {
font-size: 36px;
}
.galh-purchase-intro {
font-size: 18px;
margin-bottom: 35px;
}
.galh-price-card {
padding: 35px 25px 30px;
border-radius: 22px;
}
.galh-current-price {
font-size: 56px;
}
.galh-purchase-benefit {
font-size: 16px;
}
.galh-purchase-button {
font-size: 19px;
padding: 18px 20px;
}
}
/* =========================================
GALH 28 DAY
PAYMENT OPTIONS
========================================= */
.galh-28day-payment-options {
direction: rtl;
width: 100%;
padding: 65px 20px 80px;
box-sizing: border-box;
background: #ffffff;
}
.galh-payment-inner {
max-width: 1050px;
margin: 0 auto;
text-align: center;
}
/* =========================================
HEADER
========================================= */
.galh-payment-label {
display: inline-block;
margin-bottom: 15px;
padding: 7px 18px;
background: #f1fafc;
color: #0786a3;
border-radius: 50px;
font-size: 14px;
font-weight: 800;
}
.galh-payment-inner h2 {
margin: 0 0 12px;
color: #102a43;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.3;
font-weight: 900;
}
.galh-payment-intro {
max-width: 650px;
margin: 0 auto 40px;
color: #607589;
font-size: 17px;
line-height: 1.7;
}
/* =========================================
PAYMENT GRID
========================================= */
.galh-payment-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
/* =========================================
PAYMENT CARD
========================================= */
.galh-payment-card {
padding: 30px 22px;
background: #f8fcfd;
border: 1px solid #e1eef1;
border-radius: 18px;
box-sizing: border-box;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.galh-payment-card:hover {
transform: translateY(-3px);
box-shadow:
0 10px 25px rgba(20, 90, 110, 0.08);
}
.galh-payment-icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
margin: 0 auto 15px;
background: #e8f9fc;
border-radius: 50%;
font-size: 23px;
}
.galh-payment-card h3 {
margin: 0 0 10px;
color: #102a43;
font-size: 21px;
font-weight: 900;
}
.galh-payment-card p {
margin: 0 0 8px;
color: #718596;
font-size: 15px;
}
.galh-payment-detail {
display: block;
direction: ltr;
color: #0786a3;
font-size: 20px;
font-weight: 900;
}
.galh-payment-email {
font-size: 17px;
word-break: break-word;
}
/* =========================================
BANK DETAILS
========================================= */
.galh-bank-details {
color: #526b7d;
font-size: 14px;
line-height: 1.8;
}
.galh-bank-details strong {
color: #102a43;
font-size: 16px;
}
/* =========================================
AFTER PAYMENT
========================================= */
.galh-payment-after {
display: flex;
align-items: center;
gap: 18px;
max-width: 700px;
margin: 35px auto 0;
padding: 22px 28px;
background: #f1fafc;
border-right: 5px solid #08a9c7;
border-radius: 14px;
box-sizing: border-box;
text-align: right;
}
.galh-payment-after-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 50px;
height: 50px;
background: #ffffff;
border-radius: 50%;
font-size: 22px;
}
.galh-payment-after h3 {
margin: 0 0 5px;
color: #102a43;
font-size: 19px;
font-weight: 900;
}
.galh-payment-after p {
margin: 0;
color: #526b7d;
font-size: 15px;
line-height: 1.7;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 800px) {
.galh-payment-grid {
grid-template-columns: 1fr;
max-width: 500px;
}
}
@media (max-width: 600px) {
.galh-28day-payment-options {
padding: 50px 18px 65px;
}
.galh-payment-inner h2 {
font-size: 29px;
}
.galh-payment-intro {
font-size: 16px;
}
.galh-payment-card {
padding: 25px 20px;
}
.galh-payment-after {
align-items: flex-start;
padding: 20px;
gap: 13px;
}
.galh-payment-after-icon {
width: 42px;
height: 42px;
font-size: 18px;
}
}
/* =========================================
GALH FAQ NEW
========================================= */
.galh-faq-new {
direction: rtl;
width: 100%;
padding: 90px 20px;
box-sizing: border-box;
background: #f7fbfc;
}
.galh-faq-container {
max-width: 850px;
margin: 0 auto;
text-align: center;
}
/* =========================================
HEADER
========================================= */
.galh-faq-badge {
display: inline-block;
margin-bottom: 15px;
padding: 8px 20px;
background: #e8f9fc;
color: #0786a3;
border-radius: 50px;
font-size: 14px;
font-weight: 800;
}
.galh-faq-title {
margin: 0 0 15px;
color: #102a43;
font-size: clamp(36px, 5vw, 52px);
line-height: 1.2;
font-weight: 900;
}
.galh-faq-subtitle {
max-width: 600px;
margin: 0 auto 45px;
color: #607589;
font-size: 18px;
line-height: 1.7;
}
/* =========================================
FAQ LIST
========================================= */
.galh-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
text-align: right;
}
/* =========================================
FAQ BOX
========================================= */
.galh-faq-box {
overflow: hidden;
background: #ffffff;
border: 1px solid #e1edf0;
border-radius: 14px;
box-shadow:
0 5px 18px rgba(20, 90, 110, 0.04);
transition:
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.galh-faq-box.galh-faq-open {
border-color: #b9e5ec;
box-shadow:
0 8px 25px rgba(20, 90, 110, 0.08);
}
/* =========================================
QUESTION BUTTON
========================================= */
.galh-faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: 22px 25px;
margin: 0;
border: 0;
background: #ffffff;
color: #102a43;
font-family: inherit;
font-size: 18px;
font-weight: 800;
line-height: 1.5;
text-align: right;
cursor: pointer;
box-sizing: border-box;
}
.galh-faq-question:hover {
background: #fbfeff;
}
/* =========================================
PLUS ICON
========================================= */
.galh-faq-plus {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
background: #e8f9fc;
color: #0786a3;
border-radius: 50%;
font-size: 23px;
font-weight: 400;
line-height: 1;
transition:
transform 0.3s ease,
background 0.3s ease,
color 0.3s ease;
}
.galh-faq-open .galh-faq-plus {
transform: rotate(45deg);
background: #0786a3;
color: #ffffff;
}
/* =========================================
ANSWER
========================================= */
.galh-faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 25px;
opacity: 0;
color: #607589;
font-size: 16px;
line-height: 1.8;
transition:
max-height 0.35s ease,
opacity 0.25s ease,
padding 0.35s ease;
}
.galh-faq-open .galh-faq-answer {
max-height: 500px;
padding: 0 25px 25px;
opacity: 1;
}
.galh-faq-answer p {
margin: 0 0 12px;
}
.galh-faq-answer p:last-child {
margin-bottom: 0;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.galh-faq-new {
padding: 65px 16px;
}
.galh-faq-subtitle {
font-size: 16px;
margin-bottom: 30px;
}
.galh-faq-question {
padding: 19px 18px;
font-size: 16px;
}
.galh-faq-plus {
width: 28px;
height: 28px;
font-size: 20px;
}
.galh-faq-answer {
padding-left: 18px;
padding-right: 18px;
font-size: 15px;
}
.galh-faq-open .galh-faq-answer {
padding-left: 18px;
padding-right: 18px;
padding-bottom: 20px;
}
}
/* =========================================
FINAL CTA
========================================= */
.galh-final-cta-new {
direction: rtl;
width: 100%;
padding: 95px 20px 105px;
box-sizing: border-box;
background:
linear-gradient(
145deg,
#0786a3 0%,
#056b83 100%
);
text-align: center;
}
.galh-final-cta-container {
max-width: 750px;
margin: 0 auto;
}
/* =========================================
ICON
========================================= */
.galh-final-icon {
display: flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
margin: 0 auto 22px;
background:
rgba(255,255,255,0.15);
border:
1px solid rgba(255,255,255,0.25);
border-radius: 50%;
font-size: 29px;
}
/* =========================================
TITLE
========================================= */
.galh-final-cta-container h2 {
margin: 0 0 18px;
color: #ffffff;
font-size: clamp(44px, 6vw, 68px);
line-height: 1.15;
font-weight: 900;
}
.galh-final-main-text {
margin: 0 0 10px;
color: #ffffff;
font-size: 25px;
line-height: 1.6;
font-weight: 800;
}
.galh-final-secondary-text {
max-width: 600px;
margin: 0 auto 38px;
color:
rgba(255,255,255,0.85);
font-size: 18px;
line-height: 1.7;
}
/* =========================================
PRICE
========================================= */
.galh-final-price-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin-bottom: 28px;
}
.galh-final-old-price {
color:
rgba(255,255,255,0.7);
font-size: 17px;
text-decoration:
line-through;
}
.galh-final-price-box strong {
color: #ffffff;
font-size: 60px;
line-height: 1;
font-weight: 900;
}
.galh-final-price-description {
color:
rgba(255,255,255,0.8);
font-size: 14px;
}
/* =========================================
BUTTON
========================================= */
.galh-final-buy-button {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 21px 30px;
box-sizing: border-box;
background: #ffffff;
color: #0786a3 !important;
font-family: inherit;
font-size: 21px;
font-weight: 900;
text-decoration: none !important;
border-radius: 50px;
box-shadow:
0 12px 30px rgba(0,0,0,0.18);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.galh-final-buy-button:hover {
transform:
translateY(-3px);
box-shadow:
0 18px 40px rgba(0,0,0,0.25);
}
.galh-final-buy-button span {
font-size: 25px;
transition:
transform 0.25s ease;
}
.galh-final-buy-button:hover span {
transform:
translateX(-6px);
}
/* =========================================
SECURE
========================================= */
.galh-final-secure {
margin: 18px 0 0;
color:
rgba(255,255,255,0.7);
font-size: 13px;
}
/* =========================================
CLOSING
========================================= */
.galh-final-heart {
margin-top: 45px;
font-size: 25px;
}
.galh-final-goodbye {
margin: 10px 0 0;
color:
rgba(255,255,255,0.9);
font-size: 17px;
font-weight: 700;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.galh-final-cta-new {
padding:
70px 18px 80px;
}
.galh-final-main-text {
font-size: 21px;
}
.galh-final-secondary-text {
font-size: 17px;
}
.galh-final-price-box strong {
font-size: 52px;
}
.galh-final-buy-button {
padding:
19px 20px;
font-size: 18px;
}
}
/* ================================
HERO - הקורס המזורז לחיטוב הגוף
================================ */
.cutting-hero {
direction: rtl;
width: 100%;
padding: 70px 25px;
background: linear-gradient(
135deg,
#f7fbfc 0%,
#ffffff 50%,
#eef9fb 100%
);
overflow: hidden;
box-sizing: border-box;
}
.cutting-hero-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
/* ================================
צד הטקסט
================================ */
.cutting-hero-content {
flex: 1;
max-width: 650px;
text-align: right;
}
.cutting-hero-badge {
display: inline-block;
background: #e6f7fa;
color: #078da5;
border: 1px solid #b9e7ed;
border-radius: 30px;
padding: 9px 18px;
font-size: 16px;
font-weight: 700;
margin-bottom: 18px;
}
.cutting-hero h1 {
margin: 0 0 18px;
color: #172033;
font-size: clamp(40px, 5vw, 66px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1.5px;
}
.cutting-hero h1 span {
color: #0795ad;
}
.cutting-hero h2 {
margin: 0 0 22px;
color: #263346;
font-size: clamp(24px, 3vw, 36px);
line-height: 1.3;
font-weight: 700;
}
.cutting-hero-text {
margin: 0 0 30px;
color: #4d5968;
font-size: 19px;
line-height: 1.75;
max-width: 620px;
}
/* ================================
יתרונות
================================ */
.cutting-hero-benefits {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
}
.cutting-benefit {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid #e1eaed;
border-radius: 14px;
padding: 13px 16px;
color: #344052;
font-size: 15px;
line-height: 1.4;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}
.cutting-benefit-icon {
font-size: 27px;
line-height: 1;
}
.cutting-benefit strong {
color: #172033;
}
/* ================================
כפתור
================================ */
.cutting-hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: #0795ad;
color: #ffffff !important;
text-decoration: none !important;
font-size: 19px;
font-weight: 800;
padding: 17px 30px;
border-radius: 12px;
box-shadow: 0 8px 22px rgba(7, 149, 173, 0.25);
transition: all 0.25s ease;
}
.cutting-hero-button span {
font-size: 24px;
transition: transform 0.25s ease;
}
.cutting-hero-button:hover {
background: #067f94;
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(7, 149, 173, 0.3);
}
.cutting-hero-button:hover span {
transform: translateX(-4px);
}
.cutting-hero-note {
margin-top: 12px;
color: #7b8794;
font-size: 14px;
}
/* ================================
צד התמונה
================================ */
.cutting-hero-image {
position: relative;
flex: 0 0 430px;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 500px;
}
.cutting-hero-image img {
position: relative;
z-index: 2;
width: 100%;
max-width: 430px;
height: auto;
display: block;
object-fit: contain;
filter: drop-shadow(0 18px 25px rgba(0, 0, 0, 0.15));
}
.cutting-image-glow {
position: absolute;
z-index: 1;
width: 390px;
height: 390px;
border-radius: 50%;
background: #dff5f8;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
/* ================================
טאבלט
================================ */
@media (max-width: 900px) {
.cutting-hero {
padding: 55px 20px;
}
.cutting-hero-inner {
flex-direction: column-reverse;
text-align: center;
}
.cutting-hero-content {
max-width: 700px;
text-align: center;
}
.cutting-hero-image {
flex-basis: auto;
width: 100%;
max-width: 420px;
min-height: auto;
}
.cutting-hero-image img {
max-width: 360px;
}
.cutting-image-glow {
width: 330px;
height: 330px;
}
.cutting-hero-benefits {
justify-content: center;
}
.cutting-hero-button {
margin: 0 auto;
}
}
/* ================================
מובייל
================================ */
@media (max-width: 600px) {
.cutting-hero {
padding: 40px 16px 50px;
}
.cutting-hero-inner {
gap: 25px;
}
.cutting-hero-badge {
font-size: 14px;
padding: 8px 15px;
}
.cutting-hero h1 {
font-size: 39px;
line-height: 1.12;
letter-spacing: -0.5px;
}
.cutting-hero h2 {
font-size: 23px;
line-height: 1.35;
}
.cutting-hero-text {
font-size: 17px;
line-height: 1.65;
}
.cutting-hero-benefits {
flex-direction: column;
align-items: stretch;
}
.cutting-benefit {
justify-content: flex-start;
text-align: right;
}
.cutting-hero-image img {
max-width: 300px;
}
.cutting-image-glow {
width: 280px;
height: 280px;
}
.cutting-hero-button {
width: 100%;
box-sizing: border-box;
font-size: 17px;
padding: 16px 18px;
}
}
/* =================================
מקטע - הבעיה / למה קשה להתחטב
================================= */
.cutting-problem {
direction: rtl;
width: 100%;
padding: 80px 25px;
background: #ffffff;
box-sizing: border-box;
}
.cutting-problem-inner {
max-width: 1100px;
margin: 0 auto;
}
/* =================================
כותרת וטקסט
================================= */
.cutting-problem-header {
max-width: 850px;
margin: 0 auto 55px;
text-align: center;
}
.cutting-problem-badge {
display: inline-block;
padding: 9px 18px;
margin-bottom: 20px;
border-radius: 30px;
background: #eaf8fa;
border: 1px solid #c5e9ee;
color: #078da5;
font-size: 16px;
font-weight: 700;
}
.cutting-problem h2 {
margin: 0 0 28px;
color: #172033;
font-size: clamp(34px, 4.5vw, 52px);
line-height: 1.2;
font-weight: 800;
}
.cutting-problem h2 span {
color: #0795ad;
}
.cutting-problem-intro {
max-width: 760px;
margin: 0 auto 18px;
color: #505c6b;
font-size: 19px;
line-height: 1.75;
}
.cutting-problem-highlight {
margin: 35px auto 15px;
color: #172033;
font-size: 26px;
line-height: 1.4;
font-weight: 800;
}
.cutting-problem-text {
max-width: 780px;
margin: 0 auto;
color: #505c6b;
font-size: 19px;
line-height: 1.75;
}
.cutting-problem-text strong {
color: #172033;
}
.cutting-problem-final {
margin: 25px auto 0;
color: #0795ad;
font-size: 24px;
line-height: 1.5;
font-weight: 800;
}
/* =================================
כרטיסים
================================= */
.cutting-problem-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 20px;
}
.cutting-problem-card {
padding: 32px 25px;
text-align: center;
background: #f8fbfc;
border: 1px solid #e2edef;
border-radius: 18px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cutting-problem-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}
.cutting-card-icon {
font-size: 42px;
line-height: 1;
margin-bottom: 17px;
}
.cutting-problem-card h3 {
margin: 0 0 12px;
color: #172033;
font-size: 24px;
font-weight: 800;
}
.cutting-problem-card p {
margin: 0;
color: #5c6875;
font-size: 17px;
line-height: 1.65;
}
/* =================================
משפט סיום
================================= */
.cutting-problem-bottom {
max-width: 850px;
margin: 55px auto 0;
padding: 25px 30px;
text-align: center;
color: #344052;
background: #eef9fb;
border-radius: 16px;
font-size: 20px;
line-height: 1.7;
}
.cutting-problem-bottom strong {
color: #078da5;
}
/* =================================
טאבלט
================================= */
@media (max-width: 800px) {
.cutting-problem {
padding: 65px 20px;
}
.cutting-problem-cards {
grid-template-columns: 1fr;
max-width: 550px;
margin-left: auto;
margin-right: auto;
}
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.cutting-problem {
padding: 50px 16px;
}
.cutting-problem-header {
margin-bottom: 40px;
}
.cutting-problem-badge {
font-size: 14px;
padding: 8px 15px;
}
.cutting-problem h2 {
font-size: 34px;
}
.cutting-problem-intro {
font-size: 17px;
line-height: 1.7;
}
.cutting-problem-highlight {
font-size: 23px;
margin-top: 28px;
}
.cutting-problem-text {
font-size: 17px;
line-height: 1.7;
}
.cutting-problem-final {
font-size: 21px;
}
.cutting-problem-card {
padding: 27px 22px;
}
.cutting-problem-bottom {
margin-top: 40px;
padding: 22px 18px;
font-size: 18px;
}
}
/* =================================
מקטע - מה לומדים בקורס
================================= */
.cutting-course-content {
direction: rtl;
width: 100%;
padding: 85px 25px;
background: #f7fbfc;
box-sizing: border-box;
}
.cutting-course-content-inner {
max-width: 1050px;
margin: 0 auto;
}
/* =================================
כותרת
================================= */
.cutting-content-header {
max-width: 800px;
margin: 0 auto 60px;
text-align: center;
}
.cutting-content-badge {
display: inline-block;
padding: 9px 18px;
margin-bottom: 20px;
border-radius: 30px;
background: #ffffff;
border: 1px solid #c8e8ed;
color: #078da5;
font-size: 16px;
font-weight: 700;
}
.cutting-content-header h2 {
margin: 0 0 22px;
color: #172033;
font-size: clamp(36px, 4.5vw, 54px);
line-height: 1.2;
font-weight: 800;
}
.cutting-content-header h2 span {
color: #0795ad;
}
.cutting-content-header p {
max-width: 700px;
margin: 0 auto;
color: #566272;
font-size: 19px;
line-height: 1.75;
}
.cutting-content-header p strong {
color: #172033;
}
/* =================================
שלבים
================================= */
.cutting-course-steps {
position: relative;
max-width: 900px;
margin: 0 auto;
}
/* קו מחבר */
.cutting-course-steps::before {
content: "";
position: absolute;
top: 45px;
bottom: 45px;
right: 43px;
width: 2px;
background: #c9e7ec;
}
/* =================================
כרטיס
================================= */
.cutting-course-step {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 22px;
padding: 25px 28px 25px 30px;
background: #ffffff;
border: 1px solid #e2edef;
border-radius: 18px;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.04);
transition: all 0.25s ease;
}
.cutting-course-step:last-child {
margin-bottom: 0;
}
.cutting-course-step:hover {
transform: translateX(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}
/* מספר */
.cutting-step-number {
flex: 0 0 55px;
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0795ad;
color: #ffffff;
font-size: 16px;
font-weight: 800;
box-shadow: 0 0 0 7px #f7fbfc;
}
/* אייקון */
.cutting-step-icon {
flex: 0 0 55px;
font-size: 38px;
line-height: 1;
text-align: center;
}
/* תוכן */
.cutting-step-content {
flex: 1;
}
.cutting-step-content h3 {
margin: 0 0 8px;
color: #172033;
font-size: 23px;
font-weight: 800;
line-height: 1.3;
}
.cutting-step-content p {
margin: 0;
color: #5a6674;
font-size: 17px;
line-height: 1.65;
}
/* =================================
תיבת סיום
================================= */
.cutting-content-bottom {
display: flex;
align-items: center;
gap: 20px;
max-width: 850px;
margin: 55px auto 0;
padding: 25px 30px;
background: #eaf8fa;
border: 1px solid #c5e9ee;
border-radius: 18px;
color: #344052;
font-size: 18px;
line-height: 1.65;
}
.cutting-content-bottom-icon {
flex: 0 0 auto;
font-size: 38px;
}
.cutting-content-bottom strong {
color: #078da5;
font-size: 20px;
}
.cutting-content-bottom p {
margin: 5px 0 0;
}
/* =================================
טאבלט
================================= */
@media (max-width: 800px) {
.cutting-course-content {
padding: 65px 20px;
}
.cutting-course-steps::before {
right: 38px;
}
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.cutting-course-content {
padding: 55px 16px;
}
.cutting-content-header {
margin-bottom: 40px;
}
.cutting-content-badge {
font-size: 14px;
padding: 8px 15px;
}
.cutting-content-header h2 {
font-size: 35px;
}
.cutting-content-header p {
font-size: 17px;
line-height: 1.7;
}
.cutting-course-steps::before {
display: none;
}
.cutting-course-step {
display: grid;
grid-template-columns: 50px 1fr;
gap: 15px;
padding: 22px 18px;
}
.cutting-step-number {
width: 50px;
height: 50px;
font-size: 14px;
}
.cutting-step-icon {
grid-column: 2;
grid-row: 1;
text-align: right;
font-size: 32px;
}
.cutting-step-content {
grid-column: 1 / -1;
}
.cutting-step-content h3 {
font-size: 21px;
}
.cutting-step-content p {
font-size: 16px;
line-height: 1.65;
}
.cutting-content-bottom {
flex-direction: column;
text-align: center;
padding: 23px 18px;
gap: 10px;
}
.cutting-content-bottom strong {
font-size: 18px;
}
.cutting-content-bottom p {
font-size: 16px;
}
}
/* =================================
מקטע - כלים וחומרים מצורפים
================================= */
.cutting-tools {
direction: rtl;
width: 100%;
padding: 85px 25px;
background: #ffffff;
box-sizing: border-box;
}
.cutting-tools-inner {
max-width: 1100px;
margin: 0 auto;
}
/* =================================
כותרת
================================= */
.cutting-tools-header {
max-width: 820px;
margin: 0 auto 55px;
text-align: center;
}
.cutting-tools-badge {
display: inline-block;
padding: 9px 18px;
margin-bottom: 20px;
border-radius: 30px;
background: #eaf8fa;
border: 1px solid #c5e9ee;
color: #078da5;
font-size: 16px;
font-weight: 700;
}
.cutting-tools-header h2 {
margin: 0 0 25px;
color: #172033;
font-size: clamp(36px, 4.5vw, 54px);
line-height: 1.2;
font-weight: 800;
}
.cutting-tools-header h2 span {
color: #0795ad;
}
.cutting-tools-header p {
max-width: 750px;
margin: 0 auto 16px;
color: #566272;
font-size: 19px;
line-height: 1.75;
}
/* =================================
כרטיסים
================================= */
.cutting-tools-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
max-width: 1000px;
margin: 0 auto;
}
.cutting-tool-card {
display: flex;
align-items: flex-start;
gap: 22px;
padding: 35px 30px;
background: #f7fbfc;
border: 1px solid #dfedef;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
transition: all 0.25s ease;
}
.cutting-tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}
/* =================================
אייקון
================================= */
.cutting-tool-icon {
flex: 0 0 70px;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
background: #ffffff;
font-size: 42px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
/* =================================
תוכן
================================= */
.cutting-tool-content {
flex: 1;
}
.cutting-tool-content h3 {
margin: 0 0 12px;
color: #172033;
font-size: 25px;
font-weight: 800;
line-height: 1.3;
}
.cutting-tool-content p {
margin: 0 0 20px;
color: #596574;
font-size: 17px;
line-height: 1.7;
}
/* =================================
נקודות
================================= */
.cutting-tool-points {
display: flex;
flex-direction: column;
gap: 9px;
color: #344052;
font-size: 15px;
font-weight: 600;
}
.cutting-tool-points div::first-letter {
color: #0795ad;
}
/* =================================
תיבת סיום
================================= */
.cutting-tools-bottom {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
max-width: 900px;
margin: 50px auto 0;
padding: 25px 30px;
background: #eaf8fa;
border: 1px solid #c5e9ee;
border-radius: 18px;
text-align: center;
color: #078da5;
font-size: 20px;
line-height: 1.6;
}
.cutting-tools-bottom-icon {
flex: 0 0 auto;
font-size: 36px;
}
/* =================================
טאבלט
================================= */
@media (max-width: 850px) {
.cutting-tools {
padding: 65px 20px;
}
.cutting-tools-cards {
grid-template-columns: 1fr;
max-width: 650px;
}
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.cutting-tools {
padding: 55px 16px;
}
.cutting-tools-header {
margin-bottom: 40px;
}
.cutting-tools-badge {
font-size: 14px;
padding: 8px 15px;
}
.cutting-tools-header h2 {
font-size: 35px;
}
.cutting-tools-header p {
font-size: 17px;
line-height: 1.7;
}
.cutting-tool-card {
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 22px;
}
.cutting-tool-content h3 {
font-size: 23px;
}
.cutting-tool-content p {
font-size: 16px;
}
.cutting-tool-points {
text-align: right;
font-size: 14px;
}
.cutting-tools-bottom {
flex-direction: column;
padding: 23px 18px;
font-size: 18px;
}
}
/* =================================
מקטע - האם הקורס מתאים לכם?
================================= */
.cutting-fit {
direction: rtl;
width: 100%;
padding: 85px 25px;
background: #f7fbfc;
box-sizing: border-box;
}
.cutting-fit-inner {
max-width: 1050px;
margin: 0 auto;
}
/* =================================
כותרת
================================= */
.cutting-fit-header {
max-width: 800px;
margin: 0 auto 55px;
text-align: center;
}
.cutting-fit-badge {
display: inline-block;
padding: 9px 18px;
margin-bottom: 20px;
border-radius: 30px;
background: #ffffff;
border: 1px solid #c5e9ee;
color: #078da5;
font-size: 16px;
font-weight: 700;
}
.cutting-fit-header h2 {
margin: 0 0 22px;
color: #172033;
font-size: clamp(36px, 4.5vw, 54px);
line-height: 1.2;
font-weight: 800;
}
.cutting-fit-header h2 span {
color: #0795ad;
}
.cutting-fit-header p {
max-width: 720px;
margin: 0 auto;
color: #566272;
font-size: 19px;
line-height: 1.75;
}
/* =================================
כרטיסים
================================= */
.cutting-fit-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 950px;
margin: 0 auto;
}
.cutting-fit-card {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 27px 25px;
background: #ffffff;
border: 1px solid #e1edef;
border-radius: 18px;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.04);
transition: all 0.25s ease;
}
.cutting-fit-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}
/* הכרטיס החמישי */
.cutting-fit-card-wide {
grid-column: 1 / -1;
max-width: 600px;
width: 100%;
justify-self: center;
box-sizing: border-box;
}
/* =================================
אייקון
================================= */
.cutting-fit-icon {
flex: 0 0 58px;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: #eaf8fa;
border-radius: 15px;
font-size: 31px;
}
/* =================================
תוכן
================================= */
.cutting-fit-card h3 {
margin: 0 0 8px;
color: #172033;
font-size: 20px;
line-height: 1.35;
font-weight: 800;
}
.cutting-fit-card p {
margin: 0;
color: #5a6674;
font-size: 16px;
line-height: 1.65;
}
/* =================================
סיכום
================================= */
.cutting-fit-conclusion {
display: flex;
align-items: center;
gap: 18px;
max-width: 800px;
margin: 55px auto 0;
padding: 25px 30px;
background: #eaf8fa;
border: 1px solid #c5e9ee;
border-radius: 18px;
color: #344052;
line-height: 1.6;
}
.cutting-fit-conclusion-icon {
flex: 0 0 48px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0795ad;
color: #ffffff;
font-size: 24px;
font-weight: 800;
}
.cutting-fit-conclusion strong {
display: block;
color: #078da5;
font-size: 20px;
}
.cutting-fit-conclusion p {
margin: 5px 0 0;
font-size: 17px;
}
/* =================================
הערה חשובה
================================= */
.cutting-fit-note {
max-width: 750px;
margin: 30px auto 0;
text-align: center;
color: #7a8693;
font-size: 14px;
line-height: 1.7;
}
.cutting-fit-note strong {
color: #596574;
}
/* =================================
טאבלט
================================= */
@media (max-width: 800px) {
.cutting-fit {
padding: 65px 20px;
}
.cutting-fit-grid {
grid-template-columns: 1fr;
max-width: 650px;
}
.cutting-fit-card-wide {
grid-column: auto;
max-width: none;
}
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.cutting-fit {
padding: 55px 16px;
}
.cutting-fit-header {
margin-bottom: 40px;
}
.cutting-fit-badge {
font-size: 14px;
padding: 8px 15px;
}
.cutting-fit-header h2 {
font-size: 35px;
}
.cutting-fit-header p {
font-size: 17px;
line-height: 1.7;
}
.cutting-fit-card {
gap: 15px;
padding: 23px 18px;
}
.cutting-fit-icon {
flex: 0 0 50px;
width: 50px;
height: 50px;
font-size: 27px;
}
.cutting-fit-card h3 {
font-size: 19px;
}
.cutting-fit-card p {
font-size: 15px;
line-height: 1.65;
}
.cutting-fit-conclusion {
flex-direction: column;
text-align: center;
padding: 23px 18px;
}
.cutting-fit-conclusion strong {
font-size: 18px;
}
.cutting-fit-conclusion p {
font-size: 16px;
}
}
/* =================================
מקטע המלצות
================================= */
.cutting-testimonials {
direction: rtl;
width: 100%;
padding: 90px 25px;
background: #ffffff;
box-sizing: border-box;
}
.cutting-testimonials-inner {
max-width: 1100px;
margin: 0 auto;
}
/* =================================
כותרת
================================= */
.cutting-testimonials-header {
max-width: 800px;
margin: 0 auto 55px;
text-align: center;
}
.cutting-testimonials-badge {
display: inline-block;
padding: 9px 18px;
margin-bottom: 20px;
border-radius: 30px;
background: #eaf8fa;
border: 1px solid #c5e9ee;
color: #078da5;
font-size: 16px;
font-weight: 700;
}
.cutting-testimonials-header h2 {
margin: 0 0 22px;
color: #172033;
font-size: clamp(36px, 4.5vw, 54px);
line-height: 1.2;
font-weight: 800;
}
.cutting-testimonials-header h2 span {
color: #0795ad;
}
.cutting-testimonials-header p {
max-width: 720px;
margin: 0 auto;
color: #566272;
font-size: 19px;
line-height: 1.75;
}
/* =================================
כרטיסי המלצות
================================= */
.cutting-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 1050px;
margin: 0 auto;
}
.cutting-testimonial-card {
position: relative;
padding: 35px 28px 28px;
background: #f7fbfc;
border: 1px solid #e1edef;
border-radius: 18px;
box-shadow: 0 7px 25px rgba(0, 0, 0, 0.04);
}
.cutting-testimonial-quote {
position: absolute;
top: 12px;
right: 22px;
color: #b9e3e9;
font-family: Georgia, serif;
font-size: 65px;
line-height: 1;
font-weight: bold;
}
.cutting-testimonial-card p {
margin: 15px 0 22px;
color: #4f5b69;
font-size: 16px;
line-height: 1.75;
}
.cutting-testimonial-name {
color: #078da5;
font-size: 16px;
font-weight: 800;
}
/* =================================
כותרת צילומי המסך
================================= */
.cutting-screenshots-header {
max-width: 750px;
margin: 75px auto 35px;
text-align: center;
}
.cutting-screenshots-header h3 {
margin: 0 0 12px;
color: #172033;
font-size: 28px;
line-height: 1.4;
font-weight: 800;
}
.cutting-screenshots-header p {
margin: 0;
color: #697584;
font-size: 17px;
line-height: 1.6;
}
/* =================================
צילומי מסך
================================= */
.cutting-screenshots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: start;
max-width: 1000px;
margin: 0 auto;
}
.cutting-screenshot {
overflow: hidden;
border-radius: 14px;
background: #f7fbfc;
border: 1px solid #e3edef;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}
.cutting-screenshot img {
display: block;
width: 100%;
height: auto;
}
/* =================================
משפט סיום
================================= */
.cutting-testimonials-bottom {
max-width: 800px;
margin: 55px auto 0;
padding: 25px 30px;
text-align: center;
background: #eaf8fa;
border: 1px solid #c5e9ee;
border-radius: 18px;
color: #078da5;
font-size: 20px;
line-height: 1.6;
}
/* =================================
טאבלט
================================= */
@media (max-width: 850px) {
.cutting-testimonials {
padding: 70px 20px;
}
.cutting-testimonials-grid {
grid-template-columns: 1fr;
max-width: 650px;
}
.cutting-testimonial-card {
padding: 30px 25px;
}
.cutting-screenshots {
grid-template-columns: 1fr;
max-width: 550px;
}
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.cutting-testimonials {
padding: 55px 16px;
}
.cutting-testimonials-header {
margin-bottom: 40px;
}
.cutting-testimonials-badge {
font-size: 14px;
padding: 8px 15px;
}
.cutting-testimonials-header h2 {
font-size: 35px;
}
.cutting-testimonials-header p {
font-size: 17px;
line-height: 1.7;
}
.cutting-testimonial-card p {
font-size: 16px;
}
.cutting-screenshots-header {
margin-top: 55px;
}
.cutting-screenshots-header h3 {
font-size: 23px;
}
.cutting-screenshots-header p {
font-size: 16px;
}
.cutting-testimonials-bottom {
padding: 22px 18px;
font-size: 18px;
}
}
/* =================================
מקטע - נעים להכיר, אני גל
================================= */
.about-gal {
direction: rtl;
width: 100%;
padding: 90px 25px;
background: #f7fbfc;
box-sizing: border-box;
}
.about-gal-inner {
max-width: 1050px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
align-items: center;
gap: 70px;
}
/* =================================
תמונה
================================= */
.about-gal-image {
position: relative;
text-align: center;
}
.about-gal-image::before {
content: "";
position: absolute;
width: 85%;
height: 85%;
top: 8%;
right: 7%;
background: #e2f5f7;
border-radius: 30px;
z-index: 0;
}
.about-gal-image img {
position: relative;
z-index: 1;
display: block;
width: 100%;
max-width: 420px;
height: auto;
margin: 0 auto;
border-radius: 22px;
}
/* =================================
תוכן
================================= */
.about-gal-content {
max-width: 620px;
}
.about-gal-badge {
display: inline-block;
padding: 9px 18px;
margin-bottom: 20px;
border-radius: 30px;
background: #ffffff;
border: 1px solid #c5e9ee;
color: #078da5;
font-size: 16px;
font-weight: 700;
}
.about-gal-content h2 {
margin: 0 0 30px;
color: #172033;
font-size: clamp(38px, 4.5vw, 54px);
line-height: 1.2;
font-weight: 800;
}
.about-gal-content h2 span {
color: #0795ad;
}
/* =================================
טקסט
================================= */
.about-gal-text p {
margin: 0 0 18px;
color: #566272;
font-size: 18px;
line-height: 1.8;
}
.about-gal-text strong {
color: #172033;
font-weight: 800;
}
.about-gal-final {
margin-top: 25px !important;
padding: 20px 24px;
background: #eaf8fa;
border-right: 4px solid #0795ad;
border-radius: 10px;
color: #078da5 !important;
font-size: 19px !important;
font-weight: 700;
line-height: 1.7 !important;
}
/* =================================
טאבלט
================================= */
@media (max-width: 850px) {
.about-gal {
padding: 70px 20px;
}
.about-gal-inner {
grid-template-columns: 1fr;
gap: 45px;
max-width: 700px;
}
.about-gal-image {
order: 1;
}
.about-gal-content {
order: 2;
max-width: 100%;
}
.about-gal-image img {
max-width: 380px;
}
.about-gal-content {
text-align: center;
}
.about-gal-final {
text-align: right;
}
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.about-gal {
padding: 55px 16px;
}
.about-gal-inner {
gap: 35px;
}
.about-gal-image img {
max-width: 330px;
}
.about-gal-content h2 {
font-size: 36px;
margin-bottom: 25px;
}
.about-gal-badge {
font-size: 14px;
padding: 8px 15px;
}
.about-gal-text p {
font-size: 17px;
line-height: 1.75;
}
.about-gal-final {
padding: 18px 20px;
font-size: 17px !important;
}
}
/* =================================
מקטע רכישה
================================= */
.cutting-purchase {
direction: rtl;
width: 100%;
padding: 100px 20px;
background: #f7fbfc;
box-sizing: border-box;
}
.cutting-purchase-inner {
max-width: 850px;
margin: 0 auto;
text-align: center;
}
/* =================================
כותרת
================================= */
.cutting-purchase-badge {
display: inline-block;
padding: 10px 22px;
margin-bottom: 22px;
border-radius: 30px;
background: #eaf8fa;
border: 1px solid #c5e9ee;
color: #078da5;
font-size: 16px;
font-weight: 800;
}
.cutting-purchase h2 {
margin: 0 0 20px;
color: #172033;
font-size: clamp(38px, 5vw, 58px);
line-height: 1.2;
font-weight: 800;
}
.cutting-purchase h2 span {
color: #0795ad;
}
.cutting-purchase-intro {
max-width: 650px;
margin: 0 auto 45px;
color: #566272;
font-size: 20px;
line-height: 1.7;
}
/* =================================
כרטיס ההצעה
================================= */
.cutting-offer {
max-width: 600px;
margin: 0 auto;
padding: 45px 40px 40px;
background: #ffffff;
border: 2px solid #bfe5ea;
border-radius: 25px;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}
/* =================================
מחיר
================================= */
.cutting-offer-label {
color: #7b8793;
font-size: 16px;
font-weight: 600;
}
.cutting-old-price {
margin-top: 3px;
color: #8c959d;
font-size: 24px;
text-decoration: line-through;
}
.cutting-special-label {
margin-top: 25px;
color: #078da5;
font-size: 18px;
font-weight: 800;
}
.cutting-price {
margin-top: 2px;
color: #172033;
font-size: 64px;
line-height: 1.1;
font-weight: 900;
}
.cutting-one-time {
margin-top: 8px;
color: #7b8793;
font-size: 15px;
}
/* =================================
יתרונות
================================= */
.cutting-benefits {
max-width: 390px;
margin: 32px auto 30px;
padding-top: 25px;
border-top: 1px solid #e5edef;
text-align: right;
}
.cutting-benefit {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 13px;
color: #3e4a58;
font-size: 16px;
line-height: 1.5;
}
.cutting-benefit span {
flex: 0 0 auto;
color: #0795ad;
font-size: 19px;
font-weight: 900;
}
/* =================================
כפתור רכישה
================================= */
.cutting-purchase-button {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
min-height: 64px;
padding: 15px 25px;
box-sizing: border-box;
border-radius: 12px;
background: #0795ad;
color: #ffffff !important;
font-size: 20px;
font-weight: 800;
line-height: 1.3;
text-decoration: none !important;
box-shadow: 0 8px 20px rgba(7, 149, 173, 0.25);
transition: all 0.25s ease;
}
.cutting-purchase-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(7, 149, 173, 0.35);
background: #07879d;
}
.cutting-purchase-button span {
font-size: 25px;
transition: transform 0.25s ease;
}
.cutting-purchase-button:hover span {
transform: translateX(-4px);
}
/* =================================
הערת תשלום
================================= */
.cutting-payment-note {
margin-top: 18px;
color: #89939d;
font-size: 13px;
}
/* =================================
משפט סיום
================================= */
.cutting-purchase-bottom {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 45px;
color: #596574;
font-size: 18px;
}
.cutting-purchase-bottom strong {
color: #172033;
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.cutting-purchase {
padding: 65px 16px;
}
.cutting-purchase h2 {
font-size: 38px;
}
.cutting-purchase-intro {
font-size: 18px;
margin-bottom: 35px;
}
.cutting-offer {
padding: 35px 22px 30px;
border-radius: 20px;
}
.cutting-price {
font-size: 55px;
}
.cutting-special-label {
font-size: 17px;
}
.cutting-benefit {
font-size: 15px;
}
.cutting-purchase-button {
min-height: 60px;
font-size: 18px;
}
.cutting-purchase-bottom {
flex-direction: column;
font-size: 17px;
}
}
/* =================================
אפשרויות תשלום נוספות
================================= */
.cutting-payment-options {
direction: rtl;
width: 100%;
padding: 75px 20px;
background: #ffffff;
box-sizing: border-box;
}
.cutting-payment-options-inner {
max-width: 1000px;
margin: 0 auto;
}
/* =================================
כותרת
================================= */
.cutting-payment-options-header {
max-width: 700px;
margin: 0 auto 40px;
text-align: center;
}
.cutting-payment-options-badge {
display: inline-block;
padding: 8px 17px;
margin-bottom: 18px;
border-radius: 30px;
background: #f1fafb;
border: 1px solid #ccebef;
color: #078da5;
font-size: 15px;
font-weight: 700;
}
.cutting-payment-options-header h2 {
margin: 0 0 15px;
color: #172033;
font-size: clamp(32px, 4vw, 46px);
line-height: 1.25;
font-weight: 800;
}
.cutting-payment-options-header h2 span {
color: #0795ad;
}
.cutting-payment-options-header p {
max-width: 650px;
margin: 0 auto;
color: #687482;
font-size: 17px;
line-height: 1.7;
}
/* =================================
שיטות תשלום
================================= */
.cutting-payment-methods {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
align-items: stretch;
}
/* =================================
כרטיס תשלום
================================= */
.cutting-payment-method {
padding: 28px 22px;
text-align: center;
background: #f7fbfc;
border: 1px solid #e1edef;
border-radius: 16px;
box-sizing: border-box;
}
.cutting-payment-method-icon {
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
margin: 0 auto 15px;
border-radius: 15px;
background: #ffffff;
font-size: 27px;
}
.cutting-payment-method h3 {
margin: 0 0 10px;
color: #172033;
font-size: 20px;
font-weight: 800;
}
.cutting-payment-method p {
margin: 0 0 8px;
color: #697584;
font-size: 15px;
}
.cutting-payment-detail {
color: #078da5;
font-size: 18px;
font-weight: 800;
direction: ltr;
}
/* =================================
פרטי בנק
================================= */
.cutting-bank-details {
margin-top: 15px;
color: #566272;
font-size: 14px;
line-height: 1.8;
text-align: right;
}
.cutting-bank-details strong {
color: #344052;
}
/* =================================
הוראות לאחר תשלום
================================= */
.cutting-payment-instructions {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
max-width: 750px;
margin: 35px auto 0;
padding: 22px 28px;
background: #eaf8fa;
border: 1px solid #c5e9ee;
border-radius: 15px;
color: #344052;
}
.cutting-payment-instructions-icon {
flex: 0 0 auto;
font-size: 28px;
}
.cutting-payment-instructions strong {
display: block;
margin-bottom: 4px;
color: #078da5;
font-size: 17px;
}
.cutting-payment-instructions p {
margin: 0;
color: #687482;
font-size: 15px;
line-height: 1.6;
}
/* =================================
טאבלט
================================= */
@media (max-width: 800px) {
.cutting-payment-methods {
grid-template-columns: 1fr 1fr;
max-width: 650px;
margin: 0 auto;
}
.cutting-payment-bank {
grid-column: 1 / -1;
max-width: 400px;
width: 100%;
justify-self: center;
}
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.cutting-payment-options {
padding: 55px 16px;
}
.cutting-payment-options-header h2 {
font-size: 34px;
}
.cutting-payment-options-header p {
font-size: 16px;
}
.cutting-payment-methods {
grid-template-columns: 1fr;
max-width: 450px;
}
.cutting-payment-bank {
grid-column: auto;
max-width: none;
}
.cutting-payment-instructions {
flex-direction: column;
text-align: center;
padding: 22px 18px;
}
}
/* =================================
תיקון HERO - הקורס המזורז לחיטוב
================================= */
/* ביטול השפעה של הגדרות כלליות על הטקסט */
.cutting-hero .cutting-benefit strong {
font-weight: 400;
color: #344052;
}
/* הכותרת של כל כרטיס נשארת מודגשת */
.cutting-hero .cutting-benefit strong {
font-weight: 700;
color: #172033;
}
/* שלושת הכרטיסים בשורה אחת בדסקטופ */
@media (min-width: 901px) {
.cutting-hero-benefits {
display: flex;
flex-wrap: nowrap;
gap: 10px;
width: 100%;
}
.cutting-hero .cutting-benefit {
flex: 1 1 0;
min-width: 0;
padding: 13px 12px;
}
}
/* =================================
FAQ - שאלות נפוצות
================================= */
.cutting-faq {
direction: rtl;
width: 100%;
padding: 90px 20px;
background: #f7fbfc;
box-sizing: border-box;
}
.cutting-faq-inner {
max-width: 850px;
margin: 0 auto;
}
/* =================================
כותרת
================================= */
.cutting-faq-header {
max-width: 700px;
margin: 0 auto 45px;
text-align: center;
}
.cutting-faq-badge {
display: inline-block;
padding: 9px 18px;
margin-bottom: 18px;
border-radius: 30px;
background: #eaf8fa;
border: 1px solid #c5e9ee;
color: #078da5;
font-size: 15px;
font-weight: 700;
}
.cutting-faq-header h2 {
margin: 0 0 18px;
color: #172033;
font-size: clamp(36px, 4.5vw, 52px);
line-height: 1.2;
font-weight: 800;
}
.cutting-faq-header h2 span {
color: #0795ad;
}
.cutting-faq-header p {
margin: 0;
color: #687482;
font-size: 18px;
line-height: 1.7;
}
/* =================================
רשימת שאלות
================================= */
.cutting-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* =================================
פריט שאלה
================================= */
.cutting-faq-item {
background: #ffffff;
border: 1px solid #e0eaed;
border-radius: 14px;
overflow: hidden;
transition: border-color 0.2s ease,
box-shadow 0.2s ease;
}
.cutting-faq-item:hover {
border-color: #b9e2e8;
}
.cutting-faq-item[open] {
border-color: #b9e2e8;
box-shadow: 0 7px 25px rgba(0, 0, 0, 0.04);
}
/* =================================
שאלה
================================= */
.cutting-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 25px;
cursor: pointer;
list-style: none;
color: #172033;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
}
.cutting-faq-item summary::-webkit-details-marker {
display: none;
}
/* =================================
אייקון פתיחה
================================= */
.cutting-faq-arrow {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 50%;
background: #eaf8fa;
color: #078da5;
font-size: 22px;
font-weight: 400;
line-height: 1;
transition: transform 0.25s ease,
background 0.25s ease;
}
/* הופך את ה + לסימן מינוס */
.cutting-faq-item[open] .cutting-faq-arrow {
transform: rotate(45deg);
background: #078da5;
color: #ffffff;
}
/* =================================
תשובה
================================= */
.cutting-faq-answer {
padding: 0 25px 25px;
color: #5b6876;
font-size: 16px;
line-height: 1.8;
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.cutting-faq {
padding: 60px 16px;
}
.cutting-faq-header {
margin-bottom: 35px;
}
.cutting-faq-header h2 {
font-size: 36px;
}
.cutting-faq-header p {
font-size: 16px;
}
.cutting-faq-item summary {
padding: 19px 18px;
font-size: 16px;
}
.cutting-faq-arrow {
width: 28px;
height: 28px;
font-size: 20px;
}
.cutting-faq-answer {
padding: 0 18px 20px;
font-size: 15px;
line-height: 1.75;
}
}
/* =================================
CTA סופי
================================= */
.cutting-final-cta {
direction: rtl;
width: 100%;
padding: 90px 20px;
background: #078da5;
box-sizing: border-box;
text-align: center;
}
.cutting-final-cta-inner {
max-width: 750px;
margin: 0 auto;
}
/* =================================
אייקון
================================= */
.cutting-final-cta-icon {
font-size: 42px;
margin-bottom: 15px;
}
/* =================================
כותרת
================================= */
.cutting-final-cta h2 {
margin: 0 0 22px;
color: #ffffff;
font-size: clamp(38px, 5vw, 58px);
line-height: 1.2;
font-weight: 800;
}
.cutting-final-cta h2 span {
color: #dff7fa;
}
/* =================================
טקסט
================================= */
.cutting-final-cta-main {
margin: 0 0 40px;
color: #ffffff;
font-size: 21px;
line-height: 1.7;
}
/* =================================
הצעה
================================= */
.cutting-final-offer {
margin: 0 auto 30px;
}
.cutting-final-course-name {
color: #ffffff;
font-size: 20px;
font-weight: 700;
}
.cutting-final-price-label {
margin-top: 15px;
color: #dff7fa;
font-size: 16px;
}
.cutting-final-price {
margin-top: 2px;
color: #ffffff;
font-size: 58px;
line-height: 1.1;
font-weight: 900;
}
.cutting-final-payment {
margin-top: 8px;
color: #dff7fa;
font-size: 14px;
}
/* =================================
כפתור
================================= */
.cutting-final-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 310px;
min-height: 64px;
padding: 15px 30px;
box-sizing: border-box;
border-radius: 12px;
background: #ffffff;
color: #078da5 !important;
font-size: 20px;
font-weight: 800;
line-height: 1.3;
text-decoration: none !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: all 0.25s ease;
}
.cutting-final-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.cutting-final-button span {
font-size: 25px;
transition: transform 0.25s ease;
}
.cutting-final-button:hover span {
transform: translateX(-4px);
}
/* =================================
הערה
================================= */
.cutting-final-note {
margin-top: 18px;
color: #dff7fa;
font-size: 13px;
}
/* =================================
מובייל
================================= */
@media (max-width: 600px) {
.cutting-final-cta {
padding: 65px 16px;
}
.cutting-final-cta h2 {
font-size: 38px;
}
.cutting-final-cta-main {
font-size: 18px;
}
.cutting-final-price {
font-size: 52px;
}
.cutting-final-button {
width: 100%;
min-width: 0;
font-size: 18px;
}
}
/* =========================================
MUSCLE PROGRAM
HERO SECTION
========================================= */
.muscle-hero {
direction: rtl;
position: relative;
width: 100%;
min-height: 720px;
padding: 80px 24px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(
circle at 85% 35%,
rgba(215, 38, 38, 0.24) 0%,
rgba(215, 38, 38, 0.05) 34%,
transparent 62%
),
linear-gradient(
135deg,
#101010 0%,
#181818 48%,
#0b0b0b 100%
);
color: #ffffff;
}
/* =========================================
BACKGROUND DECORATIONS
========================================= */
.muscle-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.025) 1px,
transparent 1px
);
background-size: 42px 42px;
pointer-events: none;
}
.muscle-hero::after {
content: "";
position: absolute;
width: 600px;
height: 2px;
top: 110px;
left: -120px;
background:
linear-gradient(
90deg,
transparent,
rgba(218, 45, 45, 0.75),
transparent
);
transform: rotate(-14deg);
box-shadow:
0 0 30px rgba(218, 45, 45, 0.45);
pointer-events: none;
}
.muscle-hero-bg-shape {
position: absolute;
border-radius: 50%;
filter: blur(2px);
pointer-events: none;
}
.muscle-hero-bg-shape-one {
width: 420px;
height: 420px;
top: -250px;
right: -150px;
border:
70px solid rgba(213, 36, 36, 0.06);
}
.muscle-hero-bg-shape-two {
width: 280px;
height: 280px;
bottom: -190px;
left: -100px;
border:
50px solid rgba(255, 255, 255, 0.025);
}
/* =========================================
INNER LAYOUT
========================================= */
.muscle-hero-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
minmax(0, 1.12fr)
minmax(340px, 0.88fr);
align-items: center;
gap: 70px;
max-width: 1220px;
min-height: 560px;
margin: 0 auto;
}
/* =========================================
CONTENT
========================================= */
.muscle-hero-content {
max-width: 700px;
text-align: right;
}
.muscle-hero-badge {
display: inline-flex;
align-items: center;
padding: 9px 18px;
margin-bottom: 22px;
background:
rgba(215, 42, 42, 0.13);
border:
1px solid rgba(231, 63, 63, 0.42);
border-radius: 50px;
color: #ff7777;
font-size: 15px;
font-weight: 800;
line-height: 1.4;
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.18);
}
/* =========================================
MAIN TITLE
========================================= */
.muscle-hero h1 {
margin: 0 0 20px;
color: #ffffff;
font-size: clamp(44px, 5.5vw, 72px);
line-height: 1.05;
font-weight: 900;
letter-spacing: -1.8px;
}
.muscle-hero h1 span {
display: block;
margin-top: 5px;
color: #e53c3c;
text-shadow:
0 0 25px rgba(229, 60, 60, 0.22);
}
/* =========================================
SECONDARY TITLE
========================================= */
.muscle-hero h2 {
max-width: 680px;
margin: 0 0 22px;
color: #f3f3f3;
font-size: clamp(24px, 2.7vw, 34px);
line-height: 1.35;
font-weight: 750;
}
/* =========================================
DESCRIPTION
========================================= */
.muscle-hero-description {
max-width: 660px;
margin: 0 0 32px;
color: #bdbdbd;
font-size: 18px;
line-height: 1.8;
font-weight: 400;
}
/* =========================================
BENEFITS GRID
========================================= */
.muscle-hero-benefits {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px;
max-width: 690px;
margin-bottom: 34px;
}
.muscle-hero-benefit {
display: flex;
align-items: center;
gap: 13px;
min-width: 0;
padding: 15px 16px;
background:
rgba(255, 255, 255, 0.055);
border:
1px solid rgba(255, 255, 255, 0.10);
border-radius: 15px;
box-sizing: border-box;
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.16);
transition:
transform 0.25s ease,
border-color 0.25s ease,
background 0.25s ease;
}
.muscle-hero-benefit:hover {
transform: translateY(-3px);
background:
rgba(255, 255, 255, 0.075);
border-color:
rgba(227, 61, 61, 0.38);
}
.muscle-hero-benefit-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background:
rgba(222, 46, 46, 0.14);
border:
1px solid rgba(229, 60, 60, 0.28);
border-radius: 13px;
font-size: 24px;
}
.muscle-hero-benefit-text {
min-width: 0;
}
.muscle-hero-benefit-text strong {
display: block;
margin-bottom: 2px;
color: #ffffff;
font-size: 16px;
line-height: 1.35;
font-weight: 800;
}
.muscle-hero-benefit-text span {
display: block;
color: #b7b7b7;
font-size: 14px;
line-height: 1.45;
font-weight: 400;
}
/* =========================================
CTA BUTTON
========================================= */
.muscle-hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 62px;
padding: 16px 30px;
background:
linear-gradient(
135deg,
#e53c3c,
#af1919
);
color: #ffffff !important;
border:
1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
box-sizing: border-box;
font-size: 19px;
font-weight: 900;
line-height: 1.3;
text-decoration: none !important;
box-shadow:
0 12px 30px rgba(190, 22, 22, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
.muscle-hero-button:hover {
transform: translateY(-3px);
background:
linear-gradient(
135deg,
#ef4949,
#bd2020
);
box-shadow:
0 17px 38px rgba(190, 22, 22, 0.44),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.muscle-hero-button-arrow {
font-size: 25px;
line-height: 1;
transition:
transform 0.25s ease;
}
.muscle-hero-button:hover
.muscle-hero-button-arrow {
transform: translateX(-6px);
}
/* =========================================
CTA NOTE
========================================= */
.muscle-hero-note {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin-top: 16px;
color: #969696;
font-size: 13px;
line-height: 1.6;
}
.muscle-hero-note span {
color: #565656;
}
/* =========================================
IMAGE AREA
========================================= */
.muscle-hero-image-area {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 570px;
}
.muscle-hero-image-glow {
position: absolute;
width: 390px;
height: 480px;
bottom: 15px;
left: 50%;
transform:
translateX(-50%);
background:
radial-gradient(
ellipse at center,
rgba(218, 44, 44, 0.42) 0%,
rgba(218, 44, 44, 0.16) 45%,
transparent 72%
);
filter: blur(25px);
pointer-events: none;
}
.muscle-hero-image-circle {
position: absolute;
width: 385px;
height: 385px;
bottom: 60px;
left: 50%;
transform:
translateX(-50%);
background:
linear-gradient(
145deg,
rgba(224, 52, 52, 0.23),
rgba(255, 255, 255, 0.025)
);
border:
1px solid rgba(236, 75, 75, 0.2);
border-radius: 50%;
box-shadow:
inset 0 0 45px rgba(227, 48, 48, 0.1),
0 0 55px rgba(190, 24, 24, 0.15);
pointer-events: none;
}
.muscle-hero-image {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-width: 455px;
height: auto;
margin: 0 auto;
object-fit: contain;
object-position:
bottom center;
filter:
drop-shadow(
0 24px 30px
rgba(0, 0, 0, 0.46)
);
}
/* =========================================
IMAGE TAG
========================================= */
.muscle-hero-image-tag {
position: absolute;
z-index: 4;
right: 0;
bottom: 45px;
display: flex;
align-items: center;
gap: 11px;
padding: 13px 16px;
background:
rgba(19, 19, 19, 0.92);
border:
1px solid rgba(231, 65, 65, 0.42);
border-radius: 14px;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.35);
backdrop-filter:
blur(10px);
}
.muscle-hero-image-tag-icon {
display: flex;
align-items: center;
justify-content: center;
width: 39px;
height: 39px;
background:
rgba(229, 60, 60, 0.15);
border-radius: 10px;
font-size: 20px;
}
.muscle-hero-image-tag strong {
display: block;
margin-bottom: 2px;
color: #ffffff;
font-size: 15px;
font-weight: 850;
}
.muscle-hero-image-tag div > span {
display: block;
color: #aaaaaa;
font-size: 12px;
line-height: 1.4;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1020px) {
.muscle-hero {
min-height: auto;
padding: 65px 20px;
}
.muscle-hero-inner {
grid-template-columns: 1fr;
gap: 45px;
max-width: 760px;
}
.muscle-hero-content {
max-width: 760px;
text-align: center;
}
.muscle-hero h2,
.muscle-hero-description {
margin-right: auto;
margin-left: auto;
}
.muscle-hero-benefits {
margin-right: auto;
margin-left: auto;
}
.muscle-hero-button {
margin-right: auto;
margin-left: auto;
}
.muscle-hero-note {
justify-content: center;
}
.muscle-hero-image-area {
min-height: 500px;
max-width: 520px;
width: 100%;
margin: 0 auto;
}
.muscle-hero-image {
max-width: 400px;
}
.muscle-hero-image-tag {
right: 20px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 640px) {
.muscle-hero {
padding:
48px 16px 55px;
}
.muscle-hero-inner {
gap: 34px;
}
.muscle-hero-badge {
padding: 8px 14px;
font-size: 13px;
}
.muscle-hero h1 {
font-size: 41px;
line-height: 1.08;
letter-spacing: -0.8px;
}
.muscle-hero h2 {
font-size: 22px;
line-height: 1.4;
}
.muscle-hero-description {
font-size: 16px;
line-height: 1.72;
}
.muscle-hero-benefits {
grid-template-columns: 1fr;
max-width: 440px;
gap: 10px;
}
.muscle-hero-benefit {
padding: 13px 14px;
text-align: right;
}
.muscle-hero-benefit-icon {
width: 44px;
height: 44px;
font-size: 22px;
}
.muscle-hero-benefit-text strong {
font-size: 15px;
}
.muscle-hero-benefit-text span {
font-size: 13px;
}
.muscle-hero-button {
width: 100%;
min-height: 59px;
padding: 15px 18px;
font-size: 17px;
}
.muscle-hero-note {
justify-content: center;
font-size: 12px;
}
.muscle-hero-image-area {
min-height: 420px;
}
.muscle-hero-image {
max-width: 330px;
}
.muscle-hero-image-circle {
width: 300px;
height: 300px;
bottom: 45px;
}
.muscle-hero-image-glow {
width: 310px;
height: 390px;
}
.muscle-hero-image-tag {
right: 50%;
bottom: 15px;
transform:
translateX(50%);
width: max-content;
max-width: 90%;
box-sizing: border-box;
}
}
/* =========================================
VERY SMALL MOBILE
========================================= */
@media (max-width: 390px) {
.muscle-hero h1 {
font-size: 36px;
}
.muscle-hero h2 {
font-size: 20px;
}
.muscle-hero-image-area {
min-height: 380px;
}
.muscle-hero-image {
max-width: 295px;
}
.muscle-hero-image-tag {
padding: 11px 13px;
}
.muscle-hero-image-tag strong {
font-size: 14px;
}
}
/* =========================================
MUSCLE PROGRAM
CLICKABLE COURSE BANNER
========================================= */
.muscle-course-banner {
direction: rtl;
width: 100%;
padding: 52px 22px 58px;
background: #0d0d0d;
box-sizing: border-box;
}
.muscle-course-banner-inner {
max-width: 1180px;
margin: 0 auto;
text-align: center;
}
/* =========================================
LINK WRAPPER
========================================= */
.muscle-course-banner-link {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border: 1px solid rgba(230, 57, 57, 0.34);
border-radius: 22px;
background: #151515;
box-shadow:
0 20px 55px rgba(0, 0, 0, 0.42),
0 0 35px rgba(190, 22, 22, 0.11);
text-decoration: none !important;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.muscle-course-banner-link:hover {
transform: translateY(-5px);
border-color: rgba(235, 70, 70, 0.65);
box-shadow:
0 28px 65px rgba(0, 0, 0, 0.52),
0 0 48px rgba(200, 28, 28, 0.2);
}
/* =========================================
IMAGE
========================================= */
.muscle-course-banner-image {
display: block;
width: 100%;
height: auto;
margin: 0;
transition:
transform 0.45s ease,
filter 0.35s ease;
}
.muscle-course-banner-link:hover
.muscle-course-banner-image {
transform: scale(1.018);
filter: brightness(0.82);
}
/* =========================================
OVERLAY
========================================= */
.muscle-course-banner-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 24px;
box-sizing: border-box;
background:
linear-gradient(
180deg,
transparent 45%,
rgba(0, 0, 0, 0.18) 67%,
rgba(0, 0, 0, 0.78) 100%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.muscle-course-banner-link:hover
.muscle-course-banner-overlay {
opacity: 1;
}
/* =========================================
CTA INSIDE BANNER
========================================= */
.muscle-course-banner-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 11px;
padding: 13px 22px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50px;
background:
linear-gradient(
135deg,
#e53c3c,
#ad1717
);
color: #ffffff;
font-size: 17px;
font-weight: 900;
line-height: 1.3;
box-shadow:
0 10px 28px rgba(168, 20, 20, 0.4);
}
.muscle-course-banner-cta-arrow {
font-size: 23px;
line-height: 1;
transition: transform 0.25s ease;
}
.muscle-course-banner-link:hover
.muscle-course-banner-cta-arrow {
transform: translateX(-5px);
}
/* =========================================
NOTE BELOW
========================================= */
.muscle-course-banner-note {
margin: 18px 0 0;
color: #9d9d9d;
font-size: 14px;
line-height: 1.6;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.muscle-course-banner {
padding: 42px 18px 48px;
}
.muscle-course-banner-link {
border-radius: 17px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.muscle-course-banner {
padding: 32px 14px 38px;
}
.muscle-course-banner-link {
border-radius: 13px;
}
.muscle-course-banner-overlay {
position: static;
padding: 14px;
background: #151515;
opacity: 1;
}
.muscle-course-banner-link:hover
.muscle-course-banner-image {
transform: none;
filter: none;
}
.muscle-course-banner-cta {
width: 100%;
box-sizing: border-box;
padding: 12px 18px;
font-size: 15px;
}
.muscle-course-banner-note {
margin-top: 14px;
font-size: 13px;
}
}
/* =========================================
MUSCLE PROGRAM
PROBLEM SECTION
========================================= */
.muscle-problem {
direction: rtl;
position: relative;
width: 100%;
padding: 95px 22px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(
circle at 10% 10%,
rgba(211, 47, 47, 0.06),
transparent 34%
),
#f8f9fa;
}
.muscle-problem::before {
content: "";
position: absolute;
width: 380px;
height: 380px;
top: -250px;
left: -180px;
border: 55px solid rgba(207, 39, 39, 0.035);
border-radius: 50%;
pointer-events: none;
}
.muscle-problem-inner {
position: relative;
z-index: 1;
max-width: 1120px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.muscle-problem-header {
max-width: 850px;
margin: 0 auto 55px;
text-align: center;
}
.muscle-problem-badge {
display: inline-block;
margin-bottom: 20px;
padding: 9px 18px;
background: #fff0f0;
border: 1px solid #f2caca;
border-radius: 50px;
color: #bd2929;
font-size: 15px;
font-weight: 800;
}
.muscle-problem h2 {
margin: 0 0 24px;
color: #171717;
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.18;
font-weight: 900;
letter-spacing: -1px;
}
.muscle-problem h2 span {
display: block;
margin-top: 5px;
color: #cf3030;
}
.muscle-problem-intro {
max-width: 780px;
margin: 0 auto;
color: #59616c;
font-size: 19px;
line-height: 1.8;
}
/* =========================================
CARDS GRID
========================================= */
.muscle-problem-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
/* =========================================
CARD
========================================= */
.muscle-problem-card {
position: relative;
min-height: 300px;
padding: 34px 28px 30px;
overflow: hidden;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #e6e7e9;
border-top: 4px solid #d53a3a;
border-radius: 20px;
box-shadow:
0 12px 34px rgba(19, 26, 34, 0.065);
text-align: right;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.muscle-problem-card:hover {
transform: translateY(-6px);
border-color: #efc6c6;
box-shadow:
0 18px 42px rgba(19, 26, 34, 0.11);
}
/* =========================================
CARD NUMBER
========================================= */
.muscle-problem-card-number {
position: absolute;
top: 17px;
left: 20px;
color: #f2dede;
font-size: 38px;
line-height: 1;
font-weight: 900;
}
/* =========================================
CARD ICON
========================================= */
.muscle-problem-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 20px;
background: #fff0f0;
border: 1px solid #f3d3d3;
border-radius: 17px;
font-size: 31px;
}
/* =========================================
CARD TEXT
========================================= */
.muscle-problem-card h3 {
margin: 0 0 13px;
color: #1b1b1b;
font-size: 23px;
line-height: 1.35;
font-weight: 900;
}
.muscle-problem-card p {
margin: 0;
color: #626a75;
font-size: 16px;
line-height: 1.75;
}
/* =========================================
SOLUTION BOX
========================================= */
.muscle-problem-solution {
display: flex;
align-items: center;
gap: 22px;
max-width: 880px;
margin: 58px auto 0;
padding: 28px 32px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#1a1a1a,
#101010
);
border: 1px solid rgba(221, 54, 54, 0.48);
border-radius: 20px;
box-shadow:
0 16px 42px rgba(0, 0, 0, 0.18),
0 0 30px rgba(194, 31, 31, 0.08);
text-align: right;
}
.muscle-problem-solution-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
background:
linear-gradient(
135deg,
#e44848,
#a81818
);
border-radius: 50%;
color: #ffffff;
font-size: 27px;
font-weight: 900;
box-shadow:
0 8px 20px rgba(184, 25, 25, 0.34);
}
.muscle-problem-solution h3 {
margin: 0 0 8px;
color: #ffffff;
font-size: 24px;
line-height: 1.35;
font-weight: 900;
}
.muscle-problem-solution p {
margin: 0;
color: #c0c0c0;
font-size: 17px;
line-height: 1.7;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.muscle-problem {
padding: 75px 20px;
}
.muscle-problem-grid {
grid-template-columns: 1fr;
max-width: 650px;
margin: 0 auto;
}
.muscle-problem-card {
min-height: auto;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.muscle-problem {
padding: 58px 16px;
}
.muscle-problem-header {
margin-bottom: 40px;
}
.muscle-problem-badge {
padding: 8px 14px;
font-size: 13px;
}
.muscle-problem h2 {
font-size: 35px;
line-height: 1.2;
}
.muscle-problem-intro {
font-size: 17px;
line-height: 1.72;
}
.muscle-problem-card {
padding: 29px 22px 26px;
}
.muscle-problem-card-number {
top: 15px;
left: 17px;
font-size: 33px;
}
.muscle-problem-card-icon {
width: 57px;
height: 57px;
font-size: 28px;
}
.muscle-problem-card h3 {
font-size: 21px;
}
.muscle-problem-card p {
font-size: 15px;
}
.muscle-problem-solution {
flex-direction: column;
margin-top: 42px;
padding: 25px 20px;
text-align: center;
}
.muscle-problem-solution h3 {
font-size: 22px;
}
.muscle-problem-solution p {
font-size: 16px;
}
}
/* =========================================
MUSCLE PROGRAM
PROGRAM CONTENT SECTION
========================================= */
.muscle-program-content {
direction: rtl;
position: relative;
width: 100%;
padding: 95px 22px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(
circle at 90% 10%,
rgba(209, 42, 42, 0.075),
transparent 30%
),
linear-gradient(
180deg,
#111111 0%,
#171717 100%
);
color: #ffffff;
}
.muscle-program-content::before {
content: "";
position: absolute;
width: 520px;
height: 2px;
right: -130px;
bottom: 110px;
background:
linear-gradient(
90deg,
transparent,
rgba(224, 56, 56, 0.65),
transparent
);
transform: rotate(-12deg);
box-shadow:
0 0 25px rgba(218, 44, 44, 0.34);
pointer-events: none;
}
.muscle-program-content-inner {
position: relative;
z-index: 1;
max-width: 1120px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.muscle-program-content-header {
max-width: 840px;
margin: 0 auto 58px;
text-align: center;
}
.muscle-program-content-badge {
display: inline-block;
margin-bottom: 20px;
padding: 9px 18px;
background:
rgba(220, 48, 48, 0.13);
border:
1px solid rgba(235, 72, 72, 0.38);
border-radius: 50px;
color: #ff7777;
font-size: 15px;
font-weight: 800;
}
.muscle-program-content h2 {
margin: 0 0 24px;
color: #ffffff;
font-size: clamp(37px, 4.6vw, 57px);
line-height: 1.17;
font-weight: 900;
letter-spacing: -1px;
}
.muscle-program-content h2 span {
display: block;
margin-top: 6px;
color: #e64040;
}
.muscle-program-content-header p {
max-width: 760px;
margin: 0 auto;
color: #bcbcbc;
font-size: 19px;
line-height: 1.8;
}
/* =========================================
GRID
========================================= */
.muscle-program-content-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 22px;
}
/* =========================================
CARD
========================================= */
.muscle-program-content-card {
position: relative;
min-height: 390px;
padding: 35px 30px 30px;
overflow: hidden;
box-sizing: border-box;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.07),
rgba(255, 255, 255, 0.035)
);
border:
1px solid rgba(255, 255, 255, 0.11);
border-radius: 21px;
box-shadow:
0 14px 35px rgba(0, 0, 0, 0.25);
text-align: right;
transition:
transform 0.25s ease,
border-color 0.25s ease,
background 0.25s ease;
}
.muscle-program-content-card::after {
content: "";
position: absolute;
width: 170px;
height: 170px;
top: -100px;
left: -90px;
background:
rgba(222, 45, 45, 0.09);
border-radius: 50%;
pointer-events: none;
}
.muscle-program-content-card:hover {
transform: translateY(-6px);
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.09),
rgba(255, 255, 255, 0.045)
);
border-color:
rgba(229, 64, 64, 0.45);
}
/* =========================================
CARD NUMBER
========================================= */
.muscle-program-content-number {
position: absolute;
top: 19px;
left: 22px;
color: rgba(230, 66, 66, 0.25);
font-size: 39px;
line-height: 1;
font-weight: 900;
}
/* =========================================
ICON
========================================= */
.muscle-program-content-icon {
display: flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
margin-bottom: 22px;
background:
rgba(223, 45, 45, 0.13);
border:
1px solid rgba(234, 65, 65, 0.3);
border-radius: 18px;
font-size: 32px;
}
/* =========================================
CARD CONTENT
========================================= */
.muscle-program-content-card h3 {
margin: 0 0 13px;
color: #ffffff;
font-size: 25px;
line-height: 1.3;
font-weight: 900;
}
.muscle-program-content-card > p {
margin: 0 0 22px;
color: #b9b9b9;
font-size: 16px;
line-height: 1.75;
}
/* =========================================
LIST
========================================= */
.muscle-program-content-card ul {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 20px 0 0;
border-top:
1px solid rgba(255, 255, 255, 0.09);
list-style: none;
}
.muscle-program-content-card li {
position: relative;
padding-right: 24px;
color: #dddddd;
font-size: 15px;
line-height: 1.55;
}
.muscle-program-content-card li::before {
content: "✓";
position: absolute;
top: 0;
right: 0;
color: #ec4a4a;
font-size: 16px;
font-weight: 900;
}
/* =========================================
SUMMARY BOX
========================================= */
.muscle-program-content-summary {
display: flex;
align-items: center;
gap: 22px;
max-width: 900px;
margin: 58px auto 0;
padding: 29px 33px;
box-sizing: border-box;
background: #ffffff;
border-right:
6px solid #df3c3c;
border-radius: 19px;
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.27);
text-align: right;
}
.muscle-program-content-summary-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 61px;
height: 61px;
background: #fff0f0;
border-radius: 17px;
font-size: 30px;
}
.muscle-program-content-summary h3 {
margin: 0 0 8px;
color: #181818;
font-size: 23px;
line-height: 1.35;
font-weight: 900;
}
.muscle-program-content-summary p {
margin: 0;
color: #5f6670;
font-size: 16px;
line-height: 1.75;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 850px) {
.muscle-program-content {
padding: 75px 20px;
}
.muscle-program-content-grid {
grid-template-columns: 1fr;
max-width: 680px;
margin: 0 auto;
}
.muscle-program-content-card {
min-height: auto;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.muscle-program-content {
padding: 58px 16px;
}
.muscle-program-content-header {
margin-bottom: 40px;
}
.muscle-program-content-badge {
padding: 8px 14px;
font-size: 13px;
}
.muscle-program-content h2 {
font-size: 35px;
line-height: 1.2;
}
.muscle-program-content-header p {
font-size: 17px;
line-height: 1.72;
}
.muscle-program-content-card {
padding: 30px 22px 26px;
}
.muscle-program-content-number {
top: 16px;
left: 17px;
font-size: 34px;
}
.muscle-program-content-icon {
width: 59px;
height: 59px;
font-size: 28px;
}
.muscle-program-content-card h3 {
font-size: 22px;
}
.muscle-program-content-card > p {
font-size: 15px;
}
.muscle-program-content-card li {
font-size: 14px;
}
.muscle-program-content-summary {
flex-direction: column;
margin-top: 42px;
padding: 25px 20px;
border-right: 0;
border-top:
5px solid #df3c3c;
text-align: center;
}
.muscle-program-content-summary h3 {
font-size: 21px;
}
.muscle-program-content-summary p {
font-size: 15px;
}
}
/* =========================================
MUSCLE PROGRAM
CUSTOMIZATION SECTION
========================================= */
.muscle-customization {
direction: rtl;
position: relative;
width: 100%;
padding: 95px 22px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(
circle at 90% 15%,
rgba(211, 43, 43, 0.07),
transparent 32%
),
#f8f9fa;
}
.muscle-customization::before {
content: "";
position: absolute;
width: 330px;
height: 330px;
bottom: -225px;
right: -145px;
border:
50px solid rgba(207, 44, 44, 0.035);
border-radius: 50%;
pointer-events: none;
}
.muscle-customization-inner {
position: relative;
z-index: 1;
max-width: 1120px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.muscle-customization-header {
max-width: 850px;
margin: 0 auto 58px;
text-align: center;
}
.muscle-customization-badge {
display: inline-block;
margin-bottom: 20px;
padding: 9px 18px;
background: #fff0f0;
border:
1px solid #f0cccc;
border-radius: 50px;
color: #bd2929;
font-size: 15px;
font-weight: 800;
}
.muscle-customization h2 {
margin: 0 0 24px;
color: #171717;
font-size: clamp(37px, 4.5vw, 56px);
line-height: 1.18;
font-weight: 900;
letter-spacing: -1px;
}
.muscle-customization h2 span {
display: block;
margin-top: 6px;
color: #ce3030;
}
.muscle-customization-header p {
max-width: 770px;
margin: 0 auto;
color: #5d6570;
font-size: 19px;
line-height: 1.8;
}
/* =========================================
GRID
========================================= */
.muscle-customization-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 20px;
}
/* =========================================
CARD
========================================= */
.muscle-customization-card {
display: flex;
align-items: flex-start;
gap: 20px;
min-height: 185px;
padding: 29px 27px;
box-sizing: border-box;
background: #ffffff;
border:
1px solid #e4e6e8;
border-radius: 19px;
box-shadow:
0 10px 30px rgba(20, 25, 32, 0.06);
text-align: right;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.muscle-customization-card:hover {
transform: translateY(-5px);
border-color: #efc5c5;
box-shadow:
0 17px 38px rgba(20, 25, 32, 0.105);
}
/* =========================================
ICON
========================================= */
.muscle-customization-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 65px;
height: 65px;
background:
linear-gradient(
145deg,
#fff2f2,
#ffe6e6
);
border:
1px solid #f2cece;
border-radius: 17px;
font-size: 31px;
}
/* =========================================
CARD CONTENT
========================================= */
.muscle-customization-card-content {
flex: 1;
}
.muscle-customization-label {
display: block;
margin-bottom: 5px;
color: #ce3434;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.2px;
}
.muscle-customization-card h3 {
margin: 0 0 10px;
color: #1b1b1b;
font-size: 23px;
line-height: 1.3;
font-weight: 900;
}
.muscle-customization-card p {
margin: 0;
color: #626a75;
font-size: 16px;
line-height: 1.7;
}
/* =========================================
PATH
========================================= */
.muscle-customization-path {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
max-width: 980px;
margin: 55px auto 0;
padding: 24px 26px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#181818,
#101010
);
border:
1px solid rgba(215, 49, 49, 0.44);
border-radius: 18px;
box-shadow:
0 14px 35px rgba(0, 0, 0, 0.16);
}
.muscle-customization-path-item {
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-size: 15px;
font-weight: 800;
white-space: nowrap;
}
.muscle-customization-path-item strong {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
background:
linear-gradient(
135deg,
#e34444,
#aa1818
);
border-radius: 50%;
color: #ffffff;
font-size: 15px;
font-weight: 900;
}
.muscle-customization-arrow {
color: #8e8e8e;
font-size: 21px;
line-height: 1;
}
/* =========================================
SUMMARY
========================================= */
.muscle-customization-summary {
display: flex;
align-items: center;
gap: 21px;
max-width: 850px;
margin: 48px auto 0;
padding: 27px 31px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#fff3f3,
#ffffff
);
border:
1px solid #efcece;
border-right:
6px solid #d83b3b;
border-radius: 18px;
text-align: right;
}
.muscle-customization-summary-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
background:
linear-gradient(
135deg,
#e34444,
#a91919
);
border-radius: 50%;
color: #ffffff;
font-size: 26px;
font-weight: 900;
box-shadow:
0 8px 20px rgba(179, 25, 25, 0.27);
}
.muscle-customization-summary h3 {
margin: 0 0 8px;
color: #1a1a1a;
font-size: 23px;
line-height: 1.35;
font-weight: 900;
}
.muscle-customization-summary p {
margin: 0;
color: #5d6570;
font-size: 16px;
line-height: 1.72;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.muscle-customization {
padding: 75px 20px;
}
.muscle-customization-grid {
grid-template-columns: 1fr;
max-width: 680px;
margin: 0 auto;
}
.muscle-customization-card {
min-height: auto;
}
.muscle-customization-path {
flex-wrap: wrap;
max-width: 680px;
row-gap: 18px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.muscle-customization {
padding: 58px 16px;
}
.muscle-customization-header {
margin-bottom: 40px;
}
.muscle-customization-badge {
padding: 8px 14px;
font-size: 13px;
}
.muscle-customization h2 {
font-size: 35px;
line-height: 1.2;
}
.muscle-customization-header p {
font-size: 17px;
line-height: 1.72;
}
.muscle-customization-card {
gap: 15px;
padding: 24px 20px;
}
.muscle-customization-icon {
width: 55px;
height: 55px;
font-size: 27px;
}
.muscle-customization-card h3 {
font-size: 20px;
}
.muscle-customization-card p {
font-size: 15px;
}
.muscle-customization-path {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 22px 20px;
}
.muscle-customization-path-item {
justify-content: flex-start;
white-space: normal;
}
.muscle-customization-arrow {
display: none;
}
.muscle-customization-summary {
flex-direction: column;
margin-top: 40px;
padding: 24px 20px;
border-right: 1px solid #efcece;
border-top:
5px solid #d83b3b;
text-align: center;
}
.muscle-customization-summary h3 {
font-size: 21px;
}
.muscle-customization-summary p {
font-size: 15px;
}
}
/* =========================================
MUSCLE PROGRAM
PERSONAL TRANSFORMATION SECTION
========================================= */
.muscle-transformation {
direction: rtl;
position: relative;
width: 100%;
padding: 100px 22px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(
circle at 90% 12%,
rgba(215, 46, 46, 0.16),
transparent 34%
),
linear-gradient(
145deg,
#111111 0%,
#191919 55%,
#0d0d0d 100%
);
color: #ffffff;
}
.muscle-transformation::before {
content: "";
position: absolute;
width: 560px;
height: 2px;
top: 175px;
left: -145px;
background:
linear-gradient(
90deg,
transparent,
rgba(226, 54, 54, 0.68),
transparent
);
transform: rotate(-13deg);
box-shadow:
0 0 30px rgba(209, 38, 38, 0.36);
pointer-events: none;
}
.muscle-transformation::after {
content: "";
position: absolute;
width: 380px;
height: 380px;
bottom: -260px;
right: -180px;
border:
60px solid rgba(218, 48, 48, 0.05);
border-radius: 50%;
pointer-events: none;
}
.muscle-transformation-inner {
position: relative;
z-index: 1;
max-width: 1160px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.muscle-transformation-header {
max-width: 860px;
margin: 0 auto 60px;
text-align: center;
}
.muscle-transformation-badge {
display: inline-block;
margin-bottom: 20px;
padding: 9px 19px;
background:
rgba(222, 48, 48, 0.14);
border:
1px solid rgba(235, 72, 72, 0.4);
border-radius: 50px;
color: #ff7777;
font-size: 15px;
font-weight: 800;
}
.muscle-transformation h2 {
margin: 0 0 24px;
color: #ffffff;
font-size: clamp(39px, 4.8vw, 60px);
line-height: 1.15;
font-weight: 900;
letter-spacing: -1.2px;
}
.muscle-transformation h2 span {
display: block;
margin-top: 7px;
color: #e84444;
}
.muscle-transformation-header p {
max-width: 770px;
margin: 0 auto;
color: #bdbdbd;
font-size: 19px;
line-height: 1.8;
}
/* =========================================
COMPARISON LAYOUT
========================================= */
.muscle-transformation-comparison {
display: grid;
grid-template-columns:
minmax(0, 1fr)
150px
minmax(0, 1fr);
align-items: center;
gap: 24px;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================
IMAGE CARDS
========================================= */
.muscle-transformation-card {
overflow: hidden;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.035)
);
border:
1px solid rgba(255, 255, 255, 0.11);
border-radius: 22px;
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.34);
transition:
transform 0.28s ease,
border-color 0.28s ease,
box-shadow 0.28s ease;
}
.muscle-transformation-card:hover {
transform: translateY(-6px);
box-shadow:
0 25px 55px rgba(0, 0, 0, 0.46);
}
.muscle-before-card:hover {
border-color:
rgba(184, 184, 184, 0.36);
}
.muscle-after-card {
border-color:
rgba(226, 63, 63, 0.34);
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.34),
0 0 35px rgba(191, 26, 26, 0.1);
}
.muscle-after-card:hover {
border-color:
rgba(234, 73, 73, 0.6);
box-shadow:
0 25px 55px rgba(0, 0, 0, 0.46),
0 0 45px rgba(191, 26, 26, 0.17);
}
/* =========================================
IMAGES
========================================= */
.muscle-transformation-image-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
background: #1a1a1a;
}
.muscle-transformation-image-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition:
transform 0.4s ease,
filter 0.4s ease;
}
.muscle-before-card
.muscle-transformation-image-wrap img {
filter:
saturate(0.78)
contrast(0.96);
}
.muscle-transformation-card:hover
.muscle-transformation-image-wrap img {
transform: scale(1.025);
}
.muscle-transformation-image-wrap::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 58%,
rgba(0, 0, 0, 0.68) 100%
);
pointer-events: none;
}
.muscle-transformation-image-label {
position: absolute;
z-index: 2;
right: 18px;
bottom: 17px;
padding: 8px 17px;
background:
rgba(15, 15, 15, 0.88);
border:
1px solid rgba(255, 255, 255, 0.16);
border-radius: 50px;
color: #ffffff;
font-size: 15px;
font-weight: 900;
backdrop-filter:
blur(8px);
}
.muscle-after-card
.muscle-transformation-image-label {
background:
linear-gradient(
135deg,
#e14343,
#a71919
);
border-color:
rgba(255, 255, 255, 0.18);
}
/* =========================================
CARD CONTENT
========================================= */
.muscle-transformation-card-content {
padding: 27px 25px 29px;
}
.muscle-transformation-card-content h3 {
margin: 0 0 18px;
color: #ffffff;
font-size: 22px;
line-height: 1.35;
font-weight: 900;
}
/* =========================================
LISTS
========================================= */
.muscle-transformation-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.muscle-transformation-list li {
position: relative;
padding-right: 28px;
color: #c5c5c5;
font-size: 15px;
line-height: 1.6;
}
.muscle-transformation-list li::before {
position: absolute;
top: 0;
right: 0;
font-size: 16px;
font-weight: 900;
}
.muscle-before-list li::before {
content: "×";
color: #999999;
}
.muscle-after-list li::before {
content: "✓";
color: #ef4c4c;
}
/* =========================================
CENTER BRIDGE
========================================= */
.muscle-transformation-bridge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.muscle-transformation-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
margin-bottom: 16px;
background:
linear-gradient(
135deg,
#e74747,
#a61616
);
border:
1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
color: #ffffff;
font-size: 36px;
font-weight: 900;
box-shadow:
0 12px 30px rgba(180, 22, 22, 0.38);
}
.muscle-transformation-bridge strong {
display: block;
margin-bottom: 5px;
color: #ffffff;
font-size: 17px;
font-weight: 900;
}
.muscle-transformation-bridge span {
display: block;
color: #9f9f9f;
font-size: 13px;
line-height: 1.55;
}
/* =========================================
STORY BOX
========================================= */
.muscle-transformation-story {
max-width: 930px;
margin: 70px auto 0;
padding: 36px 38px;
box-sizing: border-box;
background: #ffffff;
border-right:
6px solid #dd3c3c;
border-radius: 22px;
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.3);
color: #222222;
}
.muscle-transformation-story-heading {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 24px;
}
.muscle-transformation-story-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 53px;
height: 53px;
background: #fff0f0;
border-radius: 15px;
font-size: 25px;
}
.muscle-transformation-story-heading h3 {
margin: 0;
color: #1b1b1b;
font-size: 26px;
line-height: 1.35;
font-weight: 900;
}
.muscle-transformation-story-text {
color: #555e68;
font-size: 17px;
line-height: 1.82;
}
.muscle-transformation-story-text p {
margin: 0 0 18px;
}
.muscle-transformation-story-text p:last-child {
margin-bottom: 0;
}
.muscle-transformation-story-text blockquote {
margin: 27px 0;
padding: 20px 24px;
background:
linear-gradient(
135deg,
#fff2f2,
#fafafa
);
border: 0;
border-right:
5px solid #da3c3c;
border-radius: 12px;
color: #292929;
font-size: 20px;
line-height: 1.65;
font-weight: 850;
}
/* =========================================
FINAL SUMMARY
========================================= */
.muscle-transformation-summary {
display: flex;
align-items: center;
gap: 22px;
max-width: 900px;
margin: 48px auto 0;
padding: 29px 33px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
rgba(225, 57, 57, 0.15),
rgba(255, 255, 255, 0.055)
);
border:
1px solid rgba(232, 70, 70, 0.37);
border-radius: 20px;
box-shadow:
0 14px 38px rgba(0, 0, 0, 0.22);
text-align: right;
}
.muscle-transformation-summary-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 59px;
height: 59px;
background:
linear-gradient(
135deg,
#e54646,
#a81717
);
border-radius: 17px;
font-size: 28px;
box-shadow:
0 9px 22px rgba(177, 25, 25, 0.31);
}
.muscle-transformation-summary h3 {
margin: 0 0 8px;
color: #ffffff;
font-size: 23px;
line-height: 1.35;
font-weight: 900;
}
.muscle-transformation-summary p {
margin: 0;
color: #bfbfbf;
font-size: 16px;
line-height: 1.75;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 920px) {
.muscle-transformation {
padding: 78px 20px;
}
.muscle-transformation-comparison {
grid-template-columns:
minmax(0, 1fr)
100px
minmax(0, 1fr);
gap: 16px;
}
.muscle-transformation-arrow {
width: 62px;
height: 62px;
font-size: 30px;
}
.muscle-transformation-bridge span {
font-size: 12px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 700px) {
.muscle-transformation {
padding: 60px 16px;
}
.muscle-transformation-header {
margin-bottom: 42px;
}
.muscle-transformation-badge {
padding: 8px 14px;
font-size: 13px;
}
.muscle-transformation h2 {
font-size: 35px;
line-height: 1.2;
}
.muscle-transformation-header p {
font-size: 17px;
line-height: 1.72;
}
.muscle-transformation-comparison {
grid-template-columns: 1fr;
gap: 23px;
max-width: 480px;
}
.muscle-transformation-bridge {
padding: 4px 0;
}
.muscle-transformation-arrow {
width: 62px;
height: 62px;
margin-bottom: 10px;
transform: rotate(-90deg);
font-size: 29px;
}
.muscle-transformation-image-wrap {
aspect-ratio: 4 / 5;
}
.muscle-transformation-card-content {
padding: 24px 21px 26px;
}
.muscle-transformation-card-content h3 {
font-size: 20px;
}
.muscle-transformation-list li {
font-size: 14px;
}
.muscle-transformation-story {
margin-top: 48px;
padding: 27px 22px;
border-right: 0;
border-top:
5px solid #dd3c3c;
}
.muscle-transformation-story-heading {
flex-direction: column;
text-align: center;
}
.muscle-transformation-story-heading h3 {
font-size: 23px;
}
.muscle-transformation-story-text {
font-size: 16px;
line-height: 1.75;
}
.muscle-transformation-story-text blockquote {
padding: 18px 19px;
font-size: 18px;
}
.muscle-transformation-summary {
flex-direction: column;
margin-top: 38px;
padding: 25px 20px;
text-align: center;
}
.muscle-transformation-summary h3 {
font-size: 21px;
}
.muscle-transformation-summary p {
font-size: 15px;
}
}
/* =========================================
MUSCLE PROGRAM
SHORT SUITABILITY SECTION
========================================= */
.muscle-fit-short {
direction: rtl;
width: 100%;
padding: 70px 22px;
box-sizing: border-box;
background:
linear-gradient(
180deg,
#f8f9fa 0%,
#ffffff 100%
);
}
.muscle-fit-short-inner {
max-width: 1050px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.muscle-fit-short-header {
margin-bottom: 38px;
text-align: center;
}
.muscle-fit-short-badge {
display: inline-block;
margin-bottom: 14px;
padding: 8px 17px;
background: #fff0f0;
border: 1px solid #efcccc;
border-radius: 50px;
color: #bd2929;
font-size: 14px;
font-weight: 800;
}
.muscle-fit-short h2 {
margin: 0;
color: #181818;
font-size: clamp(31px, 4vw, 45px);
line-height: 1.25;
font-weight: 900;
}
/* =========================================
GRID
========================================= */
.muscle-fit-short-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
}
/* =========================================
ITEM
========================================= */
.muscle-fit-short-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 22px 21px;
background: #ffffff;
border: 1px solid #e5e6e8;
border-radius: 16px;
box-shadow:
0 8px 24px rgba(20, 25, 32, 0.05);
box-sizing: border-box;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.muscle-fit-short-item:hover {
transform: translateY(-3px);
border-color: #efc8c8;
box-shadow:
0 13px 30px rgba(20, 25, 32, 0.085);
}
.muscle-fit-short-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background:
linear-gradient(
145deg,
#fff1f1,
#ffe6e6
);
border-radius: 14px;
font-size: 24px;
}
.muscle-fit-short-item strong {
display: block;
margin-bottom: 4px;
color: #1b1b1b;
font-size: 17px;
line-height: 1.4;
font-weight: 900;
}
.muscle-fit-short-item span {
display: block;
color: #656d77;
font-size: 14px;
line-height: 1.65;
}
/* =========================================
FOOTER
========================================= */
.muscle-fit-short-footer {
max-width: 780px;
margin: 32px auto 0;
padding: 19px 24px;
background:
linear-gradient(
135deg,
#181818,
#101010
);
border: 1px solid rgba(215, 49, 49, 0.4);
border-radius: 15px;
color: #c9c9c9;
text-align: center;
line-height: 1.65;
}
.muscle-fit-short-footer strong {
color: #ffffff;
font-size: 16px;
}
.muscle-fit-short-footer span {
font-size: 15px;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 700px) {
.muscle-fit-short {
padding: 52px 16px;
}
.muscle-fit-short-header {
margin-bottom: 30px;
}
.muscle-fit-short h2 {
font-size: 32px;
}
.muscle-fit-short-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.muscle-fit-short-item {
padding: 19px 17px;
}
.muscle-fit-short-icon {
width: 46px;
height: 46px;
font-size: 22px;
}
.muscle-fit-short-item strong {
font-size: 16px;
}
.muscle-fit-short-item span {
font-size: 14px;
}
.muscle-fit-short-footer {
margin-top: 26px;
padding: 18px;
}
}
/* =========================================
MUSCLE PROGRAM
PURCHASE SECTION
========================================= */
.muscle-purchase {
direction: rtl;
position: relative;
width: 100%;
padding: 100px 22px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(
circle at 85% 18%,
rgba(218, 47, 47, 0.2),
transparent 34%
),
linear-gradient(
145deg,
#101010 0%,
#191919 55%,
#0c0c0c 100%
);
color: #ffffff;
}
.muscle-purchase::before {
content: "";
position: absolute;
width: 570px;
height: 2px;
top: 155px;
left: -150px;
background:
linear-gradient(
90deg,
transparent,
rgba(228, 62, 62, 0.68),
transparent
);
transform: rotate(-13deg);
box-shadow:
0 0 30px rgba(203, 35, 35, 0.36);
pointer-events: none;
}
.muscle-purchase::after {
content: "";
position: absolute;
width: 400px;
height: 400px;
right: -210px;
bottom: -280px;
border:
65px solid rgba(220, 47, 47, 0.05);
border-radius: 50%;
pointer-events: none;
}
.muscle-purchase-inner {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
/* =========================================
HEADER
========================================= */
.muscle-purchase-header {
max-width: 790px;
margin: 0 auto 48px;
}
.muscle-purchase-badge {
display: inline-block;
margin-bottom: 20px;
padding: 9px 19px;
background:
rgba(224, 52, 52, 0.14);
border:
1px solid rgba(237, 76, 76, 0.4);
border-radius: 50px;
color: #ff7b7b;
font-size: 15px;
font-weight: 900;
}
.muscle-purchase h2 {
margin: 0 0 23px;
color: #ffffff;
font-size: clamp(39px, 4.8vw, 60px);
line-height: 1.16;
font-weight: 900;
letter-spacing: -1.1px;
}
.muscle-purchase h2 span {
display: block;
margin-top: 7px;
color: #e74747;
}
.muscle-purchase-header p {
max-width: 680px;
margin: 0 auto;
color: #bdbdbd;
font-size: 19px;
line-height: 1.8;
}
/* =========================================
PURCHASE CARD
========================================= */
.muscle-purchase-card {
position: relative;
max-width: 590px;
margin: 0 auto;
padding: 48px 42px 38px;
box-sizing: border-box;
background: #ffffff;
border:
2px solid rgba(230, 66, 66, 0.56);
border-radius: 26px;
box-shadow:
0 25px 65px rgba(0, 0, 0, 0.46),
0 0 45px rgba(187, 26, 26, 0.13);
color: #202020;
}
/* =========================================
RIBBON
========================================= */
.muscle-purchase-ribbon {
position: absolute;
top: -18px;
right: 50%;
transform: translateX(50%);
min-width: 145px;
padding: 9px 21px;
background:
linear-gradient(
135deg,
#e84848,
#a91616
);
border:
1px solid rgba(255, 255, 255, 0.18);
border-radius: 50px;
color: #ffffff;
font-size: 14px;
font-weight: 900;
box-shadow:
0 9px 24px rgba(176, 24, 24, 0.34);
}
/* =========================================
COURSE NAME
========================================= */
.muscle-purchase-course-name {
margin-bottom: 26px;
color: #202020;
font-size: 21px;
line-height: 1.4;
font-weight: 900;
}
/* =========================================
PRICING
========================================= */
.muscle-purchase-pricing {
padding-bottom: 29px;
border-bottom:
1px solid #e8e8e8;
}
.muscle-purchase-old-price {
color: #898f96;
font-size: 17px;
}
.muscle-purchase-old-price span {
margin-right: 4px;
text-decoration: line-through;
text-decoration-thickness: 2px;
font-size: 23px;
font-weight: 700;
}
.muscle-purchase-current-price {
margin-top: 4px;
color: #cc2e2e;
font-size: 68px;
line-height: 1.08;
font-weight: 950;
letter-spacing: -2px;
}
.muscle-purchase-payment-type {
margin-top: 8px;
color: #7b838c;
font-size: 14px;
}
/* =========================================
BENEFITS
========================================= */
.muscle-purchase-benefits {
display: flex;
flex-direction: column;
gap: 13px;
margin: 29px 0 31px;
text-align: right;
}
.muscle-purchase-benefit {
display: flex;
align-items: flex-start;
gap: 11px;
color: #424a53;
font-size: 16px;
line-height: 1.65;
}
.muscle-purchase-benefit > span {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
margin-top: 1px;
background: #fff0f0;
border-radius: 50%;
color: #d53636;
font-size: 15px;
line-height: 1;
font-weight: 900;
}
/* =========================================
PURCHASE BUTTON
========================================= */
.muscle-purchase-button {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
min-height: 65px;
padding: 16px 24px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#e74949,
#a91818
);
border:
1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
color: #ffffff !important;
font-size: 19px;
line-height: 1.35;
font-weight: 900;
text-decoration: none !important;
box-shadow:
0 13px 30px rgba(181, 25, 25, 0.35);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
.muscle-purchase-button:hover {
transform: translateY(-3px);
background:
linear-gradient(
135deg,
#f05252,
#ba2020
);
box-shadow:
0 18px 39px rgba(181, 25, 25, 0.44);
}
.muscle-purchase-button b {
font-size: 25px;
line-height: 1;
transition:
transform 0.25s ease;
}
.muscle-purchase-button:hover b {
transform: translateX(-6px);
}
/* =========================================
SECURITY NOTE
========================================= */
.muscle-purchase-secure {
margin-top: 17px;
color: #8a929a;
font-size: 12px;
line-height: 1.6;
}
/* =========================================
BOTTOM MESSAGE
========================================= */
.muscle-purchase-bottom {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 700px;
margin: 42px auto 0;
color: #b3b3b3;
font-size: 17px;
line-height: 1.65;
}
.muscle-purchase-bottom strong {
color: #ffffff;
font-size: 20px;
font-weight: 900;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 650px) {
.muscle-purchase {
padding: 68px 16px;
}
.muscle-purchase-header {
margin-bottom: 39px;
}
.muscle-purchase-badge {
padding: 8px 14px;
font-size: 13px;
}
.muscle-purchase h2 {
font-size: 36px;
line-height: 1.2;
}
.muscle-purchase-header p {
font-size: 17px;
line-height: 1.72;
}
.muscle-purchase-card {
padding: 42px 22px 30px;
border-radius: 21px;
}
.muscle-purchase-course-name {
font-size: 19px;
}
.muscle-purchase-current-price {
font-size: 58px;
}
.muscle-purchase-benefit {
font-size: 15px;
}
.muscle-purchase-button {
min-height: 61px;
padding: 15px 17px;
font-size: 17px;
}
.muscle-purchase-bottom {
margin-top: 35px;
font-size: 16px;
}
.muscle-purchase-bottom strong {
font-size: 18px;
}
}
/* =========================================
MUSCLE PROGRAM
ALTERNATIVE PAYMENT OPTIONS
========================================= */
.muscle-payment-options {
direction: rtl;
width: 100%;
padding: 72px 22px 82px;
box-sizing: border-box;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f8f9fa 100%
);
}
.muscle-payment-options-inner {
max-width: 1050px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.muscle-payment-options-header {
max-width: 720px;
margin: 0 auto 42px;
text-align: center;
}
.muscle-payment-options-badge {
display: inline-block;
margin-bottom: 16px;
padding: 8px 17px;
background: #fff0f0;
border: 1px solid #efcccc;
border-radius: 50px;
color: #bd2929;
font-size: 14px;
font-weight: 800;
}
.muscle-payment-options h2 {
margin: 0 0 15px;
color: #181818;
font-size: clamp(31px, 4vw, 45px);
line-height: 1.25;
font-weight: 900;
}
.muscle-payment-options h2 span {
color: #cf3030;
}
.muscle-payment-options-header p {
max-width: 650px;
margin: 0 auto;
color: #68717b;
font-size: 17px;
line-height: 1.7;
}
/* =========================================
PAYMENT GRID
========================================= */
.muscle-payment-options-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
/* =========================================
PAYMENT CARD
========================================= */
.muscle-payment-option-card {
padding: 29px 23px;
background: #ffffff;
border: 1px solid #e4e6e8;
border-top: 4px solid #d73b3b;
border-radius: 17px;
box-sizing: border-box;
box-shadow:
0 9px 27px rgba(20, 25, 32, 0.055);
text-align: center;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.muscle-payment-option-card:hover {
transform: translateY(-4px);
border-color: #efc5c5;
box-shadow:
0 15px 34px rgba(20, 25, 32, 0.095);
}
/* =========================================
ICON
========================================= */
.muscle-payment-option-icon {
display: flex;
align-items: center;
justify-content: center;
width: 57px;
height: 57px;
margin: 0 auto 16px;
background:
linear-gradient(
145deg,
#fff1f1,
#ffe5e5
);
border-radius: 15px;
font-size: 28px;
}
/* =========================================
CARD CONTENT
========================================= */
.muscle-payment-option-card h3 {
margin: 0 0 10px;
color: #1b1b1b;
font-size: 21px;
line-height: 1.35;
font-weight: 900;
}
.muscle-payment-option-card > p {
margin: 0 0 8px;
color: #737b84;
font-size: 14px;
line-height: 1.6;
}
.muscle-payment-option-detail {
display: block;
color: #ca3030 !important;
font-size: 19px;
line-height: 1.5;
font-weight: 900;
text-decoration: none !important;
word-break: break-word;
}
.muscle-payment-option-detail:hover {
color: #a91d1d !important;
text-decoration: underline !important;
}
.muscle-payment-option-email {
font-size: 17px;
}
/* =========================================
BANK DETAILS
========================================= */
.muscle-payment-bank-details {
margin-top: 14px;
color: #59626c;
font-size: 14px;
line-height: 1.85;
text-align: right;
}
.muscle-payment-bank-details strong {
color: #252525;
font-weight: 800;
}
/* =========================================
AFTER PAYMENT BOX
========================================= */
.muscle-payment-after {
display: flex;
align-items: flex-start;
gap: 19px;
max-width: 790px;
margin: 38px auto 0;
padding: 25px 29px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#fff2f2,
#ffffff
);
border: 1px solid #efcece;
border-right: 5px solid #d83b3b;
border-radius: 17px;
box-shadow:
0 9px 27px rgba(20, 25, 32, 0.045);
text-align: right;
}
.muscle-payment-after-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: #ffffff;
border-radius: 14px;
font-size: 24px;
}
.muscle-payment-after-content {
flex: 1;
}
.muscle-payment-after h3 {
margin: 0 0 7px;
color: #1b1b1b;
font-size: 20px;
line-height: 1.35;
font-weight: 900;
}
.muscle-payment-after p {
margin: 0;
color: #616a74;
font-size: 15px;
line-height: 1.7;
}
/* =========================================
CONTACT BUTTONS
========================================= */
.muscle-payment-contact-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 17px;
}
.muscle-payment-contact-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 43px;
padding: 10px 17px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#df4141,
#ad1919
);
border-radius: 10px;
color: #ffffff !important;
font-size: 14px;
line-height: 1.4;
font-weight: 850;
text-decoration: none !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease;
}
.muscle-payment-contact-button:hover {
transform: translateY(-2px);
box-shadow:
0 8px 19px rgba(178, 24, 24, 0.27);
}
.muscle-payment-contact-button-secondary {
background: #ffffff;
border: 1px solid #e4bcbc;
color: #b52424 !important;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 850px) {
.muscle-payment-options-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
max-width: 700px;
margin: 0 auto;
}
.muscle-payment-bank-card {
grid-column: 1 / -1;
max-width: 450px;
width: 100%;
justify-self: center;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.muscle-payment-options {
padding: 55px 16px 64px;
}
.muscle-payment-options-header {
margin-bottom: 32px;
}
.muscle-payment-options h2 {
font-size: 32px;
}
.muscle-payment-options-header p {
font-size: 16px;
}
.muscle-payment-options-grid {
grid-template-columns: 1fr;
gap: 13px;
}
.muscle-payment-bank-card {
grid-column: auto;
max-width: none;
}
.muscle-payment-option-card {
padding: 25px 20px;
}
.muscle-payment-after {
flex-direction: column;
align-items: center;
padding: 22px 19px;
border-right: 1px solid #efcece;
border-top: 5px solid #d83b3b;
text-align: center;
}
.muscle-payment-contact-buttons {
flex-direction: column;
}
.muscle-payment-contact-button {
width: 100%;
}
}
/* =========================================
MUSCLE PROGRAM
FAQ SECTION
========================================= */
.muscle-faq {
direction: rtl;
position: relative;
width: 100%;
padding: 82px 22px 90px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(
circle at 90% 5%,
rgba(210, 43, 43, 0.065),
transparent 30%
),
#f7f8f9;
}
.muscle-faq-inner {
position: relative;
z-index: 1;
max-width: 860px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.muscle-faq-header {
max-width: 700px;
margin: 0 auto 42px;
text-align: center;
}
.muscle-faq-badge {
display: inline-block;
margin-bottom: 16px;
padding: 8px 17px;
background: #fff0f0;
border: 1px solid #efcccc;
border-radius: 50px;
color: #bd2929;
font-size: 14px;
font-weight: 800;
}
.muscle-faq h2 {
margin: 0 0 15px;
color: #181818;
font-size: clamp(34px, 4.4vw, 50px);
line-height: 1.2;
font-weight: 900;
}
.muscle-faq h2 span {
color: #cf3030;
}
.muscle-faq-header p {
margin: 0;
color: #68717b;
font-size: 17px;
line-height: 1.7;
}
/* =========================================
FAQ LIST
========================================= */
.muscle-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* =========================================
FAQ ITEM
========================================= */
.muscle-faq-item {
overflow: hidden;
background: #ffffff;
border: 1px solid #e2e5e7;
border-radius: 15px;
box-shadow:
0 7px 22px rgba(20, 25, 32, 0.045);
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.muscle-faq-item:hover,
.muscle-faq-item-open {
border-color: #edc5c5;
}
.muscle-faq-item-open {
box-shadow:
0 12px 30px rgba(20, 25, 32, 0.075);
}
/* =========================================
QUESTION BUTTON
========================================= */
.muscle-faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
margin: 0;
padding: 21px 23px;
box-sizing: border-box;
background: transparent;
border: 0;
color: #1c1c1c;
font-family: inherit;
font-size: 17px;
line-height: 1.5;
font-weight: 850;
text-align: right;
cursor: pointer;
}
.muscle-faq-question:hover,
.muscle-faq-question:focus {
background: #fffafa;
color: #1c1c1c;
outline: none;
}
.muscle-faq-question:focus-visible {
outline: 3px solid rgba(207, 48, 48, 0.22);
outline-offset: -3px;
}
/* =========================================
PLUS ICON
========================================= */
.muscle-faq-plus {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 31px;
height: 31px;
background: #fff0f0;
border-radius: 50%;
color: #c72e2e;
font-size: 22px;
line-height: 1;
font-weight: 500;
transition:
transform 0.28s ease,
background 0.28s ease,
color 0.28s ease;
}
.muscle-faq-item-open
.muscle-faq-plus {
transform: rotate(45deg);
background:
linear-gradient(
135deg,
#e34545,
#a81717
);
color: #ffffff;
}
/* =========================================
ANSWER
========================================= */
.muscle-faq-answer {
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height 0.4s ease,
opacity 0.25s ease;
}
.muscle-faq-item-open
.muscle-faq-answer {
max-height: 430px;
opacity: 1;
}
.muscle-faq-answer-inner {
padding: 0 23px 22px;
color: #606974;
font-size: 15px;
line-height: 1.75;
}
.muscle-faq-answer-inner p {
margin: 0 0 11px;
}
.muscle-faq-answer-inner p:last-child {
margin-bottom: 0;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.muscle-faq {
padding: 58px 16px 65px;
}
.muscle-faq-header {
margin-bottom: 32px;
}
.muscle-faq h2 {
font-size: 34px;
}
.muscle-faq-header p {
font-size: 16px;
}
.muscle-faq-question {
gap: 14px;
padding: 18px 17px;
font-size: 15px;
}
.muscle-faq-plus {
width: 28px;
height: 28px;
font-size: 20px;
}
.muscle-faq-answer-inner {
padding: 0 17px 19px;
font-size: 14px;
line-height: 1.72;
}
}
/* =========================================
MUSCLE PROGRAM
FINAL CTA
========================================= */
.muscle-final-cta {
direction: rtl;
position: relative;
width: 100%;
padding: 95px 22px 105px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(
circle at 80% 20%,
rgba(236, 57, 57, 0.25),
transparent 33%
),
linear-gradient(
145deg,
#6f0f0f 0%,
#b51f1f 48%,
#6c0c0c 100%
);
color: #ffffff;
text-align: center;
}
.muscle-final-cta::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);
background-size: 44px 44px;
pointer-events: none;
}
.muscle-final-cta::after {
content: "";
position: absolute;
width: 560px;
height: 2px;
bottom: 115px;
left: -145px;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.55),
transparent
);
transform: rotate(-13deg);
box-shadow:
0 0 28px rgba(255, 255, 255, 0.2);
pointer-events: none;
}
.muscle-final-cta-inner {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto;
}
/* =========================================
ICON
========================================= */
.muscle-final-cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin: 0 auto 22px;
background:
rgba(255, 255, 255, 0.13);
border:
1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
font-size: 31px;
box-shadow:
0 12px 30px rgba(72, 0, 0, 0.22);
}
/* =========================================
TITLE
========================================= */
.muscle-final-cta h2 {
margin: 0 0 20px;
color: #ffffff;
font-size: clamp(41px, 5.4vw, 64px);
line-height: 1.14;
font-weight: 950;
letter-spacing: -1.2px;
}
.muscle-final-cta h2 span {
display: block;
margin-top: 6px;
color: #ffd1d1;
}
/* =========================================
TEXT
========================================= */
.muscle-final-cta-text {
max-width: 660px;
margin: 0 auto 36px;
color:
rgba(255, 255, 255, 0.88);
font-size: 19px;
line-height: 1.78;
}
/* =========================================
PRICE
========================================= */
.muscle-final-cta-price {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin-bottom: 29px;
}
.muscle-final-cta-old-price {
color:
rgba(255, 255, 255, 0.72);
font-size: 17px;
}
.muscle-final-cta-old-price span {
margin-right: 4px;
text-decoration: line-through;
text-decoration-thickness: 2px;
font-size: 22px;
font-weight: 700;
}
.muscle-final-cta-price strong {
color: #ffffff;
font-size: 64px;
line-height: 1;
font-weight: 950;
letter-spacing: -2px;
text-shadow:
0 8px 24px rgba(84, 0, 0, 0.28);
}
.muscle-final-cta-price-note {
color:
rgba(255, 255, 255, 0.78);
font-size: 14px;
}
/* =========================================
BUTTON
========================================= */
.muscle-final-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
max-width: 500px;
min-height: 66px;
padding: 16px 28px;
box-sizing: border-box;
background: #ffffff;
border:
1px solid rgba(255, 255, 255, 0.28);
border-radius: 15px;
color: #a91919 !important;
font-size: 20px;
line-height: 1.35;
font-weight: 950;
text-decoration: none !important;
box-shadow:
0 15px 36px rgba(72, 0, 0, 0.32);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
.muscle-final-cta-button:hover {
transform: translateY(-4px);
background: #fff7f7;
box-shadow:
0 21px 44px rgba(72, 0, 0, 0.4);
}
.muscle-final-cta-button b {
font-size: 26px;
line-height: 1;
transition:
transform 0.25s ease;
}
.muscle-final-cta-button:hover b {
transform: translateX(-6px);
}
/* =========================================
SECURITY NOTE
========================================= */
.muscle-final-cta-secure {
margin-top: 17px;
color:
rgba(255, 255, 255, 0.72);
font-size: 13px;
line-height: 1.6;
}
/* =========================================
CLOSING
========================================= */
.muscle-final-cta-closing {
margin-top: 38px;
color: #ffffff;
font-size: 18px;
font-weight: 850;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.muscle-final-cta {
padding: 68px 16px 76px;
}
.muscle-final-cta-icon {
width: 64px;
height: 64px;
font-size: 28px;
}
.muscle-final-cta h2 {
font-size: 37px;
line-height: 1.2;
}
.muscle-final-cta-text {
font-size: 17px;
line-height: 1.72;
}
.muscle-final-cta-price strong {
font-size: 56px;
}
.muscle-final-cta-button {
min-height: 61px;
padding: 15px 19px;
font-size: 18px;
}
.muscle-final-cta-closing {
margin-top: 31px;
font-size: 17px;
}
}