<aside>

/* Hover effect / .button1:hover { background: linear-gradient(135deg, #DDAF99, #A8C7EB); color: #ffffff; / text + icon will both change / transform: scale(0.98); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); } / Click effect */ .button1:active { transform: scale(0.78); }

.button2:hover { background: #6D7890; color: #ffffff; /* text + icon will both change / transform: scale(0.98); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); } / Click effect / .button2:active { transform: scale(0.78); } / Scale effect - slightly grows */ .hover-scale { transition: transform 0.3s ease !important; }

.hover-scale:hover { transform: scale(1.03) !important; } /* Lift effect - moves up slightly */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease !important; }

.hover-lift:hover { transform: translateY(-5px) !important; }

/* Border glow - teal border appears on hover */ .hover-border { transition: border 0.3s ease, box-shadow 0.3s ease !important; }

.hover-border:hover { border: 1px solid #5e82d0 !important; box-shadow: 0 0 15px rgba(23, 163, 154, 0.3) !important; border-radius: 20px !important; } /* Scale effect - slightly grows */ .hover-scale { transition: transform 0.3s ease !important; }

.hover-scale:hover { transform: scale(1.03) !important; }

/* Open/active state - solid background, white text */ .hl-faq .hl-faq-child.active .hl-faq-child-heading, .hl-faq .hl-faq-child.open .hl-faq-child-heading, .hl-faq .faq-separated-child.active .hl-faq-child-heading, .hl-faq .faq-separated-child.open .hl-faq-child-heading { background: #5E82D0 !important; color: #5E82D0 !important; }

/* Hover state - solid background */ .hl-faq .hl-faq-child-heading:hover { background: #5E82D0 !important; color: #FFFFFF !important; }

/* Target text span inside */ .hl-faq .hl-faq-child.active .hl-faq-child-heading span, .hl-faq .hl-faq-child.open .hl-faq-child-heading span, .hl-faq .faq-separated-child.active .hl-faq-child-heading span, .hl-faq .faq-separated-child.open .hl-faq-child-heading span, .hl-faq .hl-faq-child-heading:hover span { color: #ffffff !important; }

</aside>