@font-face {
  font-family: "FuturaBTM";

  src: url("../fonts/futura_md_bt_medium.woff") format("woff");

  font-weight: bold;

  font-style: normal;
}

@font-face {
  font-family: "MarkPro";

  src: url("../fonts/MarkPro.woff") format("woff");

  font-weight: normal;

  font-style: normal;
}

@font-face {
  font-family: "MarkBold";

  src: url("../fonts/MarkPro_Bold.woff") format("woff");

  font-weight: bold;

  font-style: normal;
}

@font-face {
  font-family: "MarkLight";

  src: url("../fonts/MarkPro_Light.woff") format("woff");

  font-weight: normal;

  font-style: normal;
}

@font-face {
  font-family: "MarkMedium";

  src: url("../fonts/markpro_medium.woff") format("woff");

  font-weight: normal;

  font-style: normal;
}

body {
  color: #000;

  font-family: "MarkPro";

  font-size: 16px;
}

* {
  margin: 0px;

  padding: 0px;
}

p {
  font-family: "MarkPro";

  font-size: 16px;
}

ul {
  list-style: none;

  padding-left: 0;

  margin-bottom: 0;
}

a,
a:focus,
a:hover {
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #182f51;

  border-radius: 0px;

  background-color: #182f51;
}

/* Handle */

::-webkit-scrollbar-thumb {
  background-color: #18618c;

  border-radius: 0;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background-color: #18618c;

  cursor: pointer;
}

/* header */

.header {
  height: 150px;

  position: absolute;

  top: 15px;

  right: 0;

  left: 0;

  margin: auto;
}

.header .container {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  position: relative;

  height: 100%;

  z-index: 99;
}

.header .container .logo {
  position: absolute;

  inset: 0;

  margin: auto;
}

.header .container button,
.header .container button:hover {
  font-family: "FuturaBTM";

  font-size: 20px;

  color: #fff;
  padding: 15px 35px;
  border: none;
  background-color: #18618c;
  border-radius: 50px;
  display: flex;
  align-items: center;
  position: fixed;
}

.header .container button img {
  margin-right: 25px;
}

/*  Switcher  */

.switcher_header {
  position: relative;

  /* background-color: #182f51; */
}

.switcher_header h2 {
  font-family: "FuturaBTM";

  font-size: 108px;

  color: #fff;

  position: absolute;

  right: 0;

  top: 0;

  text-transform: uppercase;

  height: 100%;

  display: flex;

  left: 0;

  align-items: center;

  justify-content: center;

  background: #0000002b;
  flex-direction: column;
}

.switcher_header h2 span {
  display: block;
}

/* .item_switcher_header_slider img,

.item_switcher_header_slider video {

    min-height: 400px;

} */

.switcher_header .owl-carousel .owl-nav button.owl-next,
.switcher_header .owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
  position: absolute;

  top: 0;

  bottom: 0;

  margin: auto;
}

.switcher_header .owl-carousel .owl-nav button.owl-next {
  right: 50px;
}

.switcher_header .owl-carousel .owl-nav button.owl-prev {
  left: 50px;

  transform: scale(-1, 1);
}

/* des_villas_darchitecte */

.des_villas_darchitecte {
  margin: 55px 0;

  text-align: center;
}

.des_villas_darchitecte h3 {
  font-family: "FuturaBTM";

  font-size: 49px;

  color: #141414;

  margin-bottom: 90px;
}

.des_villas_darchitecte p {
  font-family: "FuturaBTM";

  font-size: 24px;

  color: #343434;

  margin-bottom: 70px;
}

.des_villas_darchitecte label {
  font-family: "FuturaBTM";

  font-size: 18px;

  color: #343434;

  margin-top: 10px;

  margin-bottom: 40px;
}

.img_Architecte_du_projet {
  display: flex;

  align-items: center;

  flex-direction: column;
}

/* block_art */

.block_art {
  background-image: url(../images/block_art.png);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  height: 450px;
}

/* Une adresse d'exception */

.une_adresse_dexception {
  margin: 150px 0;
}

.une_adresse_dexception .row {
  align-items: baseline;
}

.une_adresse_dexception h3 {
  font-family: "FuturaBTM";

  font-size: 79px;

  color: #141414;
}

