@import url(https://fonts.googleapis.com/css?family=Roboto:300,400);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
/*Root*/
:root {
    --primary-color: #021832;
    --secondary-color: #a3a190;
    --bg-color: #f4f4f4;
    --bg-white: #fff;
    --bg-black: #000;
    --smoky-black-1: hsla(40, 12%, 5%, 1);
    --primary-font: "Poppins", sans-serif;
    --secondary-font: "Oswald", sans-serif;
    --primary-text: #021832;
    --secondary-text: white;
    --text-white: #fff;
    --text-black: #151515;
    --gold: #867051;
    --light-gold: #bd9b71;
    --black: #20252d;
    --style-font: "Cormorant Garamond", serif;
}
html,body {width: 100% !important;height: 100% !important;margin: 0px !important;padding: 0px !important;overflow-x: hidden !important;}
::selection {color: #a3a190;}
::-webkit-scrollbar {width: 15px;}
::-webkit-scrollbar-track {background-color: var(--text-white);}
::-webkit-scrollbar-thumb {background: var(--text-black);}
* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Playfair Display", serif;}
a {color: inherit;text-decoration: none;}
section {padding: 2.511rem 0;}
.row {display: flex;flex-wrap: wrap;}
.col {flex: 1;}
li {list-style: none;padding: 0px;margin: 0px;}
/*NavBar*/
header .navbar {background-color: rgba(0, 0, 0, 0.8);}
header .navbar .navbar-nav li .nav-link {display: block;width: fit-content;color: #E0E7E9;font-weight: 700;border: none;}
header .navbar .navbar-nav li .nav-link:hover {color: #E0E7E9;opacity: .8;}
header .navbar ul li .nav-link.active {color: #E0E7E9;}
header .navbar .link-btn {margin-left: auto;margin-right: auto;}
.hover-underline {position: relative;max-width: max-content;}
.hover-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-block: 1px solid #b5986f;
    transform: scaleX(0.2);
    opacity: 0;
    transition: var(--transition-2);
}
.hover-underline:is(:hover, :focus-visible)::after {transform: scaleX(1);opacity: 1;}
.bg-images {
    background: rgba(0, 0, 0, 0.8);
    background-position: center;
    background-size: cover;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}
.container .link-btn,.link-btn {
    text-align: center;
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #fff;
    cursor: pointer;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    color: rgb(255, 147, 79);
}
.hover-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-block: 1px solid rgb(255, 149, 0);
    transform: scaleX(0.2);
    opacity: 0;
    transition: var(--transition-2);
}
.link-btn::before {
    content: "";
    position: absolute;
    height: 150px;
    width: 50px;
    background: #fff;
    right: -40px;
    top: -40px;
    transform: rotate(37deg);
    transition: all 0.3s;
    opacity: 0.3;
}
.link-btn:hover:before {right: 105%;}
/*Carousel*/
.carousel-item {
    transition: opacity 0.5s ease-in-out;
    position: relative;
    display: none;
    float: left;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.carousel-inner {height: 80vh;width: 100%;overflow: hidden;position: relative;}
.carousel {display: flex;transition: transform 0.5s ease;}
.carousel img {width: 100%;height: 100%;object-fit: cover;}
.hd-text {text-decoration: none;color: white;padding-bottom: 5px !important;font-weight: 600 !important;}
.hd-text:hover {color: rgb(114, 58, 22);transform: translateY(-10px);text-decoration: none;}
.btn2 {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid #fefefe;
    text-transform: uppercase;
    color: #fefefe;
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    transition: 0.3s;
}
.btn2::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% - -2px);
    background-color: #e19e0f;
    transition: 0.3s ease-out;
    transform: scaleY(1);
}
.btn2::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% - 50px);
    background-color: #e19e0f;
    transition: 0.3s ease-out;
    transform: scaleY(1);
}
.btn2:hover::before {transform: translateY(-25px);height: 0;}
.btn2:hover::after {transform: scaleX(0);transition-delay: 0.15s;}
.btn2:hover {border: 2px solid #fefefe;}
.btn2 span {position: relative;z-index: 3;}
.btn3 {
    position: relative;
    transition: color 0.48s 0s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    padding: 12px 24px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    border: none;
    cursor: pointer;
    color: #ffae00;
    overflow: hidden;
    text-decoration: none;
    background-color: transparent;
}
.btn3 span {font-size: 1.2rem;font-weight: 700;line-height: 1.6;}
.btn3::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0%;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 100%;
    background: #ffae00;
    transition: transform 0.48s 0.4s cubic-bezier(0.23, 1, 0.32, 1),
        width 0.48s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn3:hover {color: #ffffff;transition: color 0.48s 0.24s cubic-bezier(0.23, 1, 0.32, 1),transform 0.48s 0.1s cubic-bezier(0.23, 1, 0.32, 1);}
.btn3:hover::before {
    transform: translateY(-50%) scaleY(1);
    width: 100%;
    transition: transform 0.48s 0.1s cubic-bezier(0.23, 1, 0.32, 1),
        width 0.48s 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn3:active {transform: scale(0.95);}
button {text-decoration: none;border: none;background-color: transparent;}
/*Sec2*/
.img-holder {height: 100%;position: relative;}
.img-holder img {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.section-title>span {
    font-size: 18px;
    color: #7E7E7E;
    font-family: 'PT Serif', sans-serif;
    font-style: italic;
    line-height: 21px;
    margin-bottom: 15px;
    display: inline-block;
}
.section-title h2 {
    font-family: 'Raleway', sans-serif;
    color: #282828;
    font-size: 22px;
    text-transform: uppercase;
    line-height: 22px;
    font-weight: 800;
}
.sec2spn {
    margin: 0;
    padding: 0 0 25px 0;
    color: #e4a112;
    font-weight: 800;
    line-height: 150%;
    font-family: "Cormorant", serif;
    font-size: 40px;
}
#about-section p {font-size: 15px;line-height: 26px;color: #797979;margin-bottom: 15px}
#about-section p:last-child {margin-bottom: 0;}
.room-amount {margin-top: 55px;padding-top: 50px;border-top: 1px solid #000000;font-size: 0;}
.room-amount li {display: inline-block;width: 25%;}
.room-amount li i:before {margin: 0;color: #FFAE00;font-size: 54px;}
.room-amount li h4 {
    margin-top: 8px;
    margin-bottom: 4px;
    text-transform: uppercase;
    color: #282828;
    font-size: 15px;
    font-weight: bold;
    line-height: 38px;
}
.room-amount li span {font-family: 'PT Serif', sans-serif;font-size: 32px;line-height: 38px;font-style: italic;}
/*Property*/
.general-row .wpb_column.col-md-12 {padding-left: 0px;padding-right: 0px;}
#property-highlight {background: #222838;}
#property-highlight .section-title {margin-bottom: 40px;}
#property-highlight .section-title h2 {color: #FFFFFF;}
#property-highlight .property-highlight-text {padding-top: 40px;padding-left: 75px;}
#property-highlight .single-property-highlight {margin-bottom: 50px;}
#property-highlight .single-property-highlight h3 {color: #FFAE00;font-size: 15px;font-weight: 600;text-transform: uppercase;margin-bottom: 13px;}
#property-highlight .single-property-highlight p {color: #9B9B9B;margin-bottom: 0;}
/*Sec4*/
#section4 {object-fit: cover;background-size: cover !important;background-position: center !important;background-attachment: fixed !important;width: 100%;height: 40vh;}
.background-tint {background-color: rgba(95, 76, 76, 0.9) !important;background-blend-mode: multiply;}
/*Gallery-Index*/
.photo-gallery {color: #313437;background-color: #fff;}
#gallery {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;}
.gallary img {width: 270px;}
.flex1 {display: flex;justify-content: space-between;}
.heading {position: relative;}
.heading::after {position: absolute;top: 0;left: 0;content: '';width: 100px;height: 4px;background: #C1B086;}
.gallary img {width: 270px;}
.owl-item {width: 207.667px;margin-right: 10px}
.owl-dots {height: 0px;}
.owl-carousel .owl-item img {width: 250px;height: 250px;}
.owl-carousel .owl-stage {gap: 75px;display: flex;}
.owl-next,.owl-prev {display: none;}
/*Contact*/
.textin {
    flex: 1;
    top: 0;
    bottom: auto;
    font-size: 3.75rem;
    line-height: 4.25rem;
    font-weight: 700;
    color: #f4ac45;
    text-transform: uppercase;
    text-align: center;
}
.service-card {
    background-color: rgb(99, 164, 190);
    border-radius: 40px;
    padding: 50px;
    width: 32%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    position: relative;
}
.service-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: 8px;
    z-index: -1;
}
.service-card .card-icon {
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 1 / 1;
    max-width: 165px;
    display: grid;
    place-content: center;
    margin-inline: auto;
    transition: var(--transition-1);
    margin-bottom: 10px;
}
#CContact {margin-top: 20px;margin-bottom: 20px;}
.google-maps iframe {width: 100%;height: 500px;border: none;}
.fa-location-dot:before,.fa-map-marker-alt:before {content: "\f3c5";}
/*Footer*/
.footer_wrapper {background: rgb(34, 40, 56) !important;padding: 5% 0 0 0 !important;}
.ft-text {text-decoration: none;color: white;padding-bottom: 5px !important;font-weight: 600 !important;}
.ft-text:hover {color: rgba(255, 147, 79);transform: translateY(-10px);text-decoration: none;}
.copyright {font-size: medium;color: rgb(255, 255, 255);text-align: center;padding-bottom: 0 !important;}
/*Banner*/
#banner {background-size: cover;padding-top: 0px;margin-top: 0px;position: relative;height: 100%;padding-bottom: 0px;height: 80vh;}
#banner .container {height: 100%;}
#banner .porperty-details {width: 300px;height: 100%;display: block;background: rgba(232, 162, 12, 0.95);}
#banner .porperty-details .border {position: relative;z-index: 1;width: 100%;height: 100%;padding-bottom: 235px;}
#banner .porperty-details .border:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 6px;
    right: 6px;
    bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    z-index: -1;
}
#banner .porperty-details .logo {padding-top: 65px;padding-bottom: 30px;text-align: center;}
#banner .porperty-details .address {padding: 30px 0px;margin: 0 30px;border-top: 1px solid rgba(255, 255, 255, 0.4);border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
#banner .porperty-details .address p {font-size: 16px;line-height: 26px;color: #FFFFFF;font-size: 20px;font-weight: 600;}
#banner .porperty-details .options {padding: 20px 0px;margin: 0 30px;border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
#banner .porperty-details .options ul li {line-height: 44px;color: #fff;text-transform: uppercase;font-size: 18px;font-weight: bold;}
.bottom-section {padding: 50px;width: 100%;max-width: 1200px;margin: 0 auto;}
.options {display: flex;justify-content: center;align-items: center;padding-bottom: 25px;}
.filter-button {
    font-size: 20px;
    border: 1px solid #000000;
    text-align: center;
    color: #000000;
    margin-bottom: 30px;
    margin: 0 10px;
    border-radius: 10px;
    background-color: #e6e6e6 !important;
}
.filter-button:hover {
    font-size: 20px;
    text-align: center;
    border: 1px solid #000000;
    border-radius: 10px;
    text-align: center;
    color: #333 !important;
    background-color: rgb(250, 250, 230) !important;
    border-color: #adadad !important;
}
.gallery_product img {max-width: 100%;max-height: 100%;width: 340px;height: 230px;}
.gallery_product {overflow: hidden;}
.gallery_product img:hover {transform: scale(1.05);}
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: auto;
}
.modal-content {margin: auto;display: block;max-width: 90%;max-height: 90%;background: transparent;}
.close {color: #fff;position: absolute;top: 15px;right: 35px;font-size: 40px;font-weight: bold;transition: 0.3s;}
.close:hover,.close:focus {color: #bbb;text-decoration: none;cursor: pointer;}
.prev,.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}
.prev {left: 0;}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover,.next:hover {background-color: rgba(0, 0, 0, 0.8);}
/*Rooms*/
.carousel-itemimg {transition: transform 0.6s ease;border-radius: 10px;height: 400px;width: 100%;}
.carousel-inner0 {height: 70vh;width: 100%;overflow: hidden;position: relative;}
.button0 {
    padding: 1em 2em;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 5px;
    text-transform: uppercase;
    cursor: pointer;
    color: #000000;
    transition: all 1000ms;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    border: 2px solid #000000;
}
.btt {color: #ff934f !important;border: 2px solid #ff934f !important;}
.button0:hover {
    color: #ffffff !important;
    transform: scale(1.1) !important;
    outline: 2px solid #ff934f !important;
    box-shadow: 4px 5px 17px -4px #ff934f !important;
    border: none !important;
}
.button0::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #ff934f;
    transform: skewX(45deg);
    z-index: -1;
    transition: width 1000ms;
}
.button0:hover::before {width: 250%;}
.snip1533 {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.149);
    color: #9e9e9e;
    display: inline-block;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    margin: 35px 10px 10px;
    max-width: 310px;
    min-width: 250px;
    position: relative;
    text-align: center;
    width: 100%;
    background-color: #ffffff;
    border-radius: 5px;
    border-top: 5px solid black;
}
.snip1533 *,.snip1533 *:before {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.1s ease-out;transition: all 0.1s ease-out;}
.snip1533 figcaption {padding: 13% 10% 12%;}
.snip1533 figcaption:before {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    color: black;
    content: "\f10e";
    font-family: 'FontAwesome';
    font-size: 32px;
    font-style: normal;
    left: 50%;
    line-height: 60px;
    position: absolute;
    top: -30px;
    width: 60px;
}
.snip1533 h3 {color: #3c3c3c;font-size: 20px;font-weight: 300;line-height: 24px;margin: 10px 0 5px;}
.snip1533 h4 {font-weight: 400;margin: 0;}
.slider-0,.slider-1 {position: relative;overflow: hidden;max-width: 100%;}
.slides-0,.slides-1 {display: flex;transition: transform 0.5s ease;}
.slide-0,.slide-1 {flex: 0 0 auto;width: 100%;}
.slide-0 img,.slide-1 img { width: 100%;height: 100%;object-fit: cover;max-height: 450px;border-radius: 15px;
}
.prev-0,.prev-1 {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #fff;
    font-size: 24px; 
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1; 
}
.next-0,.next-1 {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #fff;
    font-size: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1;
}
.lineee {font-size: 20px;}
@media (max-width: 767px) {.photo-gallery .photos {padding-bottom: 20px;}.photo-gallery .item {padding-bottom: 30px;}}
@media (max-width: 800px) {#gallery {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}}
@media (max-width: 600px) {#gallery,.container,.service-card,.row0 {-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}}
@media screen and (max-width: 1200px) {
    .lineee{display: none;}.container,.service-card,.row0 {max-width: 1140px;width: 100%;display: grid;}
    #sectionlst {display: none;}}
@media screen and (max-width: 992px) {.container,.service-card,.row0 {max-width: 960px;}}
@media screen and (max-width: 768px) {.container,.service-card,.row0 {max-width: 720px;}}
@media screen and (max-width: 576px) {.container,.service-card,.row0 {max-width: 550px;}}
@media screen and (max-width: 600px) {.col,.service-card,.row0 {flex: 100%;width: 100%;display: grid !important;}}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #property-highlight .property-highlight-text {padding-left: 15px;padding-bottom: 30px;}
    #luxury-villa p {margin-top: 30px;}}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    #luxury-villa p {margin-top: 25px;}
    #property-highlight.about-page {padding-bottom: 50px;}
    #property-highlight .property-highlight-text {padding-left: 30px;}}
@media only screen and (max-width: 767px) {
    .slides-0,.slide-1 {white-space: nowrap;}
    .slide-0,.slide-1 {display: inline-block;width: 100%;vertical-align: top;}
    .section-title p br {display: none;}
    #banner .porperty-details {width: 275px;}
    #about-section .about-text {margin-top: 50px;}
    .room-amount li {display: block;width: 85%;margin: auto;margin-bottom: 40px;}
    #property-highlight .property-highlight-text {padding-left: 15px;}
    .footer-link-d,ul.list-unstyled li,ul.p-0.footer-ul li {text-align: center;}}
@media screen and (max-width: 850px) {.copyright {margin-top: 10px;}}
@media (max-width: 1000px) {.carousel-inner0 {height: 45vh;padding-top: 20px;}}
@media only screen and (min-width: 992px) {header .navbar {margin: 0;margin-left: auto;}}