@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url(./base.css);
@import url(./bootstrap.min.css) layer(Bootstrap);
@import url(./easings.css);

@layer General, Presets, Utils, Bootstrap, Button, Block;


/*=========================================== 
Fonts
============================================= */
/* @font-face {
    font-family: 'AvenirLTStd';
    src: url('https://develop.stackblue.com/diagnosinglife/wp-content/themes/twentytwentyfour/assets/fonts/AvenirLTStd-Book.woff2') format('woff2'),
        url('https://develop.stackblue.com/diagnosinglife/wp-content/themes/twentytwentyfour/assets/fonts/AvenirLTStd-Book.woff') format('woff'),
        url('https://develop.stackblue.com/diagnosinglife/wp-content/themes/twentytwentyfour/assets/fonts/AvenirLTStd-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} */



:root {
    --clr-primary-main: #042b2b;
    --clr-primary-dark: #021717;
    --clr-primary-light: #e5eaeb;
    --clr-primary-text: #000b0d;
    --clr-primary-hsl: 185, 87%, 15%;
    --clr-secondary-main: #c6d881;
    --clr-secondary-dark: #acbc6f;
    --clr-secondary-light: #edf4da;
    --clr-secondary-text: #0e1106;
    --clr-secondary-hsl: 72, 53%, 68%;
    --clamp-title: clamp(1.725rem, 4vw + 0.5rem, 60px);
    --clamp-sub-title: clamp(1.25rem, 2.4vw, 24px);
    --clr-black: #000;
    --clr-dark: #101010;
    --clr-body: #585858;
    --clr-white: #fff;
    --clr-gray: #808080;
    --clr-gray-100: #f8f8f8;
    --clr-gray-200: #f2f2f2;
    --clr-gray-300: #ededed;
    --clr-gray-400: #d8d8d8;
    --clr-gray-500: #ccc;
    --clr-gray-600: #bfbfbf;
    --clr-gray-700: #a1a1a1;
    --clr-gray-800: #9d9d9d;
    --clr-gray-900: #909090;
    --clr-link: #646cff;
    --clr-link-hover: #535bf2;
    --font-title: 'Italiana', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-body: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --smooth-shadow:
        0px 0.6px 0.9px rgba(0, 0, 0, 0.006),
        0px 1.4px 2.1px rgba(0, 0, 0, 0.009),
        0px 2.3px 3.5px rgba(0, 0, 0, 0.011),
        0px 3.5px 5.2px rgba(0, 0, 0, 0.013),
        0px 5px 7.5px rgba(0, 0, 0, 0.015),
        0px 7.1px 10.6px rgba(0, 0, 0, 0.017),
        0px 10.1px 15.1px rgba(0, 0, 0, 0.019),
        0px 14.6px 21.9px rgba(0, 0, 0, 0.021),
        0px 22.5px 33.8px rgba(0, 0, 0, 0.024),
        0px 40px 60px rgba(0, 0, 0, 0.03);
    --border-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;

    --elevation-1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    --elevation-2: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
    --elevation-3: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
    --elevation-4: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
    --elevation-6: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
    --elevation-8: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
    --elevation-12: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;
    --elevation-16: rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;
    --elevation-24: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;

    --clamp-btn: clamp(1em, 2.5vw, 1.25em) clamp(1em, 2.5vw, 2em);
    --clamp-box: clamp(1rem, 3vw, 1.25rem);
    --overlay-linear: linear-gradient(hsl(0 0% 0% / 85%), hsl(0 0% 0% / 85%));
    --overlay-secondary-and-dark: linear-gradient(hsl(90.87deg 89.61% 30.2% / 50%), hsl(0 0% 0% / 85%));
    --block-spacing: clamp(40px, 5vw + 2rem, 80px);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

/* @media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
} */


@layer Button {
    .Action-root:not(:first-of-type) {
        margin-block-start: 1.5rem;
    }

    .Action-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .Action-center {
        justify-content: center;
    }

    .Button-root {
        --_size: 0.725em;
        --_edge-gap: 0.25em;
        --_arrow-size: 40px;
        text-decoration: none;
        background: unset;
        background-color: var(--clr-gray-300);
        color: var(--clr-black);
        font-size: 1rem;
        font-weight: 600;
        padding: calc(var(--_size) * 1.35) calc(var(--_size) * 2.5);
        display: inline-block;
        text-align: center;
        border: 0;
        overflow: hidden;
        isolation: isolate;
        position: relative;
        background-image: none;
        /* border-radius: calc(var(--_size) * 0.5); */
        border-radius: 100vmax;
        transition: all 300ms;
        text-transform: uppercase;
        font-family: var(--font-body);
        line-height: 1;
    }

    .Button-root:not(.Button-icon) {
        --_edge-gap: 0.25em;
        --_arrow-size: 40px;

        display: inline-flex;
        gap: 1rem;
        align-items: center;
        padding: var(--_edge-gap);
        padding-inline-start: 1.5em;
    }

    .Button-root:not(.Button-icon)::after {
        content: "\f061";
        display: inline-block;
        margin-left: 0.5rem;
        font-family: var(--fa-style-family, "Font Awesome 6 Free");
        font-weight: var(--fa-style, 900);
        transform: rotate(-45deg);
        background-color: transparent;
        color: var(--clr-primary-main);
        width: var(--_arrow-size);
        aspect-ratio: 1;
        border-radius: 50%;
        text-align: center;
        align-content: center;
        z-index: -2;
    }

    .Button-root:not(.Button-icon)::before {
        content: "";
        position: absolute;
        inset: auto var(--_edge-gap);
        margin-left: auto;
        width: var(--_arrow-size);
        height: var(--_arrow-size);
        border-radius: 100vmax;
        background-color: hsl(var(--clr-primary-hsl), 20%);
        transition: all 1s cubic-bezier(0.144, 0.88, 0.133, 1);
        z-index: -2;
    }

    .Button-root:is(:hover, :focus-visible)::before {
        width: calc(100% - (var(--_edge-gap) * 2));
    }

    .Button-root[data-size="sm"] {
        font-size: 0.925rem;
    }

    .Button-root[data-size="md"] {
        font-size: 1rem;
    }

    .Button-root[data-size="lg"] {
        font-size: 1.25rem;
    }

    .Button-root[data-variant="contained"] {
        background-color: var(--clr-body);
        color: var(--clr-primary-light);
    }

    .Button-root[data-variant="contained"]:hover {
        background-color: var(--clr-dark);
    }

    .Button-root.Button-primary[data-variant="contained"] {
        background-color: var(--clr-primary-main);
        color: var(--clr-primary-light);
    }

    .Button-root.Button-primary[data-variant="contained"]::before {
        background-color: var(--clr-primary-light);
    }

    .Button-root.Button-primary[data-variant="contained"]::after {
        color: var(--clr-primary-main);
    }

    .Button-root.Button-primary[data-variant="contained"]:hover {
        background-color: var(--clr-primary-dark);
        color: var(--clr-primary-main);
    }

    .Button-root.Button-secondary[data-variant="contained"] {
        background-color: var(--clr-secondary-main);
        color: var(--clr-secondary-text);
    }

    .Button-root.Button-secondary[data-variant="contained"]:hover {
        background-color: var(--clr-secondary-dark);
    }

    .Button-root.Button-light[data-variant="contained"] {
        background-color: var(--clr-primary-light);
        color: var(--clr-primary-text);
        border: 1px solid transparent;
    }

    .Button-root.Button-light[data-variant="contained"]:hover::after {
        color: var(--clr-primary-light);
    }

    .Button-root.Button-light[data-variant="contained"]:hover {
        background-color: hsl(var(--clr-primary-hsl), 10%);
        border-color: var(--clr-primary-light);
        color: var(--clr-primary-light);
    }

    .Button-root.Button-light[data-variant="contained"]:hover::before {
        background-color: hsl(0, 0%, 100%, 20%);
    }

    .Button-root[data-variant="outlined"] {
        border: 2px solid currentColor;
        color: var(--clr-body);
        background-color: transparent;
    }

    .Button-root[data-variant="outlined"]:not([data-ripple]):hover {
        background-color: hsl(0, 0%, 0%, 5%);
    }

    .Button-root.Button-light[data-variant="outlined"] {
        border: 2px solid currentColor;
        color: var(--clr-white);
        background-color: transparent;
    }

    .Button-root.Button-light[data-variant="outlined"]::before {
        background-color: hsl(0, 0%, 100%, 20%);
    }

    .Button-root.Button-light[data-variant="outlined"]::after {
        color: var(--clr-primary-light);
    }

    .Button-root.Button-light[data-variant="outlined"]:not([data-ripple]):hover {
        background-color: hsl(var(--clr-primary-hsl), 10%);
    }

    .Button-root.Button-primary[data-variant="outlined"] {
        border: 2px solid currentColor;
        color: var(--clr-primary-main);
        background-color: transparent;
    }

    .Button-root.Button-primary[data-variant="outlined"]:not([data-ripple]):hover {
        background-color: hsl(160, 98%, 25%, 10%);
    }

    .Button-root.Button-secondary[data-variant="outlined"] {
        border: 2px solid currentColor;
        color: var(--clr-secondary-main);
        background-color: transparent;
    }

    .Button-root.Button-secondary[data-variant="outlined"]:not([data-ripple]):hover {
        background-color: hsl(42, 92%, 55%, 10%);
    }

    .Button-root.Button-icon {
        --_size: 1.15em;
        padding: 0;
        width: calc(var(--_size) * 2);
        height: calc(var(--_size) * 2);
        border-radius: 100vmax;
        align-content: center;
        -webkit-border-radius: 100vmax;
        -moz-border-radius: 100vmax;
        -ms-border-radius: 100vmax;
        -o-border-radius: 100vmax;
    }

    .Button-root>* {
        pointer-events: none;
    }

    [data-group="btns"] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    [data-group="btns"]>* {
        margin: 0;
    }

    .ripple-orb {
        position: absolute;
        inset: 0;
        width: 100%;
        scale: 0;
        aspect-ratio: 1;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        z-index: -2;
        transition: 700ms opacity ease, scale 1s cubic-bezier(0.275, 0.82, 0.165, 1);
        transform-origin: center;
    }

    .Button-root:hover .ripple-orb {
        transition: 100ms opacity ease, scale 1s cubic-bezier(0.275, 0.82, 0.165, 1);
        scale: 2;
        opacity: 1;
    }

    .Button-root:focus-visible .ripple-orb {
        opacity: 1;
        margin: auto;
        scale: 0.75;
    }

    .Button-root:not([data-ripple="true"]) .ripple-orb {
        margin: auto;
    }

    .Button-root:is(:hover, :focus) {
        backdrop-filter: blur(0.5em);
    }
}



@layer Block {
    .Block-root {
        padding-block: var(--block-spacing);
    }

    .Block-root.Block-gray {
        background-color: var(--clr-gray-200) !important;
    }

    .Block-root.Block-primary {
        background-color: var(--clr-primary-main) !important;
        color: var(--clr-primary-light);
    }

    .Block-root.Block-light {
        background-color: var(--clr-primary-light) !important;
    }

    .Block-root.Block-primary .Block-heading>* {
        color: #fdc260;
    }

    .Block-root.Block-secondary {
        background-color: var(--clr-secondary-light) !important;
        color: var(--clr-secondary-text);
    }

    .Block-root.Block-primary .List-root>* {
        --clr: var(--clr-primary-light) !important;
    }

    .Block-root:nth-child(even) {
        background-color: var(--clr-gray-200);
    }

    .Block-heading:not(:only-child, :last-child) {
        margin-block-end: 1.725rem;
    }

    .Block-heading~.Block-heading {
        margin-block-start: 1.5rem;
    }

    .Block-heading[data-level]:not(:only-child, :last-child) {
        margin-block-end: 0.725rem;
    }

    .Block-heading[data-level="2"]>* {
        font-size: var(--clamp-sub-title);
        font-weight: 400;
        text-transform: uppercase;
    }

    .Block-heading>span {
        font-size: var(--clamp-sub-title);
        font-weight: 400;
        text-transform: uppercase;
    }

    .Block-heading> :not(:last-child) {
        margin-bottom: 0.5em;
    }

    .Block-heading:not([data-level])> :not(p, span, small) {
        font-size: var(--clamp-title);
        font-weight: 400;
        text-transform: capitalize;
        text-wrap: balance;
        color: var(--clr-primary-text);
    }

/*     .Block-heading[data-aos]>* {
        transition: 1s clip-path cubic-bezier(0.375, 0.82, 0.165, 1);
        clip-path: inset(0 100% 0 0);
    }

    .Block-heading[data-aos]>:nth-child(1) {
        transition-delay: 200ms;
    }

    .Block-heading[data-aos]>:nth-child(2) {
        transition-delay: 400ms;
    }

    .Block-heading.aos-animate>* {
        clip-path: inset(0);
    } */

    .Parallax-dark .Block-heading:not([data-level])> :not(p, span) {
        color: var(--clr-primary-light);
    }

    .Block-heading> :not(p, span) b {
        font-weight: 700;
        color: var(--clr-primary-dark);
    }

    .Block-root.BlockNote-root :where(.Note-wrapper, .Note-content) {
        max-width: 100ch;
        margin-inline: auto;
        text-align: center;
        text-wrap-style: pretty;
    }

    /* Parallax */
    .Block-root.BlockParallax-root {
        position: relative;
        isolation: isolate;
        clip-path: inset(0);
        overflow: hidden;
    }

    .Block-root.BlockParallax-root .Parallax-object>* {
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        user-select: none;
        pointer-events: none;
    }

    .Block-root.BlockParallax-root:not(.Block-fluid) .Parallax-object>* {
        position: absolute;
        height: calc(100vh + 50px);
        height: calc(100dvh + 50px);
    }

    .Parallax-dark {
        color: var(--clr-primary-light);
    }

    .Parallax-dark .Block-object>* {
        filter: brightness(0.5);
    }

    /* Static */
    .Block-root.Block-static .Block-object>*:not(picture) {
        width: 100%;
        object-fit: cover;
        border-radius: 1rem;
    }

    .Block-root.Block-static .Block-object>picture * {
        width: 100%;
        object-fit: cover;
        border-radius: 1rem;
    }

    .Block-root.Block-root .Block-row~.Block-row {
        margin-block-start: 3rem;
    }

    .Block-object picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    @media (min-width: 992px) {

        /* Static */
        .Block-static.Block-static {
            --_gap: 5rem;
        }

        .Block-root.Block-static.Block-offset-y {
            margin-top: 100px;
        }

        .Block-root.Block-static .Block-object {
            width: 100%;
            aspect-ratio: 1;
        }

        .Block-root.Block-static.Block-offset-y .Block-object>* {
            translate: 0 -100px;
        }

        .Block-static.Block-static:not(.Block-offset-y) .Block-object>* {
            aspect-ratio: 1 / 0.725;
            min-height: 100%;
        }

        .Block-static.Block-static .Block-row {
            margin: 0;
            column-gap: var(--_gap);
        }

        .Block-static.Block-static:not(.Block-offset-y) .Block-row>*:not(.Block-object) {
            align-self: center;
        }

        .Block-static.Block-static .Block-row>* {
            flex: 1;
            padding: 0;
        }


        /* Fluid */
        .Block-root.Block-fluid.Block-offset-y {
            margin-top: 100px;
        }

        .Block-root.Block-fluid {
            --_gap: 5rem;
            position: relative;
            isolation: isolate;
        }

        .Block-root.Block-fluid .Block-row {
            gap: 1.5rem var(--_gap);
            margin: 0;
        }

        .Block-root.Block-fluid .Block-row>* {
            padding: 0;
            flex: 1;
        }

        .Block-root.Block-fluid:not(.BlockParallax-root) .Block-object>* {
            position: absolute;
            inset: 0;
            z-index: -2;
            width: 50%;
            height: 100%;
            object-fit: cover;
        }

        .Block-root.Block-fluid.Block-offset-y .Block-object {
            aspect-ratio: 1;
        }

        .Block-root.Block-fluid.Block-offset-y .Block-object>* {
            translate: 0 -100px;
        }

        .Block-root.Block-fluid.Block-fluid-100 {
            min-height: 100vh;
            min-height: 100dvh;
            align-content: center;
        }

        .Block-root.Block-fluid.Block-fluid-100 .Block-object>* {
            width: 100%;
        }

        .Block-root.Block-fluid .Block-object:last-child>* {
            margin-left: auto;
        }

        /* Parallax */
        .Block-root.BlockParallax-root.Block-fluid .Block-object>* {
            width: 50%;
            position: absolute;
        }
    }

    @media (max-width: 991.98px) {
        .Block-row {
            row-gap: 1.5rem;
        }

        .Block-root:is(.Block-fluid, .Block-static) .Block-row>:not(.Block-object) {
            order: 2;
        }

        .Block-root:is(.Block-fluid, .Block-static) .Block-object:last-child {
            order: 1;
        }

        .Block-root.Block-fluid .Block-object>* {
            border-radius: 1rem;
            aspect-ratio: 16 / 10;
            height: auto;
            width: 100%;
        }

        .Block-root.Block-static .Block-object>* {
            aspect-ratio: 16 / 12;
        }
    }
}

@layer Scroller {
    [data-scroll="lenis"] {
        height: 100vh;
        overflow: auto;
    }
}







/*--------------------------------------------------------------
# Back To Top
--------------------------------------------------------------*/

/* .back-to-top {
    position: fixed;
    right: clamp(15px, 3vw, 24px);
    bottom: clamp(15px, 3vw, 24px);
    display: grid;
    place-items: center;
}

.back-to-top>* {
    grid-area: 1 / -1;
}

.back-to-top svg {
    transform: rotate(-90deg);
}

.back-to-top svg circle {
    stroke: rgba(0, 0, 0, 0.1);
    stroke-width: 3px;
    stroke-linecap: round;
    fill: transparent;
    width: 100%;
}

.back-to-top svg .progress-bar {
    stroke: url(#grad);
    fill: #fff;
    transition: stroke-dashoffset 0s ease-in-out;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
}

.back-to-top .pct {
    color: var(--clr-dark);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    margin: 0;
    font-size: 14px;
    z-index: 1;
} */

::selection {
    background-color: var(--clr-gray-400);
    color: var(--clr-black);
}




/* Form Control */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    appearance: none;
    -moz-appearance: textfield;
}






