* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato-Regular';

}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'optima';

}

a {
    text-decoration: none;
}

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

@font-face {
    font-family: 'Lato-Bold';
    src: url('../fonts/emaar/Lato-Bold.woff2') format('woff2'),
        url('../fonts/emaar/Lato-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('../fonts/emaar/Lato-Regular.woff2') format('woff2'),
        url('../fonts/emaar/Lato-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato-Light';
    src: url('../fonts/emaar/Lato-Light.woff2') format('woff2'),
        url('../fonts/emaar/Lato-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




.margin_top {
    margin-top: 50px;
}

.padding_top_bottom {
    padding: 50px 0px;
}

.padding_top {
    padding-top: 50px;
}



.light_grey_bg {
    background-color: #fbfbfb;
    background-image: url(../images/emaar/emaar-creek-haven/grey-bg-pattern.webp);
    background-position: center;
    background-size: cover;
}

.blue_bg_pattern {
    background-color: #fbfbfb;
    background-image: url(../images/emaar/emaar-creek-haven/blue-bg-pattern.webp);
    background-position: center;
    background-size: cover;
}

.bg_blue_btn {
    background-color: #071c35;
    border: 1px solid #071c35;
    color: #ffffff;
}

.bg_blue_btn:hover {
    border: 1px solid #071c35;
    color: #071c35;
    background-color: transparent;
}

.white_bg_btn {
    border: 1px solid #ffffff;
    color: #071c35;
    background-color: #ffffff;
}

.white_bg_btn:hover {
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.white_border_btn {
    border: 1px solid #ffffff;
    color: #ffffff;

}

.white_border_btn:hover {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    color: #000000;
}

li {
    list-style: none;
}

ul {
    padding: 0;
    margin: 0;
}


.emaar_heading h2 {
    font-size: 35px;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;
}

.emaar_heading h2.text-white::after {
    display: block;
    content: "";
    height: 1px;
    width: 180px;
    background-color: #9D9D9C;

    margin-left: 10px;
}

.emaar_heading h2::after {
    display: block;
    content: "";
    height: 1px;
    width: 180px;
    background-color: #9D9D9C;

    margin-left: 10px;
}


.desktop_banner {
    display: block;
}

.mobile_banner {
    display: none;
}

.desktop_map {
    display: block;
}

.mobile_map {
    display: none;
}

.common_btn a,
.submit-btn {
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    border-radius: 0;
}


a.whatsapp_float i {
    display: none;
}

/* header css start  */

header .logo>a>img {
    filter: none;
}

header.header.sticky .logo>a>img {
    filter: brightness(2) invert(2);
}

header .mobile-number a img {
    display: block;
}

header.header {
    padding: 5px 0px;
}

header.header.sticky {
    padding: 5px 0px;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

header .mobile-number span {
    font-family: 'Lato-Bold';
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-weight: 500;
}

header .logo>a {
    max-width: 180px;
}

/* header css end  */


/* banner css start  */

section.emaar_banner {
    position: relative;
}

section.emaar_banner::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #0000007a;
}

section.emaar_banner .properties_details {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;


}

section.emaar_banner .properties_details .properties_details_heading {
    position: relative;

}
section.emaar_banner .properties_details h1 br{
    display: none;
}

section.emaar_banner .emaar_price_wrp {
    background-color: #071c35b2;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section.emaar_banner .emaar_price_wrp small {
    color: #ffffff;
    text-transform: uppercase;
    position: relative;
    display: flex;
    align-items: center;

}

section.emaar_banner .emaar_price_wrp small::after {
    display: block;
    content: "";
    height: 1px;
    width: 180px;
    background-color: #9D9D9C;

    margin-left: 10px;
}

section.emaar_banner .properties_details h1 {
    margin-bottom: 0px;
    color: #ffffff;
    position: relative;
    font-size: 30px;
}

section.emaar_banner .properties_details p {
    color: #ffffff;
    font-size: 25px;
    font-family: 'optima';
    margin-bottom: 0px;
}



/* banner css end  */

/* Emaar properties details section css start  */

section.emaar_properties_details .row {
    row-gap: 20px;
}

section.emaar_properties_details .emaar_wrp {
    background-color: #fff;
    padding: 15px;
    display: flex;
    align-items: center;
    column-gap: 10px;

}

section.emaar_properties_details .emaar_icon img {
    width: 35px;
}


section.emaar_properties_details .emaar_text {
    line-height: 1;
}

section.emaar_properties_details .emaar_text p {
    margin-bottom: 0;
    margin-top: 3px;
    color: #071c35;
    font-family: 'Lato-Bold';
}



section.emaar_properties_details .emaar_text small {

    font-size: 12px;
    color: #505050;

}

section.emaar_properties_details .brochure_img {
    margin-bottom: 15px;
}

/* Emaar properties details section css end  */


/* Highlights section css start  */

section.highlights .row {
    row-gap: 20px;
}

section.highlights .highlight_heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff2b;
    padding: 10px;
}

section.highlights .highlight_heading h3 {
    color: #ffffff;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 0px;
}

section.highlights .highlight_heading img {
    width: 70px;
}

section.highlights .highlight_wrp {
    border: 1px solid #ffffff;
}



section.highlights .highlight_pera p {
    margin-bottom: 0;
    color: #ffffff;
    padding: 10px;
}


/* Highlights section css end  */


/* Gallery section css start  */

section.gallery {
    position: relative;
}

section.gallery::before {
    position: absolute;
    content: "";
    width: 70%;
    height: 70%;
    background-image: url(../images/emaar/emaar-creek-haven/grey-bg-pattern.webp);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    z-index: 0;
}

section.gallery .row {
    row-gap: 20px;
    position: relative;
    z-index: 1;
}

/* Gallery section css end  */

/* Price list section css start  */

section.pricelist .price_wrp {
    background-color: #fbfbfb;
    padding: 25px;
}

section.pricelist .price_wrp .price_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

section.pricelist .price_wrp .price_text p {
    margin-bottom: 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

section.pricelist .price_wrp .price_text p:last-child {
    font-family: 'Lato-Bold';
    color: #cdab6e;
}

section.pricelist .floor_image img {
    filter: blur(3px);
}

section.pricelist .floor_image {
    margin-bottom: 10px;
    margin-top: 20px;
}

/* Price list section css end  */

/* Amenitirs section css start  */

section.amenities {
    position: relative;
}

section.amenities::after {
    position: absolute;
    content: "";
    width: 30%;
    height: 100%;
    right: 0;
    top: 0;
    background-image: url(../images/emaar/emaar-creek-haven/blue-bg-pattern.webp);
    background-position: right;
    background-size: cover;
}

section.amenities .amenities_wrp .row {
    row-gap: 20px;
}

section.amenities .amenities_main {
    background-color: #ffffff;
    padding: 15px;
    text-align: center;
}

section.amenities .amenities_icon img {
    width: 60px;
}

section.amenities .amenities_text p {
    margin-bottom: 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
}

section.amenities .amenities_big_image {
    position: relative;
    z-index: 1;
}

/* Amenities section css end  */


/* Location Advantage section css start  */

section.location_advantge .location_text {
    display: flex;
    align-items: center;
    column-gap: 10px;

}

section.location_advantge .location_bottom_wrp {
    padding: 30px;
    border-top: 1px solid #cacaca;
}

section.location_advantge .location_bottom_wrp .row {
    row-gap: 20px;
}

section.location_advantge .location_text h3 {
    font-size: 45px;
    color: #cdab6e;
    margin-bottom: 0px;
    margin-top: 5px;
}

section.location_advantge .location_right_content {
    line-height: 1;
}

section.location_advantge .location_right_content small {
    font-family: 'Lato-Light';
}

section.location_advantge .location_right_content p {
    margin-top: 3px;
    font-family: 'Lato-Bold';
    margin-bottom: 0px;
}

section.location_advantge .location_wrp {
    border: 1px solid #cacaca;
}

/* Location Advantage section css end  */


/* about Emaar section css start  */


section.about_emaar .about_pera p {
    margin-bottom: 0px;
}

section.about_emaar .emaar_logo img {
    width: 100px;
}

/* about Emaar section css end  */


/* project video section css start  */

section.project_video .project_video_wrp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.project_video .project_video_wrp::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00000061;
}

section.project_video .project_video_wrp .emaar_heading {
    position: absolute;
    z-index: 1;

}

section.project_video .project_video_wrp .emaar_heading h2 {
    color: #ffffff;
    margin-bottom: 10px;
    display: none;
}

section.project_video .play_video img {
    width: 50px;
}

/* project video section css end  */

/* Enquire form section css start  */

section.enquire_form .enquire-div .input-group .form-control {
    border: 0;
    padding: 12px 15px;
    background-color: #ffffff;
    border-radius: 0;
    border: 1px solid #ffffff;
}

section.enquire_form .enquire-div .input-group .form-control:focus {
    box-shadow: none;
    border: 1px solid #071c35;
}

/* Enquire form section css end  */

/* footer css start  */

footer {
    background-color: #ffffff;
}

footer p {
    color: #505050;
}

footer ul li a {
    color: #505050 !important;
}

/* footer css end  */




/* Emaar modal modal css start  */

.emaar_modal .modal-content {
    border-radius: 0;
}

.emaar_modal .input-group .form-control {
    background-color: #ffffff;
    border: none;
    color: #000000;
    border-radius: 0;
    border: 1px solid #ffffff;
    font-size: 16px;
    font-family: 'Lato-Regular';

}

.emaar_modal .input-group .form-control:focus {
    border: 1px solid #071c35;
    box-shadow: none;
}

.emaar_modal .iti .iti__selected-dial-code {
    color: #000000;
}

.emaar_modal .modal-header .btn-close {
    filter: brightness(0) invert(0);
}

.emaar_modal .modal-body form {
    padding: 0px;
    margin-top: 20px;
}

.emaar_modal .modal-header {
    padding: 0px;
}

.emaar_modal .modal-title::after {
    position: absolute;
    content: "";
    width: 2px;
    height: 100%;
    background-color: #8C2E47;
    left: 0;
    top: 0;
}

.emaar_modal .modal-title {
    font-family: 'optima';
    text-transform: capitalize;
    color: #000000;
    text-align: left;
    position: relative;
    padding-left: 10px;
}

.emaar_modal .modal-form h3 {
    text-transform: capitalize;
}

.side-enquire-now .btn {
    background-color: #071c35;
    color: #fff;
    border-radius: 0;
}

.emaar_modal .modal-form h3 img {
    display: none;
}

/* Emaar modal css end  */





/* Flipcard box section css start  */

section.flipcard .flipcard_image {
    position: relative;
}

section.flipcard .flipcard_image:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    background: linear-gradient(0deg, black, transparent);
}

section.flipcard .flipcard_under_content {
    position: absolute;
    z-index: 1;
    bottom: 10px;
    padding: 0px 10px;
}

section.flipcard .flipcard_fav img {
    width: 40px;
}

section.flipcard .flipcard_heading h3 {
    color: #ffffff;
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 0;
     font-family: 'optima';
}
section.flipcard .flipcard_heading p{
    margin-bottom: 0px;
    color: #ffffff;
}

section.flipcard .front_properties_details {
    background-color: #f8f7f7;
    padding: 15px;
}

section.flipcard .properties_wrp_flex {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 15px;
}

section.flipcard .properties_wrp_flex:last-child {
    margin-bottom: 0px;
}

section.flipcard .properties_icons img {
    width: 20px;
}

section.flipcard .properties_flex_text p {
    margin-bottom: 0;
    
}

section.flipcard .properties_wrp_flex .common_btn a {
    padding: 6px 20px;
    font-size: 12px;
}

section.flipcard .backcard .flipcard_heading h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #064a69;
}


section.flipcard .main_card {
    position: relative;
    width: 100%;

}

section.flipcard .main_btn {
    position: absolute;
    bottom: 20px;
}


section.flipcard .main_card .flipcard_front,
section.flipcard .main_card .backcard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform 0.7s ease;
    border-radius: 12px;
    overflow: hidden;
}


section.flipcard .main_card .flipcard_front {
    background-color: #fff;
    transform: rotateY(0deg);
    z-index: 1;
    position: static;
}


section.flipcard .main_card .backcard {
    background-color: #f8f7f7;
    padding: 15px;
    transform: rotateY(180deg);
    z-index: 1;
    height: 100%;
    background-image: url(../images/damac-properties/lagoons/lagoon-view-bg.webp);
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
}


section.flipcard .main_card.flipped .flipcard_front {
    transform: rotateY(-180deg);
    z-index: 1;
}

section.flipcard .main_card.flipped .backcard {
    transform: rotateY(0deg);
    z-index: 1;
}

section.flipcard .studio_box {
    position: absolute;
    top: 10px;
    right: 10px;
}

section.flipcard .studio_box p {
    background-color: #064a69;
    padding: 6px 20px;
    color: #fff;
    border-radius: 50px;
    text-transform: uppercase;
   
    font-size: 12px;
}

/* Flipcard box section css end  */