@import "fonts.css";
@import "reset.css";
@import "global.css";
@import "header.css";
@import "footer.css";

.about__inner {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    position: relative;
}

.about__bg {
    position: absolute;
    max-width: 100%;
    top: -3%;
    left: 31.5%;
    z-index: -1;
}

.about__title {
    font-weight: 600;
    font-size: 120px;
    margin-bottom: 17px;
    display: flex;
    gap: 30px;
    align-items: center;
}

.about__title span {
    color: var(--color-accent);
}

.about__story {
    width: 468px;
    margin-bottom: 40px;
}

.about__mission {
    width: 468px;
}

.about__story h4,
.about__mission h4 {
    font-weight: 500;
    font-size: 30px;
    margin-bottom: 10px;
}

.about__story p,
.about__mission p {
    font-family: var(--second-family);
    line-height: 1.69;
    color: var(--bg-color-gray);
}

.about__mission {
    margin-bottom: 135px;
}

.swiper {
    width: 100%;
    padding-left: 13.5%;
    height: 769px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.swiper-slide {
    position: relative;
}

.swiper-slide>img {
    max-width: 476px;
}

.swiper__info {
    position: absolute;
    top: 31%;
    left: -35%;
    font-weight: 500;
    font-size: 30px;
    color: var(--bg-color-dark);
}

.swiper_info-top {
    background: var(--color-light);
    width: 176px;
    height: 142px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.swiper__info-product {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.69;
    color: var(--bg-color-gray);
}

.swiper__info-product--color {
    color: var(--bg-color-dark);
}

.swiper__info-bottom {
    background: var(--color-accent);
    width: 176px;
    height: 142px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.swiper__icon {
    width: 158px;
    height: 158px;
    background: var(--color-accent);
    border-radius: 50%;
    position: absolute;
    right: -9%;
    top: 12%;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper__icon::after {
    content: "";
    position: absolute;
    width: 174px;
    height: 174px;
    background: url("../img/icons/icon-protein-text.svg") no-repeat center/contain;
}

.swiper__icon-protein {
    position: relative;
    width: 60px;
    height: 60px;
}

.swiper__icon-text {
    width: 100%;
}

.swiper-pagination {
    position: absolute;
    right: 30px;
    top: 36%;
    display: flex;
    flex-direction: column;
    gap: 54px;
}

.swiper-pagination-bullet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    cursor: pointer;
    background: var(--color-light);
    color: transparent;
    border-radius: 50%;
}

.swiper-pagination-bullet-active {
    background: var(--bg-color-dark);
    opacity: 1;
    color: var(--color-light);
    transform: scale(1.1);
    transition: var(--transition);
    font-weight: 400;
    font-size: 21px;
}

.swiper-pagination-bullet-active::after {
    content: "";
    position: absolute;
    width: 74px;
    height: 74px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 5px solid #f47521;

    transition: var(--transition);
}

/* ================================================== */
.products__inner {
    background: var(--bg-light);
    position: relative;
    overflow: hidden;
}

.products__inner-title {
    position: absolute;
    white-space: nowrap;
    top: 83px;
    left: -1.2%;
    right: -3.2%;
    display: flex;
    gap: 82px;
    font-size: 100px;
    color: #000;
}

.products__title {
    position: relative;
}

.products__title+.products__title::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--color-accent);
    border-radius: 50%;
    position: absolute;
    left: -15%;
    top: 50%;
    transform: translateY(-50%);
}

.products__grid {
    background: var(--bg-color-dark);
    margin-top: 267px;
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(3, 1fr);
}

.products__img {
    overflow: hidden;
    position: relative;
}

.products__img img {
    display: block;
    width: 100%;
    height: auto;
    transition: var(--transition) ease;
}

.products__col:hover .products__img img {
    transform: scale(1.1);
    opacity: 0.7;
}

.products__next {
    height: 144px;
    padding: 10px 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-light);

    transition: var(--transition);
}

.products__col:hover .products__next {
    background: var(--color-accent);
}

.products__next-text {
    font-family: var(--second-family);
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: 0.1em;
    color: var(--bg-color-dark);
    transition: var(--transition);
}

.products__col:hover .products__next-text {
    color: var(--color-light);
}

.products__next-arrow path {
    transition: stroke 0.4s ease;
}

.products__col:hover .products__next-arrow path {
    stroke: var(--color-light);
}

/* ================================================== */
.program__inner {
    padding-top: 103px;
    position: relative;
    overflow: hidden;
}

