/** * DHA Margalla Enclave - Main Stylesheet * @author Souq al'Ard (Pvt) Ltd. * @version 2.0.0 * @description Optimized CSS with fluid typography,accessibility features,and performance enhancements *//* ======================================== GLOBAL STYLES & RESET ======================================== */*,*::before,*::after{box-sizing:border-box;}/* ======================================== CSS CUSTOM PROPERTIES ======================================== *//** * Design tokens for consistent spacing and colors * Spacing follows 8px grid system for visual harmony */:root{/* Spacing Scale - Multiples of 8px */ --space-xs:0.5rem;/* 8px */ --space-sm:1rem;/* 16px */ --space-md:1.5rem;/* 24px */ --space-lg:2rem;/* 32px */ --space-xl:3rem;/* 48px */ --space-2xl:4rem;/* 64px */ /* Brand Colors */ --brand-crimson:#8C003C;--brand-crimson-dark:#b10050;--neutral-bg:#f4f4f9;/* Fluid Typography */ --table-font-size:clamp(0.95rem,0.8rem + 0.4vw,1.1rem);}/* ======================================== PERFORMANCE OPTIMIZATIONS ======================================== *//** * HTML element optimizations for smooth scrolling * and touch device performance */html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}body{font-family:'Poppins',sans-serif;margin:0;padding:0;background-color:var(--neutral-bg);color:#333;overflow-x:hidden;font-size:clamp(16px,1rem + 0.25vw,18px);/* Fluid base font size:16px mobile to 18px desktop */ line-height:1.6;/* GPU Acceleration for better performance */ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;/* CLS Prevention - Prevent FOUC */ font-display:swap;/* Performance optimizations */ -webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;/* Layout Shift Prevention */ contain:layout style paint;}/* ======================================== ACCESSIBILITY FEATURES ======================================== *//** * Skip link for keyboard navigation * Allows users to skip to main content */.skip-link{position:absolute;top:0.5rem;left:-999px;background:var(--brand-crimson);color:#fff;padding:0.5rem 1rem;border-radius:6px;z-index:2000;transition:transform 0.2s ease;}.skip-link:focus-visible{left:1rem;transform:translateY(0);}main{display:block;width:100%;padding:0 1rem 3rem;scroll-margin-top:90px;}main:focus-visible{outline:3px solid var(--brand-crimson);outline-offset:4px;}/* ======================================== RESPONSIVE TYPOGRAPHY ======================================== *//** * Mobile Font Sizes (up to 767px) * Follows Google's mobile-friendly guidelines * Minimum 16px for body text to prevent zoom on iOS */@media screen and (max-width:767px){body{font-size:16px;line-height:1.5;}/* Mobile headings - Google compliant sizing */ h1{font-size:2rem;}/* 32px - clear hierarchy */ h2{font-size:1.75rem;}/* 28px - readable */ h3{font-size:1.5rem;}/* 24px - good contrast */ h4{font-size:1.25rem;}/* 20px - minimum readable */ h5{font-size:1.125rem;}/* 18px - acceptable */ /* Mobile paragraph and text elements */ p,li,.faq-answer p,.feature-item p{font-size:1rem;/* 16px - Google minimum */ line-height:1.6;}/* Mobile menu items */ nav ul li a{font-size:1.125rem;/* 18px - readable */}/* Mobile buttons - Google touch target minimum 44px */ .plot-link-btn,.btn-getintouch{font-size:1rem;/* 16px - readable */ padding:0.75rem 1.5rem;/* Ensures 44px+ touch targets */ min-height:44px;/* Google touch target requirement */}/* Mobile FAQ */ .faq-question h3{font-size:1.125rem;/* 18px - readable */}}/** * Tablet Font Sizes (768px to 1023px) * Optimized for tablet devices with larger touch targets */@media screen and (min-width:768px) and (max-width:1023px){body{font-size:18px;line-height:1.6;}/* Tablet headings - Google compliant hierarchy */ h1{font-size:2.5rem;}/* 45px - strong hierarchy */ h2{font-size:2rem;}/* 36px - clear sections */ h3{font-size:1.75rem;}/* 31.5px - subsections */ h4{font-size:1.5rem;}/* 27px - readable */ h5{font-size:1.25rem;}/* 22.5px - acceptable */ /* Tablet paragraph and text elements */ p,li,.faq-answer p,.feature-item p{font-size:1.125rem;/* 20.25px - readable */ line-height:1.7;}/* Tablet menu items */ nav ul li a{font-size:1.25rem;/* 22.5px - readable */}/* Tablet buttons - Google touch target compliant */ .plot-link-btn,.btn-getintouch{font-size:1.125rem;/* 20.25px - readable */ padding:0.875rem 1.75rem;/* Ensures 44px+ touch targets */ min-height:48px;/* Google touch target requirement */}/* Tablet FAQ */ .faq-question h3{font-size:1.25rem;/* 22.5px - readable */}}/** * Desktop Font Sizes (1024px and above) * Optimized for desktop viewing with comfortable reading sizes */@media screen and (min-width:1024px){body{font-size:18px;line-height:1.6;}/* Desktop headings - Google compliant hierarchy */ h1{font-size:2.5rem;}/* 45px - strong visual hierarchy */ h2{font-size:2rem;}/* 36px - clear section headers */ h3{font-size:1.75rem;}/* 31.5px - subsection headers */ h4{font-size:1.5rem;}/* 27px - readable subheaders */ h5{font-size:1.25rem;}/* 22.5px - acceptable small headers */ /* Desktop paragraph and text elements */ p,li,.faq-answer p,.feature-item p{font-size:1.125rem;/* 20.25px - optimal reading size */ line-height:1.8;}/* Desktop menu items */ nav ul li a{font-size:1.125rem;/* 20.25px - readable navigation */}/* Desktop buttons - Google touch target compliant */ .plot-link-btn,.btn-getintouch{font-size:1.125rem;/* 20.25px - readable */ padding:0.875rem 2rem;/* Ensures 44px+ touch targets */ min-height:48px;/* Google touch target requirement */}/* Desktop FAQ */ .faq-question h3{font-size:1.125rem;/* 20.25px - readable */}}.container{max-width:1200px;margin:0 auto;padding:2rem;width:100%;}/* Navigation */header{background-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);position:sticky;top:0;z-index:1000;width:100%;margin:0;padding:0;height:80px;display:flex;align-items:center;/* Performance optimization - only transform when needed */ transform:translateZ(0);backface-visibility:hidden;/* Prevent flickering during navigation */ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.header-container{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;box-sizing:border-box;/* Prevent layout shifts */ min-height:80px;}nav{display:flex;align-items:center;position:relative;}nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0;font-size:1.125rem;flex-wrap:nowrap;white-space:nowrap;}nav ul li a{color:var(--brand-crimson);font-weight:600;text-decoration:none;padding:var(--space-sm) var(--space-md);width:100%;text-align:center;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:2px solid transparent;border-radius:4px;/* Specific transitions to prevent flickering */ transition:background-color 0.2s ease,border-color 0.2s ease,color 0.2s ease;/* Prevent layout shifts */ will-change:auto;}nav ul li a:focus-visible{outline:2px solid var(--brand-crimson);outline-offset:2px;background-color:rgba(140,0,60,0.1);}nav ul li a:hover{background-color:rgba(140,0,60,0.05);}nav ul li a:active{background-color:rgba(140,0,60,0.15);transform:scale(0.98);}nav ul li a.active{background-color:rgba(140,0,60,0.1);border-color:var(--brand-crimson);}.logo{display:flex;align-items:center;justify-content:center;/* Prevent layout shifts */ width:50px;height:50px;}.logo a{display:block;line-height:0;/* Prevent flickering on click */ -webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;}.logo img{height:50px;width:50px;object-fit:contain;display:block;/* Prevent image flickering */ image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;/* Prevent layout shifts */ will-change:auto;}/* Hero Section */section{padding:4rem 2rem;margin:2rem auto;border-radius:12px;}/* Sections */section{max-width:1200px;margin:var(--space-xl) auto;padding:var(--space-xl) var(--space-2xl);background-color:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.08);box-sizing:border-box;width:100%;/* CLS Prevention - Consistent spacing */ min-height:200px;/* Layout containment for better performance */ contain:layout style;}/* Headings */h1,h2,h3,h4,h5{color:#8C003C;text-shadow:1px 1px 2px rgba(0,0,0,0.15);margin-bottom:var(--space-md);font-weight:600;}section h2{text-align:center;}p{font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);line-height:1.6;margin-bottom:1rem;}/* Responsive Typography Scaling with Fluid Typography */h1{font-size:clamp(2rem,1.5rem + 2vw,2.75rem);/* 32px mobile to 44px desktop */}h2{font-size:clamp(1.75rem,1.5rem + 1vw,2.25rem);/* 28px mobile to 36px desktop */}h3{font-size:clamp(1.5rem,1.25rem + 0.75vw,1.875rem);/* 24px mobile to 30px desktop */}h4{font-size:clamp(1.25rem,1.125rem + 0.5vw,1.5rem);/* 20px mobile to 24px desktop */}h5{font-size:clamp(1.125rem,1rem + 0.375vw,1.375rem);/* 18px mobile to 22px desktop */}/* Mobile headings */@media screen and (max-width:767px){h1{font-size:2rem;}h2{font-size:1.75rem;}h3{font-size:1.5rem;}h4{font-size:1.25rem;}h5{font-size:1.125rem;}}/* Tablet headings */@media screen and (min-width:768px) and (max-width:1023px){h1{font-size:2.5rem;}h2{font-size:2rem;}h3{font-size:1.75rem;}h4{font-size:1.5rem;}h5{font-size:1.25rem;}}/* Laptop/Desktop headings */@media screen and (min-width:1024px){h1{font-size:2.5rem;}h2{font-size:2rem;}h3{font-size:1.75rem;}h4{font-size:1.5rem;}h5{font-size:1.25rem;}}/* Buttons */.btn-getintouch{display:inline-block;background-color:#8C003C;color:#fff;padding:0.75rem var(--space-lg);font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);border-radius:8px;margin-top:var(--space-lg);text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,0.15);/* Performance optimization */ will-change:transform;transform:translateZ(0);backface-visibility:hidden;transition:transform 0.3s ease,box-shadow 0.3s ease;/* Optimize for mobile performance */ -webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;/* GPU acceleration for smooth animations */ -webkit-transform:translateZ(0);-moz-transform:translateZ(0);}.btn-getintouch:hover{background-color:#b10050;box-shadow:0 6px 16px rgba(0,0,0,0.2);transform:translateY(-2px);}.btn-getintouch:focus{outline:2px solid #8C003C;outline-offset:2px;}/* Footer */footer{background-color:#fff;color:#333;box-shadow:0 -4px 12px rgba(0,0,0,0.05);padding:0.5rem;/* CLS Prevention - Fixed height */ min-height:60px;}.footer-content{max-width:1200px;margin:0 auto;text-align:center;padding:0.25rem 0;}.footer-bottom{display:flex;justify-content:center;align-items:center;font-size:clamp(0.875rem,0.85rem + 0.125vw,1rem);flex-wrap:wrap;gap:1rem;padding:0.125rem 0;}.privacy-link{color:#8C003C;text-decoration:none;font-weight:500;transition:color 0.3s;}.privacy-link:hover{color:#b10050;text-decoration:none;}@media screen and (max-width:768px){.footer-bottom{flex-direction:column;text-align:center;}}/* Responsive *//* Hero Section */.hero{max-width:1200px;margin:3rem auto 0;background:#fff;color:#333;text-align:center;padding:7rem 6rem;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.08);box-sizing:border-box;width:100%;/* CLS Prevention - Fixed height */ min-height:600px;}.text-left{text-align:left;}.hero.small{padding:4rem 2rem;}.hero h1{font-size:clamp(2rem,1.75rem + 1.5vw,2.75rem);margin-bottom:1rem;}.hero p{font-size:clamp(1rem,0.95rem + 0.5vw,1.375rem);margin-bottom:2rem;}.hero-image img{max-width:100%;height:auto;margin:2rem 0;width:100%;object-fit:contain;display:block;aspect-ratio:4/3;/* CLS Prevention - Reserve space */ min-height:400px;/* Performance optimization */ will-change:auto;contain:layout;}/* Master Plan */.masterplan-container{display:flex;gap:3rem;align-items:flex-start;margin:3rem 0;}.masterplan-image img{max-width:100%;height:auto;border-radius:8px;display:block;aspect-ratio:4/3;/* CLS Prevention - Reserve space */ min-height:300px;/* Performance optimization */ will-change:auto;contain:layout;}.masterplan-content ul{list-style:none;padding:0;}.masterplan-content li{margin:0.5rem 0;padding-left:1.5rem;position:relative;}.masterplan-content li::before{content:"✓";color:#8C003C;font-weight:bold;position:absolute;left:0;}.masterplan-full-width{margin:2rem 0;text-align:left;max-width:100%;}.masterplan-full-width p{line-height:1.8;font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);}/* ===== TABLES - GENERAL ===== */table{font-size:var(--table-font-size);border-collapse:collapse;}table th,table td{font-size:clamp(0.95rem,0.8rem + 0.2vw,1.05rem);line-height:1.45;}.table-responsive{overflow-x:auto;margin:2rem 0;-webkit-overflow-scrolling:touch;width:100%;display:flex;justify-content:center;align-items:center;}.table-wrap{background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);padding:1rem;margin:1rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;}.table-header{background:#8C003C;color:#fff;padding:1rem;text-align:center;font-weight:600;border-radius:8px 8px 0 0;margin:-1rem -1rem 1rem -1rem;width:100%;box-sizing:border-box;position:sticky;top:0;z-index:10;}/* ===== PAYMENT PLAN TABLES ===== *//* Used on index page and individual plot pages */.payment-plan{width:100%;border-collapse:collapse;min-width:600px;table-layout:fixed;max-width:100%;margin:0 auto;display:table;}.payment-plan th,.payment-plan td{padding:0.75rem;text-align:center;border:1px solid #8C003C;white-space:normal;word-wrap:break-word;word-break:break-word;hyphens:auto;vertical-align:middle;display:table-cell;font-size:inherit;line-height:1.45;overflow:hidden;}.payment-plan th:nth-child(1),.payment-plan td:nth-child(1){width:6%;}.payment-plan th:nth-child(2),.payment-plan td:nth-child(2){width:10%;}.payment-plan th:nth-child(3),.payment-plan td:nth-child(3){width:11%;}.payment-plan th:nth-child(4),.payment-plan th:nth-child(5),.payment-plan td:nth-child(4),.payment-plan td:nth-child(5){width:11%;}.payment-plan th:nth-child(6),.payment-plan th:nth-child(7),.payment-plan td:nth-child(6),.payment-plan td:nth-child(7){width:11%;}.payment-plan th:nth-child(8),.payment-plan th:nth-child(9),.payment-plan td:nth-child(8),.payment-plan td:nth-child(9){width:11%;}.payment-plan td{white-space:nowrap;word-wrap:normal;word-break:keep-all;hyphens:none;text-overflow:ellipsis;}.payment-plan th{background:#f9f9f9;font-weight:600;position:sticky;top:0;z-index:5;}.payment-plan tbody tr:hover{background:#f0f0f0;}.payment-plan .left-col{text-align:center;font-weight:bold;vertical-align:middle;}.payment-plan .subhead th{background:#e9e9e9;font-weight:normal;}.payment-plan .note{text-align:center;font-style:italic;padding:1rem;}/* ===== PROFIT & TRANSFER TABLES ===== *//* Profit/resale tables and transfer fees tables */.profit-table{width:100%;border-collapse:collapse;min-width:400px;table-layout:fixed;max-width:100%;margin:0 auto;display:table;}.profit-table th,.profit-table td{padding:1rem;border:1px solid #8C003C;white-space:normal;word-wrap:break-word;word-break:break-word;hyphens:auto;vertical-align:middle;display:table-cell;font-size:inherit;line-height:1.4;overflow:hidden;}.profit-table th:nth-child(1),.profit-table td:nth-child(1){width:30%;}.profit-table th:nth-child(2),.profit-table td:nth-child(2){width:70%;}.profit-table td{white-space:nowrap;word-wrap:normal;word-break:keep-all;hyphens:none;text-overflow:ellipsis;}.profit-table th{background:#f9f9f9;font-weight:600;text-align:center;position:sticky;top:0;z-index:5;}.profit-table td{text-align:left;}.profit-table tbody tr:hover{background:#f0f0f0;}/* General table styles for transfer fees and other tables */.table-responsive table{width:100%;border-collapse:collapse;table-layout:auto;max-width:100%;margin:0 auto;display:table;}/* Commercial Plots Table Specific */.payment-plan-container .table-wrap table.payment-plan{min-width:auto;table-layout:auto;width:100%;}.payment-plan-container .table-wrap table.payment-plan th,.payment-plan-container .table-wrap table.payment-plan td{white-space:normal;word-wrap:break-word;word-break:break-word;hyphens:auto;padding:0.4rem;font-size:1rem;min-width:80px;}.payment-plan-container .table-wrap table.payment-plan td{white-space:nowrap;word-wrap:normal;word-break:keep-all;hyphens:none;}.table-responsive th:nth-child(1),.table-responsive td:nth-child(1){width:50%;}.table-responsive th:nth-child(2),.table-responsive td:nth-child(2){width:50%;}.table-responsive th,.table-responsive td{padding:1rem;text-align:center;border:1px solid #8C003C;white-space:normal;word-wrap:break-word;word-break:break-word;hyphens:auto;vertical-align:middle;display:table-cell;font-size:inherit;line-height:1.4;overflow:hidden;}.table-responsive td{white-space:nowrap;word-wrap:normal;word-break:keep-all;hyphens:none;text-overflow:ellipsis;}.table-responsive td:nth-child(2){white-space:nowrap;word-break:keep-all;}.table-responsive th{background:#f9f9f9;font-weight:600;position:sticky;top:0;z-index:5;}.table-responsive tbody tr:hover{background:#f0f0f0;}/* ===== PAYMENT BREAKDOWN SECTIONS ===== */.payment-breakdown{margin:2rem 0;padding:1.5rem;border-radius:8px;}.payment-breakdown h3{color:#8C003C;margin-bottom:1rem;font-size:clamp(1.125rem,1rem + 0.5vw,1.375rem);}.breakdown-item{margin-bottom:2rem;}.breakdown-item h4{color:#8C003C;margin:1rem 0 0.5rem 0;font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);}.breakdown-item ul{list-style:none;padding:0;margin:0.5rem 0;font-size:1rem;}.breakdown-item li{margin:0.25rem 0;padding-left:1rem;position:relative;font-size:1rem;}.breakdown-item li::before{content:"•";color:#8C003C;font-weight:bold;position:absolute;left:0;}.breakdown-item p{margin:0.5rem 0;line-height:1.6;}.breakdown-item p strong{font-weight:bold;}/* ===== PAYMENT TABLES (Individual Plot Pages) ===== *//* Payment tables on 5-marla,10-marla,1-kanal pages */.payment-table{width:100%;border-collapse:collapse;font-family:Arial,sans-serif;text-align:center;margin:1rem 0;padding:0;table-layout:fixed;max-width:100%;margin:0 auto;display:table;}.payment-table th,.payment-table td{padding:8px;border:1px solid #7a0e1b;text-align:center;white-space:normal;word-wrap:break-word;word-break:break-word;hyphens:auto;vertical-align:middle;display:table-cell;font-size:inherit;line-height:1.4;overflow:hidden;}.payment-table th:nth-child(1),.payment-table td:nth-child(1){width:40%;}.payment-table th:nth-child(2),.payment-table td:nth-child(2){width:60%;}.payment-table td{white-space:nowrap;word-wrap:normal;word-break:keep-all;hyphens:none;text-overflow:ellipsis;}.payment-table th{background:#a51e2e;color:white;font-weight:600;position:sticky;top:0;z-index:5;}.payment-table td{background-color:white;}.payment-table tbody tr:nth-child(even) td{background-color:#f9f9f9;}.payment-table tbody tr:hover td{background-color:#ffe5e5;}/* Forms */form{max-width:600px;margin:0 auto;}form label{display:block;margin:1rem 0 0.5rem;font-weight:500;}form input,form textarea{width:100%;padding:0.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;font-family:inherit;}form textarea{resize:vertical;min-height:100px;}.form-check{display:flex;flex-direction:column;gap:0.5rem;margin:1rem 0;}.form-check label{display:flex;align-items:center;gap:0.5rem;margin:0;font-weight:normal;line-height:1.4;padding:0.25rem 0;}.btn{background:#8C003C;color:#fff;padding:0.75rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500;transition:background 0.3s;display:block;width:100%;margin-top:1rem;}.hero .btn{display:inline-block;width:auto;padding:0.75rem 1.5rem;}.btn:hover{background:#b10050;}/* Floating Buttons */.floating-buttons{position:fixed !important;bottom:1.5rem !important;right:1.5rem !important;display:flex !important;flex-direction:column;gap:0.75rem;z-index:9999 !important;max-width:calc(100vw - 3rem);pointer-events:auto !important;visibility:visible !important;transform:translateZ(0);will-change:transform;backface-visibility:hidden;-webkit-font-smoothing:antialiased;}/* Ensure buttons stay visible on scroll */.floating-buttons::before{content:'';position:absolute;top:-0.5rem;right:-0.5rem;bottom:-0.5rem;left:-0.5rem;background:transparent;z-index:-1;}.fab{background:#25D366;color:#fff;padding:0.75rem;border-radius:50%;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;width:56px;height:56px;font-size:1.5rem;position:relative;overflow:hidden;}.fab::after{content:attr(data-tooltip);position:absolute;right:64px;background:rgba(0,0,0,0.8);color:white;padding:0.5rem 1rem;border-radius:4px;font-size:0.875rem;white-space:nowrap;opacity:0;visibility:hidden;transform:translateX(10px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);pointer-events:none;}.fab:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,0.3);}.fab:hover::after{opacity:1;visibility:visible;transform:translateX(0);}.fab:active{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2);}.fab:nth-child(2){background:#8C003C;color:#fff;}/* Mobile optimizations */@media screen and (max-width:768px){.floating-buttons{bottom:1rem !important;right:1rem !important;gap:0.5rem;}.fab{width:48px;height:48px;font-size:1.25rem;}.fab::after{display:none;/* Hide tooltips on mobile */}}/* Menu Toggle */.menu-toggle{display:none;flex-direction:column;cursor:pointer;margin-left:auto;position:relative;z-index:1001;}.menu-toggle div{width:25px;height:3px;background:#8C003C;margin:3px 0;transition:0.3s;}.menu-toggle.open div:nth-child(1){transform:rotate(-45deg) translate(-5px,6px);}.menu-toggle.open div:nth-child(2){opacity:0;}.menu-toggle.open div:nth-child(3){transform:rotate(45deg) translate(-5px,-6px);}/* Navigation Active */#nav-links.active{display:flex;position:fixed;top:60px;left:0;right:0;width:100vw;max-width:100vw;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.1);padding:1rem;z-index:1000;box-sizing:border-box;overflow-x:hidden;}@media screen and (max-width:768px){.header-container{position:relative;padding:1rem;width:100%;box-sizing:border-box;}}/* FAQ Section */.faq-container{max-width:900px;margin:0 auto;}.faq-item{border:1px solid #8C003C;border-radius:8px;margin:0.75rem 0;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1);}.faq-question{background:#8C003C;color:#fff;padding:0.75rem 1rem;margin:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background 0.3s;}.faq-question:hover{background:#b10050;}.faq-question h3{margin:0;font-size:clamp(1rem,0.95rem + 0.25vw,1.25rem);font-weight:600;color:#fff;}.faq-toggle{font-size:clamp(1.25rem,1.125rem + 0.5vw,1.75rem);font-weight:bold;transition:transform 0.3s;}.faq-item.active .faq-toggle{transform:rotate(45deg);}.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease;background:#f9f9f9;}.faq-item.active .faq-answer{max-height:600px;}.faq-answer p{margin:0;padding:0.75rem 1rem;line-height:1.6;font-size:clamp(1rem,0.95rem + 0.25vw,1.25rem);}/* About Features */.about-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;margin-top:3rem;}.feature-item{background:#f9f9f9;padding:2rem;border-radius:8px;border-left:4px solid #8C003C;box-shadow:0 2px 8px rgba(0,0,0,0.1);}.feature-item h4{color:#8C003C;margin-bottom:0.5rem;font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);}.feature-item p{margin:0;line-height:1.6;color:#555;}/* Investment Section */.investment-content{display:grid;grid-template-columns:2fr 1fr;gap:3rem;align-items:start;}@media screen and (max-width:1024px){.investment-content{grid-template-columns:1fr;gap:2rem;}}.investment-benefits{list-style:none;padding:0;margin:1.5rem 0;}.investment-benefits li{margin:0.75rem 0;padding-left:1.5rem;position:relative;line-height:1.6;}.investment-benefits li::before{content:"✓";color:#8C003C;font-weight:bold;position:absolute;left:0;}.investment-benefits strong{color:#8C003C;}/* Internal Links */.internal-link{color:#8C003C;text-decoration:none;font-weight:600;transition:color 0.3s;}.internal-link:hover{color:#b10050;text-decoration:underline;}/* Page Navigation */.page-navigation{margin-top:1.5rem;text-align:center;}.nav-link{color:#8C003C;text-decoration:none;font-weight:500;margin:0 0.5rem;padding:0.25rem 0.5rem;border-radius:4px;transition:all 0.3s;display:inline-block;}.nav-link:hover{background:rgba(140,0,60,0.1);color:#8C003C;text-decoration:underline;}/* Plot Links Section */.plot-links{display:flex;flex-wrap:wrap;gap:var(--space-lg);margin-top:var(--space-xl);justify-content:center;}.plot-link-btn{display:inline-block;background:var(--brand-crimson);color:#fff;padding:0.75rem var(--space-lg);text-decoration:none;border-radius:8px;font-weight:600;/* Performance optimization */ will-change:transform;transform:translateZ(0);backface-visibility:hidden;/* Additional performance optimizations */ -webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;-webkit-perspective:1000;perspective:1000;transition:transform 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;box-shadow:0 4px 12px rgba(140,0,60,0.2);border:2px solid var(--brand-crimson);}.plot-link-btn:hover,.plot-link-btn:focus-visible{background:var(--brand-crimson-dark);border-color:var(--brand-crimson-dark);transform:translateY(-2px) translateZ(0);box-shadow:0 6px 16px rgba(140,0,60,0.3);}.plot-link-btn.contact-btn{background:#fff;color:var(--brand-crimson);border:2px solid var(--brand-crimson);}.plot-link-btn.contact-btn:hover,.plot-link-btn.contact-btn:focus-visible{background:var(--brand-crimson);color:#fff;}/* Response Messages */#formResponse{padding:1rem;margin:1rem 0;border-radius:4px;font-weight:500;}.info-message{background:#e3f2fd;color:#0d47a1;border:1px solid #bbdefb;}.error-message{background:#ffebee;color:#c62828;border:1px solid #ffcdd2;}.success-message{background:#e8f5e8;color:#2e7d32;border:1px solid #c8e6c9;}/* Responsive Design */@media screen and (max-width:1024px){/* Tablet adjustments */ section{padding:3.5rem 2rem;margin:2.5rem 0;}.hero{padding:5rem 2.5rem;}.hero.small{padding:4rem 2.5rem;}.hero h1{font-size:2.2rem;}.hero p{font-size:1.2rem;}.masterplan-container{gap:2rem;}.payment-plan th,.payment-plan td,.profit-table th,.profit-table td,.table-responsive th,.table-responsive td{padding:1rem;font-size:1.25rem;min-height:4rem;}.payment-table{font-size:14px;}.payment-table th,.payment-table td{padding:6px;}.floating-buttons{right:1.5rem;bottom:1.5rem;}/* Tablet spacing for containers */ .container{padding:1.5rem;}.header-container{padding:1.25rem 2rem;}/* Tablet spacing for plot links */ .plot-links{gap:var(--space-md);margin-top:var(--space-xl);}.plot-link-btn{padding:0.75rem var(--space-lg);font-size:1.125rem;}/* Tablet spacing for features */ .about-features{gap:2rem;}.feature-item{padding:1.5rem;}/* Tablet spacing for FAQ */ .faq-container{margin:0 auto;}.faq-item{margin:0.5rem 0;}.faq-answer p{padding:0.5rem 0.75rem;}}@media screen and (max-width:768px){/* Mobile adjustments */ body{font-size:16px;/* Google minimum - do not reduce */}section{padding:1.5rem 1rem;margin:1.5rem auto;max-width:100%;box-sizing:border-box;}.hero{padding:3rem 1.5rem;}.hero.small{padding:2.5rem 1.5rem;}.hero h1{font-size:2rem;/* 32px - Google compliant */}.hero p{font-size:1rem;/* 16px - Google minimum */}/* Mobile spacing for containers */ .container{padding:1rem;}.header-container{padding:1rem 1.5rem;}/* Mobile spacing for plot links */ .plot-links{gap:var(--space-sm);margin-top:var(--space-lg);}.plot-link-btn{padding:0.75rem var(--space-md);font-size:1rem;}/* Mobile spacing for features */ .about-features{gap:1.5rem;}.feature-item{padding:1.25rem;}/* Mobile spacing for FAQ */ .faq-container{margin:0 auto;}.faq-item{margin:0.75rem 0;}.faq-answer p{padding:0.75rem 1rem;}nav ul{flex-direction:column;gap:1rem;position:fixed;top:60px;left:0;right:0;width:100vw;max-width:100vw;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.1);padding:1rem;display:none;z-index:1000;box-sizing:border-box;overflow-x:hidden;}nav ul.active{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);}.menu-toggle{display:flex;}.masterplan-container{flex-direction:column;gap:1rem;align-items:center;}.masterplan-image img{max-width:100%;height:auto;}/* ===== MOBILE RESPONSIVE - ALL TABLES ===== */ .payment-plan{font-size:20px;table-layout:fixed;}.payment-plan th,.payment-plan td{padding:0.5rem;font-size:1rem;min-height:3rem;line-height:1.4;letter-spacing:0;word-break:break-word;overflow:hidden;text-overflow:ellipsis;}.payment-plan td:nth-child(n+3){white-space:nowrap;word-break:keep-all;}.profit-table{font-size:20px;table-layout:fixed;}.profit-table th,.profit-table td{padding:0.5rem;font-size:1rem;min-height:3rem;line-height:1.4;letter-spacing:0;word-break:break-word;overflow:hidden;text-overflow:ellipsis;}.profit-table td{white-space:nowrap;word-break:keep-all;}.table-responsive table{font-size:20px;table-layout:fixed;}.table-responsive th,.table-responsive td{padding:0.5rem;font-size:1rem;min-height:3rem;line-height:1.4;letter-spacing:0;word-break:break-word;overflow:hidden;text-overflow:ellipsis;}.table-responsive td:nth-child(2){white-space:nowrap;word-break:keep-all;}/* Commercial plots table specific mobile overrides */ .payment-plan-container .table-wrap table.payment-plan th,.payment-plan-container .table-wrap table.payment-plan td{padding:0.75rem;font-size:1.25rem;min-width:80px;max-width:150px;}/* ===== MOBILE RESPONSIVE - PAYMENT TABLES (Individual Plot Pages) ===== */ /* Mobile styles for payment tables on 5-marla,10-marla,1-kanal pages */ .payment-table-mobile,.payment-table{font-size:20px;/* Adjusted mobile font size for payment table */ table-layout:fixed;}.payment-table-mobile th,.payment-table-mobile td,.payment-table th,.payment-table td{padding:0.5rem;font-size:1rem;min-height:3rem;line-height:1.4;letter-spacing:0;word-break:break-word;overflow:hidden;text-overflow:ellipsis;}/* Keep all payment amounts intact in payment tables */ .payment-table td{white-space:nowrap;word-break:keep-all;}.payment-table{font-size:16px;}.payment-table th,.payment-table td{padding:8px;}.floating-buttons{right:1rem;bottom:1rem;}.fab{width:45px;height:45px;font-size:1.1rem;}.btn{padding:0.75rem 1rem;font-size:0.9rem;}.hero .btn{padding:0.875rem 1.2rem;}form input,form textarea{font-size:16px;/* Google requirement - prevents zoom on iOS */ min-height:44px;/* Google touch target minimum */}.table-wrap{padding:0.25rem;width:100%;box-sizing:border-box;}.table-header{width:100%;box-sizing:border-box;}}@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important;}}@media screen and (max-width:480px){/* Small mobile adjustments - Google compliant */ .hero h1{font-size:1.875rem;/* 30px - still readable on small screens */}.hero p{font-size:1rem;/* 16px - Google minimum maintained */}section h2{font-size:1.375rem;/* 22px - readable section headers */}/* ===== SMALL MOBILE RESPONSIVE - ALL TABLES ===== */ /* Small mobile styles (480px and below) for all table types */ .residential-payment-plan-table-small-mobile,.commercial-plots-table-small-mobile,.profit-table-small-mobile,.transfer-fees-table-small-mobile,.payment-table-small-mobile,.payment-plan,.profit-table,.table-responsive table,.payment-table{font-size:18px;/* Adjusted small mobile font size for all tables */ table-layout:fixed;}.residential-payment-plan-table-small-mobile th,.residential-payment-plan-table-small-mobile td,.commercial-plots-table-small-mobile th,.commercial-plots-table-small-mobile td,.profit-table-small-mobile th,.profit-table-small-mobile td,.transfer-fees-table-small-mobile th,.transfer-fees-table-small-mobile td,.payment-table-small-mobile th,.payment-table-small-mobile td,.payment-plan th,.payment-plan td,.profit-table th,.profit-table td,.table-responsive th,.table-responsive td,.payment-table th,.payment-table td{padding:0.3rem;font-size:0.9rem;min-height:2.5rem;line-height:1.3;letter-spacing:0;word-break:break-word;overflow:hidden;text-overflow:ellipsis;}.payment-table th,.payment-table td{padding:0.2rem;font-size:0.75rem;min-height:1.5rem;line-height:1.1;letter-spacing:0;word-break:break-word;}.payment-table{font-size:14px;}.payment-table th,.payment-table td{padding:6px;}.fab{width:40px;height:40px;font-size:1rem;}.header-container{padding:0.5rem;width:100%;box-sizing:border-box;}.logo img{height:40px;}.hero-image img{margin:1rem 0;}.masterplan-full-width{text-align:left;padding:0 0.5rem;}}