:root { --textColour:#0F172A; --mainColour:#0284C7; --mainColourH:#005B8A; --mainColourRGB:rgb(2, 132, 199); --mainColourRGBA25:rgba(2, 132, 199, 0.25); --mainColourRGBA7:rgba(2, 132, 199, 0.75); --mainColourRGBA8:rgba(2, 132, 199, 0.85); --mainColourHRGBA5:rgba(0, 91, 138, 0.5); --secondColourRGBA5:rgba(245, 158, 11, 0.5); --secondColourRGBA8:rgba(245, 158, 11, 0.8); --secondColour:#F59E0B; --secondColourH:#B8770A; --bgColour:#F4F7FA; } html, body {height:100%; margin:0;} body {background:var(--bgColour); top:0 !important; margin:0 auto; font-family:"Open Sans", Arial, Verdana, Helvetica; font-size:16px; color:var(--textColour);} *, *::before, *::after {box-sizing:border-box;} header, main, footer, .container, #header, #logoC, #logo, #logo svg, .logoBW, .logoW, .logoWB, .logoB, #logoTitle, .btn, .btn-sm, #logoutBtn, #closePreview, a, button {transition-duration:0.5s;} header {position:fixed; top:0; left:0; width:100%; height:80px; padding:10px 0; z-index:5;} header.scrHeader {background:rgba(255, 255, 255, 0.35); border-bottom:1px solid rgba(255, 255, 255, 0.15); box-shadow:0px 0px 10px 0px rgba(0,0,0,0.4);} header.scrHeaderB {backdrop-filter:blur(5px);} #header {height:60px;} #logo {float:left; width:202px; height:60px; position:relative;} #logo svg {width:100%; height:auto; max-width:202px;} .logoBW, .logoW, .scrHeader .logoWB {fill:#FFF;} .logoWB, .scrHeader .logoBW {fill:var(--textColour);} .logoB {fill:var(--mainColour);} #logoTitle {position:absolute; top:48px; left:67px; color:#FFF; font-size:10px; font-family:"Plus Jakarta Sans"; font-weight:800; margin:0; white-space:nowrap;} .scrHeader #logoTitle {color:var(--textColour);} #headerRight {display:flex; width:calc(100% - 202px); height:100%; justify-content:end; align-items:center; align-self:stretch; position:relative;} .showMenu {position:absolute; background:rgba(15, 23, 42, 0.75); width:60px; height:60px; right:0; margin:0; border:0; display:inline-block; overflow:visible; cursor:pointer; z-index:100;} .slidingHeader .showMenu {width:50px; height:50px;} .showMenuBox {position:absolute; top:15px; left:15px; width:30px; height:24px;} .slidingHeader .showMenuBox {top:7px; left:10px;} #menuTitle {position:absolute; bottom:10px; left:0; width:100%; height:14px; line-height:14px; text-align:center; text-transform:uppercase; color:#FFF; font-size:10px;} .slidingHeader #menuTitle {bottom:0;} .showMenu.is-active #menuTitle {color:#231F20;} .showMenuContent {top:50%; display:block; margin-top:-2px;} .showMenuContent, .showMenuContent::before, .showMenuContent::after {position:absolute; width:30px; height:2px; background:#FFF; transition-duration:0.15s; transition-property:transform, -webkit-transform; transition-timing-function:ease;} .showMenuContent::before, .showMenuContent::after {content:""; display:block;} .showMenuContent::before {top:-6px;} .showMenuContent::after {bottom:-6px;} #showMenu:hover {background:var(--secondColourRGBA8);} .showMenu:hover .showMenuContent, .showMenu:hover .showMenuContent::before, .showMenu:hover .showMenuContent::after {background:#FFF;} .menuCollapsed .showMenuContent {bottom:0; top:auto; transition-delay:0.15s; transition-duration:0.15s; transition-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);} .menuCollapsed .showMenuContent::after {top:-16px; transition:top 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.3s, opacity 0.1s linear 0s;} .menuCollapsed .showMenuContent::before {top:-8px; transition:top 0.12s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.3s, transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s, -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;} .menuCollapsed.is-active .showMenuContent {background:#FFF; transform:translate3d(0px, -10px, 0px) rotate(-45deg); transition-delay:0.32s; transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);} .menuCollapsed.is-active .showMenuContent::after {background:#FFF; top:0; opacity:0; transition:top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0s, opacity 0.1s linear 0.27s;} .menuCollapsed.is-active .showMenuContent::before {top:0; background:#FFF; top:0; transform:rotate(-90deg); transition:top 0.12s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.18s, transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0.42s, -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0.42s;} #mainMenu a {white-space:nowrap;} .ddMenu {position:absolute; list-style:none; padding:5px 10px; display:none; z-index:999;} .ddMenu a {width:100% !important; transition-duration:0.5s !important;} .ddMenu li {width:100%; display:block;} .menuShow i {transform:rotate(-180deg);} .languages {height:60px; display:flex; justify-content:center; align-items:center; margin-right:20px; z-index:2; cursor:pointer; position:relative;} .languages i {color:#FFF; margin-left:5px; transition-duration:0.5s;} .languages.is-active i {color:color:#FFF;} .scrHeader .languages i {color:var(--textColour);} .languages:hover i {color:var(--secondColour);} .languageMenu {position:absolute; background:rgba(255,255,255,0.9); top:100%; width:110px; display:none; padding:5px 8px; box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5); z-index:1045;} .languageHolder {float:left; width:24px; height:24px; overflow:hidden; position:relative; z-index:2;} .languageRow {float:left; width:100%; font-size:12px; margin-bottom:5px;} .languageRow:last-child {margin-bottom:0;} .languageMenu .languageHolder {margin:4px 5px 6px 0;} .languageMenu .languageHolder img {opacity:0.6;} .languageMenu .languageHolder img:hover, .langSelected {opacity:1;} .languageRow a {float:left; display:flex; align-items:center; width:100%; height:34px !important; font-size:12px !important; color:var(--textColour) !important; margin:0 !important;} .languageRow a:hover {color:var(--secondColour) !important;} .languageHolder img {position:absolute; top:0; cursor:pointer; transition-duration:0.5s;} .languageTitle {text-shadow:none !important;} .enLang, .Lang, .gTransImg {left:0;} .esLang {left:-25px;} .deLang {left:-50px;} .frLang {left:-75px;} .nlLang {left:-100px;} .itLang {left:-125px;} main {min-height:calc(100vh - 391px);} h1, h2, h3, h4, h5, h6 {color:var(--textColour); font-size:26px; font-family:"Plus Jakarta Sans"; font-weight:800; margin:5px 0 10px; text-decoration:none;} #heroSection {position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#FFF; padding:120px 20px 60px; background-color:var(--textColour); z-index:1;} #pageGalleryContainer {width:100%; height:475px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;} #heroSection::after, #pageGalleryContainer::after {content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(15, 23, 42, 0.2), rgba(15, 23, 42, 0.65)); z-index:1;} .hero-video-container {position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1;} .hero-video-container video {width:100%; height:100%; object-fit:cover;} .hero-overlay, #pageGalleryCover {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;} .hero-overlay {background:rgba(15, 23, 42, 0.55);} #pageGalleryCover {background:rgba(15, 23, 42, 0.15); z-index:2;} .hero-content {position:relative; z-index:2; max-width:800px; margin:0 auto;} .hero-content h1 {font-size:36px; color:#FFF; margin:0 0 25px;} .hero-content p {font-size:18px;} .hero-content p.small-hero {font-size:14px; margin:30px 0 0;} .hero-cta-group {display:flex; gap:15px; justify-content:center; margin-top:30px;} .btn-primary {background-color:var(--mainColour); color:#FFF; padding:12px 24px; border-radius:8px; font-weight:600; text-decoration:none;} .btn-primary:hover {background-color:#0369a1;} .btn-secondary {background:rgba(255, 255, 255, 0.1); color:#FFF; border:1px solid rgba(255, 255, 255, 0.2); padding:12px 24px; border-radius:8px; font-weight:600; text-decoration:none; backdrop-filter:blur(5px);} .btn-secondary:hover {background:rgba(255, 255, 255, 0.2);} #pageGalleryOverlay {position:absolute; top:80px; display:table; z-index:3;} #pageGalleryContainer img {position:absolute; top:-9999px; bottom:-9999px; left:-9999px; right:-9999px; width:auto; min-width:100%; min-height:100%; margin:auto; display:block;} #pageGalleryTitle {height:395px; display:table-cell; vertical-align:middle;} #pageGalleryTitle h1 {font-size:34px; color:#FFF; text-shadow:2px 2px 4px rgba(0,0,0,0.5); margin:0;} #pageGalleryTitle p {font-size:16px; color:#FFF; font-style:italic; text-shadow:1px 1px 2px rgba(0,0,0,0.5); margin:5px 0 0;} #galleryProvinceTitle {position:absolute; bottom:5px; right:5%; color:#FFF; font-size:20px; font-style:italic; text-shadow:1px 1px 1px rgba(0, 0, 0, 1); z-index:2;} .steps-header {text-align:center; margin-bottom:50px;} .steps-badge {display:inline-block; padding:4px 12px; font-size:0.75rem; font-weight:800; letter-spacing:1px; color:#2563eb; background-color:#eff6ff; border-radius:20px; margin-bottom:12px; text-transform:uppercase;} .steps-main-title {font-size:2.25rem; font-weight:800; color:#0f172a; margin-bottom:10px;} .steps-subtitle {font-size:1.05rem; color:#64748b; margin:0;} .steps-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; position:relative;} .step-card {background:#ffffff; border:1px solid #e2e8f0; border-radius:20px; padding:24px 20px; position:relative; display:flex; flex-direction:column; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;} .step-card:hover {transform:translateY(-5px); border-color:#cbd5e1; box-shadow:0 15px 30px -10px rgba(0, 0, 0, 0.08);} .step-number {font-size:26px; font-weight:800; color:var(--mainColour); background:#eff6ff; width:42px; height:42px; border-radius:21px; display:flex; align-items:center; justify-content:center; margin-bottom:8px;} .step-media {width:100%; aspect-ratio:221/540; background:#f8fafc; border:1px solid #f1f5f9; border-radius:12px; overflow:hidden; margin-top:18px; display:flex; align-items:center; justify-content:center;} .step-media img {width:100%; height:100%; object-fit:contain; transition:transform 0.3s ease;} .step-card:hover .step-media img {transform:scale(1.03);} .step-title {font-size:1.15rem; font-weight:700; color:#0f172a; margin-bottom:8px;} .step-desc {font-size:0.9rem; color:#64748b; line-height:1.5; margin:0;} #fourSteps {padding:100px 20px 60px;} .step-link {width:100%; text-align:center; margin:60px 0 0;} .features-section {padding:100px 0;} .section-header {text-align:center; max-width:700px; margin:0 auto 60px;} .price-page-section-header, .contact-section-header {max-width:100%;} .section-header h2 {font-size:2.25rem; font-weight:700; margin-bottom:15px;} .section-header p {font-size:1.1rem;} .simple-setup-section .section-header p, .noti-demo-section .section-header p, #faqSection .section-header p {color:#475569;} .feature-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:30px; max-width:1200px; margin:0 auto;} .feature-card {background:#FFF; padding:35px 30px; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.02); transition:transform 0.2s, box-shadow 0.2s;} .feature-card:hover {transform:translateY(-4px); box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.05);} .feature-icon {color:#64748B; font-size:2rem; margin-bottom:20px;} .layeredFA {font-size:0.5em;} .layeredFA .fa-ban {color:#E11D48;} .feature-yellowD {color:#FEB04C} .feature-yellow {color:#E5C443} .feature-blue {color:#62DAFE;} .feature-black {color:#231F20;} .feature-jigsaw {color:#B6DE6D} .feature-card h3 {font-size:1.25rem; font-weight:600; margin-bottom:10px; color:var(--textColour);} .feature-card p {font-size:0.95rem; color:#64748b; line-height:1.6;} .simple-setup-section, .app-demo-section, .noti-demo-section, .pricing-section, .contactSection {padding:100px 20px; color:var(--textColour);} .app-demo-section, .pricing-section {background-color:#FFF;} .app-demo-section.app-demo-nw, .pricing-section.no-bg {background:none;} .pricing-grid {display:flex; flex-wrap:wrap; justify-content:center; gap:24px; max-width:1300px; margin:0 auto;} .pricing-grid.register-plan-grid {gap:20px; margin-bottom:35px;} .pricing-card {background:#f8fafc; flex:1 1 300px; max-width:360px; border:1px solid #e2e8f0; border-radius:12px; padding:35px 25px; position:relative; display:flex; flex-direction:column; justify-content:space-between; transition:transform 0.2s, box-shadow 0.2s;} .pricing-card.register-tier-card {background:#ECF1F6; max-width:280px; min-width:250px; border-radius:10px; padding:25px; border:2px solid rgba(15, 23, 42, 0.05); cursor:pointer;} .pricing-card.register-tier-card.active {background:#FFF; border-color:var(--mainColour);} .pricing-card:hover {transform:translateY(-4px); box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.05);} .pricing-card.popular {background:#FFF; border:2px solid var(--mainColour); box-shadow:0 10px 25px -5px rgba(2, 132, 199, 0.1);} .badge {position:absolute; top:-12px; right:20px; background:var(--mainColour); color:#FFF; font-size:0.75rem; font-weight:600; padding:4px 12px; border-radius:20px; text-transform:uppercase;} .pricing-card h3 {font-size:1.35rem; font-weight:700; margin-bottom:8px;} .tier-desc {font-size:0.85rem; color:#64748b; margin-bottom:20px; min-height:40px;} .price {font-size:2.25rem; font-weight:800; color:var(--textColour); margin-bottom:20px;} .price span {font-size:0.9rem; font-weight:400; color:#64748b;} .tier-features {list-style:none; padding:0; margin:0 0 25px 0; flex-grow:1;} .tier-features li {font-size:0.9rem; color:#334155; padding:8px 0; border-bottom:1px solid #f1f5f9;} .btn-primary-pricing {background:var(--mainColour); color:#FFF; text-align:center; padding:12px; border-radius:8px; font-weight:600; text-decoration:none;} .btn-primary-pricing:hover {background:#0369a1;} .btn-secondary-pricing {background:#e2e8f0; color:var(--textColour); text-align:center; padding:12px; border-radius:8px; font-weight:600; text-decoration:none;} .btn-secondary-pricing:hover {background:#cbd5e1;} .custom-setup-banner {margin-top:40px; background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-radius:12px; padding:30px 40px; display:flex; justify-content:space-between; align-items:center; color:#FFF; box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.1);} .custom-setup-banner h3 {font-size:1.25rem; font-weight:700; margin-bottom:8px; color:#38bdf8;} .custom-setup-banner p {font-size:0.92rem; color:#94a3b8; max-width:650px; margin:0;} .setup-action {display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:180px;} .setup-price {font-size:0.85rem; color:#cbd5e1; font-weight:600;} .section-header { text-align:center; margin-bottom:40px; } .billing-toggle-wrapper {display:inline-flex; align-items:center; background:#f1f5f9; padding:6px 12px; border-radius:30px; margin-top:20px; cursor:pointer; user-select:none; border:1px solid #e2e8f0;} .billing-label {font-size:0.9rem; font-weight:600; color:#64748b; padding:6px 12px; transition:color 0.2s;} .billing-label.active { color:var(--textColour, #0f172a); } .toggle-switch {width:44px; height:24px; background:#cbd5e1; border-radius:12px; position:relative; transition:background 0.2s; margin:0 8px;} .toggle-slider {width:18px; height:18px; background:#FFF; border-radius:50%; position:absolute; top:3px; left:3px; transition:transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 2px 4px rgba(0,0,0,0.1);} .billing-toggle-wrapper.is-annual .toggle-switch { background:var(--mainColour, #0284c7); } .billing-toggle-wrapper.is-annual .toggle-slider { transform:translateX(20px); } .annual-badge {background:#dcfce7; color:#166534; font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:12px; text-transform:uppercase; margin-left:4px; vertical-align:middle;} .price span {display:block; font-size:0.8rem; font-weight:400; color:#64748b; margin-top:4px;} .notificationsDemoC {max-width:1140px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;} .notificationsDemoC.howItWorks {align-items:center;} .notificationsDemo {flex:1; min-width:300px; position:relative;} .demoChecklist {list-style:none; padding:0; margin:0 0 28px 0;} .demoChecklist li {display:flex; align-items:flex-start; gap:12px; font-size:1rem; color:#1e293b; margin-bottom:12px; line-height:1.5;} .check-icon {display:flex; align-items:center; justify-content:center; width:22px; height:22px; background-color:#dcfce7; color:#16a34a; font-size:0.8rem; font-weight:600; border-radius:50%; flex-shrink:0; margin-top:2px;} .phoneDemo {display:flex; justify-content:center;} .phoneDemo .phoneFrame {overflow:hidden; transition-duration:0.5s;} .phoneDemo .phoneFrame.demoMax {height:733px;} .app-demos-section {width:100%; padding:80px 20px; background:var(--textColour); color:var(--textColour);} .app-demos-section .section-header h3 {font-size:2.25rem; color:#FFF;} .app-demos-section .section-header p {color:#b5c0cf;} .demo-grid-container {max-width:1140px; margin:0 auto; display:flex; gap:40px; justify-content:center;} .demo-card {flex:1; max-width:520px; background:#ffffff; border:1px solid #e2e8f0; border-radius:24px; padding:40px 30px 70px; box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.05); transition:transform 0.2s ease, box-shadow 0.2s ease; position:relative;} .demo-card:hover {transform:translateY(-4px); box-shadow:0 20px 30px -10px rgba(0, 0, 0, 0.08);} .demo-card-header {text-align:center; margin-bottom:30px;} .demo-badge {display:inline-block; padding:4px 12px; font-size:0.75rem; font-weight:800; letter-spacing:0.8px; border-radius:20px; margin-bottom:12px; text-transform:uppercase;} .badge-blue {background-color:#eff6ff; color:#2563eb;} .badge-green {background-color:#f0fdf4; color:#16a34a;} .demo-title {font-size:1.5rem; font-weight:800; color:#0f172a; margin-bottom:12px; line-height:1.3;} .demo-desc {font-size:0.95rem; color:#64748b; line-height:1.6; margin:0;} .demo-link, .noti-link {padding:8px 15px; background:var(--mainColour); color:#FFF; border-radius:6px;} .demo-link {position:absolute; bottom:30px; right:30px;} .noti-link {float:right; margin:20px 0 0;} .demo-link:hover, .noti-link:hover {background:var(--mainColourH); color:#FFF;} .directory-main {padding:60px 0; background-color:#f8fafc; min-height:70vh;} .formContainer {width:100%; max-width:900px; margin:0 auto; display:flex; flex-direction:column;} .formSplitRow, .formSplit3Row {display:grid; gap:20px; clear:both;} .formContainerMB20 {margin-bottom:20px;} .formContainerMB40 {margin-bottom:40px;} .formContainerMB60 {margin-bottom:60px;} .formContainerMB80 {margin-bottom:80px;} .formContainerMB100 {margin-bottom:100px;} .formInput, .formSelect, #agencyRow, .formText, .formRadio, .formRow, .filterListC, .supportThread {float:left; width:100%; position:relative;} .formInput, .formSelect, .formText, .formRadio, .formRow, .filterListC, .supportThread {margin:15px 0;} #agencyRow, .formText {display:none;} .formInput, .filterListC, .formSelect {background:rgba(255,255,255,0.75); border:1px solid #D9DDE4; padding:10px 0; border-radius:6px;} .formInput.formError, .formSelect.formError {border-color:#B0002A;} .formInput.formError input, .formInput.formError textarea, .formSelect.formError select {color:#B0002A;} .formInput input, .formInput textarea, .formRadio input, .formSelect select {width:100%; font-size:18px; color:#333; background:transparent; border:none; padding:0 10px; margin:0;} .formInput textarea {font-family:"Open Sans", Arial, Verdana, Helvetica; font-size:16px; resize:none;} .formInput input, .formRadio input, .formSelect select {height:35px; line-height:35px;} .formInput label, .formSelect label, .filterListLabel, .supportThread label {position:absolute; color:#909090; text-transform:uppercase; font-weight:700; left:5px; text-align:left; padding:0 5px; pointer-events:none; transition-duration:0.5s;} .formInput label, .formSelect.emptyVal label, .supportThread label {top:16px; font-size:16px;} .formInput input:focus ~ label, .formInput textarea:focus ~ label, .formInput input:not(:placeholder-shown) ~ label, .formInput textarea:valid ~ label, .formSelect select ~ label, #captchaVerification .formInput input:focus ~ label, #captchaVerification .formInput input:not(:placeholder-shown) ~ label, .formInput.showLabel label, .filterListLabel, .supportThread label {top:-18px; color:var(--textColour); font-size:12px;} .formLabel label {position:relative; top:-8px; color:#909090; padding:0 5px;} .formLabel label span {color:#BB0003; margin-left:5px;} .formInput input:focus, .formInput textarea:focus, #subEmail:focus, .formSelect select, .selectInput:focus {outline:none !important;} textarea.smallTextarea {height:100px;} #formErrorPPMsg {float:left; width:100%; font-weight:600; color:#B0002A; padding:12px; display:none;} #formResponse {float:left; width:100%; font-weight:600; padding:12px; margin-bottom:40px; border-radius:6px; border:1px solid rgba(0,0,0,0.15); display:none;} #formResponse.responseError {background:#fee2e2; color:#b91c1c;} #formResponse.responseOK {background:#ecfdf5; color:#10b981;} #propertyEnquirySmallText {float:left; width:100%; font-size:12px; color:#8C8A8A; text-align:left;} .grecaptcha-badge {display:none !important;} .search-icon {position:absolute; top:20px; right:18px; color:#64748b; font-size:1rem;} .no-search-results {display:none; text-align:center; padding:60px 20px; color:#64748b; font-size:1.1rem;} .province-grid {display:flex; flex-wrap:wrap; justify-content:center; gap:25px; margin-top:40px;} .province-card {flex:0 1 320px; background:#FFF; border:1px solid #e2e8f0; border-radius:14px; padding:0 30px 0 0; display:flex; justify-content:space-between; align-items:center; text-decoration:none; position:relative; overflow:hidden; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.02);} .province-card::before {content:''; position:absolute; top:0; left:0; width:4px; height:100%; opacity:0; transition:opacity 0.3s;} .province-card:hover {transform:translateY(-4px);} .province-photo {width:124px; height:124px; position:relative; overflow:hidden;} .province-photo img {position:absolute; top:0; width:auto; height:100%; left:-9999px; right:-9999px; margin:auto;} .province-info {max-width:130px;} .province-info h3 {font-size:1.2rem; font-weight:700; color:#0f172a; margin-bottom:6px;} .province-card.has-agents::before {background:#0284c7;} .province-card.has-agents:hover {box-shadow:0 12px 25px -5px rgba(0, 132, 199, 0.1); border-color:#bae6fd;} .province-card.has-agents .agent-count {color:#0284c7; background:#f0f9ff;} .province-card.empty-province::before {background:#f43f5e;} .province-card.empty-province:hover {box-shadow:0 12px 25px -5px rgba(244, 63, 94, 0.08); border-color:#fecdd3;} .province-card.empty-province .agent-count {color:var(--textColour); background:#fff1f2;} .province-card.empty-province .agent-count i {color:#E11D48;} .province-arrow {color:var(--textColour); font-size:0.9rem; transition:transform 0.2s;} .province-card::before {content:''; position:absolute; top:0; left:0; width:4px; height:100%; opacity:0; background:#0284c7; transition:opacity 0.3s; z-index:1;} .province-card.empty-province::before {background:#f43f5e;} .province-card:hover::before {opacity:1;} .agent-count {display:inline-block; text-align:center; font-size:0.85rem; font-weight:600; color:#0284c7; background:#f0f9ff; padding:4px 10px; border-radius:20px;} .agent-list-grid {display:flex; flex-wrap:wrap; justify-content:center; gap:25px; margin-top:40px;} .agent-card {flex:0 1 400px; background:#FFF; border:1px solid #e2e8f0; border-radius:14px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; transition:all 0.3s ease; box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.02);} .agent-card:hover {transform:translateY(-4px); box-shadow:0 12px 25px -5px rgba(0, 0, 0, 0.06); border-color:#cbd5e1;} .agent-card-header {display:flex; align-items:center; gap:15px; margin-bottom:20px;} .agent-avatar {width:48px; height:48px; color:#FFF; border-radius:12px; position:relative; overflow:hidden;} .agent-avatar img {width:100%; height:auto; position:absolute; top:0; left:0;} .agent-details h3 {font-size:1.15rem; font-weight:700; color:#0f172a; margin-bottom:2px;} .agent-contact {color:#64748b; font-size:0.88rem;} .agent-card-footer {border-top:1px solid #f1f5f9; padding-top:20px; display:flex; justify-content:space-between; align-items:center;} .pwa-badge {font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; font-weight:700; color:#10b981; background:#ecfdf5; padding:4px 8px; border-radius:6px;} .agent-profile-container {display:flex; flex-wrap:wrap; gap:40px; max-width:1100px; margin:0 auto; align-items:center;} .agent-info-section {flex:1; min-width:300px;} .agent-header {display:flex; align-items:center; gap:20px; margin-bottom:20px;} .agent-avatar {width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid #eaeaea;} .lang-badge {display:inline-block; background:#f0f4f8; color:#333; padding:4px 10px; border-radius:12px; font-size:0.85rem; margin-right:6px; margin-top:5px;} .agent-bio {line-height:1.6; color:#555;} .agent-preview-section {flex:0 0 320px; text-align:center;} .phone-mockup {background:#111; border-radius:40px; padding:12px; box-shadow:0 20px 40px rgba(0,0,0,0.1); display:inline-block;} .phone-screen {width:290px; height:620px; background:#fff; border-radius:32px; overflow:hidden;} .pwa-thumbnail {width:100%; height:100%; object-fit:cover; object-position:top;} .preview-caption {display:block; margin-top:12px; font-size:0.85rem; color:#888;} .btn-primary {display:inline-block; background:var(--mainColour); color:#fff; padding:12px 24px; border-radius:6px; text-decoration:none; font-weight:600;} .btn-primary:hover {background:var(--mainColourH);} button.btn-primary {font-size:16px; border:rgba(0, 0, 0, 0.35); cursor:pointer;} .agentLangs {display:flex; justify-content:center; align-items:center;} .agentLinks .languageHolder, .agentLangs .languageHolder {margin-left:8px;} .empty-province-hero {background:#FFF; border:1px solid #e2e8f0; border-radius:12px; padding:50px 30px; text-align:center; max-width:700px; margin:40px auto; box-shadow:0 4px 12px rgba(0,0,0,0.03);} .empty-province-hero-icon {display:inline-flex; align-items:center; gap:6px; font-size:1.5rem; font-weight:600; color:#e11d48; background:#fff1f2; padding:4px 10px; margin-bottom:20px; border-radius:20px;} .empty-province-hero h2 {color:#0f172a; font-size:1.5rem; margin-bottom:15px;} .empty-province-hero p {color:#64748b; font-size:1rem; line-height:1.6; margin-bottom:25px;} .empty-province-btns {display:flex; gap:15px; justify-content:center; flex-wrap:wrap;} .agent-province {font-size:0.85rem; color:#64748b;} .agent-card-actions {display:flex; gap:10px; margin-top:20px;} .agent-card-actions .btn-secondary-pricing {flex:1;} .agentProfileWrapper {margin:60px 0;} .agentGridLayout {display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start;} .agentBioColumn {background:#FFF; border-radius:16px; padding:40px; box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05);} .agentProfileLogo {width:100%; text-align:center;} .agentProfileLogo img {width:auto; max-width:100%; height:auto; max-height:60px; object-fit:cover;} .agentProfileBtn {float:right; clear:left; margin:20px 0 20px 15px;} .agentsBioText{line-height:1.7; font-size:1.05rem; margin-bottom:40px;} .pwaLinks {display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; margin:30px 0 0} .agentPreviewColumn {display:flex; justify-content:center;} #phoneFrame, .phoneFrame, .phoneFrameS {background:#0f172a; position:relative; overflow:hidden; box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1); border:4px solid #334155; box-sizing:border-box;} #phoneFrame, .phoneFrame {width:300px; border-radius:40px; padding:12px; } #phoneFrame {height:610px; } .phoneFrame {height:733px; } .phoneFrameS {width:200px; height:488px; border-radius:20px; padding:6px;} #phoneFrame img, .phoneFrame img, #phoneFrame video, .phoneFrame video { width:100%; height:100%; object-fit:cover; border-radius:28px; display:block;} .phoneFrameS img, .phoneFrameS video { width:100%; height:100%; object-fit:cover; border-radius:12px; display:block;} #phoneCamera, .phoneCamera { position:absolute; top:18px; left:50%; transform:translateX(-50%); width:16px; height:16px; background:#0f172a; border-radius:10px; z-index:10;} .phoneFrameS .phoneCamera { top:9px; width:8px; height:8px;} .video-play-btn {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:56px; height:56px; background-color:var(--mainColour); color:#ffffff; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 20px rgba(37, 99, 235, 0.4); transition:transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; z-index:10;} .video-play-btn svg {width:24px; height:24px;} .video-play-btn:hover {transform:translate(-50%, -50%) scale(1.1); background-color:var(--mainColourH);} .phoneFrame.is-playing .video-play-btn {opacity:0; pointer-events:none;} #faqSection {padding:60px 0;} .faqStandalone {background:#FFF;} #faqSection .container {max-width:800px; margin:0 auto; padding:0 20px;} .faqTabs {display:flex; justify-content:center; gap:10px; margin-bottom:40px; flex-wrap:wrap;} .faqTabBtn {background:#f1f5f9; border:none; padding:10px 20px; border-radius:30px; font-size:14px; font-weight:600; color:#475569; cursor:pointer; transition:all 0.5s ease;} .faqTabBtn:hover {background:#CBD5E1;} .faqTabBtn.active {background:var(--mainColour); color:#FFF;} .faqGroup {display:none;} .faqGroup.activeGroup {display:block;} .faqGroup h3 {margin-bottom:20px; font-size:1.2rem; color:var(--mainColour); border-bottom:2px solid #f1f5f9; padding-bottom:8px;} .faqItem {border-bottom:1px solid #e2e8f0; margin-bottom:15px; padding-bottom:15px;} .faqQuestion {background:none; border:none; width:100%; text-align:left; font-size:1.1rem; font-weight:600; color:#1e293b; cursor:pointer; display:flex; justify-content:space-between; align-items:center;} .faqQuestion i {transition:transform 0.3s ease;} .faqQuestion.active i {transform:rotate(180deg);} .faqAnswer {display:none; margin:10px 0 25px; color:#475569; line-height:1.6;} .faqAnswer a {color:var(--mainColour); text-decoration:none;} .faqAnswer a:hover {color:var(--secondColour); text-decoration:none;} .contactInfo {width:100%; display:flex; gap:40px; justify-content:space-evenly; align-items:center; flex-wrap:wrap; margin-bottom:40px;} .infoItem i {color:#51638E;} .legalPage {padding:60px 0; color:#334155; line-height:1.7;} .registerSection {padding:50px 0;} .registerSection .container {max-width:920px; margin:0 auto; padding:0 20px;} .registerForm {text-align:center; margin-bottom:35px;} .registerForm h2 {font-size:1.8rem;} .registerForm p {color:#64748b; margin-bottom:20px;} .registerForm .billing-toggle-wrapper {margin:10px auto 30px;} .registerCard {background:#FFF; padding:35px; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);} #planSummaryBox {background:#F0F9FF; border-left:4px solid var(--mainColour); padding:15px; border-radius:4px; margin-bottom:25px;} #planTitle {color:var(--mainColourH); font-size:1.05rem;} #planDesc {font-size:0.88rem; color:#0c4a6e; margin:3px 0 0 0;} #registerForm h4 {margin-bottom:15px; border-bottom:2px solid #f1f5f9; padding-bottom:8px;} #billingFields {margin-top:30px; padding-top:20px; border-top:1px dashed #cbd5e1;} #entityRadio {display:flex; gap:20px; justify-content:center;} #entityRadio label {display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:0.9rem;} #companyNameGroup {display:none;} #submitBtn {width:100%; background:var(--mainColour); color:#FFF; font-family:"Open Sans", Arial, Verdana, Helvetica; font-weight:700; border:none; padding:15px; border-radius:6px; cursor:pointer; font-size:1.05rem; margin-top:25px;} #submitBtn:hover {background-color:var(--mainColourH);} #submitBtn i {margin-left:8px;} .site-footer {background-color:var(--textColour); color:#94a3b8; padding-top:70px; font-size:0.92rem;} .footer-grid {display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid #1e293b;} .footer-logo-link svg {height:75px; width:auto;} .footer-col h3, .footer-col h4 {color:#FFF; font-weight:700; margin-bottom:20px;} .footer-col h3 {font-size:1.25rem;} .footer-col h4 {font-size:1.05rem; letter-spacing:0.5px;} .footer-brand p {margin-bottom:20px; line-height:1.6;} .footer-social {display:flex; gap:15px;} .footer-social a {background:#1e293b; color:#FFF; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background 0.2s;} .footer-social a:hover {color:#FFF;} .footer-social a.socialFB:hover {background:#3B5998;} .footer-social a.socialX:hover {background:#0f1419;} .footer-links {list-style:none; padding:0; margin:0;} .footer-links li {margin-bottom:12px;} .footer-links a {color:#94a3b8; text-decoration:none; transition:color 0.2s;} .footer-links a:hover {color:#FFF;} .footer-bottom {padding:25px 0; background-color:#0b0f19; font-size:0.85rem;} .footer-bottom-flex {display:flex; justify-content:space-between; align-items:center;} .agency-credit a {color:#38bdf8; text-decoration:none;} .agency-credit a:hover {text-decoration:underline;} #scrollToTop {background:var(--textColour); position:fixed; bottom:0; right:10px; width:49px; height:38px; color:#FFF; font-size:32px; text-align:center; text-decoration:none; opacity:0.6; padding:9px 0; z-index:1040; display:none; box-sizing:content-box; border-radius:7px 7px 0 0; cursor:pointer;} #scrollToTop:hover {opacity:0.9;} @media screen and (min-width:1600px) { #header, #footer, .container {width:75%;} #header {margin:0 12.5%;} #footer, .container {margin:0 12.5%;} #pageGalleryOverlay {left:12.5%; width:75%;} } @media only screen and (max-width:1100px) { .pricing-grid { grid-template-columns:repeat(2, 1fr);} } @media only screen and (min-width:1000px) and (max-width:1599px) { #header, #footer, .container {width:90%;} #header {margin:0 5%;} #footer, .container {margin:0 5%;} #pageGalleryOverlay {left:5%; width:90%;} } @media only screen and (min-width:1000px) { .showMenu {display:none;} nav {float:right; width:100%; height:60px; margin:0;} #mainMenu {float:right; min-height:60px; list-style:none; text-align:center; padding:0; margin:0 auto; position:relative;} #mainMenu ul {float:left; text-align:center; list-style:none; padding:0; margin:0 15px 0 0;} #mainMenu li {float:left; height:60px; list-style:none; display:inline-block; position:relative; padding:0; margin:0 1px; cursor:pointer;} .slidingHeader #mainMenu, .slidingHeader #mainMenu li, .slidingHeader #mainMenu a {height:40px; min-height:40px;} #mainMenu li:last-child {margin-right:0 !important;} #mainMenu a {float:left; height:60px; line-height:58px; color:#FFF; font-size:18px; text-align:center; text-shadow:1px 1px 1px rgba(0, 0, 0, 1); margin:0 15px; position:relative;} .scrHeader #mainMenu a {color:var(--textColour); text-shadow:none;} #mainMenu a:hover, #mainMenu a.selectedPage {color:var(--secondColour); } #mainMenu ul.ddMenu {height:auto;} .ddMenu {left:50%; top:calc(100% + 8px); min-width:250px; background:rgba(255, 255, 255, 0.95); margin:0 0 0 -125px !important; webkit-box-shadow:1px 1px 3px rgba(51, 51, 51, 0.15); -moz-box-shadow:1px 1px 3px rgba(51, 51, 51, 0.15); box-shadow:1px 1px 3px rgba(51, 51, 51, 0.15); transition-duration:0.5s; transition-property:top;} .ddMenu a {width:calc(100% - 2px) !important; color:var(--textColour); !important; margin:0 !important; text-shadow:none !important;} .ddMenu a:hover, .ddMenu a.selectedPage {color:var(--secondColour); !important; text-shadow:none !important;} .languageMenu {right:0;} } @media only screen and (max-width:999px) { #header {width:96%; margin:0 2%;} #footer, .container {width:96%; margin:0 2%;} .showMenu {bottom:0; right:0; display:inline-block;} nav {position:absolute; bottom:0; right:-1%; background:none; width:65px; height:65px; z-index:9997;} #menuContainer {width:100vw; left:-100vw;} #mainMenu {position:fixed; top:0; right:-100%; width:100%; height:100vh; background:rgba(67, 73, 82, 0.95); padding:25px; z-index:-1; transition:transform 0.4s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0s; overflow-y:auto;} #mainMenu ul {margin:75px 0 70px; list-style:none; padding:0;} #mainMenu li {text-align:center; padding:0; border-bottom:1px solid #434952;} #mainMenu li {float:left; width:100%; padding:8px 0; opacity:0; transform:translate3d(0px, 100vh, 0px); transition-delay:0.8s, 0s; transition-duration:0.8s, 0.6s; transition-property:transform, opacity; transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);} #mainMenu li a {width:100%; color:#FFF; text-align:center; padding:5px 10px; cursor:pointer; display:block;} #getAQuote {line-height:30px !important;} #mainMenu a:hover, #mainMenu a.selectedPage {color:var(--secondColour);} .ddMenu {background:none; margin:0 !important; width:100%; min-width:100% !important; right:0 !important; border:none !important; margin:0 0 15px !important; position:relative !important;} .ddmenu a {color:#FFF !important; transition-duration:0.5s;} .ddmenu a:hover {color:#231F20 !important;} nav.is-active, #loginLI, #contactTel {display:block;} #languagesContainer {display:none;} #headerSignin, header h2 {display:none;} nav.is-active #mainMenu {transform:translateX(-100%);} nav.is-active #mainMenu li, nav.is-active #mobSignup, nav.is-active #mobLogin, nav.is-active #languagesContainer {transform:translate3d(0px, 0px, 0px); opacity:1; transition:transform 0.8s ease 0s, opacity 0.6s ease 0s;} nav.is-active #mainMenu li:last-child {border-bottom:none;} nav li:last-child {border-bottom:none;} nav.is-active #mainMenu li:nth-child(2) {transition-delay:0.05s;} nav.is-active #mainMenu li:nth-child(3) {transition-delay:0.1s;} nav.is-active #mainMenu li:nth-child(4) {transition-delay:0.15s;} nav.is-active #mainMenu li:nth-child(5) {transition-delay:0.2s;} nav.is-active #mainMenu li:nth-child(6) {transition-delay:0.25s;} nav.is-active #mainMenu li:nth-child(7) {transition-delay:0.3s;} nav.is-active #mainMenu li:nth-child(8) {transition-delay:0.35s;} nav.is-active #mainMenu li:nth-child(9) {transition-delay:0.4s;} nav.is-active #mainMenu li:nth-child(n+10) {transition-delay:0.45s;} .ddMenu {background:none; margin:0 !important; min-width:100%; min-width:100% !important; right:0 !important; border:none !important; margin:0 0 15px !important; position:relative !important;} .ddmenu a {color:#FFF !important; transition-duration:0.5s;} .ddmenu a:hover {color:#231F20 !important;} nav .languages, nav #google_translate_element, #mLangs {position:absolute; background:none; left:25px; top:25px; margin:0; display:block;} .slidingHeader .languages {top:35px;} .languageHolder {float:left; margin:0;} .languageMenu {top:35px; left:0;} .moreLangs {height:24px; line-height:24px; right:-5px;} .moreLangs i {color:#FFF;} #pageGalleryOverlay {left:2%; width:96%;} } @media (max-width:991px) { } @media (max-width:991px) { .steps-grid {grid-template-columns:repeat(2, 1fr); gap:20px;} .demo-grid-container {flex-direction:column; align-items:center; gap:32px;} .demo-card {max-width:100%; padding:30px 20px 60px;} .demo-link {bottom:20px; right:20px;} } @media only screen and (max-width:900px) { .agentGridLayout {grid-template-columns:1fr !important;} .agent-profile-header-card {flex-direction:column; align-items:flex-start !important;} .footer-grid {grid-template-columns:1fr 1fr; gap:30px;} } @media screen and (min-width:768px) { .formSplitRow {grid-template-columns:1fr 1fr;} } @media only screen and (max-width:767px) { .custom-setup-banner {flex-direction:column; align-items:flex-start; gap:20px; padding:25px;} .setup-action {align-items:stretch; width:100%;} .formSplitRow {grid-template-columns:1fr;} } @media only screen and (min-width:706px) { .phoneDemo .phoneFrame {height:600px;} } @media only screen and (max-width:706px) { .app-demo-rev .howItWorks {flex-direction:column-reverse;} .phoneDemo .phoneFrame {height:300px;} } @media only screen and (max-width:650px) { .pricing-grid { grid-template-columns:1fr;} } @media only screen and (max-width:600px) { .footer-grid {grid-template-columns:1fr;} .footer-bottom-flex {flex-direction:column; gap:10px; text-align:center;} } @media (max-width:576px) { .steps-grid {grid-template-columns:1fr; gap:16px;} .steps-main-title {font-size:1.75rem;} } @media only screen and (max-width:430px) { .billing-label {display:flex; flex-direction:column;} } a {color:var(--textColour); text-decoration:none;} p a {color:var(--mainColour);} a:hover {color:var(--secondColour); text-decoration:none;}