/* ==========================================================
   BENEFICES ORGANISATION - SEMS
========================================================== */

.sems-org-benefits {

    --sob-dark: #07375f;
    --sob-blue: #087fc7;
    --sob-green: #12a75c;
    --sob-orange: #ff7b12;
    --sob-purple: #6d2ee8;
    --sob-pink: #ef245e;
    --sob-yellow: #e9a700;

    --sob-text: #5d7493;
    --sob-border: #dfeaf3;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 65px 5% 80px;

    font-family:
        Inter,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(218, 240, 253, .72),
            transparent 24%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(220, 240, 252, .65),
            transparent 20%
        ),
        linear-gradient(
            115deg,
            #ffffff 0%,
            #fbfdff 54%,
            #f5fbff 100%
        );
}


/* ==========================================================
   CONTAINER
========================================================== */

.sems-org-benefits__container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;
}


/* ==========================================================
   HEADER
========================================================== */

.sems-org-benefits__header {

    max-width: 900px;

    margin-bottom: 35px;
}


/* Label */

.sems-org-benefits__label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color: var(--sob-blue);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.sems-org-benefits__label > span {

    width: 28px;

    height: 3px;

    display: block;

    border-radius: 10px;

    background: var(--sob-blue);
}


/* ==========================================================
   TITLE
========================================================== */

