.main-slider {
    height: auto;
}
.slider-image-mobile {
    display: block;
}
.slider-image-desktop {
    display: none;
}
.main-slider img {
    width: 100%;
    height: 100%;
}
.swiper-button-next {
    right: 0;
    background: url("../assets/images/Shape1.png") center center no-repeat;
    background-size: contain;
    width: 50px;
}
.video-loader{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: .4s all;
}

.video-loader.hidden{
    display: none!important;
}
.slider-nav {
    display: none;
}
.swiper-button-prev {
    left: 0;
    background: url("../assets/images/Shape1.png") center center no-repeat;
    background-size: contain;
    width: 50px;
}
.slider-title {
    font-family: Bold;
    font-size: 35px;
    margin: 0;
    background: transparent;
    color: white;
    line-height: 30px;
    letter-spacing: 1px;
}
.slider-sub-title {
    font-family: Light;
    font-size: 24px;
    margin: 0;
    margin-bottom: 10px;
    background: transparent;
    color: #fff;
    letter-spacing: 7px;
}
.swiper-slide .website-text {
    display: none;
}

.slider-text {
    position: absolute;
    text-align: center;
    top: 30%;
    width: 100%;
    color: #fff;
    padding: 0 25px;
    display: none;
}
.slider-text .slider-title {
    animation-delay: 0.7s;
}
.slider-text p.website-text {
    display: none;
}
.slider-buttons .website-button {
    animation-delay: 1.3s;
}
.slider-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0px;
    flex-direction: column;
}
.slider-buttons .website-button {
    margin-right: 0px;
    margin-top: 20px;
}

.button-holder {
    position: relative;
    margin-left: 10px;
    height: 30px;
    width: 100px;
    overflow: hidden;
}
.button-holder-right {
    transform: translateX(-50%);
    margin-left: 0;
    height: 17px;
}
#master-plan-scene {
    display: none;
    position: absolute;
    top: 0;
    left: 10%;
}
#master-plan-scene2 {
    position: absolute;
    right: 0px;
    top: 50%;
}
#lifestyle-scene {
    position: absolute;
    left: 0;
    z-index: -4;
    top: -33%;
}
.slider-for img{
    transition: .7s all;
    transform: scale(1);
    max-height: 100vh;
}
.lifestyle-sections{
    display: none;
    position: relative;
}
.lifestyle-slider .swiper-container{
    padding: 30px 0;
    padding-bottom: 50px;
}
.lifestyle-slider .swiper-container .swiper-pagination{
    top: auto;
    width: 83%;
    left: 30px;
    bottom: 0;
    height: 2px;
}
.lifestyle-slider .swiper-slide{
    height: calc(80vh - 80px);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 99;
}
.lifestyle-slider .swiper-slide-active .expand-icon{
    opacity: 1;
}
.lifestyle-slider .swiper-slide .lifestyle-title{
    top: 45%;
}
.lifestyle-slider .swiper-slide-active .lifestyle-title{
    transform: translate(-50%,-50%)translateY(10px);
}

.lifestyle-section{
    position: relative;
    display: flex;
    height: 40vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size .2s ease-in;
    -moz-transition: background-size .2s ease-in;
    -ms-transition: background-size .2s ease-in;
    -o-transition: background-size .2s ease-in;
    -webkit-transition: background-size .2s ease-in;
    z-index: 100;
}
.lifestyle-section .circle{
    width: 50px;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 10px;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s all;
    z-index: 2;
}
.lifestyle-section-all{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 1;
    height: 100%;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    z-index: 1;
    transition: all .7s cubic-bezier(.59,.08,.385,1);
}
.lifestyle-section-all .website-title{
    text-align: left;
    color: #fff;
    text-shadow: 2px 2px 7px rgba(14, 14, 14, 0.5);
    margin-bottom: 16px;

}
.overflow-hidden{
    overflow: hidden;
}
.main-base-camp{
    display: none;
    align-items: center;
    justify-content: center;
}
.lifestyle-section-all .website-text{
    width: 100%;
    color: #fff;
    text-shadow: 2px 2px 7px rgba(14, 14, 14, 0.5);
    line-height: 1.4rem;
    margin-bottom: 20px;
}
.lifestyle-section-all .close-btn{
    width: 32px;
    top: 5%;
    right: 5%;
    z-index: 99;
}
.lifestyle-section-all .close-btn::before,.lifestyle-section-all .close-btn::after{
    width: 32px;
}
.lifestyle .lifestyle-slider .flexawy{
    align-items: flex-start;
    height: 100%;
}
.lifestyle-slider .lifestyle_video{
    height: 100%;
}
.lifestyle .flexawy{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 120vh;
}
.lifestyle-section-all .flexawy{
    padding: 0 20px;
}
.lifestyle-section .circle::before{
    border-color: #fff;
    border-radius: 50%;
}
.lifestyle-section img{
    width: 100%;
}
.lifestyle-title{
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-50%);
    font-family: Bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
    transition: .4s all;
    text-transform: uppercase;
    backface-visibility: hidden;
    letter-spacing: .2rem;
    z-index: 2;
    text-shadow: 2px 2px 7px rgba(14, 14, 14, 0.5);
}

