@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "Satisfy";
    src: url("../fonts/satisfy/Satisfy-Regular.ttf") format("truetype");
}

* {
    margin: 0;
    box-sizing: border-box; /* Assure que les paddings ne cassent pas les dimensions */
}

body,
html {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #D9D9D9;
    background-color: #020106;
    margin: 0;
}

H2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-align: center;
    color: #D9D9D9;
    font-size: 2em;
    font-weight: 1000;
    text-shadow: 0 0 20px #020106;
    padding-top: 100px;
}

a {
    text-decoration: none;
}

/*Début de la page d'accueil avec le texte et la photo*/
.image_fond {
    width: 100%;
    height: 100vh;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        /* couche de couleur */
        url('../images/fond_hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}

/*Page d'accueil*/
.index_hero {
    font-family: 'Satisfy';
    font-size: 4em;
    font-weight: 200;
    text-align: center;
    align-items: center;
    text-shadow: 0 0 20px #020106;
    padding-bottom: 100px;
    padding-top: 100px;
}

.index_hero a {
    text-decoration: none;
    color: #D9D9D9;
}

.index_hero a:hover {
    text-decoration: none;
    color: #CA8C73;
}

/* ---------- Menu principal ---------- */
.menu_index {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

/* Enlève les puces de tous les éléments de liste du menu */
.menu_index,
.menu_index ul,
.menu_index li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Liens principaux ---------- */
.menu_index>ul {
    display: flex;
    align-items: center;
    gap: 150px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu_index li a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #D9D9D9;
    font-size: 1.2em;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: color 0.3s ease;
    list-style: none;
}

.menu_index li a:hover {
    color: #CA8C73;
}

.index_has_sous_menu {
    position: relative;
}

.index_has_sous_menu:hover .sous_menu {
    display: block;
}

.sous_titre_index {
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-align: center;
    color: #D9D9D9;
    font-size: 2em;
    font-weight: 1000;
    text-shadow: 0 0 20px #020106;
    padding-top: 100px;
}

/*Autres pages*/

.titre_hero {
    font-family: 'Satisfy';
    font-size: 4em;
    font-weight: 200;
    text-align: center;
    align-items: center;
    text-shadow: 0 0 20px #020106;
    padding-bottom: 100px;
    padding-top: 100px;
}

.titre_hero a {
    text-decoration: none;
    color: #D9D9D9;
}

.titre_hero a:hover {
    text-decoration: none;
    color: #CA8C73;
}

.btn_hero {
    background-color: #3f3f3f00;
    color: #D5C6A5;
    font-size: 20px;
    border: solid 2px #D5C6A5;
    text-align: center;
    padding: 10px 30px;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: block;
    margin: 90px auto 0;
}

.btn_hero:hover {
    background-color: #3f3f3f00;
    color: #CA8C73;
    border: solid 2px #CA8C73;
}

/* ---------- Menu principal ---------- */
.menu_accueil {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

/* Enlève les puces de tous les éléments de liste du menu */
.menu_accueil,
.menu_accueil ul,
.menu_accueil li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Liens principaux ---------- */
.menu_accueil>ul {
    display: flex;
    align-items: center;
    gap: 150px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu_accueil li a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #D9D9D9;
    font-size: 1.2em;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: color 0.3s ease;
    list-style: none;
}

.menu_accueil li a:hover {
    color: #CA8C73;
}

/* ---------- Sous-menu ---------- */
.has_sous_menu {
    position: relative;
}

/* Apparition au survol du parent */
.has_sous_menu:hover .sous_menu {
    display: block;
}

/* ICÔNES RÉSEAUX SOCIAUX - POSITION FIXE À GAUCHE */
.liens_menu {
    position: fixed;
    top: 40px;
    left: 30px;
    z-index: 1000;
}

.liens_menu ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.liens_menu li {
    margin: 0;
    padding: 0;
}

.liens_menu img {
    width: 35px;
    height: 35px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
}

.liens_menu img:hover {
    transform: scale(1.15);
    opacity: 1;
}

/* ====== BOUTON THEME DANS LE MENU ====== */
.theme-btn-menu {
    padding: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-btn-menu:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1) rotate(15deg);
}

.theme-btn-menu svg {
    width: 24px;
    height: 24px;
    color: #CA8C73;
    transition: transform 0.3s ease;
    cursor: pointer;
}

/*Accueil*/
.contenu {
    padding: 20px;
    min-height: 300px;
    margin-top: 100px;
}

.CTA {
    background-color: #020106;
    color: #CA8C73;
    padding: 5px 30px;
    font-size: 15px;
    border: solid 2px #CA8C73;
    display: block;
    margin: 50px auto 0;
    cursor: pointer;
}

.CTA:hover {
    background-color: #020106;
    border: solid 2px #cb582a;
    color: #cb582a;
}

.section1 {
    display: flex;
    margin: 50px 50px;
    gap: 30px;
}

.col_section1 h2 {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.renommee {
    text-align: center;
    margin: 100px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.section2 {
    display: flex;
    margin: 50px 50px;
    gap: 30px;
}

.col_section2 {
    border: solid;
    border-color: #CA8C73;
    padding: 30px;
    width: 100%;
}

.col_section2 h3 {
    text-align: center;
    color: #CA8C73;
    margin-bottom: 50px;
    font-size: 1.5rem;
}

.col_section2 p {
    text-align: center;
    justify-content: center;
}

.section3 {
    margin: 50px 50px;
    gap: 30px;
}

.divA {
    display: flex;
    margin: 50px 50px;
    gap: 30px;
}

.divB {
    display: flex;
    margin: 50px 50px;
    gap: 30px;
}

.divC {
    display: flex;
    margin: 50px 50px;
    gap: 30px;
}

.col_section3 {
    border: solid;
    border-color: #CA8C73;
    padding: 30px;
    width: 100%;
}

.col_section3 h3 {
    text-align: center;
    color: #CA8C73;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.col_section3 h4 {
    text-align: center;
    color: #D9D9D9;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 1.2rem;
}

.col_section3 p {
    text-align: center;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 1200px;
    background: #2a1810;
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

.content {
    position: relative;
    z-index: 5;
    padding: 100px 50px 50px;
}

h2 {
    text-align: center;
    color: #CA8C73;
    font-size: 2rem;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.CTA-btn {
    background-color: #1A1A1A;
    cursor: pointer;
    color: #CA8C73;
    border-radius: 20px;
    border: none;
    padding: 10px 30px;
    display: block;
    margin: 50px auto 0;
}

.CTA-btn:hover {
    background-color: #464544;
}

/*Projets*/
.titre2_projet {
    text-align: center;
    font-size: 40px;
    color: #D5C6A5;
}

.section1_ept,
.section2_ept {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 100px;
}

.section2_ept {
    flex-direction: row-reverse;
}

.section1_ept>div,
.section2_ept>div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section1_ept img,
.section2_ept img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====== Titres ====== */
.contenu_ept h2 {
    text-align: center;
    margin-top: 70px;
    margin-bottom: 70px;
}

/* ====== Section 1 ====== */
.col_section1_ept {
    background-color: #020106;
    color: #D9D9D9;
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    text-align: justify;
    justify-content: center;
}

.col_section1_ept h3 {
    text-align: left;
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 25px;
}

.col_section1_ept p {
    padding-top: 20px;
}

.col_section1_ept ul,
.col_section2_ept ul {
    list-style: none;
    padding-top: 20px;
}

/* ====== Section 2 ====== */
.col_section2_ept {
    background-color: #020106;
    color: #D9D9D9;
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    text-align: justify;
    justify-content: center;
}

.col_section2_ept h2 {
    color: #CA8C73;
    text-align: center;
}

.col_section2_ept p {
    padding-top: 20px;
}

.section4 {
    display: flex;
    margin: 50px 50px;
    gap: 30px;
}

.col_section4 {
    border: solid;
    border-color: #CA8C73;
    background-color: #020106;
    padding: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: justify;
    text-align: justify;
}

.col_section4 img {
    width: 100%;
    height: 100%;
}

.section4_titre {
    text-align: center;
    padding-top: 50px;
}

.section4_texte {
    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    text-align: justify;
}

.zoom-container {
    overflow: hidden;
    border-radius: 8px;
}

.zoom-container img {
    width: 300%;
    height: 300%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.zoom-container:hover img {
    transform: scale(1.5);
}

/* ==========================================================================
   SECTION FLIPPING CARDS (AVANT / APRÈS) - CORRIGÉE
   ========================================================================== */

.compare_ept {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin: 50px;
}

.compare_item {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.compare_titre {
    margin-top: 15px;
    text-align: center;
    font-size: 1.2rem;
    color: #CA8C73;
}

.compare_item p {
    text-align: center;
    font-size: 0.95rem;
    margin-top: 10px;
    color: #D9D9D9;
}

.compare_card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    perspective: 1000px;
    pointer-events: none; /* Désactive le blocage global de la carte 3D */
}

.compare_card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.compare_card.is-flipped .compare_card__inner {
    transform: rotateY(180deg);
}

.compare_card__face {
    position: absolute; /* Force la superposition exacte de l'avant et de l'arrière */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    pointer-events: auto; /* Réactive les événements sur la face visible */
}

/* Positionnement de la face arrière */
.compare_card__face--back {
    transform: rotateY(180deg);
}

/* Bouton de switch (Flip-btn) */
.compare_card__flip-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(2, 1, 6, 0.7);
    border: 1px solid #CA8C73;
    color: #CA8C73;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    transition: all 0.3s ease;
    pointer-events: auto; /* Permet le clic sur le bouton de flip */
}

.compare_card__flip-btn:hover {
    background: #CA8C73;
    color: #020106;
    transform: scale(1.1);
}

.compare_card__flip-btn svg {
    width: 100%;
    height: 100%;
}

/* Badges "Avant" / "Après" */
.compare_card__tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    color: #FFF;
    z-index: 10;
}

.compare_card__tag--before {
    background: #cb582a;
}

.compare_card__tag--after {
    background: #2ebd59;
}

/* Configuration des images pour la grille et la Lightbox */
.compare_card__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 5;
    pointer-events: auto !important; /* Force le navigateur à intercepter le clic */
    transition: filter 0.2s ease, transform 0.2s ease;
}

.compare_card__face img:hover {
    filter: brightness(0.85);
    transform: scale(1.02);
}

body.light-theme .compare_card__face img:hover {
    filter: brightness(0.95);
}

body.light-theme .compare_item p {
    color: #020106;
}

/* ==========================================================================
   LIGHTBOX (POP-UP IMAGE EN GRAND)
   ========================================================================== */

.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 1, 6, 0.95);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.is-open {
    display: flex;
    opacity: 1;
}

.lightbox__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 85%;
    max-height: 85%;
}

.lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border: 2px solid #CA8C73;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.lightbox__content .compare_card__tag {
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(2, 1, 6, 0.6);
    border: 1px solid #CA8C73;
    color: #CA8C73;
    font-size: 30px;
    padding: 10px 18px;
    cursor: pointer;
    z-index: 2010;
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;
}

.lightbox__nav:hover {
    background: #CA8C73;
    color: #020106;
}

.lightbox__nav--prev {
    left: 30px;
}

.lightbox__nav--next {
    right: 30px;
}

.lightbox__close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #D9D9D9;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2020;
    transition: color 0.3s ease;
}

.lightbox__close:hover {
    color: #CA8C73;
}

/* Bouton gris */
.CTA_ept_gris {
    background-color: #1A1A1A;
    color: #FFD200;
    border-radius: 20px;
    border: none;
    padding: 10px 30px;
    font-size: 20px;
    display: block;
    margin: 50px auto 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.CTA_ept_gris:hover {
    background-color: #464544;
}

/*Contact*/
.contact-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin: 40px auto;
    width: 65%;
    max-width: 1100px;
    background-color: #CA8C73;
    border-radius: 8px;
    overflow: hidden;
}

.contact-form {
    flex: 1;
    background-color: #CA8C73;
    padding: 30px;
    box-sizing: border-box;
}

.contact_h3 {
    color: #020106;
    font-size: 25px;
}

.contact-form h2 {
    color: #1A1A1A;
    margin-bottom: 20px;
}

form label {
    display: block;
    color: #1A1A1A;
    font-weight: 600;
    margin-top: 20px;
}

form input,
form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    border: none;
    border-radius: 4px;
    background-color: #cb582a;
    color: #1A1A1A;
    font-size: 1rem;
}

