/* vrreal custom theme: yellow and blue */

:root {
    --vrreal-blue: #0033a0;
    --vrreal-yellow: #fbb13f;
    --vrreal-white: #f7f7ff;
}

body {
    background-color: var(--vrreal-white);
}

.trendy-select {
    width: 180px;
    /* Adjust width */
    padding: 0.4rem 0.8rem;
    border-radius: 1rem;
    /* Rounded edges */
    border: 1px solid #ced4da;
    background-color: #f8f9fa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
    cursor: pointer;
}

/* Hover effect */
.trendy-select:hover {
    border-color: #6c63ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}

/* Focus effect */
.trendy-select:focus {
    outline: none;
    border-color: #6c63ff;
    box-shadow: 0 0 0 0.25rem rgba(108, 99, 255, 0.25);
    background-color: #ffffff;
}

.filter-row {
    transition: all 0.3s ease;
}

.property-options button {
    flex: 1;
    /* Equal width */
    border-radius: 20px;
}

/* Filter Row */
.navbar .bg-light {
    background-color: #f8f9fa !important;
}

/* Radio buttons custom style */
.form-check-input:checked {
    background-color: #ff7a18;
    border-color: #ff7a18;
}

/* Dropdowns smaller size */
.form-select-sm {
    min-width: 130px;
}

header.sticky-top {
    background-color: var(--vrreal-white) !important;
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--vrreal-yellow) !important;
}

.navbar-nav .nav-link.active {
    color: #fff !important;
    background-color: var(--vrreal-yellow);
    border-radius: 4px;
}

/*Icons in header*/

.header-icons .icon-btn {
    width: 35px;
    height: 35px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}

.header-icons img {
    width: 18px;
    z-index: 2;
    transition: all .3s ease;
}

/* Search gradient */
.icon-btn.search {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Call gradient */
.icon-btn.call {
    background: linear-gradient(135deg, #ff7a18, #ffb347);
}

/* WhatsApp gradient */
.icon-btn.whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

/* Hover animation */
.icon-btn:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.icon-btn:hover img {
    transform: scale(1.15);
}

.btn-primary {
    background-color: var(--vrreal-yellow);
    border-color: var(--vrreal-yellow);
    color: var(--vrreal-blue);
    font-weight: bold;
}

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

h2 {
    color: var(--vrreal-blue);
}

/* Sliding Banner */
.hero-slider {
    margin-top: 0;
}

.slider-img {
    height: 650px;
    object-fit: cover;
}

/* Mobile view */
@media (max-width:768px) {
    .slider-img {
        height: auto;
    }
}

.carousel-caption {
    padding: 20px;
    border-radius: 10px;
}

.carousel-caption h2 {
    font-weight: 700;
}

.carousel-caption p {
    font-size: 18px;
}

/* Left & Right Arrow Buttons */
/* Left & Right Arrow Buttons */
.carousel-control-prev,
.carousel-control-next {
    width: 38px;
    height: 38px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    backdrop-filter: blur(8px);
    border-radius: 50%;
    opacity: 1;
    transition: all .3s ease;
}

/* margin from sides */
.carousel-control-prev {
    left: 15px;
}

.carousel-control-next {
    right: 15px;
}

/* Arrow icons always white */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: brightness(0) invert(1);
    width: 16px;
    height: 16px;
}

/* Hover / Active state */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: #ff7a18;
    /* orange */
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    filter: none;
}

.carousel-indicators {
    bottom: 0px;
}

.carousel-indicators button {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    padding: 0;
    margin: 0 6px;
    background-color: #ffffff;
    opacity: 0.5;
    border: none;
}

/* Active indicator with house icon */
.carousel-indicators .active {
    opacity: 1;
    background-color: var(--vrreal-white);
    background-image: url("https://cdn-icons-png.flaticon.com/512/25/25694.png");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Cards */
.property-card {
    display: flex;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: all .3s ease;
    flex-direction: row;
    /* keep image on left even on mobile */
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.property-img {
    width: 40%;
    /* image takes 40% of card width */
    min-width: 120px;
    /* ensure small screens don't shrink image too much */
}

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

.property-content {
    padding: 15px 20px;
    width: 60%;
}

.property-content h5 {
    font-weight: 700;

}

.property-content p {
    font-size: 14px;
    color: #666;
}

/* Optional: make card scrollable horizontally on very small screens */
@media(max-width:480px) {
    .property-card {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .property-img img {
        width: 100%;
        height: 115px;
        object-fit: cover;
    }

    .property-content h5 {
        font-weight: 700;
        font-size: 15px;
    }

    h2.catalog-title {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-size: 26px;
        color: var(--vrreal-blue);
        /* Default color */
        transition: color 0.3s ease;
        /* Smooth hover effect */
        cursor: pointer;
    }
}

h2.catalog-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--vrreal-blue);
    /* Default color */
    transition: color 0.3s ease;
    /* Smooth hover effect */
    cursor: pointer;
}

/* Hover color */
h2.catalog-title:hover {
    color: #ff7a18;
    /* Trendy orange on hover */
}

/* Category Badge */
.property-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.property-status,
.property-category {
    display: inline-block;
    font-weight: 600;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    color: #fff;
}

/* Status badge colors */
.property-status {
    background: gray;
    /* default */
}

.property-status:contains("New") {
    background: #28a745;
    /* green */
}

.property-status:contains("Resale") {
    background: #007bff;
    /* blue */
}

/* Category badge colors */
.property-category {
    background: gray;
    /* default */
}

.property-category:contains("Apartment") {
    background: #ff7a18;
    /* orange */
}

.property-category:contains("Villa") {
    background: #ffb347;
    /* light orange */
}

.property-category:contains("Plot") {
    background: #6c757d;
    /* gray */
}

.property-category:contains("Flat") {
    background: #17a2b8;
    /* teal */
}

/* Quote Form */
.get-quote-btn{
position:fixed;
bottom:25px;
right:25px;
background:#0033a0;
color:#fff;
border:none;
padding:14px 22px;
border-radius:50px;
font-weight:bold;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
z-index:999;
}
.quote-form{
background:#fff;
padding:25px;
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.custom-input{
border-radius:10px;
border:1px solid #e5e5e5;
padding:14px;
transition:all .3s ease;
}

.custom-input:focus{
border-color:#0033a0;
box-shadow:0 0 0 3px rgba(0,51,160,0.08);
}

.submit-btn{
width:100%;
border:none;
padding:14px;
border-radius:10px;
font-weight:600;
font-size:16px;
color:#fff;
background:linear-gradient(135deg,#0033a0,#2575fc);
transition:all .3s ease;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.submit-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.alert-success{
border-radius:8px;
font-weight:500;
}
.modal-header {
    background-color: #ccdfff !important;
}
.gallery-img {
  cursor: pointer;
}
.iti {
    width: 100%;
}

.iti input {
    width: 100%;
}
.iti__country-list{
    z-index: 3 !important;
}