#faqs {margin: 0; padding: 100px 0; background: #fff;}
#faqs h2 {margin: 0; padding: 0 0 50px 0; font-weight: 800; font-size: 54px; line-height: 70px; text-align: center; background: linear-gradient(90deg, #43089a, purple, purple, cyan); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: faqGradientText 4s ease infinite;}
#faqs .set {position: relative; width: 100%; height: auto; background: #fff; box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.05); border-radius: 11px; margin-bottom: 30px;}
#faqs .set > a {text-decoration: none; font-weight: 400; font-size: 22px; color: #393939; display: flex; align-items: center; flex-wrap: wrap; padding: 15px 50px 15px 30px; transition: all 0.2s linear; position: relative;}
#faqs .set > a i {position: absolute; top: 15px; font-size: 30px; color: #393939; right: 15px; transition: all ease-in-out 0.3s;}
#faqs .set > a i.opened {transform: rotate(45deg);}
#faqs .set .content {display: none;}
#faqs .set .content p {padding: 0 50px 15px 30px; margin: 0; font-weight: 400; font-size: 18px; line-height: 30px; color: #494949;}

@keyframes faqGradientText {
    0% {background-position: 0% 50%;}
    25% {background-position: 100% 50%;}
    75% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 767px) {
    #faqs {padding: 80px 0;}
    #faqs h2 {padding: 0 0 30px 0; font-size: 42px; line-height: 52px;}
    #faqs .set > a {font-size: 16px; font-weight: 600; padding: 12px 50px 12px 20px;}
    #faqs .set .content p {padding: 0 20px 15px 20px; font-size: 16px;}
    #faqs .set {margin-bottom: 20px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #faqs h2 {padding: 0 0 30px 0; font-size: 42px; line-height: 52px;}
    #faqs .set > a {font-weight: 500; font-size: 20px;}
    #faqs .set .content p {padding: 0 30px 15px 30px; font-size: 16px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #faqs h2 {padding: 0 0 30px 0; font-size: 42px; line-height: 52px;}
    #faqs .set > a {font-weight: 500; font-size: 20px;}
    #faqs .set .content p {padding: 0 30px 15px 30px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #faqs {padding: 60px 0;}
    #faqs h2 {padding: 0 0 30px 0; font-size: 32px; line-height: 42px;}
    #faqs .set > a {font-size: 16px;}
    #faqs .set .content p {padding: 0 50px 10px 20px; font-size: 14px; line-height: 22px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    #faqs h2 {padding: 0 0 30px 0; font-size: 40px; line-height: 50px;}
    #faqs .set > a {font-size: 18px; padding: 12px 50px 12px 26px;}
    #faqs .set .content p {padding: 0 50px 12px 26px; font-size: 15px; line-height: 25px;}
}