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

.apropos-hero{

    position: relative;

    height: 80vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:url("assets/images/hero-about.jpg");

    background-size:cover;

    background-position:center;

}


.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}


.hero-content{

    position:relative;

    z-index:2;

    color:var(--white);

    max-width:800px;

    padding:20px;

}


.hero-subtitle{

    color:var(--gold);

    font-size:var(--fs-18);

    letter-spacing:3px;

    text-transform:uppercase;

}


.hero-content h1{

    font-family:var(--font-title);

    font-size:var(--fs-60);

    margin:20px 0;

}


.hero-content h1::after{

    content:"";

    display:block;

    width:80px;

    height:3px;

    background:var(--gold);

    margin:20px auto;

}


.hero-content p{

    font-size:var(--fs-18);

    line-height:1.9;

}

@media(max-width:768px){

    .apropos-hero{

        height:65vh;

    }

    .hero-content h1{

        font-size:var(--fs-36);

    }

    .hero-content p{

        font-size:var(--fs-16);

    }

}

/*=====================================
        PRESENTATION
=====================================*/

.apropos-presentation{

    max-width:var(--container);

    margin:120px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    padding:0 25px;

}


.apropos-image img{

    width:100%;

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

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

    transition:var(--transition);

}


.apropos-image img:hover{

    transform:scale(1.02);

}


.section-badge{

    display:inline-block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:var(--fs-14);

    margin-bottom:15px;

}


.apropos-content h2{

    font-family:var(--font-title);

    font-size:var(--fs-48);

    color:var(--black);

    margin-bottom:25px;

}


.apropos-content p{

    color:var(--gray-700);

    line-height:2;

    margin-bottom:20px;

}

@media(max-width:992px){

    .apropos-presentation{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

    }

}

/*=====================================
        HISTORY
=====================================*/

.apropos-history{

    max-width:var(--container);

    margin:120px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    padding:0 25px;

}


.history-content h2{

    font-family:var(--font-title);

    font-size:var(--fs-48);

    margin:20px 0;

    color:var(--black);

}


.history-content h2::after{

    content:"";

    display:block;

    width:70px;

    height:3px;

    background:var(--gold);

    margin-top:18px;

}


.history-content p{

    color:var(--gray-700);

    line-height:2;

    margin-bottom:20px;

}


.history-image img{

    width:100%;

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

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

}

@media(max-width:992px){

    .apropos-history{

        grid-template-columns:1fr;

    }

    .history-content{

        text-align:center;

    }

    .history-content h2::after{

        margin:18px auto 0;

    }

}

/*=====================================
        MISSION
=====================================*/

.apropos-mission{

    max-width:var(--container);

    margin:120px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    padding:0 25px;

}


.mission-image img{

    width:100%;

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

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

}


.mission-content h2{

    font-family:var(--font-title);

    font-size:var(--fs-48);

    color:var(--black);

    margin:20px 0;

}


.mission-content h2::after{

    content:"";

    display:block;

    width:70px;

    height:3px;

    background:var(--gold);

    margin-top:18px;

}


.mission-content p{

    color:var(--gray-700);

    line-height:2;

    margin-bottom:20px;

}

@media(max-width:992px){

    .apropos-mission{

        grid-template-columns:1fr;

    }

    .mission-content{

        text-align:center;

    }

    .mission-content h2::after{

        margin:18px auto 0;

    }

}

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

.apropos-values{

    padding:120px 25px;

    background:var(--off-white);

}


.section-header{

    max-width:700px;

    margin:0 auto 70px;

    text-align:center;

}


.section-header h2{

    font-family:var(--font-title);

    font-size:var(--fs-48);

    color:var(--black);

    margin:20px 0;

}


.section-header p{

    color:var(--gray-700);

    line-height:1.9;

}


.values-container{

    max-width:var(--container);

    margin:auto;

    display:grid;

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

    gap:35px;

}


.value-card{

    background:var(--white);

    padding:40px 30px;

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

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

    text-align:center;

    transition:var(--transition);

}


.value-card:hover{

    transform:translateY(-10px);

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

}


.value-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:rgba(201,162,39,.10);

    display:flex;

    justify-content:center;

    align-items:center;

}


.value-icon i{

    font-size:32px;

    color:var(--gold);

}


.value-card h3{

    font-family:var(--font-title);

    font-size:var(--fs-30);

    margin-bottom:18px;

    color:var(--black);

}


.value-card p{

    color:var(--gray-700);

    line-height:1.9;

}

@media(max-width:992px){

    .values-container{

        grid-template-columns:1fr;

    }

}

/*=====================================
        WHY NICLIB
=====================================*/


.why-niclib{

    max-width:var(--container);

    margin:120px auto;

    padding:0 25px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.why-image img{

    width:100%;

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

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

}



.why-content h2{

    font-family:var(--font-title);

    font-size:var(--fs-48);

    color:var(--black);

    margin:20px 0;

}



.why-content p{

    color:var(--gray-700);

    line-height:2;

    margin-bottom:35px;

}



.advantages-list{

    list-style:none;

    padding:0;

}



.advantages-list li{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}



.advantages-list i{

    color:var(--gold);

    font-size:22px;

}



.advantages-list span{

    color:var(--gray-700);

}

@media(max-width:992px){

    .why-niclib{

        grid-template-columns:1fr;

    }


    .why-content{

        text-align:center;

    }


    .advantages-list li{

        justify-content:center;

    }

}

/*=====================================
        FINAL QUOTE
=====================================*/


.apropos-quote{

    position:relative;

    height:400px;

    background:url("../images/dc/hotel.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    margin-top:120px;

}



.quote-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

}



.quote-content{

    position:relative;

    z-index:2;

    color:var(--white);

    max-width:800px;

    padding:25px;

}



.quote-content i{

    font-size:40px;

    color:var(--gold);

    margin-bottom:25px;

}



.quote-content h2{

    font-family:var(--font-title);

    font-size:var(--fs-36);

    line-height:1.5;

    margin-bottom:25px;

}



.quote-content p{

    color:var(--gold);

    font-size:var(--fs-20);

    letter-spacing:3px;

}

@media(max-width:768px){

    .apropos-quote{

        height:350px;

    }


    .quote-content h2{

        font-size:var(--fs-24);

    }

}

.apropos-image img,
.history-image img,
.mission-image img{

    transition:transform var(--transition),
               box-shadow var(--transition);

}

.apropos-image img:hover,
.history-image img:hover,
.mission-image img:hover{

    transform:scale(1.03);

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

}