@font-face {
    font-family: "Material Icons";
    font-display: swap;
    src: url('../MaterialIcons-Regular.woff') format('woff'),
         url('../MaterialIcons-Regular.ttf') format('truetype'),
         url('../MaterialIcons-Regular.svg#MaterialIcons-Regular') format('svg'),
         url('../MaterialIcons-Regular.eot') format('embedded-opentype');
}

/* Premium Web Enhancements */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

/* Global Smooth Fade-In Animation on Page Load */
@keyframes page-fade-in {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

body {
    animation: page-fade-in 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards !important;
}

/* Custom Scrollbar for Luxury Dark Aesthetic */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #121212;
}
::-webkit-scrollbar-thumb {
    background: #c5a059;
    border-radius: 4px;
    border: 2px solid #121212;
}
::-webkit-scrollbar-thumb:hover {
    background: #e5c060;
}

/* Font Family Overrides */
body, p, span, a, li, input, button, select, label, .ui-button {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.02em;
}

h1, h2, h3, h4, h5, h6, .title, .heading {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: 0.03em !important;
}

/* Champagne Gold Text Gradients for Principal Headings */
h1, h2, h3, .h1, .h2, .h3 {
    background: linear-gradient(135deg, #ffffff 40%, #e5c060 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

/* Smooth Transitions for Interactive Elements */
a, button, img, div, i, li, .hover {
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Glassmorphism Containers with Gold Accent Shadows */
#sellersholder, #Lets_talk_Holder_Container, .modal-content {
    background: rgba(18, 18, 18, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(229, 192, 96, 0.2) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(229, 192, 96, 0.05) !important;
    border-radius: 12px !important;
}

/* Premium Styling for Modals */
.modal-dialog {
    border-radius: 12px !important;
    overflow: hidden !important;
}
.modal-content {
    color: #e0e0e0 !important;
}

/* Highlight the Sales Agent Name in Champagne Gold */
#wb_uid157, #wb_uid346, #wb_uid453, #wb_uid465, #wb_uid522, #wb_uid534, #wb_uid424, #wb_uid448, #wb_uid355, #wb_uid378 {
    color: #e5c060 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* Stylize contact info text blocks */
#wb_master-pageText1, #wb_master-pageText3, #wb_sellersinfo, #wb_master-pageText1 span, #wb_master-pageText3 span, #wb_sellersinfo span {
    color: #d1d1d1 !important;
    line-height: 1.7 !important;
    font-size: 14px !important;
}

/* Premium Hover Transitions for Call/Message Circle Action Icons */
#fbbtn:hover, #emailbtn:hover, #mobilebtn:hover, #viberbtn:hover, #whattsappbtn:hover,
#lets_profile_viber:hover, #lets_profile_whattsapp:hover, #lets_profile_fb:hover, #lets_profile:hover,
#Letstalk2icon:hover, #UP:hover {
    transform: translateY(-6px) scale(1.08) !important;
    box-shadow: 0 12px 24px rgba(229, 192, 96, 0.25) !important;
    filter: brightness(1.1) !important;
}

/* Pulse Glow Animation on Floating Action Buttons */
@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(229, 192, 96, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(229, 192, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 192, 96, 0); }
}

#Letstalk2icon, #lets_profile {
    animation: pulse-gold 3s infinite !important;
    border-radius: 50% !important;
}

/* Social icons transition */
.fa:hover {
    transform: scale(1.2) !important;
    color: #e5c060 !important;
}

/* Logo Image Styling & subtle zoom */
#shangsellerslogo, #shangsellerspic {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(229, 192, 96, 0.15) !important;
    background-color: #000 !important;
    padding: 8px !important;
}
#shangsellerslogo:hover, #shangsellerspic:hover {
    transform: scale(1.03) !important;
    border-color: rgba(229, 192, 96, 0.4) !important;
}

/* Slide-up Cards for Unit Overviews */
[id^="indexRollOverText"], [id^="master-pageRollOver"] {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
}
[id^="indexRollOverText"]:hover, [id^="master-pageRollOver"]:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6) !important;
    border-color: rgba(229, 192, 96, 0.2) !important;
}

/* Premium media container shadows */
video, iframe {
    border-radius: 10px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

/* Sleek Active State Custom Tab Selectors */
#colorTabsMenu button {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: #c8c8c8 !important;
    border: 1px solid rgba(229, 192, 96, 0.15) !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}
