/* SECURITY */

.security {
    padding-top: 60px;
    padding-bottom: 20px;
}

.security__wrapper {
    max-width: 1310px;
    margin: 0 auto;
    padding: 0 15px;
}

.security__content {
    padding: 40px;
    border: 1px solid rgba(18, 18, 18, 0.2);
    display: flex;
}

.security__left {
    width: 300%;
    max-width: 240px;
}

.security__apartment-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-bottom: 52px;
}

.security__button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 413px;
    width: 100%;
    height: 64px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 20px 25px;
    border: 1px solid transparent;
    border-radius: 57px;
    background-color: var(--accent);
    cursor: pointer;
}

.security__main {
    margin-left: 99px;
}

.security__title {
    margin: 0;
    margin-bottom: 24px;
    font-family: "Suisse Int'l";
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 42px;
}

.security__subtitle {
    margin: 0;
    margin-bottom: 32px;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.015em;
}

.security__subtitle > p {
    margin: 0;
}
.security__subtitle span {
    color: var(--main-dark) !important;
}

.security__expand {
    font-size: 10px;
    line-height: 150%;
    letter-spacing: -0.015em;
    color: var(--gray-light);
}

.security__expand-text {
    position: relative;
    padding-bottom: 1px;
}

.security__expand-text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--gray-light);
}

.security__benefits {
    margin: 64px 0 95px 0;
}
.security__benefits-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
}

.security__benefits-item {
    width: 100%;
    padding: 32px;
    box-shadow: 0px 2px 20px rgba(187, 187, 187, 0.15);
}

.security__benefits-icon {
    position: relative;
    top: -20px;
    height: 30px;
    background-repeat: no-repeat;
}

.security__benefits-icon--1 {
    background-image: url("../icons/stopwatch.svg");
}

.security__benefits-icon--2 {
    background-image: url("../icons/additional-equipment.svg");
}

.security__benefits-icon--3 {
    background-image: url("../icons/guarantee-service.svg");
}

.security__benefits-icon--4 {
    background-image: url("../icons/offer.svg");
}

.security__benefits-icon--5 {
    background-image: url("../icons/messanger.svg");
}

.security__benefits-icon--6 {
    background-image: url("../icons/wheel.svg");
}

.security__benefits-title {
    display: block;
    margin-bottom: 22px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: -0.015em;
}

.security__benefits-description {
    margin: 0;
    font-weight: normal;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: -0.015em;
}

/* OFFER */

/* .offers {
    display: grid;
    grid-template-columns: repeat(2, 615px);
    gap: 48px;
} */

.offers__wrapper {
    max-width: 1310px;
    margin: 0 auto;
    padding: 0 15px;
}

.offers__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 615px));
    justify-content: center;
    gap: 48px;
    margin-bottom: 16px;
}

.offers__list-item {
    padding: 40px 72px 40px 40px;
}
.offer__list-item--yellow {
    background-color: #fce500;
}
.offer__list-item--black {
    background-color: #121212;
}

.offer__list-item-title {
    margin: 0;
    margin-bottom: 12px;
    max-width: 400px;
    width: 100%;
    font-weight: 700;
    font-size: 24px;
    line-height: 123%;
    color: #000;
}

.offer__list-item-title--inverse {
    color: var(--accent);
}

.offer__list-item-description {
    max-width: 400px;
    width: 100%;
    margin: 0;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: -0.015em;
}

.offer__list-item-description--inverse {
    color: #fff;
}

.offer__list-item-content {
    margin-bottom: 32px;
}

.offer__list-item-cond {
    display: block;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    color: var(--main-dark);
}
.offer__list-item-cond--inverse {
    display: block;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    color: #fff;
}
.offer__packages {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
}
.offer__packages-item,
.offer__packages-item--inverse-yellow,
.offer__packages-item--inverse {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: var(--main-dark);
}

.offer__packages-item--inverse-yellow {
    color: var(--accent);
}

.offer__packages-item--inverse {
    color: #fff;
}

.offer__packages-item > * {
    margin: 0;
}

.offer__packages-middle-text {
    font-weight: 400;
    font-size: 72px;
    line-height: 93px;
    color: var(--main-dark);
}
.offer__packages-middle-text--inverse {
    color: #fff;
}
.offer__packages-middle-text--inverse-yellow {
    color: var(--accent);
}

.offer__content {
    display: flex;
    justify-content: space-between;
    padding: 50px 84px 37px 65px;
    border: 1px solid #ccc;
    background-color: var(--accent);
}

