:root {
    --primary-text-color-blue:hsl(238, 29%, 16%); 
    --primary-text-color-red: hsl(14, 88%, 65%);
    --neutral-very-dark-text: hsl(237, 12%, 33%);
    --neutral-dark-text: hsl(240, 6%, 50%);
    --bg-gradient-violet: hsl(273, 75%, 66%);
    --bg-gradient-blue: hsl(240, 73%, 65%);
    --divider:hsl(240, 5%, 91%);

    --ff-kumbh-sans: 'Kumbh Sans', sans-serif;
    --fs-body: 12px;

}

/* -------------RESET---------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    display: block; /* max-width:100%;*/
}

/* -------------BODY---------------- */

body{
    display: grid;
    place-items: center;
    
    height: 100vh;
    padding-inline: 1rem;

    font-family: var(--ff-kumbh-sans);
    font-size: var(--fs-body);
    color: var(--primary-text-color-blue);
    background: linear-gradient(
       var(--bg-gradient-violet),
        var(--bg-gradient-blue)
        );
    }

.illustration {
    position: relative;
}    

.illustration-woman {
    position: absolute;
    top: -100%;
    left:-1.5rem;
}

.illustration-desktop {
    display: none;
}

/* --------------ACCORDIAN--------------- */
.accordion {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;

    margin-top: 5rem;
    padding: 0 1rem 1.75rem 1rem;
    max-width: 60rem;
    min-width: 19.75rem;

    background-color: #fff; 
    border-radius: 2rem;
}


@media (min-width:1098px) {

    .illustration {
        display: none;
    }

    .illustration-desktop{
        position: relative;
        display: block;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }

    .illustration-woman-desktop {
        position: absolute;
        left: -5rem;
        top: 0;
        height: 100%;
        overflow: hidden;
        
    }

    .illustraion-box-desktop {
        display: block;
        position: absolute;
        z-index: 1;
        top: 13rem;
        left: -6rem;
    }

    .accordion {
        flex-direction: row;
        gap: 5em;

        margin: 0;
        height: 32rem;
        padding: 5rem 5rem 5rem 0;
        background-image: url("images/bg-pattern-desktop.svg");
        background-size: 65%;
        background-repeat: no-repeat;
        background-position-x: -15rem;
        background-position-y: -3rem;
    }

    .faq {
        width: 50%;
        align-items: flex-start;
    }

    

    
    
   

  

}