/* =======================================================
   GCC HOW TO BUY
======================================================= */

.gcc-how-to-buy-wrapper{

    background:#fff;

    border-radius:20px;

    padding:24px;

    border:1px solid #edf2f7;

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

}

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

.gcc-how-to-buy-title{

    font-size:30px;

    font-weight:700;

    color:#111827;

    margin-bottom:28px;

}

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

.gcc-how-to-buy-list{

    position:relative;

}

/* Vertical Line */

.gcc-how-to-buy-list::before{

    content:"";

    position:absolute;

    left:18px;

    top:18px;

    bottom:18px;

    width:2px;

    background:#bde6c8;

}

/* =======================================================
   Step
======================================================= */

.gcc-how-step{

    display:flex;

    align-items:flex-start;

    gap:18px;

    position:relative;

    margin-bottom:28px;

}

.gcc-how-step-last{

    margin-bottom:0;

}

/* =======================================================
   Left
======================================================= */

.gcc-how-step-left{

    position:relative;

    z-index:2;

}

/* =======================================================
   Circle
======================================================= */

.gcc-how-circle{

    width:38px;

    height:38px;

    border-radius:50%;

    background:#16a34a;

    color:#fff;

    font-size:17px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

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

}

/* Animated Ring */

.gcc-how-circle::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    padding:2px;

    background:conic-gradient(

        #16a34a 0deg,

        #22c55e 180deg,

        #dc2626 180deg,

        #ef4444 360deg

    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    animation:gccHowRotate 2s linear infinite;

}

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

.gcc-how-step-right{

    flex:1;

    padding-top:2px;

}

.gcc-how-heading{

    font-size:19px;

    font-weight:700;

    color:#111827;

    margin-bottom:5px;

}

.gcc-how-text{

    font-size:15px;

    color:#6b7280;

    line-height:1.6;

}

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

.gcc-how-step:hover .gcc-how-circle{

    transform:scale(1.08);

    transition:.25s;

}

.gcc-how-step:hover .gcc-how-heading{

    color:#16a34a;

    transition:.25s;

}

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

@keyframes gccHowRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

@media(max-width:768px){

    .gcc-how-to-buy-wrapper{

        padding:18px;

    }

    .gcc-how-to-buy-title{

        font-size:24px;

    }

    .gcc-how-heading{

        font-size:17px;

    }

    .gcc-how-text{

        font-size:14px;

    }

}