body{ background-color: #bdd7ca;  background-image: url(img/bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center; font-family: 'Arial Black',sans-serif; }
img{ max-width: 100%; }
#faq{ padding: 80px 0 30px; position: relative; }
#faq .twitter{ position: absolute; top: 0; left: 0; width: 17%;  }
#faq .d-flex{ gap: 25px; }
#faq .faqs{ flex: 0 1 calc(100% - 325px); padding-left: 100px; }
.faqs > div + div{ margin-top: 20px; }
#faq .apply-now{ flex: 0 1 300px; margin-top: 100px; }
.faq-title{ max-width: 72%; margin-bottom: 100px; }
.faqs .toggle-faq{ position: relative; z-index: 2; }
.faq-answer{ width: calc(100% - 30px); background-color: #ffffff; border-radius: 10px; box-shadow: 13px 13px 0 rgba(0,0,0,.3); padding:0 30px 0 50px; position: relative; top: -50px; z-index: 1; max-height: 0; overflow: hidden; margin-bottom: 0; transition: max-height .3s ease-in-out, padding .3s ease-in-out, margin .3s ease-in-out; -webkit-transition: max-height .3s ease-in-out, padding .3s ease-in-out, margin .3s ease-in-out; -moz-transition: max-height .3s ease-in-out, padding .3s ease-in-out, margin .3s ease-in-out; }
.faq-item > p:first-of-type{ border-bottom: 5px solid #bdd7ca; padding: 0 0 5px; display: inline-block; }
.faq-item + .faq-item{ margin-top: 15px; }
.faq-answer.open{ padding: 50px 30px 30px 50px; margin-bottom: -40px; max-height: 1000px; }
.faq-answer p:last-of-type{ margin: 0; }
@media only screen and (max-width: 1399px){
    #faq .apply-now{ flex: 0 1 250px; margin-top: 50px; }
    #faq .faqs{ flex: 0 1 calc(100% - 275px); }
    .faq-answer{ width: calc(100% - 15px); }
    .faqs > div + div{ margin-top: 15px; }
}
@media only screen and (max-width: 1199px){
    #faq .apply-now{ flex: 0 1 200px; }
    #faq .faqs{ flex: 0 1 calc(100% - 225px); }
}
@media only screen and (max-width: 991px){
    #faq .apply-now{ flex: 0 1 250px; margin: 0; }
    #faq .faqs{ flex: 0 1 100%; padding-left:0; }
    #faq{ padding: 40px 0 30px; }
    .faq-title{ margin-bottom: 50px; }
}
@media only screen and (max-width: 767px){
    #faq .apply-now{ flex: 0 1 200px; margin: 0; }
    .faq-answer{ top: -30px; padding: 0 20px; }
    .faq-answer.open{ width: calc(100% - 10px); margin-bottom: -20px; padding: 30px 20px 20px 20px; }
    .faq-title{ margin-bottom: 30px; }
}
#pillars{ padding: 30px 0 60px; }
.pillars{ display: flex; gap: 50px; max-width: 90%; margin: 50px auto 0; }
.pillar{ flex: 0 1 calc((100% / 3) - 34px); text-align: center; }
.pillar-image{ padding-top: 100%; position: relative; box-shadow: 10px 10px 0 rgba(0,0,0,.4); overflow: hidden; margin-bottom: 15px; }
.pillar-image > img{ position: absolute; top: 0; left: 0; width: 100%; }
.pillar-image + img{ width: 100%; }
@media only screen and (max-width: 991px){
    #pillars{ padding: 30px 0; }
    .pillars{ gap: 30px; max-width: none; margin: 30px 0 0; }
}
@media only screen and (max-width: 767px){
    .pillars{ flex-wrap: wrap; justify-content: center; }
    .pillar{ flex: 0 1 100%; max-width: 350px; }
}
#testimonials{ padding: 60px 0 70px; }
.testimonials{ margin-top: 60px; }
.testimonials-title{ max-width: 62%; margin-left: 150px; }
.testimonial{ display: flex; align-items: center; gap: 30px; }
.testimonial > img{ width: 160px; }
.testimonial .text{ max-width: calc(100% - 190px); }
.testimonial .text > img{ max-height: 107px; width: auto; }
@media only screen and (max-width: 1199px){
    .testimonial .text > img{ max-height: 85px; }
}
@media only screen and (max-width: 991px){
    #testimonials{ padding: 45px 0; }
    .testimonials-title{ max-width: 80%; margin-left: 0;}
    .testimonials{ margin-top: 45px; }
    .testimonial > img{ width: 120px; }
    .testimonial .text{ max-width: calc(100% - 150px); }
    .testimonial .text > img{ max-height: 62px; }
}
@media only screen and (max-width: 767px){
    #testimonials{ padding: 30px 0; }
    .testimonials{ margin-top: 30px; }
    .testimonial > img{ width: 80px; }
    .testimonial{ flex-wrap: wrap; justify-content: center; gap: 5px; }
    .testimonial .text{ width: 100%; max-width: none; text-align: center; }
    .testimonial .text > img{ max-width: 100%; max-height: 50px; }
    .testimonial + .testimonial{ margin-top: 30px; }
}