/* =======================================================
   GCC ROADMAP
======================================================= */

.gcc-roadmap-wrapper{

    background:#ffffff;

    border-radius:20px;

    padding:30px;

    border:1px solid #edf2f7;

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

    overflow:hidden;

}

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

.gcc-roadmap-title{

    font-size:34px;

    font-weight:700;

    color:#111827;

    text-align:center;

    margin-bottom:8px;

}

.gcc-roadmap-subtitle{

    text-align:center;

    color:#6b7280;

    font-size:16px;

    margin-bottom:45px;

}

/* =======================================================
   Timeline
======================================================= */

.gcc-roadmap-timeline{

    position:relative;

}

.gcc-roadmap-timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:4px;

    transform:translateX(-50%);

    background:linear-gradient(

        to bottom,

        #16a34a,

        #22c55e,

        #d1d5db

    );

    border-radius:20px;

}

/* =======================================================
   Row
======================================================= */

.gcc-roadmap-row{

    display:grid;

    grid-template-columns:1fr 80px 1fr;

    align-items:center;

    margin-bottom:45px;

    position:relative;

}

.gcc-roadmap-row:last-child{

    margin-bottom:0;

}

/* =======================================================
   Empty
======================================================= */

.gcc-roadmap-empty{

    min-height:10px;

}

/* =======================================================
   Timeline Node
======================================================= */

.gcc-roadmap-node{

    width:56px;

    height:56px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    z-index:10;

    font-size:22px;

    font-weight:700;

    color:#ffffff;

    box-shadow:

        0 0 0 8px #ffffff,

        0 10px 30px rgba(0,0,0,.12);

}

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

.gcc-roadmap-card{

    background:#ffffff;

    border-radius:18px;

    padding:24px;

    border:1px solid #e5e7eb;

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

    transition:.30s ease;

    position:relative;

    overflow:hidden;

}

.gcc-roadmap-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(22,163,74,.12);

}

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

.gcc-roadmap-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;

    gap:15px;

}

.gcc-roadmap-phase{

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#6b7280;

}

.gcc-roadmap-heading{

    font-size:24px;

    font-weight:700;

    color:#111827;

    margin:0 0 18px;

}

/* =======================================================
   Status Badge
======================================================= */

.gcc-roadmap-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}

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

.gcc-roadmap-list{

    list-style:none;

    margin:0;

    padding:0;

}

.gcc-roadmap-list li{

    position:relative;

    padding-left:24px;

    margin-bottom:12px;

    font-size:15px;

    color:#374151;

    transition:.25s;

}

.gcc-roadmap-list li:last-child{

    margin-bottom:0;

}

.gcc-roadmap-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:10px;

    height:10px;

    border-radius:50%;

}

/* =======================================================
   Completed
======================================================= */

.gcc-roadmap-completed{

    background:#f6fff8;

    border:1px solid #bbf7d0;

    border-left:5px solid #16a34a;

    box-shadow:0 12px 30px rgba(22,163,74,.10);

}

.gcc-node-completed{

    background:#16a34a;

}

.gcc-status-completed{

    background:#dcfce7;

    color:#15803d;

}

.gcc-roadmap-completed .gcc-roadmap-list li::before{

    background:#16a34a;

}

/* =======================================================
   Live
======================================================= */

.gcc-roadmap-live{

    background:#fff8f1;

    border:1px solid #fed7aa;

    border-left:5px solid #f97316;

    box-shadow:0 12px 30px rgba(249,115,22,.10);

}

.gcc-node-live{

    background:#f97316;

}

.gcc-status-live{

    background:#ffedd5;

    color:#ea580c;

}

.gcc-roadmap-live .gcc-roadmap-list li::before{

    background:#f97316;

}

/* =======================================================
   Upcoming
======================================================= */

.gcc-roadmap-upcoming{

    background:#f8fafc;

    border:1px solid #cbd5e1;

    border-left:5px solid #94a3b8;

    box-shadow:0 12px 30px rgba(100,116,139,.08);

}

.gcc-node-upcoming{

    background:#94a3b8;

}

.gcc-status-upcoming{

    background:#f3f4f6;

    color:#64748b;

}

.gcc-roadmap-upcoming .gcc-roadmap-list li::before{

    background:#94a3b8;

}

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

.gcc-roadmap-card:hover .gcc-roadmap-heading{

    color:#16a34a;

}

.gcc-roadmap-card:hover .gcc-roadmap-list li{

    transform:translateX(4px);

}

.gcc-roadmap-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #16a34a,
        #22c55e
    );

    opacity:0;

    transition:.30s;

}

.gcc-roadmap-card:hover::before{

    opacity:1;

}

/* =======================================================
   LIVE PULSE
======================================================= */

.gcc-node-live{

    animation:gccRoadmapPulse 2s infinite;

}

@keyframes gccRoadmapPulse{

    0%{

        box-shadow:
            0 0 0 0 rgba(249,115,22,.45),
            0 0 0 8px #ffffff;

    }

    70%{

        box-shadow:
            0 0 0 14px rgba(249,115,22,0),
            0 0 0 8px #ffffff;

    }

    100%{

        box-shadow:
            0 0 0 0 rgba(249,115,22,0),
            0 0 0 8px #ffffff;

    }

}

/* =======================================================
   BETTER NODE
======================================================= */

.gcc-roadmap-node{

    transition:.30s;

}

.gcc-roadmap-row:hover .gcc-roadmap-node{

    transform:scale(1.08);

}

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

@media(max-width:768px){

.gcc-roadmap-wrapper{

    padding:20px;

}

.gcc-roadmap-title{

    font-size:26px;

}

.gcc-roadmap-subtitle{

    font-size:14px;

    margin-bottom:28px;

}

.gcc-roadmap-timeline::before{

    left:20px;

    transform:none;

}

.gcc-roadmap-row{

    display:block;

    position:relative;

    padding-left:55px;

    margin-bottom:30px;

}

.gcc-roadmap-empty{

    display:none;

}

.gcc-roadmap-node{

    position:absolute;

    left:0;

    top:0;

    width:40px;

    height:40px;

    font-size:16px;

    box-shadow:
        0 0 0 6px #ffffff,
        0 8px 18px rgba(0,0,0,.12);

}

.gcc-roadmap-card{

    padding:18px;

}

.gcc-roadmap-card-header{

    display:block;

}

.gcc-roadmap-phase{

    margin-bottom:10px;

}

.gcc-roadmap-heading{

    font-size:20px;

    margin-bottom:15px;

}

.gcc-roadmap-status{

    display:inline-flex;

    margin-bottom:15px;

}

.gcc-roadmap-list li{

    font-size:14px;

    padding-left:20px;

}

.gcc-roadmap-card:hover{

    transform:none;

}

.gcc-roadmap-card:hover .gcc-roadmap-list li{

    transform:none;

}

}

/* =======================================================
   DESKTOP SPACING
======================================================= */

@media(min-width:769px){

.gcc-roadmap-left .gcc-roadmap-card{

    margin-right:30px;

}

.gcc-roadmap-right .gcc-roadmap-card{

    margin-left:30px;

}

}