@font-face {
  font-family: myFirstFont;
  src: url(../fonts/Harir_complete_OTF_Harir.otf);
}

@font-face {
  font-family: mySecondFont;
  src: url(../fonts/Majalla.ttf);
}

@font-face {
  font-family: myThirdFont;
  src: url(../fonts/majallab.ttf);
}

body,html,.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,p,a,span {
	font-family: myFirstFont !important;
}

body {
    text-align: center;
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    width: 100%; /* Adjust as needed */
    height: auto;
    position: relative;
    /* width: 100vw;   
    height: 100vh;   
    object-fit: cover;*/
}

.marker {
    position: absolute;
    width: 250px;
    height: 250px;
    background: yellow;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 999;
}

.marker_1 {
    top: 358px;
    left: 1207px;
}

.marker_2 {
    top: 52%;
    right: 1126px;
}

.marker_3 {
    bottom: 7%;
    left: 42.5%;
}

.marker_4 {
    bottom: 23.8%;
    left: 37%;
}

.marker_5 {
    bottom: 38.5%;
    left: 47.5%;
}

.popup {
    position: absolute;
    display: none;
    top: 0;
    z-index: 1;
}

.popup img {
    width: 100%;
    position: relative;
}

.popup a.next {
    position: absolute;
    padding: 7px 50px 0;
    bottom: 70px;
    display: block;
    left: 50%;
    transform: translateX(-50%);
}

.popup a.next img {
    width: 700px;
}

.splide {
  padding: 20px 0;
}

.splide__slide img {
  display: block;
  width: 100%;
  border-radius: 8px;
  transition: transform 400ms;
  transform: scale(0.9);
  transform-origin: center center;
}

.splide__slide.is-active img {
  transform: scale(1);
}

.splide .splide__arrow {
  top: 0;
  bottom: 0;
  height: 100%;
  transform: none;
  border-radius: unset;
  width: 50px;
  opacity: 0.9;
}
.splide .splide__arrow svg {
  filter: invert(1);
  width: 24px;
  height: 24px;
}

.splide__arrow.splide__arrow--prev {
    left: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}

.splide__arrow.splide__arrow--next {
    right: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}

.slider_wrap {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url('../img/details_bg.png') no-repeat center center fixed;
    background-size: cover;
}

.slider_wrap h1 {
    font-size: 12em;
    color: #fff;
    margin: 0;
    padding: 255px 0 90px;
}

.details-bg {
    position: relative;
}

.details-bg img {
    width: 100%;
    height: auto;
    display: block;
}

.details-bg a {
    font-size: 80px;
    color: #fff;
    border: 1px solid #fff;
    position: absolute;
    padding: 30px 30px 0;
    top: 560px;
    display: block;
    right: 0;
    text-decoration: none;
    transform: translateX(-50%);
}

.details-bg a:last-of-type {
    right: 450px;
}

.langg {
    position: absolute;
    padding: 7px 50px 0;
    top: 122px;
    display: block;
    right: 455px;
    transform: translateX(-50%);
    font-size: 5em;
    color: #6c4e46;
}