/* Socials */
.socials-nav {
    --_flip-right: 180deg;
    --_flip-left: -180deg;
    --_menu-bg: hsl(0, 0%, 100%, 80%);
    --_menu-size: 1rem;
    --_list-size: 0.15rem;
    --_clr: #000;
    --_icon-bg: #1e1e1e;
    --_icon-size: 30px;
    --_icon-radius: 50%;

    position: fixed;
    z-index: 98;
    inset: auto 1rem 1rem auto;
    display: flex;
    gap: 1rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background-color: var(--_menu-bg);
    padding: var(--_menu-size) calc(var(--_menu-size) / 2);
    border-radius: calc(var(--_menu-size) + var(--_list-size));
    backdrop-filter: var(--_menu-size);
    border: 1px solid #e0e0e0;
    color: var(--_clr);
    white-space: nowrap;
}

.socials-nav li {
    rotate: var(--_flip-right);
    display: grid;
    grid-template-columns: 0fr;
    overflow: hidden;
    transition: grid-template-columns 1s cubic-bezier(0.198, 0.96, 0, 1) 0.25s;
}

.socials-nav li:hover {
    transition-delay: 0s;
    grid-template-columns: 1fr;
}

.socials-nav li .icon {
    width: var(--_icon-size);
    height: var(--_icon-size);
    display: inline-grid;
    place-content: center;
    line-height: var(--_icon-size);
    text-align: center;
    border-radius: 50%;
    background-color: var(--_icon-bg);
    rotate: var(--_flip-left);
    font-size: 1rem !important;
}

