/*=========================
SECTION
=========================*/

.ribcx-section{
    position:relative;
    overflow:hidden;
    background:#f7fbff;
}

/*=========================
CARD
=========================*/

.ribcx-card{
    position:relative;
    overflow:hidden;

    background:#ffffff;

    border:1px solid #e7eef8;

    border-radius:34px;

    padding:40px;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

    box-shadow:
        0 15px 40px rgba(43,147,235,.05);

    z-index:1;
}

/* top line */

.ribcx-card::before{
    content:'';

    position:absolute;

    top:0;
    left:0;

    width:0;
    height:4px;

    background:linear-gradient(
        90deg,
        #2b93eb,
        #60b7ff
    );

    transition:width .45s ease;

    z-index:2;
}

/* glow */

.ribcx-card::after{
    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(43,147,235,.05),
        transparent 60%
    );

    opacity:0;

    transition:opacity .45s ease;

    z-index:-1;
}

.ribcx-card:hover{
    transform:translateY(-10px);
    border-color:#d6e9ff;

    box-shadow:
        0 30px 70px rgba(43,147,235,.14);
}

.ribcx-card:hover::before{
    width:100%;
}

.ribcx-card:hover::after{
    opacity:1;
}

/*=========================
IMAGE
=========================*/

.ribcx-image{
    position:relative;

    width:78px;
    height:78px;
    min-width:78px;

    border-radius:24px;

    overflow:hidden;

    margin-right:22px;

    background:#eef6ff;

    transition:transform .35s ease;
}

.ribcx-card:hover .ribcx-image{
    transform:rotate(-6deg) scale(1.04);
}

.ribcx-image::before{
    content:'';

    position:absolute;

    inset:0;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.25),
        transparent
    );

    z-index:2;
}

.ribcx-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/*=========================
SERVICE BOX
=========================*/

.ribcx-service{
    position:relative;

    display:flex;
    align-items:flex-start;

    padding:18px;

    border-radius:22px;

    background:#fbfdff;

    border:1px solid #edf3fb;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

/* hover line */

.ribcx-service::before{
    content:'';

    position:absolute;

    left:0;
    top:0;

    width:3px;
    height:0;

    background:#2b93eb;

    transition:height .35s ease;
}

/* soft glow */

.ribcx-service::after{
    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(43,147,235,.04),
        transparent 65%
    );

    opacity:0;

    transition:opacity .35s ease;

    pointer-events:none;
}

.ribcx-service:hover{
    transform:translateY(-6px);

    background:#ffffff;

    border-color:#d7eaff;

    box-shadow:
        0 18px 35px rgba(43,147,235,.10);
}

.ribcx-service:hover::before{
    height:100%;
}

.ribcx-service:hover::after{
    opacity:1;
}

/*=========================
ICON
=========================*/

.ribcx-miniicon{
    position:relative;

    width:46px;
    height:46px;
    min-width:46px;

    border-radius:16px;

    overflow:hidden;

    background:#eef6ff;

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

    margin-right:16px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.ribcx-miniicon::before{
    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.35),
        transparent
    );

    z-index:2;
}

.ribcx-miniicon img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ribcx-service:hover .ribcx-miniicon{
    transform:scale(1.08) rotate(-6deg);

    box-shadow:
        0 12px 25px rgba(43,147,235,.18);
}

/*=========================
TEXT
=========================*/

.ribcx-service h4{
    transition:color .35s ease;
}

.ribcx-service:hover h4{
    color:#2b93eb;
}

/* SERVICES GRID */

.ribcx-card .grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

/* 768px to 1023px */

@media(min-width:768px){

    .ribcx-card .grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

/* 1024px+ */

@media(min-width:1024px){

    .ribcx-card .grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

/* FIX CARD WIDTH */

.ribcx-service{
    width:100%;
    min-width:0;
    display:flex;
    align-items:flex-start;
}

@media(max-width:767px){

    .ribcx-card{
        padding:24px;
        border-radius:24px;
    }

    .ribcx-service{
        padding:16px;
        border-radius:18px;
    }

    .ribcx-image{
        width:64px;
        height:64px;
        min-width:64px;
        border-radius:18px;
    }

    .ribcx-miniicon{
        width:42px;
        height:42px;
        min-width:42px;
        border-radius:14px;
    }

}