/* =======================================================
   GCC USE CASES
======================================================= */

.gcc-use-cases-wrapper{

    background:#fff;

    border-radius:20px;

    padding:24px;

    border:1px solid #edf2f7;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

/* =======================================================
   Title
======================================================= */

.gcc-use-cases-title{

    font-size:30px;

    font-weight:700;

    color:#111827;

    margin-bottom:28px;

}

/* =======================================================
   List
======================================================= */

.gcc-use-cases-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

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

.gcc-use-case{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 14px;

    border-radius:14px;

    border-left:4px solid transparent;

    transition:.30s ease;

}

/* =======================================================
   Hover
======================================================= */

.gcc-use-case:hover{

    background:#f8fffb;

    border-left:4px solid #16a34a;

    box-shadow:0 8px 20px rgba(22,163,74,.08);

}

/* =======================================================
   Icon
======================================================= */

.gcc-use-icon{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#eaf9ef;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    flex-shrink:0;

    position:relative;

    transition:.30s;

}

/* =======================================================
   Green Ring
======================================================= */

.gcc-use-icon::before{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:50%;

    border:2px solid rgba(22,163,74,.28);

}

/* =======================================================
   Icon Hover
======================================================= */

.gcc-use-case:hover .gcc-use-icon{

    transform:scale(1.12);

}

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

.gcc-use-content{

    flex:1;

}

/* =======================================================
   Heading
======================================================= */

.gcc-use-heading{

    font-size:19px;

    font-weight:700;

    color:#111827;

    margin-bottom:4px;

    transition:.25s;

}

.gcc-use-case:hover .gcc-use-heading{

    color:#16a34a;

}

/* =======================================================
   Text
======================================================= */

.gcc-use-text{

    font-size:15px;

    color:#6b7280;

    line-height:1.6;

}

/* =======================================================
   Heart Beat Animation
======================================================= */

.gcc-use-case:first-child .gcc-use-icon span{

    display:inline-block;

    animation:gccHeartbeat 1.8s infinite;

}

@keyframes gccHeartbeat{

    0%{

        transform:scale(1);

    }

    14%{

        transform:scale(1.20);

    }

    28%{

        transform:scale(1);

    }

    42%{

        transform:scale(1.20);

    }

    70%{

        transform:scale(1);

    }

    100%{

        transform:scale(1);

    }

}

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

@media(max-width:768px){

    .gcc-use-cases-wrapper{

        padding:18px;

    }

    .gcc-use-cases-title{

        font-size:24px;

    }

    .gcc-use-icon{

        width:42px;

        height:42px;

        font-size:22px;

}

    .gcc-use-heading{

        font-size:16px;

        line-height:1.3;

}

    .gcc-use-text{

        font-size:13px;

        line-height:1.45;

}

}