.program__bg {
    position: absolute;
}

.program__bg-title {
    position: absolute;
    right: -22%;
    top: -4%;
}

.program__about {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin-bottom: 86px;
}

.program__title {
    font-weight: 500;
    font-size: 70px;
}

.program__text {
    font-family: var(--second-family);
    line-height: 1.69;
    max-width: 468px;
    color: var(--bg-color-gray);
    text-align: center;
}

.program__list {
    display: flex;
    gap: 45px;
    justify-content: center;
    margin-bottom: 136px;
}

.program__item {
    border-bottom: 2px solid #7c7c7c;
}

.program__link {
    position: relative;
}

.program__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 8px;
    width: 0;
    background: #f47521;
    transition: width 1.5s ease;
}

.program__link:hover::after {
    width: 100%;
}

.program__img {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.program__img img {
    display: block;
    width: 100%;
    height: auto;
}

.program__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.program__link:hover .program__img::after {
    opacity: 0.5;
}

.program__inner-subtitle {
    display: flex;
    gap: 38px;
    margin-top: 41px;
}

.program__list-subtitle {
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    position: relative;
}

.program__list-subtitle+.program__list-subtitle::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-light);
    border-radius: 50%;
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
}

.program__list-title {
    font-weight: 600;
    font-size: 42px;
    margin-top: 20px;
    padding-bottom: 40px;
}

/* ================================================== */
.quote__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    align-items: stretch;
    position: relative;
}

.quote__icon {
    width: 158px;
    height: 158px;
    background: var(--color-accent);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.quote__icon::after {
    content: "";
    position: absolute;
    width: 174px;
    height: 174px;
    background: url("../img/icons/icon-protein-text.svg") no-repeat center/contain;
}

.quote__icon-protein {
    position: relative;
    width: 60px;
    height: 60px;
}

.quote__col-one {
    height: 100%;
}

.quote__col-two {
    background: url(../img/content/box-2.jpg) 0% 50% / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    overflow: hidden;
    position: relative;
    z-index: 0;
    padding-bottom: 41px;
}

.quote__col-two::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #72320780;
    backdrop-filter: blur(10px);
    z-index: -1;
}

.quote__col-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.quote__col-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quote__col-icon {
    max-width: 100px;
    flex-grow: 0;
    padding-top: 15px;
}

.quote__col-text {
    max-width: 586px;
    font-size: 55px;
    line-height: 80px;
    text-align: center;
    margin-top: 65px;
}

.quote-col-line {
    width: 83px;
    height: 3px;
    background: var(--color-accent);
    margin: 48px 0 65px;
}

.quote__col-autor {
    font-family: var(--second-family);
    font-size: 20px;
    color: #ffffffb3;
    padding-bottom: 11px;
}

.quote__col-autor-name {
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 30px;
}

/* ================================================== */

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

.info__tabs {
    padding-top: 160px;
    padding-bottom: 238px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info__tabs-btn {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-left: 242px;
}

.tab-btn {
    background: transparent;
    transition: var(--transition);
}

.info__tab-btn {
    font-weight: 600;
    font-size: 100px;
    color: #1414144d;
}

.tab-btn.active {
    color: var(--bg-color-dark);
    position: relative;
    z-index: 1;
}

.info__tab-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    transform: translateX(-44%) scale(0.8);
    width: 145px;
    height: 145px;
    background: var(--color-accent);
    border-radius: 50%;
    opacity: 0;

    transition: opacity 0.4s ease, transform 0.4s ease;
}

.info__tab-btn.active::before {
    opacity: 1;
    transform: translateX(-44%) scale(1);
}

.tabs__info-content {
    opacity: 0;
    padding-left: 160px;
    transform: translateY(-30%);
    transition: opacity 0.4s ease, transform 1s ease;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.tabs__info-content.active {
    margin-top: 20px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

.tabs__title {
    font-weight: 500;
    font-size: 30px;
    color: var(--bg-color-dark);
    margin-bottom: 10px;
}

.tabs__text {
    font-family: var(--second-family);
    line-height: 1.69;
    color: var(--bg-color-gray);
    padding-bottom: 50px;
    width: 468px;
}

.tab-content-about:last-child .tabs__text {
    padding-bottom: 0;
}

.info__about-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.info__about-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    height: 480px;
    text-align: center;
}

.info__about-col:last-child {
    border-right: none;
}

.info__about-sum {
    font-weight: 600;
    font-size: 100px;
    color: var(--bg-color-dark);
    margin-bottom: 12px;
}

.info__about-text {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.35;
    color: var(--bg-color-dark);
}

/* ============================================= */
.plan__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.plan__link {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: #303030;
}

.plan__img,
.plan__about {
    flex: 1 1 300px;
    box-sizing: border-box;
}

.plan__img {
    position: relative;
    flex-shrink: 0;
}

.plan__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
}