.une_adresse_dexception p {
  font-family: "MarkLight";

  font-size: 27px;

  color: #141414;

  text-align: justify;
}

.header_je_suis_interesse_clik {
  position: fixed;
}

.une_adresse_dexception img {
  position: absolute;
  left: -90px;
  bottom: -80px;
  -webkit-animation: semiCercle 15s infinite linear;
}

@-webkit-keyframes semiCercle {
  from {
    -webkit-transform: rotate(0);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

/* decouvrez_des_villas */

.decouvrez_des_villas {
  /* background-image: url(../images/decouvrez_des_villas.jpg);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    height: 750px; */

  margin: 45px 0;
}

.content_decouvrez_des_villas {
  position: absolute;

  height: 100%;

  top: 0;

  right: 0;

  left: 0;

  background: #0000004d;
}

.decouvrez_des_villas .container {
  display: flex;

  height: 100%;

  align-items: center;
}

.decouvrez_des_villas p {
  font-family: "MarkLight";

  font-size: 37px;

  color: #fff;

  text-align: center;
}

.decouvrez_des_villas_box {
  position: absolute;

  height: fit-content;

  width: 100%;

  z-index: 0;

  margin: 0;

  bottom: 0;

  padding: 0;

  background: transparent;

  overflow: hidden;

  white-space: nowrap;
}

.decouvrez_des_villas_scrol {
  overflow: hidden;

  height: fit-content;

  white-space: nowrap;

  animation: scrollText 90s infinite linear;

  -webkit-animation: scrollText 90s infinite linear;

  -moz-animation: scrollText 90s infinite linear;

  margin: 0;

  display: inline-flex;

  padding: 0 !important;

  align-items: center;
}

.decouvrez_des_villas_scrol label {
  padding-left: 35px;
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-50%);
  }
}

/* projrt_imm_beach */

.item_projrt_imm_beach_img_sides {
  background-image: url(../images/item_projrt_imm_beach_img_sides.jpg);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  border-left: solid 15px #fff;
}

.item_projrt_imm_beach_img_sides_left {
  background-image: url(../images/item_projrt_imm_beach_img_sides.jpg);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  border-right: solid 15px #fff;
}

.item_projrt_imm_beach_contenu {
  margin: 90px auto;
}

.item_projrt_imm_beach_contenu h3 {
  font-family: "FuturaBTM";

  font-size: 50px;

  color: #141414;
}

.item_projrt_imm_beach_contenu p {
  font-family: "MarkLight";

  font-size: 25px;

  color: #141414;

  line-height: 50px;
  text-align: justify;
}

.item_projrt_imm_beach_contenu .row {
  align-items: baseline;
}

/* une_composition_d_espaces */

.une_composition_d_espaces {
  margin: 100px 0;
}

.une_composition_d_espaces h3 {
  font-family: "FuturaBTM";

  font-size: 43px;

  color: #141414;

  text-align: center;

  margin-bottom: 178px;
}

/*  Formulaire  */

.content {
  position: fixed;
  background: #182f51;
  top: 0;
  right: 0;
  margin-top: 0px;
  z-index: 999;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  width: 50%;
  min-width: 500px;
  padding: 3rem 4rem;
}

.hide_content {
  display: none;
}

.show_content {
  display: block;
}

.close {
  position: relative;
}

.close img {
  position: absolute;

  right: 0;

  top: 0;

  cursor: pointer;
}

.content h3 {
  font-family: "FuturaBTM";
  font-size: 35px;
  color: #fff;
  margin-top: 0;
}

.content p,
.content label {
  font-family: "MarkLight";
  font-size: 16px;
  color: #fff;
}

.content p span {
  font-family: "MarkLight";

  font-size: 20px;

  color: #778eb0;
}

.form_group {
  position: relative;
  margin-bottom: 25px;
}

.form_group .row {
  align-items: center;
}

.form_group input,
.form_group textarea {
  font-family: "MarkPro";

  font-size: 22px;

  color: #fff;

  border: 0;

  background: transparent;

  outline: none;

  width: 100%;

  height: 65px;

  border-bottom: 1px solid #fff;
}

.form_group textarea {
  height: 100px;
}

.row_accepte {
  display: flex;
  align-items: flex-start;
}

