/*##############################################   EDITABLE   ##############################################*/
.footer-heading { font-size: 1.2rem; font-weight:600; }

/* ขนาด nav */
.nav-link { font-size: 1em; }

/* text บนรูป ล่าง nav */
.hero-text { font-size: 2.5em; }

/* หัว register */
.register-form h1 { font-size: 2rem; }

/* ล่างหัว register */
.register-form p { font-size: 1.2rem; }


/* Text ของ Banner showcase หน้า Home */
.banner-section .slide-item h2 { font-size: 60px; margin-bottom: 22px; }
/* ปุ่ม */
.btn-title { font-size: 18px; }
@media (max-width: 500px) {

    .content {
        width: 100%;
    }
    .banner-section .slide-item h2 { 
        /* ขนาดเวลาอยู๋ในมือถือ */
        font-size: 40px; 
    }
    .btn-box {
        /* ขนาดเวลาอยู๋ในมือถือ */
        font-size: 22px;
    }
}


/* หัว attraction */
.attraction-content h1 { font-size: 2.8rem; font-weight: bold; }

/* ข้างใน accordion */
.accordion-body { font-size: 1.2em; }

/* ขนาดปุ่ม accordion */
.accordion-button { font-size: 0.7em; }

/* หัว location */
.location-header { font-size: 2.8em; font-weight: bold; }



/* type a */
.type-a { font-size: 3.5rem; }

.unit {padding-top: 6.5%;}

/* unit number */
.unit-number { font-size: 2.2rem; }

/* unitsize */
.unit-size { font-size: 3rem; }

/* คำอธิบาย type a */
.detail-paragraph { font-size: 1.2rem; }
@media (width:1920px) { .detail-paragraph{ width: 670px; } }

/* an ideal place */
.large-caption {font-size: 4rem;}

/* for modern living */
.medium-caption {font-size: 2.8rem;}

/* provide easy access */
.small-caption {font-size: 1.2rem;}




/* laptop ลงไป */
@media (max-width: 1366px) {
    .register-form h1 { font-size: 2em; }
    .register-form p { font-size: 1.2em; }
}


/* สำหรับ ipad ลงไป */
@media (max-width: 992px) {
    .attraction-content h1 { font-size: 2em; }
    .accordion-body h1 { font-size: 1.5em; }

    .location-header { font-size: 2em; }

    /* .unit-number { font-size: 2em; } */
    .unit-size { font-size: 1.5em; }
    .count-text { padding-left: 5%; font-size: 2.8rem; }
    .unit { width: 200px; padding-top: 3%; padding-left: 2%; font-size: 1.5rem; }
}


/* สำหรับมือถือเท่านั้น */
@media (max-width: 500px) { 
    .hero-text { font-size: 1.6em; } 
    .register-form h1 { font-size: 2em; }
    .register-form p { font-size: 1em; margin-bottom: 30px; }
    .register-form button { font-size: 1em; }
    .large-caption {font-size: 3rem;}
    .medium-caption {font-size: 2rem;}
    .small-caption {font-size: 1rem;}
    .unit.sq-m {
        position: absolute;
        left: 46%;
    }
}

@media (max-width: 375px) {
    .ideal-text { left: 4% !important; }
    .unit.sq-m { left: 54%; }
}

@media (max-width: 320px) {
    .ideal-text { right: 0 !important; }
    .large-caption { font-size: 2.5em; }
    .medium-caption { font-size: 1.8em; }
    .unit.sq-m { left: 67.5%; }
}
/*##############################################   EDITABLE   ##############################################*/