.socials-nav li .icon svg {
    color: #fff !important;
}

.socials-nav li .nav-link {
    background-image: unset;
    min-height: var(--_icon-size);
    color: inherit !important;
}






/* List */
.List-root {
    margin-block-end: 1rem;
    text-wrap-style: pretty;
}

.List-root.List-col-2 {
    columns: 2 280px;
}

.List-root.List-col-2>* {
    break-inside: avoid;
}

.List-root>*:not(:last-child) {
    margin-block-end: 0.725em;
}

.List-root>* {
    --clr: var(--clr-primary-main);
    padding: 0.35em 0.725em;
    border-left: 0.18em solid var(--clr);
}

.List-root>:nth-child(2n) {
    --clr: var(--clr-primary-dark);
}

.List-root>:nth-child(3n) {
    --clr: var(--clr-secondary-main);
}

.List-root>:nth-child(4n) {
    --clr: var(--clr-secondary-text);
}

.List-root.List-light>* {
    --clr: #fff;
}





/*=============================================
=            Form-Control            =
=============================================*/

/* Form Control */
.Form-root .row {
    row-gap: 1.5rem;
}

.FormControl-root {
    --_size-y: 50px;
    --_size-x: 100%;
    --_rounded: 0;
    --_fz: 1rem;
    --_fz-shrink: 0.725rem;
    --_autofill-bg: hsl(0, 0%, 00%, 10%);
    --_autofill-color: #000;
    position: relative;
    isolation: isolate;
}

