/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

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

    background:#09090f;

    color:#fff;

}


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

.workflow{

    position:relative;

    padding:120px 0;

    overflow:hidden;

}

/* Aurora */

.workflow::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    background:radial-gradient(circle,
        rgba(112,0,255,.15),
        transparent 70%);

    left:-250px;
    top:-150px;

}

.workflow::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    background:radial-gradient(circle,
        rgba(0,255,255,.08),
        transparent 70%);

    right:-250px;
    bottom:-200px;

}

.container{

    width:90%;
    max-width:1400px;

    margin:auto;

    position:relative;

    z-index:2;

}

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

.subtitle{

    font-size:14px;

    letter-spacing:5px;

    font-weight:700;

    text-transform:uppercase;

    background:linear-gradient(90deg,#7B61FF,#29D8FF);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    margin-bottom:25px;

}

.title{

    font-size:68px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:35px;

}

.title span{

    background:linear-gradient(90deg,#7B61FF,#29D8FF);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.desc{

    max-width:820px;

    font-size:28px;

    color:#A4A8B8;

    line-height:1.8;

    margin-bottom:90px;

}

/* ===========================
   TIMELINE
=========================== */

.timeline{

    position:relative;

    display:grid;

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

    gap:60px;

}

/* garis */

.timeline::before{

    content:"";

    position:absolute;

    top:45px;

    left:6%;

    width:88%;

    height:2px;

    background:#262630;

}

/* ===========================
   ITEM
=========================== */

.step{

    position:relative;

    text-align:center;

}

/* Lingkaran */

.number{

    width:96px;
    height:96px;

    margin:auto;

    border-radius:50%;

    background:#111119;

    border:3px solid #2A2A35;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    font-weight:700;

    color:#B9BDC9;

    margin-bottom:55px;

    transition:.4s;

}

/* Hover */

.step:hover .number{

    border-color:#6C63FF;

    background:linear-gradient(145deg,#6C63FF,#2AC8FF);

    color:white;

    transform:translateY(-10px);

    box-shadow:0 0 40px rgba(80,120,255,.45);

}

/* Judul */

.step h3{

    font-size:1rem;

    margin-bottom:25px;

    font-weight:700;

}

/* Text */

.step p{

    color:#A0A4B8;

    line-height:1.8;

    font-size:1rem;

}

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

@media(max-width:1200px){

.title{

font-size:1rem;

}

.desc{

font-size:1rem;

}

.step h3{

font-size:1rem;

}

.step p{

font-size:1rem;

}

}

@media(max-width:992px){

.timeline{

grid-template-columns:1fr 1fr;

gap:70px;

}

.timeline::before{

display:none;

}

}

@media(max-width:768px){

.title{

font-size:42px;

}

.desc{

font-size:18px;

}

.timeline{

grid-template-columns:1fr;

}

}