/*====================================================
                    APROPOS.CSS
                    Ben's Line Dance
====================================================*/


/*====================================================
                    HERO
====================================================*/

.about-hero{

    background:url("../images/hero-about.png") center center / cover no-repeat;

    min-height:650px;

}

.about-hero .hero-content{

    max-width:900px;
    position: relative;

}


/*====================================================
                    PAGE
====================================================*/

.about-container{

    padding:90px 0;

}

.about-container .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 25px;

}

.about-card h2{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

    font-size:2.2rem;

    color:var(--primary);

}

.about-card p{

    font-size:1.08rem;

    line-height:1.9;

}

.value-card h3{

    font-size:1.6rem;

    margin:20px 0 15px;

}

/*====================================================
                    CARTES
====================================================*/

.about-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:45px;

    margin-bottom:45px;

    transition:var(--transition);

}

.about-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-hover);

}

.about-card h2{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.about-card h2 i{

    color:var(--primary);

}

.about-card p{

    color:var(--text);

    margin-bottom:18px;

}


/*====================================================
                VALEURS
====================================================*/

.values{

    display:grid;

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

    gap:30px;

    margin-bottom:50px;

}

.value-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:40px 30px;

    text-align:center;

    transition:var(--transition);

}

.value-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-hover);

}

.value-card i{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:20px;

}

.value-card h3{

    margin-bottom:15px;

}

.value-card p{

    color:var(--text-light);

}


/*====================================================
                    LISTE
====================================================*/

.about-list{

    list-style:none;

    padding:0;

    margin:0;

}

.about-list li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 0;

    border-bottom:1px solid var(--border);

    color:var(--text);

}

.about-list li:last-child{

    border-bottom:none;

}


/*====================================================
            IMAGE CENTRALE
====================================================*/

.about-banner{

    margin:60px 0;

    overflow:hidden;

    border-radius:var(--radius-large);

    box-shadow:var(--shadow-hover);

}

.about-banner img{

    display:block;

    width:100%;

    height:500px;

    object-fit:cover;

    transition:.5s;

}

.about-banner:hover img{

    transform:scale(1.05);

}


/*====================================================
                    CITATION
====================================================*/

.quote{

    margin:60px 0;

    padding:70px 50px;

    border-radius:var(--radius-large);

    text-align:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:white;

    box-shadow:var(--shadow-hover);

}

.quote blockquote{

    margin:0;

    font-size:2rem;

    line-height:1.8;

    font-style:italic;

}


/*====================================================
                APPEL À L'ACTION
====================================================*/

.about-cta{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:60px;

    text-align:center;

    box-shadow:var(--shadow);

}

.about-cta h2{

    margin-bottom:20px;

}

.about-cta p{

    max-width:700px;

    margin:0 auto 35px;

    color:var(--text-light);

}


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

@media(max-width:992px){

    .values{

        grid-template-columns:1fr;

    }

    .about-card{

        padding:35px;

    }

    .about-banner img{

        height:350px;

    }

}


@media(max-width:768px){

    .about-container{

        padding:70px 0;

    }

    .about-card{

        padding:25px;

    }

    .quote{

        padding:45px 25px;

    }

    .quote blockquote{

        font-size:1.4rem;

    }

    .about-banner img{

        height:260px;

    }

    .about-cta{

        padding:35px 25px;

    }

}


@media(max-width:576px){

    .about-hero{

        min-height:650px;

    }

    .value-card{

        padding:30px 20px;

    }

    .value-card i{

        font-size:2.4rem;

    }

}