.lifestyle-section .expand-icon{
    opacity: 1;
}
.lifestyle-section:hover .expand-icon::after{
    border-width: 10px;
}
.lifestyle-section:hover .lifestyle-title::before{
    width: 100%;
}
.lifestyle-section:hover .lifestyle-title{
    transform: translate(-50%,-50%)translateY(10px);
}
.lifestyle-section:hover .circle{
    top: 57%;
}
.lifestyle-title::before{
    position: absolute;
    top: -20px;
    left: 0;
    content: "";
    width: 0;
    background: #fff;
    height: 2px;
    transition: .4s all;
}
#communities-scene {
    position: absolute;
    top: 44%;
    right: -43%;
}
#finishing-scene {
    position: absolute;
    top: 65%;
    left: -50%;
}
#partners-scene {
    position: absolute;
    right: 0;
    top: 0;
}
.abs {
    position: absolute;
    top: 0;
    left: 50px;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.abs-right {
    right: 10px;
    position: absolute;
    top: 0;
    font-family: Calibri;
    font-weight: 100;
    letter-spacing: 3px;
    font-size: 12px;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.right-next{
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.button-inner-top {
    transform: translateY(0) translateZ(0);
}
.button-inner-bottom {
    transform: translateY(120%) translateZ(0);
}

.flex-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flexbox;
    display: -moz-flex;
    display: -o-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

#page-wrap {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
section.home_banner{
    position: relative;
    height: 100%;
    background-color: #000000;
    background-size: cover;
    padding: 0;
}
.banner_text{
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%,0);
    width: auto;
    z-index: 2;
    display: none;
}
.banner_text .website-title{
    text-transform: uppercase;
    text-align: left;
    color: #fff;
    font-size: 13px;
    margin-bottom: 20px;
}

.banner_text .banner_button{
    font-family: Bold;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    width: 140px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    padding: 10px 0;
    line-height: unset;
    font-size: 14px;
    letter-spacing: .2rem;
    z-index: 2;
}
.banner_text .banner_button::before{
    background: #dc3535;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.banner_text .banner_button:hover{
    border-color: #dc3535;
}

.banner_text .banner_button:hover .bbb{
    animation-name: fadeIn;
}
.bbb:first-child{
    animation-delay: 0s;
}
.bbb:nth-child(2){
 animation-delay: .1s;   
}
.bbb:nth-child(3){
    animation-delay: .12s;
}
.bbb:nth-child(4){
    animation-delay: .14s;
}
.bbb:nth-child(5){
    animation-delay: .16s;
}
.bbb:nth-child(6){
    animation-delay: .18s;
}
.bbb:nth-child(7){
    animation-delay: .20s;
}
.bbb:nth-child(8){
    animation-delay: .22s;
}
.bbb:nth-child(9){
    animation-delay: .24s;
}
.bbb:nth-child(10){
    animation-delay: .26s;
}

.banner_text .banner_button:focus{
    outline: none;
}
.banner_video{
    width: 100%;
    height: 90vh;
    z-index: 1;
    object-fit: cover;
    background-color: #fff;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    transition: all 1.5s cubic-bezier(.59,.08,.385,1) 1s;
}

/*** canvas ***/

#canvas {
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 10;
}

.multi-textures {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 15;
    cursor: pointer;
    font-size: 3em;
    color: white;
    height: 100vh;
}

.multi-textures img {
    display: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: contain;
}

/*** handling errors ***/

.no-curtains .multi-textures {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-curtains .multi-textures span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3D(-50%, -50%, 0);
}

.no-curtains.image-1 .multi-textures img:nth-child(3) {
    display: block;
}

.no-curtains.image-2 .multi-textures img:nth-child(4) {
    display: block;
}

.no-curtains.image-3 .multi-textures img:nth-child(5) {
    display: block;
}

.no-curtains.image-4 .multi-textures img:nth-child(6) {
    display: block;
}
.slider-pagination {
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0;
}
.slider-pagination li {
    list-style-type: none;
    display: inline-block;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    position: relative;
}
.slider-pagination li::after {
    content: "";
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #575a64;
}
.slider-pagination li.active::after {
    background-color: #fff;
}
.interior-exterior {
    background-color: transparent;
}
.mountain-container{
    position: relative;
}
.mountain-container img.sea{
    position: relative;
    z-index: 9999;

}
.interior-exterior img.mountain1{
    position: absolute;
    top: -4%;
    left: -100px;
    width: 100%;
}
.interior-exterior img.mountain2{
    position: absolute;
    bottom: -60px;
    right: 0px;
    width: 250px;
    transform: translateX(40%);
}
.interior-exterior img.mountain3{
    position: absolute;
    width: 100%;
    top: 70%;
    transform: translateY(-50%);
    left: -50px;
}
.interior-exterior img.mobile{
    margin-bottom: 30px;
    max-height: 100vh;
    width: 90%;
    margin: 0 auto;
}
.interior-exterior .website-text {
    text-align: justify;
    margin-bottom: 40px;
    padding-top: 40px;
}
.interior-exterior .website-button {
    margin: 0 auto;
    margin-bottom: 50px;
    width: 260px;
}
.image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
}
.image-wrap video {
    width: 100%;
    object-fit: cover;
    background-size: cover;
}
.house-hotel-title{
    margin-bottom: 80px;
}
.image-description {
    position: absolute;
    bottom: 20px;
    left: 20px;
    text-align: left;
    font-family: Bold;
    font-size: 30px;
    color: #fff;
    z-index: 2;
    opacity: 1;
    margin-bottom: 0;
    transition: opacity 0.5s ease;
    text-transform: uppercase;
}
.master-plan {
    background-color: transparent;
    padding: 0;
}
.master-plan .website-title {
    margin-bottom: 30px;
}
.collapse-controls {
    display: none;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px;
}
.collapse-controls button {
    position: relative;
    margin-right: 30px;
    background-color: transparent;
    border: none;
    color: #000;
    font-family: Regular;
    text-transform: uppercase;
    font-size: 17px;
    text-decoration: none;
}
.collapse-controls button:last-child {
    margin-right: 0;
}
.collapse-controls button:hover {
    color: #5e5a5a;
    text-decoration: none;
}
.collapse-controls button:last-child:after {
    display: none;
}
.collapse-controls button:not(.collapsed) {
    color: #f5d010;
}
.collapse-controls button:after {
    height: 25px;
    width: 2px;
    background: #9f9b98;
    position: absolute;
    content: "";
    right: -15px;
    top: 9px;
}
.collapse-controls button:hover {
    text-decoration: none;
}
.places {
    padding: 40px;
    display: none;
}
.places .website-title {
    text-align: left;
    margin-bottom: 50px;
}
.places .website-title:after {
    display: none;
}