.plan__img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f47521;
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    z-index: 2;
}

.plan__link:hover .plan__img::before {
    opacity: 0.4;
}

.plan__about {
    width: 100%;
    align-self: center;
    padding-left: 52px;
}

.plan__about-subtitle {
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    padding-bottom: 10px;
}

.plan__about-title {
    font-weight: 500;
    font-size: 42px;
    padding-bottom: 10px;
}

.plan__about-text {
    font-family: var(--second-family);
    line-height: 1.69;
    color: var(--bg-color-gray);
    padding-bottom: 30px;
}

.plan__about-more {
    display: inline-block;
    font-family: var(--second-family);
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: 0.1em;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-accent);
}

/* =============================================== */

.timetable__inner {
    position: relative;
    padding-bottom: 146px;
}

.timetable__bg-bottom {
    position: absolute;
    right: 2%;
    bottom: 0%;
}

.timetable__bg-top {
    position: absolute;
    right: 2%;
    top: -11%;
}

.timetable__title {
    font-weight: 500;
    font-size: 70px;
    text-align: center;
    margin-bottom: 67px;
}

.timetable__tabs-btn {
    display: flex;
    justify-content: center;
    gap: 78px;
    margin-bottom: 62px;
}

.timetable__tab-btn {
    font-weight: 500;
    font-size: 30px;
    color: #ffffff4d;
}

.timetable__tab-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    transform: translateX(-44%) scale(0.8);
    width: 41px;
    height: 41px;
    background: var(--color-accent);
    border-radius: 50%;
    opacity: 0;

    transition: opacity 0.4s ease, transform 0.4s ease;
}

.timetable__tab-btn.active {
    color: var(--color-light);
    position: relative;
    z-index: 1;
}

.timetable__tab-btn.active::before {
    opacity: 1;
    transform: translateX(-44%) scale(1);
}

.tabs__table {
    border-collapse: collapse;
    margin: 0 auto;
    max-width: 1268px;
    width: 100%;
    height: auto;
    table-layout: fixed;
}

.tabs__table tr {
    height: 108.3px;
}

.tabs__table td {
    border: 1px solid #787878;
    padding: 15px;
    width: 12.5%;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    color: #b5b5b5;
}

.tabs__table h5 {
    font-weight: 500;
    color: var(--color-light);
    margin-bottom: 8px;
}

.tabs__table p {
    font-family: var(--second-family);
    font-size: 16px;
    line-height: 1.69;
    color: var(--bg-color-gray);
}

.tabs__table tr:first-child td {
    border-top: none;
}

.tabs__table tr:last-child td {
    border-bottom: none;
}

.tabs__table tr td:first-child {
    border-left: none;
}

.tabs__table tr td:last-child {
    border-right: none;
}

.tabs__timetable-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, height 1s ease, visibility 0.6s ease;
}

.tabs__timetable-content.active {
    height: auto;
    opacity: 1;
    visibility: visible;
}

/* ================================================== */
.center__inner {
    background: var(--bg-light);
}

.center__video {
    position: relative;
}

.center__img-control {
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
.center__img-button img {
    transform: translateX(14%);
}

.center__about {
    max-width: 1210px;
    padding-top: 151px;
    padding-bottom: 212px;
    margin: 0 auto;
    color: var(--bg-color-dark);
}

.center__title {
    font-weight: 500;
    font-size: 70px;
    margin-bottom: 60px;
}

.center__img {
    width: 100%;
}

.accordion-list__item {
    border-top: 1px solid var(--bg-color-dark);
}

.accordion-list__control {
    display: flex;
    justify-content: space-between;
    padding: 30.5px 0;
}

.accordion-list__control-info {
    width: 100%;
    display: flex;
    gap: 111px;
}

.accordion-list__control-icon {
    transition: var(--transition);
}

.accordion-list__control-icon svg {
    transition: var(--transition);
}

.accordion-list__control:hover .accordion-list__control-icon {
    transform: rotate(90deg);
}

.accordion-list__control:hover .accordion-list__control-icon path {
    stroke: var(--color-accent);
}

.accordion-list__item--opened .accordion-list__control-icon {
    transform: rotate(90deg);
}

.accordion-list__item--opened .accordion-list__control-icon path {
    stroke: var(--color-accent);
}

.accordion-list__control-info p {
    font-size: 20px;
}

.accordion-list__control-info h3 {
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 30px;
    line-height: 0.9;
    z-index: 1;
    position: relative;
}

.accordion-list__control h3::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -16px;
    left: -45px;
    width: 59px;
    height: 59px;
    background: var(--color-accent);
    border-radius: 50%;

    opacity: 0;
    transition: var(--transition);
}