.FormControl-root.FormControl-required :is(.FormLabel-root, legend) {
    contain: layout;
}

.FormControl-root.FormControl-required :is(.FormLabel-root, legend)::after {
    content: "*";
    color: #ff0000;
}

.FormControl-root .FormLabel-root {
    position: absolute;
    inset: 0;
    text-indent: 1rem;
    font-size: var(--_fz);
    transition: 500ms cubic-bezier(0.175, 0.92, 0.165, 1);
    pointer-events: none;
    height: var(--_size-y);
    line-height: var(--_size-y);
}

.FormControl-root:is(:focus-within, .FormControl-shrink) .FormLabel-root {
    /* .FormControl-root:has(.InputBase-input:not(:placeholder-shown), .InputBase-input:-webkit-autofill) .FormLabel-root { */
    transform: translateY(-50%);
    font-size: var(--_fz-shrink);
}


.FormControl-root .InputBase-root {
    display: grid;
}

.FormControl-root .InputBase-root>* {
    grid-area: 1 / -1;
}

.FormControl-root .InputBase-input {
    padding: 0.5rem 1rem;
    margin: 0;
    border: none;
    outline: none;
    height: var(--_size-y);
    box-sizing: border-box;
}

.FormControl-root select.InputBase-input {
    transition: all 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.FormControl-root select.InputBase-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 11.354a.5.5 0 0 0 .708 0L8 5.707l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708z'/%3e%3c/svg%3e");
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-size: 1rem 1rem;
    background-position: calc(100% - 1rem);
    background-repeat: no-repeat;
}

.FormControl-root select.InputBase-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 11.354a.5.5 0 0 0 .708 0L8 5.707l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708z'/%3e%3c/svg%3e");
    background-size: 1rem 1rem;
    background-position: calc(100% - 1rem);
    background-repeat: no-repeat;
}

.FormControl-root .InputBase-input option {
    font-size: initial;
    color: initial;
}

.FormControl-root .InputBase-input:-webkit-autofill {
    box-shadow: inset 0 0 0 100px var(--_autofill-bg) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--_autofill-color);
    color: var(--_autofill-color)
}

.FormControl-root fieldset {
    border: 1px solid currentColor;
    padding-inline: 0.5rem;
    position: absolute;
    inset: -0.5rem 0 0 0;
    pointer-events: none;
    height: calc(100% + 0.5rem);
    opacity: 0.5;
    box-sizing: border-box;
}

.FormControl-root:is(:hover, .FormControl-shrink) fieldset {
    opacity: 1;
}

.FormControl-root legend {
    all: revert-layer;
    margin: 0;
    font-size: 0;
    padding-inline: 0;
    height: 1rem;
    visibility: hidden;
    overflow: hidden;
    box-sizing: border-box;
    transition: 500ms cubic-bezier(0.175, 0.92, 0.165, 1);
}

.FormControl-root.FormControl-shrink legend {
    padding-inline: 0.5rem;
    font-size: var(--_fz-shrink);
}

.FormControl-root :is(.InputBase-input, fieldset) {
    width: 100%;
    border-radius: var(--_rounded, 0);
    -webkit-border-radius: var(--_rounded, 0);
    -moz-border-radius: var(--_rounded, 0);
    -ms-border-radius: var(--_rounded, 0);
    -o-border-radius: var(--_rounded, 0);
}

.FormControl-root:not(.FormControl-shrink) .InputBase-input:is([type="date"], select) {
    font-size: 0px;
    color: transparent;
}


/*=====  End of Form-Control  ======*/







.Block-reviews {
    min-height: min(80vh, 750px);
    min-height: min(80dvh, 750px);
    align-content: center;
}

.Block-reviews .Block-object>* {
    filter: brightness(0.5);
}

.Block-cta .Block-object>* {
    filter: brightness(0.5);
}

.Review-root {
    color: var(--clr-primary-light);
}

.Review-body {
    font-size: clamp(1.25rem, 1.5vw + 0.15rem, 1.5rem);
}

.Review-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.Review-footer .Review-thumb>* {
    width: 50px;
    border-radius: 50%;
    aspect-ratio: 1;
}

.Review-footer .Review-info * {
    font-family: var(--font-body);
}

.Review-footer .Review-info .Review-title>* {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    margin-block-end: 0.25rem;
    font-family: var(--font-title);
}

.Review-swiper::part(button-prev),
.Review-swiper::part(button-next) {
    inset: auto 0 0 auto;
    width: 30px;
    height: 30px;
    color: #fff;
    padding: 0.5rem;
    translate: 0 -50%;
}

.Review-swiper::part(button-prev) {
    translate: calc(-100% - 0.5rem) -50%;
}





.Marquee-root {
    --_gap: 1.5rem;
    --_duration: 15s;
    --_state: running;
    overflow: hidden;
}

.Marquee-root:is(:hover, :focus-within) {
    --_state: paused;
}

.Marquee-root .Marquee-track {
    display: flex;
    gap: var(--_gap, 1rem);
}

.Marquee-root .Marquee-track>* {
    flex: 1 0 100%;
    text-align: center;
    white-space: nowrap;
    animation: var(--_duration) Marquee linear infinite;
    animation-play-state: var(--_state);
}

.Marquee-root .Marquee-track>*>* {
    padding: 0.5em 1em;
    display: block;
}

.Marquee-primary {
    background-color: var(--clr-primary);
    color: var(--clr-accent);
}

.Marquee-instructions a {
    color: inherit;
    font-size: 1.5rem;
    font-weight: 600;
}

@keyframes Marquee {
    to {
        transform: translateX(-100%);
    }
}

/* 
<div class="Marquee-root">
    <div class="Marquee-track">
        <div class="Marquee-item">
            <span>Celebrate Valentine's Day with 10% off all orders at Chicken Hut! Treat your special someone to a meal made with love. </span>
        </div>
        
        <div class="Marquee-item">
            <span>Celebrate Valentine's Day with 10% off all orders at Chicken Hut! Treat your special someone to a meal made with love. </span>
        </div>
    </div>
</div>
 */










