:root {
    --grid-columns: 12;
    --grid-col: 1fr;
    --grid-column-gap: 20px;
    --grid-row-gap: 20px;
    --header-height: 0;
    --default-block-padding-ver: 6.25rem;
    --layout-width: 1060px;
    --layout-width-gutter: calc((100vw - var(--layout-width)) / 2);
    --primary-font-family: "Raleway", "Arial", "sans-serif";
    --secondary-font-family: "Lato", "Arial", "sans-serif";
    --color-blue-h: 220;
    --color-blue-s: 100%;
    --color-blue-l: 50%;
    --color-blue: #05f;
    --color-blue-hover: hsl(var(--color-blue-h), var(--color-blue-s), calc(var(--color-blue-l) - 5%));
    --color-gray-h: 240;
    --color-gray-s: 11%;
    --color-gray-l: 95%;
    --color-gray: #f0f0f3;
    --color-text-on-light: #121212;
    --color-primary: var(--color-blue);
    --color-primary-hover: var(--color-blue-hover);
    --color-box-shadow-white-h: 0;
    --color-box-shadow-white-s: 0%;
    --color-box-shadow-white-l: 100%;
    --color-box-shadow-top-outer: #fff;
    --color-box-shadow-gray-h: 240;
    --color-box-shadow-gray-s: 12%;
    --color-box-shadow-gray-l: 72%;
    --color-box-shadow-bottom-outer: hsla(var(--color-box-shadow-gray-h), var(--color-box-shadow-gray-s), var(--color-box-shadow-gray-l), 0.4);
    --color-box-shadow-top-inner: hsla(var(--color-box-shadow-gray-h), var(--color-box-shadow-gray-s), var(--color-box-shadow-gray-l), 0.2);
    --color-box-shadow-bottom-inner: hsla(var(--color-box-shadow-white-h), var(--color-box-shadow-white-s), var(--color-box-shadow-white-l), 0.7);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-hover);
    --tui-heading-font: "Manrope", -apple-system, "BlinkMacSystemFont", system-ui, "Roboto", "Segoe UI", "Helvetica Neue", sans-serif;
    --tui-text-font: "Manrope", -apple-system, "BlinkMacSystemFont", system-ui, "Roboto", "Segoe UI", "Helvetica Neue", sans-serif;
    --tui-font-heading: var(--tui-heading-font);
    --tui-font-heading-1: bold 3.125rem/3.5rem var(--tui-font-heading);
    --tui-font-heading-2: bold 2.75rem/3rem var(--tui-font-heading);
    --tui-font-heading-3: bold 2.25rem/2.5rem var(--tui-font-heading);
    --tui-font-heading-4: bold 1.75rem/2rem var(--tui-font-heading);
    --tui-font-heading-5: bold 1.5rem/1.75rem var(--tui-font-heading);
    --tui-font-heading-6: bold 1.25rem/1.5rem var(--tui-font-heading);
    --tui-font-text: var(--tui-text-font);
    --tui-font-text-xl: normal 1.1875rem/1.75rem var(--tui-font-text);
    --tui-font-text-l: normal 1.0625rem/1.5rem var(--tui-font-text);
    --tui-font-text-m: normal 0.9375rem/1.5rem var(--tui-font-text);
    --tui-font-text-s: normal 0.8125rem/1.25rem var(--tui-font-text);
    --tui-font-text-xs: normal 0.6875rem/1rem var(--tui-font-text);
    --tui-radius-xs: 0.25rem;
    --tui-radius-s: 0.5rem;
    --tui-radius-m: 0.625rem;
    --tui-radius-l: 0.625rem;
    --tui-height-xs: 1.5rem;
    --tui-height-s: 2rem;
    --tui-height-m: 2.75rem;
    --tui-height-l: 3.5rem;
    --tui-duration: 0.3s;
    --tui-disabled-opacity: 0.56;
    --tui-autofill: #fff5c0;
    --tui-base-01: #fff;
    --tui-base-02: #f6f6f6;
    --tui-base-03: #ededed;
    --tui-base-04: #d7d7d7;
    --tui-base-05: #b0b0b0;
    --tui-base-06: #959595;
    --tui-base-07: grey;
    --tui-base-08: #333;
    --tui-base-09: #000;
    --tui-primary: #526ed3;
    --tui-primary-hover: #6c86e2;
    --tui-primary-active: #314692;
    --tui-primary-text: #fff;
    --tui-secondary: #ebefff;
    --tui-secondary-hover: #dfe3f3;
    --tui-secondary-active: #d8ddf2;
    --tui-accent: #ff8078;
    --tui-accent-hover: #ff9a94;
    --tui-accent-active: #e7716a;
    --tui-accent-text: #fff;
    --tui-selection: rgba(112, 182, 246, .12);
    --tui-focus: rgba(51, 51, 51, .64);
    --tui-clear: rgba(0, 0, 0, .08);
    --tui-clear-disabled: rgba(0, 0, 0, .04);
    --tui-clear-hover: rgba(0, 0, 0, .16);
    --tui-clear-active: rgba(0, 0, 0, .2);
    --tui-clear-inverse: hsla(0, 0%, 100%, .16);
    --tui-clear-inverse-hover: hsla(0, 0%, 100%, .24);
    --tui-clear-inverse-active: hsla(0, 0%, 100%, .4);
    --tui-error-fill: #f45725;
    --tui-error-bg: rgba(244, 87, 37, .12);
    --tui-error-bg-hover: rgba(244, 87, 37, .24);
    --tui-success-fill: #4ac99b;
    --tui-success-bg: rgba(74, 201, 155, .12);
    --tui-success-bg-hover: rgba(74, 201, 155, .24);
    --tui-warning-fill: #ffc700;
    --tui-warning-bg: rgba(255, 199, 0, .12);
    --tui-warning-bg-hover: rgba(255, 199, 0, .24);
    --tui-info-fill: #70b6f6;
    --tui-info-bg: rgba(112, 182, 246, .12);
    --tui-info-bg-hover: rgba(112, 182, 246, .24);
    --tui-neutral-fill: #79818c;
    --tui-neutral-bg: hsla(215, 8%, 51%, .12);
    --tui-neutral-bg-hover: hsla(215, 8%, 51%, .24);
    --tui-text-01: #1b1f3b;
    --tui-text-02: rgba(27, 31, 59, .65);
    --tui-text-03: rgba(27, 31, 59, .4);
    --tui-link: #526ed3;
    --tui-link-hover: #6c86e2;
    --tui-positive: #3aa981;
    --tui-positive-hover: #7ac5aa;
    --tui-negative: #dd4c1e;
    --tui-negative-hover: #e38163;
    --tui-error-fill-night: #ff8c67;
    --tui-error-bg-night: rgba(244, 87, 37, .32);
    --tui-error-bg-night-hover: rgba(244, 87, 37, .4);
    --tui-success-fill-night: #4ac99b;
    --tui-success-bg-night: rgba(74, 201, 155, .32);
    --tui-success-bg-night-hover: rgba(74, 201, 155, .4);
    --tui-warning-fill-night: #ffc700;
    --tui-warning-bg-night: rgba(255, 199, 0, .32);
    --tui-warning-bg-night-hover: rgba(255, 199, 0, .4);
    --tui-info-fill-night: #70b6f6;
    --tui-info-bg-night: rgba(112, 182, 246, .32);
    --tui-info-bg-night-hover: rgba(112, 182, 246, .4);
    --tui-neutral-fill-night: #959ba4;
    --tui-neutral-bg-night: #959ba4;
    --tui-neutral-bg-night-hover: #959ba4;
    --tui-autofill-night: #554a2a;
    --tui-text-01-night: #fff;
    --tui-text-02-night: hsla(0, 0%, 100%, .72);
    --tui-text-03-night: hsla(0, 0%, 100%, .6);
    --tui-link-night: #6788ff;
    --tui-link-night-hover: #526ed3;
    --tui-positive-night: #44c596;
    --tui-positive-night-hover: #3aa981;
    --tui-negative-night: #ff8c67;
    --tui-negative-night-hover: #bb593a;
    --tui-support-01: #a8cef1;
    --tui-support-02: #3682db;
    --tui-support-03: #8dda71;
    --tui-support-04: #34b41f;
    --tui-support-05: #e29398;
    --tui-support-06: #b8474e;
    --tui-support-07: #fcc068;
    --tui-support-08: #ff8a00;
    --tui-support-09: #dab3f9;
    --tui-support-10: #7b439e;
    --tui-support-11: #fee797;
    --tui-support-12: #fcbb14;
    --tui-support-13: #ea97c4;
    --tui-support-14: #bd65a4;
    --tui-support-15: #7fd7cc;
    --tui-support-16: #2fad96;
    --tui-support-17: #d4aca2;
    --tui-support-18: #9d6f64;
    --tui-support-19: #d2e9a2;
    --tui-support-20: #aadc42;
    --tui-support-21: #a0c5df;
    --tui-support-22: #3c7ba8;

}

