.elementor-kit-31{--e-global-color-primary:#001434;--e-global-color-secondary:#6FA3F7;--e-global-color-text:#000B1C;--e-global-color-accent:#7E92B1;--e-global-color-d16ee16:#96BEFF;--e-global-color-532381a:#ECF0FC;--e-global-color-4dfa7a6:#22375B;--e-global-color-63a79bf:#EFF4FF;--e-global-color-0597eb2:#23395D;--e-global-color-e4fad64:#FAFBFD;--e-global-typography-primary-font-family:"Bricolage Grotesque";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Bricolage Grotesque";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Work Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Bricolage Grotesque";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );font-family:"Work Sans", Sans-serif;font-size:1em;}.elementor-kit-31 button,.elementor-kit-31 input[type="button"],.elementor-kit-31 input[type="submit"],.elementor-kit-31 .elementor-button{background-color:var( --e-global-color-secondary );font-family:"Work Sans", Sans-serif;font-size:1em;font-weight:500;color:var( --e-global-color-532381a );border-radius:5px 5px 5px 5px;padding:12px 14px 12px 14px;}.elementor-kit-31 button:hover,.elementor-kit-31 button:focus,.elementor-kit-31 input[type="button"]:hover,.elementor-kit-31 input[type="button"]:focus,.elementor-kit-31 input[type="submit"]:hover,.elementor-kit-31 input[type="submit"]:focus,.elementor-kit-31 .elementor-button:hover,.elementor-kit-31 .elementor-button:focus{background-color:var( --e-global-color-d16ee16 );color:var( --e-global-color-532381a );}.elementor-kit-31 e-page-transition{background-color:#FFBC7D;}.elementor-kit-31 a{color:var( --e-global-color-secondary );font-family:"Work Sans", Sans-serif;font-size:1em;}.elementor-kit-31 a:hover{color:var( --e-global-color-d16ee16 );}.elementor-kit-31 h1{color:var( --e-global-color-primary );font-family:"Bricolage Grotesque", Sans-serif;font-size:3.7em;font-weight:600;}.elementor-kit-31 h2{font-family:"Bricolage Grotesque", Sans-serif;font-size:2em;font-weight:500;}.elementor-kit-31 h3{font-family:"Bricolage Grotesque", Sans-serif;font-size:1.9em;font-weight:500;}.elementor-kit-31 h4{color:#000000;font-family:"Bricolage Grotesque", Sans-serif;font-size:1.7em;font-weight:500;}.elementor-kit-31 h5{color:var( --e-global-color-text );font-family:"Bricolage Grotesque", Sans-serif;font-size:1.4em;font-weight:600;}.elementor-kit-31 h6{color:var( --e-global-color-text );font-family:"Bricolage Grotesque", Sans-serif;font-size:1.4em;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:80vw;}.e-con{--container-max-width:80vw;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 100px;--widgets-spacing-row:20px;--widgets-spacing-column:100px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.elementor-kit-31 h1{font-size:2.5em;}.elementor-kit-31 h3{font-size:1.7em;}.elementor-kit-31 h4{font-size:1.2em;}.elementor-kit-31 h5{font-size:1.2em;}.elementor-kit-31 button,.elementor-kit-31 input[type="button"],.elementor-kit-31 input[type="submit"],.elementor-kit-31 .elementor-button{padding:12px 14px 12px 14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90vw;}.e-con{--container-max-width:90vw;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:1200px){.elementor-kit-31 h1{font-size:3em;}.elementor-kit-31 h4{font-size:1.5em;}.elementor-kit-31 button,.elementor-kit-31 input[type="button"],.elementor-kit-31 input[type="submit"],.elementor-kit-31 .elementor-button{padding:12px 14px 12px 14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90vw;}.e-con{--container-max-width:90vw;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:1024px){.elementor-kit-31 h1{font-size:3.2em;}.elementor-kit-31 button,.elementor-kit-31 input[type="button"],.elementor-kit-31 input[type="submit"],.elementor-kit-31 .elementor-button{padding:12px 14px 12px 12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:80vw;}.e-con{--container-max-width:80vw;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:767px){.elementor-kit-31{line-height:1.3em;}.elementor-kit-31 h1{font-size:2.2em;}.elementor-kit-31 h3{font-size:1.5em;}.elementor-kit-31 h4{font-size:1.3em;}.elementor-kit-31 button,.elementor-kit-31 input[type="button"],.elementor-kit-31 input[type="submit"],.elementor-kit-31 .elementor-button{padding:12px 14px 12px 14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90vw;}.e-con{--container-max-width:90vw;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(min-width:2400px){.elementor-kit-31{font-size:1.2em;}.elementor-kit-31 h1{font-size:4em;}.elementor-kit-31 h2{font-size:2.2em;}.elementor-kit-31 h4{font-size:1.3em;}.elementor-kit-31 h5{font-size:1.2em;}.elementor-kit-31 button,.elementor-kit-31 input[type="button"],.elementor-kit-31 input[type="submit"],.elementor-kit-31 .elementor-button{padding:12px 14px 12px 14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:60vw;}.e-con{--container-max-width:60vw;--container-default-padding-top:0rem;--container-default-padding-right:0rem;--container-default-padding-bottom:0rem;--container-default-padding-left:0rem;}}
/* Start custom CSS *//* ==========================================================
   GLOBAL TYPOGRAPHY + UTILITIES
   ========================================================== */

b,
strong {
    font-weight: 500;
}

.text-jordyblue {
    color: #96BEFF;
}
ul {
    margin-bottom: 18px;
}


/* ==========================================================
   ELEMENTOR ICON FIXES
   ========================================================== */

.elementor-icon,
.elementor-icon svg {
    display: block;
}

.elementor-icon,
.elementor-icon-box-icon {
    line-height: 0;
}


/* ==========================================================
   BLUE GLOW BOX
   ========================================================== */

.glow-box {
    border: 1px solid #C3C3C3;
    border-radius: 10px;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.glow-box:hover {
    border-color: #7BACFA;
    box-shadow:
        0 0 10px rgba(123, 172, 250, 0.45),
        0 0 25px rgba(123, 172, 250, 0.25),
        0 0 45px rgba(123, 172, 250, 0.15);
}


/* ==========================================================
   SPEECH BUBBLES
   MASTER STYLESHEET
   ========================================================== */


/* ==========================================================
   1. BASE BUBBLES
   ========================================================== */

.blue-speech-bubble,
.white-speech-bubble {
    position: relative;
    overflow: visible;
    box-sizing: border-box;

    border-radius: 8px !important;

    filter: drop-shadow(
        0 4px 10px rgba(0, 0, 0, 0.08)
    );

    transition: filter 0.2s ease;
}


/* ==========================================================
   2. BACKGROUNDS
   ========================================================== */

.blue-speech-bubble {
    background: #98BFFF !important;
}

.white-speech-bubble {
    background: #fff !important;
}


/* ==========================================================
   3. HOVER GLOW
   ========================================================== */

.blue-speech-bubble:hover,
.white-speech-bubble:hover {
    filter:
        drop-shadow(0 0 10px rgba(123, 172, 250, 0.45))
        drop-shadow(0 0 25px rgba(123, 172, 250, 0.25))
        drop-shadow(0 0 45px rgba(123, 172, 250, 0.15));
}


/* ==========================================================
   4. DESKTOP TAILS
   1025px+
   ========================================================== */


/* Blue bubble - points left */

.blue-speech-bubble::after {
    content: "";

    position: absolute;

    top: 50%;
    left: -40px;
    right: auto;
    bottom: auto;

    width: 0;
    height: 0;

    transform: translateY(-50%);

    border-top: 20px solid transparent;
    border-right: 40px solid #98BFFF;
    border-bottom: 20px solid transparent;
    border-left: 0;
}


/* White bubble - points right */

.white-speech-bubble::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -40px;
    bottom: auto;
    left: auto;

    width: 0;
    height: 0;

    transform: translateY(-50%);

    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 40px solid #fff;
    border-right: 0;
}


/* ==========================================================
   5. TABLET PORTRAIT + MOBILE
   1024px AND BELOW

   White bubble points DOWN toward button.
   Blue bubble points UP toward button.
   ========================================================== */

@media (max-width: 1024px) {


    /* ------------------------------------------------------
       WHITE / TOP BUBBLE
       ------------------------------------------------------ */

    .white-speech-bubble::after {
        content: "";

        position: absolute;

        /*
         * Centre horizontally.
         */

        left: 50%;
        right: auto;

        /*
         * Move tail below bubble.
         */

        top: auto;
        bottom: -30px;

        width: 0;
        height: 0;

        transform: translateX(-50%);

        /*
         * Downward triangle.
         */

        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 30px solid #fff;
        border-bottom: 0;
    }


    /* ------------------------------------------------------
       BLUE / BOTTOM BUBBLE
       ------------------------------------------------------ */

    .blue-speech-bubble::after {
        content: "";

        position: absolute;

        /*
         * Centre horizontally.
         */

        left: 50%;
        right: auto;

        /*
         * Move tail above bubble.
         */

        top: -30px;
        bottom: auto;

        width: 0;
        height: 0;

        transform: translateX(-50%);

        /*
         * Upward triangle.
         */

        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 30px solid #98BFFF;
        border-top: 0;
    }
}


/* ==========================================================
   6. MOBILE
   767px AND BELOW
   ========================================================== */

@media (max-width: 767px) {


    /*
     * Slightly smaller tails on mobile so they don't
     * overpower the narrower cards.
     */


    /* White - down */

    .white-speech-bubble::after {
        bottom: -24px;

        border-left-width: 20px;
        border-right-width: 20px;
        border-top-width: 24px;
    }


    /* Blue - up */

    .blue-speech-bubble::after {
        top: -24px;

        border-left-width: 20px;
        border-right-width: 20px;
        border-bottom-width: 24px;
    }
}


/* ==========================================================
   PROCESS STEPS
   MASTER STYLESHEET

   1025px+:
   Horizontal overlapping arrows

   1024px and below:
   Vertical overlapping arrows
   ========================================================== */


/* ==========================================================
   1. BASE
   HORIZONTAL LAYOUT
   ========================================================== */

.process-step {
    --arrow-depth: 70px;

    position: relative;
    box-sizing: border-box;
    overflow: visible !important;

    padding: 30px 10px 30px 50px;

    background: #fff !important;

    border-top: 1px solid #00000030;
    border-bottom: 1px solid #00000030;
    border-left: 0;
    border-right: 0;
}


/* First step left edge */

.process-step:first-child {
    border-left: 1px solid #00000030;
}


/* ==========================================================
   2. HORIZONTAL RIGHT-FACING ARROW
   ========================================================== */

.process-step::after {
    content: "";
    position: absolute;

    top: 0;
    right: calc(-1 * var(--arrow-depth));

    width: var(--arrow-depth);
    height: 100%;

    z-index: 3;
    pointer-events: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 400' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 L 69 200 L 0 400' fill='white' stroke='%23000000' stroke-opacity='0.188' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}


/* ==========================================================
   3. CONTENT ABOVE ARROWS
   ========================================================== */

.process-step > * {
    position: relative;
    z-index: 5;
}


/* ==========================================================
   4. HORIZONTAL OVERLAP
   ========================================================== */

.process-step + .process-step {
    margin-left: calc(-1 * var(--arrow-depth));

    padding-left:
        calc(var(--arrow-depth) + 95px);
}


/* ==========================================================
   5. LAYERING
   ========================================================== */

.process-step:nth-child(1) {
    z-index: 40;
}

.process-step:nth-child(2) {
    z-index: 30;
}

.process-step:nth-child(3) {
    z-index: 20;
}

.process-step:nth-child(4) {
    z-index: 10;
}


/* ==========================================================
   6. 1025px - 1366px
   HORIZONTAL
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1366px) {

    .process-step {
        --arrow-depth: 40px;

        padding-top: 25px;
        padding-right: 5px;
        padding-bottom: 25px;
    }


    .process-step:first-child {
        padding-left: 30px;
    }


    .process-step + .process-step {
        margin-left:
            calc(-1 * var(--arrow-depth));

        padding-left: 96px;
        padding-right: 0;
    }
}


/* ==========================================================
   7. 1367px - 2399px
   HORIZONTAL
   ========================================================== */

@media (min-width: 1367px) and (max-width: 2399px) {

    .process-step {
        --arrow-depth: 70px;

        padding-top: 40px;
        padding-right: 20px;
        padding-bottom: 40px;
        padding-left: 60px;
    }


    .process-step + .process-step {
        margin-left:
            calc(-1 * var(--arrow-depth));

        padding-left:
            calc(var(--arrow-depth) + 105px);
    }
}


/* ==========================================================
   8. 2400px+
   HORIZONTAL
   ========================================================== */

@media (min-width: 2400px) {

    .process-step {
        --arrow-depth: 70px;

        padding-top: 50px;
        padding-right: 10px;
        padding-bottom: 50px;
    }


    .process-step:first-child {
        padding-left: 45px;
    }


    .process-step + .process-step {
        margin-left:
            calc(-1 * var(--arrow-depth));

        padding-left:
            calc(var(--arrow-depth) + 105px);
    }
}


/* ==========================================================
   9. 1024px AND BELOW
   VERTICAL OVERLAPPING ARROWS
   ========================================================== */

@media (max-width: 1024px) {

    .process-step {
        --arrow-depth: 70px;

        margin: 0 !important;

        /*
         * Bottom reduced by 10px.
         */

        padding:
            30px
            30px
            30px
            30px;

        border-left: 1px solid #00000030;
        border-right: 1px solid #00000030;

        /*
         * Arrow forms the bottom edge
         * on EVERY step, including Step 4.
         */

        border-bottom: 0;
    }


    /* ======================================================
       STEPS 2, 3 AND 4
       ====================================================== */

    .process-step + .process-step {
        margin-left: 0 !important;
        margin-top: 0 !important;

        padding-left: 30px;

        /*
         * Reduced by 30px from the
         * previous top spacing.
         */

        padding-top: var(--arrow-depth);
    }


    /* ======================================================
       FULL-WIDTH DOWNWARD ARROW
       ====================================================== */

    .process-step::after {
        content: "";

        position: absolute;

        top: 100%;
        left: -1px;

        right: auto;
        bottom: auto;

        width: calc(100% + 2px);
        height: var(--arrow-depth);

        transform: none;

        z-index: 6;
        pointer-events: none;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 70' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 L 500 69 L 1000 0' fill='white' stroke='%23000000' stroke-opacity='0.188' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
}


/* ==========================================================
   10. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .process-step {
        padding-right: 25px;
        padding-bottom: 25px;
        padding-left: 25px;
    }


    .process-step + .process-step {
        padding-left: 25px;
        padding-top: var(--arrow-depth);
    }
}


/* ==========================================================
   ELEMENTOR POSTS
   POST IMAGE OVERLAP
   MASTER STYLESHEET
   ========================================================== */


/* ==========================================================
   1. VARIABLES
   ========================================================== */

.post-image-overlap {

    /* Image width relative to card */
    --post-image-width: 90%;

    /* Image aspect ratio */
    --post-image-ratio: 3 / 2;

    /*
     * Half the height of a 90%-wide 3:2 image.
     *
     * 90% × 2/3 = 60% image height
     * Half of 60% = 30%
     */

    --post-image-half-height: 30%;

    /*
     * Space between image and title.
     */

    --post-image-content-gap: 15px;
}


/* ==========================================================
   2. POSTS CONTAINER
   NO ARTIFICIAL CLEARANCE
   ========================================================== */

.post-image-overlap,
.post-image-overlap .elementor-widget-container,
.post-image-overlap .elementor-posts-container {

    margin-top: 0 !important;
    padding-top: 0 !important;

    overflow: visible !important;
}


/* ==========================================================
   3. POST
   CREATE EXACT SPACE REQUIRED BY IMAGE
   ========================================================== */

.post-image-overlap .elementor-post {

    position: relative !important;

    overflow: visible !important;

    /*
     * This creates exactly enough room above the card
     * for the half of the image sitting outside it.
     */

    margin-top: var(--post-image-half-height) !important;
}


/* ==========================================================
   4. CARD
   ========================================================== */

.post-image-overlap .elementor-post__card {

    position: relative !important;

    overflow: visible !important;

    box-sizing: border-box;

    margin-top: 0 !important;

    /*
     * Lower half of image inside the card
     * + 15px before the title/content.
     */

    padding-top:
        calc(
            var(--post-image-half-height)
            + var(--post-image-content-gap)
        ) !important;
}


/* ==========================================================
   5. OVERLAPPING IMAGE
   ========================================================== */

.post-image-overlap
.elementor-post__thumbnail__link {

    position: absolute !important;

    /*
     * Image centred directly across
     * the top edge of the card.
     */

    top: 0 !important;
    left: 50% !important;

    width: var(--post-image-width) !important;
    max-width: var(--post-image-width) !important;

    aspect-ratio: var(--post-image-ratio);

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    transform: translate(-50%, -50%) !important;

    z-index: 5;
}


/* ==========================================================
   6. THUMBNAIL
   REMOVE ELEMENTOR PLACEHOLDER GEOMETRY
   ========================================================== */

.post-image-overlap
.elementor-post__thumbnail {

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
    padding-bottom: 0 !important;

    background: transparent !important;

    overflow: hidden !important;
}


/* ==========================================================
   7. IMAGE
   ========================================================== */

.post-image-overlap
.elementor-post__thumbnail img {

    position: relative !important;

    top: auto !important;
    left: auto !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    object-fit: cover;

    background: transparent !important;
}


/* ==========================================================
   8. REMOVE THUMBNAIL PSEUDO PLACEHOLDERS
   ========================================================== */

.post-image-overlap
.elementor-post__thumbnail::before,
.post-image-overlap
.elementor-post__thumbnail::after {

    content: none !important;

    display: none !important;

    background: transparent !important;
}


/* ==========================================================
   OVERLAPPING CONTAINER CARDS
   MASTER STYLESHEET
   ========================================================== */


/* ==========================================================
   1. CARD GROUP
   ========================================================== */

.overlap-cards {
    overflow: visible !important;

    /* Ensures grid items stretch to equal height */
    align-items: stretch;
}


/* ==========================================================
   2. INDIVIDUAL CARD
   ========================================================== */

.overlap-card {

    /* Image width relative to card */
    --image-width: 90%;

    /* Image aspect ratio */
    --image-ratio: 3 / 2;

    /* Consistent gap between image and title */
    --image-content-gap: 30px;

    position: relative !important;

    overflow: visible !important;

    box-sizing: border-box;

    /* Large desktop clearance */
    margin-top: 180px;

    border: 1px solid #96BEFF;;

    background: #fff;

    /* Stretch cards to equal height */
    align-self: stretch;
}


/* ==========================================================
   3. OVERLAPPING IMAGE
   ========================================================== */

.overlap-card .overlap-card-image {
    position: absolute !important;

    top: 0 !important;
    left: 50% !important;

    width: var(--image-width) !important;
    max-width: var(--image-width) !important;

    aspect-ratio: var(--image-ratio);

    margin: 0 !important;

    transform: translate(-50%, -50%) !important;

    z-index: 5;
}


/* ==========================================================
   4. ELEMENTOR IMAGE WRAPPER
   ========================================================== */

.overlap-card
.overlap-card-image
.elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
}


/* ==========================================================
   5. IMAGE
   ========================================================== */

.overlap-card
.overlap-card-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;

    object-fit: cover;

    margin: 0 !important;
}