.places .swiper-button-next,.places .swiper-button-prev{
    bottom: 14px;
    top: auto;
    background-size: auto;
    width: 50px;
    z-index: 999;
    transition: .4s all;
}
.places .website-text{
    text-align: center;
}
.places .swiper-button-next:focus,.places .swiper-button-prev:focus{
    outline: none;
}
.places .swiper-button-next{
    left: calc(50% + 50px);
    background-image: url(../assets/images/right-arrow-yellow.png);
}
.places .swiper-button-prev{
    left: calc(50% - 100px);
    background-image: url(../assets/images/left-arrow-yellow.png);
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    margin-top: 0!important;
    bottom: 30px;
}
.plans{
    width: 100%;
    margin-top: 50px;
}
.plans .website-title{
    font-size: 17px;
}
.plans .swiper-slide{
    text-align: center;
}
.plans .swiper-slide .website-title{
    margin-top: 30px;
}
.place-description {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 40%;
    position: absolute;
    padding: 10px 10px;
    background-color: #fff;
    transition: 0.4s all;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.place-description .close-btn{
    display: none;
    top: 2px;
    right: 2px;
}
.place-description.reverted:after {
    bottom: auto;
    top: -15px;
    border-width: 0 10px 15px 10px;
    border-color: transparent transparent #ffffff transparent;
}
.place-description:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
    bottom: -15px;
    margin-left: -10px;
    left: 50%;
}
.place-description .website-button {
    display: none;
    border: 1px solid #989390;
    width: 90%;
    height: 40px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
}
.place-desc-image {
    width: 100%;
    display: inline-block;
    display: none;
}
.place-desc-image img {
    width: 100%;
}
.place-desc-description {
    width: 100%;
    display: inline-block;
    padding: 0px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.place-desc-description .website-title {
    text-align: center;
    font-size: 11px;
    margin: 0;
    color: #000;
    font-family: Regular;
    letter-spacing: 0.05em;
}
.place-desc-description .website-text {
    font-size: 12px;
    line-height: 14px;
    margin-top: 1rem;
    display: none;
}
.place-desc-description .website-title:after {
    display: none;
}
.interior-exterior {
    background-color: transparent;
    padding: 80px 0;
    padding-bottom: 0;
}
.close-btn {
    display: block;
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    transition: transform 0.25s ease-in-out;
}
.close-btn:hover {
    transform: rotate(180deg);
}
.close-btn:before {
    content: "";
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    height: 0;
    border-top: 2px solid #dc3535;
    transform: rotate(45deg);
    transform-origin: center;
}
.close-btn:after {
    content: "";
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    height: 0;
    border-top: 2px solid #dc3535;
    transform: rotate(-45deg);
    transform-origin: center;
}
.collapse-controls {
    display: none;
}
.collapse-controls-mobile select {
    font-family: Regular;
    outline: none;
    text-align: center;
    text-align-last: center;
    display: flex;
    color: #fff;
    border: none;
    border-radius: 0;
    width: 100%;
    padding: 15px 40px;
    text-transform: uppercase;
    background-image: url("../assets/images/download-arrow-white.png");
    background-repeat: no-repeat;
    background-color: #dc3535;
    letter-spacing: 2px;
    background-position-x: 95%;
    background-position-y: 50%;
    background-size: 5%;
    -webkit-appearance: none;
}
.collapse-controls-mobile select:first-child {
    display: none;
    margin-bottom: 20px;
}
.collapse-controls-mobile .dropdown:first-child {
    margin-bottom: 20px;
    margin-top: 40px;
}
.collapse-controls-mobile .dropdown .dropdown-toggle:after {
    border: none;
}
.dropdown-menu.show {
    background-color: #fff;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.dropdown-menu.show .dropdown-item {
    font-size: 12px;
    margin-bottom: 10px;
    background-color: #fff;
    padding: 10px 0;
    -webkit-appearance: none;
}

.map {
    position: relative;
    transition: 0.7s all;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0;
}
.map img {
    width: 100%;
    transition: 0.4s all;
    
}
.map img.movable{
    box-shadow: none;
}
#dropdownMenuButton2 {
    font-family: Bold;
    text-transform: uppercase;
    font-size: 12px;
}
.grid{
    display: block;
    position: relative;
}
.grid img{
    max-width: 100%;
    min-height: 100px;
}
.lifestyle-button-next,
.lifestyle-button-prev {
    display: none;
    transition: 0.4s all;
}
#parallax-scene {
    opacity: 0.3;
    position: absolute;
    left: -40%;
    top: 24%;
}
#parallax-scene2 {
    opacity: 0.3;
    position: absolute;
    right: -5%;
    top: 41%;
    z-index: -1;
}
#parallax-scene2 img {
    height: 200px;
}

