* {
    margin: 0;
    padding: 0;
    font-family: 'Kumbh Sans', sans-serif;
    box-sizing: border-box;
}

:root {
    /* Text primary */
    --Very-dark-desaturated: hsl(238, 29%, 16%);
    --Soft-red: hsl(14, 88%, 65%);

    /* Text neutral */
    --Very-dark-grayish: hsl(237, 12%, 33%);
    --Dark-grayish: hsl(240, 6%, 50%);

    /* background gradient */
    --Soft-violet: hsl(273, 75%, 66%);
    --Soft-blue: hsl(240, 73%, 65%);

    /* Divider */
    --Light-grayish: hsl(240, 5%, 91%);
}

.attribution {
      font-size: 11px;
      text-align: center;
      color: #fff;
}

.attribution a {
      color: var(--Soft-red);
}

body {
    background: linear-gradient(hsl(273, 75%, 66%),hsl(240, 73%, 65%));
}

.app {
    max-width: 1440px;
    overflow: hidden;
}

.container {
    max-width: 1000px;
    height: 100vh;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
}

.card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin: 0 auto;
    max-width: 920px;
    width: 100%;
    min-height: 510px;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 20px 25px hsla(238, 29%, 16%, 60%);
}

.card__left {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 50%;
    background: url(images/illustration-woman-online-desktop.svg) no-repeat -78px 60px ,url(images/bg-pattern-desktop.svg) no-repeat -570px -303px ;
}

.card__left .box {
    position: absolute;
    top: 195px;
    left: -92px;
    z-index: 10;
    transition: all .3s ease-in;
}

.card__left .box.show {
    transform: translateX(-40px);
}

.card__left .bg__mobile {
    display: none;
}

.card__left .bg__mobile--pattern {
    display: none;
}

.card__right {
    display: flex;
    height: 100%;
    padding: 70px 95px 70px 0;
    flex-basis: 50%;
    flex-direction: column;
}

.card__right .card__title {
    margin-bottom: 40px;
}

.card__title h1 {
    font-weight: 700;
    color: var(--Very-dark-desaturated);
}

.div__item {
    cursor: pointer;
}

.div__item .item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.div__item span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--Very-dark-desaturated);
}

.div__item:hover span {
    color: var(--Soft-red);
    font-weight: 700;
    transition: all .3s linear;
}

.div__item .content {
    display: none;
    font-size: 12px;
    color: var(--Very-dark-grayish);
    margin-bottom: 15px;
    margin-right: 30px;
    transition: all .3s ease-in;
}

.div__item.show span {
    font-weight: 700;
}

.div__item.show .content.show {
    display: block;
}

.div__item .fas {
    display: block;
    color: var(--Soft-red);
    margin-right: 10px;
    transition: all .3s linear;
}

hr {
    color: var(--Dark-grayish);
    margin-bottom: 15px;
}

hr:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 992px) {
    .container {
        padding: 0 25px;
    }
    
    .card__left {
        background: none;
        bottom: calc(20% + 15px);
    }

    .card__left .bg__mobile {
        display: block;
        transform: translateY(5px) translateX(calc(45% - 15px));
    }

    .card__left .bg__mobile--pattern {
        display: block;
        transform: translateY(65px) translateX(calc(-50% - 15px));
    }

    .card {
        max-width: 325px;
        flex-direction: column;
        padding: 0 20px;
    }

    
    .card__left .box {
        display: none;
    }

    .card__right {
        width: 100%;
        padding: 0;
        transform: translateY(-27%);
    }
    .card__right .card__title {
        text-align: center;
        margin-bottom: 35px;
    }
}