/*=============================================
=            Header-root            =
=============================================*/

.Header-root {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 99;
    padding-block: 0.5rem;
}

/*=====  End of Header-root  ======*/











/*=============================================
=            Solution-root            =
=============================================*/

.Solutions-grid {
    display: flex;
    gap: 0.25rem;
}

.Solutions-grid>* {
    flex: 1;
    width: 100%;
    height: 580px;
    contain: paint;
    transition: 0.725s cubic-bezier(0.245, 0.98, 0, 1.25);
}

.Solutions-grid>*:hover {
    flex-grow: 2;
}

.Solutions-grid .Solution-thumbnail>* {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

@media (max-width: 991.98px) {
	.Solutions-grid .Solution-thumbnail>* {
		filter: brightness(0.25);
	}
}

.Solution-root {
    display: grid;
    border-radius: 1rem;
    contain: paint;
    height: 100%;
}

.Solution-root>* {
    grid-area: 1 / -1;
}

.Solution-root .Solution-caption {
    padding: 1.5rem;
    text-align: center;
    color: #fff;
    border-image: fill 0 linear-gradient(to top, hsl(0, 0%, 0%, 60%) 20%, transparent 60%);
    align-content: end;
}

@media (min-width: 992px) {
    .Solution-root .title>* {
        font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
        white-space: nowrap;
        transition: 700ms cubic-bezier(0.222, 0.88, 0, 1);
        margin-bottom: 1rem;
    }

    .Solution-root .content>* {
        transition: 700ms cubic-bezier(0.222, 0.88, 0, 1);
    }

    .Solutions-grid:hover .Solution-root:not(:hover) .title>* {
        opacity: 0;
        scale: 0.725;
    }

    .Solutions-grid:hover .Solution-root:not(:hover) .content>* {
        opacity: 0;
        scale: 0.725;
    }
}

@media (max-width: 991.98px) {
    .Solutions-grid {
        flex-wrap: wrap;
    }

    .Solutions-grid>* {
        flex: 1 0 min(max(100% / 3 - 0.25rem, 300px), 100%);
        height: auto;
        max-height: 300px;
        aspect-ratio: 1;
    }

    .Block-root {
        overflow: hidden;
    }

    .Block-reviews {
        min-height: min(50vh, 750px);
        min-height: min(50dvh, 750px);
    }

    #Hero-root.Hero-banner {
        min-height: 100vh;
        min-height: 60dvh;
        padding-block: 120px 50px;
    }
}

/*=====  End of Solution-root  ======*/











/*=============================================
=            Why Us            =
=============================================*/

.Block-why {
    min-height: min(80vh, 700px);
    min-height: min(80dvh, 700px);
    align-content: center;
}

/*=====  End of Why Us  ======*/












/*=============================================
=            BLock-header            =
=============================================*/

.Header-root {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 99;
    color: var(--clr-primary-light);
}

.Navbar-root {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.Navbar-root .Navbar-brand {
    max-width: min(30vw, 150px);
    margin-inline-end: auto;
}

.Navbar-root .Navbar-nav {
    display: flex;
    gap: 3rem;
}

.Navbar-root .Navbar-nav a {
    color: inherit;
}

.Navbar-root .Button-sidebar {
    background-color: transparent;
    color: var(--clr-primary-light);
    contain: paint;
    width: 50px;
    height: 50px;
    margin-left: 3rem;
}

.Navbar-root .Button-sidebar i {
    position: absolute;
    inset: 0;
    height: 2px;
    border-radius: 100vmax;
    width: 30px;
    background-color: var(--clr-primary-light);
    margin: auto;
    transform-origin: right;
    transition: 1s all cubic-bezier(0.233, 0.88, 0.111, 1);
}

.Navbar-root .Button-sidebar i:nth-child(1) {
    translate: 0 -0.575rem;
}

.Navbar-root .Button-sidebar i:nth-child(2) {
    scale: 0.575 1;
}

.Navbar-root .Button-sidebar i:nth-child(3) {
    translate: 0 0.575rem;
    scale: 0.825 1;
}

.Navbar-root .Button-sidebar:hover i:nth-child(1) {
    scale: 0.825 1;
}

.Navbar-root .Button-sidebar:hover i:nth-child(2) {
    scale: 1 1;
}

.Navbar-root .Button-sidebar:hover i:nth-child(3) {
    scale: 0.625 1;
}

@media (max-width: 991.98px) {
    #Navbar-nav {
        display: none;
    }
}

/*=====  End of BLock-header  ======*/










/*=============================================
=            Drawer-root            =
=============================================*/

.Drawer-root {
    position: fixed;
    inset: 0;
    z-index: 999;
    backdrop-filter: blur(0);
    transition: var(--duration) backdrop-filter cubic-bezier(0.245, 0.97, 0.125, 1);
}

.Drawer-root.Drawer-open {
    backdrop-filter: blur(1rem);
}

.Drawer-root[data-direction="left"] .Drawer-container {
    right: auto;
}

.Drawer-root[data-direction="right"] .Drawer-container {
    left: auto;
}

.Drawer-root[data-direction="top"] .Drawer-container {
    bottom: auto;
}

.Drawer-root[data-direction="bottom"] .Drawer-container {
    top: auto;
}

.Drawer-root::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: hsl(0 0% 0% / 50%);
    opacity: 0;
    transition: var(--duration) opacity cubic-bezier(0.245, 0.97, 0.125, 1);
}

.Drawer-root.Drawer-open::before {
    opacity: 1;
}


.Drawer-container {
    width: 100%;
    position: absolute;
    inset: 0;
    height: 100%;
    background-color: var(--drawer-bg, #000);
    max-width: var(--drawer-width, 450px);
    overflow-y: auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
}


.Drawer-root[data-direction="top"] .Drawer-container,
.Drawer-root[data-direction="bottom"] .Drawer-container {
    --drawer-width: 100%;
}

.Drawer-root[data-direction="left"] .Drawer-container {
    box-shadow: var(--drawer-shadow, 2rem 0 3rem 0 hsl(0, 0%, 0%, 50%));
}

.Drawer-root[data-direction="right"] .Drawer-container {
    box-shadow: var(--drawer-shadow, -2rem 0 3rem 0 hsl(0, 0%, 0%, 50%));
}

.Drawer-container>* {
    padding: var(--drawer-padding, 1.5rem);
    background-color: var(--drawer-bg, #000);
}

.Drawer-header {
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--drawer-border, hsl(0, 0%, 10%));
    z-index: 9;
}

.Drawer-footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--drawer-border, hsl(0, 0%, 10%));
}

.Drawer-root.Drawer-collapsing {
    transition: 1s transform cubic-bezier(0.145, 0.88, 0.122, 1);
}

