/*==================================================
            FEATURED PROJECT
==================================================*/

.featured-project{

    background:#050816;

    position:relative;

    overflow:hidden;

}

.featured-project::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-250px;

    top:-150px;

    background:rgba(0,120,212,.08);

    filter:blur(120px);

}

.project-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

/*======================================
            PROJECT IMAGE
======================================*/

.project-image{

    position:relative;

}

.project-image img{

    width:100%;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.08);

    transition:.4s;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.project-image:hover img{

    transform:scale(1.02);

}

.project-status{

    position:absolute;

    top:20px;

    left:20px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    background:rgba(15,23,42,.92);

    backdrop-filter:blur(15px);

    border-radius:40px;

    border:1px solid rgba(255,255,255,.08);

    font-size:.9rem;

    font-weight:600;

}

.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22C55E;

    animation:pulse 2s infinite;

}

/*======================================
            PROJECT CONTENT
======================================*/

.project-content h3{

    font-size:2.4rem;

    margin:20px 0;

    line-height:1.3;

}

.project-content p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:30px;

}

.project-tag{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.project-tag span{

    padding:8px 16px;

    border-radius:30px;

    background:rgba(0,120,212,.12);

    color:#4FC3F7;

    border:1px solid rgba(0,120,212,.25);

    font-size:.85rem;

    font-weight:600;

}

/*======================================
            FEATURES
======================================*/

.project-features{

    display:grid;

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

    gap:16px;

    margin:35px 0;

}

.project-features div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.05);

    transition:.3s;

}

.project-features div:hover{

    transform:translateX(8px);

    border-color:var(--primary);

}

.project-features i{

    color:#22C55E;

}

/*======================================
            TECH STACK
======================================*/

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:30px 0;

}

.tech-stack span{

    padding:10px 18px;

    border-radius:30px;

    background:#111827;

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;

    font-size:.9rem;

}

.tech-stack span:hover{

    background:var(--primary);

    transform:translateY(-4px);

}

/*======================================
            BUTTONS
======================================*/

.project-buttons{

    display:flex;

    gap:20px;

    margin-top:35px;

}

/*======================================
            HOVER EFFECT
======================================*/

.project-content{

    animation:fadeUp .9s ease both;

}

.project-image{

    animation:fadeUp 1s ease both;

}

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

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.6);

    }

    70%{

        box-shadow:0 0 0 15px rgba(34,197,94,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(34,197,94,0);

    }

}

/*==================================================
            DEPLOYMENT ARCHITECTURE
==================================================*/

.architecture{

    position:relative;

    background:#08111F;

    overflow:hidden;

}

.architecture::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-250px;

    bottom:-250px;

    background:rgba(0,120,212,.08);

    filter:blur(140px);

}

.architecture .section-title{

    position:relative;

    z-index:2;

}

.architecture-flow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:70px;

    position:relative;

    z-index:2;

}

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

.flow-card{

    flex:1;

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:35px 25px;

    text-align:center;

    backdrop-filter:blur(20px);

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.flow-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(0,120,212,.12);

    top:-90px;

    right:-90px;

    transition:.4s;

}

.flow-card:hover::before{

    transform:scale(2);

}

.flow-card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,120,212,.22);

}

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

.flow-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,120,212,.15);

    color:var(--primary);

    font-size:2rem;

}

.flow-card h3{

    margin-bottom:15px;

    font-size:1.3rem;

}

.flow-card p{

    color:var(--text);

    line-height:1.7;

    font-size:.95rem;

}

/*======================================
            FLOW ARROWS
======================================*/

.flow-arrow{

    font-size:2rem;

    color:var(--primary);

    animation:arrowMove 2s infinite;

}

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

.flow-card::after{

    content:attr(data-step);

    position:absolute;

    top:18px;

    right:18px;

    width:30px;

    height:30px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:.85rem;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

}

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

.flow-card:nth-child(1) .flow-icon{

    color:#ffffff;

}

.flow-card:nth-child(3) .flow-icon{

    color:#F97316;

}

.flow-card:nth-child(5) .flow-icon{

    color:#00AEEF;

}

.flow-card:nth-child(7) .flow-icon{

    color:#22C55E;

}

/*======================================
            HOVER EFFECT
======================================*/

.flow-card:hover .flow-icon{

    transform:rotate(8deg) scale(1.08);

    transition:.3s;

}

.flow-card:hover h3{

    color:var(--primary);

}

/*======================================
            ANIMATION
======================================*/

@keyframes arrowMove{

    0%{

        transform:translateX(0);

        opacity:.6;

    }

    50%{

        transform:translateX(8px);

        opacity:1;

    }

    100%{

        transform:translateX(0);

        opacity:.6;

    }

}