/*!
Theme Name: DEC Hello Elementor Theme
Author: MaliAndFriends
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: maf
Template: hello-elementor
*/
html, body {overflow-x: hidden!important;}

:root {
    /* Colors */
    --dec-color-white: #FFFFFF;
    --dec-color-black: #000000;
    --dec-color-gray: rgba(248, 244, 234, 0.70);
    --dec-color-gray-2: rgba(10, 10, 10, 0.50);
    --dec-color-paper: #FAF6EE;
    --dec-color-ink: #0A0A0B;
    --dec-color-yellow: #FDC20C;
    --dec-color-lime: #D0F049;
    --dec-color-blush: #F1B0B5;
    --dec-color-oxblood: #8B1E2D;
    --dec-color-red: #D52B1E;
    /* Fonts */
    --dec-ff-main: Inter;
    --dec-ff-nav-mm-heading: "Instrument Serif";
    --dec-ff-nav-card-title: Anton;
    --dec-fs-nav-top: 11px;
    --dec-fs-nav-btn: 13px;
    --dec-fs-nav-item: 15px;
    --dec-fs-nav-sn: 17px;
    --dec-fs-nav-mm-tag: 10px;
    --dec-fs-nav-mm-heading: 42px;
    --dec-fs-nav-mm-title: 15px;
    --dec-fs-nav-mm-subtitle: 9px;
    --dec-fs-nav-mm-btn: 10px;
    --dec-fs-nav-card-tag: 10px;
    --dec-fs-nav-card-title: 38px;
    --dec-fs-nav-card-description: 14px;
    --dec-fs-nav-card-btn: 13px;
    /* Other */
    --dec-nav-logo-width: 170px;
    --dec-nav-logo-padding: 0 0 20px 0;
    --dec-nav-top-items-spacing: 28px;
    --dec-nav-items-spacing: 32px;
    --dec-nav-item-padding: 12px 0 20px 0;
    --dec-nav-item-min-height: 78px;
    --dec-nav-item-button-padding: 0 22px;
    --dec-nav-item-button-height: 46px;

    --dec-nav-sn-padding: 12px 12px 12px 12px;
    --dec-nav-sn-item-padding: 10px 42px 10px 14px;
    --dec-nav-sn-item-arrow-height: 24px;
    --dec-nav-sn-items-gap: 12px;

    --dec-nav-mm-padding: 12px 12px 12px 12px;
    --dec-nav-mm-container-columns: 1fr 1fr 1fr 1fr;
    --dec-nav-mm-container-gap: 12px;

    --dec-nav-mm-col-tag-padding: 5px 10px;
    --dec-nav-mm-col-item-padding: 8px 38px 8px 10px;
    --dec-nav-mm-col-item-arrow-height: 24px;
    --dec-nav-mm-col-button-padding: 6px 14px;

    --dec-nav-mm-card-border-radius: 18px;
    --dec-nav-mm-card-tag-padding: 6px 12px;
    --dec-nav-mm-card-info-padding: 12px;
    --dec-nav-mm-card-button-padding: 0 22px;
    --dec-nav-mm-card-button-height: 45px;

    /* Elementor Copy */
    --dec-w-container: var(--content-width, 1248px);
}

/*
    Main Nav
 */
.dec-main-nav {
    position: relative;
    z-index: 100;
    width: 100%;
    display: block;
    background-color: var(--dec-color-ink);
    font-family: var(--dec-ff-main);
    vertical-align: middle;
}

.dec-main-nav a, .dec-main-nav a *, .dec-main-nav-toggle > i {
    transition: .33s;
}

.dec-main-nav-container {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 12px;
    margin: 0 auto;
    padding: 12px 12px 0 12px;
    width: 100%;
    max-width: var(--dec-w-container);
}

.dec-main-nav-top {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.dec-main-nav-top-text {
    display: inline-block;
    color: var(--dec-color-paper);
    font-size: var(--dec-fs-nav-top);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.5px;
}

.dec-main-nav-top-text:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--dec-color-lime);
    border-radius: 50%;
    margin-right: 4px;
}

