@font-face {
    font-family: 'Aesthetic';
    src: url('/fonts/Aesthetic-Regular.woff2') format('woff2'),
        url('/fonts/Aesthetic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Futura PT Extra';
    src: url('/fonts/FuturaPT-ExtraBoldObl.woff2') format('woff2'),
        url('/fonts/FuturaPT-ExtraBoldObl.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Cond Book';
    src: url('/fonts/FuturaPTCond-Book.woff2') format('woff2'),
        url('/fonts/FuturaPTCond-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-BoldObl.woff2') format('woff2'),
        url('/fonts/FuturaPT-BoldObl.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Cond Book';
    src: url('/fonts/FuturaPTCond-BookObl.woff2') format('woff2'),
        url('/fonts/FuturaPTCond-BookObl.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Book';
    src: url('/fonts/FuturaPT-BookObl.woff2') format('woff2'),
        url('/fonts/FuturaPT-BookObl.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Book';
    src: url('/fonts/FuturaPT-Book.woff2') format('woff2'),
        url('/fonts/FuturaPT-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Cond';
    src: url('/fonts/FuturaPTCond-Medium.woff2') format('woff2'),
        url('/fonts/FuturaPTCond-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Cond';
    src: url('/fonts/FuturaPTCond-Bold.woff2') format('woff2'),
        url('/fonts/FuturaPTCond-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Extra';
    src: url('/fonts/FuturaPT-ExtraBold.woff2') format('woff2'),
        url('/fonts/FuturaPT-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Demi';
    src: url('/fonts/FuturaPT-Demi.woff2') format('woff2'),
        url('/fonts/FuturaPT-Demi.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-Heavy.woff2') format('woff2'),
        url('/fonts/FuturaPT-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Cond';
    src: url('/fonts/FuturaPTCond-BoldObl.woff2') format('woff2'),
        url('/fonts/FuturaPTCond-BoldObl.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Cond Extra';
    src: url('/fonts/FuturaPTCond-ExtraBoldObl.woff2') format('woff2'),
        url('/fonts/FuturaPTCond-ExtraBoldObl.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Cond';
    src: url('/fonts/FuturaPTCond-MediumObl.woff2') format('woff2'),
        url('/fonts/FuturaPTCond-MediumObl.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-HeavyObl.woff2') format('woff2'),
        url('/fonts/FuturaPT-HeavyObl.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-Bold.woff2') format('woff2'),
        url('/fonts/FuturaPT-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Demi';
    src: url('/fonts/FuturaPT-DemiObl.woff2') format('woff2'),
        url('/fonts/FuturaPT-DemiObl.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT Cond Extra';
    src: url('/fonts/FuturaPTCond-ExtraBold.woff2') format('woff2'),
        url('/fonts/FuturaPTCond-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-MediumObl.woff2') format('woff2'),
        url('/fonts/FuturaPT-MediumObl.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-Light.woff2') format('woff2'),
        url('/fonts/FuturaPT-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-LightObl.woff2') format('woff2'),
        url('/fonts/FuturaPT-LightObl.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-Medium.woff2') format('woff2'),
        url('/fonts/FuturaPT-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



/* css reset */
html {
    overflow-x: hidden;
}

body,
html {
    scroll-behavior: smooth;
}

body {
    overflow: hidden;
}

*,
*::after,
*::before {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    word-break: break-word;
    word-wrap: break-word;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

p,
figure {
    margin: 0;
}

html,
sup,
figure {
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    border: 0;
    font-weight: 500;
    line-height: 1.2;
}

form,
img,
label,
legend,
li,
ol,
p,
small,
sub,
ul {
    border: 0;
    line-height: inherit;
    text-align: inherit;
}

sup {
    line-height: inherit;
}

button,
h1,
h2,
h3,
h4,
h5,
h6,
sup,
th {
    text-align: inherit;
    margin: 0;
}

button {
    border-radius: 0;
}

th {
    border: 0;
    line-height: inherit;
    text-align: -webkit-match-parent;
}

a {
    transition: color 0.3s ease;
    font-family: "Futura PT";

    &,
    &:active,
    &:visited {
        text-decoration: none;
        outline: 0;
        color: currentColor;
    }

}

a:hover {
    color: #F6EDE4;
}

strong {
    font-weight: 500;
}

b {
    font-weight: 500;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

caption {
    color: currentColor;
    text-align: left;
    caption-side: bottom;
}

label {
    display: inline-block;
}

button:focus:not(:focus-visible),
.tns-controls {
    outline: 0;
}

button,
input,
optgroup,
select,
textarea {
    line-height: inherit;
    appearance: none;
    outline: 0;
    border: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

[role="button"] {
    cursor: pointer;
}

select {
    word-wrap: normal;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
}

textarea {
    overflow: auto;
    resize: vertical;
}

sup {
    font-size: 8px;
}

img,
video {
    user-select: none;
    border-style: none;
    max-width: 100%;
    font-size: 0;
    height: auto;
    display: block;
}

ul,
ol {
    list-style: none;
}

/* style */
body {
    font-family: "Futura PT";
    font-size: 14px;
}

/* Header container styling */
.header {
    position: relative;
    background-image: url('../images/imgbg.jpg');
    /* Replace with your background image */
    background-size: cover;
    background-position: center;
    /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 664PX;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Adjust opacity and color */
    z-index: 1;
    pointer-events: none;
    /* Ensure it doesn’t block interactions */
}

/* Top bar with contact info and appointment button */
.top-bar {
    position: absolute;
    top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    z-index: 2;

}

.contact-info {
    font-size: 14px;
    display: flex;
    gap: 7px;

}

.contact-info span {
    display: flex;
    flex-direction: column;
}

.contact-info a {
    color: #fff;
    text-decoration: none;
    color: #F6EDE4;
    font-family: "Futura PT";
    font-size: 24px;
    font-weight: 500;
    transition: 0.3s ease-in-out;
}

.contact-info a:hover{
  opacity: 0.6;
}
.contact-info .mail {
    font-size: 16px;
    font-weight: 400;
}

.appointment-button {
    margin-top: 7px;
    /* position: fixed; */
    right: 39px;
    display: flex;
    align-items: center;
    gap:16px;
}

.btn-appointment {
    position: fixed;
    color: #000;
    font-family: "Futura PT";
    font-size: 18px;
    font-weight: 500;
    background-color: #F6EDE4;
    padding: 16px 25px;
    border-radius: 100px;
    text-decoration: none;
    max-width: 238px;
    width: 100%;
    right: 30px;
    transition: all 0.3s linear;
}

@media (max-width: 807px) {
    .appointment-button {
        position: relative;
        bottom: -363px;
        display: block;
        right: 48px;
    }

    .btn-appointment {
        padding: 16px 68px;
    }
}
@media (max-width:768px) {
    .btn-appointment {
        text-align: center;
        max-width: 369px;
        width: 100%;
        transform: translateX(-50%);
        position: fixed;
        left: 50%;
        /* transform: translateY(-43px); */
    }
  
}
@media (max-width: 384px) {
    .appointment-button {
        right: 33px;
    }
   
}

@media (max-width: 378px) {
    .appointment-button {
        right: 30px;
    }
   
}
@media (max-width: 368px) {
    .appointment-button {
        right: 25px;
    }
   
}
.btn-appointment:hover {
    color: #F6EDE4;
    background-color: #000;
}

.btn-appointment svg {
    vertical-align: -5px;
}



.btn-appointment.scrolled {
    color: #F6EDE4;
    background-color: #000;
}

/* Hero content with logo and text */
.hero-content {
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 21px;
}
@media (max-width: 768px) {
    .hero-content svg{
        max-width: 299px;
        height: auto;
    }
}
.logo {
    /* width: 100px; */
    margin: auto;
}

h1 {
    color: #FFF;
    font-family: "Futura PT";
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 10px;
    margin-top: 48px;
}

h2 {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
}

p {
    font-size: 18px;
    line-height: 1.5;
}


@media (max-width: 807px) {
    .hero-content {
        top: 82px;
    }

    .hero-content .logo {
        max-width: 299PX;
    }
/* 
    .contact-info {
        margin: auto;
    } */

    .header {
        position: relative;
        min-height: 470px;
    }

    h1 {
        margin-top: 6px;
        font-size: 20px;
    }



}

/*  */

/* Navigation menu */
.navbar {
    padding: 10px 20px;
    text-align: center;
    margin-top: 24px;
}

.navbar ul {
    list-style: none;
}

.navbar li {
    display: inline;
    margin: 0 6px;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    padding: 14px 51px;
    background-color: #000;
    border-radius: 100px;
    font-family: "Futura PT";
    font-size: 20px;
    font-weight: 500;
    transition: all 0.3s;
}

.navbar a:hover {
    background-color: #F6EDE4;
    color: #000;
}

@media (max-width: 992px) {
    .navbar a {
        padding: 11px 42px;
    }

    .navbar ul {
        padding-top: 12pX;
        height: 50px;
    }

    .navbar li {
        margin: 0 0px;
    }

    .navbar {
        margin-top: 3px;
        padding: 10px 0px;
    }
}

/* Vision section */
.vision-section {
    text-align: center;
    padding: 47px 0px;
    max-width: 1211px;
    margin: auto;
    width: calc(100% - 21px);
    position: relative;
}

.vision-section h2 {
    color: #000;
    text-align: center;
    font-family: Aesthetic;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 50.4px */
}

.vision-section p {
    margin-bottom: 7px;
}

.vision-section .title-intro {
    margin-bottom: 22px;
    font-size: 20px;
    font-weight: 300;
    line-height: 120%;
}

/* Card container */
.cards-container {
    display: flex;
    gap: 16px;
}

/* Individual card stylingcabinet-section */
.card {
    width: 392px;
    overflow: hidden;
    text-align: left;
}

.card.it1 .card-content {
    padding-bottom: 5px;
}

.card.it3 .card-content {
    padding-bottom: 32px;
}

.card-image {
    width: 100%;
    height: 442px;
    object-fit: cover;
    border-radius: 20px 20px 0px 20px;
}

.card-content {
    padding: 13px;
    border-radius: 20px 0px 20px 20px;
    background: #F6EDE4;
    margin-top: 9px;
    padding-right: 0;
}

.card-content .title {
    color: #211509;
    font-family: "Futura PT";
    font-size: 24px;
    font-weight: 500;
    line-height: 140%;
}

.card-content .dis {
    color: #000;
    font-family: "Futura PT";
    font-size: 20px;
    font-weight: 300;
    margin: 0;
    line-height: 140%;
}

.card-content.inverst {
    margin-bottom: 9px;
    margin-top: 0px;
    padding-bottom: 37px;
}

.card-content h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.card-content p {
    font-size: 14px;

}

@media (max-width:992px) {

    .vision-section {
        padding-bottom: 0;
        margin-bottom: 12px;
    }

    .vision-section h2 {
        font-size: 22px;
        margin-bottom: 4px;
    }

    .tns-controls {
        position: absolute;
        z-index: 2;
        position: absolute;
        width: calc(100% + 9px);
        margin-left: -6px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        top: 53%;
        outline: none;
    }

    .tns-controls button {
        color: transparent;
        margin: 0;
        z-index: 2;
        background-color: transparent;
    }

    button[data-controls="prev"]::before,
    button[data-controls="next"]::before {
        content: '';
        width: 27px;
        height: 49px;
        display: block;
        background-repeat: no-repeat;
    }

    button[data-controls="next"]:before {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='27' height='48' fill='none' viewBox='0 0 27 48'%3e%3cpath fill='%23000' fill-opacity='.4' d='M-.01 4.127 3.88.24l21.19 21.182a3.65 3.65 0 0 1 0 5.181L3.88 47.797-.005 43.91l19.888-19.892L-.009 4.127Z'/%3e%3c/svg%3e ");
    }

    button[data-controls="prev"]::before {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='27' height='48' fill='none' viewBox='0 0 27 48'%3e%3cpath fill='%23000' fill-opacity='.4' d='m27.01 43.873-3.891 3.887-21.19-21.182a3.652 3.652 0 0 1 0-5.181L23.12.203l3.887 3.887L7.118 23.982l19.891 19.891Z'/%3e%3c/svg%3e ");
    }

    .cards-container {
        gap: 0px;
    }
}

/* Cabinet section */
.cabinet-section {
    text-align: center;
    padding: 40px 0px;
    max-width: 1548px;
    width: calc(100% - 31px);
    margin: auto;
}

.cabinet-section h2 {
    color: #000;
    font-family: Aesthetic;
    font-size: 36px;
    font-weight: 400;
    line-height: 140%;
    margin-bottom: 15px;
}

.cabinet-section p {
    font-size: 16px;
    max-width: 1031px;
    margin: auto;
    margin-bottom: auto;
    margin-bottom: 21px;
    color: #000;
    text-align: center;
    font-family: "Futura PT";
    font-size: 20px;
    font-weight: 300;
    line-height: 120%;
  
}
#item-0 img{
    border-radius: 20px 0px 0px 0px;
}
#item-1 img{
    border-radius: 0px 0px 0px 20px;
}
#item-4 img{
    border-radius: 0px 20px 0px 0px;
}
#item-5 img{
    border-radius: 0px 0px 20px 0px;
}
@media (min-width:993px) {

    /* Image grid styling */
    .image-grid {
        display: grid;
        grid-template-columns: auto auto;
        /* Adjust based on your layout */
        grid-template-rows: auto;
        /* This will allow the rows to size based on content */
        gap: 11px;
        height: 100%;

    }

    #item-0 {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: 2;
        grid-column-end: 3;

    }

    #item-0 img {
        min-height: 401px;
    }

    #item-1 {
        height: max-content;
    }

    #item-1 img {
        min-height: 326px;
    }

    #item-2 {
        height: max-content;
    }

    #item-2 img {
        min-height: 326px;
    }

    #item-3 {
        grid-row-start: 1;
        grid-row-end: 3;
        height: max-content;
    }

    #item-3 img {
        min-height: 739px;
    }

    #item-4 {
        grid-row-end: 2;
        height: max-content;
    }

    #item-4 img {
        min-height: 272px;
    }

    #item-5 {
        height: max-content;
    }

    #item-5 img {
        min-height: 454px;
    }

    .outer {
        position: relative;
    }

    .outer:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 74%;
    }

    .outer>.inner {
        position: absolute;
        top: -128px;
        right: 0;
        bottom: 0;
        left: 0;
    }

    #item-4 .mobile {
        display: none;
    }
}

@media (max-width:992px) {
   
    .image-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;

    }

    #item-0 {
        grid-column: span 2 / span 2;
    }

    #item-0 img {
        max-height: 257px;
        min-height: 257px;
        width: 100%;
    }

    #item-1 img {
        min-height: 209px;
        max-height: 209px;
        width: 100%;
    }

    #item-2 img {
        max-height: 209px;
        width: 100%;
        min-height: 209px;
    }

    #item-4 .mobile {
        margin-top: 8px;
    }

    #item-5 {
        display: none;
    }

    .cabinet-section {
        padding-bottom: 0px;
        padding-top: 0px;
    }

    .cabinet-section h2 {
        margin-bottom: 0px;
        font-size: 22px;
        margin-top: 16px;
    }

    .equipe .first-child .content {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (max-width:1384px) {
    .image-grid img {
        object-fit: cover;
    }
}





.equipe {
    max-width: 1225px;
    margin: auto;
    margin-top: 38pX;
    margin-bottom: 55px;
    width: calc(100% - 18px);
}

.equipe .con {
    max-width: 1089px;
    width: 100%;
    margin: auto;
}

.equipe .first-child {
    display: flex;
    justify-content: space-between;
}

.card-person .name-person {
    color: #000;
    font-family: "Futura PT";
    font-size: 24px;
    font-weight: 600;
    line-height: 140%;
}

.card-person .name-person {
    color: #000;
    font-family: "Futura PT";
    font-size: 24px;
    font-weight: 600;
    line-height: 140%;
}

.equipe .first-child img {
    border-radius: 20px 20px 0px 20px;
}

.equipe .first-child .dis {
    color: #000;
    font-family: "Futura PT";
    font-size: 20px;
    font-weight: 300;
    padding-inline: 57px;
    line-height: 120%;
}

.equipe .first-child .content {
    max-width: 660px;
    width: 100%;
    padding: 1;
    padding-right: 18px;
    padding-left: 18px;
    text-align: center;
}

.equipe .second-child .card-person p {
    text-align: center;
}

.equipe .second-child {
    margin-top: 52px;
}

.equipe .second-child .dis {
    margin-bottom: 28px;
    text-align: center;
    font-weight: 300;
}

.title-l {
    color: #000;
    text-align: center;
    font-family: Aesthetic;
    font-size: 36px;
    font-weight: 400;
    line-height: 140%;
    /* 50.4px */
}

.title-m {
    color: #000;
    text-align: center;
    font-family: "Futura PT";
    font-size: 26px;
    font-weight: 600;
    line-height: 140%;
    /* 36.4px */
}

.title-s {
    color: #000;
    font-family: "Futura PT";
    font-size: 20px;
    font-weight: 400;
    line-height: 140%;
    margin-bottom: 22px;
}

@media (min-width:993px) {
    .equipe .second-child .card-person {
        max-width: 680px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: auto;
    }
}

@media (max-width:992px) {
    .vision-section{
        padding: 34px 0px;
    }
    .equipe {
        margin-top: 32px;
        margin-bottom: 0px;
    }

    .equipe .title-l {
        font-size: 22px;
        margin-bottom: 5px;
    }

    .equipe .title-s {
        margin-bottom: 7px;
    }

    .equipe .first-child .dis {
        padding-inline: 0px;
        margin-bottom: 28px;
    }

    .equipe .first-child {
        align-content: center;
        flex-direction: column;
    }

    .equipe .first-child img {
        margin: auto;
        order: 2;
    }

    .equipe .first-child .content {
        order: 1;
        margin: auto;
        margin-bottom: 15px;
    }

    .equipe .second-child .dis {
        padding-inline: 44px;
        font-weight: 300;
    }

    .equipe .second-child {
        position: relative;
    }

    .equipe .second-child img {
        margin: auto;
    }

    .Localisation-section .content {
        margin-top: 6px !important;
    }

    .Localisation-section {
        margin-top: 38px !important;
    }
}

/* Specialties section */
.specialties-section {
    max-width: 1215px;
    margin: 40px auto;
    width: calc(100% - 28px);
    text-align: center;
}


.specialties-section .dis-intro {
    color: #000;
    font-family: "Futura PT";
    font-size: 18px;
    font-weight: 300;
    line-height: 120%;
    margin-bottom: 16px;
    padding-inline: 29px;
    padding-inline: 70px;
}


/* Specialty grid */
.specialty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}