/* ==========================================================
   6. CARD CONTENT
   ========================================================== */

.overlap-card .overlap-card-content {
    position: relative;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    /*
     * Responsive image clearance
     * + consistent image/title gap
     * + bottom padding
     */

    padding:
        calc(30% + var(--image-content-gap))
        5%
        35px;

    /*
     * Vertical flex layout allows buttons
     * to be pushed to the bottom
     */

    display: flex;
    flex-direction: column;

    z-index: 2;
}


/* ==========================================================
   7. BUTTON ALIGNMENT
   Only push actual Elementor buttons to the bottom
   ========================================================== */

.overlap-card
.overlap-card-content
.elementor-widget-button {
    margin-top: auto;
}


/* ==========================================================
   8. SMALLER DESKTOP / LAPTOP
   1025px - 1366px
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1366px) {

    .overlap-card {
        margin-top: 120px;
    }

}


/* ==========================================================
   9. TABLET
   768px - 1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    .overlap-card {
        margin-top: calc(30% + 30px);
    }

}


/* ==========================================================
   10. MOBILE
   767px AND BELOW
   ========================================================== */

@media (max-width: 767px) {

    .overlap-card {
        --image-content-gap: 25px;

        margin-top: calc(30% + 25px);
    }

}


/* ==========================================================
   MENU DESCRIPTIONS
   MASTER STYLESHEET
   ========================================================== */


