/* propertyeg: single-singular — only single post, project, unit (sliders, infotable, sidebar, facilities, project-btn, etc.). */
.call-to-action .page-cta a{flex-grow: 0; text-decoration: none}

/*project-header*/
.project-header .row, .project-header .col-md-4{display: flex; flex-wrap: wrap}

/*project-main-title*/
.project-main-title{width:100%}
.project-main-title h1{font-size: 1.2rem;margin: 5px 0;}

@media only screen and (min-width:992px){
    .project-header{padding-bottom: 25px}
    .project-main-title h1{font-size: 1.6rem}
}

/*project-location*/
.project-location{margin-bottom: 15px}
.project-location i{color: var(--secondary-color); margin-right: -3px; margin-left: 3px}

/*table-box*/
.table-box{background-color: white; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden; margin: 15px 0; border: 1px solid var(--background-color-300)}
/*infotable*/
table.infotable {border-collapse: collapse;width:100%;color: var(--text-color);}
table.infotable tr{border-bottom: 1px solid var(--background-color-300)}
table.infotable tr:last-of-type{border-bottom: none}
/*table.infotable tr:nth-child(even){background-color: var(--background-color-100)}*/
table.infotable th.ttitle {font-size: 0.8rem;padding-left:0;border-left:1px solid var(--background-color-300); background-color: var(--background-color-100)}
/*table.infotable tr:nth-child(even) th.ttitle{background-color: var(--background-color-100)}*/

table.infotable td, table.infotable th {margin: 0; padding: 7px 10px; text-align: right;font-size: 0.9rem}
table.infotable a:hover{color: var(--secondary-color)}

@media only screen and (min-width:992px){
    table.infotable th.ttitle {font-size: 0.9rem}
    table.infotable td, table.infotable th {font-size: 1rem; padding: 7px 25px 7px 15px}
}


/*project slider*/
.project-banner{position: relative; margin: 25px 0; width: 100%; padding: 0;}

/* Project Banner Slider - Within Container */
.project-banner-slider {
    width: 100%;
    margin: 25px 0;
    position: relative;
}

.project-grid{display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 15px;}
.project-banner__item{position: relative; overflow: hidden; border-radius: 10px;}
.project-banner__link{display: block;}
.project-banner__img{width: 100%; height: 360px; object-fit: cover; display: block; transition: transform 0.4s ease;}
.project-banner__item:hover .project-banner__img{transform: scale(1.02);}

@media only screen and (min-width:1200px){
    .project-banner__img{height: 440px;}
}

#project-slider{cursor: grab;border-radius: 10px 10px 0 0 ;overflow: hidden;margin-top: 20px}
#project-slider img{width:100%;height:320px;object-fit: cover}


/*Thumbnail*/
.slider-nav{background-color: white;padding: 5px 10px;max-height: 60px; border-radius:0 0 10px 10px; }
.slider-nav .slick-track{display: flex}
.slider-nav .item-slick {height:40px;margin: 5px;cursor: pointer;object-fit: cover;opacity: 0.7; flex-grow: 1}
.slider-nav .item-slick.slick-current{opacity: 1;border: 2px solid var(--secondary-color)}
@media only screen and (min-width:992px){
    .slider-nav{max-height: 80px}
    .slider-nav .item-slick {height:60px;}
}

/*project slick prev & next*/
#project-slider .slick-prev,#project-slider .slick-next{position:absolute; background-color:white;cursor:pointer;z-index:1;font-size:12px;width:35px;height:35px;text-align:center;padding:0;transition:0.3s;color:var(--primary-color);border:none;border-radius: 45px;top:50%;right:15px;transform: translateY(-50%); box-shadow: 1px 1px 3px rgba(0,0,0,0.2)}
#project-slider .slick-next{right:auto;left:15px}
#project-slider .slick-prev:hover ,#project-slider .slick-next:hover{background-color: var(--secondary-color); color: white}

/*post accordion*/
.lwptoc {margin:25px 0; position: relative;border-radius: 5px;overflow: hidden; background-color: white; border:1px solid var(--secondary-color)}
.lwptoc_header{
    cursor: pointer;
    display: block;
    padding: 0px 15px;
    position: relative;
    text-align: right;
    line-height: 2.5rem;
    font-size: 1rem;
    transition: 0.2s;
}