/* Specialty card styling */
.specialty-card {
    border-radius: 20px 20px 20px 0px;
    background: #F6EDE4;
    padding: 20px;
    text-align: left;
    height: 296px;
    width: 296px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.specialty-card .title {
    color: #211509;
    font-family: "Futura PT";
    font-size: 26px;
    font-weight: 500;
    line-height: 100%;
    margin-bottom: 11px;
}

.specialty-card .dis {
    color: #211509;
    font-family: "Futura PT";
    font-size: 18px;
    font-weight: 300;
    line-height: 140%;
}

.specialty-card.svg_icon {
    background-color: #F4F4F4;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width:992px) {
    .specialties-section .title-l {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .specialties-section .dis-intro {
        padding-inline: 12px;
    }

    .specialty-grid {
        grid-template-columns: auto auto auto;
    }

    .specialty-card {
        max-width: 296px;
        max-height: 296px;
        width: 100%;
        height: 100%;
    }
}

@media (max-width:768px) {

    .specialty-card {
        max-width: 202px;
        min-height: 202px;
        width: 100%;
        height: 100%;
    }

    .specialty-card .title {
        font-size: 20px;
    }

    .specialty-card .dis {
        font-size: 12px;
    }

    .specialty-card.svg_icon svg {
        width: 75px;
        height: 75px;
    }

    div.specialty-card:nth-child(1) {
        order: 1;
    }

    div.specialty-card:nth-child(2) {
        order: 2;
    }

    div.specialty-card:nth-child(4) {
        order: 3;
    }

    div.specialty-card:nth-child(3) {
        order: 4;
    }

    div.specialty-card:nth-child(6) {
        order: 5;
    }

    div.specialty-card:nth-child(5) {
        order: 6;
    }

    div.specialty-card:nth-child(7) {
        order: 7;
    }

    div.specialty-card:nth-child(8) {
        order: 8;
    }

    div.specialty-card:nth-child(9) {
        order: 9;
    }

    div.specialty-card:nth-child(10) {
        order: 10;
    }

    div.specialty-card:nth-child(12) {
        order: 11;
    }

    div.specialty-card:nth-child(11) {
        order: 12;
    }

    div.specialty-card:nth-child(14) {
        order: 13;
    }

    div.specialty-card:nth-child(13) {
        order: 14;
    }

    div.specialty-card:nth-child(15) {
        order: 15;
    }

    div.specialty-card:nth-child(16) {
        order: 16;
    }
}

@media (max-width:460px) {
    .specialty-grid {
        grid-template-columns: auto auto;
    }
}

/* Localisation-section */
.Localisation-section {
    margin-top: 63px;
    margin-bottom: 55px;
}

/* Main content layout */
.Localisation-section .content {
    display: flex;
    max-width: 1158px;
    width: calc(100% - 36px);
    margin: auto;
    margin-top: 26px;
}

.information-section {
    width: 50%;
}

.information-section .title {
    color: #7B930F;
    font-family: "Futura PT";
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 14px;
}

.information-section span {
    display: block;
}

.info-section p,
.info-section a {
    display: flex;
    gap: 9px;
    margin-bottom: 12px;
    align-items: center;
}

.info-section a {
    color: #211509;
    font-family: "Futura PT";
    font-size: 20px;
    font-weight: 450;
    position: relative;
    width: max-content;
}

.info-section a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 3px;

    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
    background-color: #000;
    bottom: 0;
    height: 1px;
    left: 40px;
    width: calc(100% - 41PX);
}

.info-section a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

.info-section a span,
.info-section p span {
    width: 37px;
}

.info-section a.mail {
    font-size: 16px;
    font-weight: 400;
}

.info-section p {
    color: #211509;
    font-family: "Futura PT";
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.hours-section ul li {
    color: #000;
    font-family: "Futura PT";
    font-size: 18px;
    font-weight: 450;
}
.whatsapp-link {
    align-items: center;
    background-color: #25d366;
    border-radius:
  50%;
    bottom: 70px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    display: flex;
    height: 70px;
    justify-content: center;
    padding:
  10px;
    position: fixed;
    right: 15px;
    transition:
  all .3s ease-in-out;
    width: 70px;
    z-index: 1000;
  }
 
  .heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite both;
  }
  @keyframes heartbeat {
    0%, 100% {
      transform: scale(1);
    }
    14% {
      transform: scale(1.1);
    }
    28% {
      transform: scale(1);
    }
    42% {
      transform: scale(1.1);
    }
    70% {
      transform: scale(1);
    }
  }
  
  .SwitchLang{
    border:1px solid #FFFFFF;
    border-radius:100%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    position: absolute;
    right: 281px;
  }
  
@media (max-width:768px) {
        .SwitchLang.desktop{
            display: none;
        }
        .SwitchLang.mobile{
            display: flex;
            position: absolute;
            right: 17px;
            top: 13pX;  
            width: 46px;
            height: 46px;
        }
        .SwitchLang.mobile svg{
            width: 44px;
            height: 44px
        }
}
@media (min-width:769px) {
        .SwitchLang.mobile{
            display: none;
        }
}

/* Styling the hours list */
.horaires {
    list-style: none;
    padding-left: 0;
    max-width: 321px;
}

.horaires li {
    display: flex;
    justify-content: space-between;
}

.map-section {
    padding-top: 75px;
    position: relative;
}

.map-section::before {
    content: '';
    display: block;
    top: 0;
    width: 46px;
    height: 90%;
    background-color: #fff;
    position: absolute;
    z-index: 999;
}


#map {
    width: 617px;
    height: 394px;
}

