/* 00. Danylo Oliinyk - https://iamdev.lol/  */
/* =================================== */
/* =================================== */
/* =================================== */
/* 01. Root Rules */
/* 02. Header Section */
/* 03. Hero Section */
/* 04. Why Section */
/* 05. About Section */
/* 06. How Section */
/* 07. FAQ Section */
/* 08. Program Section */
/* 09. Calendar Section */
/* 10. Coaches Section */
/* 10.1 Writers Section */
/* 11. Benefits Section */
/* 12. Register Section */
/* 13. Footer Section */
/* =================================== */
/* =================================== */
/* =================================== */
/* 14. A_Hero Section */
/* 15. Steps Section */
/* 16. Instruction Section */
/* 17. How Section */
/* 18. Test Section */
/* 19. Assessment Section */
/* =================================== */
/* =================================== */
/* =================================== */
/* 20. Thx Section */
/* 21. Promo Section */
/* 22. Edu Section */









/* 01. Root Rules Start */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Craftwork+Grotesk:wght@400;500;600;700&display=swap');


/* CraftworkGrotesk Font */
@font-face {
  font-family: "Craftwork Grotesk";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/CraftworkGrotesk-Regular/CraftworkGrotesk-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/CraftworkGrotesk-Regular/CraftworkGrotesk-Regular.woff2") format("woff2"), url("../fonts/CraftworkGrotesk-Regular/CraftworkGrotesk-Regular.woff") format("woff"), url("../fonts/CraftworkGrotesk-Regular/CraftworkGrotesk-Regular.ttf") format("truetype"), url("../fonts/CraftworkGrotesk-Regular/CraftworkGrotesk-Regular.svg#CraftworkGrotesk") format("svg");
}
@font-face {
  font-family: "Craftwork Grotesk";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/CraftworkGrotesk-Medium/CraftworkGrotesk-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/CraftworkGrotesk-Medium/CraftworkGrotesk-Medium.woff2") format("woff2"), url("../fonts/CraftworkGrotesk-Medium/CraftworkGrotesk-Medium.woff") format("woff"), url("../fonts/CraftworkGrotesk-Medium/CraftworkGrotesk-Medium.ttf") format("truetype"), url("../fonts/CraftworkGrotesk-Medium/CraftworkGrotesk-Medium.svg#CraftworkGrotesk") format("svg");
}
@font-face {
  font-family: "Craftwork Grotesk";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/CraftworkGrotesk-SemiBold/CraftworkGrotesk-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/CraftworkGrotesk-SemiBold/CraftworkGrotesk-SemiBold.woff2") format("woff2"), url("../fonts/CraftworkGrotesk-SemiBold/CraftworkGrotesk-SemiBold.woff") format("woff"), url("../fonts/CraftworkGrotesk-SemiBold/CraftworkGrotesk-SemiBold.ttf") format("truetype"), url("../fonts/CraftworkGrotesk-SemiBold/CraftworkGrotesk-SemiBold.svg#CraftworkGrotesk") format("svg");
}
@font-face {
  font-family: "Craftwork Grotesk";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/CraftworkGrotesk-Bold/CraftworkGrotesk-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/CraftworkGrotesk-Bold/CraftworkGrotesk-Bold.woff2") format("woff2"), url("../fonts/CraftworkGrotesk-Bold/CraftworkGrotesk-Bold.woff") format("woff"), url("../fonts/CraftworkGrotesk-Bold/CraftworkGrotesk-Bold.ttf") format("truetype"), url("../fonts/CraftworkGrotesk-Bold/CraftworkGrotesk-Bold.svg#CraftworkGrotesk") format("svg");
}

:root {
  --font-main: 'Inter', sans-serif;
  --font-accent: 'Craftwork Grotesk', sans-serif;
  
  --color-background: #ffffff;
  --color-light: #F5F5F7;
  --color-dark: #0D0D0D;
  --blue: #3A6EDD;
  --Text: #3C3C41;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-background);
}

*{
  margin: 0;
  padding: 0;
}

ul {
  list-style-position: inside;
}

em{
  font-style: normal;
}