/*##############################################   GLOBAL   ##############################################*/
*, *:after, *:before {border: none;}
body { margin: 0; padding: 0; font: 17px 'Playfair Display', serif; background-color: #0B6E69; overflow-x: hidden; }
a { color: white; text-decoration: none; }
/* text สีเหลือง */
.text-gold { color: #FDD426 !important; }
/* text สีเหลืองเข้ม */
.text-brown-gold { color: #D2A54B;}
/* สีทอง gradient */
.golden { background: linear-gradient(90deg, #fdf09c 0%, #b07e1b 33%, #fdf09c 66%, #b07e1b 100%); }
/* สีทอง gradient 45 องศา */
.golden-45deg { background-image: linear-gradient(135deg, #b07e1b 0%, #fdf09c 100%); }
/* fit รูปให้เต็ม div */
.img-fit { width: 100%; height: 100%; object-fit: cover; }
/* คลิ๊ก input แล้ว text หาย */
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 8 and older ;) */
/* คลิ๊ก textarea แล้ว text หาย */
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
textarea:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 8 and older ;) */
/*##############################################   END GLOBAL   ##############################################*/










/*##############################################   HOME   ##############################################*/

/* 
====================================================================
		Pop Up
====================================================================
*/
.pop-up {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #F0F2F1;
    background-color: #06534e;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9;
    transition: 0.3s ease-in-out;
}
.fa-message {
    font-size: 1.2em;
}


.pop-up-link {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #245752;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.25s ease-in-out;
}
.pop-up-link.cancel {
    width: 20px;
    height: 20px;
    font-size: 0.8em;
    text-align: center;
    color: white;
    background-color: #0f3b39;
    position: fixed;
    bottom: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 10;
    transition: 0.15s ease-in-out;
}
.pop-up-link.line {
    padding-top: 2px;
    color: white;
    background-color: #06C755;
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transform: translateY(0px);
    z-index: 8;
    transition: 0.35s ease-in-out;
}
.pop-up-link.messenger {
    color: white;
    background-color: #0078FF;
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transform: translateY(0px);
    z-index: 8;
    transition: 0.35s ease-in-out;
}
.pop-up-link.line img {
    width: 25px;
    height: auto;
}
.pop-up-link.messenger img {
    width: 25px;
    height: auto;
}
.pop-up-link.cancel.active {
    visibility: visible;
    opacity: 1;
}
.pop-up-link.line.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(-65px);
}
.pop-up-link.messenger.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(-130px);
}
/* 
====================================================================
		END Pop Up
====================================================================
*/




/* 
====================================================================
		Nav Section
====================================================================
 */

/* กัน animation เด้ง */
.wrapper {
    position:relative;
	margin:0 auto;
	width:100%;
	z-index: 10;
	overflow: hidden;
}

/* ปรับ ham-burger */
/* .navbar-toggler {
    font-size: 3rem;
    color: white;
} */
.navbar-toggler:focus, .navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

/* set ความสูง logo */
.nav-logo
{
    width: auto;
    height: 15vh;
}
/* เปลี่ยนสี nav ของ bootstrap */
.nav-link 
{
    color: white; 
    margin-left: 30px; 
    position: relative; 
}
/* hover แล้วสีเหลือง */
.nav-link:hover
{
    color: #FDD426;
}
/* ทำเส้น hover แต่ยังไม่มี width (เฉพาะ text)*/
.nav-hoverline::before 
{
    content: "";
    width: 0;
    height: 4px;
    position: absolute;
    left: 0;
    bottom: -20%;
    background-image: linear-gradient(90deg, #fdf09c 0%, #b07e1b 33%, #fdf09c 66%, #b07e1b 100%);
    transition: 0.5s ease;
    z-index: 1;
}
/* hover แล้ว width ค่อยมา */
.nav-hoverline:hover::before
{
    width: 100%;
}




.lang {
    display: flex;
    align-items: center;
    height: auto;
    padding: .5rem;
}
.lang p {
    color: white;
}
.lang a{
    height: auto;
    color: white;
    transition: 0.35s ease-in-out;
}
.lang a:hover {
    color: #FDD426;
}

.en {
    display: block;
    visibility: visible;
    opacity: 1;
    width: 100%;
    left: 0;
    transition: 0.35s ease-in-out;
}
.en.enlarge {
    display: none;
    visibility: hidden;
    opacity: 0;
    width: 0;
    right: 0;
}
.english {
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: 0.35s ease-in-out; 
}
.english.active {
    display: block;
    visibility: visible;
    opacity: 1;
}
.lang div {
    display: none;
}



.all-lang {
    width: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    right: -250px;
    visibility: hidden;
    opacity: 0;
    /* background-color: rgba(0, 0, 0, 0.25); */
    padding: 0;
    transition: 0.35s ease-in-out;
}
.all-lang a{
    height: auto;
    color: white;
    transition: 0.35s ease-in-out;
}
.all-lang a:hover {
    color: #FDD426;
}
.all-lang.active {
    width: 250px;
    visibility: visible;
    opacity: 1;
    padding: 5px 15px;
}


.moving-nav {
    transform: translateX(0);
    transition: 0.35s ease-in-out;
}
.moving-nav.active {
    transform: translateX(-250px);
}

@media (max-width: 768px) {
    .moving-nav {
        position: absolute;
        left: 0;
        bottom: 0;
        padding-left: 35px;
    }
    .moving-nav.active {
        transform: translateX(-20px);
    }
}
/* วางเส้นขาวไว้ใน section nav ไม่ให้โดน container บีบ */
.underline 
{
    height: 2px;
    position: absolute;
    right: 0;
    bottom: 13.5%;
    background-color: white;
    z-index: 0;
}




.sticky-header {
    background-color: #045450;
    opacity: 0.95;
}

.sticky-menu {
    list-style: none;
}

.sticky-nav {
    color: white;
    margin-right: 50px;
    position: relative;
    transition: 0.35s ease-in-out;
}

.sticky-nav-hoverline::before {
    content: "";
    width: 0;
    height: 3px;
    position: absolute;
    left: 0;
    bottom: -20%;
    background-color: #FDD426;
    transition: 0.35s ease-in-out;
    z-index: 2;
}

.sticky-nav:hover {
    color: #FDD426;
}

.sticky-nav-hoverline:hover::before {
    width: 100%;
}
/* 
====================================================================
		END Nav Section
====================================================================
 */




/* 
====================================================================
		Hero Section
====================================================================
 */


/* กดหนดให้พอดีกับหน้าจอ 100vh */
.hero {
    width: 100%;
    height: 90vh;
    position: relative;
}
@media (max-width: 922px) {
    .hero {height: 60vh;}
}
.hero-text {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
.hero p {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}
/* ให้รูปขยายไม่ว่าจะ device ไหน */
.hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* 
====================================================================
		END Hero Section
====================================================================
 */






/* 
====================================================================
		Register Section
====================================================================
 */


/* เอาเม้าส์จิ้มแล้วเปลี่ยน cursor */
.form-control
{
    cursor: pointer;
}
/* สามเหลี่ยมในกล่อง input */
.triangle-hover
{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    transform: scale(0);
    transition: 0.25s ease-in;
}
/* ้hover แล้วสามเหลี่ยมโผล่ */
.input-form:hover .triangle-hover
{
    transform: scale(1);
}


.register-form button 
{ 
    width: 100%; 
    font: 600 1.3em 'Playfair Display', serif; 
    transition: all 0.5s ease; 
    position: relative;
}

.register-form button::before
{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: 0.4s ease-in-out;
}
.register-form button:hover::before { opacity: 1; }

/* 
====================================================================
		END Register Section
====================================================================
 */







/* 
====================================================================
		Banner Section
====================================================================
 */

.btn-title {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
    color: white;
    transition: 0.3s ease-in-out;
}

.btn-title:hover {
    color: #FDD426;
}

.banner-section{
	position: relative;
	overflow:hidden;
}

.banner-section .slide-item{
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.banner-section .slide-item .image-layer{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	-webkit-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
	-webkit-transition: all 5000ms linear;
	-moz-transition: all 5000ms linear;
	-ms-transition: all 5000ms linear;
	-o-transition: all 5000ms linear;
	transition: all 5000ms linear;
}

.banner-section .active .slide-item .image-layer{
	-webkit-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1);
}

.banner-section .slide-item .image-layer-no-animation{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

@media (max-width: 500px) {
    .image-layer[style*="background-image: url(assets/home-showcase-banner-type-A.jpg);"], 
    .image-layer-no-animation[style*="background-image: url(assets/typeA/hero-villa-a-2.jpg);"] {
        background-position: 65% center !important;
    }
    .image-layer[style*="background-image: url(assets/home-showcase-banner-type-B.jpg);"] {
        background-position: 70% center !important;
    }
    .image-layer[style*="background-image: url(assets/home-showcase-banner-type-c.jpg);"] {
        background-position: 35% center !important;
    }
}


.banner-section .slide-item .content-box{
	position: relative;
	height: 840px;
	width: 100%;
	display: table;
	vertical-align: middle;
}

@media (max-width: 500px) {
    .banner-section .slide-item .content-box{ height: 550px; }
    .banner-section .slide-item .content-box-no-overlay{ height: 550px !important; }
}

.banner-section .slide-item .content-box-no-overlay{
	position: relative;
	height: 840px;
	width: 100%;
	display: table;
	vertical-align: middle;
}


.banner-section .slide-item .content-box:after{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	background: #1d1f25;
	opacity: .40;
	content: "";
}

.banner-section .slide-item .content{
	position: relative;
	display: table-cell;
	vertical-align: middle;
	z-index: 9;
}

.banner-section .slide-item .title{
	position: relative;
	display: inline-block;
	font-size: 14px;
	line-height: 27px;
	color: #de9e53;
	font-weight: 700;
	letter-spacing: 0.16em;
	padding: 10px 40px;
	padding-right: 19px;
	text-transform: uppercase;
	background-color: #24262d;
	margin-bottom: 30px;
	opacity: 0;
	-webkit-transform: translateX(-100px);
	-moz-transform: translateX(-100px);
	-ms-transform: translateX(-100px);
	-o-transform: translateX(-100px);
	transform: translateX(-100px);
	-webkit-transition: all 700ms ease;
	-moz-transition: all 700ms ease;
	-ms-transition: all 700ms ease;
	-o-transition: all 700ms ease;
	transition: all 700ms ease;
}

.banner-section .slide-item .title:before{
	position: absolute;
	left: 100%;
	margin-left:-1px;
	top: 0;
	border-right: 22px solid transparent;
	border-bottom: 18px solid #24262d;
	content: "";
}

.banner-section .slide-item .title:after{
	position: absolute;
	left: 100%;
	margin-left:-1px;
	bottom: 0;
	width: 21px;
	height: 29px;
	background-color: #24262d;
	content: "";
}

.banner-section .active .title{
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition-delay: 500ms;
	-moz-transition-delay: 500ms;
	-ms-transition-delay: 500ms;
	-o-transition-delay: 500ms;
	transition-delay: 500ms;
}

.banner-section .slide-item h2{
	position: relative;
	display: block;
	line-height: 0.9em;
	color: #ffffff;
	font-weight: 700;
	object-position: 0;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	opacity: 0;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section .active h2{
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition-delay: 1000ms;
	-moz-transition-delay: 1000ms;
	-ms-transition-delay: 1000ms;
	-o-transition-delay: 1000ms;
	transition-delay: 1000ms;
}

.banner-section .slide-item .btn-box{
	opacity: 0;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section .active .btn-box{
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition-delay: 1200ms;
	-moz-transition-delay: 1200ms;
	-ms-transition-delay: 1200ms;
	-o-transition-delay: 1200ms;
	transition-delay: 1200ms;
}



.banner-section .owl-nav{
	display: none;
}

.banner-section .owl-dots{
    width: 100%;
    text-align: center;
	position: absolute;
	bottom: 2%;
	/* -webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%); */
}

.banner-section .owl-dot{
	position: relative;
	display: inline-block;
    margin: 0 6px;
	border: 6px solid #49494a;
	/* margin-bottom: 20px; */
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}


.banner-section .owl-dot.active,
.banner-section .owl-dot:hover{
	border: 6px solid #ffffff;
}

/* 
====================================================================
		END Banner Section
====================================================================
 */







/* 
====================================================================
		Desc Section
====================================================================
 */


.prop {
    width: 200px;
    position: absolute;
    left: 45%;
    top: 40%;
    z-index: 1;
}

.prop-border {
    width: 460px;
    height: 310px;
    /* position: absolute;
    left: 50%;
    top: 50%; */
    z-index: 2;
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(90deg, #fdf09c 0%, #b07e1b 33%, #fdf09c 66%, #b07e1b 100%);
    border-image-slice: 1;
}

.desc-away { 
    margin-top: 50%; 
}
@media (max-width: 992px) 
{
    .desc-away { margin-top: 0.625rem; }
}

/* 
====================================================================
		END Desc Section
====================================================================
 */








/* 
====================================================================
	    Attraction Section
====================================================================
 */



.attraction-content { 
    width: 85%; 
}
@media (max-width: 992px) 
{
    .attraction-content { width: 90%; }
}


/* แก้กล่อง accordion เป็นสีขาว */
.accordion-button { 
    color: white; 
    box-shadow: inset 0 -1px 0 white;
    background-color: transparent !important; 
}
.accordion-button::after { 
    background-image: url("../assets/plus.svg"); 
}
.accordion-button:not(.collapsed)::after { 
    background-image: url("../assets/minus.svg"); 
}
.accordion-button:not(.collapsed) { 
    color: white; 
    box-shadow: inset 0 -1px 0 white;
}
/* กดกล่อง accordion แล้วเป็นสีเหลือง */
.accordion-button:focus { 
    border-color: #FDD426; 
    box-shadow: 0 0 0 0.25rem rgba(255, 230, 1, 0.815);
 }

 .accordion-item { 
    background-color: transparent !important;
    box-shadow: inset 0 -1px 0 white;
    border: none;
}

/* 
====================================================================
	    END Attraction Section
====================================================================
 */








/* 
====================================================================
	    Location Section
====================================================================
*/


.location-header { 
    width: 100%; 
    height: 14vh; 
    background-color: #2D4A48; 
}

@media (max-width: 500px) {
    .location-header { height: 9vh; }
}


.map {
    width: 100%;
    height: 100%;
}

.map img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* 
====================================================================
	    END Loaction Section
====================================================================
 */








/* 
====================================================================
	    Footer Section
====================================================================
*/


.footer-logo {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
@media (max-width: 500px) {
    .bottom-footer-div {
        margin-right: 140px;
    }
}

.break-line { 
    height: 3px !important; 
    opacity: 1 !important; 
}
.copyright {
    width: 100%;
    height: 10vh;
}

/* 
====================================================================
	    END Footer Section
====================================================================
 */



/*##############################################  END HOME   ##############################################*/













/*##############################################   VILLA TYPE A   ##############################################*/

/* @-webkit-keyframes fadeInUpAndOutDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
    }
  
    25% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    75% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }

    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
      }
}
  
@keyframes fadeInUpAndOutDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    75% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

@-webkit-keyframes fadeInAndOut {
    0% {
      opacity: 0;
    }
  
    25% {
      opacity: 1;
    }

    75% {
        opacity: 1;
      }

    100% {
        opacity: 0;
      }
}

@keyframes fadeInAndOut {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
} */


  
.fadeInUpAndOutDown {
    -webkit-animation-name: fadeInUpAndOutDown;
    animation-name: fadeInUpAndOutDown;
    animation-duration: 2.25s;
}

.fadeInAndOut {
    -webkit-animation-name: fadeInAndOut;
    animation-name: fadeInAndOut;
    animation-duration: 2.25s;
}


/* 
====================================================================
	    Details Section
====================================================================
 */

.detail-img { width: 50vw; }
.detail-text { width: 50vw; }
/* .unit-size { font-size: 2.5em; }
.count-text { padding-left: 5%; font-size: 2.8rem; }
.unit { width: 100%; padding-top: 2.5%; padding-left: 2%; font-size: 1.5rem; } */
@media (max-width: 992px) {
    .detail-img { width: 100%; }
    .detail-text { width: 100%; } 
}

/* 
====================================================================
	    END Details Section
====================================================================
 */

 


/* 
====================================================================
	    Layouts Section
====================================================================
 */


.btn-floor {
    background-color: #F0F2F1;
    transition: 0.35s ease-in-out;
}

.btn-floor:hover {
    color: white;
    background-color: #0B6E69;
}

.btn-floor-active {
    color: white;
    background-color: #0B6E69;
}

.tab-active img {
    display: block;
    width: 758px;
    height: 512px;
}
@media (max-width: 768px) {
    .tab-active img {
        width: 100%;
        height: auto;
    }
}

.tab-hidden {
    display: none !important;
}

.content-lists li {
    width: 235px;
}

/* 
====================================================================
	    END Layouts Section
====================================================================
 */








 /* 
====================================================================
	    Ideal Section
====================================================================
 */

.ideal {
    width: 100%;
    height: 80vh;
}

.ideal-text-a {
    position: absolute;
    right: 23%;
    bottom: 30%;
    z-index: 1;
}
.ideal-text {
    position: absolute;
    right: 23%;
    bottom: 40%;
    z-index: 1;
}


@media (max-width: 500px) {
    .ideal-text {
        left: 11%;
        bottom: 45%;
        width: 90%;
    }
    .ideal-img {
        object-position: 18%;
    }
}


/* 
====================================================================
	    END Ideal Section
====================================================================
 */





/* 
====================================================================
	    Gallery Section
====================================================================
*/

.gallery-item{
	position: relative;
}

.gallery-item .image-box{
	position: relative;
}

.gallery-item .image-box .image{
	position: relative;
}

.gallery-item .image-box .image img{
	display: block;
	width: 100%;
	height: auto;
}

.gallery-item .overlay-box{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	background-color: rgba(222,158,83,.90);
	content: "";
	-webkit-transition: -webkit-transform 0.4s ease;
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease, -webkit-transform 0.4s ease;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
}

.gallery-item .image-box:hover .overlay-box{
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
}

.gallery-item .overlay-box a{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -25px;
	margin-left: -25px;
}

.gallery-item .overlay-box a span{
	display: block;
	height: 58px;
	width: 58px;
	color: #ffffff;
	border-radius: 50%;
	font-weight: 400;
	line-height: 58px;
	font-size: 30px;
}

.owl-nav {display: block;}

.owl-prev {
    position: absolute;
    left: 3%;
    bottom: 45%;
    font-size: 40px;
    color: #F0F2F1;
}

.owl-next {
    position: absolute;
    right: 3%;
    bottom: 45%;
    font-size: 40px;
    color: #F0F2F1;
}


/* 
====================================================================
	    END Gallery Section
====================================================================
*/

/*##############################################   END VILLA TYPE A   ##############################################*/


/*##############################################   1024px   ##############################################*/
@media (width: 1024px) {
    .register-form h1 { font-size: 2em !important; }
    .desc-content { padding: 30px 10px !important; }
    .attraction-content h1 { font-size: 2em !important; }
    .for-1024 {width: 180px; margin-right: 10px !important; padding: 0 !important; }
    .tab-active img { width: 65%; height: 65%; margin-top: auto; margin-bottom: auto; }
}   
/* CUSTOM STYLE END HERE */











/* ######### MURRAY NAV MENU ########## */

.nav-bttn{
    font-size: 14px;
    background-color: transparent;
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.8px;
    line-height: 35px;
}

.nav-bttn:before{
    content: "\e92b";
    font-family: 'linearicons';
    font-size: 40px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: -10px;
}

.nav-bttn.close-bttn:before{
    content: "\e92a";
}

.nav-menu.type-hr ul{
    margin: 0 -20px -10px;
    font-size: 0;
}

.nav-menu ul > li{
    font-size: 14px;
    font-weight: 500;
}

.nav-menu.type-hr ul > li{
    margin: 0 20px 10px;
    display: inline-block;
}

.nav-menu ul > li > a{
    position: relative;
    letter-spacing: 0.8px;
    white-space: nowrap;
    line-height: 16px;
    text-transform: uppercase;
    display: inline-block;
}

.nav-menu ul > li > a:before,
.page-nav-menu > ul > li > a:before,
.isotope-nav > button:before{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: inherit;
    transition-duration: inherit;
}

.nav-menu ul > li a:hover:before,
.nav-menu ul > li.current > a:before,
.page-nav-menu > ul > li.current > a:before,
.isotope-nav > button.is-checked:before{
    width: 100%;
}

.nav-menu ul > li.sub-menu.current > a:before,
.nav-menu ul > li.sub-menu > a:hover:before{
    width: calc(100% - 44px);
}

.navbar-menu{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #0B6E69;
    opacity: 0.95;
    padding: 60px 30px;
    z-index: 99;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;

    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

.navbar-menu.open-navbar{
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.navbar-menu .nav-menu{
    margin-top: 150px;
    opacity: 0;
    -webkit-transform: translateY(3rem);
    -ms-transform: translateY(3rem);
    -o-transform: translateY(3rem);
    transform: translateY(3rem);
    -webkit-transition: all 0.5s 0.7s ease;
    -o-transition: all 0.5s 0.7s ease;
    transition: all 0.5s 0.7s ease;
}

.navbar-menu.open-navbar .nav-menu{
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
    transform: translate(0);
    opacity: 1;
}

.navbar-menu .nav-menu > ul li{
    font-size: 18px;
    text-transform: uppercase;
    line-height: 48px;
}

.navbar-menu .nav-menu > ul > li.sub-menu > ul{
    display: none;
    padding-left: 15px;
}

.navbar-menu .nav-menu > ul > li.sub-menu.active > ul{
    display: block;
}

.navbar-menu .nav-menu > ul > li.sub-menu > ul > li{
    font-size: 16px;
}

.navbar-menu .nav-menu > ul > li.sub-menu > a:after{
    font-family: 'Linearicons';
    content: "\e93a";
    display: inline-block;
    margin-left: 20px;
    font-size: 24px;
    vertical-align: -3px;
}

.navbar-menu .nav-menu > ul > li a{
    color: white;
    display: inline-block;
    line-height: 18px;
}

.nav-menu ul > li > a {
    position: relative;
    letter-spacing: 0.8px;
    white-space: nowrap;
    line-height: 16px;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.4s ease-in-out;
}



@media (min-width: 992px){
    
    .collaspe {
        display: none;
    }
    .navbar-menu{
		width: 20%;
	}
}

@media (max-width:768px){
	.navbar-menu{
		width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 992px) {

	.navbar-menu{
		width: 50%;
	}

}

@media (max-width: 992px) {
    .nav-hoverline::before 
    {
        height: 2px;
    }
    .nav-link {
        margin-left: 0;
        font-size: 18px;
        color: white;
        letter-spacing: 0.8px;
    }
    .sub-nav-menu {
        list-style: none;
        color: white;
        font-size: 16px !important;
    }
    .fa-brands {color: white; transition: 0.5s ease-in-out;}
    .fa-brands:hover {color: #FDD426;}
}



/*** 

====================================================================
	News Section
====================================================================

***/

.news-section{
	position: relative;
}

.news-block{
	position: relative;
    margin-right: auto;
    margin-left: auto;
	margin-bottom: 30px;
    padding: 1rem;
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(90deg, #fdf09c 0%, #b07e1b 33%, #fdf09c 66%, #b07e1b 100%);
    border-image-slice: 1;
}

@media (max-width: 500px) {
    .news-block { width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 1.2rem; }
    .news-block .inner-box { height: auto !important; }
}

.news-block .inner-box{
	position: relative;
	background-color: white;
    height: 100%;
}

.news-block .image-box{
	position: relative;
}

.news-block .image-box .image{
	position: relative;
	margin-bottom: 0;
	background-color: #24262d;
	overflow: hidden;
}

.news-block .image-box .image img{
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.news-block .inner-box:hover .image a img{
	opacity: .70;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

.news-block .lower-content{
	position: relative;
	padding-top: 10px;
    padding-left: 5px;
    padding-bottom: 20px;
}

.news-block .image-box .date{
 	position: absolute;
    left: 0;
    bottom: 0;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 75px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.16em;
	padding: 0 20px;
	text-transform: uppercase;
	background-color: #0D2724;
    z-index: 10;
}

.news-block .image-box .date .day{
    font-size: 2.3rem;
    text-align: center;
    margin-top: 18px;
    padding-bottom: 5px;
    width: 100%;
    height: 100%;
    color: #CFA748;
}

.news-block .image-box .date .month{
    font-size: .75rem;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
}

.news-block .lower-content h5{
	position: relative;
	display: block;
	font-size: 24px;
	line-height: 34px;
	color: #24262d;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 25px;
}

.news-block .lower-content h5 a{
	color: #24262d;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;	
}

.news-block .lower-content h5 a:hover{
	color: #de9e53;
}

.news-block .lower-content .text{
	position: relative;
	font-size: 16px;
	line-height: 30px;
	color: #6c6d70;
	font-weight: 500;
	
}

.news-block .post-info{
	position: relative;
}

.news-block .post-info li{
	position: relative;
	display: inline-block;
	margin-right: 15px;
	padding-right: 20px;
	font-size: 16px;
	line-height: 30px;
	color: #de9e53;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.news-block .post-info li a{
	color: #de9e53;
	display: inline-block;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;	
}

.news-block .post-info li:before{
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 16px;
	line-height: 30px;
	color: #de9e53;
	font-weight: 500;
	content: ".";
}

.news-block .post-info li a:hover{
	color: #24262d;
	text-decoration:underline;	
}


.get-in-touch-section {
    width: 100%;
    padding: 0;
}

.google-map {
    width: 100%;
   
    padding: 0;
}

.get-in-touch {
    width: 80%;
}
@media (width: 1920px) {
    .get-in-touch .inner {width: 600px;}
}
@media (max-width: 768px) {
    .get-in-touch-section {height: 900px;}
    .google-map {height: 400px;}
    .get-in-touch {width: 100%;}
}
@media (max-width: 500px) {
    .get-in-touch-section {height: 825px;}
    .get-in-touch {height: 450px;}
    .get-in-touch h2 {font-size: 1.4rem;}
    .get-in-touch h5 {font-size: 1rem; padding-bottom: 15px;}
    .get-in-touch .inner button {margin-bottom: 10px;}
}
@media (max-width: 425px) and (min-width: 375px) {
    .get-in-touch .inner {padding-top: 0 !important;}
}
@media (max-width: 320px) {
    .get-in-touch-section {height: 870px;}
    .get-in-touch h2 {font-size: 1.2rem;}
    .get-in-touch h5 {font-size: 0.8rem;}
}