.leaflet-left {
    display: none;
}

.leaflet-control-attribution {
    display: none;
}


@media (max-width:992px) {
    .Localisation-section .map-section::before {
        display: none;
    }

    #map {
        max-width: 617px;
    }

    .map-section {
        padding-top: 31px;
    }

    .Localisation-section .content {
        display: flex;
        flex-wrap: wrap;
    }

    .Localisation-section {
        margin-bottom: 0px;
    }
}

@media (max-width:778px) {
    .information-section {
        width: 100%;
    }

    .title-l {
        font-size: 22px;

    }

    .Localisation-section .content {
        width: calc(100% - 0px);
    }

    .hours-section {
        padding-left: 19px;
    }

    .info-section {
        padding-left: 19px;
    }

    .Localisation-section .title-l {
        text-align: left;
        padding-left: 20px;
    }

    h1 {
      font-size: 18px;
    }
}

/* footer */
footer {
    background-color: #000;
}

.logo-footer {
    margin-bottom: 11px;
}

footer .container {
    color: #FFF;
    max-width: 1083px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    padding: 6px 0px;

}

footer .container p {
    font-size: 14px;
}

footer .container ul {
    display: flex;
    gap: 23px;
    margin-bottom: 10px;
}

footer .container ul li span {
    position: relative;
    cursor: pointer;
    color: #F6EEE4;
    font-family: "Futura PT";
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
}

