/* -------------------------- */
/* My custom css */
/* -------------------------- */
.navbar a,
.navbar a:focus {
  display: flex;
  align-items: right !important;
  justify-content: end;
  padding: 10px 10px;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  color: #7b909a;
  white-space: nowrap;
  transition: 0.3s;
}

.fp-tootip.fp-right {
  display: none;
}

/* Common css */
section#expertise,
section#divine-living,
section#canal-front,
section#mina-rashid,
section#palm-galinios,
section#sea-mirror,
section#contact {
  position: relative;
  height: 100vh;
}

.titlemain {
  position: absolute;
  top: 16vh;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 54px;
  text-transform: uppercase;
  z-index: 1111;
  font-weight: 400;
  left: 0;
}

section#hero:before,
section#expertise:before,
section#divine-living:before,
section#canal-front:before,
section#mina-rashid:before,
section#palm-galinios:before,
section#sea-mirror:before,
section#contact:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* height: 100%; */
  height: 116%;
  background: rgb(0 0 0 / 50%);
  z-index: 1;
}

@media(max-width: 768px) {

  section#hero:before,
  section#expertise:before,
  section#divine-living:before,
  section#canal-front:before,
  section#mina-rashid:before,
  section#palm-galinios:before,
  section#sea-mirror:before,
  section#contact:before {
    height: 125vh !important;
  }
}

/* end Common css */

/* burger menu */
.burger-menu .bi-list {
  position: absolute;
  color: white;
  left: 1em;
  top: 1em;
  font-size: 2em;
  cursor: pointer;
}

#popup-close {
  position: absolute;
  color: white;
  left: 1em;
  top: 1em;
  font-size: 2em;
  cursor: pointer;
}

div.burger-menu-popup.show {
  background: black;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 111111111;
}

.first-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.second-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.burger-menu-popup-container {
  flex-direction: column;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #000;
  z-index: 111111;
}

.burger-pop-row {
  height: 60px;
}

.burger-pop-row a {
  color: white;
  font-size: 24px !important;
}

.burger-pop-row a:hover {
  font-weight: bold;
}

/* burger menu end */

/* nav */
#header {
  height: 0;
}

body {
  overflow-x: hidden;
  width: 100%;
}

@media(max-width: 768px) {}

#logo img {
  filter: invert(100%);
}

.nav-container {
  position: fixed;
  right: 8%;
  z-index: 11;
  top: 7%;
  width: 0px;
}

.navbar ul {
  padding: 0;
  display: flex;
  flex-direction: column !important;
  position: absolute;
  top: 22vh;
  list-style: none;
  right: -144px;
}

.navbar li {
  position: relative;
}

.nav-link.scrollto {
  color: transparent;
  padding: 12px 54px 12px 12px;
}

a.nav-link.scrollto:hover {
  color: #fff;
  font-weight: bold;
}

.navbar ul li a:after {
  content: '' !important;
  width: 13px !important;
  height: 13px !important;
  background: white;
  border-radius: 50%;
  box-shadow: 0px 0px 5px 0px #000;
  transition-duration: .3s !important;
  margin-left: 10px;
}

.navbar ul li a.active:after {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  background: white;
  border-radius: 50%;
  box-shadow: 0px 0px 5px 0px #000;
}


.button-animated {
  display: inline-block;
  padding: 10px 20px;
  position: relative;
  transition: color .3s;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  text-shadow: 1px 1px 1px #222;
  border: 4px double #cccccc40;

}

