*{
    box-sizing:border-box;

}
#wrapper{
    background-color: rgba(82,42,111,1.0);
    max-width: 1400px;
    height:auto;
    margin:auto;
}

.intro{
    background-color: #aa76cc;
    margin: 20px auto;
    width:100%;
    height: auto;
    padding: 20px;
}

.intro p{
    width:80%;
}

.faq-container{
    max-width:600px;
    margin:auto;
}

.faq-container h1{
    text-align:center;
}

.faq-item{
    background-color:#fff;
    border-radius:8px;
    margin-bottom:10px;
    box-shadow:0 2px 5px rgba(128,128,128,0.62);
    overflow:hidden;
}

.faq-question{
    padding:15px;
    cursor:pointer;
    font-weight:bold;
    background-color:rgb(190,190,190);
    position:relative;
}

.faq-question:after{
    content:'+';
    position:absolute;
    right:20px ;
    transition:transform 0.3s ease;
}

.faq-item.active .faq-question::after{
    content:'-';
}

.faq-answer{
    max-height:0;
    overflow: hidden;
    padding:0px 15px;
    background-color:#fff;
    transition:max-height 0.3s ease, padding 0.3s ease;
}

.main{
    width:100%;
    padding:10px;
    margin:auto;
}

.faq-item.active .faq-answer{
    max-height:400px;
    padding:15px;
}

p{
    width:70;
    margin:auto;
}

h2{
    color:#f0e6f9;
}

h1{
    text-align: center;
}

.btn-main{
    border-style:none;
    color: #ffff;
    background-color:#F29CB7;
    padding:10px 30px;
    border-radius:10px;
}

/*milestone 5*/