html,
body {
    margin: 0;
    overflow-x: hidden;
}

.background {
    position: relative;
    width: 100%;
}

.aboutImg {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    filter: blur(7px);
    display: block;
}


.titleAbout {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    width: 90%;
    text-align: center;
    margin: 0;

    font: var(--logoFont);
    font-size: clamp(2.5rem, 7vw, 6rem);
}

.green {
    color: #009246;
}

.white {
    color: #f5f5f5;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.red {
    color: #CE2B37;
}


.infoArc {
    display: block;
    position: relative;

    width: 100%;
    margin-top: -5rem;

    min-height: 50vh;

    background-color: var(--backColor);
    box-shadow: 0 -2px 0px var(--backColor);

    border-radius: 60px 60px 0 0;

    justify-content: center;
    align-items: center;
    text-align: center;

    padding: 4rem 2rem 2rem;
    box-sizing: border-box;

    z-index: 2;
}

.pAbout {
    max-width: 900px;
    line-height: 1.7;
}


.sectionTitle {
    width: 100%;
    font-size: 2em;
    font-weight: bold;
}


.cartes {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 2rem;
    padding-bottom: 1rem;
}

.infos {
    display: flex;
    flex-wrap: wrap;
    width: 70%;
}

.presentation {
    padding: 3rem 3rem 2rem 3rem;
    width: 100%;
    background-color: var(--layerColor);
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}

.presentation p,
.hours p,
.findUs p {
    text-align: justify;
    color: black;
    font-size: 1.3rem;
}


.hours,
.findUs {
    width: 50%;
    background-color: var(--layerColor);
    padding: 3rem 3rem 2rem 3rem;
}

.hours {
    border-bottom-left-radius: 40px;
}

.hours p {
    position: relative;
    left: 20%;
    text-align: left;
}

.findUs {
    border-bottom-right-radius: 40px;
}

.hours p span {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.571);
}



.hours h2,
.findUs h2 {
    color: black;
    font-weight: bold;
    font-size: 1.5rem;
    padding-bottom: 2rem;
}




.cardMenu {
    position: relative;

    width: 320px;
    height: 420px;

    overflow: hidden;
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);

    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.35);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.cardMenu img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.5s ease;
}


.cardContent {
    position: absolute;
    bottom: 0;

    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;

    background:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.85),
            rgba(0, 0, 0, 0.2),
            transparent);

    color: white;
    z-index: 2;
}

.cardContent h2 {
    margin: 0 0 0.5rem;
    font-size: 1.8rem;
    color: var(--backColor);
}

.description {
    font-size: 0.95rem;
    opacity: 0.9;
}




.hoverInfo {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    color: white;

    opacity: 0;
    z-index: 3;

    transition: opacity 0.35s ease;
}

.hoverInfo p {
    margin: 0;
    font-size: 1.1rem;
}

.hoverInfo span {
    margin-top: 0.7rem;

    font-size: 2rem;
    font-weight: bold;

    color: var(--backColor);
}

.openMenuBtn {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);

    padding: 10px 18px;
    border-radius: 999px;

    background: var(--backColor);
    color: black;

    font-size: 0.9rem;
    text-decoration: none;

    opacity: 0;
    pointer-events: none;

    transition: 0.3s ease;

    z-index: 5;

    background: rgba(255, 255, 255, 0.848);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.cardMenu:hover .openMenuBtn {
    opacity: 1;
    pointer-events: auto;
    bottom: 110px;
}


.cardMenu:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.45);
}

.cardMenu:hover img {
    transform: scale(1.08);
}

.cardMenu:hover .hoverInfo {
    opacity: 1;
}

.mapouter {
    position: relative;
    width: 100%;
    height: 23rem;

    border-radius: 22px;
    overflow: hidden;
}

.mapLink {
    display: block;
    width: 100%;
    height: 100%;

    border-radius: 22px;
    overflow: hidden;

    transition: .25s ease;
}

.mapLink:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .15);
}

.mapImage {
    width: 100%;
    height: 100%;
    /* IMPORTANT */

    display: block;

    object-fit: cover;
    object-position: center center;

    border-radius: 22px;
    transform: scale(1.0);

}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    width: 100%;
    height: 20rem;

}

.gmap_iframe {
    height: 20rem;
    border-radius: 25px;
}

.instagram {
    display: flex;
    align-items: center;
}

.instagram img {
    height: 30px;
    width: auto;
    margin-right: .5rem;
}

.contacts a {
    width: 100%;
    display: flex;
    padding: .1rem;
    padding: .3rem;
}

.contacts {
    margin-top: 1rem;
    font-weight: bold;
    font-style: italic;
    font-size: 1.3rem;
}




@media (hover: none),
(pointer: coarse) {

    .cartes {
        flex-direction: column;
        align-items: center;
    }

    .cardMenu {
        width: 90%;
        max-width: 400px;
        height: auto;
    }

    .cardMenu img {
        height: 250px;
    }

    .hoverInfo {
        position: relative;
        opacity: 1;

        background: rgba(20, 20, 20, 0.95);
        padding: 1.5rem;
    }

    .cardMenu {
        transform: none !important;
    }

    .cardMenu img {
        transform: none !important;
    }

    .cardMenu:hover,
    .cardMenu:hover img,
    .cardMenu:hover .hoverInfo,
    .cardMenu:hover .openMenuBtn {
        transform: none !important;
        opacity: 1 !important;
        bottom: auto !important;
    }

    .openMenuBtn {
        position: relative;

        bottom: auto !important;
        left: auto;
        transform: none !important;

        display: block;
        margin-top: 1rem;

        opacity: 1 !important;
        pointer-events: auto;

        text-align: center;

        transition: none !important;
    }
}

@media screen and (max-width: 768px) {

    .titleAbout {
        top: 12%;
        width: 95%;
    }

    .infoArc {
        border-radius: 35px 35px 0 0;
        padding: 3rem 1.5rem;
    }

    .aboutImg {
        height: 40vh;
    }

    .titleAbout {
        top: 3%;
    }

    .contacts {
        font-size: 1rem;
    }
}

@media screen and (max-width: 470px) {

    .titleAbout {
        width: 100%;
        font-size: 2rem;
    }

    .sectionTitle {
        font-size: 1.5rem;
    }

    .infos {
        width: 100%;
    }

    .presentation {
        padding: 7%;
    }

    .presentation p {
        font-size: 1rem;
    }

    .aboutImg {
        height: 30vh;
    }

    .titleAbout {
        top: 3%;
    }

}

@media screen and (max-width: 400px) {

    .titleAbout {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 1015px) {
    .presentation hr {
        visibility: hidden;
    }

    .presentation {
        margin-bottom: 1.5rem;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }

    .hours {
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;

        width: 100%;
        margin-bottom: 1.5rem;
    }

    .findUs {
        width: 100%;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 40px;
        padding: 1rem;
    }

    .hours p {
        left: 0;
        text-align: center;
    }
}