.offer__main {
    width: 500px;
}

.offer__content--dark {
    background-color: var(--main-dark);
}

.offer__title {
    margin: 0;
    margin-bottom: 24px;
    max-width: 400px;
    font-weight: bold;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: -0.015em;
}

.offer__title--yellow {
    color: var(--accent);
}

.offer__description {
    max-width: 380px;
    margin: 0;
    margin-bottom: 40px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.015em;
}

.offer__buttons {
    display: flex;
    justify-content: space-between;
}

.offer__buttons--mobile {
    display: none;
}

.offer__buttons--desktop {
    display: none;
}

.offer__description--white {
    color: var(--main-light);
}

.offer__side {
    display: flex;
    justify-content: space-between;
    width: 456px;
}

.offer__sale {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.offer__sale-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
    max-width: min-content;
    padding: 4px 32px;
    height: 60px;
    color: var(--accent);
    background-color: var(--main-dark);
}

.offer__sale-banner--dark {
    color: var(--main-dark);
    background-color: var(--accent);
}

.offer__sale-star {
    width: 20px;
    height: 20px;
    background-image: url("../icons/star.svg");
    background-repeat: no-repeat;
}

.offer__sale-star--dark {
    background-image: url("../icons/star--dark.svg");
}

.offer__sale-title {
    margin: 0;
    text-align: center;
    color: unset;
    font-style: normal;
    font-size: 36px;
    font-weight: 700;
    line-height: 47px;
    padding: 0 8px;
    letter-spacing: -0.015em;
}

.offer__sale-title-inverse {
    color: #121212;
}

.offer__sale-condition {
    margin: 0;
    margin-bottom: 54px;
    font-weight: 300;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.015em;
}

.offer__sale-condition--dark {
    color: var(--accent);
}