.accordion-list__control:hover h3::before {
    opacity: 1;
}

.accordion-list__item--opened .accordion-list__control h3::before {
    opacity: 1;
}

.accordion-list__content {
    max-height: 0;
    overflow: hidden;
    transition: var(--transition);
}

.accordion-content {
    padding: 10px 20px 30px;
    text-align: justify;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.accordion-list__info h4 {
    font-weight: 500;
    font-size: 25px;
    margin-bottom: 15px;
}

.accordion-list__info p {
    font-size: 20px;
}

/* ================================================== */
.pros__inner {
    padding-top: 103px;
    padding-bottom: 136px;
    position: relative;
    overflow: hidden;
}

.pros__bg-text {
    position: absolute;
    top: -5.5%;
    left: -14.5%;
}

.pros__bg {
    position: absolute;
    bottom: -3%;
    right: 5%;
}

.pros__about {
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0 auto 86px;
}

.pros__title {
    font-weight: 500;
    font-size: 70px;
}

.pros__text {
    font-family: var(--second-family);
    line-height: 1.69;
    color: var(--bg-color-gray);
    text-align: center;
}

.pros__list {
    display: flex;
    gap: 34px;
}

.pros__item {
    border-bottom: 2px solid #7c7c7c;
    position: relative;
}

.pros__social {
    width: 60px;
    height: 60px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 5%;
    right: 9%;
    z-index: 1;

    transition: var(--transition);
}

.pros__social:hover {
    box-shadow: 0 6px 15px #00000040;
}

.pros__link {
    position: relative;
}

.pros__item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 8px;
    width: 0%;
    background: #f47521;
    transition: width 1.5s ease;
}

.pros__item:hover::after {
    width: 100%;
}

.pros__link:hover .pros__img::after {
    opacity: 0.5;
}

.pros__img {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 33px;
}

.pros__img img {
    display: block;
    width: 100%;
    height: auto;
}