form textarea:hover,
form input:hover {
    background-color: #7c3011;
}

.contact-image {
    flex: 1;
}

.contact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn_contact {
    background-color: #CA8C73;
    color: #020106;
    font-size: 20px;
    border: solid 2px #020106;
    text-align: center;
    padding: 10px 30px;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: block;
    margin: 50px auto 0;
}

.btn_contact:hover {
    background-color: #CA8C73;
    color: #cb582a;
    border: solid 2px #cb582a;
}

/* ----- Footer Style ----- */
.footer {
    background-color: #CA8C73;
    padding: 30px 20px 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin-top: 50px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
    gap: 30px;
    text-align: left;
}

.footer p,
.footer a,
.footer li {
    color: #D9D9D9;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
}

.footer a {
    text-decoration: none;
    transition: color 0.3s;
}

.footer a:hover {
    color: #020106;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer-bottom {
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid #020106;
    padding-top: 15px;
    font-size: 13px;
    color: #f5f5f5;
}

/* ==========================================================================
   THEME CLAIR (LIGHT THEME)
   ========================================================================== */
body.light-theme {
    background-color: #f5f5f5;
    color: #020106;
}

/* Titres page d'accueil */
body.light-theme .index_hero {
    color: #f5f5f5;
    text-shadow: none;
}