.offer__price {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.offer__price-top-description--yellow,
.offer__price-bottom-description--yellow {
    color: var(--accent);
}

.offer__price-title {
    margin: 0;
    font-weight: 300;
    font-size: 72px;
    line-height: 93px;
    letter-spacing: -0.015em;
}

.offer__price-title--yellow {
    color: var(--accent);
}

.offer__price-title::before,
.offer__price-title::after {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.015em;
}

.offer__equipment {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.offer__equipment-price {
    margin: 0;
    font-weight: 300;
    font-size: 72px;
    line-height: 93px;
    letter-spacing: -0.015em;
    color: var(--accent);
}

.offer__equipment-title {
    color: var(--accent);
}

.offer__button {
    width: 240px;
    padding: 16px 28px;
    font-weight: 700;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 57px;
    background-color: var(--main-dark);
    color: #fff;
    cursor: pointer;
    transition: all 0.4s ease;
}

.offer__button--inverse {
    background-color: #fce500;
    color: var(--main-dark);
}

.offer__button:hover {
    border-color: var(--main-dark);
    background-color: transparent;
    color: var(--main-dark);
}
.offer__button--inverse:hover {
    background-color: transparent;
    border: 2px solid #fce500;
    color: var(--accent);
}

.offer__button-promo {
    background-color: transparent;
    color: #121212;
    border-color: #121212;
    transition: all 0.4s ease;
}

.offer__button-promo--inverse {
    background-color: transparent;
    color: var(--accent);
    border: 2px solid #fce500;
}

.offer__button-promo:hover {
    background-color: #fff;
}

.offer__button-promo--inverse {
    background-color: transparent;
    color: var(--accent);
    border: 2px solid #fce500;
}

.offer__button-promo--inverse:hover {
    background-color: #fff;
    color: var(--main-dark);
    border: 2px solid #fce500;
}

.offer__button--dark {
    border: 1px solid var(--main-dark);
    color: var(--main-dark);
    background-color: var(--accent);
    transition: all 0.4s ease;
}

.offer__button--yellow-border:hover {
    border-color: #fce500;
}

.offer__button--dark:hover {
    background-color: #121212;
    color: #fce500;
}

.offer__button-promo--dark {
    border-color: #fce500;
    background-color: transparent;
    transition: all 0.4s ease;
}

.offer__button-promo--dark:hover {
    background-color: #fce500;
    color: #121212;
}

/* STAR */

.star {
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-image: url("../icons/star-dark32x32.svg");
}

.star--yellow {
    background-image: url("../icons/star-yellow32x32.svg");
}

/* ADDITIONAL INFO */

.additional-info {
    padding: 80px 0;
}
.additional-info__wrapper {
    max-width: 1190px;
    margin: 0 auto;
    padding: 0 15px;
}

.additional-info__title {
    font-weight: 300;
    font-size: 36px;
    line-height: 46px;
    margin: 0 0 55px;
}

.additional-info__description,
.additional-info__subtitle {
    font-weight: 300;
    font-size: 18px;
    line-height: 23px;
    margin: 0 0 29px;
}

.additional-info__description {
    max-height: 120px;
    overflow: hidden;
    transition: all 0.3s ease;
    word-break: break-word;
}

.additional-info__description--expand {
    max-height: 5000px;
    transition: all 1s ease;
}

.additional-info__button {
    background-color: transparent;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    color: #c4c4c4;
    outline: none;
    transition: all 0.4s ease;
}
.additional-info__button:hover {
    color: #121212;
}

/* PRESENTATION */

.presentation {
    padding: 64px 0 56px;
}

.presentation__wrapper {
    max-width: 1310px;
    margin: 0 auto;
    padding: 0 15px;
}

.presentation__content {
    border: 1px solid rgba(18, 18, 18, 0.2);
    padding: 40px 90px 30px 40px;
}

.presentation__media {
    width: 40%;
    margin-right: 30px;
}

.presentation__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.presentation__media--video {
    position: relative;
    width: 40%;
    overflow: hidden;
    height: 240px;
}

.presentation__media iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.presentation__info {
    width: 70%;
}

.presentation__content {
    display: flex;
}

.presentation__title {
    margin: 0;
    margin-bottom: 28px;
    max-width: 558px;
    font-weight: 300;
    font-size: 24px;
    line-height: 31px;
}

.presentation__description {
    margin: 0;
    margin-bottom: 24px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.015em;
    color: var(--gray-light);
}

.presentation__author {
    margin: 0;
}

/* ADVANTAGES */

.advantages {
    padding: 50px 0;
}

.advantages__wrapper {
    max-width: 1190px;
    margin: 0 auto;
    padding: 0 15px;
}

.advantages__list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.advantages__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 200px;
}

.advantages__item-img {
    margin-bottom: 15px;
}

.advantages__item-img:nth-of-type(3) {
    margin-bottom: 0;
}

.advantages__title {
    display: block;
    max-width: 180px;
    margin-bottom: 27px;
    font-size: 18px;
    line-height: 23px;
    text-align: center;
    letter-spacing: -0.015em;
}

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

.advantages__description {
    margin: 0;
    text-align: center;
    font-weight: 300;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    letter-spacing: -0.015em;
}

/* REVIEWS */

.reviews {
    padding-top: 80px;
}

.reviews__wrapper {
    max-width: 1190px;
    padding: 0 15px;
    margin: 0 auto;
}

.reviews__title {
    margin: 0;
    margin-bottom: 80px;
    font-weight: 300;
    font-size: 36px;
    line-height: 47px;
    letter-spacing: -0.015em;
    text-align: center;
}

.reviews__list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.reviews__item {
    width: 560px;
    height: 300px;
    background-color: #c4c4c4;
}

/* FAQ */

.faq {
    padding-bottom: 80px;
}

.faq__wrapper {
    max-width: 1190px;
    padding: 0 15px;
    margin: 0 auto;
}

.faq__title {
    margin: 0;
    margin-bottom: 80px;
    font-weight: 300;
    font-size: 36px;
    line-height: 47px;
    text-align: center;
    letter-spacing: -0.015em;
    text-transform: lowercase;
}

.faq__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.faq__card {
    height: 300px;
    max-width: 560px;
    border: 1px solid rgba(18, 18, 18, 0.2);
    box-sizing: border-box;
}

.faq__card--borderless {
    border: 1px solid transparent;
}

.faq__card-content {
    padding: 30px 34px 26px 40px;
}

.faq__card-content--expand {
    z-index: 5;
    width: 100%;
    max-width: 560px !important;
    position: relative;
    min-height: max-content;
    background: white;
    border: 1px solid rgba(18, 18, 18, 0.2);
}

.faq__subtitle {
    margin: 0;
    margin-bottom: 36px;
    position: relative;
}

.faq__description {
    max-height: 120px;
    overflow: hidden;
    transition: all 0.3s ease;
    word-break: break-word;
    margin: 0;
    margin-bottom: 24px;
    color: var(--gray-light);
}
.faq__description--expand {
    max-height: 5000px;
    transition: all 1s ease;
}

.faq__expand {
    background-color: transparent;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    color: #c4c4c4;
    outline: none;
    transition: all 0.4s ease;
}
.faq__expand:hover {
    color: #121212;
}

/* MEDIA QUERIES */

@media screen and (min-width: 991px) and (max-width: 1200px) {
    .offer__content {
        padding: 40px;
    }

    .offer__buttons {
        flex-direction: column;
    }

    .offer__button:first-child {
        margin-bottom: 24px;
    }

    .offer__sale,
    .offer__equipment {
        margin-right: 50px;
    }
}

@media screen and (max-width: 1189px) {
    .reviews__list,
    .faq__cards {
        justify-content: center;
    }
}

@media screen and (max-width: 991px) {
    .advantages__list {
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
    }

    .advantages__wrapper {
        max-width: 750px;
    }

    .presentation__content {
        padding: 15px;
    }

    .security__content {
        flex-direction: column;
        padding: 24px;
    }

    .security__benefits-list {
        margin: 0 auto;
        margin-top: 40px;
        justify-content: space-evenly;
    }

    .security__main {
        padding-top: 20px;
        margin: 0;
    }

    .security__left {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    .security__apartment-img {
        margin-bottom: 25px;
    }

    .security__title {
        margin-bottom: 18px;
        font-size: 20px;
        text-align: center;
    }

    .security__subtitle {
        text-align: center;
    }

    .security__expand {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .security__benefits-item:nth-child(-n + 3) {
        margin-bottom: 40px;
    }

    .security__benefits-icon {
        display: none;
    }

    .security__button {
        padding: 15px 25px;
    }

    /* OFFER */

    .offer__content {
        display: none;
    }

    .tariff__item {
        display: block;
    }

    .offer__main {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .offer__title {
        font-size: 16px;
    }

    .offer__description {
        margin-bottom: 24px;
        text-align: center;
    }

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

    .offer__buttons--mobile {
        display: flex;
    }

    .offer__button-promo--mobile {
        display: none;
    }

    .offer__buttons--none {
        display: none;
    }

    .offer__side {
        flex-direction: column;
        justify-content: center;
    }

    .offer__sale {
        margin: 0;
        margin-top: 32px;
        align-items: center;
    }

    .offer__sale-banner {
        max-width: 240px;
        width: 100%;
        height: max-content;
    }

    .offer__sale-condition {
        margin-bottom: 32px;
    }

    .offer__price-wrapper,
    .offer__equipment-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 24px;
    }

    .offer__equipment {
        margin: 0;
    }

    .star {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    /* FAQ */

    .faq__title {
        margin-bottom: 40px;
        font-size: 20px;
    }

    .faq__title::before {
        content: "";
        display: none;
    }

    .faq__subtitle {
        margin-bottom: 18px;
        font-size: 16px;
    }

    .faq__description {
        max-width: 400px;
    }

    .faq__cards {
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .faq__card-content {
        padding: 16px;
    }

    /* REVIEWS */

    .reviews__title {
        font-size: 20px;
        margin-bottom: 40px;
    }

    /* ADVANTAGES */

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

    /* PRESENTATION */

    .presentation__content {
        padding: 0;
        align-items: center;
        flex-direction: column;
    }

    .presentation__locker {
        margin: 0;
        margin-bottom: 24px;
        min-width: 260px;
        height: 260px;
    }

    .presentation__title {
        font-size: 20px;
    }

    .presentation__info {
        width: 90%;
        padding: 10px;
    }

    .presentation__media {
        width: 100%;
        margin-right: 0;
    }

    .presentation__media--video {
        padding-top: 50%;
    }

    /* SECURITY */

    .security__main {
        padding-top: 20px;
        margin: 0;
    }

    .security__left {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    .security__apartment-img {
        margin-bottom: 25px;
    }

    .security__title {
        margin-bottom: 18px;
        font-size: 20px;
        text-align: center;
    }

    .security__subtitle {
        text-align: center;
    }

    .security__expand {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .security__benefits-item:not(:last-child) {
        margin-bottom: 40px;
    }

    .security__benefits-icon {
        display: none;
    }

    .security__button {
        padding: 15px 25px;
    }

    /* ADDITIONAL INFO */
    .additional-info__title {
        font-size: 18px;
        line-height: 23px;
    }
}

@media screen and (max-width: 550px) {
    .offer__sale-title {
        font-size: 24px;
    }
    .offer__sale-banner {
        max-width: 150px;
        justify-content: center;
    }
}
@media screen and (max-width: 420px) {
    .offers__list-item {
        padding: 24px 16px;
    }
    .offer__packages-middle-text {
        font-size: 32px;
        line-height: 36px;
    }
}