/* ==========================================================
   PrimeTech Solutions
   about.css
   About Section v1.0
   ========================================================== */

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

.about{
    position:relative;
    overflow:hidden;
}

.about::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(255,138,0,.12),
        transparent 70%);
    top:-120px;
    right:-120px;
    pointer-events:none;
}

/* ==========================================================
   Grid
========================================================== */

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
}

/* ==========================================================
   Image
========================================================== */

.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    border-radius:var(--radius-lg);
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow-lg);
    transition:transform var(--transition);
}

.about-image:hover img{
    transform:scale(1.02);
}

/* Decorative Border */

.about-image::after{
    content:"";
    position:absolute;
    inset:16px -16px -16px 16px;
    border:2px solid rgba(255,138,0,.25);
    border-radius:var(--radius-lg);
    z-index:-1;
}

/* ==========================================================
   Content
========================================================== */

.about-content{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.about-content > p{
    font-size:1.05rem;
}

/* ==========================================================
   Feature Boxes
========================================================== */

.feature-box{
    display:flex;
    align-items:flex-start;
    gap:1.2rem;
    padding:1.4rem;
    border-radius:var(--radius-md);
}

.feature-box i{
    flex-shrink:0;
}

.feature-box h3{
    margin-bottom:.35rem;
}

.feature-box p{
    margin-bottom:0;
}

/* ==========================================================
   Highlight Box
========================================================== */

.about-highlight{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-top:1rem;
    padding:1.2rem 1.4rem;
    border-left:4px solid var(--color-primary);
    background:rgba(255,138,0,.06);
    border-radius:0 var(--radius-md) var(--radius-md) 0;
}

.about-highlight i{
    color:var(--color-primary);
    font-size:2rem;
}

.about-highlight p{
    margin:0;
    color:var(--text);
    font-weight:500;
}

/* ==========================================================
   Experience Counter
========================================================== */

.experience-card{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    width:140px;
    height:140px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:#fff;
    font-family:var(--font-heading);
    box-shadow:var(--shadow-glow);
}

.experience-card h2{
    margin:0;
    color:#fff;
    font-size:2.3rem;
}

.experience-card span{
    font-size:.9rem;
    text-align:center;
}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:992px){

    .about-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .about-image{
        order:-1;
    }

    .about-content{
        text-align:center;
    }

    .feature-box{
        text-align:left;
    }

    .experience-card{
        margin-inline:auto;
    }
}

@media(max-width:576px){

    .feature-box{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .about-image::after{
        display:none;
    }

    .experience-card{
        width:120px;
        height:120px;
    }

    .experience-card h2{
        font-size:2rem;
    }
}