/* body::before{
    content:"";
    position:fixed;
    inset:0;

    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,153,0,.08) 2px, transparent 2px),
        radial-gradient(circle at 70% 40%, rgba(0,180,90,.06) 2px, transparent 2px),
        linear-gradient(45deg,
            transparent 48%,
            rgba(255,255,255,.02) 49%,
            rgba(255,255,255,.02) 51%,
            transparent 52%);

    background-size:
        120px 120px,
        180px 180px,
        80px 80px;

    animation:patternMove 50s linear infinite;

    z-index:-2;
}
@keyframes patternMove{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-120px,-120px);
    }

}
body::after{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at 15% 30%,
            rgba(255,140,0,.18),
            transparent 40%),

        radial-gradient(circle at 80% 70%,
            rgba(0,170,80,.15),
            transparent 45%);

    filter:blur(90px);

    z-index:-1;

}
.category{

    animation:floating 5s ease-in-out infinite;

}
@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}
.category-item:nth-child(1) .category{

    animation-delay:0s;

}

.category-item:nth-child(2) .category{

    animation-delay:1s;

}

.category-item:nth-child(3) .category{

    animation-delay:2s;

}

.category-item:nth-child(4) .category{

    animation-delay:3s;

}

.category-item:nth-child(5) .category{

    animation-delay:4s;

} */
 .categories-page{
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}
.categories-page::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    opacity:.16;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg stroke='%23FFFFFF' stroke-opacity='.18' stroke-width='1.4' fill='none'%3E%3Cpolygon points='130,18 148,36 130,54 112,36'/%3E%3Cpolygon points='36,130 54,148 36,166 18,148'/%3E%3Cpolygon points='224,130 242,148 224,166 206,148'/%3E%3Cpolygon points='130,206 148,224 130,242 112,224'/%3E%3Cline x1='130' y1='54' x2='130' y2='206'/%3E%3Cline x1='54' y1='130' x2='206' y2='130'/%3E%3Cpath d='M80 80 L130 130 L180 80'/%3E%3Cpath d='M80 180 L130 130 L180 180'/%3E%3Ccircle cx='130' cy='130' r='6' fill='%23d97706' fill-opacity='.25' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 260px 260px;

    animation:sukiaMoveOne 90s linear infinite;

}
.categories-page::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    opacity:.08;

    background-image:

    repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 32px,
        rgba(217,119,6,.15) 33px,
        transparent 34px
    ),

    repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 32px,
        rgba(31,111,95,.12) 33px,
        transparent 34px
    );

    animation:sukiaMoveTwo 120s linear infinite;

}
html[data-theme="light"] .categories-page::before{

    opacity:.25;

    filter:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg stroke='%231f6a55' stroke-opacity='.35' stroke-width='1.4' fill='none'%3E%3Cpolygon points='130,18 148,36 130,54 112,36'/%3E%3Cpolygon points='36,130 54,148 36,166 18,148'/%3E%3Cpolygon points='224,130 242,148 224,166 206,148'/%3E%3Cpolygon points='130,206 148,224 130,242 112,224'/%3E%3Cline x1='130' y1='54' x2='130' y2='206'/%3E%3Cline x1='54' y1='130' x2='206' y2='130'/%3E%3Cpath d='M80 80 L130 130 L180 80'/%3E%3Cpath d='M80 180 L130 130 L180 180'/%3E%3Ccircle cx='130' cy='130' r='6' fill='%23d97706' fill-opacity='.22' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    background-size:260px 260px;

}
html[data-theme="light"] .categories-page::after{

    opacity:.18;

}
@keyframes sukiaMoveOne{

    from{

        background-position:0 0;

    }

    to{

        background-position:-260px -260px;

    }

}

@keyframes sukiaMoveTwo{

    from{

        background-position:0 0;

    }

    to{

        background-position:260px -260px;

    }

}

header {
    position: static;
    width: 100%;
}

.categories-wrapper {
    padding-top: 0.5rem;
}

.categories-grid {
    margin-top: 0.75rem !important;
}

 /* MOBILE = GRID  */
 /* .categories-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 20px;
     flex-wrap: wrap;
     justify-content: center;
     gap: 40px;
     padding: 40px;
 } */

.category {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: clamp(170px, 19vw, 220px);
    height: clamp(170px, 19vw, 220px);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateY(-10px) scale(1);
}

.category:hover{

    transform:
        translateY(-12px)
        scale(1.04);
    box-shadow:

        0 0 40px rgba(217,119,6,.30),

        0 25px 60px rgba(0,0,0,.35);

}
.category{

    animation:floating 6s ease-in-out infinite;

}

.category{

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(8px);

}
.category:hover{

    box-shadow:
        0 0 25px rgba(255,145,0,.25),
        0 18px 40px rgba(0,0,0,.45);

}

 .category:hover img {
     transform: scale(1.08);
 }

 .category::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
 }

 .category img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(0.65);
     transition: transform 0.4s ease;
 }

 .category span {
     position: absolute;
     inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 10px;
     bottom: 12px;
     left: 16px;
     color: white;
     font-weight: 600;
     font-size: 18px;
     z-index: 2;
 }

.category-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

/* .category-item:nth-child(1) { animation-delay: 0.1s; }
.category-item:nth-child(2) { animation-delay: 0.2s; }
.category-item:nth-child(3) { animation-delay: 0.3s; } */
.category-item:nth-child(2) .category{

    animation-delay:1.2s;

}

.category-item:nth-child(3) .category{

    animation-delay:2.4s;

}

.category-item:nth-child(4) .category{

    animation-delay:3.6s;

}

.category-item:nth-child(5) .category{

    animation-delay:4.8s;

}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

 /* Mobile tweak */
@media (max-width: 991.98px) {
    .categories-wrapper {
        padding-top: 0.35rem;
    }

    .categories-grid {
        margin-top: 0.4rem !important;
    }

    .category {
        width: clamp(170px, 34vw, 215px);
        height: clamp(170px, 34vw, 215px);
    }
}

@media (max-width: 576px) {
    .categories-wrapper {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .category {
        width: min(76vw, 230px);
        height: min(76vw, 230px);
    }

    .category span {
        font-size: 16px;
        bottom: 10px;
        left: 12px;
    }
}

@media (max-width: 360px) {
    .category {
        width: min(82vw, 220px);
        height: min(82vw, 220px);
    }

    .category span {
        font-size: 15px;
        padding: 8px;
    }
}