#colorTabsMenu button:hover, #colorTabsMenu button:focus {
    background-color: #e5c060 !important;
    color: #0b0b0b !important;
    border-color: #e5c060 !important;
    box-shadow: 0 0 20px rgba(229, 192, 96, 0.3) !important;
}

/* Underline slide effect on Navigation Menus */
#first_logo_holder li a {
    position: relative !important;
    padding-bottom: 6px !important;
}
#first_logo_holder li a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background: #e5c060 !important;
    transition: width 0.3s ease !important;
}
#first_logo_holder li a:hover::after {
    width: 100% !important;
}
#first_logo_holder li a:hover {
    color: #e5c060 !important;
    background-color: transparent !important;
}

/* Fade-in Animation Classes */
@-webkit-keyframes animate-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes animate-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Scroll Reveal Animations */
.reveal-on-scroll {
    opacity: 0 !important;
    transform: translateY(35px) !important;
    transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) !important;
}

.reveal-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Make logo project images in the menu bigger & aligned */
#master-pageRollOver1,
#shangsummitbutton,
#shangwackbtnnavigation,
#layabtnnavigation,
#harayabtnnavigation,
#aurellabtnnavigation,
#master-pageRollOver1 a,
#shangsummitbutton a,
#shangwackbtnnavigation a,
#layabtnnavigation a,
#harayabtnnavigation a,
#aurellabtnnavigation a {
    width: 100% !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#projectmainholdertwo img,
#wb_projectmainholdertwo img {
    height: 38px !important;
    width: auto !important;
    max-height: 48px !important;
    max-width: 90% !important;
    transition: all 0.3s ease !important;
}

#projectmainholdertwo img:hover,
#wb_projectmainholdertwo img:hover {
    transform: scale(1.12) !important;
}


/* === VIRTUAL TOUR VISIBILITY FIX === */
#wb_vt1, #wb_vt2, #wb_vt3, #wb_vt4,
#vt1, #vt2, #vt3, #vt4,
#UNITA, #UNITB, #UNITC, #UNITD, #UNITE, #UNITF,
#UNIT_E_2BR, #UNIT_H_2BR, #UNIT_J_2BR {
    visibility: visible !important;
}

#wb_vt1, #vt1 {
    display: block !important;
    visibility: visible !important;
}

iframe[id^="vt"], iframe[id^="UNIT"], iframe[id^="indexInlineFrame"] {
    visibility: visible !important;
}


/* ------------------------------------------------------------------
   Agent identity block - Jonathan T. Renato (broker) first,
   Cedric Renato below in smaller type.
   !important is needed to beat the blanket 14px rule that this sheet
   applies to every span inside these containers.
   ------------------------------------------------------------------ */
#wb_sellersinfo .agent-lead-name{display:block;font-family:"Microsoft JhengHei";font-size:20px !important;font-weight:700 !important;letter-spacing:0.5px;line-height:1.25;color:#CEAD2B !important;}
#wb_sellersinfo .agent-lead-role{display:block;font-family:"Microsoft JhengHei";font-size:14px !important;line-height:1.35;color:#F2F2F2 !important;}
#wb_sellersinfo .agent-lead-lic{display:block;font-family:"Microsoft JhengHei";font-size:12px !important;line-height:1.35;color:#FDDC5C !important;}
#wb_sellersinfo .agent-sub{display:block;margin-top:8px;padding-top:6px;border-top:1px solid rgba(206,173,43,0.35);}
#wb_sellersinfo .agent-sub-name{display:block;font-family:"Microsoft JhengHei";font-size:14px !important;font-weight:600 !important;letter-spacing:0.4px;line-height:1.3;color:#CEAD2B !important;}
#wb_sellersinfo .agent-sub-role{display:block;font-family:"Microsoft JhengHei";font-size:12px !important;line-height:1.3;color:#F2F2F2 !important;}
#wb_sellersinfo .agent-sub-lic{display:block;font-family:"Microsoft JhengHei";font-size:11px !important;line-height:1.3;color:#FDDC5C !important;}
#wb_master-pageText1 .agent-contact{font-size:13px !important;line-height:1.45;}
#wb_embeddedpageText6 .agent-panel-name{font-weight:700;letter-spacing:0.5px;}
#wb_master-pageText1 .agent-foot-name{font-size:19px !important;font-weight:700;letter-spacing:0.5px;color:#CEAD2B !important;}

@media (max-width:767px){
#wb_sellersinfo .agent-lead-name{font-size:18px !important;}
#wb_master-pageText1 .agent-foot-name{font-size:17px !important;}
}