.lwptoc_header::after { width: 8px; height: 8px; border-left: 3px solid var(--secondary-color); border-top: 3px solid var(--secondary-color);  position: absolute; left: 20px; content: " "; top: 50%; transform: rotate(-45deg) translateY(-50%); transition: all 0.2s ease-in-out;}
.lwptoc_header:hover{background-color: var(--secondary-color); color: white}
.lwptoc_header:hover::after{border-color: white}
.lwptoc_header.active{background-color:  var(--secondary-color02);color:  var(--text-color);border:2px solid  var(--secondary-color02);border-bottom: none}
.lwptoc_header.active::after { transform: rotate(-135deg) translateY(50%); transition: all 0.2s ease-in-out; border-color:var(--text-color) }
.lwptoc_items {color:  var(--primary-color);  display: none; padding: 20px; text-align: right;border-radius: 0 0 5px 5px; border-top:1px solid var(--background-color-300)}
.lwptoc_items a:hover{color:  var(--secondary-color)}



@media{
    .sticky{position: sticky; top:100px; margin-bottom: 25px}
}

/*sidebar*/
.sidebar{width: 100%}
.sidebar-box.hide-mobile{display: none}

.sidebar-box{background-color: white; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); border-radius: 5px;  overflow: hidden;margin: 25px 0; }

.project-developer img{width:100%; max-width: 100px ;height: auto}
.price-box{background-color: white; color: var(--primary-color);padding: 20px; text-align: center; display: flex; flex-direction: column; position: relative; font-size: 0.9rem;border: 2px solid var(--primary-color); border-radius: 5px; }
.project-main-price{font-weight: bold; font-size: 2rem; line-height: 2.5rem; margin: 5px 0}

@media only screen and (min-width:992px){
    .project-developer{padding: 15px}
    .project-developer img{max-width: 170px}
}
/*payment-plan*/
.payment-plan{display:flex;flex-direction:column;margin:10px -10px}
.payment-plan-mobile{display:none}