.image-description-lifestyle {
    opacity: 0;
    z-index: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: Bold;
    font-size: 23px;
    color: #fff;
    line-height: 1em;
    transition: 0.4s all;
    width: 100%;
    padding: 0 20px;
    text-shadow: 7px 6px 24px rgba(6, 7, 7, 0.27);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.swiper-slide-active .image-description-lifestyle {
    opacity: 1;
}
.image-description-lifestyle span.website-text {
    display: none;
    margin-top: 20px;
    width: 100%;
    text-shadow: 7px 6px 24px rgba(6, 7, 7, 0.27);
}
.swiper-slide.description-active .image-description-lifestyle {
    opacity: 1;
}
.lifestyle {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0px;
    padding-top: 30px;
}
.lifestyle .website-title:after {
    top: -35px;
}

.lifestyle .swiper-wrapper {
    margin-left: -22px;
}
.fixed-window{
    display: none;
}
.expandables .swiper-pagination{
    position: absolute;
    bottom: 0;
    top: auto;
    bottom: 0px;
    left: 30px;
    width: 83%;
    height: 2px;
}
.partners .swiper-slide {
    border-left: 1px solid #f9f8f7;
    border-top: 1px solid #f9f8f7;
    border-bottom: 1px solid #f9f8f7;
}

.lifestyle .swiper-pagination-bullet,
.expandables .swiper-pagination-bullet,
.partners-images-mobile .swiper-pagination-bullet {
    width: 30px;
    height: 2px;
    background-color: #575a64;
    border-radius: 0;
}

.lifestyle .col-12 {
    padding: 0;
}
.lifestyle .swiper-pagination-bullet:focus,
.expandables .swiper-pagination-bullet:focus {
    outline: none;
}

.lifestyle .swiper-pagination-bullet:last-child {
    margin-right: 0;
}
.communities .website-title:after {
    top: -35px;
}
.communities .website-text.communities-desc {
    width: 100%;
    margin: 50px auto;
    padding: 0 30px;
    text-align: justify;
}
.expandables {
    display: none;
    padding:0px;
    padding-bottom: 50px;
}
.expandables.expandables-mobile {
    display: block;
}
.expandables img {
    width: 100%;
    transition: 0.4s all;
}
.expandables .image-wrap {
    cursor: pointer;
    box-shadow: none;
    margin-bottom: 0;
    width: 33.3333333333%;
    background-size: cover;
    background-position: center center;
    height: 88vh;
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.finishing-types {
    background-color: transparent;
    padding: 80px 0;
    padding-bottom: 0;
}
.finishing-types .expandables2 .image-wrap {
    width: 50%;
}
.finishing-types .website-title:after {
    top: -35px;
}
.tatweer-misr{

}
.tatweer-misr .website-text{
    text-align: justify;
    margin-bottom: 50px;
}
.tatweer-misr .website-button{
    margin: 0 auto;
}

.expandables .image-wrap:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 1;
}
.expandables .swiper-slide-active .image-wrap:after {
    opacity: 0;
    transition: 0.4s all;
}

.expand-icon {
    opacity: 0;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 59%;
    transform: translate(-62%, -50%);
    z-index: 2;
    width: 50px;
    height: 50px;
    background-color: #dc3535;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .8s all;
}
.expandables-mobile .swiper-slide-active .expand-icon {
    opacity: 1;
    transition: 0.4s all;
    transform: translate(-50%, -50%);
    top: 62%;
}
.expandables-mobile .community-name{
    opacity: 0;
    width: 70%;
    font-size: 25px;
    top: 45%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -45%);

}
.expandables-mobile .swiper-slide-active .community-name {
    opacity: 1;
    text-align: center;
    top: 30%;
    left: 50%;
    bottom: auto;
}
.expandables-mobile .swiper-slide-active .community-name::after{
    left: 50%;
    transform: translateX(-50%);
    top: -15px;
}
.expandables-mobile .image-wrap {
    width: 100%;
    position: relative;
    height: auto;
    display: block;
    min-height: 180px;
    max-height: 100vh;
}

.expandables .image-wrap:hover {
    width: 100%;
}
.expandables .image-wrap:hover .community-name{
    color: #fff;
}
.expand-icon img {
    width: 25px;
}
.expand-icon:after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-width: 10px;
    transition: border-width 0.5s linear;
}
.expandables-mobile .swiper-slide-active .expand-icon:after {
    border-width: 10px;
}
.expandables-mobile .swiper-wrapper {
    margin-left: -22px;
}

.expandables a {
    display: contents;
}
.communities {
    position: relative;
    padding: 80px 0;
    background-color: transparent;
}
.lifestyle-grid-image{
    width: 47%;
}
.community-image .community-name{
    display: none;
}
.community-name {
    opacity: 1;
    z-index: 2;
    font-family: Bold;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: #fff;
    position: absolute;
    left: 30px;
    bottom: 25px;
    width: calc(100% -  60px);
    text-shadow: 2px 2px 7px rgba(14, 14, 14, .7);
    text-align: left;
    margin-bottom: 0;
    transition: 0.4s all;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    text-transform: uppercase;
}
.community-name::after{
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 50%;
    height: 2px;
    background-color: #fff;
    transition: .3s all;
}

