@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --White: hsl(0, 100%, 100%) ;
    --Purple-100: hsl(275, 100%, 97%) ;
    --Purple-600: hsl(292, 16%, 49%) ;
    --Purple-950: hsl(292, 42%, 14%) ;
}
img{
    cursor: pointer;
}
body{
    font-family: "Work Sans", sans-serif;
}

main{
    min-height: 100vh;
}

main section .patter{
    height: 320px;
    background: url(assets/images/background-pattern-desktop.svg) no-repeat center/cover;
}
main section .box{
    background-color: var(--Purple-100);
    height: calc(100vh - 320px);
}

main section .box .faqs{
    background-color: var(--White);
    border-radius: 10px;
    padding: 40px 20px;
    max-width: 750px;
    margin: auto;
    position: relative;
    top: -100px;
}

main section .box .faqs .item{
    margin-bottom: 40px;
}

.faqs .title{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.faqs .title h2{
    font-size: 45px;
    margin-left: 20px;
    letter-spacing: 1.3px;
}
.faqs .item h4{
    font-size: 25px;
}
.faqs .item h4:hover{
    color: var(--Purple-600);
    cursor: pointer;
}

.faqs .title-item{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
}

.faqs .title-item img{
    position: absolute;
    right: 0;
}

.faqs .description{
    display: none;
    transition: .3s;
}


.faqs .item.active img{
    background: url(assets/images/icon-minus.svg);
}
.faqs .item.active .description{
    display: block;
}

@media (max-width:800px){ 
    main section .patter{
        height: 320px;
        background: url(assets/images/background-pattern-mobile.svg) no-repeat center/cover;
    }

    main section .box .faqs{
        padding: 30px 15px;
        max-width: 600px;
    }

    .faqs .item h4{
        font-size: 20px;
    }
}


@media (max-width:400px){ 
    main section .patter{
        height: 320px;
        background: url(assets/images/background-pattern-mobile.svg) no-repeat center/cover;
    }

    main section .box .faqs{
        padding: 10px 5px;
        max-width: 300px;
    }

    .faqs .item h4{
        max-width: 80%;
        font-size: 14px;
    }
}