/*=========================================
    Categories Section
=========================================*/

.categories-section{

    padding:90px 0;

    position:relative;

    overflow:hidden;

}

.section-heading{

    margin-bottom:45px;

}

.section-heading h2{

    font-size:48px;

    font-weight:800;

    line-height:1;

    color:#0F172A;

    margin:0;

}

/*=========================================
    Category Card
=========================================*/

.category-card{

    position:relative;

    display:block;

    height:325px;

    border-radius:24px;

    overflow:hidden;

    text-decoration:none;

    padding:25px;

    transition:.45s ease;

    box-shadow:
        0 10px 35px rgba(0,0,0,.05);

}

/*=========================================
    Background Colors
=========================================*/

.category-blue{

    background:
    linear-gradient(180deg,#DCEBFF 0%,#EAF4FF 100%);

}

.category-green{

    background:
    linear-gradient(180deg,#EEF4DB 0%,#F7FAEE 100%);

}

.category-purple{

    background:
    linear-gradient(180deg,#E8E2FF 0%,#F3F0FF 100%);

}

.category-orange{

    background:
    linear-gradient(180deg,#FFF0DD 0%,#FFF8EF 100%);

}

/*=========================================
    Decorative Glow
=========================================*/

.category-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:rgba(255,255,255,.45);

    border-radius:50%;

    right:-120px;

    top:-120px;

    filter:blur(8px);

}

.category-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.18),

    transparent

    );

}

/*=========================================
    Product Image
=========================================*/

.category-image{

    position:absolute;

    top:18px;

    left:50%;

    width:88%;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:2;

}

.category-image img{

    width:100%;

    max-height:185px;

    object-fit:contain;

}

/*=========================================
    Content
=========================================*/

.category-content{

    position:absolute;

    left:25px;

    right:20px;

    bottom:20px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    z-index:5;

}

.category-text{

    flex:1;

}

.category-text h3{

    margin:0;

    font-size:23px;

    font-weight:800;

    line-height:1.1;

    color:#111827;

}

.category-text p{

    margin-top:6px;

    margin-bottom:0;

    font-size:16px;

    color:#5F6878;

    line-height:1.3;

}

/*=========================================
    Arrow
=========================================*/

.category-arrow{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#101827;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:18px;

    flex-shrink:0;

}

/*=========================================
    Responsive
=========================================*/

@media(max-width:1200px){

.category-card{

height:300px;

}

.category-text h3{

font-size:20px;

}

}

@media(max-width:991px){

.categories-section{

padding:70px 0;

}

.category-card{

height:310px;

}

}

@media(max-width:767px){

.category-card{

height:290px;

}

.section-heading h2{

font-size:38px;

}

}

@media(max-width:576px){

.category-card{

height:270px;

}

.category-text h3{

font-size:20px;

}

.category-text p{

font-size:14px;

}

}

/*=========================================
    Premium Hover Effects
=========================================*/

.category-card{

    will-change:transform;

}

.category-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 25px 60px rgba(15,23,42,.15);

}

/*=============================
Image Animation
=============================*/

.category-image img{

    transition:
        transform .45s ease,
        filter .45s ease;

}

.category-card:hover .category-image img{

    transform:
        scale(1.08)
        rotate(-2deg)
        translateY(-8px);

}

/*=============================
Content Animation
=============================*/

.category-text h3{

    transition:.35s;

}

.category-text p{

    transition:.35s;

}

.category-card:hover .category-text h3{

    color:#0D3D8F;

}

.category-card:hover .category-text p{

    color:#3E4A59;

}

/*=============================
Arrow
=============================*/

.category-arrow{

    transition:.35s ease;

}

.category-card:hover .category-arrow{

    background:#0D3D8F;

    transform:
        rotate(-45deg)
        scale(1.08);

    box-shadow:
        0 12px 25px rgba(13,61,143,.30);

}

/*=============================
Background Glow
=============================*/

.category-card::before{

    transition:.6s ease;

}

.category-card:hover::before{

    transform:
        scale(1.25);

    opacity:.9;

}

/*=============================
Shine Animation
=============================*/

.category-card .shine{

    display:none;

}

.category-card::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-80%;

    width:60%;

    height:350%;

    background:

    linear-gradient(

    120deg,

    transparent 0%,

    rgba(255,255,255,.45) 50%,

    transparent 100%

    );

    transform:rotate(20deg);

    transition:.9s;

}

.category-card:hover::after{

    left:160%;

}

/*=============================
Border Glow
=============================*/

.category-card{

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

}

.category-card:hover{

    border-color:rgba(255,255,255,.95);

}

/*=============================
Smooth Animation
=============================*/

.category-content{

    transition:.35s;

}

.category-card:hover .category-content{

    transform:translateY(-3px);

}

/*=============================
Floating Animation
=============================*/

@keyframes floatingProduct{

    0%{

        transform:
        translateX(-50%)
        translateY(0);

    }

    50%{

        transform:
        translateX(-50%)
        translateY(-6px);

    }

    100%{

        transform:
        translateX(-50%)
        translateY(0);

    }

}

.category-image{

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

}

/*=============================
Card Shadow
=============================*/

.category-blue:hover{

    box-shadow:
        0 30px 60px rgba(74,144,226,.22);

}

.category-green:hover{

    box-shadow:
        0 30px 60px rgba(140,186,75,.22);

}

.category-purple:hover{

    box-shadow:
        0 30px 60px rgba(136,96,255,.20);

}

.category-orange:hover{

    box-shadow:
        0 30px 60px rgba(255,174,73,.22);

}

/*=============================
Cursor
=============================*/

.category-card{

    cursor:pointer;

}