/* =====================================================
   FEATURED PROJECTS
===================================================== */

.featured-projects{
    background:var(--section-light);
}


/* =====================================================
   PROJECT WRAPPER
===================================================== */

.featured-project-wrapper{
    margin-top:4rem;
    display:grid;
    grid-template-columns: .9fr 1.1fr;
    gap:4rem;
    align-items:center;
    padding:3rem;
    background:var(--section-white);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-md);
}

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

.project-category{
    display:inline-flex;
    padding:.35rem .9rem;
    border-radius:var(--radius-pill);
    background:#eff6ff;
    color:var(--primary);
    font-size:.85rem;
    font-weight:600;
    margin-bottom:1.2rem;
}

.project-content h3{
    font-size:clamp(1.8rem,3vw,2.4rem);
    line-height:1.2;
    margin-bottom:1rem;
    color:var(--dark);
}

.project-description{
    color:#64748b;
    line-height:1.8;
    margin-bottom:1.8rem;
}

/* =====================================================
   SERVICES TAGS
===================================================== */

.project-services{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-bottom:2rem;
}


.project-services span{
    padding:.45rem .9rem;
    background:var(--light-blue);
    border-radius:var(--radius-pill);
    font-size:.85rem;
    color:var(--primary);

}

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

.project-stack h6{
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#94a3b8;
    margin-bottom:.8rem;
}

.project-stack ul{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    padding:0;
    margin:0 0 2rem;
    list-style:none;
}

.project-stack li{
    font-size:.9rem;
    font-weight:500;
    color:var(--dark);
}

/* =====================================================
   BUTTON
===================================================== */

.btn-project{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.85rem 1.5rem;
    background:var(--primary);
    color:white;
    border-radius:var(--radius-pill);
    text-decoration:none;
    font-weight:600;
    transition:.35s ease;
}

.btn-project:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
    color:white;
}

/* =====================================================
   BROWSER MOCKUP
===================================================== */

.project-content {
    position:relative;
    z-index:1;
}

.testimonial-content > *:not([data-pix3ls-transition]) {

    position:relative;

    z-index:1;

}

.project-preview{
    position:relative;
}

.browser-frame{
    background:white;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    transform:perspective(1200px)
              rotateY(-5deg);
    transition:.45s ease;
}

.project-preview:hover .browser-frame{
    transform:perspective(1200px)
              rotateY(0deg)
              translateY(-8px);
}

.browser-header{
    height:45px;
    display:flex;
    align-items:center;
    gap:1rem;
    padding:0 1rem;
    background:#f8fafc;
}

.browser-dots{
    display:flex;
    gap:.35rem;
}

.browser-dots span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#cbd5e1;

}

.browser-url{
    flex:1;
    text-align:center;
    font-size:.75rem;
    color:#94a3b8;
}

.browser-body{
    aspect-ratio:16/10;
    overflow:hidden;
}

.browser-body img{
    width:100%;
    height:100%;
    /*object-fit:cover;*/
}

/* =====================================================
   FLOATING TAGS
===================================================== */

.floating-tag{
    position:absolute;
    padding:.7rem 1rem;
    background:white;
    border-radius:var(--radius-pill);
    box-shadow:var(--shadow-md);
    font-size:.85rem;
    font-weight:600;
    color:#334155;
    animation:floatTag 4s ease-in-out infinite;
}

.tag-one{
    top:15%;
    left:-30px;
}

.tag-two{
    bottom:15%;
    right:-30px;
    animation-delay:1.5s;
}



@keyframes floatTag{

    0%,
    100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }

}

/* =====================================================
   PAGINATION
===================================================== */

.project-navigation{
    margin-top:3rem;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2rem;
}

.project-navigation button{
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:white;
    box-shadow:var(--shadow-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s ease;
}

.project-navigation button:hover{
    transform:translateY(-4px);
    background:var(--primary);
    color:white;
}

.project-counter{
    font-weight:600;
    color:#64748b;
}

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

@media (max-width: 1199px){

    .featured-project-wrapper{

        gap:2.5rem;
        padding:2.5rem;

    }

    .project-content h3{

        font-size:2rem;

    }

}


@media (max-width: 991px){

    .featured-project-wrapper{

        grid-template-columns:1fr;
        gap:3rem;

    }

    /* Preview first on tablets/mobile */

    .project-preview{

        order:-1;

    }

    .project-content{

        text-align:center;

    }

    .project-services,
    .project-stack ul{

        justify-content:center;

    }

    .btn-project{

        margin:auto;

    }

    .floating-tag{

        display:none;

    }

    .browser-frame{

        transform:none;

    }

}


@media (max-width: 767px){

    .featured-projects{

        overflow:hidden;

    }

    .featured-project-wrapper{

        padding:2rem;
        border-radius:var(--radius-lg);

    }

    .featured-projects h2{

        font-size:2rem;

    }

    .project-content h3{

        font-size:1.6rem;

    }

    .project-description{

        font-size:.95rem;

    }

    .project-services{

        gap:.5rem;

    }

    .project-services span{

        font-size:.8rem;
        padding:.45rem .8rem;

    }

    .project-stack ul{

        gap:.5rem;

    }

    .browser-header{

        height:40px;

    }

    .browser-url{

        display:none;

    }

}


@media (max-width:575px){

    .featured-project-wrapper{

        padding:1.5rem;

    }

    .featured-projects h2{

        font-size:1.75rem;

    }

    .project-content h3{

        font-size:1.35rem;

    }

    .btn-project{

        width:100%;
        justify-content:center;

    }

    .project-navigation{

        gap:1rem;

    }

    .project-navigation button{

        width:42px;
        height:42px;

    }

}