.sems-org-benefits__title {

    margin: 0 0 15px;

    color: var(--sob-dark);

    font-size: clamp(26px, 2.4vw, 36px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.4px;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.sems-org-benefits__description {

    max-width: 780px;

    margin: 0;

    color: var(--sob-text);

    font-size: 15px;

    line-height: 1.65;
}


/* ==========================================================
   GRID
========================================================== */

.sems-org-benefits__grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


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

.sems-org-benefits__card {

    position: relative;

    min-height: 245px;

    overflow: hidden;

    padding:
        24px
        24px
        22px;

    border:
        1px solid
        var(--sob-border);

    border-radius: 16px;

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

    box-shadow:
        0 9px 26px
        rgba(27, 87, 125, .055);

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


.sems-org-benefits__card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(15, 132, 197, .22);

    box-shadow:
        0 17px 35px
        rgba(28, 91, 133, .11);
}


/* ==========================================================
   NUMBER
========================================================== */

.sems-org-benefits__number {

    position: absolute;

    z-index: 4;

    top: 20px;

    right: 20px;

    font-size: 26px;

    line-height: 1;

    font-weight: 800;

    opacity: .17;
}


.sems-org-benefits__number.blue {
    color: var(--sob-blue);
}


.sems-org-benefits__number.green {
    color: var(--sob-green);
}


.sems-org-benefits__number.orange {
    color: var(--sob-orange);
}


.sems-org-benefits__number.purple {
    color: var(--sob-purple);
}


.sems-org-benefits__number.pink {
    color: var(--sob-pink);
}


.sems-org-benefits__number.yellow {
    color: var(--sob-yellow);
}


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

.sems-org-benefits__icon {

    position: relative;

    z-index: 4;

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 16px;

    font-size: 29px;
}


/* BLUE */

.sems-org-benefits__icon.blue {

    color: #0879db;

    background:
        linear-gradient(
            145deg,
            #eaf6ff,
            #dceefe
        );
}


/* GREEN */

.sems-org-benefits__icon.green {

    color: #06954a;

    background:
        linear-gradient(
            145deg,
            #e6faef,
            #d8f5e5
        );
}


/* ORANGE */

.sems-org-benefits__icon.orange {

    color: #f66b00;

    background:
        linear-gradient(
            145deg,
            #fff2e7,
            #ffe6d3
        );
}


/* PURPLE */

.sems-org-benefits__icon.purple {

    color: #6528dd;

    background:
        linear-gradient(
            145deg,
            #f2edff,
            #e8ddff
        );
}


/* PINK */

.sems-org-benefits__icon.pink {

    color: #ee1e5d;

    background:
        linear-gradient(
            145deg,
            #ffeaf0,
            #ffdae6
        );
}


/* YELLOW */

.sems-org-benefits__icon.yellow {

    color: #e7a300;

    background:
        linear-gradient(
            145deg,
            #fff8df,
            #ffedbd
        );
}


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

.sems-org-benefits__card h3 {

    position: relative;

    z-index: 4;

    margin:
        0
        0
        10px;

    color: var(--sob-dark);

    font-size: 17px;

    line-height: 1.3;

    font-weight: 800;
}


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

.sems-org-benefits__card p {

    position: relative;

    z-index: 4;

    max-width: 270px;

    margin: 0;

    color: var(--sob-text);

    font-size: 13px;

    line-height: 1.55;
}


/* ==========================================================
   ARROW
========================================================== */

.sems-org-benefits__arrow {

    position: absolute;

    z-index: 5;

    left: 24px;

    bottom: 20px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    font-size: 17px;

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


.sems-org-benefits__arrow:hover {

    transform: translateX(4px);
}


.sems-org-benefits__arrow.blue {

    color: #087fd7;

    background: #e8f4fd;
}


.sems-org-benefits__arrow.green {

    color: #07924b;

    background: #e4f7eb;
}


.sems-org-benefits__arrow.orange {

    color: #ef6d09;

    background: #fff0e2;
}


.sems-org-benefits__arrow.purple {

    color: #6a2bd8;

    background: #efe8fd;
}


.sems-org-benefits__arrow.pink {

    color: #e72259;

    background: #ffe8ef;
}


.sems-org-benefits__arrow.yellow {

    color: #dc9c00;

    background: #fff5d8;
}


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

.sems-org-benefits__corner {

    position: absolute;

    z-index: 1;

    right: -75px;

    bottom: -95px;

    width: 200px;

    height: 200px;

    display: block;

    border-radius: 50%;

    opacity: .08;
}


.sems-org-benefits__corner.blue {
    background: var(--sob-blue);
}


.sems-org-benefits__corner.green {
    background: var(--sob-green);
}


.sems-org-benefits__corner.orange {
    background: var(--sob-orange);
}


.sems-org-benefits__corner.purple {
    background: var(--sob-purple);
}


.sems-org-benefits__corner.pink {
    background: var(--sob-pink);
}


.sems-org-benefits__corner.yellow {
    background: var(--sob-yellow);
}


/* ==========================================================
   BACKGROUND SHAPES
========================================================== */

.sems-org-benefits__shape {

    position: absolute;

    z-index: 1;

    border-radius: 50%;

    pointer-events: none;
}


/* top right */

.sems-org-benefits__shape--top {

    width: 470px;

    height: 470px;

    right: -220px;

    top: -295px;

    background:
        rgba(218, 239, 252, .62);
}


/* bottom left */

.sems-org-benefits__shape--bottom {

    width: 400px;

    height: 400px;

    left: -290px;

    bottom: -280px;

    background:
        rgba(220, 240, 252, .62);
}


/* ==========================================================
   DOT PATTERN
========================================================== */

.sems-org-benefits__dots {

    position: absolute;

    z-index: 2;

    width: 145px;

    height: 145px;

    opacity: .48;

    pointer-events: none;

    background-image:
        radial-gradient(
            rgba(54, 159, 218, .38) 2px,
            transparent 2px
        );

    background-size:
        19px
        19px;
}


.sems-org-benefits__dots--top {

    top: 75px;

    right: 32px;
}


.sems-org-benefits__dots--bottom {

    left: 28px;

    bottom: 35px;
}


/* ==========================================================
   RESPONSIVE 1200
========================================================== */

@media (max-width: 1200px) {

    .sems-org-benefits__grid {

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


    .sems-org-benefits__card {

        min-height: 230px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 800px) {

    .sems-org-benefits {

        padding:
            55px
            30px
            65px;
    }


    .sems-org-benefits__title {

        font-size: 32px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .sems-org-benefits {

        padding:
            42px
            20px
            55px;
    }


    .sems-org-benefits__label {

        font-size: 11px;
    }


    .sems-org-benefits__label > span {

        width: 24px;
    }


    .sems-org-benefits__title {

        font-size: 29px;

        letter-spacing: -.6px;
    }


    .sems-org-benefits__description {

        font-size: 14px;
    }


    .sems-org-benefits__grid {

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .sems-org-benefits__card {

        min-height: 215px;
    }


    .sems-org-benefits__icon {

        width: 56px;

        height: 56px;

        font-size: 25px;
    }

}