.subHero {
    display: flex;
    justify-content: space-evenly;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    margin-top: 3rem;
    padding-bottom: 3rem;
    border-bottom: 2px solid #C6C6C6;
}

.boxText {
    background-color: #E9E6E2;
    padding: 4rem;
    line-height: 150%;
}

.wrapper {
    width: 50%;

}

.quickLinks {
    width: 60%;
    padding-left: 4rem;
    padding-right: 4rem;
}

.quickLinks .links {
    display: flex;
    justify-content: space-evenly;
   
    font-style: italic;
}

.subHero a {
    color: black;
    font-weight: bold;
}

.quickLinks .links a {
    font-weight: unset;
}

h4 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.main h2 {
    margin-left: auto;
    margin-right: auto;
    font-family: Kleisch;
    font-style: italic;
    font-size: 40px;
}

.section {
    margin-top: 8rem;
}

.faqs {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  
}

.main {
    margin-bottom: 15rem;
}

.q {
    display: flex;
    align-items: center;
    background-color: #E9E6E2;
    margin-top: 1.5rem;
    position: relative;
    padding-right: 3rem; /* space for icon */
}

.q::before,
.q::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    width: 18px;
    height: 2px;
    background-color: #0A1A2F;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Horizontal line */
.q::before {
    transform: rotate(0deg);
}

/* Vertical line */
.q::after {
    transform: rotate(90deg);
}

.faq.active .q::before {
    transform: rotate(45deg);
}

.faq.active .q::after {
    transform: rotate(-45deg);
}



.q img {
    padding-left: 1rem;
    padding-top: 0.75rem;
    padding-right: 1rem;
    padding-bottom: 0.75rem;
    height: 1.875rem;
}

.faq .q{
    cursor: pointer;
}

.faqs .a {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
    line-height: 150%;
}

.faq.active .a{
    padding: 1rem;
    background-color: white;
    opacity: 1;
}

.faq.active .q {
    background-color: rgba(134, 186, 222);
    text-decoration: underline black 1px;
    text-underline-offset: 2px; 
}


.faq{
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.faq:has(.q:hover) {
    transform: translateY(-2px);
}

.faq .q:hover p{
    text-decoration: underline black 1px;
    text-underline-offset: 2px; 
}

i {
    font-style: italic;
}

strong {
    font-weight: bold;
}

main .link{
    position: relative;
    display: inline-block;
    color: black;
    text-decoration: none;
}

/* Animated underline */
main .link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;          /* adjust if needed */
    width: 100%;
    height: 1px;
    background: currentColor;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease;
}

/* Hover animation */
main .link:hover::before{
    transform: scaleX(1);
}