/* ==========================================
                ABOUT SECTION
========================================== */
.about {
    background-color: var(--background-light);
}


.about:not(.section-header){ 
    padding-top: clamp(0.9rem,2vw,4.5rem);
    padding-left: clamp(0.9rem,3vw,3rem);
    padding-right: clamp(0.9rem,3vw,3rem) ;
}

.about-content{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    align-items:flex-start;
    gap:clamp(2rem,3vw,6rem);
}
/*left column*/
.about-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.about-text h3{
    color:var(--primary-color);
    font-size:clamp(2rem,3.2vw,5rem);
    font-weight:700;
    margin-bottom:0.9rem;
}

.about-text p{
    font-size:clamp(0.9rem,1.2vw,2rem);
    color:var(--text-dark);
    margin-bottom:1rem;
    max-width:60ch;
}

/* =========================
   RIGHT COLUMN
========================= */

.about-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-right .about-image {
    margin: 0;
}

.about-image{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.about-image img{
    width:100%;
    object-fit:cover;
    aspect-ratio:1;

}

.about-image figcaption{
    font-size:clamp(0.9rem,1vw,3rem);
    color:var(--text-gray);
    line-height:1.6;
}

@media(max-width:900px){

    .about-content{
        grid-template-columns:1fr;
    }

    .about-text{
        order:1;
    }

    .about-right{
        order:2;
        align-items: center;
    }

    .about-text p{
        max-width:100%;
    }
}


.about-badges{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;

    margin-top:1rem ;
}

.badge{
    display: flex;
    align-items: center;
    padding:
        .6rem
        1rem;
    border:3px solid var(--border);
    border-radius: var(--radius-small);

    font-size:clamp(0.9rem,1.2vw,1.7rem);
    font-weight:570;

    transition:.35s;
    cursor:default;
}

.badge-outline {
    gap: 8px;
    border:3px solid var(--primary-color);
}

.badge-outline img {
    width: 30px;
    
}
.badge:hover{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:white;
}