/*side-details*/
.side-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0 15px;align-items:stretch}
.side-details .side-details-box{background-color:#FFFFFF;border-radius:5px;box-shadow:0 0 3px rgba(0,0,0,0.05);display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:0.7rem;padding:10px;text-align:center;border:1px solid var(--background-color-300);min-height:100%}
.side-details .side-details-box span{display:block}
.side-details .big-detail{font-size:1.5rem;line-height:2rem;font-weight:bold;color:var(--secondary-color);margin-top:6px}

@media only screen and (max-width:991px){
    .payment-plan-top{display:none}
    .payment-plan-mobile{display:flex;margin:20px -10px 0}
}

.price-last-update{text-align: center; color: var(--background-color-500); margin-top: 5px}

.side-bar .payment-plan{display: none}

.sidebar-box.hide-pc{margin-bottom: 0}
@media only screen and (min-width:992px){
    .sidebar-box.hide-mobile{display: block}
    .sidebar-box.hide-pc{display: none}
    .side-details .side-details-box{padding:10px; font-size: 0.8rem;}
    .side-bar .payment-plan{display: flex; margin-top: 50px}
    .side-details .big-detail{font-size: 1.8rem; }
}

/*side-form*/
.side-form{padding: 25px}
.side-form .form-title{font-weight: bold; font-size: 1.1rem; color: var(--secondary-color) }
.side-form .form-bg, .side-form .comment{width:100%;padding-right:15px;height:44px;line-height:44px;color:var(--text-color);display:block;font-family: 'Somar', sans-serif;font-size:1rem;margin-top:20px;border:1px solid var(--background-color-400);background-color:var(--background-color);border-radius: 5px}
.side-form .comment{height:110px;}
.form-bg::placeholder,.comment::placeholder{opacity:0.5}
.side-form .submit{background-color:var(--primary-color);line-height:32px;padding:0 20px 3px;color:#FFF;font-size:0.9rem;border:0;transition:0.5s;border-radius: 5px;font-family: 'Somar', sans-serif; float: left}
.side-form .submit:hover{cursor:pointer;background-color: var(--secondary-color)}
.form-bg.half-r, .form-bg.half-l{width:100%;}
.side-form .search-select {	appearance: none;-moz-appearance: none;	-webkit-appearance: none;background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");	background-position: 2%;background-repeat: no-repeat;color: var(--primary-color);}
.side-form .search-select option{font-family: 'Somar'!important;}


/*page-cta*/
.page-cta{display: flex; flex-wrap: wrap;margin :0 -5px; align-items: flex-end; }
.page-cta i{margin: 0px 5px}
.page-cta a{border-radius: 5px;display: block;height:32px;line-height: 32px;text-align: center;color: white ;margin:5px;font-size: 0.9rem;transition: 0.3s;white-space: nowrap; overflow: hidden; background-color: var(--secondary-color); padding: 0 20px; text-decoration: none}
.page-cta a:hover{background-color: white; border:2px solid var(--primary-color);line-height: 28px; color: var(--primary-color)}
.page-cta .cta-phone{background-color: var(--primary-color)}
.page-cta .cta-phone:hover{border-color: var(--primary-color); color: var(--primary-color)}
.page-cta .cta-wts{background-color: #25D366}
.page-cta .cta-wts:hover{border-color: #25D366; color: #25D366}
.page-cta .cta-zoom{background-color: #2D8CFF}
.page-cta .cta-zoom:hover{border-color: #2D8CFF; color: #2D8CFF}

@media only screen and (min-width:992px){
    .page-cta a{min-width: 120px}
    .sidebar .page-cta a{min-width: inherit; flex-grow: 1}
}
.the_content {border:1px solid var(--background-color-300);}

/*prj-headline*/
.prj-headline{font-weight: bold; font-size: 1.1rem; margin-bottom: 15px; color: var(--primary-color)}

.project-plan img{width: 100%; height: auto; max-height: 400px; object-fit: cover;display: block; margin: 0}
.project-map iframe{width: 100%; height: 300px; max-width:100%;}
.project-video iframe{width: 100%; height: 300px}


/*main-section*/
.main-section{padding: 20px 0}
.bg-white{background-color: white}

@media only screen and (min-width:992px){
    .main-section{padding: 60px 0}
}

/*view-all-btn*/
.view-all-btn{background-color: var(--primary-color); padding: 2px 25px; color: white; border-radius: 50px; margin-top: 25px; display: inline-block; transition: 0.2s}

.view-all-btn:hover{background-color: var(--secondary-color); color: white}

.dev-projects-more{margin:15px 0 30px}
.dev-projects-more .view-all-btn{display:inline-flex;align-items:center;justify-content:center;min-width:180px;padding:10px 28px;border-radius:12px;font-weight:700}
@media only screen and (max-width:768px){
    .dev-projects-more .view-all-btn{width:100%;min-width:auto}
}

#showmoreUnits {
    background-color: var(--primary-color);
    padding:5px 15px;
    color: #fff;
    font-size:1rem;
    border: 0;
    transition: .5s;
    border-radius: 5px;
    font-family: Somar,sans-serif;
    display:inline-block;
    font-weight:bold;
}
#showmoreUnits .less ,#showmoreUnits.texthide .more {display:none;}
#showmoreUnits.texthide .less, #showmoreUnits .more {display:block;}
.hiddenUnit {display:none;}
.hiddenUnit.show {display:block;}

.author-avatar{
    border-radius: 50% !important; /* Creates a circular shape */
    width: 32px !important; /* Creates a circular shape */
    height: 32px !important; /* Adjusts the height of the avatar */
}

.author-info{
    display: flex !important;
    gap: 20px !important;
}

.the_content .box-cta{
    display: flex;
    justify-content: center !important;
}
.the_content .box-cta i{
    color: white !important;
}

.facilities-services {
    --brand: #c59358;
    background: #ffffff;
    border: 1px solid #eee;
    padding: 28px 24px;
    border-radius: 16px;
    margin-top: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.facilities-services h2 {
    font-size: 1.6em;
    font-weight: 800;
    margin: 0 0 18px 0;
    position: relative;
    color: var(--text-color, #222);
    padding-bottom: 12px;
}
.facilities-services h2::after {
    content: "";
    display: block;
    inline-size: 64px; /* logical width */
    block-size: 3px;   /* logical height */
    background: var(--brand, #c59358);
    border-radius: 2px;
    margin-block-start: 10px;
    margin-inline: auto; /* center in both LTR/RTL */
}

.facilities-services ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 18px;
}

.facilities-services li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.03);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.facilities-services li:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: var(--brand);
}

.facilities-services .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 64px;
    block-size: 64px;
    margin-bottom: 8px;
}

.facilities-services .name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color, #222);
    line-height: 1.4;
}

/* Content box padding for Project and Unit pages */
body.single-project .content-box:not(.no-padding),
body.single-unit .content-box:not(.no-padding) {
    padding: 40px;
}


/* Ensure facility icons center above labels */
.facilities-services .icon img {
    display: block;
    margin: 0 auto;
    inline-size: 56px;
    block-size: 56px;
    transition: transform .25s ease, filter .25s ease;
}
.facilities-services li:hover .icon img {
    transform: translateY(-2px) scale(1.03);
}

/* 4 columns on large screens */
@media (min-width: 992px) {
    .facilities-services ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .facilities-services ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .facilities-services li {
        padding: 12px 8px;
    }
}


/* Project button styling */
a.project-btn {
    background-color: #c59358;
    color: #ffffff !important;
    padding:8px 10px;
    text-decoration: none;
    border-radius:50px;
    margin-top: 20px;
}

/* Optional: keep text white on hover/focus */
a.project-btn:hover,
a.project-btn:focus {
    color: #ffffff !important;
}