.shadow-card {
    padding: 50px 24px;
    box-sizing: border-box;
    background: var(--color-gray);
    box-shadow: -10px -10px 30px var(--color-box-shadow-top-outer), 10px 10px 30px var(--color-box-shadow-bottom-outer);
    min-height: 350px;
    margin-bottom: 30px;
}

.cases .shadow-card {
    padding: 0 !important;
    min-height: 10px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 60px;
}

.shadow-card ul {
    list-style: none;
}

.shadow-card ul li {
    padding-left: 20px;
    border-left: 5px solid #666;
    margin: 5px 0;
}

.section-waves {
    background: var(--color-gray);
}

.contact .section-logo {
    text-align: right;
}

.contact table tr td {
    padding: 5px 0;
    padding-right: 30px;
}

.contact .section-logo img {
    max-width: 128px;
}

.contact-section {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

.fadeInDown {
    animation: fadeInDown 1s;
    -webkit-animation: fadeInDown 1s;
}

.case-img {
    /* Set the width of the image */
    transition: all 0.3s ease-in-out;
    /* Add a transition effect */
}

.case-img:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    /* Add a shadow when the mouse moves over the image */
    /* transform: scale(5); */
    /* Zoom in the image by 10% */
}

.shadow-card {
    transition: all 0.3s ease-in-out;
    border-radius: 12px;
}

.shadow-card:hover {
    box-shadow: 0 0 30px rgba(0,0,0,.2);
}

@keyframes fluorescent {
    0% {
        box-shadow: 0 0 30px #9357cc;
    }

    50% {
        box-shadow: 0 0 30px #2989d8;
    }

    100% {
        box-shadow: 0 0 30px #2cc99d;
    }
}


.zoom {
    position: relative;
    display: inline-block;
}

/* Style the zoomed image */
.zoom img {
    width: 100%;
    height: auto;
    transition: all 0.3s ease-in-out;
}

/* Style the zoom icon */
.zoom::after {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 5px;
    z-index: 100;
}



@keyframes fadeInDown {
    0% {
        margin-top: -200px;
        opacity: 0;
    }

    100% {
        margin-top: 0px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        margin-top: -200px;
        opacity: 0;
    }

    100% {
        margin-top: 0px;
        opacity: 1;
    }
}