[data-drawer-close] {
    font-size: 1.25rem;
}





#Drawer-sidebar {
    --drawer-bg: hsl(0, 0%, 0%, 50%);
}

#Drawer-sidebar [data-drawer-close] {
    background-color: transparent;
    backdrop-filter: unset;
    color: var(--clr-primary-light);
}

#Drawer-sidebar .Navbar-brand {
    background-image: unset;
    max-width: 120px;
}

#Drawer-sidebar .Drawer-footer {
    display: flex;
    align-items: center;
}

#Drawer-sidebar .Social-root {
    margin-left: 1rem;
}

#Drawer-sidebar .Sidebar-nav a {
    color: var(--clr-primary-light);
    font-size: clamp(1rem, 2.5vw + 1rem, 2.5rem);
    font-family: var(--font-title);
}

#Drawer-sidebar .Sidebar-nav>:not(:last-child) {
    margin-block-end: 1rem;
}

#Drawer-sidebar .Drawer-body {
    padding: clamp(1rem, 3vw + 1rem, 3rem);
}

/*=====  End of Drawer-root  ======*/












.Social-root {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.Social-root .Social-link {
    text-align: center;
    display: block;
    align-content: center;
    background-color: transparent;
    backdrop-filter: unset;
    color: var(--clr-primary-light);
}

.Social-root .Social-link::before {
    width: 100% !important;
}

.Social-root .Social-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.25;
    border: 1.5px solid currentColor;
}

.Social-root .Social-link::after {
    content: "";
    transition: all 400ms cubic-bezier(1, 0.88, 0.111, 1);
    position: absolute;
    inset: 0;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    clip-path: inset(50%);
}

.Social-root .Social-link:hover::after {
    clip-path: inset(0%);
}








/* Hero-inner */
.Hero-inner {
    text-align: center;
    color: #fff;
    min-height: min(60vh, 550px);
    min-height: min(60dvh, 550px);
    align-content: end;
    padding-block: 120px 120px;
    background-color: var(--clr-primary-text);
}

/* .Hero-inner .Hero-content {
    scale: 0.725;
    opacity: 0;
    transition: 1s all cubic-bezier(0.275, 0.82, 0.165, 1) 1s;
}

.Hero-inner.aos-animate .Hero-content {
    scale: 1;
    opacity: 1;
}
 */
.Hero-inner .Block-object {
    position: absolute;
    inset: 0;
    filter: brightness(0.25);
	z-index: -2;
/*     clip-path: inset(0 0 100% 0);
    transition: 1.5s all var(--easeInOutExpo); */
}

/* .Hero-inner.aos-animate .Block-object {
    clip-path: inset(0); */
}

.Hero-inner .Block-object>* {
	z-index: -2;
    position: absolute;
    inset: 0;
}

.Hero-inner .Block-heading>*:not(span, p) {
    color: inherit;
    font-size: clamp(1.5rem, 3vw + 1.5rem, 60px);
}

@media (max-width: 992px) {
    .Hero-inner {
        padding-block: 120px 60px;
        min-height: min(50vh, 450px);
        min-height: min(50dvh, 450px);
    }
}








/*=============================================
=            Post-root            =
=============================================*/

.Post-root {
    color: var(--clr-primary-text);
    display: block;
}

.Post-root .Post-thumb {
    aspect-ratio: 1;
    width: 100%;
    max-height: 500px;
    contain: paint;
    display: grid;
    border-radius: 1rem;
}

.Post-root .Post-thumb>* {
    grid-area: 1 / -1;
}

.Post-root .Post-thumb img {
    width: 100%;
    height: 100%;
    z-index: -2;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: 200ms ease;
}

.Post-root:hover .Post-thumb img {
    scale: 1.14;
}

.Post-root .Post-thumb .Post-tags {
    z-index: 2;
    padding: 1.25rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    border-image: fill 0 linear-gradient(to bottom, hsl(0, 0%, 0%, 60%), hsl(0, 0%, 0%, 40%), transparent, transparent);
}

.Post-root .Post-thumb .Post-tags>* {
    padding: 0.575rem 1em;
    font-size: 80%;
    line-height: 1;
    border-radius: 100vmax;
    background-color: hsl(0, 0%, 100%, 10%);
    color: #fff;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.Post-root .Post-thumb .Post-tags>*::before {
    content: "";
    width: 0.5rem;
    aspect-ratio: 1;
    background-color: #00c203;
    border-radius: 50%;
}

.Post-root .Post-content {
    padding: 1rem;
}

.Post-root .Post-title>* {
    font-family: var(--font-body);
    line-height: 1.5;
    font-size: clamp(1.15rem, 1vw + 0.5rem, 1.25rem);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.Post-root .Post-details {
    display: flex;
    gap: 1rem;
    margin-block: 0.725rem;
}

.Post-root .Post-price>* {
    font-size: clamp(1.25rem, 1vw + 0.5rem, 1.5rem);
}

/*=====  End of Post-root  ======*/











/*=============================================
=            Footer-root            =
=============================================*/

.Footer-root {
    padding-block: 40px;
}

.Footer-bottom .copyrights {
    text-align: center;
}

.Footer-socials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(200px, 100% / 4 - 1.5rem)), 1fr));
    margin-block: 3rem 1rem;
    gap: 1.5rem;
}

.Footer-socials .Social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    padding-block: 0.5em;
    border-top: 1px solid currentColor;
    color: var(--clr-primary-text);
    background-image: unset;
}

.Footer-socials .Social-link i {
    width: 35px;
    aspect-ratio: 1;
    text-align: center;
    align-content: center;
    background-color: hsl(0, 0%, 10%, 10%);
    border-radius: 100vmax;
    transition: all 200ms ease;
}

.Footer-socials .Social-link:hover i {
    background-color: var(--clr-primary-main);
    color: var(--clr-primary-light);
}

.Footer-root :is(.row .container) {
    --bs-gutter-x: 4rem;
}

.Footer-root .row {
    row-gap: 2.5rem;
}

.Footer-root .Footer-site-info .logo {
    max-width: 150px;
    display: block;
    background-image: unset;
    margin-block-end: 1.5rem;
}

.Footer-root .Footer-site-info .logo {
    max-width: 150px;
    margin-block-end: 1.5rem;
}

.Footer-root .Footer-site-info .title>* {
    font-family: var(--font-body);
    color: var(--clr-primary-text);
    margin-block-end: 1rem;
    font-size: clamp(1.15rem, 1.35vw + 0.15rem, 1.35rem);
}

.Footer-root .Widget-title>* {
    color: var(--clr-primary-text);
    font-family: var(--font-body);
    font-size: clamp(1.15rem, 1.5vw + 0.15rem, 1.5rem);
    font-weight: 600;
    margin-bottom: 1em;
}

.Footer-root .contact-list>:not(:last-child) {
    margin-block-end: 1em;
    padding-block-end: 1em;
    border-bottom: 1px dashed #ccc;
}