/*
    Top Items ------------------------------------------------------------
 */
.dec-main-nav-top-items {
    display: flex;
    flex-flow: row nowrap;
    column-gap: var(--dec-nav-top-items-spacing);
}

.dec-main-nav-top-items a {
    color: var(--dec-color-gray);
    font-size: var(--dec-fs-nav-top);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.dec-main-nav-top-items a:hover {
    color: var(--dec-color-paper);
}

.dec-main-nav-top-item {
    position: relative;
    z-index: 2;
}

.dec-main-nav-top-item-si a {
    white-space: nowrap;
}

.dec-main-nav-top-item-si {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 8px;
    background-color: var(--dec-color-ink);
    text-align: right;

    position: absolute;
    top: 100%;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}

/*@media (min-width: 992px) {*/
    .dec-main-nav-top-item:hover .dec-main-nav-top-item-si {
        opacity: 1;
        visibility: visible;
    }
/*}*/


/*
    Main Nav Items -----------------------------------------------------
 */
.dec-main-nav-body {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.dec-main-nav-logo {
    display: block;
    width: var(--dec-nav-logo-width);
    height: auto;
    padding: var(--dec-nav-logo-padding);
}

.dec-main-nav-items {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--dec-nav-items-spacing);
}

.dec-main-nav-item {
    display: flex;
    align-items: center;
    padding: var(--dec-nav-item-padding);
    min-height: var(--dec-nav-item-min-height);
}

.dec-main-nav-item:not(.dec-main-nav-item-button) > a {
    color: var(--dec-color-paper);
    font-size: var(--dec-fs-nav-item);
    font-style: normal;
    font-weight: 600;
    line-height: normal;

    display: flex;
    justify-content: center;
    align-items: center;
}

.dec-main-nav-item:not(.dec-main-nav-item-button):hover > a {
    color: var(--dec-color-lime);
}

.dec-main-nav-item-sn > a > svg,
.dec-main-nav-item-mm > a > svg {
    height: 24px;
}

.dec-main-nav-item-button > a {
    color: var(--dec-color-ink);
    font-size: var(--dec-fs-nav-btn);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.8px;

    display: flex;
    height: var(--dec-nav-item-button-height);
    padding: var(--dec-nav-item-button-padding);
    justify-content: center;
    align-items: center;
    border-radius: 999px;
}

.dec-main-nav-item-button > a > svg {
    height: 20px;
}

.dec-main-nav-item-button > a:hover > svg {
    transform: translateX(4px);
}

/**
    Sub Menu -------------------------------------------------------------
 */
.dec-main-nav-item-sn {
    position: relative;
}

.dec-main-nav-sn {
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    row-gap: var(--dec-nav-sn-items-gap);
    width: auto;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    background: var(--dec-color-paper);
    padding: var(--dec-nav-sn-padding);
    opacity: 0;
    visibility: hidden;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: .2s;
}

@media (min-width: 992px) {
    .dec-main-nav-item-sn:hover .dec-main-nav-sn {
        opacity: 1;
        visibility: visible;
    }
}

.dec-main-nav-sn > a {
    display: flex;
    width: 100%;
    flex-flow: column nowrap;
    position: relative;
    padding: var(--dec-nav-sn-item-padding);
    border-radius: 8px;

    color: var(--dec-color-ink);
    font-size: var(--dec-fs-nav-sn);
    font-style: normal;
    font-weight: 600;
    line-height: 110%; /* 18.7px */
    white-space: nowrap;
}

.dec-main-nav-sn > a > svg {
    fill: var(--dec-color-gray-2);
    height: var(--dec-nav-sn-item-arrow-height);
    display: block;
    position: absolute;
    right: 14px;
    top: calc(50% - var(--dec-nav-sn-item-arrow-height) / 2);
}

.dec-main-nav-sn > a:hover {background: var(--dec-color-ink); color: var(--dec-color-paper);}

.dec-main-nav-sn > a:hover > svg {fill: var(--dec-color-blush);}

/**
    Mega Menu -------------------------------------------------------------
 */
.dec-main-nav-mm {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background: var(--dec-color-paper);
    padding: var(--dec-nav-mm-padding);
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}

@media (min-width: 992px) {
    .dec-main-nav-item-mm:hover .dec-main-nav-mm {
        opacity: 1;
        visibility: visible;
    }
}

.dec-main-nav-mm-container {
    display: grid;
    grid-template-columns: var(--dec-nav-mm-container-columns);
    gap: var(--dec-nav-mm-container-gap);
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
}

.dec-main-nav-mm-col {
    display: flex;
    flex-flow: column wrap;
    align-items: start;
    row-gap: 8px;
}

.dec-main-nav-mm-col-tag {
    font-size: var(--dec-fs-nav-mm-tag);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.4px;

    display: inline-flex;
    width: auto;
    padding: var(--dec-nav-mm-col-tag-padding);
    align-items: center;
    border-radius: 100px;
}

.dec-main-nav-mm-col-title {
    color: var(--dec-color-ink);
    font-family: var(--dec-ff-nav-mm-heading);
    font-size: var(--dec-fs-nav-mm-heading);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 56px */
    letter-spacing: -1.12px;
}

.dec-main-nav-mm-col-items {
    display: flex;
    flex-flow: column wrap;
    align-items: start;
    row-gap: 8px;
}

.dec-main-nav-mm-col-item {
    display: flex;
    width: 100%;
    flex-flow: column nowrap;
    position: relative;
    padding: var(--dec-nav-mm-col-item-padding);
    border-radius: 8px;
}

.dec-main-nav-mm-col-item-title {
    color: var(--dec-color-ink);
    font-size: var(--dec-fs-nav-mm-title);
    font-style: normal;
    font-weight: 600;
    line-height: 110%; /* 18.7px */
}

.dec-main-nav-mm-col-item-subtitle {
    color: var(--dec-color-gray-2);
    font-size: var(--dec-fs-nav-mm-subtitle);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.26px;
}

.dec-main-nav-mm-col-item > svg {
    fill: var(--dec-color-gray-2);
    height: var(--dec-nav-mm-col-item-arrow-height);
    display: block;
    position: absolute;
    right: 14px;
    top: calc(50% - var(--dec-nav-mm-col-item-arrow-height) / 2);
}

.dec-main-nav-mm-col-item:hover {background: var(--dec-color-ink);}

.dec-main-nav-mm-col-item:hover > .dec-main-nav-mm-col-item-title {color: var(--dec-color-paper);}

.dec-main-nav-mm-col-item:hover > .dec-main-nav-mm-col-item-subtitle {color: var(--dec-color-blush);}

.dec-main-nav-mm-col-item:hover > svg {fill: var(--dec-color-blush);}

.dec-main-nav-mm-col-button {
    color: var(--dec-color-ink);
    font-size: var(--dec-fs-nav-mm-btn);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.4px;

    display: inline-flex;
    width: auto;
    padding: var(--dec-nav-mm-col-button-padding);
    align-items: center;
    border-radius: 100px;
    border: 1px solid var(--dec-color-ink);
}

.dec-main-nav-mm-col-button > svg {
    height: 20px;
    width: 20px;
}

.dec-main-nav-mm-col-button:hover {background: var(--dec-color-ink);color: var(--dec-color-paper);}

.dec-main-nav-mm-card {
    border-radius: var(--dec-nav-mm-card-border-radius);
    overflow: hidden;
    position: relative;
}

.dec-main-nav-mm-card-image {
    display: block;
    width: 100%;
    padding-top: 64.78%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dec-main-nav-mm-card-info {
    padding: var(--dec-nav-mm-card-info-padding);
    display: flex;
    flex-flow: column nowrap;
    align-items: start;
    row-gap: 8px;
}

.dec-main-nav-mm-card-main-tag {
    position: absolute;
    top: 14px;
    left: 10px;
}

.dec-main-nav-mm-card-tags {
    display: flex;
    flex-flow: row wrap;
    gap: 4px;
}

.dec-main-nav-mm-card-main-tag,
.dec-main-nav-mm-card-tag {
    font-size: var(--dec-fs-nav-card-tag);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 1.4px;

    display: flex;
    padding: var(--dec-nav-mm-card-tag-padding);
    align-items: center;
    border-radius: 100px;
}

.dec-main-nav-mm-card-title {
    font-family: var(--dec-ff-nav-card-title);
    font-size: var(--dec-fs-nav-card-title);
    font-style: normal;
    font-weight: 400;
    line-height: 96%; /* 36.48px */
    letter-spacing: -0.5px;
}

.dec-main-nav-mm-card-description {
    font-family: Inter;
    font-size: var(--dec-fs-nav-card-description);
    font-style: normal;
    font-weight: 500;
    line-height: 170%; /* 23.8px */
}

.dec-main-nav-mm-card-button {
    display: flex;
    height: var(--dec-nav-mm-card-button-height);
    padding: var(--dec-nav-mm-card-button-padding);
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 999px;

    font-size: var(--dec-fs-nav-card-btn);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.8px;
}

.dec-main-nav-mm-card-button > svg {
    height: 24px;
    width: 24px;
}

.dec-main-nav-toggle {display: none;}

/*
    Tablet / Small Laptop
 */
@media (max-width: 1023px) and (min-width: 768px) {
    :root {
        --dec-fs-nav-top: 9px;
        --dec-fs-nav-btn: 10px;
        --dec-fs-nav-item: 13px;

        --dec-fs-nav-mm-tag: 8px;
        --dec-fs-nav-mm-heading: 32px;
        --dec-fs-nav-mm-title: 12px;
        --dec-fs-nav-mm-subtitle: 8px;
        --dec-fs-nav-mm-btn: 8px;
        --dec-fs-nav-card-tag: 8px;
        --dec-fs-nav-card-title: 28px;
        --dec-fs-nav-card-text: 10px;
        --dec-fs-nav-card-btn: 10px;

        --dec-nav-top-items-spacing: 18px;
        --dec-nav-items-spacing: 18px;
        --dec-nav-logo-width: 120px;
        --dec-nav-item-padding: 0 0 20px 0;
        --dec-nav-item-min-height: 58px;
        --dec-nav-item-button-padding: 0 12px;
        --dec-nav-item-button-height: 36px;

        --dec-fs-nav-sn: 14px;
        --dec-nav-sn-padding: 10px 10px 10px 10px;
        --dec-nav-sn-item-padding: 6px 34px 6px 6px;
        --dec-nav-sn-item-arrow-height: 18px;
        --dec-nav-sn-items-gap: 8px;

        --dec-nav-mm-padding: 12px 12px 12px 12px;
        --dec-nav-mm-container-columns: 1fr 1fr 1fr 1fr;
        --dec-nav-mm-container-gap: 12px;

        --dec-nav-mm-col-tag-padding: 2px 7px;
        --dec-nav-mm-col-item-padding: 6px 28px 6px 6px;
        --dec-nav-mm-col-item-arrow-height: 18px;
        --dec-nav-mm-col-button-padding: 4px 8px;

        --dec-nav-mm-card-border-radius: 8px;
        --dec-nav-mm-card-tag-padding: 3px 7px;
        --dec-nav-mm-card-info-padding: 12px;
        --dec-nav-mm-card-button-padding: 0 16px;
        --dec-nav-mm-card-button-height: 35px;
    }
}

/*
    Mobile
 */
@media (max-width: 991px) {
    :root {
        --dec-fs-nav-top: 10px;
        --dec-nav-top-items-spacing: 10px;
        --dec-nav-mm-container-columns: 1fr 1fr;

        --dec-fs-nav-btn: 10px;
        --dec-fs-nav-item: 13px;

        --dec-fs-nav-sn: 14px;
        --dec-nav-sn-padding: 10px 10px 10px 10px;
        --dec-nav-sn-item-padding: 6px 34px 6px 6px;
        --dec-nav-sn-item-arrow-height: 18px;
        --dec-nav-sn-items-gap: 8px;

        --dec-fs-nav-mm-tag: 8px;
        --dec-fs-nav-mm-heading: 32px;
        --dec-fs-nav-mm-title: 12px;
        --dec-fs-nav-mm-subtitle: 8px;
        --dec-fs-nav-mm-btn: 8px;
        --dec-fs-nav-card-tag: 8px;
        --dec-fs-nav-card-title: 28px;
        --dec-fs-nav-card-text: 10px;
        --dec-fs-nav-card-btn: 10px;

        --dec-nav-items-spacing: 18px;
        --dec-nav-logo-width: 120px;
        --dec-nav-item-padding: 0 0 20px 0;
        --dec-nav-item-min-height: 58px;
        --dec-nav-item-button-padding: 0 12px;
        --dec-nav-item-button-height: 36px;

        --dec-nav-mm-padding: 12px 12px 12px 12px;
        --dec-nav-mm-container-gap: 12px;

        --dec-nav-mm-col-tag-padding: 2px 7px;
        --dec-nav-mm-col-item-padding: 6px 28px 6px 6px;
        --dec-nav-mm-col-item-arrow-height: 18px;
        --dec-nav-mm-col-button-padding: 4px 8px;

        --dec-nav-mm-card-border-radius: 8px;
        --dec-nav-mm-card-tag-padding: 3px 7px;
        --dec-nav-mm-card-info-padding: 12px;
        --dec-nav-mm-card-button-padding: 0 16px;
        --dec-nav-mm-card-button-height: 35px;
    }

    .dec-main-nav-top-text {display: none}

    .dec-main-nav-top-items {width: 100%; justify-content: space-between;}

    .dec-main-nav-top-item-wsi.active .dec-main-nav-top-item-si {
        opacity: 1;
        visibility: visible;
    }

    .dec-main-nav-toggle {
        display: flex;
        position: relative;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        cursor: pointer;
        margin-bottom: 20px;
        outline: none;
    }

    .dec-main-nav-toggle > i {
        display: block;
        position: absolute;
        right: 0;
        height: 2px;
        background: var(--dec-color-gray);
    }

    .dec-main-nav-toggle > i:nth-child(1) {top: 20%; width: 100%;}

    .dec-main-nav-toggle > i:nth-child(2) {top: 50%; width: 70%;}

    .dec-main-nav-toggle > i:nth-child(3) {top: 80%; width: 100%;}

    .dec-main-nav-items-box {
        position: absolute;
        left: 120%;
        top: 100%;
        width: 100%;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        transition: .33s;
    }

    .dec-main-nav-items {
        flex-flow: column wrap;
        background: var(--dec-color-ink);
        padding: 12px;
        gap: 0;
        border-top: 1px solid var(--dec-color-gray);
    }

    .dec-main-nav-item {
        padding: 12px 0;
        flex-flow: column wrap;
        min-height: unset;
        width: 100%;
    }

    .dec-main-nav-sn,
    .dec-main-nav-mm {
        position: relative;
        opacity: 1;
        visibility: visible;
        display: none;
        border-radius: 8px;
        margin-top: 12px;
    }

    .dec-main-nav-item-sn.active .dec-main-nav-sn,
    .dec-main-nav-item-mm.active .dec-main-nav-mm {
        display: block;
    }


    /*.dec-main-nav-item-sn:hover .dec-main-nav-sn,*/
    /*.dec-main-nav-item-mm:hover .dec-main-nav-mm {*/
    /*    opacity: 1;*/
    /*    visibility: visible;*/
    /*    display: block;*/
    /*}*/

    .dec-main-nav-sn {
        left: unset;
        transform: unset;
        width: 100%;
    }

    .dec-main-nav.dec-main-nav-active .dec-main-nav-items-box {left: 0;}

    .dec-main-nav.dec-main-nav-active .dec-main-nav-toggle i:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}

    .dec-main-nav.dec-main-nav-active .dec-main-nav-toggle i:nth-child(2) {right: -200%;}

    .dec-main-nav.dec-main-nav-active .dec-main-nav-toggle i:nth-child(3) {top: 50%; transform: translateY(-50%) rotate(-45deg);}
}