.button-animated::before {
  content: "";
  /* Add a pseudo-element for creating the border effect */
  position: absolute;
  /* Position the pseudo-element absolutely relative to the .hover element */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  /* Place the pseudo-element behind the content */
  border: 4px solid transparent;
  /* Set the initial border color to transparent */
  border-image: repeating-linear-gradient(135deg, #fff 0 10px, #fff 0 20px, #fff 0 30px) 8;
  -webkit-mask:
    conic-gradient(from 180deg at top 8px right 8px, #fff 90deg, #fff 0) var(--_i, 200%) 0 / 200% var(--_i, 8px) border-box no-repeat,
    conic-gradient(at bottom 8px left 8px, #fff 90deg, #fff 0) 0 var(--_i, 200%) / var(--_i, 8px) 200% border-box no-repeat,
    linear-gradient(#fff 0 0) padding-box no-repeat;
  transition: -webkit-mask-position .3s .3s;
}

.button-animated:hover::before {
  --_i: 100%;
  border: 4px solid #fff;
  /* Set the border color to black on hover */
  transition: -webkit-mask-size .6s .6s, border .6s .6s;
}

.button-animated:hover {
  color: #fff;
  /* Change the text color on hover */
}


/* hero */
#hero,
#hero .row {
  height: 100vh;
}

#hero .hero-img {
  position: relative;
}

#hero .hero-img img {
  /* width: 70%; */
  overflow: hidden;
  position: absolute;
  right: 0;
  height: 100vh;
  background-repeat: no-repeat;
}

#hero {
  margin-top: 0px !important;
}

section#hero {
  padding: 0 0;
}

.hero-imag {
  position: relative;
}

.imgsec.open {
  left: calc(710px);
}

.imgsec {
  position: absolute;
  height: calc(100vh + 40px);
  left: 75%;
  transition: 5.1s;
  top: 110px;
}

#header .logo h1 a,
#header .logo h1 a:hover {
  text-decoration: none;
  margin-top: 41px;
  position: absolute;
  color: white;
}

/* .hero-text-container {
    z-index: 1111111111111111 !important;
    color: white;
  } */

@media(min-width: 768px) {
  .hero-text-container {
    z-index: 1111 !important;
    color: white;
    position: absolute;
    top: 50vh;
    left: 10vw;
  }
}

h2.hero-content {
  font-size: 1.3rem;
  color: white;
  font-weight: 500;
  text-shadow: 1px 1px 9px #222;
}

/* expertise */

section .video-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.evideo video {
  object-position: bottom;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}

.twodescription.effectReady.left-content {
  position: absolute;
  top: 41vh;
  font-size: 20px;
  color: white;
  font-weight: bold;
  left: 6vw;
}

.twodescription.effectReady.right-content {
  position: absolute;
  top: 41vh;
  font-size: 20px;
  color: white;
  font-weight: bold;
  right: 6vw;
}

.twodescription.effectReady.russian-content {
  position: absolute;
  top: 41vh;
  font-size: 30px;
  color: white;
  font-weight: bold;
  right: 6vw;
}




.twodescription.effectReady {
  z-index: 11;
}

/* Diving living */

section#divine-living {
  width: 100%;
  background-image: url("../img/vMjlTd6ecbSMNguFM1SIDp10w1V97ULLWQkzDZFo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

/* Canal Front*/
section#canal-front {
  width: 100%;
  /* background-image: url("../img/Canal_Front_Residences_Page_08_Image_0001 Resized 1800x1200.jpg"); */
  background-repeat: no-repeat;
  background-size: cover;
  /* background-position: center bottom; */
}

/* Mina Rashid */
section#mina-rashid {
  width: 100%;
  /* background-image: url("../img/rashid.jpeg"); */
  background-repeat: no-repeat;
  background-size: cover;
  /* background-position: center bottom; */
}

/* Palm galinios */
section#palm-galinios {
  width: 100%;
  /* background-image: url("../img/rashid.jpeg"); */
  background-repeat: no-repeat;
  background-size: cover;
  /* background-position: center bottom; */
}

/* Sea Miorror */
section#sea-mirror {
  width: 100%;
  /* background-image: url("../img/seamirror.jpeg"); */
  background-repeat: no-repeat;
  background-size: cover;
  /* background-position: center center; */
}

/* Оставьте-заявку */
section#contact {
  width: 100%;
  /* background-image: url("../img/shutterstock_2243603799.jpg"); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

section {
  position: relative;
}

section .section-img {
  width: 100vw;
  height: 100vh;
  /* position: absolute;
    top: 0; */
}