.Footer-root .contact-list>* {
    display: flex;
    gap: 0.575rem;
    align-items: center;
}

.Footer-root .contact-list i {
    width: 35px;
    aspect-ratio: 1;
    align-content: center;
    text-align: center;
    background-color: var(--clr-primary-light);
    border-radius: 50%;
    color: var(--clr-primary-main);
}

.Footer-root .Quick-nav>:not(:last-child) {
    margin-block-end: 1em;
}

@media (min-width: 992px) {
    .Footer-root {
        position: sticky;
        inset: auto 0 0 0;
        z-index: -1;
    }

    .Footer-root .row {
        gap: 3.5rem;
        flex-wrap: nowrap;
        margin: 0;
    }

    .Footer-root .row>* {
        flex: 1;
        padding-inline: 0;
    }
}

@media (max-width: 575.98px) {

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

    .Footer-root .contact-list>* {
        justify-content: center;
        flex-direction: column;
    }

    .Footer-root .Footer-site-info .logo {
        margin-inline: auto;
    }
}

/*=====  End of Footer-root  ======*/

.Main-root {
    background-color: var(--clr-white);
}






.Post-blog .Post-excerpt {
    margin-top: 1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}


.Post-blog .row {
    row-gap: 2.5rem;
}

.Post-blog .Post-root .Post-thumb {
    aspect-ratio: 1 / 0.6;
}

.Post-root .Post-content {
    display: flex;
    flex-direction: column;
}

.Post-root .Post-content .Post-tags {
    margin-block-start: auto;
}

.Post-root .Post-content .Post-tags>* {
    display: inline-block;
    padding: 0.25em 1.5em;
    background-color: var(--clr-primary-main);
    color: var(--clr-primary-light);
    border-radius: 100vmax;
}

.Post-root .Post-content .Post-tags>* {
    display: inline-block;
    padding: 0.35em 1.5em;
    background-color: var(--clr-secondary-main);
    color: var(--clr-secondary-text);
    border-radius: 100vmax;
}

@media (max-width: 991.98px) {
    .Post-root .Post-content .Post-tags {
        margin-block-start: 1rem;
    }

    .Post-root .Post-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
}

@media (min-width: 992px) {
    .Post-blog .row {
        --bs-gutter-x: 2.5rem;
    }
}






.Progress-root {
    --size: 120px;
    --stroke: 5;
    --radius: 45;
    --circumference: calc(2 * 3.1416 * var(--radius));
    --offset: calc(var(--circumference) * (1 - var(--_progress) / 100));
    --hue: calc(var(--_progress) * 1.5);
    --stroke-color: hsl(var(--hue), 100%, 45%);
    width: var(--size);
    height: var(--size);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.Progress-root::before {
    content: attr(data-progress) "%";
    position: absolute;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

.Progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.Progress-track,
.Progress-bar {
    fill: none;
    stroke-width: var(--stroke);
}

.Progress-track {
    stroke: #eee;
}

.Progress-bar {
    stroke: var(--stroke-color);
    stroke-dasharray: var(--circumference);
    stroke-dashoffset: var(--offset);
}



.Bento-grid {
    display: grid;
    gap: 1.5rem;
}

.Bento-grid .Bento-object>* {
    border-radius: 1rem;
    width: 100%;
    aspect-ratio: 1 / 0.75;
    max-height: 500px;
    object-fit: cover;
}

.Bento-grid .Social-root>* {
    flex: 1;
}

.Bento-grid .Social-root .Social-link {
    background-color: var(--clr-primary-text);
    padding: 1.5rem;
    width: 100%;
    border-radius: 1rem;
    aspect-ratio: 1;
    max-height: 100px;
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem)
}

.Bento-grid .Social-root .Social-link::before {
    content: none;
}

.Bento-grid .Social-root .Social-link::after {
    content: none;
}

.Bento-grid .Social-root .Social-link span {
    display: none;
}

.Block-bento {
    padding-bottom: clamp(60px, 10vw + 3rem, 120px);
}

.Bento-card {
    display: grid;
    contain: paint;
    color: var(--clr-primary-light);
    border-radius: 1rem;
}

.Bento-card>* {
    grid-area: 1 / -1;
}

.Bento-card .Card-thumb {
    z-index: -2;
}

.Bento-card.Card-bg {
    min-height: 350px;
    background-color: var(--clr-primary-text);
}

.Bento-card.Card-bg .Progress-root::before {
    color: var(--clr-primary-light);
}

.Bento-card .Card-thumb>* {
    height: 100%;
    object-fit: cover;
    min-height: 350px;
}

.Bento-card :is(.Card-header, .Card-body) {
    padding: 1.5rem;
}

.Bento-card .Card-body {
    align-content: end;
    border-image: fill 0 linear-gradient(to top, hsl(0, 0%, 0%, 80%), transparent, transparent);
}

.Bento-card .Card-title>* {
    font: normal 500 clamp(1.25rem, 1.25vw + 0.25rem, 1.5rem)/1.25 var(--font-body);
    margin-block-end: 0.5em;
}

.Bento-card .Card-header .Card-tags>* {
    background-color: var(--clr-primary-text);
    display: inline-block;
    padding: 0.35em 1.5em;
    border-radius: 100vmax;
    font-size: 85%;
}

.Bento-card .Card-action a {
    color: var(--clr-primary-light);
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
    background-size: 100% 1px;
}


.Bento-grid {
    grid-template-areas: "one four six eight"
        "two four seven eight"
        "three four seven eight"
        "three five seven nine";
    grid-template-columns: 25% auto auto 25%;
}

.Bento-grid .Bento-object>* {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.Bento-grid>:nth-child(1) {
    grid-area: one;
}

.Bento-grid>:nth-child(2) {
    grid-area: two;
}

.Bento-grid>:nth-child(3) {
    grid-area: three;
}

.Bento-grid>:nth-child(4) {
    grid-area: four;
}

.Bento-grid>:nth-child(5) {
    grid-area: five;
}

.Bento-grid>:nth-child(6) {
    grid-area: six;
}

.Bento-grid>:nth-child(7) {
    grid-area: seven;
}

.Bento-grid>:nth-child(8) {
    grid-area: eight;
}

.Bento-grid>:nth-child(9) {
    grid-area: nine;
}


@media (max-width: 991.98px) {
    .Bento-grid {
        grid-template-areas:
            "one  "
            "two  "
            "three"
            "four "
            "five "
            "six  "
            "seven"
            "eight"
            "nine ";
        grid-template-columns: 1fr;
    }
}








.Block-article .Post-body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-body);
    color: var(--clr-primary-text);
    margin: 0;
}

.Block-article .Post-body :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 2em 0.5em;
}

.Block-article .Post-body :is(h1, h2, h3, h4, h5, h6)+ :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
}

.Block-article :is(ul, ol)>* {
    padding: 0.25em;
    padding-inline-start: 0.5em;
    border-left: 0.15em solid currentColor;
}

