/*=========================================
    ABOUT SECTION
    Centro Cultural Luz
=========================================*/

.about-home{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,
    rgba(150,106,48,.08),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(19,27,41,.05),
    transparent 35%),

    #ffffff;

}

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

}

.about-home .container{

    position:relative;

    z-index:2;

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

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    display:block;

    border-radius:32px;

    object-fit:cover;

    box-shadow:0 35px 80px rgba(19,27,41,.15);

    transition:.55s ease;

}

.about-image:hover img{

    transform:scale(1.04) rotate(.6deg);

}

.about-image:hover img{

    transform:scale(1.03);

}
/* =========================
   Floating Badge
========================= */

.about-badge{

    position:absolute;

    left:-25px;

    bottom:35px;

    background:#fff;

    border-radius:24px;

    padding:24px 30px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:0 25px 60px rgba(19,27,41,.16);

    transition:.35s;

}

.about-image:hover .about-badge{

    transform:translateY(-8px);

}

.about-badge strong{

    font-size:2.2rem;

    font-weight:800;

    color:#966A30;

    line-height:1;

}

.about-badge span{

    color:#6B7280;

    font-size:.95rem;

    line-height:1.5;

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

.about-content{

    max-width:620px;

}

.about-content h2{

    margin:22px 0;

    color:#131B29;

    font-size:clamp(2.8rem,5vw,3.6rem);

    font-weight:800;

    line-height:1.12;

    letter-spacing:-1.2px;

}

.about-content p{

    margin-bottom:35px;

    color:#6B7280;

    font-size:1.08rem;

    line-height:1.9;

}
/* =========================
   Features
========================= */

.about-features{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 20px;

    background:#F8FAFC;

    border:1px solid rgba(19,27,41,.06);

    border-radius:16px;

    transition:.35s;

}

.feature-item i{

    color:#966A30;

    font-size:20px;

}

.feature-item span{

    color:#131B29;

    font-weight:600;

}

.feature-item:hover{

    transform:translateY(-6px);

    background:#fff;

    border-color:rgba(150,106,48,.25);

    box-shadow:0 15px 35px rgba(19,27,41,.08);

}
/* =========================
   Button
========================= */

.about-content .btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    border-radius:60px;

    background:#966A30;

    color:#fff;

    font-size:1rem;

    font-weight:700;

    transition:.35s;

}

.about-content .btn-primary:hover{

    background:#A87839;

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(150,106,48,.35);

}
/* =========================
   Background Shapes
========================= */

.about-home::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(150,106,48,.04);

    top:-140px;

    right:-120px;

    z-index:0;

}

.about-home::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(19,27,41,.03);

    bottom:-120px;

    left:-120px;

    z-index:0;

}
.about-wrapper{

    position:relative;

    z-index:2;

}