/* ==========================================================
   1. DESCRIPTION VISIBILITY
   ========================================================== */

.menu-item-excerpt {
    display: none !important;
}

.show-menu-descriptions .menu-item-excerpt {
    display: block !important;
}


/* ==========================================================
   2. MENU
   ========================================================== */

.show-menu-descriptions .menu {
    display: flex;
    flex-wrap: wrap;

    width: calc(100% + 25px);

    margin: 0 -25px -25px 0;
    padding: 0;
}


/* ==========================================================
   3. MENU ITEMS
   DESKTOP: 4 COLUMNS
   ========================================================== */

.show-menu-descriptions .menu-item {
    display: flex;

    width: 25%;

    box-sizing: border-box;

    margin: 0;

    padding-right: 25px;
    padding-bottom: 25px;
}


/* ==========================================================
   4. MENU CARD
   CONTENT ALIGNED TO TOP
   ========================================================== */

.show-menu-descriptions .menu-item > a {
    display: flex;

    flex-direction: column;

    /*
     * Align title + description to top of card.
     */

    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;

    min-height: 120px;
    height: auto;

    box-sizing: border-box;

    padding: 25px 20px !important;

    border: 1px solid #C3C3C3;
    border-radius: 10px;

    background: #fff;

    font-family: "Bricolage Grotesque", sans-serif;

    font-size: 1em;
    font-weight: 600;
    line-height: 1.2;

    color: #000B1C;

    text-align: left;
    text-decoration: none;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;

    transform: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ==========================================================
   5. HOVER
   ========================================================== */

.show-menu-descriptions .menu-item > a:hover {
    border-color: #7BACFA;

    box-shadow:
        0 0 10px rgba(123, 172, 250, 0.45),
        0 0 25px rgba(123, 172, 250, 0.25),
        0 0 45px rgba(123, 172, 250, 0.15);
}


/* ==========================================================
   6. DESCRIPTION
   ========================================================== */

.show-menu-descriptions .menu-item-excerpt {
    width: 100%;

    margin-top: 6px;

    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.4;

    color: #000B1C;

    text-align: left;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;
}


/* ==========================================================
   7. TABLET / SMALL DESKTOP
   677px - 1024px
   2 COLUMNS
   ========================================================== */

@media (min-width: 677px) and (max-width: 1024px) {

    .show-menu-descriptions .menu-item {
        width: 50%;
    }
}


/* ==========================================================
   8. MOBILE
   676px AND BELOW
   1 COLUMN
   ========================================================== */

@media (max-width: 676px) {

    .show-menu-descriptions .menu {
        width: 100%;

        margin:
            0
            0
            -25px
            0;
    }


    .show-menu-descriptions .menu-item {
        width: 100%;

        padding-right: 0;
        padding-bottom: 25px;
    }


    .show-menu-descriptions .menu-item > a {
        width: 100%;

        min-height: 0;

        padding: 20px !important;

        /*
         * Keep mobile content top aligned too.
         */

        justify-content: flex-start;
    }
}


/* ==========================================================
   ARES TESTIMONIALS
   MASTER STYLESHEET
   ========================================================== */


/* ==========================================================
   1. BASE VARIABLES
   ========================================================== */

.ares-testimonials {
    --carousel-width: clamp(700px, 66vw, 1000px);

    --card-height: 550px;
    --level-2-height: 440px;
    --level-3-height: 330px;

    --stack-clip: 280px;

    width: var(--carousel-width) !important;
    max-width: 100% !important;

    margin-inline: auto !important;
}


/* ==========================================================
   2. SWIPER BASE
   ========================================================== */

.ares-testimonials .swiper,
.ares-testimonials .swiper-container {
    width: 100% !important;
}


/* ==========================================================
   3. DESKTOP + TABLET
   768px+
   ========================================================== */

@media (min-width: 768px) {

    .ares-testimonials {
        overflow: visible !important;

        clip-path: inset(
            -60px
            calc(var(--stack-clip) * -1)
            -60px
            calc(var(--stack-clip) * -1)
        );
    }


    .ares-testimonials .swiper,
    .ares-testimonials .swiper-container,
    .ares-testimonials .swiper-wrapper {
        overflow: visible !important;
    }


    .ares-testimonials .swiper,
    .ares-testimonials .swiper-container {
        height: var(--card-height) !important;
        min-height: var(--card-height) !important;
    }


    .ares-testimonials .swiper-wrapper {
        height: 100% !important;

        align-items: center !important;
    }


    .ares-testimonials .swiper-slide {
        display: flex !important;
        align-items: center !important;

        min-height: 0 !important;
    }
}


/* ==========================================================
   4. BASE CARD
   DESKTOP / TABLET
   ========================================================== */

.ares-testimonials .testimonial-card {
    position: relative;

    width: 100% !important;

    box-sizing: border-box;

    height: var(--card-height) !important;
    min-height: var(--card-height) !important;

    padding: 55px 60px;

    background: #fff;

    border: 1px solid #96BEFF;
    border-radius: 10px;

    box-shadow:
        0 8px 25px rgba(0, 11, 28, 0.05);

    overflow: hidden !important;
}


/* ==========================================================
   5. STACK POSITIONS
   ========================================================== */


/* Level 1 */

.ares-testimonials .swiper-slide-active {
    opacity: 1;

    transform: translateX(0);

    z-index: 30;

    pointer-events: auto;
}


/* Level 2 - Left */

.ares-testimonials .swiper-slide-prev {
    opacity: 1;

    transform: translateX(94.4%);

    z-index: 20;
}


/* Level 2 - Right */

.ares-testimonials .swiper-slide-next {
    opacity: 1;

    transform: translateX(-94.4%);

    z-index: 20;
}


/* Level 3 - Left */

.ares-testimonials
.swiper-slide:has(+ .swiper-slide-prev) {
    opacity: 1;

    transform: translateX(188.8%);

    z-index: 10;
}


/* Level 3 - Right */

.ares-testimonials
.swiper-slide-next + .swiper-slide {
    opacity: 1;

    transform: translateX(-188.8%);

    z-index: 10;
}


/* ==========================================================
   6. CARD HEIGHTS
   ========================================================== */


/* Level 1 */

.ares-testimonials
.swiper-slide-active
.testimonial-card {
    height: var(--card-height) !important;
    min-height: var(--card-height) !important;
}


/* Level 2 */

.ares-testimonials
.swiper-slide-prev
.testimonial-card,

.ares-testimonials
.swiper-slide-next
.testimonial-card {
    height: var(--level-2-height) !important;
    min-height: var(--level-2-height) !important;
}


/* Level 3 */

.ares-testimonials
.swiper-slide:has(+ .swiper-slide-prev)
.testimonial-card,

.ares-testimonials
.swiper-slide-next + .swiper-slide
.testimonial-card {
    height: var(--level-3-height) !important;
    min-height: var(--level-3-height) !important;
}


/* ==========================================================
   7. REAR CARD CONTENT
   ========================================================== */


/* Level 2 - Left */

.ares-testimonials
.swiper-slide-prev
.testimonial-card > * {
    visibility: visible;

    clip-path: inset(
        0
        calc(100% - 75px)
        0
        0
    );
}


/* Level 2 - Right */

.ares-testimonials
.swiper-slide-next
.testimonial-card > * {
    visibility: visible;

    clip-path: inset(
        0
        0
        0
        calc(100% - 75px)
    );
}


/* Level 3 - Left */

.ares-testimonials
.swiper-slide:has(+ .swiper-slide-prev)
.testimonial-card > * {
    visibility: visible;

    clip-path: inset(
        0
        calc(100% - 55px)
        0
        0
    );
}


/* Level 3 - Right */

.ares-testimonials
.swiper-slide-next + .swiper-slide
.testimonial-card > * {
    visibility: visible;

    clip-path: inset(
        0
        0
        0
        calc(100% - 55px)
    );
}


/* Active */

.ares-testimonials
.swiper-slide-active
.testimonial-card > * {
    visibility: visible;

    clip-path: none;
}


/* ==========================================================
   8. NAVIGATION
   ========================================================== */

.ares-testimonials .elementor-swiper-button {
    position: absolute !important;

    top: 50% !important;

    width: 70px !important;
    height: 110px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    transform: translateY(-50%) !important;

    z-index: 100 !important;

    opacity: 1 !important;
    visibility: visible !important;

    cursor: pointer;
}


/* Hide Elementor icon */

.ares-testimonials .elementor-swiper-button svg,
.ares-testimonials .elementor-swiper-button i {
    display: none !important;
}


/* Custom chevron */

.ares-testimonials
.elementor-swiper-button::after {
    content: "" !important;

    display: block !important;

    width: 42px;
    height: 42px;

    box-sizing: border-box;

    border-top: 1.5px solid #505050;
    border-right: 1.5px solid #505050;

    transition: border-color 0.2s ease;
}


/* Previous */

.ares-testimonials
.elementor-swiper-button-prev {
    left: -225px !important;
    right: auto !important;
}

.ares-testimonials
.elementor-swiper-button-prev::after {
    transform: rotate(-135deg);
}


/* Next */

.ares-testimonials
.elementor-swiper-button-next {
    right: -225px !important;
    left: auto !important;
}

.ares-testimonials
.elementor-swiper-button-next::after {
    transform: rotate(45deg);
}


/* Hover */

.ares-testimonials
.elementor-swiper-button:hover::after {
    border-color: #7BACFA;
}


/* ==========================================================
   9. COMPACT DESKTOP
   1025px - 1399px
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1399px) {

    .ares-testimonials {
        --card-height: 650px;
        --level-2-height: 520px;
        --level-3-height: 390px;

        --stack-clip: 200px;
    }


    .ares-testimonials
    .elementor-swiper-button-prev {
        left: -155px !important;
    }


    .ares-testimonials
    .elementor-swiper-button-next {
        right: -155px !important;
    }
}


/* ==========================================================
   TABLET / SMALL DESKTOP
   768px - 1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    .ares-testimonials {
        --carousel-width: 68vw;

        --card-height: 800px;
        --level-2-height: 640px;
        --level-3-height: 480px;

        --stack-clip: 145px;
    }

    .ares-testimonials .testimonial-card {
        padding: 45px 50px;
    }

    /* Stack */

    .ares-testimonials
    .swiper-slide-prev {
        transform: translateX(95%);
    }

    .ares-testimonials
    .swiper-slide-next {
        transform: translateX(-95%);
    }

    .ares-testimonials
    .swiper-slide:has(+ .swiper-slide-prev) {
        transform: translateX(190%);
    }

    .ares-testimonials
    .swiper-slide-next + .swiper-slide {
        transform: translateX(-190%);
    }

    /* Navigation */

    .ares-testimonials
    .elementor-swiper-button-prev {
        left: -120px !important;
    }

    .ares-testimonials
    .elementor-swiper-button-next {
        right: -120px !important;
    }

    .ares-testimonials
    .elementor-swiper-button::after {
        width: 30px;
        height: 30px;
    }
}