.form_group input::placeholder,
.form_group textarea::placeholder {
  font-family: "MarkLight";
  font-size: 25px;
  color: #fff;
}

.form_group.icon_radio input {
  width: 25px;
  height: 25px;
  margin-right: 15px;
}

.submit_input {
  position: relative;
}

.submit_input button {
  background: #2d5f9e;
  text-align: center;
  font-family: "MarkMedium";
  font-size: 20px;
  color: #fff;
  border: 0;
  outline: none;
  display: block;
  margin: auto;
  padding: 15px 55px;
  border-radius: 50px;
}

.submit_input button img {
  margin-right: 25px;
}

label.error {
  margin-top: 10px;

  color: red;

  position: absolute;

  left: 0;

  bottom: -30px;
}

/*  Galerie  */

.galerie {
  margin-top: 80px;

  position: relative;
}

.galerie .container-fluid {
  padding-left: 0;

  padding-right: 0;
}

.title_galerie {
  font-size: 80px;

  text-align: right;
}

.galerie_slider_content {
  margin-top: -17px;
}

.item_galerie_slider a {
  display: block;
}

.galerie_slider_content .owl-carousel .owl-item img {
  width: 100%;
}

.galerie_slider_content .owl-stage {
  padding-left: 100px !important;
}

.galerie_slider_content .owl-theme .owl-nav {
  position: absolute;

  top: -55px;

  right: 0;

  left: 0;

  margin: auto;

  width: 250px;
}

.galerie_slider_content .owl-carousel .owl-nav button.owl-next {
  position: absolute;

  right: 0;
}

.galerie_slider_content .owl-carousel .owl-nav button.owl-prev {
  position: absolute;

  left: 0;
}

.galerie_slider_content .owl-carousel.owl-drag .owl-item {
  opacity: 0.5;
}

.galerie_slider_content .owl-carousel.owl-drag .owl-item.active {
  opacity: 1 !important;
}

.galerie_slider_content .owl-theme .owl-nav [class*="owl-"]:hover {
  background: transparent;
}

.item_galerie_slider a {
  overflow: hidden;

  position: relative;

  padding-bottom: 65%;

  display: block;
}

.item_galerie_slider a img {
  display: block;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  object-fit: cover;

  width: 100%;

  height: 100%;

  backface-visibility: visible;
}

/* location_block */

.location_block {
  margin: 45px 0;
}

.contact_info {
  display: flex;

  align-items: center;

  height: 100%;

  flex-direction: column;

  justify-content: center;
}

.contact_info h3 {
  font-family: "MarkLight";
  font-size: 29px;
  color: #343434;
  margin-bottom: 20px;
  margin-top: 20px;
  text-align: center;
  width: 80%;
}

.contact_info label,
.contact_info a,
.contact_info a:hover {
  font-family: "MarkMedium";

  font-size: 23px;

  margin-bottom: 15px;

  color: #343434;
}

.contact_info a,
.contact_info a:hover {
  font-family: "MarkMedium";

  font-size: 26px;

  margin-top: 15px;

  color: #343434;

  border: solid 2px #343434;

  padding: 15px 35px;

  border-radius: 50px;

  display: block;
}
.phone_nimbers {
  display: flex;
  margin-top: 15px;
  margin-bottom: 15px;
  border: solid 2px #343434;
  padding: 15px 35px;
  border-radius: 50px;
  gap: 5px;
}
.phone_nimbers a,
.phone_nimbers a:hover {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.contact_info a img {
  margin-right: 25px;
}

/*  Footer  */

.footer {
  position: relative;

  background-image: url(../images/footer_bg.jpg);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 100px 0;

  display: flex;

  align-items: center;

  flex-direction: column;
}

.footer .row {
  align-items: flex-start;
}

.footer p,
.footer a,
.footer a:hover {
  font-family: "MarkMedium";
  font-size: 16px;
  display: flex;
  margin-bottom: 15px;
  color: #ffff;
  align-items: center;
}

.footer_p {
  position: relative;
  padding-top: 15px;
}

/* .footer_p::after{
    content: '';
 position: absolute;
 width: 50px;
 height: 6px;
 left: 0;
 top: 0;
 background-color: #fff;
}  */
.footer label {
  position: relative;
  font-family: "MarkBold";
  font-size: 30px;
  color: #ffff;
  /* margin-bottom: 25px; */
}

.footer .footer_suivez_a {
  display: flex;
}

.footer .footer_suivez_a a {
  margin-right: 15px;
}

/* .footer label::after {
 content: '';
 position: absolute;
 width: 50%;
 height: 6px;
 left: 0;
 bottom: 0;
 background-color: #fff;
} */
.footer p img,
.footer a img {
  margin-right: 15px;
}

.footer_suivez_logo {
  text-align: center;
}

.logo_footer {
  display: inline-block;
}

.map_bg {
  background: #00000099;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  bottom: 0;
  z-index: 9999;
}

.map_bg h3 {
  font-family: "MarkLight";
  font-size: 29px;
  color: #343434;
  width: auto;
  text-align: center;
  margin-top: 0 !important;
  margin-bottom: 10px;
}

#map-selection-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #fff;
  padding: 20px;
  border-radius: 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: fit-content;
  height: fit-content;
  margin: auto;
}

