.pricing-section {
margin-bottom: var(--section-gap, 50px) !important;
background: rgba(224,229,237,1);
}
.pricing-section__title {
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 42px;
line-height: 53px;
color: rgba(31,79,206,1);
margin: 0 0 12px;
}
.pricing-section__description {
font-family: 'Mulish', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: rgba(27,27,27,1);
margin: 0 0 48px;
max-width: 560px;
}
.pricing-section__plans {
display: flex;
gap: 24px;
}
.pricing-section__plan {
width: 373px;
border-radius: 15px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.pricing-section__plan-top {
height: 170px;
background: rgba(249,251,255,1);
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.pricing-section__plan-title {
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 25px;
color: rgba(31,79,206,1);
margin: 0;
}
.pricing-section__plan-desc {
font-family: 'Mulish', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: rgba(27,27,27,1);
margin: 0;
}
.pricing-section__plan-bottom {
height: 116px;
background: rgba(31,79,206,1);
border: 2px solid rgba(31,79,206,1);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pricing-section__plan-term {
color: rgba(255,240,240,1);
font-family: 'Mulish', sans-serif;
font-size: 16px;
line-height: 20px;
}
.pricing-section__plan-term-label {
font-weight: 700;
}
.pricing-section__plan-term-value {
font-weight: 400;
margin-left: 4px;
}
.pricing-section__plan-btn {
width: 333px;
height: 41px;
border-radius: 40px;
background: rgba(249,251,255,1);
color: rgba(31,79,206,1);
font-family: 'Mulish', sans-serif;
font-weight: 600;
font-size: 16px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.2s ease;
border: none;
cursor: pointer;
outline: none;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.pricing-section__plan-btn:hover {
transform: translateY(-2px);
opacity: 0.95;
} @media (max-width: 1024px) {
.pricing-section__title {
font-size: 28px;
line-height: 35px;
margin-bottom: 10px;
}
.pricing-section__description {
font-size: 12px;
line-height: 19px;
margin-bottom: 32px;
}
.pricing-section__plans {
flex-wrap: wrap;
gap: 20px;
}
.pricing-section__plan {
width: 295px;
flex-shrink: 0;
}
.pricing-section__plan-top {
height: auto;
padding: 18px;
gap: 8px;
}
.pricing-section__plan-title {
font-size: 16px;
line-height: 20px;
}
.pricing-section__plan-desc {
font-size: 12px;
line-height: 18px;
}
.pricing-section__plan-bottom {
height: auto;
padding: 16px 18px;
gap: 12px;
}
.pricing-section__plan-term {
font-size: 12px;
line-height: 18px;
}
.pricing-section__plan-term-label {
font-size: 12px;
line-height: 18px;
}
.pricing-section__plan-term-value {
font-size: 12px;
line-height: 18px;
}
.pricing-section__plan-btn {
width: 100%;
font-size: 12px;
line-height: 1.5;
}
} @media (max-width: 640px) {
.pricing-section {
margin-bottom: var(--section-gap, 20px) !important;
}
.pricing-section,
.pricing-section * {
text-align: left !important;
}
.pricing-section__title {
font-size: 22px;
line-height: 29px;
margin-bottom: 10px;
}
.pricing-section__description {
font-size: 12px;
line-height: 19px;
margin-bottom: 24px;
max-width: 100%;
}
.pricing-section__plans {
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
gap: 16px;
}
.pricing-section__plan {
width: 100%;
}
.pricing-section__plan-top {
height: auto;
padding: 18px;
gap: 8px;
}
.pricing-section__plan-title {
font-size: 16px;
line-height: 20px;
}
.pricing-section__plan-desc {
font-size: 12px;
line-height: 18px;
}
.pricing-section__plan-bottom {
height: auto;
padding: 16px 18px;
gap: 12px;
}
.pricing-section__plan-term {
font-size: 12px;
line-height: 18px;
}
.pricing-section__plan-term-label {
font-size: 12px;
line-height: 18px;
}
.pricing-section__plan-term-value {
font-size: 12px;
line-height: 18px;
}
.pricing-section__plan-btn {
width: 100%;
font-size: 12px;
line-height: 1.5;
text-align: center !important;
}
}