@import "../scripts/data-download-buy-modal/data-download-buy-modal.css";

.app-wrapper {
    width: 100%;
    margin-top: 70px;
}

.back-to-products-btn {
    display: flex;
    align-items: center;
    font-family: Inter, sans-serif;
    color: var(--green);

}

.back-to-products-btn .back-to-products-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.back-to-products-icon {
    background: url("../../assets/icons/arrow_left_green.svg") center / contain no-repeat;
}

.intro {
    display: flex;
    justify-content: space-between;
    margin-bottom: 64px;
    margin-top: 24px;
}

.left-block, .right-block {
    display: flex;
    flex-direction: column;
}

.page-title {
    font-size: 77px;
    margin: 0 0 24px;
    text-align: start;
    max-width: 688px;
}

.page-description-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    color: var(--dark-60);
    line-height: 140%;
    margin-bottom: 8px;
}

.page-description-wrapper p {
    flex: 0 0 calc(50% - 15px);
}

.page-description-wrapper strong {
    color: var(--dark-100);
}

.request-button, .request-button-border-1, .request-button-border-2, .request-button-content {
    transition: all 0.1s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.request-button {
    height: 336px;
    width: 336px;
    background-color: transparent;
}

.request-button-border-1 {
    width: 256px;
    height: 256px;
    background: var(--green-20);
}

.request-button-border-2 {
    width: 256px;
    height: 256px;
    background: var(--green-40);
}

.request-button-border-1:hover {
    height: 336px;
    width: 336px;
}

.request-button-border-1:hover .request-button-border-2 {
    width: 296px;
    height: 296px;
}

.request-button-border-1:hover .request-button-icon {
    transition: all 0.1s ease;
    width: 64px;
    height: 64px;
}

.request-button-content {
    width: 256px;
    height: 256px;
    background: var(--green);
}

.request-button-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url("../../assets/icons/arrow_small_white.svg") no-repeat center center / cover;
}

.request-button-title {
    color: var(--white);
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.primary-button {
    padding: 10px 8px;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: unset;
}

.dataset-available {
    margin-bottom: 72px;
}

.section-title {
    font-weight: 700;
    font-size: 34px;
    margin-bottom: 32px;
}

.available-datasets-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.available-dataset-card {
    min-height: 337px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    flex: 0 0 calc(33.333% - 20px);
    border-radius: 16px;
    border: 1px solid var(--green);
    background-color: var(--green-5);
}

.dataset-use-cases {
    margin-bottom: 64px;
}

.dataset-use-cases-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 64px 30px;
}

.dataset-use-cases-item {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(33.333% - 20px);
}

.dataset-use-cases-item-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 8px;
}

.dataset-use-cases-item-description {
    color: var(--dark-60);
    line-height: 140%;
    list-style: disc inside;
}

.dataset-use-cases-item-description li {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

.card-title {
    color: var(--dark-100);
    font-family: Inter, sans-serif;
    font-weight: 600;
    line-height: 140%;
    margin-bottom: 8px;
}

.card-description, .card-description-short {
    color: var(--dark-60);
    line-height: 140%;
}

.expand-button {
    display: flex;
    gap: 8px;
    width: fit-content;
    margin: 8px 0;
}

.expand-arrow-icon, .expanded-arrow-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url("../../assets/icons/arrow_left_green.svg") no-repeat center center / cover;
    transform: rotate(-90deg);
}

.expanded-arrow-icon {
    transform: rotate(90deg);
}

.card-description strong, .card-description-short strong {
    color: var(--dark-100);
}

.card-footer .card-controls {
    display: flex;
    gap: 8px;
}

.card-footer .card-controls * {
    flex: 1 1 calc(50% - 16px);
}

.available-dataset-controls {
    display: flex;
    justify-content: center;
    margin: 42px 0;
}

@media screen and (max-width: 1024px) {

    .intro {
        flex-direction: column;
    }

    .left-block {
        margin-bottom: 32px;
    }
}

@media screen and (max-width: 960px) {

    .intro {
        gap: 24px;
    }

    .left-block {
        margin: 0;
    }

    .page-title {
        font-size: 48px;
        margin-bottom: 0;
    }

    .request-button-border-1 {
        height: 336px;
        width: 336px;
    }

    .request-button-border-2 {
        width: 296px;
        height: 296px;
    }

    .page-description-wrapper {
        flex-direction: column;
    }

    .available-datasets-wrapper, .dataset-use-cases-wrapper {
        gap: 16px;
    }

    .available-dataset-card, .dataset-use-cases-item {
        flex: 0 0 calc(50% - 8px);
    }
}

@media screen and (max-width: 590px) {
    .page-title {
        max-width: 343px;
    }

    .right-block {
        align-items: center;
    }

    .available-dataset-card, .dataset-use-cases-item {
        flex: 0 0 100%;
    }

    .card-description, .card-description-short {
        font-size: 14px;
    }
}

.info {
    margin-bottom: 75px;
}

.info-cards-wrapper {
    display: flex;
    gap: 30px;
}

.info-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    padding: 16px;
    flex: 0 0 calc(50% - 15px);
    border-radius: 16px;
    border: 1px solid var(--dark-10);
    min-height: 140px;
}

.icon-wrapper {
    padding: 8px;
    border-radius: 8px;
    background-color: var(--green-5);
}

@media screen and (max-width: 960px) {
    .info-cards-wrapper {
        gap: 16px;
    }

    .info-card {
        flex-basis: calc(50% - 8px);
    }
}

@media screen and (max-width: 430px) {
    .info-cards-wrapper {
        flex-wrap: wrap;
    }

    .info-card {
        flex: 0 0 100%;
    }
}

.alternative {
    margin-bottom: 64px;
}

.alternative-card-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.alternative-card {
    height: 258px;
    flex: 0 0 calc(33.333% - 20px);
    display: flex;
    align-items: center;
    border-radius: 16px;
}

.alternative-card-asia {
    background: url('../../assets/images/asian_datasets.jpg') var(--dark-100) center / cover no-repeat;
}

.alternative-card-us {
    background: url('../../assets/images/us_datasets.jpg') var(--dark-100) center / cover no-repeat;
}

.alternative-card-eu {
    background: url('../../assets/images/eu_datasets.jpg') var(--dark-100) center / cover no-repeat;
}

.alternative-card-ca {
    background: url('../../assets/images/ca_datasets.jpg') var(--dark-100) center / cover no-repeat;
}

.alternative-card-inner-wrapper {
    margin: 0 24px;
}

.alternative-card-title {
    color: var(--white);
    font-size: 34px;
    font-weight: 700;
    line-height: normal;
}

.alternative-card-inner-wrapper a {
    width: 100px;
}

@media screen and (max-width: 960px) {
    .alternative-card-wrapper {
        gap: 16px;
    }

    .alternative-card {
        flex: 0 0 calc(50% - 8px);
    }
}

@media screen and (max-width: 430px) {
    .alternative-card {
        flex: 0 0 100%;
    }
}