@media (min-width: 1601px) and (max-width: 1920px) {
    #principles {
        width: 100vw;
        flex-direction: column;
        align-items: center;
    }

    .principles__container{
        margin-left: 0;
    }
}

@media (max-width: 1500px) {
    .feather--5 {
        display: none;
    }
}

@media (max-width: 1300px) {
    .first-step__link--sign::before {
        content: none;
    }

    .first-step__curve-line {
        display: none;
    }

    .pricing__card {
        max-height: 470px;
    }

    .pricing__options {
        gap: 20px;
    }

    .pricing__card--pack {
        max-height: 600px;
    }

    .pricing__options {
        flex-direction: column;
    }

    .pack--description {
        margin-bottom: 30px;
    }

    .pack--options {
        gap: 20px;
    }

    .feather--7 {
        display: none;
    }

    .feather--mobile7 {
        display: block;
        margin-top: -32%;
        left: 42%;
        width: 60%;
        height: auto;
        min-width: 130px;
    }

    .feather--9 {
       display: none;
    }
}

@media (min-width: 375px) and (max-width: 1024px) {
    .nav-list {
        width: 100vw;
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    .hero__sideList {
        top: 80.03%;
        right: 0;
        width: 100vw;
        justify-content: center;
        flex-direction: row;
        height: 30px;
        gap: 9%;
    }

    .sideList__item {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
        padding: 3px 17px;
    }

    .hero__link-wrapper {
        top: 92%;
        left: 0;
        display: flex;
        width: 100vw;
        justify-content: center;
    }

    .item--1 {
        order: 1;
    }

    .item--2 {
        order: 2;
    }

    .item--3 {
        order: 3;
    }

    .hero__feather2-5 {
        display: none;
    }

    .about__container {
        flex-direction: column;
        justify-content: center;
        gap: 40px;
    }

    .about__title {
        margin-left: 33%;
    }

    .about__left {
        width: 100%;
    }

    .about__right {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .about__photo {
        width: 50%;
        min-width: 276px;
        height: auto;
    }

    .intro--1 {
        margin-bottom: 24px;
    }

    .about__question {
        margin-left: 6.49%;
    }

    .about__question--second {
        max-width: fit-content;
        align-self: flex-start;
        margin-bottom: 24px;
    }

    .feather--4 {
        display: none;
    }

    .about__line {
        display: none;
    }

    .about__curve-line {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .whyme__content {
        grid-template-columns: repeat(2, clamp(220px, 31.37vw, 356px));
        grid-template-rows: repeat(11, 107px);
        grid-template-areas:
            "item1 item2"
            "item3 item4"
            "faces item5"
            "faces item6"
            "item7 item8"
            "item9 item10"
            "item11 item12"
            "bird item13"
            "bird item14"
            "item15 item16"
            "hands hands";
    }

    .whyme__hands img {
        width: 100%;
    }

    .whyme__bird {
        display: flex;
        justify-content: center;
    }

    .whyme__bird img {
        width: 246px;
        height: auto;
    }

    .whyme__feather6 {
        display: none;
    }

    .first-step__link-wrapper {
        top: 87%;
        right: 0;
        display: flex;
        width: 100vw;
        justify-content: center;
    }

    .first-step__link--sign {
        z-index: 5;
        border: 1px solid var(--light-green-color);
    }

    .pricing__container {
        margin: 0;
        width: 100vw;
        align-items: center;
    }

    .pricing__title {
        margin-left: 0;
    }

    .pricing__cards {
        gap: 20px;
        margin-bottom: 0px;
    }

    .principles__container {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        width: 100vw;
    }

    .principles__title {
        margin-left: 0;
        margin-bottom: 45px;
    }

    .principles__items {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        margin-bottom: 40px;
    }

    .principles__item {
        width: clamp(343px, 65.72vw, 673px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .principles__description {
        text-align: center;
        max-width: fit-content;
    }

    .item--second {
        border-bottom: 0;
    }

    .item--third {
        margin-top: 0;
    }

    .faq__container {
        margin-left: 0;
        align-items: center;
    }

    .faq__title {
        margin-left: 0;
    }

    .mobile-break {
        display: none;
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    .hero__sideList {
        gap: 8%;
    }

    .whyme__card-description {
        font-size: 14px;
    }

    .first-step__container {
        margin-left: 10%;
    }

    .first-step__description {
        max-width: 420px;
        gap: 25px;
    }
}


@media (max-width: 768px) {
    .feather--1,
    .feather--3 {
        display: none;
    }

    .feather--mobile1 {
        display: block;
    }

    .pricing__curve-line {
        display: none;
    }

    .pricing__cards {
        flex-direction: column;
        gap: 40px;
    }

    .pricing__card--pack {
        margin-top: 0;
    }

    .pricing__duration {
        position: absolute;
        top: 22px;
        right: 24px;
    }

    .faq__title {
        margin-left: 0;
    }

    .mobile-break {
        display: block;
    }
    .footer__links {
        flex-direction: column;
    }

    .footer__initials {
        top: 24px;
    }
    .footer__lastName,
    .footer__firstName {
        font-size: 47px;
    }

    .footer__firstName {
        top: 42%;
    }

    .footer__links {
        margin-top: 170px;
        margin-bottom: 46px;
        gap: 16px;
        align-items: center;
    }
    .footer__link {
        min-height: 31px;
        border-right: 0;
        padding: 0;
        font-size: 23px;
    }

    .footer__link-rights {
        order: 4;
        font-size: 14px;
    }
}

@media (min-width: 375px) and (max-width: 480px) {
    .navbar,
    .overlay {
        display: none;
    }

    .navbar__modal,
    .overlay {
        display: block;
        visibility: hidden;
        opacity: 0;
        position: fixed;
    }

    .navbar__modal.active,
    .overlay.active {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .overlay {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        z-index: 6;
    }

    .navbar__modal {
        top: 0;
        left: 0;
        width: 61.6%;
        height: 100vh;
        z-index: 10;
        display: flex;
        flex-direction: column;
        background-color: var(--light-green-color);
    }

    .navbar__close {
        position: absolute;
        top: 14px;
        left: 6.49%;
        background-color: transparent;
        border: 0;
        width: 4.53%;
        height: 2.61%;
    }

    .navbar__modal-initials {
        position: absolute;
        top: 31px;
        left: 15.58%;
        width: 170px;
        height: 78px;
    }

    .navbar__modal-lastName,
    .navbar__modal-firstName {
        font-size: 33px;
    }

    .navbar__modal-lastName {
        position: absolute;
        left: 32.94%;
    }

    .navbar__modal-firstName {
        position: absolute;
        top: 37%;
    }
    .navbar__modal-list {
        position: absolute;
        top: 20.89%;
        left: 8.66%;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .navbar__modal-link {
        font-size: 14px;
        color: var(--white-color);
    }

    .navbar__modal-link:active {
        color: var(--white-color);
    }

    .navbar__modal-socials {
        position: absolute;
        bottom: 32px;
        left: 8.66%;
        display: flex;
        flex-direction: row;
        gap: 19px;
        align-items: center;
    }
    .hero {
        background-image: url(../img/hero-mobile.png);
    }

    .header {
        left: 4.43%;
    }

    .header__burger-menu {
        display: block;
    }

    .navbar {
        display: none;
    }

    .hero__sideList {
        gap: 3%;
    }

    .about__container {
        flex-direction: column;
        margin-left: 16px;
        margin-right: 16px;
    }

    .about__title {
        text-align: left;
        margin-bottom: 12px;
    }

    .about__intro,
    .about__question {
        margin-left: 0;
    }

    .about__question--second {
        text-align: right;
        width: 251px;
        align-self: flex-end;
    }

    #whyme {
        align-items: flex-start;
    }

    .whyme__title {
        margin-left: 16px;
        margin-bottom: 12px;
    }

    .whyme__content {
        margin: 0 10px 24px 10px;
        width: 96%;
        gap: 12px;
        grid-template-rows: repeat(14, 103px);
        grid-template-columns: 1fr;
        grid-template-areas:
            "item1"
            "item2"
            "item3"
            "faces"
            "faces"
            "item4"
            "item5"
            "item6"
            "bird"
            "bird"
            "bird"
            "item7"
            "item8"
            "item9"
            "item10";
    }

    .whyme__card-description {
        font-size: 16px;
        margin: 30px 80px 30px 20px;
        width: fit-content;
    }

    .feather--5,
    .feather--6 {
        display: none;
    }

    .whyme__bird {
        margin: 15px 7px;
    }

    .whyme__hands {
        display: none;
    }

    .whyme__bird img {
        width: 341px;
        height: auto;
    }

    .whyme__card.hidden {
        display: none;
    }

    .toggleCards {
        display: block;
        align-self: center;
        margin-bottom: 40px;
        border: 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--light-green-color);
        background-color: transparent;
    }

    .first-step__container {
        margin-left: 10px;
        margin-right: 10px;
    }

    .first-step__title {
        margin-bottom: 16px;
        max-width: 298px;
    }

    .first-step__title,
    .first-step__description {
        margin-left: 22px;
    }

    .first-step__description {
        gap: 20px;
    }

    .first-step__links {
        gap: 15px;
        margin-bottom: 201px;
    }

    .first-step__background-image {
        bottom: 15%;
    }

    .first-step__link-wrapper {
        top: 90%;
    }

    .pricing__title {
        margin-left: 16px;
    }

    .pricing__cards {
        gap: 16px;
        margin: 0 10px;
    }

    .pricing__card {
        width: 100%;
    }

    .faq__container {
        width: 96%;
        align-items: flex-start;
        margin-left: 10px;
    }

    .faq__title {
        margin-left: 6px;
        max-width: 325px;
    }

    .faq__questions {
        align-self: start;
        width: 100%;
    }

    .mobile-break {
        display: none;
    }

    .faq__question-button {
        width: 24px;
        height: 24px;
    }
    
    .principles__container {
        display: flex;
        align-items: flex-start;
        margin-left: 0;
    }

    .principles__title {
        margin-left: 16px;
        margin-bottom: 30px;
    }
    .principles__items {
        width: 100%;
        gap: 32px;
        margin: 0;
        margin-bottom: 40px;
        align-items: flex-start;
    }

    .principles__item {
        width: 100%;
        align-items: flex-start;
    }

    .principles__number,
    .principles__subtitle,
    .principles__description {
        margin-left: 16px;
    }

    .principles__description {
        text-align: left;
        width: 91.47%;
    }

    .principles__img-wrapper {
        width: 100%;
        height: auto;
    }

    .feather--8 {
        top: 14px;
        left: 0;
    }

    .feather--9 {
        display: block;
        top: 107px;
        left:  69.07%;
    }
}