/* ==========================================================
   11. MOBILE ONLY
   767px AND BELOW
   ========================================================== */

@media (max-width: 767px) {

    .ares-testimonials {
        --mobile-card-height: 550px;
        --mobile-nav-space: 80px;

        width: 100% !important;
        max-width: 100% !important;

        margin-inline: auto !important;

        overflow: visible !important;

        clip-path: none !important;

        contain: none;
    }


    /* ------------------------------------------------------
       SWIPER
       ------------------------------------------------------ */

    .ares-testimonials .swiper,
    .ares-testimonials .swiper-container {
        width: 100% !important;

        height: calc(
            var(--mobile-card-height) +
            var(--mobile-nav-space)
        ) !important;

        min-height: calc(
            var(--mobile-card-height) +
            var(--mobile-nav-space)
        ) !important;

        padding-bottom: var(--mobile-nav-space) !important;

        box-sizing: border-box;

        overflow: hidden !important;
    }


    .ares-testimonials .swiper-wrapper {
        height: var(--mobile-card-height) !important;

        align-items: flex-start !important;
    }


    .ares-testimonials .swiper-slide {
        height: var(--mobile-card-height) !important;
        min-height: var(--mobile-card-height) !important;

        opacity: 0;

        transform: none !important;

        pointer-events: none;
    }


    /* ------------------------------------------------------
       ACTIVE SLIDE
       ------------------------------------------------------ */

    .ares-testimonials
    .swiper-slide-active {
        opacity: 1;

        transform: none !important;

        z-index: 30;

        pointer-events: auto;
    }


    /* ------------------------------------------------------
       HIDE REAR STACK
       ------------------------------------------------------ */

    .ares-testimonials
    .swiper-slide-prev,

    .ares-testimonials
    .swiper-slide-next,

    .ares-testimonials
    .swiper-slide:has(+ .swiper-slide-prev),

    .ares-testimonials
    .swiper-slide-next + .swiper-slide {
        opacity: 0;

        transform: none !important;

        pointer-events: none;
    }


    /* ------------------------------------------------------
       EVERY CARD ON MOBILE
       ------------------------------------------------------ */

    .ares-testimonials
    .swiper-slide
    .testimonial-card {
        position: relative !important;

        width: 100% !important;

        height: var(--mobile-card-height) !important;
        min-height: var(--mobile-card-height) !important;
        max-height: var(--mobile-card-height) !important;

        box-sizing: border-box !important;

        padding:
            35px
            30px
            55px
            30px !important;

        border-radius: 8px;

        overflow: hidden !important;
    }


    /* ------------------------------------------------------
       RESET DESKTOP CONTENT CLIPPING
       ------------------------------------------------------ */

    .ares-testimonials
    .swiper-slide
    .testimonial-card > * {
        visibility: visible !important;

        clip-path: none !important;
    }


    /* ------------------------------------------------------
       MOBILE FADE
       ------------------------------------------------------ */

    .ares-testimonials
    .swiper-slide
    .testimonial-card::after {
        content: "" !important;

        display: block !important;

        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 130px !important;

        z-index: 50 !important;

        pointer-events: none !important;

        background:
            linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.04) 20%,
                rgba(255, 255, 255, 0.12) 35%,
                rgba(255, 255, 255, 0.28) 50%,
                rgba(255, 255, 255, 0.55) 68%,
                rgba(255, 255, 255, 0.82) 84%,
                rgba(255, 255, 255, 0.96) 95%,
                #fff 100%
            ) !important;
    }


    /* Remove old content pseudo elements */

    .ares-testimonials
    .testimonial-content::before,

    .ares-testimonials
    .testimonial-content::after {
        content: none !important;

        display: none !important;
    }


    /* ------------------------------------------------------
       NAVIGATION
       ------------------------------------------------------ */

    .ares-testimonials
    .elementor-swiper-button {
        top: auto !important;

        bottom: 15px !important;

        width: 44px !important;
        height: 44px !important;

        transform: none !important;

        z-index: 100 !important;
    }


    /* Previous */

    .ares-testimonials
    .elementor-swiper-button-prev {
        left: calc(50% - 60px) !important;
        right: auto !important;
    }


    /* Next */

    .ares-testimonials
    .elementor-swiper-button-next {
        right: calc(50% - 60px) !important;
        left: auto !important;
    }


    /* Mobile chevrons */

    .ares-testimonials
    .elementor-swiper-button::after {
        width: 20px;
        height: 20px;
    }
}


/* ==========================================================
   12. SMALL MOBILE
   480px AND BELOW
   ========================================================== */

@media (max-width: 480px) {

    .ares-testimonials
    .swiper-slide
    .testimonial-card {
        padding:
            35px
            22px
            55px
            22px !important;
    }
}


/* ==========================================================
   13. ULTRA-WIDE DESKTOP
   2400px+
   ========================================================== */

@media (min-width: 2400px) {

    .ares-testimonials {
        --card-height: 700px;
        --level-2-height: 560px;
        --level-3-height: 420px;
    }
}/* End custom CSS */