body.light-theme .index_hero a {
    color: #f5f5f5;
}

body.light-theme .index_hero a:hover {
    color: #CA8C73;
}

/* Menu page d'accueil */
body.light-theme .menu_index li a {
    color: #f5f5f5;
}

body.light-theme .menu_index li a:hover {
    color: #CA8C73;
}

body.light-theme .sous_titre_index {
    color: #f5f5f5;
}

/* Titres autre pages */
body.light-theme .titre_hero {
    color: #020106;
    text-shadow: none;
}

body.light-theme .titre_hero a {
    color: #020106;
}

body.light-theme .titre_hero a:hover {
    color: #CA8C73;
}

body.light-theme h2,
body.light-theme h3,
body.light-theme h4 {
    color: #020106;
    text-shadow: none;
}

/* Paragraphes et textes généraux */
body.light-theme p {
    color: #020106;
}

/* Menu */
body.light-theme .menu_accueil li a {
    color: #020106;
}

body.light-theme .menu_accueil li a:hover {
    color: #CA8C73;
}

/* Boutons thème dans le menu */
body.light-theme .theme-btn-menu {
    background-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .theme-btn-menu:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

body.light-theme .theme-btn-menu svg {
    color: #CA8C73;
}

/* Sections avec fond #020106 → #D9D9D9 */
body.light-theme .col_section1_ept,
body.light-theme .col_section2_ept {
    background-color: #f5f5f5;
    color: #020106;
}

body.light-theme .col_section1_ept h2,
body.light-theme .col_section1_ept h3 {
    color: #020106;
}

body.light-theme .col_section2_ept h2 {
    color: #CA8C73;
}

/* Bordures */
body.light-theme .col_section2,
body.light-theme .col_section3,
body.light-theme .col_section4 {
    border-color: #CA8C73;
}

/* Titres colorés dans les sections */
body.light-theme .col_section2 h3,
body.light-theme .col_section3 h3 {
    color: #CA8C73;
}

body.light-theme .col_section3 h4 {
    color: #020106;
}

/* Bouton Hero - s'adapte au fond de l'image */
body.light-theme .btn_hero {
    background-color: transparent;
    color: #D5C6A5;
    border-color: #D5C6A5;
}

body.light-theme .btn_hero:hover {
    color: #CA8C73;
    border-color: #CA8C73;
}

/* Bouton CTA - fond clair */
body.light-theme .CTA {
    background-color: #f5f5f5;
    color: #CA8C73;
    border-color: #CA8C73;
}

body.light-theme .CTA:hover {
    background-color: #f5f5f5;
    color: #cb582a;
    border-color: #cb582a;
}

/* Bouton CTA gris - s'adapte */
body.light-theme .CTA-btn,
body.light-theme .CTA_ept_gris {
    background-color: #f5f5f5;
    color: #CA8C73;
}

body.light-theme .CTA-btn:hover,
body.light-theme .CTA_ept_gris:hover {
    background-color: #f5f5f5;
}

/* Bouton contact */
body.light-theme .btn_contact {
    background-color: transparent;
    color: #020106;
    border-color: #020106;
}

body.light-theme .btn_contact:hover {
    color: #cb582a;
    border-color: #cb582a;
}

/* Container avec fond #2a1810 */
body.light-theme .container {
    background: #f5f5f5;
}

/* Contact */
body.light-theme .contact-container {
    background-color: #CA8C73;
}

body.light-theme .contact-form {
    background-color: #CA8C73;
}

body.light-theme .contact_h3 {
    color: #020106;
}

body.light-theme form label {
    color: #020106;
}

body.light-theme form input,
body.light-theme form textarea {
    background-color: #cb582a;
    color: #020106;
}

body.light-theme form textarea:hover,
body.light-theme form input:hover {
    background-color: #7c3011;
}

/* Footer */
body.light-theme .footer {
    background-color: #CA8C73;
}

body.light-theme .footer p,
body.light-theme .footer a,
body.light-theme .footer li,
body.light-theme .footer h4 {
    color: #f5f5f5;
}

body.light-theme .footer a:hover {
    color: #020106;
}

body.light-theme .footer-bottom {
    color: #f5f5f5;
    border-top-color: #020106;
}

/* Icônes réseaux sociaux */
body.light-theme .liens_menu img {
    opacity: 0.7;
}

body.light-theme .liens_menu img:hover {
    opacity: 1;
}

/* Messages spécifiques */
body.light-theme .message_accueil,
body.light-theme .message_ept {
    color: #020106;
}

/* Titre renommée */
body.light-theme .renommee {
    color: #020106;
}

/* Titre projet */
body.light-theme .titre2_projet {
    color: #CA8C73;
}

/* ==========================================================================
   MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */

@media (max-width: 768px) {
    .section1_ept,
    .section2_ept {
        flex-direction: column;
    }

    .section1_ept>div,
    .section2_ept>div {
        width: 100%;
    }

    .section1_ept img,
    .section2_ept img {
        height: auto;
    }

    .col_section1_ept,
    .col_section2_ept {
        padding: 30px 20px;
    }

    .lightbox__nav {
        padding: 5px 12px;
        font-size: 20px;
    }

    .lightbox__nav--prev {
        left: 10px;
    }

    .lightbox__nav--next {
        right: 10px;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}