@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');

*{
    padding: 0;
    margin: 0;
}

body{
    background: linear-gradient(hsl(273, 75%, 66%), hsl(240, 73%, 65%));
    background-repeat: no-repeat;
    color: hsl(240, 6%, 50%);
    font-family: 'Kumbh Sans', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

main{
    background: url("images/bg-pattern-desktop.svg") no-repeat;
    background-position: top 72% left 690%;
    background-color: white;
    display: flex;
    border-radius: 20px 20px;
    padding: 6%
}

.imgBox{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-left: 50%
}

.womanBG{
    position: absolute;
    right: 16%;
    bottom: 0;
    overflow: hidden
}

.womanBG img{ margin-left:-87px }

.boxBG{
    position: absolute;
    right: 98.4%;
    bottom: 13%
}

.FAQBox{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    row-gap: 25px
}

.title h1{
    color: hsl(238, 29%, 16%);
    font-size: 30px;
    margin-top: -10%
}

.question_container{
    display: flex;
    flex-direction: column;
    padding-bottom: 6%;
    border-bottom: solid 1px;
    color: hsl(240, 5%, 63%)
}

.question_container img{
    width: 4.2%;
    height: 50%;
    padding-top: 1%
}

input:checked + label img{
    transition: all 0.30s ease-in-out;
    transform: rotate(180deg)
}

input + label img{ transition: all 0.25s ease-in-out }

.content .inner{
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.30s ease-in-out
}

input:checked + label + .content .inner {
    height: auto;
    opacity: 1;
    margin-top: 3%
}

input:checked + label{ color : hsl(237, 12%, 33%) }

.FAQBox label{
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 13px;
    color: hsl(240, 6%, 50%)
}

.FAQBox label:hover{
    color: hsl(14, 88%, 65%);
    cursor: pointer
}

input[type=checkbox]{ display: none }

footer { 
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    color: hsl(238, 29%, 16%)
}

footer a { color: hsl(228, 45%, 44%) }

@media screen and (max-width: 1440px){
    .womanBG img{ margin-left:-93px }

    .boxBG{ right: 96.5% }
}

@media screen and (max-width: 376px){
    main{
        background: url("images/bg-pattern-mobile.svg") no-repeat;
        flex-direction: column;
        background-color: white;
        background-position: top 0 left 50%;
        padding-bottom: 10%;
        margin: 7%;
    }

    .boxBG, .imgBox .womanBG {opacity: 0}

    .imgBox::before{ 
        padding: 0;
        content: url("images/illustration-woman-online-mobile.svg");
        width: 172%;
        padding-bottom: 55%;
        margin-top: -93%;
        margin-right: 100%;
    }

    .title h1{ text-align: center }

}