.icons_flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.icons_flex img {
  margin-bottom: 20px;
}

#map-selection-popup button {
  display: block;
  margin: 25px;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1400px) {
  .switcher_header h2 {
    font-size: 94px;
  }

  .item_projrt_imm_beach_contenu h3 {
    font-size: 45px;
  }
}

@media (max-width: 1200px) {
  .switcher_header h2 {
    font-size: 82px;
  }

  .footer p {
    font-size: 16px;
  }

  .item_projrt_imm_beach_contenu h3 {
    font-size: 39px;
  }

  .des_villas_darchitecte h3 {
    font-size: 45px;

    margin-bottom: 80px;
  }

  .des_villas_darchitecte p {
    font-size: 22px;

    margin-bottom: 60px;
  }

  .img_Architecte_du_projet img {
    transform: scale(0.9);
  }

  .une_adresse_dexception img {
    left: -28px;
  }
}

@media (max-width: 991px) {
  .une_adresse_dexception {
    margin: 150px 0 80px 0;
  }

  .une_composition_d_espaces h3 {
    font-size: 36px;

    margin-bottom: 174px;
  }

  .contact_info a,
  .contact_info a:hover {
    margin-bottom: 15px;
  }
  .phone_nimbers a,
  .phone_nimbers a:hover {
    margin-bottom: 0;
  }
  .item_projrt_imm_beach_contenu p {
    font-size: 22px;

    line-height: 1.5;
  }

  .item_projrt_imm_beach_contenu h3 {
    font-size: 31px;
    margin-bottom: 25px;
    text-align: justify;
  }

  .header .container .logo {
    inset: auto;

    top: 0;

    bottom: 0;

    left: 0;
  }

  .switcher_header h2 {
    font-size: 60px;
  }

  .content {
    width: 100%;
    min-width: 100%;
    padding: 3rem 4rem;
  }

  .galerie {
    margin-top: 0;
  }

  .decouvrez_des_villas p {
    font-size: 27px;
  }

  .footer_suivez_logo {
    text-align: start;
  }

  .footer_p {
    margin-bottom: 25px;
  }

  .footer_suivez {
    margin-top: 25px;
  }

  .des_villas_darchitecte h3 {
    font-size: 35px;

    margin-bottom: 40px;
  }

  .des_villas_darchitecte p {
    font-size: 20px;

    margin-bottom: 45px;
  }

  .img_Architecte_du_projet img {
    transform: scale(0.8);
  }

  .une_adresse_dexception img {
    right: 9px;
    left: auto;
  }

  .une_adresse_dexception h3 {
    margin-bottom: 35px;
  }

  /* .decouvrez_des_villas {

        height: 550px;

    } */
}

