.logo img {
    width: 180px;
}

/* offer btn start */
/* From Uiverse.io by dexter-st */
.offer-btn-area {
    margin-top: 50px;
    width: 196px;
}

.offer-btn-container {
    --btn-color: #eaff6a;
    --corner-color: #0002;
    --corner-dist: 24px;
    --corner-multiplier: 1.5;
    --timing-function: cubic-bezier(0, 0, 0, 2.5);
    --duration: 250ms;

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

.offer-btn {
    position: relative;
    min-width: 160px;
    min-height: calc(var(--corner-dist) * 2);
    border-radius: 16px;
    border: none;
    padding: 0.25em 1em;

    background: linear-gradient(#fff2, #0001), var(--btn-color);
    box-shadow:
        1px 1px 2px -1px #fff inset,
        0 2px 1px #00000010,
        0 4px 2px #00000010,
        0 8px 4px #00000010,
        0 16px 8px #00000010,
        0 32px 16px #00000010;

    transition:
        transform var(--duration) var(--timing-function),
        filter var(--duration) var(--timing-function);
    -webkit-transition:
        transform var(--duration) var(--timing-function),
        -webkit-filter var(--duration) var(--timing-function);

    cursor: pointer;
}

.offer-btn-drawer {
    position: absolute;
    display: flex;
    justify-content: center;

    min-height: 32px;
    border-radius: 16px;
    border: none;
    padding: 0.25em 1em;
    font-size: 0.8em;
    font-weight: 600;
    font-family: "Poppins", monospace;
    color: #0009;

    background: linear-gradient(#fff2, #0001), var(--btn-color);
    background-color: #fbff13;
    opacity: 0;

    transition:
        transform calc(0.5 * var(--duration)) ease,
        filter var(--duration) var(--timing-function),
        opacity calc(0.5 * var(--duration)) ease;
    -webkit-transition:
        transform calc(0.5 * var(--duration)) ease,
        -webkit-filter var(--duration) var(--timing-function),
        opacity calc(0.5 * var(--duration)) ease;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

.transition-top {
    top: 0;
    left: 0;
    border-radius: 12px 12px 0 0;
    align-items: start;
}

.transition-bottom {
    bottom: 0;
    right: 0;
    border-radius: 0 0 12px 12px;
    align-items: end;
}

.offer-btn-text {
    font-family: 'nebula-mirthful';
    display: inline-block;
    font-size: 1.25em;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: #7d69ff;
    background-image: linear-gradient(#444, #000a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006);
    -webkit-filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006);
    transition: transform var(--duration) var(--timing-function), filter var(--duration) var(--timing-function), color var(--duration) var(--timing-function);
    -webkit-transition: transform var(--duration) var(--timing-function), -webkit-filter var(--duration) var(--timing-function), color var(--duration) var(--timing-function);
}

.offer-btn-corner {
    position: absolute;
    width: 32px;

    fill: none;
    stroke: var(--corner-color);

    transition:
        transform var(--duration) var(--timing-function),
        filter var(--duration) var(--timing-function);
    -webkit-transition:
        transform var(--duration) var(--timing-function),
        -webkit-filter var(--duration) var(--timing-function);
}

.offer-btn-corner:nth-of-type(1) {
    top: 0;
    left: 0;
    transform: translate(calc(-1 * var(--corner-dist)),
            calc(-1 * var(--corner-dist))) rotate(90deg);
}

.offer-btn-corner:nth-of-type(2) {
    top: 0;
    right: 0;
    transform: translate(var(--corner-dist), calc(-1 * var(--corner-dist))) rotate(180deg);
}

.offer-btn-corner:nth-of-type(3) {
    bottom: 0;
    right: 0;
    transform: translate(var(--corner-dist), var(--corner-dist)) rotate(-90deg);
}

.offer-btn-corner:nth-of-type(4) {
    bottom: 0;
    left: 0;
    transform: translate(calc(-1 * var(--corner-dist)), var(--corner-dist)) rotate(0deg);
}

.offer-btn-container:has(.offer-btn:hover),
.offer-btn-container:has(.offer-btn:focus-visible) {
    .offer-btn {
        transform: scale(1.05);
        filter: drop-shadow(0 16px 16px #0002);
        -webkit-filter: drop-shadow(0 16px 16px #0002);
    }

    .transition-top {
        transform: translateY(-24px) rotateZ(4deg);
        filter: blur(0px);
        -webkit-filter: blur(0px);
        animation: hue-anim 3s infinite linear;
        -webkit-animation: hue-anim 3s infinite linear;
        opacity: 1;
    }

    .transition-bottom {
        transform: translateY(24px) rotateZ(4deg);
        filter: blur(0px);
        -webkit-filter: blur(0px);
        animation: hue-anim 3s infinite linear;
        -webkit-animation: hue-anim 3s infinite linear;
        opacity: 1;
    }

    .offer-btn-text {
        filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006) drop-shadow(0px 6px 2px #0003);
        -webkit-filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006) drop-shadow(0px 6px 2px #0003);
        transform: scale(1.05);
        color: #0008;
    }

    --corner-color: #0004;

    .offer-btn-corner:first-of-type {
        transform: translate(calc(-1 * var(--corner-multiplier) * var(--corner-dist)),
                calc(-1 * var(--corner-multiplier) * var(--corner-dist))) rotate(90deg);
        filter: drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
        -webkit-filter: drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
    }

    .offer-btn-corner:nth-of-type(2) {
        transform: translate(calc(var(--corner-multiplier) * var(--corner-dist)),
                calc(-1 * var(--corner-multiplier) * var(--corner-dist))) rotate(180deg);
        filter: drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
        -webkit-filter: drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
    }

    @-moz-document url-prefix() {
        .offer-btn-corner:nth-of-type(2) {
            filter: drop-shadow(10px -10px 1px var(--corner-color)) drop-shadow(20px -20px 2px var(--corner-color));
        }
    }

    .offer-btn-corner:nth-of-type(3) {
        transform: translate(calc(var(--corner-multiplier) * var(--corner-dist)),
                calc(var(--corner-multiplier) * var(--corner-dist))) rotate(-90deg);
        filter: drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
        -webkit-filter: drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
    }

    .offer-btn-corner:nth-of-type(4) {
        transform: translate(calc(-1 * var(--corner-multiplier) * var(--corner-dist)),
                calc(var(--corner-multiplier) * var(--corner-dist))) rotate(0deg);
        filter: drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
        -webkit-filter: drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
    }
}

.offer-btn-container:has(.offer-btn:active) {
    .offer-btn {
        transform: scale(0.95);
        filter: drop-shadow(0 10px 4px #0002);
        -webkit-filter: drop-shadow(0 10px 4px #0002);
    }

    .transition-top,
    .transition-bottom {
        transform: translateY(0px) scale(0.5);
    }

    .offer-btn-text {
        filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006) drop-shadow(0px 6px 2px #0003);
        -webkit-filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006) drop-shadow(0px 6px 2px #0003);
        transform: scale(1);
        color: #000a;
    }

    --corner-color: #0005;
    --corner-multiplier: 0.95;

    .offer-btn-corner:first-of-type {
        transform: translate(calc(-1 * var(--corner-multiplier) * var(--corner-dist)),
                calc(-1 * var(--corner-multiplier) * var(--corner-dist))) rotate(90deg);
        filter: drop-shadow(-10px 10px 2px var(--corner-color)) drop-shadow(-20px 20px 3px var(--corner-color));
        -webkit-filter: drop-shadow(-10px 10px 2px var(--corner-color)) drop-shadow(-20px 20px 3px var(--corner-color));
    }

    .offer-btn-corner:nth-of-type(2) {
        transform: translate(calc(var(--corner-multiplier) * var(--corner-dist)),
                calc(-1 * var(--corner-multiplier) * var(--corner-dist))) rotate(180deg);
        filter: drop-shadow(-10px 10px 2px var(--corner-color)) drop-shadow(-20px 20px 3px var(--corner-color));
        -webkit-filter: drop-shadow(-10px 10px 2px var(--corner-color)) drop-shadow(-20px 20px 3px var(--corner-color));
    }

    @-moz-document url-prefix() {
        .offer-btn-corner:nth-of-type(2) {
            filter: drop-shadow(10px -10px 2px var(--corner-color)) drop-shadow(20px -20px 3px var(--corner-color));
        }
    }

    .offer-btn-corner:nth-of-type(3) {
        transform: translate(calc(var(--corner-multiplier) * var(--corner-dist)),
                calc(var(--corner-multiplier) * var(--corner-dist))) rotate(-90deg);
        filter: drop-shadow(-10px 10px 2px var(--corner-color)) drop-shadow(-20px 20px 3px var(--corner-color));
        -webkit-filter: drop-shadow(-10px 10px 2px var(--corner-color)) drop-shadow(-20px 20px 3px var(--corner-color));
    }

    .offer-btn-corner:nth-of-type(4) {
        transform: translate(calc(-1 * var(--corner-multiplier) * var(--corner-dist)),
                calc(var(--corner-multiplier) * var(--corner-dist))) rotate(0deg);
        filter: drop-shadow(-10px 10px 2px var(--corner-color)) drop-shadow(-20px 20px 3px var(--corner-color));
        -webkit-filter: drop-shadow(-10px 10px 2px var(--corner-color)) drop-shadow(-20px 20px 3px var(--corner-color));
    }
}

@keyframes hue-anim {

    0%,
    100% {
        filter: hue-rotate(0deg);
        -webkit-filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(-70deg);
        -webkit-filter: hue-rotate(-70deg);
    }
}

@-webkit-keyframes hue-anim {

    0%,
    100% {
        -webkit-filter: hue-rotate(0deg);
    }

    50% {
        -webkit-filter: hue-rotate(-70deg);
    }
}

/* offer btn end */


.stat-icon {
    background: #7f6aff;
    padding: 20px;
    border-radius: 6px;
    color: #dcf066;
    border: 1px solid #fff;
    box-shadow: rgb(99 99 99 / 44%) 0px 2px 8px 0px;
}

.stat-icon i {
    color: #ffffff;
    font-size: 23px;
}

.stat-icon:hover {
    background: #dcf066;
    color: #7e6aff;
    border: 1px solid #7e6affb0;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    transition: all 0.3s ease-in-out;
}

.stat-icon:hover i {
    color: #7e6aff;
    transition: all 0.4s ease-in-out;
}

/* nav ctr btn start */
.nav-ctr-area {}

/* From Uiverse.io by vinodjangid07 */
.nav-ctr-button {
    width: 136px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background-color: rgb(231 250 120);
    border-radius: 30px;
    color: rgb(19, 19, 19);
    font-weight: 600;
    border: none;
    position: relative;
    cursor: pointer;
    transition-duration: .2s;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.116);
    padding-left: 8px;
    transition-duration: .5s;
}

.nav-ctr-button .svgIcon {
    height: 25px;
    transition-duration: 1.5s;
}

.nav-ctr-button .bell path {
    fill: rgb(19, 19, 19);
}

.nav-ctr-button:hover {
    background-color: rgb(192, 255, 20);
    transition-duration: .5s;
}

.nav-ctr-button:active {
    transform: scale(0.97);
    transition-duration: .2s;
}

.nav-ctr-button:hover .svgIcon {
    transform: rotate(250deg);
    transition-duration: 1.5s;
}

/* Nav CTR End */