.Block-article :is(ul, ol)>*:not(:last-child) {
    margin-block-end: 1em;
}













/* Single Property */
.General-item {
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: hsl(0, 0%, 20%, 10%);
    border: 1px solid hsl(0, 0%, 100%, 20%);
    backdrop-filter: blur(0.5rem);
    border-radius: 0.5rem
}

.General-item i {
    width: 50px;
    aspect-ratio: 1;
    margin-inline: auto;
    background-color: var(--clr-primary-light);
    color: var(--clr-primary-main);
    text-align: center;
    align-content: center;
    border-radius: 50%;
    margin-block-end: 1rem;
}

.General-item strong {
    contain: layout;
    font-size: var(--clamp-sub-title);
    margin-block-end: 1rem;
    padding-block-end: 0.5rem;
}

.General-item strong::before {
    content: "";
    position: absolute;
    inset: 100% 0 auto 0;
    height: 1px;
    width: 50%;
    margin-inline: auto;
    background-color: var(--clr-primary-light);
    opacity: 0.25;
}



.Block-gallery .row {
    row-gap: 1.5rem;
}

.Gallery-item {
    display: block;
    border-radius: 0.725rem;
    overflow: hidden;
    aspect-ratio: 1;
    width: 100%;
}

.Gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 200ms ease;
}

.Gallery-item:hover img {
    transform: scale(1.15);
}






/* About PAge */
.About-properties .row {
    --bs-gutter-x: 0;
    margin-block: 5rem 3rem;
    justify-content: center;
}

.About-properties .Property-root {
    display: grid;
    aspect-ratio: 1 / 1.25;
    width: 100%;
}

.About-properties .Property-root .Property-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.About-properties .Property-root>* {
    grid-area: 1 / -1;
}

.About-properties .row>*:nth-child(even) .Property-root {
    translate: 0 -2rem;
}

.About-properties .Property-root .Property-content {
    padding: 1rem;
    z-index: 2;
    border-image: fill 0 linear-gradient(to top, #000, transparent);
    color: var(--clr-primary-light);
    align-content: end;
}

.About-properties .Property-root .Property-content h3 {
    font-family: var(--font-body);
    font-weight: 600;
    margin-block-end: 1rem;
}



.property-filters {
    gap: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.property-filters .tab-link {
    padding: 0.35em 1.5em;
    border: 0;
    border-radius: 100vmax;
}

.property-filters .tab-link.active {
    background-color: var(--clr-primary-main);
    color: #fff;
}

.Post-properties .row {
    row-gap: 1.5rem;
    justify-content: center;
}







.Founder-swiper::part(wrapper) {
    transition-timing-function: linear !important;
}

.Founder-root {
    padding: 1rem;
}

.Founder-root .Founder-thumb {
    max-width: 3rem;
}

.Founder-root .Founder-name>* {
    font-weight: 700;
    display: block;
    margin-block: 1em 0.5em;
}

.Founder-root .description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    font-size: 80%;
}






/*=============================================
=            Block Contact            =
=============================================*/

.Block-contact .row {
    row-gap: 1.5rem;
}

.Block-contact .InputBase-input {
    background-color: transparent;
}

.Block-contact fieldset {
    border: 0;
    border-bottom: 1px solid currentColor;
}

.Block-contact form {
    margin-top: 3rem;
}

/*=====  End of Block Contact  ======*/







.Block-founders .Founder-rows {
    margin-block-start: 3rem;
}

.Block-founders .Founder-box h2 {
    font-size: clamp(1.75rem, 2vw + 0.5rem, 2.5rem);
}

.Block-founders .Founder-box .Block-heading {
    margin-block-end: 1rem;
}

.Block-founders .row:not(:last-child) {
    margin-block-end: 3rem;
}

.Block-founders .row .col-lg-5 {
    background-color: #efe0c9;
    box-shadow: 0 0 0 100vmax #efe0c9;
    clip-path: inset(0 -100vmax 0 0);
    aspect-ratio: 16 / 9;
}

.Block-founders .row+.row .col-lg-5 {
    clip-path: inset(0 0 0 -100vmax);
}

.Block-founders .row>:not(.col-lg-5) {
    align-self: center;
}

@media (min-width: 992px) {
    .Block-founders .row {
        gap: 3rem;
        margin: 0;
        flex-wrap: nowrap;
    }

    .Block-founders .row>* {
        width: auto;
        flex: 1;
    }

    .Block-founders .row>:not(.col-lg-5) {
        flex: 1.5;
    }
}

@media (max-width: 992px) {
    .Block-founders .row {
        text-align: center;
    }

    .Block-founders .row>.col-lg-5 {
        display: none;
    }
}

.Post-properties .Post-root .Post-thumb img {
	object-fit: contain;
	padding: 1.5rem;
	background-color: #fff;
}


.Block-contact .wpcf7-not-valid-tip {
    height: 0;
    font-size: 80%;
}


.Block-contact.Block-contact textarea {
    min-height: 60px;
    height: 100px;
}





.cc-calto-action-ripple {
	z-index: 99999;
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	background: #fdc260;
	width: 4rem;
	height: 4rem;
	padding: 1rem;
	border-radius: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #042b2b;
	-webkit-animation: cc-calto-action-ripple 0.6s linear infinite;
	animation: cc-calto-action-ripple 0.6s linear infinite;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.cc-calto-action-ripple i {
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
	font-size: 2.2rem;
	color: #042b2b;
	font-size: 1.5rem;
}
.cc-calto-action-ripple:hover i {
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

@-webkit-keyframes cc-calto-action-ripple {
	0% {
		box-shadow:
			0 4px 10px rgba(253, 194, 96, 0.2),
			0 0 0 0 rgba(253, 194, 96, 0.2),
			0 0 0 5px rgba(253, 194, 96, 0.2),
			0 0 0 10px rgba(253, 194, 96, 0.2);
	}
	100% {
		box-shadow:
			0 4px 10px rgba(253, 194, 96, 0.2),
			0 0 0 5px rgba(253, 194, 96, 0.2),
			0 0 0 10px rgba(253, 194, 96, 0.2),
			0 0 0 20px rgba(253, 194, 96, 0);
	}
}

@keyframes cc-calto-action-ripple {
	0% {
		box-shadow:
			0 4px 10px rgba(253, 194, 96, 0.2),
			0 0 0 0 rgba(253, 194, 96, 0.2),
			0 0 0 5px rgba(253, 194, 96, 0.2),
			0 0 0 10px rgba(253, 194, 96, 0.2);
	}
	100% {
		box-shadow:
			0 4px 10px rgba(253, 194, 96, 0.2),
			0 0 0 5px rgba(253, 194, 96, 0.2),
			0 0 0 10px rgba(253, 194, 96, 0.2),
			0 0 0 20px rgba(253, 194, 96, 0);
	}
}