/* Screen-reader-only helper */
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.margin-center {
    margin-left: auto!important;
    margin-right: auto!important;
}

.mt-0 {
    margin-top: 0 !important;
}

/* bootstrap flex */

/* Display flex */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flex direction */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Flex wrap */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justify content */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

/* Align items */
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

/* Align self */
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

/* Order */
.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important; }
.order-5 { order: 5 !important; }



img.top-page-rounded {
    border-radius: 40px;
    max-width: 540px;
}

img.features-page-rounded {
    border-radius: 40px;
    max-width: 845px;
    width: 100%;
}

/* Desktop defaults */
/* .hide-on-desktop { display: none; } */

@media (max-width: 768px) {
    .hide-on-mobile { display: none !important; }   /* hide → arrow */
  
    img.top-page-rounded {
        max-width: 100%;
    }  
    
}

.text-semi-bold {
    font-weight: 500;
}
/* two equal columns */

.columns-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
    /* CSS in here for mobile only */

    .columns-equal {
        grid-template-columns: 1fr;
    }
}


/* padding */

.padding-top-90 {
    padding-top: clamp(48px, 8vw, 90px) !important;
}

.padding-bottom-90 {
    padding-bottom: clamp(48px, 8vw, 90px) !important;
}

.padding-top-60 {
    padding-top: clamp(30px, 6vw, 60px) !important;
}

.padding-bottom-60 {
    padding-bottom: clamp(30px, 6vw, 60px) !important;
}

.padding-top-30 {
    padding-top: clamp(18px, 4vw, 30px) !important;
}

.padding-bottom-30 {
    padding-bottom: clamp(18px, 4vw, 30px) !important;
}


/* Spacing on pages */

.spacer-top-90 {
    margin-top: clamp(48px, 8vw, 90px) !important;
}

.page-feature-section.spacer-top-90{
    margin-top: clamp(60px, 8vw, 90px) !important;
}

.spacer-bottom-90 {
    margin-bottom: clamp(48px, 8vw, 90px) !important;
}

.spacer-top-60 {
    margin-top: clamp(30px, 6vw, 60px) !important;
}

.spacer-bottom-60 {
    margin-bottom: clamp(30px, 6vw, 60px) !important;
}

.spacer-top-30 {
    margin-top: clamp(18px, 4vw, 30px) !important;
}

.spacer-bottom-30 {
    margin-bottom: clamp(18px, 4vw, 30px) !important;
}

/* 1) Remove top margin on the element that follows a bottom spacer */
.spacer-bottom-90 + *,
.spacer-bottom-60 + * {
margin-top: 0 !important;
}

/* 2) Remove bottom margin on the element that precedes a top spacer (needs :has) */
@supports selector(:has(+ *)) {
*:has(+ .spacer-top-90),
*:has(+ .spacer-top-60) {
    margin-bottom: 0 !important;
}
}

/* 3) Inside the styled block itself, neutralize first/last child margins
    so inner headings/paragraphs don’t add extra space */
.spacer-top-90    > :first-child,
.spacer-top-60    > :first-child   { margin-top: 0 !important; }

.spacer-bottom-90 > :last-child,
.spacer-bottom-60 > :last-child    { margin-bottom: 0 !important; }

.square-img figure img {
max-height: 440px !important;
width: 100% !important;
}