:root {
--color-main-text: #222222;
--color-main: #1d4576;
--color-main-2: #d4deea;
--color-main-3: #f3f1e7;
--color-hover-1: #bbc6d4;
--color-hover-2: #2f3d56;
--color-additional-1: #727272;
--color-additional-2: #607897;
--color-additional-3: #ffffff;
--color-additional-4: #efefef;
--color-danger: #d4183d;
--color-success: #004f3b;
--color-success-bg: #d0fae5;
--font-family: 'Roboto', system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
scroll-behavior: smooth;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: var(--font-family);
color: var(--color-main-text);
}
.container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
}
.btn {
text-decoration: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border-radius: 500px;
font-size: 16px;
font-family: inherit;
transition: 0.5s;
}
@media (max-width: 576px) {
.btn {
font-size: 14px;
}
}
.btn-main {
color: var(--color-additional-3);
background-color: var(--color-main);
}
.btn-main:hover {
background-color: var(--color-hover-2);
}
.btn-secondary {
background-color: var(--color-additional-3);
color: var(--color-main);
}
.btn-secondary:hover {
background-color: var(--color-hover-1);
}
.section-title {
font-size: 48px;
line-height: 1em;
color: var(--color-main);
text-align: center;
}
@media (max-width: 768px) {
.section-title {
font-size: 32px;
}
}
@media (max-width: 576px) {
.section-title {
font-size: 24px;
}
}
.header {
position: fixed;
inset: 0 0 auto;
padding: 30px 0;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
z-index: 100;
}
.header-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.header .logo {
width: 161px;
height: auto;
display: block;
flex-shrink: 0;
}
@media (max-width: 768px) {
.header .logo {
width: 120px;
}
}
.header .menu {
font-size: 18px;
}
@media (max-width: 768px) {
.header .menu {
display: none;
}
}
.header .menu-list {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
}
.header .menu-link {
color: inherit;
text-decoration: none;
transition: color 0.3s;
}
.header .menu-link:hover {
color: var(--color-hover-2);
}
.main-container {
display: flex;
flex-direction: column;
gap: 150px;
margin: 150px auto;
}
@media (max-width: 1024px) {
.main-container {
gap: 70px;
margin-bottom: 70px;
}
}
@media (max-width: 768px) {
.main-container {
gap: 60px;
margin: 100px auto 60px;
}
}
.hero {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
align-items: center;
}
@media (max-width: 1024px) {
.hero {
grid-template-columns: 1fr;
}
}
.hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
@media (max-width: 1024px) {
.hero-content {
align-items: center;
}
}
.hero-content h1 {
font-size: 48px;
line-height: 121%;
font-weight: 800;
letter-spacing: 2px;
color: var(--color-main);
}
@media (max-width: 1024px) {
.hero-content h1 {
text-align: center;
}
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 32px;
}
}
@media (max-width: 576px) {
.hero-content h1 {
font-size: 24px;
letter-spacing: 0;
}
}
.hero-content .subtitle {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 16px;
border-radius: 100px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: var(--color-main);
background-color: var(--color-main-2);
}
.hero-content .text {
font-size: 18px;
line-height: 32px;
color: var(--color-additional-1);
}
@media (max-width: 1024px) {
.hero-content .text {
text-align: center;
}
}
@media (max-width: 768px) {
.hero-content .text {
font-size: 14px;
line-height: 26px;
}
}
@media (max-width: 576px) {
.hero-content .text {
line-height: normal;
}
}
.hero-content .format {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 32px;
}
@media (max-width: 768px) {
.hero-content .format {
grid-template-columns: repeat(1, 1fr);
justify-items: center;
}
}
.hero-content .format li {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 0;
font-size: 15px;
line-height: 24px;
color: var(--color-main);
}
@media (max-width: 576px) {
.hero-content .format li {
padding: 6px;
}
}
.hero-content .button-wrap {
display: flex;
align-items: center;
gap: 24px;
}
@media (max-width: 768px) {
.hero-content .button-wrap {
flex-direction: column;
}
}
.hero-content .button-wrap .btn {
padding: 16px 40px;
}
.hero-content .button-wrap .price del {
font-size: 17px;
line-height: 28px;
color: var(--color-additional-1);
}
.hero-content .button-wrap .price strong {
display: block;
font-size: 26px;
line-height: 36px;
font-weight: 800;
color: var(--color-danger);
}
@media (max-width: 768px) {
.hero-content .button-wrap .price strong {
display: inline;
}
}
.hero-image {
border-radius: 40px;
overflow: hidden;
aspect-ratio: 635/714;
}
@media (max-width: 576px) {
.hero-image {
border-radius: 24px;
}
}
.hero-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.users {
display: flex;
flex-direction: column;
align-items: center;
gap: 70px;
}
@media (max-width: 768px) {
.users {
gap: 32px;
}
}
.users-list {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px;
width: 100%;
}
@media (max-width: 768px) {
.users-list {
grid-template-columns: 1fr;
gap: 24px;
}
}
.users .user {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 30px;
border-radius: 32px;
border: 1px solid var(--color-hover-1);
text-align: center;
}
@media (max-width: 576px) {
.users .user {
padding: 24px;
border-radius: 24px;
}
}
.users .user h3 {
margin-top: 14px;
font-size: 20px;
line-height: 28px;
}
.users .user p {
font-size: 14px;
line-height: 1.2em;
max-width: 320px;
}
.telegram {
display: grid;
grid-template-columns: repeat(2, 1fr);
min-height: 568px;
padding: 48px;
border-radius: 40px;
background: var(--color-additional-2);
}
@media (max-width: 1024px) {
.telegram {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.telegram {
padding: 24px;
border-radius: 24px;
}
}
.telegram-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
color: var(--color-additional-3);
}
.telegram-content .subtitle {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
border-radius: 100px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
background-color: rgba(255, 255, 255, 0.1);
}
@media (max-width: 576px) {
.telegram-content .subtitle {
font-size: 12px;
line-height: normal;
}
}
.telegram-content .title {
font-size: 40px;
line-height: 46px;
font-weight: 700;
}
@media (max-width: 576px) {
.telegram-content .title {
font-size: 24px;
line-height: 1.2em;
}
}
.telegram-content .text {
max-width: 470px;
font-size: 17px;
line-height: 30px;
padding: 8px 0 16px;
}
@media (max-width: 1024px) {
.telegram-content .text {
max-width: 100%;
}
}
@media (max-width: 576px) {
.telegram-content .text {
font-size: 14px;
line-height: 1.2em;
}
}
.telegram-content .timer {
width: 100%;
max-width: 470px;
margin-top: auto;
border-radius: 16px;
padding: 24px;
background-color: var(--color-additional-3);
}
@media (max-width: 1024px) {
.telegram-content .timer {
max-width: 100%;
}
}
@media (max-width: 576px) {
.telegram-content .timer {
padding: 16px;
}
}
.telegram-content .timer-text {
margin-bottom: 10px;
font-size: 13px;
line-height: 20px;
color: var(--color-additional-1);
}
@media (max-width: 576px) {
.telegram-content .timer-text {
line-height: normal;
}
}
.telegram-content .timer-time {
font-size: 48px;
font-weight: 700;
color: var(--color-hover-2);
}
.telegram-action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 24px;
padding-left: 32px;
}
@media (max-width: 1024px) {
.telegram-action {
padding-left: 0;
padding-top: 32px;
align-items: center;
}
}
.telegram-action img {
display: block;
width: 100%;
aspect-ratio: 538/362;
border-radius: 24px;
object-fit: cover;
object-position: center;
}
@media (max-width: 576px) {
.telegram-action img {
border-radius: 16px;
}
}
.telegram-action .btn {
margin-top: auto;
padding: 20px 64px;
}
@media (max-width: 576px) {
.telegram-action .btn {
padding: 16px;
width: 100%;
max-width: 320px;
}
}
.reviews {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.reviews .section-title {
margin-bottom: 40px;
}
@media (max-width: 768px) {
.reviews .section-title {
margin-bottom: 0;
}
}
.reviews-list {
width: 100%;
max-width: 1280px;
}
.reviews .review {
display: flex;
flex-direction: column;
gap: 18px;
padding: 32px;
border-radius: 24px;
border: 1px solid var(--color-hover-1);
}
@media (max-width: 576px) {
.reviews .review {
padding: 24px;
}
}
.reviews .review p {
font-size: 14px;
line-height: 24px;
font-style: italic;
color: var(--color-additional-1);
}
.reviews .review-author {
margin-top: auto;
}
.reviews .review-author .name {
font-size: 16px;
font-weight: 700;
font-style: normal;
color: var(--color-main-text);
}
.reviews .review-author .descr {
font-size: 12px;
}
.reviews .glider {
scrollbar-width: 0;
}
.reviews .glider::-webkit-scrollbar {
width: 0;
height: 0;
}
.reviews .glider-track {
gap: 24px;
}
.reviews .dots {
margin-top: 24px;
}
.reviews .glider-dot.active {
background: var(--color-additional-2);
}
.program {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.program .section-title {
margin-bottom: 40px;
}
@media (max-width: 768px) {
.program .section-title {
margin-bottom: 0;
}
}
.program-list {
display: flex;
flex-direction: column;
width: 100%;
}
.program-part {
width: 100%;
border-top: 1px solid var(--color-additional-1);
}
.program-part:last-child {
border-bottom: 1px solid var(--color-additional-1);
}
.program-part[open] .program-part-name {
color: var(--color-main);
}
.program-part[open] line:first-child {
transform: rotate(90deg);
}
.program-part-name {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 0;
cursor: pointer;
font-size: 24px;
font-weight: 500;
transition: color 0.3s;
}
.program-part-name::-webkit-details-marker {
display: none;
}
.program-part-name line {
transition: all 0.3s;
transform-origin: center;
}
.program-part-name svg {
flex-shrink: 0;
}
@media (max-width: 576px) {
.program-part-name svg {
width: 18px;
}
}
@media (max-width: 768px) {
.program-part-name {
font-size: 20px;
}
}
@media (max-width: 576px) {
.program-part-name {
font-size: 18px;
}
}
.program-part-content {
display: grid;
grid-template-columns: repeat(2, 50%);
align-items: start;
padding-bottom: 40px;
}
@media (max-width: 768px) {
.program-part-content {
grid-template-columns: 1fr;
}
}
.program-part-content .details {
padding-right: 40px;
}
.program-part-content .details h3 {
font-size: 16px;
margin-bottom: 12px;
}
.program-part-content .details ul {
padding-left: 30px;
}
.program-part-content .details li::marker {
color: var(--color-additional-2);
}
.program-part-content .details li:not(:last-child) {
margin-bottom: 6px;
}
@media (max-width: 768px) {
.program-part-content .details {
padding-right: 0;
padding-bottom: 32px;
}
}
.program-part-content .result {
padding: 20px;
border-radius: 10px;
background: var(--color-success-bg);
color: var(--color-success);
}
.program-part-content .result h3 {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.program-part-content .result p {
font-size: 14px;
line-height: 22px;
}
.author {
display: grid;
grid-template-columns: 45% 1fr;
gap: 48px;
}
@media (max-width: 1024px) {
.author {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.author {
gap: 32px;
}
}
.author .photo {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding: 32px;
border-radius: 40px;
overflow: hidden;
aspect-ratio: 1;
}
@media (max-width: 576px) {
.author .photo {
padding: 24px;
border-radius: 24px;
}
}
.author .photo img {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.author .photo p {
position: relative;
color: var(--color-additional-3);
}
.author .photo p.name {
margin-bottom: 4px;
font-size: 24px;
line-height: 32px;
font-weight: 700;
}
.author .photo p.info {
font-size: 16px;
line-height: 24px;
}
.author .about {
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
justify-content: center;
}
.author .about-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 24px;
}
.author .about-item {
display: grid;
grid-template-columns: 48px 1fr;
column-gap: 16px;
align-items: center;
}
@media (max-width: 576px) {
.author .about-item {
align-items: start;
}
}
.author .about-item img {
display: block;
grid-column: 1/2;
grid-row: 1/3;
}
.author .about-item h3 {
font-size: 20px;
font-weight: 700;
line-height: 28px;
}
.author .about-item p {
font-size: 15px;
line-height: 24px;
color: var(--color-additional-1);
}
@media (max-width: 576px) {
.author .about-item p {
line-height: normal;
}
}
.bonus {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 100px;
border-radius: 40px;
background: var(--color-main-2);
}
@media (max-width: 768px) {
.bonus {
padding: 40px;
}
}
@media (max-width: 576px) {
.bonus {
border-radius: 24px;
padding: 24px;
}
}
.bonus-subtitle {
font-size: 16px;
line-height: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.6px;
color: var(--color-additional-2);
}
@media (max-width: 576px) {
.bonus-subtitle {
font-size: 14px;
line-height: normal;
}
}
.bonus-text {
padding: 16px 0 24px;
max-width: 720px;
font-size: 16px;
line-height: 28px;
text-align: center;
color: var(--color-hover-2);
}
@media (max-width: 576px) {
.bonus-text {
font-size: 14px;
line-height: normal;
}
}
.bonus-price {
font-size: 14px;
line-height: 20px;
color: var(--color-additional-1);
}
.bonus-price strong {
color: var(--color-danger);
}
.bonus .btn {
padding: 20px 64px;
}
@media (max-width: 576px) {
.bonus .btn {
width: 100%;
max-width: 320px;
padding: 16px;
}
}
.faq h2 {
margin-bottom: 48px;
}
.faq .questions {
display: flex;
flex-direction: column;
}
.faq .question {
width: 100%;
border-top: 1px solid var(--color-additional-1);
}
.faq .question[open] .question-title {
color: var(--color-main);
}
.faq .question[open] line:first-child {
transform: rotate(90deg);
}
.faq .question:last-child {
border-bottom: 1px solid var(--color-additional-1);
}
.faq .question-title {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 0;
cursor: pointer;
font-size: 24px;
font-weight: 500;
transition: color 0.3s;
}
.faq .question-title::-webkit-details-marker {
display: none;
}
.faq .question-title line {
transition: all 0.3s;
transform-origin: center;
}
.faq .question-title svg {
flex-shrink: 0;
}
@media (max-width: 576px) {
.faq .question-title svg {
width: 18px;
}
}
@media (max-width: 768px) {
.faq .question-title {
font-size: 20px;
}
}
@media (max-width: 576px) {
.faq .question-title {
font-size: 18px;
}
}
.faq .question-answer {
padding-bottom: 40px;
font-size: 20px;
}
@media (max-width: 768px) {
.faq .question-answer {
font-size: 16px;
}
}
.footer {
margin-top: auto;
padding: 64px 0;
background-color: var(--color-main);
}
@media (max-width: 576px) {
.footer {
padding: 46px 0;
}
}
.footer-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
@media (max-width: 576px) {
.footer-container {
flex-direction: column;
align-items: flex-start;
}
}
.footer .info {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
max-width: 320px;
}
@media (max-width: 576px) {
.footer .info {
align-items: center;
}
}
.footer .info img {
width: 161px;
height: auto;
display: block;
flex-shrink: 0;
}
.footer .info-text {
opacity: 0.7;
color: var(--color-additional-3);
}
@media (max-width: 576px) {
.footer .info-text {
text-align: center;
}
}
.footer .info-copy {
opacity: 0.5;
font-size: 12px;
color: var(--color-additional-3);
}
@media (max-width: 576px) {
.footer .info-copy {
text-align: center;
}
}
.footer .contacts {
color: var(--color-additional-3);
}
@media (max-width: 576px) {
.footer .contacts {
width: 100%;
}
}
.footer .contacts h2 {
font-size: 16px;
font-family: inherit;
font-weight: 700;
text-align: right;
margin-bottom: 24px;
}
@media (max-width: 576px) {
.footer .contacts h2 {
text-align: center;
}
}
.footer .contacts-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
@media (max-width: 576px) {
.footer .contacts-list {
align-items: center;
}
}
.footer .contacts-item {
opacity: 0.7;
line-height: 20px;
transition: opacity 0.3s;
}
.footer .contacts-item:has(a):hover {
opacity: 1;
}
.footer .contacts-item a {
line-height: inherit;
text-decoration: none;
color: inherit;
}