html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

h1 {
    font-size: 2.5rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 2.2rem;
    }
}
@media (max-width: 767px) {
    h1 {
        font-size: 1.8rem;
    }
}

h2 {
    font-size: 2rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
    h2 {
        font-size: 1.8rem;
    }
}
@media (max-width: 767px) {
    h2 {
        font-size: 1.5rem;
    }
}

h3 {
    font-size: 1.75rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
    h3 {
        font-size: 1.5rem;
    }
}
@media (max-width: 767px) {
    h3 {
        font-size: 1.25rem;
    }
}

.header a span {
    font-size: 1.25rem;
}
@media (min-width: 768px) {
    .header a span {
        font-size: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .header a span {
        font-size: 1.8rem;
    }
}

.pattern-layer-1, .pattern-layer-2 {
    background-image: url('pictures/content/geometric-pattern-light-1.png');
    background-size: cover;
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    opacity: 0.1;
}

.pattern-layer-2 {
    background-image: url('pictures/content/geometric-pattern-light-2.png');
    opacity: 0.05;
    animation-delay: 2s;
}

@keyframes slideX1 {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

@keyframes slideX2 {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

.animate-slide-x-1 {
    animation: slideX1 40s linear infinite;
}

.animate-slide-x-2 {
    animation: slideX2 40s linear infinite;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-text-block {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-tab.active-tab {
    background-color: #2dd4bf;
    color: white;
}
.service-tab.active-tab:hover {
    background-color: #14b8a6;
}

.answer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.answer-content.active {
    max-height: 500px;
}

.full-bio {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.full-bio.active {
    max-height: 200px;
}

.progress-circle {
    transition: stroke-dashoffset 1s ease-out;
}

@media (max-width: 767px) {
    .testimonial-card {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        margin-bottom: 1.5rem;
    }
    .testimonial-card:nth-child(2) {
        margin-left: 0;
    }
    .testimonial-card:nth-child(3) {
        margin-left: 0;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .testimonial-card:nth-child(1) {
        top: 5% !important;
        left: 2% !important;
        transform: rotate(-2deg) !important;
    }
    .testimonial-card:nth-child(2) {
        top: 20% !important;
        left: 25% !important;
        transform: rotate(1deg) !important;
    }
    .testimonial-card:nth-child(3) {
        top: 35% !important;
        right: 2% !important;
        transform: rotate(-1deg) !important;
    }
}/*
 * Base styling for the legal content container.
 * Provides top and horizontal padding for better readability and layout.
 */
.legalFoldBox {
    padding-top: 30px; /* Top padding for the content box */
    padding-left: 20px; /* Left padding for the content box */
    padding-right: 20px; /* Right padding for the content box */
    /* Optional: Add a max-width and margin: auto; if you want to center the content and limit its width */
    /* max-width: 800px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/*
 * Heading styles for h1-h5 within .legalFoldBox.
 * Designed to be distinct but not overly large, with appropriate spacing.
 */
.legalFoldBox h1 {
    font-size: 24px; /* Moderate font size for main headings */
    font-weight: 700; /* Bold font weight */
    line-height: 1.2; /* Compact line height */
    margin-top: 2em; /* Space above the heading */
    margin-bottom: 0.8em; /* Space below the heading */
}

.legalFoldBox h2 {
    font-size: 20px; /* Slightly smaller than h1 */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1.8em;
    margin-bottom: 0.7em;
}

.legalFoldBox h3 {
    font-size: 18px; /* Standard paragraph size, but bolder */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
}

.legalFoldBox h4 {
    font-size: 16px; /* A bit smaller, good for sub-sections */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

.legalFoldBox h5 {
    font-size: 14px; /* Smallest heading, often used for minor details */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1em;
    margin-bottom: 0.4em;
}

/*
 * Paragraph styles within .legalFoldBox.
 * Provides standard font size, line height, and bottom margin for readability.
 */
.legalFoldBox p {
    font-size: 16px; /* Standard readable font size */
    line-height: 1.6; /* Increased line height for better readability */
    margin-bottom: 1em; /* Space between paragraphs */
}

/*
 * Unordered list styles within .legalFoldBox.
 * Sets default bullet type, padding for bullets, and vertical spacing.
 */
.legalFoldBox ul {
    list-style-type: disc; /* Standard disc bullets */
    margin-top: 1em; /* Space above the list */
    margin-bottom: 1em; /* Space below the list */
    padding-left: 25px; /* Indentation for bullet points */
}

/*
 * List item styles within .legalFoldBox.
 * Provides spacing between individual list items and readable line height.
 */
.legalFoldBox li {
    margin-bottom: 0.5em; /* Space between list items */
    line-height: 1.6; /* Line height for list item text */
}


.span-sml{
    right: 20px;
}

.stat-block {
    .relative.w-32.h-32.flex.items-center.justify-center{
        width: 150px !important;
        height: 150px !important;
    }
    .text-4xl{
        font-size: 28px !important;
    }
}