.hvr-outline-out:before {
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}
.hvr-outline-out:active:before,
.hvr-outline-out:focus:before,
.hvr-outline-out:hover:before {
    top: -15px;
    right: -15px;
    bottom: -15px;
    left: -15px;
}
.finishing-desc {
    width: 100%;
    padding: 0 30px;
    text-align: justify;
    margin-bottom: 40px;
}
.finishing-types .community-name {
    top: 25%;
}
.finishing-types .swiper-slide-next .community-name {
    opacity: 0;
}
.finishing-types .swiper-slide-next .expand-icon {
    opacity: 1;
}
.finishing-types.swiper-slide-active .community-name {
    opacity: 1;
}
.house-hotel {
    background-position-x: 70%;
    padding: 50px 40px;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: inherit;
    height: 80vh;
    position: relative;
    font-family: Calibri;
    font-weight: 600;
    color: #726f6d;
    font-size: 14px;
    line-height: 17px;
}
.the-house-img{
    width: 180px;
}
.key-img{
    width: 50px;
}
.hotel-img{
    width: 110px;
}
.partners {
    background-color: transparent;
    padding: 80px 0 80px 20px;
    position: relative;
}
.partners .col-12 {
    padding: 0;
}
.partners .website-title {
    margin-bottom: 20px;
}
.partners .website-title:after {
    top: -35px;
}
.partners-sub-title {
    font-family: Light;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    color: #5e5a5a;
    text-transform: uppercase;
}
.partners-images {
    margin-top: 50px;
    background-color: #fff;
}
.partners-images table {
    display: none;
    width: 100%;
    table-layout: fixed;
}
.lifestyle_video{
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    object-fit: cover;
}
.partners-images table tr{
    display: none;
}
.partners-images table tr td {
    text-align: center;
    border: 1px solid #f9f8f7;
}
.partners-images .website-button{
    margin:0 auto;
    margin-top: 30px;
    display: none;
}
.partners-images .website-button:focus{
    outline: none;
}
.partners-images table tr td img {
    width: 80%;
    margin: 0 auto;
    display: block;
    transition: filter 0.3s ease-in-out;
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}
.partners-images table tr td img:hover {
    -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(0%); /* FF 35+ */
}
.partners-images-mobile {
    position: relative;
}
.partners-images-mobile img{
    width: 100%;
    margin-left: 10px;
}
.partners-swiper-pagination {
    position: absolute;
    bottom: -70px;
    left: 10px;
    width: 89%;
    height: 2px;
    text-align: center;
}
.fullscreen-icon{
    position: absolute;
    right: 8%;
    top: 25%;
    transform: translateY(-50%);
    left: auto;
    z-index: 9;
    transition: .7s all 3s;
    opacity: 0;
    display: block;
}
.partners-images-mobile .swiper-pagination-bullet {
    width: 18px;
    text-align: center;
    height: 3px;
}
.partners-images-mobile .swiper-pagination-bullet-active{
    background-color: #f5d010;
}
.getting-there {
    padding: 0;
}
.getting-there .container-fluid,
.getting-there .container-fluid .col-12 {
    padding: 0;
}
.getting-there-left{
    height: 30vh;
    max-height: 70vh;
}
.getting-there-left video {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.getting-there-left,
.getting-there-right {
    position: relative;
    display: flex;
}

.getting-there-left .website-title,
.getting-there-left .website-text {
    color: #4e4e4e;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
    text-align: center;
}
.getting-there-text {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 80%;
}

.getting-there-left .website-title:after {
    display: none;
}
.navigation-buttons {
    position: absolute;
    left: 6%;
    bottom: 3%;
    z-index: 2;
    display: flex;
    width: 94%;
}
.navigation-buttons a {
    margin-right: 25px;
    position: relative;
    display: inline-block;
    width: 95px;
    transition: .4s all;
    padding:2px;
}
.navigation-buttons a.active{
    -webkit-box-shadow: inset 0px 0px 0px 2px rgba(220,53,53,1);
    -moz-box-shadow: inset 0px 0px 0px 2px rgba(220,53,53,1);
    box-shadow: inset 0px 0px 0px 2px rgba(220,53,53,1);
}
.navigation-buttons a img {
    width: 100%;
    height: 80px;
}
.navigation-buttons span {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-family: Bold;
    text-transform: uppercase;
    font-size: 12px;
}
.getting-there-right svg {
    width: 100%;
    max-height: 100vh;
    display: block;
    opacity: 1;
    transition: 0.4s all;
}
#svg-animation {
    width: 100%;
    min-height: 500px;
    height: auto;
}
#svg-animation video{
    display: none;
    width: 100%;
    height: 90%;
}
#svg-animation video.playing{
    display: block;

}
.getting-there .row {
    margin: 0;
}
.map-animation-poster{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 6%;
    right: 0;
    height: auto;
    width: 100%;
    margin: 0 auto;
}
.car-svg,
.sea-svg {
    display: none;
    opacity: 0;
}
.tatweer-misr iframe.mobile{
    margin-bottom: 50px;
}
.go-to-btn{
    position: absolute;
    top: 40px;
    right: 20px;
}
.go-to-btn a{
    width: 50px;
}
.partners-modal.modal{
    /*left: 1%;
    width: 98%;*/
}
.partners-modal .partner-button{
    margin-bottom: 20px;
}
.partners-modal.modal.show .modal-content{
    padding:  0 0 30px 0;
}

body.modal-open {
    overflow: hidden;
    position: relative;
}