@media (max-width: 767px) {
  #map-selection-popup button {
    margin: 8px;
  }

  .icons_flex img {
    margin-bottom: 15px;
    width: 65%;
  }

  .switcher_header h2 {
    font-size: 41px;
  }

  .une_composition_d_espaces h3 {
    font-size: 26px;

    margin-bottom: 136px;
  }

  .header .container button,
  .header .container button:hover {
    font-size: 15px;

    padding: 15px 27px;
  }

  .header .container button img {
    transform: scale(0.7);
  }

  .header .container .logo {
    width: 140px;
  }

  .une_adresse_dexception h3 {
    font-size: 66px;
  }

  .decouvrez_des_villas p {
    font-size: 21px;
  }

  .content p,
  .content label {
    font-size: 16px;
  }

  .content p span {
    font-size: 16px;
  }

  .form_group input::placeholder,
  .form_group textarea::placeholder {
    font-size: 20px;
  }

  .content {
    padding: 3rem 2rem;
  }

  .submit_input button {
    font-size: 20px;

    padding: 15px 45px;
  }

  .decouvrez_des_villas_scrol label img {
    height: 60px;
  }

  .contact_info a,
  .contact_info a:hover {
    font-size: 18px;
    margin-top: 15px;
    padding: 10px 30px;
  }
  .phone_nimbers a,
  .phone_nimbers a:hover {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    padding: 0;
  }
  .contact_info a img {
    transform: scale(0.7);
  }
}

@media (max-width: 575px) {
  .switcher_header h2 {
    font-size: 27px;

    top: 30px;
  }

  .une_composition_d_espaces h3 {
    font-size: 20px;

    margin-bottom: 134px;
  }

  .item_projrt_imm_beach_contenu h3 {
    font-size: 22px;
  }

  .item_projrt_imm_beach_contenu p {
    font-size: 18px;
  }

  .item_projrt_imm_beach_contenu {
    margin: 60px auto;
  }

  .text_switcher p {
    font-size: 18px;

    line-height: 40px;
  }

  .form_group input {
    font-size: 20px;
  }

  .form_group input::placeholder {
    font-size: 20px;
  }

  .submit_input input {
    height: 80px;

    font-size: 20px;
  }

  .submit_input:before {
    margin-top: -10px;

    width: 40px;

    height: 21px;

    background-size: contain;
  }

  .une_adresse_dexception h3 {
    font-size: 48px;
  }

  .une_adresse_dexception img {
    right: 47px;
    left: auto;
    width: 142px;
  }

  .une_adresse_dexception p {
    font-size: 20px;
  }

  .galerie_slider_content .owl-theme .owl-nav {
    top: -70px;

    width: 160px;
  }

  .galerie_slider_content .owl-carousel .owl-nav button {
    width: 60px;
  }

  .info_footer a {
    font-size: 19px;
  }

  .info_footer a:before {
    margin-top: -13px;

    width: 25px;

    height: 25px;

    background-size: contain;
  }

  .header {
    height: 87px;
  }

  .header .container button,
  .header .container button:hover {
    font-size: 15px;

    padding: 15px 15px;
  }

  .header .container button img {
    transform: scale(0.7);
  }

  .header .container .logo {
    width: 100px;

    left: 15px;
  }

  .switcher_header .owl-carousel .owl-nav button.owl-next {
    right: 25px;
  }

  .switcher_header .owl-carousel .owl-nav button.owl-prev {
    left: 25px;

    transform: scale(-0.8, 0.8) !important;
  }

  .switcher_header .owl-carousel .owl-nav button.owl-next,
  .switcher_header .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel button.owl-dot {
    top: 67px;

    bottom: 0;

    transform: scale(0.8);
  }

  .des_villas_darchitecte h3 {
    font-size: 26px;

    margin-bottom: 35px;
  }

  .img_Architecte_du_projet img {
    transform: scale(0.7);
  }

  .des_villas_darchitecte p {
    font-size: 18px;

    margin-bottom: 35px;
  }

  .form_group.icon_radio input {
    width: 25px;
  }

  .footer p {
    font-size: 19px;
  }

  .content p,
  .content label {
    font-size: 16px;
  }

  .content h3 {
    font-size: 35px;
  }
}

@media (min-width: 500px) and (max-width: 767px) {
  .galerie_slider_content .owl-stage {
    padding-left: 40px !important;
  }
}

@media (max-width: 499px) {
  .title_galerie {
    margin-bottom: 75px;

    font-size: 50px;
  }

  .galerie_slider_content .owl-stage {
    padding-left: 0px !important;
  }
}

.muted {
  position: fixed;
  right: 25px;
  bottom: 25px;
  padding: 10px;
  cursor: pointer;
  display: block;
  background: #18618c;
  border-radius: 50%;
  border: 0;
  outline: none;
  z-index: 99999;
}