footer .container ul li span.mentions::before {
    content: '/';
    width: 5px;
    height: 12px;
    display: block;
    position: absolute;
    right: -14px;
    top: 1px;
}

footer .container ul li span::after {
    background-color: #fff;
    border-radius: 3px;
    bottom: -1px;
    content: "";
    height: 2px;
    height: 1px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease-in-out;
    width: 100%;
    width: calc(100% - 0px);
}

footer .container ul li span:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

@media (max-width: 992px) {
    footer .container {
        flex-direction: column;
        align-items: center;
        padding: 6px 0px;
        gap: 5px;
    }
}



/* Modal container */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 9999999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    
}

/* Modal content */
.modal-content {
    position: relative;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.20);
    width: 100%;
    max-width: 1132px;
    margin: 7% auto;
}

.modal-content strong{
    font-weight: 600;
}

.modal-content a{
    text-decoration-line: underline;
}

.modal-content  .title-l,.modal-content  .title-m,.modal-content  .title-s{
    display: block;
    color: #000;
    font-family: "Futura PT";
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
}
.modal-content  .title-m{
    color: #935727;
    font-size: 20px;
    font-family: Aesthetic;
    font-weight: 400;
    margin-top: 12px;
}
.modal-content  .title-s{
    color: #627A92;
    font-family: Aesthetic;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
   
}
.modal-content p {
    color: #211509;
    font-family: "Futura PT";
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 300;
    text-align: justify;
  
}
/* Responsive Styles */
@media (max-width: 992px) {
    .modal-content {
        padding: 20px;
        margin: 5% auto;
        max-width: 90%;
    }

    .modal-content .title-l {
        font-size: 24px;
        line-height: 32px;
    }

    .modal-content .title-m {
        font-size: 18px;
        margin-top: 8px;
    }

    .modal-content .title-s {
        font-size: 14px;
    }

    .modal-content p {
        font-size: 12px;
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .close{
        top: 16px !important;
    }
    .close svg{
        width: 19px;
    }
    .modal-content {
        padding: 15px;
        margin: 2% auto;
        max-width: 95%;
    }

    .modal-content .title-l {
        font-size: 20px;
        line-height: 28px;
    }

    .modal-content .title-m {
        font-size: 16px;
        margin-top: 6px;
    }

    .modal-content .title-s {
        font-size: 12px;
    }

    .modal-content p {
        font-size: 11px;
        margin-bottom: 10px;
    }
    .cabinet-section p {
        font-size: 18px;
    }
}
/* Close button (X) */
.close {
    position: absolute;
    right: 21px;
    top: 23px;
}
.confirmationMessage p,.confirmationMessageerror{
    text-align: center;
    font-size: 16px;
    margin-top: 21px;
    color: #8FD05A;
    font-family: Kanit;
}
.iso-code {
    align-items: center;
    column-gap: 7px;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    position: relative;
    text-transform: uppercase;
    vertical-align: -2px;
    white-space:nowrap;
    color: #fff !important;
  }
.confirmationMessageerror{
    color: #8FD05A;
}
.close:hover,
.close:focus {
    color: black;
    cursor: pointer;
}