.partner-title.website-title{
    text-align: center;
    font-size: 24px;
}
.partner-description.website-text{
    text-align:justify;
    margin-bottom: 50px;
}
.partners-modal .modal-body .partners-div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.partners-modal img{
    width: 100%;
}
.modal-dialog-scrollable .modal-content{
    max-height: none;
}
@media screen and (orientation:landscape){
    .map-animation-poster{
        width: auto;
        height: 77%;

    }
    section.home_banner{
        height: 140vh;
    }
    .lifestyle-slider .swiper-slide{
        height: 90vh;
    }
    .lifestyle-slider .swiper-slide .lifestyle-title{
        top: 35%;
    }
    .house-hotel{
        height: 120vh;
    }
    .expandables-mobile .image-wrap{
        height: 100vh;
    }
    .expandables img{
        max-height: 100vh;
    }
    .tatweer-misr iframe.mobile{
        display: none!important;
    }
    .tatweer-misr iframe.desktop{
        display: block!important;
    }
}
@media (min-width: 768px) {
    .expandables .swiper-pagination{
        display: none;
    }
    .lifestyle-slider .swiper-container .swiper-pagination{
        display: none;
    }
    .banner_video{
        height: 100vh;
    }
    .banner_text{
        display: block;
        top: 73%;
    }
    .interior-exterior img.mountain1{
        width: 70%;
    }
    .banner_text .website-title{
        font-size: 21px;
    }
    .banner_text .banner_button{
        width: 200px;
        height: 70px;
        display: flex;
    }
    .fullscreen-icon{
        display: none!important;
    }
    .lifestyle_video{
        width: 100%;
    }
    .tatweer-misr iframe{
        margin: 0;
    }
    .tatweer-misr .website-title{
        text-align: left;
    }
    .tatweer-misr .website-text{
        width: 90%;
        margin-bottom: 50px;
    }
    section.home_banner{
        height: 100vh;
    }
    .place-description .close-btn{
        display: block;
    }
    .lifestyle .swiper-wrapper {
        margin-left: 0;
    }
    #parallax-scene {
        left: -11%;
    }
    #parallax-scene2 {
        right: -4%;
    }
    #parallax-scene2 img {
        height: auto;
    }
    #communities-scene {
        right: -9%;
        top: 17%;
    }
    #finishing-scene {
        top: 5%;
        left: 0;
    }
    #partners-scene {
        right: 0%;
        top: 12%;
    }
    .house-hotel-title {
        margin-top: 70px;
        margin-bottom: 70px;
    }
    .master-plan .website-title {
        margin-bottom: 20px;
        text-align: center;
    }
    .master-plan .website-title:after {
        top: -35px;
    }
    .place-desc-image {
        display: none;
    }
    .place-desc-description .website-title {
        margin-bottom: 25px;
    }
    .place-desc-description .website-text {
        display: block;
        text-align: center;
    }
    .place-description {
        width: 30%;
    }
    .place-desc-description {
        display: inline-block;
    }
    .collapse-controls-mobile {
        display: block;
    }
    .collapse-controls-mobile .dropdown .dropdown-toggle {
        background-size: 3%;
    }

    
    #svg-animation{
        height: 80vh;
        min-height: 500px;
    }
    .getting-there-left img {
        max-height: 100vh;
    }
    .lifestyle .col-12 {
        padding: 0 15px;
    }
    .lifestyle-button-next,
    .lifestyle-button-prev {
        outline: none;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: -15px;
        transform: translateY(-50%);
        width: 60px;
        height: 40px;
        background-color: #fff;
        z-index: 1;
        cursor: pointer;
        box-shadow: 2px 20px 24px 0px rgba(6, 7, 7, 0.27);
    }
    .lifestyle-button-next img,
    .lifestyle-button-prev img {
        height: 40%;
    }
    .lifestyle-button-next:before,
    .lifestyle-button-prev:before {
        background-color: #5e5a5a;
        transition-duration: 0.3s;
    }
    .lifestyle-button-next {
        top: 48%;
    }
    .lifestyle-button-prev {
        top: calc(48% + 40px);
    }
    .map {
        overflow: visible;
    }
    .map img {
        width: 100%;
        height: 100%;
        max-width: 375px;
        margin: 0 auto;
    }
    
    .collapse-controls {
        display: none;
    }
    .communities,
    .finishing-types {
        padding: 50px 0;
        padding-bottom: 0;
    }
    .house-hotel {
        padding: 60px 60px;
        background-position-x: 35%;
    }
    .house-hotel img {
        max-width: 280px;
    }
    .key-img{
        width: 90px;
    }
    .the-house-img{
        width: 500px;
    }
    .hotel-img{
        width: 380px;
    }
    .partners-images table {
        display: table;
    }
    .partners-images-mobile {
        display: none;
    }
    .partners-images .website-button{
        display: block;
    }
}

