/* ==========================================================
   ABOUT
========================================================== */

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


/* ==========================================
   SHOWCASE
========================================== */

.about-showcase{
    position:relative;
    max-width:560px;
    margin:auto;
}

.showcase-browser{
    background:#fff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.showcase-browser img{
    width:100%;
    display:block;
}

.project-card{
    position:absolute;
    width:180px;
    background:#fff;
    padding:.6rem;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
}

.project-card img{
    width:100%;
    border-radius:var(--radius-md);
    display:block;
}

.card-one{
    top:-30px;
    right:-40px;
}

.card-two{
    bottom:-30px;
    left:-40px;
}

.about-content{
    padding-left:2rem;
}

.mini-title{
    color:var(--primary);
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.about-content h3{
    font-size:2rem;
    margin-bottom:1.2rem;
    color:#0f172a;
}

.about-content p{
    color:#64748b;
    line-height:1.9;
    margin-bottom:2rem;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.25rem;
}

.feature-card{
    position: relative;
    display:flex;
    gap:1rem;
    align-items:flex-start;
    padding:1.2rem;
    border-radius:var(--radius-md);
    background:#ffffff;
    border:1px solid #e5e7eb;
    transition:all .35s ease;
}

.feature-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}

.feature-card i{
   font-size:1.4rem;
   color:var(--primary);
   border-color:rgba(37,99,235,.25);
}

.feature-card h6{
   color:#0f172a;
   margin-bottom:.35rem;
}

.feature-card p{
    margin:0;
    font-size:.92rem;
}

.feature-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}

@media (max-width:991.98px){

    .about-content{
        padding-left:0;
        text-align:center;
        margin-top:3rem;
    }

    .feature-grid{
        margin-top:2rem;
    }

}

@media (max-width:767.98px){

    .feature-grid{
        grid-template-columns:1fr;
    }

    .project-card{
        display:none;
    }

}