faq.sass in slow-steps-0.1.12

- old
+ new

@@ -9,23 +9,29 @@
   margin: 2rem auto
   border-radius: 4px
   width: 60%
 
 .faq__question
+  display: flex
+  justify-content: space-between
   width: 100%
   padding: 1rem 0
   background-color: rgba($opd-blue-trust, .2)
   border-radius: 4px
   cursor: pointer
   transition: .2s ease-in-out
 
   &:hover
     background-color: rgba($opd-blue-trust, 1)
 
-  & > *
+  & > .faq__question--title
     padding-left: 1rem
 
+  & > .fas
+    padding-right: 1rem
+    transition: .4s ease-in-out
+
 .faq__answer
   max-height: 0
   overflow: hidden
   transition: .4s ease-in-out
 
@@ -33,5 +39,24 @@
     padding: 1rem
 
 .faq__answer--reveal
   max-height: 1000px
   transition: .6s ease-in-out
+
+.faq__question--reveal
+  & > .fas
+    transform: rotateX(180deg) translateY(.5rem)
+
+.faq__contact
+  width: 100vw
+  background-color: lighten($env-primary, 0%)
+  padding: 4rem 0
+
+  .contact-form
+    width: 95%
+    margin: auto
+    max-width: 600px
+
+.faq__contact--strap
+  text-align: center
+  padding: 4rem 0
+  color: $white