/* Reset & Base */
* {margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif;}
body {background:#f5f5f5; color:#333; scroll-behavior:smooth;}
a {text-decoration:none; color:inherit;}
.container {width:90%; max-width:1200px; margin:0 auto;}
h1,h2,h3,h4 {font-weight:700; margin-bottom:.5rem;}

/* Header */
header {background:#fff; padding:1rem 0; box-shadow:0 2px 6px rgba(0,0,0,0.05); position:sticky; top:0; z-index:1000;}
.nav-container {display:flex; align-items:center; justify-content:space-between;}
.logo {font-size:1.5rem; font-weight:700; background:linear-gradient(45deg, #ff0057, #fffd00, #00ff99, #0066ff); background-clip: text;  -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.nav-links ul {display:flex; gap:1.5rem; list-style:none;}
.nav-links a {padding:.5rem 1rem; border-radius:6px; transition:0.3s;}
.nav-links a:hover {background:linear-gradient(90deg,#ff0057,#fffd00,#00ff99,#0066ff); color:#fff;}
.mobile-menu-icon {display:none; font-size:1.5rem; cursor:pointer;}

/* Hero */
.hero {display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:6rem 1rem; background:linear-gradient(135deg, #ff0057, #fffd00, #00ff99, #0066ff); color:#fff;}
.hero h1 {font-size:2.5rem; margin-bottom:1rem;}
.hero p {font-size:1.2rem; margin-bottom:2rem;}
.hero .btn {padding:.8rem 2rem; border-radius:50px; font-weight:600; color:#fff; background:rgba(0,0,0,0.2); backdrop-filter:blur(5px); transition:0.3s;}
.hero .btn:hover {background:rgba(0,0,0,0.4);}

/* Properties */
.properties {padding:4rem 0; background:#fff;}
.section-head {text-align:center; margin-bottom:3rem;}
.property-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem;}
.property-card {background:#fefefe; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.05); transition:0.3s; cursor:pointer;}
.property-card img {width:100%; display:block; height:200px; object-fit:cover;}
.property-card .info {padding:1rem;}
.property-card h3 {margin-bottom:.5rem; font-size:1.2rem;}
.property-card p {font-size:.9rem; margin-bottom:.5rem; color:#555;}
.property-card .price {font-weight:700; background:linear-gradient(45deg, #ff0057, #fffd00, #00ff99, #0066ff);background-clip: text;  -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.property-card:hover {transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.1);}

/* Services */
.services {padding:4rem 0; background:#f5f5f5;}
.services .service-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; margin-top:2rem;}
.service-card {background:#fff; padding:2rem; border-radius:12px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.05); transition:0.3s;}
.service-card:hover {transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.1);}
.service-card .icon {font-size:2rem; margin-bottom:1rem; background:linear-gradient(45deg,#ff0057,#fffd00,#00ff99,#0066ff); background-clip: text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

/* Gallery */
.gallery {padding:4rem 0; background:#fff;}
.gallery-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem;}
.gallery-grid img {width:100%; height:150px; object-fit:cover; border-radius:8px; cursor:pointer; transition:0.3s;}
.gallery-grid img:hover {transform:scale(1.05);}

/* Lightbox */
.lightbox {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:2000;}
.lightbox img {max-width:90%; max-height:80%; border-radius:12px;}
.lightbox .close {position:absolute; top:20px; right:30px; font-size:2rem; color:#fff; cursor:pointer;}

/* Testimonials */
.testimonials {padding:4rem 0; background:#f5f5f5; text-align:center;}
.testimonials .testimonial-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:2rem;}
.testimonial-card {background:#fff; padding:1.5rem; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.05);}
.testimonial-card p {font-size:.95rem; margin-bottom:.5rem;}
.testimonial-card h4 {font-weight:600; color:#ff0057;}

/* Contact */
.contact {padding:4rem 0; background:#fff;}
.contact .contact-grid {display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem;}
.contact input, .contact textarea, .contact select {width:100%; padding:.8rem 1rem; margin-bottom:1rem; border-radius:8px; border:1px solid #ccc; font-size:1rem;}
.contact button {padding:.8rem 2rem; border:none; border-radius:50px; background:linear-gradient(45deg,#ff0057,#fffd00,#00ff99,#0066ff); color:#fff; font-weight:600; cursor:pointer; transition:0.3s;}
.contact button:hover {opacity:.85;}

/* Footer */
footer {background:#111; color:#fff; padding:2rem 0; text-align:center;}
footer a {color:#fff;}
footer .social-icons {margin-top:1rem; display:flex; justify-content:center; gap:1rem;}

/* Responsive */
@media(max-width:768px){
    .nav-links ul {flex-direction:column; position:fixed; top:50px; right: -250px; height:100vh; width:250px; background:#fff; padding-top:4rem; transition:0.3s; box-shadow:-2px 0 6px rgba(0,0,0,0.1);}
    .nav-links ul.show {right:0;}
    .mobile-menu-icon {display:block;}
    .contact .contact-grid {grid-template-columns:1fr;}
}

/* Buttons */
.sticky-btn {position:fixed; bottom:30px; right:30px; padding:.8rem 1.8rem; border-radius:50px; background:linear-gradient(45deg,#ff0057,#fffd00,#00ff99,#0066ff); color:#fff; font-weight:600; z-index:1000; text-decoration:none;}

/* New*/

/* ==========================
   MORTGAGE CALCULATOR
========================== */
.mortgage-section {
    padding: 70px 0;
    background: #f7faff;
}

.mortgage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.mortgage-form label {
    display: block;
    font-weight: 600;
    margin: 10px 0 5px;
}

.mortgage-form input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    outline: none;
}

.mortgage-form button {
    margin-top: 20px;
    width: 100%;
    padding: 14px;
    background: #1e90ff;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.mortgage-form button:hover {
    background: #156dcb;
}

.mortgage-result {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mortgage-result h3 {
    margin-bottom: 15px;
}

#mcOutput {
    font-size: 2rem;
    font-weight: 700;
    color: #1e90ff;
}

@media (max-width: 768px) {
    .mortgage-grid {
        grid-template-columns: 1fr;
    }
}


/* ==============================
      SCHEDULE VIEWING MODAL
============================== */
.modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
}

.modal-content h2 {
    margin-bottom: 20px;
    color: #1e90ff;
}

.modal-content input,
.modal-content select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid #ccc;
    outline: none;
}

.modal-content button {
    width: 100%;
    padding: 14px;
    background: #1e90ff;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.modal-content button:hover {
    background: #156dcb;
}

#scheduleMsg {
    margin-top: 15px;
    font-weight: 600;
    color: green;
}


.property-card .actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.wishlist-btn, .compare-btn {
    flex: 1;
    padding: 8px;
    font-size: 0.85rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.wishlist-btn { background: #ff6b81; color: #fff; }
.wishlist-btn:hover { background: #ff3b58; }

.compare-btn { background: #1e90ff; color: #fff; }
.compare-btn:hover { background: #156dcb; }


.header-actions button {
    margin-left: 10px;
    padding: 8px 12px;
    border:none; border-radius:6px;
    cursor:pointer; font-weight:600;
}



.modal {
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.8);
    justify-content:center;
    align-items:center;
    z-index:2000;
}

.modal-content {
    background:#fff;
    padding:2rem;
    border-radius:12px;
    width:90%;
    max-width:400px;
    position:relative;
}

.modal-content .close-modal {
    position:absolute;
    top:15px;
    right:20px;
    font-size:1.5rem;
    cursor:pointer;
}

.modal-content input, .modal-content button {
    width:100%;
    padding:10px;
    margin-bottom:10px;
    border-radius:6px;
    border:1px solid #ccc;
}

.modal-content button {
    background:linear-gradient(45deg,#ff0057,#fffd00,#00ff99,#0066ff);
    color:#fff;
    border:none;
    cursor:pointer;
}


#pagination {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

#pagination .arrow-btn {
    padding: 0.6rem 1.2rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

#pagination .arrow-btn:hover:not(:disabled) {
    background: linear-gradient(45deg,#ff0057,#fffd00,#00ff99,#0066ff);
    color: #fff;
}

#pagination .arrow-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* For tablets and small devices */
@media (max-width:768px){
    .property-cards {
        grid-template-columns: 1fr 1fr; /* 2 cards per row */
        gap: 1rem;
    }
    .property-card img {
        height: 150px; /* smaller image */
    }
}

/* For mobile phones */
@media (max-width:480px){
    .property-cards {
        grid-template-columns: 1fr; /* 1 card per row */
    }
    .property-card img {
        height: 120px; /* even smaller */
    }
    #propertySearch {
        width: 90%; /* expand search input full width */
    }
}