.no-page-break {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

.container {
  width: calc(100% - 64px); 
  max-width: 1440px; 
  margin: 0 auto; 
  padding: 0 32px; 
}

.distance-xxs{
  padding: 32px;
  padding-top: 73px;
}

.distance-xs{
  padding-top: 32px;
}

.distance-small{
  padding-top: 32px;
  padding-bottom: 32px;
}

.distance-section{
  padding-top: 80px;
  padding-bottom: 80px;
}

.distance-section-bt{
  padding-top: 0px;
  padding-bottom: 80px;
}

.bg-gray{
  background: var(--color-light);
}

.bg-blue{
  background: var(--blue);
}

.bg-black{
  background: #0F0F0F;
}

@media (max-width: 1440px) {
  .container {
    /* width: 100%; */ 
    padding: 0 16px; 
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}
/* 01. Root Rules End */

/* 02. Header Section Start */
.header__wrap{
    display: flex;
    padding: 20px 0px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

/* .header__wrap-col1, .header__wrap-col2{
    flex: 1;
} */

.header__wrap-col2{
  display: flex;

  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.header__wrap-col1-ul{
    display: flex;
    width: 672px;
    justify-content: space-between;
    align-items: center;
}

.header__link{
    color: #0D0D0D;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    cursor: pointer;
    text-decoration: none;
}

header {
    position: fixed;   /* закрепляет элемент */
    top: 0;            /* привязка к верхней границе окна */
    left: 0;
    width: 100%;       /* растягиваем на всю ширину окна */
    z-index: 1000;     /* поверх всех остальных элементов */
    background-color: #fff; /* чтобы не было прозрачности, если хедер перекрывает контент */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* легкая тень для отделения от контента */
}

body {
    padding-top: 100px; /* высота вашего хедера */
}


/* Иконка бургера */
.burger-icon {
    display: none; 
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    width: 30px;
    cursor: pointer;
}

.burger-line {
    background-color: #000;
    height: 4px;
    width: 100%;
    border-radius: 2px;
}

@media (max-width: 1024px) {
    .burger-icon {
        display: flex; 
    }

    .header__wrap-col1-ul {
        display: none; 
        flex-direction: column;
        gap: 16px;
        width: 95%;
        background-color: white;
        position: absolute;
        top: 60px;
        left: 0;
        padding: 16px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }

    .header__link {
        font-size: 18px;
        text-align: center;
    }

    .header__wrap-col1-ul.active {
        display: flex; 
    }
}

.header__link {
    position: relative;
    text-decoration: none; 
    color: #0D0D0D;
    transition: color 0.3s ease;
}

.header__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* отступ линии от текста */
    width: 0;
    height: 2px; /* толщина линии */
    background-color: #3A6EDD; /* цвет подчеркивания */
    transition: width 0.3s ease;
}

.header__link:hover::after {
    width: 100%; /* при наведении линия растягивается */
}

/* 02. Header Section End */


/* 03. Hero Section Start */
.hero__wrap{
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.hero__wrap-col-1, .hero__wrap-col-2{
  max-width: 676px;
  flex: 1;
}

.hero__wrap-col-1{
  display: flex;
  height: 511px;
  padding: 32px 40px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  border-radius: 24px;
  background: var(--color-light); 
}

.hero__wrap-col-2{
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  justify-content: space-between;
}

.hero__wrap-item{
  display: flex;
  padding: 32px 40px 32px 16px;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.hero__wrap-item-blk{
  justify-content: center;
  display: flex;
  height: 92px;
  padding: 32px 40px 32px 16px;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 24px;
  background: var(--900, #0D0D0D);
}

.hero__wrap-item-wh{
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.hero__wrap-item-blck{
  color: var(--900, #0D0D0D);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.hero__wrap-col-1-title{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

h1{
  color: var(--color-dark);
  font-family: var(--font-accent);
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
}

.hero__wrap-p{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.hero__wrap-col-1-btn{
  display: flex;
  width: 406px;
  padding: 36px 40px;
  justify-content: center;
  align-items: center;
  gap: 50px;
  border-radius: 200px;
  background: var(--blue, #3A6EDD);

  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-decoration: none;
}


.hero__wrap-col-1-btn:hover,
.hero__wrap-col-1-btn:focus-visible {
  transform: scale(1.03);
  background-color: #335FCC;
  background-color: color-mix(in srgb, var(--blue, #3A6EDD) 85%, black 15%);
  box-shadow: 0 10px 24px rgba(58,110,221,.30),
              0 2px 8px rgba(0,0,0,.12);
  outline: none;
}

.hero__wrap-col-1-btn:active {
  transform: scale(0.98);
  background-color: #2D53B3;
  background-color: color-mix(in srgb, var(--blue, #3A6EDD) 75%, black 25%);
  box-shadow: 0 6px 16px rgba(58,110,221,.22),
              0 1px 4px rgba(0,0,0,.12);
}

@media (prefers-reduced-motion: reduce) {
  .hero__wrap-col-1-btn { transition: background-color .2s ease, box-shadow .2s ease; }
  .hero__wrap-col-1-btn:hover, .hero__wrap-col-1-btn:focus-visible, .hero__wrap-col-1-btn:active { transform: none; }
}


@media (max-width: 1024px) {
  .hero__wrap{
    flex-direction: column;
  }
  .header__wrap-col1, .header__wrap-col2{
    flex: 0;
  }
  .container{
    width: 90%;
  }
  .hero__wrap-col-1-btn-wrap{
    display: flex;
    justify-content: center;
  }
}


@media (max-width: 768px) {
  .hero__wrap-col-1-btn{
    width: 100%;
    padding: 30px 50px;
    font-size: 14px;
  }
  h1{
    font-size: 44px;
  }
  .hero__wrap-p{
    font-size: 16px;
  }
  .hero__wrap-col-1 {
    gap: 20px;
    padding: 32px 20px;
    align-items: center;
  }
  .hero__wrap{
    GAP: 12px;
  }
}
/* 03. Hero Section End */


/* 04. Why Section Start */
.why__wrap-main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.why__wrap-promo{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 40px;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.why__wrap-promo-pretitle{
  color: var(--blue, #3A6EDD);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.why__wrap-promo-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.why__wrap{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.why__item{
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.why__item-title{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
}

.why__item-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}

@media (max-width: 1024px) {
  .why__wrap{
    flex-direction: column;
  }
  .why__wrap-main{
    gap: 12px;
  }
  .hero__wrap-col-2{
    min-width: 716px;
  }
  .hero__wrap-item-blk{
    padding: 32px 10px 32px 10px;
  }
}


@media (max-width: 768px) {
  .why__wrap-promo-title {
    line-height: normal;
    font-size: 40px;
  }
  .hero__wrap-col-2 {
    min-width: 100%;
  }
}
/* 04. Why Section End*/
/* 05. About Section Start */
.about__wrap-main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.about__wrap{
  display: flex;
  padding: 32px 40px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 24px;
  background: #FFF;
}

.about__wrap-text{
  display: flex;
  width: 753px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.about__wrap-counters-main{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.about__wrap-counters-left{
  display: flex;
  width: 909px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.about__wrap-counters-left-up{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.about__wrap-counters-left-up-1, .about__wrap-counters-left-up-2{
  display: flex;
  padding: 20px 32px;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
  border-radius: 24px;
  background: #FFF;
}

.about__wrap-counters-left-down{
  display: flex;
  padding: 20px 32px;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  border-radius: 24px;
  background: #FFF;
}

.about__wrap-counters-right{
  display: flex;
  height: 224px;
  padding: 0px 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  border-radius: 24px;
  background: #FFF;
}

.about_counter-num{
  color: var(--blue, #3A6EDD);
  font-family: var(--font-accent);
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 136.364% */
  letter-spacing: -1px;
}

.about_counter-title{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}

.about__wrap-pretitle{
  color: var(--blue, #3A6EDD);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.about__wrap-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.about__wrap-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.main-btn{
  display: flex;
  padding: 36px 40px;
  justify-content: center;
  align-items: center;
  gap: 50px;
  align-self: stretch;
  border-radius: 200px;
  background: var(--blue, #3A6EDD);

  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1),
              box-shadow .2s ease,
              background-color .2s ease;
  will-change: transform, box-shadow;
}

.main-btn:hover,
.main-btn:focus-visible {
  transform: scale(1.03);
  background-color: #335FCC;
  background-color: color-mix(in srgb, var(--blue, #3A6EDD) 85%, black 15%);
  box-shadow: 0 10px 24px rgba(58,110,221,.30),
              0 2px 8px rgba(0,0,0,.12);
  outline: none;
}

.main-btn:active {
  transform: scale(0.98);
  background-color: #2D53B3;
  background-color: color-mix(in srgb, var(--blue, #3A6EDD) 75%, black 25%);
  box-shadow: 0 6px 16px rgba(58,110,221,.22),
              0 1px 4px rgba(0,0,0,.12);
}

@media (prefers-reduced-motion: reduce) {
  .main-btn { transition: background-color .2s ease, box-shadow .2s ease; }
  .main-btn:hover, .main-btn:focus-visible, .main-btn:active { transform: none; }
}

@media (max-width: 1024px) {
  .about__wrap-counters-left-up{
    flex-direction: column;
  }
  .about__wrap-counters-main{
    flex-direction: column;
  }
  .about__wrap-counters-left{
    width: 100%;
  }
  .about__wrap-counters-left-up-1, .about__wrap-counters-left-up-2, .about__wrap-counters-left-down{
    flex-direction: column;
    align-items: start;
    align-self: stretch;
    gap: 20px;
  }
  .about__wrap-counters-right{
    padding: 32px;
  }
  .about__wrap-main, .about__wrap-counters-left-up, .about__wrap-counters-left, .about__wrap-counters-main{
    gap: 12px;
  }
}


@media (max-width: 768px) {
  .about__wrap{
    flex-direction: column-reverse;
    align-items: self-start;
  }
  .about__wrap-text{
    width: 100%;
    margin-top: 20px;
    gap: 20px;
  }
  .about__wrap-title{
    font-size: 40px;
    line-height: normal;
  }
  .about__wrap-subtitle{
    font-size: 16px;
  }
  .about__wrap-pretitle{
    font-size: 16px;
    line-height: normal;

  }
}
/* 05. About Section End */
/* 06. How Section Start */
.how__wrap-main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.how__wrap-text{
  display: flex;
  width: 753px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.how__wrap-pretitle{
  color: var(--blue, #3A6EDD);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.how__wrap-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.how__wrap-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.how__wrap-items{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.how__item{
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.how__item-icon{
  display: flex;
  width: 100px;
  height: 100px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  background: var(--blue, #3A6EDD);
}

.how__item-title{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
}

.how__item-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}

@media (max-width: 1024px) {
  .how__wrap-text{
    width: 100%;
  }
  .how__wrap-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 колонки одинаковой ширины */
  grid-template-rows: repeat(2, auto);   /* 2 ряда, высота по контенту */
  gap: 12px; /* расстояние между элементами, можешь подогнать */
  }
  .how__wrap-subtitle{
    font-size: 16px;
  }
  .how__wrap-title{
    font-size: 40px;
    line-height: normal;
  }
}

@media (max-width: 768px) {
  .how__wrap-items {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}
/* 06. How Section End */
/* 07. FAQ Section Start */
.faq-wrap-wrap{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq__wrap{
  display: flex;
  /* height: 588px; */
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.faq__wrap-col1{
  display: flex;
  padding: 60px 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  flex: 1 0 0;
  border-radius: 24px;
  background: #FFF;
}

.faq__wrap-col1-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.faq__wrap-col1-pretitle{
  color: var(--blue, #3A6EDD);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.faq__wrap-col1-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.faq__wrap-col1-descr{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.faq__wrap-col1-descr-title-bold{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
}

.faq__wrap-col1-descr-title{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.faq__wrap-col2{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
}

.faq__wrap-col2-up{
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 24px;
  background: #FFF;
}

.faq__wrap-col2-up-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 31px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -1px;
}

.faq__wrap-col2-up-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.faq__wrap-col2-up-item-btn{
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
}

.faq__wrap-col2-down{
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: #FFF;
}

.faq__wrap-col2-down-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 31px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -1px;
}

.faq__wrap-col2-up-item-descr{
  color: var(--Text, #3C3C41);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; 
  display: none;
}

.item-descr-active{
  display: block;
}

.faq__wrap-col2-down-descr{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; 
}

.faq__wrap-col2-up-item-btn { text-decoration: none; }

.faq__wrap-col2-up-item-btn p {
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .25s ease;
}


.faq__wrap-col2-up-item:not(.faq-item-active) .faq__wrap-col2-up-item-btn:hover p,
.faq__wrap-col2-up-item:not(.faq-item-active) .faq__wrap-col2-up-item-btn:focus-visible p {
  background-size: 100% 2px;
}


.faq-item-active .faq__wrap-col2-up-item-btn p {
  background-size: 0 2px !important;
}

@media (max-width: 768px) {
  .faq__wrap{
    flex-direction: column;
  }
  .faq__wrap-col1-title{
    font-size: 40px;
    line-height: normal;
  }
  .faq__wrap-col1-descr-title, .faq__wrap-col1-descr-title-bold{
    font-size: 16px;
    line-height: normal;
  }
  .faq__wrap-col2-up-item-btn p{
    font-size: 16px;
  }
  .faq__wrap-col2-down-descr{
    font-size: 14px;
  }

  .faq__wrap-col2, .faq__wrap{
    gap: 12px;
  }
}
/* 07. FAQ Section End */
/* 08. Program Section Start */
.program__wrap-main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.program__wrap{
  display: flex;
  padding: 32px 40px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.program__wrap-text{
  display: flex;
  width: 753px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.program__wrap-pretitle{
  color: var(--blue, #3A6EDD);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.program__wrap-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.program__wrap-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.program__wrap-slider{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.program__btns-wrap{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.program__btn{
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);

  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  text-decoration: none;

  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.8,.2,1),
              background-color .2s ease;
  will-change: transform, background-color;
}

.program__btn:hover,
.program__btn:focus-visible {
  transform: scale(1.02);
  background-color: #E9E9ED;
  background-color: color-mix(in srgb, var(--200, #F5F5F7) 88%, black 12%);
}

.program__btn:active {
  transform: scale(0.99);
  background-color: #E3E3E8;
  background-color: color-mix(in srgb, var(--200, #F5F5F7) 80%, black 20%);
}

@media (prefers-reduced-motion: reduce) {
  .program__btn { transition: background-color .2s ease; }
  .program__btn:hover,
  .program__btn:focus-visible,
  .program__btn:active { transform: none; }
}

.program__btn-active{
  border-radius: 24px;
  background: var(--900, #0D0D0D);
  color: #FFF;
}

.program__btn.program__btn-active {
  transition: none !important; 
  transform: none !important; 
  background: var(--900, #0D0D0D);
  color: #FFF;
}

.program__btn.program__btn-active:hover,
.program__btn.program__btn-active:focus-visible,
.program__btn.program__btn-active:active {
  transform: none !important;
  background: var(--900, #0D0D0D);
  color: #FFF;
}

.program__slides{
  display: flex;
  padding: 60px 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.program__slide{
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  align-self: stretch;
}

.program__slide-active{
  display: flex;
}

.program__slide-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.program__slide-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 31px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -1px;
}

.program__slide-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.program__slide-subtitle p{
  font-weight: 700;
}

.program__slide-accord, .program__slide-accord-wrap{
  width: 100%;
}

.program__slide-accord-btn-promo{
  display: flex;
  padding-left: 20px;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  background: #FFF;

  color: var(--900, #0D0D0D);
  text-align: right;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.program__slide-accord-btn-promo em{
  display: flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--blue, #3A6EDD);

  color: #FFF;
  text-align: right;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.program__slide-accord-btn-click{
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.program__slide-accord-btn {
  display: flex;
  width: 100%; 
  align-items: center;   
  gap: 12px;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
}

.program__slide-accord-btn-title-active{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.program__slide-accord-btn-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.program__slide-accord-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 52px;
  align-self: stretch;
}

.prorgam_div{
  width: 100%;
  height: 1px;
  background: #D6D6DC;
}

.test_div{
  width: 100%;
  height: 1px;
  background: #D6D6DC;
}

.program__slide-content{
  display: none;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  margin-top: 12px;
}

.program__slide-content-1{
  display: none;
  gap: 12px;
  flex-direction: column;
}

.program__col-wrap{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  margin-top: 12px;
}

.slide-content-active{
  display: flex;
}

.program__col{
  display: flex;
  /* width: 636px; */
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  gap: 12px;
}

.program__col-item{
  padding: 20px;
  align-items: center;
  align-self: stretch;
  border-radius: 20px;
  border: 1px solid var(--300, #D6D6DC);

  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.program__col-item em{
  font-weight: 700;
}

.longread{
  padding-left: 0;
}

.item-longread{
  margin-top: 10px;
}

.program__col-item a{
  color: var(--blue, #3A6EDD);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}

.bonus em{
  color: #FFF;
  text-align: right;  
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
  border-radius: 999px;
  background: var(--900, #0D0D0D);
}

.program__slide-accord-btn-promo em {
  white-space: nowrap;
  display: inline-block; /* или flex, если нужна иконка рядом */
}

@media (max-width: 1024px) {
  .prorgam_div{
    width: auto;
    align-self: stretch;
  }
}

@media (max-width: 768px) {
  .program__btns-wrap{
    flex-direction: column;
  }
  .program__col-wrap{
    flex-direction: column;
  }
  .program__slide-content{
    flex-direction: column;
  }
  .program__slide-subtitle, .program__col-item, .program__slide-accord-btn-promo, .program__slide-accord-btn-promo em{
    font-size: 12px;
    line-height: normal;
  }
  .program__slide-accord-btn{
    flex-direction: column;
  }
  .program__slide-accord-btn-ico{
    display: none;
  }
  .program__slide-accord-btn{
    align-items: start;
  }
  .program__col-item a{
    font-size: 12px;
  }
  .program__wrap-logo{
    display: none;
  }
  .program__wrap-title{
    font-size: 44px;
    line-height: normal;
  }
}
/* 08. Program Section End */
/* 09. Calendar Section Start */
.calendar__wrap{
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.calendar__wrap-col-1, .calendar__wrap-col-2{
  flex: 1 0 0;
}

.calendar__wrap-col-1{
  display: flex;
  padding: 60px 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: #FFF;
}

.calendar__wrap-col-1-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.calendar__wrap-info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.calendar__wrap-info-row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.calendar__wrap-info-row-item{
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  flex: 1 0 0;
}

.calendar__wrap-info-row-item-title{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.calendar__wrap-info-row-item-ico{
  display: flex;
  width: 76px;
  height: 76px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 8px;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

  border: 1px solid var(--blue, #3A6EDD);
  background: #FFF;
  color: var(--blue, #3A6EDD);
}



/* ========== Calendar Block ========== */

.cal {
  --cal-bg: #FFFFFF;
  --cal-surface: #FFFFFF;
  --cal-text: #0D0D0D;
  --cal-muted: #DDE1E8;
  --cal-border: #D9DFEA;
  --cal-primary: #3A6EDD;
  --cal-primary-10: rgba(58,110,221, .12);

  background: var(--cal-bg);
  border-radius: 24px;
  padding: 40px 60px;
  border: 1px solid var(--cal-border);
}

/* header */
.cal__header {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.cal__month {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: 10.04px;
  border: 1px solid var(--blue, #3A6EDD);

  color: var(--900, #0D0D0D);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; 
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* weekdays */
.cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  padding: 12px 0 0;
  margin-bottom: 12px;
  color: #6B7280;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cal__weekdays span {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* grid of days */
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* day cell */
.cal__day {
  display: flex;
  width: 76px;
  height: 76px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;            
  user-select: none;
  border-radius: 8px;
  border: 1px solid var(--300, #D6D6DC);
  background: #FFF;

  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* states */
.cal__day--empty {
  visibility: hidden;            
}

.cal__day--muted {
  border-radius: 8px;
  border: 1px solid var(--300, #D6D6DC);
  background: var(--200, #F5F5F7);
  color: var(--900, #0D0D0D);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.cal__day--event {
  border-radius: 8px;
  border: 1px solid var(--300, #D6D6DC);
  background: rgba(58, 110, 221, 0.30);
  color: var(--blue, #3A6EDD);
}

.cal__day--selected {
  background: var(--cal-primary);
  border-color: var(--cal-primary);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(58,110,221,.35) inset;
  border-radius: 8px;
}

.cal__day--longread{
  border-radius: 8px;
  border: 1px solid var(--blue, #3A6EDD);
  background: #FFF;
  color: var(--blue, #3A6EDD);
}

/* адаптив мелкий */
@media (max-width: 768px) {
  .cal { padding: 24px; }
  .cal__month { min-width: 0; width: 100%; }
  .cal__day { font-size: 16px; }
}

.m-colored{
  border-radius: 8px;
  border: 1px solid var(--300, #D6D6DC);
  background: rgba(58, 110, 221, 0.30);
  color: var(--blue, #3A6EDD);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.z-colored{
  border-radius: 8px;
  border: 1px solid var(--300, #D6D6DC);
  background: var(--200, #F5F5F7);
  color: var(--900, #0D0D0D);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.f-colored{
  border-radius: 8px;
  background: var(--blue, #3A6EDD);
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.cal__day--today {
  border-color: #ff0000 !important;
  font-weight: 800;
  border: 2px solid;
}

.calendar__wrap-wrap{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 1024px) {
  .calendar__wrap{
    flex-direction: column;
  }
  .cal__day{
    width: 40px;
    height: 40px;
  }
  .calendar__wrap-info-row{
    flex-direction: column;
  }
  .calendar__wrap-col-1-title{
    font-size: 44px;
    line-height: normal;
  }
  .calendar__wrap-info-row-item-ico{
    width: 50px;
    height: 50px;
  }
}
/* 09. Calendar Section End */
/* 10. Coaches Section Start */
.coaches__wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.coaches__row{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.coaches__item-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  display: flex;
  width: 543px;
  padding: 32px 40px;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.coaches__item-head-pretitle{
  color: var(--blue, #3A6EDD);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.coaches__item-head-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.coaches__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px ;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
  flex: 1 0 0;
  padding: 20px;
}

.coaches__item-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: url('/img/bg/coach_bg.webp') center/cover no-repeat; /* градиент */
  background-color: #0D0D0D;  
}

.coaches__item-title{
  color: var(--Text, #3C3C41);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
}

.coaches__item-subtitle{
  color: var(--blue, #3A6EDD);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}

.coaches__item-subtitle a{
  color: var(--blue, #3A6EDD);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}


.coach-1 {
    background-image: url(../img/coaches/coach-1.webp), 
    url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: -34px, 0px;
    background-position-y: -30px, 00px;
    background-size: 200%;
}

.coach-2 {
    background-image: url(../img/coaches/coach-2.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: -20px, 0px;
    background-position-y: -15px, 00px;
    background-size: 130%;
}

.coach-3 {
    background-image: url(../img/coaches/coach-3.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: -30px, 0px;
    background-position-y: -30px, 00px;
    background-size: 180%;
}

.coach-4 {
    background-image: url(../img/coaches/coach-4.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: center;
    background-position-y: -20px, 00px;
    background-size: 140%;
}

.coach-5 {
    background-image: url(../img/coaches/coach-5.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: 0px, 0px;
    background-position-y: 10px, 00px;
    background-size: 100%;
}

.coach-6 {
    background-image: url(../img/coaches/coach-6.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: -30px, 0px;
    background-position-y: -15px, 00px;
    background-size: 170%;
}

.coach-7 {
    background-image: url(../img/coaches/coach-7.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: -25px, 0px;
    background-position-y: -5px, 00px;
    background-size: 150%;
}

.secret-writer {
    background-image: url(../img/coaches/secret.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: -15px, 0px;
    background-position-y: -3px, 00px;
    background-size: 140%;
}

.writer-1 {
    background-image: url(../img/coaches/writer-1.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: 10px, 0px;
    background-position-y: 5px, 00px;
    background-size: 80%;
}

.writer-2 {
    background-image: url(../img/coaches/writer-2.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: -30px, 0px;
    background-position-y: 10px, 00px;
    background-size: 160%;
}

.writer-3 {
    background-image: url(../img/coaches/writer-3.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: -30px, 0px;
    background-position-y: -15px, 00px;
    background-size: 170%;
}

.writer-4 {
    background-image: url(https://stratoplan-school.com/habits/img/team/06_couch-card.webp), url(/img/bg/coach_bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position-x: -10px, 0px;
    background-position-y: 10px, 00px;
    background-size: 120%;
}

@media (max-width: 1024px) {
  .coaches__row{
    flex-direction: column;
  }
  .coaches__item-head{
    width: auto;
  }
  .coaches__item-head-title{
    font-size: 31px;
    line-height: normal;
  }
  .why__wrap-promo{
    margin-top: 40px;
  }
}
/* 10. Coaches Section End */

/* 10.1 Writers Section */
.writers__wrap-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  justify-content: space-between;
}

.writers__wrap{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.writers__wrap-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  align-self: stretch;

  display: flex;
  padding: 20px;
  flex: 1 0 0;
  align-self: stretch;

  border-radius: 24px;
  background: #FFF;
}

.writers__wrap-item-large{
  display: flex;
  width: 543px;
  /* height: 231px; */
  padding: 32px 40px;
  flex-direction: column;
  gap: 12px;
  border-radius: 24px;
  background: #FFF;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  align-self: stretch;
}

.writers__wrap-item-large-title{
  color: var(--900, #0D0D0D);
  text-align: center;
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

@media (max-width: 1024px) {
  .writers__wrap {
    display: flex;
    flex-direction: column;
  }

  .writers__wrap-item {
    order: 2;
  }

  .writers__wrap-item-large {
    order: 1;
    width: 100%;
    height: auto;
  }

  .writers__wrap-item:nth-child(3) {
    order: 3;
  }
}

/* 10.1 Writers Section */
/* 11. Benefits Section Start */
.benefits__wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.benefits__promo{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
  border-radius: 24px;
  background: #FFF;

  display: flex;
  padding: 32px 40px;
  align-items: center;
  align-self: stretch;
}

.benefits__wrap-items{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.benefits__item{
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: #F5F5F7;
}

.benefits__item-ico{
  display: flex;
  width: 100px;
  height: 100px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  background: var(--blue, #3A6EDD);
}

.benefits__item-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.benefits__item-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.benefits__item-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}
/* 11. Benefits Section End */
/* 12. Register Section Start */
.register__wrap{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.register__wrap-col-1, .register__wrap-col-2{
  flex: 1 0 0;
}

.register__wrap-col-1{
  display: flex;
  width: 676px;
  padding: 32px 40px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;

  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.register__wrap-col-1-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.register__wrap-col-1-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.register__wrap-col-1-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.register__wrap-col-2{
  display: flex;
  width: 676px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

.register__wrap-col-2-up{
  display: flex;
  padding: 32px 40px 32px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  border-radius: 24px;
  background: var(--900, #0D0D0D);
}

.register__wrap-col-2-form{
  padding: 32px;
  align-items: center;
  gap: 24px;
  border-radius: 24px;
  background: #FFF;
  align-self: stretch;
}

.register__wrap-col-2-form-up{
  padding: 32px;
  align-items: center;
  gap: 24px;
  border-radius: 24px;
  background: var(--color-light);
  align-self: stretch;
  flex: 1;
}

.form_238250_1{
  align-self: stretch;
}

.register__wrap-col-2-up-title{
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.register__wrap-col-2-up-subtitle{
  color: var(--blue, #3A6EDD);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .benefits__wrap-items{
    flex-direction: column;
  }
  .register__wrap{
    flex-direction: column;
  }
  .register__wrap-col-1{
    width: auto;
  }
  /* .register__wrap-col-2-up, .register__wrap-col-2-form{
    width: 100%;
  } */
  .register__wrap-col-2{
    width: 100%;
  }
}

@media (max-width: 768px) {
  .benefits__wrap-items{
    flex-direction: column;
  }
  .register__wrap-col-1-title{
    font-size: 40px;
    line-height: normal;
  }
  .register__wrap-col-1{
    gap: 20px;
  }
  .register__wrap-col-2-up{
    padding: 32px;
  }
}
/* 12. Register Section End */

/* 13. Footer Section Start */

.footer__main-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

.footer__title{
  color: #F5F5F5;
  text-align: center;
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px; /* 128% */
}

.footer__main-content-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.footer__main-content-wrap-top{
  display: flex;
  width: 100%;
  padding: 40px 0px;
  justify-content: space-between;
  align-items: center;
}

.footer__links-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.footer-link-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-link-btn:hover {
  transform: scale(1.1);
}

.footer__main-content-wrap-bottom{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.footer__main-content-col1{
  display: flex;
  width: 695px;
  align-items: flex-start;
  gap: 60px;
}

.footer__main-content-col1, .footer__main-content-col2{
  flex: 1;
}

.footer__main-content-col1-item{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__main-content-title{
  padding-bottom: 2px;
  color: var(--blue);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
  text-transform: uppercase;
}

.footer__main-content-subtitle{
  color: #F5F5F5;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
}

.foot-lnk{
  text-decoration: none;
  cursor: pointer;
}

.footer__main-content-col2{
  display: flex;
  justify-content: end;
  align-items: flex-end;
  align-self: stretch;
  
}

.footer__main-content-col2 p{
  width: 50%;
  color: #F5F5F5;
  text-align: right;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
}

.footer__main-bottom{
  border-top: 1px solid #898989;
  display: flex;
  width: 100%;
  padding-top: 50px;
  justify-content: space-between;
  align-items: center;
}

.footer__main-bottom a {
  color: #F5F5F5;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
  text-decoration: none;
  cursor: pointer;
  transition: text-decoration 0.3s ease; /* Плавное добавление подчеркивания */
}

.footer__main-bottom a:hover {
  text-decoration: underline; /* Добавляем подчеркивание при наведении */
}

.footer__main-bottom p{
  color: #F5F5F5;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
}

@media (max-width: 1024px) {
  .footer__main-content-wrap-bottom{
    flex-direction: column;
  }
  .footer__main-content-col1{
    width: 100%;
    flex-direction: column;
  }
  .footer__main-content-col2 p{
    margin-top: 60px;
    width: 100%;
    text-align: left;
  }
  .footer__main-content-col2{
    justify-content: start;
  }
  .footer__title{
    font-size: 31px;
    line-height: normal;
    text-align: start;
  }
  .footer__main-bottom{
    width: 100%;
    flex-direction: column;
    gap: 20px;
    text-align: start;
  }
  .footer__main-content-wrap-top{
    flex-direction: column;
    Gap: 20px;
    align-items: start;
  }
}
/* Footer Section End */

/* 14. A_Hero Section Start */
.a-hero__wrap{
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.a-hero__wrap-col1{
  display: flex;
  width: 821px;
  padding: 60px 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 84px;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.a-hero__wrap-col1-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.a-hero__wrap-col1-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.a-hero__wrap-col1-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.a-hero__wrap-col2{
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;

  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.a-hero__wrap-col2-title{
  color: var(--900, #0D0D0D);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.a-hero__wrap-col2-points-wrap{
  display: flex;
  width: 367px;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  border-radius: 24px;
  background: #FFF;
}

.a-hero__wrap-col2-point{
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.point-ico{
  color: var(--blue, #3A6EDD);
  font-family: var(--font-accent);
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1px;
}

.point-title{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 19.2px */
}

.a-hero__item{
  display: flex;
  padding: 32px 40px 32px 16px;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  align-self: stretch;

  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.a-hero__item-title{
  color: var(--900, #0D0D0D);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
 .a-hero__wrap-col2{
  gap: 20px;
 }
 .a-hero__wrap-col2-points-wrap{
  width: 100%;
 }
 .main-btn{
  letter-spacing: normal;
 }
}
/* 14. A_Hero Section End */
/* 15. Steps Section Start */
.steps__wrap-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.steps__promo{
  display: flex;
  padding: 32px 40px;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);

  flex-direction: column;
  gap: 20px;
}

.steps__wrap{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.steps__promo-pretitle{
  color: var(--blue, #3A6EDD);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.steps__promo-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.steps__wrap-col{
  display: flex;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.steps__wrap-col-ico{
  display: flex;
  width: 100px;
  height: 100px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  background: var(--blue, #3A6EDD);

  color: #FFF;
  text-align: center;
  font-family: var(--font-accent);
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1px;
}

.steps__wrap-col-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 187.5% */
  letter-spacing: -1px;
}

.steps__wrap-col-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}
/* 15. Steps Section End */
/* 16. Instruction Section Start */
.instruction__wpap-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.instruction__promo{
  display: flex;
  padding: 32px 40px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 24px;
  background: #FFF; 
}

.instruction__promo-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.instruction__promo-pretitle{
  color: var(--blue, #3A6EDD);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.instruction__promo-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.instruction__wpap{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.instruction__wpap-col-1{
  display: flex;
  padding: 20px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: #FFF;
}

.instruction__wpap-title{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
}

.instruction__wpap-col-1 ul li{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}

.instruction__wpap-col-2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
}

.instruction__wpap-col-2-up{
  display: flex;
  padding: 20px 32px;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 24px;
  background: #FFF;
  flex-direction: column;
}

.instruction__wpap-col-2-down{
  display: flex;
  padding: 20px 32px;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 24px;
  background: #FFF;
  flex-direction: column;
}

.instruction__wpap-subtitle em{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
/* 16. Instruction Section End */
/* 17. How Section Start */
.how__wrap-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.how__promo{
  display: flex;
  padding: 32px 40px;
  align-items: center;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);

  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.how__wrap{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.how__item{
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.how__item-num{
  color: var(--blue, #3A6EDD);
  text-align: center;
  font-family: var(--font-accent);
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1px;
}

.how__item-descr{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
}

@media (max-width: 1024px) {
  .a-hero__wrap{
    flex-direction: column;
  }
  .a-hero__wrap-col1{
    width: auto;
  }
  .a-hero__wrap-col1-title, .steps__promo-title, .how__promo{
    line-height: normal;
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .steps__wrap{
    flex-direction: column;
  }

  .steps__wrap-col-title{
    font-size: 24px;
    line-height: normal;
  }

  .instruction__promo-title{
    font-size: 24px;
    line-height: normal;
  }
  .instruction__promo-ico{
    display: none;
  }
  .instruction__wpap, .how__promo, .how__wrap{
    flex-direction: column;
  }
}
/* 17. How Section End */
/* 18. Test Section Start */
.test__wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.test__promo-item{
  display: flex;
  padding: 32px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  border-radius: 24px;
  background: var(--900, #0D0D0D);
}

.test__promo-item-title{
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.test__promo-item-num{
  color: var(--900, #0D0D0D);
  text-align: right;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
  display: flex;
  padding: 4px 20px;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  background: #FFF;
}

.test__item{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 120px;
  align-self: stretch;
}

.test__item-question{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  flex: 1 0 0;
}

.test__item-answers-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
}

.test__item-answer{
  display: flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;

  
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 171.429% */
  text-decoration: none;
}

.test__item-answer {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer; /* чтобы было понятно, что элемент кликабельный */
}

.test__item-answer:hover {
    transform: scale(1.05); /* увеличение на 5% */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* легкая тень для эффекта */
}


.answer-0{
  border-radius: 999px;
  background: var(--blue, #3A6EDD);
  border: 1px solid var(--blue, #3A6EDD);
  color: #FFF;
}

.answer-1{
  border-radius: 999px;
  border: 1px solid var(--blue, #3A6EDD);
  background: #89A6E4;
  color: #FFF;
}

.answer-2{
  border-radius: 999px;
  border: 1px solid var(--blue, #3A6EDD);
  background: #E8EFFF;
  color: var(--blue, #3A6EDD);
}

.answer-selected{
  border-radius: 999px;
    background: var(--blue, #3A6EDD);
    border: 1px solid var(--blue, #3A6EDD);
    color: #FFF;
}

.answer-non-selected{
  border-radius: 999px;
  background: #869ed10d;
  color: #ababab;
  border: 1px solid #ababab;
}

.num-done{
  background: var(--blue, #3A6EDD);
  color: #FFF;
}

@media (max-width: 1024px) {
  .test__item-question{
    font-size: 14px;
    line-height: normal;
  }
  .test__item-answer{
    padding: 12px;
    font-size: 10px;
  }
  .test__item-answers-wrap{
    gap: 10px;
  }
  .test__item{
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .test__item{
    flex-direction: column;
  }
  .test__promo-item-num{
    font-size: 16px;
  }
  .test__item-answers-wrap{
    width: 100%;
  }
  .test__promo-item-title{
    font-size: 8px;
  }
  .test__promo-item{
    flex-direction: column;
    text-align: center;
  }
}
/* 18. Test Section End */
/* 19. Assessment Section Start */
.assessment__wrap{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.assessment__wrap-col-1{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
}

.assessment__wrap-col-1-up{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;

  border-radius: 24px;
  background: #FFF;

  display: flex;
  height: 360px;
  padding: 32px 40px;
  justify-content: space-between;
  align-self: stretch;
}

.assessment__wrap-col-1-up-pretitle{
  color: var(--blue, #3A6EDD);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.assessment__wrap-col-1-up-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.assessment__wrap-col-1-up-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.assessment__wrap-col-1-down{
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;

  display: flex;
  padding: 32px 40px 32px 16px;
  flex-direction: column;
  justify-content: center;

  gap: 32px;
  flex: 0.6;
  align-self: stretch;

  border-radius: 24px;
  background: var(--900, #0D0D0D);
}

.assessment__wrap-col-2{
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  border-radius: 24px;
  background: #FFF;
}

@media (max-width: 768px) {
 .assessment__wrap{
  flex-direction: column;
 }
 .assessment__wrap-col-2{
  align-self: stretch;
 }
 .assessment__wrap-col-1-up-subtitle{
  font-size: 16px;
 }
}
/* 19. Assessment Section End */
/* 20. Thx Section Start */
.thx__wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.thx__wrap-row-1{
  display: flex;
  padding: 32px 40px;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
  justify-content: space-between;
}

.thx__wrap-row-1-col1{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.thx__wrap-row-1-col1-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.thx__wrap-row-1-col1-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.thx__wrap-row-1-col1-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
}

.thx__wrap-row-1-col1-descr{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}

.thx__wrap-row-2{
  display: flex;
  padding: 32px 40px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 24px;
  background: var(--200, #F5F5F7);
}

.thx__wrap-row-2-col1{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}

.thx__wrap-row-2-col1-title{
  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.thx__wrap-row-2-col1-subtitle{
  color: var(--Text, #3C3C41);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.thx__wrap-row-2-col1-descr{
  color: var(--Text, #3C3C41);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
}

.thx__wrap-row-2-col2-btn{
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;

  display: flex;
  padding: 36px 40px;
  justify-content: center;
  align-items: center;
  gap: 50px;

  border-radius: 200px;
  background: var(--blue, #3A6EDD);
  text-decoration: none;
}

.thx__wrap-row-2-col2-btn {
  transition: transform 0.25s ease; /* плавность */
}

.thx__wrap-row-2-col2-btn:hover {
  transform: scale(1.05); /* лёгкое увеличение */
}
/* 20. Thx Section End */
/* 21. Promo Section Start */

.promo__wrap{
  display: flex;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  flex: 1 0 0;
  align-self: stretch;

  border-radius: 16px;
  background: var(--blue, #3A6EDD);
}

.promo__wrap-up{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.promo__wrap-up-title{
  color: #FFF;
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 115.385% */
  letter-spacing: -1px;
}

.promo__wrap-up-subtitle{
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.promo__wrap-down{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.item-white{
  padding: 20px 40px;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  background: #FFF;
  display: block;
}

.item-black{
  width: 100%;
}

.promo__wrap-down-item-wrap{
  display: flex;
  Gap: 12px;
  align-items: center;
  justify-content: start;
}

.promo__wrap-down-item-wrap p{
  color: var(--900, #0D0D0D);
  font-size: 21.512px;
  font-style: normal;
  font-weight: 500;
  line-height: 38.244px; /* 177.778% */
}

.l-sale{
  font-size: 33.463px;
  color: var(--900, #0D0D0D);
}

.m-sale{
  font-size: 28.683px;
  color: var(--900, #0D0D0D);
}

.s-sale{
  font-size: 23.902px;
  color: var(--900, #0D0D0D);  
}

.promo__wrap-down-item{
  color: #FFF;
  font-family: var(--font-accent);
  font-size: 31px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -1px;
}

.promo__wrap-down-btn{
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: 2.4px;
  text-transform: uppercase;

  display: flex;
  padding: 36px 40px;
  justify-content: center;
  align-items: center;
  gap: 50px;
  
  border-radius: 200px;
  background: var(--900, #0D0D0D);
  text-decoration: none;
  cursor: pointer;
}

.promo__wrap-down-btn {
  transition: transform 0.25s ease; /* плавность */
}

.promo__wrap-down-btn:hover {
  transform: scale(1.05); /* лёгкое увеличение */
}
/* 21. Promo Section End*/
/* 22. Edu Section Start*/
.edu__wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px; 
}

.edu__promo{
  display: flex;
  padding: 32px 40px;
  align-items: center;
  align-self: stretch;

  border-radius: 24px;
  background: var(--200, #F5F5F7);

  color: var(--900, #0D0D0D);
  font-family: var(--font-accent);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; 
  letter-spacing: -1px;
}

.edu__wrap-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.edu__wrap-items{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.edu__wrap-item {
    display: flex;
    height: 144px;
    padding: 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
    border-radius: 24px;
    background: var(--200, #F5F5F7);
    color: var(--Text, #3C3C41);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-decoration: none;
    transition: all 0.3s ease; /* Плавное изменение всех свойств */
    cursor: pointer; /* Курсор в виде руки */
}

/* Эффект при наведении */
.edu__wrap-item:hover {
    background: #3A6EDD; /* Меняем фон */
    color: var(--200, #F5F5F7); /* Меняем текст */
    transform: scale(1.05); /* Увеличиваем элемент */
}


.edu__wrap-itemn {
  transition: transform 0.25s ease; /* плавность */
}

.edu__wrap-item:hover {
  transform: scale(1.05); /* лёгкое увеличение */
}

@media (max-width: 1024px) {
  .thx__wrap-row-2, .promo__wrap-down{
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .thx__wrap-row-1-col1-title, .promo__wrap-up-title{
    font-size: 40px;
    line-height: normal;
  }
  .thx__wrap-row-1-col1-subtitle, .thx__wrap-row-2-col1-subtitle{
    font-size: 16px;
  }
  .thx__wrap-row-1{
    flex-direction: column-reverse;
  }
  .thx__wrap-row-2-col1-title{
    font-size: 31px;
    line-height: normal;
  }
  .promo__wrap-down-item-wrap p{
    font-size: 14px;
  }

  .l-sale, .m-sale, .s-sale{
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
  }
  .promo__wrap-down-item{
    font-size: 16px;
    line-height: normal;
  }
  .promo__wrap-down-btn{
    text-align: center;
  }
  .edu__promo{
    font-size: 31px;
    line-height: normal;
  }
  .edu__wrap-items{
    flex-direction: column;
  }
  .edu__wrap-item{
    align-self: stretch;
  }
}
/* 22. Edu Section End */

/* Media and CSS Adds */
::-webkit-scrollbar {
  width: 12px; /* ширина вертикального скролла */
  height: 12px; /* высота горизонтального скролла */
}

/* Полоса прокрутки */
::-webkit-scrollbar-track {
  background: white; /* белая полоса */
  border-radius: 10px; /* скругленные углы */
}

/* Сам скролл */
::-webkit-scrollbar-thumb {
  background: #3A6EDD; /* черный скролл */
  border-radius: 10px; /* скругленные углы */
}

/* Когда наводишь курсор на скролл */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* темно-серый при наведении */
}

/* Хедер: не даём ему вылазить */
header, .header, .header__wrap, .header__menu, .header__nav {
  max-width: 100vw;
  overflow-x: hidden;
  flex-wrap: wrap; /* если flex */
}

.header__menu, .header__nav ul {
  flex-wrap: wrap;
}

.header__nav a {
  min-width: 0;   /* чтобы ссылки могли сжиматься */
  white-space: normal; /* перенос слов если нужно */
}


/* Макбук Air 13 (эффективное ~1280px) */
@media screen and (min-width: 1280px) and (max-width: 1440px) {
 .cal__day {
    display: flex;
    width: 56px;
    height: 56px;
  }
}

/* 1) Глобально учитываем паддинги в ширину — меньше проблем с округлением */
*,
*::before,
*::after { box-sizing: border-box; }

/* 2) Контейнер без calc() — больше не переполняет из-за округлений */
.container {
  width: 100%;            /* было: width: calc(100% - 64px) */
  max-width: 1440px;
  padding: 0 32px;        /* отступы оставляем */
  margin: 0 auto;
}

/* 3) Хедер: не позволяй контенту расширять строку */
.header__wrap { flex-wrap: wrap; min-width: 0; }
.header__wrap-col2 { min-width: 0; }
.header__wrap-col1-ul {        /* было: 672px */
  max-width: 100%;
  flex-wrap: wrap;
  gap: 24px;
}

/* 4) Страховка от субпиксельного «хвоста» справа на макбуках */
html, body { overflow-x: clip; }  /* clip лучше, чем hidden */


@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}