/* -----------------------------------------
   BRAND COLOR VARIABLES
----------------------------------------- */
:root {
    /* Brand Colors */
    --royal-blue: #0B1B5A;
    --emerald: #009F6B;
    --gold: #D9C077;
    --cream: #F7EFD1;

    /* Shades */
    --royal-blue-dark: #081441;
    --emerald-dark: #008659;

    /* Text */
    --text-dark: #1A1A1A;
    --text-light: #E5E5E5;
    --text-muted: #BFBFBF;

    /* Background */
    --bg-royal: var(--royal-blue);
    --bg-royal-light: rgba(11, 27, 90, 0.9);

    /* Shadow */
    --shadow-gold: 0 0 10px rgba(217, 192, 119, 0.5);
}

/* -----------------------------------------
   GLOBAL TYPOGRAPHY
----------------------------------------- */
body {
    font-family: "Inter", "Poppins", sans-serif;
    background-color: #ffffff;
    color: var(--text-dark);
    line-height: 1.6;
}

body.has-sticky-padding {
    padding-top: 70px;
    /* equal to navbar height */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--royal-blue);
    font-weight: 600;
}

/* -----------------------------------------
   LINKS
----------------------------------------- */
a {
    color: var(--royal-blue);
    text-decoration: none;
    transition: 0.25s ease;
}

a:hover {
    color: var(--emerald);
}

/* Gold underline hover effect */
.link-hover-gold {
    position: relative;
}

.link-hover-gold::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--gold);
    transition: 0.3s ease;
}

.link-hover-gold:hover::after {
    width: 100%;
}

/* btn outline success color */
.btn-outline-success {
    color: #ffffff;
    font-weight: bold;
}

/* -----------------------------------------
   BUTTON STYLES
----------------------------------------- */

/* Primary Button (Royal Blue) */
.btn-primary {
    background-color: var(--royal-blue);
    border-color: var(--royal-blue);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--royal-blue-dark);
    border-color: var(--royal-blue-dark);
}

/* Secondary Button (Emerald) */
.btn-secondary {
    background-color: var(--emerald);
    border-color: var(--emerald);
    color: #fff;
}

.btn-secondary:hover {
    background-color: var(--emerald-dark);
    border-color: var(--emerald-dark);
}

/* Outline Emerald Button */
.btn-outline-emerald {
    border: 2px solid var(--emerald);
    color: var(--emerald);
    background: transparent;
}

.btn-outline-emerald:hover {
    background: var(--emerald);
    color: #fff;
}

/* Gold Gradient Button */
.btn-gold {
    background: linear-gradient(to right, var(--gold), var(--cream));
    border: none;
    color: var(--royal-blue);
    font-weight: 600;
}

.btn-gold:hover {
    box-shadow: var(--shadow-gold);
    color: var(--royal-blue);
}

.large-button {
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-items: center;
}

/* -----------------------------------------
   SOCIAL CIRCLE BUTTONS
----------------------------------------- */
.social-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: 0.3s ease;
}

.social-circle:hover {
    background: var(--emerald);
    border-color: var(--emerald);
}

/* -----------------------------------------
   BACKGROUND UTILITIES
----------------------------------------- */
.bg-royal {
    background-color: var(--royal-blue) !important;
}

.bg-royal-light {
    background-color: var(--bg-royal-light) !important;
}

.bg-emerald {
    background-color: var(--emerald) !important;
}

.bg-gold {
    background-color: var(--gold) !important;
}

/* -----------------------------------------
   TEXT UTILITIES
----------------------------------------- */
.text-royal {
    color: var(--royal-blue) !important;
}

.text-emerald {
    color: var(--emerald) !important;
}

.text-gold {
    color: var(--gold) !important;
}

.text-cream {
    color: var(--cream) !important;
}

/* -----------------------------------------
   CARDS
----------------------------------------- */
.card {
    border-radius: 14px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.card-title {
    color: var(--royal-blue);
    font-weight: 600;
}

/* -----------------------------------------
   FORMS
----------------------------------------- */
.form-control {
    border-radius: 10px;
    border: 1px solid #ccc;
}

.form-control:focus {
    border-color: var(--emerald);
    box-shadow: 0 0 5px rgba(0, 159, 107, 0.25);
}

/* -----------------------------------------
   NAVBAR
----------------------------------------- */
nav.fixed-top-navbar {
    position: absolute;
    width: 100%;
    z-index: 1022;
    background-color: transparent ;
}

.nav-link.activ{
    background-color: #ffc107;
}

.navbar {
    backdrop-filter: blur(14px);
}

.sticky {
    animation-name: slide-in-top;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    background-color: #0B1B5A !important;
}

@keyframes slide-in-top {

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

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.top-100 {
    top: -100px;
}

#tabProperty .nav-link{
    color: var(--royal-blue) !important;
}

#tabProperty .nav-link:hover{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#tabProperty .nav-link.active{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}



.nav-link {
    color: #fff !important;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    transition: 0.25s ease;
}

.nav-link:hover {
    background: linear-gradient(to right, var(--gold), var(--cream));
    color: var(--royal-blue) !important;
}

/* Active menu item */
.nav-link.active {
    background: linear-gradient(to right, var(--gold), #b8a350);
    color: var(--royal-blue) !important;
    font-weight: 600;
}

.navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    /* change as needed */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------
   FOOTER
----------------------------------------- */
footer {
    background-color: var(--royal-blue);
}

footer a {
    color: var(--text-light);
    background-color: var(--bg-royal-light) !important;
}

footer a:hover {
    color: var(--gold);
}

/* animations (AOS-like) */
.aos {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease
}

.aos-visible {
    opacity: 1;
    transform: none
}

.faq-card {
    transition: all 0.2s ease;
}

.faq-card:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
}

.property-gallery .main-image-box img {
    object-fit: cover;
    max-height: 540px;
}

.property-photos-row {
    max-height: 540px;
}

.thumb {
    cursor: pointer;
    opacity: 0.75;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.thumb:hover {
    opacity: 1;
    transform: scale(1.02);
}

.thumb.active-thumb {
    opacity: 1;
    border-color: #0d6efd;
}

.thumb-img {
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.animate-fade {
    animation: fadeInUp .8s ease;
}
.animate-pop {
    animation: popIn .6s ease;
}

@keyframes fadeInUp {
    from {opacity:0;transform:translateY(20px)}
    to {opacity:1;transform:none}
}
@keyframes popIn {
    from {opacity:0;transform:scale(.9)}
    to {opacity:1;transform:scale(1)}
}
.alert.alert-dismissible{
    z-index: 1056;
}
@media screen and (max-width: 768px) {
    .property-photos-row img{
        max-height: 50px;
    }
}