@media (min-width: 1024px) {
    .partners-modal .modal-body .partners-div{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
    }
    .partners-modal.modal.show .modal-content{
        padding: 0;
    }
    .modal-open .modal.partners-modal{
        text-align:center;
        overflow-y: scroll;
    }
    .partners-modal img{
        width: auto;
    }
    .partner-title.website-title{
        font-size: 21px;
        text-align: left;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    .website-text.partner-description{
        font-size: 18px;
        padding-left: 20px;
        text-align: left;
        margin-bottom: 20px;
    }
    .partner-button{
        margin-left: 20px;
        margin-bottom: 0;
    }
    .go-to-btn{
        position: absolute;
        bottom: 35px;
        right: 40px;
        z-index: 99;
        top: auto;
    }
    .fixed-window{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 105;
    }
    .fixed-window.appear{
        display: block;
    }

    .lifestyle{
        padding-bottom: 80px;
    }
    .interior-exterior img.mountain1{
        top: -56px;
        left: -97px;
        width: 200px;
    }
    .interior-exterior img.mountain2{
        bottom: -70px;
        right: 0px;
        width: 300px;
        transform: translateX(60%);
    }
    .interior-exterior img.mountain3{
        width: 110%;
        top: 70%;
        transform: translateY(-50%);
        left: -70px;
    }
    .main-base-camp{
        display: flex;
    }
    .lifestyle-slider .swiper-container .swiper-pagination{
        display: block;
    }
    .expandables .swiper-pagination{
        display: block;
    }
    .banner_text .website-title{
        font-size: 31px;
        margin-bottom: 30px;
    }
    .getting-there-left .website-title, .getting-there-left .website-text{
        color: #fff;
    }
    .banner_video{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        object-fit: cover;
        background-color: #fff;
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
        transition: all 1.5s cubic-bezier(.59,.08,.385,1) 1s;
    }
    .map-animation-poster{
        height: 77%;
        width: auto;
    }
    .banner_video{
        object-fit: cover;
    }
    .partners-images .website-button{
        display: block;
    }
    .tatweer-misr .website-text{
        text-align: left;
    }
    .tatweer-misr .website-button{
        margin: 0;
    }
    .map img {
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
    }
    .key-img{
        width: 120px;
    }
    .getting-there-left{
        max-height: none;
        height: auto;
    }
    .expand-icon:after{
        border-width: 1px;
    }
    .lifestyle-section-all .close-btn{
        top: 5%;
        right: 1%;
    }
    .place-description.reverted:after {
        bottom: auto;
        top: -30px;
        border-width: 0 25px 30px 25px;
        border-color: transparent transparent #ffffff transparent;
    }
    .place-description:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 30px 25px 0 25px;
        border-color: #ffffff transparent transparent transparent;
        bottom: -29px;
        margin-left: -25px;
        left: 50%;
    }
    .map img.movable{
        height: 95vh;
    }
    .lifestyle-sections{
        display: flex;
        flex-wrap: wrap;
    }
    .house-hotel img {
        max-width: 580px;
    }
    .lifestyle-title{
        top: 48%;
    }
    .lifestyle-section{
        display: inline-block;
        flex:1;
        height: 80vh;
    }
    .lifestyle .flexawy{
        height: 100vh;
    }
    .lifestyle-section-all .website-text{
        width: 35%;
    }
    .monte-logo{
        display: block;
        width: 120px;
        /* margin-top: 10px; */
        position: relative;
    }

    .banner_text .banner_button{
        margin: 0;
        width: 220px;
        height: 55px;
    }
    section.home_banner{
        height: 100vh;
        margin-top: 0;
        padding: 30px 80px 0 80px;
    }
    .banner_text{
        top: 86%;
        left: 4%;
        transform: translateX(0);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .full-screen-btn{
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 24px;
        opacity: 0;
        transition: .4s all;
        cursor: pointer;
        z-index: 999;
    }
    #svg-animation{
        min-height: 300px;
        height: 100vh;
    }
    .swiper-slide.no-hover .image-wrap:hover .image-description-lifestyle{
        opacity: 0;
    }
    .swiper-slide.no-hover .image-wrap:hover .lifestyle-image{
        transform: scale(1);
    }
    
    #lifestyle-scene {
        top: -40%;
        z-index: 0;
    }
    .lifestyle-grid-image{
        width: 30%;
    }
    .communities .website-text.communities-desc {
        width: 60%;
        margin: 50px auto;
        padding: 0;
    }
    .community-image .community-name{
        display: block;
    }
    .community-images{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 60px;
    }
    .community-image{
        width: 25%;
        margin-right: 30px;
        overflow: hidden;
        height: 500px;
        position: relative;
    }
    .community-image:last-child{
        margin-right: 0;
    }
    .community-image:hover .community-name::after{
        width: 100%;
    }
    .community-image:hover .community-image-bg{
        background-size: 105%;
    }
    .community-name{
        -webkit-transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    .community-image-bg,.community-image-bg-change{
        width: 100%;
        position: absolute;
        right: 0;
        height: 100%;
        z-index: 1;
        background-color: transparent;
        overflow: hidden;
        background-size: 110%;
        background-repeat: no-repeat;
        margin: auto;
        -webkit-transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    .community-image-bg:hover{
        background-size: 110%;
        -webkit-transition: all 0.15s ease-in;
        -moz-transition: all 0.15s ease-in;
        -o-transition: all 0.15s ease-in;
        -ms-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in;
    }
    .community-image-bg-change{
        background-color: #000;
        background-size: 400%;
        background-position: 0 70%;
        left: -200%;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }

    #communities-scene {
        top: 17%;
        right: 0;
    }
    #finishing-scene {
        top: 17%;
        left: 0;
    }
    #partners-scene {
        top: 33%;
    }
    
    .right-next{
        display: block;
    }
    
    .right-next:hover .button-inner-top {
        transform: translateY(-165%) translateZ(0);
    }
    .right-next:hover .button-inner-bottom {
        transform: translateY(0) translateZ(0);
    }
    .swiper-slide-active .image-description-lifestyle {
        opacity: 0;
    }
    .place-desc-description .website-text {
        text-align: left;
    }
    .interior-exterior {
        padding-bottom: 150px;
        padding-top: 150px;
        overflow: hidden;
    }
    .swiper-button-prev span {
        position: absolute;
        right: -45px;
        top: 14px;
        font-family: Calibri;
        font-weight: 100;
        letter-spacing: 3px;
        font-size: 12px;
    }
    .swiper-button-next span {
        margin-right: 50px;
        position: absolute;
        left: -45px;
        top: 14px;
        font-family: Calibri;
        font-weight: 100;
        letter-spacing: 3px;
        font-size: 12px;
    }
   
    .places {
        background-color: #fff;
        display: flex;
        z-index: 99;
        padding: 40px 80px;
        flex-direction: column;
        justify-content: center;
    }
    .places .website-title{
        text-align: center;
    }
    #parallax-scene {
        display: block;
        position: absolute;
        top: 0;
        left: -15px;
    }
    #parallax-scene2 {
        display: block;
        position: absolute;
        top: 0;
        right: 0px;
    }
    .place-description {
        display: none;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        width: auto;
        margin-left: 0;
        position: absolute;
        padding: 30px 20px;
        background-color: #fff;
        transition: 0.4s all;
        box-shadow: 7px 6px 24px 0px rgba(6, 7, 7, 0.27);
    }
    .collapse-controls-mobile {
        display: none;
    }
    #master-plan-scene {
        display: block;
    }
    .map {
        padding: 12px 15px;
        background: transparent;
        height: auto;
        position: relative;
    }
    .expandables .image-wrap:hover:after {
        opacity: 0.3;
    }
    .expandables .image-wrap:hover .expand-icon {
        opacity: 1;
    }
    .expandables .image-wrap:hover .expand-icon:after {
        border: 10px solid rgba(255, 255, 255, 0.4);
    }
    .place-desc-image {
        width: 35%;
        display: inline-block;
    }
    .place-desc-description {
        width: 100%;
        display: inline-block;
        padding: 0 10px;
    }
    .place-desc-description .website-title {
        text-align: center;
        margin-top: 0px;
        line-height: 1em;
        margin-bottom: 0;
        font-size: 14px;
    }
    .place-desc-description .close-btn{
        top: 10px;
        right: 10px;
    }
    .close-btn {
        right: 10px;
        top: 10px;
    }
    .image-description-lifestyle {
        font-family: Bold;
        font-size: 23px;
        padding: 0 30px;
    }
    .image-description-lifestyle {
        opacity: 0;
    }
    .expandables .image-wrap:hover:after {
        opacity: 0;
    }
    .image-description-lifestyle span.website-text {
        display: block;
        width: 95%;
    }
    .expandables {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-left: 0;
        padding-right: 0;
    }
    .expandables-mobile {
        display: none !important;
    }
    .expandables .image-wrap:hover .hvr-outline-out:before {
        top: -15px;
        right: -15px;
        bottom: -15px;
        left: -15px;
    }
    .lifestyle .swiper-pagination,
    .expandables .expandables-pagination {
        margin-top: 30px;
        display: none;
    }
    .communities,
    .finishing-types {
        padding: 70px 0;
    }
    .finishing-desc {
        width: 60%;
        margin: 0 auto;
        text-align: center;
        padding: 0 40px;
        margin-bottom: 50px;
    }
    .finishing-types .community-name {
        color: #fff;
        top: 50%;
        left: 50%;
        text-align: center;
        bottom: auto;
        right: auto;
        transform: translate(-50%,-50%);
    }
    .finishing-types .community-name::after{
        left: 50%;
        transform: translateX(-50%);
        width: 20%;
        top: -20px;
    }
    .expandables .image-wrap:hover .community-name::after{
        width: 50%;
    }
    .expandables-mobile .swiper-wrapper {
        margin-left: 0;
    }
    .house-hotel {
        
        background-attachment: fixed;
        height: 100vh;
        position: relative;
        font-family: Calibri;
        font-weight: 600;
        color: #726f6d;
        font-size: 14px;
        line-height: 17px;
    }
    .navigation-buttons a {
        width: 80px;
    }
    .tatweer-misr{
        padding: 170px 0;
    }

    .getting-there-left .website-title,
    .getting-there-left .website-text {
        text-align: left;
    }
    .getting-there-text {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
    }
    #svg-animation video{
        height: 100%;
        object-fit: cover;
        position: relative!important;
        top: auto!important;
        margin-top: 0!important;
    }
}
@media (min-width: 1200px) {
    .interior-pagination {
        display: none;
    }
    
    .main-slider {
        width: 100%;
        height: 100vh !important;
    }
    .swiper-button-next span {
        left: 0px;
        top: 14px;
    }
    .swiper-button-prev span {
        position: absolute;
        right: -45px;
        top: 14px;
        font-family: Calibri;
        font-weight: 100;
        letter-spacing: 3px;
        font-size: 12px;
    }
    .slider-title {
        font-size: 47px !important;
        line-height: 44px !important;
        letter-spacing: 2px !important;
    }
    .slider-sub-title {
        font-family: Light;
        font-size: 31px;
        margin: 0;
        background: transparent;
        color: #fff;
        letter-spacing: 7px;
        animation-delay: 0.3s;
    }
    .swiper-slide .website-text {
        background: transparent;
        color: #fff;
        font-size: 15px;
        width: 69%;
        line-height: 16px;
        display: block;
    }
    .slider-text {
        position: absolute !important;
        text-align: left;
        top: 35% !important;
        left: 15% !important;
        width: 48% !important;
    }
    .slider-nav {
        color: #fff;
        display: block;
        transition: 0.4s all;
    }
    .slider-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin-top: 0px;
    }
    .slider-buttons .website-button {
        margin-right: 20px;
    }
    .slider-text {
        position: absolute;
        text-align: left;
        top: 40%;
        width: 100%;
        color: #fff;
        padding: 0 25px;
        display: none;
    }
    .slider-text p.website-text {
        animation-delay: 1s;
        line-height: 17px;
        width: 80%;
        text-align: left;
        display: inline-block;
        margin: 0;
        margin-top: 10px;
    }
    .slider-pagination {
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 8%;
        text-align: left;
        width: 40%;
        transform: translateX(-5%);
    }

    .flex-wrapper {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flexbox;
        display: -moz-flex;
        display: -o-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #page-wrap {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    /*** canvas ***/

    #canvas {
        height: 100vh;
        width: 100%;
        overflow: hidden;
        z-index: 10;
    }
    .multi-textures {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 15;
        cursor: pointer;
        font-size: 3em;
        color: white;

        height: 100vh;
    }

    .interior-exterior .website-title {
        text-align: left;
        width: 80%;
        margin-bottom: 40px;
    }
    .interior-exterior .website-title:after {
        left: 0;
        margin-left: 0;
        bottom: -42px;
        top: auto;
    }
    .interior-exterior .website-text {
        width: 80%;
        padding-top: 0;
        margin-bottom: 40px;
        text-align: left;
    }
    .interior-exterior .website-button {
        margin: 0;
    }
    .expandables .image-wrap:after {
        display: block;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        opacity: 1;
        transition: all 0.5s ease;
        z-index: 1;
    }
    .partners {
        padding: 0px;
        overflow: hidden;
    }
    
}
@media (min-width: 576px) and (max-width: 670px){
    .container{
        max-width: 100%;
    }
    .lifestyle .swiper-wrapper{
        margin-left: 0;
    }
}

