@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
/* 1. Use a more-intuitive box-sizing model. */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Remove default margin */
* { margin: 0; }


/* 3. Allow percentage-based heights in the application*/
html, body { height: 100%; }

/* Typographic tweaks! 4. Add accessible line-height 5. Improve text rendering */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

/* 7. Remove built-in form typography styles */
input, button, textarea, select { font: inherit;}

/* 8. Avoid text overflows*/
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }


:root{
    --very-dark-desaturated-blue:hsl(238, 29%, 16%);
    --soft-red:hsl(14, 88%, 65%);
    --very-dark-grayish-blue:hsl(237, 12%, 33%);
    --dark-grayish-blue:hsl(240, 6%, 50%);
    --light-grayish-blue: hsl(240, 5%, 91%);
}

html{
    font-size: 16px;
}
body, .card{
    display: flex;
    flex-direction: column;
}
body{
    font-family: 'Kumbh Sans', sans-serif;
    color:var(--very-dark-desaturated-blue);
    background: linear-gradient(hsl(273, 75%, 66%),hsl(240, 73%, 65%) );
    background-repeat: no-repeat;
    align-items: center;
    justify-items:center;
    position:relative;

}
.card{
    background-color: #fff;
    height:auto;
    width:87.2%;
    padding: 135px 25px 45px 25px;
    border-radius: 23px;
    margin-top:145px;
    overflow: auto;
    z-index: 0;
    box-shadow: 0 50px 50px -20px rgba(53, 18, 122, 49.72%);
}
.card__img{
    width:237px;
    height:210px;
    background-image: url("images/illustration-woman-online-mobile.svg");
    background-repeat:no-repeat;
    background-size:237px 180px;
    background-position:center;
    align-self:center;
    position:absolute;
    top:20px;
    z-index: 2;
}
.shadow{
    background-image: url("images/bg-pattern-mobile.svg");
    background-repeat: no-repeat;
    width:240px;
    height:240px;
    position:absolute;
    top:140px;
    z-index: 1;
}
.card__header{
    font-size: 2rem;
    font-weight: 700;
   text-align: center;
    margin-bottom:20px;
}
.card__question{
    border-bottom: 1px solid var(--light-grayish-blue);
}
.card__accordion{
    width:100%;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border:0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    height:34px;
    margin-top:20px;
    padding:0;
    color:var(--very-dark-desaturated-blue);
}
.card__accordion:hover{
    color:var(--soft-red);
}
.active{
    color:var(--very-dark-desaturated-blue);
    font-weight: 700;
}
.card__accordion__arrow{
padding:8px 0 0 0;
}
.arrow__up{
transform:rotateY(0deg) rotate(180deg);
margin:5px 0 0 0;
}
.card__panel {
    display: none;
   overflow: hidden;
}
.card__panel__text{
    color: var(--dark-grayish-blue);
    font-size: 0.75rem;
    line-height: 1.125rem;
    padding-right: 30px;
}
.box{
    display:none;
}

@media screen and (min-width: 767px){
    .card{
        max-width:500px;
    }
}

@media screen and (min-width: 1440px){
    body{
      flex-direction: row;
      justify-content: center;
      overflow:hidden;
    }

    .box{
        background-image:url("images/illustration-box-desktop.svg");
        background-repeat: no-repeat;
        background-position: center top;
        width:90px;
        height:107px;
        display:block;
        z-index:2;
        position:relative;
        top:10px;
        left:-260px;
    }
    .card{
        max-width: 920px;
        height:509px;
       padding:0px 110px 75px 477px;
       flex-direction: row;
       position:absolute;
       margin:0;

    }
    .card__header{
        text-align: left;
        margin-top:60px;
    }
    .card__right{
        width:100%;
        z-index:3;
    }

    .card__img--lg{
        background-image: url("images/illustration-woman-online-desktop.svg"), url("images/bg-pattern-desktop.svg");
        top:0px;
        left:-310px;
        width:390px;
        height:509px;
        background-size:472px 359px, 964px 944px;
        background-position:center right, center right;
        background-repeat: no-repeat no-repeat;
        position:relative;
        z-index: 1;
    }

    .card__img{
        display:none;
    }
    .shadow{
        display:none;
    }

}