#contact .section-img {
  position: absolute;
  top: 0;
}

/* Contact Form */
.form-container {
  z-index: 111;
  width: 50%;
  margin: auto;
  margin-top: 32vh;
  position: absolute;
  left: 23vw;
}

.cked45752 {
  z-index: 58;
}

.cked45752 form {
  margin: auto;
  width: 100%;
  padding: 5px 80px 35px 80px;
  box-sizing: border-box;
  border: 3px solid #fff;
}

.titlemain-cf {
  font-style: normal;
  font-weight: 400;
  font-size: 54px;
  line-height: 68px;
  text-transform: uppercase;
  color: #F8F8F8;
}

.ninedesctext {
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 33px;
  color: rgba(248, 248, 248, 0.4);
}

.padbot {
  padding-bottom: 35px;
}

input.dblock {
  display: block;
  width: 100%;
  border: 0;
  background: unset;
  border-bottom: 1px solid #F8F8F8;
  margin-bottom: 15px;
  outline: none;
  font-style: normal;
  font-weight: normal;
  font-size: 17px;
  line-height: 20px;
  color: rgb(255 255 255 / 66%);
  padding-top: 33px;
  padding-bottom: 10px;
  border-radius: 0;
}

.bottonconsultation {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 28px;
  gap: 8px;
  background: #F8F8F8;
  cursor: pointer;
  width: 415px;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  color: #1D1D1D;
  border: 4px solid #fff;
  transition: .5s;
  width: calc(100% - 60px);
}


@media(max-width: 768px) {
  #hero {
    width: 100%;
    /* background-image: url("../img/hero-bg.jpg"); */
    background-image: url("../img/shutterstock_634616576.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: right top; */
  }

  #hero .hero-text-container {
    z-index: 1111;
    color: white;
    top: 50vh;
    position: absolute;
    width: 100%;
    text-align: center;
  }

  .cked45752 form {
    margin: auto;
    width: 100%;
    padding: 5px 24px 10px 24px;
    box-sizing: border-box;
    border: 3px solid #fff;
  }

  .form-container {
    z-index: 111;
    width: 90%;
    margin: auto;
    margin-top: 32vh;
  }

  .twodescription.effectReady.russian-content,
  .twodescription.effectReady.right-content,
  .twodescription.effectReady.left-content {
    text-align: center;
    right: 0vw;
    left: 0vw;
  }

  .titlemain {
    line-height: 55px;
    font-size: 2em;
  }

  .button-animated {
    border: 4px solid #fff;
  }

  section#hero:before,
  section#expertise:before,
  section#divine-living:before,
  section#canal-front:before,
  section#mina-rashid:before,
  section#palm-galinios:before,
  section#sea-mirror:before,
  section#contact:before {
    height: 100vh;
    background: rgb(0 0 0 / 50%);
    z-index: 1;
  }

  .first-row,
  .second-row {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .burger-pop-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .burger-pop-row {
    height: 106px;
    text-align: center;
  }
}

/* Logo Loader */

.loader-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200vh;
  background-color: #000000;
  z-index: 11111111;
}

.logo-loader img {
  width: auto;
  height: 100px;
  z-index: 111111111111111111;
  position: absolute;
  top: 45vh;
  left: 38vw;
}

.logo-loader img {
  filter: invert(100%);
}

.loader-container.loader-hide {
  display: none;
}

a.whatsapp {
  position: fixed;
  bottom: 15px;
  right: 15px;
  border: none;
  z-index: 1111111111111;
  background-color: rgba(15, 15, 15, 0.371);
  padding: 5px;
  border-radius: 4px;
}

a.whatsapp .bi-whatsapp::before {
  font-size: 1.5em;
  color: #fff;
  font-weight: bold;
}

/* End Logo Loader */


@media(max-width: 768px) {
  .logo-loader img {
    width: auto;
    height: auto;
    z-index: 111111111111111111;
    position: absolute;
    top: 45vh;
    left: 20vw;
  }
}