@media(width: 1024px){
    body{
        overflow-x: hidden;
    }
}
@media(min-width: 1400px){
    .community-image .community-name{
        font-size: 21px;
    }
    .interior-exterior{
        padding: 120px 0;
    }
    .tatweer-misr{
        padding: 180px 0;
    }
    .expandables .image-wrap{
        height: 80vh;
    }
    .lifestyle-section{
        height: 80vh;
    }
    .communities, .finishing-types{
        padding: 120px 0!important;
    }
    .navigation-buttons a{
        width: 120px;
    }
}
@media(min-width: 1900px){
    .community-image{
        height: 800px;
    }
    .interior-exterior{
        padding: 180px 0;
    }
    .communities, .finishing-types{
        padding: 180px 0!important;
    }
    .communities{
        padding-bottom: 0!important;
    }
    .collapse-controls button{
        font-size: 23px;
    }
    .image-description-lifestyle{
        font-size: 32px;
    }
    .swiper-slide .website-text{
        font-size: 23px;
        line-height: 23px;
    }
    #svg-animation{
        min-height: 800px;
    }
}

/*------------------------------------------------SAFARI CSS-------------------------------------------------------*/


@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
    .house-hotel { 
        background-attachment:initial;
        background-size: cover;
    }
}
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    .expandables a{
        display: block;
        width: 100%;
        height: 100%;
    }
    .finishing-types .expandables2 .image-wrap{
        width: 100%;
    }
 }