.pros__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.pros__list-subtitle {
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.pros__list-title {
    font-weight: 600;
    font-size: 32px;
    text-transform: uppercase;
    color: var(--color-light);
    padding-bottom: 32px;
}

/* ================================================== */
.blog__inner {
    padding-top: 185px;
    padding-bottom: 163px;
    background: var(--bg-light);
    display: flex;
    justify-content: end;
    gap: 100px;
    overflow: hidden;
}

.blog__info {
    max-width: 225px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog__title {
    font-weight: 500;
    font-size: 70px;
    color: var(--bg-color-dark);
    /* margin-bottom: 384px; */
}

.button--border {
    border-left: 4px solid var(--bg-color-dark);
}

.content__list {
    display: flex;
    gap: 35px;
    transform: translateX(4.5%);
}

.content__item {
    max-width: 393px;
    border-bottom: 2px solid var(--bg-color-gray);
}

.content__img {
    width: 100%;
    margin-bottom: 37px;
}

.content__blog-info {
    width: 100%;
    font-family: var(--second-family);
    font-weight: 600;
}

.content__data {
    letter-spacing: 0.2em;
    color: #8b8a8a;
    margin-bottom: 10px;
}

.content__blog-title {
    font-size: 24px;
    color: var(--bg-color-dark);
    padding-bottom: 29px;
    max-width: 312px;
}

/* ================================================== */
/* ================================================== */
/* ================================================== */
@media (max-width: 1800px) {
    .header__top {
        padding-top: 40px;
    }

    .header__top-inner {
        padding-bottom: 44.5px;

    }

    .header__logo {
        max-width: 150px;
    }

    .nav__list {
        gap: 3vh 25px;
        font-weight: 400;
        font-size: 18px;
    }

    .hero__arrow {
        width: 100px;
        height: 100px;
        top: -50px;
    }

    .hero__arrow svg {
        width: 50px;
    }

    .hero__list-title {
        font-weight: 500;
        font-size: 30px;
    }

    /* ======================== */
    .main__about {
        padding-top: 100px;
        padding-right: 80px;
        padding-left: 150px;
    }

    .about__title {
        font-size: 100px;
    }

    .about__story,
    .about__mission {
        width: 400px;
    }

    .swiper {
        padding-left: 5%;
    }

    /* ================================= */
    .products__inner-title {
        gap: 60px;
    }

    .products__title+.products__title::before {
        left: -13%;
    }

    /* ================================ */
    .info__tabs-btn {
        padding-left: 200px;
    }

    /* ================================ */
    .blog__inner {
        padding-left: 20px;
    }

    /* ================================ */
    .content__list {
        transform: translateX(3.5%);
    }
}

@media (max-width: 1500px) {
    .main__about {
        padding-right: 25px;
        padding-left: 25px;
    }

    .about__title {
        font-size: 85px;
    }

    .about__story,
    .about__mission {
        width: 350px;
    }

    /* ================================ */
    .products__inner-title {
        top: 50px;
    }

    .products__inner-title {
        font-size: 90px;
        gap: 40px;
    }

    .products__title+.products__title::before {
        left: -10%;
    }

    .products__grid {
        margin-top: 217px;
    }

    /* ================================ */
    .program__inner {
        padding-top: 80px;
    }

    /* ================================ */
    .quote__col-text {
        font-size: 48px;
    }

    .quote__icon {
        width: 140px;
        height: 140px;
    }

    .quote__icon::after {
        width: 164px;
    }

    /* ================================ */

    .info__tabs {
        padding-top: 80px;
        padding-bottom: 100px;
        grid-template-columns: 1fr 1.3fr;
    }

    .info__tabs-btn {
        padding-left: 100px;
    }

    .info__tab-btn {
        font-size: 80px;
    }

    .info__about-col {
        height: 280px;
    }

    .tabs__content {
        align-self: center;
    }

    .tabs__info-content {
        padding-left: 10px;
    }

    .tabs__text {
        width: 90%;
    }

    /* ================================ */
    .plan__about {
        padding-left: 15px;
    }

    .plan__about-title {
        font-size: 30px;
    }

    /* ================================ */
    .timetable__inner {
        padding-bottom: 80px;
    }

    .timetable__bg-top,
    .timetable__bg-bottom {
        display: none
    }

    .tabs__timetable-content {
        max-width: 1270px;
        overflow-x: auto;
    }

    .tabs__table {
        width: max-content;
        border-collapse: collapse;
    }

    /* ================================ */
    .center__about {
        padding-top: 70px;
        padding-bottom: 80px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .pros__inner {
        padding-top: 70px;
        padding-bottom: 90px;
    }

    /* ================================ */
    .blog__inner {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .content__list {
        height: 100%;
    }

    /* ================================ */
    .content__list {
        transform: translateX(0%);
    }
}

@media (max-width: 1200px) {
    .hero__inner {
        padding-top: 50px;
    }

    .hero__title {
        font-weight: 500;
        font-size: 170px;
        margin: 0 auto;
        text-align: center;
    }

    .hero__inner-img {
        display: none;
    }

    .nav {
        position: fixed;
        inset: 0;
        z-index: 10;
        background: var(--bg-color-dark);
        padding: 26vh 15px 30px;
        font-size: 24px;

        transform: translateY(-50%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .nav__list {
        flex-direction: column;
        align-items: center;
    }

    .body--opened-menu .nav {
        transform: translateY(0%);
        opacity: 1;
        visibility: visible;
    }

    .burger-icon {
        display: flex;
    }

    .hero__subtitle {
        font-size: 15px;
    }

    .hero__list-title {
        font-size: 25px;
    }

    .hero__arrow {
        width: 90px;
        height: 90px;
        top: -45px;
    }

    .hero__arrow svg {
        width: 40px;
    }

    .hero__link {
        height: 396px;
        padding: 40px 30px;
    }

    .hero__start {
        bottom: 40px;
    }

    .hero__next {
        bottom: 40px;
        right: 30px;
    }

    /* ================================ */
    .main__about {
        padding-bottom: 80px;
    }

    .about__mission {
        margin-bottom: 70px;
    }

    .swiper {
        height: 500px;
        align-self: center;
    }

    .swiper-slide>img {
        max-width: 350px;
    }

    .swiper__info {
        top: 39%;
        left: -31%;
        font-size: 20px;
    }

    .swiper_info-top,
    .swiper__info-bottom {
        width: 116px;
        height: 82px;
    }

    .swiper__icon {
        width: 100px;
        height: 100px;
    }

    .swiper__icon-protein {
        width: 40px;
    }

    .swiper__icon::after {
        width: 115px;
    }

    .swiper-pagination {
        right: 8px;
    }

    .swiper-pagination-bullet-active::after {
        width: 50px;
        height: 50px;
        border: 3px solid #f47521;
    }

    /* ================================ */
    .program__list {
        margin-bottom: 90px;
        gap: 15px;
    }

    .program__list-subtitle {
        font-size: 18px;
    }

    /* ================================ */
    .quote__icon {
        width: 100px;
        height: 100px;
    }

    .quote__icon::after {
        width: 114px;
    }

    .quote__icon-protein {
        width: 40px;
        height: 40px;
    }

    /* ================================ */
    .info__tab-btn {
        font-size: 60px;
    }

    .info__tab-btn::before {
        width: 100px;
        height: 100px;
    }

    .tabs__text {
        padding-bottom: 20px;
    }

    .info__about-sum {
        font-size: 80px;
    }

    .info__about-text {
        font-size: 16px;
    }

    /* ================================ */
    .main__timetable {
        padding-top: 70px;
    }

    .timetable__tabs-btn {
        gap: 15px 60px;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }

    /* ================================ */
    .pros__bg-text,
    .pros__bg {
        display: none;
    }

    .pros__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .pros__item {
        justify-self: center;
    }
}

@media (max-width: 1000px) {
    .hero__title {
        font-size: 120px;
    }

    .hero__img {
        z-index: -2;
    }

    .hero__list {
        grid-template-columns: none;
    }

    .hero__link {
        height: 280px;
    }

    .hero__info {
        position: relative;
        z-index: 0;
    }

    .hero__arrow {
        width: 80px;
        height: 80px;
        top: -40px;
    }

    /* ================================ */
    .about__inner {
        flex-direction: column;
    }

    .about__bg {
        display: none;
    }

    .about__mission,
    .about__story {
        text-align: center;
        width: 100%;
    }

    .about__story {
        margin-bottom: 20px;
    }

    .about__mission {
        margin-bottom: 30px;
    }

    .about__title {
        font-size: 70px;
        justify-content: center;
        margin-bottom: 30px;
    }

    .button {
        margin: 0 auto;
    }

    .main__about {
        padding-top: 40px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 100px;
    }

    .swiper {
        padding-left: 0%;
    }

    .swiper-pagination {
        right: 50%;
        transform: translateX(50%);
        top: 104%;
        flex-direction: row;
    }

    /* ================================ */
    .products__inner-title {
        display: none;
    }

    .products__grid {
        margin-top: 0px;
        grid-template-columns: none;
    }

    .products__img {
        max-height: 400px;
    }

    .products__img img {
        height: 100%;
        object-fit: cover;
    }

    /* ================================ */
    .program__bg,
    .program__bg-title {
        display: none;
    }

    .program__inner {
        padding-top: 40px;
    }

    .program__about {
        margin-bottom: 46px;
    }

    .program__inner-subtitle {
        gap: 20px;
    }

    .program__list-subtitle {
        font-size: 16px;
    }

    .program__list-subtitle+.program__list-subtitle::before {
        left: -17px;
    }

    .program__list-title {
        font-size: 30px;
    }

    .full-link {
        height: 85px;
    }

    /* ================================ */
    .quote__col-text {
        font-size: 35px;
    }

    .quote__icon {
        display: none;
    }

    /* ================================ */
    .info__tabs-btn {
        padding-left: 50px;
        align-items: center;
        justify-content: center;
    }

    .info__tab-btn {
        font-size: 40px;
    }

    .info__tab-btn::before {
        width: 70px;
        height: 70px;
    }

    .info__tabs-btn {
        gap: 30px;
    }

    .info__about-col {
        height: 180px;
        padding-top: 30px;
        justify-content: start;
    }

    .plan__grid {
        grid-template-columns: none;
    }

    .plan__link:nth-child(2)>.plan__img {
        grid-column: 2/-1;
    }

    .plan__link:nth-child(2)>.plan__about {
        grid-row: 1/2;
    }

    .plan__link:nth-child(3)>.plan__img {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    .plan__link:nth-child(3)>.plan__about {
        grid-column: 2/-1;
    }

    /* ================================ */
    .center__title {
        text-align: center;
    }

    /* ================================ */
    .pros__img {
        width: 100%;
        height: 408px;
    }

    .pros__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* ================================ */
    .blog__inner {
        flex-direction: column;
        gap: 50px;
    }

    .blog__info {
        width: 100%;
        text-align: center;
        gap: 30px;
        margin: 0 auto;
    }

    .blog__inner {
        padding-left: 0px;
    }

    .content__list {
        padding-left: 15px;
        padding-right: 15px;
    }

    .footer__about {
        gap: 50px;
    }
}

@media (max-width: 800px) {
    .header__logo {
        max-width: 140px;
    }

    .header__add {
        gap: 20px;
    }

    .hero__title {
        font-size: 100px;
    }

    .hero__arrow {
        width: 60px;
        height: 60px;
        top: -30px;
    }

    .hero__img {
        display: none;
    }

    .hero__arrow svg {
        width: 30px;
    }

    .hero__link {
        height: 220px;
    }

    .hero__start {
        bottom: 30px;
    }

    .hero__next {
        bottom: 30px;
    }

    .hero__info {
        position: relative;
        z-index: 0;
    }

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

    .hero__arrow {
        z-index: 1;
    }

    /* ================================ */
    .program__list {
        flex-direction: column;
        align-items: center;
    }

    /* ================================ */
    .quote__grid {
        grid-template-columns: none;
    }

    .quote__col-one {
        display: none
    }

    .quote__col-icon {
        padding-top: 50px;
    }

    /* ================================ */
    .info__tabs {
        grid-template-columns: none;
    }

    .info__tabs-btn {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
        padding-left: 0px;
    }

    .info__tab-btn::before {
        width: 50px;
        height: 50px;
    }

    .info__tab-btn {
        font-size: 29px;
    }

    .tabs__title {
        font-size: 20px;
    }

    .tabs__info-content {
    transform: translateY(-3%);
}

    




    .info__about-sum {
        font-size: 60px;
    }

    /* ================================ */
    .center__img-control {
        width: 90px;
        height: 90px;
    }

    .accordion-list__control-info {
        gap: 50px;
    }

    /* ================================ */
    .pros__list-subtitle {
        font-size: 17px;
    }

    /* ================================ */
    .content__img {
        margin-bottom: 22px;
    }

    /* ================================ */
    .footer__top {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer__img {
        width: 200px;
    }

    .footer__top {
        font-size: 34px;
    }

    .footer__item:last-child::after {
        left: -11%;
        top: -37%;
        height: 60px;
        width: 60px;
    }

    .footer__main {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .footer__address {
        text-align: center;
    }

    .address__socials-list {
        justify-content: center;
    }

    .footer__bottom {
        text-align: center;
    }

}

@media (max-width: 600px) {
    .header__top-inner {
        padding-bottom: 40px;
    }

    .hero__inner {
        padding-top: 35px;
    }

    .header__logo {
        max-width: 120px;
    }

    .header__cart svg {
        width: 33px;
        height: 27px;
    }

    .header__search svg {
        width: 23px;
    }

    .header__cart::before {
        left: 23px;
        width: 15px;
        height: 15px;
    }

    .hero__title {
        font-size: 70px;
    }

    /* ================================ */
    .button {
        width: 170px;
        height: 60px;
    }

   /* ================================ */
    .swiper {
        height: 428px;
    }

    .swiper-slide>img {
        max-width: 300px;
    }

    .swiper__info {
        top: 44%;
        left: -25%;
        font-size: 16px;
    }

    .swiper_info-top,
    .swiper__info-bottom {
        width: 80px;
        height: 50px;
    }

    .swiper__info-product {
        font-size: 14px;
    }

    .swiper__icon {
        width: 90px;
        height: 90px;
    }

    .swiper__icon-protein {
        width: 40px;
    }

    .swiper__icon::after {
        width: 100px;
    }

    /* ================================ */
    .products__next {
        height: 100px;
        padding: 10px 20px;
    }

    /* ================================ */
    .program__title {
        text-align: center;
    }

    /* ================================ */
    .info__tabs {
        padding-top: 40px;
    }

    .info__about-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .info__about-col:nth-child(2) {
        border-right: none;
    }

    /* ================================ */
    .plan__about-scroll {
        height: 100px;
        overflow-y: auto;
    }

    .plan__about-subtitle {
        font-size: 16px;
    }

    .plan__about-title {
        font-size: 20px;
    }

    /* ================================ */
    .center__img-control {
        width: 60px;
        height: 60px;
    }

    .center__img-button img {
        width: 25px;
    }

    .accordion-list__info h4 {
        text-align: left;
    }

    /* ================================ */
    .pros__title {
        text-align: center;
    }

    .pros__about {
        margin: 0 auto 40px;
    }
    .pros__list {
        grid-template-columns: none;
    }
    .pros__social {
        width: 40px;
        height: 40px;
        top: 3%;
        right: 4%;
    }

    .pros__list-title {
        font-size: 23px;
        padding-bottom: 20px;
    }

    /* ================================ */
    .content__list {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .content__item {
    max-width: 328px;
    }
    .content__blog-title {
    padding-bottom: 20px;
    }

    /* ================================ */
    .footer__top {
        flex-direction: column;
        gap: 20px;
    }

    .footer__text {
        font-size: 18px;
    }

    .footer__about-info h4 {
        font-size: 30px;
    }

    .footer__about-info p {
        font-size: 18px;
    }

    .footer__copyright {
        font-size: 12px;
    }
}

@media (max-width: 450px) {
    .header__logo {
        max-width: 90px;
    }

    .hero__link {
        padding: 25px 25px;
    }

    .hero__start {
        bottom: 25px;
    }

    .hero__next {
        right: 25px;
        bottom: 25px;
    }

    .hero__subtitle {
        margin-bottom: 10px;
    }

    .hero__list-title {
        font-size: 24px;
    }

    /* ================================ */
    .swiper {
        height: 285px;
    }

    .swiper-slide>img {
        max-width: 200px;
    }

    .swiper__info {
        top: 42%;
        left: -23%;
        font-size: 14px;
    }

    .swiper_info-top,
    .swiper__info-bottom {
        width: 50px;
        height: 42px;
    }

    .swiper__info-product {
        font-size: 10px;
    }

    .swiper__icon {
        width: 70px;
        height: 70px;
    }

    .swiper__icon-protein {
        width: 30px;
    }

    .swiper__icon::after {
        width: 80px;
    }

    /* ================================ */
    .products__next {
        height: 80px;
    }

    .products__next-text {
        font-size: 14px;
    }

    .program__title {
        font-size: 60px;
    }

    .program__list {
        margin-bottom: 50px;
    }

    .full-link {
        font-size: 14px;
        justify-content: space-between;
    }

    /* ================================ */
    .quote__col-icon {
        display: none;
    }

    .quote__col-text {
        font-size: 25px;
    }

    .quote__col-autor {
        font-size: 15px;
    }

    .quote__col-autor-name {
        font-size: 20px;
    }

    /* ================================ */
    .info__tab-btn {
        font-size: 26px;
    }

    .info__tab-btn::before {
        width: 35px;
        height: 35px;
    }

    /* ================================ */
    .plan__about-subtitle,
    .plan__about-text,
    .plan__about-more {
        font-size: 14px;
    }

    .plan__about-title {
        font-size: 16px;

    }

    .plan__about-scroll {
        height: 70px;
    }

    .main__timetable {
        padding-top: 40px;
    }

    /* ================================ */
    .center__about {
        padding-top: 40px;
    }

    .center__img-control {
        width: 50px;
        height: 50px;
    }

    .center__img-button img {
        width: 20px;
    }

    .center__title {
        font-size: 50px;
    }

    .accordion-list__control-info {
        gap: 20px;
    }

    .accordion-list__control-info p {
        font-size: 14px;
    }

    .accordion-list__control-info h3 {
        font-size: 20px;
    }


    .accordion-list__control h3::before {
        width: 40px;
        height: 40px;
        left: -18px;
    }

    .accordion-list__control {
        padding: 20.5px 0;
    }

    /* ================================ */
    .pros__inner {
        padding-top: 40px;
    }

    .pros__list {
        gap: 15px;
    }

    .pros__title {
        font-size: 43px;
    }

    /* ================================ */
    .blog__inner {
        padding-top: 40px;
    }

    .blog__inner {
        gap: 25px;
    }

    .content__img {
        margin-bottom: 13px;
    }
    /* ================================ */
    .footer__top {
        font-size: 25px;
    }

    .footer__img {
        width: 150px;
    }

    .footer__item:last-child::after {
        left: -9%;
        top: -29%;
        height: 40px;
        width: 40px;
    }

    .address__text {
        font-size: 14px;
    }

    .address__mail,
    .address__tel {
        font-size: 28px;
    }

    .footer__about {
        gap: 15px;
    }

    .footer__text {
        font-size: 12px;
    }

    .footer__about-info h4 {
        font-size: 22px;
    }

    .footer__about-info p {
        font-size: 14px;
    }

    .footer__bottom {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .footer__copyright {
        font-size: 9px;
    }
}