@media only screen and (max-width:768px){.map-view{overflow:hidden;width:100%;height:340px}}@media only screen and (min-width:768px){.qrimgset{display:flex;flex-wrap:wrap;gap:25px}}.form-check-label{font-size:9px}.ami_txt p{border:1px solid transparent;position:absolute;bottom:1px;left:1px;background:black;padding:4px;border-radius:3px}.ami-slide{display:block;border:1px solid transparent;border-radius:42px}.ami-img{border:1px solid transparent;border-radius:37px}.rera-after-text{font-style:italic;font-size:0.95em;color:#333;margin-left:6px}.accordion-item{border:none;margin-bottom:15px;border-radius:10px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,0.08);btransition:all 0.3s ease}.accordion-button{font-weight:600;font-size:0.9rem;padding:12px 18px;background:#fff;color:#333;position:relative;transition:all 0.3s ease;cursor:pointer}.accordion-button.collapsed:hover{background:var(--colorPrimary,#ceaa56);color:#fff}.accordion-button:focus{outline:none;box-shadow:none}.accordion-button::after{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f078";font-size:0.95rem;position:absolute;right:20px;transition:transform 0.3s ease}.accordion-button:not(.collapsed)::after{transform:rotate(-180deg)}.accordion-button:not(.collapsed){background:var(--colorPrimary,#007bff);color:#fff}.accordion-body{padding:20px;font-size:0.8rem;line-height:1.6}#developer{overflow:visible}@media (max-width:1200px){.accordion-button{font-size:1rem;padding:10px 16px}.accordion-button::after{font-size:0.9rem;right:18px}.accordion-body{font-size:0.95rem;padding:18px}.section-heading-sub{font-size:1.3rem}}@media (max-width:992px){.accordion-button{font-size:0.95rem;padding:9px 14px}.accordion-button::after{font-size:0.85rem;right:16px}.accordion-body{font-size:0.9rem;padding:16px}.section-heading-sub{font-size:1.2rem}}@media (max-width:768px){.accordion-button{font-size:0.9rem;padding:8px 12px}.accordion-button::after{font-size:0.8rem;right:14px}.accordion-body{font-size:0.85rem;padding:14px}.section-heading-sub{font-size:1.1rem}}@media (max-width:576px){.accordion-button{font-size:0.85rem;padding:7px 10px}.accordion-button::after{font-size:0.75rem;right:12px}.accordion-body{font-size:0.8rem;padding:12px}.section-heading-sub{font-size:1rem}}.sitevisit-box{max-width:420px;margin:auto}.whatsapp-square{width:80px;height:80px;border:3px solid #8CCBF7;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;margin:auto;transition:0.2s ease}.whatsapp-square:hover{transform:scale(1.06);border-color:#25D366}.form-check-label{font-size:9px}
/* Thank-you confirmation popup (replaces the redirect to thanks.php) */
.thank-modal{max-width:440px}
.thank-modal .modal-body{padding:28px 24px 32px}
.thank-icon{color:var(--colorPrimary);line-height:0;margin-bottom:12px}
.thank-title{display:block;font-size:26px;font-weight:700;color:var(--colorPrimary);margin-bottom:10px}
.thank-text{font-size:15px;line-height:1.55;color:#333;margin:0 0 10px}
.thank-contact{font-size:14px;color:#555;margin:0 0 20px}
.thank-contact a{color:var(--colorPrimary);font-weight:600;text-decoration:none;white-space:nowrap}
.thank-modal .micro-form-btn{display:inline-block;width:auto;min-width:180px}
@media only screen and (max-width:576px){
.thank-modal{max-width:92vw;margin:0 auto}
.thank-modal .modal-body{padding:22px 16px 26px}
.thank-title{font-size:22px}
.thank-text{font-size:14px}
}

/* Read more: collapses long overview copy above the brochure button.
   The clamp ships in the HTML, so there is no reflow after JS loads. */
.read-more{position:relative}
.read-more>:last-child{margin-bottom:0}
.read-more.is-clamped{max-height:7.5em;overflow:hidden}
.read-more.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.read-more.is-clamped table{table-layout:fixed;width:100%}
/* block + fit-content so it always takes its own line and the brochure button
   drops below it. As inline-block the two sat side by side on desktop. */
.read-more-toggle{display:block;width:fit-content;max-width:100%;margin:2px 0 14px;padding:0;background:none;border:0;color:var(--colorPrimary);font-weight:600;font-size:15px;line-height:1.4;text-align:left;cursor:pointer;text-decoration:underline}
.read-more-toggle:hover,.read-more-toggle:focus{text-decoration:none;opacity:.85}
@media only screen and (max-width:768px){
.read-more.is-clamped{max-height:9em}
.read-more-toggle{font-size:14px}
}

/* ===========================================================================
 * RERA QR block.
 *
 * style.css defines .rera-img three times (margin, max-width/inline-block,
 * height:100px) and the markup used to put that same class on the WRAPPER div
 * as well, so the whole QR grid was forced into a 100px-tall inline-block.
 * The wrapper is .rera-imgs now; these rules are the single authority for the
 * image itself and win because nstyle.css loads after style.css.
 *
 * The QR files are 414x410 - very nearly, but not exactly, square. A fixed
 * square box plus object-fit:contain renders a true square at every breakpoint
 * without distorting the code, and the padding keeps the quiet zone a scanner
 * needs.
 * ========================================================================= */

.rera-imgs { display: block; width: 100%; }

.qrimgset {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.rera-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

img.rera-img {
    width: 150px;
    height: 150px;          /* equal to width - the box is square */
    aspect-ratio: 1 / 1;
    object-fit: contain;    /* fit the near-square QR without stretching it */
    display: block;
    margin: 0;              /* style.css set margin-left:.8vh */
    max-width: 100%;
    padding: 6px;
    background: #fff;
    border: 1px solid #e6e6ee;
    border-radius: 6px;
}

.rera-details { text-align: center; }
.rera-details p { margin: 0; word-break: break-word; }

@media only screen and (max-width: 992px) {
    .qrimgset { gap: 20px; }
    img.rera-img { width: 132px; height: 132px; }
}

@media only screen and (max-width: 768px) {
    /* Was display:block below 768px, so the codes stacked full-width. */
    .qrimgset { gap: 18px; justify-content: center; }
    img.rera-img { width: 124px; height: 124px; }
}

@media only screen and (max-width: 480px) {
    .qrimgset { gap: 14px; }
    img.rera-img { width: 112px; height: 112px; }
}